prototype.addButton

[gocher / udo.schmal@…]

Sorry but i can't test this prototype for you because my xhina.toolbar based on div's not on table's and my toolbar has panels and groups but it should works!

position:

• -1 = insert button (id) one position before button (where)
• 0 = replace button (where) by button (id)
• +1 = insert button (id) one position after button (where)

HTMLArea.Config.prototype.addButton = function(id, where, position) {
  var found = false;
  for (var i = 0; !found && i < this.toolbar.length; ++i) {
    var a = this.toolbar[i]
    for (var j = 0; j < a.length; ++j) {
      if (a[j] == where) {
        found = true;
         break;
      }
  }
  if (found) {
    if (position == -1) a.splice(j, 0, id);
    else if (position == 0) a[j] = id;
    else if (position == 1) a.splice(++j, 0, id); 	  
  }	
  else {
    this.toolbar[0].splice(0, 0, "separator");
    this.toolbar[0].splice(0, 0, id);
  }
}

[niko]

nice!

let me think about this... as an example i take the CharacterMap-plugin, the code for it would be:

cfg.addButton("insertcharacter", "inserthorizontalrule", -1);
cfg.addButton("separator", "insertcharacter", 1);

..this inserts the button bevore the <hr>-button and a separator after it. (it behaves like this currently)

• its easier than the current code
• we could even make an array out of the 2nd paramteer and add insertimage inserttable (in case we don't have a hr-button)
• but it does NOT solve the problem "don't insert a button when it is allready in the toolbar"
  • so my suggestions:
    1. look if the id does allready exist, if so do nothing and return false
    2. the CharMap? plugin then can add the separator-button only if addButton returned true

what would you say about that?

[gocher]

this function solve all your problems, but it is mutch bigger!

as example CharacterMap-plugin, the code for it woud be:

cfg.addButton(["insertcharacter","separator"], ["anyotherbutton","inserthorizontalrule"], -1);

/** Helper Function: add buttons/drop-downs boxes to the toolbar  
 * if it doesn't allready exists.
 * id: button or sectbox (as array with separator or Text)
 * where: button or selectbox (as array if the first is not found take the second and so on)
 * position:
 * -1 = insert button (id) one position before the button (where)
 * 0 = replace button (where) by button (id)
 * +1 = insert button (id) one position after button (where) 
*/

HTMLArea.Config.prototype.addButton = function(id, where, position) {
  var toolbar = this.toolbar;
  var a, i, j, o, sid;
  var idIsArray = false;
  var whereIsArray = false;
  var whereLength = 0;
  var whereJ = 0;
  var whereI = 0;
  var exists = false;
  var found = false;
  // check if id and where are arrys
  if ((id && typeof id == "object") && (id.constructor == Array)) {
    idIsArray = true;
  }   
  if ((where && typeof where == "object") && (where.constructor == Array)) {
	  whereIsArray = true;
	  whereLength = where.length;
	}   
  
  if (idIsArray) { //find the button/select box in input array
    for (i = 0; i < id.length; ++i) {
      if ((id[i] != "separator") && (id[i].indexOf("T[") != 0)) {
        sid = id[i];
      }  
    }
  } else {
    sid = id;
  }

  for (var i = 0; !exists && !found && i < toolbar.length; ++i) {
    a = toolbar[i]
    for (j = 0; !found && j < a.length; ++j) {
      if (a[i] == sid) { // check if button/select box exists
        exists = true;
        break;
      }
      if (whereIsArray) {
        for (o = 0; o < whereLength; ++o) {
          if(a[j] == where[o]) {
            if (o == 0) {
              found = true;
              break;
            } else {
              whereI = i; 
              whereJ = j;
              whereLength = o;
            }
          }  
        }   
      } else {
        if (a[j] == where) { // find the position to insert
          found = true;
          break;
        }
      }
    }  
  }

  if (!exists) {
    if (!found && whereIsArray) { //if check found any other as the first button
      if (where.length != whereLength) {                   
        j = whereJ;
        a = toolbar[whereI];
        found = true;
      }
    }  
    if (found) {
	    if (position == 0) { // replace the found button
	      if (idIsArray) {
          a[j] = id[id.length-1];
          for (i = id.length-1; --i >= 0;) {
		  		  a.splice(j, 0, id[i]);
          }  
	      } else {
	        a[j] = id;
        }
      } else { // insert before/after the found button
        if (position < 0) { 
          j = j + position + 1; //correct position before
        } else if (position > 0) { 
          j = j + position; //correct posion after
        } 
        if (idIsArray) { 
          for (i = id.length; --i >= 0;) {
            a.splice(j, 0, id[i]);
          }  
        } else {
           a.splice(j, 0, id);
        }
      }  
    }	else { // no button found
      toolbar[0].splice(0, 0, "separator");
      if (idIsArray) {
		    for (i = id.length; --i >= 0;) {
          toolbar[0].splice(0, 0, id[i]);
			  }  
		  } else {
        toolbar[0].splice(0, 0, id);
      }
    }
  }  
}

[gocher]

oh sorry a little mistake after "found = true;" I have forgotten a "j--"

for (var i = 0; !exists && !found && i < toolbar.length; ++i) {
    a = toolbar[i]
    for (j = 0; !found && j < a.length; ++j) {
      if (a[i] == sid) { // check if button/select box exists
        exists = true;
        break;
      }
      if (whereIsArray) {
        for (o = 0; o < whereLength; ++o) {
          if(a[j] == where[o]) {
            if (o == 0) {
              found = true;
              j--;
              break;
            } else {
              whereI = i; 
              whereJ = j;
              whereLength = o;
            }
          }  
        }   
      } else {
        if (a[j] == where) { // find the position to insert
          found = true;
          break;
        }
      }
    }  
  }

[gocher]

other examples:

CSS

	for (var i = 0; i < combos.length; i++) {
		var combo = combos[i];
		var id = "CSS-class" + i;
		var css_class = {
			id         : id,
			options    : combo.options,
			action     : function(editor) { self.onSelect(editor, this, combo.context, combo.updatecontextclass); },
			refresh    : function(editor) { self.updateValue(editor, this); },
			context    : combo.context
		};
		cfg.registerDropdown(css_class);
    cfg.addButton(["T[" + combo.label + "]", id, "separator"] , "formatblock", -1);
		first = false;
	}

DynamicCSS

cfg.addButton(["T[CSS]", "DynamicCSS-class", "separator"] , "formatblock", -1);

FullScreen?

cfg.addButton("fullscreen", "popupeditor", 0);

InsertAnchor

cfg.addButton("insert-anchor", "createlink", 1);

ListType

cfg.addButton("listtype", "orderedlist", 1);

SpellChecker

cfg.addButton("SC-spell-check", "htmlmode",1);

SuperClean

HTMLArea.InsertButton("superclean", "killword", 0);

[kim@…]

You beat me to the bush, :) Looks very flexible and nice, will test it later tonight.

[gocher]

commit this function as addToolbarElement and used it in insertAnchor

[niko]

nice, thanks for that :D you might add "space" and "linebreak"(?) here: if ((id[i] != "separator") && (id[i].indexOf("T[") != 0)) {

and, please always post changeset:127 like wiki-links so we can see the changes (and in the commit-message please write #tickentnr)