/* * * (c) Copyright Ascensio System Limited 2010-2016 * * This program is a free software product. You can redistribute it and/or * modify it under the terms of the GNU Affero General Public License (AGPL) * version 3 as published by the Free Software Foundation. In accordance with * Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect * that Ascensio System SIA expressly excludes the warranty of non-infringement * of any third-party rights. * * This program is distributed WITHOUT ANY WARRANTY; without even the implied * warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. For * details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html * * You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia, * EU, LV-1021. * * The interactive user interfaces in modified source and object code versions * of the Program must display Appropriate Legal Notices, as required under * Section 5 of the GNU AGPL version 3. * * Pursuant to Section 7(b) of the License you must retain the original Product * logo when distributing the program. Pursuant to Section 7(e) we decline to * grant you any rights under trademark law for use of our trademarks. * * All the Product's GUI elements, including illustrations and icon sets, as * well as technical writing content are licensed under the terms of the * Creative Commons Attribution-ShareAlike 4.0 International. See the License * terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode * */ /** * Toolbar.js * * Toolbar view * * Created by Alexander Yuzhin on 1/9/14 * Copyright (c) 2014 Ascensio System SIA. All rights reserved. * */ define([ 'jquery', 'underscore', 'backbone', 'text!documenteditor/main/app/template/Toolbar.template', 'common/main/lib/collection/Fonts', 'common/main/lib/component/Button', 'common/main/lib/component/ComboBox', 'common/main/lib/component/DataView', 'common/main/lib/component/ColorPalette', 'common/main/lib/component/ThemeColorPalette', 'common/main/lib/component/Menu', 'common/main/lib/component/DimensionPicker', 'common/main/lib/component/Window', 'common/main/lib/component/ComboBoxFonts', 'common/main/lib/component/ComboDataView' /** coauthoring begin **/ ,'common/main/lib/component/SynchronizeTip' /** coauthoring end **/ ], function ($, _, Backbone, toolbarTemplate) { 'use strict'; DE.Views.Toolbar = Backbone.View.extend(_.extend({ el: '#toolbar', // Compile our stats template template: _.template(toolbarTemplate), // Delegated events for creating new items, and clearing completed ones. events: { // }, initialize: function () { /** * UI Components */ var me = this; this.SchemeNames = [ this.txtScheme1, this.txtScheme2, this.txtScheme3, this.txtScheme4, this.txtScheme5, this.txtScheme6, this.txtScheme7, this.txtScheme8, this.txtScheme9, this.txtScheme10, this.txtScheme11, this.txtScheme12, this.txtScheme13, this.txtScheme14, this.txtScheme15, this.txtScheme16, this.txtScheme17, this.txtScheme18, this.txtScheme19, this.txtScheme20, this.txtScheme21 ]; this.paragraphControls = []; this.toolbarControls = []; this.textOnlyControls = []; this._state = { hasCollaborativeChanges: undefined }; this.btnSaveCls = 'btn-save'; this.btnSaveTip = this.tipSave + Common.Utils.String.platformKey('Ctrl+S'); this.btnNewDocument = new Common.UI.Button({ id : 'id-toolbar-btn-newdocument', cls : 'btn-toolbar', iconCls : 'btn-newdocument', hint : this.tipNewDocument }); 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 }); 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') }); 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 }); 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') }); 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') }); 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') }); 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') }); 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+]') }); 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+[') }); this.paragraphControls.push(this.btnDecFontSize); this.btnBold = new Common.UI.Button({ 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); this.btnItalic = new Common.UI.Button({ 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); this.btnUnderline = new Common.UI.Button({ 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); this.btnStrikeout = new Common.UI.Button({ id : 'id-toolbar-btn-strikeout', cls : 'btn-toolbar', iconCls : 'btn-strikeout', hint : this.textStrikeout, enableToggle: true }); this.paragraphControls.push(this.btnStrikeout); this.btnSuperscript = new Common.UI.Button({ id : 'id-toolbar-btn-superscript', cls : 'btn-toolbar', iconCls : 'btn-superscript', hint : this.textSuperscript, enableToggle: true, toggleGroup : 'superscriptGroup' }); this.paragraphControls.push(this.btnSuperscript); this.btnSubscript = new Common.UI.Button({ id : 'id-toolbar-btn-subscript', cls : 'btn-toolbar', iconCls : 'btn-subscript', hint : this.textSubscript, enableToggle: true, toggleGroup : 'superscriptGroup' }); this.paragraphControls.push(this.btnSubscript); this.btnHighlightColor = new Common.UI.Button({ id : 'id-toolbar-btn-highlight', cls : 'btn-toolbar', iconCls : 'btn-highlight', hint : this.tipHighlightColor, enableToggle: true, allowDepress: true, split : true, menu : new Common.UI.Menu({ style: 'min-width: 100px;', items: [ { template: _.template('
') }, { caption: '--' }, this.mnuHighlightTransparent = new Common.UI.MenuItem({ caption: this.strMenuNoFill, checkable: true }) ] }) }); this.paragraphControls.push(this.btnHighlightColor); this.textOnlyControls.push(this.btnHighlightColor); this.btnFontColor = new Common.UI.Button({ id : 'id-toolbar-btn-fontcolor', cls : 'btn-toolbar', iconCls : 'btn-fontcolor', hint : this.tipFontColor, split : true, menu : new Common.UI.Menu({ items: [ { id : 'id-toolbar-menu-auto-fontcolor', caption : this.textAutoColor, template : _.template('<%= caption %>') }, {caption:'--'}, { template: _.template('
') }, { template: _.template('' + this.textNewColor + '') } ] }) }); this.paragraphControls.push(this.btnFontColor); this.btnParagraphColor = new Common.UI.Button({ id : 'id-toolbar-btn-paracolor', cls : 'btn-toolbar', iconCls : 'btn-paracolor', hint : this.tipPrColor, split : true, menu : new Common.UI.Menu({ items: [ { template: _.template('
') }, { template: _.template('' + this.textNewColor + '') } ] }) }); this.paragraphControls.push(this.btnParagraphColor); this.textOnlyControls.push(this.btnParagraphColor); this.btnAlignLeft = new Common.UI.Button({ 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' }); this.paragraphControls.push(this.btnAlignLeft); this.btnAlignCenter = new Common.UI.Button({ 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' }); this.paragraphControls.push(this.btnAlignCenter); this.btnAlignRight = new Common.UI.Button({ 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' }); this.paragraphControls.push(this.btnAlignRight); this.btnAlignJust = new Common.UI.Button({ 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' }); this.paragraphControls.push(this.btnAlignJust); this.btnHorizontalAlign = new Common.UI.Button({ 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', items: [ { caption: this.tipAlignLeft + Common.Utils.String.platformKey('Ctrl+L'), iconCls: 'mnu-align-left', icls: 'btn-align-left', checkable: true, toggleGroup: 'halignGroup', checked: true, value: 1 }, { caption: this.tipAlignCenter + Common.Utils.String.platformKey('Ctrl+E'), iconCls: 'mnu-align-center', icls: 'btn-align-center', checkable: true, toggleGroup: 'halignGroup', value: 2 }, { caption: this.tipAlignRight + Common.Utils.String.platformKey('Ctrl+R'), iconCls: 'mnu-align-right', icls: 'btn-align-right', checkable: true, toggleGroup: 'halignGroup', value: 0 }, { caption: this.tipAlignJust + Common.Utils.String.platformKey('Ctrl+J'), iconCls: 'mnu-align-just', icls: 'btn-align-just', checkable: true, toggleGroup: 'halignGroup', value: 3 } ] }) }); this.paragraphControls.push(this.btnHorizontalAlign); 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') }); 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') }); this.paragraphControls.push(this.btnIncLeftOffset); this.btnLineSpace = new Common.UI.Button({ id : 'id-toolbar-btn-linespace', cls : 'btn-toolbar', iconCls : 'btn-linespace', hint : this.tipLineSpace, menu : new Common.UI.Menu({ style: 'min-width: 60px;', items: [ { caption: '1.0', value: 1.0, checkable: true, toggleGroup: 'linesize' }, { caption: '1.15', value: 1.15, checkable: true, toggleGroup: 'linesize' }, { caption: '1.5', value: 1.5, checkable: true, toggleGroup: 'linesize' }, { caption: '2.0', value: 2.0, checkable: true, toggleGroup: 'linesize' }, { caption: '2.5', value: 2.5, checkable: true, toggleGroup: 'linesize' }, { caption: '3.0', value: 3.0, checkable: true, toggleGroup: 'linesize' } ] }) }); this.paragraphControls.push(this.btnLineSpace); this.btnShowHidenChars = new Common.UI.Button({ id : 'id-toolbar-btn-hidenchars', cls : 'btn-toolbar', iconCls : 'btn-hidenchars', hint : this.tipShowHiddenChars, enableToggle: true, split : true, menu : new Common.UI.Menu({ style: 'min-width: 60px;', items: [ { caption: this.mniHiddenChars, value: 'characters', checkable: true }, { caption: this.mniHiddenBorders, value: 'table', checkable: true } ] }) }); this.toolbarControls.push(this.btnShowHidenChars); this.btnMarkers = new Common.UI.Button({ 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('') } ] }) }); this.paragraphControls.push(this.btnMarkers); this.textOnlyControls.push(this.btnMarkers); this.btnNumbers = new Common.UI.Button({ 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('') } ] }) }); this.paragraphControls.push(this.btnNumbers); this.textOnlyControls.push(this.btnNumbers); this.btnMultilevels = new Common.UI.Button({ id : 'id-toolbar-btn-multilevels', cls : 'btn-toolbar', iconCls : 'btn-multilevels', hint : this.tipMultilevels, menu : new Common.UI.Menu({ items: [ { template: _.template('') } ] }) }); this.paragraphControls.push(this.btnMultilevels); this.textOnlyControls.push(this.btnMultilevels); 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('
') }, { caption: this.mniCustomTable, value: 'custom' } ] }) }); this.paragraphControls.push(this.btnInsertTable); this.btnInsertImage = new Common.UI.Button({ 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' }, { caption: this.mniImageFromUrl, value: 'url' } ] }) }); this.paragraphControls.push(this.btnInsertImage); this.btnInsertChart = new Common.UI.Button({ id : 'id-toolbar-btn-insertchart', cls : 'btn-toolbar', iconCls : 'btn-insertchart', hint : this.tipInsertChart, menu : new Common.UI.Menu({ style: 'width: 560px;', items: [ { template: _.template('') } ] }) }); this.paragraphControls.push(this.btnInsertChart); this.btnInsertText = new Common.UI.Button({ id : 'id-toolbar-btn-inserttext', cls : 'btn-toolbar', iconCls : 'btn-text', hint : this.tipInsertText, enableToggle: true, split : true, menu : new Common.UI.Menu({ items : [ {caption: this.textInsText, value: 'text'}, this.mnuInsertTextArt = new Common.UI.MenuItem({ caption: this.textInsTextArt, value: 'art', menu: new Common.UI.Menu({ menuAlign: 'tl-tr', cls: 'menu-shapes', items: [ { template: _.template('
') } ] }) }) ] }) }); this.paragraphControls.push(this.btnInsertText); this.btnInsertPageBreak = new Common.UI.Button({ 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} ] }) }) ] }) }); 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') }); this.paragraphControls.push(this.btnInsertHyperlink); this.btnEditHeader = new Common.UI.Button({ 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' }) ] }) }) ] }) }); this.paragraphControls.push(this.mnuPageNumCurrentPos); this.toolbarControls.push(this.btnEditHeader); this.btnInsertShape = new Common.UI.Button({ id : 'id-toolbar-btn-insertshape', cls : 'btn-toolbar', iconCls : 'btn-insertshape', hint : this.tipInsertShape, enableToggle: true, menu : new Common.UI.Menu({cls: 'menu-shapes'}) }); this.paragraphControls.push(this.btnInsertShape); this.btnInsertEquation = new Common.UI.Button({ id : 'id-toolbar-btn-insertequation', cls : 'btn-toolbar', iconCls : 'btn-insertequation', hint : this.tipInsertEquation, split : true, menu : new Common.UI.Menu({cls: 'menu-shapes'}) }); this.paragraphControls.push(this.btnInsertEquation); this.btnDropCap = new Common.UI.Button({ id : 'id-toolbar-btn-dropcap', cls : 'btn-toolbar', iconCls : 'btn-dropcap', hint : this.tipDropCap, menu : new Common.UI.Menu({ cls: 'ppm-toolbar', items: [ { caption: this.textNone, iconCls: 'mnu-dropcap-none', checkable: true, toggleGroup: 'menuDropCap', value: Asc.c_oAscDropCap.None, checked: true }, { caption: this.textInText, iconCls: 'mnu-dropcap-intext', checkable: true, toggleGroup: 'menuDropCap', value: Asc.c_oAscDropCap.Drop }, { caption: this.textInMargin, iconCls: 'mnu-dropcap-inmargin', checkable: true, toggleGroup: 'menuDropCap', value: Asc.c_oAscDropCap.Margin }, { caption: '--' }, this.mnuDropCapAdvanced = new Common.UI.MenuItem({ caption: this.mniEditDropCap }) ] }) }); this.paragraphControls.push(this.btnDropCap); this.btnColumns = new Common.UI.Button({ id : 'id-toolbar-btn-columns', cls : 'btn-toolbar', iconCls : 'btn-columns', hint : this.tipColumns, menu : new Common.UI.Menu({ cls: 'ppm-toolbar', items: [ { caption: this.textColumnsOne, iconCls: 'mnu-columns-one', checkable: true, toggleGroup: 'menuColumns', value: 0 }, { caption: this.textColumnsTwo, iconCls: 'mnu-columns-two', checkable: true, toggleGroup: 'menuColumns', value: 1 }, { caption: this.textColumnsThree, iconCls: 'mnu-columns-three', checkable: true, toggleGroup: 'menuColumns', value: 2 }, { caption: this.textColumnsLeft, iconCls: 'mnu-columns-left', checkable: true, toggleGroup: 'menuColumns', value: 3 }, { caption: this.textColumnsRight, iconCls: 'mnu-columns-right', checkable: true, toggleGroup: 'menuColumns', value: 4 } ] }) }); this.paragraphControls.push(this.btnColumns); this.btnPageOrient = new Common.UI.Button({ id : 'id-toolbar-btn-pageorient', cls : 'btn-toolbar', iconCls : 'btn-pageorient', hint : this.tipPageOrient, enableToggle: true }); this.toolbarControls.push(this.btnPageOrient); var pageMarginsTemplate = _.template('
<%= caption %>
' + '<% if (options.value !== null) { %>
' + '' + '
' + ''+ '
'+ '<% } %>'); this.btnPageMargins = new Common.UI.Button({ 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 { caption: this.textMarginsNormal, checkable: true, template: pageMarginsTemplate, toggleGroup: 'menuPageMargins', value: [20, 30, 20, 15] }, { caption: this.textMarginsUsNormal, checkable: true, template: pageMarginsTemplate, toggleGroup: 'menuPageMargins', value: [25.4, 25.4, 25.4, 25.4] }, { caption: this.textMarginsNarrow, checkable: true, template: pageMarginsTemplate, toggleGroup: 'menuPageMargins', value: [12.7, 12.7, 12.7, 12.7] }, { caption: this.textMarginsModerate,checkable: true, template: pageMarginsTemplate, toggleGroup: 'menuPageMargins', value: [25.4, 19.1, 25.4, 19.1] }, { caption: this.textMarginsWide, checkable: true, template: pageMarginsTemplate, toggleGroup: 'menuPageMargins', value: [25.4, 50.8, 25.4, 50.8] }, { caption: '--' }, { caption: this.textPageMarginsCustom, value: 'advanced' } ] }) }); this.toolbarControls.push(this.btnPageMargins); var pageSizeTemplate = _.template('
<%= caption %>
' + '
<%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[0]).toFixed(2)) %> <%= Common.Utils.Metric.getCurrentMetricName() %> x '+ '<%= parseFloat(Common.Utils.Metric.fnRecalcFromMM(options.value[1]).toFixed(2)) %> <%= Common.Utils.Metric.getCurrentMetricName() %>
'); this.btnPageSize = new Common.UI.Button({ 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] }, { caption: 'US Legal', subtitle: '21,59cm x 35,56cm', template: pageSizeTemplate, checkable: true, toggleGroup: 'menuPageSize', value: [215.9, 355.6] }, { caption: 'A4', subtitle: '21cm x 29,7cm', template: pageSizeTemplate, checkable: true, toggleGroup: 'menuPageSize', value: [210, 297], checked: true }, { caption: 'A5', subtitle: '14,81cm x 20,99cm', template: pageSizeTemplate, checkable: true, toggleGroup: 'menuPageSize', value: [148.1, 209.9] }, { caption: 'B5', subtitle: '17,6cm x 25,01cm', template: pageSizeTemplate, checkable: true, toggleGroup: 'menuPageSize', value: [176, 250.1] }, { caption: 'Envelope #10', subtitle: '10,48cm x 24,13cm', template: pageSizeTemplate, checkable: true, toggleGroup: 'menuPageSize', value: [104.8, 241.3] }, { caption: 'Envelope DL', subtitle: '11,01cm x 22,01cm', template: pageSizeTemplate, checkable: true, toggleGroup: 'menuPageSize', value: [110.1, 220.1] }, { caption: 'Tabloid', subtitle: '27,94cm x 43,17cm', template: pageSizeTemplate, checkable: true, toggleGroup: 'menuPageSize', value: [279.4, 431.7] }, { caption: 'A3', subtitle: '29,7cm x 42,01cm', template: pageSizeTemplate, checkable: true, toggleGroup: 'menuPageSize', value: [297, 420.1] }, { caption: 'Tabloid Oversize', subtitle: '30,48cm x 45,71cm', template: pageSizeTemplate, checkable: true, toggleGroup: 'menuPageSize', value: [304.8, 457.1] }, { caption: 'ROC 16K', subtitle: '19,68cm x 27,3cm', template: pageSizeTemplate, checkable: true, toggleGroup: 'menuPageSize', value: [196.8, 273] }, { caption: 'Envelope Choukei 3', subtitle: '11,99cm x 23,49cm', template: pageSizeTemplate, checkable: true, toggleGroup: 'menuPageSize', value: [119.9, 234.9] }, { caption: 'Super B/A3', subtitle: '33,02cm x 48,25cm', template: pageSizeTemplate, checkable: true, toggleGroup: 'menuPageSize', value: [330.2, 482.5] }, { caption: '--' }, { caption: this.textPageSizeCustom, value: 'advanced' } ] }) }); this.toolbarControls.push(this.btnPageSize); this.btnClearStyle = new Common.UI.Button({ id : 'id-toolbar-btn-clearstyle', cls : 'btn-toolbar', iconCls : 'btn-clearstyle', hint : this.tipClearStyle }); this.toolbarControls.push(this.btnClearStyle); this.btnCopyStyle = new Common.UI.Button({ 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); this.btnColorSchemas = new Common.UI.Button({ 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 = $(document).height(), 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.toolbarControls.push(this.btnColorSchemas); this.btnMailRecepients= new Common.UI.Button({ id : 'id-toolbar-btn-mailrecepients', cls : 'btn-toolbar', iconCls : 'btn-mailrecepients', hint : this.tipMailRecepients }); 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); this.toolbarControls.push(this.btnHide); this.btnAdvSettings = new Common.UI.Button({ id : 'id-toolbar-btn-settings', cls : 'btn-toolbar', iconCls : 'btn-settings no-mask', hint : this.tipAdvSettings }); this.toolbarControls.push(this.btnAdvSettings); // // Menus // this.mnuLineSpace = this.btnLineSpace.menu; this.mnuNonPrinting = this.btnShowHidenChars.menu; 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); btn.currentColor = 'FFFF00'; colorVal.css('background-color', '#' + btn.currentColor); me.mnuHighlightColorPicker = new Common.UI.ColorPalette({ el: $('#id-toolbar-menu-highlight'), value: 'FFFF00', colors: [ 'FFFF00', '00FF00', '00FFFF', 'FF00FF', '0000FF', 'FF0000', '00008B', '008B8B', '006400', '800080', '8B0000', '808000', 'FFFFFF', 'D3D3D3', 'A9A9A9', '000000' ] }); me.mnuHighlightColorPicker.select('FFFF00'); }); this.btnFontColor.on('render:after', function(btn) { var colorVal = $('
'); $('button:first-child', btn.cmpEl).append(colorVal); colorVal.css('background-color', btn.currentColor || 'transparent'); me.mnuFontColorPicker = new Common.UI.ThemeColorPalette({ el: $('#id-toolbar-menu-fontcolor'), dynamiccolors: 10, colors: [ me.textThemeColors, '-', {color: '3366FF', effectId: 1}, {color: '0000FF', effectId: 2}, {color: '000090', effectId: 3}, {color: '660066', effectId: 4}, {color: '800000', effectId: 5}, {color: 'FF0000', effectId: 1}, {color: 'FF6600', effectId: 1}, {color: 'FFFF00', effectId: 2}, {color: 'CCFFCC', effectId: 3}, {color: '008000', effectId: 4}, '-', {color: '000000', effectId: 1}, {color: 'FFFFFF', effectId: 2}, {color: '000000', effectId: 3}, {color: 'FFFFFF', effectId: 4}, {color: '000000', effectId: 5}, {color: '000000', effectId: 1}, {color: 'FFFFFF', effectId: 2},{color: '000000', effectId: 1}, {color: 'FFFFFF', effectId: 2},{color: '000000', effectId: 1}, {color: '000000', effectId: 1}, {color: 'FFFFFF', effectId: 2},{color: '000000', effectId: 1}, {color: 'FFFFFF', effectId: 2},{color: '000000', effectId: 1}, {color: '000000', effectId: 1}, {color: 'FFFFFF', effectId: 2},{color: '000000', effectId: 1}, {color: 'FFFFFF', effectId: 2},{color: '000000', effectId: 1}, {color: '000000', effectId: 1}, {color: 'FFFFFF', effectId: 2},{color: '000000', effectId: 1}, {color: 'FFFFFF', effectId: 2},{color: '000000', effectId: 1}, {color: '000000', effectId: 1}, {color: 'FFFFFF', effectId: 2},{color: '000000', effectId: 1}, {color: 'FFFFFF', effectId: 2},{color: '000000', effectId: 1}, {color: '000000', effectId: 1}, {color: 'FFFFFF', effectId: 2},{color: '000000', effectId: 1}, {color: 'FFFFFF', effectId: 2},{color: '000000', effectId: 1}, {color: '000000', effectId: 1}, {color: 'FFFFFF', effectId: 2},{color: '000000', effectId: 1}, {color: 'FFFFFF', effectId: 2},{color: '000000', effectId: 1}, {color: '000000', effectId: 1}, {color: 'FFFFFF', effectId: 2},{color: '000000', effectId: 1}, {color: 'FFFFFF', effectId: 2},{color: '000000', effectId: 1}, {color: '000000', effectId: 1}, {color: 'FFFFFF', effectId: 2},{color: '000000', effectId: 1}, {color: 'FFFFFF', effectId: 2},{color: '000000', effectId: 1}, '-', '--', '-', me.textStandartColors, '-', '3D55FE', '5301B3', '980ABD', 'B2275F', 'F83D26', 'F86A1D', 'F7AC16', 'F7CA12', 'FAFF44', 'D6EF39', '-', '--' ] }); }); this.btnParagraphColor.on('render:after', function(btn) { var colorVal = $('
'); $('button:first-child', btn.cmpEl).append(colorVal); colorVal.css('background-color', btn.currentColor || 'transparent'); me.mnuParagraphColorPicker = new Common.UI.ThemeColorPalette({ el: $('#id-toolbar-menu-paracolor'), dynamiccolors: 10, colors: [ me.textThemeColors, '-', {color: '3366FF', effectId: 1}, {color: '0000FF', effectId: 2}, {color: '000090', effectId: 3}, {color: '660066', effectId: 4}, {color: '800000', effectId: 5}, {color: 'FF0000', effectId: 1}, {color: 'FF6600', effectId: 1}, {color: 'FFFF00', effectId: 2}, {color: 'CCFFCC', effectId: 3}, {color: '008000', effectId: 4}, '-', {color: '000000', effectId: 1}, {color: 'FFFFFF', effectId: 2}, {color: '000000', effectId: 3}, {color: 'FFFFFF', effectId: 4}, {color: '000000', effectId: 5}, {color: '000000', effectId: 1}, {color: 'FFFFFF', effectId: 2},{color: '000000', effectId: 1}, {color: 'FFFFFF', effectId: 2},{color: '000000', effectId: 1}, {color: '000000', effectId: 1}, {color: 'FFFFFF', effectId: 2},{color: '000000', effectId: 1}, {color: 'FFFFFF', effectId: 2},{color: '000000', effectId: 1}, {color: '000000', effectId: 1}, {color: 'FFFFFF', effectId: 2},{color: '000000', effectId: 1}, {color: 'FFFFFF', effectId: 2},{color: '000000', effectId: 1}, {color: '000000', effectId: 1}, {color: 'FFFFFF', effectId: 2},{color: '000000', effectId: 1}, {color: 'FFFFFF', effectId: 2},{color: '000000', effectId: 1}, {color: '000000', effectId: 1}, {color: 'FFFFFF', effectId: 2},{color: '000000', effectId: 1}, {color: 'FFFFFF', effectId: 2},{color: '000000', effectId: 1}, {color: '000000', effectId: 1}, {color: 'FFFFFF', effectId: 2},{color: '000000', effectId: 1}, {color: 'FFFFFF', effectId: 2},{color: '000000', effectId: 1}, {color: '000000', effectId: 1}, {color: 'FFFFFF', effectId: 2},{color: '000000', effectId: 1}, {color: 'FFFFFF', effectId: 2},{color: '000000', effectId: 1}, {color: '000000', effectId: 1}, {color: 'FFFFFF', effectId: 2},{color: '000000', effectId: 1}, {color: 'FFFFFF', effectId: 2},{color: '000000', effectId: 1}, {color: '000000', effectId: 1}, {color: 'FFFFFF', effectId: 2},{color: '000000', effectId: 1}, {color: 'FFFFFF', effectId: 2},{color: '000000', effectId: 1}, '-', '--', '-', me.textStandartColors, '-', 'transparent', '5301B3', '980ABD', 'B2275F', 'F83D26', 'F86A1D', 'F7AC16', 'F7CA12', 'FAFF44', 'D6EF39', '-', '--' ] }); }); 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;', hint: this.tipFontSize, data: [ { value: 8, displayValue: "8" }, { value: 9, displayValue: "9" }, { value: 10, displayValue: "10" }, { value: 11, displayValue: "11" }, { value: 12, displayValue: "12" }, { value: 14, displayValue: "14" }, { value: 16, displayValue: "16" }, { value: 18, displayValue: "18" }, { value: 20, displayValue: "20" }, { value: 22, displayValue: "22" }, { value: 24, displayValue: "24" }, { value: 26, displayValue: "26" }, { value: 28, displayValue: "28" }, { value: 36, displayValue: "36" }, { value: 48, displayValue: "48" }, { value: 72, displayValue: "72" } ] }); this.paragraphControls.push(this.cmbFontSize); this.cmbFontName = new Common.UI.ComboBoxFonts({ cls: 'input-group-nr', menuCls: 'scrollable-menu', menuStyle: 'min-width: 325px;', hint: this.tipFontName, store: new Common.Collections.Fonts() }); this.paragraphControls.push(this.cmbFontName); this.listStylesAdditionalMenuItem = new Common.UI.MenuItem({ template: _.template( '
' + '' + '' + '
') }); this.listStyles = new Common.UI.ComboDataView({ cls : 'combo-styles', itemWidth : 104, itemHeight : 38, // hint : this.tipParagraphStyle, enableKeyEvents: true, additionalMenuItems: [this.listStylesAdditionalMenuItem], beforeOpenHandler: function(e) { var cmp = this, menu = cmp.openButton.menu, minMenuColumn = 6; if (menu.cmpEl) { var itemEl = $(cmp.cmpEl.find('.dataview.inner .style').get(0)).parent(); var itemMargin = /*parseInt($(itemEl.get(0)).parent().css('margin-right'))*/-1; var itemWidth = itemEl.is(':visible') ? parseInt(itemEl.css('width')) : (cmp.itemWidth + parseInt(itemEl.css('padding-left')) + parseInt(itemEl.css('padding-right')) + parseInt(itemEl.css('border-left-width')) + parseInt(itemEl.css('border-right-width'))); var minCount = cmp.menuPicker.store.length >= minMenuColumn ? minMenuColumn : cmp.menuPicker.store.length, columnCount = Math.min(cmp.menuPicker.store.length, Math.round($('.dataview', $(cmp.fieldPicker.el)).width() / (itemMargin + itemWidth) + 0.5)); columnCount = columnCount < minCount ? minCount : columnCount; menu.menuAlignEl = cmp.cmpEl; menu.menuAlign = 'tl-tl'; var offset = cmp.cmpEl.width() - cmp.openButton.$el.width() - columnCount * (itemMargin + itemWidth) - 1; menu.setOffset(Math.min(offset, 0)); menu.cmpEl.css({ 'width' : columnCount * (itemWidth + itemMargin), 'min-height': cmp.cmpEl.height() }); } if (cmp.menuPicker.scroller) { cmp.menuPicker.scroller.update({ includePadding: true, suppressScrollX: true }); } cmp.removeTips(); } }); this.listStyles.fieldPicker.itemTemplate = _.template([ '
', '
', '
' ].join('')); this.listStyles.menuPicker.itemTemplate = _.template([ '
', '
', '
' ].join('')); this.paragraphControls.push(this.listStyles); this.textOnlyControls.push(this.listStyles); // Disable all components before load document _.each(this.toolbarControls.concat(this.paragraphControls), function(cmp) { if (_.isFunction(cmp.setDisabled)) cmp.setDisabled(true); }); this.btnMailRecepients.setDisabled(true); var editStyleMenuUpdate = new Common.UI.MenuItem({ caption : me.textStyleMenuUpdate }).on('click', _.bind(me.onStyleMenuUpdate, me)); var editStyleMenuRestore = new Common.UI.MenuItem({ caption : me.textStyleMenuDelete }).on('click', _.bind(me.onStyleMenuDelete, me)); var editStyleMenuDelete = new Common.UI.MenuItem({ caption : me.textStyleMenuRestore }).on('click', _.bind(me.onStyleMenuDelete, me)); var editStyleMenuRestoreAll = new Common.UI.MenuItem({ caption : me.textStyleMenuRestoreAll }).on('click', _.bind(me.onStyleMenuRestoreAll, me)); var editStyleMenuDeleteAll = new Common.UI.MenuItem({ caption : me.textStyleMenuDeleteAll }).on('click', _.bind(me.onStyleMenuDeleteAll, me)); if (this.styleMenu == null) { this.styleMenu = new Common.UI.Menu({ items: [ editStyleMenuUpdate, editStyleMenuRestore, editStyleMenuDelete, editStyleMenuRestoreAll, editStyleMenuDeleteAll ] }); } return this; }, render: function () { var me = this; /** * Render UI layout */ 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"), right = Common.localStorage.getItem("de-pgmargins-right"); if (top!==null && left!==null && bottom!==null && right!==null) { var mnu = this.btnPageMargins.menu.items[0]; mnu.options.value = mnu.value = [parseFloat(top), parseFloat(left), parseFloat(bottom), parseFloat(right)]; mnu.setVisible(true); $(mnu.el).html(mnu.template({id: Common.UI.getId(), caption : mnu.caption, options : mnu.options})); } else this.btnPageMargins.menu.items[0].setVisible(false); me.$el.html(this.template({ isCompactView: valueCompact })); me.rendererComponents(valueCompact ? 'short' : 'full'); me.isCompactView = valueCompact; this.mnuitemCompactToolbar.on('toggle', _.bind(this.changeViewMode, this)); this.trigger('render:after', this); /** coauthoring begin **/ value = Common.localStorage.getItem("de-hide-synch"); this.showSynchTip = !(value && parseInt(value) == 1); this.needShowSynchTip = false; /** coauthoring end **/ return this; }, rendererComponents: function(mode) { var prefix = (mode === 'short') ? 'short' : 'full'; var replacePlacholder = function(id, cmp) { var placeholderEl = $(id), placeholderDom = placeholderEl.get(0); if (placeholderDom) { if (cmp.rendered) { cmp.el = document.getElementById(cmp.id); placeholderDom.appendChild(document.getElementById(cmp.id)); } else { cmp.render(placeholderEl); } } }; replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-newdocument', this.btnNewDocument); replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-opendocument', this.btnOpenDocument); replacePlacholder('#id-toolbar-' + prefix + '-placeholder-field-fontname', this.cmbFontName); replacePlacholder('#id-toolbar-' + prefix + '-placeholder-field-fontsize', this.cmbFontSize); replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-print', this.btnPrint); replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-save', this.btnSave); replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-undo', this.btnUndo); replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-redo', this.btnRedo); replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-copy', this.btnCopy); replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-paste', this.btnPaste); replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-incfont', this.btnIncFontSize); replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-decfont', this.btnDecFontSize); replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-bold', this.btnBold); replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-italic', this.btnItalic); replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-underline', this.btnUnderline); replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-strikeout', this.btnStrikeout); replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-superscript', this.btnSuperscript); replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-subscript', this.btnSubscript); replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-highlight', this.btnHighlightColor); replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-fontcolor', this.btnFontColor); replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-align-left', this.btnAlignLeft); replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-align-center', this.btnAlignCenter); replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-align-right', this.btnAlignRight); replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-align-just', this.btnAlignJust); replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-incoffset', this.btnIncLeftOffset); replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-decoffset', this.btnDecLeftOffset); replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-linespace', this.btnLineSpace); replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-hidenchars', this.btnShowHidenChars); replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-markers', this.btnMarkers); replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-numbering', this.btnNumbers); replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-multilevels', this.btnMultilevels); replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-inserttable', this.btnInsertTable); replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-insertimage', this.btnInsertImage); replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-insertchart', this.btnInsertChart); replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-inserttext', this.btnInsertText); replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-dropcap', this.btnDropCap); replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-columns', this.btnColumns); replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-pagebreak', this.btnInsertPageBreak); replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-inserthyperlink',this.btnInsertHyperlink); replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-editheader', this.btnEditHeader); replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-insertshape', this.btnInsertShape); replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-insertequation', this.btnInsertEquation); replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-pageorient', this.btnPageOrient); replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-pagemargins', this.btnPageMargins); replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-pagesize', this.btnPageSize); replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-clearstyle', this.btnClearStyle); replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-copystyle', this.btnCopyStyle); replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-colorschemas', this.btnColorSchemas); replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-hidebars', this.btnHide); replacePlacholder('#id-toolbar-' + prefix + '-placeholder-btn-settings', this.btnAdvSettings); replacePlacholder('#id-toolbar-full-placeholder-btn-paracolor', this.btnParagraphColor); replacePlacholder('#id-toolbar-full-placeholder-field-styles', this.listStyles); replacePlacholder('#id-toolbar-short-placeholder-btn-halign', this.btnHorizontalAlign); replacePlacholder('#id-toolbar-full-placeholder-btn-mailrecepients', this.btnMailRecepients); }, createDelayedElements: function() { if (this.api) { var schemes = this.api.get_PropertyThemeColorSchemes(); if (schemes) this.onSendThemeColorSchemes(schemes); this.mnuNonPrinting.items[0].setChecked(this.api.get_ShowParaMarks(), true); this.mnuNonPrinting.items[1].setChecked(this.api.get_ShowTableEmptyLine(), true); this.btnShowHidenChars.toggle(this.mnuNonPrinting.items[0].checked, true); this.updateMetricUnit(); } }, updateMetricUnit: function() { var items = this.btnPageMargins.menu.items; for (var i=0; i 0 && listStylesVisible){ me.listStyles.fillComboView(me.listStyles.menuPicker.getSelectedRec(), true); } }, 100); } this.fireEvent('changecompact', [this, compact]); } }, onSendThemeColorSchemes: function(schemas) { var me = this; if (this.mnuColorSchema && this.mnuColorSchema.items.length > 0) { _.each(this.mnuColorSchema.items, function(item) { item.remove(); }); } if (this.mnuColorSchema == null) { this.mnuColorSchema = new Common.UI.Menu({ 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 }); }); } this.mnuColorSchema.items = []; var itemTemplate = _.template([ '', '', '<% _.each(options.colors, function(color) { %>', '', '<% }) %>', '', '<%= caption %>', '' ].join('')); _.each(schemas, function(schema, index) { var colors = schema.get_colors();//schema.colors; var schemecolors = []; for (var j = 2; j < 7; j++) { var clr = '#' + Common.Utils.ThemeColor.getHexColor(colors[j].get_r(), colors[j].get_g(), colors[j].get_b()); schemecolors.push(clr); } if (index == 21) { this.mnuColorSchema.addItem({ caption : '--' }); } else { this.mnuColorSchema.addItem({ template: itemTemplate, cls : 'color-schemas-menu', colors : schemecolors, caption : (index < 21) ? (me.SchemeNames[index] || schema.get_name()) : schema.get_name(), value : index }); } }, this); }, /** coauthoring begin **/ onCollaborativeChanges: function() { if (this._state.hasCollaborativeChanges) return; if (!this.btnSave.rendered) { this.needShowSynchTip = true; return; } this._state.hasCollaborativeChanges = true; var iconEl = $('.btn-icon', this.btnSave.cmpEl); iconEl.removeClass(this.btnSaveCls); iconEl.addClass('btn-synch'); if (this.showSynchTip){ this.btnSave.updateHint(''); if (this.synchTooltip===undefined) this.createSynchTip(); this.synchTooltip.show(); } else { this.btnSave.updateHint(this.tipSynchronize + Common.Utils.String.platformKey('Ctrl+S')); } this.btnSave.setDisabled(false); Common.Gateway.collaborativeChanges(); }, createSynchTip: function () { this.synchTooltip = new Common.UI.SynchronizeTip({ target : $('#id-toolbar-btn-save') }); this.synchTooltip.on('dontshowclick', function() { this.showSynchTip = false; this.synchTooltip.hide(); this.btnSave.updateHint(this.tipSynchronize + Common.Utils.String.platformKey('Ctrl+S')); Common.localStorage.setItem("de-hide-synch", 1); }, this); this.synchTooltip.on('closeclick', function() { this.synchTooltip.hide(); this.btnSave.updateHint(this.tipSynchronize + Common.Utils.String.platformKey('Ctrl+S')); }, this); }, synchronizeChanges: function() { if (this.btnSave.rendered) { var iconEl = $('.btn-icon', this.btnSave.cmpEl); if (iconEl.hasClass('btn-synch')) { iconEl.removeClass('btn-synch'); iconEl.addClass(this.btnSaveCls); if (this.synchTooltip) this.synchTooltip.hide(); this.btnSave.updateHint(this.btnSaveTip); this.btnSave.setDisabled(true); this._state.hasCollaborativeChanges = false; } } }, onApiUsersChanged: function(users) { var editusers = []; _.each(users, function(item){ if (!item.asc_getView()) editusers.push(item); }); var length = _.size(editusers); var cls = (length>1) ? 'btn-save-coauth' : 'btn-save'; if (cls !== this.btnSaveCls && this.btnSave.rendered) { this.btnSaveTip = ((length>1) ? this.tipSaveCoauth : this.tipSave )+ Common.Utils.String.platformKey('Ctrl+S'); var iconEl = $('.btn-icon', this.btnSave.cmpEl); if (!iconEl.hasClass('btn-synch')) { iconEl.removeClass(this.btnSaveCls); iconEl.addClass(cls); this.btnSave.updateHint(this.btnSaveTip); } this.btnSaveCls = cls; } }, /** coauthoring end **/ onStyleMenuUpdate: function(item, e, eOpt) { var me = this; if (me.api) { var style = me.api.asc_GetStyleFromFormatting(); var title = item.styleTitle; var characterStyle = style.get_Link(); style.put_Name(title); characterStyle.put_Name(title + '_character'); me.api.asc_AddNewStyle(style); setTimeout(function() { me.listStyles.openButton.menu.hide(); }, 100); } }, onStyleMenuDelete: function(item, e, eOpt) { var me = this; if (me.api) { this.api.asc_RemoveStyle(item.styleTitle); } }, onStyleMenuRestoreAll: function(item, e, eOpt) { var me = this; if (me.api) { _.each(window.styles.get_MergedStyles(), function (style) { if (me.api.asc_IsStyleDefault(style.get_Name())) { me.api.asc_RemoveStyle(style.get_Name()); } }); } }, onStyleMenuDeleteAll: function(item, e, eOpt) { if (this.api) this.api.asc_RemoveAllCustomStyles(); }, textBold: 'Bold', textItalic: 'Italic', textUnderline: 'Underline', textStrikeout: 'Strikeout', textSuperscript: 'Superscript', textSubscript: 'Subscript', strMenuNoFill: 'No Fill', tipFontName: 'Font Name', tipFontSize: 'Font Size', tipParagraphStyle: 'Paragraph Style', tipCopy: 'Copy', tipPaste: 'Paste', tipUndo: 'Undo', tipRedo: 'Redo', tipPrint: 'Print', tipSave: 'Save', tipIncFont: 'Increment font size', tipDecFont: 'Decrement font size', tipHighlightColor: 'Highlight color', tipFontColor: 'Font color', tipMarkers: 'Bullets', tipNumbers: 'Numbering', tipMultilevels: 'Outline', tipAlignLeft: 'Align Left', tipAlignRight: 'Align Right', tipAlignCenter: 'Align Center', tipAlignJust: 'Justified', tipDecPrLeft: 'Decrease Indent', tipIncPrLeft: 'Increase Indent', tipShowHiddenChars: 'Nonprinting Characters', tipLineSpace: 'Paragraph Line Spacing', tipPrColor: 'Background color', tipInsertTable: 'Insert Table', tipInsertImage: 'Insert Picture', tipPageBreak: 'Insert Page or Section break', tipInsertNum: 'Insert Page Number', tipClearStyle: 'Clear Style', tipCopyStyle: 'Copy Style', tipPageSize: 'Page Size', tipPageOrient: 'Page Orientation', tipBack: 'Back', tipInsertShape: 'Insert Autoshape', tipInsertEquation: 'Insert Equation', mniImageFromFile: 'Picture from file', mniImageFromUrl: 'Picture from url', mniCustomTable: 'Insert Custom Table', textTitleError: 'Error', textInsertPageNumber: 'Insert page number', textToCurrent: 'To Current Position', tipEditHeader: 'Edit Document Header or Footer', mniEditHeader: 'Edit Document Header', mniEditFooter: 'Edit Document Footer', tipInsertHyperlink: 'Add Hyperlink', mniHiddenChars: 'Nonprinting Characters', mniHiddenBorders: 'Hidden Table Borders', tipNewDocument: 'New Document', tipOpenDocument: 'Open Document', tipSynchronize: 'The document has been changed by another user. Please click to save your changes and reload the updates.', textNewColor: 'Add New Custom Color', textAutoColor: 'Automatic', tipInsertChart: 'Insert Chart', textLine: 'Line Chart', textColumn: 'Column Chart', textBar: 'Bar Chart', textArea: 'Area Chart', textPie: 'Pie Chart', textPoint: 'Point Chart', textStock: 'Stock Chart', textThemeColors: 'Theme Colors', textStandartColors: 'Standart Colors', tipColorSchemas: 'Change Color Scheme', tipInsertText: 'Insert Text', tipHAligh: 'Horizontal Align', tipViewSettings: 'View Settings', tipAdvSettings: 'Advanced Settings', textCompactView: 'View Compact Toolbar', textHideTitleBar: 'Hide Title Bar', textHideStatusBar: 'Hide Status Bar', textHideLines: 'Hide Rulers', textFitPage: 'Fit Page', textFitWidth: 'Fit Width', textZoom: 'Zoom', mniEditDropCap: 'Drop Cap Settings', textNone: 'None', textInText: 'In Text', textInMargin: 'In Margin', tipDropCap: 'Insert drop cap', txtScheme1: 'Office', txtScheme2: 'Grayscale', txtScheme3: 'Apex', txtScheme4: 'Aspect', txtScheme5: 'Civic', txtScheme6: 'Concourse', txtScheme7: 'Equity', txtScheme8: 'Flow', txtScheme9: 'Foundry', txtScheme10: 'Median', txtScheme11: 'Metro', txtScheme12: 'Module', txtScheme13: 'Opulent', txtScheme14: 'Oriel', txtScheme15: 'Origin', txtScheme16: 'Paper', txtScheme17: 'Solstice', txtScheme18: 'Technic', txtScheme19: 'Trek', txtScheme20: 'Urban', txtScheme21: 'Verve', textInsPageBreak: 'Insert Page Break', textInsColumnBreak: 'Insert Column Break', textInsSectionBreak: 'Insert Section Break', textNextPage: 'Next Page', textContPage: 'Continuous Page', textEvenPage: 'Even Page', textOddPage: 'Odd Page', tipSaveCoauth: 'Save your changes for the other users to see them.', tipMailRecepients: 'Mail Merge', textStyleMenuUpdate: 'Update from select', textStyleMenuRestore: 'Restore to default', textStyleMenuDelete: 'Delete style', textStyleMenuRestoreAll: 'Restore all to default styles', textStyleMenuDeleteAll: 'Delete all custom styles', textStyleMenuNew: 'New style from selection', textInsText: 'Insert text box', textInsTextArt: 'Insert Text Art', tipColumns: 'Insert columns', textColumnsOne: 'One', textColumnsTwo: 'Two', textColumnsThree: 'Three', textColumnsLeft: 'Left', textColumnsRight: 'Right', tipPageMargins: 'Page Margins', textMarginsLast: 'Last Custom', textMarginsNormal: 'Normal', textMarginsUsNormal: 'US Normal', textMarginsNarrow: 'Narrow', textMarginsModerate: 'Moderate', textMarginsWide: 'Wide', textPageMarginsCustom: 'Custom margins', textTop: 'Top: ', textLeft: 'Left: ', textBottom: 'Bottom: ', textRight: 'Right: ', textPageSizeCustom: 'Custom Page Size' }, DE.Views.Toolbar || {})); });