Make sub-toolbars in pickers possible

Ignore-this: ace153a4684f7b345df56d796717a172
Now all types of buttons kan also be placed in a toolbar picker window. It
should even be possible to create deep nested picker cascades.

darcs-hash:20090528153507-7ad00-828c7a9022b7a4021bf8a74bcd0771373deee254.gz

2 files changed, 84 insertions, 38 deletions

diff --git a/lib/scripts/edit.js b/lib/scripts/edit.js
index 517daa086..5bb07bd44 100644
--- a/lib/scripts/edit.js
+++ b/lib/scripts/edit.js
@@ -49,25 +49,30 @@ function createToolButton(icon,label,key,id){
  * class or the picker buttons with the pickerbutton class. Picker
  * windows are appended to the body and created invisible.
  *
+ * @param  string id    the ID to assign to the picker
+ * @param  array  props the properties for the picker
+ * @param  string edid  the ID of the textarea
+ * @rteurn DOMobject    the created picker
  * @author Andreas Gohr <andi@splitbrain.org>
  */
-function createPicker(id,list,icobase,edid){
-    var cnt = list.length;
-
-    var picker = document.createElement('div');
-    picker.className = 'picker';
-    picker.id = id;
+function createPicker(id,props,edid){
+    var icobase = props['icobase'];
+    var list    = props['list']
+
+    // create the wrapping div
+    var picker            = document.createElement('div');
+    picker.className      = 'picker '+props['class'];
+    picker.id             = id;
     picker.style.position = 'absolute';
     picker.style.display  = 'none';
 
     for(var key in list){
         if (!list.hasOwnProperty(key)) continue;
-        var btn = document.createElement('button');
-
-        btn.className = 'pickerbutton';
 
-        // associative array?
         if(isNaN(key)){
+            // associative array -> treat as image/value pairs
+            var btn = document.createElement('button');
+            btn.className = 'pickerbutton';
             var ico = document.createElement('img');
             if(list[key].substr(0,1) == '/'){
                 ico.src = list[key];
@@ -76,22 +81,31 @@ function createPicker(id,list,icobase,edid){
             }
             btn.title     = key;
             btn.appendChild(ico);
-            eval("btn.onclick = function(){pickerInsert('"+id+"','"+
+            eval("btn.onclick = function(){pickerInsert('"+
                                   jsEscape(key)+"','"+
                                   jsEscape(edid)+"');return false;}");
-        }else{
+            picker.appendChild(btn);
+        }else if(isString(list[key])){
+            // a list of text -> treat as text picker
+            var btn = document.createElement('button');
+            btn.className = 'pickerbutton';
             var txt = document.createTextNode(list[key]);
             btn.title     = list[key];
             btn.appendChild(txt);
-            eval("btn.onclick = function(){pickerInsert('"+id+"','"+
+            eval("btn.onclick = function(){pickerInsert('"+
                                   jsEscape(list[key])+"','"+
                                   jsEscape(edid)+"');return false;}");
+            picker.appendChild(btn);
+        }else{
+            // a list of lists -> treat it as subtoolbar
+            initToolbar(picker,edid,list);
+            break; // all buttons handled already
         }
 
-        picker.appendChild(btn);
     }
     var body = document.getElementsByTagName('body')[0];
     body.appendChild(picker);
+    return picker;
 }
 
 /**
@@ -99,12 +113,11 @@ function createPicker(id,list,icobase,edid){
  *
  * @author Andreas Gohr <andi@splitbrain.org>
  */
-function pickerInsert(pickerid,text,edid){
+function pickerInsert(text,edid){
     // insert
     insertAtCarret(edid,text);
     // close picker
-    pobj = document.getElementById(pickerid);
-    pobj.style.display = 'none';
+    pickerClose();
 }
 
 /**
@@ -146,26 +159,6 @@ function addBtnActionSignature(btn, props, edid)
     return false;
 }
 
-/**
- * Add button action for picker buttons and create picker element
- *
- * @param  DOMElement btn   Button element to add the action to
- * @param  array      props Associative array of button properties
- * @param  string     edid  ID of the editor textarea
- * @param  int        id    Unique number of the picker
- * @return boolean    If button should be appended
- * @author Gabriel Birke <birke@d-scribe.de>
- */
-function addBtnActionPicker(btn, props, edid, id)
-{
-    createPicker('picker'+id,
-         props['list'],
-         props['icobase'],
-         edid);
-    eval("btn.onclick = function(){showPicker('picker"+id+
-                                    "',this);return false;}");
-    return true;
-}
 
 /**
  * Add button action for the mediapopup button
@@ -241,6 +234,7 @@ function insertHeadline(textboxId,mod,text){
     var tags = '=';
     for(var i=0; i<=5-lvl; i++) tags += '=';
     insertTags(textboxId, tags+' ', ' '+tags+"\n", text);
+    pickerClose();
 }
 
 /**
diff --git a/lib/scripts/toolbar.js b/lib/scripts/toolbar.js
index 18d2daede..5c51af1eb 100644
--- a/lib/scripts/toolbar.js
+++ b/lib/scripts/toolbar.js
@@ -1,3 +1,7 @@
+
+// used to identify pickers
+var pickercounter=0;
+
 /**
  * Create a toolbar
  *
@@ -40,7 +44,7 @@ function initToolbar(tbid,edid,tb){
         // type is a init function -> execute it
         actionFunc = 'addBtnAction'+tb[i]['type'].charAt(0).toUpperCase()+tb[i]['type'].substring(1);
         if( isFunction(window[actionFunc]) ){
-            if(window[actionFunc](btn, tb[i], edid, i)){
+            if(window[actionFunc](btn, tb[i], edid)){
                 toolbar.appendChild(btn);
             }
             continue;
@@ -69,6 +73,7 @@ function tb_format(btn, props, edid) {
                fixtxt(props['open']),
                fixtxt(props['close']),
                fixtxt(sample));
+    pickerClose();
     return false;
 }
 
@@ -83,11 +88,58 @@ function tb_format(btn, props, edid) {
  */
 function tb_insert(btn, props, edid) {
     insertAtCarret(edid,fixtxt(props['insert']));
+    pickerClose();
 }
 
 
+/**
+ * Add button action for picker buttons and create picker element
+ *
+ * @param  DOMElement btn   Button element to add the action to
+ * @param  array      props Associative array of button properties
+ * @param  string     edid  ID of the editor textarea
+ * @return boolean    If button should be appended
+ * @author Gabriel Birke <birke@d-scribe.de>
+ */
+function addBtnActionPicker(btn, props, edid) {
+    var pickerid = 'picker'+(pickercounter++);
+    createPicker(pickerid, props, edid);
+    addEvent(btn,'click',function(){
+        pickerToggle(pickerid,btn);
+        return false;
+    });
+    return true;
+}
 
+/**
+ * Show/Hide a previosly created picker window
+ *
+ * @author Andreas Gohr <andi@splitbrain.org>
+ */
+function pickerToggle(pickerid,btn){
+    var picker = $(pickerid);
+    if(picker.style.display == 'none'){
+        var x = findPosX(btn);
+        var y = findPosY(btn);
+        picker.style.display = 'block';
+        picker.style.left = (x+3)+'px';
+        picker.style.top = (y+btn.offsetHeight+3)+'px';
+    }else{
+        picker.style.display = 'none';
+    }
+}
 
+/**
+ * Close all open pickers
+ *
+ * @author Andreas Gohr <andi@splitbrain.org>
+ */
+function pickerClose(){
+    var pobjs = getElementsByClass('picker');
+    for(var i=0; i<pobjs.length; i++){
+        pobjs[i].style.display = 'none';
+    }
+}
 
 
 /**