From 9c65d45fb6a4bd54afa5fc5f34508c663e48ebf6 Mon Sep 17 00:00:00 2001 From: Julia Radzhabova Date: Tue, 6 Dec 2016 17:38:35 +0300 Subject: [PATCH] [PE mobile] Edit hyperlinks. --- apps/presentationeditor/mobile/app-dev.js | 6 +- apps/presentationeditor/mobile/app.js | 6 +- .../mobile/app/controller/add/AddLink.js | 17 +- .../app/controller/edit/EditContainer.js | 4 +- .../mobile/app/controller/edit/EditLink.js | 362 ++++++++++++++++++ .../mobile/app/template/EditLink.template | 175 +++++++++ .../mobile/app/view/add/AddLink.js | 8 - .../mobile/app/view/edit/EditLink.js | 141 +++++++ 8 files changed, 692 insertions(+), 27 deletions(-) create mode 100644 apps/presentationeditor/mobile/app/controller/edit/EditLink.js create mode 100644 apps/presentationeditor/mobile/app/template/EditLink.template create mode 100644 apps/presentationeditor/mobile/app/view/edit/EditLink.js diff --git a/apps/presentationeditor/mobile/app-dev.js b/apps/presentationeditor/mobile/app-dev.js index 2c19f161c..f6a07eee4 100644 --- a/apps/presentationeditor/mobile/app-dev.js +++ b/apps/presentationeditor/mobile/app-dev.js @@ -141,12 +141,11 @@ require([ 'Settings', 'EditContainer', 'EditText', - // 'EditParagraph', 'EditTable', 'EditImage', 'EditShape', // 'EditChart', - // 'EditHyperlink', + 'EditLink', 'AddContainer', 'AddTable', 'AddShape', @@ -206,12 +205,11 @@ require([ 'presentationeditor/mobile/app/controller/Settings', 'presentationeditor/mobile/app/controller/edit/EditContainer', 'presentationeditor/mobile/app/controller/edit/EditText', - // 'presentationeditor/mobile/app/controller/edit/EditParagraph', 'presentationeditor/mobile/app/controller/edit/EditTable', 'presentationeditor/mobile/app/controller/edit/EditImage', 'presentationeditor/mobile/app/controller/edit/EditShape', // 'presentationeditor/mobile/app/controller/edit/EditChart', - // 'presentationeditor/mobile/app/controller/edit/EditHyperlink', + 'presentationeditor/mobile/app/controller/edit/EditLink', 'presentationeditor/mobile/app/controller/add/AddContainer', 'presentationeditor/mobile/app/controller/add/AddTable', 'presentationeditor/mobile/app/controller/add/AddShape', diff --git a/apps/presentationeditor/mobile/app.js b/apps/presentationeditor/mobile/app.js index bb382e486..596a997c1 100644 --- a/apps/presentationeditor/mobile/app.js +++ b/apps/presentationeditor/mobile/app.js @@ -152,12 +152,11 @@ require([ // 'Settings', // 'EditContainer', 'EditText', - // 'EditParagraph' 'EditTable', 'EditImage', 'EditShape', // 'EditChart', - // 'EditHyperlink', + 'EditLink', 'AddContainer', 'AddTable', 'AddShape', @@ -217,12 +216,11 @@ require([ // 'presentationeditor/mobile/app/controller/Settings', 'presentationeditor/mobile/app/controller/edit/EditContainer', 'presentationeditor/mobile/app/controller/edit/EditText', - // 'presentationeditor/mobile/app/controller/edit/EditParagraph' 'presentationeditor/mobile/app/controller/edit/EditTable', 'presentationeditor/mobile/app/controller/edit/EditImage', 'presentationeditor/mobile/app/controller/edit/EditShape', // 'presentationeditor/mobile/app/controller/edit/EditChart', - // 'presentationeditor/mobile/app/controller/edit/EditHyperlink', + 'presentationeditor/mobile/app/controller/edit/EditLink', 'presentationeditor/mobile/app/controller/add/AddContainer', 'presentationeditor/mobile/app/controller/add/AddTable', 'presentationeditor/mobile/app/controller/add/AddShape', diff --git a/apps/presentationeditor/mobile/app/controller/add/AddLink.js b/apps/presentationeditor/mobile/app/controller/add/AddLink.js index 31341045a..768c3f4a3 100644 --- a/apps/presentationeditor/mobile/app/controller/add/AddLink.js +++ b/apps/presentationeditor/mobile/app/controller/add/AddLink.js @@ -46,8 +46,7 @@ define([ 'use strict'; PE.Controllers.AddLink = Backbone.Controller.extend(_.extend((function() { - var _linkObject = undefined, - c_oHyperlinkType = { + var c_oHyperlinkType = { InternalLink:0, WebLink: 1 }, @@ -105,11 +104,15 @@ define([ var $target = $(e.currentTarget); if ($target && $target.prop('id') === 'add-link') { + _linkType = c_oHyperlinkType.WebLink; + _slideLink = _slideNum = 0; + _isDisplayChanged = false; var text = this.api.can_AddHyperlink(); if (text !== false) { - _linkObject = new Asc.CHyperlinkProperty(); - _linkObject.put_Text(text); + $('#add-link-display input').val((text !== null) ? text : this.textDefault); + $('#add-link-display').toggleClass('disabled', text === null); } + this.initSettings(); } }, @@ -123,11 +126,7 @@ define([ _slidesCount = me.api.getCountPages(); $('#page-addlink-slidenumber input').val([_slideLink]); $('#addlink-slide-number .item-after label').text(_slideNum+1); - } else if (_linkObject) { - var text = _linkObject.get_Text(); - $('#add-link-display input').val((text!==null) ? text : me.textDefault); - $('#add-link-display').toggleClass('disabled',text===null); - + } else { $('#add-link-type .item-after').text((_linkType==c_oHyperlinkType.WebLink) ? me.textExternalLink : me.textInternalLink); $('#add-link-url')[(_linkType==c_oHyperlinkType.WebLink) ? 'show' : 'hide'](); $('#add-link-number')[(_linkType==c_oHyperlinkType.WebLink) ? 'hide' : 'show'](); diff --git a/apps/presentationeditor/mobile/app/controller/edit/EditContainer.js b/apps/presentationeditor/mobile/app/controller/edit/EditContainer.js index 1cfa69a93..867fb2ba4 100644 --- a/apps/presentationeditor/mobile/app/controller/edit/EditContainer.js +++ b/apps/presentationeditor/mobile/app/controller/edit/EditContainer.js @@ -157,7 +157,7 @@ define([ editors.push({ caption: me.textHyperlink, id: 'edit-link', - layout: PE.getController('EditHyperlink').getView('EditHyperlink').rootLayout() + layout: PE.getController('EditLink').getView('EditLink').rootLayout() }) } } @@ -334,7 +334,7 @@ define([ _settings.push('shape'); no_text = false; } else if (Asc.c_oAscTypeSelectElement.Hyperlink == type) { - // _settings.push('hyperlink'); + _settings.push('hyperlink'); } }); if (!no_text) diff --git a/apps/presentationeditor/mobile/app/controller/edit/EditLink.js b/apps/presentationeditor/mobile/app/controller/edit/EditLink.js new file mode 100644 index 000000000..efdbd0970 --- /dev/null +++ b/apps/presentationeditor/mobile/app/controller/edit/EditLink.js @@ -0,0 +1,362 @@ +/* + * + * (c) Copyright Ascensio System Limited 2010-2016 + * + * This program is a free software product. You can redistribute it and/or + * modify it under the terms of the GNU Affero General Public License (AGPL) + * version 3 as published by the Free Software Foundation. In accordance with + * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect + * that Ascensio System SIA expressly excludes the warranty of non-infringement + * of any third-party rights. + * + * This program is distributed WITHOUT ANY WARRANTY; without even the implied + * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. For + * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html + * + * You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia, + * EU, LV-1021. + * + * The interactive user interfaces in modified source and object code versions + * of the Program must display Appropriate Legal Notices, as required under + * Section 5 of the GNU AGPL version 3. + * + * Pursuant to Section 7(b) of the License you must retain the original Product + * logo when distributing the program. Pursuant to Section 7(e) we decline to + * grant you any rights under trademark law for use of our trademarks. + * + * All the Product's GUI elements, including illustrations and icon sets, as + * well as technical writing content are licensed under the terms of the + * Creative Commons Attribution-ShareAlike 4.0 International. See the License + * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode + * + */ + +/** + * EditLink.js + * Presentation Editor + * + * Created by Julia Radzhabova on 12/06/16 + * Copyright (c) 2016 Ascensio System SIA. All rights reserved. + * + */ + + +define([ + 'core', + 'presentationeditor/mobile/app/view/edit/EditLink' +], function (core) { + 'use strict'; + + PE.Controllers.EditLink = Backbone.Controller.extend(_.extend((function() { + // Private + var _stack = [], + _linkObject = undefined, + c_oHyperlinkType = { + InternalLink:0, + WebLink: 1 + }, + c_oSlideLink = { + Next: 0, + Previouse: 1, + Last: 2, + First: 3, + Num: 4 + }, + _linkType = c_oHyperlinkType.WebLink, + _slideLink = 0, + _slideNum = 0, + _slidesCount = 0, + _isDisplayChanged = false; + + return { + models: [], + collections: [], + views: [ + 'EditLink' + ], + + initialize: function () { + Common.NotificationCenter.on('editcontainer:show', _.bind(this.initEvents, this)); + Common.NotificationCenter.on('editcategory:show', _.bind(this.categoryShow, this)); + + this.addListeners({ + 'EditLink': { + 'page:show' : this.onPageShow + } + }); + + var me = this; + uiApp.onPageBack('editlink-type editlink-slidenumber', function (page) { + me.initSettings(); + }); + }, + + setApi: function (api) { + var me = this; + me.api = api; + + me.api.asc_registerCallback('asc_onFocusObject', _.bind(me.onApiFocusObject, me)); + }, + + onLaunch: function () { + this.createView('EditLink').render(); + }, + + initEvents: function () { + var me = this; + + $('#edit-link-edit').single('click', _.bind(me.onEditLink, me)); + $('#edit-link-remove').single('click', _.bind(me.onRemoveLink, me)); + }, + + categoryShow: function (e) { + var $target = $(e.currentTarget); + + if ($target && $target.prop('id') === 'edit-link' && _linkObject) { + var url = _linkObject.get_Value(); + if (url===null || url===undefined || url=='' ) + _linkType = c_oHyperlinkType.WebLink; + else { + var indAction = url.indexOf("ppaction://hlink"); + if (0 == indAction) { + if (url == "ppaction://hlinkshowjump?jump=firstslide") { + _slideLink = 2; + } else if (url == "ppaction://hlinkshowjump?jump=lastslide") { + _slideLink = 3; + } + else if (url == "ppaction://hlinkshowjump?jump=nextslide") { + _slideLink = 0; + } + else if (url == "ppaction://hlinkshowjump?jump=previousslide") { + _slideLink = 1; + } + else { + _slideLink = 4; + _slidesCount = this.api.getCountPages(); + var mask = "ppaction://hlinksldjumpslide", + indSlide = url.indexOf(mask); + if (0 == indSlide) { + _slideNum = parseInt(url.substring(mask.length)); + if (_slideNum < 0) _slideNum = 0; + if (_slideNum >= _slidesCount) _slideNum = _slidesCount - 1; + } else + _slideNum = 0; + } + _linkType = c_oHyperlinkType.InternalLink; + } else { + _linkType = c_oHyperlinkType.WebLink; + } + } + + var text = _linkObject.get_Text(); + if (text !== false) { + $('#edit-link-display input').val((text !== null) ? text : this.textDefault); + $('#edit-link-display').toggleClass('disabled', text === null); + } + if (_linkType==c_oHyperlinkType.WebLink) { + var value = _linkObject.get_Value(); + $('#edit-link-url input').val(value ? [value.replace(new RegExp(" ", 'g'), "%20")] : ''); + } + $('#edit-link-tip input').val([_linkObject.get_ToolTip()]); + + this.initSettings(); + } + }, + + initSettings: function (pageId) { + var me = this; + + if (pageId == '#editlink-type') { + $('#page-editlink-type input').val([_linkType]); + } else if (pageId == '#editlink-slidenumber') { + _slidesCount = me.api.getCountPages(); + $('#page-editlink-slidenumber input').val([_slideLink]); + $('#editlink-slide-number .item-after label').text(_slideNum+1); + } else { + $('#edit-link-type .item-after').text((_linkType==c_oHyperlinkType.WebLink) ? me.textExternalLink : me.textInternalLink); + $('#edit-link-url')[(_linkType==c_oHyperlinkType.WebLink) ? 'show' : 'hide'](); + $('#edit-link-number')[(_linkType==c_oHyperlinkType.WebLink) ? 'hide' : 'show'](); + + if (_linkType==c_oHyperlinkType.WebLink) { + _.delay(function () { + $('.page[data-page=editlink-link] input[type=url]').focus(); + }, 1000); + } else { + var slidename = ''; + switch (_slideLink) { + case 0: + slidename = me.textNext; + break; + case 1: + slidename = me.textPrev; + break; + case 2: + slidename = me.textFirst; + break; + case 3: + slidename = me.textLast; + break; + case 4: + slidename = me.textSlide + ' ' + (_slideNum+1); + break; + } + $('#edit-link-number .item-after').text(slidename); + } + + $('#edit-link-edit').toggleClass('disabled', (_linkType==c_oHyperlinkType.WebLink) && _.isEmpty($('#edit-link-url input').val())); + } + }, + + onPageShow: function (view, pageId) { + var me = this; + + $('#page-editlink-type li').single('click', _.buffered(me.onLinkType, 100, me)); + $('#page-editlink-slidenumber li').single('click', _.buffered(me.onSlideLink, 100, me)); + $('#editlink-slide-number .button').single('click',_.buffered(me.onSlideNumber, 100, me)); + $('#edit-link-display input[type="text"]').single('input', _.bind(function(e) { + _isDisplayChanged = true; + }, this)); + me.initSettings(pageId); + }, + + // Handlers + + onEditLink: function () { + var me = this, + display = $('#edit-link-display input').val(), + tip = $('#edit-link-tip input').val(), + props = new Asc.CHyperlinkProperty(), + def_display = ''; + + if (_linkType==c_oHyperlinkType.WebLink) { + var url = $('#edit-link-url input').val(), + urltype = me.api.asc_getUrlType($.trim(url)), + isEmail = (urltype == 2); + if (urltype < 1) { + uiApp.alert(me.txtNotUrl); + return; + } + + url = url.replace(/^\s+|\s+$/g,''); + if (! /(((^https?)|(^ftp)):\/\/)|(^mailto:)/i.test(url) ) + url = (isEmail ? 'mailto:' : 'http://' ) + url; + url = url.replace(new RegExp("%20",'g')," "); + + props.put_Value( url ); + props.put_ToolTip(tip); + def_display = url; + } else { + var url = "ppaction://hlink"; + var slidetip = ''; + switch (_slideLink) { + case 0: + url = url + "showjump?jump=nextslide"; + slidetip = this.textNext; + break; + case 1: + url = url + "showjump?jump=previousslide"; + slidetip = this.textPrev; + break; + case 2: + url = url + "showjump?jump=firstslide"; + slidetip = this.textFirst; + break; + case 3: + url = url + "showjump?jump=lastslide"; + slidetip = this.textLast; + break; + case 4: + url = url + "sldjumpslide" + _slideNum; + slidetip = this.textSlide + ' ' + (_slideNum+1); + break; + } + props.put_Value( url ); + props.put_ToolTip(_.isEmpty(tip) ? slidetip : tip); + def_display = slidetip; + } + + if (!$('#edit-link-display').hasClass('disabled') && (_isDisplayChanged || _.isEmpty(display))) { + props.put_Text(_.isEmpty(display) ? def_display : display); + } else + props.put_Text(null); + + me.api.change_Hyperlink(props); + + PE.getController('EditContainer').hideModal(); + }, + + onRemoveLink: function () { + this.api && this.api.remove_Hyperlink(); + PE.getController('EditContainer').hideModal(); + }, + + onLinkType: function (e) { + var $target = $(e.currentTarget).find('input'); + + if ($target && this.api) { + _linkType = parseFloat($target.prop('value')); + } + }, + + onSlideLink: function (e) { + var $target = $(e.currentTarget).find('input'); + + if ($target && this.api) { + _slideLink = parseFloat($target.prop('value')); + } + }, + + onSlideNumber: function (e) { + var $button = $(e.currentTarget), + slide = _slideNum; + + if ($button.hasClass('decrement')) { + slide = Math.max(0, --slide); + } else { + slide = Math.min(_slidesCount-1, ++slide); + } + _slideNum = slide; + $('#editlink-slide-number .item-after label').text(slide+1); + }, + + // API handlers + + onApiFocusObject: function (objects) { + _stack = objects; + + var links = []; + + _.each(_stack, function (object) { + if (object.get_ObjectType() == Asc.c_oAscTypeSelectElement.Hyperlink) { + links.push(object); + } + }); + + if (links.length > 0) { + var object = links[links.length - 1]; // get top + _linkObject = object.get_ObjectValue(); + } else { + _linkObject = undefined; + } + }, + + // Helpers + + _closeIfNeed: function () { + if (!this._isImageInStack()) { + PE.getController('EditContainer').hideModal(); + } + }, + + txtNotUrl: 'This field should be a URL in the format \"http://www.example.com\"', + textDefault: 'Selected text', + textNext: 'Next Slide', + textPrev: 'Previous Slide', + textFirst: 'First Slide', + textLast: 'Last Slide', + textSlide: 'Slide', + textExternalLink: 'External Link', + textInternalLink: 'Slide in this Presentation' + }; + })(), PE.Controllers.EditLink || {})) +}); \ No newline at end of file diff --git a/apps/presentationeditor/mobile/app/template/EditLink.template b/apps/presentationeditor/mobile/app/template/EditLink.template new file mode 100644 index 000000000..af56452c5 --- /dev/null +++ b/apps/presentationeditor/mobile/app/template/EditLink.template @@ -0,0 +1,175 @@ + + + + + + + + \ No newline at end of file diff --git a/apps/presentationeditor/mobile/app/view/add/AddLink.js b/apps/presentationeditor/mobile/app/view/add/AddLink.js index f92bd8686..cbc7b169e 100644 --- a/apps/presentationeditor/mobile/app/view/add/AddLink.js +++ b/apps/presentationeditor/mobile/app/view/add/AddLink.js @@ -68,8 +68,6 @@ define([ $('#add-link-number').single('click', _.bind(me.showPageNumber, me)); $('#add-link-type').single('click', _.bind(me.showLinkType, me)); - - me.initControls(); }, // Render layout @@ -93,10 +91,6 @@ define([ return ''; }, - initControls: function () { - // - }, - showPage: function (templateId) { var rootView = PE.getController('AddContainer').rootView; @@ -139,8 +133,6 @@ define([ textFirst: 'First Slide', textLast: 'Last Slide', textNumber: 'Slide Number' - - } })(), PE.Views.AddLink || {})) }); \ No newline at end of file diff --git a/apps/presentationeditor/mobile/app/view/edit/EditLink.js b/apps/presentationeditor/mobile/app/view/edit/EditLink.js new file mode 100644 index 000000000..853f49975 --- /dev/null +++ b/apps/presentationeditor/mobile/app/view/edit/EditLink.js @@ -0,0 +1,141 @@ +/* + * + * (c) Copyright Ascensio System Limited 2010-2016 + * + * This program is a free software product. You can redistribute it and/or + * modify it under the terms of the GNU Affero General Public License (AGPL) + * version 3 as published by the Free Software Foundation. In accordance with + * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect + * that Ascensio System SIA expressly excludes the warranty of non-infringement + * of any third-party rights. + * + * This program is distributed WITHOUT ANY WARRANTY; without even the implied + * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. For + * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html + * + * You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia, + * EU, LV-1021. + * + * The interactive user interfaces in modified source and object code versions + * of the Program must display Appropriate Legal Notices, as required under + * Section 5 of the GNU AGPL version 3. + * + * Pursuant to Section 7(b) of the License you must retain the original Product + * logo when distributing the program. Pursuant to Section 7(e) we decline to + * grant you any rights under trademark law for use of our trademarks. + * + * All the Product's GUI elements, including illustrations and icon sets, as + * well as technical writing content are licensed under the terms of the + * Creative Commons Attribution-ShareAlike 4.0 International. See the License + * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode + * + */ + +/** + * EditLink.js + * Presentation Editor + * + * Created by Julia Radzhabova on 12/06/16 + * Copyright (c) 2016 Ascensio System SIA. All rights reserved. + * + */ + + +define([ + 'text!presentationeditor/mobile/app/template/EditLink.template', + 'jquery', + 'underscore', + 'backbone' +], function (editTemplate, $, _, Backbone) { + 'use strict'; + + PE.Views.EditLink = Backbone.View.extend(_.extend((function() { + // private + + return { + // el: '.view-main', + + template: _.template(editTemplate), + + events: { + }, + + initialize: function () { + Common.NotificationCenter.on('editcontainer:show', _.bind(this.initEvents, this)); + }, + + initEvents: function () { + var me = this; + + $('#edit-link-number').single('click', _.bind(me.showPageNumber, me)); + $('#edit-link-type').single('click', _.bind(me.showLinkType, me)); + }, + + // Render layout + render: function () { + this.layout = $('
').append(this.template({ + android : Common.SharedSettings.get('android'), + phone : Common.SharedSettings.get('phone'), + scope : this + })); + + return this; + }, + + rootLayout: function () { + if (this.layout) { + return this.layout + .find('#edit-link-root') + .html(); + } + + return ''; + }, + + showPage: function (templateId) { + var rootView = PE.getController('EditContainer').rootView; + + if (rootView && this.layout) { + var $content = this.layout.find(templateId); + + // Android fix for navigation + if (Framework7.prototype.device.android) { + $content.find('.page').append($content.find('.navbar')); + } + + rootView.router.load({ + content: $content.html() + }); + + this.fireEvent('page:show', [this, templateId]); + } + }, + + showLinkType: function () { + this.showPage('#editlink-type'); + }, + + showPageNumber: function () { + this.showPage('#editlink-slidenumber'); + }, + + textLinkType: 'Link Type', + textExternalLink: 'External Link', + textInternalLink: 'Slide in this Presentation', + textLink: 'Link', + textLinkSlide: 'Link to', + textBack: 'Back', + textAddLink: 'Add Link', + textDisplay: 'Display', + textTip: 'Screen Tip', + textInsert: 'Insert', + textNext: 'Next Slide', + textPrev: 'Previous Slide', + textFirst: 'First Slide', + textLast: 'Last Slide', + textNumber: 'Slide Number', + textEdit: 'Edit Link', + textRemove: 'Remove Link' + } + })(), PE.Views.EditLink || {})) +}); \ No newline at end of file