Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
W
web-apps
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
0
Merge Requests
0
Analytics
Analytics
Repository
Value Stream
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Commits
Issue Boards
Open sidebar
Boris Kocherov
web-apps
Commits
252ef526
Commit
252ef526
authored
Aug 16, 2016
by
Julia Radzhabova
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
[DE] Delay rendering controls on the right panel.
parent
a18be3f5
Changes
5
Hide whitespace changes
Inline
Side-by-side
Showing
5 changed files
with
1122 additions
and
1094 deletions
+1122
-1094
apps/documenteditor/main/app/view/ChartSettings.js
apps/documenteditor/main/app/view/ChartSettings.js
+138
-131
apps/documenteditor/main/app/view/MailMergeSettings.js
apps/documenteditor/main/app/view/MailMergeSettings.js
+66
-52
apps/documenteditor/main/app/view/ShapeSettings.js
apps/documenteditor/main/app/view/ShapeSettings.js
+439
-444
apps/documenteditor/main/app/view/TableSettings.js
apps/documenteditor/main/app/view/TableSettings.js
+228
-219
apps/documenteditor/main/app/view/TextArtSettings.js
apps/documenteditor/main/app/view/TextArtSettings.js
+251
-248
No files found.
apps/documenteditor/main/app/view/ChartSettings.js
View file @
252ef526
...
...
@@ -63,7 +63,6 @@ define([
},
initialize
:
function
()
{
var
me
=
this
;
this
.
_initSettings
=
true
;
this
.
_state
=
{
...
...
@@ -84,134 +83,6 @@ define([
this
.
_originalProps
=
null
;
this
.
render
();
var
viewData
=
[
{
offsetx
:
0
,
data
:
Asc
.
c_oAscWrapStyle2
.
Inline
,
iconCls
:
'
wrap-inline
'
,
tip
:
this
.
txtInline
,
selected
:
true
},
{
offsetx
:
50
,
data
:
Asc
.
c_oAscWrapStyle2
.
Square
,
iconCls
:
'
wrap-square
'
,
tip
:
this
.
txtSquare
},
{
offsetx
:
100
,
data
:
Asc
.
c_oAscWrapStyle2
.
Tight
,
iconCls
:
'
wrap-tight
'
,
tip
:
this
.
txtTight
},
{
offsetx
:
150
,
data
:
Asc
.
c_oAscWrapStyle2
.
Through
,
iconCls
:
'
wrap-through
'
,
tip
:
this
.
txtThrough
},
{
offsetx
:
200
,
data
:
Asc
.
c_oAscWrapStyle2
.
TopAndBottom
,
iconCls
:
'
wrap-topAndBottom
'
,
tip
:
this
.
txtTopAndBottom
},
{
offsetx
:
250
,
data
:
Asc
.
c_oAscWrapStyle2
.
InFront
,
iconCls
:
'
wrap-inFront
'
,
tip
:
this
.
txtInFront
},
{
offsetx
:
300
,
data
:
Asc
.
c_oAscWrapStyle2
.
Behind
,
iconCls
:
'
wrap-behind
'
,
tip
:
this
.
txtBehind
}
];
this
.
btnWrapType
=
new
Common
.
UI
.
Button
({
cls
:
'
btn-large-dataview
'
,
iconCls
:
'
item-wrap wrap-inline
'
,
menu
:
new
Common
.
UI
.
Menu
({
items
:
[
{
template
:
_
.
template
(
'
<div id="id-chart-menu-wrap" style="width: 235px; margin: 0 5px;"></div>
'
)
}
]
})
});
this
.
btnWrapType
.
on
(
'
render:after
'
,
function
(
btn
)
{
me
.
mnuWrapPicker
=
new
Common
.
UI
.
DataView
({
el
:
$
(
'
#id-chart-menu-wrap
'
),
parentMenu
:
btn
.
menu
,
store
:
new
Common
.
UI
.
DataViewStore
(
viewData
),
itemTemplate
:
_
.
template
(
'
<div id="<%= id %>" class="item-wrap" style="background-position: -<%= offsetx %>px 0;"></div>
'
)
});
});
this
.
btnWrapType
.
render
(
$
(
'
#chart-button-wrap
'
));
this
.
mnuWrapPicker
.
on
(
'
item:click
'
,
_
.
bind
(
this
.
onSelectWrap
,
this
,
this
.
btnWrapType
));
this
.
lockedControls
.
push
(
this
.
btnWrapType
);
this
.
btnChartType
=
new
Common
.
UI
.
Button
({
cls
:
'
btn-large-dataview
'
,
iconCls
:
'
item-chartlist bar-normal
'
,
menu
:
new
Common
.
UI
.
Menu
({
style
:
'
width: 560px;
'
,
items
:
[
{
template
:
_
.
template
(
'
<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
.
labelWidth
=
$
(
this
.
el
).
find
(
'
#chart-label-width
'
);
this
.
labelHeight
=
$
(
this
.
el
).
find
(
'
#chart-label-height
'
);
this
.
btnEditData
=
new
Common
.
UI
.
Button
({
el
:
$
(
'
#chart-button-edit-data
'
)
});
this
.
lockedControls
.
push
(
this
.
btnEditData
);
this
.
btnEditData
.
on
(
'
click
'
,
_
.
bind
(
this
.
setEditData
,
this
));
$
(
this
.
el
).
on
(
'
click
'
,
'
#chart-advanced-link
'
,
_
.
bind
(
this
.
openAdvancedSettings
,
this
));
},
render
:
function
()
{
...
...
@@ -219,8 +90,6 @@ define([
el
.
html
(
this
.
template
({
scope
:
this
}));
this
.
linkAdvanced
=
$
(
'
#chart-advanced-link
'
);
},
setApi
:
function
(
api
)
{
...
...
@@ -331,11 +200,117 @@ define([
this
.
labelHeight
[
0
].
innerHTML
=
this
.
textHeight
+
'
:
'
+
value
.
toFixed
(
1
)
+
'
'
+
Common
.
Utils
.
Metric
.
getCurrentMetricName
();
},
createDelayedControls
:
function
()
{
var
me
=
this
,
viewData
=
[
{
offsetx
:
0
,
data
:
Asc
.
c_oAscWrapStyle2
.
Inline
,
iconCls
:
'
wrap-inline
'
,
tip
:
this
.
txtInline
,
selected
:
true
},
{
offsetx
:
50
,
data
:
Asc
.
c_oAscWrapStyle2
.
Square
,
iconCls
:
'
wrap-square
'
,
tip
:
this
.
txtSquare
},
{
offsetx
:
100
,
data
:
Asc
.
c_oAscWrapStyle2
.
Tight
,
iconCls
:
'
wrap-tight
'
,
tip
:
this
.
txtTight
},
{
offsetx
:
150
,
data
:
Asc
.
c_oAscWrapStyle2
.
Through
,
iconCls
:
'
wrap-through
'
,
tip
:
this
.
txtThrough
},
{
offsetx
:
200
,
data
:
Asc
.
c_oAscWrapStyle2
.
TopAndBottom
,
iconCls
:
'
wrap-topAndBottom
'
,
tip
:
this
.
txtTopAndBottom
},
{
offsetx
:
250
,
data
:
Asc
.
c_oAscWrapStyle2
.
InFront
,
iconCls
:
'
wrap-inFront
'
,
tip
:
this
.
txtInFront
},
{
offsetx
:
300
,
data
:
Asc
.
c_oAscWrapStyle2
.
Behind
,
iconCls
:
'
wrap-behind
'
,
tip
:
this
.
txtBehind
}
];
this
.
btnWrapType
=
new
Common
.
UI
.
Button
({
cls
:
'
btn-large-dataview
'
,
iconCls
:
'
item-wrap wrap-inline
'
,
menu
:
new
Common
.
UI
.
Menu
({
items
:
[
{
template
:
_
.
template
(
'
<div id="id-chart-menu-wrap" style="width: 235px; margin: 0 5px;"></div>
'
)
}
]
})
});
this
.
btnWrapType
.
on
(
'
render:after
'
,
function
(
btn
)
{
me
.
mnuWrapPicker
=
new
Common
.
UI
.
DataView
({
el
:
$
(
'
#id-chart-menu-wrap
'
),
parentMenu
:
btn
.
menu
,
store
:
new
Common
.
UI
.
DataViewStore
(
viewData
),
itemTemplate
:
_
.
template
(
'
<div id="<%= id %>" class="item-wrap" style="background-position: -<%= offsetx %>px 0;"></div>
'
)
});
});
this
.
btnWrapType
.
render
(
$
(
'
#chart-button-wrap
'
));
this
.
mnuWrapPicker
.
on
(
'
item:click
'
,
_
.
bind
(
this
.
onSelectWrap
,
this
,
this
.
btnWrapType
));
this
.
lockedControls
.
push
(
this
.
btnWrapType
);
this
.
btnChartType
=
new
Common
.
UI
.
Button
({
cls
:
'
btn-large-dataview
'
,
iconCls
:
'
item-chartlist bar-normal
'
,
menu
:
new
Common
.
UI
.
Menu
({
style
:
'
width: 560px;
'
,
items
:
[
{
template
:
_
.
template
(
'
<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
.
labelWidth
=
$
(
this
.
el
).
find
(
'
#chart-label-width
'
);
this
.
labelHeight
=
$
(
this
.
el
).
find
(
'
#chart-label-height
'
);
this
.
btnEditData
=
new
Common
.
UI
.
Button
({
el
:
$
(
'
#chart-button-edit-data
'
)
});
this
.
lockedControls
.
push
(
this
.
btnEditData
);
this
.
btnEditData
.
on
(
'
click
'
,
_
.
bind
(
this
.
setEditData
,
this
));
this
.
linkAdvanced
=
$
(
'
#chart-advanced-link
'
);
$
(
this
.
el
).
on
(
'
click
'
,
'
#chart-advanced-link
'
,
_
.
bind
(
this
.
openAdvancedSettings
,
this
));
},
createDelayedElements
:
function
()
{
this
.
createDelayedControls
();
this
.
updateMetricUnit
();
},
_ChartWrapStyleChanged
:
function
(
style
)
{
if
(
!
this
.
mnuWrapPicker
)
return
;
if
(
this
.
_state
.
WrappingStyle
!==
style
)
{
this
.
_noApply
=
true
;
var
record
=
this
.
mnuWrapPicker
.
store
.
findWhere
({
data
:
style
});
...
...
@@ -507,6 +482,36 @@ define([
updateChartStyles
:
function
(
styles
)
{
var
me
=
this
;
if
(
!
this
.
btnChartStyle
)
{
this
.
btnChartStyle
=
new
Common
.
UI
.
Button
({
cls
:
'
btn-large-dataview
'
,
iconCls
:
'
item-wrap
'
,
menu
:
new
Common
.
UI
.
Menu
({
menuAlign
:
'
tr-br
'
,
items
:
[
{
template
:
_
.
template
(
'
<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
){
var
stylesStore
=
this
.
mnuChartStylePicker
.
store
;
if
(
stylesStore
)
{
...
...
@@ -542,6 +547,8 @@ define([
},
disableControls
:
function
(
disable
)
{
if
(
this
.
_initSettings
)
return
;
if
(
this
.
_state
.
DisabledControls
!==
disable
)
{
this
.
_state
.
DisabledControls
=
disable
;
_
.
each
(
this
.
lockedControls
,
function
(
item
)
{
...
...
apps/documenteditor/main/app/view/MailMergeSettings.js
View file @
252ef526
...
...
@@ -72,7 +72,9 @@ define([
},
initialize
:
function
()
{
var
me
=
this
;
var
me
=
this
,
_set
=
DE
.
enumLockMM
;
this
.
_initSettings
=
true
;
this
.
_state
=
{
...
...
@@ -88,18 +90,8 @@ define([
this
.
emailAddresses
=
undefined
;
this
.
mergeMailData
=
undefined
;
var
_set
=
DE
.
enumLockMM
;
this
.
render
();
this
.
btnEditData
=
new
Common
.
UI
.
Button
({
el
:
me
.
$el
.
find
(
'
#mmerge-button-edit-data
'
),
lock
:
[
_set
.
preview
,
_set
.
lostConnect
]
});
this
.
btnEditData
.
on
(
'
click
'
,
_
.
bind
(
this
.
onEditData
,
this
));
this
.
lblAddRecipients
=
$
(
'
#mmerge-lbl-add-recipients
'
);
this
.
btnInsField
=
new
Common
.
UI
.
Button
({
cls
:
'
btn-text-menu-default
'
,
caption
:
this
.
textInsertField
,
...
...
@@ -120,19 +112,6 @@ define([
});
this
.
btnInsField
.
render
(
$
(
'
#mmerge-btn-ins-field
'
,
me
.
$el
))
;
this
.
chHighlight
=
new
Common
.
UI
.
Switcher
({
el
:
me
.
$el
.
find
(
'
#mmerge-switcher-highlight
'
),
lock
:
[
_set
.
noFields
,
_set
.
lostConnect
]
});
this
.
chHighlight
.
on
(
'
change
'
,
_
.
bind
(
this
.
onCheckHighlightChange
,
this
));
this
.
chPreview
=
new
Common
.
UI
.
Switcher
({
el
:
me
.
$el
.
find
(
'
#mmerge-switcher-preview
'
),
lock
:
[
_set
.
noRecipients
,
_set
.
lostConnect
]
});
this
.
chPreview
.
on
(
'
change
'
,
_
.
bind
(
this
.
onCheckPreviewChange
,
this
));
this
.
emptyDBControls
.
push
(
this
.
chPreview
);
this
.
txtFieldNum
=
new
Common
.
UI
.
InputField
({
el
:
$
(
'
#mmerge-field-num
'
,
me
.
$el
),
allowBlank
:
true
,
...
...
@@ -161,6 +140,52 @@ define([
}
});
this
.
emptyDBControls
.
push
(
this
.
txtFieldNum
);
},
render
:
function
()
{
this
.
$el
.
html
(
this
.
template
({
scope
:
this
}));
},
setApi
:
function
(
api
)
{
this
.
api
=
api
;
if
(
this
.
api
)
{
this
.
api
.
asc_registerCallback
(
'
asc_onPreviewMailMergeResult
'
,
_
.
bind
(
this
.
onPreviewMailMergeResult
,
this
));
this
.
api
.
asc_registerCallback
(
'
asc_onEndPreviewMailMergeResult
'
,
_
.
bind
(
this
.
onEndPreviewMailMergeResult
,
this
));
this
.
api
.
asc_registerCallback
(
'
asc_onStartMailMerge
'
,
_
.
bind
(
this
.
onStartMailMerge
,
this
));
this
.
api
.
asc_registerCallback
(
'
asc_onSaveMailMerge
'
,
_
.
bind
(
this
.
onSaveMailMerge
,
this
));
this
.
api
.
asc_registerCallback
(
'
asc_onEndAction
'
,
_
.
bind
(
this
.
onLongActionEnd
,
this
));
Common
.
Gateway
.
on
(
'
setemailaddresses
'
,
_
.
bind
(
this
.
onSetEmailAddresses
,
this
));
Common
.
Gateway
.
on
(
'
processmailmerge
'
,
_
.
bind
(
this
.
onProcessMailMerge
,
this
));
}
return
this
;
},
createDelayedControls
:
function
()
{
var
me
=
this
,
_set
=
DE
.
enumLockMM
;
this
.
btnEditData
=
new
Common
.
UI
.
Button
({
el
:
me
.
$el
.
find
(
'
#mmerge-button-edit-data
'
),
lock
:
[
_set
.
preview
,
_set
.
lostConnect
]
});
this
.
btnEditData
.
on
(
'
click
'
,
_
.
bind
(
this
.
onEditData
,
this
));
this
.
lblAddRecipients
=
$
(
'
#mmerge-lbl-add-recipients
'
);
this
.
chHighlight
=
new
Common
.
UI
.
Switcher
({
el
:
me
.
$el
.
find
(
'
#mmerge-switcher-highlight
'
),
lock
:
[
_set
.
noFields
,
_set
.
lostConnect
]
});
this
.
chHighlight
.
on
(
'
change
'
,
_
.
bind
(
this
.
onCheckHighlightChange
,
this
));
this
.
chPreview
=
new
Common
.
UI
.
Switcher
({
el
:
me
.
$el
.
find
(
'
#mmerge-switcher-preview
'
),
lock
:
[
_set
.
noRecipients
,
_set
.
lostConnect
]
});
this
.
chPreview
.
on
(
'
change
'
,
_
.
bind
(
this
.
onCheckPreviewChange
,
this
));
this
.
emptyDBControls
.
push
(
this
.
chPreview
);
this
.
btnFirst
=
new
Common
.
UI
.
Button
({
cls
:
'
btn-toolbar
'
,
...
...
@@ -343,32 +368,26 @@ define([
}).
on
(
'
click
'
,
_
.
bind
(
this
.
onMergeClick
,
this
,
false
));
this
.
emptyDBControls
.
push
(
this
.
btnMerge
);
this
.
$el
.
on
(
'
click
'
,
'
#mmerge-readmore-link
'
,
_
.
bind
(
this
.
openHelp
,
this
));
},
render
:
function
()
{
this
.
$el
.
html
(
this
.
template
({
scope
:
this
}));
this
.
linkReadMore
=
$
(
'
#mmerge-readmore-link
'
,
this
.
$el
);
},
this
.
$el
.
on
(
'
click
'
,
'
#mmerge-readmore-link
'
,
_
.
bind
(
this
.
openHelp
,
this
));
setApi
:
function
(
api
)
{
this
.
api
=
api
;
if
(
this
.
api
)
{
this
.
api
.
asc_registerCallback
(
'
asc_onPreviewMailMergeResult
'
,
_
.
bind
(
this
.
onPreviewMailMergeResult
,
this
));
this
.
api
.
asc_registerCallback
(
'
asc_onEndPreviewMailMergeResult
'
,
_
.
bind
(
this
.
onEndPreviewMailMergeResult
,
this
));
this
.
api
.
asc_registerCallback
(
'
asc_onStartMailMerge
'
,
_
.
bind
(
this
.
onStartMailMerge
,
this
));
this
.
api
.
asc_registerCallback
(
'
asc_onSaveMailMerge
'
,
_
.
bind
(
this
.
onSaveMailMerge
,
this
));
this
.
api
.
asc_registerCallback
(
'
asc_onEndAction
'
,
_
.
bind
(
this
.
onLongActionEnd
,
this
));
Common
.
Gateway
.
on
(
'
setemailaddresses
'
,
_
.
bind
(
this
.
onSetEmailAddresses
,
this
));
Common
.
Gateway
.
on
(
'
processmailmerge
'
,
_
.
bind
(
this
.
onProcessMailMerge
,
this
));
if
(
this
.
mode
)
{
if
(
!
this
.
mode
.
mergeFolderUrl
)
this
.
btnPortal
.
setVisible
(
false
);
if
(
!
this
.
mode
.
canSendEmailAddresses
)
{
this
.
_arrMergeSrc
.
pop
();
this
.
cmbMergeTo
.
setData
(
this
.
_arrMergeSrc
);
this
.
cmbMergeTo
.
setValue
(
this
.
_arrMergeSrc
[
0
].
value
);
}
}
return
this
;
},
ChangeSettings
:
function
(
props
)
{
if
(
this
.
_initSettings
)
{
this
.
createDelayedControls
();
this
.
_initSettings
=
false
;
}
this
.
disableInsertControls
(
this
.
_locked
);
if
(
props
)
{
...
...
@@ -763,6 +782,8 @@ define([
},
disableControls
:
function
(
disable
)
{
if
(
this
.
_initSettings
)
return
;
this
.
lockControls
(
DE
.
enumLockMM
.
lostConnect
,
disable
,
{
array
:
_
.
union
([
this
.
btnEditData
,
this
.
btnInsField
,
this
.
chHighlight
],
(
this
.
mode
.
mergeFolderUrl
)
?
[
this
.
btnPortal
]
:
[]),
merge
:
true
...
...
@@ -775,13 +796,6 @@ define([
setMode
:
function
(
mode
)
{
this
.
mode
=
mode
;
if
(
!
this
.
mode
.
mergeFolderUrl
)
this
.
btnPortal
.
setVisible
(
false
);
if
(
!
this
.
mode
.
canSendEmailAddresses
)
{
this
.
_arrMergeSrc
.
pop
();
this
.
cmbMergeTo
.
setData
(
this
.
_arrMergeSrc
);
this
.
cmbMergeTo
.
setValue
(
this
.
_arrMergeSrc
[
0
].
value
);
}
},
disableEditing
:
function
(
disable
)
{
...
...
@@ -807,7 +821,7 @@ define([
},
disablePreviewMode
:
function
()
{
if
(
this
.
api
&&
this
.
chPreview
.
getValue
())
{
if
(
this
.
api
&&
this
.
chPreview
&&
this
.
chPreview
.
getValue
())
{
this
.
api
.
asc_EndPreviewMailMergeResult
();
}
},
...
...
apps/documenteditor/main/app/view/ShapeSettings.js
View file @
252ef526
...
...
@@ -71,7 +71,7 @@ define([
},
initialize
:
function
()
{
var
me
=
this
;
this
.
_initSettings
=
true
;
this
.
_originalProps
=
null
;
this
.
_noApply
=
true
;
...
...
@@ -127,382 +127,6 @@ define([
this
.
render
();
this
.
_arrFillSrc
=
[
{
displayValue
:
this
.
textColor
,
value
:
Asc
.
c_oAscFill
.
FILL_TYPE_SOLID
},
{
displayValue
:
this
.
textGradientFill
,
value
:
Asc
.
c_oAscFill
.
FILL_TYPE_GRAD
},
{
displayValue
:
this
.
textImageTexture
,
value
:
Asc
.
c_oAscFill
.
FILL_TYPE_BLIP
},
{
displayValue
:
this
.
textPatternFill
,
value
:
Asc
.
c_oAscFill
.
FILL_TYPE_PATT
},
{
displayValue
:
this
.
textNoFill
,
value
:
Asc
.
c_oAscFill
.
FILL_TYPE_NOFILL
}
];
this
.
cmbFillSrc
=
new
Common
.
UI
.
ComboBox
({
el
:
$
(
'
#shape-combo-fill-src
'
),
cls
:
'
input-group-nr
'
,
style
:
'
width: 100%;
'
,
menuStyle
:
'
min-width: 190px;
'
,
editable
:
false
,
data
:
this
.
_arrFillSrc
});
this
.
cmbFillSrc
.
setValue
(
this
.
_arrFillSrc
[
0
].
value
);
this
.
cmbFillSrc
.
on
(
'
selected
'
,
_
.
bind
(
this
.
onFillSrcSelect
,
this
));
this
.
fillControls
.
push
(
this
.
cmbFillSrc
);
this
.
btnBackColor
=
new
Common
.
UI
.
ColorButton
({
style
:
"
width:45px;
"
,
menu
:
new
Common
.
UI
.
Menu
({
items
:
[
{
template
:
_
.
template
(
'
<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
,
allowScrollbar
:
false
,
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
.
lockedControls
.
push
(
this
.
btnBorderColor
);
this
.
btnBorderColor
.
on
(
'
render:after
'
,
function
(
btn
)
{
me
.
colorsBorder
=
new
Common
.
UI
.
ThemeColorPalette
({
el
:
$
(
'
#shape-border-color-menu
'
),
value
:
'
000000
'
});
me
.
colorsBorder
.
on
(
'
select
'
,
_
.
bind
(
me
.
onColorsBorderSelect
,
me
));
});
this
.
btnBorderColor
.
render
(
$
(
'
#shape-border-color-btn
'
));
this
.
btnBorderColor
.
setColor
(
'
000000
'
);
$
(
this
.
el
).
on
(
'
click
'
,
'
#shape-border-color-new
'
,
_
.
bind
(
this
.
addNewColor
,
this
,
this
.
colorsBorder
,
this
.
btnBorderColor
));
this
.
cmbBorderType
=
new
Common
.
UI
.
ComboBorderType
({
el
:
$
(
'
#shape-combo-border-type
'
),
style
:
"
width: 93px;
"
,
menuStyle
:
'
min-width: 93px;
'
}).
on
(
'
selected
'
,
_
.
bind
(
this
.
onBorderTypeSelect
,
this
))
.
on
(
'
combo:blur
'
,
_
.
bind
(
this
.
onComboBlur
,
this
,
false
));
this
.
BorderType
=
Asc
.
c_oDashType
.
solid
;
this
.
cmbBorderType
.
setValue
(
this
.
BorderType
);
this
.
lockedControls
.
push
(
this
.
cmbBorderType
);
var
viewData
=
[
{
offsetx
:
0
,
data
:
Asc
.
c_oAscWrapStyle2
.
Inline
,
iconcls
:
'
wrap-inline
'
,
tip
:
this
.
txtInline
,
selected
:
true
},
{
offsetx
:
50
,
data
:
Asc
.
c_oAscWrapStyle2
.
Square
,
iconcls
:
'
wrap-square
'
,
tip
:
this
.
txtSquare
},
{
offsetx
:
100
,
data
:
Asc
.
c_oAscWrapStyle2
.
Tight
,
iconcls
:
'
wrap-tight
'
,
tip
:
this
.
txtTight
},
{
offsetx
:
150
,
data
:
Asc
.
c_oAscWrapStyle2
.
Through
,
iconcls
:
'
wrap-through
'
,
tip
:
this
.
txtThrough
},
{
offsetx
:
200
,
data
:
Asc
.
c_oAscWrapStyle2
.
TopAndBottom
,
iconcls
:
'
wrap-topAndBottom
'
,
tip
:
this
.
txtTopAndBottom
},
{
offsetx
:
250
,
data
:
Asc
.
c_oAscWrapStyle2
.
InFront
,
iconcls
:
'
wrap-inFront
'
,
tip
:
this
.
txtInFront
},
{
offsetx
:
300
,
data
:
Asc
.
c_oAscWrapStyle2
.
Behind
,
iconcls
:
'
wrap-behind
'
,
tip
:
this
.
txtBehind
}
];
this
.
btnWrapType
=
new
Common
.
UI
.
Button
({
cls
:
'
btn-large-dataview
'
,
iconCls
:
'
item-wrap wrap-inline
'
,
menu
:
new
Common
.
UI
.
Menu
({
items
:
[
{
template
:
_
.
template
(
'
<div id="id-shape-menu-wrap" style="width: 235px; margin: 0 5px;"></div>
'
)
}
]
})
});
this
.
btnWrapType
.
on
(
'
render:after
'
,
function
(
btn
)
{
me
.
mnuWrapPicker
=
new
Common
.
UI
.
DataView
({
el
:
$
(
'
#id-shape-menu-wrap
'
),
parentMenu
:
btn
.
menu
,
store
:
new
Common
.
UI
.
DataViewStore
(
viewData
),
itemTemplate
:
_
.
template
(
'
<div id="<%= id %>" class="item-wrap" style="background-position: -<%= offsetx %>px 0;"></div>
'
)
});
});
this
.
btnWrapType
.
render
(
$
(
'
#shape-button-wrap
'
));
this
.
mnuWrapPicker
.
on
(
'
item:click
'
,
_
.
bind
(
this
.
onSelectWrap
,
this
,
this
.
btnWrapType
));
this
.
lockedControls
.
push
(
this
.
btnWrapType
);
this
.
btnChangeShape
=
new
Common
.
UI
.
Button
({
cls
:
'
btn-icon-default
'
,
iconCls
:
'
btn-change-shape
'
,
menu
:
new
Common
.
UI
.
Menu
({
menuAlign
:
'
tr-br
'
,
cls
:
'
menu-shapes
'
,
items
:
[]
})
});
this
.
btnChangeShape
.
render
(
$
(
'
#shape-btn-change
'
))
;
this
.
lockedControls
.
push
(
this
.
btnChangeShape
);
$
(
this
.
el
).
on
(
'
click
'
,
'
#shape-advanced-link
'
,
_
.
bind
(
this
.
openAdvancedSettings
,
this
));
this
.
FillColorContainer
=
$
(
'
#shape-panel-color-fill
'
);
this
.
FillImageContainer
=
$
(
'
#shape-panel-image-fill
'
);
this
.
FillPatternContainer
=
$
(
'
#shape-panel-pattern-fill
'
);
...
...
@@ -517,8 +141,6 @@ define([
el
.
html
(
this
.
template
({
scope
:
this
}));
this
.
linkAdvanced
=
$
(
'
#shape-advanced-link
'
);
},
setApi
:
function
(
api
)
{
...
...
@@ -1018,6 +640,7 @@ define([
},
_ImgWrapStyleChanged
:
function
(
style
)
{
if
(
!
this
.
mnuWrapPicker
)
return
;
if
(
this
.
_state
.
WrappingStyle
!==
style
)
{
this
.
_noApply
=
true
;
var
record
=
this
.
mnuWrapPicker
.
store
.
findWhere
({
data
:
style
});
...
...
@@ -1461,85 +1084,339 @@ define([
this
.
cmbBorderType
.
setValue
(
borderType
);
}
// pattern colors
type1
=
typeof
(
this
.
FGColor
.
Color
);
type2
=
typeof
(
this
.
_state
.
FGColor
);
// pattern colors
type1
=
typeof
(
this
.
FGColor
.
Color
);
type2
=
typeof
(
this
.
_state
.
FGColor
);
if
(
(
type1
!==
type2
)
||
(
type1
==
'
object
'
&&
(
this
.
FGColor
.
Color
.
effectValue
!==
this
.
_state
.
FGColor
.
effectValue
||
this
.
_state
.
FGColor
.
color
.
indexOf
(
this
.
FGColor
.
Color
.
color
)
<
0
))
||
(
type1
!=
'
object
'
&&
this
.
_state
.
FGColor
.
indexOf
(
this
.
FGColor
.
Color
)
<
0
))
{
this
.
btnFGColor
.
setColor
(
this
.
FGColor
.
Color
);
if
(
typeof
(
this
.
FGColor
.
Color
)
==
'
object
'
)
{
var
isselected
=
false
;
for
(
var
i
=
0
;
i
<
10
;
i
++
)
{
if
(
Common
.
Utils
.
ThemeColor
.
ThemeValues
[
i
]
==
this
.
FGColor
.
Color
.
effectValue
)
{
this
.
colorsFG
.
select
(
this
.
FGColor
.
Color
,
true
);
isselected
=
true
;
break
;
}
}
if
(
!
isselected
)
this
.
colorsFG
.
clearSelection
();
}
else
this
.
colorsFG
.
select
(
this
.
FGColor
.
Color
,
true
);
this
.
_state
.
FGColor
=
this
.
FGColor
.
Color
;
}
type1
=
typeof
(
this
.
BGColor
.
Color
);
type2
=
typeof
(
this
.
_state
.
BGColor
);
if
(
(
type1
!==
type2
)
||
(
type1
==
'
object
'
&&
(
this
.
BGColor
.
Color
.
effectValue
!==
this
.
_state
.
BGColor
.
effectValue
||
this
.
_state
.
BGColor
.
color
.
indexOf
(
this
.
BGColor
.
Color
.
color
)
<
0
))
||
(
type1
!=
'
object
'
&&
this
.
_state
.
BGColor
.
indexOf
(
this
.
BGColor
.
Color
)
<
0
))
{
this
.
btnBGColor
.
setColor
(
this
.
BGColor
.
Color
);
if
(
typeof
(
this
.
BGColor
.
Color
)
==
'
object
'
)
{
var
isselected
=
false
;
for
(
var
i
=
0
;
i
<
10
;
i
++
)
{
if
(
Common
.
Utils
.
ThemeColor
.
ThemeValues
[
i
]
==
this
.
BGColor
.
Color
.
effectValue
)
{
this
.
colorsBG
.
select
(
this
.
BGColor
.
Color
,
true
);
isselected
=
true
;
break
;
}
}
if
(
!
isselected
)
this
.
colorsBG
.
clearSelection
();
}
else
this
.
colorsBG
.
select
(
this
.
BGColor
.
Color
,
true
);
this
.
_state
.
BGColor
=
this
.
BGColor
.
Color
;
}
color
=
this
.
GradColor
.
colors
[
this
.
GradColor
.
currentIdx
];
type1
=
typeof
(
color
);
type2
=
typeof
(
this
.
_state
.
GradColor
);
if
(
(
type1
!==
type2
)
||
(
type1
==
'
object
'
&&
(
color
.
effectValue
!==
this
.
_state
.
GradColor
.
effectValue
||
this
.
_state
.
GradColor
.
color
.
indexOf
(
color
.
color
)
<
0
))
||
(
type1
!=
'
object
'
&&
this
.
_state
.
GradColor
.
indexOf
(
color
)
<
0
))
{
this
.
btnGradColor
.
setColor
(
color
);
if
(
typeof
(
color
)
==
'
object
'
)
{
var
isselected
=
false
;
for
(
var
i
=
0
;
i
<
10
;
i
++
)
{
if
(
Common
.
Utils
.
ThemeColor
.
ThemeValues
[
i
]
==
color
.
effectValue
)
{
this
.
colorsGrad
.
select
(
color
,
true
);
isselected
=
true
;
break
;
}
}
if
(
!
isselected
)
this
.
colorsGrad
.
clearSelection
();
}
else
this
.
colorsGrad
.
select
(
color
,
true
);
this
.
_state
.
GradColor
=
color
;
}
this
.
_noApply
=
false
;
}
},
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
'
);
if
(
(
type1
!==
type2
)
||
(
type1
==
'
object
'
&&
(
this
.
FGColor
.
Color
.
effectValue
!==
this
.
_state
.
FGColor
.
effectValue
||
this
.
_state
.
FGColor
.
color
.
indexOf
(
this
.
FGColor
.
Color
.
color
)
<
0
))
||
(
type1
!=
'
object
'
&&
this
.
_state
.
FGColor
.
indexOf
(
this
.
FGColor
.
Color
)
<
0
))
{
this
.
_arrGradType
=
[
{
displayValue
:
this
.
textLinear
,
value
:
Asc
.
c_oAscFillGradType
.
GRAD_LINEAR
},
{
displayValue
:
this
.
textRadial
,
value
:
Asc
.
c_oAscFillGradType
.
GRAD_PATH
}
];
this
.
btnFGColor
.
setColor
(
this
.
FGColor
.
Color
);
if
(
typeof
(
this
.
FGColor
.
Color
)
==
'
object
'
)
{
var
isselected
=
false
;
for
(
var
i
=
0
;
i
<
10
;
i
++
)
{
if
(
Common
.
Utils
.
ThemeColor
.
ThemeValues
[
i
]
==
this
.
FGColor
.
Color
.
effectValue
)
{
this
.
colorsFG
.
select
(
this
.
FGColor
.
Color
,
true
);
isselected
=
true
;
break
;
}
}
if
(
!
isselected
)
this
.
colorsFG
.
clearSelection
();
}
else
this
.
colorsFG
.
select
(
this
.
FGColor
.
Color
,
true
);
this
.
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
.
_state
.
FGColor
=
this
.
FGColor
.
Color
;
}
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
'
}
];
type1
=
typeof
(
this
.
BGColor
.
Color
);
type2
=
typeof
(
this
.
_state
.
BGColor
);
this
.
_viewDataRadial
=
[
{
offsetx
:
100
,
offsety
:
150
,
type
:
2
,
subtype
:
5
,
iconcls
:
'
gradient-radial-center
'
}
];
if
(
(
type1
!==
type2
)
||
(
type1
==
'
object
'
&&
(
this
.
BGColor
.
Color
.
effectValue
!==
this
.
_state
.
BGColor
.
effectValue
||
this
.
_state
.
BGColor
.
color
.
indexOf
(
this
.
BGColor
.
Color
.
color
)
<
0
))
||
(
type1
!=
'
object
'
&&
this
.
_state
.
BGColor
.
indexOf
(
this
.
BGColor
.
Color
)
<
0
))
{
this
.
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
,
allowScrollbar
:
false
,
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
.
btnBGColor
.
setColor
(
this
.
BGColor
.
Color
);
if
(
typeof
(
this
.
BGColor
.
Color
)
==
'
object
'
)
{
var
isselected
=
false
;
for
(
var
i
=
0
;
i
<
10
;
i
++
)
{
if
(
Common
.
Utils
.
ThemeColor
.
ThemeValues
[
i
]
==
this
.
BGColor
.
Color
.
effectValue
)
{
this
.
colorsBG
.
select
(
this
.
BGColor
.
Color
,
true
);
isselected
=
true
;
break
;
}
}
if
(
!
isselected
)
this
.
colorsBG
.
clearSelection
();
}
else
this
.
colorsBG
.
select
(
this
.
BGColor
.
Color
,
true
);
this
.
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
.
_state
.
BGColor
=
this
.
BGColor
.
Color
;
}
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
);
color
=
this
.
GradColor
.
colors
[
this
.
GradColor
.
currentIdx
];
type1
=
typeof
(
color
);
type2
=
typeof
(
this
.
_state
.
GradColor
);
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
);
if
(
(
type1
!==
type2
)
||
(
type1
==
'
object
'
&&
(
color
.
effectValue
!==
this
.
_state
.
GradColor
.
effectValue
||
this
.
_state
.
GradColor
.
color
.
indexOf
(
color
.
color
)
<
0
))
||
(
type1
!=
'
object
'
&&
this
.
_state
.
GradColor
.
indexOf
(
color
)
<
0
))
{
var
viewData
=
[
{
offsetx
:
0
,
data
:
Asc
.
c_oAscWrapStyle2
.
Inline
,
iconcls
:
'
wrap-inline
'
,
tip
:
this
.
txtInline
,
selected
:
true
},
{
offsetx
:
50
,
data
:
Asc
.
c_oAscWrapStyle2
.
Square
,
iconcls
:
'
wrap-square
'
,
tip
:
this
.
txtSquare
},
{
offsetx
:
100
,
data
:
Asc
.
c_oAscWrapStyle2
.
Tight
,
iconcls
:
'
wrap-tight
'
,
tip
:
this
.
txtTight
},
{
offsetx
:
150
,
data
:
Asc
.
c_oAscWrapStyle2
.
Through
,
iconcls
:
'
wrap-through
'
,
tip
:
this
.
txtThrough
},
{
offsetx
:
200
,
data
:
Asc
.
c_oAscWrapStyle2
.
TopAndBottom
,
iconcls
:
'
wrap-topAndBottom
'
,
tip
:
this
.
txtTopAndBottom
},
{
offsetx
:
250
,
data
:
Asc
.
c_oAscWrapStyle2
.
InFront
,
iconcls
:
'
wrap-inFront
'
,
tip
:
this
.
txtInFront
},
{
offsetx
:
300
,
data
:
Asc
.
c_oAscWrapStyle2
.
Behind
,
iconcls
:
'
wrap-behind
'
,
tip
:
this
.
txtBehind
}
];
this
.
btnGradColor
.
setColor
(
color
);
if
(
typeof
(
color
)
==
'
object
'
)
{
var
isselected
=
false
;
for
(
var
i
=
0
;
i
<
10
;
i
++
)
{
if
(
Common
.
Utils
.
ThemeColor
.
ThemeValues
[
i
]
==
color
.
effectValue
)
{
this
.
colorsGrad
.
select
(
color
,
true
);
isselected
=
true
;
break
;
}
}
if
(
!
isselected
)
this
.
colorsGrad
.
clearSelection
();
}
else
this
.
colorsGrad
.
select
(
color
,
true
);
this
.
btnWrapType
=
new
Common
.
UI
.
Button
({
cls
:
'
btn-large-dataview
'
,
iconCls
:
'
item-wrap wrap-inline
'
,
menu
:
new
Common
.
UI
.
Menu
({
items
:
[
{
template
:
_
.
template
(
'
<div id="id-shape-menu-wrap" style="width: 235px; margin: 0 5px;"></div>
'
)
}
]
})
});
this
.
btnWrapType
.
on
(
'
render:after
'
,
function
(
btn
)
{
me
.
mnuWrapPicker
=
new
Common
.
UI
.
DataView
({
el
:
$
(
'
#id-shape-menu-wrap
'
),
parentMenu
:
btn
.
menu
,
store
:
new
Common
.
UI
.
DataViewStore
(
viewData
),
itemTemplate
:
_
.
template
(
'
<div id="<%= id %>" class="item-wrap" style="background-position: -<%= offsetx %>px 0;"></div>
'
)
});
});
this
.
btnWrapType
.
render
(
$
(
'
#shape-button-wrap
'
));
this
.
mnuWrapPicker
.
on
(
'
item:click
'
,
_
.
bind
(
this
.
onSelectWrap
,
this
,
this
.
btnWrapType
));
this
.
lockedControls
.
push
(
this
.
btnWrapType
);
this
.
_state
.
GradColor
=
color
;
}
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
.
_noApply
=
false
;
}
this
.
linkAdvanced
=
$
(
'
#shape-advanced-link
'
)
;
$
(
this
.
el
).
on
(
'
click
'
,
'
#shape-advanced-link
'
,
_
.
bind
(
this
.
openAdvancedSettings
,
this
));
},
createDelayedElements
:
function
()
{
this
.
createDelayedControls
();
var
global_hatch_menu_map
=
[
0
,
1
,
3
,
2
,
4
,
53
,
5
,
6
,
7
,
8
,
...
...
@@ -1571,7 +1448,6 @@ define([
this
.
PatternFillType
=
this
.
patternViewData
[
0
].
type
;
}
this
.
fillAutoShapes
();
this
.
UpdateThemeColors
();
},
...
...
@@ -1579,6 +1455,24 @@ define([
onInitStandartTextures
:
function
(
texture
)
{
var
me
=
this
;
if
(
texture
&&
texture
.
length
>
0
){
this
.
btnTexture
=
new
Common
.
UI
.
ComboBox
({
el
:
$
(
'
#shape-combo-fill-texture
'
),
template
:
_
.
template
([
'
<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
=
[];
_
.
each
(
texture
,
function
(
item
){
texturearray
.
push
({
...
...
@@ -1659,6 +1553,105 @@ define([
},
UpdateThemeColors
:
function
()
{
if
(
!
this
.
btnBackColor
)
{
// create color buttons
this
.
btnBackColor
=
new
Common
.
UI
.
ColorButton
({
style
:
"
width:45px;
"
,
menu
:
new
Common
.
UI
.
Menu
({
items
:
[
{
template
:
_
.
template
(
'
<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
.
colorsBack
.
updateColors
(
Common
.
Utils
.
ThemeColor
.
getEffectColors
(),
Common
.
Utils
.
ThemeColor
.
getStandartColors
());
this
.
colorsFG
.
updateColors
(
Common
.
Utils
.
ThemeColor
.
getEffectColors
(),
Common
.
Utils
.
ThemeColor
.
getStandartColors
());
...
...
@@ -1698,6 +1691,8 @@ define([
},
disableControls
:
function
(
disable
,
disableFill
)
{
if
(
this
.
_initSettings
)
return
;
this
.
disableFillPanels
(
disable
||
disableFill
);
if
(
this
.
_state
.
DisabledControls
!==
disable
)
{
this
.
_state
.
DisabledControls
=
disable
;
...
...
apps/documenteditor/main/app/view/TableSettings.js
View file @
252ef526
...
...
@@ -69,7 +69,7 @@ define([
},
initialize
:
function
()
{
var
me
=
this
;
this
.
_initSettings
=
true
;
this
.
_state
=
{
TemplateId
:
0
,
...
...
@@ -99,218 +99,6 @@ define([
this
.
_wrapHandled
=
false
;
this
.
render
();
this
.
chHeader
=
new
Common
.
UI
.
CheckBox
({
el
:
$
(
'
#table-checkbox-header
'
),
labelText
:
this
.
textHeader
});
this
.
lockedControls
.
push
(
this
.
chHeader
);
this
.
chTotal
=
new
Common
.
UI
.
CheckBox
({
el
:
$
(
'
#table-checkbox-total
'
),
labelText
:
this
.
textTotal
});
this
.
lockedControls
.
push
(
this
.
chTotal
);
this
.
chBanded
=
new
Common
.
UI
.
CheckBox
({
el
:
$
(
'
#table-checkbox-banded
'
),
labelText
:
this
.
textBanded
});
this
.
lockedControls
.
push
(
this
.
chBanded
);
this
.
chFirst
=
new
Common
.
UI
.
CheckBox
({
el
:
$
(
'
#table-checkbox-first
'
),
labelText
:
this
.
textFirst
});
this
.
lockedControls
.
push
(
this
.
chFirst
);
this
.
chLast
=
new
Common
.
UI
.
CheckBox
({
el
:
$
(
'
#table-checkbox-last
'
),
labelText
:
this
.
textLast
});
this
.
lockedControls
.
push
(
this
.
chLast
);
this
.
chColBanded
=
new
Common
.
UI
.
CheckBox
({
el
:
$
(
'
#table-checkbox-col-banded
'
),
labelText
:
this
.
textBanded
});
this
.
lockedControls
.
push
(
this
.
chColBanded
);
this
.
chHeader
.
on
(
'
change
'
,
_
.
bind
(
this
.
onCheckTemplateChange
,
this
,
0
));
this
.
chTotal
.
on
(
'
change
'
,
_
.
bind
(
this
.
onCheckTemplateChange
,
this
,
1
));
this
.
chBanded
.
on
(
'
change
'
,
_
.
bind
(
this
.
onCheckTemplateChange
,
this
,
2
));
this
.
chFirst
.
on
(
'
change
'
,
_
.
bind
(
this
.
onCheckTemplateChange
,
this
,
3
));
this
.
chLast
.
on
(
'
change
'
,
_
.
bind
(
this
.
onCheckTemplateChange
,
this
,
4
));
this
.
chColBanded
.
on
(
'
change
'
,
_
.
bind
(
this
.
onCheckTemplateChange
,
this
,
5
));
this
.
cmbTableTemplate
=
new
Common
.
UI
.
ComboDataView
({
itemWidth
:
70
,
itemHeight
:
50
,
menuMaxHeight
:
300
,
enableKeyEvents
:
true
,
cls
:
'
combo-template
'
});
this
.
cmbTableTemplate
.
render
(
$
(
'
#table-combo-template
'
));
this
.
cmbTableTemplate
.
openButton
.
menu
.
cmpEl
.
css
({
'
min-width
'
:
175
,
'
max-width
'
:
175
});
this
.
cmbTableTemplate
.
on
(
'
click
'
,
_
.
bind
(
this
.
onTableTemplateSelect
,
this
));
this
.
cmbTableTemplate
.
openButton
.
menu
.
on
(
'
show:after
'
,
function
()
{
me
.
cmbTableTemplate
.
menuPicker
.
scroller
.
update
({
alwaysVisibleY
:
true
});
});
this
.
lockedControls
.
push
(
this
.
cmbTableTemplate
);
this
.
btnWrapNone
=
new
Common
.
UI
.
Button
({
cls
:
'
btn-options huge
'
,
iconCls
:
'
icon-right-panel btn-wrap-none
'
,
posId
:
c_tableWrap
.
TABLE_WRAP_NONE
,
hint
:
this
.
textWrapNoneTooltip
,
enableToggle
:
true
,
allowDepress
:
false
,
toggleGroup
:
'
tablewrapGroup
'
});
this
.
btnWrapNone
.
render
(
$
(
'
#table-button-wrap-none
'
))
;
this
.
btnWrapNone
.
on
(
'
click
'
,
_
.
bind
(
this
.
onBtnWrapClick
,
this
));
this
.
lockedControls
.
push
(
this
.
btnWrapNone
);
this
.
btnWrapParallel
=
new
Common
.
UI
.
Button
({
cls
:
'
btn-options huge
'
,
iconCls
:
'
icon-right-panel btn-wrap-parallel
'
,
posId
:
c_tableWrap
.
TABLE_WRAP_PARALLEL
,
hint
:
this
.
textWrapParallelTooltip
,
enableToggle
:
true
,
allowDepress
:
false
,
toggleGroup
:
'
tablewrapGroup
'
});
this
.
btnWrapParallel
.
render
(
$
(
'
#table-button-wrap-parallel
'
))
;
this
.
btnWrapParallel
.
on
(
'
click
'
,
_
.
bind
(
this
.
onBtnWrapClick
,
this
));
this
.
lockedControls
.
push
(
this
.
btnWrapParallel
);
var
_arrBorderPosition
=
[
[
'
l
'
,
'
btn-borders-small btn-position-left
'
,
'
table-button-border-left
'
,
this
.
tipLeft
],
[
'
c
'
,
'
btn-borders-small btn-position-inner-vert
'
,
'
table-button-border-inner-vert
'
,
this
.
tipInnerVert
],
[
'
r
'
,
'
btn-borders-small btn-position-right
'
,
'
table-button-border-right
'
,
this
.
tipRight
],
[
'
t
'
,
'
btn-borders-small btn-position-top
'
,
'
table-button-border-top
'
,
this
.
tipTop
],
[
'
m
'
,
'
btn-borders-small btn-position-inner-hor
'
,
'
table-button-border-inner-hor
'
,
this
.
tipInnerHor
],
[
'
b
'
,
'
btn-borders-small btn-position-bottom
'
,
'
table-button-border-bottom
'
,
this
.
tipBottom
],
[
'
cm
'
,
'
btn-borders-small btn-position-inner
'
,
'
table-button-border-inner
'
,
this
.
tipInner
],
[
'
lrtb
'
,
'
btn-borders-small btn-position-outer
'
,
'
table-button-border-outer
'
,
this
.
tipOuter
],
[
'
lrtbcm
'
,
'
btn-borders-small btn-position-all
'
,
'
table-button-border-all
'
,
this
.
tipAll
],
[
''
,
'
btn-borders-small btn-position-none
'
,
'
table-button-border-none
'
,
this
.
tipNone
]
];
this
.
_btnsBorderPosition
=
[];
_
.
each
(
_arrBorderPosition
,
function
(
item
,
index
,
list
){
var
_btn
=
new
Common
.
UI
.
Button
({
cls
:
'
btn-toolbar
'
,
iconCls
:
item
[
1
],
strId
:
item
[
0
],
hint
:
item
[
3
]
});
_btn
.
render
(
$
(
'
#
'
+
item
[
2
]))
;
_btn
.
on
(
'
click
'
,
_
.
bind
(
this
.
onBtnBordersClick
,
this
));
this
.
_btnsBorderPosition
.
push
(
_btn
);
this
.
lockedControls
.
push
(
_btn
);
},
this
);
this
.
cmbBorderSize
=
new
Common
.
UI
.
ComboBorderSize
({
el
:
$
(
'
#table-combo-border-size
'
),
style
:
"
width: 93px;
"
});
this
.
BorderSize
=
this
.
cmbBorderSize
.
store
.
at
(
1
).
get
(
'
value
'
);
this
.
cmbBorderSize
.
setValue
(
this
.
BorderSize
);
this
.
cmbBorderSize
.
on
(
'
selected
'
,
_
.
bind
(
this
.
onBorderSizeSelect
,
this
));
this
.
lockedControls
.
push
(
this
.
cmbBorderSize
);
this
.
btnBorderColor
=
new
Common
.
UI
.
ColorButton
({
style
:
"
width:45px;
"
,
menu
:
new
Common
.
UI
.
Menu
({
items
:
[
{
template
:
_
.
template
(
'
<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
.
btnBackColor
));
this
.
lockedControls
.
push
(
this
.
btnBackColor
);
this
.
btnEdit
=
new
Common
.
UI
.
Button
({
cls
:
'
btn-icon-default
'
,
iconCls
:
'
btn-edit-table
'
,
menu
:
new
Common
.
UI
.
Menu
({
menuAlign
:
'
tr-br
'
,
items
:
[
{
caption
:
this
.
selectRowText
,
value
:
0
},
{
caption
:
this
.
selectColumnText
,
value
:
1
},
{
caption
:
this
.
selectCellText
,
value
:
2
},
{
caption
:
this
.
selectTableText
,
value
:
3
},
{
caption
:
'
--
'
},
{
caption
:
this
.
insertRowAboveText
,
value
:
4
},
{
caption
:
this
.
insertRowBelowText
,
value
:
5
},
{
caption
:
this
.
insertColumnLeftText
,
value
:
6
},
{
caption
:
this
.
insertColumnRightText
,
value
:
7
},
{
caption
:
'
--
'
},
{
caption
:
this
.
deleteRowText
,
value
:
8
},
{
caption
:
this
.
deleteColumnText
,
value
:
9
},
{
caption
:
this
.
deleteTableText
,
value
:
10
},
{
caption
:
'
--
'
},
{
caption
:
this
.
mergeCellsText
,
value
:
11
},
{
caption
:
this
.
splitCellsText
,
value
:
12
}
]
})
});
this
.
btnEdit
.
render
(
$
(
'
#table-btn-edit
'
))
;
this
.
mnuMerge
=
this
.
btnEdit
.
menu
.
items
[
this
.
btnEdit
.
menu
.
items
.
length
-
2
];
this
.
mnuSplit
=
this
.
btnEdit
.
menu
.
items
[
this
.
btnEdit
.
menu
.
items
.
length
-
1
];
this
.
btnEdit
.
menu
.
on
(
'
show:after
'
,
_
.
bind
(
function
(){
if
(
this
.
api
)
{
this
.
mnuMerge
.
setDisabled
(
!
this
.
api
.
CheckBeforeMergeCells
());
this
.
mnuSplit
.
setDisabled
(
!
this
.
api
.
CheckBeforeSplitCells
());
}
},
this
));
this
.
btnEdit
.
menu
.
on
(
'
item:click
'
,
_
.
bind
(
this
.
onEditClick
,
this
));
this
.
lockedControls
.
push
(
this
.
btnEdit
);
this
.
chRepeatRow
=
new
Common
.
UI
.
CheckBox
({
el
:
$
(
'
#table-checkbox-repeat-row
'
),
labelText
:
this
.
strRepeatRow
});
this
.
chRepeatRow
.
on
(
'
change
'
,
_
.
bind
(
this
.
onCheckRepeatRowChange
,
this
));
this
.
lockedControls
.
push
(
this
.
chRepeatRow
);
$
(
this
.
el
).
on
(
'
click
'
,
'
#table-advanced-link
'
,
_
.
bind
(
this
.
openAdvancedSettings
,
this
));
},
onCheckTemplateChange
:
function
(
type
,
field
,
newValue
,
oldValue
,
eOpts
)
{
...
...
@@ -465,8 +253,6 @@ define([
el
.
html
(
this
.
template
({
scope
:
this
}));
this
.
linkAdvanced
=
$
(
'
#table-advanced-link
'
);
},
setApi
:
function
(
o
)
{
...
...
@@ -479,7 +265,171 @@ define([
return
this
;
},
createDelayedControls
:
function
()
{
this
.
chHeader
=
new
Common
.
UI
.
CheckBox
({
el
:
$
(
'
#table-checkbox-header
'
),
labelText
:
this
.
textHeader
});
this
.
lockedControls
.
push
(
this
.
chHeader
);
this
.
chTotal
=
new
Common
.
UI
.
CheckBox
({
el
:
$
(
'
#table-checkbox-total
'
),
labelText
:
this
.
textTotal
});
this
.
lockedControls
.
push
(
this
.
chTotal
);
this
.
chBanded
=
new
Common
.
UI
.
CheckBox
({
el
:
$
(
'
#table-checkbox-banded
'
),
labelText
:
this
.
textBanded
});
this
.
lockedControls
.
push
(
this
.
chBanded
);
this
.
chFirst
=
new
Common
.
UI
.
CheckBox
({
el
:
$
(
'
#table-checkbox-first
'
),
labelText
:
this
.
textFirst
});
this
.
lockedControls
.
push
(
this
.
chFirst
);
this
.
chLast
=
new
Common
.
UI
.
CheckBox
({
el
:
$
(
'
#table-checkbox-last
'
),
labelText
:
this
.
textLast
});
this
.
lockedControls
.
push
(
this
.
chLast
);
this
.
chColBanded
=
new
Common
.
UI
.
CheckBox
({
el
:
$
(
'
#table-checkbox-col-banded
'
),
labelText
:
this
.
textBanded
});
this
.
lockedControls
.
push
(
this
.
chColBanded
);
this
.
chHeader
.
on
(
'
change
'
,
_
.
bind
(
this
.
onCheckTemplateChange
,
this
,
0
));
this
.
chTotal
.
on
(
'
change
'
,
_
.
bind
(
this
.
onCheckTemplateChange
,
this
,
1
));
this
.
chBanded
.
on
(
'
change
'
,
_
.
bind
(
this
.
onCheckTemplateChange
,
this
,
2
));
this
.
chFirst
.
on
(
'
change
'
,
_
.
bind
(
this
.
onCheckTemplateChange
,
this
,
3
));
this
.
chLast
.
on
(
'
change
'
,
_
.
bind
(
this
.
onCheckTemplateChange
,
this
,
4
));
this
.
chColBanded
.
on
(
'
change
'
,
_
.
bind
(
this
.
onCheckTemplateChange
,
this
,
5
));
this
.
btnWrapNone
=
new
Common
.
UI
.
Button
({
cls
:
'
btn-options huge
'
,
iconCls
:
'
icon-right-panel btn-wrap-none
'
,
posId
:
c_tableWrap
.
TABLE_WRAP_NONE
,
hint
:
this
.
textWrapNoneTooltip
,
enableToggle
:
true
,
allowDepress
:
false
,
toggleGroup
:
'
tablewrapGroup
'
});
this
.
btnWrapNone
.
render
(
$
(
'
#table-button-wrap-none
'
))
;
this
.
btnWrapNone
.
on
(
'
click
'
,
_
.
bind
(
this
.
onBtnWrapClick
,
this
));
this
.
lockedControls
.
push
(
this
.
btnWrapNone
);
this
.
btnWrapParallel
=
new
Common
.
UI
.
Button
({
cls
:
'
btn-options huge
'
,
iconCls
:
'
icon-right-panel btn-wrap-parallel
'
,
posId
:
c_tableWrap
.
TABLE_WRAP_PARALLEL
,
hint
:
this
.
textWrapParallelTooltip
,
enableToggle
:
true
,
allowDepress
:
false
,
toggleGroup
:
'
tablewrapGroup
'
});
this
.
btnWrapParallel
.
render
(
$
(
'
#table-button-wrap-parallel
'
))
;
this
.
btnWrapParallel
.
on
(
'
click
'
,
_
.
bind
(
this
.
onBtnWrapClick
,
this
));
this
.
lockedControls
.
push
(
this
.
btnWrapParallel
);
var
_arrBorderPosition
=
[
[
'
l
'
,
'
btn-borders-small btn-position-left
'
,
'
table-button-border-left
'
,
this
.
tipLeft
],
[
'
c
'
,
'
btn-borders-small btn-position-inner-vert
'
,
'
table-button-border-inner-vert
'
,
this
.
tipInnerVert
],
[
'
r
'
,
'
btn-borders-small btn-position-right
'
,
'
table-button-border-right
'
,
this
.
tipRight
],
[
'
t
'
,
'
btn-borders-small btn-position-top
'
,
'
table-button-border-top
'
,
this
.
tipTop
],
[
'
m
'
,
'
btn-borders-small btn-position-inner-hor
'
,
'
table-button-border-inner-hor
'
,
this
.
tipInnerHor
],
[
'
b
'
,
'
btn-borders-small btn-position-bottom
'
,
'
table-button-border-bottom
'
,
this
.
tipBottom
],
[
'
cm
'
,
'
btn-borders-small btn-position-inner
'
,
'
table-button-border-inner
'
,
this
.
tipInner
],
[
'
lrtb
'
,
'
btn-borders-small btn-position-outer
'
,
'
table-button-border-outer
'
,
this
.
tipOuter
],
[
'
lrtbcm
'
,
'
btn-borders-small btn-position-all
'
,
'
table-button-border-all
'
,
this
.
tipAll
],
[
''
,
'
btn-borders-small btn-position-none
'
,
'
table-button-border-none
'
,
this
.
tipNone
]
];
this
.
_btnsBorderPosition
=
[];
_
.
each
(
_arrBorderPosition
,
function
(
item
,
index
,
list
){
var
_btn
=
new
Common
.
UI
.
Button
({
cls
:
'
btn-toolbar
'
,
iconCls
:
item
[
1
],
strId
:
item
[
0
],
hint
:
item
[
3
]
});
_btn
.
render
(
$
(
'
#
'
+
item
[
2
]))
;
_btn
.
on
(
'
click
'
,
_
.
bind
(
this
.
onBtnBordersClick
,
this
));
this
.
_btnsBorderPosition
.
push
(
_btn
);
this
.
lockedControls
.
push
(
_btn
);
},
this
);
this
.
cmbBorderSize
=
new
Common
.
UI
.
ComboBorderSize
({
el
:
$
(
'
#table-combo-border-size
'
),
style
:
"
width: 93px;
"
});
this
.
BorderSize
=
this
.
cmbBorderSize
.
store
.
at
(
1
).
get
(
'
value
'
);
this
.
cmbBorderSize
.
setValue
(
this
.
BorderSize
);
this
.
cmbBorderSize
.
on
(
'
selected
'
,
_
.
bind
(
this
.
onBorderSizeSelect
,
this
));
this
.
lockedControls
.
push
(
this
.
cmbBorderSize
);
this
.
btnEdit
=
new
Common
.
UI
.
Button
({
cls
:
'
btn-icon-default
'
,
iconCls
:
'
btn-edit-table
'
,
menu
:
new
Common
.
UI
.
Menu
({
menuAlign
:
'
tr-br
'
,
items
:
[
{
caption
:
this
.
selectRowText
,
value
:
0
},
{
caption
:
this
.
selectColumnText
,
value
:
1
},
{
caption
:
this
.
selectCellText
,
value
:
2
},
{
caption
:
this
.
selectTableText
,
value
:
3
},
{
caption
:
'
--
'
},
{
caption
:
this
.
insertRowAboveText
,
value
:
4
},
{
caption
:
this
.
insertRowBelowText
,
value
:
5
},
{
caption
:
this
.
insertColumnLeftText
,
value
:
6
},
{
caption
:
this
.
insertColumnRightText
,
value
:
7
},
{
caption
:
'
--
'
},
{
caption
:
this
.
deleteRowText
,
value
:
8
},
{
caption
:
this
.
deleteColumnText
,
value
:
9
},
{
caption
:
this
.
deleteTableText
,
value
:
10
},
{
caption
:
'
--
'
},
{
caption
:
this
.
mergeCellsText
,
value
:
11
},
{
caption
:
this
.
splitCellsText
,
value
:
12
}
]
})
});
this
.
btnEdit
.
render
(
$
(
'
#table-btn-edit
'
))
;
this
.
mnuMerge
=
this
.
btnEdit
.
menu
.
items
[
this
.
btnEdit
.
menu
.
items
.
length
-
2
];
this
.
mnuSplit
=
this
.
btnEdit
.
menu
.
items
[
this
.
btnEdit
.
menu
.
items
.
length
-
1
];
this
.
btnEdit
.
menu
.
on
(
'
show:after
'
,
_
.
bind
(
function
(){
if
(
this
.
api
)
{
this
.
mnuMerge
.
setDisabled
(
!
this
.
api
.
CheckBeforeMergeCells
());
this
.
mnuSplit
.
setDisabled
(
!
this
.
api
.
CheckBeforeSplitCells
());
}
},
this
));
this
.
btnEdit
.
menu
.
on
(
'
item:click
'
,
_
.
bind
(
this
.
onEditClick
,
this
));
this
.
lockedControls
.
push
(
this
.
btnEdit
);
this
.
chRepeatRow
=
new
Common
.
UI
.
CheckBox
({
el
:
$
(
'
#table-checkbox-repeat-row
'
),
labelText
:
this
.
strRepeatRow
});
this
.
chRepeatRow
.
on
(
'
change
'
,
_
.
bind
(
this
.
onCheckRepeatRowChange
,
this
));
this
.
lockedControls
.
push
(
this
.
chRepeatRow
);
this
.
linkAdvanced
=
$
(
'
#table-advanced-link
'
);
$
(
this
.
el
).
on
(
'
click
'
,
'
#table-advanced-link
'
,
_
.
bind
(
this
.
openAdvancedSettings
,
this
));
},
createDelayedElements
:
function
()
{
this
.
createDelayedControls
();
this
.
UpdateThemeColors
();
},
ChangeSettings
:
function
(
props
)
{
if
(
this
.
_initSettings
)
this
.
createDelayedElements
();
this
.
_initSettings
=
false
;
this
.
disableControls
(
this
.
_locked
);
if
(
props
)
...
...
@@ -671,6 +621,7 @@ define([
},
_TblWrapStyleChanged
:
function
(
style
)
{
if
(
!
this
.
btnWrapNone
||
!
this
.
btnWrapParallel
)
return
;
if
(
this
.
_state
.
WrapStyle
!==
style
)
{
this
.
_noApply
=
true
;
this
.
btnWrapNone
.
toggle
((
style
==
c_tableWrap
.
TABLE_WRAP_NONE
),
true
);
...
...
@@ -685,16 +636,72 @@ define([
},
UpdateThemeColors
:
function
()
{
if
(
this
.
colorsBack
)
this
.
colorsBack
.
updateColors
(
Common
.
Utils
.
ThemeColor
.
getEffectColors
(),
Common
.
Utils
.
ThemeColor
.
getStandartColors
());
if
(
this
.
borderColor
)
this
.
borderColor
.
updateColors
(
Common
.
Utils
.
ThemeColor
.
getEffectColors
(),
Common
.
Utils
.
ThemeColor
.
getStandartColors
());
if
(
!
this
.
btnBackColor
)
{
// create color buttons
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
.
btnBackColor
));
}
this
.
colorsBack
.
updateColors
(
Common
.
Utils
.
ThemeColor
.
getEffectColors
(),
Common
.
Utils
.
ThemeColor
.
getStandartColors
());
this
.
borderColor
.
updateColors
(
Common
.
Utils
.
ThemeColor
.
getEffectColors
(),
Common
.
Utils
.
ThemeColor
.
getStandartColors
());
},
_onInitTemplates
:
function
(
Templates
){
var
self
=
this
;
this
.
_isTemplatesChanged
=
true
;
if
(
!
this
.
cmbTableTemplate
)
{
this
.
cmbTableTemplate
=
new
Common
.
UI
.
ComboDataView
({
itemWidth
:
70
,
itemHeight
:
50
,
menuMaxHeight
:
300
,
enableKeyEvents
:
true
,
cls
:
'
combo-template
'
});
this
.
cmbTableTemplate
.
render
(
$
(
'
#table-combo-template
'
));
this
.
cmbTableTemplate
.
openButton
.
menu
.
cmpEl
.
css
({
'
min-width
'
:
175
,
'
max-width
'
:
175
});
this
.
cmbTableTemplate
.
on
(
'
click
'
,
_
.
bind
(
this
.
onTableTemplateSelect
,
this
));
this
.
cmbTableTemplate
.
openButton
.
menu
.
on
(
'
show:after
'
,
function
()
{
self
.
cmbTableTemplate
.
menuPicker
.
scroller
.
update
({
alwaysVisibleY
:
true
});
});
this
.
lockedControls
.
push
(
this
.
cmbTableTemplate
);
}
var
count
=
self
.
cmbTableTemplate
.
menuPicker
.
store
.
length
;
if
(
count
>
0
&&
count
==
Templates
.
length
)
{
var
data
=
self
.
cmbTableTemplate
.
menuPicker
.
store
.
models
;
...
...
@@ -757,6 +764,8 @@ define([
},
disableControls
:
function
(
disable
)
{
if
(
this
.
_initSettings
)
return
;
if
(
this
.
_state
.
DisabledControls
!==
disable
)
{
this
.
_state
.
DisabledControls
=
disable
;
_
.
each
(
this
.
lockedControls
,
function
(
item
)
{
...
...
apps/documenteditor/main/app/view/TextArtSettings.js
View file @
252ef526
...
...
@@ -69,7 +69,6 @@ define([
},
initialize
:
function
()
{
var
me
=
this
;
this
.
_initSettings
=
true
;
this
.
_noApply
=
true
;
this
.
imgprops
=
null
;
...
...
@@ -108,251 +107,6 @@ define([
this
.
render
();
this
.
cmbTextArt
=
new
Common
.
UI
.
ComboDataView
({
itemWidth
:
50
,
itemHeight
:
50
,
menuMaxHeight
:
300
,
enableKeyEvents
:
true
,
showLast
:
false
,
cls
:
'
combo-textart
'
});
this
.
cmbTextArt
.
render
(
$
(
'
#textart-combo-template
'
));
this
.
cmbTextArt
.
openButton
.
menu
.
cmpEl
.
css
({
'
min-width
'
:
178
,
'
max-width
'
:
178
});
this
.
cmbTextArt
.
on
(
'
click
'
,
_
.
bind
(
this
.
onTextArtSelect
,
this
));
this
.
cmbTextArt
.
openButton
.
menu
.
on
(
'
show:after
'
,
function
()
{
me
.
cmbTextArt
.
menuPicker
.
scroller
.
update
({
alwaysVisibleY
:
true
});
});
this
.
lockedControls
.
push
(
this
.
cmbTextArt
);
this
.
_arrFillSrc
=
[
{
displayValue
:
this
.
textColor
,
value
:
Asc
.
c_oAscFill
.
FILL_TYPE_SOLID
},
{
displayValue
:
this
.
textGradientFill
,
value
:
Asc
.
c_oAscFill
.
FILL_TYPE_GRAD
},
{
displayValue
:
this
.
textNoFill
,
value
:
Asc
.
c_oAscFill
.
FILL_TYPE_NOFILL
}
];
this
.
cmbFillSrc
=
new
Common
.
UI
.
ComboBox
({
el
:
$
(
'
#textart-combo-fill-src
'
),
cls
:
'
input-group-nr
'
,
style
:
'
width: 100%;
'
,
menuStyle
:
'
min-width: 190px;
'
,
editable
:
false
,
data
:
this
.
_arrFillSrc
});
this
.
cmbFillSrc
.
setValue
(
this
.
_arrFillSrc
[
0
].
value
);
this
.
cmbFillSrc
.
on
(
'
selected
'
,
_
.
bind
(
this
.
onFillSrcSelect
,
this
));
this
.
lockedControls
.
push
(
this
.
cmbFillSrc
);
this
.
btnBackColor
=
new
Common
.
UI
.
ColorButton
({
style
:
"
width:45px;
"
,
menu
:
new
Common
.
UI
.
Menu
({
items
:
[
{
template
:
_
.
template
(
'
<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
.
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
.
FillGradientContainer
=
$
(
'
#textart-panel-gradient-fill
'
);
this
.
TransparencyContainer
=
$
(
'
#textart-panel-transparent-fill
'
);
...
...
@@ -1043,14 +797,201 @@ define([
}
},
createDelayedControls
:
function
()
{
var
me
=
this
;
this
.
_arrFillSrc
=
[
{
displayValue
:
this
.
textColor
,
value
:
Asc
.
c_oAscFill
.
FILL_TYPE_SOLID
},
{
displayValue
:
this
.
textGradientFill
,
value
:
Asc
.
c_oAscFill
.
FILL_TYPE_GRAD
},
{
displayValue
:
this
.
textNoFill
,
value
:
Asc
.
c_oAscFill
.
FILL_TYPE_NOFILL
}
];
this
.
cmbFillSrc
=
new
Common
.
UI
.
ComboBox
({
el
:
$
(
'
#textart-combo-fill-src
'
),
cls
:
'
input-group-nr
'
,
style
:
'
width: 100%;
'
,
menuStyle
:
'
min-width: 190px;
'
,
editable
:
false
,
data
:
this
.
_arrFillSrc
});
this
.
cmbFillSrc
.
setValue
(
this
.
_arrFillSrc
[
0
].
value
);
this
.
cmbFillSrc
.
on
(
'
selected
'
,
_
.
bind
(
this
.
onFillSrcSelect
,
this
));
this
.
lockedControls
.
push
(
this
.
cmbFillSrc
);
this
.
numTransparency
=
new
Common
.
UI
.
MetricSpinner
({
el
:
$
(
'
#textart-spin-transparency
'
),
step
:
1
,
width
:
62
,
value
:
'
100 %
'
,
defaultUnit
:
"
%
"
,
maxValue
:
100
,
minValue
:
0
});
this
.
numTransparency
.
on
(
'
change
'
,
_
.
bind
(
this
.
onNumTransparencyChange
,
this
));
this
.
lockedControls
.
push
(
this
.
numTransparency
);
this
.
sldrTransparency
=
new
Common
.
UI
.
SingleSlider
({
el
:
$
(
'
#textart-slider-transparency
'
),
width
:
75
,
minValue
:
0
,
maxValue
:
100
,
value
:
100
});
this
.
sldrTransparency
.
on
(
'
change
'
,
_
.
bind
(
this
.
onTransparencyChange
,
this
));
this
.
sldrTransparency
.
on
(
'
changecomplete
'
,
_
.
bind
(
this
.
onTransparencyChangeComplete
,
this
));
this
.
lockedControls
.
push
(
this
.
sldrTransparency
);
this
.
lblTransparencyStart
=
$
(
this
.
el
).
find
(
'
#textart-lbl-transparency-start
'
);
this
.
lblTransparencyEnd
=
$
(
this
.
el
).
find
(
'
#textart-lbl-transparency-end
'
);
this
.
_arrGradType
=
[
{
displayValue
:
this
.
textLinear
,
value
:
Asc
.
c_oAscFillGradType
.
GRAD_LINEAR
},
{
displayValue
:
this
.
textRadial
,
value
:
Asc
.
c_oAscFillGradType
.
GRAD_PATH
}
];
this
.
cmbGradType
=
new
Common
.
UI
.
ComboBox
({
el
:
$
(
'
#textart-combo-grad-type
'
),
cls
:
'
input-group-nr
'
,
menuStyle
:
'
min-width: 90px;
'
,
editable
:
false
,
data
:
this
.
_arrGradType
});
this
.
cmbGradType
.
setValue
(
this
.
_arrGradType
[
0
].
value
);
this
.
cmbGradType
.
on
(
'
selected
'
,
_
.
bind
(
this
.
onGradTypeSelect
,
this
));
this
.
lockedControls
.
push
(
this
.
cmbGradType
);
this
.
_viewDataLinear
=
[
{
offsetx
:
0
,
offsety
:
0
,
type
:
45
,
subtype
:
-
1
,
iconcls
:
'
gradient-left-top
'
},
{
offsetx
:
50
,
offsety
:
0
,
type
:
90
,
subtype
:
4
,
iconcls
:
'
gradient-top
'
},
{
offsetx
:
100
,
offsety
:
0
,
type
:
135
,
subtype
:
5
,
iconcls
:
'
gradient-right-top
'
},
{
offsetx
:
0
,
offsety
:
50
,
type
:
0
,
subtype
:
6
,
iconcls
:
'
gradient-left
'
,
cls
:
'
item-gradient-separator
'
,
selected
:
true
},
{
offsetx
:
100
,
offsety
:
50
,
type
:
180
,
subtype
:
1
,
iconcls
:
'
gradient-right
'
},
{
offsetx
:
0
,
offsety
:
100
,
type
:
315
,
subtype
:
2
,
iconcls
:
'
gradient-left-bottom
'
},
{
offsetx
:
50
,
offsety
:
100
,
type
:
270
,
subtype
:
3
,
iconcls
:
'
gradient-bottom
'
},
{
offsetx
:
100
,
offsety
:
100
,
type
:
225
,
subtype
:
7
,
iconcls
:
'
gradient-right-bottom
'
}
];
this
.
_viewDataRadial
=
[
{
offsetx
:
100
,
offsety
:
150
,
type
:
2
,
subtype
:
5
,
iconcls
:
'
gradient-radial-center
'
}
];
this
.
btnDirection
=
new
Common
.
UI
.
Button
({
cls
:
'
btn-large-dataview
'
,
iconCls
:
'
item-gradient gradient-left
'
,
menu
:
new
Common
.
UI
.
Menu
({
style
:
'
min-width: 60px;
'
,
menuAlign
:
'
tr-br
'
,
items
:
[
{
template
:
_
.
template
(
'
<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
()
{
this
.
createDelayedControls
();
this
.
UpdateThemeColors
();
this
.
fillTransform
(
this
.
api
.
asc_getPropertyEditorTextArts
());
},
fillTextArt
:
function
()
{
var
me
=
this
,
models
=
this
.
application
.
getCollection
(
'
Common.Collections.TextArt
'
).
models
,
var
me
=
this
;
if
(
!
this
.
cmbTextArt
)
{
this
.
cmbTextArt
=
new
Common
.
UI
.
ComboDataView
({
itemWidth
:
50
,
itemHeight
:
50
,
menuMaxHeight
:
300
,
enableKeyEvents
:
true
,
showLast
:
false
,
cls
:
'
combo-textart
'
});
this
.
cmbTextArt
.
render
(
$
(
'
#textart-combo-template
'
));
this
.
cmbTextArt
.
openButton
.
menu
.
cmpEl
.
css
({
'
min-width
'
:
178
,
'
max-width
'
:
178
});
this
.
cmbTextArt
.
on
(
'
click
'
,
_
.
bind
(
this
.
onTextArtSelect
,
this
));
this
.
cmbTextArt
.
openButton
.
menu
.
on
(
'
show:after
'
,
function
()
{
me
.
cmbTextArt
.
menuPicker
.
scroller
.
update
({
alwaysVisibleY
:
true
});
});
this
.
lockedControls
.
push
(
this
.
cmbTextArt
);
}
var
models
=
this
.
application
.
getCollection
(
'
Common.Collections.TextArt
'
).
models
,
count
=
this
.
cmbTextArt
.
menuPicker
.
store
.
length
;
if
(
count
>
0
&&
count
==
models
.
length
)
{
var
data
=
this
.
cmbTextArt
.
menuPicker
.
store
.
models
;
...
...
@@ -1108,6 +1049,66 @@ define([
},
UpdateThemeColors
:
function
()
{
if
(
!
this
.
btnBackColor
)
{
this
.
btnBorderColor
=
new
Common
.
UI
.
ColorButton
({
style
:
"
width:45px;
"
,
menu
:
new
Common
.
UI
.
Menu
({
items
:
[
{
template
:
_
.
template
(
'
<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
.
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
.
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
.
colorsBorder
.
updateColors
(
Common
.
Utils
.
ThemeColor
.
getEffectColors
(),
Common
.
Utils
.
ThemeColor
.
getStandartColors
());
this
.
colorsBack
.
updateColors
(
Common
.
Utils
.
ThemeColor
.
getEffectColors
(),
Common
.
Utils
.
ThemeColor
.
getStandartColors
());
this
.
colorsGrad
.
updateColors
(
Common
.
Utils
.
ThemeColor
.
getEffectColors
(),
Common
.
Utils
.
ThemeColor
.
getStandartColors
());
...
...
@@ -1132,6 +1133,8 @@ define([
},
disableControls
:
function
(
disable
)
{
if
(
this
.
_initSettings
)
return
;
if
(
this
.
_state
.
DisabledControls
!==
disable
)
{
this
.
_state
.
DisabledControls
=
disable
;
_
.
each
(
this
.
lockedControls
,
function
(
item
)
{
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment