update js

public_html/javascript/functions.js

@@ -25,6 +25,7 @@ const OUT_ID_APPS='app-section';
 const OUT_ID_TAGS='tag-section';
 const ID_TAGINPUT='E_TAGS';
 
+
 // callback object after changing a tag filter
 const FILTER_CALLBACK="oUbdApps.update()";
 
@@ -34,6 +35,7 @@ const FILTER_CALLBACK="oUbdApps.update()";
 
 var AM_TAGURL=false;
 var AM_PRETTYURL=false;
+var AM_TAGLIST={};
 
 // ----------------------------------------------------------------------
 // FUNCTIONS
@@ -104,44 +106,29 @@ function _2digits(i){
  * callback function of a button with a tagname
  * @param {string} tagname 
  */
-function tagToggle(tagname){
-    var o=document.getElementById(ID_TAGINPUT);
-    var sLast=o.value;
-    var s=sLast;
-    var re = new RegExp(",*"+tagname);
-    var s2=s.replace(re, "");
-    if(s2!==s) {
-        s=s.replace(re, "")
-        s=s.replace(/^,/, "");
+ function cbTagToggle(bClear=false){
+    var sReturn='';
+    var sLast=document.getElementById(ID_TAGINPUT).value;
+    var aCB=document.querySelectorAll('#'+OUT_ID_TAGS+' input[type=checkbox]');
+    for(var i=0; i<aCB.length; i++){
+        if(aCB[i].checked && bClear==false){
+            sReturn+=(sReturn ? ',' : '') + aCB[i].value;
         } else {
-        s+=(s ? "," : "" ) + tagname;
+            aCB[i].checked=false;
         }
-
-    if(s!==sLast){
-        o.value=s;
-        // execute update of the app list
-        eval(FILTER_CALLBACK);
     }
-}
-
-/**
- * clear all tags
- * callback function of the [x] button
- */
-function tagClear(){
-    var o=document.getElementById(ID_TAGINPUT);
-    o.value="";
-
-    // execute update of the app list
+    if(sLast!==sReturn){
+        document.getElementById(ID_TAGINPUT).value=sReturn;
         eval(FILTER_CALLBACK);
     }
+}
 
 /**
  * called from getTags
  * @param {object} aData JSON Response
  * @returns 
  */
-function _getTaglist(aData){
+function _renderTaglist(aData){
     var sReturn='';
     var sTags='';
     if(!aData['tags']){
@@ -149,17 +136,32 @@ function _getTaglist(aData){
     }
 
     // sReturn+='<code>'+sData+'</code><br>';
-    sReturn+='<input id="'+ID_TAGINPUT+'" type="text" size="20" value="'+AM_TAGS+'"'
-            +' onkeyup="eval(FILTER_CALLBACK)"'
-            +' onchange="eval(FILTER_CALLBACK)"'
-            +'>'
-        +'<button onclick="tagClear();return false;"> ❌ </button><br>'
-        ;
 
+    let _TAGLIST={};
+    var sTags='';
     for (var s in aData['tags']){
-        sTags+=(sTags ? ",": "") + aData['tags'][s];
-        sReturn+='<button onclick="tagToggle(\''+aData['tags'][s]+'\'); return false;">'+AM_ICONS['tag'] + ' ' + aData['tags'][s]+'</button>'
+        var sTag=aData['tags'][s];
+        var sId='cb-tag-'+sTag;
+        var bEnabled=AM_TAGS.indexOf(sTag)>-1;
+        _TAGLIST[s]=bEnabled;
+        sReturn+='<input type="checkbox" id="'+sId+'" '
+                +(_TAGLIST[s] ? 'checked="checked" ' : '')
+                +'onchange="cbTagToggle();" '
+                +'value="'+aData['tags'][s]
+                +'">'
+            +'<label for="'+sId+'" >'+AM_ICONS['tag'] + ' ' + aData['tags'][s]+'</label> '
+            ;
+        sTags+=(_TAGLIST[s] 
+            ? (sTags ? ',' : '' ) + sTag
+            : ''
+            );
     }
+    sReturn+='<button onclick="cbTagToggle(true);return false;"> ❌ </button>'
+    // sReturn+='<input id="'+ID_TAGINPUT+'" type="text" size="20" value="'+AM_TAGS+'"'+'>'
+    sReturn+='<input id="'+ID_TAGINPUT+'" type="hidden" size="20" value="'+AM_TAGS+'">'
+    AM_TAGLIST=_TAGLIST;
+    // cbTagToggle();
+
     return sReturn;
 }
 
@@ -277,7 +279,7 @@ var oUbdTag=new ubd(
         'domid':     OUT_ID_TAGS,
         'url':       _getUrlForTags(),
         'header':    { "headers": oHeaders },
-        'renderer':  _getTaglist,
+        'renderer':  _renderTaglist,
         'ttl':       0,
     }
 );
@@ -295,7 +297,7 @@ var oUbdApps=new ubd(
 
 
 
-// fill in initial values
+// fill in initial values ... and update based on given ttl
 oUbdTag.update();
 oUbdApps.update();