From 721b785033e52e60a0c5f550e188b5ea82e34768 Mon Sep 17 00:00:00 2001 From: Maxim Kadushkin Date: Tue, 4 Apr 2017 18:43:19 +0300 Subject: [PATCH] [DE] processed buttons for image arrangement --- .../main/app/controller/PageLayout.js | 252 ++++++++++++++++++ .../main/app/controller/Toolbar.js | 19 +- apps/documenteditor/main/app/view/Toolbar.js | 132 ++++++++- apps/documenteditor/main/locale/en.json | 5 + 4 files changed, 396 insertions(+), 12 deletions(-) create mode 100644 apps/documenteditor/main/app/controller/PageLayout.js diff --git a/apps/documenteditor/main/app/controller/PageLayout.js b/apps/documenteditor/main/app/controller/PageLayout.js new file mode 100644 index 000000000..470dcc0fb --- /dev/null +++ b/apps/documenteditor/main/app/controller/PageLayout.js @@ -0,0 +1,252 @@ +/* + * + * (c) Copyright Ascensio System Limited 2010-2017 + * + * 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 + * + */ + +/** + * + * PageLayout.js + * + * PageLayout controller + * + * Extra controller for toolbar + * + * Created by Maxim.Kadushkin on 3/31/2017. + */ + +define([ + 'core' +], function () { + 'use strict'; + + DE.Controllers.PageLayout = Backbone.Controller.extend((function(){ + var _imgOriginalProps; + + return { + initialize: function () { + this.addListeners({ + 'Toolbar': { + 'insert:break': function () { + console.log('insert page break'); + } + } + }); + }, + + onLaunch: function (view) { + this.toolbar = view; + this.editMode = true; + + return this; + }, + + onAppReady: function (config) { + var me = this; + + me.toolbar.btnImgAlign.menu.on('item:click', me.onClickMenuAlign.bind(me)); + me.toolbar.btnImgWrapping.menu.on('item:click', me.onClickMenuWrapping.bind(me)); + me.toolbar.btnImgGroup.menu.on('item:click', me.onClickMenuGroup.bind(me)); + me.toolbar.btnImgForward.menu.on('item:click', me.onClickMenuForward.bind(me)); + me.toolbar.btnImgBackward.menu.on('item:click', me.onClickMenuForward.bind(me)); + + me.toolbar.btnImgForward.on('click', me.onClickMenuForward.bind(me, 'forward')); + me.toolbar.btnImgBackward.on('click', me.onClickMenuForward.bind(me, 'backward')); + + me.toolbar.btnsPageBreak.forEach( function(btn) { + var _menu_section_break = btn.menu.items[2].menu; + _menu_section_break.on('item:click', function (menu, item, e) { + me.toolbar.fireEvent('insert:break', [item.value]); + }); + + btn.menu.on('item:click', function (menu, item, e) { + if ( !(item.value == 'section') ) + me.toolbar.fireEvent('insert:break', [item.value]); + }); + + btn.on('click', function(e) { + me.toolbar.fireEvent('insert:break', ['page']); + }); + }); + + }, + + setApi: function (api) { + this.api = api; + + this.api.asc_registerCallback('asc_onImgWrapStyleChanged', this.onApiWrappingStyleChanged.bind(this)); + this.api.asc_registerCallback('asc_onCoAuthoringDisconnect', this.onApiCoAuthoringDisconnect.bind(this)); + this.api.asc_registerCallback('asc_onFocusObject', this.onApiFocusObject.bind(this)); + + return this; + }, + + onApiWrappingStyleChanged: function (type) { + var menu = this.toolbar.btnImgWrapping.menu; + + switch ( type ) { + case Asc.c_oAscWrapStyle2.Inline: menu.items[0].setChecked(true); break; + case Asc.c_oAscWrapStyle2.Square: menu.items[1].setChecked(true); break; + case Asc.c_oAscWrapStyle2.Tight: menu.items[2].setChecked(true); break; + case Asc.c_oAscWrapStyle2.Through: menu.items[3].setChecked(true); break; + case Asc.c_oAscWrapStyle2.TopAndBottom: menu.items[4].setChecked(true); break; + case Asc.c_oAscWrapStyle2.Behind: menu.items[6].setChecked(true); break; + case Asc.c_oAscWrapStyle2.InFront: menu.items[5].setChecked(true); break; + default: + for (var i in menu.items) { + menu.items[i].setChecked( false ); + } + } + }, + + onApiFocusObject: function(objects) { + if (!this.editMode) return; + + var me = this; + var disable = [], type; + + for (var i in objects) { + type = objects[i].get_ObjectType(); + if ( type === Asc.c_oAscTypeSelectElement.Image ) { + var props = objects[i].get_ObjectValue(); + var islocked = props.get_Locked(); + var notflow = !props.get_CanBeFlow(); + + var wrapping = props.get_WrappingStyle(); + me.onApiWrappingStyleChanged(notflow ? -1 : wrapping); + + _.each(me.toolbar.btnImgWrapping.menu.items, function(item) { + item.setDisabled(notflow); + }); + + disable.align = islocked || wrapping == Asc.c_oAscWrapStyle2.Inline; + disable.group = islocked || wrapping == Asc.c_oAscWrapStyle2.Inline; + disable.arrange = wrapping == Asc.c_oAscWrapStyle2.Inline; + disable.wrapping = islocked || props.get_FromGroup() || (notflow && !me.api.CanChangeWrapPolygon()); + + if ( !disable.group ) { + if (me.api.CanGroup() || me.api.CanUnGroup()) { + var mnuGroup = me.toolbar.btnImgGroup.menu.items[0], + mnuUnGroup = me.toolbar.btnImgGroup.menu.items[1]; + + mnuGroup.setDisabled(!me.api.CanGroup()); + mnuUnGroup.setDisabled(!me.api.CanUnGroup()); + } else + disable.group = true; + } + + _imgOriginalProps = props; + break; + } + } + + me.toolbar.btnImgAlign.setDisabled(disable.align !== false); + me.toolbar.btnImgGroup.setDisabled(disable.group !== false); + me.toolbar.btnImgForward.setDisabled(disable.arrange !== false); + me.toolbar.btnImgBackward.setDisabled(disable.arrange !== false); + me.toolbar.btnImgWrapping.setDisabled(disable.wrapping !== false); + }, + + onApiCoAuthoringDisconnect: function() { + var me = this; + me.editMode = false; + + me.toolbar.btnImgAlign.setDisabled(true); + me.toolbar.btnImgGroup.setDisabled(true); + me.toolbar.btnImgForward.setDisabled(true); + me.toolbar.btnImgBackward.setDisabled(true); + me.toolbar.btnImgWrapping.setDisabled(true); + }, + + onClickMenuAlign: function (menu, item, e) { + var props = new Asc.asc_CImgProperty(); + if ( !_.isUndefined(item.options.halign) ) { + props.put_PositionH(new Asc.CImagePositionH()); + props.get_PositionH().put_UseAlign(true); + props.get_PositionH().put_Align(item.options.halign); + props.get_PositionH().put_RelativeFrom(Asc.c_oAscRelativeFromH.Margin); + } else { + props.put_PositionV(new Asc.CImagePositionV()); + props.get_PositionV().put_UseAlign(true); + props.get_PositionV().put_Align(item.options.valign); + props.get_PositionV().put_RelativeFrom(Asc.c_oAscRelativeFromV.Margin); + } + + this.api.ImgApply(props); + this.toolbar.fireEvent('editcomplete', this.toolbar); + }, + + onClickMenuWrapping: function (menu, item, e) { + var props = new Asc.asc_CImgProperty(); + props.put_WrappingStyle(item.options.wrapType); + + if ( _imgOriginalProps.get_WrappingStyle() === Asc.c_oAscWrapStyle2.Inline && item.wrapType !== Asc.c_oAscWrapStyle2.Inline ) { + props.put_PositionH(new Asc.CImagePositionH()); + props.get_PositionH().put_UseAlign(false); + props.get_PositionH().put_RelativeFrom(Asc.c_oAscRelativeFromH.Column); + + var val = _imgOriginalProps.get_Value_X(Asc.c_oAscRelativeFromH.Column); + props.get_PositionH().put_Value(val); + + props.put_PositionV(new Asc.CImagePositionV()); + props.get_PositionV().put_UseAlign(false); + props.get_PositionV().put_RelativeFrom(Asc.c_oAscRelativeFromV.Paragraph); + + val = _imgOriginalProps.get_Value_Y(Asc.c_oAscRelativeFromV.Paragraph); + props.get_PositionV().put_Value(val); + } + + this.api.ImgApply(props); + this.toolbar.fireEvent('editcomplete', this.toolbar); + }, + + onClickMenuGroup: function (menu, item, e) { + var props = new Asc.asc_CImgProperty(); + props.put_Group(item.groupval); + + this.api.ImgApply(props); + this.toolbar.fireEvent('editcomplete', this.toolbar); + }, + + onClickMenuForward: function (menu, item, e) { + var props = new Asc.asc_CImgProperty(); + + if ( menu == 'forward' ) + props.put_ChangeLevel(Asc.c_oAscChangeLevel.BringForward); else + if ( menu == 'backward' ) + props.put_ChangeLevel(Asc.c_oAscChangeLevel.BringBackward); else + props.put_ChangeLevel(item.options.valign); + + this.api.ImgApply(props); + this.toolbar.fireEvent('editcomplete', this.toolbar); + } + } + })()); +}); diff --git a/apps/documenteditor/main/app/controller/Toolbar.js b/apps/documenteditor/main/app/controller/Toolbar.js index 9945d1fb4..f79bce08d 100644 --- a/apps/documenteditor/main/app/controller/Toolbar.js +++ b/apps/documenteditor/main/app/controller/Toolbar.js @@ -54,13 +54,15 @@ define([ 'documenteditor/main/app/view/StyleTitleDialog', 'documenteditor/main/app/view/PageMarginsDialog', 'documenteditor/main/app/view/PageSizeDialog', - 'documenteditor/main/app/view/NoteSettingsDialog' + 'documenteditor/main/app/view/NoteSettingsDialog', + 'documenteditor/main/app/controller/PageLayout' ], function () { 'use strict'; DE.Controllers.Toolbar = Backbone.Controller.extend(_.extend({ models: [], collections: [], + controllers: [], views: [ 'Toolbar' ], @@ -2779,6 +2781,21 @@ define([ }, this); } } + + (new Promise(function(accept) { + accept(); + })).then(function () { + if ( config.isEdit ) { + me.controllers.pageLayout = new DE.Controllers.PageLayout({ + id: 'ImageLayout', + application: me.getApplication() + }); + + me.controllers.pageLayout.onLaunch(me.toolbar) + .setApi(me.api) + .onAppReady(config); + } + }); }, textEmptyImgUrl : 'You need to specify image URL.', diff --git a/apps/documenteditor/main/app/view/Toolbar.js b/apps/documenteditor/main/app/view/Toolbar.js index 6d4d863dd..023b969de 100644 --- a/apps/documenteditor/main/app/view/Toolbar.js +++ b/apps/documenteditor/main/app/view/Toolbar.js @@ -1107,12 +1107,14 @@ define([ cls: 'btn-toolbar', iconCls: 'btn-img-frwd', caption: me.capImgForward, + split: true, menu: true }); me.btnImgBackward = new Common.UI.Button({ cls: 'btn-toolbar', iconCls: 'btn-img-bkwd', caption: me.capImgBackward, + split: true, menu: true }); me.btnImgWrapping = new Common.UI.Button({ @@ -1519,19 +1521,127 @@ define([ ] }); - _menu_section_break.on('item:click', function (menu, item, e) { - me.fireEvent('insert:break', [item.value]); - }); - _menu.on('item:click', function (menu, item, e) { - if ( !(item.value == 'section') ) - me.fireEvent('insert:break', [item.value]); - }); - btn.on('click', function(e) { - me.fireEvent('insert:break', ['page']); - }); - btn.setMenu(_menu); }); + + var _holder_view = DE.getController('DocumentHolder').getView(); + me.btnImgForward.updateHint(me.tipSendForward); + me.btnImgForward.setMenu(new Common.UI.Menu({ + items: [{ + caption : _holder_view.textArrangeFront, + iconCls : 'mnu-arrange-front', + valign : Asc.c_oAscChangeLevel.BringToFront + }, { + caption : _holder_view.textArrangeForward, + iconCls : 'mnu-arrange-forward', + valign : Asc.c_oAscChangeLevel.BringForward + } + ]}) + ); + + me.btnImgBackward.updateHint(me.tipSendBackward); + me.btnImgBackward.setMenu(new Common.UI.Menu({ + items: [{ + caption : _holder_view.textArrangeBack, + iconCls : 'mnu-arrange-back', + valign : Asc.c_oAscChangeLevel.SendToBack + }, { + caption : _holder_view.textArrangeBackward, + iconCls : 'mnu-arrange-backward', + valign : Asc.c_oAscChangeLevel.BringBackward + }] + })); + + me.btnImgAlign.updateHint(me.tipImgAlign); + me.btnImgAlign.setMenu(new Common.UI.Menu({ + items: [{ + caption : _holder_view.textShapeAlignLeft, + iconCls : 'mnu-img-align-left', + halign : Asc.c_oAscAlignH.Left + }, { + caption : _holder_view.textShapeAlignCenter, + iconCls : 'mnu-img-align-center', + halign : Asc.c_oAscAlignH.Center + }, { + caption : _holder_view.textShapeAlignRight, + iconCls : 'mnu-img-align-right', + halign : Asc.c_oAscAlignH.Right + }, { + caption : _holder_view.textShapeAlignTop, + iconCls : 'mnu-img-align-top', + valign : Asc.c_oAscAlignV.Top + }, { + caption : _holder_view.textShapeAlignMiddle, + iconCls : 'mnu-img-align-middle', + valign : Asc.c_oAscAlignV.Center + }, { + caption : _holder_view.textShapeAlignBottom, + iconCls : 'mnu-img-align-bottom', + valign : Asc.c_oAscAlignV.Bottom + }] + })); + + me.btnImgGroup.updateHint(me.tipImgGroup); + me.btnImgGroup.setMenu(new Common.UI.Menu({ + items: [{ + caption : _holder_view.txtGroup, + iconCls : 'mnu-arrange-group', + groupval: 1 + }, { + caption : _holder_view.txtUngroup, + iconCls : 'mnu-arrange-ungroup', + groupval: -1 + }] + })); + + me.btnImgWrapping.updateHint(me.tipImgWrapping); + me.btnImgWrapping.setMenu(new Common.UI.Menu({ + cls: 'ppm-toolbar', + items: [{ + caption : _holder_view.txtInline, + iconCls : 'mnu-wrap-inline', + toggleGroup : 'imgwrapping', + wrapType : Asc.c_oAscWrapStyle2.Inline, + checkable : true + }, { + caption : _holder_view.txtSquare, + iconCls : 'mnu-wrap-square', + toggleGroup : 'imgwrapping', + wrapType : Asc.c_oAscWrapStyle2.Square, + checkable : true + }, { + caption : _holder_view.txtTight, + iconCls : 'mnu-wrap-tight', + toggleGroup : 'imgwrapping', + wrapType : Asc.c_oAscWrapStyle2.Tight, + checkable : true + }, { + caption : _holder_view.txtThrough, + iconCls : 'mnu-wrap-through', + toggleGroup : 'imgwrapping', + wrapType : Asc.c_oAscWrapStyle2.Through, + checkable : true + }, { + caption : _holder_view.txtTopAndBottom, + iconCls : 'mnu-wrap-topAndBottom', + toggleGroup : 'imgwrapping', + wrapType : Asc.c_oAscWrapStyle2.TopAndBottom, + checkable : true + }, { + caption : _holder_view.txtInFront, + iconCls : 'mnu-wrap-inFront', + toggleGroup : 'imgwrapping', + wrapType : Asc.c_oAscWrapStyle2.InFront, + checkable : true + }, { + caption : _holder_view.txtBehind, + iconCls : 'mnu-wrap-behind', + toggleGroup : 'imgwrapping', + wrapType : Asc.c_oAscWrapStyle2.Behind, + checkable : true + } + ] + })); }); }, diff --git a/apps/documenteditor/main/locale/en.json b/apps/documenteditor/main/locale/en.json index 431c3f542..781ed7f0f 100644 --- a/apps/documenteditor/main/locale/en.json +++ b/apps/documenteditor/main/locale/en.json @@ -1587,6 +1587,11 @@ "DE.Views.Toolbar.tipSynchronize": "The document has been changed by another user. Please click to save your changes and reload the updates.", "DE.Views.Toolbar.tipUndo": "Undo", "DE.Views.Toolbar.tipViewSettings": "View Settings", + "DE.Views.Toolbar.tipImgAlign": "Align objects", + "DE.Views.Toolbar.tipImgGroup": "Group objects", + "DE.Views.Toolbar.tipImgWrapping": "Wrap text", + "DE.Views.Toolbar.tipSendForward": "Send forward", + "DE.Views.Toolbar.tipSendBackward": "Send backward", "DE.Views.Toolbar.capBtnInsPagebreak": "Page Break", "DE.Views.Toolbar.capBtnInsImage": "Picture", "DE.Views.Toolbar.capBtnInsTable": "Table",