1 |
3 |
ahitrov@rambler.ru |
/** |
2 |
|
|
* editor_plugin_src.js |
3 |
|
|
* |
4 |
|
|
* Copyright 2009, Moxiecode Systems AB |
5 |
|
|
* Released under LGPL License. |
6 |
|
|
* |
7 |
|
|
* License: http://tinymce.moxiecode.com/license |
8 |
|
|
* Contributing: http://tinymce.moxiecode.com/contributing |
9 |
|
|
*/ |
10 |
|
|
|
11 |
|
|
(function() { |
12 |
|
|
tinymce.create('tinymce.plugins.Layer', { |
13 |
|
|
init : function(ed, url) { |
14 |
|
|
var t = this; |
15 |
|
|
|
16 |
|
|
t.editor = ed; |
17 |
|
|
|
18 |
|
|
// Register commands |
19 |
|
|
ed.addCommand('mceInsertLayer', t._insertLayer, t); |
20 |
|
|
|
21 |
|
|
ed.addCommand('mceMoveForward', function() { |
22 |
|
|
t._move(1); |
23 |
|
|
}); |
24 |
|
|
|
25 |
|
|
ed.addCommand('mceMoveBackward', function() { |
26 |
|
|
t._move(-1); |
27 |
|
|
}); |
28 |
|
|
|
29 |
|
|
ed.addCommand('mceMakeAbsolute', function() { |
30 |
|
|
t._toggleAbsolute(); |
31 |
|
|
}); |
32 |
|
|
|
33 |
|
|
// Register buttons |
34 |
|
|
ed.addButton('moveforward', {title : 'layer.forward_desc', cmd : 'mceMoveForward'}); |
35 |
|
|
ed.addButton('movebackward', {title : 'layer.backward_desc', cmd : 'mceMoveBackward'}); |
36 |
|
|
ed.addButton('absolute', {title : 'layer.absolute_desc', cmd : 'mceMakeAbsolute'}); |
37 |
|
|
ed.addButton('insertlayer', {title : 'layer.insertlayer_desc', cmd : 'mceInsertLayer'}); |
38 |
|
|
|
39 |
|
|
ed.onInit.add(function() { |
40 |
|
|
if (tinymce.isIE) |
41 |
|
|
ed.getDoc().execCommand('2D-Position', false, true); |
42 |
|
|
}); |
43 |
|
|
|
44 |
|
|
ed.onNodeChange.add(t._nodeChange, t); |
45 |
|
|
ed.onVisualAid.add(t._visualAid, t); |
46 |
|
|
}, |
47 |
|
|
|
48 |
|
|
getInfo : function() { |
49 |
|
|
return { |
50 |
|
|
longname : 'Layer', |
51 |
|
|
author : 'Moxiecode Systems AB', |
52 |
|
|
authorurl : 'http://tinymce.moxiecode.com', |
53 |
|
|
infourl : 'http://wiki.moxiecode.com/index.php/TinyMCE:Plugins/layer', |
54 |
|
|
version : tinymce.majorVersion + "." + tinymce.minorVersion |
55 |
|
|
}; |
56 |
|
|
}, |
57 |
|
|
|
58 |
|
|
// Private methods |
59 |
|
|
|
60 |
|
|
_nodeChange : function(ed, cm, n) { |
61 |
|
|
var le, p; |
62 |
|
|
|
63 |
|
|
le = this._getParentLayer(n); |
64 |
|
|
p = ed.dom.getParent(n, 'DIV,P,IMG'); |
65 |
|
|
|
66 |
|
|
if (!p) { |
67 |
|
|
cm.setDisabled('absolute', 1); |
68 |
|
|
cm.setDisabled('moveforward', 1); |
69 |
|
|
cm.setDisabled('movebackward', 1); |
70 |
|
|
} else { |
71 |
|
|
cm.setDisabled('absolute', 0); |
72 |
|
|
cm.setDisabled('moveforward', !le); |
73 |
|
|
cm.setDisabled('movebackward', !le); |
74 |
|
|
cm.setActive('absolute', le && le.style.position.toLowerCase() == "absolute"); |
75 |
|
|
} |
76 |
|
|
}, |
77 |
|
|
|
78 |
|
|
// Private methods |
79 |
|
|
|
80 |
|
|
_visualAid : function(ed, e, s) { |
81 |
|
|
var dom = ed.dom; |
82 |
|
|
|
83 |
|
|
tinymce.each(dom.select('div,p', e), function(e) { |
84 |
|
|
if (/^(absolute|relative|static)$/i.test(e.style.position)) { |
85 |
|
|
if (s) |
86 |
|
|
dom.addClass(e, 'mceItemVisualAid'); |
87 |
|
|
else |
88 |
|
|
dom.removeClass(e, 'mceItemVisualAid'); |
89 |
|
|
} |
90 |
|
|
}); |
91 |
|
|
}, |
92 |
|
|
|
93 |
|
|
_move : function(d) { |
94 |
|
|
var ed = this.editor, i, z = [], le = this._getParentLayer(ed.selection.getNode()), ci = -1, fi = -1, nl; |
95 |
|
|
|
96 |
|
|
nl = []; |
97 |
|
|
tinymce.walk(ed.getBody(), function(n) { |
98 |
|
|
if (n.nodeType == 1 && /^(absolute|relative|static)$/i.test(n.style.position)) |
99 |
|
|
nl.push(n); |
100 |
|
|
}, 'childNodes'); |
101 |
|
|
|
102 |
|
|
// Find z-indexes |
103 |
|
|
for (i=0; i<nl.length; i++) { |
104 |
|
|
z[i] = nl[i].style.zIndex ? parseInt(nl[i].style.zIndex) : 0; |
105 |
|
|
|
106 |
|
|
if (ci < 0 && nl[i] == le) |
107 |
|
|
ci = i; |
108 |
|
|
} |
109 |
|
|
|
110 |
|
|
if (d < 0) { |
111 |
|
|
// Move back |
112 |
|
|
|
113 |
|
|
// Try find a lower one |
114 |
|
|
for (i=0; i<z.length; i++) { |
115 |
|
|
if (z[i] < z[ci]) { |
116 |
|
|
fi = i; |
117 |
|
|
break; |
118 |
|
|
} |
119 |
|
|
} |
120 |
|
|
|
121 |
|
|
if (fi > -1) { |
122 |
|
|
nl[ci].style.zIndex = z[fi]; |
123 |
|
|
nl[fi].style.zIndex = z[ci]; |
124 |
|
|
} else { |
125 |
|
|
if (z[ci] > 0) |
126 |
|
|
nl[ci].style.zIndex = z[ci] - 1; |
127 |
|
|
} |
128 |
|
|
} else { |
129 |
|
|
// Move forward |
130 |
|
|
|
131 |
|
|
// Try find a higher one |
132 |
|
|
for (i=0; i<z.length; i++) { |
133 |
|
|
if (z[i] > z[ci]) { |
134 |
|
|
fi = i; |
135 |
|
|
break; |
136 |
|
|
} |
137 |
|
|
} |
138 |
|
|
|
139 |
|
|
if (fi > -1) { |
140 |
|
|
nl[ci].style.zIndex = z[fi]; |
141 |
|
|
nl[fi].style.zIndex = z[ci]; |
142 |
|
|
} else |
143 |
|
|
nl[ci].style.zIndex = z[ci] + 1; |
144 |
|
|
} |
145 |
|
|
|
146 |
|
|
ed.execCommand('mceRepaint'); |
147 |
|
|
}, |
148 |
|
|
|
149 |
|
|
_getParentLayer : function(n) { |
150 |
|
|
return this.editor.dom.getParent(n, function(n) { |
151 |
|
|
return n.nodeType == 1 && /^(absolute|relative|static)$/i.test(n.style.position); |
152 |
|
|
}); |
153 |
|
|
}, |
154 |
|
|
|
155 |
|
|
_insertLayer : function() { |
156 |
|
|
var ed = this.editor, p = ed.dom.getPos(ed.dom.getParent(ed.selection.getNode(), '*')); |
157 |
|
|
|
158 |
|
|
ed.dom.add(ed.getBody(), 'div', { |
159 |
|
|
style : { |
160 |
|
|
position : 'absolute', |
161 |
|
|
left : p.x, |
162 |
|
|
top : (p.y > 20 ? p.y : 20), |
163 |
|
|
width : 100, |
164 |
|
|
height : 100 |
165 |
|
|
}, |
166 |
|
|
'class' : 'mceItemVisualAid' |
167 |
|
|
}, ed.selection.getContent() || ed.getLang('layer.content')); |
168 |
|
|
}, |
169 |
|
|
|
170 |
|
|
_toggleAbsolute : function() { |
171 |
|
|
var ed = this.editor, le = this._getParentLayer(ed.selection.getNode()); |
172 |
|
|
|
173 |
|
|
if (!le) |
174 |
|
|
le = ed.dom.getParent(ed.selection.getNode(), 'DIV,P,IMG'); |
175 |
|
|
|
176 |
|
|
if (le) { |
177 |
|
|
if (le.style.position.toLowerCase() == "absolute") { |
178 |
|
|
ed.dom.setStyles(le, { |
179 |
|
|
position : '', |
180 |
|
|
left : '', |
181 |
|
|
top : '', |
182 |
|
|
width : '', |
183 |
|
|
height : '' |
184 |
|
|
}); |
185 |
|
|
|
186 |
|
|
ed.dom.removeClass(le, 'mceItemVisualAid'); |
187 |
|
|
} else { |
188 |
|
|
if (le.style.left == "") |
189 |
|
|
le.style.left = 20 + 'px'; |
190 |
|
|
|
191 |
|
|
if (le.style.top == "") |
192 |
|
|
le.style.top = 20 + 'px'; |
193 |
|
|
|
194 |
|
|
if (le.style.width == "") |
195 |
|
|
le.style.width = le.width ? (le.width + 'px') : '100px'; |
196 |
|
|
|
197 |
|
|
if (le.style.height == "") |
198 |
|
|
le.style.height = le.height ? (le.height + 'px') : '100px'; |
199 |
|
|
|
200 |
|
|
le.style.position = "absolute"; |
201 |
|
|
ed.addVisual(ed.getBody()); |
202 |
|
|
} |
203 |
|
|
|
204 |
|
|
ed.execCommand('mceRepaint'); |
205 |
|
|
ed.nodeChanged(); |
206 |
|
|
} |
207 |
|
|
} |
208 |
|
|
}); |
209 |
|
|
|
210 |
|
|
// Register plugin |
211 |
|
|
tinymce.PluginManager.add('layer', tinymce.plugins.Layer); |
212 |
|
|
})(); |