[Sommaire] [Imprimer]

   1  /**
   2   * $Id: editor_plugin_src.js 162 2007-01-03 16:16:52Z spocke $
   3   *
   4   * @author Moxiecode
   5   * @copyright Copyright © 2004-2007, Moxiecode Systems AB, All rights reserved.
   6   */
   7  
   8  tinyMCE.importPluginLanguagePack('template');
   9  
  10  var TinyMCE_TemplatePlugin = {
  11      getInfo : function() {
  12          return {
  13              longname : 'Template plugin',
  14              author : 'Moxiecode Systems AB',
  15              authorurl : 'http://www.moxiecode.com',
  16              infourl : 'http://wiki.moxiecode.com/index.php/TinyMCE:Plugins/template',
  17              version : tinyMCE.majorVersion + "." + tinyMCE.minorVersion
  18          };
  19      },
  20  
  21      initInstance : function(inst) {
  22          var cdate, mdate, content, x = 0, key, value, rvals, ds = inst.getData('template');
  23  
  24          // ensure the required elements and sttributes are added
  25          //inst.cleanup.addRuleStr('*[' + TinyMCE_TemplatePlugin.TMPL_DATE_SRC_ATTR + '],div[title,tsrc]');
  26  
  27          //setup template content functions
  28          // creation date and modified date classes
  29          cdate = tinyMCE.getParam("template_cdate_classes", '').split(/\s+/);
  30          mdate = tinyMCE.getParam("template_mdate_classes", '').split(/\s+/);
  31  
  32          // classes that specify where selected content should go
  33          content = tinyMCE.getParam("template_selected_content_classes", '').split(/\s+/);
  34  
  35          for (x = 0; x < cdate.length; x++)
  36              TinyMCE_TemplatePlugin.functions[cdate[x]] = TinyMCE_TemplatePlugin.functions['cdate'];    
  37  
  38          for (x = 0; x < mdate.length; x++)
  39              TinyMCE_TemplatePlugin.functions[mdate[x]] = TinyMCE_TemplatePlugin.functions['mdate'];
  40  
  41          for (x = 0; x < content.length; x++)
  42              TinyMCE_TemplatePlugin.functions[content[x]] = TinyMCE_TemplatePlugin.functions['selectedContent'];
  43  
  44          // special template functions for replacing template content
  45          rvals = tinyMCE.getParam("template_replace_values", false);
  46          for (key in rvals) {
  47              value = rvals[key];
  48  
  49              if (typeof value == "function")
  50                  TinyMCE_TemplatePlugin.functions[key] = value;
  51              else
  52                  TinyMCE_TemplatePlugin.functions[key] = TinyMCE_TemplatePlugin.functions['generateReplacer'](value);
  53          }
  54  
  55          // Setup replace_items
  56          rvals = tinyMCE.getParam("template_replace_values", false);
  57          ds.replace_items = {};
  58  
  59          for (key in rvals)
  60              ds.replace_items[key] = rvals[key];
  61  
  62          inst.addShortcut('ctrl', 't', 'lang_template_desc', 'mceTemplate');
  63  
  64          // Setup data storage
  65          ds.currentAction = "insert";
  66          ds.currentTmplNode = null;
  67      },
  68  
  69      getControlHTML : function(cn) {
  70          switch (cn) {
  71              case "template":
  72                  return tinyMCE.getButtonHTML(cn, 'lang_template_desc', '{$pluginurl}/images/template.gif', 'mceTemplate', true);
  73          }
  74  
  75          return "";
  76      },
  77  
  78      execCommand : function(editor_id, element, command, user_interface, value) {
  79          var nodeArray, current, newTmpl, x, inst = tinyMCE.getInstanceById(editor_id), ds = inst.getData('template'), telm;
  80  
  81          switch (command) {
  82              case "mceTemplate":
  83                  if (user_interface) {
  84                      // called from toolbar button - show the popup
  85                      tinyMCE.openWindow({
  86                          file : '../../plugins/template/template.htm', // Relative to theme
  87                          width : tinyMCE.getParam('template_popup_width', 750),
  88                          height : tinyMCE.getParam('template_popup_height', 600)
  89                      }, {editor_id : editor_id, resizable : "yes", scrollbars : "no", pluginObj : TinyMCE_TemplatePlugin});
  90                  } else {
  91                      // internal command do the template stuff
  92  
  93                      // get the returned HTML string from the pop-up and appened it to a DIV element
  94                      telm = TinyMCE_TemplatePlugin._convertToNode(value.body);
  95  
  96                      // Find template body
  97                      nodeArray = tinyMCE.selectElements(telm, 'div', function(n) {
  98                          return tinyMCE.hasCSSClass(n, TinyMCE_TemplatePlugin.TMPL);
  99                      });
 100  
 101                      telm = nodeArray.length > 0 ? nodeArray[0] : null;
 102                      nodeArray = [];
 103  
 104                      if (ds.currentAction == "insert") {
 105                          //insert new template after applying all the template content functions
 106  
 107                          // Is it a template or snippet
 108                          if (telm) {
 109                              tinyMCE.execCommand('mceBeginUndoLevel');
 110                              ds.currentAction = "insert-new";
 111                              TinyMCE_TemplatePlugin._insertTemplate(editor_id, telm, value.title, value.tsrc, true);
 112                              ds.currentAction == "insert";
 113                              tinyMCE.execCommand('mceEndUndoLevel');
 114                              tinyMCE.execInstanceCommand(editor_id, 'mceCleanup', false);
 115                          } else
 116                              tinyMCE.execCommand('mceInsertContent', false, this._replaceValues(value.body));
 117                      } else {
 118                          // First collect the selected template in the editor
 119                          nodeArray = TinyMCE_TemplatePlugin._collectTemplateElements(ds.currentTmplNode);
 120                          current = [];
 121                          newTmpl = [];
 122                          tinyMCE.getNodeTree(telm, newTmpl);
 123  
 124                          for (x=0; x<nodeArray.length; x++)
 125                              tinyMCE.getNodeTree(nodeArray[x], current);
 126  
 127                          /** 
 128                           * inner function used in the loop below.
 129                           * compares the supplied HTML element to the new template to:
 130                           * - find a match with the new template and copy the element's content over
 131                           * - find no match and indicate content will be lost
 132                           */
 133                          var _test = function(elm) {
 134                              var replaced = true;
 135  
 136                              if (elm.className) {
 137                                  var names = elm.className.split(/\s+/), c, n;
 138  
 139                                  for (c = 0; c<names.length; c++) {
 140                                      if (names[c].match(/^mce/i))
 141                                          continue; // ignore all internal class names
 142  
 143                                      for (n=0; n<newTmpl.length; n++){
 144                                          replaced = false;
 145  
 146                                          if (newTmpl[n].className && newTmpl[n].className.match(new RegExp(names[c], "gi"))) {
 147                                              newTmpl[n].innerHTML = elm.innerHTML;
 148                                              //if(tinyMCE.getAttrib(elm,TinyMCE_TemplatePlugin.TMPL_DATE_SRC_ATTR,"") != "") {
 149                                              //    tinyMCE.setAttrib(newTmpl[n], TinyMCE_TemplatePlugin.TMPL_DATE_SRC_ATTR, tinyMCE.getAttrib(elm,TinyMCE_TemplatePlugin.TMPL_DATE_SRC_ATTR)); 
 150                                              //}
 151                                              replaced = true;
 152                                              break;
 153                                          }
 154  
 155                                      }
 156                                  }
 157                              }
 158      
 159                              return replaced;
 160                          };
 161  
 162                          // comparison loop - first mis-match alerts user for confirmation.
 163                          var cont = true;
 164                          var asked = false;
 165  
 166                          for (x = 0; x < current.length; x++) {
 167                              if(!_test(current[x])) {
 168                                  cont = (asked || confirm("The new template has less elements than the currently selected content.\nIf you proceed you will loose content.\nAre you sure you want to proceed?", "Proceed?"));
 169                                  asked = true;
 170  
 171                                  if (!cont)
 172                                      break;
 173                              }
 174                          };
 175  
 176                          // apply replacement if allowed to
 177                          if (cont) {
 178                              tinyMCE.execCommand('mceBeginUndoLevel');
 179                              TinyMCE_TemplatePlugin._replaceTemplateContent(current[0], editor_id, telm, value.title, value.tsrc);
 180                              tinyMCE.execCommand('mceEndUndoLevel');
 181                              tinyMCE.execInstanceCommand(editor_id, 'mceCleanup', false);
 182                          }
 183                      }
 184  
 185                      tinyMCE.triggerNodeChange(true);
 186                  }
 187  
 188                  return true;
 189          }
 190  
 191          return false;
 192      },
 193  
 194      handleNodeChange : function(editor_id, node, undo_index, undo_levels, visual_aid, any_selection) {
 195          var inst = tinyMCE.getInstanceById(editor_id), ds = inst.getData('template');
 196  
 197          if (tinyMCE.hasCSSClass(node, TinyMCE_TemplatePlugin.TMPL_ELEMENT) || tinyMCE.hasCSSClass(node.parentNode, TinyMCE_TemplatePlugin.TMPL_ELEMENT)) {
 198              tinyMCE.switchClass(editor_id + '_template', 'mceButtonSelected');
 199              ds.currentAction = "update";
 200              ds.currentTmplNode = node;
 201  
 202              return true;
 203          }
 204  
 205          ds.currentAction = "insert";
 206          ds.currentTmplNode = null;
 207          tinyMCE.switchClass(editor_id + '_template', 'mceButtonNormal');
 208  
 209          return false;
 210      },
 211  
 212      cleanup : function(type, content, inst) {
 213          var nodes = [];
 214  
 215          switch (type) {
 216              case "get_from_editor":
 217                  // replace the opening wrapper div tag with a HTML comment
 218                  content = content.replace(
 219                      new RegExp('<div class="' + TinyMCE_TemplatePlugin.TMPL + '">', 'gi'),
 220                      '<!-- ' + TinyMCE_TemplatePlugin.TMPL_BEGINS + ' -->'
 221                  );
 222  
 223                  // delete any empty template wrappers
 224                  content = content.replace(
 225                      new RegExp('<div class="' + TinyMCE_TemplatePlugin.TMPL + '">(\s|&nbsp;|&#160;)?(<!-- ' + TinyMCE_TemplatePlugin.TMPL_ENDS + ' -->|\s)?</div>', 'gi'),
 226                      ''
 227                  );
 228  
 229                  // replace the closing wrapper tag
 230                  content = content.replace(
 231                      new RegExp('<!-- ' + TinyMCE_TemplatePlugin.TMPL_ENDS + ' --></div>', 'gi'),
 232                      '<!-- ' + TinyMCE_TemplatePlugin.TMPL_ENDS + ' -->'
 233                  );
 234  
 235                  break;
 236  
 237              case "insert_to_editor":
 238                  // replace HTML comment with DIV wrapper
 239                  content = content.replace(
 240                      new RegExp('<!-- ' + TinyMCE_TemplatePlugin.TMPL_BEGINS + ' -->', 'gi'),
 241                      '<div class="' + TinyMCE_TemplatePlugin.TMPL + '">'
 242                  );
 243  
 244                  content = content.replace(
 245                      new RegExp('<!-- ' + TinyMCE_TemplatePlugin.TMPL_ENDS + ' -->', 'gi'),
 246                      '<!-- ' + TinyMCE_TemplatePlugin.TMPL_ENDS + ' --></div>'
 247                  );
 248  
 249                  break;
 250  
 251              case "get_from_editor_dom":
 252                  // apply template content replacement functions
 253                  nodes = tinyMCE.selectNodes(content, function(n) {
 254                          return tinyMCE.hasCSSClass(n, TinyMCE_TemplatePlugin.TMPL_ELEMENT);
 255                      }
 256                  );
 257  
 258                  TinyMCE_TemplatePlugin._applyFunctions(nodes, type);
 259  
 260                  break;
 261  
 262              case "insert_to_editor_dom":
 263                  // apply template content replacement functions
 264                  nodes = tinyMCE.selectNodes(content, function(n) {
 265                          return tinyMCE.hasCSSClass(n, TinyMCE_TemplatePlugin.TMPL_ELEMENT);
 266                      }
 267                  );
 268  
 269                  TinyMCE_TemplatePlugin._applyFunctions(nodes, type);
 270  
 271                  break;
 272          }
 273  
 274          return content;
 275      },
 276  
 277      // Private plugin internal methods
 278  
 279      /**
 280       * Creates a HTML DIV element and sets the innerHTML to equal the temlate innerHTML so that the template can be manipulated as DOM nodes.
 281       *
 282       * @param {string} Template innerHTML
 283       * @return a HTML Element
 284       * @type HTMLElement
 285       */
 286      _convertToNode : function(html) {
 287          var elm = document.createElement('div');
 288  
 289          elm.innerHTML = html;
 290  
 291          return elm;
 292      },
 293  
 294      /**
 295       * pass an array of template html elements and they will have the template class name added and any template functions applied
 296       *
 297       * @param {array} template HTML elements
 298       * @return array of template HTML elements
 299       * @type array
 300       */
 301      _prepareTemplateContent : function(elms) {
 302          var x, n, nodes = [];
 303  
 304          if (!elms)
 305              return {};
 306  
 307          if (!elms.length)
 308              elms = [elms];
 309  
 310          for (x = 0; x<elms.length; x++)
 311              tinyMCE.getNodeTree(elms[x], nodes, 1);
 312  
 313          for (n = 0; n<nodes.length; n++) {
 314              tinyMCE.addCSSClass(nodes[n], TinyMCE_TemplatePlugin.TMPL_ELEMENT);
 315              TinyMCE_TemplatePlugin._applyFunctions(nodes[n], TinyMCE_TemplatePlugin.TMPL_TEMPLATE_EVENT);
 316          }
 317  
 318          return elms;
 319      },
 320  
 321      _replaceValues : function(s) {
 322          var t = this, ds = tinyMCE.selectedInstance.getData('template');
 323  
 324          return s.replace(/\{\$([^\}]+)\}/g, function(a, b) {
 325              var it = ds.replace_items[b];
 326  
 327              if (it) {
 328                  // Only supports text for now
 329                  if (typeof(it) != 'function')
 330                      return it;
 331              }
 332  
 333              return b;
 334          });
 335      },
 336  
 337      /**
 338       * Applies any special functions to the template elements
 339       *
 340       * @param {array} template HTML elements
 341       * @return array of template HTML elements
 342       * @type array
 343       */
 344      _applyFunctions : function(elms, editor_event) {
 345          var x, elm, names, c, f;
 346  
 347          if (!elms)
 348              return {};
 349  
 350          if (!elms.length)
 351              elms = [elms];
 352  
 353          for(x = 0; x < elms.length; x++) {
 354              elm = elms[x];
 355  
 356              if (elm.className){
 357                  names = elm.className.split(/\s+/);
 358  
 359                  for (c = 0; c < names.length; c++){
 360                      if (names[c] == TinyMCE_TemplatePlugin.TMPL_ELEMENT)
 361                          continue;
 362  
 363                      f = (TinyMCE_TemplatePlugin.functions[names[c]] ? TinyMCE_TemplatePlugin.functions[names[c]] : TinyMCE_TemplatePlugin.functions['blank']);
 364                      f(elm, editor_event);
 365                  }
 366              }
 367          }
 368  
 369          return elms;
 370      },
 371  
 372      /**
 373       * Given one node reference this function will collect all the nodes of the template to which it belongs.
 374       * It does this by finding the parent template wrapper DIV and returning all child nodes.
 375       *
 376       * @param {HTMLElement} a HTMLElement which is part of a template
 377       * @return array of template HTML elements
 378       * @type array
 379       */
 380      _collectTemplateElements : function(node) {
 381          var nodeArray = [], p;
 382  
 383          p = tinyMCE.getParentElement(node, 'DIV', function(n) {
 384              return tinyMCE.hasCSSClass(n, TinyMCE_TemplatePlugin.TMPL);
 385          });
 386  
 387          if (p)
 388              tinyMCE.getNodeTree(p, nodeArray);
 389  
 390          return nodeArray;
 391      },
 392  
 393      /**
 394       * Simply calls TinyMCE_TemplatePlugin._deleteTemplateContent and then TinyMCE_TemplatePlugin._insertTemplate
 395       *
 396       * @param {HTMLElement} currently selected template node in editor
 397       * @param {string} id of editor instance
 398       * @param {HTMLElement} template contents as a HTMLElement (the parent DIV wrapper)
 399       * @param {string} title of template (unused as yet)
 400       * @param {string} source URI of the template file (unused as yet)
 401       * @return array of template HTML elements
 402       * @type array
 403       */
 404      _replaceTemplateContent : function(currentNode, editor_id, newTemplate, title, tsrc) {
 405          TinyMCE_TemplatePlugin._deleteTemplateContent(currentNode);
 406          TinyMCE_TemplatePlugin._insertTemplate(editor_id, newTemplate, title, tsrc, false);
 407      },
 408  
 409      /**
 410       * Deletes a template from the editor content
 411       * Finds the parent DIV wrapper and deletes it and all children
 412       * @param {HTMLElement} currently selected template node in editor
 413       */
 414      _deleteTemplateContent : function(node) {
 415          var p = tinyMCE.getParentElement(node, 'DIV', function(n) {
 416              return tinyMCE.hasCSSClass(n, TinyMCE_TemplatePlugin.TMPL);
 417          });
 418  
 419          if (p)
 420              p.parentNode.removeChild(p, true);
 421      },
 422  
 423      /**
 424       *  Inserts a template into the specified editor
 425       *
 426       * @param {string} id of editor instance
 427       * @param {HTMLElement} template contents as a HTMLElement (the parent DIV wrapper)
 428       * @param {string} title of template (unused as yet)
 429       * @param {string} source URI of the template file (unused as yet)
 430       */
 431      _insertTemplate : function(editor_id, elm, title, tsrc, incComments) {
 432          var html;
 433  
 434          TinyMCE_TemplatePlugin._prepareTemplateContent(elm);
 435  
 436          html = '<div class="' + TinyMCE_TemplatePlugin.TMPL + '">';
 437          html += elm.innerHTML;
 438          html += '<!-- ' + TinyMCE_TemplatePlugin.TMPL_ENDS + ' --></div>';
 439  
 440          tinyMCE.execInstanceCommand(editor_id, 'mceInsertContent', false, html);
 441      },
 442  
 443      /**
 444       * template functions - functions for modifying template content
 445       */
 446      functions : { 
 447          blank : function(elm, editor_event) {},
 448  
 449          cdate : function(elm, editor_event) {
 450              var d, dsrc;
 451  
 452              if (editor_event != TinyMCE_TemplatePlugin.TMPL_TEMPLATE_EVENT)
 453                  return;
 454  
 455              d = new Date();
 456              // find out if the creation date was previously stored
 457              dsrc = elm.innerHTML.match(new RegExp("<!-- " + TinyMCE_TemplatePlugin.TMPL_DATE_SRC_ATTR + ":(.*)  -->", "gi"));
 458  
 459              if (dsrc)
 460                  d = new Date(RegExp.$1);
 461  
 462              elm.innerHTML = TinyMCE_TemplatePlugin._getDateTime(d, tinyMCE.getParam("template_cdate_format", tinyMCE.getLang("lang_template_def_date_format")));
 463              //now we have to store the date value in a format easily read again, in case a future template change changes the date format...
 464              elm.innerHTML += "<!-- " + TinyMCE_TemplatePlugin.TMPL_DATE_SRC_ATTR + ":" + d.toUTCString() + "  -->";
 465          },
 466  
 467          mdate : function(elm, editor_event) {
 468              var d = new Date();
 469              elm.innerHTML = TinyMCE_TemplatePlugin._getDateTime(d, tinyMCE.getParam("template_mdate_format", tinyMCE.getLang("lang_template_def_date_format")));
 470          },
 471  
 472          /**
 473           * This will insert the currently selected editor content into the template element.
 474           * It only does this if the template inserted is a new one and if the element does not have the special class.
 475           * The special class name prevents this from happening more than once.
 476           */
 477          selectedContent : function(elm, editor_event) {
 478              var ds = tinyMCE.selectedInstance.getData('template');
 479      
 480              if (editor_event != TinyMCE_TemplatePlugin.TMPL_TEMPLATE_EVENT)
 481                  return;
 482  
 483              if (ds.currentAction == "insert-new" && !tinyMCE.hasCSSClass(elm, TinyMCE_TemplatePlugin.TMPL_SEL_HTML_DONE)) {
 484                  elm.innerHTML = tinyMCE.selectedInstance.selection.getSelectedHTML();
 485                  tinyMCE.addCSSClass(elm, TinyMCE_TemplatePlugin.TMPL_SEL_HTML_DONE);
 486              }
 487          },
 488  
 489          /**
 490           * When the plugin is initialised this generates the functions that insert configured strings into template elements.
 491           */
 492          generateReplacer : function(s) {
 493              return function(elm, editor_event) {elm.innerHTML = "" + s;};
 494          }
 495      },
 496  
 497      /**
 498       * formats a date according to the format string - straight from the 'insert date/time' plugin
 499       *
 500       * @param {Date} date object
 501       * @param {string} format string
 502       * @return formatted date
 503       * @type string
 504       */
 505      _getDateTime : function(d,fmt) {
 506              if (!fmt)
 507                  return "";
 508  
 509  			function addZeros(value, len) {
 510                  var i;
 511  
 512                  value = "" + value;
 513  
 514                  if (value.length < len) {
 515                      for (i=0; i<(len-value.length); i++)
 516                          value = "0" + value;
 517                  }
 518  
 519                  return value;
 520              }
 521  
 522              fmt = fmt.replace("%D", "%m/%d/%y");
 523              fmt = fmt.replace("%r", "%I:%M:%S %p");
 524              fmt = fmt.replace("%Y", "" + d.getFullYear());
 525              fmt = fmt.replace("%y", "" + d.getYear());
 526              fmt = fmt.replace("%m", addZeros(d.getMonth()+1, 2));
 527              fmt = fmt.replace("%d", addZeros(d.getDate(), 2));
 528              fmt = fmt.replace("%H", "" + addZeros(d.getHours(), 2));
 529              fmt = fmt.replace("%M", "" + addZeros(d.getMinutes(), 2));
 530              fmt = fmt.replace("%S", "" + addZeros(d.getSeconds(), 2));
 531              fmt = fmt.replace("%I", "" + ((d.getHours() + 11) % 12 + 1));
 532              fmt = fmt.replace("%p", "" + (d.getHours() < 12 ? "AM" : "PM"));
 533              fmt = fmt.replace("%B", "" + tinyMCE.getLang("lang_template_months_long")[d.getMonth()]);
 534              fmt = fmt.replace("%b", "" + tinyMCE.getLang("lang_template_months_short")[d.getMonth()]);
 535              fmt = fmt.replace("%A", "" + tinyMCE.getLang("lang_template_day_long")[d.getDay()]);
 536              fmt = fmt.replace("%a", "" + tinyMCE.getLang("lang_template_day_short")[d.getDay()]);
 537              fmt = fmt.replace("%%", "%");
 538  
 539              return fmt;
 540      },
 541  
 542      TMPL_ELEMENT : 'mceTmplElm',
 543      TMPL : 'mceTmpl',
 544      TMPL_BEGINS : 'mceTmplBegins',
 545      TMPL_SEL_HTML_DONE : 'mceSelHTMLDone',
 546      TMPL_ENDS : 'mceTmplEnds',
 547      TMPL_DATE_SRC_ATTR : 'mcetmpldtesrc',
 548      TMPL_TEMPLATE_EVENT : 'prepare_template'
 549  };
 550  
 551  tinyMCE.addPlugin("template", TinyMCE_TemplatePlugin);