Mercurial > hg > AnnotationManager
comparison WebContent/jscripts/tiny_mce/plugins/layer/editor_plugin_src.js @ 5:0be9d53a6967
editor for annotations
| author | dwinter |
|---|---|
| date | Tue, 13 Dec 2011 17:43:46 +0100 |
| parents | |
| children |
comparison
equal
deleted
inserted
replaced
| 4:c32080f364c6 | 5:0be9d53a6967 |
|---|---|
| 1 /** | |
| 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 function findParentLayer(node) { | |
| 13 do { | |
| 14 if (node.className && node.className.indexOf('mceItemLayer') != -1) { | |
| 15 return node; | |
| 16 } | |
| 17 } while (node = node.parentNode); | |
| 18 }; | |
| 19 | |
| 20 tinymce.create('tinymce.plugins.Layer', { | |
| 21 init : function(ed, url) { | |
| 22 var t = this; | |
| 23 | |
| 24 t.editor = ed; | |
| 25 | |
| 26 // Register commands | |
| 27 ed.addCommand('mceInsertLayer', t._insertLayer, t); | |
| 28 | |
| 29 ed.addCommand('mceMoveForward', function() { | |
| 30 t._move(1); | |
| 31 }); | |
| 32 | |
| 33 ed.addCommand('mceMoveBackward', function() { | |
| 34 t._move(-1); | |
| 35 }); | |
| 36 | |
| 37 ed.addCommand('mceMakeAbsolute', function() { | |
| 38 t._toggleAbsolute(); | |
| 39 }); | |
| 40 | |
| 41 // Register buttons | |
| 42 ed.addButton('moveforward', {title : 'layer.forward_desc', cmd : 'mceMoveForward'}); | |
| 43 ed.addButton('movebackward', {title : 'layer.backward_desc', cmd : 'mceMoveBackward'}); | |
| 44 ed.addButton('absolute', {title : 'layer.absolute_desc', cmd : 'mceMakeAbsolute'}); | |
| 45 ed.addButton('insertlayer', {title : 'layer.insertlayer_desc', cmd : 'mceInsertLayer'}); | |
| 46 | |
| 47 ed.onInit.add(function() { | |
| 48 var dom = ed.dom; | |
| 49 | |
| 50 if (tinymce.isIE) | |
| 51 ed.getDoc().execCommand('2D-Position', false, true); | |
| 52 }); | |
| 53 | |
| 54 // Remove serialized styles when selecting a layer since it might be changed by a drag operation | |
| 55 ed.onMouseUp.add(function(ed, e) { | |
| 56 var layer = findParentLayer(e.target); | |
| 57 | |
| 58 if (layer) { | |
| 59 ed.dom.setAttrib(layer, 'data-mce-style', ''); | |
| 60 } | |
| 61 }); | |
| 62 | |
| 63 // Fixes edit focus issues with layers on Gecko | |
| 64 // This will enable designMode while inside a layer and disable it when outside | |
| 65 ed.onMouseDown.add(function(ed, e) { | |
| 66 var node = e.target, doc = ed.getDoc(), parent; | |
| 67 | |
| 68 if (tinymce.isGecko) { | |
| 69 if (findParentLayer(node)) { | |
| 70 if (doc.designMode !== 'on') { | |
| 71 doc.designMode = 'on'; | |
| 72 | |
| 73 // Repaint caret | |
| 74 node = doc.body; | |
| 75 parent = node.parentNode; | |
| 76 parent.removeChild(node); | |
| 77 parent.appendChild(node); | |
| 78 } | |
| 79 } else if (doc.designMode == 'on') { | |
| 80 doc.designMode = 'off'; | |
| 81 } | |
| 82 } | |
| 83 }); | |
| 84 | |
| 85 ed.onNodeChange.add(t._nodeChange, t); | |
| 86 ed.onVisualAid.add(t._visualAid, t); | |
| 87 }, | |
| 88 | |
| 89 getInfo : function() { | |
| 90 return { | |
| 91 longname : 'Layer', | |
| 92 author : 'Moxiecode Systems AB', | |
| 93 authorurl : 'http://tinymce.moxiecode.com', | |
| 94 infourl : 'http://wiki.moxiecode.com/index.php/TinyMCE:Plugins/layer', | |
| 95 version : tinymce.majorVersion + "." + tinymce.minorVersion | |
| 96 }; | |
| 97 }, | |
| 98 | |
| 99 // Private methods | |
| 100 | |
| 101 _nodeChange : function(ed, cm, n) { | |
| 102 var le, p; | |
| 103 | |
| 104 le = this._getParentLayer(n); | |
| 105 p = ed.dom.getParent(n, 'DIV,P,IMG'); | |
| 106 | |
| 107 if (!p) { | |
| 108 cm.setDisabled('absolute', 1); | |
| 109 cm.setDisabled('moveforward', 1); | |
| 110 cm.setDisabled('movebackward', 1); | |
| 111 } else { | |
| 112 cm.setDisabled('absolute', 0); | |
| 113 cm.setDisabled('moveforward', !le); | |
| 114 cm.setDisabled('movebackward', !le); | |
| 115 cm.setActive('absolute', le && le.style.position.toLowerCase() == "absolute"); | |
| 116 } | |
| 117 }, | |
| 118 | |
| 119 // Private methods | |
| 120 | |
| 121 _visualAid : function(ed, e, s) { | |
| 122 var dom = ed.dom; | |
| 123 | |
| 124 tinymce.each(dom.select('div,p', e), function(e) { | |
| 125 if (/^(absolute|relative|fixed)$/i.test(e.style.position)) { | |
| 126 if (s) | |
| 127 dom.addClass(e, 'mceItemVisualAid'); | |
| 128 else | |
| 129 dom.removeClass(e, 'mceItemVisualAid'); | |
| 130 | |
| 131 dom.addClass(e, 'mceItemLayer'); | |
| 132 } | |
| 133 }); | |
| 134 }, | |
| 135 | |
| 136 _move : function(d) { | |
| 137 var ed = this.editor, i, z = [], le = this._getParentLayer(ed.selection.getNode()), ci = -1, fi = -1, nl; | |
| 138 | |
| 139 nl = []; | |
| 140 tinymce.walk(ed.getBody(), function(n) { | |
| 141 if (n.nodeType == 1 && /^(absolute|relative|static)$/i.test(n.style.position)) | |
| 142 nl.push(n); | |
| 143 }, 'childNodes'); | |
| 144 | |
| 145 // Find z-indexes | |
| 146 for (i=0; i<nl.length; i++) { | |
| 147 z[i] = nl[i].style.zIndex ? parseInt(nl[i].style.zIndex) : 0; | |
| 148 | |
| 149 if (ci < 0 && nl[i] == le) | |
| 150 ci = i; | |
| 151 } | |
| 152 | |
| 153 if (d < 0) { | |
| 154 // Move back | |
| 155 | |
| 156 // Try find a lower one | |
| 157 for (i=0; i<z.length; i++) { | |
| 158 if (z[i] < z[ci]) { | |
| 159 fi = i; | |
| 160 break; | |
| 161 } | |
| 162 } | |
| 163 | |
| 164 if (fi > -1) { | |
| 165 nl[ci].style.zIndex = z[fi]; | |
| 166 nl[fi].style.zIndex = z[ci]; | |
| 167 } else { | |
| 168 if (z[ci] > 0) | |
| 169 nl[ci].style.zIndex = z[ci] - 1; | |
| 170 } | |
| 171 } else { | |
| 172 // Move forward | |
| 173 | |
| 174 // Try find a higher one | |
| 175 for (i=0; i<z.length; i++) { | |
| 176 if (z[i] > z[ci]) { | |
| 177 fi = i; | |
| 178 break; | |
| 179 } | |
| 180 } | |
| 181 | |
| 182 if (fi > -1) { | |
| 183 nl[ci].style.zIndex = z[fi]; | |
| 184 nl[fi].style.zIndex = z[ci]; | |
| 185 } else | |
| 186 nl[ci].style.zIndex = z[ci] + 1; | |
| 187 } | |
| 188 | |
| 189 ed.execCommand('mceRepaint'); | |
| 190 }, | |
| 191 | |
| 192 _getParentLayer : function(n) { | |
| 193 return this.editor.dom.getParent(n, function(n) { | |
| 194 return n.nodeType == 1 && /^(absolute|relative|static)$/i.test(n.style.position); | |
| 195 }); | |
| 196 }, | |
| 197 | |
| 198 _insertLayer : function() { | |
| 199 var ed = this.editor, dom = ed.dom, p = dom.getPos(dom.getParent(ed.selection.getNode(), '*')), body = ed.getBody(); | |
| 200 | |
| 201 ed.dom.add(body, 'div', { | |
| 202 style : { | |
| 203 position : 'absolute', | |
| 204 left : p.x, | |
| 205 top : (p.y > 20 ? p.y : 20), | |
| 206 width : 100, | |
| 207 height : 100 | |
| 208 }, | |
| 209 'class' : 'mceItemVisualAid mceItemLayer' | |
| 210 }, ed.selection.getContent() || ed.getLang('layer.content')); | |
| 211 | |
| 212 // Workaround for IE where it messes up the JS engine if you insert a layer on IE 6,7 | |
| 213 if (tinymce.isIE) | |
| 214 dom.setHTML(body, body.innerHTML); | |
| 215 }, | |
| 216 | |
| 217 _toggleAbsolute : function() { | |
| 218 var ed = this.editor, le = this._getParentLayer(ed.selection.getNode()); | |
| 219 | |
| 220 if (!le) | |
| 221 le = ed.dom.getParent(ed.selection.getNode(), 'DIV,P,IMG'); | |
| 222 | |
| 223 if (le) { | |
| 224 if (le.style.position.toLowerCase() == "absolute") { | |
| 225 ed.dom.setStyles(le, { | |
| 226 position : '', | |
| 227 left : '', | |
| 228 top : '', | |
| 229 width : '', | |
| 230 height : '' | |
| 231 }); | |
| 232 | |
| 233 ed.dom.removeClass(le, 'mceItemVisualAid'); | |
| 234 ed.dom.removeClass(le, 'mceItemLayer'); | |
| 235 } else { | |
| 236 if (le.style.left == "") | |
| 237 le.style.left = 20 + 'px'; | |
| 238 | |
| 239 if (le.style.top == "") | |
| 240 le.style.top = 20 + 'px'; | |
| 241 | |
| 242 if (le.style.width == "") | |
| 243 le.style.width = le.width ? (le.width + 'px') : '100px'; | |
| 244 | |
| 245 if (le.style.height == "") | |
| 246 le.style.height = le.height ? (le.height + 'px') : '100px'; | |
| 247 | |
| 248 le.style.position = "absolute"; | |
| 249 | |
| 250 ed.dom.setAttrib(le, 'data-mce-style', ''); | |
| 251 ed.addVisual(ed.getBody()); | |
| 252 } | |
| 253 | |
| 254 ed.execCommand('mceRepaint'); | |
| 255 ed.nodeChanged(); | |
| 256 } | |
| 257 } | |
| 258 }); | |
| 259 | |
| 260 // Register plugin | |
| 261 tinymce.PluginManager.add('layer', tinymce.plugins.Layer); | |
| 262 })(); |
