2 * $Id: editor_plugin_src.js 201 2007-02-12 15:56:56Z spocke $
\r
5 * @copyright Copyright © 2004-2007, Moxiecode Systems AB, All rights reserved.
\r
8 /* Import plugin specific language pack */
\r
9 tinyMCE.importPluginLanguagePack('layer');
\r
11 var TinyMCE_LayerPlugin = {
\r
12 getInfo : function() {
\r
15 author : 'Moxiecode Systems AB',
\r
16 authorurl : 'http://tinymce.moxiecode.com',
\r
17 infourl : 'http://wiki.moxiecode.com/index.php/TinyMCE:Plugins/layer',
\r
18 version : tinyMCE.majorVersion + "." + tinyMCE.minorVersion
\r
22 initInstance : function(inst) {
\r
23 if (tinyMCE.isMSIE && !tinyMCE.isOpera)
\r
24 inst.getDoc().execCommand('2D-Position');
\r
27 handleEvent : function(e) {
\r
28 var inst = tinyMCE.selectedInstance;
\r
29 var w = inst.getWin(), le = inst._lastStyleElm, e;
\r
31 if (tinyMCE.isGecko) {
\r
32 e = this._getParentLayer(inst.getFocusElement());
\r
35 if (!inst._lastStyleElm) {
\r
36 e.style.overflow = 'auto';
\r
37 inst._lastStyleElm = e;
\r
40 le = inst._lastStyleElm;
\r
41 le.style.width = le.scrollWidth + 'px';
\r
42 le.style.height = le.scrollHeight + 'px';
\r
43 le.style.overflow = '';
\r
44 inst._lastStyleElm = null;
\r
51 handleVisualAid : function(el, deep, state, inst) {
\r
52 var nl = inst.getDoc().getElementsByTagName("div"), i;
\r
54 for (i=0; i<nl.length; i++) {
\r
55 if (new RegExp('absolute|relative|static', 'gi').test(nl[i].style.position)) {
\r
57 tinyMCE.addCSSClass(nl[i], 'mceVisualAid');
\r
59 tinyMCE.removeCSSClass(nl[i], 'mceVisualAid');
\r
64 getControlHTML : function(cn) {
\r
67 return tinyMCE.getButtonHTML(cn, 'lang_layer_forward_desc', '{$pluginurl}/images/moveforward.gif', 'mceMoveForward', true);
\r
69 case "movebackward":
\r
70 return tinyMCE.getButtonHTML(cn, 'lang_layer_backward_desc', '{$pluginurl}/images/movebackward.gif', 'mceMoveBackward', true);
\r
73 return tinyMCE.getButtonHTML(cn, 'lang_layer_absolute_desc', '{$pluginurl}/images/absolute.gif', 'mceMakeAbsolute', true);
\r
76 return tinyMCE.getButtonHTML(cn, 'lang_layer_insertlayer_desc', '{$pluginurl}/images/insertlayer.gif', 'mceInsertLayer', true);
\r
82 execCommand : function(editor_id, element, command, user_interface, value) {
\r
85 case "mceInsertLayer":
\r
86 this._insertLayer();
\r
89 case "mceMoveForward":
\r
93 case "mceMoveBackward":
\r
97 case "mceMakeAbsolute":
\r
98 this._toggleAbsolute();
\r
102 // Pass to next handler in chain
\r
106 handleNodeChange : function(editor_id, node, undo_index, undo_levels, visual_aid, any_selection) {
\r
107 var inst = tinyMCE.getInstanceById(editor_id);
\r
108 var le = this._getParentLayer(inst.getFocusElement());
\r
109 var p = tinyMCE.getParentElement(inst.getFocusElement(), 'div,p,img');
\r
111 tinyMCE.switchClass(editor_id + '_absolute', 'mceButtonDisabled');
\r
112 tinyMCE.switchClass(editor_id + '_moveforward', 'mceButtonDisabled');
\r
113 tinyMCE.switchClass(editor_id + '_movebackward', 'mceButtonDisabled');
\r
116 tinyMCE.switchClass(editor_id + '_absolute', 'mceButtonNormal');
\r
118 if (le && le.style.position.toLowerCase() == "absolute") {
\r
119 tinyMCE.switchClass(editor_id + '_absolute', 'mceButtonSelected');
\r
120 tinyMCE.switchClass(editor_id + '_moveforward', 'mceButtonNormal');
\r
121 tinyMCE.switchClass(editor_id + '_movebackward', 'mceButtonNormal');
\r
125 // Private plugin specific methods
\r
127 _move : function(d) {
\r
128 var inst = tinyMCE.selectedInstance, i, z = new Array();
\r
129 var le = this._getParentLayer(inst.getFocusElement()), ci = -1, fi = -1;
\r
130 var nl = tinyMCE.selectNodes(inst.getBody(), function(n) {
\r
131 return n.nodeType == 1 && new RegExp('absolute|relative|static', 'gi').test(n.style.position);
\r
135 for (i=0; i<nl.length; i++) {
\r
136 z[i] = nl[i].style.zIndex ? parseInt(nl[i].style.zIndex) : 0;
\r
138 if (ci < 0 && nl[i] == le)
\r
145 // Try find a lower one
\r
146 for (i=0; i<z.length; i++) {
\r
147 if (z[i] < z[ci]) {
\r
154 nl[ci].style.zIndex = z[fi];
\r
155 nl[fi].style.zIndex = z[ci];
\r
158 nl[ci].style.zIndex = z[ci] - 1;
\r
163 // Try find a higher one
\r
164 for (i=0; i<z.length; i++) {
\r
165 if (z[i] > z[ci]) {
\r
172 nl[ci].style.zIndex = z[fi];
\r
173 nl[fi].style.zIndex = z[ci];
\r
175 nl[ci].style.zIndex = z[ci] + 1;
\r
181 _getParentLayer : function(n) {
\r
182 return tinyMCE.getParentNode(n, function(n) {
\r
183 return n.nodeType == 1 && new RegExp('absolute|relative|static', 'gi').test(n.style.position);
\r
187 _insertLayer : function() {
\r
188 var inst = tinyMCE.selectedInstance;
\r
189 var e = tinyMCE.getParentElement(inst.getFocusElement());
\r
190 var p = tinyMCE.getAbsPosition(e);
\r
191 var d = inst.getDoc();
\r
192 var ne = d.createElement('div');
\r
193 var h = inst.selection.getSelectedHTML();
\r
196 ne.style.position = 'absolute';
\r
197 ne.style.left = p.absLeft + 'px';
\r
198 ne.style.top = (p.absTop > 20 ? p.absTop : 20) + 'px';
\r
199 ne.style.width = '100px';
\r
200 ne.style.height = '100px';
\r
201 ne.className = 'mceVisualAid';
\r
204 h = tinyMCE.getLang('lang_layer_content');
\r
209 d.body.appendChild(ne);
\r
212 _toggleAbsolute : function() {
\r
213 var inst = tinyMCE.selectedInstance;
\r
214 var le = this._getParentLayer(inst.getFocusElement());
\r
217 le = tinyMCE.getParentElement(inst.getFocusElement(), 'div,p,img');
\r
220 if (le.style.position.toLowerCase() == "absolute") {
\r
221 le.style.position = "";
\r
222 le.style.left = "";
\r
225 le.style.position = "absolute";
\r
227 if (le.style.left == "")
\r
228 le.style.left = 20 + 'px';
\r
230 if (le.style.top == "")
\r
231 le.style.top = 20 + 'px';
\r
233 if (le.style.width == "")
\r
234 le.style.width = le.width ? (le.width + 'px') : '100px';
\r
236 if (le.style.height == "")
\r
237 le.style.height = le.height ? (le.height + 'px') : '100px';
\r
239 tinyMCE.handleVisualAid(inst.getBody(), true, inst.visualAid, inst);
\r
243 tinyMCE.triggerNodeChange();
\r
248 tinyMCE.addPlugin("layer", TinyMCE_LayerPlugin);
\r