Commit 36879529 authored by Jonathan Wilkes's avatar Jonathan Wilkes
Browse files

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

parent 2667dfa5
......@@ -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;
......
......@@ -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
......
......@@ -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;
......
......@@ -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;
......
......@@ -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;
......
......@@ -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;
......
......@@ -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;
......
......@@ -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;
......
......@@ -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;
......
......@@ -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",
......
......@@ -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",
......
......@@ -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>?
......
......@@ -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");
});