/* * (c) Copyright Ascensio System SIA 2010-2015 * * 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 * */ define(["text!presentationeditor/main/app/template/SlideSettings.template", "jquery", "underscore", "backbone", "common/main/lib/component/ComboBox", "common/main/lib/component/MetricSpinner", "common/main/lib/component/ThemeColorPalette", "common/main/lib/component/ColorButton", "common/main/lib/component/ComboDataView", "common/main/lib/component/MultiSliderGradient", "common/main/lib/view/ImageFromUrlDialog"], function (menuTemplate, $, _, Backbone) { PE.Views.SlideSettings = Backbone.View.extend(_.extend({ el: "#id-slide-settings", template: _.template(menuTemplate), events: {}, options: { alias: "SlideSettings" }, initialize: function () { var me = this; this._initSettings = true; this._originalProps = null; this._noApply = true; this._sendUndoPoint = true; this._sliderChanged = false; this.FillItems = []; this._stateDisabled = { background: false, effects: false, timing: false }; this._state = { FillType: c_oAscFill.FILL_TYPE_SOLID, SlideColor: "ffffff", BlipFillType: c_oAscFillBlipType.STRETCH, FGColor: "000000", BGColor: "ffffff", GradColor: "000000", GradFillType: c_oAscFillGradType.GRAD_LINEAR }; this.OriginalFillType = c_oAscFill.FILL_TYPE_SOLID; this.SlideColor = { Value: 1, Color: "ffffff" }; this.BlipFillType = c_oAscFillBlipType.STRETCH; this.Effect = c_oAscSlideTransitionTypes.None; this.EffectType = undefined; this.GradFillType = c_oAscFillGradType.GRAD_LINEAR; this.GradColor = { values: [0, 100], colors: ["000000", "ffffff"], currentIdx: 0 }; this.GradRadialDirectionIdx = 0; this.GradLinearDirectionType = 0; this.PatternFillType = 0; this.FGColor = { Value: 1, Color: "000000" }; this.BGColor = { Value: 1, Color: "ffffff" }; this.textureNames = [this.txtCanvas, this.txtCarton, this.txtDarkFabric, this.txtGrain, this.txtGranite, this.txtGreyPaper, this.txtKnit, this.txtLeather, this.txtBrownPaper, this.txtPapyrus, this.txtWood]; this.render(); this._arrFillSrc = [{ displayValue: this.textColor, value: c_oAscFill.FILL_TYPE_SOLID }, { displayValue: this.textGradientFill, value: c_oAscFill.FILL_TYPE_GRAD }, { displayValue: this.textImageTexture, value: c_oAscFill.FILL_TYPE_BLIP }, { displayValue: this.textPatternFill, value: c_oAscFill.FILL_TYPE_PATT }, { displayValue: this.textNoFill, value: c_oAscFill.FILL_TYPE_NOFILL }]; this.cmbFillSrc = new Common.UI.ComboBox({ el: $("#slide-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.btnBackColor = new Common.UI.ColorButton({ style: "width:45px;", menu: new Common.UI.Menu({ items: [{ template: _.template('
') }, { template: _.template('' + me.textNewColor + "") }] }) }); this.FillItems.push(this.btnBackColor); this.btnBackColor.on("render:after", function (btn) { me.colorsBack = new Common.UI.ThemeColorPalette({ el: $("#slide-back-color-menu"), dynamiccolors: 10, value: "ffffff", 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", "-", "--"] }); me.colorsBack.on("select", _.bind(me.onColorsBackSelect, me)); }); this.btnBackColor.render($("#slide-back-color-btn")); this.btnBackColor.setColor("ffffff"); $(this.el).on("click", "#slide-back-color-new", _.bind(this.addNewColor, this, this.colorsBack, 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($("#slide-combo-pattern")); this.cmbPattern.openButton.menu.cmpEl.css({ "min-width": 178, "max-width": 178 }); this.cmbPattern.on("click", _.bind(this.onPatternSelect, this)); this.FillItems.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: $("#slide-foreground-color-menu"), dynamiccolors: 10, value: "000000", 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", "-", "--"] }); me.colorsFG.on("select", _.bind(me.onColorsFGSelect, me)); }); this.btnFGColor.render($("#slide-foreground-color-btn")); this.btnFGColor.setColor("000000"); $(this.el).on("click", "#slide-foreground-color-new", _.bind(this.addNewColor, this, this.colorsFG, this.btnFGColor)); this.FillItems.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: $("#slide-background-color-menu"), dynamiccolors: 10, value: "ffffff", 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", "-", "--"] }); me.colorsBG.on("select", _.bind(me.onColorsBGSelect, me)); }); this.btnBGColor.render($("#slide-background-color-btn")); this.btnBGColor.setColor("ffffff"); $(this.el).on("click", "#slide-background-color-new", _.bind(this.addNewColor, this, this.colorsBG, this.btnBGColor)); this.FillItems.push(this.btnBGColor); this.btnInsertFromFile = new Common.UI.Button({ el: $("#slide-button-from-file") }); this.btnInsertFromFile.on("click", _.bind(function (btn) { if (this.api) { this.api.ChangeSlideImageFromFile(); } this.fireEvent("editcomplete", this); }, this)); this.FillItems.push(this.btnInsertFromFile); this.btnInsertFromUrl = new Common.UI.Button({ el: $("#slide-button-from-url") }); this.btnInsertFromUrl.on("click", _.bind(this.insertFromUrl, this)); this.FillItems.push(this.btnInsertFromUrl); this._arrFillType = [{ displayValue: this.textStretch, value: c_oAscFillBlipType.STRETCH }, { displayValue: this.textTile, value: c_oAscFillBlipType.TILE }]; this.cmbFillType = new Common.UI.ComboBox({ el: $("#slide-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.FillItems.push(this.cmbFillType); this.btnTexture = new Common.UI.ComboBox({ el: $("#slide-combo-fill-texture"), template: _.template(['"].join("")) }); this.textureMenu = new Common.UI.Menu({ items: [{ template: _.template('
') }] }); this.textureMenu.render($("#slide-combo-fill-texture")); this.FillItems.push(this.btnTexture); this._arrGradType = [{ displayValue: this.textLinear, value: c_oAscFillGradType.GRAD_LINEAR }, { displayValue: this.textRadial, value: c_oAscFillGradType.GRAD_PATH }]; this.cmbGradType = new Common.UI.ComboBox({ el: $("#slide-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.FillItems.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-slide-menu-direction"), parentMenu: btn.menu, restoreHeight: 174, store: new Common.UI.DataViewStore(me._viewDataLinear), itemTemplate: _.template('
') }); }); this.btnDirection.render($("#slide-button-direction")); this.mnuDirectionPicker.on("item:click", _.bind(this.onSelectGradient, this, this.btnDirection)); this.FillItems.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: $("#slide-gradient-color-menu"), dynamiccolors: 10, value: "000000", 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", "-", "--"] }); me.colorsGrad.on("select", _.bind(me.onColorsGradientSelect, me)); }); this.btnGradColor.render($("#slide-gradient-color-btn")); this.btnGradColor.setColor("000000"); $(this.el).on("click", "#slide-gradient-color-new", _.bind(this.addNewColor, this, this.colorsGrad, this.btnGradColor)); this.FillItems.push(this.btnGradColor); this.sldrGradient = new Common.UI.MultiSliderGradient({ el: $("#slide-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.FillItems.push(this.sldrGradient); this.FillColorContainer = $("#slide-panel-color-fill"); this.FillImageContainer = $("#slide-panel-image-fill"); this.FillPatternContainer = $("#slide-panel-pattern-fill"); this.FillGradientContainer = $("#slide-panel-gradient-fill"); this._arrEffectName = [{ displayValue: this.textNone, value: c_oAscSlideTransitionTypes.None }, { displayValue: this.textFade, value: c_oAscSlideTransitionTypes.Fade }, { displayValue: this.textPush, value: c_oAscSlideTransitionTypes.Push }, { displayValue: this.textWipe, value: c_oAscSlideTransitionTypes.Wipe }, { displayValue: this.textSplit, value: c_oAscSlideTransitionTypes.Split }, { displayValue: this.textUnCover, value: c_oAscSlideTransitionTypes.UnCover }, { displayValue: this.textCover, value: c_oAscSlideTransitionTypes.Cover }, { displayValue: this.textClock, value: c_oAscSlideTransitionTypes.Clock }, { displayValue: this.textZoom, value: c_oAscSlideTransitionTypes.Zoom }]; this.cmbEffectName = new Common.UI.ComboBox({ el: $("#slide-combo-effect-name"), cls: "input-group-nr", style: "width: 100%;", menuStyle: "min-width: 190px;", editable: false, data: this._arrEffectName }); this.cmbEffectName.setValue(this._arrEffectName[0].value); this.cmbEffectName.on("selected", _.bind(this.onEffectNameSelect, this)); this._arrEffectType = [{ displayValue: this.textSmoothly, value: c_oAscSlideTransitionParams.Fade_Smoothly }, { displayValue: this.textBlack, value: c_oAscSlideTransitionParams.Fade_Through_Black }, { displayValue: this.textLeft, value: c_oAscSlideTransitionParams.Param_Left }, { displayValue: this.textTop, value: c_oAscSlideTransitionParams.Param_Top }, { displayValue: this.textRight, value: c_oAscSlideTransitionParams.Param_Right }, { displayValue: this.textBottom, value: c_oAscSlideTransitionParams.Param_Bottom }, { displayValue: this.textTopLeft, value: c_oAscSlideTransitionParams.Param_TopLeft }, { displayValue: this.textTopRight, value: c_oAscSlideTransitionParams.Param_TopRight }, { displayValue: this.textBottomLeft, value: c_oAscSlideTransitionParams.Param_BottomLeft }, { displayValue: this.textBottomRight, value: c_oAscSlideTransitionParams.Param_BottomRight }, { displayValue: this.textVerticalIn, value: c_oAscSlideTransitionParams.Split_VerticalIn }, { displayValue: this.textVerticalOut, value: c_oAscSlideTransitionParams.Split_VerticalOut }, { displayValue: this.textHorizontalIn, value: c_oAscSlideTransitionParams.Split_HorizontalIn }, { displayValue: this.textHorizontalOut, value: c_oAscSlideTransitionParams.Split_HorizontalOut }, { displayValue: this.textClockwise, value: c_oAscSlideTransitionParams.Clock_Clockwise }, { displayValue: this.textCounterclockwise, value: c_oAscSlideTransitionParams.Clock_Counterclockwise }, { displayValue: this.textWedge, value: c_oAscSlideTransitionParams.Clock_Wedge }, { displayValue: this.textZoomIn, value: c_oAscSlideTransitionParams.Zoom_In }, { displayValue: this.textZoomOut, value: c_oAscSlideTransitionParams.Zoom_Out }, { displayValue: this.textZoomRotate, value: c_oAscSlideTransitionParams.Zoom_AndRotate }]; this.cmbEffectType = new Common.UI.ComboBox({ el: $("#slide-combo-effect-type"), cls: "input-group-nr", style: "width: 100%;", menuStyle: "min-width: 190px;", editable: false, data: this._arrEffectType }); this.cmbEffectType.setValue(""); this.cmbEffectType.on("selected", _.bind(this.onEffectTypeSelect, this)); this.numDuration = new Common.UI.MetricSpinner({ el: $("#slide-spin-duration"), step: 1, width: 65, value: "2 s", defaultUnit: "s", maxValue: 300, minValue: 0 }); this.numDuration.on("change", _.bind(this.onDurationChange, this)); this.numDelay = new Common.UI.MetricSpinner({ el: $("#slide-spin-delay"), step: 1, width: 70, value: "2 s", defaultUnit: "s", maxValue: 300, minValue: 0, disabled: true }); this.numDelay.on("change", _.bind(this.onDelayChange, this)); this.chStartOnClick = new Common.UI.CheckBox({ el: $("#slide-checkbox-start-click"), labelText: this.strStartOnClick }); this.chStartOnClick.on("change", _.bind(this.onStartOnClickChange, this)); this.chDelay = new Common.UI.CheckBox({ el: $("#slide-checkbox-delay"), labelText: this.strDelay }); this.chDelay.on("change", _.bind(this.onCheckDelayChange, this)); this.btnPreview = new Common.UI.Button({ el: $("#slide-button-preview") }); this.btnPreview.on("click", _.bind(function (btn) { if (this.api) { this.api.SlideTransitionPlay(); } this.fireEvent("editcomplete", this); }, this)); this.btnApplyToAll = new Common.UI.Button({ el: $("#slide-button-apply-all") }); this.btnApplyToAll.on("click", _.bind(function (btn) { if (this.api) { this.api.SlideTimingApplyToAll(); } this.fireEvent("editcomplete", this); }, this)); }, render: function () { var el = $(this.el); el.html(this.template({ scope: this })); }, setApi: function (api) { this.api = api; if (this.api) { this.api.SetInterfaceDrawImagePlaceSlide("slide-texture-img"); var textures = this.api.get_PropertyStandartTextures(); if (textures) { this.onInitStandartTextures(textures); } } return this; }, onFillSrcSelect: function (combo, record) { this.ShowHideElem(record.value); switch (record.value) { case c_oAscFill.FILL_TYPE_SOLID: this._state.FillType = c_oAscFill.FILL_TYPE_SOLID; if (!this._noApply) { var props = new CAscSlideProps(); var fill = new CAscFill(); fill.put_type(c_oAscFill.FILL_TYPE_SOLID); fill.put_fill(new CAscFillSolid()); fill.get_fill().put_color(Common.Utils.ThemeColor.getRgbColor((this.SlideColor.Color == "transparent") ? { color: "4f81bd", effectId: 24 } : this.SlideColor.Color)); props.put_background(fill); this.api.SetSlideProps(props); } break; case c_oAscFill.FILL_TYPE_GRAD: this._state.FillType = c_oAscFill.FILL_TYPE_GRAD; if (!this._noApply) { var props = new CAscSlideProps(); var fill = new CAscFill(); fill.put_type(c_oAscFill.FILL_TYPE_GRAD); fill.put_fill(new CAscFillGrad()); fill.get_fill().put_grad_type(this.GradFillType); if (this.GradFillType == c_oAscFillGradType.GRAD_LINEAR) { fill.get_fill().put_linear_angle(this.GradLinearDirectionType * 60000); fill.get_fill().put_linear_scale(true); } if (this.OriginalFillType !== c_oAscFill.FILL_TYPE_GRAD) { fill.get_fill().put_positions([this.GradColor.values[0] * 1000, this.GradColor.values[1] * 1000]); fill.get_fill().put_colors([Common.Utils.ThemeColor.getRgbColor(this.GradColor.colors[0]), Common.Utils.ThemeColor.getRgbColor(this.GradColor.colors[1])]); } props.put_background(fill); this.api.SetSlideProps(props); } break; case c_oAscFill.FILL_TYPE_BLIP: this._state.FillType = c_oAscFill.FILL_TYPE_BLIP; break; case c_oAscFill.FILL_TYPE_PATT: this._state.FillType = c_oAscFill.FILL_TYPE_PATT; if (!this._noApply) { var props = new CAscSlideProps(); var fill = new CAscFill(); fill.put_type(c_oAscFill.FILL_TYPE_PATT); fill.put_fill(new CAscFillHatch()); fill.get_fill().put_pattern_type(this.PatternFillType); var fHexColor = Common.Utils.ThemeColor.getRgbColor(this.FGColor.Color).get_color().get_hex(); var bHexColor = Common.Utils.ThemeColor.getRgbColor(this.BGColor.Color).get_color().get_hex(); if (bHexColor === "ffffff" && fHexColor === "ffffff") { fHexColor = { color: "4f81bd", effectId: 24 }; } else { fHexColor = this.FGColor.Color; } fill.get_fill().put_color_fg(Common.Utils.ThemeColor.getRgbColor(fHexColor)); fill.get_fill().put_color_bg(Common.Utils.ThemeColor.getRgbColor(this.BGColor.Color)); props.put_background(fill); this.api.SetSlideProps(props); } break; case c_oAscFill.FILL_TYPE_NOFILL: this._state.FillType = c_oAscFill.FILL_TYPE_NOFILL; if (!this._noApply) { var props = new CAscSlideProps(); var fill = new CAscFill(); fill.put_type(c_oAscFill.FILL_TYPE_NOFILL); fill.put_fill(null); props.put_background(fill); this.api.SetSlideProps(props); } break; } this.fireEvent("editcomplete", this); }, onColorsBackSelect: function (picker, color) { this.btnBackColor.setColor(color); this.SlideColor = { Value: 1, Color: color }; if (this.api && !this._noApply) { var props = new CAscSlideProps(); var fill = new CAscFill(); if (this.SlideColor.Color == "transparent") { fill.put_type(c_oAscFill.FILL_TYPE_NOFILL); fill.put_fill(null); } else { fill.put_type(c_oAscFill.FILL_TYPE_SOLID); fill.put_fill(new CAscFillSolid()); fill.get_fill().put_color(Common.Utils.ThemeColor.getRgbColor(this.SlideColor.Color)); } props.put_background(fill); this.api.SetSlideProps(props); } this.fireEvent("editcomplete", this); }, addNewColor: function (picker, btn) { picker.addNewColor((typeof(btn.color) == "object") ? btn.color.color : btn.color); }, onPatternSelect: function (combo, record) { if (this.api && !this._noApply) { this.PatternFillType = record.get("type"); var props = new CAscSlideProps(); var fill = new CAscFill(); fill.put_type(c_oAscFill.FILL_TYPE_PATT); fill.put_fill(new CAscFillHatch()); fill.get_fill().put_pattern_type(this.PatternFillType); if (this.OriginalFillType !== c_oAscFill.FILL_TYPE_PATT) { fill.get_fill().put_color_fg(Common.Utils.ThemeColor.getRgbColor(this.FGColor.Color)); fill.get_fill().put_color_bg(Common.Utils.ThemeColor.getRgbColor(this.BGColor.Color)); } props.put_background(fill); this.api.SetSlideProps(props); } this.fireEvent("editcomplete", this); }, onColorsFGSelect: function (picker, color) { this.btnFGColor.setColor(color); this.FGColor = { Value: 1, Color: color }; if (this.api && !this._noApply) { var props = new CAscSlideProps(); var fill = new CAscFill(); fill.put_type(c_oAscFill.FILL_TYPE_PATT); fill.put_fill(new CAscFillHatch()); fill.get_fill().put_color_fg(Common.Utils.ThemeColor.getRgbColor(this.FGColor.Color)); if (this.OriginalFillType !== c_oAscFill.FILL_TYPE_PATT) { fill.get_fill().put_pattern_type(this.PatternFillType); fill.get_fill().put_color_bg(Common.Utils.ThemeColor.getRgbColor(this.BGColor.Color)); } props.put_background(fill); this.api.SetSlideProps(props); } this.fireEvent("editcomplete", this); }, onColorsBGSelect: function (picker, color) { this.btnBGColor.setColor(color); this.BGColor = { Value: 1, Color: color }; if (this.api && !this._noApply) { var props = new CAscSlideProps(); var fill = new CAscFill(); fill.put_type(c_oAscFill.FILL_TYPE_PATT); fill.put_fill(new CAscFillHatch()); if (this.OriginalFillType !== c_oAscFill.FILL_TYPE_PATT) { fill.get_fill().put_pattern_type(this.PatternFillType); fill.get_fill().put_color_fg(Common.Utils.ThemeColor.getRgbColor(this.FGColor.Color)); } fill.get_fill().put_color_bg(Common.Utils.ThemeColor.getRgbColor(this.BGColor.Color)); props.put_background(fill); this.api.SetSlideProps(props); } this.fireEvent("editcomplete", this); }, onFillTypeSelect: function (combo, record) { this.BlipFillType = record.value; if (this.api && this._fromTextureCmb !== true && this.OriginalFillType == c_oAscFill.FILL_TYPE_BLIP) { var props = new CAscSlideProps(); var fill = new CAscFill(); fill.put_type(c_oAscFill.FILL_TYPE_BLIP); fill.put_fill(new CAscFillBlip()); fill.get_fill().put_type(this.BlipFillType); props.put_background(fill); this.api.SetSlideProps(props); } this.fireEvent("editcomplete", this); }, onGradTypeSelect: function (combo, record) { this.GradFillType = record.value; if (this.GradFillType == c_oAscFillGradType.GRAD_LINEAR) { this.mnuDirectionPicker.store.reset(this._viewDataLinear); this.mnuDirectionPicker.cmpEl.width(175); this.mnuDirectionPicker.restoreHeight = 174; var record = this.mnuDirectionPicker.store.findWhere({ type: this.GradLinearDirectionType }); this.mnuDirectionPicker.selectRecord(record, true); if (record) { this.btnDirection.setIconCls("item-gradient " + record.get("iconcls")); } else { this.btnDirection.setIconCls(""); } } else { if (this.GradFillType == c_oAscFillGradType.GRAD_PATH) { this.mnuDirectionPicker.store.reset(this._viewDataRadial); this.mnuDirectionPicker.cmpEl.width(60); this.mnuDirectionPicker.restoreHeight = 58; this.mnuDirectionPicker.selectByIndex(this.GradRadialDirectionIdx, true); if (this.GradRadialDirectionIdx >= 0) { this.btnDirection.setIconCls("item-gradient " + this._viewDataRadial[this.GradRadialDirectionIdx].iconcls); } else { this.btnDirection.setIconCls(""); } } } if (this.api && !this._noApply) { var props = new CAscSlideProps(); var fill = new CAscFill(); fill.put_type(c_oAscFill.FILL_TYPE_GRAD); fill.put_fill(new CAscFillGrad()); fill.get_fill().put_grad_type(this.GradFillType); if (this.GradFillType == c_oAscFillGradType.GRAD_LINEAR) { fill.get_fill().put_linear_angle(this.GradLinearDirectionType * 60000); fill.get_fill().put_linear_scale(true); } fill.get_fill().put_positions([this.GradColor.values[0] * 1000, this.GradColor.values[1] * 1000]); fill.get_fill().put_colors([Common.Utils.ThemeColor.getRgbColor(this.GradColor.colors[0]), Common.Utils.ThemeColor.getRgbColor(this.GradColor.colors[1])]); props.put_background(fill); this.api.SetSlideProps(props); } this.fireEvent("editcomplete", this); }, onSelectGradient: function (btn, picker, itemView, record) { if (this._noApply) { return; } var rawData = {}, isPickerSelect = _.isFunction(record.toJSON); if (isPickerSelect) { if (record.get("selected")) { rawData = record.toJSON(); } else { return; } } else { rawData = record; } this.btnDirection.setIconCls("item-gradient " + rawData.iconcls); (this.GradFillType == c_oAscFillGradType.GRAD_LINEAR) ? this.GradLinearDirectionType = rawData.type : this.GradRadialDirectionIdx = 0; if (this.api) { if (this.GradFillType == c_oAscFillGradType.GRAD_LINEAR) { var props = new CAscSlideProps(); var fill = new CAscFill(); fill.put_type(c_oAscFill.FILL_TYPE_GRAD); fill.put_fill(new CAscFillGrad()); fill.get_fill().put_grad_type(this.GradFillType); fill.get_fill().put_linear_angle(rawData.type * 60000); fill.get_fill().put_linear_scale(true); if (this.OriginalFillType !== c_oAscFill.FILL_TYPE_GRAD) { fill.get_fill().put_positions([this.GradColor.values[0] * 1000, this.GradColor.values[1] * 1000]); fill.get_fill().put_colors([Common.Utils.ThemeColor.getRgbColor(this.GradColor.colors[0]), Common.Utils.ThemeColor.getRgbColor(this.GradColor.colors[1])]); } props.put_background(fill); this.api.SetSlideProps(props); } } this.fireEvent("editcomplete", this); }, onColorsGradientSelect: function (picker, color) { this.btnGradColor.setColor(color); this.GradColor.colors[this.GradColor.currentIdx] = color; this.sldrGradient.setColorValue(Common.Utils.String.format("#{0}", (typeof(color) == "object") ? color.color : color)); if (this.api && !this._noApply) { var props = new CAscSlideProps(); var fill = new CAscFill(); fill.put_type(c_oAscFill.FILL_TYPE_GRAD); fill.put_fill(new CAscFillGrad()); fill.get_fill().put_grad_type(this.GradFillType); fill.get_fill().put_colors([Common.Utils.ThemeColor.getRgbColor(this.GradColor.colors[0]), Common.Utils.ThemeColor.getRgbColor(this.GradColor.colors[1])]); if (this.OriginalFillType !== c_oAscFill.FILL_TYPE_GRAD) { if (this.GradFillType == c_oAscFillGradType.GRAD_LINEAR) { fill.get_fill().put_linear_angle(this.GradLinearDirectionType * 60000); fill.get_fill().put_linear_scale(true); } fill.get_fill().put_positions([this.GradColor.values[0] * 1000, this.GradColor.values[1] * 1000]); } props.put_background(fill); this.api.SetSlideProps(props); } this.fireEvent("editcomplete", this); }, onGradientChange: function (slider, newValue, oldValue) { this.GradColor.values = slider.getValues(); this._sliderChanged = true; if (this.api && !this._noApply) { if (this._sendUndoPoint) { this.api.setStartPointHistory(); this._sendUndoPoint = false; this.updateslider = setInterval(_.bind(this._gradientApplyFunc, this), 100); } } }, onGradientChangeComplete: function (slider, newValue, oldValue) { clearInterval(this.updateslider); this._sliderChanged = true; this.api.setEndPointHistory(); this._gradientApplyFunc(); this._sendUndoPoint = true; }, _gradientApplyFunc: function () { if (this._sliderChanged) { var props = new CAscSlideProps(); var fill = new CAscFill(); fill.put_type(c_oAscFill.FILL_TYPE_GRAD); fill.put_fill(new CAscFillGrad()); fill.get_fill().put_grad_type(this.GradFillType); fill.get_fill().put_positions([this.GradColor.values[0] * 1000, this.GradColor.values[1] * 1000]); if (this.OriginalFillType !== c_oAscFill.FILL_TYPE_GRAD) { if (this.GradFillType == c_oAscFillGradType.GRAD_LINEAR) { fill.get_fill().put_linear_angle(this.GradLinearDirectionType * 60000); fill.get_fill().put_linear_scale(true); } fill.get_fill().put_colors([Common.Utils.ThemeColor.getRgbColor(this.GradColor.colors[0]), Common.Utils.ThemeColor.getRgbColor(this.GradColor.colors[1])]); } props.put_background(fill); this.api.SetSlideProps(props); this._sliderChanged = false; } }, insertFromUrl: function () { var me = this; (new Common.Views.ImageFromUrlDialog({ handler: function (result, value) { if (result == "ok") { if (me.api) { var checkUrl = value.replace(/ /g, ""); if (!_.isEmpty(checkUrl)) { if (me.BlipFillType !== null) { var props = new CAscSlideProps(); var fill = new CAscFill(); fill.put_type(c_oAscFill.FILL_TYPE_BLIP); fill.put_fill(new CAscFillBlip()); fill.get_fill().put_type(me.BlipFillType); fill.get_fill().put_url(checkUrl); props.put_background(fill); me.api.SetSlideProps(props); } } } } me.fireEvent("editcomplete", me); } })).show(); }, createDelayedElements: function () { var global_hatch_menu_map = [0, 1, 3, 2, 4, 53, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 22, 23, 24, 25, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 49, 50, 51, 52]; this.patternViewData = []; for (var i = 0; i < 13; i++) { for (var j = 0; j < 4; j++) { var num = i * 4 + j; this.patternViewData[num] = { offsetx: j * 28, offsety: i * 28, type: global_hatch_menu_map[num] }; } } this.patternViewData.splice(this.patternViewData.length - 2, 2); for (var i = 0; i < this.patternViewData.length; i++) { this.patternViewData[i].id = Common.UI.getId(); } this.cmbPattern.menuPicker.store.add(this.patternViewData); if (this.cmbPattern.menuPicker.store.length > 0) { this.cmbPattern.fillComboView(this.cmbPattern.menuPicker.store.at(0), true); this.PatternFillType = this.patternViewData[0].type; } this.UpdateThemeColors(); }, onInitStandartTextures: function (texture) { var me = this; if (texture && texture.length > 0) { var texturearray = []; _.each(texture, function (item) { texturearray.push({ imageUrl: item.get_image(), name: me.textureNames[item.get_id()], type: item.get_id(), selected: false }); }); var mnuTexturePicker = new Common.UI.DataView({ el: $("#id-slide-menu-texture"), parentMenu: me.textureMenu, restoreHeight: 174, store: new Common.UI.DataViewStore(texturearray), itemTemplate: _.template('
') }); mnuTexturePicker.on("item:click", _.bind(this.onSelectTexture, this)); me.textureMenu.on("show:after", function (btn) { mnuTexturePicker.deselectAll(); }); } }, onSelectTexture: function (picker, view, record) { this._fromTextureCmb = true; this.cmbFillType.setValue(this._arrFillType[1].value); this._fromTextureCmb = false; if (this.api) { var props = new CAscSlideProps(); var fill = new CAscFill(); fill.put_type(c_oAscFill.FILL_TYPE_BLIP); fill.put_fill(new CAscFillBlip()); fill.get_fill().put_type(c_oAscFillBlipType.TILE); fill.get_fill().put_texture_id(record.get("type")); props.put_background(fill); this.api.SetSlideProps(props); } $(this.btnTexture.el).find(".form-control").prop("innerHTML", record.get("name")); this.fireEvent("editcomplete", this); }, fillEffectTypeCombo: function (type) { var arr = []; switch (type) { case c_oAscSlideTransitionTypes.Fade: arr.push(this._arrEffectType[0], this._arrEffectType[1]); break; case c_oAscSlideTransitionTypes.Push: arr = this._arrEffectType.slice(2, 6); break; case c_oAscSlideTransitionTypes.Wipe: arr = this._arrEffectType.slice(2, 10); break; case c_oAscSlideTransitionTypes.Split: arr = this._arrEffectType.slice(10, 14); break; case c_oAscSlideTransitionTypes.UnCover: arr = this._arrEffectType.slice(2, 10); break; case c_oAscSlideTransitionTypes.Cover: arr = this._arrEffectType.slice(2, 10); break; case c_oAscSlideTransitionTypes.Clock: arr = this._arrEffectType.slice(14, 17); break; case c_oAscSlideTransitionTypes.Zoom: arr = this._arrEffectType.slice(17); break; } if (arr.length > 0) { this.cmbEffectType.store.reset(arr); this.cmbEffectType.setValue(arr[0].value); this.EffectType = arr[0].value; } else { this.cmbEffectType.store.reset(); this.EffectType = undefined; } this.cmbEffectType.setDisabled(arr.length < 1 || this._stateDisabled.effects); }, onEffectNameSelect: function (combo, record) { var type = record.value; if (this.Effect !== type && !((this.Effect === c_oAscSlideTransitionTypes.Wipe || this.Effect === c_oAscSlideTransitionTypes.UnCover || this.Effect === c_oAscSlideTransitionTypes.Cover) && (type === c_oAscSlideTransitionTypes.Wipe || type === c_oAscSlideTransitionTypes.UnCover || type === c_oAscSlideTransitionTypes.Cover))) { this.fillEffectTypeCombo(type); } this.Effect = type; if (this.api && !this._noApply) { var props = new CAscSlideProps(); var timing = new CAscSlideTiming(); timing.put_TransitionType(type); timing.put_TransitionOption(this.EffectType); props.put_timing(timing); this.api.SetSlideProps(props); } this.fireEvent("editcomplete", this); }, onEffectTypeSelect: function (combo, record) { this.EffectType = record.value; if (this.api && !this._noApply) { var props = new CAscSlideProps(); var timing = new CAscSlideTiming(); timing.put_TransitionType(this.Effect); timing.put_TransitionOption(this.EffectType); props.put_timing(timing); this.api.SetSlideProps(props); } this.fireEvent("editcomplete", this); }, onDurationChange: function (field, newValue, oldValue, eOpts) { if (this.api && !this._noApply) { var props = new CAscSlideProps(); var timing = new CAscSlideTiming(); timing.put_TransitionDuration(field.getNumberValue() * 1000); props.put_timing(timing); this.api.SetSlideProps(props); } this.fireEvent("editcomplete", this); }, onDelayChange: function (field, newValue, oldValue, eOpts) { if (this.api && !this._noApply) { var props = new CAscSlideProps(); var timing = new CAscSlideTiming(); timing.put_SlideAdvanceDuration(field.getNumberValue() * 1000); props.put_timing(timing); this.api.SetSlideProps(props); } this.fireEvent("editcomplete", this); }, onStartOnClickChange: function (field, newValue, oldValue, eOpts) { if (this.api && !this._noApply) { var props = new CAscSlideProps(); var timing = new CAscSlideTiming(); timing.put_SlideAdvanceOnMouseClick(field.getValue() == "checked"); props.put_timing(timing); this.api.SetSlideProps(props); } this.fireEvent("editcomplete", this); }, onCheckDelayChange: function (field, newValue, oldValue, eOpts) { this.numDelay.setDisabled(field.getValue() !== "checked"); if (this.api && !this._noApply) { var props = new CAscSlideProps(); var timing = new CAscSlideTiming(); timing.put_SlideAdvanceAfter(field.getValue() == "checked"); props.put_timing(timing); this.api.SetSlideProps(props); } this.fireEvent("editcomplete", this); }, UpdateThemeColors: function () { this.colorsBack.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors()); this.colorsFG.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors()); this.colorsBG.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors()); this.colorsGrad.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors()); }, ShowHideElem: function (value) { this.FillColorContainer.toggleClass("settings-hidden", value !== c_oAscFill.FILL_TYPE_SOLID); this.FillImageContainer.toggleClass("settings-hidden", value !== c_oAscFill.FILL_TYPE_BLIP); this.FillPatternContainer.toggleClass("settings-hidden", value !== c_oAscFill.FILL_TYPE_PATT); this.FillGradientContainer.toggleClass("settings-hidden", value !== c_oAscFill.FILL_TYPE_GRAD); }, ChangeSettings: function (props) { if (this._initSettings) { this.createDelayedElements(); } this._initSettings = false; if (props) { this._originalProps = props; this._noApply = true; var rec = null; var fill = props.get_background(); var fill_type = fill.get_type(); var color = null; if (fill === null || fill_type === null || fill_type == c_oAscFill.FILL_TYPE_NOFILL) { this.OriginalFillType = c_oAscFill.FILL_TYPE_NOFILL; } else { if (fill_type == c_oAscFill.FILL_TYPE_SOLID) { fill = fill.get_fill(); color = fill.get_color(); if (color) { if (color.get_type() == c_oAscColor.COLOR_TYPE_SCHEME) { this.SlideColor = { Value: 1, Color: { color: Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b()), effectValue: color.get_value() } }; } else { this.SlideColor = { Value: 1, Color: Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b()) }; } } else { this.SlideColor = { Value: 0, Color: "transparent" }; } this.OriginalFillType = c_oAscFill.FILL_TYPE_SOLID; this.FGColor = (this.SlideColor.Color !== "transparent") ? { Value: 1, Color: Common.Utils.ThemeColor.colorValue2EffectId(this.SlideColor.Color) } : { Value: 1, Color: "000000" }; this.BGColor = { Value: 1, Color: "ffffff" }; } else { if (fill_type == c_oAscFill.FILL_TYPE_BLIP) { fill = fill.get_fill(); this.BlipFillType = fill.get_type(); if (this._state.BlipFillType !== this.BlipFillType) { if (this.BlipFillType == c_oAscFillBlipType.STRETCH || this.BlipFillType == c_oAscFillBlipType.TILE) { this.cmbFillType.setValue(this.BlipFillType); } else { this.cmbFillType.setValue(""); } this._state.BlipFillType = this.BlipFillType; } this.OriginalFillType = c_oAscFill.FILL_TYPE_BLIP; } else { if (fill_type == c_oAscFill.FILL_TYPE_PATT) { fill = fill.get_fill(); this.PatternFillType = fill.get_pattern_type(); if (this._state.PatternFillType !== this.PatternFillType) { this.cmbPattern.suspendEvents(); var rec = this.cmbPattern.menuPicker.store.findWhere({ type: this.PatternFillType }); this.cmbPattern.menuPicker.selectRecord(rec); this.cmbPattern.resumeEvents(); this._state.PatternFillType = this.PatternFillType; } color = fill.get_color_fg(); if (color) { if (color.get_type() == c_oAscColor.COLOR_TYPE_SCHEME) { this.FGColor = { Value: 1, Color: { color: Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b()), effectValue: color.get_value() } }; } else { this.FGColor = { Value: 1, Color: Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b()) }; } } else { this.FGColor = { Value: 1, Color: "000000" }; } color = fill.get_color_bg(); if (color) { if (color.get_type() == c_oAscColor.COLOR_TYPE_SCHEME) { this.BGColor = { Value: 1, Color: { color: Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b()), effectValue: color.get_value() } }; } else { this.BGColor = { Value: 1, Color: Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b()) }; } } else { this.BGColor = { Value: 1, Color: "ffffff" }; } this.OriginalFillType = c_oAscFill.FILL_TYPE_PATT; this.SlideColor = (this.FGColor.Color !== "transparent") ? { Value: 1, Color: Common.Utils.ThemeColor.colorValue2EffectId(this.FGColor.Color) } : { Value: 1, Color: "ffffff" }; } else { if (fill_type == c_oAscFill.FILL_TYPE_GRAD) { fill = fill.get_fill(); var gradfilltype = fill.get_grad_type(); if (this._state.GradFillType !== gradfilltype || this.GradFillType !== gradfilltype) { this.GradFillType = gradfilltype; rec = undefined; if (this.GradFillType == c_oAscFillGradType.GRAD_LINEAR || this.GradFillType == c_oAscFillGradType.GRAD_PATH) { this.cmbGradType.setValue(this.GradFillType); rec = this.cmbGradType.store.findWhere({ value: this.GradFillType }); this.onGradTypeSelect(this.cmbGradType, rec.attributes); } else { this.cmbGradType.setValue(""); this.btnDirection.setIconCls(""); } this._state.GradFillType = this.GradFillType; } if (this.GradFillType == c_oAscFillGradType.GRAD_LINEAR) { var value = Math.floor(fill.get_linear_angle() / 60000); if (Math.abs(this.GradLinearDirectionType - value) > 0.001) { this.GradLinearDirectionType = value; var record = this.mnuDirectionPicker.store.findWhere({ type: value }); this.mnuDirectionPicker.selectRecord(record, true); if (record) { this.btnDirection.setIconCls("item-gradient " + record.get("iconcls")); } else { this.btnDirection.setIconCls(""); } } } var colors = fill.get_colors(); if (colors && colors.length > 0) { color = colors[0]; if (color) { if (color.get_type() == c_oAscColor.COLOR_TYPE_SCHEME) { this.GradColor.colors[0] = { color: Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b()), effectValue: color.get_value() }; Common.Utils.ThemeColor.colorValue2EffectId(this.GradColor.colors[0]); } else { this.GradColor.colors[0] = Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b()); } } else { this.GradColor.colors[0] = "000000"; } color = colors[1]; if (color) { if (color.get_type() == c_oAscColor.COLOR_TYPE_SCHEME) { this.GradColor.colors[1] = { color: Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b()), effectValue: color.get_value() }; Common.Utils.ThemeColor.colorValue2EffectId(this.GradColor.colors[1]); } else { this.GradColor.colors[1] = Common.Utils.ThemeColor.getHexColor(color.get_r(), color.get_g(), color.get_b()); } } else { this.GradColor.colors[1] = "ffffff"; } } var positions = fill.get_positions(); if (positions && positions.length > 0) { var position = positions[0]; if (position !== null) { position = position / 1000; this.GradColor.values[0] = position; } position = positions[1]; if (position !== null) { position = position / 1000; this.GradColor.values[1] = position; } } this.sldrGradient.setColorValue(Common.Utils.String.format("#{0}", (typeof(this.GradColor.colors[0]) == "object") ? this.GradColor.colors[0].color : this.GradColor.colors[0]), 0); this.sldrGradient.setColorValue(Common.Utils.String.format("#{0}", (typeof(this.GradColor.colors[1]) == "object") ? this.GradColor.colors[1].color : this.GradColor.colors[1]), 1); this.sldrGradient.setValue(0, this.GradColor.values[0]); this.sldrGradient.setValue(1, this.GradColor.values[1]); this.OriginalFillType = c_oAscFill.FILL_TYPE_GRAD; } } } } } if (this._state.FillType !== this.OriginalFillType) { this.cmbFillSrc.setValue(this.OriginalFillType); this._state.FillType = this.OriginalFillType; this.ShowHideElem(this.OriginalFillType); } $(this.btnTexture.el).find(".form-control").prop("innerHTML", this.textSelectTexture); var type1 = typeof(this.SlideColor.Color), type2 = typeof(this._state.SlideColor); if ((type1 !== type2) || (type1 == "object" && (this.SlideColor.Color.effectValue !== this._state.SlideColor.effectValue || this._state.SlideColor.color.indexOf(this.SlideColor.Color.color) < 0)) || (type1 != "object" && this._state.SlideColor.indexOf(this.SlideColor.Color) < 0)) { this.btnBackColor.setColor(this.SlideColor.Color); if (typeof(this.SlideColor.Color) == "object") { var isselected = false; for (var i = 0; i < 10; i++) { if (Common.Utils.ThemeColor.ThemeValues[i] == this.SlideColor.Color.effectValue) { this.colorsBack.select(this.SlideColor.Color, true); isselected = true; break; } } if (!isselected) { this.colorsBack.clearSelection(); } } else { this.colorsBack.select(this.SlideColor.Color, true); } this._state.SlideColor = this.SlideColor.Color; } var timing = props.get_timing(); if (timing) { var value = timing.get_TransitionType(); var found = false; if (this._state.Effect !== value) { var item = this.cmbEffectName.store.findWhere({ value: value }); if (item) { found = true; this.cmbEffectName.setValue(item.get("value")); } else { this.cmbEffectName.setValue(""); } this.fillEffectTypeCombo((found) ? value : undefined); this.Effect = value; this._state.Effect = value; } value = timing.get_TransitionOption(); if (this._state.EffectType !== value || found) { found = false; item = this.cmbEffectType.store.findWhere({ value: value }); if (item) { found = true; this.cmbEffectType.setValue(item.get("value")); } else { this.cmbEffectType.setValue(""); } this._state.EffectType = value; } value = timing.get_TransitionDuration(); if (Math.abs(this._state.Duration - value) > 0.001 || (this._state.Duration === null || value === null) && (this._state.Duration !== value) || (this._state.Duration === undefined || value === undefined) && (this._state.Duration !== value)) { this.numDuration.setValue((value !== null && value !== undefined) ? value / 1000 : "", true); this._state.Duration = value; } value = timing.get_SlideAdvanceDuration(); if (Math.abs(this._state.Delay - value) > 0.001 || (this._state.Delay === null || value === null) && (this._state.Delay !== value) || (this._state.Delay === undefined || value === undefined) && (this._state.Delay !== value)) { this.numDelay.setValue((value !== null && value !== undefined) ? value / 1000 : "", true); this._state.Delay = value; } value = timing.get_SlideAdvanceOnMouseClick(); if (this._state.OnMouseClick !== value) { this.chStartOnClick.setValue((value !== null && value !== undefined) ? value : "indeterminate", true); this._state.OnMouseClick = value; } value = timing.get_SlideAdvanceAfter(); if (this._state.AdvanceAfter !== value) { this.chDelay.setValue((value !== null && value !== undefined) ? value : "indeterminate", true); this.numDelay.setDisabled(this.chDelay.getValue() !== "checked"); this._state.AdvanceAfter = value; } } type1 = typeof(this.FGColor.Color); type2 = typeof(this._state.FGColor); if ((type1 !== type2) || (type1 == "object" && (this.FGColor.Color.effectValue !== this._state.FGColor.effectValue || this._state.FGColor.color.indexOf(this.FGColor.Color.color) < 0)) || (type1 != "object" && this._state.FGColor.indexOf(this.FGColor.Color) < 0)) { this.btnFGColor.setColor(this.FGColor.Color); if (typeof(this.FGColor.Color) == "object") { var isselected = false; for (var i = 0; i < 10; i++) { if (Common.Utils.ThemeColor.ThemeValues[i] == this.FGColor.Color.effectValue) { this.colorsFG.select(this.FGColor.Color, true); isselected = true; break; } } if (!isselected) { this.colorsFG.clearSelection(); } } else { this.colorsFG.select(this.FGColor.Color, true); } this._state.FGColor = this.FGColor.Color; } type1 = typeof(this.BGColor.Color); type2 = typeof(this._state.BGColor); if ((type1 !== type2) || (type1 == "object" && (this.BGColor.Color.effectValue !== this._state.BGColor.effectValue || this._state.BGColor.color.indexOf(this.BGColor.Color.color) < 0)) || (type1 != "object" && this._state.BGColor.indexOf(this.BGColor.Color) < 0)) { this.btnBGColor.setColor(this.BGColor.Color); if (typeof(this.BGColor.Color) == "object") { var isselected = false; for (var i = 0; i < 10; i++) { if (Common.Utils.ThemeColor.ThemeValues[i] == this.BGColor.Color.effectValue) { this.colorsBG.select(this.BGColor.Color, true); isselected = true; break; } } if (!isselected) { this.colorsBG.clearSelection(); } } else { this.colorsBG.select(this.BGColor.Color, true); } this._state.BGColor = this.BGColor.Color; } color = this.GradColor.colors[this.GradColor.currentIdx]; type1 = typeof(color); type2 = typeof(this._state.GradColor); if ((type1 !== type2) || (type1 == "object" && (color.effectValue !== this._state.GradColor.effectValue || this._state.GradColor.color.indexOf(color.color) < 0)) || (type1 != "object" && this._state.GradColor.indexOf(color) < 0)) { this.btnGradColor.setColor(color); if (typeof(color) == "object") { var isselected = false; for (var i = 0; i < 10; i++) { if (Common.Utils.ThemeColor.ThemeValues[i] == color.effectValue) { this.colorsGrad.select(color, true); isselected = true; break; } } if (!isselected) { this.colorsGrad.clearSelection(); } } else { this.colorsGrad.select(color, true); } this._state.GradColor = color; } this._noApply = false; } }, SetSlideDisabled: function (background, effects, timing) { if (background !== this._stateDisabled.background) { this.cmbFillSrc.setDisabled(background); for (var i = 0; i < this.FillItems.length; i++) { this.FillItems[i].setDisabled(background); } this._stateDisabled.background = background; } if (effects !== this._stateDisabled.effects) { this.cmbEffectName.setDisabled(effects); this.cmbEffectType.setDisabled(effects); this.numDuration.setDisabled(effects); this.btnPreview.setDisabled(effects); this._stateDisabled.effects = effects; } if (timing !== this._stateDisabled.timing) { this.chStartOnClick.setDisabled(timing); this.chDelay.setDisabled(timing); this.numDelay.setDisabled(timing || this.chDelay.getValue() !== "checked"); this.btnApplyToAll.setDisabled(timing); this._stateDisabled.timing = timing; } }, strColor: "Color", strFill: "Fill", textColor: "Color Fill", textImageTexture: "Picture or Texture", textTexture: "From Texture", textFromUrl: "From URL", textFromFile: "From File", textStretch: "Stretch", textTile: "Tile", txtCanvas: "Canvas", txtCarton: "Carton", txtDarkFabric: "Dark Fabric", txtGrain: "Grain", txtGranite: "Granite", txtGreyPaper: "Grey Paper", txtKnit: "Knit", txtLeather: "Leather", txtBrownPaper: "Brown Paper", txtPapyrus: "Papyrus", txtWood: "Wood", textNewColor: "Add New Custom Color", textThemeColors: "Theme Colors", textStandartColors: "Standart Colors", textAdvanced: "Show advanced settings", textNoFill: "No Fill", textSelectTexture: "Select", textNone: "None", textFade: "Fade", textPush: "Push", textWipe: "Wipe", textSplit: "Split", textUnCover: "UnCover", textCover: "Cover", textClock: "Clock", textZoom: "Zoom", textSmoothly: "Smoothly", textBlack: "Through Black", textLeft: "Left", textTop: "Top", textRight: "Right", textBottom: "Bottom", textTopLeft: "Top-Left", textTopRight: "Top-Right", textBottomLeft: "Bottom-Left", textBottomRight: "Bottom-Right", textVerticalIn: "Vertical In", textVerticalOut: "Vertical Out", textHorizontalIn: "Horizontal In", textHorizontalOut: "Horizontal Out", textClockwise: "Clockwise", textCounterclockwise: "Counterclockwise", textWedge: "Wedge", textZoomIn: "Zoom In", textZoomOut: "Zoom Out", textZoomRotate: "Zoom and Rotate", strStartOnClick: "Start On Click", strDelay: "Delay", textApplyAll: "Apply to All Slides", textPreview: "Preview", strEffect: "Effect", strDuration: "Duration", textGradientFill: "Gradient Fill", textPatternFill: "Pattern", strBackground: "Background color", strForeground: "Foreground color", strPattern: "Pattern", textEmptyPattern: "No Pattern", textLinear: "Linear", textRadial: "Radial", textDirection: "Direction", textStyle: "Style", textGradient: "Gradient" }, PE.Views.SlideSettings || {})); });