includes/clientside/tinymce/plugins/layer/editor_plugin_src.js
changeset 1 fe660c52c48f
equal deleted inserted replaced
0:902822492a68 1:fe660c52c48f
       
     1 /**
       
     2  * $Id: editor_plugin_src.js 201 2007-02-12 15:56:56Z spocke $
       
     3  *
       
     4  * @author Moxiecode
       
     5  * @copyright Copyright © 2004-2007, Moxiecode Systems AB, All rights reserved.
       
     6  */
       
     7 
       
     8 /* Import plugin specific language pack */
       
     9 tinyMCE.importPluginLanguagePack('layer');
       
    10 
       
    11 var TinyMCE_LayerPlugin = {
       
    12 	getInfo : function() {
       
    13 		return {
       
    14 			longname : 'Layer',
       
    15 			author : 'Moxiecode Systems AB',
       
    16 			authorurl : 'http://tinymce.moxiecode.com',
       
    17 			infourl : 'http://wiki.moxiecode.com/index.php/TinyMCE:Plugins/layer',
       
    18 			version : tinyMCE.majorVersion + "." + tinyMCE.minorVersion
       
    19 		};
       
    20 	},
       
    21 
       
    22 	initInstance : function(inst) {
       
    23 		if (tinyMCE.isMSIE && !tinyMCE.isOpera)
       
    24 			inst.getDoc().execCommand('2D-Position');
       
    25 	},
       
    26 
       
    27 	handleEvent : function(e) {
       
    28 		var inst = tinyMCE.selectedInstance;
       
    29 		var w = inst.getWin(), le = inst._lastStyleElm, e;
       
    30 
       
    31 		if (tinyMCE.isGecko) {
       
    32 			e = this._getParentLayer(inst.getFocusElement());
       
    33 
       
    34 			if (e) {
       
    35 				if (!inst._lastStyleElm) {
       
    36 					e.style.overflow = 'auto';
       
    37 					inst._lastStyleElm = e;
       
    38 				}
       
    39 			} else if (le) {
       
    40 				le = inst._lastStyleElm;
       
    41 				le.style.width = le.scrollWidth + 'px';
       
    42 				le.style.height = le.scrollHeight + 'px';
       
    43 				le.style.overflow = '';
       
    44 				inst._lastStyleElm = null;
       
    45 			}
       
    46 		}
       
    47 
       
    48 		return true;
       
    49 	},
       
    50 
       
    51 	handleVisualAid : function(el, deep, state, inst) {
       
    52 		var nl = inst.getDoc().getElementsByTagName("div"), i;
       
    53 
       
    54 		for (i=0; i<nl.length; i++) {
       
    55 			if (new RegExp('absolute|relative|static', 'gi').test(nl[i].style.position)) {
       
    56 				if (state)
       
    57 					tinyMCE.addCSSClass(nl[i], 'mceVisualAid');
       
    58 				else
       
    59 					tinyMCE.removeCSSClass(nl[i], 'mceVisualAid');					
       
    60 			}
       
    61 		}
       
    62 	},
       
    63 
       
    64 	getControlHTML : function(cn) {
       
    65 		switch (cn) {
       
    66 			case "moveforward":
       
    67 				return tinyMCE.getButtonHTML(cn, 'lang_layer_forward_desc', '{$pluginurl}/images/moveforward.gif', 'mceMoveForward', true);
       
    68 
       
    69 			case "movebackward":
       
    70 				return tinyMCE.getButtonHTML(cn, 'lang_layer_backward_desc', '{$pluginurl}/images/movebackward.gif', 'mceMoveBackward', true);
       
    71 
       
    72 			case "absolute":
       
    73 				return tinyMCE.getButtonHTML(cn, 'lang_layer_absolute_desc', '{$pluginurl}/images/absolute.gif', 'mceMakeAbsolute', true);
       
    74 
       
    75 			case "insertlayer":
       
    76 				return tinyMCE.getButtonHTML(cn, 'lang_layer_insertlayer_desc', '{$pluginurl}/images/insertlayer.gif', 'mceInsertLayer', true);
       
    77 		}
       
    78 
       
    79 		return "";
       
    80 	},
       
    81 
       
    82 	execCommand : function(editor_id, element, command, user_interface, value) {
       
    83 		// Handle commands
       
    84 		switch (command) {
       
    85 			case "mceInsertLayer":
       
    86 				this._insertLayer();
       
    87 				return true;
       
    88 
       
    89 			case "mceMoveForward":
       
    90 				this._move(1);
       
    91 				return true;
       
    92 
       
    93 			case "mceMoveBackward":
       
    94 				this._move(-1);
       
    95 				return true;
       
    96 
       
    97 			case "mceMakeAbsolute":
       
    98 				this._toggleAbsolute();
       
    99 				return true;
       
   100 		}
       
   101 
       
   102 		// Pass to next handler in chain
       
   103 		return false;
       
   104 	},
       
   105 
       
   106 	handleNodeChange : function(editor_id, node, undo_index, undo_levels, visual_aid, any_selection) {
       
   107 		var inst = tinyMCE.getInstanceById(editor_id);
       
   108 		var le = this._getParentLayer(inst.getFocusElement());
       
   109 		var p = tinyMCE.getParentElement(inst.getFocusElement(), 'div,p,img');
       
   110 
       
   111 		tinyMCE.switchClass(editor_id + '_absolute', 'mceButtonDisabled');
       
   112 		tinyMCE.switchClass(editor_id + '_moveforward', 'mceButtonDisabled');
       
   113 		tinyMCE.switchClass(editor_id + '_movebackward', 'mceButtonDisabled');
       
   114 
       
   115 		if (p)
       
   116 			tinyMCE.switchClass(editor_id + '_absolute', 'mceButtonNormal');
       
   117 
       
   118 		if (le && le.style.position.toLowerCase() == "absolute") {
       
   119 			tinyMCE.switchClass(editor_id + '_absolute', 'mceButtonSelected');
       
   120 			tinyMCE.switchClass(editor_id + '_moveforward', 'mceButtonNormal');
       
   121 			tinyMCE.switchClass(editor_id + '_movebackward', 'mceButtonNormal');
       
   122 		}
       
   123 	},
       
   124 
       
   125 	// Private plugin specific methods
       
   126 
       
   127 	_move : function(d) {
       
   128 		var inst = tinyMCE.selectedInstance, i, z = new Array();
       
   129 		var le = this._getParentLayer(inst.getFocusElement()), ci = -1, fi = -1;
       
   130 		var nl = tinyMCE.selectNodes(inst.getBody(), function(n) {
       
   131 			return n.nodeType == 1 && new RegExp('absolute|relative|static', 'gi').test(n.style.position);
       
   132 		});
       
   133 
       
   134 		// Find z-indexes
       
   135 		for (i=0; i<nl.length; i++) {
       
   136 			z[i] = nl[i].style.zIndex ? parseInt(nl[i].style.zIndex) : 0;
       
   137 
       
   138 			if (ci < 0 && nl[i] == le)
       
   139 				ci = i;
       
   140 		}
       
   141 
       
   142 		if (d < 0) {
       
   143 			// Move back
       
   144 
       
   145 			// Try find a lower one
       
   146 			for (i=0; i<z.length; i++) {
       
   147 				if (z[i] < z[ci]) {
       
   148 					fi = i;
       
   149 					break;
       
   150 				}
       
   151 			}
       
   152 
       
   153 			if (fi > -1) {
       
   154 				nl[ci].style.zIndex = z[fi];
       
   155 				nl[fi].style.zIndex = z[ci];
       
   156 			} else {
       
   157 				if (z[ci] > 0)
       
   158 					nl[ci].style.zIndex = z[ci] - 1;
       
   159 			}
       
   160 		} else {
       
   161 			// Move forward
       
   162 
       
   163 			// Try find a higher one
       
   164 			for (i=0; i<z.length; i++) {
       
   165 				if (z[i] > z[ci]) {
       
   166 					fi = i;
       
   167 					break;
       
   168 				}
       
   169 			}
       
   170 
       
   171 			if (fi > -1) {
       
   172 				nl[ci].style.zIndex = z[fi];
       
   173 				nl[fi].style.zIndex = z[ci];
       
   174 			} else
       
   175 				nl[ci].style.zIndex = z[ci] + 1;
       
   176 		}
       
   177 
       
   178 		inst.repaint();
       
   179 	},
       
   180 
       
   181 	_getParentLayer : function(n) {
       
   182 		return tinyMCE.getParentNode(n, function(n) {
       
   183 			return n.nodeType == 1 && new RegExp('absolute|relative|static', 'gi').test(n.style.position);
       
   184 		});
       
   185 	},
       
   186 
       
   187 	_insertLayer : function() {
       
   188 		var inst = tinyMCE.selectedInstance;
       
   189 		var e = tinyMCE.getParentElement(inst.getFocusElement());
       
   190 		var p = tinyMCE.getAbsPosition(e);
       
   191 		var d = inst.getDoc();
       
   192 		var ne = d.createElement('div');
       
   193 		var h = inst.selection.getSelectedHTML();
       
   194 
       
   195 		// Move div
       
   196 		ne.style.position = 'absolute';
       
   197 		ne.style.left = p.absLeft + 'px';
       
   198 		ne.style.top = (p.absTop > 20 ? p.absTop : 20) + 'px';
       
   199 		ne.style.width = '100px';
       
   200 		ne.style.height = '100px';
       
   201 		ne.className = 'mceVisualAid';
       
   202 
       
   203 		if (!h)
       
   204 			h = tinyMCE.getLang('lang_layer_content');
       
   205 
       
   206 		ne.innerHTML = h;
       
   207 
       
   208 		// Add it
       
   209 		d.body.appendChild(ne);
       
   210 	},
       
   211 
       
   212 	_toggleAbsolute : function() {
       
   213 		var inst = tinyMCE.selectedInstance;
       
   214 		var le = this._getParentLayer(inst.getFocusElement());
       
   215 
       
   216 		if (le == null)
       
   217 			le = tinyMCE.getParentElement(inst.getFocusElement(), 'div,p,img');
       
   218 
       
   219 		if (le) {
       
   220 			if (le.style.position.toLowerCase() == "absolute") {
       
   221 				le.style.position = "";
       
   222 				le.style.left = "";
       
   223 				le.style.top = "";
       
   224 			} else {
       
   225 				le.style.position = "absolute";
       
   226 
       
   227 				if (le.style.left == "")
       
   228 					le.style.left = 20 + 'px';
       
   229 
       
   230 				if (le.style.top == "")
       
   231 					le.style.top = 20 + 'px';
       
   232 
       
   233 				if (le.style.width == "")
       
   234 					le.style.width = le.width ? (le.width + 'px') : '100px';
       
   235 
       
   236 				if (le.style.height == "")
       
   237 					le.style.height = le.height ? (le.height + 'px') : '100px';
       
   238 
       
   239 				tinyMCE.handleVisualAid(inst.getBody(), true, inst.visualAid, inst);
       
   240 			}
       
   241 
       
   242 			inst.repaint();
       
   243 			tinyMCE.triggerNodeChange();
       
   244 		}
       
   245 	}
       
   246 };
       
   247 
       
   248 tinyMCE.addPlugin("layer", TinyMCE_LayerPlugin);