Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

[DE] processed buttons for image arrangement

Browse source
This commit is contained in:
Maxim Kadushkin 2017-04-04 18:43:19 +03:00
parent 375b2e400f
commit 721b785033
4 changed files with 396 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

252
apps/documenteditor/main/app/controller/PageLayout.js Normal file
View file

@ -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);
}
}
})());
});

19
apps/documenteditor/main/app/controller/Toolbar.js
View file

@ -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.',

132
apps/documenteditor/main/app/view/Toolbar.js
View file

@ -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
}
]
}));
});
},

5
apps/documenteditor/main/locale/en.json
View file

@ -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",