public/javascripts/tiny_mce/plugins/devkit/jscripts/devkit.js

   1 var devkit = parent.tinyMCE.plugins['devkit'], logEnabled = true, flip = false, book = null;
   2
   3 function init() {
   4         var log, i, f = document.forms[0];
   5
   6         devkit._winLoaded = true;
   7
   8         log = tinyMCE.log;
   9
  10         for (i=0; i<log.length; i++)
  11                 debug(log[i]);
  12
  13         f.logfilter.value = devkit._logFilter;
  14 }
  15
  16 function changeFilter(f) {
  17         devkit._logFilter = f;
  18 }
  19
  20 function toggleLog(s) {
  21         logEnabled = s;
  22 }
  23
  24 function toggleFlip() {
  25         document.getElementById('flipbtn').src = flip ? 'images/flip_down.gif' : 'images/flip_up.gif';
  26
  27         if (flip)
  28                 parent.document.getElementById('devkit').className = 'devkitup';
  29         else
  30                 parent.document.getElementById('devkit').className = 'devkitdown';
  31
  32         flip = !flip;
  33 }
  34
  35 function debug(s) {
  36         var d, l, n;
  37
  38         if (!logEnabled || !new RegExp(devkit._logFilter, 'gi').test(s))
  39                 return;
  40
  41         d = document;
  42         l = d.getElementById('log');
  43         n = d.createElement('span');
  44
  45         n.innerHTML = tinyMCE.xmlEncode(s);
  46
  47         l.appendChild(n);
  48         l.scrollTop = l.scrollHeight;
  49 }
  50
  51 function renderInfo() {
  52         var se = document.getElementById('info'), n, sn, inst, h = '', sel, rng, instCount = 0, rc;
  53
  54         h += '<h2>Browser info:</h2>';
  55
  56         h += '<table border="0" cellpadding="0" cellspacing="0" class="data">';
  57         h += addRenderInfo('navigator.userAgent', navigator.userAgent);
  58         h += addRenderInfo('navigator.appName', navigator.appName);
  59         h += addRenderInfo('navigator.platform', navigator.platform);
  60         h += addRenderInfo('navigator.language', navigator.language, 'bspec');
  61         h += addRenderInfo('navigator.browserLanguage', navigator.browserLanguage, 'bspec');
  62         h += addRenderInfo('navigator.systemLanguage', navigator.systemLanguage, 'bspec');
  63         h += addRenderInfo('navigator.userLanguage', navigator.userLanguage, 'bspec');
  64         h += addRenderInfo('opera.buildNumber("inconspicuous")', typeof(opera) != 'undefined' && opera.buildNumber ? opera.buildNumber('inconspicuous') : null, 'bspec');
  65         h += addRenderInfo('window.innerWidth', parent.window.innerWidth, 'bspec');
  66         h += addRenderInfo('window.innerHeight', parent.window.innerHeight, 'bspec');
  67         h += addRenderInfo('document.body.offsetWidth', parent.document.body.offsetWidth);
  68         h += addRenderInfo('document.body.offsetHeight', parent.document.body.offsetHeight);
  69         h += addRenderInfo('screen.width', screen.width);
  70         h += addRenderInfo('screen.height', screen.height);
  71         h += addRenderInfo('screen.availWidth', screen.availWidth);
  72         h += addRenderInfo('screen.availHeight', screen.availHeight);
  73         h += addRenderInfo('screen.colorDepth', screen.colorDepth);
  74         h += addRenderInfo('screen.pixelDepth', screen.pixelDepth, 'bspec');
  75         h += addRenderInfo('document.contentType', document.contentType, 'bspec');
  76         h += '</table>';
  77
  78         h += '<h2>TinyMCE_Engine info:</h2>';
  79
  80         h += '<table border="0" cellpadding="0" cellspacing="0" class="data">';
  81         h += addRenderInfo('baseURL', tinyMCE.baseURL);
  82         h += addRenderInfo('selectedInstance.editorId', tinyMCE.selectedInstance ? tinyMCE.selectedInstance.editorId : null);
  83         h += addRenderInfo('selectedElement.nodeName', tinyMCE.selectedElement ? tinyMCE.selectedElement.nodeName : null, 'dep');
  84         h += addRenderInfo('loadedFiles',tinyMCE.loadedFiles.join(','));
  85         h += addRenderInfo('isMSIE', tinyMCE.isMSIE);
  86         h += addRenderInfo('isMSIE5', tinyMCE.isMSIE5);
  87         h += addRenderInfo('isMSIE5_0', tinyMCE.isMSIE5_0);
  88         h += addRenderInfo('isMSIE7', tinyMCE.isMSIE7);
  89         h += addRenderInfo('isGecko', tinyMCE.isGecko);
  90         h += addRenderInfo('isSafari', tinyMCE.isSafari);
  91         h += addRenderInfo('isOpera', tinyMCE.isOpera);
  92         h += addRenderInfo('isMac', tinyMCE.isMac);
  93         h += addRenderInfo('isNS7', tinyMCE.isNS7);
  94         h += addRenderInfo('isNS71', tinyMCE.isNS71);
  95         h += addRenderInfo('idCounter', tinyMCE.idCounter);
  96         h += addRenderInfo('currentConfig', tinyMCE.currentConfig);
  97         h += addRenderInfo('majorVersion', tinyMCE.majorVersion);
  98         h += addRenderInfo('minorVersion', tinyMCE.minorVersion);
  99         h += addRenderInfo('releaseDate', tinyMCE.releaseDate);
 100         h += addRenderInfo('documentBasePath', tinyMCE.documentBasePath);
 101         h += addRenderInfo('documentURL', tinyMCE.documentURL);
 102         h += '</table>';
 103
 104         for (n in tinyMCE.instances) {
 105                 inst = tinyMCE.instances[n];
 106
 107                 if (!tinyMCE.isInstance(inst))
 108                         continue;
 109
 110                 sel = inst.selection.getSel();
 111                 rng = inst.selection.getRng();
 112
 113                 h += '<h2>TinyMCE_Control(' + (instCount++) + ') id: ' + inst.editorId + '</h2>';
 114                 h += '<table border="0" cellpadding="0" cellspacing="0" class="data">';
 115
 116                 h += addRenderInfo('editorId', inst.editorId);
 117                 h += addRenderInfo('visualAid', inst.visualAid);
 118                 h += addRenderInfo('foreColor', inst.foreColor);
 119                 h += addRenderInfo('backColor', inst.backColor);
 120                 h += addRenderInfo('formTargetElementId', inst.formTargetElementId);
 121                 h += addRenderInfo('linkElement', inst.linkElement ? inst.linkElement.nodeName : null, 'dep');
 122                 h += addRenderInfo('imgElement', inst.imgElement ? inst.imgElement.nodeName : null, 'dep');
 123                 h += addRenderInfo('selectedNode', inst.selectedNode ? inst.selectedNode.nodeName : null, 'dep');
 124                 h += addRenderInfo('targetElement', inst.targetElement ? inst.targetElement.nodeName : null);
 125                 h += addRenderInfo('getBody().nodeName', inst.getBody() ? inst.getBody().nodeName : null);
 126                 h += addRenderInfo('getBody().getAttribute("id")', inst.getBody() ? inst.getBody().getAttribute("id") : null);
 127                 h += addRenderInfo('getDoc().location', inst.getDoc() ? inst.getDoc().location : null);
 128                 h += addRenderInfo('startContent', inst.startContent);
 129                 h += addRenderInfo('isHidden()', inst.isHidden());
 130                 h += addRenderInfo('isDirty()', inst.isDirty());
 131                 h += addRenderInfo('undoRedo.undoLevels.length', inst.undoRedo.undoLevels.length);
 132                 h += addRenderInfo('undoRedo.undoIndex', inst.undoRedo.undoIndex);
 133                 h += addRenderInfo('selection.getSelectedHTML()', inst.selection.getSelectedHTML());
 134                 h += addRenderInfo('selection.getSelectedText()', inst.selection.getSelectedText());
 135                 h += addRenderInfo('selection.getFocusElement().nodeName', inst.selection.getFocusElement().nodeName);
 136                 h += addRenderInfo('selection.getFocusElement().outerHTML', tinyMCE.getOuterHTML(inst.selection.getFocusElement()));
 137
 138                 if ((tinyMCE.isGecko || tinyMCE.isOpera) && sel && rng) {
 139                         h += addRenderInfo('selection.getSel().anchorNode.nodeName', sel.anchorNode ? sel.anchorNode.nodeName : null, 'bspec');
 140                         h += addRenderInfo('selection.getSel().anchorOffset', sel.anchorOffset, 'bspec');
 141                         h += addRenderInfo('selection.getSel().focusNode.nodeName', sel.focusNode ? sel.focusNode.nodeName : null, 'bspec');
 142                         h += addRenderInfo('selection.getSel().focusOffset', sel.focusOffset, 'bspec');
 143                         h += addRenderInfo('selection.getRng().startContainer.nodeName', rng.startContainer ? rng.startContainer.nodeName : null, 'bspec');
 144                         h += addRenderInfo('selection.getRng().startOffset', rng.startOffset, 'bspec');
 145                         h += addRenderInfo('selection.getRng().endContainer.nodeName', rng.endContainer ? rng.endContainer.nodeName : null, 'bspec');
 146                         h += addRenderInfo('selection.getRng().endOffset', rng.endOffset, 'bspec');
 147                 }
 148
 149                 if (typeof(rng.item) != 'undefined' || typeof(rng.htmlText) != 'undefined') {
 150                         if (!rng.item) {
 151                                 h += addRenderInfo('selection.getSel().type', sel.type, 'bspec');
 152                                 h += addRenderInfo('selection.getRng().htmlText', rng.htmlText, 'bspec');
 153                                 h += addRenderInfo('selection.getRng().text', rng.text, 'bspec');
 154                         } else
 155                                 h += addRenderInfo('selection.getRng().item(0).nodeName', rng.item(0).nodeName, 'bspec');
 156                 }
 157
 158                 h += '</table>';
 159         }
 160
 161         h += '<p>Fields marked in <strong class="bspec">gray</strong> is not cross browser and should be used with care.</p>';
 162         h += '<p>Fields marked <strong class="dep">red</strong> are marked deprecated and will be removed in the future.</p><br />';
 163
 164         se.innerHTML = h;
 165 }
 166
 167 function addRenderInfo(n, v, c) {
 168         return '<tr><td' + (c ? ' class="' + c + '"' : '')+ '>' + n + '</td><td><input type="text" value="' + tinyMCE.xmlEncode(v != null ? ('' + v).replace(/[\r\n]/g, '') : 'null') + '" /></td></tr>';
 169 }
 170
 171 function renderSettings() {
 172         var se = document.getElementById('settings'), n, sn, inst, h = '', v;
 173
 174         for (n in tinyMCE.instances) {
 175                 inst = tinyMCE.instances[n];
 176
 177                 if (!tinyMCE.isInstance(inst))
 178                         continue;
 179
 180                 h += '<h2>Instance id: ' + inst.editorId + '</h2>';
 181                 h += '<table border="0" cellpadding="0" cellspacing="0" class="data">';
 182
 183                 for (sn in inst.settings) {
 184                         v = inst.settings[sn];
 185
 186                         h += '<tr><td class="col1">' + tinyMCE.xmlEncode(sn) + '</td><td><input type="text" value="' + tinyMCE.xmlEncode(v) + '" /></td></tr>';
 187                 }
 188
 189                 h += '</table>';
 190         }
 191
 192         se.innerHTML = h;
 193 }
 194
 195 function renderContent() {
 196         var se = document.getElementById('content'), n, inst, h = '';
 197
 198         for (n in tinyMCE.instances) {
 199                 inst = tinyMCE.instances[n];
 200
 201                 if (!tinyMCE.isInstance(inst))
 202                         continue;
 203
 204                 h += '<h2>Instance id: ' + inst.editorId + '</h2>';
 205
 206                 h += '<h3>Start content - inst.startContent:</h3>';
 207                 h += '<div>' + tinyMCE.xmlEncode(inst.startContent) + '</div>';
 208
 209                 h += '<h3>Raw content - inst.getBody().innerHTML or inst.getHTML(true):</h3>';
 210                 h += '<div>' + tinyMCE.xmlEncode(inst.getHTML(true)) + '</div>';
 211
 212                 h += '<h3>Cleaned content - inst.getHTML():</h3>';
 213                 h += '<div>' + tinyMCE.xmlEncode(inst.getHTML()) + '</div>';
 214
 215                 if (inst.serializedHTML) {
 216                         h += '<h3>Serialized HTML content - inst.serializedHTML:</h3>';
 217                         h += '<div>' + tinyMCE.xmlEncode(inst.serializedHTML) + '</div>';
 218                 }
 219         }
 220
 221         se.innerHTML = h;
 222 }
 223
 224 function renderCommandStates() {
 225         var se = document.getElementById('command_states'), n, inst, h = '', v, ex;
 226         var cmds = new Array('2D-Position','AbsolutePosition','BackColor','BlockDirLTR','BlockDirRTL','Bold','BrowseMode','Copy','CreateBookmark','CreateLink','Cut','Delete','DirLTR','DirRTL','EditMode','enableInlineTableEditing','enableObjectResizing','FontName','FontSize','ForeColor','FormatBlock','Indent','InsertButton','InsertFieldset','InsertHorizontalRule','InsertIFrame','InsertImage','InsertInputButton','InsertInputCheckbox','InsertInputFileUpload','InsertInputHidden','InsertInputImage','InsertInputPassword','InsertInputRadio','InsertInputReset','InsertInputSubmit','InsertInputText','InsertMarquee','InsertOrderedList','InsertParagraph','InsertSelectDropdown','InsertSelectListbox','InsertTextArea','InsertUnorderedList','Italic','JustifyCenter','JustifyFull','JustifyLeft','JustifyNone','JustifyRight','LiveResize','MultipleSelection','Open','Outdent','OverWrite','Paste','PlayImage','Redo','Refresh','RemoveFormat','SaveAs','SelectAll','SizeToControl','SizeToControlHeight','SizeToControlWidth','Stop','StopImage','StrikeThrough','styleWithCSS','Subscript','Superscript','UnBookmark','Underline','Undo','Unlink','Unselect'), i;
 227
 228         for (n in tinyMCE.instances) {
 229                 inst = tinyMCE.instances[n];
 230
 231                 if (!tinyMCE.isInstance(inst))
 232                         continue;
 233
 234                 h += '<h2>Instance id: ' + inst.editorId + '</h2>';
 235                 h += '<table border="0" cellpadding="0" cellspacing="0" class="data">';
 236
 237                 for (i=0; i<cmds.length; i++) {
 238                         v = null;
 239
 240                         try {
 241                                 v = tinyMCE.isGecko || inst.getDoc().queryCommandSupported(cmds[i]);
 242                                 v = v ? inst.queryCommandState(cmds[i]) : 'Not supported';
 243                         } catch (ex) {
 244                                 v = 'Not supported';
 245                         }
 246
 247                         h += '<tr><td><input type="text" value="' + tinyMCE.xmlEncode(cmds[i]) + '" /></td><td><input type="text" value="' + tinyMCE.xmlEncode(v) + '" /></td></tr>';
 248                 }
 249
 250                 h += '</table>';
 251         }
 252
 253         se.innerHTML = h;
 254 }
 255
 256 function renderUndoRedo() {
 257         var se = document.getElementById('undo_redo'), inst, n, h = '', i, le, id, d, ur;
 258         var f = document.forms[0];
 259
 260         if (tinyMCE.undoLevels) {
 261                 le = tinyMCE.undoLevels;
 262
 263                 h += '<h2>Global undo/redo</h2>';
 264                 h += '<table border="0" cellpadding="0" cellspacing="0" width="50%" class="data">';
 265                 h += '<tr><td>undoLevels.length</td><td>' + le.length + '</td></tr>';
 266                 h += '<tr><td>undoIndex</td><td>' + tinyMCE.undoIndex + '</td></tr>';
 267                 h += '</table>';
 268
 269                 for (i=0; i<le.length; i++)
 270                         h += '<h3>Level: ' + i + ', Instance: ' + (le[i] ? le[i].editorId : 'null') + '</h3>';
 271         }
 272
 273         for (n in tinyMCE.instances) {
 274                 inst = tinyMCE.instances[n];
 275
 276                 if (!tinyMCE.isInstance(inst))
 277                         continue;
 278
 279                 ur = inst.undoRedo;
 280                 le = ur.undoLevels;
 281
 282                 h += '<hr /><h2>Instance id: ' + inst.editorId + '</h2>';
 283                 h += '<table border="0" cellpadding="0" cellspacing="0" width="50%" class="data">';
 284                 h += '<tr><td>undoLevels.length</td><td>' + le.length + '</td></tr>';
 285                 h += '<tr><td>undoIndex</td><td>' + ur.undoIndex + '</td></tr>';
 286                 h += '<tr><td>typingUndoIndex</td><td>' + ur.typingUndoIndex + '</td></tr>';
 287                 h += '<tr><td>undoRedo</td><td>' + ur.undoRedo + '</td></tr>';
 288                 h += '</table>';
 289
 290                 for (i=0; i<le.length; i++) {
 291                         h += '<h3>Level: ' + i + (!le[i].bookmark ? "" : " [bookmark]") + '</h3>';
 292                         h += '<div class="undodata">' + tinyMCE.xmlEncode(le[i].content) + '</div>';
 293
 294                         if (i > 0 && f.undo_diff.checked) {
 295                                 d = diff_main(i > 0 ? le[i-1].content.replace(/[\r\n]+/g, '') : null, le[i].content.replace(/[\r\n]+/g, ''), false);
 296                                 diff_cleanup_semantic(d);
 297                                 h += '<h3>Diff ' + (i-1) + ',' + i + '</h3><div class="undodata">' + diff_prettyhtml(d) + '</div>';
 298                         }
 299                 }
 300         }
 301
 302         se.innerHTML = h;
 303 }
 304
 305 function clearLog() {
 306         document.getElementById('log').innerHTML = '';
 307         devkit._startTime = null;
 308 }
 309
 310 function cancelAction() {
 311         parent.document.getElementById('devkit').style.display = 'none';
 312 }
 313
 314 function toggleDebugEvents(s) {
 315         devkit._debugEvents(s);
 316 }
 317
 318 function storeSelection() {
 319         book = tinyMCE.selectedInstance.selection.getBookmark();
 320
 321         return false;
 322 }
 323
 324 function restoreSelection() {
 325         tinyMCE.selectedInstance.selection.moveToBookmark(book);
 326
 327         return false;
 328 }