diff --git a/apps/common/main/lib/component/Button.js b/apps/common/main/lib/component/Button.js index 0d11e6c0d..d6ff973a4 100644 --- a/apps/common/main/lib/component/Button.js +++ b/apps/common/main/lib/component/Button.js @@ -218,7 +218,7 @@ define([ style : me.style })); - if (me.menu && _.isFunction(me.menu.render)) + if (me.menu && _.isObject(me.menu) && _.isFunction(me.menu.render)) me.menu.render(me.cmpEl); parentEl.html(me.cmpEl); @@ -379,7 +379,7 @@ define([ } if (me.disabled) { - me.setDisabled(me.disabled); + me.setDisabled(!(me.disabled=false)); } me.trigger('render:after', me); @@ -414,7 +414,7 @@ define([ }, setDisabled: function(disabled) { - if (this.rendered) { + if (this.rendered && this.disabled != disabled) { var el = this.cmpEl, isGroup = el.hasClass('btn-group'); @@ -489,6 +489,13 @@ define([ } } } + }, + + setMenu: function (m) { + if (m && _.isObject(m) && _.isFunction(m.render)){ + this.menu = m; + this.menu.render(this.cmpEl); + } } }); }); diff --git a/apps/common/main/lib/component/ComboBox.js b/apps/common/main/lib/component/ComboBox.js index 490c83490..fbcb1b658 100644 --- a/apps/common/main/lib/component/ComboBox.js +++ b/apps/common/main/lib/component/ComboBox.js @@ -188,13 +188,6 @@ define([ Common.NotificationCenter.on('menumanager:hideall', _.bind(me.closeMenu, me)); - this.scroller = new Common.UI.Scroller({ - el: $('.dropdown-menu', me.cmpEl), - minScrollbarLength : 40, - scrollYMarginOffset: 30, - includePadding : true - }); - // set default selection this.setDefaultSelection(); @@ -232,6 +225,15 @@ define([ }, onBeforeShowMenu: function(e) { + if ( !this.scroller ) { + this.scroller = new Common.UI.Scroller(_.extend({ + el: $('.dropdown-menu', this.cmpEl), + minScrollbarLength: 40, + scrollYMarginOffset: 30, + includePadding: true + }, this.options.scroller)); + } + Common.NotificationCenter.trigger('menu:show'); this.trigger('show:before', this, e); if (this.options.hint) { @@ -525,12 +527,12 @@ define([ this.scroller.destroy(); delete this.scroller; } - this.scroller = new Common.UI.Scroller({ + this.scroller = new Common.UI.Scroller(_.extend({ el: $('.dropdown-menu', this.cmpEl), minScrollbarLength : 40, scrollYMarginOffset: 30, includePadding : true - }); + }, this.options.scroller)); } } })()); diff --git a/apps/common/main/lib/component/ComboBoxFonts.js b/apps/common/main/lib/component/ComboBoxFonts.js index e77d60a5b..fca307a43 100644 --- a/apps/common/main/lib/component/ComboBoxFonts.js +++ b/apps/common/main/lib/component/ComboBoxFonts.js @@ -85,11 +85,14 @@ define([ initialize : function(options) { Common.UI.ComboBox.prototype.initialize.call(this, _.extend(options, { - displayField: 'name' + displayField: 'name', + scroller: { + alwaysVisibleY: true, + onChange: this.updateVisibleFontsTiles.bind(this) + } })); this.recent = _.isNumber(options.recent) ? options.recent : 3; - this.bindUpdateVisibleFontsTiles = _.bind(this.updateVisibleFontsTiles, this); Common.NotificationCenter.on('fonts:change', _.bind(this.onApiChangeFont, this)); Common.NotificationCenter.on('fonts:load', _.bind(this.fillFonts, this)); @@ -109,8 +112,6 @@ define([ this._input.on('keyup', _.bind(this.onInputKeyUp, this)); this._input.on('keydown', _.bind(this.onInputKeyDown, this)); - this.scroller.update({alwaysVisibleY: true, onChange:this.bindUpdateVisibleFontsTiles}); - return this; }, diff --git a/apps/documenteditor/main/app/controller/Main.js b/apps/documenteditor/main/app/controller/Main.js index 0a65e779f..6b8a261cc 100644 --- a/apps/documenteditor/main/app/controller/Main.js +++ b/apps/documenteditor/main/app/controller/Main.js @@ -851,7 +851,7 @@ define([ if (window.styles_loaded) { clearInterval(timer_sl); - toolbarController.getView('Toolbar').createDelayedElements(); + toolbarController.createDelayedElements(); documentHolderController.getView('DocumentHolder').createDelayedElements(); me.loadLanguages(); diff --git a/apps/documenteditor/main/app/controller/Toolbar.js b/apps/documenteditor/main/app/controller/Toolbar.js index d937af43c..30c7ee918 100644 --- a/apps/documenteditor/main/app/controller/Toolbar.js +++ b/apps/documenteditor/main/app/controller/Toolbar.js @@ -166,7 +166,7 @@ define([ // Create toolbar view this.toolbar = this.createView('Toolbar'); - this.toolbar.on('render:after', _.bind(this.onToolbarAfterRender, this)); + // this.toolbar.on('render:after', _.bind(this.onToolbarAfterRender, this)); }, onToolbarAfterRender: function(toolbar) { @@ -2627,6 +2627,11 @@ define([ me._mailMergeDlg.show(); }, + createDelayedElements: function() { + this.toolbar.createDelayedElements(); + this.onToolbarAfterRender(this.toolbar); + }, + textEmptyImgUrl : 'You need to specify image URL.', textWarning : 'Warning', textFontSizeErr : 'The entered value is incorrect.
Please enter a numeric value between 1 and 100', diff --git a/apps/documenteditor/main/app/view/ChartSettings.js b/apps/documenteditor/main/app/view/ChartSettings.js index c202e3d34..0685cd7f6 100644 --- a/apps/documenteditor/main/app/view/ChartSettings.js +++ b/apps/documenteditor/main/app/view/ChartSettings.js @@ -63,7 +63,6 @@ define([ }, initialize: function () { - var me = this; this._initSettings = true; this._state = { @@ -85,133 +84,8 @@ define([ this.render(); - var viewData = [ - { offsetx: 0, data: Asc.c_oAscWrapStyle2.Inline, iconCls:'wrap-inline', tip: this.txtInline, selected: true }, - { offsetx: 50, data: Asc.c_oAscWrapStyle2.Square, iconCls:'wrap-square', tip: this.txtSquare }, - { offsetx: 100, data: Asc.c_oAscWrapStyle2.Tight, iconCls:'wrap-tight', tip: this.txtTight }, - { offsetx: 150, data: Asc.c_oAscWrapStyle2.Through, iconCls:'wrap-through', tip: this.txtThrough }, - { offsetx: 200, data: Asc.c_oAscWrapStyle2.TopAndBottom, iconCls:'wrap-topAndBottom', tip: this.txtTopAndBottom }, - { offsetx: 250, data: Asc.c_oAscWrapStyle2.InFront, iconCls:'wrap-inFront', tip: this.txtInFront }, - { offsetx: 300, data: Asc.c_oAscWrapStyle2.Behind, iconCls:'wrap-behind', tip: this.txtBehind } - ]; - - this.btnWrapType = new Common.UI.Button({ - cls : 'btn-large-dataview', - iconCls : 'item-wrap wrap-inline', - menu : new Common.UI.Menu({ - items: [ - { template: _.template('
') } - ] - }) - }); - this.btnWrapType.on('render:after', function(btn) { - me.mnuWrapPicker = new Common.UI.DataView({ - el: $('#id-chart-menu-wrap'), - parentMenu: btn.menu, - store: new Common.UI.DataViewStore(viewData), - itemTemplate: _.template('
') - }); - }); - this.btnWrapType.render($('#chart-button-wrap')); - this.mnuWrapPicker.on('item:click', _.bind(this.onSelectWrap, this, this.btnWrapType)); - this.lockedControls.push(this.btnWrapType); - - this.btnChartType = new Common.UI.Button({ - cls : 'btn-large-dataview', - iconCls : 'item-chartlist bar-normal', - menu : new Common.UI.Menu({ - style: 'width: 560px;', - items: [ - { template: _.template('') } - ] - }) - }); - this.btnChartType.on('render:after', function(btn) { - me.mnuChartTypePicker = new Common.UI.DataView({ - el: $('#id-chart-menu-type'), - parentMenu: btn.menu, - restoreHeight: 411, - groups: new Common.UI.DataViewGroupStore([ - { id: 'menu-chart-group-bar', caption: me.textColumn }, - { id: 'menu-chart-group-line', caption: me.textLine }, - { id: 'menu-chart-group-pie', caption: me.textPie }, - { id: 'menu-chart-group-hbar', caption: me.textBar }, - { id: 'menu-chart-group-area', caption: me.textArea }, - { id: 'menu-chart-group-scatter', caption: me.textPoint }, - { id: 'menu-chart-group-stock', caption: me.textStock } - ]), - store: new Common.UI.DataViewStore([ - { group: 'menu-chart-group-bar', type: Asc.c_oAscChartTypeSettings.barNormal, iconCls: 'column-normal', selected: true}, - { group: 'menu-chart-group-bar', type: Asc.c_oAscChartTypeSettings.barStacked, iconCls: 'column-stack'}, - { group: 'menu-chart-group-bar', type: Asc.c_oAscChartTypeSettings.barStackedPer, iconCls: 'column-pstack'}, - { group: 'menu-chart-group-bar', type: Asc.c_oAscChartTypeSettings.barNormal3d, iconCls: 'column-3d-normal'}, - { group: 'menu-chart-group-bar', type: Asc.c_oAscChartTypeSettings.barStacked3d, iconCls: 'column-3d-stack'}, - { group: 'menu-chart-group-bar', type: Asc.c_oAscChartTypeSettings.barStackedPer3d, iconCls: 'column-3d-pstack'}, - { group: 'menu-chart-group-bar', type: Asc.c_oAscChartTypeSettings.barNormal3dPerspective, iconCls: 'column-3d-normal-per'}, - { group: 'menu-chart-group-line', type: Asc.c_oAscChartTypeSettings.lineNormal, iconCls: 'line-normal'}, - { group: 'menu-chart-group-line', type: Asc.c_oAscChartTypeSettings.lineStacked, iconCls: 'line-stack'}, - { group: 'menu-chart-group-line', type: Asc.c_oAscChartTypeSettings.lineStackedPer, iconCls: 'line-pstack'}, - { group: 'menu-chart-group-line', type: Asc.c_oAscChartTypeSettings.line3d, iconCls: 'line-3d'}, - { group: 'menu-chart-group-pie', type: Asc.c_oAscChartTypeSettings.pie, iconCls: 'pie-normal'}, - { group: 'menu-chart-group-pie', type: Asc.c_oAscChartTypeSettings.doughnut, iconCls: 'pie-doughnut'}, - { group: 'menu-chart-group-pie', type: Asc.c_oAscChartTypeSettings.pie3d, iconCls: 'pie-3d-normal'}, - { group: 'menu-chart-group-hbar', type: Asc.c_oAscChartTypeSettings.hBarNormal, iconCls: 'bar-normal'}, - { group: 'menu-chart-group-hbar', type: Asc.c_oAscChartTypeSettings.hBarStacked, iconCls: 'bar-stack'}, - { group: 'menu-chart-group-hbar', type: Asc.c_oAscChartTypeSettings.hBarStackedPer, iconCls: 'bar-pstack'}, - { group: 'menu-chart-group-hbar', type: Asc.c_oAscChartTypeSettings.hBarNormal3d, iconCls: 'bar-3d-normal'}, - { group: 'menu-chart-group-hbar', type: Asc.c_oAscChartTypeSettings.hBarStacked3d, iconCls: 'bar-3d-stack'}, - { group: 'menu-chart-group-hbar', type: Asc.c_oAscChartTypeSettings.hBarStackedPer3d, iconCls: 'bar-3d-pstack'}, - { group: 'menu-chart-group-area', type: Asc.c_oAscChartTypeSettings.areaNormal, iconCls: 'area-normal'}, - { group: 'menu-chart-group-area', type: Asc.c_oAscChartTypeSettings.areaStacked, iconCls: 'area-stack'}, - { group: 'menu-chart-group-area', type: Asc.c_oAscChartTypeSettings.areaStackedPer, iconCls: 'area-pstack'}, - { group: 'menu-chart-group-scatter', type: Asc.c_oAscChartTypeSettings.scatter, iconCls: 'point-normal'}, - { group: 'menu-chart-group-stock', type: Asc.c_oAscChartTypeSettings.stock, iconCls: 'stock-normal'} - ]), - itemTemplate: _.template('
') - }); - }); - this.btnChartType.render($('#chart-button-type')); - this.mnuChartTypePicker.on('item:click', _.bind(this.onSelectType, this, this.btnChartType)); - this.lockedControls.push(this.btnChartType); - - this.btnChartStyle = new Common.UI.Button({ - cls : 'btn-large-dataview', - iconCls : 'item-wrap', - menu : new Common.UI.Menu({ - menuAlign: 'tr-br', - items: [ - { template: _.template('
') } - ] - }) - }); - this.btnChartStyle.on('render:after', function(btn) { - me.mnuChartStylePicker = new Common.UI.DataView({ - el: $('#id-chart-menu-style'), - style: 'max-height: 411px;', - parentMenu: btn.menu, - store: new Common.UI.DataViewStore(), - itemTemplate: _.template('
') - }); - - if (me.btnChartStyle.menu) { - me.btnChartStyle.menu.on('show:after', function () { - me.mnuChartStylePicker.scroller.update({alwaysVisibleY: true}); - }); - } - }); - this.btnChartStyle.render($('#chart-button-style')); - this.mnuChartStylePicker.on('item:click', _.bind(this.onSelectStyle, this, this.btnChartStyle)); - this.lockedControls.push(this.btnChartStyle); - this.labelWidth = $(this.el).find('#chart-label-width'); this.labelHeight = $(this.el).find('#chart-label-height'); - - this.btnEditData = new Common.UI.Button({ - el: $('#chart-button-edit-data') - }); - this.lockedControls.push(this.btnEditData); - this.btnEditData.on('click', _.bind(this.setEditData, this)); - $(this.el).on('click', '#chart-advanced-link', _.bind(this.openAdvancedSettings, this)); }, render: function () { @@ -219,8 +93,6 @@ define([ el.html(this.template({ scope: this })); - - this.linkAdvanced = $('#chart-advanced-link'); }, setApi: function(api) { @@ -331,11 +203,114 @@ define([ this.labelHeight[0].innerHTML = this.textHeight + ': ' + value.toFixed(1) + ' ' + Common.Utils.Metric.getCurrentMetricName(); }, + createDelayedControls: function() { + var me = this, + viewData = [ + { offsetx: 0, data: Asc.c_oAscWrapStyle2.Inline, iconCls:'wrap-inline', tip: this.txtInline, selected: true }, + { offsetx: 50, data: Asc.c_oAscWrapStyle2.Square, iconCls:'wrap-square', tip: this.txtSquare }, + { offsetx: 100, data: Asc.c_oAscWrapStyle2.Tight, iconCls:'wrap-tight', tip: this.txtTight }, + { offsetx: 150, data: Asc.c_oAscWrapStyle2.Through, iconCls:'wrap-through', tip: this.txtThrough }, + { offsetx: 200, data: Asc.c_oAscWrapStyle2.TopAndBottom, iconCls:'wrap-topAndBottom', tip: this.txtTopAndBottom }, + { offsetx: 250, data: Asc.c_oAscWrapStyle2.InFront, iconCls:'wrap-inFront', tip: this.txtInFront }, + { offsetx: 300, data: Asc.c_oAscWrapStyle2.Behind, iconCls:'wrap-behind', tip: this.txtBehind } + ]; + + this.btnWrapType = new Common.UI.Button({ + cls : 'btn-large-dataview', + iconCls : 'item-wrap wrap-inline', + menu : new Common.UI.Menu({ + items: [ + { template: _.template('
') } + ] + }) + }); + this.btnWrapType.on('render:after', function(btn) { + me.mnuWrapPicker = new Common.UI.DataView({ + el: $('#id-chart-menu-wrap'), + parentMenu: btn.menu, + store: new Common.UI.DataViewStore(viewData), + itemTemplate: _.template('
') + }); + }); + this.btnWrapType.render($('#chart-button-wrap')); + this.mnuWrapPicker.on('item:click', _.bind(this.onSelectWrap, this, this.btnWrapType)); + this.lockedControls.push(this.btnWrapType); + + this.btnChartType = new Common.UI.Button({ + cls : 'btn-large-dataview', + iconCls : 'item-chartlist bar-normal', + menu : new Common.UI.Menu({ + style: 'width: 560px;', + items: [ + { template: _.template('') } + ] + }) + }); + this.btnChartType.on('render:after', function(btn) { + me.mnuChartTypePicker = new Common.UI.DataView({ + el: $('#id-chart-menu-type'), + parentMenu: btn.menu, + restoreHeight: 411, + groups: new Common.UI.DataViewGroupStore([ + { id: 'menu-chart-group-bar', caption: me.textColumn }, + { id: 'menu-chart-group-line', caption: me.textLine }, + { id: 'menu-chart-group-pie', caption: me.textPie }, + { id: 'menu-chart-group-hbar', caption: me.textBar }, + { id: 'menu-chart-group-area', caption: me.textArea }, + { id: 'menu-chart-group-scatter', caption: me.textPoint }, + { id: 'menu-chart-group-stock', caption: me.textStock } + ]), + store: new Common.UI.DataViewStore([ + { group: 'menu-chart-group-bar', type: Asc.c_oAscChartTypeSettings.barNormal, iconCls: 'column-normal', selected: true}, + { group: 'menu-chart-group-bar', type: Asc.c_oAscChartTypeSettings.barStacked, iconCls: 'column-stack'}, + { group: 'menu-chart-group-bar', type: Asc.c_oAscChartTypeSettings.barStackedPer, iconCls: 'column-pstack'}, + { group: 'menu-chart-group-bar', type: Asc.c_oAscChartTypeSettings.barNormal3d, iconCls: 'column-3d-normal'}, + { group: 'menu-chart-group-bar', type: Asc.c_oAscChartTypeSettings.barStacked3d, iconCls: 'column-3d-stack'}, + { group: 'menu-chart-group-bar', type: Asc.c_oAscChartTypeSettings.barStackedPer3d, iconCls: 'column-3d-pstack'}, + { group: 'menu-chart-group-bar', type: Asc.c_oAscChartTypeSettings.barNormal3dPerspective, iconCls: 'column-3d-normal-per'}, + { group: 'menu-chart-group-line', type: Asc.c_oAscChartTypeSettings.lineNormal, iconCls: 'line-normal'}, + { group: 'menu-chart-group-line', type: Asc.c_oAscChartTypeSettings.lineStacked, iconCls: 'line-stack'}, + { group: 'menu-chart-group-line', type: Asc.c_oAscChartTypeSettings.lineStackedPer, iconCls: 'line-pstack'}, + { group: 'menu-chart-group-line', type: Asc.c_oAscChartTypeSettings.line3d, iconCls: 'line-3d'}, + { group: 'menu-chart-group-pie', type: Asc.c_oAscChartTypeSettings.pie, iconCls: 'pie-normal'}, + { group: 'menu-chart-group-pie', type: Asc.c_oAscChartTypeSettings.doughnut, iconCls: 'pie-doughnut'}, + { group: 'menu-chart-group-pie', type: Asc.c_oAscChartTypeSettings.pie3d, iconCls: 'pie-3d-normal'}, + { group: 'menu-chart-group-hbar', type: Asc.c_oAscChartTypeSettings.hBarNormal, iconCls: 'bar-normal'}, + { group: 'menu-chart-group-hbar', type: Asc.c_oAscChartTypeSettings.hBarStacked, iconCls: 'bar-stack'}, + { group: 'menu-chart-group-hbar', type: Asc.c_oAscChartTypeSettings.hBarStackedPer, iconCls: 'bar-pstack'}, + { group: 'menu-chart-group-hbar', type: Asc.c_oAscChartTypeSettings.hBarNormal3d, iconCls: 'bar-3d-normal'}, + { group: 'menu-chart-group-hbar', type: Asc.c_oAscChartTypeSettings.hBarStacked3d, iconCls: 'bar-3d-stack'}, + { group: 'menu-chart-group-hbar', type: Asc.c_oAscChartTypeSettings.hBarStackedPer3d, iconCls: 'bar-3d-pstack'}, + { group: 'menu-chart-group-area', type: Asc.c_oAscChartTypeSettings.areaNormal, iconCls: 'area-normal'}, + { group: 'menu-chart-group-area', type: Asc.c_oAscChartTypeSettings.areaStacked, iconCls: 'area-stack'}, + { group: 'menu-chart-group-area', type: Asc.c_oAscChartTypeSettings.areaStackedPer, iconCls: 'area-pstack'}, + { group: 'menu-chart-group-scatter', type: Asc.c_oAscChartTypeSettings.scatter, iconCls: 'point-normal'}, + { group: 'menu-chart-group-stock', type: Asc.c_oAscChartTypeSettings.stock, iconCls: 'stock-normal'} + ]), + itemTemplate: _.template('
') + }); + }); + this.btnChartType.render($('#chart-button-type')); + this.mnuChartTypePicker.on('item:click', _.bind(this.onSelectType, this, this.btnChartType)); + this.lockedControls.push(this.btnChartType); + + this.btnEditData = new Common.UI.Button({ + el: $('#chart-button-edit-data') + }); + this.lockedControls.push(this.btnEditData); + this.btnEditData.on('click', _.bind(this.setEditData, this)); + + this.linkAdvanced = $('#chart-advanced-link'); + $(this.el).on('click', '#chart-advanced-link', _.bind(this.openAdvancedSettings, this)); + }, + createDelayedElements: function() { + this.createDelayedControls(); this.updateMetricUnit(); }, _ChartWrapStyleChanged: function(style) { + if (!this.mnuWrapPicker) return; if (this._state.WrappingStyle!==style) { this._noApply = true; var record = this.mnuWrapPicker.store.findWhere({data: style}); @@ -507,6 +482,36 @@ define([ updateChartStyles: function(styles) { var me = this; + + if (!this.btnChartStyle) { + this.btnChartStyle = new Common.UI.Button({ + cls : 'btn-large-dataview', + iconCls : 'item-wrap', + menu : new Common.UI.Menu({ + menuAlign: 'tr-br', + items: [ + { template: _.template('
') } + ] + }) + }); + this.btnChartStyle.render($('#chart-button-style')); + this.lockedControls.push(this.btnChartStyle); + this.mnuChartStylePicker = new Common.UI.DataView({ + el: $('#id-chart-menu-style'), + style: 'max-height: 411px;', + parentMenu: this.btnChartStyle.menu, + store: new Common.UI.DataViewStore(), + itemTemplate: _.template('
') + }); + + if (this.btnChartStyle.menu) { + this.btnChartStyle.menu.on('show:after', function () { + me.mnuChartStylePicker.scroller.update({alwaysVisibleY: true}); + }); + } + this.mnuChartStylePicker.on('item:click', _.bind(this.onSelectStyle, this, this.btnChartStyle)); + } + if (styles && styles.length>0){ var stylesStore = this.mnuChartStylePicker.store; if (stylesStore) { @@ -542,6 +547,8 @@ define([ }, disableControls: function(disable) { + if (this._initSettings) return; + if (this._state.DisabledControls!==disable) { this._state.DisabledControls = disable; _.each(this.lockedControls, function(item) { diff --git a/apps/documenteditor/main/app/view/HeaderFooterSettings.js b/apps/documenteditor/main/app/view/HeaderFooterSettings.js index 916223517..233f29130 100644 --- a/apps/documenteditor/main/app/view/HeaderFooterSettings.js +++ b/apps/documenteditor/main/app/view/HeaderFooterSettings.js @@ -64,7 +64,6 @@ define([ }, initialize: function () { - var me = this; this._initSettings = true; this._state = { @@ -80,67 +79,6 @@ define([ this._locked = false; this.render(); - - var _arrPosition = [ - [c_pageNumPosition.PAGE_NUM_POSITION_TOP, c_pageNumPosition.PAGE_NUM_POSITION_LEFT, 'icon-right-panel btn-colontitul-tl', 'headerfooter-button-top-left', this.textTopLeft], - [c_pageNumPosition.PAGE_NUM_POSITION_TOP, c_pageNumPosition.PAGE_NUM_POSITION_CENTER, 'icon-right-panel btn-colontitul-tc', 'headerfooter-button-top-center', this.textTopCenter], - [c_pageNumPosition.PAGE_NUM_POSITION_TOP, c_pageNumPosition.PAGE_NUM_POSITION_RIGHT, 'icon-right-panel btn-colontitul-tr', 'headerfooter-button-top-right', this.textTopRight], - [c_pageNumPosition.PAGE_NUM_POSITION_BOTTOM, c_pageNumPosition.PAGE_NUM_POSITION_LEFT, 'icon-right-panel btn-colontitul-bl', 'headerfooter-button-bottom-left', this.textBottomLeft], - [c_pageNumPosition.PAGE_NUM_POSITION_BOTTOM, c_pageNumPosition.PAGE_NUM_POSITION_CENTER, 'icon-right-panel btn-colontitul-bc', 'headerfooter-button-bottom-center', this.textBottomCenter], - [c_pageNumPosition.PAGE_NUM_POSITION_BOTTOM, c_pageNumPosition.PAGE_NUM_POSITION_RIGHT, 'icon-right-panel btn-colontitul-br', 'headerfooter-button-bottom-right', this.textBottomRight] - ]; - - this._btnsPosition = []; - _.each(_arrPosition, function(item, index, list){ - var _btn = new Common.UI.Button({ - cls: 'btn-options huge', - iconCls: item[2], - posWhere:item[0], - posAlign:item[1], - hint: item[4] - }); - _btn.render( $('#'+item[3])) ; - _btn.on('click', _.bind(this.onBtnPositionClick, this)); - this._btnsPosition.push( _btn ); - this.lockedControls.push(_btn); - }, this); - - this.numPosition = new Common.UI.MetricSpinner({ - el: $('#headerfooter-spin-position'), - step: .1, - width: 85, - value: '1.25 cm', - defaultUnit : "cm", - maxValue: 55.88, - minValue: 0 - }); - this.spinners.push(this.numPosition); - this.lockedControls.push(this.numPosition); - - this.lblPosition = $(this.el).find('#headerfooter-label-position'); - - this.chDiffFirst = new Common.UI.CheckBox({ - el: $('#headerfooter-check-diff-first'), - labelText: this.textDiffFirst - }); - this.lockedControls.push(this.chDiffFirst); - - this.chDiffOdd = new Common.UI.CheckBox({ - el: $('#headerfooter-check-diff-odd'), - labelText: this.textDiffOdd - }); - this.lockedControls.push(this.chDiffOdd); - - this.chSameAs = new Common.UI.CheckBox({ - el: $('#headerfooter-check-same-as'), - labelText: this.textSameAs - }); - this.lockedControls.push(this.chSameAs); - - this.numPosition.on('change', _.bind(this.onNumPositionChange, this)); - this.chDiffFirst.on('change', _.bind(this.onDiffFirstChange, this)); - this.chDiffOdd.on('change', _.bind(this.onDiffOddChange, this)); - this.chSameAs.on('change', _.bind(this.onSameAsChange, this)); }, render: function () { @@ -240,7 +178,71 @@ define([ } }, + createDelayedControls: function() { + var _arrPosition = [ + [c_pageNumPosition.PAGE_NUM_POSITION_TOP, c_pageNumPosition.PAGE_NUM_POSITION_LEFT, 'icon-right-panel btn-colontitul-tl', 'headerfooter-button-top-left', this.textTopLeft], + [c_pageNumPosition.PAGE_NUM_POSITION_TOP, c_pageNumPosition.PAGE_NUM_POSITION_CENTER, 'icon-right-panel btn-colontitul-tc', 'headerfooter-button-top-center', this.textTopCenter], + [c_pageNumPosition.PAGE_NUM_POSITION_TOP, c_pageNumPosition.PAGE_NUM_POSITION_RIGHT, 'icon-right-panel btn-colontitul-tr', 'headerfooter-button-top-right', this.textTopRight], + [c_pageNumPosition.PAGE_NUM_POSITION_BOTTOM, c_pageNumPosition.PAGE_NUM_POSITION_LEFT, 'icon-right-panel btn-colontitul-bl', 'headerfooter-button-bottom-left', this.textBottomLeft], + [c_pageNumPosition.PAGE_NUM_POSITION_BOTTOM, c_pageNumPosition.PAGE_NUM_POSITION_CENTER, 'icon-right-panel btn-colontitul-bc', 'headerfooter-button-bottom-center', this.textBottomCenter], + [c_pageNumPosition.PAGE_NUM_POSITION_BOTTOM, c_pageNumPosition.PAGE_NUM_POSITION_RIGHT, 'icon-right-panel btn-colontitul-br', 'headerfooter-button-bottom-right', this.textBottomRight] + ]; + + this._btnsPosition = []; + _.each(_arrPosition, function(item, index, list){ + var _btn = new Common.UI.Button({ + cls: 'btn-options huge', + iconCls: item[2], + posWhere:item[0], + posAlign:item[1], + hint: item[4] + }); + _btn.render( $('#'+item[3])) ; + _btn.on('click', _.bind(this.onBtnPositionClick, this)); + this._btnsPosition.push( _btn ); + this.lockedControls.push(_btn); + }, this); + + this.numPosition = new Common.UI.MetricSpinner({ + el: $('#headerfooter-spin-position'), + step: .1, + width: 85, + value: '1.25 cm', + defaultUnit : "cm", + maxValue: 55.88, + minValue: 0 + }); + this.spinners.push(this.numPosition); + this.lockedControls.push(this.numPosition); + + this.lblPosition = $(this.el).find('#headerfooter-label-position'); + + this.chDiffFirst = new Common.UI.CheckBox({ + el: $('#headerfooter-check-diff-first'), + labelText: this.textDiffFirst + }); + this.lockedControls.push(this.chDiffFirst); + + this.chDiffOdd = new Common.UI.CheckBox({ + el: $('#headerfooter-check-diff-odd'), + labelText: this.textDiffOdd + }); + this.lockedControls.push(this.chDiffOdd); + + this.chSameAs = new Common.UI.CheckBox({ + el: $('#headerfooter-check-same-as'), + labelText: this.textSameAs + }); + this.lockedControls.push(this.chSameAs); + + this.numPosition.on('change', _.bind(this.onNumPositionChange, this)); + this.chDiffFirst.on('change', _.bind(this.onDiffFirstChange, this)); + this.chDiffOdd.on('change', _.bind(this.onDiffOddChange, this)); + this.chSameAs.on('change', _.bind(this.onSameAsChange, this)); + }, + createDelayedElements: function() { + this.createDelayedControls(); this.updateMetricUnit(); }, @@ -249,6 +251,8 @@ define([ }, disableControls: function(disable) { + if (this._initSettings) return; + if (this._state.DisabledControls!==disable) { this._state.DisabledControls = disable; _.each(this.lockedControls, function(item) { diff --git a/apps/documenteditor/main/app/view/ImageSettings.js b/apps/documenteditor/main/app/view/ImageSettings.js index 30b232785..c80591e70 100644 --- a/apps/documenteditor/main/app/view/ImageSettings.js +++ b/apps/documenteditor/main/app/view/ImageSettings.js @@ -64,7 +64,6 @@ define([ }, initialize: function () { - var me = this; this._initSettings = true; this._state = { @@ -84,7 +83,35 @@ define([ this.render(); - var viewData = [ + this.labelWidth = $(this.el).find('#image-label-width'); + this.labelHeight = $(this.el).find('#image-label-height'); + }, + + render: function () { + var el = $(this.el); + el.html(this.template({ + scope: this + })); + }, + + setApi: function(api) { + this.api = api; + if (this.api) + this.api.asc_registerCallback('asc_onImgWrapStyleChanged', _.bind(this._ImgWrapStyleChanged, this)); + return this; + }, + + updateMetricUnit: function() { + var value = Common.Utils.Metric.fnRecalcFromMM(this._state.Width); + this.labelWidth[0].innerHTML = this.textWidth + ': ' + value.toFixed(1) + ' ' + Common.Utils.Metric.getCurrentMetricName(); + + value = Common.Utils.Metric.fnRecalcFromMM(this._state.Height); + this.labelHeight[0].innerHTML = this.textHeight + ': ' + value.toFixed(1) + ' ' + Common.Utils.Metric.getCurrentMetricName(); + }, + + createDelayedControls: function() { + var me = this, + viewData = [ { offsetx: 0, data: Asc.c_oAscWrapStyle2.Inline, iconcls:'wrap-inline', tip: this.txtInline, selected: true }, { offsetx: 50, data: Asc.c_oAscWrapStyle2.Square, iconcls:'wrap-square', tip: this.txtSquare }, { offsetx: 100, data: Asc.c_oAscWrapStyle2.Tight, iconcls:'wrap-tight', tip: this.txtTight }, @@ -116,9 +143,6 @@ define([ this.mnuWrapPicker.on('item:click', _.bind(this.onSelectWrap, this, this.btnWrapType)); this.lockedControls.push(this.btnWrapType); - this.labelWidth = $(this.el).find('#image-label-width'); - this.labelHeight = $(this.el).find('#image-label-height'); - this.btnOriginalSize = new Common.UI.Button({ el: $('#image-button-original-size') }); @@ -149,35 +173,14 @@ define([ if (this.api) this.api.asc_pluginRun(this._originalProps.asc_getPluginGuid(), 0, this._originalProps.asc_getPluginData()); this.fireEvent('editcomplete', this); }, this)); - $(this.el).on('click', '#image-advanced-link', _.bind(this.openAdvancedSettings, this)); - }, - - render: function () { - var el = $(this.el); - el.html(this.template({ - scope: this - })); this.linkAdvanced = $('#image-advanced-link'); this.lblReplace = $('#image-lbl-replace'); + $(this.el).on('click', '#image-advanced-link', _.bind(this.openAdvancedSettings, this)); }, - - setApi: function(api) { - this.api = api; - if (this.api) - this.api.asc_registerCallback('asc_onImgWrapStyleChanged', _.bind(this._ImgWrapStyleChanged, this)); - return this; - }, - - updateMetricUnit: function() { - var value = Common.Utils.Metric.fnRecalcFromMM(this._state.Width); - this.labelWidth[0].innerHTML = this.textWidth + ': ' + value.toFixed(1) + ' ' + Common.Utils.Metric.getCurrentMetricName(); - - value = Common.Utils.Metric.fnRecalcFromMM(this._state.Height); - this.labelHeight[0].innerHTML = this.textHeight + ': ' + value.toFixed(1) + ' ' + Common.Utils.Metric.getCurrentMetricName(); - }, - + createDelayedElements: function() { + this.createDelayedControls(); this.updateMetricUnit(); }, @@ -248,6 +251,7 @@ define([ }, _ImgWrapStyleChanged: function(style) { + if (!this.mnuWrapPicker) return; if (this._state.WrappingStyle!==style) { this._noApply = true; var record = this.mnuWrapPicker.store.findWhere({data: style}); @@ -387,6 +391,8 @@ define([ }, disableControls: function(disable) { + if (this._initSettings) return; + if (this._state.DisabledControls!==disable) { this._state.DisabledControls = disable; _.each(this.lockedControls, function(item) { diff --git a/apps/documenteditor/main/app/view/MailMergeSettings.js b/apps/documenteditor/main/app/view/MailMergeSettings.js index 2ff261def..4ece50e2e 100644 --- a/apps/documenteditor/main/app/view/MailMergeSettings.js +++ b/apps/documenteditor/main/app/view/MailMergeSettings.js @@ -72,7 +72,9 @@ define([ }, initialize: function () { - var me = this; + var me = this, + _set = DE.enumLockMM; + this._initSettings = true; this._state = { @@ -88,18 +90,8 @@ define([ this.emailAddresses = undefined; this.mergeMailData = undefined; - var _set = DE.enumLockMM; - this.render(); - this.btnEditData = new Common.UI.Button({ - el: me.$el.find('#mmerge-button-edit-data'), - lock: [_set.preview, _set.lostConnect] - }); - this.btnEditData.on('click', _.bind(this.onEditData, this)); - - this.lblAddRecipients = $('#mmerge-lbl-add-recipients'); - this.btnInsField = new Common.UI.Button({ cls: 'btn-text-menu-default', caption: this.textInsertField, @@ -120,19 +112,6 @@ define([ }); this.btnInsField.render( $('#mmerge-btn-ins-field',me.$el)) ; - this.chHighlight = new Common.UI.Switcher({ - el: me.$el.find('#mmerge-switcher-highlight'), - lock: [_set.noFields, _set.lostConnect] - }); - this.chHighlight.on('change', _.bind(this.onCheckHighlightChange, this)); - - this.chPreview = new Common.UI.Switcher({ - el: me.$el.find('#mmerge-switcher-preview'), - lock: [_set.noRecipients, _set.lostConnect] - }); - this.chPreview.on('change', _.bind(this.onCheckPreviewChange, this)); - this.emptyDBControls.push(this.chPreview); - this.txtFieldNum = new Common.UI.InputField({ el : $('#mmerge-field-num', me.$el), allowBlank : true, @@ -161,6 +140,52 @@ define([ } }); this.emptyDBControls.push(this.txtFieldNum); + }, + + render: function () { + this.$el.html(this.template({ + scope: this + })); + }, + + setApi: function(api) { + this.api = api; + if (this.api) { + this.api.asc_registerCallback('asc_onPreviewMailMergeResult', _.bind(this.onPreviewMailMergeResult, this)); + this.api.asc_registerCallback('asc_onEndPreviewMailMergeResult', _.bind(this.onEndPreviewMailMergeResult, this)); + this.api.asc_registerCallback('asc_onStartMailMerge', _.bind(this.onStartMailMerge, this)); + this.api.asc_registerCallback('asc_onSaveMailMerge', _.bind(this.onSaveMailMerge, this)); + this.api.asc_registerCallback('asc_onEndAction', _.bind(this.onLongActionEnd, this)); + Common.Gateway.on('setemailaddresses', _.bind(this.onSetEmailAddresses, this)); + Common.Gateway.on('processmailmerge', _.bind(this.onProcessMailMerge, this)); + } + return this; + }, + + createDelayedControls: function() { + var me = this, + _set = DE.enumLockMM; + + this.btnEditData = new Common.UI.Button({ + el: me.$el.find('#mmerge-button-edit-data'), + lock: [_set.preview, _set.lostConnect] + }); + this.btnEditData.on('click', _.bind(this.onEditData, this)); + + this.lblAddRecipients = $('#mmerge-lbl-add-recipients'); + + this.chHighlight = new Common.UI.Switcher({ + el: me.$el.find('#mmerge-switcher-highlight'), + lock: [_set.noFields, _set.lostConnect] + }); + this.chHighlight.on('change', _.bind(this.onCheckHighlightChange, this)); + + this.chPreview = new Common.UI.Switcher({ + el: me.$el.find('#mmerge-switcher-preview'), + lock: [_set.noRecipients, _set.lostConnect] + }); + this.chPreview.on('change', _.bind(this.onCheckPreviewChange, this)); + this.emptyDBControls.push(this.chPreview); this.btnFirst = new Common.UI.Button({ cls: 'btn-toolbar', @@ -343,32 +368,26 @@ define([ }).on('click', _.bind(this.onMergeClick, this, false)); this.emptyDBControls.push(this.btnMerge); - this.$el.on('click', '#mmerge-readmore-link', _.bind(this.openHelp, this)); - }, - - render: function () { - this.$el.html(this.template({ - scope: this - })); - this.linkReadMore = $('#mmerge-readmore-link', this.$el); - }, + this.$el.on('click', '#mmerge-readmore-link', _.bind(this.openHelp, this)); - setApi: function(api) { - this.api = api; - if (this.api) { - this.api.asc_registerCallback('asc_onPreviewMailMergeResult', _.bind(this.onPreviewMailMergeResult, this)); - this.api.asc_registerCallback('asc_onEndPreviewMailMergeResult', _.bind(this.onEndPreviewMailMergeResult, this)); - this.api.asc_registerCallback('asc_onStartMailMerge', _.bind(this.onStartMailMerge, this)); - this.api.asc_registerCallback('asc_onSaveMailMerge', _.bind(this.onSaveMailMerge, this)); - this.api.asc_registerCallback('asc_onEndAction', _.bind(this.onLongActionEnd, this)); - Common.Gateway.on('setemailaddresses', _.bind(this.onSetEmailAddresses, this)); - Common.Gateway.on('processmailmerge', _.bind(this.onProcessMailMerge, this)); + if (this.mode) { + if (!this.mode.mergeFolderUrl) + this.btnPortal.setVisible(false); + if (!this.mode.canSendEmailAddresses) { + this._arrMergeSrc.pop(); + this.cmbMergeTo.setData(this._arrMergeSrc); + this.cmbMergeTo.setValue(this._arrMergeSrc[0].value); + } } - return this; }, ChangeSettings: function(props) { + if (this._initSettings) { + this.createDelayedControls(); + this._initSettings = false; + } + this.disableInsertControls(this._locked); if (props) { @@ -763,6 +782,8 @@ define([ }, disableControls: function(disable) { + if (this._initSettings) return; + this.lockControls(DE.enumLockMM.lostConnect, disable, { array: _.union([this.btnEditData, this.btnInsField, this.chHighlight], (this.mode.mergeFolderUrl) ? [this.btnPortal] : []), merge: true @@ -775,13 +796,6 @@ define([ setMode: function(mode) { this.mode = mode; - if (!this.mode.mergeFolderUrl) - this.btnPortal.setVisible(false); - if (!this.mode.canSendEmailAddresses) { - this._arrMergeSrc.pop(); - this.cmbMergeTo.setData(this._arrMergeSrc); - this.cmbMergeTo.setValue(this._arrMergeSrc[0].value); - } }, disableEditing: function(disable) { @@ -807,7 +821,7 @@ define([ }, disablePreviewMode: function() { - if (this.api && this.chPreview.getValue()) { + if (this.api && this.chPreview && this.chPreview.getValue()) { this.api.asc_EndPreviewMailMergeResult(); } }, diff --git a/apps/documenteditor/main/app/view/ParagraphSettings.js b/apps/documenteditor/main/app/view/ParagraphSettings.js index d69a938cd..5f571a919 100644 --- a/apps/documenteditor/main/app/view/ParagraphSettings.js +++ b/apps/documenteditor/main/app/view/ParagraphSettings.js @@ -67,7 +67,6 @@ define([ }, initialize: function () { - var me = this; this._initSettings = true; this._state = { @@ -157,22 +156,8 @@ define([ this.btnColor = new Common.UI.ColorButton({ style: "width:45px;", disabled: this._locked, - menu : new Common.UI.Menu({ - items: [ - { template: _.template('
') }, - { template: _.template('' + me.textNewColor + '') } - ] - }) + menu : true }); - - this.btnColor.on('render:after', function(btn) { - me.mnuColorPicker = new Common.UI.ThemeColorPalette({ - el: $('#paragraph-color-menu'), - transparent: true - }); - me.mnuColorPicker.on('select', _.bind(me.onColorPickerSelect, me)); - }); - this.btnColor.render( $('#paragraph-color-btn')); this.lockedControls.push(this.btnColor); @@ -456,8 +441,20 @@ define([ }, UpdateThemeColors: function() { - if (this.mnuColorPicker) - this.mnuColorPicker.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors()); + if (!this.mnuColorPicker) { + this.btnColor.setMenu( new Common.UI.Menu({ + items: [ + { template: _.template('
') }, + { template: _.template('' + this.textNewColor + '') } + ] + })); + this.mnuColorPicker = new Common.UI.ThemeColorPalette({ + el: $('#paragraph-color-menu'), + transparent: true + }); + this.mnuColorPicker.on('select', _.bind(this.onColorPickerSelect, this)); + } + this.mnuColorPicker.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors()); }, onHideMenus: function(e){ diff --git a/apps/documenteditor/main/app/view/ShapeSettings.js b/apps/documenteditor/main/app/view/ShapeSettings.js index a04729374..64bdddd25 100644 --- a/apps/documenteditor/main/app/view/ShapeSettings.js +++ b/apps/documenteditor/main/app/view/ShapeSettings.js @@ -71,7 +71,7 @@ define([ }, initialize: function () { - var me = this; + this._initSettings = true; this._originalProps = null; this._noApply = true; @@ -127,382 +127,6 @@ define([ this.render(); - this._arrFillSrc = [ - {displayValue: this.textColor, value: Asc.c_oAscFill.FILL_TYPE_SOLID}, - {displayValue: this.textGradientFill, value: Asc.c_oAscFill.FILL_TYPE_GRAD}, - {displayValue: this.textImageTexture, value: Asc.c_oAscFill.FILL_TYPE_BLIP}, - {displayValue: this.textPatternFill, value: Asc.c_oAscFill.FILL_TYPE_PATT}, - {displayValue: this.textNoFill, value: Asc.c_oAscFill.FILL_TYPE_NOFILL} - ]; - - this.cmbFillSrc = new Common.UI.ComboBox({ - el: $('#shape-combo-fill-src'), - cls: 'input-group-nr', - style: 'width: 100%;', - menuStyle: 'min-width: 190px;', - editable: false, - data: this._arrFillSrc - }); - this.cmbFillSrc.setValue(this._arrFillSrc[0].value); - this.cmbFillSrc.on('selected', _.bind(this.onFillSrcSelect, this)); - this.fillControls.push(this.cmbFillSrc); - - this.btnBackColor = new Common.UI.ColorButton({ - style: "width:45px;", - menu : new Common.UI.Menu({ - items: [ - { template: _.template('
') }, - { template: _.template('' + me.textNewColor + '') } - ] - }) - }); - - this.btnBackColor.on('render:after', function(btn) { - me.colorsBack = new Common.UI.ThemeColorPalette({ - el: $('#shape-back-color-menu'), - value: 'transparent', - transparent: true - }); - me.colorsBack.on('select', _.bind(me.onColorsBackSelect, me)); - }); - this.btnBackColor.render( $('#shape-back-color-btn')); - this.btnBackColor.setColor('transparent'); - $(this.el).on('click', '#shape-back-color-new', _.bind(this.addNewColor, this, this.colorsBack, this.btnBackColor)); - this.fillControls.push(this.btnBackColor); - - this.cmbPattern = new Common.UI.ComboDataView({ - itemWidth: 28, - itemHeight: 28, - menuMaxHeight: 300, - enableKeyEvents: true, - cls: 'combo-pattern' - }); - this.cmbPattern.menuPicker.itemTemplate = this.cmbPattern.fieldPicker.itemTemplate = _.template([ - '
', - '', - '
' - ].join('')); - this.cmbPattern.render($('#shape-combo-pattern')); - this.cmbPattern.openButton.menu.cmpEl.css({ - 'min-width': 178, - 'max-width': 178 - }); - this.cmbPattern.on('click', _.bind(this.onPatternSelect, this)); - this.cmbPattern.openButton.menu.on('show:after', function () { - me.cmbPattern.menuPicker.scroller.update({alwaysVisibleY: true}); - }); - - this.fillControls.push(this.cmbPattern); - - this.btnFGColor = new Common.UI.ColorButton({ - style: "width:45px;", - menu : new Common.UI.Menu({ - items: [ - { template: _.template('
') }, - { template: _.template('' + me.textNewColor + '') } - ] - }) - }); - - this.btnFGColor.on('render:after', function(btn) { - me.colorsFG = new Common.UI.ThemeColorPalette({ - el: $('#shape-foreground-color-menu'), - value: '000000' - }); - me.colorsFG.on('select', _.bind(me.onColorsFGSelect, me)); - }); - this.btnFGColor.render( $('#shape-foreground-color-btn')); - this.btnFGColor.setColor('000000'); - $(this.el).on('click', '#shape-foreground-color-new', _.bind(this.addNewColor, this, this.colorsFG, this.btnFGColor)); - this.fillControls.push(this.btnFGColor); - - this.btnBGColor = new Common.UI.ColorButton({ - style: "width:45px;", - menu : new Common.UI.Menu({ - items: [ - { template: _.template('
') }, - { template: _.template('' + me.textNewColor + '') } - ] - }) - }); - - this.btnBGColor.on('render:after', function(btn) { - me.colorsBG = new Common.UI.ThemeColorPalette({ - el: $('#shape-background-color-menu'), - value: 'ffffff' - }); - me.colorsBG.on('select', _.bind(me.onColorsBGSelect, me)); - }); - this.btnBGColor.render( $('#shape-background-color-btn')); - this.btnBGColor.setColor('ffffff'); - $(this.el).on('click', '#shape-background-color-new', _.bind(this.addNewColor, this, this.colorsBG, this.btnBGColor)); - this.fillControls.push(this.btnBGColor); - - this.btnInsertFromFile = new Common.UI.Button({ - el: $('#shape-button-from-file') - }); - this.fillControls.push(this.btnInsertFromFile); - - this.btnInsertFromUrl = new Common.UI.Button({ - el: $('#shape-button-from-url') - }); - this.fillControls.push(this.btnInsertFromUrl); - - this.btnInsertFromFile.on('click', _.bind(function(btn){ - if (this.api) this.api.ChangeShapeImageFromFile(); - this.fireEvent('editcomplete', this); - }, this)); - this.btnInsertFromUrl.on('click', _.bind(this.insertFromUrl, this)); - - this._arrFillType = [ - {displayValue: this.textStretch, value: Asc.c_oAscFillBlipType.STRETCH}, - {displayValue: this.textTile, value: Asc.c_oAscFillBlipType.TILE} - ]; - - this.cmbFillType = new Common.UI.ComboBox({ - el: $('#shape-combo-fill-type'), - cls: 'input-group-nr', - menuStyle: 'min-width: 90px;', - editable: false, - data: this._arrFillType - }); - this.cmbFillType.setValue(this._arrFillType[0].value); - this.cmbFillType.on('selected', _.bind(this.onFillTypeSelect, this)); - this.fillControls.push(this.cmbFillType); - - this.btnTexture = new Common.UI.ComboBox({ - el: $('#shape-combo-fill-texture'), - template: _.template([ - '
', - '
' + this.textSelectTexture + '
', - '
', - '', - '
' - ].join('')) - }); - this.textureMenu = new Common.UI.Menu({ - items: [ - { template: _.template('
') } - ] - }); - this.textureMenu.render($('#shape-combo-fill-texture')); - this.fillControls.push(this.btnTexture); - - this.numTransparency = new Common.UI.MetricSpinner({ - el: $('#shape-spin-transparency'), - step: 1, - width: 62, - value: '100 %', - defaultUnit : "%", - maxValue: 100, - minValue: 0 - }); - this.numTransparency.on('change', _.bind(this.onNumTransparencyChange, this)); - this.fillControls.push(this.numTransparency); - - this.sldrTransparency = new Common.UI.SingleSlider({ - el: $('#shape-slider-transparency'), - width: 75, - minValue: 0, - maxValue: 100, - value: 100 - }); - this.sldrTransparency.on('change', _.bind(this.onTransparencyChange, this)); - this.sldrTransparency.on('changecomplete', _.bind(this.onTransparencyChangeComplete, this)); - this.fillControls.push(this.sldrTransparency); - - this.lblTransparencyStart = $(this.el).find('#shape-lbl-transparency-start'); - this.lblTransparencyEnd = $(this.el).find('#shape-lbl-transparency-end'); - - this._arrGradType = [ - {displayValue: this.textLinear, value: Asc.c_oAscFillGradType.GRAD_LINEAR}, - {displayValue: this.textRadial, value: Asc.c_oAscFillGradType.GRAD_PATH} - ]; - - this.cmbGradType = new Common.UI.ComboBox({ - el: $('#shape-combo-grad-type'), - cls: 'input-group-nr', - menuStyle: 'min-width: 90px;', - editable: false, - data: this._arrGradType - }); - this.cmbGradType.setValue(this._arrGradType[0].value); - this.cmbGradType.on('selected', _.bind(this.onGradTypeSelect, this)); - this.fillControls.push(this.cmbGradType); - - this._viewDataLinear = [ - { offsetx: 0, offsety: 0, type:45, subtype:-1, iconcls:'gradient-left-top' }, - { offsetx: 50, offsety: 0, type:90, subtype:4, iconcls:'gradient-top'}, - { offsetx: 100, offsety: 0, type:135, subtype:5, iconcls:'gradient-right-top'}, - { offsetx: 0, offsety: 50, type:0, subtype:6, iconcls:'gradient-left', cls: 'item-gradient-separator', selected: true}, - { offsetx: 100, offsety: 50, type:180, subtype:1, iconcls:'gradient-right'}, - { offsetx: 0, offsety: 100, type:315, subtype:2, iconcls:'gradient-left-bottom'}, - { offsetx: 50, offsety: 100, type:270, subtype:3, iconcls:'gradient-bottom'}, - { offsetx: 100, offsety: 100, type:225, subtype:7, iconcls:'gradient-right-bottom'} - ]; - - this._viewDataRadial = [ - { offsetx: 100, offsety: 150, type:2, subtype:5, iconcls:'gradient-radial-center'} - ]; - - this.btnDirection = new Common.UI.Button({ - cls : 'btn-large-dataview', - iconCls : 'item-gradient gradient-left', - menu : new Common.UI.Menu({ - style: 'min-width: 60px;', - menuAlign: 'tr-br', - items: [ - { template: _.template('
') } - ] - }) - }); - this.btnDirection.on('render:after', function(btn) { - me.mnuDirectionPicker = new Common.UI.DataView({ - el: $('#id-shape-menu-direction'), - parentMenu: btn.menu, - restoreHeight: 174, - allowScrollbar: false, - store: new Common.UI.DataViewStore(me._viewDataLinear), - itemTemplate: _.template('
') - }); - }); - this.btnDirection.render($('#shape-button-direction')); - this.mnuDirectionPicker.on('item:click', _.bind(this.onSelectGradient, this, this.btnDirection)); - this.fillControls.push(this.btnDirection); - - this.btnGradColor = new Common.UI.ColorButton({ - style: "width:45px;", - menu : new Common.UI.Menu({ - items: [ - { template: _.template('
') }, - { template: _.template('' + me.textNewColor + '') } - ] - }) - }); - this.btnGradColor.on('render:after', function(btn) { - me.colorsGrad = new Common.UI.ThemeColorPalette({ - el: $('#shape-gradient-color-menu'), - value: '000000' - }); - me.colorsGrad.on('select', _.bind(me.onColorsGradientSelect, me)); - }); - this.btnGradColor.render( $('#shape-gradient-color-btn')); - this.btnGradColor.setColor('000000'); - $(this.el).on('click', '#shape-gradient-color-new', _.bind(this.addNewColor, this, this.colorsGrad, this.btnGradColor)); - this.fillControls.push(this.btnGradColor); - - this.sldrGradient = new Common.UI.MultiSliderGradient({ - el: $('#shape-slider-gradient'), - width: 125, - minValue: 0, - maxValue: 100, - values: [0, 100] - }); - this.sldrGradient.on('change', _.bind(this.onGradientChange, this)); - this.sldrGradient.on('changecomplete', _.bind(this.onGradientChangeComplete, this)); - this.sldrGradient.on('thumbclick', function(cmp, index){ - me.GradColor.currentIdx = index; - var color = me.GradColor.colors[me.GradColor.currentIdx]; - me.btnGradColor.setColor(color); - me.colorsGrad.select(color,false); - }); - this.sldrGradient.on('thumbdblclick', function(cmp){ - me.btnGradColor.cmpEl.find('button').dropdown('toggle'); - }); - this.fillControls.push(this.sldrGradient); - - this.cmbBorderSize = new Common.UI.ComboBorderSizeEditable({ - el: $('#shape-combo-border-size'), - style: "width: 93px;", - txtNoBorders: this.txtNoBorders - }) - .on('selected', _.bind(this.onBorderSizeSelect, this)) - .on('changed:before',_.bind(this.onBorderSizeChanged, this, true)) - .on('changed:after', _.bind(this.onBorderSizeChanged, this, false)) - .on('combo:blur', _.bind(this.onComboBlur, this, false)); - this.BorderSize = this.cmbBorderSize.store.at(2).get('value'); - this.cmbBorderSize.setValue(this.BorderSize); - this.lockedControls.push(this.cmbBorderSize); - - this.btnBorderColor = new Common.UI.ColorButton({ - style: "width:45px;", - menu : new Common.UI.Menu({ - items: [ - { template: _.template('
') }, - { template: _.template('' + me.textNewColor + '') } - ] - }) - }); - this.lockedControls.push(this.btnBorderColor); - - this.btnBorderColor.on('render:after', function(btn) { - me.colorsBorder = new Common.UI.ThemeColorPalette({ - el: $('#shape-border-color-menu'), - value: '000000' - }); - me.colorsBorder.on('select', _.bind(me.onColorsBorderSelect, me)); - }); - this.btnBorderColor.render( $('#shape-border-color-btn')); - this.btnBorderColor.setColor('000000'); - $(this.el).on('click', '#shape-border-color-new', _.bind(this.addNewColor, this, this.colorsBorder, this.btnBorderColor)); - - this.cmbBorderType = new Common.UI.ComboBorderType({ - el: $('#shape-combo-border-type'), - style: "width: 93px;", - menuStyle: 'min-width: 93px;' - }).on('selected', _.bind(this.onBorderTypeSelect, this)) - .on('combo:blur', _.bind(this.onComboBlur, this, false)); - this.BorderType = Asc.c_oDashType.solid; - this.cmbBorderType.setValue(this.BorderType); - this.lockedControls.push(this.cmbBorderType); - - var viewData = [ - { offsetx: 0, data: Asc.c_oAscWrapStyle2.Inline, iconcls:'wrap-inline', tip: this.txtInline, selected: true }, - { offsetx: 50, data: Asc.c_oAscWrapStyle2.Square, iconcls:'wrap-square', tip: this.txtSquare }, - { offsetx: 100, data: Asc.c_oAscWrapStyle2.Tight, iconcls:'wrap-tight', tip: this.txtTight }, - { offsetx: 150, data: Asc.c_oAscWrapStyle2.Through, iconcls:'wrap-through', tip: this.txtThrough }, - { offsetx: 200, data: Asc.c_oAscWrapStyle2.TopAndBottom, iconcls:'wrap-topAndBottom', tip: this.txtTopAndBottom }, - { offsetx: 250, data: Asc.c_oAscWrapStyle2.InFront, iconcls:'wrap-inFront', tip: this.txtInFront }, - { offsetx: 300, data: Asc.c_oAscWrapStyle2.Behind, iconcls:'wrap-behind', tip: this.txtBehind } - ]; - - this.btnWrapType = new Common.UI.Button({ - cls : 'btn-large-dataview', - iconCls : 'item-wrap wrap-inline', - menu : new Common.UI.Menu({ - items: [ - { template: _.template('
') } - ] - }) - }); - this.btnWrapType.on('render:after', function(btn) { - me.mnuWrapPicker = new Common.UI.DataView({ - el: $('#id-shape-menu-wrap'), - parentMenu: btn.menu, - store: new Common.UI.DataViewStore(viewData), - itemTemplate: _.template('
') - }); - }); - this.btnWrapType.render($('#shape-button-wrap')); - this.mnuWrapPicker.on('item:click', _.bind(this.onSelectWrap, this, this.btnWrapType)); - this.lockedControls.push(this.btnWrapType); - - this.btnChangeShape = new Common.UI.Button({ - cls: 'btn-icon-default', - iconCls: 'btn-change-shape', - menu : new Common.UI.Menu({ - menuAlign: 'tr-br', - cls: 'menu-shapes', - items: [] - }) - }); - this.btnChangeShape.render( $('#shape-btn-change')) ; - this.lockedControls.push(this.btnChangeShape); - - $(this.el).on('click', '#shape-advanced-link', _.bind(this.openAdvancedSettings, this)); - this.FillColorContainer = $('#shape-panel-color-fill'); this.FillImageContainer = $('#shape-panel-image-fill'); this.FillPatternContainer = $('#shape-panel-pattern-fill'); @@ -517,8 +141,6 @@ define([ el.html(this.template({ scope: this })); - - this.linkAdvanced = $('#shape-advanced-link'); }, setApi: function(api) { @@ -1018,6 +640,7 @@ define([ }, _ImgWrapStyleChanged: function(style) { + if (!this.mnuWrapPicker) return; if (this._state.WrappingStyle!==style) { this._noApply = true; var record = this.mnuWrapPicker.store.findWhere({data: style}); @@ -1539,7 +1162,261 @@ define([ } }, + createDelayedControls: function() { + var me = this; + + this._arrFillSrc = [ + {displayValue: this.textColor, value: Asc.c_oAscFill.FILL_TYPE_SOLID}, + {displayValue: this.textGradientFill, value: Asc.c_oAscFill.FILL_TYPE_GRAD}, + {displayValue: this.textImageTexture, value: Asc.c_oAscFill.FILL_TYPE_BLIP}, + {displayValue: this.textPatternFill, value: Asc.c_oAscFill.FILL_TYPE_PATT}, + {displayValue: this.textNoFill, value: Asc.c_oAscFill.FILL_TYPE_NOFILL} + ]; + + this.cmbFillSrc = new Common.UI.ComboBox({ + el: $('#shape-combo-fill-src'), + cls: 'input-group-nr', + style: 'width: 100%;', + menuStyle: 'min-width: 190px;', + editable: false, + data: this._arrFillSrc + }); + this.cmbFillSrc.setValue(this._arrFillSrc[0].value); + this.cmbFillSrc.on('selected', _.bind(this.onFillSrcSelect, this)); + this.fillControls.push(this.cmbFillSrc); + + this.cmbPattern = new Common.UI.ComboDataView({ + itemWidth: 28, + itemHeight: 28, + menuMaxHeight: 300, + enableKeyEvents: true, + cls: 'combo-pattern' + }); + this.cmbPattern.menuPicker.itemTemplate = this.cmbPattern.fieldPicker.itemTemplate = _.template([ + '
', + '', + '
' + ].join('')); + this.cmbPattern.render($('#shape-combo-pattern')); + this.cmbPattern.openButton.menu.cmpEl.css({ + 'min-width': 178, + 'max-width': 178 + }); + this.cmbPattern.on('click', _.bind(this.onPatternSelect, this)); + this.cmbPattern.openButton.menu.on('show:after', function () { + me.cmbPattern.menuPicker.scroller.update({alwaysVisibleY: true}); + }); + this.fillControls.push(this.cmbPattern); + + this.btnInsertFromFile = new Common.UI.Button({ + el: $('#shape-button-from-file') + }); + this.fillControls.push(this.btnInsertFromFile); + + this.btnInsertFromUrl = new Common.UI.Button({ + el: $('#shape-button-from-url') + }); + this.fillControls.push(this.btnInsertFromUrl); + + this.btnInsertFromFile.on('click', _.bind(function(btn){ + if (this.api) this.api.ChangeShapeImageFromFile(); + this.fireEvent('editcomplete', this); + }, this)); + this.btnInsertFromUrl.on('click', _.bind(this.insertFromUrl, this)); + + this._arrFillType = [ + {displayValue: this.textStretch, value: Asc.c_oAscFillBlipType.STRETCH}, + {displayValue: this.textTile, value: Asc.c_oAscFillBlipType.TILE} + ]; + + this.cmbFillType = new Common.UI.ComboBox({ + el: $('#shape-combo-fill-type'), + cls: 'input-group-nr', + menuStyle: 'min-width: 90px;', + editable: false, + data: this._arrFillType + }); + this.cmbFillType.setValue(this._arrFillType[0].value); + this.cmbFillType.on('selected', _.bind(this.onFillTypeSelect, this)); + this.fillControls.push(this.cmbFillType); + + this.numTransparency = new Common.UI.MetricSpinner({ + el: $('#shape-spin-transparency'), + step: 1, + width: 62, + value: '100 %', + defaultUnit : "%", + maxValue: 100, + minValue: 0 + }); + this.numTransparency.on('change', _.bind(this.onNumTransparencyChange, this)); + this.fillControls.push(this.numTransparency); + + this.sldrTransparency = new Common.UI.SingleSlider({ + el: $('#shape-slider-transparency'), + width: 75, + minValue: 0, + maxValue: 100, + value: 100 + }); + this.sldrTransparency.on('change', _.bind(this.onTransparencyChange, this)); + this.sldrTransparency.on('changecomplete', _.bind(this.onTransparencyChangeComplete, this)); + this.fillControls.push(this.sldrTransparency); + + this.lblTransparencyStart = $(this.el).find('#shape-lbl-transparency-start'); + this.lblTransparencyEnd = $(this.el).find('#shape-lbl-transparency-end'); + + this._arrGradType = [ + {displayValue: this.textLinear, value: Asc.c_oAscFillGradType.GRAD_LINEAR}, + {displayValue: this.textRadial, value: Asc.c_oAscFillGradType.GRAD_PATH} + ]; + + this.cmbGradType = new Common.UI.ComboBox({ + el: $('#shape-combo-grad-type'), + cls: 'input-group-nr', + menuStyle: 'min-width: 90px;', + editable: false, + data: this._arrGradType + }); + this.cmbGradType.setValue(this._arrGradType[0].value); + this.cmbGradType.on('selected', _.bind(this.onGradTypeSelect, this)); + this.fillControls.push(this.cmbGradType); + + this._viewDataLinear = [ + { offsetx: 0, offsety: 0, type:45, subtype:-1, iconcls:'gradient-left-top' }, + { offsetx: 50, offsety: 0, type:90, subtype:4, iconcls:'gradient-top'}, + { offsetx: 100, offsety: 0, type:135, subtype:5, iconcls:'gradient-right-top'}, + { offsetx: 0, offsety: 50, type:0, subtype:6, iconcls:'gradient-left', cls: 'item-gradient-separator', selected: true}, + { offsetx: 100, offsety: 50, type:180, subtype:1, iconcls:'gradient-right'}, + { offsetx: 0, offsety: 100, type:315, subtype:2, iconcls:'gradient-left-bottom'}, + { offsetx: 50, offsety: 100, type:270, subtype:3, iconcls:'gradient-bottom'}, + { offsetx: 100, offsety: 100, type:225, subtype:7, iconcls:'gradient-right-bottom'} + ]; + + this._viewDataRadial = [ + { offsetx: 100, offsety: 150, type:2, subtype:5, iconcls:'gradient-radial-center'} + ]; + + this.btnDirection = new Common.UI.Button({ + cls : 'btn-large-dataview', + iconCls : 'item-gradient gradient-left', + menu : new Common.UI.Menu({ + style: 'min-width: 60px;', + menuAlign: 'tr-br', + items: [ + { template: _.template('
') } + ] + }) + }); + this.btnDirection.on('render:after', function(btn) { + me.mnuDirectionPicker = new Common.UI.DataView({ + el: $('#id-shape-menu-direction'), + parentMenu: btn.menu, + restoreHeight: 174, + allowScrollbar: false, + store: new Common.UI.DataViewStore(me._viewDataLinear), + itemTemplate: _.template('
') + }); + }); + this.btnDirection.render($('#shape-button-direction')); + this.mnuDirectionPicker.on('item:click', _.bind(this.onSelectGradient, this, this.btnDirection)); + this.fillControls.push(this.btnDirection); + + this.sldrGradient = new Common.UI.MultiSliderGradient({ + el: $('#shape-slider-gradient'), + width: 125, + minValue: 0, + maxValue: 100, + values: [0, 100] + }); + this.sldrGradient.on('change', _.bind(this.onGradientChange, this)); + this.sldrGradient.on('changecomplete', _.bind(this.onGradientChangeComplete, this)); + this.sldrGradient.on('thumbclick', function(cmp, index){ + me.GradColor.currentIdx = index; + var color = me.GradColor.colors[me.GradColor.currentIdx]; + me.btnGradColor.setColor(color); + me.colorsGrad.select(color,false); + }); + this.sldrGradient.on('thumbdblclick', function(cmp){ + me.btnGradColor.cmpEl.find('button').dropdown('toggle'); + }); + this.fillControls.push(this.sldrGradient); + + this.cmbBorderSize = new Common.UI.ComboBorderSizeEditable({ + el: $('#shape-combo-border-size'), + style: "width: 93px;", + txtNoBorders: this.txtNoBorders + }) + .on('selected', _.bind(this.onBorderSizeSelect, this)) + .on('changed:before',_.bind(this.onBorderSizeChanged, this, true)) + .on('changed:after', _.bind(this.onBorderSizeChanged, this, false)) + .on('combo:blur', _.bind(this.onComboBlur, this, false)); + this.BorderSize = this.cmbBorderSize.store.at(2).get('value'); + this.cmbBorderSize.setValue(this.BorderSize); + this.lockedControls.push(this.cmbBorderSize); + + this.cmbBorderType = new Common.UI.ComboBorderType({ + el: $('#shape-combo-border-type'), + style: "width: 93px;", + menuStyle: 'min-width: 93px;' + }).on('selected', _.bind(this.onBorderTypeSelect, this)) + .on('combo:blur', _.bind(this.onComboBlur, this, false)); + this.BorderType = Asc.c_oDashType.solid; + this.cmbBorderType.setValue(this.BorderType); + this.lockedControls.push(this.cmbBorderType); + + var viewData = [ + { offsetx: 0, data: Asc.c_oAscWrapStyle2.Inline, iconcls:'wrap-inline', tip: this.txtInline, selected: true }, + { offsetx: 50, data: Asc.c_oAscWrapStyle2.Square, iconcls:'wrap-square', tip: this.txtSquare }, + { offsetx: 100, data: Asc.c_oAscWrapStyle2.Tight, iconcls:'wrap-tight', tip: this.txtTight }, + { offsetx: 150, data: Asc.c_oAscWrapStyle2.Through, iconcls:'wrap-through', tip: this.txtThrough }, + { offsetx: 200, data: Asc.c_oAscWrapStyle2.TopAndBottom, iconcls:'wrap-topAndBottom', tip: this.txtTopAndBottom }, + { offsetx: 250, data: Asc.c_oAscWrapStyle2.InFront, iconcls:'wrap-inFront', tip: this.txtInFront }, + { offsetx: 300, data: Asc.c_oAscWrapStyle2.Behind, iconcls:'wrap-behind', tip: this.txtBehind } + ]; + + this.btnWrapType = new Common.UI.Button({ + cls : 'btn-large-dataview', + iconCls : 'item-wrap wrap-inline', + menu : new Common.UI.Menu({ + items: [ + { template: _.template('
') } + ] + }) + }); + this.btnWrapType.on('render:after', function(btn) { + me.mnuWrapPicker = new Common.UI.DataView({ + el: $('#id-shape-menu-wrap'), + parentMenu: btn.menu, + store: new Common.UI.DataViewStore(viewData), + itemTemplate: _.template('
') + }); + }); + this.btnWrapType.render($('#shape-button-wrap')); + this.mnuWrapPicker.on('item:click', _.bind(this.onSelectWrap, this, this.btnWrapType)); + this.lockedControls.push(this.btnWrapType); + + this.btnChangeShape = new Common.UI.Button({ + cls: 'btn-icon-default', + iconCls: 'btn-change-shape', + menu : new Common.UI.Menu({ + menuAlign: 'tr-br', + cls: 'menu-shapes', + items: [] + }) + }); + this.btnChangeShape.render( $('#shape-btn-change')) ; + this.lockedControls.push(this.btnChangeShape); + + this.linkAdvanced = $('#shape-advanced-link'); + $(this.el).on('click', '#shape-advanced-link', _.bind(this.openAdvancedSettings, this)); + }, + createDelayedElements: function() { + this.createDelayedControls(); + var global_hatch_menu_map = [ 0,1,3,2,4, 53,5,6,7,8, @@ -1571,7 +1448,6 @@ define([ this.PatternFillType = this.patternViewData[0].type; } - this.fillAutoShapes(); this.UpdateThemeColors(); }, @@ -1579,6 +1455,24 @@ define([ onInitStandartTextures: function(texture) { var me = this; if (texture && texture.length>0){ + this.btnTexture = new Common.UI.ComboBox({ + el: $('#shape-combo-fill-texture'), + template: _.template([ + '
', + '
' + this.textSelectTexture + '
', + '
', + '', + '
' + ].join('')) + }); + this.textureMenu = new Common.UI.Menu({ + items: [ + { template: _.template('
') } + ] + }); + this.textureMenu.render($('#shape-combo-fill-texture')); + this.fillControls.push(this.btnTexture); + var texturearray = []; _.each(texture, function(item){ texturearray.push({ @@ -1659,6 +1553,105 @@ define([ }, UpdateThemeColors: function() { + if (!this.btnBackColor) { + // create color buttons + this.btnBackColor = new Common.UI.ColorButton({ + style: "width:45px;", + menu : new Common.UI.Menu({ + items: [ + { template: _.template('
') }, + { template: _.template('' + this.textNewColor + '') } + ] + }) + }); + this.btnBackColor.render( $('#shape-back-color-btn')); + this.btnBackColor.setColor('transparent'); + this.fillControls.push(this.btnBackColor); + this.colorsBack = new Common.UI.ThemeColorPalette({ + el: $('#shape-back-color-menu'), + value: 'transparent', + transparent: true + }); + this.colorsBack.on('select', _.bind(this.onColorsBackSelect, this)); + $(this.el).on('click', '#shape-back-color-new', _.bind(this.addNewColor, this, this.colorsBack, this.btnBackColor)); + + this.btnFGColor = new Common.UI.ColorButton({ + style: "width:45px;", + menu : new Common.UI.Menu({ + items: [ + { template: _.template('
') }, + { template: _.template('' + this.textNewColor + '') } + ] + }) + }); + this.btnFGColor.render( $('#shape-foreground-color-btn')); + this.btnFGColor.setColor('000000'); + this.fillControls.push(this.btnFGColor); + this.colorsFG = new Common.UI.ThemeColorPalette({ + el: $('#shape-foreground-color-menu'), + value: '000000' + }); + this.colorsFG.on('select', _.bind(this.onColorsFGSelect, this)); + $(this.el).on('click', '#shape-foreground-color-new', _.bind(this.addNewColor, this, this.colorsFG, this.btnFGColor)); + + this.btnBGColor = new Common.UI.ColorButton({ + style: "width:45px;", + menu : new Common.UI.Menu({ + items: [ + { template: _.template('
') }, + { template: _.template('' + this.textNewColor + '') } + ] + }) + }); + this.btnBGColor.render( $('#shape-background-color-btn')); + this.btnBGColor.setColor('ffffff'); + this.fillControls.push(this.btnBGColor); + this.colorsBG = new Common.UI.ThemeColorPalette({ + el: $('#shape-background-color-menu'), + value: 'ffffff' + }); + this.colorsBG.on('select', _.bind(this.onColorsBGSelect, this)); + $(this.el).on('click', '#shape-background-color-new', _.bind(this.addNewColor, this, this.colorsBG, this.btnBGColor)); + + this.btnGradColor = new Common.UI.ColorButton({ + style: "width:45px;", + menu : new Common.UI.Menu({ + items: [ + { template: _.template('
') }, + { template: _.template('' + this.textNewColor + '') } + ] + }) + }); + this.btnGradColor.render( $('#shape-gradient-color-btn')); + this.btnGradColor.setColor('000000'); + this.fillControls.push(this.btnGradColor); + this.colorsGrad = new Common.UI.ThemeColorPalette({ + el: $('#shape-gradient-color-menu'), + value: '000000' + }); + this.colorsGrad.on('select', _.bind(this.onColorsGradientSelect, this)); + $(this.el).on('click', '#shape-gradient-color-new', _.bind(this.addNewColor, this, this.colorsGrad, this.btnGradColor)); + + this.btnBorderColor = new Common.UI.ColorButton({ + style: "width:45px;", + menu : new Common.UI.Menu({ + items: [ + { template: _.template('
') }, + { template: _.template('' + this.textNewColor + '') } + ] + }) + }); + this.btnBorderColor.render( $('#shape-border-color-btn')); + this.btnBorderColor.setColor('000000'); + this.lockedControls.push(this.btnBorderColor); + this.colorsBorder = new Common.UI.ThemeColorPalette({ + el: $('#shape-border-color-menu'), + value: '000000' + }); + this.colorsBorder.on('select', _.bind(this.onColorsBorderSelect, this)); + $(this.el).on('click', '#shape-border-color-new', _.bind(this.addNewColor, this, this.colorsBorder, this.btnBorderColor)); + } + this.colorsBorder.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors()); this.colorsBack.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors()); this.colorsFG.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors()); @@ -1698,6 +1691,8 @@ define([ }, disableControls: function(disable, disableFill) { + if (this._initSettings) return; + this.disableFillPanels(disable || disableFill); if (this._state.DisabledControls!==disable) { this._state.DisabledControls = disable; diff --git a/apps/documenteditor/main/app/view/TableSettings.js b/apps/documenteditor/main/app/view/TableSettings.js index 7600349a1..2a5a4f7db 100644 --- a/apps/documenteditor/main/app/view/TableSettings.js +++ b/apps/documenteditor/main/app/view/TableSettings.js @@ -69,7 +69,7 @@ define([ }, initialize: function () { - var me = this; + this._initSettings = true; this._state = { TemplateId: 0, @@ -99,218 +99,6 @@ define([ this._wrapHandled = false; this.render(); - - this.chHeader = new Common.UI.CheckBox({ - el: $('#table-checkbox-header'), - labelText: this.textHeader - }); - this.lockedControls.push(this.chHeader); - - this.chTotal = new Common.UI.CheckBox({ - el: $('#table-checkbox-total'), - labelText: this.textTotal - }); - this.lockedControls.push(this.chTotal); - - this.chBanded = new Common.UI.CheckBox({ - el: $('#table-checkbox-banded'), - labelText: this.textBanded - }); - this.lockedControls.push(this.chBanded); - - this.chFirst = new Common.UI.CheckBox({ - el: $('#table-checkbox-first'), - labelText: this.textFirst - }); - this.lockedControls.push(this.chFirst); - - this.chLast = new Common.UI.CheckBox({ - el: $('#table-checkbox-last'), - labelText: this.textLast - }); - this.lockedControls.push(this.chLast); - - this.chColBanded = new Common.UI.CheckBox({ - el: $('#table-checkbox-col-banded'), - labelText: this.textBanded - }); - this.lockedControls.push(this.chColBanded); - - this.chHeader.on('change', _.bind(this.onCheckTemplateChange, this, 0)); - this.chTotal.on('change', _.bind(this.onCheckTemplateChange, this, 1)); - this.chBanded.on('change', _.bind(this.onCheckTemplateChange, this, 2)); - this.chFirst.on('change', _.bind(this.onCheckTemplateChange, this, 3)); - this.chLast.on('change', _.bind(this.onCheckTemplateChange, this, 4)); - this.chColBanded.on('change', _.bind(this.onCheckTemplateChange, this, 5)); - - this.cmbTableTemplate = new Common.UI.ComboDataView({ - itemWidth: 70, - itemHeight: 50, - menuMaxHeight: 300, - enableKeyEvents: true, - cls: 'combo-template' - }); - this.cmbTableTemplate.render($('#table-combo-template')); - this.cmbTableTemplate.openButton.menu.cmpEl.css({ - 'min-width': 175, - 'max-width': 175 - }); - this.cmbTableTemplate.on('click', _.bind(this.onTableTemplateSelect, this)); - this.cmbTableTemplate.openButton.menu.on('show:after', function () { - me.cmbTableTemplate.menuPicker.scroller.update({alwaysVisibleY: true}); - }); - this.lockedControls.push(this.cmbTableTemplate); - - this.btnWrapNone = new Common.UI.Button({ - cls: 'btn-options huge', - iconCls: 'icon-right-panel btn-wrap-none', - posId: c_tableWrap.TABLE_WRAP_NONE, - hint: this.textWrapNoneTooltip, - enableToggle: true, - allowDepress: false, - toggleGroup : 'tablewrapGroup' - }); - this.btnWrapNone.render( $('#table-button-wrap-none')) ; - this.btnWrapNone.on('click', _.bind(this.onBtnWrapClick, this)); - this.lockedControls.push(this.btnWrapNone); - - this.btnWrapParallel = new Common.UI.Button({ - cls: 'btn-options huge', - iconCls: 'icon-right-panel btn-wrap-parallel', - posId: c_tableWrap.TABLE_WRAP_PARALLEL, - hint: this.textWrapParallelTooltip, - enableToggle: true, - allowDepress: false, - toggleGroup : 'tablewrapGroup' - }); - this.btnWrapParallel.render( $('#table-button-wrap-parallel')) ; - this.btnWrapParallel.on('click', _.bind(this.onBtnWrapClick, this)); - this.lockedControls.push(this.btnWrapParallel); - - var _arrBorderPosition = [ - ['l', 'btn-borders-small btn-position-left', 'table-button-border-left', this.tipLeft], - ['c','btn-borders-small btn-position-inner-vert', 'table-button-border-inner-vert', this.tipInnerVert], - ['r','btn-borders-small btn-position-right', 'table-button-border-right', this.tipRight], - ['t','btn-borders-small btn-position-top', 'table-button-border-top', this.tipTop], - ['m','btn-borders-small btn-position-inner-hor', 'table-button-border-inner-hor', this.tipInnerHor], - ['b', 'btn-borders-small btn-position-bottom', 'table-button-border-bottom', this.tipBottom], - ['cm', 'btn-borders-small btn-position-inner', 'table-button-border-inner', this.tipInner], - ['lrtb', 'btn-borders-small btn-position-outer', 'table-button-border-outer', this.tipOuter], - ['lrtbcm', 'btn-borders-small btn-position-all', 'table-button-border-all', this.tipAll], - ['', 'btn-borders-small btn-position-none', 'table-button-border-none', this.tipNone] - ]; - - this._btnsBorderPosition = []; - _.each(_arrBorderPosition, function(item, index, list){ - var _btn = new Common.UI.Button({ - cls: 'btn-toolbar', - iconCls: item[1], - strId :item[0], - hint: item[3] - }); - _btn.render( $('#'+item[2])) ; - _btn.on('click', _.bind(this.onBtnBordersClick, this)); - this._btnsBorderPosition.push( _btn ); - this.lockedControls.push(_btn); - }, this); - - this.cmbBorderSize = new Common.UI.ComboBorderSize({ - el: $('#table-combo-border-size'), - style: "width: 93px;" - }); - this.BorderSize = this.cmbBorderSize.store.at(1).get('value'); - this.cmbBorderSize.setValue(this.BorderSize); - this.cmbBorderSize.on('selected', _.bind(this.onBorderSizeSelect, this)); - this.lockedControls.push(this.cmbBorderSize); - - this.btnBorderColor = new Common.UI.ColorButton({ - style: "width:45px;", - menu : new Common.UI.Menu({ - items: [ - { template: _.template('
') }, - { template: _.template('' + me.textNewColor + '') } - ] - }) - }); - - this.btnBorderColor.on('render:after', function(btn) { - me.borderColor = new Common.UI.ThemeColorPalette({ - el: $('#table-border-color-menu') - }); - me.borderColor.on('select', _.bind(me.onColorsBorderSelect, me)); - }); - this.btnBorderColor.render( $('#table-border-color-btn')); - this.btnBorderColor.setColor('000000'); - $(this.el).on('click', '#table-border-color-new', _.bind(this.addNewColor, this, this.borderColor, this.btnBorderColor)); - this.lockedControls.push(this.btnBorderColor); - - this.btnBackColor = new Common.UI.ColorButton({ - style: "width:45px;", - menu : new Common.UI.Menu({ - items: [ - { template: _.template('
') }, - { template: _.template('' + me.textNewColor + '') } - ] - }) - }); - - this.btnBackColor.on('render:after', function(btn) { - me.colorsBack = new Common.UI.ThemeColorPalette({ - el: $('#table-back-color-menu'), - transparent: true - }); - me.colorsBack.on('select', _.bind(me.onColorsBackSelect, me)); - }); - this.btnBackColor.render( $('#table-back-color-btn')); - $(this.el).on('click', '#table-back-color-new', _.bind(this.addNewColor, this, this.colorsBack, this.btnBackColor, this.btnBackColor)); - this.lockedControls.push(this.btnBackColor); - - this.btnEdit = new Common.UI.Button({ - cls: 'btn-icon-default', - iconCls: 'btn-edit-table', - menu : new Common.UI.Menu({ - menuAlign: 'tr-br', - items: [ - { caption: this.selectRowText, value: 0 }, - { caption: this.selectColumnText, value: 1 }, - { caption: this.selectCellText, value: 2 }, - { caption: this.selectTableText, value: 3 }, - { caption: '--' }, - { caption: this.insertRowAboveText, value: 4 }, - { caption: this.insertRowBelowText, value: 5 }, - { caption: this.insertColumnLeftText, value: 6 }, - { caption: this.insertColumnRightText, value: 7 }, - { caption: '--' }, - { caption: this.deleteRowText, value: 8 }, - { caption: this.deleteColumnText, value: 9 }, - { caption: this.deleteTableText, value: 10 }, - { caption: '--' }, - { caption: this.mergeCellsText, value: 11 }, - { caption: this.splitCellsText, value: 12 } - ] - }) - }); - this.btnEdit.render( $('#table-btn-edit')) ; - this.mnuMerge = this.btnEdit.menu.items[this.btnEdit.menu.items.length-2]; - this.mnuSplit = this.btnEdit.menu.items[this.btnEdit.menu.items.length-1]; - - this.btnEdit.menu.on('show:after', _.bind( function(){ - if (this.api) { - this.mnuMerge.setDisabled(!this.api.CheckBeforeMergeCells()); - this.mnuSplit.setDisabled(!this.api.CheckBeforeSplitCells()); - } - }, this)); - this.btnEdit.menu.on('item:click', _.bind(this.onEditClick, this)); - this.lockedControls.push(this.btnEdit); - - this.chRepeatRow = new Common.UI.CheckBox({ - el: $('#table-checkbox-repeat-row'), - labelText: this.strRepeatRow - }); - this.chRepeatRow.on('change', _.bind(this.onCheckRepeatRowChange, this)); - this.lockedControls.push(this.chRepeatRow); - - $(this.el).on('click', '#table-advanced-link', _.bind(this.openAdvancedSettings, this)); }, onCheckTemplateChange: function(type, field, newValue, oldValue, eOpts) { @@ -465,8 +253,6 @@ define([ el.html(this.template({ scope: this })); - - this.linkAdvanced = $('#table-advanced-link'); }, setApi: function(o) { @@ -479,7 +265,171 @@ define([ return this; }, + createDelayedControls: function() { + this.chHeader = new Common.UI.CheckBox({ + el: $('#table-checkbox-header'), + labelText: this.textHeader + }); + this.lockedControls.push(this.chHeader); + + this.chTotal = new Common.UI.CheckBox({ + el: $('#table-checkbox-total'), + labelText: this.textTotal + }); + this.lockedControls.push(this.chTotal); + + this.chBanded = new Common.UI.CheckBox({ + el: $('#table-checkbox-banded'), + labelText: this.textBanded + }); + this.lockedControls.push(this.chBanded); + + this.chFirst = new Common.UI.CheckBox({ + el: $('#table-checkbox-first'), + labelText: this.textFirst + }); + this.lockedControls.push(this.chFirst); + + this.chLast = new Common.UI.CheckBox({ + el: $('#table-checkbox-last'), + labelText: this.textLast + }); + this.lockedControls.push(this.chLast); + + this.chColBanded = new Common.UI.CheckBox({ + el: $('#table-checkbox-col-banded'), + labelText: this.textBanded + }); + this.lockedControls.push(this.chColBanded); + + this.chHeader.on('change', _.bind(this.onCheckTemplateChange, this, 0)); + this.chTotal.on('change', _.bind(this.onCheckTemplateChange, this, 1)); + this.chBanded.on('change', _.bind(this.onCheckTemplateChange, this, 2)); + this.chFirst.on('change', _.bind(this.onCheckTemplateChange, this, 3)); + this.chLast.on('change', _.bind(this.onCheckTemplateChange, this, 4)); + this.chColBanded.on('change', _.bind(this.onCheckTemplateChange, this, 5)); + + this.btnWrapNone = new Common.UI.Button({ + cls: 'btn-options huge', + iconCls: 'icon-right-panel btn-wrap-none', + posId: c_tableWrap.TABLE_WRAP_NONE, + hint: this.textWrapNoneTooltip, + enableToggle: true, + allowDepress: false, + toggleGroup : 'tablewrapGroup' + }); + this.btnWrapNone.render( $('#table-button-wrap-none')) ; + this.btnWrapNone.on('click', _.bind(this.onBtnWrapClick, this)); + this.lockedControls.push(this.btnWrapNone); + + this.btnWrapParallel = new Common.UI.Button({ + cls: 'btn-options huge', + iconCls: 'icon-right-panel btn-wrap-parallel', + posId: c_tableWrap.TABLE_WRAP_PARALLEL, + hint: this.textWrapParallelTooltip, + enableToggle: true, + allowDepress: false, + toggleGroup : 'tablewrapGroup' + }); + this.btnWrapParallel.render( $('#table-button-wrap-parallel')) ; + this.btnWrapParallel.on('click', _.bind(this.onBtnWrapClick, this)); + this.lockedControls.push(this.btnWrapParallel); + + var _arrBorderPosition = [ + ['l', 'btn-borders-small btn-position-left', 'table-button-border-left', this.tipLeft], + ['c','btn-borders-small btn-position-inner-vert', 'table-button-border-inner-vert', this.tipInnerVert], + ['r','btn-borders-small btn-position-right', 'table-button-border-right', this.tipRight], + ['t','btn-borders-small btn-position-top', 'table-button-border-top', this.tipTop], + ['m','btn-borders-small btn-position-inner-hor', 'table-button-border-inner-hor', this.tipInnerHor], + ['b', 'btn-borders-small btn-position-bottom', 'table-button-border-bottom', this.tipBottom], + ['cm', 'btn-borders-small btn-position-inner', 'table-button-border-inner', this.tipInner], + ['lrtb', 'btn-borders-small btn-position-outer', 'table-button-border-outer', this.tipOuter], + ['lrtbcm', 'btn-borders-small btn-position-all', 'table-button-border-all', this.tipAll], + ['', 'btn-borders-small btn-position-none', 'table-button-border-none', this.tipNone] + ]; + + this._btnsBorderPosition = []; + _.each(_arrBorderPosition, function(item, index, list){ + var _btn = new Common.UI.Button({ + cls: 'btn-toolbar', + iconCls: item[1], + strId :item[0], + hint: item[3] + }); + _btn.render( $('#'+item[2])) ; + _btn.on('click', _.bind(this.onBtnBordersClick, this)); + this._btnsBorderPosition.push( _btn ); + this.lockedControls.push(_btn); + }, this); + + this.cmbBorderSize = new Common.UI.ComboBorderSize({ + el: $('#table-combo-border-size'), + style: "width: 93px;" + }); + this.BorderSize = this.cmbBorderSize.store.at(1).get('value'); + this.cmbBorderSize.setValue(this.BorderSize); + this.cmbBorderSize.on('selected', _.bind(this.onBorderSizeSelect, this)); + this.lockedControls.push(this.cmbBorderSize); + + this.btnEdit = new Common.UI.Button({ + cls: 'btn-icon-default', + iconCls: 'btn-edit-table', + menu : new Common.UI.Menu({ + menuAlign: 'tr-br', + items: [ + { caption: this.selectRowText, value: 0 }, + { caption: this.selectColumnText, value: 1 }, + { caption: this.selectCellText, value: 2 }, + { caption: this.selectTableText, value: 3 }, + { caption: '--' }, + { caption: this.insertRowAboveText, value: 4 }, + { caption: this.insertRowBelowText, value: 5 }, + { caption: this.insertColumnLeftText, value: 6 }, + { caption: this.insertColumnRightText, value: 7 }, + { caption: '--' }, + { caption: this.deleteRowText, value: 8 }, + { caption: this.deleteColumnText, value: 9 }, + { caption: this.deleteTableText, value: 10 }, + { caption: '--' }, + { caption: this.mergeCellsText, value: 11 }, + { caption: this.splitCellsText, value: 12 } + ] + }) + }); + this.btnEdit.render( $('#table-btn-edit')) ; + this.mnuMerge = this.btnEdit.menu.items[this.btnEdit.menu.items.length-2]; + this.mnuSplit = this.btnEdit.menu.items[this.btnEdit.menu.items.length-1]; + + this.btnEdit.menu.on('show:after', _.bind( function(){ + if (this.api) { + this.mnuMerge.setDisabled(!this.api.CheckBeforeMergeCells()); + this.mnuSplit.setDisabled(!this.api.CheckBeforeSplitCells()); + } + }, this)); + this.btnEdit.menu.on('item:click', _.bind(this.onEditClick, this)); + this.lockedControls.push(this.btnEdit); + + this.chRepeatRow = new Common.UI.CheckBox({ + el: $('#table-checkbox-repeat-row'), + labelText: this.strRepeatRow + }); + this.chRepeatRow.on('change', _.bind(this.onCheckRepeatRowChange, this)); + this.lockedControls.push(this.chRepeatRow); + + this.linkAdvanced = $('#table-advanced-link'); + $(this.el).on('click', '#table-advanced-link', _.bind(this.openAdvancedSettings, this)); + }, + + createDelayedElements: function() { + this.createDelayedControls(); + this.UpdateThemeColors(); + }, + ChangeSettings: function(props) { + if (this._initSettings) + this.createDelayedElements(); + this._initSettings = false; + this.disableControls(this._locked); if (props ) @@ -671,6 +621,7 @@ define([ }, _TblWrapStyleChanged: function(style) { + if (!this.btnWrapNone || !this.btnWrapParallel) return; if ( this._state.WrapStyle!==style ) { this._noApply = true; this.btnWrapNone.toggle((style==c_tableWrap.TABLE_WRAP_NONE), true); @@ -685,18 +636,73 @@ define([ }, UpdateThemeColors: function() { - if (this.colorsBack) - this.colorsBack.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors()); - if (this.borderColor) { - this.borderColor.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors()); - this.btnBorderColor.setColor(this.borderColor.getColor()); - } + if (!this.btnBackColor) { + // create color buttons + this.btnBorderColor = new Common.UI.ColorButton({ + style: "width:45px;", + menu : new Common.UI.Menu({ + items: [ + { template: _.template('
') }, + { template: _.template('' + this.textNewColor + '') } + ] + }) + }); + this.btnBorderColor.render( $('#table-border-color-btn')); + this.btnBorderColor.setColor('000000'); + this.lockedControls.push(this.btnBorderColor); + this.borderColor = new Common.UI.ThemeColorPalette({ + el: $('#table-border-color-menu') + }); + this.borderColor.on('select', _.bind(this.onColorsBorderSelect, this)); + $(this.el).on('click', '#table-border-color-new', _.bind(this.addNewColor, this, this.borderColor, this.btnBorderColor)); + + this.btnBackColor = new Common.UI.ColorButton({ + style: "width:45px;", + menu : new Common.UI.Menu({ + items: [ + { template: _.template('
') }, + { template: _.template('' + this.textNewColor + '') } + ] + }) + }); + this.btnBackColor.render( $('#table-back-color-btn')); + this.lockedControls.push(this.btnBackColor); + this.colorsBack = new Common.UI.ThemeColorPalette({ + el: $('#table-back-color-menu'), + transparent: true + }); + this.colorsBack.on('select', _.bind(this.onColorsBackSelect, this)); + $(this.el).on('click', '#table-back-color-new', _.bind(this.addNewColor, this, this.colorsBack, this.btnBackColor, this.btnBackColor)); + } + this.colorsBack.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors()); + this.borderColor.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors()); + this.btnBorderColor.setColor(this.borderColor.getColor()); }, _onInitTemplates: function(Templates){ var self = this; this._isTemplatesChanged = true; + if (!this.cmbTableTemplate) { + this.cmbTableTemplate = new Common.UI.ComboDataView({ + itemWidth: 70, + itemHeight: 50, + menuMaxHeight: 300, + enableKeyEvents: true, + cls: 'combo-template' + }); + this.cmbTableTemplate.render($('#table-combo-template')); + this.cmbTableTemplate.openButton.menu.cmpEl.css({ + 'min-width': 175, + 'max-width': 175 + }); + this.cmbTableTemplate.on('click', _.bind(this.onTableTemplateSelect, this)); + this.cmbTableTemplate.openButton.menu.on('show:after', function () { + self.cmbTableTemplate.menuPicker.scroller.update({alwaysVisibleY: true}); + }); + this.lockedControls.push(this.cmbTableTemplate); + } + var count = self.cmbTableTemplate.menuPicker.store.length; if (count>0 && count==Templates.length) { var data = self.cmbTableTemplate.menuPicker.store.models; @@ -759,6 +765,8 @@ define([ }, disableControls: function(disable) { + if (this._initSettings) return; + if (this._state.DisabledControls!==disable) { this._state.DisabledControls = disable; _.each(this.lockedControls, function(item) { diff --git a/apps/documenteditor/main/app/view/TextArtSettings.js b/apps/documenteditor/main/app/view/TextArtSettings.js index 7fd9e6f4b..65f6a32e8 100644 --- a/apps/documenteditor/main/app/view/TextArtSettings.js +++ b/apps/documenteditor/main/app/view/TextArtSettings.js @@ -69,7 +69,6 @@ define([ }, initialize: function () { - var me = this; this._initSettings = true; this._noApply = true; this.imgprops = null; @@ -108,251 +107,6 @@ define([ this.render(); - this.cmbTextArt = new Common.UI.ComboDataView({ - itemWidth: 50, - itemHeight: 50, - menuMaxHeight: 300, - enableKeyEvents: true, - showLast: false, - cls: 'combo-textart' - }); - this.cmbTextArt.render($('#textart-combo-template')); - this.cmbTextArt.openButton.menu.cmpEl.css({ - 'min-width': 178, - 'max-width': 178 - }); - this.cmbTextArt.on('click', _.bind(this.onTextArtSelect, this)); - this.cmbTextArt.openButton.menu.on('show:after', function () { - me.cmbTextArt.menuPicker.scroller.update({alwaysVisibleY: true}); - }); - this.lockedControls.push(this.cmbTextArt); - - this._arrFillSrc = [ - {displayValue: this.textColor, value: Asc.c_oAscFill.FILL_TYPE_SOLID}, - {displayValue: this.textGradientFill, value: Asc.c_oAscFill.FILL_TYPE_GRAD}, - {displayValue: this.textNoFill, value: Asc.c_oAscFill.FILL_TYPE_NOFILL} - ]; - - this.cmbFillSrc = new Common.UI.ComboBox({ - el: $('#textart-combo-fill-src'), - cls: 'input-group-nr', - style: 'width: 100%;', - menuStyle: 'min-width: 190px;', - editable: false, - data: this._arrFillSrc - }); - this.cmbFillSrc.setValue(this._arrFillSrc[0].value); - this.cmbFillSrc.on('selected', _.bind(this.onFillSrcSelect, this)); - this.lockedControls.push(this.cmbFillSrc); - - this.btnBackColor = new Common.UI.ColorButton({ - style: "width:45px;", - menu : new Common.UI.Menu({ - items: [ - { template: _.template('
') }, - { template: _.template('' + me.textNewColor + '') } - ] - }) - }); - - this.btnBackColor.on('render:after', function(btn) { - me.colorsBack = new Common.UI.ThemeColorPalette({ - el: $('#textart-back-color-menu'), - value: 'transparent', - transparent: true - }); - me.colorsBack.on('select', _.bind(me.onColorsBackSelect, me)); - }); - this.btnBackColor.render( $('#textart-back-color-btn')); - this.btnBackColor.setColor('transparent'); - $(this.el).on('click', '#textart-back-color-new', _.bind(this.addNewColor, this, this.colorsBack, this.btnBackColor)); - this.lockedControls.push(this.btnBackColor); - - this.numTransparency = new Common.UI.MetricSpinner({ - el: $('#textart-spin-transparency'), - step: 1, - width: 62, - value: '100 %', - defaultUnit : "%", - maxValue: 100, - minValue: 0 - }); - this.numTransparency.on('change', _.bind(this.onNumTransparencyChange, this)); - this.lockedControls.push(this.numTransparency); - - this.sldrTransparency = new Common.UI.SingleSlider({ - el: $('#textart-slider-transparency'), - width: 75, - minValue: 0, - maxValue: 100, - value: 100 - }); - this.sldrTransparency.on('change', _.bind(this.onTransparencyChange, this)); - this.sldrTransparency.on('changecomplete', _.bind(this.onTransparencyChangeComplete, this)); - this.lockedControls.push(this.sldrTransparency); - - this.lblTransparencyStart = $(this.el).find('#textart-lbl-transparency-start'); - this.lblTransparencyEnd = $(this.el).find('#textart-lbl-transparency-end'); - - this._arrGradType = [ - {displayValue: this.textLinear, value: Asc.c_oAscFillGradType.GRAD_LINEAR}, - {displayValue: this.textRadial, value: Asc.c_oAscFillGradType.GRAD_PATH} - ]; - - this.cmbGradType = new Common.UI.ComboBox({ - el: $('#textart-combo-grad-type'), - cls: 'input-group-nr', - menuStyle: 'min-width: 90px;', - editable: false, - data: this._arrGradType - }); - this.cmbGradType.setValue(this._arrGradType[0].value); - this.cmbGradType.on('selected', _.bind(this.onGradTypeSelect, this)); - this.lockedControls.push(this.cmbGradType); - - this._viewDataLinear = [ - { offsetx: 0, offsety: 0, type:45, subtype:-1, iconcls:'gradient-left-top' }, - { offsetx: 50, offsety: 0, type:90, subtype:4, iconcls:'gradient-top'}, - { offsetx: 100, offsety: 0, type:135, subtype:5, iconcls:'gradient-right-top'}, - { offsetx: 0, offsety: 50, type:0, subtype:6, iconcls:'gradient-left', cls: 'item-gradient-separator', selected: true}, - { offsetx: 100, offsety: 50, type:180, subtype:1, iconcls:'gradient-right'}, - { offsetx: 0, offsety: 100, type:315, subtype:2, iconcls:'gradient-left-bottom'}, - { offsetx: 50, offsety: 100, type:270, subtype:3, iconcls:'gradient-bottom'}, - { offsetx: 100, offsety: 100, type:225, subtype:7, iconcls:'gradient-right-bottom'} - ]; - - this._viewDataRadial = [ - { offsetx: 100, offsety: 150, type:2, subtype:5, iconcls:'gradient-radial-center'} - ]; - - this.btnDirection = new Common.UI.Button({ - cls : 'btn-large-dataview', - iconCls : 'item-gradient gradient-left', - menu : new Common.UI.Menu({ - style: 'min-width: 60px;', - menuAlign: 'tr-br', - items: [ - { template: _.template('
') } - ] - }) - }); - this.btnDirection.on('render:after', function(btn) { - me.mnuDirectionPicker = new Common.UI.DataView({ - el: $('#id-textart-menu-direction'), - parentMenu: btn.menu, - restoreHeight: 174, - store: new Common.UI.DataViewStore(me._viewDataLinear), - itemTemplate: _.template('
') - }); - }); - this.btnDirection.render($('#textart-button-direction')); - this.mnuDirectionPicker.on('item:click', _.bind(this.onSelectGradient, this, this.btnDirection)); - this.lockedControls.push(this.btnDirection); - - this.btnGradColor = new Common.UI.ColorButton({ - style: "width:45px;", - menu : new Common.UI.Menu({ - items: [ - { template: _.template('
') }, - { template: _.template('' + me.textNewColor + '') } - ] - }) - }); - this.btnGradColor.on('render:after', function(btn) { - me.colorsGrad = new Common.UI.ThemeColorPalette({ - el: $('#textart-gradient-color-menu'), - value: '000000' - }); - me.colorsGrad.on('select', _.bind(me.onColorsGradientSelect, me)); - }); - this.btnGradColor.render( $('#textart-gradient-color-btn')); - this.btnGradColor.setColor('000000'); - $(this.el).on('click', '#textart-gradient-color-new', _.bind(this.addNewColor, this, this.colorsGrad, this.btnGradColor)); - this.lockedControls.push(this.btnGradColor); - - this.sldrGradient = new Common.UI.MultiSliderGradient({ - el: $('#textart-slider-gradient'), - width: 125, - minValue: 0, - maxValue: 100, - values: [0, 100] - }); - this.sldrGradient.on('change', _.bind(this.onGradientChange, this)); - this.sldrGradient.on('changecomplete', _.bind(this.onGradientChangeComplete, this)); - this.sldrGradient.on('thumbclick', function(cmp, index){ - me.GradColor.currentIdx = index; - var color = me.GradColor.colors[me.GradColor.currentIdx]; - me.btnGradColor.setColor(color); - me.colorsGrad.select(color,false); - }); - this.sldrGradient.on('thumbdblclick', function(cmp){ - me.btnGradColor.cmpEl.find('button').dropdown('toggle'); - }); - this.lockedControls.push(this.sldrGradient); - - this.cmbBorderSize = new Common.UI.ComboBorderSizeEditable({ - el: $('#textart-combo-border-size'), - style: "width: 93px;", - txtNoBorders: this.txtNoBorders - }) - .on('selected', _.bind(this.onBorderSizeSelect, this)) - .on('changed:before',_.bind(this.onBorderSizeChanged, this, true)) - .on('changed:after', _.bind(this.onBorderSizeChanged, this, false)) - .on('combo:blur', _.bind(this.onComboBlur, this, false)); - this.BorderSize = this.cmbBorderSize.store.at(2).get('value'); - this.cmbBorderSize.setValue(this.BorderSize); - this.lockedControls.push(this.cmbBorderSize); - - this.btnBorderColor = new Common.UI.ColorButton({ - style: "width:45px;", - menu : new Common.UI.Menu({ - items: [ - { template: _.template('
') }, - { template: _.template('' + me.textNewColor + '') } - ] - }) - }); - this.lockedControls.push(this.btnBorderColor); - - this.btnBorderColor.on('render:after', function(btn) { - me.colorsBorder = new Common.UI.ThemeColorPalette({ - el: $('#textart-border-color-menu'), - value: '000000' - }); - me.colorsBorder.on('select', _.bind(me.onColorsBorderSelect, me)); - }); - this.btnBorderColor.render( $('#textart-border-color-btn')); - this.btnBorderColor.setColor('000000'); - $(this.el).on('click', '#textart-border-color-new', _.bind(this.addNewColor, this, this.colorsBorder, this.btnBorderColor)); - - this.cmbBorderType = new Common.UI.ComboBorderType({ - el: $('#textart-combo-border-type'), - style: "width: 93px;", - menuStyle: 'min-width: 93px;' - }).on('selected', _.bind(this.onBorderTypeSelect, this)) - .on('combo:blur', _.bind(this.onComboBlur, this, false)); - this.BorderType = Asc.c_oDashType.solid; - this.cmbBorderType.setValue(this.BorderType); - this.lockedControls.push(this.cmbBorderType); - - this.cmbTransform = new Common.UI.ComboDataView({ - itemWidth: 50, - itemHeight: 50, - menuMaxHeight: 300, - enableKeyEvents: true, - cls: 'combo-textart' - }); - this.cmbTransform.render($('#textart-combo-transform')); - this.cmbTransform.openButton.menu.cmpEl.css({ - 'min-width': 178, - 'max-width': 178 - }); - this.cmbTransform.on('click', _.bind(this.onTransformSelect, this)); - this.cmbTransform.openButton.menu.on('show:after', function () { - me.cmbTransform.menuPicker.scroller.update({alwaysVisibleY: true}); - }); - this.lockedControls.push(this.cmbTransform); - this.FillColorContainer = $('#textart-panel-color-fill'); this.FillGradientContainer = $('#textart-panel-gradient-fill'); this.TransparencyContainer = $('#textart-panel-transparent-fill'); @@ -1043,14 +797,201 @@ define([ } }, + createDelayedControls: function() { + var me = this; + + this._arrFillSrc = [ + {displayValue: this.textColor, value: Asc.c_oAscFill.FILL_TYPE_SOLID}, + {displayValue: this.textGradientFill, value: Asc.c_oAscFill.FILL_TYPE_GRAD}, + {displayValue: this.textNoFill, value: Asc.c_oAscFill.FILL_TYPE_NOFILL} + ]; + + this.cmbFillSrc = new Common.UI.ComboBox({ + el: $('#textart-combo-fill-src'), + cls: 'input-group-nr', + style: 'width: 100%;', + menuStyle: 'min-width: 190px;', + editable: false, + data: this._arrFillSrc + }); + this.cmbFillSrc.setValue(this._arrFillSrc[0].value); + this.cmbFillSrc.on('selected', _.bind(this.onFillSrcSelect, this)); + this.lockedControls.push(this.cmbFillSrc); + + this.numTransparency = new Common.UI.MetricSpinner({ + el: $('#textart-spin-transparency'), + step: 1, + width: 62, + value: '100 %', + defaultUnit : "%", + maxValue: 100, + minValue: 0 + }); + this.numTransparency.on('change', _.bind(this.onNumTransparencyChange, this)); + this.lockedControls.push(this.numTransparency); + + this.sldrTransparency = new Common.UI.SingleSlider({ + el: $('#textart-slider-transparency'), + width: 75, + minValue: 0, + maxValue: 100, + value: 100 + }); + this.sldrTransparency.on('change', _.bind(this.onTransparencyChange, this)); + this.sldrTransparency.on('changecomplete', _.bind(this.onTransparencyChangeComplete, this)); + this.lockedControls.push(this.sldrTransparency); + + this.lblTransparencyStart = $(this.el).find('#textart-lbl-transparency-start'); + this.lblTransparencyEnd = $(this.el).find('#textart-lbl-transparency-end'); + + this._arrGradType = [ + {displayValue: this.textLinear, value: Asc.c_oAscFillGradType.GRAD_LINEAR}, + {displayValue: this.textRadial, value: Asc.c_oAscFillGradType.GRAD_PATH} + ]; + + this.cmbGradType = new Common.UI.ComboBox({ + el: $('#textart-combo-grad-type'), + cls: 'input-group-nr', + menuStyle: 'min-width: 90px;', + editable: false, + data: this._arrGradType + }); + this.cmbGradType.setValue(this._arrGradType[0].value); + this.cmbGradType.on('selected', _.bind(this.onGradTypeSelect, this)); + this.lockedControls.push(this.cmbGradType); + + this._viewDataLinear = [ + { offsetx: 0, offsety: 0, type:45, subtype:-1, iconcls:'gradient-left-top' }, + { offsetx: 50, offsety: 0, type:90, subtype:4, iconcls:'gradient-top'}, + { offsetx: 100, offsety: 0, type:135, subtype:5, iconcls:'gradient-right-top'}, + { offsetx: 0, offsety: 50, type:0, subtype:6, iconcls:'gradient-left', cls: 'item-gradient-separator', selected: true}, + { offsetx: 100, offsety: 50, type:180, subtype:1, iconcls:'gradient-right'}, + { offsetx: 0, offsety: 100, type:315, subtype:2, iconcls:'gradient-left-bottom'}, + { offsetx: 50, offsety: 100, type:270, subtype:3, iconcls:'gradient-bottom'}, + { offsetx: 100, offsety: 100, type:225, subtype:7, iconcls:'gradient-right-bottom'} + ]; + + this._viewDataRadial = [ + { offsetx: 100, offsety: 150, type:2, subtype:5, iconcls:'gradient-radial-center'} + ]; + + this.btnDirection = new Common.UI.Button({ + cls : 'btn-large-dataview', + iconCls : 'item-gradient gradient-left', + menu : new Common.UI.Menu({ + style: 'min-width: 60px;', + menuAlign: 'tr-br', + items: [ + { template: _.template('
') } + ] + }) + }); + this.btnDirection.on('render:after', function(btn) { + me.mnuDirectionPicker = new Common.UI.DataView({ + el: $('#id-textart-menu-direction'), + parentMenu: btn.menu, + restoreHeight: 174, + store: new Common.UI.DataViewStore(me._viewDataLinear), + itemTemplate: _.template('
') + }); + }); + this.btnDirection.render($('#textart-button-direction')); + this.mnuDirectionPicker.on('item:click', _.bind(this.onSelectGradient, this, this.btnDirection)); + this.lockedControls.push(this.btnDirection); + + this.sldrGradient = new Common.UI.MultiSliderGradient({ + el: $('#textart-slider-gradient'), + width: 125, + minValue: 0, + maxValue: 100, + values: [0, 100] + }); + this.sldrGradient.on('change', _.bind(this.onGradientChange, this)); + this.sldrGradient.on('changecomplete', _.bind(this.onGradientChangeComplete, this)); + this.sldrGradient.on('thumbclick', function(cmp, index){ + me.GradColor.currentIdx = index; + var color = me.GradColor.colors[me.GradColor.currentIdx]; + me.btnGradColor.setColor(color); + me.colorsGrad.select(color,false); + }); + this.sldrGradient.on('thumbdblclick', function(cmp){ + me.btnGradColor.cmpEl.find('button').dropdown('toggle'); + }); + this.lockedControls.push(this.sldrGradient); + + this.cmbBorderSize = new Common.UI.ComboBorderSizeEditable({ + el: $('#textart-combo-border-size'), + style: "width: 93px;", + txtNoBorders: this.txtNoBorders + }) + .on('selected', _.bind(this.onBorderSizeSelect, this)) + .on('changed:before',_.bind(this.onBorderSizeChanged, this, true)) + .on('changed:after', _.bind(this.onBorderSizeChanged, this, false)) + .on('combo:blur', _.bind(this.onComboBlur, this, false)); + this.BorderSize = this.cmbBorderSize.store.at(2).get('value'); + this.cmbBorderSize.setValue(this.BorderSize); + this.lockedControls.push(this.cmbBorderSize); + + this.cmbBorderType = new Common.UI.ComboBorderType({ + el: $('#textart-combo-border-type'), + style: "width: 93px;", + menuStyle: 'min-width: 93px;' + }).on('selected', _.bind(this.onBorderTypeSelect, this)) + .on('combo:blur', _.bind(this.onComboBlur, this, false)); + this.BorderType = Asc.c_oDashType.solid; + this.cmbBorderType.setValue(this.BorderType); + this.lockedControls.push(this.cmbBorderType); + + this.cmbTransform = new Common.UI.ComboDataView({ + itemWidth: 50, + itemHeight: 50, + menuMaxHeight: 300, + enableKeyEvents: true, + cls: 'combo-textart' + }); + this.cmbTransform.render($('#textart-combo-transform')); + this.cmbTransform.openButton.menu.cmpEl.css({ + 'min-width': 178, + 'max-width': 178 + }); + this.cmbTransform.on('click', _.bind(this.onTransformSelect, this)); + this.cmbTransform.openButton.menu.on('show:after', function () { + me.cmbTransform.menuPicker.scroller.update({alwaysVisibleY: true}); + }); + this.lockedControls.push(this.cmbTransform); + }, + createDelayedElements: function() { + this.createDelayedControls(); this.UpdateThemeColors(); this.fillTransform(this.api.asc_getPropertyEditorTextArts()); }, fillTextArt: function() { - var me = this, - models = this.application.getCollection('Common.Collections.TextArt').models, + var me = this; + + if (!this.cmbTextArt) { + this.cmbTextArt = new Common.UI.ComboDataView({ + itemWidth: 50, + itemHeight: 50, + menuMaxHeight: 300, + enableKeyEvents: true, + showLast: false, + cls: 'combo-textart' + }); + this.cmbTextArt.render($('#textart-combo-template')); + this.cmbTextArt.openButton.menu.cmpEl.css({ + 'min-width': 178, + 'max-width': 178 + }); + this.cmbTextArt.on('click', _.bind(this.onTextArtSelect, this)); + this.cmbTextArt.openButton.menu.on('show:after', function () { + me.cmbTextArt.menuPicker.scroller.update({alwaysVisibleY: true}); + }); + this.lockedControls.push(this.cmbTextArt); + } + + var models = this.application.getCollection('Common.Collections.TextArt').models, count = this.cmbTextArt.menuPicker.store.length; if (count>0 && count==models.length) { var data = this.cmbTextArt.menuPicker.store.models; @@ -1108,6 +1049,66 @@ define([ }, UpdateThemeColors: function() { + if (!this.btnBackColor) { + this.btnBorderColor = new Common.UI.ColorButton({ + style: "width:45px;", + menu : new Common.UI.Menu({ + items: [ + { template: _.template('
') }, + { template: _.template('' + this.textNewColor + '') } + ] + }) + }); + this.btnBorderColor.render( $('#textart-border-color-btn')); + this.btnBorderColor.setColor('000000'); + this.lockedControls.push(this.btnBorderColor); + this.colorsBorder = new Common.UI.ThemeColorPalette({ + el: $('#textart-border-color-menu'), + value: '000000' + }); + this.colorsBorder.on('select', _.bind(this.onColorsBorderSelect, this)); + $(this.el).on('click', '#textart-border-color-new', _.bind(this.addNewColor, this, this.colorsBorder, this.btnBorderColor)); + + this.btnGradColor = new Common.UI.ColorButton({ + style: "width:45px;", + menu : new Common.UI.Menu({ + items: [ + { template: _.template('
') }, + { template: _.template('' + this.textNewColor + '') } + ] + }) + }); + this.btnGradColor.render( $('#textart-gradient-color-btn')); + this.btnGradColor.setColor('000000'); + this.lockedControls.push(this.btnGradColor); + this.colorsGrad = new Common.UI.ThemeColorPalette({ + el: $('#textart-gradient-color-menu'), + value: '000000' + }); + this.colorsGrad.on('select', _.bind(this.onColorsGradientSelect, this)); + $(this.el).on('click', '#textart-gradient-color-new', _.bind(this.addNewColor, this, this.colorsGrad, this.btnGradColor)); + + this.btnBackColor = new Common.UI.ColorButton({ + style: "width:45px;", + menu : new Common.UI.Menu({ + items: [ + { template: _.template('
') }, + { template: _.template('' + this.textNewColor + '') } + ] + }) + }); + this.btnBackColor.render( $('#textart-back-color-btn')); + this.btnBackColor.setColor('transparent'); + this.lockedControls.push(this.btnBackColor); + this.colorsBack = new Common.UI.ThemeColorPalette({ + el: $('#textart-back-color-menu'), + value: 'transparent', + transparent: true + }); + this.colorsBack.on('select', _.bind(this.onColorsBackSelect, this)); + $(this.el).on('click', '#textart-back-color-new', _.bind(this.addNewColor, this, this.colorsBack, this.btnBackColor)); + } + this.colorsBorder.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors()); this.colorsBack.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors()); this.colorsGrad.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors()); @@ -1132,6 +1133,8 @@ define([ }, disableControls: function(disable) { + if (this._initSettings) return; + if (this._state.DisabledControls!==disable) { this._state.DisabledControls = disable; _.each(this.lockedControls, function(item) { diff --git a/apps/documenteditor/main/app/view/Toolbar.js b/apps/documenteditor/main/app/view/Toolbar.js index 0a0d7e82d..309bba1ae 100644 --- a/apps/documenteditor/main/app/view/Toolbar.js +++ b/apps/documenteditor/main/app/view/Toolbar.js @@ -101,80 +101,70 @@ define([ this.btnNewDocument = new Common.UI.Button({ id : 'id-toolbar-btn-newdocument', cls : 'btn-toolbar', - iconCls : 'btn-newdocument', - hint : this.tipNewDocument + iconCls : 'btn-newdocument' }); this.toolbarControls.push(this.btnNewDocument); this.btnOpenDocument = new Common.UI.Button({ id : 'id-toolbar-btn-opendocument', cls : 'btn-toolbar', - iconCls : 'btn-opendocument', - hint : this.tipOpenDocument + iconCls : 'btn-opendocument' }); this.toolbarControls.push(this.btnOpenDocument); this.btnPrint = new Common.UI.Button({ id : 'id-toolbar-btn-print', cls : 'btn-toolbar', - iconCls : 'btn-print no-mask', - hint : this.tipPrint + Common.Utils.String.platformKey('Ctrl+P') + iconCls : 'btn-print no-mask' }); this.toolbarControls.push(this.btnPrint); this.btnSave = new Common.UI.Button({ id : 'id-toolbar-btn-save', cls : 'btn-toolbar', - iconCls : 'no-mask ' + this.btnSaveCls, - hint : this.btnSaveTip + iconCls : 'no-mask ' + this.btnSaveCls }); this.toolbarControls.push(this.btnSave); this.btnUndo = new Common.UI.Button({ id : 'id-toolbar-btn-undo', cls : 'btn-toolbar', - iconCls : 'btn-undo', - hint : this.tipUndo + Common.Utils.String.platformKey('Ctrl+Z') + iconCls : 'btn-undo' }); this.toolbarControls.push(this.btnUndo); this.btnRedo = new Common.UI.Button({ id : 'id-toolbar-btn-redo', cls : 'btn-toolbar', - iconCls : 'btn-redo', - hint : this.tipRedo + Common.Utils.String.platformKey('Ctrl+Y') + iconCls : 'btn-redo' }); this.toolbarControls.push(this.btnRedo); this.btnCopy = new Common.UI.Button({ id : 'id-toolbar-btn-copy', cls : 'btn-toolbar', - iconCls : 'btn-copy', - hint : this.tipCopy + Common.Utils.String.platformKey('Ctrl+C') + iconCls : 'btn-copy' }); this.toolbarControls.push(this.btnCopy); this.btnPaste = new Common.UI.Button({ id : 'id-toolbar-btn-paste', cls : 'btn-toolbar', - iconCls : 'btn-paste', - hint : this.tipPaste + Common.Utils.String.platformKey('Ctrl+V') + iconCls : 'btn-paste' }); this.paragraphControls.push(this.btnPaste); this.btnIncFontSize = new Common.UI.Button({ id : 'id-toolbar-btn-incfont', cls : 'btn-toolbar', - iconCls : 'btn-incfont', - hint : this.tipIncFont + Common.Utils.String.platformKey('Ctrl+]') + iconCls : 'btn-incfont' }); this.paragraphControls.push(this.btnIncFontSize); this.btnDecFontSize = new Common.UI.Button({ id : 'id-toolbar-btn-decfont', cls : 'btn-toolbar', - iconCls : 'btn-decfont', - hint : this.tipDecFont + Common.Utils.String.platformKey('Ctrl+[') + iconCls : 'btn-decfont' }); this.paragraphControls.push(this.btnDecFontSize); @@ -182,7 +172,6 @@ define([ id : 'id-toolbar-btn-bold', cls : 'btn-toolbar', iconCls : 'btn-bold', - hint : this.textBold + Common.Utils.String.platformKey('Ctrl+B'), enableToggle: true }); this.paragraphControls.push(this.btnBold); @@ -191,7 +180,6 @@ define([ id : 'id-toolbar-btn-italic', cls : 'btn-toolbar', iconCls : 'btn-italic', - hint : this.textItalic + Common.Utils.String.platformKey('Ctrl+I'), enableToggle: true }); this.paragraphControls.push(this.btnItalic); @@ -200,7 +188,6 @@ define([ id : 'id-toolbar-btn-underline', cls : 'btn-toolbar', iconCls : 'btn-underline', - hint : this.textUnderline + Common.Utils.String.platformKey('Ctrl+U'), enableToggle: true }); this.paragraphControls.push(this.btnUnderline); @@ -209,7 +196,6 @@ define([ id : 'id-toolbar-btn-strikeout', cls : 'btn-toolbar', iconCls : 'btn-strikeout', - hint : this.textStrikeout, enableToggle: true }); this.paragraphControls.push(this.btnStrikeout); @@ -218,7 +204,6 @@ define([ id : 'id-toolbar-btn-superscript', cls : 'btn-toolbar', iconCls : 'btn-superscript', - hint : this.textSuperscript, enableToggle: true, toggleGroup : 'superscriptGroup' }); @@ -228,7 +213,6 @@ define([ id : 'id-toolbar-btn-subscript', cls : 'btn-toolbar', iconCls : 'btn-subscript', - hint : this.textSubscript, enableToggle: true, toggleGroup : 'superscriptGroup' }); @@ -238,7 +222,6 @@ define([ id : 'id-toolbar-btn-highlight', cls : 'btn-toolbar', iconCls : 'btn-highlight', - hint : this.tipHighlightColor, enableToggle: true, allowDepress: true, split : true, @@ -261,7 +244,6 @@ define([ id : 'id-toolbar-btn-fontcolor', cls : 'btn-toolbar', iconCls : 'btn-fontcolor', - hint : this.tipFontColor, split : true, menu : new Common.UI.Menu({ items: [ @@ -282,7 +264,6 @@ define([ id : 'id-toolbar-btn-paracolor', cls : 'btn-toolbar', iconCls : 'btn-paracolor', - hint : this.tipPrColor, split : true, menu : new Common.UI.Menu({ items: [ @@ -298,7 +279,6 @@ define([ id : 'id-toolbar-btn-align-left', cls : 'btn-toolbar', iconCls : 'btn-align-left', - hint : this.tipAlignLeft + Common.Utils.String.platformKey('Ctrl+L'), enableToggle: true, allowDepress: false, toggleGroup : 'alignGroup' @@ -309,7 +289,6 @@ define([ id : 'id-toolbar-btn-align-center', cls : 'btn-toolbar', iconCls : 'btn-align-center', - hint : this.tipAlignCenter + Common.Utils.String.platformKey('Ctrl+E'), enableToggle: true, allowDepress: false, toggleGroup : 'alignGroup' @@ -320,7 +299,6 @@ define([ id : 'id-toolbar-btn-align-right', cls : 'btn-toolbar', iconCls : 'btn-align-right', - hint : this.tipAlignRight + Common.Utils.String.platformKey('Ctrl+R'), enableToggle: true, allowDepress: false, toggleGroup : 'alignGroup' @@ -331,7 +309,6 @@ define([ id : 'id-toolbar-btn-align-just', cls : 'btn-toolbar', iconCls : 'btn-align-just', - hint : this.tipAlignJust + Common.Utils.String.platformKey('Ctrl+J'), enableToggle: true, allowDepress: false, toggleGroup: 'alignGroup' @@ -342,7 +319,6 @@ define([ id : 'id-toolbar-btn-halign', cls : 'btn-toolbar', iconCls : 'btn-align-left', - hint : this.tipHAligh, icls : 'btn-align-left', menu : new Common.UI.Menu({ cls: 'ppm-toolbar', @@ -388,16 +364,14 @@ define([ this.btnDecLeftOffset = new Common.UI.Button({ id : 'id-toolbar-btn-decoffset', cls : 'btn-toolbar', - iconCls : 'btn-decoffset', - hint : this.tipDecPrLeft + Common.Utils.String.platformKey('Ctrl+Shift+M') + iconCls : 'btn-decoffset' }); this.paragraphControls.push(this.btnDecLeftOffset); this.btnIncLeftOffset = new Common.UI.Button({ id : 'id-toolbar-btn-incoffset', cls : 'btn-toolbar', - iconCls : 'btn-incoffset', - hint : this.tipIncPrLeft + Common.Utils.String.platformKey('Ctrl+M') + iconCls : 'btn-incoffset' }); this.paragraphControls.push(this.btnIncLeftOffset); @@ -405,7 +379,6 @@ define([ id : 'id-toolbar-btn-linespace', cls : 'btn-toolbar', iconCls : 'btn-linespace', - hint : this.tipLineSpace, menu : new Common.UI.Menu({ style: 'min-width: 60px;', items: [ @@ -424,7 +397,6 @@ define([ id : 'id-toolbar-btn-hidenchars', cls : 'btn-toolbar', iconCls : 'btn-hidenchars', - hint : this.tipShowHiddenChars, enableToggle: true, split : true, menu : new Common.UI.Menu({ @@ -441,15 +413,10 @@ define([ id : 'id-toolbar-btn-markers', cls : 'btn-toolbar', iconCls : 'btn-setmarkers', - hint : this.tipMarkers, enableToggle: true, toggleGroup : 'markersGroup', split : true, - menu : new Common.UI.Menu({ - items: [ - { template: _.template('') } - ] - }) + menu : true }); this.paragraphControls.push(this.btnMarkers); this.textOnlyControls.push(this.btnMarkers); @@ -458,15 +425,10 @@ define([ id : 'id-toolbar-btn-numbering', cls : 'btn-toolbar', iconCls : 'btn-numbering', - hint : this.tipNumbers, enableToggle: true, toggleGroup : 'markersGroup', split : true, - menu : new Common.UI.Menu({ - items: [ - { template: _.template('') } - ] - }) + menu : true }); this.paragraphControls.push(this.btnNumbers); this.textOnlyControls.push(this.btnNumbers); @@ -475,21 +437,24 @@ define([ id : 'id-toolbar-btn-multilevels', cls : 'btn-toolbar', iconCls : 'btn-multilevels', - hint : this.tipMultilevels, - menu : new Common.UI.Menu({ - items: [ - { template: _.template('') } - ] - }) + menu : true }); this.paragraphControls.push(this.btnMultilevels); this.textOnlyControls.push(this.btnMultilevels); + this.mnuMarkersPicker = { + conf: {index:0}, + selectByIndex: function (idx) { + this.conf.index = idx; + } + }; + this.mnuNumbersPicker = _.clone(this.mnuMarkersPicker); + this.mnuMultilevelPicker = _.clone(this.mnuMarkersPicker); + this.btnInsertTable = new Common.UI.Button({ id : 'id-toolbar-btn-inserttable', cls : 'btn-toolbar', iconCls : 'btn-inserttable', - hint : this.tipInsertTable, menu : new Common.UI.Menu({ items: [ { template: _.template('
') }, @@ -503,7 +468,6 @@ define([ id : 'id-toolbar-btn-insertimage', cls : 'btn-toolbar', iconCls : 'btn-insertimage', - hint : this.tipInsertImage, menu : new Common.UI.Menu({ items: [ { caption: this.mniImageFromFile, value: 'file' }, @@ -517,7 +481,6 @@ define([ id : 'id-toolbar-btn-insertchart', cls : 'btn-toolbar', iconCls : 'btn-insertchart', - hint : this.tipInsertChart, menu : new Common.UI.Menu({ style: 'width: 560px;', items: [ @@ -531,7 +494,6 @@ define([ id : 'id-toolbar-btn-inserttext', cls : 'btn-toolbar', iconCls : 'btn-text', - hint : this.tipInsertText, enableToggle: true, split : true, menu : new Common.UI.Menu({ @@ -557,35 +519,15 @@ define([ id : 'id-toolbar-btn-pagebreak', cls : 'btn-toolbar', iconCls : 'btn-pagebreak', - hint : this.tipPageBreak, split : true, - menu : new Common.UI.Menu({ - items : [ - {caption: this.textInsPageBreak}, - {caption: this.textInsColumnBreak, value: 'column'}, - this.mnuInsertSectionBreak = new Common.UI.MenuItem({ - caption: this.textInsSectionBreak, - value: 'section', - menu: new Common.UI.Menu({ - menuAlign: 'tl-tr', - items : [ - {caption: this.textNextPage, value: Asc.c_oAscSectionBreakType.NextPage}, - {caption: this.textContPage, value: Asc.c_oAscSectionBreakType.Continuous}, - {caption: this.textEvenPage, value: Asc.c_oAscSectionBreakType.EvenPage}, - {caption: this.textOddPage, value: Asc.c_oAscSectionBreakType.OddPage} - ] - }) - }) - ] - }) + menu : true }); this.paragraphControls.push(this.btnInsertPageBreak); this.btnInsertHyperlink = new Common.UI.Button({ id : 'id-toolbar-btn-inserthyperlink', cls : 'btn-toolbar', - iconCls : 'btn-inserthyperlink', - hint : this.tipInsertHyperlink + Common.Utils.String.platformKey('Ctrl+K') + iconCls : 'btn-inserthyperlink' }); this.paragraphControls.push(this.btnInsertHyperlink); @@ -593,28 +535,19 @@ define([ id : 'id-toolbar-btn-editheader', cls : 'btn-toolbar', iconCls : 'btn-editheader', - hint : this.tipEditHeader, - menu : new Common.UI.Menu({ - items: [ - { caption: this.mniEditHeader, value: 'header' }, - { caption: this.mniEditFooter, value: 'footer' }, - { caption: '--' }, - me.mnuInsertPageNum = new Common.UI.MenuItem({ - caption: this.textInsertPageNumber, - menu: new Common.UI.Menu({ - menuAlign: 'tl-tr', - items: [ - { template: _.template('') }, - me.mnuPageNumCurrentPos = new Common.UI.MenuItem({ - caption: this.textToCurrent, - value: 'current' - }) - ] - }) - }) - ] - }) + menu : true }); + this.mnuPageNumberPosPicker = { + conf:{disabled:false}, + isDisabled: function () { + return this.conf.disabled; + }, + setDisabled: function (val) { + this.conf.disabled = val; + } + }; + this.mnuPageNumCurrentPos = _.clone(this.mnuPageNumberPosPicker); + this.mnuInsertPageNum = _.clone(this.mnuPageNumberPosPicker); this.paragraphControls.push(this.mnuPageNumCurrentPos); this.toolbarControls.push(this.btnEditHeader); @@ -622,7 +555,6 @@ define([ id : 'id-toolbar-btn-insertshape', cls : 'btn-toolbar', iconCls : 'btn-insertshape', - hint : this.tipInsertShape, enableToggle: true, menu : new Common.UI.Menu({cls: 'menu-shapes'}) }); @@ -632,7 +564,6 @@ define([ id : 'id-toolbar-btn-insertequation', cls : 'btn-toolbar', iconCls : 'btn-insertequation', - hint : this.tipInsertEquation, split : true, menu : new Common.UI.Menu({cls: 'menu-shapes'}) }); @@ -642,7 +573,6 @@ define([ id : 'id-toolbar-btn-dropcap', cls : 'btn-toolbar', iconCls : 'btn-dropcap', - hint : this.tipDropCap, menu : new Common.UI.Menu({ cls: 'ppm-toolbar', items: [ @@ -660,7 +590,6 @@ define([ id : 'id-toolbar-btn-columns', cls : 'btn-toolbar', iconCls : 'btn-columns', - hint : this.tipColumns, menu : new Common.UI.Menu({ cls: 'ppm-toolbar', items: [ @@ -678,7 +607,6 @@ define([ id : 'id-toolbar-btn-pageorient', cls : 'btn-toolbar', iconCls : 'btn-pageorient', - hint : this.tipPageOrient, menu : new Common.UI.Menu({ cls: 'ppm-toolbar', items: [ @@ -702,7 +630,6 @@ define([ id : 'id-toolbar-btn-pagemargins', cls : 'btn-toolbar', iconCls : 'btn-pagemargins', - hint : this.tipPageMargins, menu : new Common.UI.Menu({ items: [ { caption: this.textMarginsLast, checkable: true, template: pageMarginsTemplate, toggleGroup: 'menuPageMargins'}, //top,left,bottom,right @@ -726,7 +653,6 @@ define([ id : 'id-toolbar-btn-pagesize', cls : 'btn-toolbar', iconCls : 'btn-pagesize', - hint : this.tipPageSize, menu : new Common.UI.Menu({ items: [ { caption: 'US Letter', subtitle: '21,59cm x 27,94cm', template: pageSizeTemplate, checkable: true, toggleGroup: 'menuPageSize', value: [215.9, 279.4] }, @@ -752,8 +678,7 @@ define([ this.btnClearStyle = new Common.UI.Button({ id : 'id-toolbar-btn-clearstyle', cls : 'btn-toolbar', - iconCls : 'btn-clearstyle', - hint : this.tipClearStyle + iconCls : 'btn-clearstyle' }); this.toolbarControls.push(this.btnClearStyle); @@ -761,7 +686,6 @@ define([ id : 'id-toolbar-btn-copystyle', cls : 'btn-toolbar', iconCls : 'btn-copystyle', - hint : this.tipCopyStyle + Common.Utils.String.platformKey('Ctrl+Shift+C'), enableToggle: true }); this.toolbarControls.push(this.btnCopyStyle); @@ -770,113 +694,35 @@ define([ id : 'id-toolbar-btn-colorschemas', cls : 'btn-toolbar', iconCls : 'btn-colorschemas', - hint : this.tipColorSchemas, - menu : new Common.UI.Menu({ - items: [], - maxHeight : 600, - restoreHeight: 600 - }).on('render:after', function(mnu) { - this.scroller = new Common.UI.Scroller({ - el: $(this.el).find('.dropdown-menu '), - useKeyboard: this.enableKeyEvents && !this.handleSelect, - minScrollbarLength : 40, - alwaysVisibleY: true - }); - }).on('show:after', function(btn, e) { - var mnu = $(this.el).find('.dropdown-menu '), - docH = Common.Utils.innerHeight(), - menuH = mnu.outerHeight(), - top = parseInt(mnu.css('top')); - - if (menuH > docH) { - mnu.css('max-height', (docH - parseInt(mnu.css('padding-top')) - parseInt(mnu.css('padding-bottom'))-5) + 'px'); - this.scroller.update({minScrollbarLength : 40}); - } else if ( mnu.height() < this.options.restoreHeight ) { - mnu.css('max-height', (Math.min(docH - parseInt(mnu.css('padding-top')) - parseInt(mnu.css('padding-bottom'))-5, this.options.restoreHeight)) + 'px'); - menuH = mnu.outerHeight(); - if (top+menuH > docH) { - mnu.css('top', 0); - } - this.scroller.update({minScrollbarLength : 40}); - } - }) + menu : true }); this.toolbarControls.push(this.btnColorSchemas); this.btnMailRecepients= new Common.UI.Button({ id : 'id-toolbar-btn-mailrecepients', cls : 'btn-toolbar', - iconCls : 'btn-mailrecepients', - hint : this.tipMailRecepients + iconCls : 'btn-mailrecepients' }); this.btnHide = new Common.UI.Button({ id : 'id-toolbar-btn-hidebars', cls : 'btn-toolbar', iconCls : 'btn-hidebars no-mask', - hint : this.tipViewSettings, - menu : new Common.UI.Menu({ - cls: 'pull-right', - style: 'min-width: 180px;', - items: [ - this.mnuitemCompactToolbar = new Common.UI.MenuItem({ - caption : this.textCompactView, - checkable : true - }), - this.mnuitemHideTitleBar = new Common.UI.MenuItem({ - caption : this.textHideTitleBar, - checkable : true - }), - this.mnuitemHideStatusBar = new Common.UI.MenuItem({ - caption : this.textHideStatusBar, - checkable : true - }), - this.mnuitemHideRulers = new Common.UI.MenuItem({ - caption : this.textHideLines, - checkable : true - }), - { caption: '--' }, - this.btnFitPage = new Common.UI.MenuItem({ - caption: this.textFitPage, - checkable: true - }), - this.btnFitWidth = new Common.UI.MenuItem({ - caption: this.textFitWidth, - checkable: true - }), - (new Common.UI.MenuItem({ - template: _.template([ - '' - ].join('')), - stopPropagation: true - })) - ] - }) - }).on('render:after', _.bind(function(cmp){ - me.mnuZoomOut = new Common.UI.Button({ - el : $('#id-menu-zoom-out'), - cls : 'btn-toolbar' - }); - me.mnuZoomIn = new Common.UI.Button({ - el : $('#id-menu-zoom-in'), - cls : 'btn-toolbar' - }); - }), me); + menu : true + }); this.toolbarControls.push(this.btnHide); + this.btnFitPage = { + conf: {checked:false}, + setChecked: function(val) { this.conf.checked = val;}, + isChecked: function () { return this.conf.checked; } + }; + this.btnFitWidth = _.clone(this.btnFitPage); + this.btnAdvSettings = new Common.UI.Button({ id : 'id-toolbar-btn-settings', cls : 'btn-toolbar', - iconCls : 'btn-settings no-mask', - hint : this.tipAdvSettings + iconCls : 'btn-settings no-mask' }); this.toolbarControls.push(this.btnAdvSettings); @@ -889,79 +735,11 @@ define([ this.mnuInsertTable = this.btnInsertTable.menu; this.mnuInsertImage = this.btnInsertImage.menu; this.mnuPageSize = this.btnPageSize.menu; - this.mnuColorSchema = this.btnColorSchemas.menu; - // // DataView and pickers // - this.btnMarkers.on('render:after', function(btn) { - me.mnuMarkersPicker = new Common.UI.DataView({ - el: $('#id-toolbar-menu-markers'), - parentMenu: btn.menu, - restoreHeight: 92, - allowScrollbar: false, - store: new Common.UI.DataViewStore([ - { offsety:0, data:{type:0, subtype:-1} }, - { offsety:38, data:{type:0, subtype:1} }, - { offsety:76, data:{type:0, subtype:2} }, - { offsety:114, data:{type:0, subtype:3} }, - { offsety:152, data:{type:0, subtype:4} }, - { offsety:190, data:{type:0, subtype:5} }, - { offsety:228, data:{type:0, subtype:6} }, - { offsety:266, data:{type:0, subtype:7} } - ]), - itemTemplate: _.template('
') - }); - }); - - this.btnNumbers.on('render:after', function(btn) { - me.mnuNumbersPicker = new Common.UI.DataView({ - el: $('#id-toolbar-menu-numbering'), - parentMenu: btn.menu, - restoreHeight: 164, - allowScrollbar: false, - store: new Common.UI.DataViewStore([ - { offsety:0, data:{type:1, subtype:-1} }, - { offsety:518, data:{type:1, subtype:4} }, - { offsety:592, data:{type:1, subtype:5} }, - { offsety:666, data:{type:1, subtype:6} }, - { offsety:296, data:{type:1, subtype:1} }, - { offsety:370, data:{type:1, subtype:2} }, - { offsety:444, data:{type:1, subtype:3} }, - { offsety:740, data:{type:1, subtype:7} } - ]), - itemTemplate: _.template('
') - }); - }); - - this.btnMultilevels.on('render:after', function(btn) { - me.mnuMultilevelPicker = new Common.UI.DataView({ - el: $('#id-toolbar-menu-multilevels'), - parentMenu: btn.menu, - restoreHeight: 164, - allowScrollbar: false, - store: new Common.UI.DataViewStore([ - { offsety:0, data:{type:2, subtype:-1} }, - { offsety:74, data:{type:2, subtype:1} }, - { offsety:148, data:{type:2, subtype:2} }, - { offsety:222, data:{type:2, subtype:3} } - ]), - itemTemplate: _.template('
') - }); - }); - - this.btnInsertTable.on('render:after', function(btn) { - me.mnuTablePicker = new Common.UI.DimensionPicker({ - el : $('#id-toolbar-menu-tablepicker'), - minRows : 8, - minColumns : 10, - maxRows : 8, - maxColumns : 10 - }); - }); - this.btnHighlightColor.on('render:after', function(btn) { var colorVal = $('
'); $('button:first-child', btn.cmpEl).append(colorVal); @@ -1001,68 +779,6 @@ define([ }); }); - this.btnInsertChart.on('render:after', function(btn) { - me.mnuInsertChartPicker = new Common.UI.DataView({ - el: $('#id-toolbar-menu-insertchart'), - parentMenu: btn.menu, - showLast: false, - restoreHeight: 411, - groups: new Common.UI.DataViewGroupStore([ - { id: 'menu-chart-group-bar', caption: me.textColumn }, - { id: 'menu-chart-group-line', caption: me.textLine }, - { id: 'menu-chart-group-pie', caption: me.textPie }, - { id: 'menu-chart-group-hbar', caption: me.textBar }, - { id: 'menu-chart-group-area', caption: me.textArea }, - { id: 'menu-chart-group-scatter', caption: me.textPoint }, - { id: 'menu-chart-group-stock', caption: me.textStock } - ]), - store: new Common.UI.DataViewStore([ - { group: 'menu-chart-group-bar', type: Asc.c_oAscChartTypeSettings.barNormal, allowSelected: true, iconCls: 'column-normal', selected: true}, - { group: 'menu-chart-group-bar', type: Asc.c_oAscChartTypeSettings.barStacked, allowSelected: true, iconCls: 'column-stack'}, - { group: 'menu-chart-group-bar', type: Asc.c_oAscChartTypeSettings.barStackedPer, allowSelected: true, iconCls: 'column-pstack'}, - { group: 'menu-chart-group-bar', type: Asc.c_oAscChartTypeSettings.barNormal3d, allowSelected: true, iconCls: 'column-3d-normal'}, - { group: 'menu-chart-group-bar', type: Asc.c_oAscChartTypeSettings.barStacked3d, allowSelected: true, iconCls: 'column-3d-stack'}, - { group: 'menu-chart-group-bar', type: Asc.c_oAscChartTypeSettings.barStackedPer3d, allowSelected: true, iconCls: 'column-3d-pstack'}, - { group: 'menu-chart-group-bar', type: Asc.c_oAscChartTypeSettings.barNormal3dPerspective, allowSelected: true, iconCls: 'column-3d-normal-per'}, - { group: 'menu-chart-group-line', type: Asc.c_oAscChartTypeSettings.lineNormal, allowSelected: true, iconCls: 'line-normal'}, - { group: 'menu-chart-group-line', type: Asc.c_oAscChartTypeSettings.lineStacked, allowSelected: true, iconCls: 'line-stack'}, - { group: 'menu-chart-group-line', type: Asc.c_oAscChartTypeSettings.lineStackedPer, allowSelected: true, iconCls: 'line-pstack'}, - { group: 'menu-chart-group-line', type: Asc.c_oAscChartTypeSettings.line3d, allowSelected: true, iconCls: 'line-3d'}, - { group: 'menu-chart-group-pie', type: Asc.c_oAscChartTypeSettings.pie, allowSelected: true, iconCls: 'pie-normal'}, - { group: 'menu-chart-group-pie', type: Asc.c_oAscChartTypeSettings.doughnut, allowSelected: true, iconCls: 'pie-doughnut'}, - { group: 'menu-chart-group-pie', type: Asc.c_oAscChartTypeSettings.pie3d, allowSelected: true, iconCls: 'pie-3d-normal'}, - { group: 'menu-chart-group-hbar', type: Asc.c_oAscChartTypeSettings.hBarNormal, allowSelected: true, iconCls: 'bar-normal'}, - { group: 'menu-chart-group-hbar', type: Asc.c_oAscChartTypeSettings.hBarStacked, allowSelected: true, iconCls: 'bar-stack'}, - { group: 'menu-chart-group-hbar', type: Asc.c_oAscChartTypeSettings.hBarStackedPer, allowSelected: true, iconCls: 'bar-pstack'}, - { group: 'menu-chart-group-hbar', type: Asc.c_oAscChartTypeSettings.hBarNormal3d, allowSelected: true, iconCls: 'bar-3d-normal'}, - { group: 'menu-chart-group-hbar', type: Asc.c_oAscChartTypeSettings.hBarStacked3d, allowSelected: true, iconCls: 'bar-3d-stack'}, - { group: 'menu-chart-group-hbar', type: Asc.c_oAscChartTypeSettings.hBarStackedPer3d, allowSelected: true, iconCls: 'bar-3d-pstack'}, - { group: 'menu-chart-group-area', type: Asc.c_oAscChartTypeSettings.areaNormal, allowSelected: true, iconCls: 'area-normal'}, - { group: 'menu-chart-group-area', type: Asc.c_oAscChartTypeSettings.areaStacked, allowSelected: true, iconCls: 'area-stack'}, - { group: 'menu-chart-group-area', type: Asc.c_oAscChartTypeSettings.areaStackedPer, allowSelected: true, iconCls: 'area-pstack'}, - { group: 'menu-chart-group-scatter', type: Asc.c_oAscChartTypeSettings.scatter, allowSelected: true, iconCls: 'point-normal'}, - { group: 'menu-chart-group-stock', type: Asc.c_oAscChartTypeSettings.stock, allowSelected: true, iconCls: 'stock-normal'} - ]), - itemTemplate: _.template('
') - }) - }); - - this.btnEditHeader.on('render:after', function(btn) { - me.mnuPageNumberPosPicker = new Common.UI.DataView({ - el: $('#id-toolbar-menu-pageposition'), - allowScrollbar: false, - store: new Common.UI.DataViewStore([ - { offsety: 132, allowSelected: false, data:{ type:c_pageNumPosition.PAGE_NUM_POSITION_TOP, subtype:c_pageNumPosition.PAGE_NUM_POSITION_LEFT} }, - { offsety: 99, allowSelected: false, data:{ type:c_pageNumPosition.PAGE_NUM_POSITION_TOP, subtype:c_pageNumPosition.PAGE_NUM_POSITION_CENTER} }, - { offsety: 66, allowSelected: false, data:{ type:c_pageNumPosition.PAGE_NUM_POSITION_TOP, subtype:c_pageNumPosition.PAGE_NUM_POSITION_RIGHT} }, - { offsety: 33, allowSelected: false, data:{ type:c_pageNumPosition.PAGE_NUM_POSITION_BOTTOM, subtype:c_pageNumPosition.PAGE_NUM_POSITION_LEFT} }, - { offsety: 0, allowSelected: false, data:{ type:c_pageNumPosition.PAGE_NUM_POSITION_BOTTOM, subtype:c_pageNumPosition.PAGE_NUM_POSITION_CENTER} }, - { offsety: 165, allowSelected: false, data:{ type:c_pageNumPosition.PAGE_NUM_POSITION_BOTTOM, subtype:c_pageNumPosition.PAGE_NUM_POSITION_RIGHT} } - ]), - itemTemplate: _.template('
') - }) - }); - this.cmbFontSize = new Common.UI.ComboBox({ cls: 'input-group-nr', menuStyle: 'min-width: 55px;', @@ -1215,23 +931,6 @@ define([ this.trigger('render:before', this); - var value = Common.localStorage.getItem("de-compact-toolbar"); - var valueCompact = (value !== null && parseInt(value) == 1); - - value = Common.localStorage.getItem("de-hidden-title"); - var valueTitle = (value !== null && parseInt(value) == 1); - - value = Common.localStorage.getItem("de-hidden-status"); - var valueStatus = (value !== null && parseInt(value) == 1); - - value = Common.localStorage.getItem("de-hidden-rulers"); - var valueRulers = (value !== null && parseInt(value) == 1); - - this.mnuitemCompactToolbar.setChecked(valueCompact, true); - this.mnuitemHideTitleBar.setChecked(valueTitle, true); - this.mnuitemHideStatusBar.setChecked(valueStatus, true); - this.mnuitemHideRulers.setChecked(valueRulers, true); - var top = Common.localStorage.getItem("de-pgmargins-top"), left = Common.localStorage.getItem("de-pgmargins-left"), bottom = Common.localStorage.getItem("de-pgmargins-bottom"), @@ -1244,6 +943,9 @@ define([ } else this.btnPageMargins.menu.items[0].setVisible(false); + var value = Common.localStorage.getItem("de-compact-toolbar"); + var valueCompact = (mode.isLightVersion || value !== null && parseInt(value) == 1); + me.$el.html(this.template({ isCompactView: valueCompact })); @@ -1251,8 +953,6 @@ define([ me.rendererComponents(valueCompact ? 'short' : 'full'); me.isCompactView = valueCompact; - this.mnuitemCompactToolbar.on('toggle', _.bind(this.changeViewMode, this)); - this.trigger('render:after', this); /** coauthoring begin **/ @@ -1349,6 +1049,339 @@ define([ this.updateMetricUnit(); } + + // set hints + this.btnNewDocument.updateHint(this.tipNewDocument); + this.btnOpenDocument.updateHint(this.tipOpenDocument); + this.btnPrint.updateHint(this.tipPrint + Common.Utils.String.platformKey('Ctrl+P')); + this.btnSave.updateHint(this.btnSaveTip); + this.btnUndo.updateHint(this.tipUndo + Common.Utils.String.platformKey('Ctrl+Z')); + this.btnRedo.updateHint(this.tipRedo + Common.Utils.String.platformKey('Ctrl+Y')); + this.btnCopy.updateHint(this.tipCopy + Common.Utils.String.platformKey('Ctrl+C')); + this.btnPaste.updateHint(this.tipPaste + Common.Utils.String.platformKey('Ctrl+V')); + this.btnIncFontSize.updateHint(this.tipIncFont + Common.Utils.String.platformKey('Ctrl+]')); + this.btnDecFontSize.updateHint(this.tipDecFont + Common.Utils.String.platformKey('Ctrl+[')); + this.btnBold.updateHint(this.textBold + Common.Utils.String.platformKey('Ctrl+B')); + this.btnItalic.updateHint(this.textItalic + Common.Utils.String.platformKey('Ctrl+I')); + this.btnUnderline.updateHint(this.textUnderline + Common.Utils.String.platformKey('Ctrl+U')); + this.btnStrikeout.updateHint(this.textStrikeout); + this.btnSuperscript.updateHint(this.textSuperscript); + this.btnSubscript.updateHint(this.textSubscript); + this.btnHighlightColor.updateHint(this.tipHighlightColor); + this.btnFontColor.updateHint(this.tipFontColor); + this.btnParagraphColor.updateHint(this.tipPrColor); + this.btnAlignLeft.updateHint(this.tipAlignLeft + Common.Utils.String.platformKey('Ctrl+L')); + this.btnAlignCenter.updateHint(this.tipAlignCenter + Common.Utils.String.platformKey('Ctrl+E')); + this.btnAlignRight.updateHint(this.tipAlignRight + Common.Utils.String.platformKey('Ctrl+R')); + this.btnAlignJust.updateHint(this.tipAlignJust + Common.Utils.String.platformKey('Ctrl+J')); + this.btnHorizontalAlign.updateHint(this.tipHAligh); + this.btnDecLeftOffset.updateHint(this.tipDecPrLeft + Common.Utils.String.platformKey('Ctrl+Shift+M')); + this.btnIncLeftOffset.updateHint(this.tipIncPrLeft + Common.Utils.String.platformKey('Ctrl+M')); + this.btnLineSpace.updateHint(this.tipLineSpace); + this.btnShowHidenChars.updateHint(this.tipShowHiddenChars); + this.btnMarkers.updateHint(this.tipMarkers); + this.btnNumbers.updateHint(this.tipNumbers); + this.btnMultilevels.updateHint(this.tipMultilevels); + this.btnInsertTable.updateHint(this.tipInsertTable); + this.btnInsertImage.updateHint(this.tipInsertImage); + this.btnInsertChart.updateHint(this.tipInsertChart); + this.btnInsertText.updateHint(this.tipInsertText); + this.btnInsertPageBreak.updateHint(this.tipPageBreak); + this.btnInsertHyperlink.updateHint(this.tipInsertHyperlink + Common.Utils.String.platformKey('Ctrl+K')); + this.btnEditHeader.updateHint(this.tipEditHeader); + this.btnInsertShape.updateHint(this.tipInsertShape); + this.btnInsertEquation.updateHint(this.tipInsertEquation); + this.btnDropCap.updateHint(this.tipDropCap); + this.btnColumns.updateHint(this.tipColumns); + this.btnPageOrient.updateHint(this.tipPageOrient); + this.btnPageSize.updateHint(this.tipPageSize); + this.btnClearStyle.updateHint(this.tipClearStyle); + this.btnCopyStyle.updateHint(this.tipCopyStyle + Common.Utils.String.platformKey('Ctrl+Shift+C')); + this.btnColorSchemas.updateHint(this.tipColorSchemas); + this.btnMailRecepients.updateHint(this.tipMailRecepients); + this.btnHide.updateHint(this.tipViewSettings); + this.btnAdvSettings.updateHint(this.tipAdvSettings); + + // set menus + + var me = this; + + this.btnHide.setMenu(new Common.UI.Menu({ + cls: 'pull-right', + style: 'min-width: 180px;', + items: [ + this.mnuitemCompactToolbar = new Common.UI.MenuItem({ + caption : this.textCompactView, + checkable : true + }), + this.mnuitemHideTitleBar = new Common.UI.MenuItem({ + caption : this.textHideTitleBar, + checkable : true + }), + this.mnuitemHideStatusBar = new Common.UI.MenuItem({ + caption : this.textHideStatusBar, + checkable : true + }), + this.mnuitemHideRulers = new Common.UI.MenuItem({ + caption : this.textHideLines, + checkable : true + }), + { caption: '--' }, + this.btnFitPage = new Common.UI.MenuItem({ + caption: this.textFitPage, + checkable: true, + checked: this.btnFitPage.isChecked() + }), + this.btnFitWidth = new Common.UI.MenuItem({ + caption: this.textFitWidth, + checkable: true, + checked: this.btnFitWidth.isChecked() + }), + (new Common.UI.MenuItem({ + template: _.template([ + '' + ].join('')), + stopPropagation: true + })) + ] + }) + ); + + this.btnMarkers.setMenu( + new Common.UI.Menu({ + items: [ + { template: _.template('') } + ] + }) + ); + + this.btnNumbers.setMenu( + new Common.UI.Menu({ + items: [ + { template: _.template('') } + ] + }) + ); + + this.btnMultilevels.setMenu( + new Common.UI.Menu({ + items: [ + { template: _.template('') } + ] + }) + ); + + this.btnInsertPageBreak.setMenu(new Common.UI.Menu({ + items : [ + {caption: this.textInsPageBreak}, + {caption: this.textInsColumnBreak, value: 'column'}, + this.mnuInsertSectionBreak = new Common.UI.MenuItem({ + caption: this.textInsSectionBreak, + value: 'section', + menu: new Common.UI.Menu({ + menuAlign: 'tl-tr', + items : [ + {caption: this.textNextPage, value: Asc.c_oAscSectionBreakType.NextPage}, + {caption: this.textContPage, value: Asc.c_oAscSectionBreakType.Continuous}, + {caption: this.textEvenPage, value: Asc.c_oAscSectionBreakType.EvenPage}, + {caption: this.textOddPage, value: Asc.c_oAscSectionBreakType.OddPage} + ] + }) + }) + ] + })); + + this.btnEditHeader.setMenu( + new Common.UI.Menu({ + items: [ + { caption: this.mniEditHeader, value: 'header' }, + { caption: this.mniEditFooter, value: 'footer' }, + { caption: '--' }, + this.mnuInsertPageNum = new Common.UI.MenuItem({ + caption: this.textInsertPageNumber, + disabled: this.mnuInsertPageNum.isDisabled(), + menu: new Common.UI.Menu({ + menuAlign: 'tl-tr', + items: [ + { template: _.template('') }, + this.mnuPageNumCurrentPos = new Common.UI.MenuItem({ + caption: this.textToCurrent, + disabled: this.mnuPageNumCurrentPos.isDisabled(), + value: 'current' + }) + ] + }) + }) + ] + }) + ); + this.paragraphControls.push(this.mnuPageNumCurrentPos); + + this.mnuZoomOut = new Common.UI.Button({ + el : $('#id-menu-zoom-out'), + cls : 'btn-toolbar' + }); + this.mnuZoomIn = new Common.UI.Button({ + el : $('#id-menu-zoom-in'), + cls : 'btn-toolbar' + }); + + // set dataviews + + var _conf = this.mnuMarkersPicker.conf; + this.mnuMarkersPicker = new Common.UI.DataView({ + el: $('#id-toolbar-menu-markers'), + parentMenu: this.btnMarkers.menu, + restoreHeight: 92, + allowScrollbar: false, + store: new Common.UI.DataViewStore([ + { offsety:0, data:{type:0, subtype:-1} }, + { offsety:38, data:{type:0, subtype:1} }, + { offsety:76, data:{type:0, subtype:2} }, + { offsety:114, data:{type:0, subtype:3} }, + { offsety:152, data:{type:0, subtype:4} }, + { offsety:190, data:{type:0, subtype:5} }, + { offsety:228, data:{type:0, subtype:6} }, + { offsety:266, data:{type:0, subtype:7} } + ]), + itemTemplate: _.template('
') + }); + _conf && this.mnuMarkersPicker.selectByIndex(_conf.index, true); + + _conf = this.mnuNumbersPicker.conf; + this.mnuNumbersPicker = new Common.UI.DataView({ + el: $('#id-toolbar-menu-numbering'), + parentMenu: this.btnNumbers.menu, + restoreHeight: 164, + allowScrollbar: false, + store: new Common.UI.DataViewStore([ + {offsety: 0, data: {type: 1, subtype: -1}}, + {offsety: 518, data: {type: 1, subtype: 4}}, + {offsety: 592, data: {type: 1, subtype: 5}}, + {offsety: 666, data: {type: 1, subtype: 6}}, + {offsety: 296, data: {type: 1, subtype: 1}}, + {offsety: 370, data: {type: 1, subtype: 2}}, + {offsety: 444, data: {type: 1, subtype: 3}}, + {offsety: 740, data: {type: 1, subtype: 7}} + ]), + itemTemplate: _.template('
') + }); + _conf && this.mnuNumbersPicker.selectByIndex(_conf.index, true); + + _conf = this.mnuMultilevelPicker.conf; + this.mnuMultilevelPicker = new Common.UI.DataView({ + el: $('#id-toolbar-menu-multilevels'), + parentMenu: this.btnMultilevels.menu, + restoreHeight: 164, + allowScrollbar: false, + store: new Common.UI.DataViewStore([ + { offsety:0, data:{type:2, subtype:-1} }, + { offsety:74, data:{type:2, subtype:1} }, + { offsety:148, data:{type:2, subtype:2} }, + { offsety:222, data:{type:2, subtype:3} } + ]), + itemTemplate: _.template('
') + }); + _conf && this.mnuMultilevelPicker.selectByIndex(_conf.index, true); + + _conf = this.mnuPageNumberPosPicker ? this.mnuPageNumberPosPicker.conf : undefined; + this.mnuPageNumberPosPicker = new Common.UI.DataView({ + el: $('#id-toolbar-menu-pageposition'), + allowScrollbar: false, + store: new Common.UI.DataViewStore([ + { offsety: 132, allowSelected: false, data:{ type:c_pageNumPosition.PAGE_NUM_POSITION_TOP, subtype:c_pageNumPosition.PAGE_NUM_POSITION_LEFT} }, + { offsety: 99, allowSelected: false, data:{ type:c_pageNumPosition.PAGE_NUM_POSITION_TOP, subtype:c_pageNumPosition.PAGE_NUM_POSITION_CENTER} }, + { offsety: 66, allowSelected: false, data:{ type:c_pageNumPosition.PAGE_NUM_POSITION_TOP, subtype:c_pageNumPosition.PAGE_NUM_POSITION_RIGHT} }, + { offsety: 33, allowSelected: false, data:{ type:c_pageNumPosition.PAGE_NUM_POSITION_BOTTOM, subtype:c_pageNumPosition.PAGE_NUM_POSITION_LEFT} }, + { offsety: 0, allowSelected: false, data:{ type:c_pageNumPosition.PAGE_NUM_POSITION_BOTTOM, subtype:c_pageNumPosition.PAGE_NUM_POSITION_CENTER} }, + { offsety: 165, allowSelected: false, data:{ type:c_pageNumPosition.PAGE_NUM_POSITION_BOTTOM, subtype:c_pageNumPosition.PAGE_NUM_POSITION_RIGHT} } + ]), + itemTemplate: _.template('
') + }); + _conf && this.mnuPageNumberPosPicker.setDisabled(_conf.disabled); + + this.mnuInsertChartPicker = new Common.UI.DataView({ + el: $('#id-toolbar-menu-insertchart'), + parentMenu: this.btnInsertChart.menu, + showLast: false, + restoreHeight: 411, + groups: new Common.UI.DataViewGroupStore([ + { id: 'menu-chart-group-bar', caption: me.textColumn }, + { id: 'menu-chart-group-line', caption: me.textLine }, + { id: 'menu-chart-group-pie', caption: me.textPie }, + { id: 'menu-chart-group-hbar', caption: me.textBar }, + { id: 'menu-chart-group-area', caption: me.textArea }, + { id: 'menu-chart-group-scatter', caption: me.textPoint }, + { id: 'menu-chart-group-stock', caption: me.textStock } + ]), + store: new Common.UI.DataViewStore([ + { group: 'menu-chart-group-bar', type: Asc.c_oAscChartTypeSettings.barNormal, allowSelected: true, iconCls: 'column-normal', selected: true}, + { group: 'menu-chart-group-bar', type: Asc.c_oAscChartTypeSettings.barStacked, allowSelected: true, iconCls: 'column-stack'}, + { group: 'menu-chart-group-bar', type: Asc.c_oAscChartTypeSettings.barStackedPer, allowSelected: true, iconCls: 'column-pstack'}, + { group: 'menu-chart-group-bar', type: Asc.c_oAscChartTypeSettings.barNormal3d, allowSelected: true, iconCls: 'column-3d-normal'}, + { group: 'menu-chart-group-bar', type: Asc.c_oAscChartTypeSettings.barStacked3d, allowSelected: true, iconCls: 'column-3d-stack'}, + { group: 'menu-chart-group-bar', type: Asc.c_oAscChartTypeSettings.barStackedPer3d, allowSelected: true, iconCls: 'column-3d-pstack'}, + { group: 'menu-chart-group-bar', type: Asc.c_oAscChartTypeSettings.barNormal3dPerspective, allowSelected: true, iconCls: 'column-3d-normal-per'}, + { group: 'menu-chart-group-line', type: Asc.c_oAscChartTypeSettings.lineNormal, allowSelected: true, iconCls: 'line-normal'}, + { group: 'menu-chart-group-line', type: Asc.c_oAscChartTypeSettings.lineStacked, allowSelected: true, iconCls: 'line-stack'}, + { group: 'menu-chart-group-line', type: Asc.c_oAscChartTypeSettings.lineStackedPer, allowSelected: true, iconCls: 'line-pstack'}, + { group: 'menu-chart-group-line', type: Asc.c_oAscChartTypeSettings.line3d, allowSelected: true, iconCls: 'line-3d'}, + { group: 'menu-chart-group-pie', type: Asc.c_oAscChartTypeSettings.pie, allowSelected: true, iconCls: 'pie-normal'}, + { group: 'menu-chart-group-pie', type: Asc.c_oAscChartTypeSettings.doughnut, allowSelected: true, iconCls: 'pie-doughnut'}, + { group: 'menu-chart-group-pie', type: Asc.c_oAscChartTypeSettings.pie3d, allowSelected: true, iconCls: 'pie-3d-normal'}, + { group: 'menu-chart-group-hbar', type: Asc.c_oAscChartTypeSettings.hBarNormal, allowSelected: true, iconCls: 'bar-normal'}, + { group: 'menu-chart-group-hbar', type: Asc.c_oAscChartTypeSettings.hBarStacked, allowSelected: true, iconCls: 'bar-stack'}, + { group: 'menu-chart-group-hbar', type: Asc.c_oAscChartTypeSettings.hBarStackedPer, allowSelected: true, iconCls: 'bar-pstack'}, + { group: 'menu-chart-group-hbar', type: Asc.c_oAscChartTypeSettings.hBarNormal3d, allowSelected: true, iconCls: 'bar-3d-normal'}, + { group: 'menu-chart-group-hbar', type: Asc.c_oAscChartTypeSettings.hBarStacked3d, allowSelected: true, iconCls: 'bar-3d-stack'}, + { group: 'menu-chart-group-hbar', type: Asc.c_oAscChartTypeSettings.hBarStackedPer3d, allowSelected: true, iconCls: 'bar-3d-pstack'}, + { group: 'menu-chart-group-area', type: Asc.c_oAscChartTypeSettings.areaNormal, allowSelected: true, iconCls: 'area-normal'}, + { group: 'menu-chart-group-area', type: Asc.c_oAscChartTypeSettings.areaStacked, allowSelected: true, iconCls: 'area-stack'}, + { group: 'menu-chart-group-area', type: Asc.c_oAscChartTypeSettings.areaStackedPer, allowSelected: true, iconCls: 'area-pstack'}, + { group: 'menu-chart-group-scatter', type: Asc.c_oAscChartTypeSettings.scatter, allowSelected: true, iconCls: 'point-normal'}, + { group: 'menu-chart-group-stock', type: Asc.c_oAscChartTypeSettings.stock, allowSelected: true, iconCls: 'stock-normal'} + ]), + itemTemplate: _.template('
') + }); + + this.mnuTablePicker = new Common.UI.DimensionPicker({ + el : $('#id-toolbar-menu-tablepicker'), + minRows : 8, + minColumns : 10, + maxRows : 8, + maxColumns : 10 + }); + + /**/ + var mode = this.mode; + var value = Common.localStorage.getItem("de-compact-toolbar"); + var valueCompact = (mode.isLightVersion || value !== null && parseInt(value) == 1); + + value = Common.localStorage.getItem("de-hidden-title"); + var valueTitle = (value !== null && parseInt(value) == 1); + + value = Common.localStorage.getItem("de-hidden-status"); + var valueStatus = (value !== null && parseInt(value) == 1); + + value = Common.localStorage.getItem("de-hidden-rulers"); + var valueRulers = (value !== null && parseInt(value) == 1); + + this.mnuitemCompactToolbar.setVisible(!mode.isLightVersion); + this.mnuitemCompactToolbar.setChecked(valueCompact, true); + this.mnuitemCompactToolbar.on('toggle', _.bind(this.changeViewMode, this)); + + this.mnuitemHideTitleBar.setChecked(valueTitle, true); + this.mnuitemHideStatusBar.setChecked(valueStatus, true); + this.mnuitemHideRulers.setChecked(valueRulers, true); + /**/ }, updateMetricUnit: function() { @@ -1508,19 +1541,41 @@ define([ }); } - if (this.mnuColorSchema == null) { - this.mnuColorSchema = new Common.UI.Menu({ + if (!this.mnuColorSchema) { + this.btnColorSchemas.setMenu(new Common.UI.Menu({ + items: [], maxHeight : 600, restoreHeight: 600 - }).on('render:after', function(mnu) { + })); + this.mnuColorSchema = this.btnColorSchemas.menu; + this.mnuColorSchema.on('show:before', function(mnu) { + if ( !this.scroller ) { this.scroller = new Common.UI.Scroller({ - el: $(this.el).find('.dropdown-menu '), - useKeyboard: this.enableKeyEvents && !this.handleSelect, - minScrollbarLength : 40 - }); - }); - } + el: $(this.el).find('.dropdown-menu '), + useKeyboard: this.enableKeyEvents && !this.handleSelect, + minScrollbarLength: 40, + alwaysVisibleY: true + }); + } + }).on('show:after', function(btn, e) { + var mnu = $(this.el).find('.dropdown-menu '), + docH = Common.Utils.innerHeight(), + menuH = mnu.outerHeight(), + top = parseInt(mnu.css('top')); + if (menuH > docH) { + mnu.css('max-height', (docH - parseInt(mnu.css('padding-top')) - parseInt(mnu.css('padding-bottom'))-5) + 'px'); + this.scroller.update({minScrollbarLength : 40}); + } else if ( mnu.height() < this.options.restoreHeight ) { + mnu.css('max-height', (Math.min(docH - parseInt(mnu.css('padding-top')) - parseInt(mnu.css('padding-bottom'))-5, this.options.restoreHeight)) + 'px'); + menuH = mnu.outerHeight(); + if (top+menuH > docH) { + mnu.css('top', 0); + } + this.scroller.update({minScrollbarLength : 40}); + } + }) + } this.mnuColorSchema.items = []; var itemTemplate = _.template([