Merge pull request #36 from ONLYOFFICE/feature/refactor
Feature/refactor
This commit is contained in:
Julia Radzhabova
GitHub
commit
dedc78ba56
|
|
@ -494,8 +494,9 @@ define([
|
||||||
},
|
},
|
||||||
|
|
||||||
setMenu: function (m) {
|
setMenu: function (m) {
|
||||||
if (this.rendered && m && _.isObject(m) && _.isFunction(m.render)){
|
if (m && _.isObject(m) && _.isFunction(m.render)){
|
||||||
this.menu = m;
|
this.menu = m;
|
||||||
|
if (this.rendered)
|
||||||
this.menu.render(this.cmpEl);
|
this.menu.render(this.cmpEl);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -653,18 +653,19 @@ define([
|
||||||
if (window.styles_loaded) {
|
if (window.styles_loaded) {
|
||||||
clearInterval(timer_sl);
|
clearInterval(timer_sl);
|
||||||
|
|
||||||
toolbarController.getView('Toolbar').createDelayedElements();
|
toolbarController.createDelayedElements();
|
||||||
|
|
||||||
documentHolderController.getView('DocumentHolder').createDelayedElements();
|
documentHolderController.getView('DocumentHolder').createDelayedElements();
|
||||||
|
|
||||||
rightmenuController.createDelayedElements();
|
|
||||||
|
|
||||||
me.api.asc_registerCallback('asc_onFocusObject', _.bind(me.onFocusObject, me));
|
|
||||||
me.api.asc_registerCallback('asc_onUpdateLayout', _.bind(me.fillLayoutsStore, me)); // slide layouts loading
|
me.api.asc_registerCallback('asc_onUpdateLayout', _.bind(me.fillLayoutsStore, me)); // slide layouts loading
|
||||||
me.updateThemeColors();
|
me.updateThemeColors();
|
||||||
var shapes = me.api.asc_getPropertyEditorShapes();
|
var shapes = me.api.asc_getPropertyEditorShapes();
|
||||||
if (shapes)
|
if (shapes)
|
||||||
me.fillAutoShapes(shapes[0], shapes[1]);
|
me.fillAutoShapes(shapes[0], shapes[1]);
|
||||||
|
rightmenuController.createDelayedElements();
|
||||||
|
|
||||||
|
me.api.asc_registerCallback('asc_onFocusObject', _.bind(me.onFocusObject, me));
|
||||||
|
|
||||||
me.fillTextArt(me.api.asc_getTextArtPreviews());
|
me.fillTextArt(me.api.asc_getTextArtPreviews());
|
||||||
toolbarController.activateControls();
|
toolbarController.activateControls();
|
||||||
if (me.needToUpdateVersion)
|
if (me.needToUpdateVersion)
|
||||||
|
|
|
||||||
|
|
@ -246,6 +246,7 @@ define([
|
||||||
if (this.editMode && this.api) {
|
if (this.editMode && this.api) {
|
||||||
this.api.asc_registerCallback('asc_doubleClickOnObject', _.bind(this.onDoubleClickOnObject, this));
|
this.api.asc_registerCallback('asc_doubleClickOnObject', _.bind(this.onDoubleClickOnObject, this));
|
||||||
|
|
||||||
|
this.rightmenu.shapeSettings.createDelayedElements();
|
||||||
var selectedElements = this.api.getSelectedElements();
|
var selectedElements = this.api.getSelectedElements();
|
||||||
if (selectedElements.length>0) {
|
if (selectedElements.length>0) {
|
||||||
var open = Common.localStorage.getItem("pe-hide-right-settings");
|
var open = Common.localStorage.getItem("pe-hide-right-settings");
|
||||||
|
|
|
||||||
|
|
@ -171,7 +171,7 @@ define([
|
||||||
// Create toolbar view
|
// Create toolbar view
|
||||||
this.toolbar = this.createView('Toolbar');
|
this.toolbar = this.createView('Toolbar');
|
||||||
|
|
||||||
this.toolbar.on('render:after', _.bind(this.onToolbarAfterRender, this));
|
// this.toolbar.on('render:after', _.bind(this.onToolbarAfterRender, this));
|
||||||
},
|
},
|
||||||
|
|
||||||
onToolbarAfterRender: function(toolbar) {
|
onToolbarAfterRender: function(toolbar) {
|
||||||
|
|
@ -699,6 +699,7 @@ define([
|
||||||
$('.menu-zoom .zoom', this.toolbar.el).html(percent + '%');
|
$('.menu-zoom .zoom', this.toolbar.el).html(percent + '%');
|
||||||
this._state.zoom_percent = percent;
|
this._state.zoom_percent = percent;
|
||||||
}
|
}
|
||||||
|
this.toolbar.mnuZoom.options.value = percent;
|
||||||
},
|
},
|
||||||
|
|
||||||
onApiInitEditorStyles: function(themes) {
|
onApiInitEditorStyles: function(themes) {
|
||||||
|
|
@ -1829,6 +1830,11 @@ define([
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
createDelayedElements: function() {
|
||||||
|
this.toolbar.createDelayedElements();
|
||||||
|
this.onToolbarAfterRender(this.toolbar);
|
||||||
|
},
|
||||||
|
|
||||||
textEmptyImgUrl : 'You need to specify image URL.',
|
textEmptyImgUrl : 'You need to specify image URL.',
|
||||||
textWarning : 'Warning',
|
textWarning : 'Warning',
|
||||||
textFontSizeErr : 'The entered value must be more than 0',
|
textFontSizeErr : 'The entered value must be more than 0',
|
||||||
|
|
|
||||||
|
|
@ -62,7 +62,6 @@ define([
|
||||||
},
|
},
|
||||||
|
|
||||||
initialize: function () {
|
initialize: function () {
|
||||||
var me = this;
|
|
||||||
this._initSettings = true;
|
this._initSettings = true;
|
||||||
|
|
||||||
this._state = {
|
this._state = {
|
||||||
|
|
@ -83,148 +82,6 @@ define([
|
||||||
this._originalProps = null;
|
this._originalProps = null;
|
||||||
|
|
||||||
this.render();
|
this.render();
|
||||||
|
|
||||||
this.btnChartType = new Common.UI.Button({
|
|
||||||
cls : 'btn-large-dataview',
|
|
||||||
iconCls : 'item-chartlist bar-normal',
|
|
||||||
menu : new Common.UI.Menu({
|
|
||||||
style: 'width: 560px;',
|
|
||||||
items: [
|
|
||||||
{ template: _.template('<div id="id-chart-menu-type" class="menu-insertchart" style="margin: 5px 5px 5px 10px;"></div>') }
|
|
||||||
]
|
|
||||||
})
|
|
||||||
});
|
|
||||||
this.btnChartType.on('render:after', function(btn) {
|
|
||||||
me.mnuChartTypePicker = new Common.UI.DataView({
|
|
||||||
el: $('#id-chart-menu-type'),
|
|
||||||
parentMenu: btn.menu,
|
|
||||||
restoreHeight: 411,
|
|
||||||
groups: new Common.UI.DataViewGroupStore([
|
|
||||||
{ id: 'menu-chart-group-bar', caption: me.textColumn },
|
|
||||||
{ id: 'menu-chart-group-line', caption: me.textLine },
|
|
||||||
{ id: 'menu-chart-group-pie', caption: me.textPie },
|
|
||||||
{ id: 'menu-chart-group-hbar', caption: me.textBar },
|
|
||||||
{ id: 'menu-chart-group-area', caption: me.textArea },
|
|
||||||
{ id: 'menu-chart-group-scatter', caption: me.textPoint },
|
|
||||||
{ id: 'menu-chart-group-stock', caption: me.textStock }
|
|
||||||
]),
|
|
||||||
store: new Common.UI.DataViewStore([
|
|
||||||
{ group: 'menu-chart-group-bar', type: Asc.c_oAscChartTypeSettings.barNormal, iconCls: 'column-normal', selected: true},
|
|
||||||
{ group: 'menu-chart-group-bar', type: Asc.c_oAscChartTypeSettings.barStacked, iconCls: 'column-stack'},
|
|
||||||
{ group: 'menu-chart-group-bar', type: Asc.c_oAscChartTypeSettings.barStackedPer, iconCls: 'column-pstack'},
|
|
||||||
{ group: 'menu-chart-group-bar', type: Asc.c_oAscChartTypeSettings.barNormal3d, iconCls: 'column-3d-normal'},
|
|
||||||
{ group: 'menu-chart-group-bar', type: Asc.c_oAscChartTypeSettings.barStacked3d, iconCls: 'column-3d-stack'},
|
|
||||||
{ group: 'menu-chart-group-bar', type: Asc.c_oAscChartTypeSettings.barStackedPer3d, iconCls: 'column-3d-pstack'},
|
|
||||||
{ group: 'menu-chart-group-bar', type: Asc.c_oAscChartTypeSettings.barNormal3dPerspective, iconCls: 'column-3d-normal-per'},
|
|
||||||
{ group: 'menu-chart-group-line', type: Asc.c_oAscChartTypeSettings.lineNormal, iconCls: 'line-normal'},
|
|
||||||
{ group: 'menu-chart-group-line', type: Asc.c_oAscChartTypeSettings.lineStacked, iconCls: 'line-stack'},
|
|
||||||
{ group: 'menu-chart-group-line', type: Asc.c_oAscChartTypeSettings.lineStackedPer, iconCls: 'line-pstack'},
|
|
||||||
{ group: 'menu-chart-group-line', type: Asc.c_oAscChartTypeSettings.line3d, iconCls: 'line-3d'},
|
|
||||||
{ group: 'menu-chart-group-pie', type: Asc.c_oAscChartTypeSettings.pie, iconCls: 'pie-normal'},
|
|
||||||
{ group: 'menu-chart-group-pie', type: Asc.c_oAscChartTypeSettings.doughnut, iconCls: 'pie-doughnut'},
|
|
||||||
{ group: 'menu-chart-group-pie', type: Asc.c_oAscChartTypeSettings.pie3d, iconCls: 'pie-3d-normal'},
|
|
||||||
{ group: 'menu-chart-group-hbar', type: Asc.c_oAscChartTypeSettings.hBarNormal, iconCls: 'bar-normal'},
|
|
||||||
{ group: 'menu-chart-group-hbar', type: Asc.c_oAscChartTypeSettings.hBarStacked, iconCls: 'bar-stack'},
|
|
||||||
{ group: 'menu-chart-group-hbar', type: Asc.c_oAscChartTypeSettings.hBarStackedPer, iconCls: 'bar-pstack'},
|
|
||||||
{ group: 'menu-chart-group-hbar', type: Asc.c_oAscChartTypeSettings.hBarNormal3d, iconCls: 'bar-3d-normal'},
|
|
||||||
{ group: 'menu-chart-group-hbar', type: Asc.c_oAscChartTypeSettings.hBarStacked3d, iconCls: 'bar-3d-stack'},
|
|
||||||
{ group: 'menu-chart-group-hbar', type: Asc.c_oAscChartTypeSettings.hBarStackedPer3d, iconCls: 'bar-3d-pstack'},
|
|
||||||
{ group: 'menu-chart-group-area', type: Asc.c_oAscChartTypeSettings.areaNormal, iconCls: 'area-normal'},
|
|
||||||
{ group: 'menu-chart-group-area', type: Asc.c_oAscChartTypeSettings.areaStacked, iconCls: 'area-stack'},
|
|
||||||
{ group: 'menu-chart-group-area', type: Asc.c_oAscChartTypeSettings.areaStackedPer, iconCls: 'area-pstack'},
|
|
||||||
{ group: 'menu-chart-group-scatter', type: Asc.c_oAscChartTypeSettings.scatter, iconCls: 'point-normal'},
|
|
||||||
{ group: 'menu-chart-group-stock', type: Asc.c_oAscChartTypeSettings.stock, iconCls: 'stock-normal'}
|
|
||||||
]),
|
|
||||||
itemTemplate: _.template('<div id="<%= id %>" class="item-chartlist <%= iconCls %>"></div>')
|
|
||||||
});
|
|
||||||
});
|
|
||||||
this.btnChartType.render($('#chart-button-type'));
|
|
||||||
this.mnuChartTypePicker.on('item:click', _.bind(this.onSelectType, this, this.btnChartType));
|
|
||||||
this.lockedControls.push(this.btnChartType);
|
|
||||||
|
|
||||||
this.btnChartStyle = new Common.UI.Button({
|
|
||||||
cls : 'btn-large-dataview',
|
|
||||||
iconCls : 'item-wrap',
|
|
||||||
menu : new Common.UI.Menu({
|
|
||||||
menuAlign: 'tr-br',
|
|
||||||
items: [
|
|
||||||
{ template: _.template('<div id="id-chart-menu-style" style="width: 245px; margin: 0 5px;"></div>') }
|
|
||||||
]
|
|
||||||
})
|
|
||||||
});
|
|
||||||
this.btnChartStyle.on('render:after', function(btn) {
|
|
||||||
me.mnuChartStylePicker = new Common.UI.DataView({
|
|
||||||
el: $('#id-chart-menu-style'),
|
|
||||||
style: 'max-height: 411px;',
|
|
||||||
parentMenu: btn.menu,
|
|
||||||
store: new Common.UI.DataViewStore(),
|
|
||||||
itemTemplate: _.template('<div id="<%= id %>" class="item-wrap" style="background-image: url(<%= imageUrl %>); background-position: 0 0;"></div>')
|
|
||||||
});
|
|
||||||
|
|
||||||
if (me.btnChartStyle.menu) {
|
|
||||||
me.btnChartStyle.menu.on('show:after', function () {
|
|
||||||
me.mnuChartStylePicker.scroller.update({alwaysVisibleY: true});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
this.btnChartStyle.render($('#chart-button-style'));
|
|
||||||
this.mnuChartStylePicker.on('item:click', _.bind(this.onSelectStyle, this, this.btnChartStyle));
|
|
||||||
this.lockedControls.push(this.btnChartStyle);
|
|
||||||
|
|
||||||
this.btnEditData = new Common.UI.Button({
|
|
||||||
el: $('#chart-button-edit-data')
|
|
||||||
});
|
|
||||||
this.btnEditData.on('click', _.bind(this.setEditData, this));
|
|
||||||
this.lockedControls.push(this.btnEditData);
|
|
||||||
|
|
||||||
this.spnWidth = new Common.UI.MetricSpinner({
|
|
||||||
el: $('#chart-spin-width'),
|
|
||||||
step: .1,
|
|
||||||
width: 78,
|
|
||||||
defaultUnit : "cm",
|
|
||||||
value: '3 cm',
|
|
||||||
maxValue: 55.88,
|
|
||||||
minValue: 0
|
|
||||||
});
|
|
||||||
this.spinners.push(this.spnWidth);
|
|
||||||
this.lockedControls.push(this.spnWidth);
|
|
||||||
|
|
||||||
this.spnHeight = new Common.UI.MetricSpinner({
|
|
||||||
el: $('#chart-spin-height'),
|
|
||||||
step: .1,
|
|
||||||
width: 78,
|
|
||||||
defaultUnit : "cm",
|
|
||||||
value: '3 cm',
|
|
||||||
maxValue: 55.88,
|
|
||||||
minValue: 0
|
|
||||||
});
|
|
||||||
this.spinners.push(this.spnHeight);
|
|
||||||
this.lockedControls.push(this.spnHeight);
|
|
||||||
|
|
||||||
this.spnWidth.on('change', _.bind(this.onWidthChange, this));
|
|
||||||
this.spnHeight.on('change', _.bind(this.onHeightChange, this));
|
|
||||||
|
|
||||||
this.btnRatio = new Common.UI.Button({
|
|
||||||
cls: 'btn-toolbar',
|
|
||||||
iconCls: 'advanced-btn-ratio',
|
|
||||||
style: 'margin-bottom: 1px;',
|
|
||||||
enableToggle: true,
|
|
||||||
hint: this.textKeepRatio
|
|
||||||
});
|
|
||||||
this.btnRatio.render($('#chart-button-ratio')) ;
|
|
||||||
this.lockedControls.push(this.btnRatio);
|
|
||||||
|
|
||||||
this.btnRatio.on('click', _.bind(function(btn, e) {
|
|
||||||
if (btn.pressed && this.spnHeight.getNumberValue()>0) {
|
|
||||||
this._nRatio = this.spnWidth.getNumberValue()/this.spnHeight.getNumberValue();
|
|
||||||
}
|
|
||||||
if (this.api) {
|
|
||||||
var props = new Asc.CAscChartProp();
|
|
||||||
props.asc_putLockAspect(btn.pressed);
|
|
||||||
this.api.ChartApply(props);
|
|
||||||
}
|
|
||||||
this.fireEvent('editcomplete', this);
|
|
||||||
}, this));
|
|
||||||
},
|
},
|
||||||
|
|
||||||
render: function () {
|
render: function () {
|
||||||
|
|
@ -243,10 +100,8 @@ define([
|
||||||
},
|
},
|
||||||
|
|
||||||
ChangeSettings: function(props) {
|
ChangeSettings: function(props) {
|
||||||
if (this._initSettings) {
|
if (this._initSettings)
|
||||||
this.createDelayedElements();
|
this.createDelayedElements();
|
||||||
this._initSettings = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.disableControls(this._locked);
|
this.disableControls(this._locked);
|
||||||
|
|
||||||
|
|
@ -333,8 +188,127 @@ define([
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
createDelayedControls: function() {
|
||||||
|
var me = this;
|
||||||
|
this.btnChartType = new Common.UI.Button({
|
||||||
|
cls : 'btn-large-dataview',
|
||||||
|
iconCls : 'item-chartlist bar-normal',
|
||||||
|
menu : new Common.UI.Menu({
|
||||||
|
style: 'width: 560px;',
|
||||||
|
items: [
|
||||||
|
{ template: _.template('<div id="id-chart-menu-type" class="menu-insertchart" style="margin: 5px 5px 5px 10px;"></div>') }
|
||||||
|
]
|
||||||
|
})
|
||||||
|
});
|
||||||
|
this.btnChartType.on('render:after', function(btn) {
|
||||||
|
me.mnuChartTypePicker = new Common.UI.DataView({
|
||||||
|
el: $('#id-chart-menu-type'),
|
||||||
|
parentMenu: btn.menu,
|
||||||
|
restoreHeight: 411,
|
||||||
|
groups: new Common.UI.DataViewGroupStore([
|
||||||
|
{ id: 'menu-chart-group-bar', caption: me.textColumn },
|
||||||
|
{ id: 'menu-chart-group-line', caption: me.textLine },
|
||||||
|
{ id: 'menu-chart-group-pie', caption: me.textPie },
|
||||||
|
{ id: 'menu-chart-group-hbar', caption: me.textBar },
|
||||||
|
{ id: 'menu-chart-group-area', caption: me.textArea },
|
||||||
|
{ id: 'menu-chart-group-scatter', caption: me.textPoint },
|
||||||
|
{ id: 'menu-chart-group-stock', caption: me.textStock }
|
||||||
|
]),
|
||||||
|
store: new Common.UI.DataViewStore([
|
||||||
|
{ group: 'menu-chart-group-bar', type: Asc.c_oAscChartTypeSettings.barNormal, iconCls: 'column-normal', selected: true},
|
||||||
|
{ group: 'menu-chart-group-bar', type: Asc.c_oAscChartTypeSettings.barStacked, iconCls: 'column-stack'},
|
||||||
|
{ group: 'menu-chart-group-bar', type: Asc.c_oAscChartTypeSettings.barStackedPer, iconCls: 'column-pstack'},
|
||||||
|
{ group: 'menu-chart-group-bar', type: Asc.c_oAscChartTypeSettings.barNormal3d, iconCls: 'column-3d-normal'},
|
||||||
|
{ group: 'menu-chart-group-bar', type: Asc.c_oAscChartTypeSettings.barStacked3d, iconCls: 'column-3d-stack'},
|
||||||
|
{ group: 'menu-chart-group-bar', type: Asc.c_oAscChartTypeSettings.barStackedPer3d, iconCls: 'column-3d-pstack'},
|
||||||
|
{ group: 'menu-chart-group-bar', type: Asc.c_oAscChartTypeSettings.barNormal3dPerspective, iconCls: 'column-3d-normal-per'},
|
||||||
|
{ group: 'menu-chart-group-line', type: Asc.c_oAscChartTypeSettings.lineNormal, iconCls: 'line-normal'},
|
||||||
|
{ group: 'menu-chart-group-line', type: Asc.c_oAscChartTypeSettings.lineStacked, iconCls: 'line-stack'},
|
||||||
|
{ group: 'menu-chart-group-line', type: Asc.c_oAscChartTypeSettings.lineStackedPer, iconCls: 'line-pstack'},
|
||||||
|
{ group: 'menu-chart-group-line', type: Asc.c_oAscChartTypeSettings.line3d, iconCls: 'line-3d'},
|
||||||
|
{ group: 'menu-chart-group-pie', type: Asc.c_oAscChartTypeSettings.pie, iconCls: 'pie-normal'},
|
||||||
|
{ group: 'menu-chart-group-pie', type: Asc.c_oAscChartTypeSettings.doughnut, iconCls: 'pie-doughnut'},
|
||||||
|
{ group: 'menu-chart-group-pie', type: Asc.c_oAscChartTypeSettings.pie3d, iconCls: 'pie-3d-normal'},
|
||||||
|
{ group: 'menu-chart-group-hbar', type: Asc.c_oAscChartTypeSettings.hBarNormal, iconCls: 'bar-normal'},
|
||||||
|
{ group: 'menu-chart-group-hbar', type: Asc.c_oAscChartTypeSettings.hBarStacked, iconCls: 'bar-stack'},
|
||||||
|
{ group: 'menu-chart-group-hbar', type: Asc.c_oAscChartTypeSettings.hBarStackedPer, iconCls: 'bar-pstack'},
|
||||||
|
{ group: 'menu-chart-group-hbar', type: Asc.c_oAscChartTypeSettings.hBarNormal3d, iconCls: 'bar-3d-normal'},
|
||||||
|
{ group: 'menu-chart-group-hbar', type: Asc.c_oAscChartTypeSettings.hBarStacked3d, iconCls: 'bar-3d-stack'},
|
||||||
|
{ group: 'menu-chart-group-hbar', type: Asc.c_oAscChartTypeSettings.hBarStackedPer3d, iconCls: 'bar-3d-pstack'},
|
||||||
|
{ group: 'menu-chart-group-area', type: Asc.c_oAscChartTypeSettings.areaNormal, iconCls: 'area-normal'},
|
||||||
|
{ group: 'menu-chart-group-area', type: Asc.c_oAscChartTypeSettings.areaStacked, iconCls: 'area-stack'},
|
||||||
|
{ group: 'menu-chart-group-area', type: Asc.c_oAscChartTypeSettings.areaStackedPer, iconCls: 'area-pstack'},
|
||||||
|
{ group: 'menu-chart-group-scatter', type: Asc.c_oAscChartTypeSettings.scatter, iconCls: 'point-normal'},
|
||||||
|
{ group: 'menu-chart-group-stock', type: Asc.c_oAscChartTypeSettings.stock, iconCls: 'stock-normal'}
|
||||||
|
]),
|
||||||
|
itemTemplate: _.template('<div id="<%= id %>" class="item-chartlist <%= iconCls %>"></div>')
|
||||||
|
});
|
||||||
|
});
|
||||||
|
this.btnChartType.render($('#chart-button-type'));
|
||||||
|
this.mnuChartTypePicker.on('item:click', _.bind(this.onSelectType, this, this.btnChartType));
|
||||||
|
this.lockedControls.push(this.btnChartType);
|
||||||
|
|
||||||
|
this.btnEditData = new Common.UI.Button({
|
||||||
|
el: $('#chart-button-edit-data')
|
||||||
|
});
|
||||||
|
this.btnEditData.on('click', _.bind(this.setEditData, this));
|
||||||
|
this.lockedControls.push(this.btnEditData);
|
||||||
|
|
||||||
|
this.spnWidth = new Common.UI.MetricSpinner({
|
||||||
|
el: $('#chart-spin-width'),
|
||||||
|
step: .1,
|
||||||
|
width: 78,
|
||||||
|
defaultUnit : "cm",
|
||||||
|
value: '3 cm',
|
||||||
|
maxValue: 55.88,
|
||||||
|
minValue: 0
|
||||||
|
});
|
||||||
|
this.spinners.push(this.spnWidth);
|
||||||
|
this.lockedControls.push(this.spnWidth);
|
||||||
|
|
||||||
|
this.spnHeight = new Common.UI.MetricSpinner({
|
||||||
|
el: $('#chart-spin-height'),
|
||||||
|
step: .1,
|
||||||
|
width: 78,
|
||||||
|
defaultUnit : "cm",
|
||||||
|
value: '3 cm',
|
||||||
|
maxValue: 55.88,
|
||||||
|
minValue: 0
|
||||||
|
});
|
||||||
|
this.spinners.push(this.spnHeight);
|
||||||
|
this.lockedControls.push(this.spnHeight);
|
||||||
|
|
||||||
|
this.spnWidth.on('change', _.bind(this.onWidthChange, this));
|
||||||
|
this.spnHeight.on('change', _.bind(this.onHeightChange, this));
|
||||||
|
|
||||||
|
this.btnRatio = new Common.UI.Button({
|
||||||
|
cls: 'btn-toolbar',
|
||||||
|
iconCls: 'advanced-btn-ratio',
|
||||||
|
style: 'margin-bottom: 1px;',
|
||||||
|
enableToggle: true,
|
||||||
|
hint: this.textKeepRatio
|
||||||
|
});
|
||||||
|
this.btnRatio.render($('#chart-button-ratio')) ;
|
||||||
|
this.lockedControls.push(this.btnRatio);
|
||||||
|
|
||||||
|
this.btnRatio.on('click', _.bind(function(btn, e) {
|
||||||
|
if (btn.pressed && this.spnHeight.getNumberValue()>0) {
|
||||||
|
this._nRatio = this.spnWidth.getNumberValue()/this.spnHeight.getNumberValue();
|
||||||
|
}
|
||||||
|
if (this.api) {
|
||||||
|
var props = new Asc.CAscChartProp();
|
||||||
|
props.asc_putLockAspect(btn.pressed);
|
||||||
|
this.api.ChartApply(props);
|
||||||
|
}
|
||||||
|
this.fireEvent('editcomplete', this);
|
||||||
|
}, this));
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
createDelayedElements: function() {
|
createDelayedElements: function() {
|
||||||
|
this.createDelayedControls();
|
||||||
this.updateMetricUnit();
|
this.updateMetricUnit();
|
||||||
|
this._initSettings = false;
|
||||||
},
|
},
|
||||||
|
|
||||||
setEditData: function() {
|
setEditData: function() {
|
||||||
|
|
@ -415,6 +389,36 @@ define([
|
||||||
|
|
||||||
updateChartStyles: function(styles) {
|
updateChartStyles: function(styles) {
|
||||||
var me = this;
|
var me = this;
|
||||||
|
|
||||||
|
if (!this.btnChartStyle) {
|
||||||
|
this.btnChartStyle = new Common.UI.Button({
|
||||||
|
cls : 'btn-large-dataview',
|
||||||
|
iconCls : 'item-wrap',
|
||||||
|
menu : new Common.UI.Menu({
|
||||||
|
menuAlign: 'tr-br',
|
||||||
|
items: [
|
||||||
|
{ template: _.template('<div id="id-chart-menu-style" style="width: 245px; margin: 0 5px;"></div>') }
|
||||||
|
]
|
||||||
|
})
|
||||||
|
});
|
||||||
|
this.btnChartStyle.render($('#chart-button-style'));
|
||||||
|
this.lockedControls.push(this.btnChartStyle);
|
||||||
|
this.mnuChartStylePicker = new Common.UI.DataView({
|
||||||
|
el: $('#id-chart-menu-style'),
|
||||||
|
style: 'max-height: 411px;',
|
||||||
|
parentMenu: this.btnChartStyle.menu,
|
||||||
|
store: new Common.UI.DataViewStore(),
|
||||||
|
itemTemplate: _.template('<div id="<%= id %>" class="item-wrap" style="background-image: url(<%= imageUrl %>); background-position: 0 0;"></div>')
|
||||||
|
});
|
||||||
|
|
||||||
|
if (this.btnChartStyle.menu) {
|
||||||
|
this.btnChartStyle.menu.on('show:after', function () {
|
||||||
|
me.mnuChartStylePicker.scroller.update({alwaysVisibleY: true});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
this.mnuChartStylePicker.on('item:click', _.bind(this.onSelectStyle, this, this.btnChartStyle));
|
||||||
|
}
|
||||||
|
|
||||||
if (styles && styles.length>0){
|
if (styles && styles.length>0){
|
||||||
var stylesStore = this.mnuChartStylePicker.store;
|
var stylesStore = this.mnuChartStylePicker.store;
|
||||||
if (stylesStore) {
|
if (stylesStore) {
|
||||||
|
|
@ -493,6 +497,8 @@ define([
|
||||||
},
|
},
|
||||||
|
|
||||||
disableControls: function(disable) {
|
disableControls: function(disable) {
|
||||||
|
if (this._initSettings) return;
|
||||||
|
|
||||||
if (this._state.DisabledControls!==disable) {
|
if (this._state.DisabledControls!==disable) {
|
||||||
this._state.DisabledControls = disable;
|
this._state.DisabledControls = disable;
|
||||||
_.each(this.lockedControls, function(item) {
|
_.each(this.lockedControls, function(item) {
|
||||||
|
|
|
||||||
|
|
@ -64,7 +64,6 @@ define([
|
||||||
},
|
},
|
||||||
|
|
||||||
initialize: function () {
|
initialize: function () {
|
||||||
var me = this;
|
|
||||||
this._initSettings = true;
|
this._initSettings = true;
|
||||||
|
|
||||||
this._state = {
|
this._state = {
|
||||||
|
|
@ -83,7 +82,29 @@ define([
|
||||||
|
|
||||||
this.labelWidth = $(this.el).find('#image-label-width');
|
this.labelWidth = $(this.el).find('#image-label-width');
|
||||||
this.labelHeight = $(this.el).find('#image-label-height');
|
this.labelHeight = $(this.el).find('#image-label-height');
|
||||||
|
},
|
||||||
|
|
||||||
|
render: function () {
|
||||||
|
var el = $(this.el);
|
||||||
|
el.html(this.template({
|
||||||
|
scope: this
|
||||||
|
}));
|
||||||
|
},
|
||||||
|
|
||||||
|
setApi: function(api) {
|
||||||
|
this.api = api;
|
||||||
|
return this;
|
||||||
|
},
|
||||||
|
|
||||||
|
updateMetricUnit: function() {
|
||||||
|
var value = Common.Utils.Metric.fnRecalcFromMM(this._state.Width);
|
||||||
|
this.labelWidth[0].innerHTML = this.textWidth + ': ' + value.toFixed(1) + ' ' + Common.Utils.Metric.getCurrentMetricName();
|
||||||
|
|
||||||
|
value = Common.Utils.Metric.fnRecalcFromMM(this._state.Height);
|
||||||
|
this.labelHeight[0].innerHTML = this.textHeight + ': ' + value.toFixed(1) + ' ' + Common.Utils.Metric.getCurrentMetricName();
|
||||||
|
},
|
||||||
|
|
||||||
|
createDelayedControls: function() {
|
||||||
this.btnOriginalSize = new Common.UI.Button({
|
this.btnOriginalSize = new Common.UI.Button({
|
||||||
el: $('#image-button-original-size')
|
el: $('#image-button-original-size')
|
||||||
});
|
});
|
||||||
|
|
@ -114,41 +135,21 @@ define([
|
||||||
if (this.api) this.api.asc_pluginRun(this._originalProps.asc_getPluginGuid(), 0, this._originalProps.asc_getPluginData());
|
if (this.api) this.api.asc_pluginRun(this._originalProps.asc_getPluginGuid(), 0, this._originalProps.asc_getPluginData());
|
||||||
this.fireEvent('editcomplete', this);
|
this.fireEvent('editcomplete', this);
|
||||||
}, this));
|
}, this));
|
||||||
$(this.el).on('click', '#image-advanced-link', _.bind(this.openAdvancedSettings, this));
|
|
||||||
},
|
|
||||||
|
|
||||||
render: function () {
|
|
||||||
var el = $(this.el);
|
|
||||||
el.html(this.template({
|
|
||||||
scope: this
|
|
||||||
}));
|
|
||||||
|
|
||||||
this.linkAdvanced = $('#image-advanced-link');
|
this.linkAdvanced = $('#image-advanced-link');
|
||||||
this.lblReplace = $('#image-lbl-replace');
|
this.lblReplace = $('#image-lbl-replace');
|
||||||
},
|
$(this.el).on('click', '#image-advanced-link', _.bind(this.openAdvancedSettings, this));
|
||||||
|
|
||||||
setApi: function(api) {
|
|
||||||
this.api = api;
|
|
||||||
return this;
|
|
||||||
},
|
|
||||||
|
|
||||||
updateMetricUnit: function() {
|
|
||||||
var value = Common.Utils.Metric.fnRecalcFromMM(this._state.Width);
|
|
||||||
this.labelWidth[0].innerHTML = this.textWidth + ': ' + value.toFixed(1) + ' ' + Common.Utils.Metric.getCurrentMetricName();
|
|
||||||
|
|
||||||
value = Common.Utils.Metric.fnRecalcFromMM(this._state.Height);
|
|
||||||
this.labelHeight[0].innerHTML = this.textHeight + ': ' + value.toFixed(1) + ' ' + Common.Utils.Metric.getCurrentMetricName();
|
|
||||||
},
|
},
|
||||||
|
|
||||||
createDelayedElements: function() {
|
createDelayedElements: function() {
|
||||||
|
this.createDelayedControls();
|
||||||
this.updateMetricUnit();
|
this.updateMetricUnit();
|
||||||
|
this._initSettings = false;
|
||||||
},
|
},
|
||||||
|
|
||||||
ChangeSettings: function(props) {
|
ChangeSettings: function(props) {
|
||||||
if (this._initSettings) {
|
if (this._initSettings)
|
||||||
this.createDelayedElements();
|
this.createDelayedElements();
|
||||||
this._initSettings = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.disableControls(this._locked);
|
this.disableControls(this._locked);
|
||||||
|
|
||||||
|
|
@ -269,6 +270,8 @@ define([
|
||||||
},
|
},
|
||||||
|
|
||||||
disableControls: function(disable) {
|
disableControls: function(disable) {
|
||||||
|
if (this._initSettings) return;
|
||||||
|
|
||||||
if (this._state.DisabledControls!==disable) {
|
if (this._state.DisabledControls!==disable) {
|
||||||
this._state.DisabledControls = disable;
|
this._state.DisabledControls = disable;
|
||||||
_.each(this.lockedControls, function(item) {
|
_.each(this.lockedControls, function(item) {
|
||||||
|
|
|
||||||
|
|
@ -64,7 +64,6 @@ define([
|
||||||
},
|
},
|
||||||
|
|
||||||
initialize: function () {
|
initialize: function () {
|
||||||
var me = this;
|
|
||||||
this._initSettings = true;
|
this._initSettings = true;
|
||||||
|
|
||||||
this._state = {
|
this._state = {
|
||||||
|
|
@ -79,68 +78,6 @@ define([
|
||||||
this._locked = false;
|
this._locked = false;
|
||||||
|
|
||||||
this.render();
|
this.render();
|
||||||
|
|
||||||
this._arrLineRule = [
|
|
||||||
{displayValue: this.textAuto, defaultValue: 1, value: c_paragraphLinerule.LINERULE_AUTO, minValue: 0.5, step: 0.01, defaultUnit: ''},
|
|
||||||
{displayValue: this.textExact, defaultValue: 5, value: c_paragraphLinerule.LINERULE_EXACT, minValue: 0.03, step: 0.01, defaultUnit: 'cm'}
|
|
||||||
];
|
|
||||||
|
|
||||||
// Short Size
|
|
||||||
this.cmbLineRule = new Common.UI.ComboBox({
|
|
||||||
el: $('#paragraph-combo-line-rule'),
|
|
||||||
cls: 'input-group-nr',
|
|
||||||
menuStyle: 'min-width: 85px;',
|
|
||||||
editable: false,
|
|
||||||
data: this._arrLineRule
|
|
||||||
});
|
|
||||||
this.cmbLineRule.setValue(c_paragraphLinerule.LINERULE_AUTO);
|
|
||||||
this.lockedControls.push(this.cmbLineRule);
|
|
||||||
|
|
||||||
this.numLineHeight = new Common.UI.MetricSpinner({
|
|
||||||
el: $('#paragraph-spin-line-height'),
|
|
||||||
step: .01,
|
|
||||||
width: 85,
|
|
||||||
value: '1.5',
|
|
||||||
defaultUnit : "",
|
|
||||||
maxValue: 132,
|
|
||||||
minValue: 0.5
|
|
||||||
});
|
|
||||||
this.lockedControls.push(this.numLineHeight);
|
|
||||||
|
|
||||||
this.numSpacingBefore = new Common.UI.MetricSpinner({
|
|
||||||
el: $('#paragraph-spin-spacing-before'),
|
|
||||||
step: .1,
|
|
||||||
width: 85,
|
|
||||||
value: '0 cm',
|
|
||||||
defaultUnit : "cm",
|
|
||||||
maxValue: 55.88,
|
|
||||||
minValue: 0,
|
|
||||||
allowAuto : true,
|
|
||||||
autoText : this.txtAutoText
|
|
||||||
});
|
|
||||||
this.spinners.push(this.numSpacingBefore);
|
|
||||||
this.lockedControls.push(this.numSpacingBefore);
|
|
||||||
|
|
||||||
this.numSpacingAfter = new Common.UI.MetricSpinner({
|
|
||||||
el: $('#paragraph-spin-spacing-after'),
|
|
||||||
step: .1,
|
|
||||||
width: 85,
|
|
||||||
value: '0.35 cm',
|
|
||||||
defaultUnit : "cm",
|
|
||||||
maxValue: 55.88,
|
|
||||||
minValue: 0,
|
|
||||||
allowAuto : true,
|
|
||||||
autoText : this.txtAutoText
|
|
||||||
});
|
|
||||||
this.spinners.push(this.numSpacingAfter);
|
|
||||||
this.lockedControls.push(this.numSpacingAfter);
|
|
||||||
|
|
||||||
this.numLineHeight.on('change', _.bind(this.onNumLineHeightChange, this));
|
|
||||||
this.numSpacingBefore.on('change', _.bind(this.onNumSpacingBeforeChange, this));
|
|
||||||
this.numSpacingAfter.on('change', _.bind(this.onNumSpacingAfterChange, this));
|
|
||||||
this.cmbLineRule.on('selected', _.bind(this.onLineRuleSelect, this));
|
|
||||||
this.cmbLineRule.on('hide:after', _.bind(this.onHideMenus, this));
|
|
||||||
$(this.el).on('click', '#paragraph-advanced-link', _.bind(this.openAdvancedSettings, this));
|
|
||||||
},
|
},
|
||||||
|
|
||||||
render: function () {
|
render: function () {
|
||||||
|
|
@ -200,6 +137,8 @@ define([
|
||||||
},
|
},
|
||||||
|
|
||||||
_onLineSpacing: function(value) {
|
_onLineSpacing: function(value) {
|
||||||
|
if (this._initSettings) return;
|
||||||
|
|
||||||
var linerule = value.get_LineRule();
|
var linerule = value.get_LineRule();
|
||||||
var line = value.get_Line();
|
var line = value.get_Line();
|
||||||
|
|
||||||
|
|
@ -229,10 +168,8 @@ define([
|
||||||
},
|
},
|
||||||
|
|
||||||
ChangeSettings: function(prop) {
|
ChangeSettings: function(prop) {
|
||||||
if (this._initSettings) {
|
if (this._initSettings)
|
||||||
this.createDelayedElements();
|
this.createDelayedElements();
|
||||||
this._initSettings = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.disableControls(this._locked);
|
this.disableControls(this._locked);
|
||||||
|
|
||||||
|
|
@ -297,6 +234,7 @@ define([
|
||||||
spinner.setStep(Common.Utils.Metric.getCurrentMetric()==Common.Utils.Metric.c_MetricUnits.pt ? 1 : 0.01);
|
spinner.setStep(Common.Utils.Metric.getCurrentMetric()==Common.Utils.Metric.c_MetricUnits.pt ? 1 : 0.01);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
if (this.cmbLineRule) {
|
||||||
var rec = this.cmbLineRule.store.at(1);
|
var rec = this.cmbLineRule.store.at(1);
|
||||||
rec.set({defaultUnit: Common.Utils.Metric.getCurrentMetricName(),
|
rec.set({defaultUnit: Common.Utils.Metric.getCurrentMetricName(),
|
||||||
minValue: parseFloat(Common.Utils.Metric.fnRecalcFromMM(0.3).toFixed(2)),
|
minValue: parseFloat(Common.Utils.Metric.fnRecalcFromMM(0.3).toFixed(2)),
|
||||||
|
|
@ -309,10 +247,79 @@ define([
|
||||||
this.numLineHeight.setDefaultUnit(rec.get('defaultUnit'));
|
this.numLineHeight.setDefaultUnit(rec.get('defaultUnit'));
|
||||||
this.numLineHeight.setStep(rec.get('step'));
|
this.numLineHeight.setStep(rec.get('step'));
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
createDelayedControls: function() {
|
||||||
|
var me = this;
|
||||||
|
this._arrLineRule = [
|
||||||
|
{displayValue: this.textAuto, defaultValue: 1, value: c_paragraphLinerule.LINERULE_AUTO, minValue: 0.5, step: 0.01, defaultUnit: ''},
|
||||||
|
{displayValue: this.textExact, defaultValue: 5, value: c_paragraphLinerule.LINERULE_EXACT, minValue: 0.03, step: 0.01, defaultUnit: 'cm'}
|
||||||
|
];
|
||||||
|
|
||||||
|
// Short Size
|
||||||
|
this.cmbLineRule = new Common.UI.ComboBox({
|
||||||
|
el: $('#paragraph-combo-line-rule'),
|
||||||
|
cls: 'input-group-nr',
|
||||||
|
menuStyle: 'min-width: 85px;',
|
||||||
|
editable: false,
|
||||||
|
data: this._arrLineRule
|
||||||
|
});
|
||||||
|
this.cmbLineRule.setValue(c_paragraphLinerule.LINERULE_AUTO);
|
||||||
|
this.lockedControls.push(this.cmbLineRule);
|
||||||
|
|
||||||
|
this.numLineHeight = new Common.UI.MetricSpinner({
|
||||||
|
el: $('#paragraph-spin-line-height'),
|
||||||
|
step: .01,
|
||||||
|
width: 85,
|
||||||
|
value: '1.5',
|
||||||
|
defaultUnit : "",
|
||||||
|
maxValue: 132,
|
||||||
|
minValue: 0.5
|
||||||
|
});
|
||||||
|
this.lockedControls.push(this.numLineHeight);
|
||||||
|
|
||||||
|
this.numSpacingBefore = new Common.UI.MetricSpinner({
|
||||||
|
el: $('#paragraph-spin-spacing-before'),
|
||||||
|
step: .1,
|
||||||
|
width: 85,
|
||||||
|
value: '0 cm',
|
||||||
|
defaultUnit : "cm",
|
||||||
|
maxValue: 55.88,
|
||||||
|
minValue: 0,
|
||||||
|
allowAuto : true,
|
||||||
|
autoText : this.txtAutoText
|
||||||
|
});
|
||||||
|
this.spinners.push(this.numSpacingBefore);
|
||||||
|
this.lockedControls.push(this.numSpacingBefore);
|
||||||
|
|
||||||
|
this.numSpacingAfter = new Common.UI.MetricSpinner({
|
||||||
|
el: $('#paragraph-spin-spacing-after'),
|
||||||
|
step: .1,
|
||||||
|
width: 85,
|
||||||
|
value: '0.35 cm',
|
||||||
|
defaultUnit : "cm",
|
||||||
|
maxValue: 55.88,
|
||||||
|
minValue: 0,
|
||||||
|
allowAuto : true,
|
||||||
|
autoText : this.txtAutoText
|
||||||
|
});
|
||||||
|
this.spinners.push(this.numSpacingAfter);
|
||||||
|
this.lockedControls.push(this.numSpacingAfter);
|
||||||
|
|
||||||
|
this.numLineHeight.on('change', _.bind(this.onNumLineHeightChange, this));
|
||||||
|
this.numSpacingBefore.on('change', _.bind(this.onNumSpacingBeforeChange, this));
|
||||||
|
this.numSpacingAfter.on('change', _.bind(this.onNumSpacingAfterChange, this));
|
||||||
|
this.cmbLineRule.on('selected', _.bind(this.onLineRuleSelect, this));
|
||||||
|
this.cmbLineRule.on('hide:after', _.bind(this.onHideMenus, this));
|
||||||
|
$(this.el).on('click', '#paragraph-advanced-link', _.bind(this.openAdvancedSettings, this));
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
createDelayedElements: function() {
|
createDelayedElements: function() {
|
||||||
|
this.createDelayedControls();
|
||||||
this.updateMetricUnit();
|
this.updateMetricUnit();
|
||||||
|
this._initSettings = false;
|
||||||
},
|
},
|
||||||
|
|
||||||
openAdvancedSettings: function(e) {
|
openAdvancedSettings: function(e) {
|
||||||
|
|
@ -357,6 +364,8 @@ define([
|
||||||
},
|
},
|
||||||
|
|
||||||
disableControls: function(disable) {
|
disableControls: function(disable) {
|
||||||
|
if (this._initSettings) return;
|
||||||
|
|
||||||
if (this._state.DisabledControls!==disable) {
|
if (this._state.DisabledControls!==disable) {
|
||||||
this._state.DisabledControls = disable;
|
this._state.DisabledControls = disable;
|
||||||
_.each(this.lockedControls, function(item) {
|
_.each(this.lockedControls, function(item) {
|
||||||
|
|
|
||||||
|
|
@ -71,7 +71,6 @@ define([
|
||||||
},
|
},
|
||||||
|
|
||||||
initialize: function () {
|
initialize: function () {
|
||||||
var me = this;
|
|
||||||
this._initSettings = true;
|
this._initSettings = true;
|
||||||
this._originalProps = null;
|
this._originalProps = null;
|
||||||
this._noApply = true;
|
this._noApply = true;
|
||||||
|
|
@ -123,349 +122,6 @@ define([
|
||||||
|
|
||||||
this.render();
|
this.render();
|
||||||
|
|
||||||
this._arrFillSrc = [
|
|
||||||
{displayValue: this.textColor, value: Asc.c_oAscFill.FILL_TYPE_SOLID},
|
|
||||||
{displayValue: this.textGradientFill, value: Asc.c_oAscFill.FILL_TYPE_GRAD},
|
|
||||||
{displayValue: this.textImageTexture, value: Asc.c_oAscFill.FILL_TYPE_BLIP},
|
|
||||||
{displayValue: this.textPatternFill, value: Asc.c_oAscFill.FILL_TYPE_PATT},
|
|
||||||
{displayValue: this.textNoFill, value: Asc.c_oAscFill.FILL_TYPE_NOFILL}
|
|
||||||
];
|
|
||||||
|
|
||||||
this.cmbFillSrc = new Common.UI.ComboBox({
|
|
||||||
el: $('#shape-combo-fill-src'),
|
|
||||||
cls: 'input-group-nr',
|
|
||||||
style: 'width: 100%;',
|
|
||||||
menuStyle: 'min-width: 190px;',
|
|
||||||
editable: false,
|
|
||||||
data: this._arrFillSrc
|
|
||||||
});
|
|
||||||
this.cmbFillSrc.setValue(this._arrFillSrc[0].value);
|
|
||||||
this.cmbFillSrc.on('selected', _.bind(this.onFillSrcSelect, this));
|
|
||||||
this.fillControls.push(this.cmbFillSrc);
|
|
||||||
|
|
||||||
this.btnBackColor = new Common.UI.ColorButton({
|
|
||||||
style: "width:45px;",
|
|
||||||
menu : new Common.UI.Menu({
|
|
||||||
items: [
|
|
||||||
{ template: _.template('<div id="shape-back-color-menu" style="width: 165px; height: 220px; margin: 10px;"></div>') },
|
|
||||||
{ template: _.template('<a id="shape-back-color-new" style="padding-left:12px;">' + me.textNewColor + '</a>') }
|
|
||||||
]
|
|
||||||
})
|
|
||||||
});
|
|
||||||
|
|
||||||
this.btnBackColor.on('render:after', function(btn) {
|
|
||||||
me.colorsBack = new Common.UI.ThemeColorPalette({
|
|
||||||
el: $('#shape-back-color-menu'),
|
|
||||||
value: 'transparent',
|
|
||||||
transparent: true
|
|
||||||
});
|
|
||||||
me.colorsBack.on('select', _.bind(me.onColorsBackSelect, me));
|
|
||||||
});
|
|
||||||
this.btnBackColor.render( $('#shape-back-color-btn'));
|
|
||||||
this.btnBackColor.setColor('transparent');
|
|
||||||
$(this.el).on('click', '#shape-back-color-new', _.bind(this.addNewColor, this, this.colorsBack, this.btnBackColor));
|
|
||||||
this.fillControls.push(this.btnBackColor);
|
|
||||||
|
|
||||||
this.cmbPattern = new Common.UI.ComboDataView({
|
|
||||||
itemWidth: 28,
|
|
||||||
itemHeight: 28,
|
|
||||||
menuMaxHeight: 300,
|
|
||||||
enableKeyEvents: true,
|
|
||||||
cls: 'combo-pattern'
|
|
||||||
});
|
|
||||||
this.cmbPattern.menuPicker.itemTemplate = this.cmbPattern.fieldPicker.itemTemplate = _.template([
|
|
||||||
'<div class="style" id="<%= id %>">',
|
|
||||||
'<img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="combo-pattern-item" ',
|
|
||||||
'width="' + this.cmbPattern.itemWidth + '" height="' + this.cmbPattern.itemHeight + '" ',
|
|
||||||
'style="background-position: -<%= offsetx %>px -<%= offsety %>px;"/>',
|
|
||||||
'</div>'
|
|
||||||
].join(''));
|
|
||||||
this.cmbPattern.render($('#shape-combo-pattern'));
|
|
||||||
this.cmbPattern.openButton.menu.cmpEl.css({
|
|
||||||
'min-width': 178,
|
|
||||||
'max-width': 178
|
|
||||||
});
|
|
||||||
this.cmbPattern.on('click', _.bind(this.onPatternSelect, this));
|
|
||||||
this.cmbPattern.openButton.menu.on('show:after', function () {
|
|
||||||
me.cmbPattern.menuPicker.scroller.update({alwaysVisibleY: true});
|
|
||||||
});
|
|
||||||
this.fillControls.push(this.cmbPattern);
|
|
||||||
|
|
||||||
this.btnFGColor = new Common.UI.ColorButton({
|
|
||||||
style: "width:45px;",
|
|
||||||
menu : new Common.UI.Menu({
|
|
||||||
items: [
|
|
||||||
{ template: _.template('<div id="shape-foreground-color-menu" style="width: 165px; height: 220px; margin: 10px;"></div>') },
|
|
||||||
{ template: _.template('<a id="shape-foreground-color-new" style="padding-left:12px;">' + me.textNewColor + '</a>') }
|
|
||||||
]
|
|
||||||
})
|
|
||||||
});
|
|
||||||
|
|
||||||
this.btnFGColor.on('render:after', function(btn) {
|
|
||||||
me.colorsFG = new Common.UI.ThemeColorPalette({
|
|
||||||
el: $('#shape-foreground-color-menu'),
|
|
||||||
value: '000000'
|
|
||||||
});
|
|
||||||
me.colorsFG.on('select', _.bind(me.onColorsFGSelect, me));
|
|
||||||
});
|
|
||||||
this.btnFGColor.render( $('#shape-foreground-color-btn'));
|
|
||||||
this.btnFGColor.setColor('000000');
|
|
||||||
$(this.el).on('click', '#shape-foreground-color-new', _.bind(this.addNewColor, this, this.colorsFG, this.btnFGColor));
|
|
||||||
this.fillControls.push(this.btnFGColor);
|
|
||||||
|
|
||||||
this.btnBGColor = new Common.UI.ColorButton({
|
|
||||||
style: "width:45px;",
|
|
||||||
menu : new Common.UI.Menu({
|
|
||||||
items: [
|
|
||||||
{ template: _.template('<div id="shape-background-color-menu" style="width: 165px; height: 220px; margin: 10px;"></div>') },
|
|
||||||
{ template: _.template('<a id="shape-background-color-new" style="padding-left:12px;">' + me.textNewColor + '</a>') }
|
|
||||||
]
|
|
||||||
})
|
|
||||||
});
|
|
||||||
|
|
||||||
this.btnBGColor.on('render:after', function(btn) {
|
|
||||||
me.colorsBG = new Common.UI.ThemeColorPalette({
|
|
||||||
el: $('#shape-background-color-menu'),
|
|
||||||
value: 'ffffff'
|
|
||||||
});
|
|
||||||
me.colorsBG.on('select', _.bind(me.onColorsBGSelect, me));
|
|
||||||
});
|
|
||||||
this.btnBGColor.render( $('#shape-background-color-btn'));
|
|
||||||
this.btnBGColor.setColor('ffffff');
|
|
||||||
$(this.el).on('click', '#shape-background-color-new', _.bind(this.addNewColor, this, this.colorsBG, this.btnBGColor));
|
|
||||||
this.fillControls.push(this.btnBGColor);
|
|
||||||
|
|
||||||
this.btnInsertFromFile = new Common.UI.Button({
|
|
||||||
el: $('#shape-button-from-file')
|
|
||||||
});
|
|
||||||
this.fillControls.push(this.btnInsertFromFile);
|
|
||||||
|
|
||||||
this.btnInsertFromUrl = new Common.UI.Button({
|
|
||||||
el: $('#shape-button-from-url')
|
|
||||||
});
|
|
||||||
this.fillControls.push(this.btnInsertFromUrl);
|
|
||||||
|
|
||||||
this.btnInsertFromFile.on('click', _.bind(function(btn){
|
|
||||||
if (this.api) this.api.ChangeShapeImageFromFile();
|
|
||||||
this.fireEvent('editcomplete', this);
|
|
||||||
}, this));
|
|
||||||
this.btnInsertFromUrl.on('click', _.bind(this.insertFromUrl, this));
|
|
||||||
|
|
||||||
this._arrFillType = [
|
|
||||||
{displayValue: this.textStretch, value: Asc.c_oAscFillBlipType.STRETCH},
|
|
||||||
{displayValue: this.textTile, value: Asc.c_oAscFillBlipType.TILE}
|
|
||||||
];
|
|
||||||
|
|
||||||
this.cmbFillType = new Common.UI.ComboBox({
|
|
||||||
el: $('#shape-combo-fill-type'),
|
|
||||||
cls: 'input-group-nr',
|
|
||||||
menuStyle: 'min-width: 90px;',
|
|
||||||
editable: false,
|
|
||||||
data: this._arrFillType
|
|
||||||
});
|
|
||||||
this.cmbFillType.setValue(this._arrFillType[0].value);
|
|
||||||
this.cmbFillType.on('selected', _.bind(this.onFillTypeSelect, this));
|
|
||||||
this.fillControls.push(this.cmbFillType);
|
|
||||||
|
|
||||||
this.btnTexture = new Common.UI.ComboBox({
|
|
||||||
el: $('#shape-combo-fill-texture'),
|
|
||||||
template: _.template([
|
|
||||||
'<div class="input-group combobox combo-dataview-menu input-group-nr dropdown-toggle" tabindex="0" data-toggle="dropdown">',
|
|
||||||
'<div class="form-control text" style="width: 90px;">' + this.textSelectTexture + '</div>',
|
|
||||||
'<div style="display: table-cell;"></div>',
|
|
||||||
'<button type="button" class="btn btn-default"><span class="caret img-commonctrl"></span></button>',
|
|
||||||
'</div>'
|
|
||||||
].join(''))
|
|
||||||
});
|
|
||||||
this.textureMenu = new Common.UI.Menu({
|
|
||||||
items: [
|
|
||||||
{ template: _.template('<div id="id-shape-menu-texture" style="width: 233px; margin: 0 5px;"></div>') }
|
|
||||||
]
|
|
||||||
});
|
|
||||||
this.textureMenu.render($('#shape-combo-fill-texture'));
|
|
||||||
this.fillControls.push(this.btnTexture);
|
|
||||||
|
|
||||||
this.numTransparency = new Common.UI.MetricSpinner({
|
|
||||||
el: $('#shape-spin-transparency'),
|
|
||||||
step: 1,
|
|
||||||
width: 62,
|
|
||||||
value: '100 %',
|
|
||||||
defaultUnit : "%",
|
|
||||||
maxValue: 100,
|
|
||||||
minValue: 0
|
|
||||||
});
|
|
||||||
this.numTransparency.on('change', _.bind(this.onNumTransparencyChange, this));
|
|
||||||
this.fillControls.push(this.numTransparency);
|
|
||||||
|
|
||||||
this.sldrTransparency = new Common.UI.SingleSlider({
|
|
||||||
el: $('#shape-slider-transparency'),
|
|
||||||
width: 75,
|
|
||||||
minValue: 0,
|
|
||||||
maxValue: 100,
|
|
||||||
value: 100
|
|
||||||
});
|
|
||||||
this.sldrTransparency.on('change', _.bind(this.onTransparencyChange, this));
|
|
||||||
this.sldrTransparency.on('changecomplete', _.bind(this.onTransparencyChangeComplete, this));
|
|
||||||
this.fillControls.push(this.sldrTransparency);
|
|
||||||
|
|
||||||
this.lblTransparencyStart = $(this.el).find('#shape-lbl-transparency-start');
|
|
||||||
this.lblTransparencyEnd = $(this.el).find('#shape-lbl-transparency-end');
|
|
||||||
|
|
||||||
this._arrGradType = [
|
|
||||||
{displayValue: this.textLinear, value: Asc.c_oAscFillGradType.GRAD_LINEAR},
|
|
||||||
{displayValue: this.textRadial, value: Asc.c_oAscFillGradType.GRAD_PATH}
|
|
||||||
];
|
|
||||||
|
|
||||||
this.cmbGradType = new Common.UI.ComboBox({
|
|
||||||
el: $('#shape-combo-grad-type'),
|
|
||||||
cls: 'input-group-nr',
|
|
||||||
menuStyle: 'min-width: 90px;',
|
|
||||||
editable: false,
|
|
||||||
data: this._arrGradType
|
|
||||||
});
|
|
||||||
this.cmbGradType.setValue(this._arrGradType[0].value);
|
|
||||||
this.cmbGradType.on('selected', _.bind(this.onGradTypeSelect, this));
|
|
||||||
this.fillControls.push(this.cmbGradType);
|
|
||||||
|
|
||||||
this._viewDataLinear = [
|
|
||||||
{ offsetx: 0, offsety: 0, type:45, subtype:-1, iconcls:'gradient-left-top' },
|
|
||||||
{ offsetx: 50, offsety: 0, type:90, subtype:4, iconcls:'gradient-top'},
|
|
||||||
{ offsetx: 100, offsety: 0, type:135, subtype:5, iconcls:'gradient-right-top'},
|
|
||||||
{ offsetx: 0, offsety: 50, type:0, subtype:6, iconcls:'gradient-left', cls: 'item-gradient-separator', selected: true},
|
|
||||||
{ offsetx: 100, offsety: 50, type:180, subtype:1, iconcls:'gradient-right'},
|
|
||||||
{ offsetx: 0, offsety: 100, type:315, subtype:2, iconcls:'gradient-left-bottom'},
|
|
||||||
{ offsetx: 50, offsety: 100, type:270, subtype:3, iconcls:'gradient-bottom'},
|
|
||||||
{ offsetx: 100, offsety: 100, type:225, subtype:7, iconcls:'gradient-right-bottom'}
|
|
||||||
];
|
|
||||||
|
|
||||||
this._viewDataRadial = [
|
|
||||||
{ offsetx: 100, offsety: 150, type:2, subtype:5, iconcls:'gradient-radial-center'}
|
|
||||||
];
|
|
||||||
|
|
||||||
this.btnDirection = new Common.UI.Button({
|
|
||||||
cls : 'btn-large-dataview',
|
|
||||||
iconCls : 'item-gradient gradient-left',
|
|
||||||
menu : new Common.UI.Menu({
|
|
||||||
style: 'min-width: 60px;',
|
|
||||||
menuAlign: 'tr-br',
|
|
||||||
items: [
|
|
||||||
{ template: _.template('<div id="id-shape-menu-direction" style="width: 175px; margin: 0 5px;"></div>') }
|
|
||||||
]
|
|
||||||
})
|
|
||||||
});
|
|
||||||
this.btnDirection.on('render:after', function(btn) {
|
|
||||||
me.mnuDirectionPicker = new Common.UI.DataView({
|
|
||||||
el: $('#id-shape-menu-direction'),
|
|
||||||
parentMenu: btn.menu,
|
|
||||||
restoreHeight: 174,
|
|
||||||
store: new Common.UI.DataViewStore(me._viewDataLinear),
|
|
||||||
itemTemplate: _.template('<div id="<%= id %>" class="item-gradient" style="background-position: -<%= offsetx %>px -<%= offsety %>px;"></div>')
|
|
||||||
});
|
|
||||||
});
|
|
||||||
this.btnDirection.render($('#shape-button-direction'));
|
|
||||||
this.mnuDirectionPicker.on('item:click', _.bind(this.onSelectGradient, this, this.btnDirection));
|
|
||||||
this.fillControls.push(this.btnDirection);
|
|
||||||
|
|
||||||
this.btnGradColor = new Common.UI.ColorButton({
|
|
||||||
style: "width:45px;",
|
|
||||||
menu : new Common.UI.Menu({
|
|
||||||
items: [
|
|
||||||
{ template: _.template('<div id="shape-gradient-color-menu" style="width: 165px; height: 220px; margin: 10px;"></div>') },
|
|
||||||
{ template: _.template('<a id="shape-gradient-color-new" style="padding-left:12px;">' + me.textNewColor + '</a>') }
|
|
||||||
]
|
|
||||||
})
|
|
||||||
});
|
|
||||||
this.btnGradColor.on('render:after', function(btn) {
|
|
||||||
me.colorsGrad = new Common.UI.ThemeColorPalette({
|
|
||||||
el: $('#shape-gradient-color-menu'),
|
|
||||||
value: '000000'
|
|
||||||
});
|
|
||||||
me.colorsGrad.on('select', _.bind(me.onColorsGradientSelect, me));
|
|
||||||
});
|
|
||||||
this.btnGradColor.render( $('#shape-gradient-color-btn'));
|
|
||||||
this.btnGradColor.setColor('000000');
|
|
||||||
$(this.el).on('click', '#shape-gradient-color-new', _.bind(this.addNewColor, this, this.colorsGrad, this.btnGradColor));
|
|
||||||
this.fillControls.push(this.btnGradColor);
|
|
||||||
|
|
||||||
this.sldrGradient = new Common.UI.MultiSliderGradient({
|
|
||||||
el: $('#shape-slider-gradient'),
|
|
||||||
width: 125,
|
|
||||||
minValue: 0,
|
|
||||||
maxValue: 100,
|
|
||||||
values: [0, 100]
|
|
||||||
});
|
|
||||||
this.sldrGradient.on('change', _.bind(this.onGradientChange, this));
|
|
||||||
this.sldrGradient.on('changecomplete', _.bind(this.onGradientChangeComplete, this));
|
|
||||||
this.sldrGradient.on('thumbclick', function(cmp, index){
|
|
||||||
me.GradColor.currentIdx = index;
|
|
||||||
var color = me.GradColor.colors[me.GradColor.currentIdx];
|
|
||||||
me.btnGradColor.setColor(color);
|
|
||||||
me.colorsGrad.select(color,false);
|
|
||||||
});
|
|
||||||
this.sldrGradient.on('thumbdblclick', function(cmp){
|
|
||||||
me.btnGradColor.cmpEl.find('button').dropdown('toggle');
|
|
||||||
});
|
|
||||||
this.fillControls.push(this.sldrGradient);
|
|
||||||
|
|
||||||
this.cmbBorderSize = new Common.UI.ComboBorderSizeEditable({
|
|
||||||
el: $('#shape-combo-border-size'),
|
|
||||||
style: "width: 93px;",
|
|
||||||
txtNoBorders: this.txtNoBorders
|
|
||||||
})
|
|
||||||
.on('selected', _.bind(this.onBorderSizeSelect, this))
|
|
||||||
.on('changed:before',_.bind(this.onBorderSizeChanged, this, true))
|
|
||||||
.on('changed:after', _.bind(this.onBorderSizeChanged, this, false))
|
|
||||||
.on('combo:blur', _.bind(this.onComboBlur, this, false));
|
|
||||||
this.BorderSize = this.cmbBorderSize.store.at(2).get('value');
|
|
||||||
this.cmbBorderSize.setValue(this.BorderSize);
|
|
||||||
this.lockedControls.push(this.cmbBorderSize);
|
|
||||||
|
|
||||||
this.btnBorderColor = new Common.UI.ColorButton({
|
|
||||||
style: "width:45px;",
|
|
||||||
menu : new Common.UI.Menu({
|
|
||||||
items: [
|
|
||||||
{ template: _.template('<div id="shape-border-color-menu" style="width: 165px; height: 220px; margin: 10px;"></div>') },
|
|
||||||
{ template: _.template('<a id="shape-border-color-new" style="padding-left:12px;">' + me.textNewColor + '</a>') }
|
|
||||||
]
|
|
||||||
})
|
|
||||||
});
|
|
||||||
|
|
||||||
this.btnBorderColor.on('render:after', function(btn) {
|
|
||||||
me.colorsBorder = new Common.UI.ThemeColorPalette({
|
|
||||||
el: $('#shape-border-color-menu'),
|
|
||||||
value: '000000'
|
|
||||||
});
|
|
||||||
me.colorsBorder.on('select', _.bind(me.onColorsBorderSelect, me));
|
|
||||||
});
|
|
||||||
this.btnBorderColor.render( $('#shape-border-color-btn'));
|
|
||||||
this.btnBorderColor.setColor('000000');
|
|
||||||
$(this.el).on('click', '#shape-border-color-new', _.bind(this.addNewColor, this, this.colorsBorder, this.btnBorderColor));
|
|
||||||
this.lockedControls.push(this.btnBorderColor);
|
|
||||||
|
|
||||||
this.cmbBorderType = new Common.UI.ComboBorderType({
|
|
||||||
el: $('#shape-combo-border-type'),
|
|
||||||
style: "width: 93px;",
|
|
||||||
menuStyle: 'min-width: 93px;'
|
|
||||||
}).on('selected', _.bind(this.onBorderTypeSelect, this))
|
|
||||||
.on('combo:blur', _.bind(this.onComboBlur, this, false));
|
|
||||||
this.BorderType = Asc.c_oDashType.solid;
|
|
||||||
this.cmbBorderType.setValue(this.BorderType);
|
|
||||||
this.lockedControls.push(this.cmbBorderType);
|
|
||||||
|
|
||||||
this.btnChangeShape = new Common.UI.Button({
|
|
||||||
cls: 'btn-icon-default',
|
|
||||||
iconCls: 'btn-change-shape',
|
|
||||||
menu : new Common.UI.Menu({
|
|
||||||
menuAlign: 'tr-br',
|
|
||||||
cls: 'menu-shapes',
|
|
||||||
items: []
|
|
||||||
})
|
|
||||||
});
|
|
||||||
this.btnChangeShape.render( $('#shape-btn-change')) ;
|
|
||||||
this.lockedControls.push(this.btnChangeShape);
|
|
||||||
|
|
||||||
$(this.el).on('click', '#shape-advanced-link', _.bind(this.openAdvancedSettings, this));
|
|
||||||
|
|
||||||
this.FillColorContainer = $('#shape-panel-color-fill');
|
this.FillColorContainer = $('#shape-panel-color-fill');
|
||||||
this.FillImageContainer = $('#shape-panel-image-fill');
|
this.FillImageContainer = $('#shape-panel-image-fill');
|
||||||
this.FillPatternContainer = $('#shape-panel-pattern-fill');
|
this.FillPatternContainer = $('#shape-panel-pattern-fill');
|
||||||
|
|
@ -480,8 +136,6 @@ define([
|
||||||
el.html(this.template({
|
el.html(this.template({
|
||||||
scope: this
|
scope: this
|
||||||
}));
|
}));
|
||||||
|
|
||||||
this.linkAdvanced = $('#shape-advanced-link');
|
|
||||||
},
|
},
|
||||||
|
|
||||||
setApi: function(api) {
|
setApi: function(api) {
|
||||||
|
|
@ -1024,7 +678,6 @@ define([
|
||||||
ChangeSettings: function(props) {
|
ChangeSettings: function(props) {
|
||||||
if (this._initSettings)
|
if (this._initSettings)
|
||||||
this.createDelayedElements();
|
this.createDelayedElements();
|
||||||
this._initSettings = false;
|
|
||||||
|
|
||||||
if (props)
|
if (props)
|
||||||
{
|
{
|
||||||
|
|
@ -1402,7 +1055,229 @@ define([
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
createDelayedControls: function() {
|
||||||
|
var me = this;
|
||||||
|
|
||||||
|
this._arrFillSrc = [
|
||||||
|
{displayValue: this.textColor, value: Asc.c_oAscFill.FILL_TYPE_SOLID},
|
||||||
|
{displayValue: this.textGradientFill, value: Asc.c_oAscFill.FILL_TYPE_GRAD},
|
||||||
|
{displayValue: this.textImageTexture, value: Asc.c_oAscFill.FILL_TYPE_BLIP},
|
||||||
|
{displayValue: this.textPatternFill, value: Asc.c_oAscFill.FILL_TYPE_PATT},
|
||||||
|
{displayValue: this.textNoFill, value: Asc.c_oAscFill.FILL_TYPE_NOFILL}
|
||||||
|
];
|
||||||
|
|
||||||
|
this.cmbFillSrc = new Common.UI.ComboBox({
|
||||||
|
el: $('#shape-combo-fill-src'),
|
||||||
|
cls: 'input-group-nr',
|
||||||
|
style: 'width: 100%;',
|
||||||
|
menuStyle: 'min-width: 190px;',
|
||||||
|
editable: false,
|
||||||
|
data: this._arrFillSrc
|
||||||
|
});
|
||||||
|
this.cmbFillSrc.setValue(this._arrFillSrc[0].value);
|
||||||
|
this.cmbFillSrc.on('selected', _.bind(this.onFillSrcSelect, this));
|
||||||
|
this.fillControls.push(this.cmbFillSrc);
|
||||||
|
|
||||||
|
this.cmbPattern = new Common.UI.ComboDataView({
|
||||||
|
itemWidth: 28,
|
||||||
|
itemHeight: 28,
|
||||||
|
menuMaxHeight: 300,
|
||||||
|
enableKeyEvents: true,
|
||||||
|
cls: 'combo-pattern'
|
||||||
|
});
|
||||||
|
this.cmbPattern.menuPicker.itemTemplate = this.cmbPattern.fieldPicker.itemTemplate = _.template([
|
||||||
|
'<div class="style" id="<%= id %>">',
|
||||||
|
'<img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="combo-pattern-item" ',
|
||||||
|
'width="' + this.cmbPattern.itemWidth + '" height="' + this.cmbPattern.itemHeight + '" ',
|
||||||
|
'style="background-position: -<%= offsetx %>px -<%= offsety %>px;"/>',
|
||||||
|
'</div>'
|
||||||
|
].join(''));
|
||||||
|
this.cmbPattern.render($('#shape-combo-pattern'));
|
||||||
|
this.cmbPattern.openButton.menu.cmpEl.css({
|
||||||
|
'min-width': 178,
|
||||||
|
'max-width': 178
|
||||||
|
});
|
||||||
|
this.cmbPattern.on('click', _.bind(this.onPatternSelect, this));
|
||||||
|
this.cmbPattern.openButton.menu.on('show:after', function () {
|
||||||
|
me.cmbPattern.menuPicker.scroller.update({alwaysVisibleY: true});
|
||||||
|
});
|
||||||
|
this.fillControls.push(this.cmbPattern);
|
||||||
|
|
||||||
|
this.btnInsertFromFile = new Common.UI.Button({
|
||||||
|
el: $('#shape-button-from-file')
|
||||||
|
});
|
||||||
|
this.fillControls.push(this.btnInsertFromFile);
|
||||||
|
|
||||||
|
this.btnInsertFromUrl = new Common.UI.Button({
|
||||||
|
el: $('#shape-button-from-url')
|
||||||
|
});
|
||||||
|
this.fillControls.push(this.btnInsertFromUrl);
|
||||||
|
|
||||||
|
this.btnInsertFromFile.on('click', _.bind(function(btn){
|
||||||
|
if (this.api) this.api.ChangeShapeImageFromFile();
|
||||||
|
this.fireEvent('editcomplete', this);
|
||||||
|
}, this));
|
||||||
|
this.btnInsertFromUrl.on('click', _.bind(this.insertFromUrl, this));
|
||||||
|
|
||||||
|
this._arrFillType = [
|
||||||
|
{displayValue: this.textStretch, value: Asc.c_oAscFillBlipType.STRETCH},
|
||||||
|
{displayValue: this.textTile, value: Asc.c_oAscFillBlipType.TILE}
|
||||||
|
];
|
||||||
|
|
||||||
|
this.cmbFillType = new Common.UI.ComboBox({
|
||||||
|
el: $('#shape-combo-fill-type'),
|
||||||
|
cls: 'input-group-nr',
|
||||||
|
menuStyle: 'min-width: 90px;',
|
||||||
|
editable: false,
|
||||||
|
data: this._arrFillType
|
||||||
|
});
|
||||||
|
this.cmbFillType.setValue(this._arrFillType[0].value);
|
||||||
|
this.cmbFillType.on('selected', _.bind(this.onFillTypeSelect, this));
|
||||||
|
this.fillControls.push(this.cmbFillType);
|
||||||
|
|
||||||
|
this.numTransparency = new Common.UI.MetricSpinner({
|
||||||
|
el: $('#shape-spin-transparency'),
|
||||||
|
step: 1,
|
||||||
|
width: 62,
|
||||||
|
value: '100 %',
|
||||||
|
defaultUnit : "%",
|
||||||
|
maxValue: 100,
|
||||||
|
minValue: 0
|
||||||
|
});
|
||||||
|
this.numTransparency.on('change', _.bind(this.onNumTransparencyChange, this));
|
||||||
|
this.fillControls.push(this.numTransparency);
|
||||||
|
|
||||||
|
this.sldrTransparency = new Common.UI.SingleSlider({
|
||||||
|
el: $('#shape-slider-transparency'),
|
||||||
|
width: 75,
|
||||||
|
minValue: 0,
|
||||||
|
maxValue: 100,
|
||||||
|
value: 100
|
||||||
|
});
|
||||||
|
this.sldrTransparency.on('change', _.bind(this.onTransparencyChange, this));
|
||||||
|
this.sldrTransparency.on('changecomplete', _.bind(this.onTransparencyChangeComplete, this));
|
||||||
|
this.fillControls.push(this.sldrTransparency);
|
||||||
|
|
||||||
|
this.lblTransparencyStart = $(this.el).find('#shape-lbl-transparency-start');
|
||||||
|
this.lblTransparencyEnd = $(this.el).find('#shape-lbl-transparency-end');
|
||||||
|
|
||||||
|
this._arrGradType = [
|
||||||
|
{displayValue: this.textLinear, value: Asc.c_oAscFillGradType.GRAD_LINEAR},
|
||||||
|
{displayValue: this.textRadial, value: Asc.c_oAscFillGradType.GRAD_PATH}
|
||||||
|
];
|
||||||
|
|
||||||
|
this.cmbGradType = new Common.UI.ComboBox({
|
||||||
|
el: $('#shape-combo-grad-type'),
|
||||||
|
cls: 'input-group-nr',
|
||||||
|
menuStyle: 'min-width: 90px;',
|
||||||
|
editable: false,
|
||||||
|
data: this._arrGradType
|
||||||
|
});
|
||||||
|
this.cmbGradType.setValue(this._arrGradType[0].value);
|
||||||
|
this.cmbGradType.on('selected', _.bind(this.onGradTypeSelect, this));
|
||||||
|
this.fillControls.push(this.cmbGradType);
|
||||||
|
|
||||||
|
this._viewDataLinear = [
|
||||||
|
{ offsetx: 0, offsety: 0, type:45, subtype:-1, iconcls:'gradient-left-top' },
|
||||||
|
{ offsetx: 50, offsety: 0, type:90, subtype:4, iconcls:'gradient-top'},
|
||||||
|
{ offsetx: 100, offsety: 0, type:135, subtype:5, iconcls:'gradient-right-top'},
|
||||||
|
{ offsetx: 0, offsety: 50, type:0, subtype:6, iconcls:'gradient-left', cls: 'item-gradient-separator', selected: true},
|
||||||
|
{ offsetx: 100, offsety: 50, type:180, subtype:1, iconcls:'gradient-right'},
|
||||||
|
{ offsetx: 0, offsety: 100, type:315, subtype:2, iconcls:'gradient-left-bottom'},
|
||||||
|
{ offsetx: 50, offsety: 100, type:270, subtype:3, iconcls:'gradient-bottom'},
|
||||||
|
{ offsetx: 100, offsety: 100, type:225, subtype:7, iconcls:'gradient-right-bottom'}
|
||||||
|
];
|
||||||
|
|
||||||
|
this._viewDataRadial = [
|
||||||
|
{ offsetx: 100, offsety: 150, type:2, subtype:5, iconcls:'gradient-radial-center'}
|
||||||
|
];
|
||||||
|
|
||||||
|
this.btnDirection = new Common.UI.Button({
|
||||||
|
cls : 'btn-large-dataview',
|
||||||
|
iconCls : 'item-gradient gradient-left',
|
||||||
|
menu : new Common.UI.Menu({
|
||||||
|
style: 'min-width: 60px;',
|
||||||
|
menuAlign: 'tr-br',
|
||||||
|
items: [
|
||||||
|
{ template: _.template('<div id="id-shape-menu-direction" style="width: 175px; margin: 0 5px;"></div>') }
|
||||||
|
]
|
||||||
|
})
|
||||||
|
});
|
||||||
|
this.btnDirection.on('render:after', function(btn) {
|
||||||
|
me.mnuDirectionPicker = new Common.UI.DataView({
|
||||||
|
el: $('#id-shape-menu-direction'),
|
||||||
|
parentMenu: btn.menu,
|
||||||
|
restoreHeight: 174,
|
||||||
|
store: new Common.UI.DataViewStore(me._viewDataLinear),
|
||||||
|
itemTemplate: _.template('<div id="<%= id %>" class="item-gradient" style="background-position: -<%= offsetx %>px -<%= offsety %>px;"></div>')
|
||||||
|
});
|
||||||
|
});
|
||||||
|
this.btnDirection.render($('#shape-button-direction'));
|
||||||
|
this.mnuDirectionPicker.on('item:click', _.bind(this.onSelectGradient, this, this.btnDirection));
|
||||||
|
this.fillControls.push(this.btnDirection);
|
||||||
|
|
||||||
|
this.sldrGradient = new Common.UI.MultiSliderGradient({
|
||||||
|
el: $('#shape-slider-gradient'),
|
||||||
|
width: 125,
|
||||||
|
minValue: 0,
|
||||||
|
maxValue: 100,
|
||||||
|
values: [0, 100]
|
||||||
|
});
|
||||||
|
this.sldrGradient.on('change', _.bind(this.onGradientChange, this));
|
||||||
|
this.sldrGradient.on('changecomplete', _.bind(this.onGradientChangeComplete, this));
|
||||||
|
this.sldrGradient.on('thumbclick', function(cmp, index){
|
||||||
|
me.GradColor.currentIdx = index;
|
||||||
|
var color = me.GradColor.colors[me.GradColor.currentIdx];
|
||||||
|
me.btnGradColor.setColor(color);
|
||||||
|
me.colorsGrad.select(color,false);
|
||||||
|
});
|
||||||
|
this.sldrGradient.on('thumbdblclick', function(cmp){
|
||||||
|
me.btnGradColor.cmpEl.find('button').dropdown('toggle');
|
||||||
|
});
|
||||||
|
this.fillControls.push(this.sldrGradient);
|
||||||
|
|
||||||
|
this.cmbBorderSize = new Common.UI.ComboBorderSizeEditable({
|
||||||
|
el: $('#shape-combo-border-size'),
|
||||||
|
style: "width: 93px;",
|
||||||
|
txtNoBorders: this.txtNoBorders
|
||||||
|
})
|
||||||
|
.on('selected', _.bind(this.onBorderSizeSelect, this))
|
||||||
|
.on('changed:before',_.bind(this.onBorderSizeChanged, this, true))
|
||||||
|
.on('changed:after', _.bind(this.onBorderSizeChanged, this, false))
|
||||||
|
.on('combo:blur', _.bind(this.onComboBlur, this, false));
|
||||||
|
this.BorderSize = this.cmbBorderSize.store.at(2).get('value');
|
||||||
|
this.cmbBorderSize.setValue(this.BorderSize);
|
||||||
|
this.lockedControls.push(this.cmbBorderSize);
|
||||||
|
|
||||||
|
this.cmbBorderType = new Common.UI.ComboBorderType({
|
||||||
|
el: $('#shape-combo-border-type'),
|
||||||
|
style: "width: 93px;",
|
||||||
|
menuStyle: 'min-width: 93px;'
|
||||||
|
}).on('selected', _.bind(this.onBorderTypeSelect, this))
|
||||||
|
.on('combo:blur', _.bind(this.onComboBlur, this, false));
|
||||||
|
this.BorderType = Asc.c_oDashType.solid;
|
||||||
|
this.cmbBorderType.setValue(this.BorderType);
|
||||||
|
this.lockedControls.push(this.cmbBorderType);
|
||||||
|
|
||||||
|
this.btnChangeShape = new Common.UI.Button({
|
||||||
|
cls: 'btn-icon-default',
|
||||||
|
iconCls: 'btn-change-shape',
|
||||||
|
menu : new Common.UI.Menu({
|
||||||
|
menuAlign: 'tr-br',
|
||||||
|
cls: 'menu-shapes',
|
||||||
|
items: []
|
||||||
|
})
|
||||||
|
});
|
||||||
|
this.btnChangeShape.render( $('#shape-btn-change')) ;
|
||||||
|
this.lockedControls.push(this.btnChangeShape);
|
||||||
|
|
||||||
|
this.linkAdvanced = $('#shape-advanced-link');
|
||||||
|
$(this.el).on('click', '#shape-advanced-link', _.bind(this.openAdvancedSettings, this));
|
||||||
|
},
|
||||||
|
|
||||||
createDelayedElements: function() {
|
createDelayedElements: function() {
|
||||||
|
this.createDelayedControls();
|
||||||
|
|
||||||
var global_hatch_menu_map = [
|
var global_hatch_menu_map = [
|
||||||
0,1,3,2,4,
|
0,1,3,2,4,
|
||||||
53,5,6,7,8,
|
53,5,6,7,8,
|
||||||
|
|
@ -1434,14 +1309,33 @@ define([
|
||||||
this.PatternFillType = this.patternViewData[0].type;
|
this.PatternFillType = this.patternViewData[0].type;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
this.fillAutoShapes();
|
this.fillAutoShapes();
|
||||||
this.UpdateThemeColors();
|
this.UpdateThemeColors();
|
||||||
|
this._initSettings = false;
|
||||||
},
|
},
|
||||||
|
|
||||||
onInitStandartTextures: function(texture) {
|
onInitStandartTextures: function(texture) {
|
||||||
var me = this;
|
var me = this;
|
||||||
if (texture && texture.length>0){
|
if (texture && texture.length>0){
|
||||||
|
if (!this.btnTexture) {
|
||||||
|
this.btnTexture = new Common.UI.ComboBox({
|
||||||
|
el: $('#shape-combo-fill-texture'),
|
||||||
|
template: _.template([
|
||||||
|
'<div class="input-group combobox combo-dataview-menu input-group-nr dropdown-toggle" tabindex="0" data-toggle="dropdown">',
|
||||||
|
'<div class="form-control text" style="width: 90px;">' + this.textSelectTexture + '</div>',
|
||||||
|
'<div style="display: table-cell;"></div>',
|
||||||
|
'<button type="button" class="btn btn-default"><span class="caret img-commonctrl"></span></button>',
|
||||||
|
'</div>'
|
||||||
|
].join(''))
|
||||||
|
});
|
||||||
|
this.textureMenu = new Common.UI.Menu({
|
||||||
|
items: [
|
||||||
|
{ template: _.template('<div id="id-shape-menu-texture" style="width: 233px; margin: 0 5px;"></div>') }
|
||||||
|
]
|
||||||
|
});
|
||||||
|
this.textureMenu.render($('#shape-combo-fill-texture'));
|
||||||
|
this.fillControls.push(this.btnTexture);
|
||||||
|
}
|
||||||
var texturearray = [];
|
var texturearray = [];
|
||||||
_.each(texture, function(item){
|
_.each(texture, function(item){
|
||||||
texturearray.push({
|
texturearray.push({
|
||||||
|
|
@ -1521,6 +1415,104 @@ define([
|
||||||
},
|
},
|
||||||
|
|
||||||
UpdateThemeColors: function() {
|
UpdateThemeColors: function() {
|
||||||
|
if (!this.btnBackColor) {
|
||||||
|
this.btnBackColor = new Common.UI.ColorButton({
|
||||||
|
style: "width:45px;",
|
||||||
|
menu : new Common.UI.Menu({
|
||||||
|
items: [
|
||||||
|
{ template: _.template('<div id="shape-back-color-menu" style="width: 165px; height: 220px; margin: 10px;"></div>') },
|
||||||
|
{ template: _.template('<a id="shape-back-color-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
|
||||||
|
]
|
||||||
|
})
|
||||||
|
});
|
||||||
|
this.btnBackColor.render( $('#shape-back-color-btn'));
|
||||||
|
this.btnBackColor.setColor('transparent');
|
||||||
|
this.fillControls.push(this.btnBackColor);
|
||||||
|
this.colorsBack = new Common.UI.ThemeColorPalette({
|
||||||
|
el: $('#shape-back-color-menu'),
|
||||||
|
value: 'transparent',
|
||||||
|
transparent: true
|
||||||
|
});
|
||||||
|
this.colorsBack.on('select', _.bind(this.onColorsBackSelect, this));
|
||||||
|
$(this.el).on('click', '#shape-back-color-new', _.bind(this.addNewColor, this, this.colorsBack, this.btnBackColor));
|
||||||
|
|
||||||
|
this.btnFGColor = new Common.UI.ColorButton({
|
||||||
|
style: "width:45px;",
|
||||||
|
menu : new Common.UI.Menu({
|
||||||
|
items: [
|
||||||
|
{ template: _.template('<div id="shape-foreground-color-menu" style="width: 165px; height: 220px; margin: 10px;"></div>') },
|
||||||
|
{ template: _.template('<a id="shape-foreground-color-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
|
||||||
|
]
|
||||||
|
})
|
||||||
|
});
|
||||||
|
this.btnFGColor.render( $('#shape-foreground-color-btn'));
|
||||||
|
this.btnFGColor.setColor('000000');
|
||||||
|
this.fillControls.push(this.btnFGColor);
|
||||||
|
this.colorsFG = new Common.UI.ThemeColorPalette({
|
||||||
|
el: $('#shape-foreground-color-menu'),
|
||||||
|
value: '000000'
|
||||||
|
});
|
||||||
|
this.colorsFG.on('select', _.bind(this.onColorsFGSelect, this));
|
||||||
|
$(this.el).on('click', '#shape-foreground-color-new', _.bind(this.addNewColor, this, this.colorsFG, this.btnFGColor));
|
||||||
|
|
||||||
|
this.btnBGColor = new Common.UI.ColorButton({
|
||||||
|
style: "width:45px;",
|
||||||
|
menu : new Common.UI.Menu({
|
||||||
|
items: [
|
||||||
|
{ template: _.template('<div id="shape-background-color-menu" style="width: 165px; height: 220px; margin: 10px;"></div>') },
|
||||||
|
{ template: _.template('<a id="shape-background-color-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
|
||||||
|
]
|
||||||
|
})
|
||||||
|
});
|
||||||
|
this.btnBGColor.render( $('#shape-background-color-btn'));
|
||||||
|
this.btnBGColor.setColor('ffffff');
|
||||||
|
this.fillControls.push(this.btnBGColor);
|
||||||
|
this.colorsBG = new Common.UI.ThemeColorPalette({
|
||||||
|
el: $('#shape-background-color-menu'),
|
||||||
|
value: 'ffffff'
|
||||||
|
});
|
||||||
|
this.colorsBG.on('select', _.bind(this.onColorsBGSelect, this));
|
||||||
|
$(this.el).on('click', '#shape-background-color-new', _.bind(this.addNewColor, this, this.colorsBG, this.btnBGColor));
|
||||||
|
|
||||||
|
this.btnGradColor = new Common.UI.ColorButton({
|
||||||
|
style: "width:45px;",
|
||||||
|
menu : new Common.UI.Menu({
|
||||||
|
items: [
|
||||||
|
{ template: _.template('<div id="shape-gradient-color-menu" style="width: 165px; height: 220px; margin: 10px;"></div>') },
|
||||||
|
{ template: _.template('<a id="shape-gradient-color-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
|
||||||
|
]
|
||||||
|
})
|
||||||
|
});
|
||||||
|
this.btnGradColor.render( $('#shape-gradient-color-btn'));
|
||||||
|
this.btnGradColor.setColor('000000');
|
||||||
|
this.fillControls.push(this.btnGradColor);
|
||||||
|
this.colorsGrad = new Common.UI.ThemeColorPalette({
|
||||||
|
el: $('#shape-gradient-color-menu'),
|
||||||
|
value: '000000'
|
||||||
|
});
|
||||||
|
this.colorsGrad.on('select', _.bind(this.onColorsGradientSelect, this));
|
||||||
|
$(this.el).on('click', '#shape-gradient-color-new', _.bind(this.addNewColor, this, this.colorsGrad, this.btnGradColor));
|
||||||
|
|
||||||
|
this.btnBorderColor = new Common.UI.ColorButton({
|
||||||
|
style: "width:45px;",
|
||||||
|
menu : new Common.UI.Menu({
|
||||||
|
items: [
|
||||||
|
{ template: _.template('<div id="shape-border-color-menu" style="width: 165px; height: 220px; margin: 10px;"></div>') },
|
||||||
|
{ template: _.template('<a id="shape-border-color-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
|
||||||
|
]
|
||||||
|
})
|
||||||
|
});
|
||||||
|
this.btnBorderColor.render( $('#shape-border-color-btn'));
|
||||||
|
this.btnBorderColor.setColor('000000');
|
||||||
|
this.lockedControls.push(this.btnBorderColor);
|
||||||
|
this.colorsBorder = new Common.UI.ThemeColorPalette({
|
||||||
|
el: $('#shape-border-color-menu'),
|
||||||
|
value: '000000'
|
||||||
|
});
|
||||||
|
this.colorsBorder.on('select', _.bind(this.onColorsBorderSelect, this));
|
||||||
|
$(this.el).on('click', '#shape-border-color-new', _.bind(this.addNewColor, this, this.colorsBorder, this.btnBorderColor));
|
||||||
|
}
|
||||||
|
|
||||||
this.colorsBorder.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
|
this.colorsBorder.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
|
||||||
this.colorsBack.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
|
this.colorsBack.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
|
||||||
this.colorsFG.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
|
this.colorsFG.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
|
||||||
|
|
@ -1560,6 +1552,8 @@ define([
|
||||||
},
|
},
|
||||||
|
|
||||||
disableControls: function(disable, disableFill) {
|
disableControls: function(disable, disableFill) {
|
||||||
|
if (this._initSettings) return;
|
||||||
|
|
||||||
this.disableFillPanels(disable || disableFill);
|
this.disableFillPanels(disable || disableFill);
|
||||||
if (this._state.DisabledControls!==disable) {
|
if (this._state.DisabledControls!==disable) {
|
||||||
this._state.DisabledControls = disable;
|
this._state.DisabledControls = disable;
|
||||||
|
|
|
||||||
|
|
@ -68,7 +68,6 @@ define([
|
||||||
},
|
},
|
||||||
|
|
||||||
initialize: function () {
|
initialize: function () {
|
||||||
var me = this;
|
|
||||||
this._initSettings = true;
|
this._initSettings = true;
|
||||||
this._originalProps = null;
|
this._originalProps = null;
|
||||||
this._noApply = true;
|
this._noApply = true;
|
||||||
|
|
@ -131,241 +130,6 @@ define([
|
||||||
this.cmbFillSrc.setValue('');
|
this.cmbFillSrc.setValue('');
|
||||||
this.cmbFillSrc.on('selected', _.bind(this.onFillSrcSelect, this));
|
this.cmbFillSrc.on('selected', _.bind(this.onFillSrcSelect, this));
|
||||||
|
|
||||||
this.btnBackColor = new Common.UI.ColorButton({
|
|
||||||
style: "width:45px;",
|
|
||||||
disabled: true,
|
|
||||||
menu : new Common.UI.Menu({
|
|
||||||
items: [
|
|
||||||
{ template: _.template('<div id="slide-back-color-menu" style="width: 165px; height: 220px; margin: 10px;"></div>') },
|
|
||||||
{ template: _.template('<a id="slide-back-color-new" style="padding-left:12px;">' + me.textNewColor + '</a>') }
|
|
||||||
]
|
|
||||||
})
|
|
||||||
});
|
|
||||||
this.FillItems.push(this.btnBackColor);
|
|
||||||
|
|
||||||
this.btnBackColor.on('render:after', function(btn) {
|
|
||||||
me.colorsBack = new Common.UI.ThemeColorPalette({
|
|
||||||
el: $('#slide-back-color-menu'),
|
|
||||||
value: 'ffffff',
|
|
||||||
transparent: true
|
|
||||||
});
|
|
||||||
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([
|
|
||||||
'<div class="style" id="<%= id %>">',
|
|
||||||
'<img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="combo-pattern-item" ',
|
|
||||||
'width="' + this.cmbPattern.itemWidth + '" height="' + this.cmbPattern.itemHeight + '" ',
|
|
||||||
'style="background-position: -<%= offsetx %>px -<%= offsety %>px;"/>',
|
|
||||||
'</div>'
|
|
||||||
].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('<div id="slide-foreground-color-menu" style="width: 165px; height: 220px; margin: 10px;"></div>') },
|
|
||||||
{ template: _.template('<a id="slide-foreground-color-new" style="padding-left:12px;">' + me.textNewColor + '</a>') }
|
|
||||||
]
|
|
||||||
})
|
|
||||||
});
|
|
||||||
|
|
||||||
this.btnFGColor.on('render:after', function(btn) {
|
|
||||||
me.colorsFG = new Common.UI.ThemeColorPalette({
|
|
||||||
el: $('#slide-foreground-color-menu'),
|
|
||||||
value: '000000'
|
|
||||||
});
|
|
||||||
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('<div id="slide-background-color-menu" style="width: 165px; height: 220px; margin: 10px;"></div>') },
|
|
||||||
{ template: _.template('<a id="slide-background-color-new" style="padding-left:12px;">' + me.textNewColor + '</a>') }
|
|
||||||
]
|
|
||||||
})
|
|
||||||
});
|
|
||||||
|
|
||||||
this.btnBGColor.on('render:after', function(btn) {
|
|
||||||
me.colorsBG = new Common.UI.ThemeColorPalette({
|
|
||||||
el: $('#slide-background-color-menu'),
|
|
||||||
value: 'ffffff'
|
|
||||||
});
|
|
||||||
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: Asc.c_oAscFillBlipType.STRETCH},
|
|
||||||
{displayValue: this.textTile, value: Asc.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([
|
|
||||||
'<div class="input-group combobox combo-dataview-menu input-group-nr dropdown-toggle" tabindex="0" data-toggle="dropdown">',
|
|
||||||
'<div class="form-control text" style="width: 90px;">' + this.textSelectTexture + '</div>',
|
|
||||||
'<div style="display: table-cell;"></div>',
|
|
||||||
'<button type="button" class="btn btn-default"><span class="caret img-commonctrl"></span></button>',
|
|
||||||
'</div>'
|
|
||||||
].join(''))
|
|
||||||
});
|
|
||||||
this.textureMenu = new Common.UI.Menu({
|
|
||||||
items: [
|
|
||||||
{ template: _.template('<div id="id-slide-menu-texture" style="width: 233px; margin: 0 5px;"></div>') }
|
|
||||||
]
|
|
||||||
});
|
|
||||||
this.textureMenu.render($('#slide-combo-fill-texture'));
|
|
||||||
this.FillItems.push(this.btnTexture);
|
|
||||||
|
|
||||||
this._arrGradType = [
|
|
||||||
{displayValue: this.textLinear, value: Asc.c_oAscFillGradType.GRAD_LINEAR},
|
|
||||||
{displayValue: this.textRadial, value: Asc.c_oAscFillGradType.GRAD_PATH}
|
|
||||||
];
|
|
||||||
|
|
||||||
this.cmbGradType = new Common.UI.ComboBox({
|
|
||||||
el: $('#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('<div id="id-slide-menu-direction" style="width: 175px; margin: 0 5px;"></div>') }
|
|
||||||
]
|
|
||||||
})
|
|
||||||
});
|
|
||||||
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('<div id="<%= id %>" class="item-gradient" style="background-position: -<%= offsetx %>px -<%= offsety %>px;"></div>')
|
|
||||||
});
|
|
||||||
});
|
|
||||||
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('<div id="slide-gradient-color-menu" style="width: 165px; height: 220px; margin: 10px;"></div>') },
|
|
||||||
{ template: _.template('<a id="slide-gradient-color-new" style="padding-left:12px;">' + me.textNewColor + '</a>') }
|
|
||||||
]
|
|
||||||
})
|
|
||||||
});
|
|
||||||
this.btnGradColor.on('render:after', function(btn) {
|
|
||||||
me.colorsGrad = new Common.UI.ThemeColorPalette({
|
|
||||||
el: $('#slide-gradient-color-menu'),
|
|
||||||
value: '000000'
|
|
||||||
});
|
|
||||||
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.FillColorContainer = $('#slide-panel-color-fill');
|
||||||
this.FillImageContainer = $('#slide-panel-image-fill');
|
this.FillImageContainer = $('#slide-panel-image-fill');
|
||||||
this.FillPatternContainer = $('#slide-panel-pattern-fill');
|
this.FillPatternContainer = $('#slide-panel-pattern-fill');
|
||||||
|
|
@ -862,7 +626,142 @@ define([
|
||||||
})).show();
|
})).show();
|
||||||
},
|
},
|
||||||
|
|
||||||
|
createDelayedControls: function() {
|
||||||
|
var me = this;
|
||||||
|
|
||||||
|
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([
|
||||||
|
'<div class="style" id="<%= id %>">',
|
||||||
|
'<img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="combo-pattern-item" ',
|
||||||
|
'width="' + this.cmbPattern.itemWidth + '" height="' + this.cmbPattern.itemHeight + '" ',
|
||||||
|
'style="background-position: -<%= offsetx %>px -<%= offsety %>px;"/>',
|
||||||
|
'</div>'
|
||||||
|
].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.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: Asc.c_oAscFillBlipType.STRETCH},
|
||||||
|
{displayValue: this.textTile, value: Asc.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._arrGradType = [
|
||||||
|
{displayValue: this.textLinear, value: Asc.c_oAscFillGradType.GRAD_LINEAR},
|
||||||
|
{displayValue: this.textRadial, value: Asc.c_oAscFillGradType.GRAD_PATH}
|
||||||
|
];
|
||||||
|
|
||||||
|
this.cmbGradType = new Common.UI.ComboBox({
|
||||||
|
el: $('#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('<div id="id-slide-menu-direction" style="width: 175px; margin: 0 5px;"></div>') }
|
||||||
|
]
|
||||||
|
})
|
||||||
|
});
|
||||||
|
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('<div id="<%= id %>" class="item-gradient" style="background-position: -<%= offsetx %>px -<%= offsety %>px;"></div>')
|
||||||
|
});
|
||||||
|
});
|
||||||
|
this.btnDirection.render($('#slide-button-direction'));
|
||||||
|
this.mnuDirectionPicker.on('item:click', _.bind(this.onSelectGradient, this, this.btnDirection));
|
||||||
|
this.FillItems.push(this.btnDirection);
|
||||||
|
|
||||||
|
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);
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
createDelayedElements: function() {
|
createDelayedElements: function() {
|
||||||
|
this.createDelayedControls();
|
||||||
|
|
||||||
var global_hatch_menu_map = [
|
var global_hatch_menu_map = [
|
||||||
0,1,3,2,4,
|
0,1,3,2,4,
|
||||||
53,5,6,7,8,
|
53,5,6,7,8,
|
||||||
|
|
@ -895,11 +794,31 @@ define([
|
||||||
}
|
}
|
||||||
|
|
||||||
this.UpdateThemeColors();
|
this.UpdateThemeColors();
|
||||||
|
this._initSettings = false;
|
||||||
},
|
},
|
||||||
|
|
||||||
onInitStandartTextures: function(texture) {
|
onInitStandartTextures: function(texture) {
|
||||||
var me = this;
|
var me = this;
|
||||||
if (texture && texture.length>0){
|
if (texture && texture.length>0){
|
||||||
|
if (!this.btnTexture) {
|
||||||
|
this.btnTexture = new Common.UI.ComboBox({
|
||||||
|
el: $('#slide-combo-fill-texture'),
|
||||||
|
template: _.template([
|
||||||
|
'<div class="input-group combobox combo-dataview-menu input-group-nr dropdown-toggle" tabindex="0" data-toggle="dropdown">',
|
||||||
|
'<div class="form-control text" style="width: 90px;">' + this.textSelectTexture + '</div>',
|
||||||
|
'<div style="display: table-cell;"></div>',
|
||||||
|
'<button type="button" class="btn btn-default"><span class="caret img-commonctrl"></span></button>',
|
||||||
|
'</div>'
|
||||||
|
].join(''))
|
||||||
|
});
|
||||||
|
this.textureMenu = new Common.UI.Menu({
|
||||||
|
items: [
|
||||||
|
{ template: _.template('<div id="id-slide-menu-texture" style="width: 233px; margin: 0 5px;"></div>') }
|
||||||
|
]
|
||||||
|
});
|
||||||
|
this.textureMenu.render($('#slide-combo-fill-texture'));
|
||||||
|
this.FillItems.push(this.btnTexture);
|
||||||
|
}
|
||||||
var texturearray = [];
|
var texturearray = [];
|
||||||
_.each(texture, function(item){
|
_.each(texture, function(item){
|
||||||
texturearray.push({
|
texturearray.push({
|
||||||
|
|
@ -1060,6 +979,86 @@ define([
|
||||||
},
|
},
|
||||||
|
|
||||||
UpdateThemeColors: function() {
|
UpdateThemeColors: function() {
|
||||||
|
if (!this.btnBackColor) {
|
||||||
|
this.btnBackColor = new Common.UI.ColorButton({
|
||||||
|
style: "width:45px;",
|
||||||
|
disabled: true,
|
||||||
|
menu : new Common.UI.Menu({
|
||||||
|
items: [
|
||||||
|
{ template: _.template('<div id="slide-back-color-menu" style="width: 165px; height: 220px; margin: 10px;"></div>') },
|
||||||
|
{ template: _.template('<a id="slide-back-color-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
|
||||||
|
]
|
||||||
|
})
|
||||||
|
});
|
||||||
|
this.btnBackColor.render( $('#slide-back-color-btn'));
|
||||||
|
this.btnBackColor.setColor('ffffff');
|
||||||
|
this.FillItems.push(this.btnBackColor);
|
||||||
|
this.colorsBack = new Common.UI.ThemeColorPalette({
|
||||||
|
el: $('#slide-back-color-menu'),
|
||||||
|
value: 'ffffff',
|
||||||
|
transparent: true
|
||||||
|
});
|
||||||
|
this.colorsBack.on('select', _.bind(this.onColorsBackSelect, this));
|
||||||
|
$(this.el).on('click', '#slide-back-color-new', _.bind(this.addNewColor, this, this.colorsBack, this.btnBackColor));
|
||||||
|
|
||||||
|
this.btnFGColor = new Common.UI.ColorButton({
|
||||||
|
style: "width:45px;",
|
||||||
|
menu : new Common.UI.Menu({
|
||||||
|
items: [
|
||||||
|
{ template: _.template('<div id="slide-foreground-color-menu" style="width: 165px; height: 220px; margin: 10px;"></div>') },
|
||||||
|
{ template: _.template('<a id="slide-foreground-color-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
|
||||||
|
]
|
||||||
|
})
|
||||||
|
});
|
||||||
|
this.btnFGColor.render( $('#slide-foreground-color-btn'));
|
||||||
|
this.btnFGColor.setColor('000000');
|
||||||
|
this.FillItems.push(this.btnFGColor);
|
||||||
|
this.colorsFG = new Common.UI.ThemeColorPalette({
|
||||||
|
el: $('#slide-foreground-color-menu'),
|
||||||
|
value: '000000'
|
||||||
|
});
|
||||||
|
this.colorsFG.on('select', _.bind(this.onColorsFGSelect, this));
|
||||||
|
$(this.el).on('click', '#slide-foreground-color-new', _.bind(this.addNewColor, this, this.colorsFG, this.btnFGColor));
|
||||||
|
|
||||||
|
this.btnBGColor = new Common.UI.ColorButton({
|
||||||
|
style: "width:45px;",
|
||||||
|
menu : new Common.UI.Menu({
|
||||||
|
items: [
|
||||||
|
{ template: _.template('<div id="slide-background-color-menu" style="width: 165px; height: 220px; margin: 10px;"></div>') },
|
||||||
|
{ template: _.template('<a id="slide-background-color-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
|
||||||
|
]
|
||||||
|
})
|
||||||
|
});
|
||||||
|
this.btnBGColor.render( $('#slide-background-color-btn'));
|
||||||
|
this.btnBGColor.setColor('ffffff');
|
||||||
|
this.FillItems.push(this.btnBGColor);
|
||||||
|
this.colorsBG = new Common.UI.ThemeColorPalette({
|
||||||
|
el: $('#slide-background-color-menu'),
|
||||||
|
value: 'ffffff'
|
||||||
|
});
|
||||||
|
this.colorsBG.on('select', _.bind(this.onColorsBGSelect, this));
|
||||||
|
$(this.el).on('click', '#slide-background-color-new', _.bind(this.addNewColor, this, this.colorsBG, this.btnBGColor));
|
||||||
|
|
||||||
|
this.btnGradColor = new Common.UI.ColorButton({
|
||||||
|
style: "width:45px;",
|
||||||
|
menu : new Common.UI.Menu({
|
||||||
|
items: [
|
||||||
|
{ template: _.template('<div id="slide-gradient-color-menu" style="width: 165px; height: 220px; margin: 10px;"></div>') },
|
||||||
|
{ template: _.template('<a id="slide-gradient-color-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
|
||||||
|
]
|
||||||
|
})
|
||||||
|
});
|
||||||
|
this.btnGradColor.render( $('#slide-gradient-color-btn'));
|
||||||
|
this.btnGradColor.setColor('000000');
|
||||||
|
this.FillItems.push(this.btnGradColor);
|
||||||
|
this.colorsGrad = new Common.UI.ThemeColorPalette({
|
||||||
|
el: $('#slide-gradient-color-menu'),
|
||||||
|
value: '000000'
|
||||||
|
});
|
||||||
|
this.colorsGrad.on('select', _.bind(this.onColorsGradientSelect, this));
|
||||||
|
$(this.el).on('click', '#slide-gradient-color-new', _.bind(this.addNewColor, this, this.colorsGrad, this.btnGradColor));
|
||||||
|
}
|
||||||
|
|
||||||
this.colorsBack.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
|
this.colorsBack.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
|
||||||
this.colorsFG.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
|
this.colorsFG.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
|
||||||
this.colorsBG.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
|
this.colorsBG.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
|
||||||
|
|
@ -1076,7 +1075,6 @@ define([
|
||||||
ChangeSettings: function(props) {
|
ChangeSettings: function(props) {
|
||||||
if (this._initSettings)
|
if (this._initSettings)
|
||||||
this.createDelayedElements();
|
this.createDelayedElements();
|
||||||
this._initSettings = false;
|
|
||||||
|
|
||||||
if (props)
|
if (props)
|
||||||
{
|
{
|
||||||
|
|
@ -1405,6 +1403,8 @@ define([
|
||||||
},
|
},
|
||||||
|
|
||||||
SetSlideDisabled: function(background, effects, timing) {
|
SetSlideDisabled: function(background, effects, timing) {
|
||||||
|
if (this._initSettings) return;
|
||||||
|
|
||||||
if (background !== this._stateDisabled.background) {
|
if (background !== this._stateDisabled.background) {
|
||||||
this.cmbFillSrc.setDisabled(background);
|
this.cmbFillSrc.setDisabled(background);
|
||||||
for (var i=0; i<this.FillItems.length; i++) {
|
for (var i=0; i<this.FillItems.length; i++) {
|
||||||
|
|
|
||||||
|
|
@ -69,7 +69,7 @@ define([
|
||||||
},
|
},
|
||||||
|
|
||||||
initialize: function () {
|
initialize: function () {
|
||||||
var me = this;
|
this._initSettings = true;
|
||||||
|
|
||||||
this._state = {
|
this._state = {
|
||||||
TemplateId: 0,
|
TemplateId: 0,
|
||||||
|
|
@ -93,185 +93,6 @@ define([
|
||||||
this._noApply = false;
|
this._noApply = false;
|
||||||
|
|
||||||
this.render();
|
this.render();
|
||||||
|
|
||||||
this.chHeader = new Common.UI.CheckBox({
|
|
||||||
el: $('#table-checkbox-header'),
|
|
||||||
labelText: this.textHeader
|
|
||||||
});
|
|
||||||
this.lockedControls.push(this.chHeader);
|
|
||||||
|
|
||||||
this.chTotal = new Common.UI.CheckBox({
|
|
||||||
el: $('#table-checkbox-total'),
|
|
||||||
labelText: this.textTotal
|
|
||||||
});
|
|
||||||
this.lockedControls.push(this.chTotal);
|
|
||||||
|
|
||||||
this.chBanded = new Common.UI.CheckBox({
|
|
||||||
el: $('#table-checkbox-banded'),
|
|
||||||
labelText: this.textBanded
|
|
||||||
});
|
|
||||||
this.lockedControls.push(this.chBanded);
|
|
||||||
|
|
||||||
this.chFirst = new Common.UI.CheckBox({
|
|
||||||
el: $('#table-checkbox-first'),
|
|
||||||
labelText: this.textFirst
|
|
||||||
});
|
|
||||||
this.lockedControls.push(this.chFirst);
|
|
||||||
|
|
||||||
this.chLast = new Common.UI.CheckBox({
|
|
||||||
el: $('#table-checkbox-last'),
|
|
||||||
labelText: this.textLast
|
|
||||||
});
|
|
||||||
this.lockedControls.push(this.chLast);
|
|
||||||
|
|
||||||
this.chColBanded = new Common.UI.CheckBox({
|
|
||||||
el: $('#table-checkbox-col-banded'),
|
|
||||||
labelText: this.textBanded
|
|
||||||
});
|
|
||||||
this.lockedControls.push(this.chColBanded);
|
|
||||||
|
|
||||||
this.chHeader.on('change', _.bind(this.onCheckTemplateChange, this, 0));
|
|
||||||
this.chTotal.on('change', _.bind(this.onCheckTemplateChange, this, 1));
|
|
||||||
this.chBanded.on('change', _.bind(this.onCheckTemplateChange, this, 2));
|
|
||||||
this.chFirst.on('change', _.bind(this.onCheckTemplateChange, this, 3));
|
|
||||||
this.chLast.on('change', _.bind(this.onCheckTemplateChange, this, 4));
|
|
||||||
this.chColBanded.on('change', _.bind(this.onCheckTemplateChange, this, 5));
|
|
||||||
|
|
||||||
this.cmbTableTemplate = new Common.UI.ComboDataView({
|
|
||||||
itemWidth: 70,
|
|
||||||
itemHeight: 50,
|
|
||||||
menuMaxHeight: 300,
|
|
||||||
enableKeyEvents: true,
|
|
||||||
cls: 'combo-template'
|
|
||||||
});
|
|
||||||
this.cmbTableTemplate.render($('#table-combo-template'));
|
|
||||||
this.cmbTableTemplate.openButton.menu.cmpEl.css({
|
|
||||||
'min-width': 175,
|
|
||||||
'max-width': 175
|
|
||||||
});
|
|
||||||
this.cmbTableTemplate.on('click', _.bind(this.onTableTemplateSelect, this));
|
|
||||||
this.cmbTableTemplate.openButton.menu.on('show:after', function () {
|
|
||||||
me.cmbTableTemplate.menuPicker.scroller.update({alwaysVisibleY: true});
|
|
||||||
});
|
|
||||||
this.lockedControls.push(this.cmbTableTemplate);
|
|
||||||
|
|
||||||
var _arrBorderPosition = [
|
|
||||||
['l', 'btn-borders-small btn-position-left', 'table-button-border-left', this.tipLeft],
|
|
||||||
['c','btn-borders-small btn-position-inner-vert', 'table-button-border-inner-vert', this.tipInnerVert],
|
|
||||||
['r','btn-borders-small btn-position-right', 'table-button-border-right', this.tipRight],
|
|
||||||
['t','btn-borders-small btn-position-top', 'table-button-border-top', this.tipTop],
|
|
||||||
['m','btn-borders-small btn-position-inner-hor', 'table-button-border-inner-hor', this.tipInnerHor],
|
|
||||||
['b', 'btn-borders-small btn-position-bottom', 'table-button-border-bottom', this.tipBottom],
|
|
||||||
['cm', 'btn-borders-small btn-position-inner', 'table-button-border-inner', this.tipInner],
|
|
||||||
['lrtb', 'btn-borders-small btn-position-outer', 'table-button-border-outer', this.tipOuter],
|
|
||||||
['lrtbcm', 'btn-borders-small btn-position-all', 'table-button-border-all', this.tipAll],
|
|
||||||
['', 'btn-borders-small btn-position-none', 'table-button-border-none', this.tipNone]
|
|
||||||
];
|
|
||||||
|
|
||||||
this._btnsBorderPosition = [];
|
|
||||||
_.each(_arrBorderPosition, function(item, index, list){
|
|
||||||
var _btn = new Common.UI.Button({
|
|
||||||
cls: 'btn-toolbar',
|
|
||||||
iconCls: item[1],
|
|
||||||
strId :item[0],
|
|
||||||
hint: item[3]
|
|
||||||
});
|
|
||||||
_btn.render( $('#'+item[2])) ;
|
|
||||||
_btn.on('click', _.bind(this.onBtnBordersClick, this));
|
|
||||||
this._btnsBorderPosition.push( _btn );
|
|
||||||
this.lockedControls.push(_btn);
|
|
||||||
}, this);
|
|
||||||
|
|
||||||
this.cmbBorderSize = new Common.UI.ComboBorderSize({
|
|
||||||
el: $('#table-combo-border-size'),
|
|
||||||
style: "width: 93px;"
|
|
||||||
});
|
|
||||||
this.BorderSize = this.cmbBorderSize.store.at(2).get('value');
|
|
||||||
this.cmbBorderSize.setValue(this.BorderSize);
|
|
||||||
this.cmbBorderSize.on('selected', _.bind(this.onBorderSizeSelect, this));
|
|
||||||
this.lockedControls.push(this.cmbBorderSize);
|
|
||||||
|
|
||||||
this.btnBorderColor = new Common.UI.ColorButton({
|
|
||||||
style: "width:45px;",
|
|
||||||
menu : new Common.UI.Menu({
|
|
||||||
items: [
|
|
||||||
{ template: _.template('<div id="table-border-color-menu" style="width: 165px; height: 220px; margin: 10px;"></div>') },
|
|
||||||
{ template: _.template('<a id="table-border-color-new" style="padding-left:12px;">' + me.textNewColor + '</a>') }
|
|
||||||
]
|
|
||||||
})
|
|
||||||
});
|
|
||||||
|
|
||||||
this.btnBorderColor.on('render:after', function(btn) {
|
|
||||||
me.borderColor = new Common.UI.ThemeColorPalette({
|
|
||||||
el: $('#table-border-color-menu')
|
|
||||||
});
|
|
||||||
me.borderColor.on('select', _.bind(me.onColorsBorderSelect, me));
|
|
||||||
});
|
|
||||||
this.btnBorderColor.render( $('#table-border-color-btn'));
|
|
||||||
this.btnBorderColor.setColor('000000');
|
|
||||||
$(this.el).on('click', '#table-border-color-new', _.bind(this.addNewColor, this, this.borderColor, this.btnBorderColor));
|
|
||||||
this.lockedControls.push(this.btnBorderColor);
|
|
||||||
|
|
||||||
this.btnBackColor = new Common.UI.ColorButton({
|
|
||||||
style: "width:45px;",
|
|
||||||
menu : new Common.UI.Menu({
|
|
||||||
items: [
|
|
||||||
{ template: _.template('<div id="table-back-color-menu" style="width: 165px; height: 220px; margin: 10px;"></div>') },
|
|
||||||
{ template: _.template('<a id="table-back-color-new" style="padding-left:12px;">' + me.textNewColor + '</a>') }
|
|
||||||
]
|
|
||||||
})
|
|
||||||
});
|
|
||||||
|
|
||||||
this.btnBackColor.on('render:after', function(btn) {
|
|
||||||
me.colorsBack = new Common.UI.ThemeColorPalette({
|
|
||||||
el: $('#table-back-color-menu'),
|
|
||||||
transparent: true
|
|
||||||
});
|
|
||||||
me.colorsBack.on('select', _.bind(me.onColorsBackSelect, me));
|
|
||||||
});
|
|
||||||
this.btnBackColor.render( $('#table-back-color-btn'));
|
|
||||||
$(this.el).on('click', '#table-back-color-new', _.bind(this.addNewColor, this, this.colorsBack, this.btnBackColor));
|
|
||||||
this.lockedControls.push(this.btnBackColor);
|
|
||||||
|
|
||||||
this.btnEdit = new Common.UI.Button({
|
|
||||||
cls: 'btn-icon-default',
|
|
||||||
iconCls: 'btn-edit-table',
|
|
||||||
menu : new Common.UI.Menu({
|
|
||||||
menuAlign: 'tr-br',
|
|
||||||
items: [
|
|
||||||
{ caption: this.selectRowText, value: 0 },
|
|
||||||
{ caption: this.selectColumnText, value: 1 },
|
|
||||||
{ caption: this.selectCellText, value: 2 },
|
|
||||||
{ caption: this.selectTableText, value: 3 },
|
|
||||||
{ caption: '--' },
|
|
||||||
{ caption: this.insertRowAboveText, value: 4 },
|
|
||||||
{ caption: this.insertRowBelowText, value: 5 },
|
|
||||||
{ caption: this.insertColumnLeftText, value: 6 },
|
|
||||||
{ caption: this.insertColumnRightText, value: 7 },
|
|
||||||
{ caption: '--' },
|
|
||||||
{ caption: this.deleteRowText, value: 8 },
|
|
||||||
{ caption: this.deleteColumnText, value: 9 },
|
|
||||||
{ caption: this.deleteTableText, value: 10 },
|
|
||||||
{ caption: '--' },
|
|
||||||
{ caption: this.mergeCellsText, value: 11 },
|
|
||||||
{ caption: this.splitCellsText, value: 12 }
|
|
||||||
]
|
|
||||||
})
|
|
||||||
});
|
|
||||||
this.btnEdit.render( $('#table-btn-edit')) ;
|
|
||||||
this.mnuMerge = this.btnEdit.menu.items[this.btnEdit.menu.items.length-2];
|
|
||||||
this.mnuSplit = this.btnEdit.menu.items[this.btnEdit.menu.items.length-1];
|
|
||||||
|
|
||||||
this.btnEdit.menu.on('show:after', _.bind( function(){
|
|
||||||
if (this.api) {
|
|
||||||
this.mnuMerge.setDisabled(!this.api.CheckBeforeMergeCells());
|
|
||||||
this.mnuSplit.setDisabled(!this.api.CheckBeforeSplitCells());
|
|
||||||
}
|
|
||||||
}, this));
|
|
||||||
this.btnEdit.menu.on('item:click', _.bind(this.onEditClick, this));
|
|
||||||
this.lockedControls.push(this.btnEdit);
|
|
||||||
|
|
||||||
$(this.el).on('click', '#table-advanced-link', _.bind(this.openAdvancedSettings, this));
|
|
||||||
},
|
},
|
||||||
|
|
||||||
onCheckTemplateChange: function(type, field, newValue, oldValue, eOpts) {
|
onCheckTemplateChange: function(type, field, newValue, oldValue, eOpts) {
|
||||||
|
|
@ -398,8 +219,6 @@ define([
|
||||||
el.html(this.template({
|
el.html(this.template({
|
||||||
scope: this
|
scope: this
|
||||||
}));
|
}));
|
||||||
|
|
||||||
this.linkAdvanced = $('#table-advanced-link');
|
|
||||||
},
|
},
|
||||||
|
|
||||||
setApi: function(o) {
|
setApi: function(o) {
|
||||||
|
|
@ -410,7 +229,134 @@ define([
|
||||||
return this;
|
return this;
|
||||||
},
|
},
|
||||||
|
|
||||||
|
createDelayedControls: function() {
|
||||||
|
var me = this;
|
||||||
|
|
||||||
|
this.chHeader = new Common.UI.CheckBox({
|
||||||
|
el: $('#table-checkbox-header'),
|
||||||
|
labelText: this.textHeader
|
||||||
|
});
|
||||||
|
this.lockedControls.push(this.chHeader);
|
||||||
|
|
||||||
|
this.chTotal = new Common.UI.CheckBox({
|
||||||
|
el: $('#table-checkbox-total'),
|
||||||
|
labelText: this.textTotal
|
||||||
|
});
|
||||||
|
this.lockedControls.push(this.chTotal);
|
||||||
|
|
||||||
|
this.chBanded = new Common.UI.CheckBox({
|
||||||
|
el: $('#table-checkbox-banded'),
|
||||||
|
labelText: this.textBanded
|
||||||
|
});
|
||||||
|
this.lockedControls.push(this.chBanded);
|
||||||
|
|
||||||
|
this.chFirst = new Common.UI.CheckBox({
|
||||||
|
el: $('#table-checkbox-first'),
|
||||||
|
labelText: this.textFirst
|
||||||
|
});
|
||||||
|
this.lockedControls.push(this.chFirst);
|
||||||
|
|
||||||
|
this.chLast = new Common.UI.CheckBox({
|
||||||
|
el: $('#table-checkbox-last'),
|
||||||
|
labelText: this.textLast
|
||||||
|
});
|
||||||
|
this.lockedControls.push(this.chLast);
|
||||||
|
|
||||||
|
this.chColBanded = new Common.UI.CheckBox({
|
||||||
|
el: $('#table-checkbox-col-banded'),
|
||||||
|
labelText: this.textBanded
|
||||||
|
});
|
||||||
|
this.lockedControls.push(this.chColBanded);
|
||||||
|
|
||||||
|
this.chHeader.on('change', _.bind(this.onCheckTemplateChange, this, 0));
|
||||||
|
this.chTotal.on('change', _.bind(this.onCheckTemplateChange, this, 1));
|
||||||
|
this.chBanded.on('change', _.bind(this.onCheckTemplateChange, this, 2));
|
||||||
|
this.chFirst.on('change', _.bind(this.onCheckTemplateChange, this, 3));
|
||||||
|
this.chLast.on('change', _.bind(this.onCheckTemplateChange, this, 4));
|
||||||
|
this.chColBanded.on('change', _.bind(this.onCheckTemplateChange, this, 5));
|
||||||
|
|
||||||
|
var _arrBorderPosition = [
|
||||||
|
['l', 'btn-borders-small btn-position-left', 'table-button-border-left', this.tipLeft],
|
||||||
|
['c','btn-borders-small btn-position-inner-vert', 'table-button-border-inner-vert', this.tipInnerVert],
|
||||||
|
['r','btn-borders-small btn-position-right', 'table-button-border-right', this.tipRight],
|
||||||
|
['t','btn-borders-small btn-position-top', 'table-button-border-top', this.tipTop],
|
||||||
|
['m','btn-borders-small btn-position-inner-hor', 'table-button-border-inner-hor', this.tipInnerHor],
|
||||||
|
['b', 'btn-borders-small btn-position-bottom', 'table-button-border-bottom', this.tipBottom],
|
||||||
|
['cm', 'btn-borders-small btn-position-inner', 'table-button-border-inner', this.tipInner],
|
||||||
|
['lrtb', 'btn-borders-small btn-position-outer', 'table-button-border-outer', this.tipOuter],
|
||||||
|
['lrtbcm', 'btn-borders-small btn-position-all', 'table-button-border-all', this.tipAll],
|
||||||
|
['', 'btn-borders-small btn-position-none', 'table-button-border-none', this.tipNone]
|
||||||
|
];
|
||||||
|
|
||||||
|
this._btnsBorderPosition = [];
|
||||||
|
_.each(_arrBorderPosition, function(item, index, list){
|
||||||
|
var _btn = new Common.UI.Button({
|
||||||
|
cls: 'btn-toolbar',
|
||||||
|
iconCls: item[1],
|
||||||
|
strId :item[0],
|
||||||
|
hint: item[3]
|
||||||
|
});
|
||||||
|
_btn.render( $('#'+item[2])) ;
|
||||||
|
_btn.on('click', _.bind(this.onBtnBordersClick, this));
|
||||||
|
this._btnsBorderPosition.push( _btn );
|
||||||
|
this.lockedControls.push(_btn);
|
||||||
|
}, this);
|
||||||
|
|
||||||
|
this.cmbBorderSize = new Common.UI.ComboBorderSize({
|
||||||
|
el: $('#table-combo-border-size'),
|
||||||
|
style: "width: 93px;"
|
||||||
|
});
|
||||||
|
this.BorderSize = this.cmbBorderSize.store.at(2).get('value');
|
||||||
|
this.cmbBorderSize.setValue(this.BorderSize);
|
||||||
|
this.cmbBorderSize.on('selected', _.bind(this.onBorderSizeSelect, this));
|
||||||
|
this.lockedControls.push(this.cmbBorderSize);
|
||||||
|
|
||||||
|
this.btnEdit = new Common.UI.Button({
|
||||||
|
cls: 'btn-icon-default',
|
||||||
|
iconCls: 'btn-edit-table',
|
||||||
|
menu : new Common.UI.Menu({
|
||||||
|
menuAlign: 'tr-br',
|
||||||
|
items: [
|
||||||
|
{ caption: this.selectRowText, value: 0 },
|
||||||
|
{ caption: this.selectColumnText, value: 1 },
|
||||||
|
{ caption: this.selectCellText, value: 2 },
|
||||||
|
{ caption: this.selectTableText, value: 3 },
|
||||||
|
{ caption: '--' },
|
||||||
|
{ caption: this.insertRowAboveText, value: 4 },
|
||||||
|
{ caption: this.insertRowBelowText, value: 5 },
|
||||||
|
{ caption: this.insertColumnLeftText, value: 6 },
|
||||||
|
{ caption: this.insertColumnRightText, value: 7 },
|
||||||
|
{ caption: '--' },
|
||||||
|
{ caption: this.deleteRowText, value: 8 },
|
||||||
|
{ caption: this.deleteColumnText, value: 9 },
|
||||||
|
{ caption: this.deleteTableText, value: 10 },
|
||||||
|
{ caption: '--' },
|
||||||
|
{ caption: this.mergeCellsText, value: 11 },
|
||||||
|
{ caption: this.splitCellsText, value: 12 }
|
||||||
|
]
|
||||||
|
})
|
||||||
|
});
|
||||||
|
this.btnEdit.render( $('#table-btn-edit')) ;
|
||||||
|
this.mnuMerge = this.btnEdit.menu.items[this.btnEdit.menu.items.length-2];
|
||||||
|
this.mnuSplit = this.btnEdit.menu.items[this.btnEdit.menu.items.length-1];
|
||||||
|
|
||||||
|
this.btnEdit.menu.on('show:after', _.bind( function(){
|
||||||
|
if (this.api) {
|
||||||
|
this.mnuMerge.setDisabled(!this.api.CheckBeforeMergeCells());
|
||||||
|
this.mnuSplit.setDisabled(!this.api.CheckBeforeSplitCells());
|
||||||
|
}
|
||||||
|
}, this));
|
||||||
|
this.btnEdit.menu.on('item:click', _.bind(this.onEditClick, this));
|
||||||
|
this.lockedControls.push(this.btnEdit);
|
||||||
|
|
||||||
|
this.linkAdvanced = $('#table-advanced-link');
|
||||||
|
$(this.el).on('click', '#table-advanced-link', _.bind(this.openAdvancedSettings, this));
|
||||||
|
},
|
||||||
|
|
||||||
ChangeSettings: function(props) {
|
ChangeSettings: function(props) {
|
||||||
|
if (this._initSettings)
|
||||||
|
this.createDelayedElements();
|
||||||
|
|
||||||
this.disableControls(this._locked);
|
this.disableControls(this._locked);
|
||||||
|
|
||||||
if (props )
|
if (props )
|
||||||
|
|
@ -580,19 +526,79 @@ define([
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
createDelayedElements: function() {
|
||||||
|
this.createDelayedControls();
|
||||||
|
this.UpdateThemeColors();
|
||||||
|
this._initSettings = false;
|
||||||
|
},
|
||||||
|
|
||||||
UpdateThemeColors: function() {
|
UpdateThemeColors: function() {
|
||||||
if (this.colorsBack)
|
if (!this.btnBackColor) {
|
||||||
|
this.btnBorderColor = new Common.UI.ColorButton({
|
||||||
|
style: "width:45px;",
|
||||||
|
menu : new Common.UI.Menu({
|
||||||
|
items: [
|
||||||
|
{ template: _.template('<div id="table-border-color-menu" style="width: 165px; height: 220px; margin: 10px;"></div>') },
|
||||||
|
{ template: _.template('<a id="table-border-color-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
|
||||||
|
]
|
||||||
|
})
|
||||||
|
});
|
||||||
|
this.btnBorderColor.render( $('#table-border-color-btn'));
|
||||||
|
this.btnBorderColor.setColor('000000');
|
||||||
|
this.lockedControls.push(this.btnBorderColor);
|
||||||
|
this.borderColor = new Common.UI.ThemeColorPalette({
|
||||||
|
el: $('#table-border-color-menu')
|
||||||
|
});
|
||||||
|
this.borderColor.on('select', _.bind(this.onColorsBorderSelect, this));
|
||||||
|
$(this.el).on('click', '#table-border-color-new', _.bind(this.addNewColor, this, this.borderColor, this.btnBorderColor));
|
||||||
|
|
||||||
|
this.btnBackColor = new Common.UI.ColorButton({
|
||||||
|
style: "width:45px;",
|
||||||
|
menu : new Common.UI.Menu({
|
||||||
|
items: [
|
||||||
|
{ template: _.template('<div id="table-back-color-menu" style="width: 165px; height: 220px; margin: 10px;"></div>') },
|
||||||
|
{ template: _.template('<a id="table-back-color-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
|
||||||
|
]
|
||||||
|
})
|
||||||
|
});
|
||||||
|
this.btnBackColor.render( $('#table-back-color-btn'));
|
||||||
|
this.lockedControls.push(this.btnBackColor);
|
||||||
|
this.colorsBack = new Common.UI.ThemeColorPalette({
|
||||||
|
el: $('#table-back-color-menu'),
|
||||||
|
transparent: true
|
||||||
|
});
|
||||||
|
this.colorsBack.on('select', _.bind(this.onColorsBackSelect, this));
|
||||||
|
$(this.el).on('click', '#table-back-color-new', _.bind(this.addNewColor, this, this.colorsBack, this.btnBackColor));
|
||||||
|
}
|
||||||
this.colorsBack.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
|
this.colorsBack.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
|
||||||
if (this.borderColor) {
|
|
||||||
this.borderColor.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
|
this.borderColor.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
|
||||||
this.btnBorderColor.setColor(this.borderColor.getColor());
|
this.btnBorderColor.setColor(this.borderColor.getColor());
|
||||||
}
|
|
||||||
},
|
},
|
||||||
|
|
||||||
_onInitTemplates: function(Templates){
|
_onInitTemplates: function(Templates){
|
||||||
var self = this;
|
var self = this;
|
||||||
this._isTemplatesChanged = true;
|
this._isTemplatesChanged = true;
|
||||||
|
|
||||||
|
if (!this.cmbTableTemplate) {
|
||||||
|
this.cmbTableTemplate = new Common.UI.ComboDataView({
|
||||||
|
itemWidth: 70,
|
||||||
|
itemHeight: 50,
|
||||||
|
menuMaxHeight: 300,
|
||||||
|
enableKeyEvents: true,
|
||||||
|
cls: 'combo-template'
|
||||||
|
});
|
||||||
|
this.cmbTableTemplate.render($('#table-combo-template'));
|
||||||
|
this.cmbTableTemplate.openButton.menu.cmpEl.css({
|
||||||
|
'min-width': 175,
|
||||||
|
'max-width': 175
|
||||||
|
});
|
||||||
|
this.cmbTableTemplate.on('click', _.bind(this.onTableTemplateSelect, this));
|
||||||
|
this.cmbTableTemplate.openButton.menu.on('show:after', function () {
|
||||||
|
self.cmbTableTemplate.menuPicker.scroller.update({alwaysVisibleY: true});
|
||||||
|
});
|
||||||
|
this.lockedControls.push(this.cmbTableTemplate);
|
||||||
|
}
|
||||||
|
|
||||||
var count = self.cmbTableTemplate.menuPicker.store.length;
|
var count = self.cmbTableTemplate.menuPicker.store.length;
|
||||||
if (count>0 && count==Templates.length) {
|
if (count>0 && count==Templates.length) {
|
||||||
var data = self.cmbTableTemplate.menuPicker.store.models;
|
var data = self.cmbTableTemplate.menuPicker.store.models;
|
||||||
|
|
@ -649,6 +655,8 @@ define([
|
||||||
},
|
},
|
||||||
|
|
||||||
disableControls: function(disable) {
|
disableControls: function(disable) {
|
||||||
|
if (this._initSettings) return;
|
||||||
|
|
||||||
if (this._state.DisabledControls!==disable) {
|
if (this._state.DisabledControls!==disable) {
|
||||||
this._state.DisabledControls = disable;
|
this._state.DisabledControls = disable;
|
||||||
_.each(this.lockedControls, function(item) {
|
_.each(this.lockedControls, function(item) {
|
||||||
|
|
|
||||||
|
|
@ -70,7 +70,6 @@ define([
|
||||||
},
|
},
|
||||||
|
|
||||||
initialize: function () {
|
initialize: function () {
|
||||||
var me = this;
|
|
||||||
this._initSettings = true;
|
this._initSettings = true;
|
||||||
this._noApply = true;
|
this._noApply = true;
|
||||||
this.shapeprops = null;
|
this.shapeprops = null;
|
||||||
|
|
@ -118,373 +117,6 @@ define([
|
||||||
|
|
||||||
this.render();
|
this.render();
|
||||||
|
|
||||||
this.cmbTextArt = new Common.UI.ComboDataView({
|
|
||||||
itemWidth: 50,
|
|
||||||
itemHeight: 50,
|
|
||||||
menuMaxHeight: 300,
|
|
||||||
enableKeyEvents: true,
|
|
||||||
showLast: false,
|
|
||||||
cls: 'combo-textart'
|
|
||||||
});
|
|
||||||
this.cmbTextArt.render($('#textart-combo-template'));
|
|
||||||
this.cmbTextArt.openButton.menu.cmpEl.css({
|
|
||||||
'min-width': 178,
|
|
||||||
'max-width': 178
|
|
||||||
});
|
|
||||||
this.cmbTextArt.on('click', _.bind(this.onTextArtSelect, this));
|
|
||||||
this.cmbTextArt.openButton.menu.on('show:after', function () {
|
|
||||||
me.cmbTextArt.menuPicker.scroller.update({alwaysVisibleY: true});
|
|
||||||
});
|
|
||||||
this.lockedControls.push(this.cmbTextArt);
|
|
||||||
|
|
||||||
this._arrFillSrc = [
|
|
||||||
{displayValue: this.textColor, value: Asc.c_oAscFill.FILL_TYPE_SOLID},
|
|
||||||
{displayValue: this.textGradientFill, value: Asc.c_oAscFill.FILL_TYPE_GRAD},
|
|
||||||
{displayValue: this.textImageTexture, value: Asc.c_oAscFill.FILL_TYPE_BLIP},
|
|
||||||
{displayValue: this.textPatternFill, value: Asc.c_oAscFill.FILL_TYPE_PATT},
|
|
||||||
{displayValue: this.textNoFill, value: Asc.c_oAscFill.FILL_TYPE_NOFILL}
|
|
||||||
];
|
|
||||||
|
|
||||||
this.cmbFillSrc = new Common.UI.ComboBox({
|
|
||||||
el: $('#textart-combo-fill-src'),
|
|
||||||
cls: 'input-group-nr',
|
|
||||||
style: 'width: 100%;',
|
|
||||||
menuStyle: 'min-width: 190px;',
|
|
||||||
editable: false,
|
|
||||||
data: this._arrFillSrc
|
|
||||||
});
|
|
||||||
this.cmbFillSrc.setValue(this._arrFillSrc[0].value);
|
|
||||||
this.cmbFillSrc.on('selected', _.bind(this.onFillSrcSelect, this));
|
|
||||||
this.lockedControls.push(this.cmbFillSrc);
|
|
||||||
|
|
||||||
this.btnBackColor = new Common.UI.ColorButton({
|
|
||||||
style: "width:45px;",
|
|
||||||
menu : new Common.UI.Menu({
|
|
||||||
items: [
|
|
||||||
{ template: _.template('<div id="textart-back-color-menu" style="width: 165px; height: 220px; margin: 10px;"></div>') },
|
|
||||||
{ template: _.template('<a id="textart-back-color-new" style="padding-left:12px;">' + me.textNewColor + '</a>') }
|
|
||||||
]
|
|
||||||
})
|
|
||||||
});
|
|
||||||
|
|
||||||
this.btnBackColor.on('render:after', function(btn) {
|
|
||||||
me.colorsBack = new Common.UI.ThemeColorPalette({
|
|
||||||
el: $('#textart-back-color-menu'),
|
|
||||||
value: 'transparent',
|
|
||||||
transparent: true
|
|
||||||
});
|
|
||||||
me.colorsBack.on('select', _.bind(me.onColorsBackSelect, me));
|
|
||||||
});
|
|
||||||
this.btnBackColor.render( $('#textart-back-color-btn'));
|
|
||||||
this.btnBackColor.setColor('transparent');
|
|
||||||
$(this.el).on('click', '#textart-back-color-new', _.bind(this.addNewColor, this, this.colorsBack, this.btnBackColor));
|
|
||||||
this.lockedControls.push(this.btnBackColor);
|
|
||||||
|
|
||||||
this.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([
|
|
||||||
'<div class="style" id="<%= id %>">',
|
|
||||||
'<img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="combo-pattern-item" ',
|
|
||||||
'width="' + this.cmbPattern.itemWidth + '" height="' + this.cmbPattern.itemHeight + '" ',
|
|
||||||
'style="background-position: -<%= offsetx %>px -<%= offsety %>px;"/>',
|
|
||||||
'</div>'
|
|
||||||
].join(''));
|
|
||||||
this.cmbPattern.render($('#textart-combo-pattern'));
|
|
||||||
this.cmbPattern.openButton.menu.cmpEl.css({
|
|
||||||
'min-width': 178,
|
|
||||||
'max-width': 178
|
|
||||||
});
|
|
||||||
this.cmbPattern.on('click', _.bind(this.onPatternSelect, this));
|
|
||||||
this.cmbPattern.openButton.menu.on('show:after', function () {
|
|
||||||
me.cmbPattern.menuPicker.scroller.update({alwaysVisibleY: true});
|
|
||||||
});
|
|
||||||
|
|
||||||
this.lockedControls.push(this.cmbPattern);
|
|
||||||
|
|
||||||
this.btnFGColor = new Common.UI.ColorButton({
|
|
||||||
style: "width:45px;",
|
|
||||||
menu : new Common.UI.Menu({
|
|
||||||
items: [
|
|
||||||
{ template: _.template('<div id="textart-foreground-color-menu" style="width: 165px; height: 220px; margin: 10px;"></div>') },
|
|
||||||
{ template: _.template('<a id="textart-foreground-color-new" style="padding-left:12px;">' + me.textNewColor + '</a>') }
|
|
||||||
]
|
|
||||||
})
|
|
||||||
});
|
|
||||||
|
|
||||||
this.btnFGColor.on('render:after', function(btn) {
|
|
||||||
me.colorsFG = new Common.UI.ThemeColorPalette({
|
|
||||||
el: $('#textart-foreground-color-menu'),
|
|
||||||
value: '000000'
|
|
||||||
});
|
|
||||||
me.colorsFG.on('select', _.bind(me.onColorsFGSelect, me));
|
|
||||||
});
|
|
||||||
this.btnFGColor.render( $('#textart-foreground-color-btn'));
|
|
||||||
this.btnFGColor.setColor('000000');
|
|
||||||
$(this.el).on('click', '#textart-foreground-color-new', _.bind(this.addNewColor, this, this.colorsFG, this.btnFGColor));
|
|
||||||
this.lockedControls.push(this.btnFGColor);
|
|
||||||
|
|
||||||
this.btnBGColor = new Common.UI.ColorButton({
|
|
||||||
style: "width:45px;",
|
|
||||||
menu : new Common.UI.Menu({
|
|
||||||
items: [
|
|
||||||
{ template: _.template('<div id="textart-background-color-menu" style="width: 165px; height: 220px; margin: 10px;"></div>') },
|
|
||||||
{ template: _.template('<a id="textart-background-color-new" style="padding-left:12px;">' + me.textNewColor + '</a>') }
|
|
||||||
]
|
|
||||||
})
|
|
||||||
});
|
|
||||||
|
|
||||||
this.btnBGColor.on('render:after', function(btn) {
|
|
||||||
me.colorsBG = new Common.UI.ThemeColorPalette({
|
|
||||||
el: $('#textart-background-color-menu'),
|
|
||||||
value: 'ffffff'
|
|
||||||
});
|
|
||||||
me.colorsBG.on('select', _.bind(me.onColorsBGSelect, me));
|
|
||||||
});
|
|
||||||
this.btnBGColor.render( $('#textart-background-color-btn'));
|
|
||||||
this.btnBGColor.setColor('ffffff');
|
|
||||||
$(this.el).on('click', '#textart-background-color-new', _.bind(this.addNewColor, this, this.colorsBG, this.btnBGColor));
|
|
||||||
this.lockedControls.push(this.btnBGColor);
|
|
||||||
|
|
||||||
this.btnInsertFromFile = new Common.UI.Button({
|
|
||||||
el: $('#textart-button-from-file')
|
|
||||||
});
|
|
||||||
this.lockedControls.push(this.btnInsertFromFile);
|
|
||||||
|
|
||||||
this.btnInsertFromUrl = new Common.UI.Button({
|
|
||||||
el: $('#textart-button-from-url')
|
|
||||||
});
|
|
||||||
this.lockedControls.push(this.btnInsertFromUrl);
|
|
||||||
|
|
||||||
this.btnInsertFromFile.on('click', _.bind(function(btn){
|
|
||||||
if (this.api) this.api.ChangeArtImageFromFile();
|
|
||||||
this.fireEvent('editcomplete', this);
|
|
||||||
}, this));
|
|
||||||
this.btnInsertFromUrl.on('click', _.bind(this.insertFromUrl, this));
|
|
||||||
|
|
||||||
this._arrFillType = [
|
|
||||||
{displayValue: this.textStretch, value: Asc.c_oAscFillBlipType.STRETCH},
|
|
||||||
{displayValue: this.textTile, value: Asc.c_oAscFillBlipType.TILE}
|
|
||||||
];
|
|
||||||
|
|
||||||
this.cmbFillType = new Common.UI.ComboBox({
|
|
||||||
el: $('#textart-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.lockedControls.push(this.cmbFillType);
|
|
||||||
|
|
||||||
this.btnTexture = new Common.UI.ComboBox({
|
|
||||||
el: $('#textart-combo-fill-texture'),
|
|
||||||
template: _.template([
|
|
||||||
'<div class="input-group combobox combo-dataview-menu input-group-nr dropdown-toggle" tabindex="0" data-toggle="dropdown">',
|
|
||||||
'<div class="form-control text" style="width: 90px;">' + this.textSelectTexture + '</div>',
|
|
||||||
'<div style="display: table-cell;"></div>',
|
|
||||||
'<button type="button" class="btn btn-default"><span class="caret img-commonctrl"></span></button>',
|
|
||||||
'</div>'
|
|
||||||
].join(''))
|
|
||||||
});
|
|
||||||
this.textureMenu = new Common.UI.Menu({
|
|
||||||
items: [
|
|
||||||
{ template: _.template('<div id="id-textart-menu-texture" style="width: 233px; margin: 0 5px;"></div>') }
|
|
||||||
]
|
|
||||||
});
|
|
||||||
this.textureMenu.render($('#textart-combo-fill-texture'));
|
|
||||||
this.lockedControls.push(this.btnTexture);
|
|
||||||
|
|
||||||
this.numTransparency = new Common.UI.MetricSpinner({
|
|
||||||
el: $('#textart-spin-transparency'),
|
|
||||||
step: 1,
|
|
||||||
width: 62,
|
|
||||||
value: '100 %',
|
|
||||||
defaultUnit : "%",
|
|
||||||
maxValue: 100,
|
|
||||||
minValue: 0
|
|
||||||
});
|
|
||||||
this.numTransparency.on('change', _.bind(this.onNumTransparencyChange, this));
|
|
||||||
this.lockedControls.push(this.numTransparency);
|
|
||||||
|
|
||||||
this.sldrTransparency = new Common.UI.SingleSlider({
|
|
||||||
el: $('#textart-slider-transparency'),
|
|
||||||
width: 75,
|
|
||||||
minValue: 0,
|
|
||||||
maxValue: 100,
|
|
||||||
value: 100
|
|
||||||
});
|
|
||||||
this.sldrTransparency.on('change', _.bind(this.onTransparencyChange, this));
|
|
||||||
this.sldrTransparency.on('changecomplete', _.bind(this.onTransparencyChangeComplete, this));
|
|
||||||
this.lockedControls.push(this.sldrTransparency);
|
|
||||||
|
|
||||||
this.lblTransparencyStart = $(this.el).find('#textart-lbl-transparency-start');
|
|
||||||
this.lblTransparencyEnd = $(this.el).find('#textart-lbl-transparency-end');
|
|
||||||
|
|
||||||
this._arrGradType = [
|
|
||||||
{displayValue: this.textLinear, value: Asc.c_oAscFillGradType.GRAD_LINEAR},
|
|
||||||
{displayValue: this.textRadial, value: Asc.c_oAscFillGradType.GRAD_PATH}
|
|
||||||
];
|
|
||||||
|
|
||||||
this.cmbGradType = new Common.UI.ComboBox({
|
|
||||||
el: $('#textart-combo-grad-type'),
|
|
||||||
cls: 'input-group-nr',
|
|
||||||
menuStyle: 'min-width: 90px;',
|
|
||||||
editable: false,
|
|
||||||
data: this._arrGradType
|
|
||||||
});
|
|
||||||
this.cmbGradType.setValue(this._arrGradType[0].value);
|
|
||||||
this.cmbGradType.on('selected', _.bind(this.onGradTypeSelect, this));
|
|
||||||
this.lockedControls.push(this.cmbGradType);
|
|
||||||
|
|
||||||
this._viewDataLinear = [
|
|
||||||
{ offsetx: 0, offsety: 0, type:45, subtype:-1, iconcls:'gradient-left-top' },
|
|
||||||
{ offsetx: 50, offsety: 0, type:90, subtype:4, iconcls:'gradient-top'},
|
|
||||||
{ offsetx: 100, offsety: 0, type:135, subtype:5, iconcls:'gradient-right-top'},
|
|
||||||
{ offsetx: 0, offsety: 50, type:0, subtype:6, iconcls:'gradient-left', cls: 'item-gradient-separator', selected: true},
|
|
||||||
{ offsetx: 100, offsety: 50, type:180, subtype:1, iconcls:'gradient-right'},
|
|
||||||
{ offsetx: 0, offsety: 100, type:315, subtype:2, iconcls:'gradient-left-bottom'},
|
|
||||||
{ offsetx: 50, offsety: 100, type:270, subtype:3, iconcls:'gradient-bottom'},
|
|
||||||
{ offsetx: 100, offsety: 100, type:225, subtype:7, iconcls:'gradient-right-bottom'}
|
|
||||||
];
|
|
||||||
|
|
||||||
this._viewDataRadial = [
|
|
||||||
{ offsetx: 100, offsety: 150, type:2, subtype:5, iconcls:'gradient-radial-center'}
|
|
||||||
];
|
|
||||||
|
|
||||||
this.btnDirection = new Common.UI.Button({
|
|
||||||
cls : 'btn-large-dataview',
|
|
||||||
iconCls : 'item-gradient gradient-left',
|
|
||||||
menu : new Common.UI.Menu({
|
|
||||||
style: 'min-width: 60px;',
|
|
||||||
menuAlign: 'tr-br',
|
|
||||||
items: [
|
|
||||||
{ template: _.template('<div id="id-textart-menu-direction" style="width: 175px; margin: 0 5px;"></div>') }
|
|
||||||
]
|
|
||||||
})
|
|
||||||
});
|
|
||||||
this.btnDirection.on('render:after', function(btn) {
|
|
||||||
me.mnuDirectionPicker = new Common.UI.DataView({
|
|
||||||
el: $('#id-textart-menu-direction'),
|
|
||||||
parentMenu: btn.menu,
|
|
||||||
restoreHeight: 174,
|
|
||||||
store: new Common.UI.DataViewStore(me._viewDataLinear),
|
|
||||||
itemTemplate: _.template('<div id="<%= id %>" class="item-gradient" style="background-position: -<%= offsetx %>px -<%= offsety %>px;"></div>')
|
|
||||||
});
|
|
||||||
});
|
|
||||||
this.btnDirection.render($('#textart-button-direction'));
|
|
||||||
this.mnuDirectionPicker.on('item:click', _.bind(this.onSelectGradient, this, this.btnDirection));
|
|
||||||
this.lockedControls.push(this.btnDirection);
|
|
||||||
|
|
||||||
this.btnGradColor = new Common.UI.ColorButton({
|
|
||||||
style: "width:45px;",
|
|
||||||
menu : new Common.UI.Menu({
|
|
||||||
items: [
|
|
||||||
{ template: _.template('<div id="textart-gradient-color-menu" style="width: 165px; height: 220px; margin: 10px;"></div>') },
|
|
||||||
{ template: _.template('<a id="textart-gradient-color-new" style="padding-left:12px;">' + me.textNewColor + '</a>') }
|
|
||||||
]
|
|
||||||
})
|
|
||||||
});
|
|
||||||
this.btnGradColor.on('render:after', function(btn) {
|
|
||||||
me.colorsGrad = new Common.UI.ThemeColorPalette({
|
|
||||||
el: $('#textart-gradient-color-menu'),
|
|
||||||
value: '000000'
|
|
||||||
});
|
|
||||||
me.colorsGrad.on('select', _.bind(me.onColorsGradientSelect, me));
|
|
||||||
});
|
|
||||||
this.btnGradColor.render( $('#textart-gradient-color-btn'));
|
|
||||||
this.btnGradColor.setColor('000000');
|
|
||||||
$(this.el).on('click', '#textart-gradient-color-new', _.bind(this.addNewColor, this, this.colorsGrad, this.btnGradColor));
|
|
||||||
this.lockedControls.push(this.btnGradColor);
|
|
||||||
|
|
||||||
this.sldrGradient = new Common.UI.MultiSliderGradient({
|
|
||||||
el: $('#textart-slider-gradient'),
|
|
||||||
width: 125,
|
|
||||||
minValue: 0,
|
|
||||||
maxValue: 100,
|
|
||||||
values: [0, 100]
|
|
||||||
});
|
|
||||||
this.sldrGradient.on('change', _.bind(this.onGradientChange, this));
|
|
||||||
this.sldrGradient.on('changecomplete', _.bind(this.onGradientChangeComplete, this));
|
|
||||||
this.sldrGradient.on('thumbclick', function(cmp, index){
|
|
||||||
me.GradColor.currentIdx = index;
|
|
||||||
var color = me.GradColor.colors[me.GradColor.currentIdx];
|
|
||||||
me.btnGradColor.setColor(color);
|
|
||||||
me.colorsGrad.select(color,false);
|
|
||||||
});
|
|
||||||
this.sldrGradient.on('thumbdblclick', function(cmp){
|
|
||||||
me.btnGradColor.cmpEl.find('button').dropdown('toggle');
|
|
||||||
});
|
|
||||||
this.lockedControls.push(this.sldrGradient);
|
|
||||||
|
|
||||||
this.cmbBorderSize = new Common.UI.ComboBorderSizeEditable({
|
|
||||||
el: $('#textart-combo-border-size'),
|
|
||||||
style: "width: 93px;",
|
|
||||||
txtNoBorders: this.txtNoBorders
|
|
||||||
})
|
|
||||||
.on('selected', _.bind(this.onBorderSizeSelect, this))
|
|
||||||
.on('changed:before',_.bind(this.onBorderSizeChanged, this, true))
|
|
||||||
.on('changed:after', _.bind(this.onBorderSizeChanged, this, false))
|
|
||||||
.on('combo:blur', _.bind(this.onComboBlur, this, false));
|
|
||||||
this.BorderSize = this.cmbBorderSize.store.at(2).get('value');
|
|
||||||
this.cmbBorderSize.setValue(this.BorderSize);
|
|
||||||
this.lockedControls.push(this.cmbBorderSize);
|
|
||||||
|
|
||||||
this.btnBorderColor = new Common.UI.ColorButton({
|
|
||||||
style: "width:45px;",
|
|
||||||
menu : new Common.UI.Menu({
|
|
||||||
items: [
|
|
||||||
{ template: _.template('<div id="textart-border-color-menu" style="width: 165px; height: 220px; margin: 10px;"></div>') },
|
|
||||||
{ template: _.template('<a id="textart-border-color-new" style="padding-left:12px;">' + me.textNewColor + '</a>') }
|
|
||||||
]
|
|
||||||
})
|
|
||||||
});
|
|
||||||
this.lockedControls.push(this.btnBorderColor);
|
|
||||||
|
|
||||||
this.btnBorderColor.on('render:after', function(btn) {
|
|
||||||
me.colorsBorder = new Common.UI.ThemeColorPalette({
|
|
||||||
el: $('#textart-border-color-menu'),
|
|
||||||
value: '000000'
|
|
||||||
});
|
|
||||||
me.colorsBorder.on('select', _.bind(me.onColorsBorderSelect, me));
|
|
||||||
});
|
|
||||||
this.btnBorderColor.render( $('#textart-border-color-btn'));
|
|
||||||
this.btnBorderColor.setColor('000000');
|
|
||||||
$(this.el).on('click', '#textart-border-color-new', _.bind(this.addNewColor, this, this.colorsBorder, this.btnBorderColor));
|
|
||||||
|
|
||||||
this.cmbBorderType = new Common.UI.ComboBorderType({
|
|
||||||
el: $('#textart-combo-border-type'),
|
|
||||||
style: "width: 93px;",
|
|
||||||
menuStyle: 'min-width: 93px;'
|
|
||||||
}).on('selected', _.bind(this.onBorderTypeSelect, this))
|
|
||||||
.on('combo:blur', _.bind(this.onComboBlur, this, false));
|
|
||||||
this.BorderType = Asc.c_oDashType.solid;
|
|
||||||
this.cmbBorderType.setValue(this.BorderType);
|
|
||||||
this.lockedControls.push(this.cmbBorderType);
|
|
||||||
|
|
||||||
this.cmbTransform = new Common.UI.ComboDataView({
|
|
||||||
itemWidth: 50,
|
|
||||||
itemHeight: 50,
|
|
||||||
menuMaxHeight: 300,
|
|
||||||
enableKeyEvents: true,
|
|
||||||
cls: 'combo-textart'
|
|
||||||
});
|
|
||||||
this.cmbTransform.render($('#textart-combo-transform'));
|
|
||||||
this.cmbTransform.openButton.menu.cmpEl.css({
|
|
||||||
'min-width': 178,
|
|
||||||
'max-width': 178
|
|
||||||
});
|
|
||||||
this.cmbTransform.on('click', _.bind(this.onTransformSelect, this));
|
|
||||||
this.cmbTransform.openButton.menu.on('show:after', function () {
|
|
||||||
me.cmbTransform.menuPicker.scroller.update({alwaysVisibleY: true});
|
|
||||||
});
|
|
||||||
this.lockedControls.push(this.cmbTransform);
|
|
||||||
|
|
||||||
this.FillColorContainer = $('#textart-panel-color-fill');
|
this.FillColorContainer = $('#textart-panel-color-fill');
|
||||||
this.FillImageContainer = $('#textart-panel-image-fill');
|
this.FillImageContainer = $('#textart-panel-image-fill');
|
||||||
this.FillPatternContainer = $('#textart-panel-pattern-fill');
|
this.FillPatternContainer = $('#textart-panel-pattern-fill');
|
||||||
|
|
@ -1029,7 +661,6 @@ define([
|
||||||
|
|
||||||
if (this._initSettings)
|
if (this._initSettings)
|
||||||
this.createDelayedElements();
|
this.createDelayedElements();
|
||||||
this._initSettings = false;
|
|
||||||
|
|
||||||
if (props && props.get_TextArtProperties())
|
if (props && props.get_TextArtProperties())
|
||||||
{
|
{
|
||||||
|
|
@ -1413,7 +1044,234 @@ define([
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
createDelayedControls: function() {
|
||||||
|
var me = this;
|
||||||
|
|
||||||
|
this._arrFillSrc = [
|
||||||
|
{displayValue: this.textColor, value: Asc.c_oAscFill.FILL_TYPE_SOLID},
|
||||||
|
{displayValue: this.textGradientFill, value: Asc.c_oAscFill.FILL_TYPE_GRAD},
|
||||||
|
{displayValue: this.textImageTexture, value: Asc.c_oAscFill.FILL_TYPE_BLIP},
|
||||||
|
{displayValue: this.textPatternFill, value: Asc.c_oAscFill.FILL_TYPE_PATT},
|
||||||
|
{displayValue: this.textNoFill, value: Asc.c_oAscFill.FILL_TYPE_NOFILL}
|
||||||
|
];
|
||||||
|
|
||||||
|
this.cmbFillSrc = new Common.UI.ComboBox({
|
||||||
|
el: $('#textart-combo-fill-src'),
|
||||||
|
cls: 'input-group-nr',
|
||||||
|
style: 'width: 100%;',
|
||||||
|
menuStyle: 'min-width: 190px;',
|
||||||
|
editable: false,
|
||||||
|
data: this._arrFillSrc
|
||||||
|
});
|
||||||
|
this.cmbFillSrc.setValue(this._arrFillSrc[0].value);
|
||||||
|
this.cmbFillSrc.on('selected', _.bind(this.onFillSrcSelect, this));
|
||||||
|
this.lockedControls.push(this.cmbFillSrc);
|
||||||
|
|
||||||
|
this.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([
|
||||||
|
'<div class="style" id="<%= id %>">',
|
||||||
|
'<img src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" class="combo-pattern-item" ',
|
||||||
|
'width="' + this.cmbPattern.itemWidth + '" height="' + this.cmbPattern.itemHeight + '" ',
|
||||||
|
'style="background-position: -<%= offsetx %>px -<%= offsety %>px;"/>',
|
||||||
|
'</div>'
|
||||||
|
].join(''));
|
||||||
|
this.cmbPattern.render($('#textart-combo-pattern'));
|
||||||
|
this.cmbPattern.openButton.menu.cmpEl.css({
|
||||||
|
'min-width': 178,
|
||||||
|
'max-width': 178
|
||||||
|
});
|
||||||
|
this.cmbPattern.on('click', _.bind(this.onPatternSelect, this));
|
||||||
|
this.cmbPattern.openButton.menu.on('show:after', function () {
|
||||||
|
me.cmbPattern.menuPicker.scroller.update({alwaysVisibleY: true});
|
||||||
|
});
|
||||||
|
|
||||||
|
this.lockedControls.push(this.cmbPattern);
|
||||||
|
|
||||||
|
this.btnInsertFromFile = new Common.UI.Button({
|
||||||
|
el: $('#textart-button-from-file')
|
||||||
|
});
|
||||||
|
this.lockedControls.push(this.btnInsertFromFile);
|
||||||
|
|
||||||
|
this.btnInsertFromUrl = new Common.UI.Button({
|
||||||
|
el: $('#textart-button-from-url')
|
||||||
|
});
|
||||||
|
this.lockedControls.push(this.btnInsertFromUrl);
|
||||||
|
|
||||||
|
this.btnInsertFromFile.on('click', _.bind(function(btn){
|
||||||
|
if (this.api) this.api.ChangeArtImageFromFile();
|
||||||
|
this.fireEvent('editcomplete', this);
|
||||||
|
}, this));
|
||||||
|
this.btnInsertFromUrl.on('click', _.bind(this.insertFromUrl, this));
|
||||||
|
|
||||||
|
this._arrFillType = [
|
||||||
|
{displayValue: this.textStretch, value: Asc.c_oAscFillBlipType.STRETCH},
|
||||||
|
{displayValue: this.textTile, value: Asc.c_oAscFillBlipType.TILE}
|
||||||
|
];
|
||||||
|
|
||||||
|
this.cmbFillType = new Common.UI.ComboBox({
|
||||||
|
el: $('#textart-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.lockedControls.push(this.cmbFillType);
|
||||||
|
|
||||||
|
this.numTransparency = new Common.UI.MetricSpinner({
|
||||||
|
el: $('#textart-spin-transparency'),
|
||||||
|
step: 1,
|
||||||
|
width: 62,
|
||||||
|
value: '100 %',
|
||||||
|
defaultUnit : "%",
|
||||||
|
maxValue: 100,
|
||||||
|
minValue: 0
|
||||||
|
});
|
||||||
|
this.numTransparency.on('change', _.bind(this.onNumTransparencyChange, this));
|
||||||
|
this.lockedControls.push(this.numTransparency);
|
||||||
|
|
||||||
|
this.sldrTransparency = new Common.UI.SingleSlider({
|
||||||
|
el: $('#textart-slider-transparency'),
|
||||||
|
width: 75,
|
||||||
|
minValue: 0,
|
||||||
|
maxValue: 100,
|
||||||
|
value: 100
|
||||||
|
});
|
||||||
|
this.sldrTransparency.on('change', _.bind(this.onTransparencyChange, this));
|
||||||
|
this.sldrTransparency.on('changecomplete', _.bind(this.onTransparencyChangeComplete, this));
|
||||||
|
this.lockedControls.push(this.sldrTransparency);
|
||||||
|
|
||||||
|
this.lblTransparencyStart = $(this.el).find('#textart-lbl-transparency-start');
|
||||||
|
this.lblTransparencyEnd = $(this.el).find('#textart-lbl-transparency-end');
|
||||||
|
|
||||||
|
this._arrGradType = [
|
||||||
|
{displayValue: this.textLinear, value: Asc.c_oAscFillGradType.GRAD_LINEAR},
|
||||||
|
{displayValue: this.textRadial, value: Asc.c_oAscFillGradType.GRAD_PATH}
|
||||||
|
];
|
||||||
|
|
||||||
|
this.cmbGradType = new Common.UI.ComboBox({
|
||||||
|
el: $('#textart-combo-grad-type'),
|
||||||
|
cls: 'input-group-nr',
|
||||||
|
menuStyle: 'min-width: 90px;',
|
||||||
|
editable: false,
|
||||||
|
data: this._arrGradType
|
||||||
|
});
|
||||||
|
this.cmbGradType.setValue(this._arrGradType[0].value);
|
||||||
|
this.cmbGradType.on('selected', _.bind(this.onGradTypeSelect, this));
|
||||||
|
this.lockedControls.push(this.cmbGradType);
|
||||||
|
|
||||||
|
this._viewDataLinear = [
|
||||||
|
{ offsetx: 0, offsety: 0, type:45, subtype:-1, iconcls:'gradient-left-top' },
|
||||||
|
{ offsetx: 50, offsety: 0, type:90, subtype:4, iconcls:'gradient-top'},
|
||||||
|
{ offsetx: 100, offsety: 0, type:135, subtype:5, iconcls:'gradient-right-top'},
|
||||||
|
{ offsetx: 0, offsety: 50, type:0, subtype:6, iconcls:'gradient-left', cls: 'item-gradient-separator', selected: true},
|
||||||
|
{ offsetx: 100, offsety: 50, type:180, subtype:1, iconcls:'gradient-right'},
|
||||||
|
{ offsetx: 0, offsety: 100, type:315, subtype:2, iconcls:'gradient-left-bottom'},
|
||||||
|
{ offsetx: 50, offsety: 100, type:270, subtype:3, iconcls:'gradient-bottom'},
|
||||||
|
{ offsetx: 100, offsety: 100, type:225, subtype:7, iconcls:'gradient-right-bottom'}
|
||||||
|
];
|
||||||
|
|
||||||
|
this._viewDataRadial = [
|
||||||
|
{ offsetx: 100, offsety: 150, type:2, subtype:5, iconcls:'gradient-radial-center'}
|
||||||
|
];
|
||||||
|
|
||||||
|
this.btnDirection = new Common.UI.Button({
|
||||||
|
cls : 'btn-large-dataview',
|
||||||
|
iconCls : 'item-gradient gradient-left',
|
||||||
|
menu : new Common.UI.Menu({
|
||||||
|
style: 'min-width: 60px;',
|
||||||
|
menuAlign: 'tr-br',
|
||||||
|
items: [
|
||||||
|
{ template: _.template('<div id="id-textart-menu-direction" style="width: 175px; margin: 0 5px;"></div>') }
|
||||||
|
]
|
||||||
|
})
|
||||||
|
});
|
||||||
|
this.btnDirection.on('render:after', function(btn) {
|
||||||
|
me.mnuDirectionPicker = new Common.UI.DataView({
|
||||||
|
el: $('#id-textart-menu-direction'),
|
||||||
|
parentMenu: btn.menu,
|
||||||
|
restoreHeight: 174,
|
||||||
|
store: new Common.UI.DataViewStore(me._viewDataLinear),
|
||||||
|
itemTemplate: _.template('<div id="<%= id %>" class="item-gradient" style="background-position: -<%= offsetx %>px -<%= offsety %>px;"></div>')
|
||||||
|
});
|
||||||
|
});
|
||||||
|
this.btnDirection.render($('#textart-button-direction'));
|
||||||
|
this.mnuDirectionPicker.on('item:click', _.bind(this.onSelectGradient, this, this.btnDirection));
|
||||||
|
this.lockedControls.push(this.btnDirection);
|
||||||
|
|
||||||
|
this.sldrGradient = new Common.UI.MultiSliderGradient({
|
||||||
|
el: $('#textart-slider-gradient'),
|
||||||
|
width: 125,
|
||||||
|
minValue: 0,
|
||||||
|
maxValue: 100,
|
||||||
|
values: [0, 100]
|
||||||
|
});
|
||||||
|
this.sldrGradient.on('change', _.bind(this.onGradientChange, this));
|
||||||
|
this.sldrGradient.on('changecomplete', _.bind(this.onGradientChangeComplete, this));
|
||||||
|
this.sldrGradient.on('thumbclick', function(cmp, index){
|
||||||
|
me.GradColor.currentIdx = index;
|
||||||
|
var color = me.GradColor.colors[me.GradColor.currentIdx];
|
||||||
|
me.btnGradColor.setColor(color);
|
||||||
|
me.colorsGrad.select(color,false);
|
||||||
|
});
|
||||||
|
this.sldrGradient.on('thumbdblclick', function(cmp){
|
||||||
|
me.btnGradColor.cmpEl.find('button').dropdown('toggle');
|
||||||
|
});
|
||||||
|
this.lockedControls.push(this.sldrGradient);
|
||||||
|
|
||||||
|
this.cmbBorderSize = new Common.UI.ComboBorderSizeEditable({
|
||||||
|
el: $('#textart-combo-border-size'),
|
||||||
|
style: "width: 93px;",
|
||||||
|
txtNoBorders: this.txtNoBorders
|
||||||
|
})
|
||||||
|
.on('selected', _.bind(this.onBorderSizeSelect, this))
|
||||||
|
.on('changed:before',_.bind(this.onBorderSizeChanged, this, true))
|
||||||
|
.on('changed:after', _.bind(this.onBorderSizeChanged, this, false))
|
||||||
|
.on('combo:blur', _.bind(this.onComboBlur, this, false));
|
||||||
|
this.BorderSize = this.cmbBorderSize.store.at(2).get('value');
|
||||||
|
this.cmbBorderSize.setValue(this.BorderSize);
|
||||||
|
this.lockedControls.push(this.cmbBorderSize);
|
||||||
|
|
||||||
|
this.cmbBorderType = new Common.UI.ComboBorderType({
|
||||||
|
el: $('#textart-combo-border-type'),
|
||||||
|
style: "width: 93px;",
|
||||||
|
menuStyle: 'min-width: 93px;'
|
||||||
|
}).on('selected', _.bind(this.onBorderTypeSelect, this))
|
||||||
|
.on('combo:blur', _.bind(this.onComboBlur, this, false));
|
||||||
|
this.BorderType = Asc.c_oDashType.solid;
|
||||||
|
this.cmbBorderType.setValue(this.BorderType);
|
||||||
|
this.lockedControls.push(this.cmbBorderType);
|
||||||
|
|
||||||
|
this.cmbTransform = new Common.UI.ComboDataView({
|
||||||
|
itemWidth: 50,
|
||||||
|
itemHeight: 50,
|
||||||
|
menuMaxHeight: 300,
|
||||||
|
enableKeyEvents: true,
|
||||||
|
cls: 'combo-textart'
|
||||||
|
});
|
||||||
|
this.cmbTransform.render($('#textart-combo-transform'));
|
||||||
|
this.cmbTransform.openButton.menu.cmpEl.css({
|
||||||
|
'min-width': 178,
|
||||||
|
'max-width': 178
|
||||||
|
});
|
||||||
|
this.cmbTransform.on('click', _.bind(this.onTransformSelect, this));
|
||||||
|
this.cmbTransform.openButton.menu.on('show:after', function () {
|
||||||
|
me.cmbTransform.menuPicker.scroller.update({alwaysVisibleY: true});
|
||||||
|
});
|
||||||
|
this.lockedControls.push(this.cmbTransform);
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
createDelayedElements: function() {
|
createDelayedElements: function() {
|
||||||
|
this.createDelayedControls();
|
||||||
|
|
||||||
var global_hatch_menu_map = [
|
var global_hatch_menu_map = [
|
||||||
0,1,3,2,4,
|
0,1,3,2,4,
|
||||||
53,5,6,7,8,
|
53,5,6,7,8,
|
||||||
|
|
@ -1446,11 +1304,31 @@ define([
|
||||||
}
|
}
|
||||||
this.UpdateThemeColors();
|
this.UpdateThemeColors();
|
||||||
this.fillTransform(this.api.asc_getPropertyEditorTextArts());
|
this.fillTransform(this.api.asc_getPropertyEditorTextArts());
|
||||||
|
this._initSettings = false;
|
||||||
},
|
},
|
||||||
|
|
||||||
onInitStandartTextures: function(texture) {
|
onInitStandartTextures: function(texture) {
|
||||||
var me = this;
|
var me = this;
|
||||||
if (texture && texture.length>0){
|
if (texture && texture.length>0){
|
||||||
|
if (!this.btnTexture) {
|
||||||
|
this.btnTexture = new Common.UI.ComboBox({
|
||||||
|
el: $('#textart-combo-fill-texture'),
|
||||||
|
template: _.template([
|
||||||
|
'<div class="input-group combobox combo-dataview-menu input-group-nr dropdown-toggle" tabindex="0" data-toggle="dropdown">',
|
||||||
|
'<div class="form-control text" style="width: 90px;">' + this.textSelectTexture + '</div>',
|
||||||
|
'<div style="display: table-cell;"></div>',
|
||||||
|
'<button type="button" class="btn btn-default"><span class="caret img-commonctrl"></span></button>',
|
||||||
|
'</div>'
|
||||||
|
].join(''))
|
||||||
|
});
|
||||||
|
this.textureMenu = new Common.UI.Menu({
|
||||||
|
items: [
|
||||||
|
{ template: _.template('<div id="id-textart-menu-texture" style="width: 233px; margin: 0 5px;"></div>') }
|
||||||
|
]
|
||||||
|
});
|
||||||
|
this.textureMenu.render($('#textart-combo-fill-texture'));
|
||||||
|
this.lockedControls.push(this.btnTexture);
|
||||||
|
}
|
||||||
var texturearray = [];
|
var texturearray = [];
|
||||||
_.each(texture, function(item){
|
_.each(texture, function(item){
|
||||||
texturearray.push({
|
texturearray.push({
|
||||||
|
|
@ -1493,8 +1371,29 @@ define([
|
||||||
},
|
},
|
||||||
|
|
||||||
fillTextArt: function() {
|
fillTextArt: function() {
|
||||||
var me = this,
|
var me = this;
|
||||||
models = this.application.getCollection('Common.Collections.TextArt').models,
|
if (!this.cmbTextArt) {
|
||||||
|
this.cmbTextArt = new Common.UI.ComboDataView({
|
||||||
|
itemWidth: 50,
|
||||||
|
itemHeight: 50,
|
||||||
|
menuMaxHeight: 300,
|
||||||
|
enableKeyEvents: true,
|
||||||
|
showLast: false,
|
||||||
|
cls: 'combo-textart'
|
||||||
|
});
|
||||||
|
this.cmbTextArt.render($('#textart-combo-template'));
|
||||||
|
this.cmbTextArt.openButton.menu.cmpEl.css({
|
||||||
|
'min-width': 178,
|
||||||
|
'max-width': 178
|
||||||
|
});
|
||||||
|
this.cmbTextArt.on('click', _.bind(this.onTextArtSelect, this));
|
||||||
|
this.cmbTextArt.openButton.menu.on('show:after', function () {
|
||||||
|
me.cmbTextArt.menuPicker.scroller.update({alwaysVisibleY: true});
|
||||||
|
});
|
||||||
|
this.lockedControls.push(this.cmbTextArt);
|
||||||
|
}
|
||||||
|
|
||||||
|
var models = this.application.getCollection('Common.Collections.TextArt').models,
|
||||||
count = this.cmbTextArt.menuPicker.store.length;
|
count = this.cmbTextArt.menuPicker.store.length;
|
||||||
if (count>0 && count==models.length) {
|
if (count>0 && count==models.length) {
|
||||||
var data = this.cmbTextArt.menuPicker.store.models;
|
var data = this.cmbTextArt.menuPicker.store.models;
|
||||||
|
|
@ -1552,6 +1451,104 @@ define([
|
||||||
},
|
},
|
||||||
|
|
||||||
UpdateThemeColors: function() {
|
UpdateThemeColors: function() {
|
||||||
|
if (!this.btnBackColor) {
|
||||||
|
this.btnBackColor = new Common.UI.ColorButton({
|
||||||
|
style: "width:45px;",
|
||||||
|
menu : new Common.UI.Menu({
|
||||||
|
items: [
|
||||||
|
{ template: _.template('<div id="textart-back-color-menu" style="width: 165px; height: 220px; margin: 10px;"></div>') },
|
||||||
|
{ template: _.template('<a id="textart-back-color-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
|
||||||
|
]
|
||||||
|
})
|
||||||
|
});
|
||||||
|
this.btnBackColor.render( $('#textart-back-color-btn'));
|
||||||
|
this.btnBackColor.setColor('transparent');
|
||||||
|
this.lockedControls.push(this.btnBackColor);
|
||||||
|
this.colorsBack = new Common.UI.ThemeColorPalette({
|
||||||
|
el: $('#textart-back-color-menu'),
|
||||||
|
value: 'transparent',
|
||||||
|
transparent: true
|
||||||
|
});
|
||||||
|
this.colorsBack.on('select', _.bind(this.onColorsBackSelect, this));
|
||||||
|
$(this.el).on('click', '#textart-back-color-new', _.bind(this.addNewColor, this, this.colorsBack, this.btnBackColor));
|
||||||
|
|
||||||
|
this.btnFGColor = new Common.UI.ColorButton({
|
||||||
|
style: "width:45px;",
|
||||||
|
menu : new Common.UI.Menu({
|
||||||
|
items: [
|
||||||
|
{ template: _.template('<div id="textart-foreground-color-menu" style="width: 165px; height: 220px; margin: 10px;"></div>') },
|
||||||
|
{ template: _.template('<a id="textart-foreground-color-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
|
||||||
|
]
|
||||||
|
})
|
||||||
|
});
|
||||||
|
this.btnFGColor.render( $('#textart-foreground-color-btn'));
|
||||||
|
this.btnFGColor.setColor('000000');
|
||||||
|
this.lockedControls.push(this.btnFGColor);
|
||||||
|
this.colorsFG = new Common.UI.ThemeColorPalette({
|
||||||
|
el: $('#textart-foreground-color-menu'),
|
||||||
|
value: '000000'
|
||||||
|
});
|
||||||
|
this.colorsFG.on('select', _.bind(this.onColorsFGSelect, this));
|
||||||
|
$(this.el).on('click', '#textart-foreground-color-new', _.bind(this.addNewColor, this, this.colorsFG, this.btnFGColor));
|
||||||
|
|
||||||
|
this.btnBGColor = new Common.UI.ColorButton({
|
||||||
|
style: "width:45px;",
|
||||||
|
menu : new Common.UI.Menu({
|
||||||
|
items: [
|
||||||
|
{ template: _.template('<div id="textart-background-color-menu" style="width: 165px; height: 220px; margin: 10px;"></div>') },
|
||||||
|
{ template: _.template('<a id="textart-background-color-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
|
||||||
|
]
|
||||||
|
})
|
||||||
|
});
|
||||||
|
this.btnBGColor.render( $('#textart-background-color-btn'));
|
||||||
|
this.btnBGColor.setColor('ffffff');
|
||||||
|
this.lockedControls.push(this.btnBGColor);
|
||||||
|
this.colorsBG = new Common.UI.ThemeColorPalette({
|
||||||
|
el: $('#textart-background-color-menu'),
|
||||||
|
value: 'ffffff'
|
||||||
|
});
|
||||||
|
this.colorsBG.on('select', _.bind(this.onColorsBGSelect, this));
|
||||||
|
$(this.el).on('click', '#textart-background-color-new', _.bind(this.addNewColor, this, this.colorsBG, this.btnBGColor));
|
||||||
|
|
||||||
|
this.btnGradColor = new Common.UI.ColorButton({
|
||||||
|
style: "width:45px;",
|
||||||
|
menu : new Common.UI.Menu({
|
||||||
|
items: [
|
||||||
|
{ template: _.template('<div id="textart-gradient-color-menu" style="width: 165px; height: 220px; margin: 10px;"></div>') },
|
||||||
|
{ template: _.template('<a id="textart-gradient-color-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
|
||||||
|
]
|
||||||
|
})
|
||||||
|
});
|
||||||
|
this.btnGradColor.render( $('#textart-gradient-color-btn'));
|
||||||
|
this.btnGradColor.setColor('000000');
|
||||||
|
this.lockedControls.push(this.btnGradColor);
|
||||||
|
this.colorsGrad = new Common.UI.ThemeColorPalette({
|
||||||
|
el: $('#textart-gradient-color-menu'),
|
||||||
|
value: '000000'
|
||||||
|
});
|
||||||
|
this.colorsGrad.on('select', _.bind(this.onColorsGradientSelect, this));
|
||||||
|
$(this.el).on('click', '#textart-gradient-color-new', _.bind(this.addNewColor, this, this.colorsGrad, this.btnGradColor));
|
||||||
|
|
||||||
|
this.btnBorderColor = new Common.UI.ColorButton({
|
||||||
|
style: "width:45px;",
|
||||||
|
menu : new Common.UI.Menu({
|
||||||
|
items: [
|
||||||
|
{ template: _.template('<div id="textart-border-color-menu" style="width: 165px; height: 220px; margin: 10px;"></div>') },
|
||||||
|
{ template: _.template('<a id="textart-border-color-new" style="padding-left:12px;">' + this.textNewColor + '</a>') }
|
||||||
|
]
|
||||||
|
})
|
||||||
|
});
|
||||||
|
this.btnBorderColor.render( $('#textart-border-color-btn'));
|
||||||
|
this.btnBorderColor.setColor('000000');
|
||||||
|
this.lockedControls.push(this.btnBorderColor);
|
||||||
|
this.colorsBorder = new Common.UI.ThemeColorPalette({
|
||||||
|
el: $('#textart-border-color-menu'),
|
||||||
|
value: '000000'
|
||||||
|
});
|
||||||
|
this.colorsBorder.on('select', _.bind(this.onColorsBorderSelect, this));
|
||||||
|
$(this.el).on('click', '#textart-border-color-new', _.bind(this.addNewColor, this, this.colorsBorder, this.btnBorderColor));
|
||||||
|
}
|
||||||
|
|
||||||
this.colorsBorder.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
|
this.colorsBorder.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
|
||||||
this.colorsBack.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
|
this.colorsBack.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
|
||||||
this.colorsFG.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
|
this.colorsFG.updateColors(Common.Utils.ThemeColor.getEffectColors(), Common.Utils.ThemeColor.getStandartColors());
|
||||||
|
|
@ -1580,6 +1577,8 @@ define([
|
||||||
},
|
},
|
||||||
|
|
||||||
disableControls: function(disable) {
|
disableControls: function(disable) {
|
||||||
|
if (this._initSettings) return;
|
||||||
|
|
||||||
if (this._state.DisabledControls!==disable) {
|
if (this._state.DisabledControls!==disable) {
|
||||||
this._state.DisabledControls = disable;
|
this._state.DisabledControls = disable;
|
||||||
_.each(this.lockedControls, function(item) {
|
_.each(this.lockedControls, function(item) {
|
||||||
|
|
|
||||||
|
|
@ -122,8 +122,7 @@ define([
|
||||||
id : 'id-toolbar-btn-newdocument',
|
id : 'id-toolbar-btn-newdocument',
|
||||||
cls : 'btn-toolbar',
|
cls : 'btn-toolbar',
|
||||||
iconCls : 'btn-newdocument',
|
iconCls : 'btn-newdocument',
|
||||||
lock : [_set.slideDeleted, _set.paragraphLock, _set.lostConnect, _set.noSlides],
|
lock : [_set.slideDeleted, _set.paragraphLock, _set.lostConnect, _set.noSlides]
|
||||||
hint : me.tipNewDocument
|
|
||||||
});
|
});
|
||||||
me.paragraphControls.push(me.btnNewDocument);
|
me.paragraphControls.push(me.btnNewDocument);
|
||||||
|
|
||||||
|
|
@ -131,8 +130,7 @@ define([
|
||||||
id : 'id-toolbar-btn-opendocument',
|
id : 'id-toolbar-btn-opendocument',
|
||||||
cls : 'btn-toolbar',
|
cls : 'btn-toolbar',
|
||||||
iconCls : 'btn-opendocument',
|
iconCls : 'btn-opendocument',
|
||||||
lock : [_set.slideDeleted, _set.paragraphLock, _set.lostConnect, _set.noSlides],
|
lock : [_set.slideDeleted, _set.paragraphLock, _set.lostConnect, _set.noSlides]
|
||||||
hint : me.tipOpenDocument
|
|
||||||
});
|
});
|
||||||
me.paragraphControls.push(me.btnOpenDocument);
|
me.paragraphControls.push(me.btnOpenDocument);
|
||||||
|
|
||||||
|
|
@ -140,38 +138,9 @@ define([
|
||||||
id : 'id-toolbar-button-add-slide',
|
id : 'id-toolbar-button-add-slide',
|
||||||
cls : 'btn-toolbar',
|
cls : 'btn-toolbar',
|
||||||
iconCls : 'btn-addslide',
|
iconCls : 'btn-addslide',
|
||||||
hint : me.tipAddSlide + Common.Utils.String.platformKey('Ctrl+M'),
|
|
||||||
split : true,
|
split : true,
|
||||||
lock : [_set.menuFileOpen, _set.slideDeleted, _set.lostConnect, _set.disableOnStart],
|
lock : [_set.menuFileOpen, _set.slideDeleted, _set.lostConnect, _set.disableOnStart],
|
||||||
menu : new Common.UI.Menu({
|
menu : true
|
||||||
items: [
|
|
||||||
{ template: _.template('<div id="id-toolbar-menu-addslide" class="menu-layouts" style="width: 302px; margin: 0 4px;"></div>') }
|
|
||||||
]
|
|
||||||
})
|
|
||||||
}).on('render:after', function(btn) {
|
|
||||||
me.mnuAddSlidePicker = new Common.UI.DataView({
|
|
||||||
el : $('#id-toolbar-menu-addslide'),
|
|
||||||
parentMenu : btn.menu,
|
|
||||||
showLast: false,
|
|
||||||
restoreHeight: 300,
|
|
||||||
style: 'max-height: 300px;',
|
|
||||||
store : PE.getCollection('SlideLayouts'),
|
|
||||||
itemTemplate: _.template([
|
|
||||||
'<div class="layout" id="<%= id %>" style="width: <%= itemWidth %>px;">',
|
|
||||||
'<div style="background-image: url(<%= imageUrl %>); width: <%= itemWidth %>px; height: <%= itemHeight %>px;"/>',
|
|
||||||
'<div class="title"><%= title %></div> ',
|
|
||||||
'</div>'
|
|
||||||
].join(''))
|
|
||||||
});
|
|
||||||
|
|
||||||
if (me.btnAddSlide.menu) {
|
|
||||||
me.btnAddSlide.menu.on('show:after', function () {
|
|
||||||
me.onSlidePickerShowAfter(me.mnuAddSlidePicker);
|
|
||||||
me.mnuAddSlidePicker.scroller.update({alwaysVisibleY: true});
|
|
||||||
me.mnuAddSlidePicker.scroller.scrollTop(0);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
me.mnuAddSlidePicker._needRecalcSlideLayout = true;
|
|
||||||
});
|
});
|
||||||
me.slideOnlyControls.push(me.btnAddSlide);
|
me.slideOnlyControls.push(me.btnAddSlide);
|
||||||
|
|
||||||
|
|
@ -180,50 +149,15 @@ define([
|
||||||
cls : 'btn-toolbar',
|
cls : 'btn-toolbar',
|
||||||
iconCls : 'btn-changeslide',
|
iconCls : 'btn-changeslide',
|
||||||
lock : [_set.menuFileOpen, _set.slideDeleted, _set.slideLock, _set.lostConnect, _set.noSlides, _set.disableOnStart],
|
lock : [_set.menuFileOpen, _set.slideDeleted, _set.slideLock, _set.lostConnect, _set.noSlides, _set.disableOnStart],
|
||||||
hint : me.tipChangeSlide,
|
menu : true
|
||||||
menu : new Common.UI.Menu({
|
|
||||||
items: [
|
|
||||||
{ template: _.template('<div id="id-toolbar-menu-changeslide" class="menu-layouts" style="width: 302px; margin: 0 4px;"></div>') }
|
|
||||||
]
|
|
||||||
})
|
|
||||||
}).on('render:after', function(btn) {
|
|
||||||
me.mnuChangeSlidePicker = new Common.UI.DataView({
|
|
||||||
el : $('#id-toolbar-menu-changeslide'),
|
|
||||||
parentMenu : btn.menu,
|
|
||||||
showLast: false,
|
|
||||||
restoreHeight: 300,
|
|
||||||
style: 'max-height: 300px;',
|
|
||||||
store : PE.getCollection('SlideLayouts'),
|
|
||||||
itemTemplate: _.template([
|
|
||||||
'<div class="layout" id="<%= id %>" style="width: <%= itemWidth %>px;">',
|
|
||||||
'<div style="background-image: url(<%= imageUrl %>); width: <%= itemWidth %>px; height: <%= itemHeight %>px;"/>',
|
|
||||||
'<div class="title"><%= title %></div> ',
|
|
||||||
'</div>'
|
|
||||||
].join(''))
|
|
||||||
});
|
|
||||||
|
|
||||||
if (me.btnChangeSlide.menu) {
|
|
||||||
me.btnChangeSlide.menu.on('show:after', function () {
|
|
||||||
me.onSlidePickerShowAfter(me.mnuChangeSlidePicker);
|
|
||||||
me.mnuChangeSlidePicker.scroller.update({alwaysVisibleY: true});
|
|
||||||
me.mnuChangeSlidePicker.scroller.scrollTop(0);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
me.mnuChangeSlidePicker._needRecalcSlideLayout = true;
|
|
||||||
});
|
});
|
||||||
me.slideOnlyControls.push(me.btnChangeSlide);
|
me.slideOnlyControls.push(me.btnChangeSlide);
|
||||||
me.listenTo(PE.getCollection('SlideLayouts'), 'reset', function() {
|
|
||||||
me.mnuAddSlidePicker._needRecalcSlideLayout = true;
|
|
||||||
if (me.mnuChangeSlidePicker)
|
|
||||||
me.mnuChangeSlidePicker._needRecalcSlideLayout = true;
|
|
||||||
});
|
|
||||||
|
|
||||||
me.btnPreview = new Common.UI.Button({
|
me.btnPreview = new Common.UI.Button({
|
||||||
id : 'id-toolbar-button-preview',
|
id : 'id-toolbar-button-preview',
|
||||||
cls : 'btn-toolbar',
|
cls : 'btn-toolbar',
|
||||||
iconCls : 'btn-preview',
|
iconCls : 'btn-preview',
|
||||||
lock : [_set.menuFileOpen, _set.slideDeleted, _set.noSlides, _set.disableOnStart],
|
lock : [_set.menuFileOpen, _set.slideDeleted, _set.noSlides, _set.disableOnStart],
|
||||||
hint : me.tipPreview,
|
|
||||||
split : true,
|
split : true,
|
||||||
menu : new Common.UI.Menu({
|
menu : new Common.UI.Menu({
|
||||||
items : [
|
items : [
|
||||||
|
|
@ -244,8 +178,7 @@ define([
|
||||||
id : 'id-toolbar-btn-print',
|
id : 'id-toolbar-btn-print',
|
||||||
cls : 'btn-toolbar',
|
cls : 'btn-toolbar',
|
||||||
iconCls : 'btn-print',
|
iconCls : 'btn-print',
|
||||||
lock : [_set.slideDeleted, _set.noSlides, _set.cantPrint],
|
lock : [_set.slideDeleted, _set.noSlides, _set.cantPrint]
|
||||||
hint : me.tipPrint + Common.Utils.String.platformKey('Ctrl+P')
|
|
||||||
});
|
});
|
||||||
me.paragraphControls.push(me.btnPrint);
|
me.paragraphControls.push(me.btnPrint);
|
||||||
|
|
||||||
|
|
@ -253,16 +186,14 @@ define([
|
||||||
id : 'id-toolbar-btn-save',
|
id : 'id-toolbar-btn-save',
|
||||||
cls : 'btn-toolbar',
|
cls : 'btn-toolbar',
|
||||||
iconCls : me.btnSaveCls,
|
iconCls : me.btnSaveCls,
|
||||||
lock : [_set.lostConnect],
|
lock : [_set.lostConnect]
|
||||||
hint : me.btnSaveTip
|
|
||||||
});
|
});
|
||||||
|
|
||||||
me.btnUndo = new Common.UI.Button({
|
me.btnUndo = new Common.UI.Button({
|
||||||
id : 'id-toolbar-btn-undo',
|
id : 'id-toolbar-btn-undo',
|
||||||
cls : 'btn-toolbar',
|
cls : 'btn-toolbar',
|
||||||
iconCls : 'btn-undo',
|
iconCls : 'btn-undo',
|
||||||
lock : [_set.undoLock, _set.slideDeleted, _set.lostConnect, _set.disableOnStart],
|
lock : [_set.undoLock, _set.slideDeleted, _set.lostConnect, _set.disableOnStart]
|
||||||
hint : me.tipUndo + Common.Utils.String.platformKey('Ctrl+Z')
|
|
||||||
});
|
});
|
||||||
me.slideOnlyControls.push(me.btnUndo);
|
me.slideOnlyControls.push(me.btnUndo);
|
||||||
|
|
||||||
|
|
@ -270,8 +201,7 @@ define([
|
||||||
id : 'id-toolbar-btn-redo',
|
id : 'id-toolbar-btn-redo',
|
||||||
cls : 'btn-toolbar',
|
cls : 'btn-toolbar',
|
||||||
iconCls : 'btn-redo',
|
iconCls : 'btn-redo',
|
||||||
lock : [_set.redoLock, _set.slideDeleted, _set.lostConnect, _set.disableOnStart],
|
lock : [_set.redoLock, _set.slideDeleted, _set.lostConnect, _set.disableOnStart]
|
||||||
hint : me.tipRedo + Common.Utils.String.platformKey('Ctrl+Y')
|
|
||||||
});
|
});
|
||||||
me.slideOnlyControls.push(me.btnRedo);
|
me.slideOnlyControls.push(me.btnRedo);
|
||||||
|
|
||||||
|
|
@ -279,8 +209,7 @@ define([
|
||||||
id : 'id-toolbar-btn-copy',
|
id : 'id-toolbar-btn-copy',
|
||||||
cls : 'btn-toolbar',
|
cls : 'btn-toolbar',
|
||||||
iconCls : 'btn-copy',
|
iconCls : 'btn-copy',
|
||||||
lock : [_set.slideDeleted, _set.lostConnect, _set.noSlides, _set.disableOnStart],
|
lock : [_set.slideDeleted, _set.lostConnect, _set.noSlides, _set.disableOnStart]
|
||||||
hint : me.tipCopy + Common.Utils.String.platformKey('Ctrl+C')
|
|
||||||
});
|
});
|
||||||
me.slideOnlyControls.push(me.btnCopy);
|
me.slideOnlyControls.push(me.btnCopy);
|
||||||
|
|
||||||
|
|
@ -288,8 +217,7 @@ define([
|
||||||
id : 'id-toolbar-btn-paste',
|
id : 'id-toolbar-btn-paste',
|
||||||
cls : 'btn-toolbar',
|
cls : 'btn-toolbar',
|
||||||
iconCls : 'btn-paste',
|
iconCls : 'btn-paste',
|
||||||
lock : [_set.slideDeleted, _set.paragraphLock, _set.lostConnect, _set.noSlides],
|
lock : [_set.slideDeleted, _set.paragraphLock, _set.lostConnect, _set.noSlides]
|
||||||
hint : me.tipPaste + Common.Utils.String.platformKey('Ctrl+V')
|
|
||||||
});
|
});
|
||||||
me.paragraphControls.push(me.btnPaste);
|
me.paragraphControls.push(me.btnPaste);
|
||||||
|
|
||||||
|
|
@ -334,7 +262,6 @@ define([
|
||||||
cls : 'btn-toolbar',
|
cls : 'btn-toolbar',
|
||||||
iconCls : 'btn-bold',
|
iconCls : 'btn-bold',
|
||||||
lock : [_set.slideDeleted, _set.paragraphLock, _set.lostConnect, _set.noSlides, _set.noTextSelected, _set.shapeLock],
|
lock : [_set.slideDeleted, _set.paragraphLock, _set.lostConnect, _set.noSlides, _set.noTextSelected, _set.shapeLock],
|
||||||
hint : me.textBold + Common.Utils.String.platformKey('Ctrl+B'),
|
|
||||||
enableToggle: true
|
enableToggle: true
|
||||||
});
|
});
|
||||||
me.paragraphControls.push(me.btnBold);
|
me.paragraphControls.push(me.btnBold);
|
||||||
|
|
@ -344,7 +271,6 @@ define([
|
||||||
cls : 'btn-toolbar',
|
cls : 'btn-toolbar',
|
||||||
iconCls : 'btn-italic',
|
iconCls : 'btn-italic',
|
||||||
lock : [_set.slideDeleted, _set.paragraphLock, _set.lostConnect, _set.noSlides, _set.noTextSelected, _set.shapeLock],
|
lock : [_set.slideDeleted, _set.paragraphLock, _set.lostConnect, _set.noSlides, _set.noTextSelected, _set.shapeLock],
|
||||||
hint : me.textItalic + Common.Utils.String.platformKey('Ctrl+I'),
|
|
||||||
enableToggle: true
|
enableToggle: true
|
||||||
});
|
});
|
||||||
me.paragraphControls.push(me.btnItalic);
|
me.paragraphControls.push(me.btnItalic);
|
||||||
|
|
@ -354,7 +280,6 @@ define([
|
||||||
cls : 'btn-toolbar',
|
cls : 'btn-toolbar',
|
||||||
iconCls : 'btn-underline',
|
iconCls : 'btn-underline',
|
||||||
lock : [_set.slideDeleted, _set.paragraphLock, _set.lostConnect, _set.noSlides, _set.noTextSelected, _set.shapeLock],
|
lock : [_set.slideDeleted, _set.paragraphLock, _set.lostConnect, _set.noSlides, _set.noTextSelected, _set.shapeLock],
|
||||||
hint : me.textUnderline + Common.Utils.String.platformKey('Ctrl+U'),
|
|
||||||
enableToggle: true
|
enableToggle: true
|
||||||
});
|
});
|
||||||
me.paragraphControls.push(me.btnUnderline);
|
me.paragraphControls.push(me.btnUnderline);
|
||||||
|
|
@ -364,7 +289,6 @@ define([
|
||||||
cls : 'btn-toolbar',
|
cls : 'btn-toolbar',
|
||||||
iconCls : 'btn-strikeout',
|
iconCls : 'btn-strikeout',
|
||||||
lock : [_set.slideDeleted, _set.paragraphLock, _set.lostConnect, _set.noSlides, _set.noTextSelected, _set.shapeLock],
|
lock : [_set.slideDeleted, _set.paragraphLock, _set.lostConnect, _set.noSlides, _set.noTextSelected, _set.shapeLock],
|
||||||
hint : me.textStrikeout,
|
|
||||||
enableToggle: true
|
enableToggle: true
|
||||||
});
|
});
|
||||||
me.paragraphControls.push(me.btnStrikeout);
|
me.paragraphControls.push(me.btnStrikeout);
|
||||||
|
|
@ -374,7 +298,6 @@ define([
|
||||||
cls : 'btn-toolbar',
|
cls : 'btn-toolbar',
|
||||||
iconCls : 'btn-superscript',
|
iconCls : 'btn-superscript',
|
||||||
lock : [_set.slideDeleted, _set.paragraphLock, _set.lostConnect, _set.noSlides, _set.noTextSelected, _set.shapeLock],
|
lock : [_set.slideDeleted, _set.paragraphLock, _set.lostConnect, _set.noSlides, _set.noTextSelected, _set.shapeLock],
|
||||||
hint : me.textSuperscript,
|
|
||||||
enableToggle: true,
|
enableToggle: true,
|
||||||
toggleGroup : 'superscriptGroup'
|
toggleGroup : 'superscriptGroup'
|
||||||
});
|
});
|
||||||
|
|
@ -385,7 +308,6 @@ define([
|
||||||
cls : 'btn-toolbar',
|
cls : 'btn-toolbar',
|
||||||
iconCls : 'btn-subscript',
|
iconCls : 'btn-subscript',
|
||||||
lock : [_set.slideDeleted, _set.paragraphLock, _set.lostConnect, _set.noSlides, _set.noTextSelected, _set.shapeLock],
|
lock : [_set.slideDeleted, _set.paragraphLock, _set.lostConnect, _set.noSlides, _set.noTextSelected, _set.shapeLock],
|
||||||
hint : me.textSubscript,
|
|
||||||
enableToggle: true,
|
enableToggle: true,
|
||||||
toggleGroup : 'superscriptGroup'
|
toggleGroup : 'superscriptGroup'
|
||||||
});
|
});
|
||||||
|
|
@ -396,7 +318,6 @@ define([
|
||||||
cls : 'btn-toolbar',
|
cls : 'btn-toolbar',
|
||||||
iconCls : 'btn-fontcolor',
|
iconCls : 'btn-fontcolor',
|
||||||
lock : [_set.slideDeleted, _set.paragraphLock, _set.lostConnect, _set.noSlides, _set.noTextSelected, _set.shapeLock],
|
lock : [_set.slideDeleted, _set.paragraphLock, _set.lostConnect, _set.noSlides, _set.noTextSelected, _set.shapeLock],
|
||||||
hint : me.tipFontColor,
|
|
||||||
split : true,
|
split : true,
|
||||||
menu : new Common.UI.Menu({
|
menu : new Common.UI.Menu({
|
||||||
items: [
|
items: [
|
||||||
|
|
@ -419,8 +340,7 @@ define([
|
||||||
id : 'id-toolbar-btn-clearstyle',
|
id : 'id-toolbar-btn-clearstyle',
|
||||||
cls : 'btn-toolbar',
|
cls : 'btn-toolbar',
|
||||||
iconCls : 'btn-clearstyle',
|
iconCls : 'btn-clearstyle',
|
||||||
lock : [_set.slideDeleted, _set.paragraphLock, _set.lostConnect, _set.noSlides, _set.noParagraphSelected],
|
lock : [_set.slideDeleted, _set.paragraphLock, _set.lostConnect, _set.noSlides, _set.noParagraphSelected]
|
||||||
hint : me.tipClearStyle
|
|
||||||
});
|
});
|
||||||
me.paragraphControls.push(me.btnClearStyle);
|
me.paragraphControls.push(me.btnClearStyle);
|
||||||
|
|
||||||
|
|
@ -429,7 +349,6 @@ define([
|
||||||
cls : 'btn-toolbar',
|
cls : 'btn-toolbar',
|
||||||
iconCls : 'btn-copystyle',
|
iconCls : 'btn-copystyle',
|
||||||
lock : [_set.slideDeleted, _set.lostConnect, _set.noSlides, _set.noParagraphSelected, _set.disableOnStart],
|
lock : [_set.slideDeleted, _set.lostConnect, _set.noSlides, _set.noParagraphSelected, _set.disableOnStart],
|
||||||
hint : me.tipCopyStyle + Common.Utils.String.platformKey('Ctrl+Shift+C'),
|
|
||||||
enableToggle: true
|
enableToggle: true
|
||||||
});
|
});
|
||||||
me.slideOnlyControls.push(me.btnCopyStyle);
|
me.slideOnlyControls.push(me.btnCopyStyle);
|
||||||
|
|
@ -439,34 +358,11 @@ define([
|
||||||
cls : 'btn-toolbar',
|
cls : 'btn-toolbar',
|
||||||
iconCls : 'btn-setmarkers',
|
iconCls : 'btn-setmarkers',
|
||||||
lock : [_set.slideDeleted, _set.paragraphLock, _set.lostConnect, _set.noSlides, _set.noParagraphSelected],
|
lock : [_set.slideDeleted, _set.paragraphLock, _set.lostConnect, _set.noSlides, _set.noParagraphSelected],
|
||||||
hint : me.tipMarkers,
|
|
||||||
enableToggle: true,
|
enableToggle: true,
|
||||||
toggleGroup : 'markersGroup',
|
toggleGroup : 'markersGroup',
|
||||||
split : true,
|
split : true,
|
||||||
menu : new Common.UI.Menu({
|
menu : true
|
||||||
items: [
|
|
||||||
{ template: _.template('<div id="id-toolbar-menu-markers" class="menu-markers" style="width: 185px; margin: 0 5px;"></div>') }
|
|
||||||
]
|
|
||||||
})
|
|
||||||
}).on('render:after', function(btn) {
|
|
||||||
me.mnuMarkersPicker = new Common.UI.DataView({
|
|
||||||
el: $('#id-toolbar-menu-markers'),
|
|
||||||
parentMenu: btn.menu,
|
|
||||||
restoreHeight: 92,
|
|
||||||
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('<div id="<%= id %>" class="item-markerlist" style="background-position: 0 -<%= offsety %>px;"></div>')
|
|
||||||
});
|
});
|
||||||
});
|
|
||||||
|
|
||||||
me.paragraphControls.push(me.btnMarkers);
|
me.paragraphControls.push(me.btnMarkers);
|
||||||
|
|
||||||
me.btnNumbers = new Common.UI.Button({
|
me.btnNumbers = new Common.UI.Button({
|
||||||
|
|
@ -474,42 +370,34 @@ define([
|
||||||
cls : 'btn-toolbar',
|
cls : 'btn-toolbar',
|
||||||
iconCls : 'btn-numbering',
|
iconCls : 'btn-numbering',
|
||||||
lock : [_set.slideDeleted, _set.paragraphLock, _set.lostConnect, _set.noSlides, _set.noParagraphSelected],
|
lock : [_set.slideDeleted, _set.paragraphLock, _set.lostConnect, _set.noSlides, _set.noParagraphSelected],
|
||||||
hint : me.tipNumbers,
|
|
||||||
enableToggle: true,
|
enableToggle: true,
|
||||||
toggleGroup : 'markersGroup',
|
toggleGroup : 'markersGroup',
|
||||||
split : true,
|
split : true,
|
||||||
menu : new Common.UI.Menu({
|
menu : true
|
||||||
items: [
|
|
||||||
{ template: _.template('<div id="id-toolbar-menu-numbering" class="menu-markers" style="width: 330px; margin: 0 5px;"></div>') }
|
|
||||||
]
|
|
||||||
})
|
|
||||||
}).on('render:after', function(btn) {
|
|
||||||
me.mnuNumbersPicker = new Common.UI.DataView({
|
|
||||||
el: $('#id-toolbar-menu-numbering'),
|
|
||||||
parentMenu: btn.menu,
|
|
||||||
restoreHeight: 164,
|
|
||||||
store: new Common.UI.DataViewStore([
|
|
||||||
{ offsety: 0, data:{type:1,subtype:-1} },
|
|
||||||
{ offsety: 296, data:{type:1,subtype:4} },
|
|
||||||
{ offsety: 370, data:{type:1,subtype:5} },
|
|
||||||
{ offsety: 444, data:{type:1,subtype:6} },
|
|
||||||
{ offsety: 74, data:{type:1,subtype:1} },
|
|
||||||
{ offsety: 148, data:{type:1,subtype:2} },
|
|
||||||
{ offsety: 222, data:{type:1,subtype:3} },
|
|
||||||
{ offsety: 518, data:{type:1,subtype:7} }
|
|
||||||
]),
|
|
||||||
itemTemplate: _.template('<div id="<%= id %>" class="item-numberlist" style="background-position: 0 -<%= offsety %>px;"></div>')
|
|
||||||
});
|
|
||||||
});
|
});
|
||||||
me.paragraphControls.push(me.btnNumbers);
|
me.paragraphControls.push(me.btnNumbers);
|
||||||
|
|
||||||
|
var clone = function(source) {
|
||||||
|
var obj = {};
|
||||||
|
for (var prop in source)
|
||||||
|
obj[prop] = (typeof(source[prop])=='object') ? clone(source[prop]) : source[prop];
|
||||||
|
return obj;
|
||||||
|
};
|
||||||
|
|
||||||
|
this.mnuMarkersPicker = {
|
||||||
|
conf: {index:0},
|
||||||
|
selectByIndex: function (idx) {
|
||||||
|
this.conf.index = idx;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
this.mnuNumbersPicker = clone(this.mnuMarkersPicker);
|
||||||
|
|
||||||
me.btnHorizontalAlign = new Common.UI.Button({
|
me.btnHorizontalAlign = new Common.UI.Button({
|
||||||
id : 'id-toolbar-btn-halign',
|
id : 'id-toolbar-btn-halign',
|
||||||
cls : 'btn-toolbar',
|
cls : 'btn-toolbar',
|
||||||
iconCls : 'btn-align-left',
|
iconCls : 'btn-align-left',
|
||||||
icls : 'btn-align-left',
|
icls : 'btn-align-left',
|
||||||
lock : [_set.slideDeleted, _set.paragraphLock, _set.lostConnect, _set.noSlides, _set.noParagraphSelected],
|
lock : [_set.slideDeleted, _set.paragraphLock, _set.lostConnect, _set.noSlides, _set.noParagraphSelected],
|
||||||
hint : me.tipHAligh,
|
|
||||||
menu : new Common.UI.Menu({
|
menu : new Common.UI.Menu({
|
||||||
items: [
|
items: [
|
||||||
{
|
{
|
||||||
|
|
@ -554,7 +442,6 @@ define([
|
||||||
id : 'id-toolbar-btn-valign',
|
id : 'id-toolbar-btn-valign',
|
||||||
cls : 'btn-toolbar',
|
cls : 'btn-toolbar',
|
||||||
lock : [_set.slideDeleted, _set.paragraphLock, _set.lostConnect, _set.noSlides, _set.noParagraphSelected],
|
lock : [_set.slideDeleted, _set.paragraphLock, _set.lostConnect, _set.noSlides, _set.noParagraphSelected],
|
||||||
hint : me.tipVAligh,
|
|
||||||
iconCls : 'btn-align-middle',
|
iconCls : 'btn-align-middle',
|
||||||
icls : 'btn-align-middle',
|
icls : 'btn-align-middle',
|
||||||
menu : new Common.UI.Menu({
|
menu : new Common.UI.Menu({
|
||||||
|
|
@ -593,8 +480,7 @@ define([
|
||||||
id : 'id-toolbar-btn-decoffset',
|
id : 'id-toolbar-btn-decoffset',
|
||||||
cls : 'btn-toolbar',
|
cls : 'btn-toolbar',
|
||||||
iconCls : 'btn-decoffset',
|
iconCls : 'btn-decoffset',
|
||||||
lock : [_set.decIndentLock, _set.slideDeleted, _set.paragraphLock, _set.lostConnect, _set.noSlides, _set.noParagraphSelected],
|
lock : [_set.decIndentLock, _set.slideDeleted, _set.paragraphLock, _set.lostConnect, _set.noSlides, _set.noParagraphSelected]
|
||||||
hint : me.tipDecPrLeft + Common.Utils.String.platformKey('Ctrl+Shift+M')
|
|
||||||
});
|
});
|
||||||
me.paragraphControls.push(me.btnDecLeftOffset);
|
me.paragraphControls.push(me.btnDecLeftOffset);
|
||||||
|
|
||||||
|
|
@ -602,8 +488,7 @@ define([
|
||||||
id : 'id-toolbar-btn-incoffset',
|
id : 'id-toolbar-btn-incoffset',
|
||||||
cls : 'btn-toolbar',
|
cls : 'btn-toolbar',
|
||||||
iconCls : 'btn-incoffset',
|
iconCls : 'btn-incoffset',
|
||||||
lock : [_set.incIndentLock, _set.slideDeleted, _set.paragraphLock, _set.lostConnect, _set.noSlides, _set.noParagraphSelected],
|
lock : [_set.incIndentLock, _set.slideDeleted, _set.paragraphLock, _set.lostConnect, _set.noSlides, _set.noParagraphSelected]
|
||||||
hint : me.tipIncPrLeft
|
|
||||||
});
|
});
|
||||||
me.paragraphControls.push(me.btnIncLeftOffset);
|
me.paragraphControls.push(me.btnIncLeftOffset);
|
||||||
|
|
||||||
|
|
@ -612,7 +497,6 @@ define([
|
||||||
cls : 'btn-toolbar',
|
cls : 'btn-toolbar',
|
||||||
iconCls : 'btn-linespace',
|
iconCls : 'btn-linespace',
|
||||||
lock : [_set.slideDeleted, _set.paragraphLock, _set.lostConnect, _set.noSlides, _set.noParagraphSelected],
|
lock : [_set.slideDeleted, _set.paragraphLock, _set.lostConnect, _set.noSlides, _set.noParagraphSelected],
|
||||||
hint : me.tipLineSpace,
|
|
||||||
menu : new Common.UI.Menu({
|
menu : new Common.UI.Menu({
|
||||||
style: 'min-width: 60px;',
|
style: 'min-width: 60px;',
|
||||||
items: [
|
items: [
|
||||||
|
|
@ -632,7 +516,6 @@ define([
|
||||||
cls : 'btn-toolbar',
|
cls : 'btn-toolbar',
|
||||||
iconCls : 'btn-inserttable',
|
iconCls : 'btn-inserttable',
|
||||||
lock : [_set.slideDeleted, _set.lostConnect, _set.noSlides, _set.disableOnStart],
|
lock : [_set.slideDeleted, _set.lostConnect, _set.noSlides, _set.disableOnStart],
|
||||||
hint : me.tipInsertTable,
|
|
||||||
menu : new Common.UI.Menu({
|
menu : new Common.UI.Menu({
|
||||||
items: [
|
items: [
|
||||||
{ template: _.template('<div id="id-toolbar-menu-tablepicker" class="dimension-picker" style="margin: 5px 10px;"></div>') },
|
{ template: _.template('<div id="id-toolbar-menu-tablepicker" class="dimension-picker" style="margin: 5px 10px;"></div>') },
|
||||||
|
|
@ -655,7 +538,6 @@ define([
|
||||||
cls : 'btn-toolbar',
|
cls : 'btn-toolbar',
|
||||||
iconCls : 'btn-insertimage',
|
iconCls : 'btn-insertimage',
|
||||||
lock : [_set.slideDeleted, _set.lostConnect, _set.noSlides, _set.disableOnStart],
|
lock : [_set.slideDeleted, _set.lostConnect, _set.noSlides, _set.disableOnStart],
|
||||||
hint : me.tipInsertImage,
|
|
||||||
menu : new Common.UI.Menu({
|
menu : new Common.UI.Menu({
|
||||||
items: [
|
items: [
|
||||||
{ caption: me.mniImageFromFile, value: 'file' },
|
{ caption: me.mniImageFromFile, value: 'file' },
|
||||||
|
|
@ -670,7 +552,6 @@ define([
|
||||||
cls : 'btn-toolbar',
|
cls : 'btn-toolbar',
|
||||||
iconCls : 'btn-insertchart',
|
iconCls : 'btn-insertchart',
|
||||||
lock : [_set.slideDeleted, _set.lostConnect, _set.noSlides, _set.disableOnStart],
|
lock : [_set.slideDeleted, _set.lostConnect, _set.noSlides, _set.disableOnStart],
|
||||||
hint : me.tipInsertChart,
|
|
||||||
menu : new Common.UI.Menu({
|
menu : new Common.UI.Menu({
|
||||||
style: 'width: 560px;',
|
style: 'width: 560px;',
|
||||||
items: [
|
items: [
|
||||||
|
|
@ -730,7 +611,6 @@ define([
|
||||||
cls : 'btn-toolbar',
|
cls : 'btn-toolbar',
|
||||||
iconCls : 'btn-inserttext',
|
iconCls : 'btn-inserttext',
|
||||||
lock : [_set.slideDeleted, _set.lostConnect, _set.noSlides, _set.disableOnStart],
|
lock : [_set.slideDeleted, _set.lostConnect, _set.noSlides, _set.disableOnStart],
|
||||||
hint : me.tipInsertText,
|
|
||||||
enableToggle: true,
|
enableToggle: true,
|
||||||
split : true,
|
split : true,
|
||||||
menu : new Common.UI.Menu({
|
menu : new Common.UI.Menu({
|
||||||
|
|
@ -756,8 +636,7 @@ define([
|
||||||
id : 'id-toolbar-btn-inserthyperlink',
|
id : 'id-toolbar-btn-inserthyperlink',
|
||||||
cls : 'btn-toolbar',
|
cls : 'btn-toolbar',
|
||||||
iconCls : 'btn-inserthyperlink',
|
iconCls : 'btn-inserthyperlink',
|
||||||
lock : [_set.hyperlinkLock, _set.slideDeleted, _set.paragraphLock, _set.lostConnect, _set.noSlides, _set.noParagraphSelected],
|
lock : [_set.hyperlinkLock, _set.slideDeleted, _set.paragraphLock, _set.lostConnect, _set.noSlides, _set.noParagraphSelected]
|
||||||
hint : me.tipInsertHyperlink + Common.Utils.String.platformKey('Ctrl+K')
|
|
||||||
});
|
});
|
||||||
me.paragraphControls.push(me.btnInsertHyperlink);
|
me.paragraphControls.push(me.btnInsertHyperlink);
|
||||||
|
|
||||||
|
|
@ -766,7 +645,6 @@ define([
|
||||||
cls : 'btn-toolbar',
|
cls : 'btn-toolbar',
|
||||||
iconCls : 'btn-insertshape',
|
iconCls : 'btn-insertshape',
|
||||||
lock : [_set.slideDeleted, _set.lostConnect, _set.noSlides, _set.disableOnStart],
|
lock : [_set.slideDeleted, _set.lostConnect, _set.noSlides, _set.disableOnStart],
|
||||||
hint : me.tipInsertShape,
|
|
||||||
enableToggle: true,
|
enableToggle: true,
|
||||||
menu : new Common.UI.Menu({cls: 'menu-shapes'})
|
menu : new Common.UI.Menu({cls: 'menu-shapes'})
|
||||||
});
|
});
|
||||||
|
|
@ -777,12 +655,11 @@ define([
|
||||||
cls : 'btn-toolbar',
|
cls : 'btn-toolbar',
|
||||||
iconCls : 'btn-colorschemas',
|
iconCls : 'btn-colorschemas',
|
||||||
lock : [_set.themeLock, _set.slideDeleted, _set.lostConnect, _set.noSlides, _set.disableOnStart],
|
lock : [_set.themeLock, _set.slideDeleted, _set.lostConnect, _set.noSlides, _set.disableOnStart],
|
||||||
hint : me.tipColorSchemas,
|
|
||||||
menu : new Common.UI.Menu({
|
menu : new Common.UI.Menu({
|
||||||
items : [],
|
items : [],
|
||||||
maxHeight : 600,
|
maxHeight : 600,
|
||||||
restoreHeight: 600
|
restoreHeight: 600
|
||||||
}).on('render:after', function(mnu) {
|
}).on('show:before', function(mnu) {
|
||||||
this.scroller = new Common.UI.Scroller({
|
this.scroller = new Common.UI.Scroller({
|
||||||
el: $(this.el).find('.dropdown-menu '),
|
el: $(this.el).find('.dropdown-menu '),
|
||||||
useKeyboard: this.enableKeyEvents && !this.handleSelect,
|
useKeyboard: this.enableKeyEvents && !this.handleSelect,
|
||||||
|
|
@ -815,71 +692,23 @@ define([
|
||||||
cls : 'btn-toolbar',
|
cls : 'btn-toolbar',
|
||||||
iconCls : 'btn-hidebars',
|
iconCls : 'btn-hidebars',
|
||||||
lock : [_set.menuFileOpen, _set.slideDeleted, _set.disableOnStart],
|
lock : [_set.menuFileOpen, _set.slideDeleted, _set.disableOnStart],
|
||||||
hint : me.tipViewSettings,
|
menu : true
|
||||||
menu : new Common.UI.Menu({
|
|
||||||
cls: 'pull-right',
|
|
||||||
style: 'min-width: 180px;',
|
|
||||||
items: [
|
|
||||||
me.mnuitemCompactToolbar = new Common.UI.MenuItem({
|
|
||||||
caption : me.textCompactView,
|
|
||||||
checkable : true
|
|
||||||
}),
|
|
||||||
me.mnuitemHideTitleBar = new Common.UI.MenuItem({
|
|
||||||
caption : me.textHideTitleBar,
|
|
||||||
checkable : true
|
|
||||||
}),
|
|
||||||
me.mnuitemHideStatusBar = new Common.UI.MenuItem({
|
|
||||||
caption : me.textHideStatusBar,
|
|
||||||
checkable : true
|
|
||||||
}),
|
|
||||||
this.mnuitemHideRulers = new Common.UI.MenuItem({
|
|
||||||
caption : this.textHideLines,
|
|
||||||
checkable : true
|
|
||||||
}),
|
|
||||||
{ caption: '--' },
|
|
||||||
me.btnFitPage = new Common.UI.MenuItem({
|
|
||||||
caption: me.textFitPage,
|
|
||||||
checkable: true
|
|
||||||
}),
|
|
||||||
me.btnFitWidth = new Common.UI.MenuItem({
|
|
||||||
caption: me.textFitWidth,
|
|
||||||
checkable: true
|
|
||||||
}),
|
|
||||||
(new Common.UI.MenuItem({
|
|
||||||
template: _.template([
|
|
||||||
'<div id="id-toolbar-menu-zoom" class="menu-zoom" style="height: 25px;" ',
|
|
||||||
'<% if(!_.isUndefined(options.stopPropagation)) { %>',
|
|
||||||
'data-stopPropagation="true"',
|
|
||||||
'<% } %>',
|
|
||||||
'>',
|
|
||||||
'<label class="title">' + me.textZoom + '</label>',
|
|
||||||
'<button id="id-menu-zoom-in" type="button" style="float:right; margin: 2px 5px 0 0;" class="btn small btn-toolbar"><span class="btn-icon btn-zoomin"> </span></button>',
|
|
||||||
'<label class="zoom">100%</label>',
|
|
||||||
'<button id="id-menu-zoom-out" type="button" style="float:right; margin-top: 2px;" class="btn small btn-toolbar"><span class="btn-icon btn-zoomout"> </span></button>',
|
|
||||||
'</div>'
|
|
||||||
].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);
|
|
||||||
me.slideOnlyControls.push(me.btnHide);
|
me.slideOnlyControls.push(me.btnHide);
|
||||||
|
|
||||||
|
this.btnFitPage = {
|
||||||
|
conf: {checked:false},
|
||||||
|
setChecked: function(val) { this.conf.checked = val;},
|
||||||
|
isChecked: function () { return this.conf.checked; }
|
||||||
|
};
|
||||||
|
this.btnFitWidth = clone(this.btnFitPage);
|
||||||
|
this.mnuZoom = {options: {value: 100}};
|
||||||
|
|
||||||
me.btnAdvSettings = new Common.UI.Button({
|
me.btnAdvSettings = new Common.UI.Button({
|
||||||
id : 'id-toolbar-btn-settings',
|
id : 'id-toolbar-btn-settings',
|
||||||
cls : 'btn-toolbar',
|
cls : 'btn-toolbar',
|
||||||
iconCls : 'btn-settings',
|
iconCls : 'btn-settings',
|
||||||
lock : [_set.slideDeleted, _set.disableOnStart],
|
lock : [_set.slideDeleted, _set.disableOnStart]
|
||||||
hint : me.tipAdvSettings
|
|
||||||
});
|
});
|
||||||
me.slideOnlyControls.push(me.btnAdvSettings);
|
me.slideOnlyControls.push(me.btnAdvSettings);
|
||||||
|
|
||||||
|
|
@ -888,7 +717,6 @@ define([
|
||||||
cls : 'btn-toolbar',
|
cls : 'btn-toolbar',
|
||||||
iconCls : 'btn-align-shape',
|
iconCls : 'btn-align-shape',
|
||||||
lock : [_set.slideDeleted, _set.shapeLock, _set.lostConnect, _set.noSlides, _set.noObjectSelected, _set.disableOnStart],
|
lock : [_set.slideDeleted, _set.shapeLock, _set.lostConnect, _set.noSlides, _set.noObjectSelected, _set.disableOnStart],
|
||||||
hint : me.tipShapeAlign,
|
|
||||||
menu : new Common.UI.Menu({
|
menu : new Common.UI.Menu({
|
||||||
items: [
|
items: [
|
||||||
{
|
{
|
||||||
|
|
@ -943,7 +771,6 @@ define([
|
||||||
cls : 'btn-toolbar',
|
cls : 'btn-toolbar',
|
||||||
iconCls : 'btn-arrange-shape',
|
iconCls : 'btn-arrange-shape',
|
||||||
lock : [_set.slideDeleted, _set.lostConnect, _set.noSlides, _set.noObjectSelected, _set.disableOnStart],
|
lock : [_set.slideDeleted, _set.lostConnect, _set.noSlides, _set.noObjectSelected, _set.disableOnStart],
|
||||||
hint : me.tipShapeArrange,
|
|
||||||
menu : new Common.UI.Menu({
|
menu : new Common.UI.Menu({
|
||||||
items: [
|
items: [
|
||||||
{
|
{
|
||||||
|
|
@ -987,7 +814,6 @@ define([
|
||||||
cls : 'btn-toolbar',
|
cls : 'btn-toolbar',
|
||||||
iconCls : 'btn-slidesize',
|
iconCls : 'btn-slidesize',
|
||||||
lock : [_set.docPropsLock, _set.slideDeleted, _set.lostConnect, _set.noSlides, _set.disableOnStart],
|
lock : [_set.docPropsLock, _set.slideDeleted, _set.lostConnect, _set.noSlides, _set.disableOnStart],
|
||||||
hint : me.tipSlideSize,
|
|
||||||
menu : new Common.UI.Menu({
|
menu : new Common.UI.Menu({
|
||||||
items: [
|
items: [
|
||||||
{
|
{
|
||||||
|
|
@ -1141,20 +967,6 @@ define([
|
||||||
var value = Common.localStorage.getItem('pe-compact-toolbar');
|
var value = Common.localStorage.getItem('pe-compact-toolbar');
|
||||||
var valueCompact = !!(value!==null && parseInt(value) == 1 || value === null && mode.customization && mode.customization.compactToolbar);
|
var valueCompact = !!(value!==null && parseInt(value) == 1 || value === null && mode.customization && mode.customization.compactToolbar);
|
||||||
|
|
||||||
value = Common.localStorage.getItem('pe-hidden-title');
|
|
||||||
var valueTitle = (value!==null && parseInt(value) == 1);
|
|
||||||
|
|
||||||
value = Common.localStorage.getItem('pe-hidden-status');
|
|
||||||
var valueStatus = (value!==null && parseInt(value) == 1);
|
|
||||||
|
|
||||||
value = Common.localStorage.getItem("pe-hidden-rulers");
|
|
||||||
var valueRulers = (value !== null && parseInt(value) == 1);
|
|
||||||
|
|
||||||
me.mnuitemCompactToolbar.setChecked(valueCompact);
|
|
||||||
me.mnuitemHideTitleBar.setChecked(valueTitle);
|
|
||||||
me.mnuitemHideStatusBar.setChecked(valueStatus);
|
|
||||||
me.mnuitemHideRulers.setChecked(valueRulers);
|
|
||||||
|
|
||||||
el.html(this.template({
|
el.html(this.template({
|
||||||
isCompactView: valueCompact
|
isCompactView: valueCompact
|
||||||
}));
|
}));
|
||||||
|
|
@ -1162,8 +974,6 @@ define([
|
||||||
me.rendererComponents(valueCompact ? 'short' : 'full');
|
me.rendererComponents(valueCompact ? 'short' : 'full');
|
||||||
me.isCompactView = valueCompact;
|
me.isCompactView = valueCompact;
|
||||||
|
|
||||||
this.mnuitemCompactToolbar.on('toggle', _.bind(this.changeViewMode, this));
|
|
||||||
|
|
||||||
this.trigger('render:after', this);
|
this.trigger('render:after', this);
|
||||||
|
|
||||||
return this;
|
return this;
|
||||||
|
|
@ -1238,6 +1048,267 @@ define([
|
||||||
},
|
},
|
||||||
|
|
||||||
createDelayedElements: function() {
|
createDelayedElements: function() {
|
||||||
|
// set hints
|
||||||
|
this.btnNewDocument.updateHint(this.tipNewDocument);
|
||||||
|
this.btnOpenDocument.updateHint(this.tipOpenDocument);
|
||||||
|
this.btnAddSlide.updateHint(this.tipAddSlide + Common.Utils.String.platformKey('Ctrl+M'));
|
||||||
|
this.btnChangeSlide.updateHint(this.tipChangeSlide);
|
||||||
|
this.btnPreview.updateHint(this.tipPreview);
|
||||||
|
this.btnPrint.updateHint(this.tipPrint + Common.Utils.String.platformKey('Ctrl+P'));
|
||||||
|
this.btnSave.updateHint(this.btnSaveTip);
|
||||||
|
this.btnUndo.updateHint(this.tipUndo + Common.Utils.String.platformKey('Ctrl+Z'));
|
||||||
|
this.btnRedo.updateHint(this.tipRedo + Common.Utils.String.platformKey('Ctrl+Y'));
|
||||||
|
this.btnCopy.updateHint(this.tipCopy + Common.Utils.String.platformKey('Ctrl+C'));
|
||||||
|
this.btnPaste.updateHint(this.tipPaste + Common.Utils.String.platformKey('Ctrl+V'));
|
||||||
|
this.btnBold.updateHint(this.textBold + Common.Utils.String.platformKey('Ctrl+B'));
|
||||||
|
this.btnItalic.updateHint(this.textItalic + Common.Utils.String.platformKey('Ctrl+I'));
|
||||||
|
this.btnUnderline.updateHint(this.textUnderline + Common.Utils.String.platformKey('Ctrl+U'));
|
||||||
|
this.btnStrikeout.updateHint(this.textStrikeout);
|
||||||
|
this.btnSuperscript.updateHint(this.textSuperscript);
|
||||||
|
this.btnSubscript.updateHint(this.textSubscript);
|
||||||
|
this.btnFontColor.updateHint(this.tipFontColor);
|
||||||
|
this.btnClearStyle.updateHint(this.tipClearStyle);
|
||||||
|
this.btnCopyStyle.updateHint(this.tipCopyStyle + Common.Utils.String.platformKey('Ctrl+Shift+C'));
|
||||||
|
this.btnMarkers.updateHint(this.tipMarkers);
|
||||||
|
this.btnNumbers.updateHint(this.tipNumbers);
|
||||||
|
this.btnHorizontalAlign.updateHint(this.tipHAligh);
|
||||||
|
this.btnVerticalAlign.updateHint(this.tipVAligh);
|
||||||
|
this.btnDecLeftOffset.updateHint(this.tipDecPrLeft + Common.Utils.String.platformKey('Ctrl+Shift+M'));
|
||||||
|
this.btnIncLeftOffset.updateHint(this.tipIncPrLeft);
|
||||||
|
this.btnLineSpace.updateHint(this.tipLineSpace);
|
||||||
|
this.btnInsertTable.updateHint(this.tipInsertTable);
|
||||||
|
this.btnInsertImage.updateHint(this.tipInsertImage);
|
||||||
|
this.btnInsertChart.updateHint(this.tipInsertChart);
|
||||||
|
this.btnInsertText.updateHint(this.tipInsertText);
|
||||||
|
this.btnInsertHyperlink.updateHint(this.tipInsertHyperlink + Common.Utils.String.platformKey('Ctrl+K'));
|
||||||
|
this.btnInsertShape.updateHint(this.tipInsertShape);
|
||||||
|
this.btnColorSchemas.updateHint(this.tipColorSchemas);
|
||||||
|
this.btnHide.updateHint(this.tipViewSettings);
|
||||||
|
this.btnAdvSettings.updateHint(this.tipAdvSettings);
|
||||||
|
this.btnShapeAlign.updateHint(this.tipShapeAlign);
|
||||||
|
this.btnShapeArrange.updateHint(this.tipShapeArrange);
|
||||||
|
this.btnSlideSize.updateHint(this.tipSlideSize);
|
||||||
|
|
||||||
|
// set menus
|
||||||
|
|
||||||
|
var me = this;
|
||||||
|
|
||||||
|
this.btnHide.setMenu(
|
||||||
|
new Common.UI.Menu({
|
||||||
|
cls: 'pull-right',
|
||||||
|
style: 'min-width: 180px;',
|
||||||
|
items: [
|
||||||
|
this.mnuitemCompactToolbar = new Common.UI.MenuItem({
|
||||||
|
caption : this.textCompactView,
|
||||||
|
checkable : true
|
||||||
|
}),
|
||||||
|
this.mnuitemHideTitleBar = new Common.UI.MenuItem({
|
||||||
|
caption : this.textHideTitleBar,
|
||||||
|
checkable : true
|
||||||
|
}),
|
||||||
|
this.mnuitemHideStatusBar = new Common.UI.MenuItem({
|
||||||
|
caption : this.textHideStatusBar,
|
||||||
|
checkable : true
|
||||||
|
}),
|
||||||
|
this.mnuitemHideRulers = new Common.UI.MenuItem({
|
||||||
|
caption : this.textHideLines,
|
||||||
|
checkable : true
|
||||||
|
}),
|
||||||
|
{ caption: '--' },
|
||||||
|
this.btnFitPage = new Common.UI.MenuItem({
|
||||||
|
caption: this.textFitPage,
|
||||||
|
checkable: true,
|
||||||
|
checked: this.btnFitPage.isChecked()
|
||||||
|
}),
|
||||||
|
this.btnFitWidth = new Common.UI.MenuItem({
|
||||||
|
caption: this.textFitWidth,
|
||||||
|
checkable: true,
|
||||||
|
checked: this.btnFitWidth.isChecked()
|
||||||
|
}),
|
||||||
|
this.mnuZoom = new Common.UI.MenuItem({
|
||||||
|
template: _.template([
|
||||||
|
'<div id="id-toolbar-menu-zoom" class="menu-zoom" style="height: 25px;" ',
|
||||||
|
'<% if(!_.isUndefined(options.stopPropagation)) { %>',
|
||||||
|
'data-stopPropagation="true"',
|
||||||
|
'<% } %>',
|
||||||
|
'>',
|
||||||
|
'<label class="title">' + this.textZoom + '</label>',
|
||||||
|
'<button id="id-menu-zoom-in" type="button" style="float:right; margin: 2px 5px 0 0;" class="btn small btn-toolbar"><span class="btn-icon btn-zoomin"> </span></button>',
|
||||||
|
'<label class="zoom"><%= options.value %>%</label>',
|
||||||
|
'<button id="id-menu-zoom-out" type="button" style="float:right; margin-top: 2px;" class="btn small btn-toolbar"><span class="btn-icon btn-zoomout"> </span></button>',
|
||||||
|
'</div>'
|
||||||
|
].join('')),
|
||||||
|
stopPropagation: true,
|
||||||
|
value: this.mnuZoom.options.value
|
||||||
|
})
|
||||||
|
]
|
||||||
|
})
|
||||||
|
);
|
||||||
|
if (this.mode.isDesktopApp)
|
||||||
|
this.mnuitemHideTitleBar.hide();
|
||||||
|
|
||||||
|
this.mnuZoomOut = new Common.UI.Button({
|
||||||
|
el : $('#id-menu-zoom-out'),
|
||||||
|
cls : 'btn-toolbar'
|
||||||
|
});
|
||||||
|
this.mnuZoomIn = new Common.UI.Button({
|
||||||
|
el : $('#id-menu-zoom-in'),
|
||||||
|
cls : 'btn-toolbar'
|
||||||
|
});
|
||||||
|
|
||||||
|
this.btnMarkers.setMenu(
|
||||||
|
new Common.UI.Menu({
|
||||||
|
items: [
|
||||||
|
{ template: _.template('<div id="id-toolbar-menu-markers" class="menu-markers" style="width: 185px; margin: 0 5px;"></div>') }
|
||||||
|
]
|
||||||
|
})
|
||||||
|
);
|
||||||
|
|
||||||
|
this.btnNumbers.setMenu(
|
||||||
|
new Common.UI.Menu({
|
||||||
|
items: [
|
||||||
|
{ template: _.template('<div id="id-toolbar-menu-numbering" class="menu-markers" style="width: 330px; margin: 0 5px;"></div>') }
|
||||||
|
]
|
||||||
|
})
|
||||||
|
);
|
||||||
|
|
||||||
|
this.btnAddSlide.setMenu(
|
||||||
|
new Common.UI.Menu({
|
||||||
|
items: [
|
||||||
|
{ template: _.template('<div id="id-toolbar-menu-addslide" class="menu-layouts" style="width: 302px; margin: 0 4px;"></div>') }
|
||||||
|
]
|
||||||
|
})
|
||||||
|
);
|
||||||
|
|
||||||
|
this.btnChangeSlide.setMenu(
|
||||||
|
new Common.UI.Menu({
|
||||||
|
items: [
|
||||||
|
{ template: _.template('<div id="id-toolbar-menu-changeslide" class="menu-layouts" style="width: 302px; margin: 0 4px;"></div>') }
|
||||||
|
]
|
||||||
|
})
|
||||||
|
);
|
||||||
|
|
||||||
|
// set dataviews
|
||||||
|
|
||||||
|
var _conf = this.mnuMarkersPicker.conf;
|
||||||
|
this.mnuMarkersPicker = new Common.UI.DataView({
|
||||||
|
el: $('#id-toolbar-menu-markers'),
|
||||||
|
parentMenu: this.btnMarkers.menu,
|
||||||
|
restoreHeight: 92,
|
||||||
|
allowScrollbar: false,
|
||||||
|
store: new Common.UI.DataViewStore([
|
||||||
|
{ offsety:0, data:{type:0, subtype:-1} },
|
||||||
|
{ offsety:38, data:{type:0, subtype:1} },
|
||||||
|
{ offsety:76, data:{type:0, subtype:2} },
|
||||||
|
{ offsety:114, data:{type:0, subtype:3} },
|
||||||
|
{ offsety:152, data:{type:0, subtype:4} },
|
||||||
|
{ offsety:190, data:{type:0, subtype:5} },
|
||||||
|
{ offsety:228, data:{type:0, subtype:6} },
|
||||||
|
{ offsety:266, data:{type:0, subtype:7} }
|
||||||
|
]),
|
||||||
|
itemTemplate: _.template('<div id="<%= id %>" class="item-markerlist" style="background-position: 0 -<%= offsety %>px;"></div>')
|
||||||
|
});
|
||||||
|
_conf && this.mnuMarkersPicker.selectByIndex(_conf.index, true);
|
||||||
|
|
||||||
|
_conf = this.mnuNumbersPicker.conf;
|
||||||
|
this.mnuNumbersPicker = new Common.UI.DataView({
|
||||||
|
el: $('#id-toolbar-menu-numbering'),
|
||||||
|
parentMenu: this.btnNumbers.menu,
|
||||||
|
restoreHeight: 164,
|
||||||
|
allowScrollbar: false,
|
||||||
|
store: new Common.UI.DataViewStore([
|
||||||
|
{ offsety: 0, data:{type:1,subtype:-1} },
|
||||||
|
{ offsety: 296, data:{type:1,subtype:4} },
|
||||||
|
{ offsety: 370, data:{type:1,subtype:5} },
|
||||||
|
{ offsety: 444, data:{type:1,subtype:6} },
|
||||||
|
{ offsety: 74, data:{type:1,subtype:1} },
|
||||||
|
{ offsety: 148, data:{type:1,subtype:2} },
|
||||||
|
{ offsety: 222, data:{type:1,subtype:3} },
|
||||||
|
{ offsety: 518, data:{type:1,subtype:7} }
|
||||||
|
]),
|
||||||
|
itemTemplate: _.template('<div id="<%= id %>" class="item-numberlist" style="background-position: 0 -<%= offsety %>px;"></div>')
|
||||||
|
});
|
||||||
|
_conf && this.mnuNumbersPicker.selectByIndex(_conf.index, true);
|
||||||
|
|
||||||
|
this.mnuAddSlidePicker = new Common.UI.DataView({
|
||||||
|
el : $('#id-toolbar-menu-addslide'),
|
||||||
|
parentMenu : this.btnAddSlide.menu,
|
||||||
|
showLast: false,
|
||||||
|
restoreHeight: 300,
|
||||||
|
style: 'max-height: 300px;',
|
||||||
|
store : PE.getCollection('SlideLayouts'),
|
||||||
|
itemTemplate: _.template([
|
||||||
|
'<div class="layout" id="<%= id %>" style="width: <%= itemWidth %>px;">',
|
||||||
|
'<div style="background-image: url(<%= imageUrl %>); width: <%= itemWidth %>px; height: <%= itemHeight %>px;"/>',
|
||||||
|
'<div class="title"><%= title %></div> ',
|
||||||
|
'</div>'
|
||||||
|
].join(''))
|
||||||
|
});
|
||||||
|
if (this.btnAddSlide.menu) {
|
||||||
|
this.btnAddSlide.menu.on('show:after', function () {
|
||||||
|
me.onSlidePickerShowAfter(me.mnuAddSlidePicker);
|
||||||
|
me.mnuAddSlidePicker.scroller.update({alwaysVisibleY: true});
|
||||||
|
me.mnuAddSlidePicker.scroller.scrollTop(0);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
this.mnuAddSlidePicker._needRecalcSlideLayout = true;
|
||||||
|
|
||||||
|
var createDataPicker = function (btn) {
|
||||||
|
me.mnuChangeSlidePicker = new Common.UI.DataView({
|
||||||
|
el : $('#id-toolbar-menu-changeslide'),
|
||||||
|
parentMenu : me.btnChangeSlide.menu,
|
||||||
|
showLast: false,
|
||||||
|
restoreHeight: 300,
|
||||||
|
style: 'max-height: 300px;',
|
||||||
|
store : PE.getCollection('SlideLayouts'),
|
||||||
|
itemTemplate: _.template([
|
||||||
|
'<div class="layout" id="<%= id %>" style="width: <%= itemWidth %>px;">',
|
||||||
|
'<div style="background-image: url(<%= imageUrl %>); width: <%= itemWidth %>px; height: <%= itemHeight %>px;"/>',
|
||||||
|
'<div class="title"><%= title %></div> ',
|
||||||
|
'</div>'
|
||||||
|
].join(''))
|
||||||
|
});
|
||||||
|
if (me.btnChangeSlide.menu) {
|
||||||
|
me.btnChangeSlide.menu.on('show:after', function () {
|
||||||
|
me.onSlidePickerShowAfter(me.mnuChangeSlidePicker);
|
||||||
|
me.mnuChangeSlidePicker.scroller.update({alwaysVisibleY: true});
|
||||||
|
me.mnuChangeSlidePicker.scroller.scrollTop(0);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
me.mnuChangeSlidePicker._needRecalcSlideLayout = true;
|
||||||
|
};
|
||||||
|
// btnChangeSlide isn't in compact toolbar mode -> may be rendered after createDelayedElements
|
||||||
|
if (this.btnChangeSlide.rendered)
|
||||||
|
createDataPicker(this.btnChangeSlide);
|
||||||
|
else
|
||||||
|
this.btnChangeSlide.on('render:after', createDataPicker);
|
||||||
|
|
||||||
|
this.listenTo(PE.getCollection('SlideLayouts'), 'reset', function() {
|
||||||
|
me.mnuAddSlidePicker._needRecalcSlideLayout = true;
|
||||||
|
if (me.mnuChangeSlidePicker)
|
||||||
|
me.mnuChangeSlidePicker._needRecalcSlideLayout = true;
|
||||||
|
});
|
||||||
|
|
||||||
|
var mode = this.mode;
|
||||||
|
var value = Common.localStorage.getItem('pe-compact-toolbar');
|
||||||
|
var valueCompact = !!(value!==null && parseInt(value) == 1 || value === null && mode.customization && mode.customization.compactToolbar);
|
||||||
|
|
||||||
|
value = Common.localStorage.getItem('pe-hidden-title');
|
||||||
|
var valueTitle = (value!==null && parseInt(value) == 1);
|
||||||
|
|
||||||
|
value = Common.localStorage.getItem('pe-hidden-status');
|
||||||
|
var valueStatus = (value!==null && parseInt(value) == 1);
|
||||||
|
|
||||||
|
value = Common.localStorage.getItem("pe-hidden-rulers");
|
||||||
|
var valueRulers = (value !== null && parseInt(value) == 1);
|
||||||
|
|
||||||
|
this.mnuitemCompactToolbar.setChecked(valueCompact, true);
|
||||||
|
this.mnuitemCompactToolbar.on('toggle', _.bind(this.changeViewMode, this));
|
||||||
|
|
||||||
|
this.mnuitemHideTitleBar.setChecked(valueTitle, true);
|
||||||
|
this.mnuitemHideStatusBar.setChecked(valueStatus, true);
|
||||||
|
this.mnuitemHideRulers.setChecked(valueRulers, true);
|
||||||
|
|
||||||
// // Enable none paragraph components
|
// // Enable none paragraph components
|
||||||
this.lockToolbar(PE.enumLock.disableOnStart, false, {array: this.slideOnlyControls.concat(this.shapeControls)});
|
this.lockToolbar(PE.enumLock.disableOnStart, false, {array: this.slideOnlyControls.concat(this.shapeControls)});
|
||||||
|
|
||||||
|
|
@ -1282,10 +1353,8 @@ define([
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if (mode.isDesktopApp) {
|
if (mode.isDesktopApp)
|
||||||
$('.toolbar-group-native').hide();
|
$('.toolbar-group-native').hide();
|
||||||
this.mnuitemHideTitleBar.hide();
|
|
||||||
}
|
|
||||||
|
|
||||||
this.lockToolbar(PE.enumLock.cantPrint, !mode.canPrint || mode.disableDownload, {array: [this.btnPrint]});
|
this.lockToolbar(PE.enumLock.cantPrint, !mode.canPrint || mode.disableDownload, {array: [this.btnPrint]});
|
||||||
},
|
},
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue