first draft of new "dropdown" class for doing simple popup menus

pd/nw/css/c64.css

@@ -220,6 +220,50 @@ text {
     fill: #3e32a2;
 }
 
+/* for dropdown box we want to visually distinguish boxes that output
+   the index from boxes that output the value. For now we do that by
+   stroking the arrow for boxes that output an index. For boxes that
+   output the value we don't need a CSS rule, as the arrow will be filled
+   black by default */
+.atom .index_arrow {
+    stroke: black;
+    stroke-width: 1;
+    fill: none;
+}
+
+/* gatom "activated" text (i.e., when it has the keyboard focus) */
+.atom.activated text {
+    fill: red;
+}
+
+#dropdown_list {
+    position: absolute;
+    border-width: 1px;
+    border-style: solid;
+    border-color: #7569d7;
+    cursor: pointer;
+    box-shadow: 2px 2px 0px #7569d7;
+}
+
+#dropdown_list ol {
+    list-style-position: inside;
+    margin: 0;
+    padding: 0;
+    background: #3e32a2;
+    outline: #7569d7;
+}
+
+#dropdown_list li {
+    color: #a49aea;
+    list-style-type: none;
+    padding: 5px;
+}
+
+#dropdown_list li.highlighted {
+    color: black;
+    background: #e87216;
+}
+
 .obj .border {
     fill: #3e32a2;
     stroke: #7569d7;

pd/nw/css/default.css

@@ -334,6 +334,47 @@ text {
     fill: #eee;
 }
 
+/* for dropdown box we want to visually distinguish boxes that output
+   the index from boxes that output the value. For now we do that by
+   stroking the arrow for boxes that output an index. For boxes that
+   output the value we don't need a CSS rule, as the arrow will be filled
+   black by default */
+.atom .index_arrow {
+    stroke: black;
+    stroke-width: 1;
+    fill: none;
+}
+
+/* gatom "activated" text (i.e., when it has the keyboard focus) */
+.atom.activated text {
+    fill: red;
+}
+
+#dropdown_list {
+    position: absolute;
+    border-width: 1px;
+    border-style: solid;
+    border-color: #c3c3c3;
+    cursor: pointer;
+    box-shadow: 5px 0 5px -5px #aaa, 0 5px 5px -5px #aaa, -5px 0 5px -5px #aaa;
+}
+
+#dropdown_list ol {
+    list-style-position: inside;
+    margin: 0;
+    padding: 0;
+    background: #eee;
+}
+
+#dropdown_list li {
+    list-style-type: none;
+    padding: 5px;
+}
+
+#dropdown_list li.highlighted {
+    background-color: #c3c3c3;
+}
+
 .obj .border {
     fill: #f6f8f8;
     stroke: #ccc;
@@ -410,11 +451,6 @@ text {
     fill: blue;
 }
 
-/* gatom "activated" text (i.e., when it has the keyboard focus) */
-.atom.activated text {
-    fill: red;
-}
-
 /* test of xlet hover animation... this should 
    probably use the web animation API instead. That
    way the animation won't get cut off when you

pd/nw/css/extended.css

@@ -214,6 +214,47 @@ text {
     fill: #e0e0e0;
 }
 
+/* for dropdown box we want to visually distinguish boxes that output
+   the index from boxes that output the value. For now we do that by
+   stroking the arrow for boxes that output an index. For boxes that
+   output the value we don't need a CSS rule, as the arrow will be filled
+   black by default */
+.atom .index_arrow {
+    stroke: black;
+    stroke-width: 1;
+    fill: none;
+}
+
+/* gatom "activated" text (i.e., when it has the keyboard focus) */
+.atom.activated text {
+    fill: red;
+}
+
+#dropdown_list {
+    position: absolute;
+    border-width: 1px;
+    border-style: solid;
+    border-color: #c3c3c3;
+    cursor: pointer;
+    box-shadow: 5px 0 5px -5px #888, 0 5px 5px -5px #888, -5px 0 5px -5px #888;
+}
+
+#dropdown_list ol {
+    list-style-position: inside;
+    margin: 0;
+    padding: 0;
+    background: #eee;
+}
+
+#dropdown_list li {
+    list-style-type: none;
+    padding: 5px;
+}
+
+#dropdown_list li.highlighted {
+    background: #c3c3c3;
+}
+
 .obj .border {
     fill: #f6f8f8;
     stroke: #c1c1c1;

pd/nw/css/inverted.css

@@ -232,6 +232,50 @@ text {
     fill: #111;
 }
 
+/* for dropdown box we want to visually distinguish boxes that output
+   the index from boxes that output the value. For now we do that by
+   stroking the arrow for boxes that output an index. */
+.atom .index_arrow {
+    stroke: #a294a2;
+    stroke-width: 1;
+    fill: none;
+}
+
+.atom .value_arrow {
+    fill: #a294a2;
+}
+
+/* gatom "activated" text (i.e., when it has the keyboard focus) */
+.atom.activated text {
+    fill: red;
+}
+
+#dropdown_list {
+    position: absolute;
+    border-width: 1px;
+    border-style: solid;
+    border-color: #999;
+    cursor: pointer;
+    color: white;
+    box-shadow: 5px 0 5px -5px #999, 0 5px 5px -5px #999, -5px 0 5px -5px #999;
+}
+
+#dropdown_list ol {
+    list-style-position: inside;
+    margin: 0;
+    padding: 0;
+    background: black;
+}
+
+#dropdown_list li {
+    list-style-type: none;
+    padding: 5px;
+}
+
+#dropdown_list li.highlighted {
+    background: #555;
+}
+
 .obj .border {
     fill: #090707;
     stroke: #3e3e3e;

pd/nw/css/strongbad.css

@@ -222,6 +222,51 @@ text {
     fill: black;
 }
 
+/* for dropdown box we want to visually distinguish boxes that output
+   the index from boxes that output the value. For now we do that by
+   stroking the arrow for boxes that output an index. */
+.atom .index_arrow {
+    stroke: #4bd046;
+    stroke-width: 1;
+    fill: none;
+}
+
+.atom .value_arrow {
+   fill: #4bd046;
+}
+
+/* gatom "activated" text (i.e., when it has the keyboard focus) */
+.atom.activated text {
+    fill: red;
+}
+
+#dropdown_list {
+    position: absolute;
+    border-width: 1px;
+    border-style: solid;
+    border-color: #0b560b;
+    cursor: pointer;
+    color: #4bd046;
+    box-shadow: 1px 1px 1px 1px #0b560b;
+}
+
+#dropdown_list ol {
+    list-style-position: inside;
+    margin: 0;
+    padding: 0;
+    background: black;
+}
+
+#dropdown_list li {
+    list-style-type: none;
+    padding: 5px;
+}
+
+#dropdown_list li.highlighted {
+    background: #4bd046;
+    color: black;
+}
+
 .obj .border {
     fill: black;
     stroke: #0b560b;

pd/nw/css/subdued.css

@@ -221,6 +221,46 @@ text {
     fill: #9fc79f;
 }
 
+/* for dropdown box we want to visually distinguish boxes that output
+   the index from boxes that output the value. For now we do that by
+   stroking the arrow for boxes that output an index. For boxes that
+   output the value we don't need a CSS rule, as the arrow will be filled
+   black by default */
+.atom .index_arrow {
+    stroke: black;
+    stroke-width: 1;
+    fill: none;
+}
+
+/* gatom "activated" text (i.e., when it has the keyboard focus) */
+.atom.activated text {
+    fill: red;
+}
+
+#dropdown_list {
+    position: absolute;
+    border-width: 1px;
+    border-style: solid;
+    border-color: #b1d3b1;
+    cursor: pointer;
+}
+
+#dropdown_list ol {
+    list-style-position: inside;
+    margin: 0;
+    padding: 0;
+    background: #9fc79f;
+}
+
+#dropdown_list li {
+    list-style-type: none;
+    padding: 5px;
+}
+
+#dropdown_list li.highlighted {
+    background: #c3c3c3;
+}
+
 .obj .border {
     fill: #c0dcc0;
     stroke: #666666;

pd/nw/css/vanilla.css

@@ -215,6 +215,46 @@ text {
     fill: none;
 }
 
+/* for dropdown box we want to visually distinguish boxes that output
+   the index from boxes that output the value. For now we do that by
+   stroking the arrow for boxes that output an index. For boxes that
+   output the value we don't need a CSS rule, as the arrow will be filled
+   black by default */
+.atom .index_arrow {
+    stroke: black;
+    stroke-width: 1;
+    fill: none;
+}
+
+/* gatom "activated" text (i.e., when it has the keyboard focus) */
+.atom.activated text {
+    fill: red;
+}
+
+#dropdown_list {
+    position: absolute;
+    border-width: 1px;
+    border-style: solid;
+    border-color: black;
+    cursor: pointer;
+}
+
+#dropdown_list ol {
+    list-style-position: inside;
+    margin: 0;
+    padding: 0;
+    background: white; 
+}
+
+#dropdown_list li {
+    list-style-type: none;
+    padding: 5px;
+}
+
+#dropdown_list li.highlighted {
+    background: #c3c3c3;
+}
+
 .obj .border {
     fill: none;
     stroke: black;

pd/nw/css/vanilla_inverted.css

@@ -226,6 +226,52 @@ text {
     fill: none;
 }
 
+/* for dropdown box we want to visually distinguish boxes that output
+   the index from boxes that output the value. For now we do that by
+   stroking the arrow for boxes that output an index. For boxes that
+   output the value we don't need a CSS rule, as the arrow will be filled
+   black by default */
+.atom .index_arrow {
+    stroke: white;
+    stroke-width: 1;
+    fill: none;
+}
+
+.atom .value_arrow {
+    fill: white;
+}
+
+/* gatom "activated" text (i.e., when it has the keyboard focus) */
+.atom.activated text {
+    fill: red;
+}
+
+#dropdown_list {
+    position: absolute;
+    border-width: 1px;
+    border-style: solid;
+    border-color: white;
+    cursor: pointer;
+    color: white;
+}
+
+#dropdown_list ol {
+    list-style-position: inside;
+    margin: 0;
+    padding: 0;
+    background: black;
+}
+
+#dropdown_list li {
+    list-style-type: none;
+    padding: 5px;
+}
+
+#dropdown_list li.highlighted {
+    background: #c3c3c3;
+    color: black;
+}
+
 .obj .border {
     fill: none;
     stroke: white;

pd/nw/dialog_gatom.html

@@ -7,7 +7,7 @@
     <div class="container">
     <form> 
       <fieldset> 
-        <legend data-i18n="gatom.prop.gatom"></legend> 
+        <legend id="dialog_header"></legend>
 
         <table class="pairs">
           <tr class="width prop">
@@ -45,6 +45,22 @@
                      onchange="update_attr(this)">
             </td>
           </tr>
+
+          <tr class="outtype prop">
+            <td>
+              <label data-i18n="[title]gatom.prop.dropdown_outtype_tt">
+                <span data-i18n="gatom.prop.dropdown_outtype"></span>
+              </label>
+            </td>
+            <td colspan="3"
+                data-i18n="[title]gatom.prop.dropdown_outtype_tt">
+              <select id="outtype_select"
+                      onchange="update_dropdown_outtype(this);">
+                <option>index</option>
+                <option>value</option>
+              </select>
+            </td>
+          </tr>
           <tr>
             <td>
               <label data-i18n="[title]iem.prop.send_tt">
@@ -215,12 +231,17 @@ function update_attr(elem) {
     new_attrs[elem.name] = elem.value;
 }
 
+function update_dropdown_outtype(elem) {
+    new_attrs.outtype = elem.selectedIndex;
+}
+
 function send_params(attrs, create_undo_point) {
     //pdgui.post("we're applying gatom changes!");
+    var gatom = attrs.name === "atom";
     pdgui.pdsend(pd_object_callback, "param",
         +attrs.width,
-        +attrs.draglo,
-        +attrs.draghi,
+        gatom ? +attrs.draglo : +attrs.outtype,
+        gatom ? +attrs.draghi : 0,
         gatom_escape(attrs.label),
         +attrs.labelpos,
         gatom_escape(attrs.receive_symbol),
@@ -266,9 +287,20 @@ function register_window_id(gfxstub, attributes) {
     var attr;
     pd_object_callback = gfxstub;
     add_events(gfxstub);
+
+    // before translating, set the header based on class name:
+    document.querySelector("#dialog_header")
+        .setAttribute("data-i18n", "gatom.prop." +
+            (attributes.name === "dropdown" ? "dropdown" : "gatom"));
+
     translate_form();
     populate_form(attributes);
 
+    // hide outtype select for "dropdown", or draglo/hi for "gatom"
+    document.querySelector(attributes.name === "atom" ? ".outtype" : ".draglo")
+        .style.setProperty("display", "none");
+
+
     // Hack... change incoming "-" to empty string
     if (attributes.label === "-") { attributes.label = ""; }
     if (attributes.send_symbol === "-") { attributes.send_symbol= ""; }
@@ -280,6 +312,7 @@ function register_window_id(gfxstub, attributes) {
             new_attrs[attr] = attributes[attr];
         }
     }
+
     old_attrs = attributes;
     // We don't turn on rendering of the "container" div until
     // We've finished displaying all the spans and populating the
@@ -320,8 +353,12 @@ function get_elem(name) {
 function populate_form(attributes) {
     var label, snd, rcv, labelpos, i, radios;
     get_elem("width").value = attributes.width;
-    get_elem("draglo").value = attributes.draglo;
-    get_elem("draghi").value = attributes.draghi;
+    if (attributes.name === "atom") {
+        get_elem("draglo").value = attributes.draglo;
+        get_elem("draghi").value = attributes.draghi;
+    } else {
+        get_elem("outtype_select").selectedIndex = attributes.outtype;
+    }
     label = attributes.label;
     get_elem("label").value = gatom_unescape(label);
     snd = attributes.send_symbol;

pd/nw/locales/de/translation.json

@@ -79,6 +79,7 @@
   "gatom": {
     "prop": {
       "gatom": "Atom-Box",
+      "dropdown": "Ausgezähltwunderbox",
       "label": "Etikett",
       "label_left": "links",
       "label_right": "rechts",
@@ -89,6 +90,8 @@
       "label_bottom": "unten",
       "label_left": "links",
       "label_right": "rechts",
+      "dropdown_outtype": "output",
+      "dropdown_outtype_tt": "whether to output the index or the value",
       "width": "Breite",
       "width_tt": "Breite (in Zeichen)"
     }
@@ -195,6 +198,8 @@
     "symbol_tt": "Füge dem Patch ein Feld zur Eingabe und Anzeige von Symbolen hinzu",
     "comment": "Kommentar",
     "comment_tt": "Füge dem Patch einen Kommentar hinzu",
+    "dropdown": "Dropdown",
+    "dropdown_tt": "Dropdown menu",
     "bang": "Bang",
     "bang_tt": "Füge dem Patch einen Taster zum Senden von Bang-Nachrichten hinzu",
     "toggle": "Toggle",

pd/nw/locales/en/translation.json

@@ -79,6 +79,7 @@
   "gatom": {
     "prop": {
       "gatom": "atom box",
+      "dropdown": "dropdown menu",
       "label": "label",
       "label_left": "left",
       "label_right": "right",
@@ -89,6 +90,8 @@
       "label_bottom": "bottom",
       "label_left": "left",
       "label_right": "right",
+      "dropdown_outtype": "output",
+      "dropdown_outtype_tt": "whether to output the index or the value",
       "width": "width",
       "width_tt": "width (in characters)"
     }
@@ -195,6 +198,8 @@
     "symbol_tt": "Add a box to type and display a symbol on the canvas",
     "comment": "Comment",
     "comment_tt": "Write a comment on the canvas",
+    "dropdown": "Dropdown",
+    "dropdown_tt": "Dropdown menu",
     "bang": "Bang",
     "bang_tt": "Add a graphical button to the canvas for sending bang messages",
     "toggle": "Toggle",

pd/nw/pd_canvas.html

@@ -47,6 +47,9 @@
         <span data-i18n="canvas.find.search"></span>
       </button>
     </div>
+    <div style="display:none;" id="dropdown_list" class="noselect">
+      <ol></ol>
+    </div>
     <dialog id="save_before_quit">
       <h4><span data-i18n="canvas.save_dialog.prompt"></span>
         <span id="save_before_quit_filename"></span>?

pd/nw/pd_canvas.js

@@ -197,6 +197,10 @@ var canvas_events = (function() {
             svg.setAttribute("width", w);
             svg.setAttribute("height", h);
         },
+        dropdown_index_to_pd = function(elem) {
+            pdgui.pdsend(elem.getAttribute("data-callback"),
+                elem.querySelector(".highlighted").getAttribute("data-index"));
+        },
         events = {
             mousemove: function(evt) {
                 //pdgui.post("x: " + evt.pageX + " y: " + evt.pageY +
@@ -460,6 +464,36 @@ var canvas_events = (function() {
                 // Set last state (none doesn't count as a state)
                 //pdgui.post("previous state is " + canvas_events.get_previous_state());
                 canvas_events[canvas_events.get_previous_state()]();
+            },
+            dropdown_menu_mousedown: function(evt) {
+                var select_elem = document.querySelector("#dropdown_list");
+                dropdown_index_to_pd(select_elem);
+                select_elem.style.setProperty("display", "none");
+                canvas_events.normal();
+            },
+            dropdown_menu_mouseup: function(evt) {
+                var i, select_elem;
+                if (evt.target.parentNode
+                    && evt.target.parentNode.parentNode
+                    && evt.target.parentNode.parentNode.id === "dropdown_list") {
+                    select_elem = document.querySelector("#dropdown_list");
+                    dropdown_index_to_pd(select_elem);
+                    select_elem.style.setProperty("display", "none");
+                    canvas_events.normal();
+                }
+            },
+            dropdown_menu_mouseover: function(evt) {
+                var li_array;
+                if (evt.target.parentNode
+                    && evt.target.parentNode.parentNode
+                    && evt.target.parentNode.parentNode.id === "dropdown_list") {
+                    li_array = evt.target.parentNode.querySelectorAll('li');
+                    li_array.forEach(function(e) {
+                        e.classList.remove("highlighted");
+                    });
+                    evt.target.classList.add("highlighted");
+                }
+                // hide the dropdown menu <div> thingy
             }
         },
         utils = {
@@ -701,6 +735,12 @@ var canvas_events = (function() {
             state = "floating_text";
             set_edit_menu_modals(false);
         },
+        dropdown_menu: function() {
+            this.none