[Summary view] [Print] [Text view]

   1  // new edit toolbar used with permission
   2  // by Alex King
   3  // http://www.alexking.org/
   4  
   5  var edButtons = new Array(), edLinks = new Array(), edOpenTags = new Array(), now = new Date(), datetime;
   6  
   7  function edButton(id, display, tagStart, tagEnd, access, open) {
   8      this.id = id;                // used to name the toolbar button
   9      this.display = display;        // label on button
  10      this.tagStart = tagStart;     // open tag
  11      this.tagEnd = tagEnd;        // close tag
  12      this.access = access;        // access key
  13      this.open = open;            // set to -1 if tag does not need to be closed
  14  }
  15  
  16  function zeroise(number, threshold) {
  17      // FIXME: or we could use an implementation of printf in js here
  18      var str = number.toString();
  19      if (number < 0) { str = str.substr(1, str.length) }
  20      while (str.length < threshold) { str = "0" + str }
  21      if (number < 0) { str = '-' + str }
  22      return str;
  23  }
  24  
  25  datetime = now.getUTCFullYear() + '-' +
  26  zeroise(now.getUTCMonth() + 1, 2) + '-' +
  27  zeroise(now.getUTCDate(), 2) + 'T' +
  28  zeroise(now.getUTCHours(), 2) + ':' +
  29  zeroise(now.getUTCMinutes(), 2) + ':' +
  30  zeroise(now.getUTCSeconds() ,2) +
  31  '+00:00';
  32  
  33  edButtons[edButtons.length] =
  34  new edButton('ed_strong'
  35  ,'b'
  36  ,'<strong>'
  37  ,'</strong>'
  38  ,'b'
  39  );
  40  
  41  edButtons[edButtons.length] =
  42  new edButton('ed_em'
  43  ,'i'
  44  ,'<em>'
  45  ,'</em>'
  46  ,'i'
  47  );
  48  
  49  edButtons[edButtons.length] =
  50  new edButton('ed_link'
  51  ,'link'
  52  ,''
  53  ,'</a>'
  54  ,'a'
  55  ); // special case
  56  
  57  edButtons[edButtons.length] =
  58  new edButton('ed_block'
  59  ,'b-quote'
  60  ,'\n\n<blockquote>'
  61  ,'</blockquote>\n\n'
  62  ,'q'
  63  );
  64  
  65  
  66  edButtons[edButtons.length] =
  67  new edButton('ed_del'
  68  ,'del'
  69  ,'<del datetime="' + datetime + '">'
  70  ,'</del>'
  71  ,'d'
  72  );
  73  
  74  edButtons[edButtons.length] =
  75  new edButton('ed_ins'
  76  ,'ins'
  77  ,'<ins datetime="' + datetime + '">'
  78  ,'</ins>'
  79  ,'s'
  80  );
  81  
  82  edButtons[edButtons.length] =
  83  new edButton('ed_img'
  84  ,'img'
  85  ,''
  86  ,''
  87  ,'m'
  88  ,-1
  89  ); // special case
  90  
  91  edButtons[edButtons.length] =
  92  new edButton('ed_ul'
  93  ,'ul'
  94  ,'<ul>\n'
  95  ,'</ul>\n\n'
  96  ,'u'
  97  );
  98  
  99  edButtons[edButtons.length] =
 100  new edButton('ed_ol'
 101  ,'ol'
 102  ,'<ol>\n'
 103  ,'</ol>\n\n'
 104  ,'o'
 105  );
 106  
 107  edButtons[edButtons.length] =
 108  new edButton('ed_li'
 109  ,'li'
 110  ,'\t<li>'
 111  ,'</li>\n'
 112  ,'l'
 113  );
 114  
 115  edButtons[edButtons.length] =
 116  new edButton('ed_code'
 117  ,'code'
 118  ,'<code>'
 119  ,'</code>'
 120  ,'c'
 121  );
 122  
 123  edButtons[edButtons.length] =
 124  new edButton('ed_more'
 125  ,'more'
 126  ,'<!--more-->'
 127  ,''
 128  ,'t'
 129  ,-1
 130  );
 131  /*
 132  edButtons[edButtons.length] =
 133  new edButton('ed_next'
 134  ,'page'
 135  ,'<!--nextpage-->'
 136  ,''
 137  ,'p'
 138  ,-1
 139  );
 140  */
 141  function edLink() {
 142      this.display = '';
 143      this.URL = '';
 144      this.newWin = 0;
 145  }
 146  
 147  edLinks[edLinks.length] = new edLink('WordPress'
 148                                      ,'http://wordpress.org/'
 149                                      );
 150  
 151  edLinks[edLinks.length] = new edLink('alexking.org'
 152                                      ,'http://www.alexking.org/'
 153                                      );
 154  
 155  function edShowButton(button, i) {
 156      if (button.id == 'ed_img') {
 157          document.write('<input type="button" id="' + button.id + '" accesskey="' + button.access + '" class="ed_button" onclick="edInsertImage(edCanvas);" value="' + button.display + '" />');
 158      }
 159      else if (button.id == 'ed_link') {
 160          document.write('<input type="button" id="' + button.id + '" accesskey="' + button.access + '" class="ed_button" onclick="edInsertLink(edCanvas, ' + i + ');" value="' + button.display + '" />');
 161      }
 162      else {
 163          document.write('<input type="button" id="' + button.id + '" accesskey="' + button.access + '" class="ed_button" onclick="edInsertTag(edCanvas, ' + i + ');" value="' + button.display + '"  />');
 164      }
 165  }
 166  
 167  function edShowLinks() {
 168      var tempStr = '<select onchange="edQuickLink(this.options[this.selectedIndex].value, this);"><option value="-1" selected>' + quicktagsL10n.quickLinks + '</option>', i;
 169      for (i = 0; i < edLinks.length; i++) {
 170          tempStr += '<option value="' + i + '">' + edLinks[i].display + '</option>';
 171      }
 172      tempStr += '</select>';
 173      document.write(tempStr);
 174  }
 175  
 176  function edAddTag(button) {
 177      if (edButtons[button].tagEnd != '') {
 178          edOpenTags[edOpenTags.length] = button;
 179          document.getElementById(edButtons[button].id).value = '/' + document.getElementById(edButtons[button].id).value;
 180      }
 181  }
 182  
 183  function edRemoveTag(button) {
 184      for (var i = 0; i < edOpenTags.length; i++) {
 185          if (edOpenTags[i] == button) {
 186              edOpenTags.splice(i, 1);
 187              document.getElementById(edButtons[button].id).value =         document.getElementById(edButtons[button].id).value.replace('/', '');
 188          }
 189      }
 190  }
 191  
 192  function edCheckOpenTags(button) {
 193      var tag = 0, i;
 194      for (i = 0; i < edOpenTags.length; i++) {
 195          if (edOpenTags[i] == button) {
 196              tag++;
 197          }
 198      }
 199      if (tag > 0) {
 200          return true; // tag found
 201      }
 202      else {
 203          return false; // tag not found
 204      }
 205  }
 206  
 207  function edCloseAllTags() {
 208      var count = edOpenTags.length, o;
 209      for (o = 0; o < count; o++) {
 210          edInsertTag(edCanvas, edOpenTags[edOpenTags.length - 1]);
 211      }
 212  }
 213  
 214  function edQuickLink(i, thisSelect) {
 215      if (i > -1) {
 216          var newWin = '', tempStr;
 217          if (edLinks[i].newWin == 1) {
 218              newWin = ' target="_blank"';
 219          }
 220          tempStr = '<a href="' + edLinks[i].URL + '"' + newWin + '>'
 221                      + edLinks[i].display
 222                      + '</a>';
 223          thisSelect.selectedIndex = 0;
 224          edInsertContent(edCanvas, tempStr);
 225      }
 226      else {
 227          thisSelect.selectedIndex = 0;
 228      }
 229  }
 230  
 231  function edSpell(myField) {
 232      var word = '', sel, startPos, endPos;
 233      if (document.selection) {
 234          myField.focus();
 235          sel = document.selection.createRange();
 236          if (sel.text.length > 0) {
 237              word = sel.text;
 238          }
 239      }
 240      else if (myField.selectionStart || myField.selectionStart == '0') {
 241          startPos = myField.selectionStart;
 242          endPos = myField.selectionEnd;
 243          if (startPos != endPos) {
 244              word = myField.value.substring(startPos, endPos);
 245          }
 246      }
 247      if (word == '') {
 248          word = prompt(quicktagsL10n.wordLookup, '');
 249      }
 250      if (word !== null && /^\w[\w ]*$/.test(word)) {
 251          window.open('http://www.answers.com/' + escape(word));
 252      }
 253  }
 254  
 255  function edToolbar() {
 256      document.write('<div id="ed_toolbar">');
 257      for (var i = 0; i < edButtons.length; i++) {
 258          edShowButton(edButtons[i], i);
 259      }
 260      document.write('<input type="button" id="ed_spell" class="ed_button" onclick="edSpell(edCanvas);" title="' + quicktagsL10n.dictionaryLookup + '" value="' + quicktagsL10n.lookup + '" />');
 261      document.write('<input type="button" id="ed_close" class="ed_button" onclick="edCloseAllTags();" title="' + quicktagsL10n.closeAllOpenTags + '" value="' + quicktagsL10n.closeTags + '" />');
 262  //    edShowLinks(); // disabled by default
 263      document.write('</div>');
 264  }
 265  
 266  // insertion code
 267  
 268  function edInsertTag(myField, i) {
 269      //IE support
 270      if (document.selection) {
 271          myField.focus();
 272          var sel = document.selection.createRange();
 273          if (sel.text.length > 0) {
 274              sel.text = edButtons[i].tagStart + sel.text + edButtons[i].tagEnd;
 275          }
 276          else {
 277              if (!edCheckOpenTags(i) || edButtons[i].tagEnd == '') {
 278                  sel.text = edButtons[i].tagStart;
 279                  edAddTag(i);
 280              }
 281              else {
 282                  sel.text = edButtons[i].tagEnd;
 283                  edRemoveTag(i);
 284              }
 285          }
 286          myField.focus();
 287      }
 288      //MOZILLA/NETSCAPE support
 289      else if (myField.selectionStart || myField.selectionStart == '0') {
 290          var startPos = myField.selectionStart, endPos = myField.selectionEnd, cursorPos = endPos, scrollTop = myField.scrollTop;
 291  
 292          if (startPos != endPos) {
 293              myField.value = myField.value.substring(0, startPos)
 294                            + edButtons[i].tagStart
 295                            + myField.value.substring(startPos, endPos)
 296                            + edButtons[i].tagEnd
 297                            + myField.value.substring(endPos, myField.value.length);
 298              cursorPos += edButtons[i].tagStart.length + edButtons[i].tagEnd.length;
 299          }
 300          else {
 301              if (!edCheckOpenTags(i) || edButtons[i].tagEnd == '') {
 302                  myField.value = myField.value.substring(0, startPos)
 303                                + edButtons[i].tagStart
 304                                + myField.value.substring(endPos, myField.value.length);
 305                  edAddTag(i);
 306                  cursorPos = startPos + edButtons[i].tagStart.length;
 307              }
 308              else {
 309                  myField.value = myField.value.substring(0, startPos)
 310                                + edButtons[i].tagEnd
 311                                + myField.value.substring(endPos, myField.value.length);
 312                  edRemoveTag(i);
 313                  cursorPos = startPos + edButtons[i].tagEnd.length;
 314              }
 315          }
 316          myField.focus();
 317          myField.selectionStart = cursorPos;
 318          myField.selectionEnd = cursorPos;
 319          myField.scrollTop = scrollTop;
 320      }
 321      else {
 322          if (!edCheckOpenTags(i) || edButtons[i].tagEnd == '') {
 323              myField.value += edButtons[i].tagStart;
 324              edAddTag(i);
 325          }
 326          else {
 327              myField.value += edButtons[i].tagEnd;
 328              edRemoveTag(i);
 329          }
 330          myField.focus();
 331      }
 332  }
 333  
 334  function edInsertContent(myField, myValue) {
 335      var sel, startPos, endPos, scrollTop;
 336      
 337      //IE support
 338      if (document.selection) {
 339          myField.focus();
 340          sel = document.selection.createRange();
 341          sel.text = myValue;
 342          myField.focus();
 343      }
 344      //MOZILLA/NETSCAPE support
 345      else if (myField.selectionStart || myField.selectionStart == '0') {
 346          startPos = myField.selectionStart;
 347          endPos = myField.selectionEnd;
 348          scrollTop = myField.scrollTop;
 349          myField.value = myField.value.substring(0, startPos)
 350                        + myValue
 351                        + myField.value.substring(endPos, myField.value.length);
 352          myField.focus();
 353          myField.selectionStart = startPos + myValue.length;
 354          myField.selectionEnd = startPos + myValue.length;
 355          myField.scrollTop = scrollTop;
 356      } else {
 357          myField.value += myValue;
 358          myField.focus();
 359      }
 360  }
 361  
 362  function edInsertLink(myField, i, defaultValue) {
 363      if (!defaultValue) {
 364          defaultValue = 'http://';
 365      }
 366      if (!edCheckOpenTags(i)) {
 367          var URL = prompt(quicktagsL10n.enterURL, defaultValue);
 368          if (URL) {
 369              edButtons[i].tagStart = '<a href="' + URL + '">';
 370              edInsertTag(myField, i);
 371          }
 372      }
 373      else {
 374          edInsertTag(myField, i);
 375      }
 376  }
 377  
 378  function edInsertImage(myField) {
 379      var myValue = prompt(quicktagsL10n.enterImageURL, 'http://');
 380      if (myValue) {
 381          myValue = '<img src="'
 382                  + myValue
 383                  + '" alt="' + prompt(quicktagsL10n.enterImageDescription, '')
 384                  + '" />';
 385          edInsertContent(myField, myValue);
 386      }
 387  }
 388  
 389  
 390  // Allow multiple instances.
 391  // Name = unique value, id = textarea id, container = container div.
 392  // Can disable some buttons by passing comma delimited string as 4th param.
 393  var QTags = function(name, id, container, disabled) {
 394      var t = this, cont = document.getElementById(container), i, tag, tb, html, sel;
 395  
 396      t.Buttons = [];
 397      t.Links = [];
 398      t.OpenTags = [];
 399      t.Canvas = document.getElementById(id);
 400  
 401      if ( ! t.Canvas || ! cont )
 402          return;
 403  
 404      disabled = ( typeof disabled != 'undefined' ) ? ','+disabled+',' : '';
 405  
 406      t.edShowButton = function(button, i) {
 407          if ( disabled && (disabled.indexOf(','+button.display+',') != -1) )
 408              return '';
 409          else if ( button.id == name+'_img' )
 410              return '<input type="button" id="' + button.id + '" accesskey="' + button.access + '" class="ed_button" onclick="edInsertImage('+name+'.Canvas);" value="' + button.display + '" />';
 411          else if (button.id == name+'_link')
 412              return '<input type="button" id="' + button.id + '" accesskey="' + button.access + '" class="ed_button" onclick="'+name+'.edInsertLink('+i+');" value="'+button.display+'" />';
 413          else
 414              return '<input type="button" id="' + button.id + '" accesskey="'+button.access+'" class="ed_button" onclick="'+name+'.edInsertTag('+i+');" value="'+button.display+'" />';
 415      };
 416  
 417      t.edAddTag = function(button) {
 418          if ( t.Buttons[button].tagEnd != '' ) {
 419              t.OpenTags[t.OpenTags.length] = button;
 420              document.getElementById(t.Buttons[button].id).value = '/' + document.getElementById(t.Buttons[button].id).value;
 421          }
 422      };
 423  
 424      t.edRemoveTag = function(button) {
 425          for ( i = 0; i < t.OpenTags.length; i++ ) {
 426              if ( t.OpenTags[i] == button ) {
 427                  t.OpenTags.splice(i, 1);
 428                  document.getElementById(t.Buttons[button].id).value = document.getElementById(t.Buttons[button].id).value.replace('/', '');
 429              }
 430          }
 431      };
 432  
 433      t.edCheckOpenTags = function(button) {
 434          tag = 0;
 435          for ( var i = 0; i < t.OpenTags.length; i++ ) {
 436              if ( t.OpenTags[i] == button )
 437                  tag++;
 438          }
 439          if ( tag > 0 ) return true; // tag found
 440          else return false; // tag not found
 441      };
 442  
 443      this.edCloseAllTags = function() {
 444          var count = t.OpenTags.length;
 445          for ( var o = 0; o < count; o++ )
 446              t.edInsertTag(t.OpenTags[t.OpenTags.length - 1]);
 447      };
 448  
 449      this.edQuickLink = function(i, thisSelect) {
 450          if ( i > -1 ) {
 451              var newWin = '', tempStr;
 452              if ( Links[i].newWin == 1 ) {
 453                  newWin = ' target="_blank"';
 454              }
 455              tempStr = '<a href="' + Links[i].URL + '"' + newWin + '>'
 456                          + Links[i].display
 457                          + '</a>';
 458              thisSelect.selectedIndex = 0;
 459              edInsertContent(t.Canvas, tempStr);
 460          } else {
 461              thisSelect.selectedIndex = 0;
 462          }
 463      };
 464  
 465      // insertion code
 466      t.edInsertTag = function(i) {
 467          //IE support
 468          if ( document.selection ) {
 469              t.Canvas.focus();
 470              sel = document.selection.createRange();
 471              if ( sel.text.length > 0 ) {
 472                  sel.text = t.Buttons[i].tagStart + sel.text + t.Buttons[i].tagEnd;
 473              } else {
 474                  if ( ! t.edCheckOpenTags(i) || t.Buttons[i].tagEnd == '' ) {
 475                      sel.text = t.Buttons[i].tagStart;
 476                      t.edAddTag(i);
 477                  } else {
 478                      sel.text = t.Buttons[i].tagEnd;
 479                      t.edRemoveTag(i);
 480                  }
 481              }
 482              t.Canvas.focus();
 483          } else if ( t.Canvas.selectionStart || t.Canvas.selectionStart == '0' ) { //MOZILLA/NETSCAPE support
 484              var startPos = t.Canvas.selectionStart, endPos = t.Canvas.selectionEnd, cursorPos = endPos, scrollTop = t.Canvas.scrollTop;
 485  
 486              if ( startPos != endPos ) {
 487                  t.Canvas.value = t.Canvas.value.substring(0, startPos)
 488                                + t.Buttons[i].tagStart
 489                                + t.Canvas.value.substring(startPos, endPos)
 490                                + t.Buttons[i].tagEnd
 491                                + t.Canvas.value.substring(endPos, t.Canvas.value.length);
 492                  cursorPos += t.Buttons[i].tagStart.length + t.Buttons[i].tagEnd.length;
 493              } else {
 494                  if ( !t.edCheckOpenTags(i) || t.Buttons[i].tagEnd == '' ) {
 495                      t.Canvas.value = t.Canvas.value.substring(0, startPos)
 496                                    + t.Buttons[i].tagStart
 497                                    + t.Canvas.value.substring(endPos, t.Canvas.value.length);
 498                      t.edAddTag(i);
 499                      cursorPos = startPos + t.Buttons[i].tagStart.length;
 500                  } else {
 501                      t.Canvas.value = t.Canvas.value.substring(0, startPos)
 502                                    + t.Buttons[i].tagEnd
 503                                    + t.Canvas.value.substring(endPos, t.Canvas.value.length);
 504                      t.edRemoveTag(i);
 505                      cursorPos = startPos + t.Buttons[i].tagEnd.length;
 506                  }
 507              }
 508              t.Canvas.focus();
 509              t.Canvas.selectionStart = cursorPos;
 510              t.Canvas.selectionEnd = cursorPos;
 511              t.Canvas.scrollTop = scrollTop;
 512          } else {
 513              if ( ! t.edCheckOpenTags(i) || t.Buttons[i].tagEnd == '' ) {
 514                  t.Canvas.value += Buttons[i].tagStart;
 515                  t.edAddTag(i);
 516              } else {
 517                  t.Canvas.value += Buttons[i].tagEnd;
 518                  t.edRemoveTag(i);
 519              }
 520              t.Canvas.focus();
 521          }
 522      };
 523  
 524      this.edInsertLink = function(i, defaultValue) {
 525          if ( ! defaultValue )
 526              defaultValue = 'http://';
 527  
 528          if ( ! t.edCheckOpenTags(i) ) {
 529              var URL = prompt(quicktagsL10n.enterURL, defaultValue);
 530              if ( URL ) {
 531                  t.Buttons[i].tagStart = '<a href="' + URL + '">';
 532                  t.edInsertTag(i);
 533              }
 534          } else {
 535              t.edInsertTag(i);
 536          }
 537      };
 538  
 539      this.edInsertImage = function() {
 540          var myValue = prompt(quicktagsL10n.enterImageURL, 'http://');
 541          if ( myValue ) {
 542              myValue = '<img src="'
 543                      + myValue
 544                      + '" alt="' + prompt(quicktagsL10n.enterImageDescription, '')
 545                      + '" />';
 546              edInsertContent(t.Canvas, myValue);
 547          }
 548      };
 549  
 550      t.Buttons[t.Buttons.length] = new edButton(name+'_strong','b','<strong>','</strong>','b');
 551      t.Buttons[t.Buttons.length] = new edButton(name+'_em','i','<em>','</em>','i');
 552      t.Buttons[t.Buttons.length] = new edButton(name+'_link','link','','</a>','a'); // special case
 553      t.Buttons[t.Buttons.length] = new edButton(name+'_block','b-quote','\n\n<blockquote>','</blockquote>\n\n','q');
 554      t.Buttons[t.Buttons.length] = new edButton(name+'_del','del','<del datetime="' + datetime + '">','</del>','d');
 555      t.Buttons[t.Buttons.length] = new edButton(name+'_ins','ins','<ins datetime="' + datetime + '">','</ins>','s');
 556      t.Buttons[t.Buttons.length] = new edButton(name+'_img','img','','','m',-1); // special case
 557      t.Buttons[t.Buttons.length] = new edButton(name+'_ul','ul','<ul>\n','</ul>\n\n','u');
 558      t.Buttons[t.Buttons.length] = new edButton(name+'_ol','ol','<ol>\n','</ol>\n\n','o');
 559      t.Buttons[t.Buttons.length] = new edButton(name+'_li','li','\t<li>','</li>\n','l');
 560      t.Buttons[t.Buttons.length] = new edButton(name+'_code','code','<code>','</code>','c');
 561      t.Buttons[t.Buttons.length] = new edButton(name+'_more','more','<!--more-->','','t',-1);
 562  //    t.Buttons[t.Buttons.length] = new edButton(name+'_next','page','<!--nextpage-->','','p',-1);
 563  
 564      tb = document.createElement('div');
 565      tb.id = name+'_qtags';
 566  
 567      html = '<div id="'+name+'_toolbar">';
 568      for (i = 0; i < t.Buttons.length; i++)
 569          html += t.edShowButton(t.Buttons[i], i);
 570  
 571      html += '<input type="button" id="'+name+'_ed_spell" class="ed_button" onclick="edSpell('+name+'.Canvas);" title="' + quicktagsL10n.dictionaryLookup + '" value="' + quicktagsL10n.lookup + '" />';
 572      html += '<input type="button" id="'+name+'_ed_close" class="ed_button" onclick="'+name+'.edCloseAllTags();" title="' + quicktagsL10n.closeAllOpenTags + '" value="' + quicktagsL10n.closeTags + '" /></div>';
 573  
 574      tb.innerHTML = html;
 575      cont.parentNode.insertBefore(tb, cont);
 576  
 577  };