Opened 14 years ago

Closed 10 years ago

#602 closed defect (inactive)

Dropdowns with groups

Reported by: wgallo@… Owned by: gogo
Priority: normal Milestone: 2.0
Component: Plugin_HtmlTidy Version:
Severity: normal Keywords: dropdown select optgroup createSelect registerDropdown
Cc:

Description

Using registerDropdown / createSelect I have encountered some limitations:

I have included some tree structures of my CMS by adding a lot of   before the text, according to the level of the item to be added. Since createSelect works on JavaScript? objects, one can't add two options in the dropdown that have the same text.

Additionally it would be nice if createSelect would support grouping of items with the optgroup tag.

So I've updated the createSelect method to support that:

  // this function will handle creation of combo boxes.  Receives as
  // parameter the name of a button as defined in the toolBar config.
  // This function is called from createButton, above, if the given "txt"
  // doesn't match a button.
  function createSelect(txt) {
    
    var groups = null; // NEW
    var array = null; // NEW
    var options = null;
    var el = null;
    var cmd = null;
    var customSelects = editor.config.customSelects;
    var context = null;
    var tooltip = "";

    switch (txt) {

      case "fontsize":
      case "fontname":
      case "formatblock":
        // the following line retrieves the correct
        // configuration option because the variable name
        // inside the Config object is named the same as the
        // button/select in the toolbar.  For instance, if txt
        // == "formatblock" we retrieve config.formatblock (or
        // a different way to write it in JS is
        // config["formatblock"].
        options = editor.config[txt];
        cmd = txt;
        break;

      default:
        // try to fetch it from the list of registered selects
        cmd = txt;
        var dropdown = customSelects[cmd];
        if (typeof dropdown != "undefined") {
          groups = dropdown.groups; // NEW
          array = dropdown.array; // NEW
          options = dropdown.options;
          context = dropdown.context;
          if (typeof dropdown.tooltip != "undefined") {
            tooltip = dropdown.tooltip;
          }
        } else {
          alert("ERROR [createSelect]:\nCan't find the requested dropdown definition");
        }
        break;
      
    }
    
    if (options || groups || array) { // CHANGED
      
      el = document.createElement("select");
      el.title = tooltip;
      var obj = {
        name  : txt, // field name
        element : el, // the UI element (SELECT)
        enabled : true, // is it enabled?
        text  : false, // enabled in text mode?
        cmd : cmd, // command ID
        state : setButtonStatus, // for changing state
        context : context
      };
      
      HTMLArea.freeLater(obj);
      
      tb_objects[txt] = obj;
      
      if (options) {
        for (var i in options) {
          if (typeof(options[i]) != 'string') continue;  // prevent iterating over wrong type
          var op = document.createElement("option");
          op.innerHTML = HTMLArea._lc(i);
          op.value = options[i];
          el.appendChild(op);
        }
      }

      // NEW
      if (groups) {
        for (var g in groups) {
          if (typeof(groups[g]) == 'object') {
            var og = document.createElement("optgroup");
            og.label = g;
            for (var i in groups[g]) {
              var op = document.createElement("option");
              op.innerHTML = HTMLArea._lc(i);
              op.value = groups[g][i];
              og.appendChild(op);
            }
            el.appendChild(og);
          } else {
            var op = document.createElement("option");
            op.innerHTML = HTMLArea._lc(g);
            op.value = groups[g];
            el.appendChild(op);
          }
        }
      }
      
      // NEW
      if (array) {
        for (g = 0; g < array.length; g += 2) {
          g0 = array[g];
          g1 = array[g + 1];
          if (typeof(g1) == 'object') {
            og = document.createElement("optgroup");
            og.label = g0;
            for (o = 0; o < g1.length; o += 2) {
              var op = document.createElement("option");
              op.innerHTML = HTMLArea._lc(g1[o]);
              op.value = g1[o + 1];
              og.appendChild(op);          
            }
            el.appendChild(og);
          } else {
            var op = document.createElement("option");
            op.innerHTML = HTMLArea._lc(g0);
            op.value = g1;
            el.appendChild(op);          
          }
        }
        
      }
      
      HTMLArea._addEvent(el, "change", function () {
        editor._comboSelected(el, txt);
      });
      
    }
    
    return el;
    
  } // END of function: createSelect

As you can see, there are two new ways of passing items: via "groups" or "array". The first one uses the same style as the old "options", but supports grouping items. Still, an items text hast to be unique within a group. The second one uses arrays and therefor the text has not to be unique anymore."

The following example explains how to use the new features. As you can see, all three methods may be mixed:

  config.registerDropdown({
    id: "my-test",
    options: { "&mdash; Test &mdash;": "", "Z": "26", "Y": "25", "X": "24" }, // old way, old style, text hat to be unique
    groups: { "A": { "1" : 1, "2" : 2 }, "B": 3, "C": { "4": 4, "5": 5, "6": 6 } }, //new way, same style, text has to be unique within a group
    array: [ "D", ["1", 1, "2", 2], "E", ["1", 3], "F", 4 ], // new way, new style, array allows options with the same text
    tooltip: "Test."
  });

Of course "my-test" has to be added to the toolbar.

I don't know if putting this into a ticket is the right place, but I find this very helpfull and hope others will too.

Change History (3)

comment:1 Changed 14 years ago by 이수아

  • Component changed from Xinha Core to Plugin_HtmlTidy

남성회원2000포인트증정!

여성과 즐기는,캠 없이도 볼 수있는 채팅,만남!!

http://oh.ah.to/

http://oh.ah.to/

http://oh.ah.to/

1:1비밀대화방,은밀한 둘만의 만남

자유로운 죽석 번개팅가능!

삭+제+번+호:ssx77
</a>

comment:2 Changed 14 years ago by 이수아

남성회원2000포인트증정!

여성과 즐기는,캠 없이도 볼 수있는 채팅,만남!!

http://oh.ah.to/

http://oh.ah.to/

http://oh.ah.to/

1:1비밀대화방,은밀한 둘만의 만남

자유로운 죽석 번개팅가능!

삭+제+번+호:ssx77
</a>

comment:3 Changed 10 years ago by gogo

  • Resolution set to inactive
  • Status changed from new to closed

Provide a diff against current trunk and I'll consider it. Nobody else says anything in 4 years, so probably not worth my time working out what you changed there.

Note: See TracTickets for help on using tickets.