/*
* (c) Copyright Ascensio System SIA 2010-2014
*
* 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
*
*/
Ext.define("PE.view.SlideSettings", {
extend: "Common.view.AbstractSettingsPanel",
alias: "widget.peslidesettings",
height: 347,
requires: ["Ext.button.Button", "Ext.form.Label", "Ext.form.field.ComboBox", "Ext.container.Container", "Ext.toolbar.Spacer", "Ext.Array", "Ext.menu.Menu", "Ext.menu.Manager", "Ext.XTemplate", "Ext.Img", "Ext.slider.Single", "Common.component.DataViewPicker", "Common.component.MetricSpinner", "Common.view.ImageFromUrlDialog", "Common.component.ThemeColorPalette", "Common.component.IndeterminateCheckBox", "Common.component.ComboDataView", "Common.component.MultiSliderGradient"],
constructor: function (config) {
this.callParent(arguments);
this.initConfig(config);
return this;
},
initComponent: function () {
this.title = this.txtTitle;
this._initSettings = true;
var me = this;
this._originalProps = null;
this._noApply = true;
this._sendUndoPoint = true;
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.GradLinearDirectionIdx = 3;
this.GradRadialDirectionIdx = 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.ThemeValues = [6, 15, 7, 16, 0, 1, 2, 3, 4, 5];
this._btnBackColor = Ext.create("Ext.button.Button", {
id: "slide-button-back-color",
arrowCls: "",
width: 45,
height: 22,
color: "ffffff",
menu: {
showSeparator: false,
items: [this.colorsBack = Ext.create("Common.component.ThemeColorPalette", {
value: "ffffff",
width: 165,
height: 214,
dynamiccolors: true,
dyncolorscount: 10,
colors: [this.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
},
"-", "--", "-", this.textStandartColors, "-", "transparent", "5301B3", "980ABD", "B2275F", "F83D26", "F86A1D", "F7AC16", "F7CA12", "FAFF44", "D6EF39", "-", "--"],
listeners: {
select: Ext.bind(function (picker, color, eOpts) {
Ext.menu.Manager.hideAll();
var clr, border;
if (color == "transparent") {
this._btnBackColor.color = "transparent";
clr = "transparent";
border = "1px solid #BEBEBE";
} else {
this._btnBackColor.color = color;
clr = Ext.String.format("#{0}", (typeof(color) == "object") ? color.color : color);
border = "none";
}
if (this._btnBackColor.btnEl) {
Ext.DomHelper.applyStyles(this._btnBackColor.btnEl, {
"background-color": clr,
"border": border
});
}
this.SlideColor = {
Value: 1,
Color: this._btnBackColor.color
};
if (this.api) {
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(this.getRgbColor(this.SlideColor.Color));
}
props.put_background(fill);
this.api.SetSlideProps(props);
}
this.fireEvent("editcomplete", this);
},
this)
}
}), {
cls: "menu-item-noicon menu-item-color-palette-theme",
text: this.textNewColor,
listeners: {
click: function (item, event) {
me.colorsBack.addNewColor();
}
}
}]
},
listeners: {
render: function (c) {
var border, clr;
if (c.color == "transparent") {
border = "1px solid #BEBEBE";
clr = c.color;
} else {
border = "none";
clr = Ext.String.format("#{0}", (typeof(c.color) == "object") ? c.color.color : c.color);
}
Ext.DomHelper.applyStyles(c.btnEl, {
"background-color": clr,
"border": border
});
}
},
setColor: function (newcolor) {
var border, clr;
this.color = newcolor;
if (newcolor == "transparent") {
border = "1px solid #BEBEBE";
clr = newcolor;
} else {
border = "none";
clr = Ext.String.format("#{0}", (typeof(newcolor) == "object") ? newcolor.color : newcolor);
}
if (this.btnEl !== undefined) {
Ext.DomHelper.applyStyles(this.btnEl, {
"background-color": clr,
"border": border
});
}
}
});
this.controls.push(this.colorsBack);
this._arrFillSrc = [this.textColor, this.textGradientFill, this.textImageTexture, this.textPatternFill, this.textNoFill];
this.cmbFillSrc = Ext.create("Ext.form.field.ComboBox", {
id: "slide-combo-fill-src",
width: 190,
editable: false,
store: this._arrFillSrc,
queryMode: "local",
triggerAction: "all",
listeners: {
select: Ext.bind(function (combo, records, eOpts) {
this._ShowHideElem([records[0].index == 0, records[0].index == 2, records[0].index == 3, records[0].index == 1], [this._FillColorContainer, this._FillImageContainer, this._PatternContainer, this._GradientContainer], [this._FillColorContainerHeight, this._FillImageContainerHeight, this._PatternContainerHeight, this._GradientContainerHeight]);
switch (records[0].index) {
case 0:
this._state.FillType = c_oAscFill.FILL_TYPE_SOLID;
if (!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(this.getRgbColor(this.SlideColor.Color));
}
props.put_background(fill);
this.api.SetSlideProps(props);
}
break;
case 1:
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(viewDataLinear[this.GradLinearDirectionIdx].data.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([this.getRgbColor(this.GradColor.colors[0]), this.getRgbColor(this.GradColor.colors[1])]);
}
props.put_background(fill);
this.api.SetSlideProps(props);
}
break;
case 2:
this._state.FillType = c_oAscFill.FILL_TYPE_BLIP;
break;
case 3:
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);
fill.get_fill().put_color_fg(this.getRgbColor(this.FGColor.Color));
fill.get_fill().put_color_bg(this.getRgbColor(this.BGColor.Color));
props.put_background(fill);
this.api.SetSlideProps(props);
}
break;
case 4:
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);
},
this)
}
});
this.cmbFillSrc.setValue(this._arrFillSrc[0]);
this._FillColorContainer = Ext.create("Ext.container.Container", {
layout: "vbox",
layoutConfig: {
align: "stretch"
},
height: 25,
width: 190,
items: [this._btnBackColor]
});
this._FillColorContainerHeight = this._FillColorContainer.height;
this._btnInsertFromFile = Ext.create("Ext.Button", {
id: "slide-button-fill-from-file",
text: this.textFromFile,
width: 90,
listeners: {
click: function (btn) {
if (this.api) {
this.api.ChangeSlideImageFromFile();
}
this.fireEvent("editcomplete", this);
},
scope: this
}
});
this._btnInsertFromUrl = Ext.create("Ext.Button", {
id: "slide-button-fill-from-url",
text: this.textFromUrl,
width: 90,
listeners: {
click: function (btn) {
var w = Ext.create("Common.view.ImageFromUrlDialog");
w.addListener("onmodalresult", Ext.bind(this._onOpenImageFromURL, [this, w]), false);
w.addListener("close", Ext.bind(function (cnt, eOpts) {
this.fireEvent("editcomplete", this);
},
this));
w.show();
},
scope: this
}
});
this._arrFillType = [this.textStretch, this.textTile];
this.cmbFillType = Ext.create("Ext.form.field.ComboBox", {
id: "slide-combo-fill-type",
width: 90,
editable: false,
store: this._arrFillType,
queryMode: "local",
triggerAction: "all",
listeners: {
select: Ext.bind(function (combo, records, eOpts) {
if (records[0].index == 0) {
this.BlipFillType = c_oAscFillBlipType.STRETCH;
} else {
if (records[0].index == 1) {
this.BlipFillType = c_oAscFillBlipType.TILE;
}
}
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);
},
this)
}
});
this.cmbFillType.setValue(this._arrFillType[0]);
this.controls.push(this.cmbFillType);
this._btnTexture = Ext.create("Ext.button.Button", {
text: this.textSelectTexture,
width: 90,
cls: "btn-combo-style",
pressedCls: "",
textAlign: "left",
menu: this.textureMenu = Ext.create("Common.component.MenuDataViewPicker", {
width: 242,
height: 182,
cls: "texture-view",
viewData: [],
contentWidth: 222,
listeners: {
select: Ext.bind(function (picker, record) {
this._fromTextureCmb = true;
this.cmbFillType.setValue(this._arrFillType[1]);
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.data.data.type);
props.put_background(fill);
this.api.SetSlideProps(props);
}
this._btnTexture.setText(record.data.name);
this.fireEvent("editcomplete", this);
},
this),
hide: function () {
me.fireEvent("editcomplete", me);
},
show: function (cmp) {
cmp.picker.selectByIndex(-1, false);
}
}
})
});
this.controls.push(this._btnTexture);
this.textureImage = Ext.create("Ext.container.Container", {
id: "slide-texture-img",
width: 50,
height: 50
});
this._FillImageContainer = Ext.create("Ext.container.Container", {
layout: "vbox",
layoutConfig: {
align: "stretch"
},
height: 120,
width: 190,
hidden: true,
items: [{
xtype: "container",
layout: "hbox",
width: 190,
items: [this._btnInsertFromFile, {
xtype: "tbspacer",
flex: 1
},
this._btnInsertFromUrl]
},
{
xtype: "tbspacer",
height: 11
},
{
xtype: "container",
layout: "hbox",
width: 190,
height: 80,
items: [{
xtype: "container",
layout: "vbox",
width: 90,
height: 80,
items: [this.cmbFillType, {
xtype: "tbspacer",
height: 15
},
{
xtype: "label",
text: this.textTexture
},
{
xtype: "tbspacer",
height: 2
},
this._btnTexture]
},
{
xtype: "tbspacer",
flex: 1
},
{
xtype: "container",
cls: "texture-img-container",
layout: "vbox",
width: 90,
height: 80,
items: [this.textureImage]
}]
}]
});
this._FillImageContainerHeight = this._FillImageContainer.height;
this._FillPanel = Ext.create("Ext.container.Container", {
layout: "vbox",
layoutConfig: {
align: "stretch"
},
height: 45,
width: 190,
items: [{
xtype: "label",
text: this.strFill,
style: "margin-top: 1px;font-weight: bold;"
},
{
xtype: "tbspacer",
height: 7
},
this.cmbFillSrc]
});
var patternDataTpl = Ext.create("Ext.XTemplate", '', '', '
', "
', '
', "