data bindings for comboLookup

priv/js/comboLookup.js

@@ -1,61 +1,66 @@
-function comboClear(dom) { qi('comboContainer_' + dom).style.display = 'none'; activeCombo = undefined; currentItem = undefined };
-function comboSelect(dom, row, feed, mod) {
+function comboClear(dom) {
+  let elem = qi('comboContainer_' + dom)
+  if (elem) {elem.style.display = 'none'}
+  activeCombo = undefined; currentItem = undefined;
+}
+
+function comboSelect(dom, row, feed, mod, id) {
   let elem = qi(dom); comboClear(dom);
-  //  elem.value = event.currentTarget.innerHTML; 
+  elem.setAttribute("data-bind", qi(id).getAttribute('data-bind'));
   elem.value = row;
-  elem.scrollIntoView();
   elem.style.backgroundColor = 'white';
   direct(tuple(atom('comboSelect'), string(dom), string(row), string(feed), atom(mod)));
 }
+
 function comboLostFocus(e) { }
 function comboOnFocus(e) { }
-function comboLookupKeydown(dom, feed, mod) { 
+function comboLookupKeydown(dom, feed, mod) {
   var char = event.which || event.keyCode;
-  if (activeCombo && currentItem && [37, 38, 39, 40, 13, 32].includes(char)) { event.preventDefault() } 
+  if (char == 40 && !activeCombo && qi(dom).value == '') {
+    activeCombo = dom;
+    currentItem = undefined;
+    direct(tuple(atom('comboKey'), atom('all'), string(dom), string(feed), atom(mod)));
+    return
+  }
+  if (activeCombo && [38, 40].includes(char)) {
+     event.preventDefault();
+     console.log('Keycode: ' + char + ", DOM: " + dom);
+     if (char == 40) { set_focus( currentItem && ( !cycleEnabled || currentItem.nextSibling) ? currentItem.nextSibling : qi('comboContainer_' + dom).firstChild, true) }
+     if (char == 38) { set_focus( currentItem && ( !cycleEnabled || currentItem.previousSibling) ? currentItem.previousSibling : qi('comboContainer_' + dom).lastChild, true) }
+  }
 }
 
 function comboLookupKeyup(dom, feed, mod) {
   var char = event.which || event.keyCode;
-  if (char == 27) { qi(dom).value = ''; comboClear(dom); return}
-  if (!activeCombo && char == 40) {
-     activeCombo = dom;
-     direct(tuple(atom('comboKeyup'), atom('all'), string(dom), string(feed), atom(mod)));
-    return
-  }
-  if ([13, 32].includes(char) && currentItem) { currentItem.click(); return }
-  
-  if (activeCombo && [37, 38, 39, 40].includes(char)) {
-    if (char == 37) { set_focus(qi('comboContainer_' + dom).firstChild) }
-    if (char == 39) { set_focus(qi('comboContainer_' + dom).lastChild) }
-    if (char == 40) { set_focus( currentItem ? currentItem.nextSibling : qi('comboContainer_' + dom).firstChild) }
-    if (char == 38) { set_focus( currentItem ? currentItem.previousSibling : qi('comboContainer_' + dom).lastChild) }
-    
-    console.log('keyboard working with dropdown: ' + char);
-  }
+  if (char == 27 || (char == 8 || char == 46) && qi(dom).value == '') { qi(dom).value = ''; comboClear(dom); return}
+  if (char == 13 && currentItem) { currentItem.click(); return }
+  if ([33, 34, 35, 36, 37, 39].includes(char)) { return }
+  if (activeCombo && [38, 40].includes(char)) { return }
   else {
     activeCombo = dom;
-    direct(tuple(atom('comboKeyup'), querySource(dom), string(dom), string(feed), atom(mod)));
+    currentItem = undefined;
+    direct(tuple(atom('comboKey'), bin(qi(dom).value), string(dom), string(feed), atom(mod)));
   }
 }
 
-function set_focus(elem) {
-  
+function comboLookupMouseMove(dom) { set_focus(event.target.closest('.dropdown-item'), false) }
+function comboLookupMouseOut(dom) { }
+function set_focus(elem, scroll) {
   if (elem) {
-    if(currentItem) {currentItem.style.backgroundColor = "white"}
-    // elem.style.backgroundColor = "cornflowerblue"
-    elem.style.backgroundColor = "pink"
-    elem.scrollIntoView()
+    if(currentItem) {currentItem.className = "dropdown-item"}
+    elem.className = "dropdown-item focus"
+    if (scroll==true) {elem.scrollIntoView({block: "center", inline: "nearest"})}
     currentItem = elem
   }
-  
 }
 
-
 document.addEventListener("click", () => {
   if (activeCombo && !event.target.closest('#comboContainer_' + activeCombo)) {
     qi(activeCombo).value = '';
     comboClear(activeCombo);
   }
 })
+
 var activeCombo = undefined
 var currentItem = undefined
+var cycleEnabled = false

priv/js/nitro.js

@@ -1,22 +1,32 @@
 // Nitrogen Compatibility Layer
 
+function unbase64(base64) {
+    var binary_string = window.atob(base64);
+    var len = binary_string.length;
+    var bytes = new Uint8Array(len);
+    for (var i = 0; i < len; i++) bytes[i] = binary_string.charCodeAt(i);
+    return bytes.buffer;
+}
+
 function direct(term) { ws.send(enc(tuple(atom('direct'),term))); }
 function validateSources() { return true; }
 function querySourceRaw(Id) {
     var val, el = document.getElementById(Id);
     if (!el) {
-       val = qs('input[name='+Id+']:checked'); val = val ? val.value : "";
+       val = qs('input[name='+Id+']:checked'); val = val ? bin(val.value) : bin("");
     } else switch (el.tagName) {
         case 'FIELDSET':
-            val = qs('[id="'+Id+'"]:checked'); val = val ? val.value : ""; break;
+            val = qs('[id="'+Id+'"]:checked'); val = val ? bin(val.value) : bin(""); break;
         case 'INPUT':
             switch (el.getAttribute("type")) {
                 case 'radio': case 'checkbox': val = qs('input[name='+Id+']:checked'); val = val ? val.value : ""; break;
-                case 'date': val = Date.parse(el.value);  val = val && new Date(val) || ""; break;
-                case 'calendar': val = pickers[el.id]._d || ""; break;
-                default: var edit = el.contentEditable;
-                    if (edit && edit === 'true') val = el.innerHTML;
-                    else val = el.value;
+                case 'date': val = Date.parse(el.value); val = val && new Date(val) || ""; break;
+                case 'text': var x = el.getAttribute('data-bind'); if (x) val=dec(unbase64(x)); break;
+                case 'calendar': var x = pickers[el.id]._d; val = tuple(number(x.getFullYear()),number(x.getMonth()+1),number(x.getDate())); break;
+                default:
+                    var edit = el.contentEditable;
+                    if (edit && edit === 'true') val = bin(el.innerHTML);
+                    else val = bin(el.value);
             }
             break;
         default:
@@ -29,29 +39,18 @@ function querySourceRaw(Id) {
             } else {
                 val = el.value;
                 switch (val) {
-                    case "true": val = new Boolean(true); break;
-                    case "false": val = new Boolean(false); break;
+                    case "true": val = atom('true'); break;
+                    case "false": val = atom('false'); break;
                 }
             }
     }
-    console.log("querySourceRaw:val:", val)
     return val;
 }
 
 function querySource(Id) {
     var qs = querySourceRaw(Id);
-    if (qs instanceof Date) {
-        return tuple(number(qs.getFullYear()),
-                     number(qs.getMonth() + 1),
-                     number(qs.getDate())); }
-    else if (qs instanceof Boolean) {
-        return atom(qs.valueOf()); }
-    else if (qs instanceof Array) {
-        return list.apply(null, qs.map(bin)); }
+    if (qs && qs.t && qs.v) return qs;
+    else if (qs instanceof Array) { return list.apply(null, qs.map(bin)); }
     else { return bin(qs); }
 }
 
-(function () {
-    window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
-        window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
-})();