refactor web

ycast/static/script.js

@@ -1,33 +1,12 @@
-
 window.onload = function () {
-    category = document.getElementById('id_category').value;
-    param = document.getElementById('id_param').value;
-    requestStationList(category, param);
-    requestStationList('', '', true);
-}
+    document.getElementById('idRequestSrc').value = 'recently';
+    document.getElementById('idLanOrCountSelect').disabled = true;
+    var requestSrc = document.getElementById('idRequestSrc').value;
+    var param = document.getElementById('idLanOrCountSelect').value;
+    requestStationList(requestSrc, param, false);
 
-
-function initSearchStation() {
-    var stationsearch = document.getElementById('stationsearch');
-    stationsearch.value = '';
-    stationsearch.onkeyup = function (event) {
-        if(event.code == 'Backspace')
-            stationsearch.value = '';
-        var filter = stationsearch.value.toUpperCase();
-        document.getElementById('stationcount').textContent = refreshFilteredList(
-                document.getElementById('stationList'), filter, false );
-    }
-}
-
-
-function initSearchBookmark() {
-    bookmarksearch = document.getElementById('idCategory');
-    bookmarksearch.value = '';
-    bookmarksearch.onkeyup = function (event) {
-        if(event.code == 'Backspace')
-            document.getElementById('idCategory').value = '';
-        refreshFilteredList(document.getElementById("bookmarkList"), document.getElementById('idCategory').value, true);
-    }
+    requestStationList('', '', true);
+    setBookmarkTopicList();
 }
 
 
@@ -39,7 +18,7 @@ function createItem(name, icon, description) {
     var itemicon = document.createElement("div");
     itemicon.className = "itemicon";
 
-    if (icon.length > 0){
+    if (icon.length > 0) {
         var itemiconimg = document.createElement("img");
         itemiconimg.src = icon;
         itemiconimg.className = "itemicon";
@@ -50,8 +29,10 @@ function createItem(name, icon, description) {
     itemtext.className = "itemtext";
     var h4text = document.createElement("h4");
     h4text.textContent = name;
+    h4text.id = 'name'
     var desc = document.createElement("p");
     desc.textContent = description;
+    desc.id = 'description';
 
 
     itemtext.appendChild(h4text);
@@ -64,7 +45,7 @@ function createItem(name, icon, description) {
 }
 
 
-function requestStationList(category, param, isbookmarklist = false) {
+function requestStationList(category, param, isbookmarklist) {
     var url = 'api/stations?category=' + category;
     var id_listnode = "stationList";
     var countall = 0;
@@ -86,8 +67,8 @@ function requestStationList(category, param, isbookmarklist = false) {
     var myList = myOldList.cloneNode(false);
     // First Elemet is empty (workaround <ul> needs a <li> element)
     let listItemEmpty = document.createElement('li');
-    listItemEmpty.appendChild(createItem('','', ''));
-    listItemEmpty.dataset.isemptyelement = true;
+    listItemEmpty.appendChild(createItem('<<< loading >>>', '', ''));
+    listItemEmpty.dataset.isemptyelement = 'true';
     listItemEmpty.hidden = false;
     myList.appendChild(listItemEmpty);
     myOldList.parentNode.replaceChild(myList, myOldList);
@@ -102,65 +83,70 @@ function requestStationList(category, param, isbookmarklist = false) {
                     createItem(station.name, station.icon, station.description)
                 );
                 listItem.dataset.json = JSON.stringify(station);
-                if(isbookmarklist){
+                if (isbookmarklist) {
                     listItem.dataset.search = (station.description);
-                    listItem.onclick = function (event) {deleteElement(event,listItem)};
+                    listItem.onclick = function (event) {
+                        deleteElement(event, listItem)
+                    };
                 } else {
                     listItem.dataset.search = (station.name + '#' + station.description).toUpperCase();
-                    listItem.onclick = function (event) {copyElementToBookmark(event,listItem)};
+                    listItem.onclick = function (event) {
+                        copyElementToBookmark(event, listItem)
+                    };
                 }
                 listItem.dataset.category = station.description;
-                listItem.dataset.emptyelement = false;
+                listItem.dataset.isemptyelement = 'false';
                 myList.appendChild(listItem);
                 if (listItemEmpty) listItemEmpty.hidden = true;
             }
-            if(isbookmarklist) {
-                setBookmarkCategoryList();
+            //            if (listItemEmpty) listItemEmpty.getElementById('name').textContent = '<empty>';
+            if (isbookmarklist) {
+                setBookmarkTopicList();
             } else {
                 document.getElementById('stationcount').textContent = countall + '/' + countall;
             }
 
-         })
+        })
         .catch(console.error);
-    initSearchStation();
-    initSearchBookmark();
 }
 
 
-function deleteElement(event, objElem){
-    if(objElem) {
+function deleteElement(event, objElem) {
+    if (objElem) {
         objElem.remove();
-        refreshFilteredList(document.getElementById("bookmarkList"), document.getElementById('idCategory').value, true);
-        setBookmarkCategoryList();
+        refreshFilteredList(document.getElementById("bookmarkList"), document.getElementById('idTopic').value, true);
+        setBookmarkTopicList();
         saveBookmarks();
     }
 }
 
 
-function copyElementToBookmark(event, objElem){
-    if(objElem) {
+function copyElementToBookmark(event, objElem) {
+    if (objElem) {
         let myList = document.getElementById("bookmarkList")
         let listItem = document.createElement('li');
         let station = JSON.parse(objElem.dataset.json);
-        let bookmarksearch = document.getElementById('idCategory');
-        if(bookmarksearch.value.length == 0) bookmarksearch.value = 'Others'
-        station.description = bookmarksearch.value;
+        let topicElem = document.getElementById('idTopic');
+        if (topicElem.value.length == 0) topicElem.value = 'Others'
+        station.description = topicElem.value;
         listItem.appendChild(
-            createItem(station.name , station.icon, station.description)
+            createItem(station.name, station.icon, station.description)
         );
         listItem.dataset.json = JSON.stringify(station);
         listItem.dataset.search = station.description;
-        listItem.dataset.category =  station.description;
-        listItem.dataset.emptyelement = false;
-        listItem.onclick = function (event) {deleteElement(event,listItem)};
+        listItem.dataset.category = station.description;
+        listItem.dataset.isemptyelement = 'false';
+        listItem.onclick = function (event) {
+            deleteElement(event, listItem)
+        };
         myList.appendChild(listItem);
-        refreshFilteredList(document.getElementById("bookmarkList"), document.getElementById('idCategory').value, true);
-        setBookmarkCategoryList();
+        refreshFilteredList(document.getElementById("bookmarkList"), document.getElementById('idTopic').value, true);
+        setBookmarkTopicList();
         saveBookmarks();
     }
 }
 
-function refreshFilteredList(myListNode, filtertxt, chkEqual = false){
+function refreshFilteredList(myListNode, filtertxt, chkEqual) {
     var isEmpty = true;
     var myListAr = Array.from(myListNode.childNodes);
     var emptyElement = null;
@@ -168,22 +154,22 @@ function refreshFilteredList(myListNode, filtertxt, chkEqual = false){
     var countfiltered = 0;
     myListAr.forEach(function (listItem) {
         try {
-            if (listItem.dataset.isemptyelement){
+            if (listItem.dataset.isemptyelement === 'true') {
                 emptyElement = listItem;
             } else {
-                countall = countall+1;
-                let bfound = true;
+                countall = countall + 1;
+                var bfound = true;
                 if (filtertxt.length > 0) {
                     var searchval = listItem.dataset.search;
-                    if(chkEqual) {
+                    if (chkEqual) {
                         bfound = (searchval === filtertxt);
                     } else {
                         bfound = (searchval.indexOf(filtertxt) > -1);
                     }
                 }
-                if(bfound) {
+                if (bfound) {
                     countfiltered = countfiltered + 1;
-                    listItem.hidden =  false;
+                    listItem.hidden = false;
                     isEmpty = false;
                 } else {
                     listItem.hidden = true;
@@ -194,14 +180,20 @@ function refreshFilteredList(myListNode, filtertxt, chkEqual = false){
         }
     });
     if (emptyElement) emptyElement.hidden = !isEmpty;
-    return countfiltered + '/' +countall;
+    return countfiltered + '/' + countall;
 }
 
-function onInputSelect(e, objElem) {
+function checkOptionElement(optionsElementList, value) {
+    var optionList = Array.from(optionsElementList.childNodes);
+    return optionList.find(function (optionElem) {
+        return (optionElem.value === value)
+    })
+}
 
-    switch(objElem.id){
-        case 'id_category':
-            paramElem = document.getElementById('id_param')
+function onInputSelect(e, objElem) {
+    switch (objElem.id) {
+        case 'idRequestSrc':
+            paramElem = document.getElementById('idLanOrCountSelect')
             param = paramElem.value
             category = objElem.value
             switch (category) {
@@ -223,47 +215,51 @@ function onInputSelect(e, objElem) {
             }
             document.getElementById('stationcount').textContent = requestStationList(category, param);
             break;
-        case 'id_param':
-            document.getElementById('stationcount').textContent = requestStationList(
-                document.getElementById('id_category').value,
-                document.getElementById('id_param').value);
+        case 'idLanOrCountSelect':
+            if (checkOptionElement(document.getElementById('listLangOrCountry'), document.getElementById('idLanOrCountSelect').value)) {
+                document.getElementById('stationcount').textContent = requestStationList(
+                    document.getElementById('idRequestSrc').value,
+                    document.getElementById('idLanOrCountSelect').value);
+            }
             break;
 
-        case 'idCategory':
-            refreshFilteredList(document.getElementById("bookmarkList"), document.getElementById('idCategory').value, true);
+        case 'idTopic':
+            refreshFilteredList(document.getElementById("bookmarkList"), document.getElementById('idTopic').value, true);
             break;
 
         case 'stationsearch':
             document.getElementById('stationcount').textContent =
-            refreshFilteredList(document.getElementById('stationList'),
-            document.getElementById('stationsearch').value.toUpperCase(), false );
+                refreshFilteredList(document.getElementById('stationList'),
+                    document.getElementById('stationsearch').value.toUpperCase(), false);
             break;
-   }
+    }
 }
 
-function setBookmarkCategoryList() {
-    var categoryList = [];
+function setBookmarkTopicList() {
+    var topicList = [];
     var bookmarkList = Array.from(document.getElementById("bookmarkList").childNodes);
     bookmarkList.forEach(function (listItem) {
         try {
-            if(!listItem.dataset.isemptyelement) {
-                var category = listItem.dataset.category;
-                if (!categoryList.find(function(arElem) { return (category == arElem);})) {
-                    categoryList.push(category);
+            if (listItem.dataset.isemptyelement === 'false') {
+                var topic = listItem.dataset.category;
+                if (!topicList.find(function (arElem) {
+                        return (topic === arElem);
+                    })) {
+                    topicList.push(topic);
                 }
             }
         } catch (e) {
             console.error(listItem, e)
         }
     })
-    if (categoryList.length >0) {
-        var myOldList = document.getElementById('categorylist');
+    if (topicList.length > 0) {
+        var myOldList = document.getElementById('topicList');
         var myList = myOldList.cloneNode(false);
         myOldList.parentNode.replaceChild(myList, myOldList);
-    
-        for (const categ of categoryList) {
+
+        for (const topic of topicList) {
             var option = document.createElement('option');
-            option.value = categ;
+            option.value = topic;
             myList.appendChild(option);
         }
     }
@@ -271,11 +267,11 @@ function setBookmarkCategoryList() {
 
 
 function setParamlist() {
-    var category = document.getElementById('id_category').value
+    var category = document.getElementById('idRequestSrc').value
     var url = 'api/paramlist?category=' + category;
-    document.getElementById('id_param').value = '';
+    document.getElementById('idLanOrCountSelect').value = '';
     var myRequest = new Request(url);
-    var myOldList = document.getElementById('paramlist');
+    var myOldList = document.getElementById('listLangOrCountry');
     var myList = myOldList.cloneNode(false);
     myOldList.parentNode.replaceChild(myList, myOldList);
 
@@ -290,37 +286,65 @@ function setParamlist() {
             }
         })
         .catch(console.error);
-    document.getElementById('id_param').disabled = false;
+    document.getElementById('idLanOrCountSelect').disabled = false;
 }
 
 function keyUpEvent(e, objElem) {
+    if (e instanceof KeyboardEvent) {
+        if (e.code === 'Backspace') {
+            objElem.value = '';
+            switch (objElem.id) {
+                case 'stationsearch':
+                    document.getElementById('stationcount').textContent =
+                        refreshFilteredList(document.getElementById('stationList'),
+                            document.getElementById('stationsearch').value.toUpperCase(), false);
+                    break;
+                case 'idTopic':
+                    refreshFilteredList(document.getElementById("bookmarkList"), document.getElementById('idTopic').value, true);
+                    break;
+
+                default:
+                    break;
+            }
+            return;
+        }
+    }
     switch (objElem.id) {
-        case 'id_param':
+        case 'idLanOrCountSelect':
             param = objElem.value;
-            category = document.getElementById('id_category').value;
+            category = document.getElementById('idRequestSrc').value;
             if (e instanceof KeyboardEvent) {
                 // it is a keyboard event!
                 if (e.code == 'Enter') {
-                    document.getElementById('stationcount').textContent = requestStationList(category, param);
-                } else if (e.code == 'Backspace')
-                    this.value = '';
+                    if (checkOptionElement(document.getElementById('listLangOrCountry'), param)) {
+                        document.getElementById('stationcount').textContent = requestStationList(category, param);
+                    }
+                }
             } else if (e instanceof Event) {
                 // one Element from selection is selected
                 document.getElementById('stationcount').textContent = requestStationList(category, param);
             }
             break;
+        case 'stationsearch':
+            document.getElementById('stationcount').textContent =
+                refreshFilteredList(document.getElementById('stationList'),
+                    document.getElementById('stationsearch').value.toUpperCase(), false);
+            break;
+        case 'idTopic':
+            refreshFilteredList(document.getElementById("bookmarkList"), document.getElementById('idTopic').value, true);
+            break;
         default:
             break;
     }
 }
 
-function saveBookmarks(){
-    var bookmarkJsonlist=[]
+function saveBookmarks() {
+    var bookmarkJsonlist = []
     var bookmarkList = Array.from(document.getElementById("bookmarkList").childNodes);
     bookmarkList.forEach(function (listItem) {
-        if(!listItem.dataset.isemptyelement) {
+        if (listItem.dataset.isemptyelement === 'false') {
             station = JSON.parse(listItem.dataset.json)
-            bookmarkJsonlist.push( station )
+            bookmarkJsonlist.push(station)
         }
     })
     var data = JSON.stringify(bookmarkJsonlist)
@@ -335,4 +359,4 @@ function saveBookmarks(){
         }
     };
     xhr.send(data);
-}
+}

ycast/static/style.css

@@ -1,3 +1,15 @@
+*:focus{ 
+    outline: 4px solid red;
+}
+
+input: {
+    margin: 0.4rem;
+}
+
+li:hover, input:hover {
+    background-color: dodgerblue;
+}
+
 body {
     font-family: sans-serif;
 }
@@ -78,14 +90,11 @@ body {
     display: inline-flex;
     border: 2px #eee solid;
     margin: 0.1rem;
-    min-height: 2.6rem;
-    min-width: 19rem;
+    height: 2.6rem;
+    width: 100%;
     align-items: center;
 }
 
-.item:hover {
-    background-color: beige;
-}
 
 .itemicon {
     display: flex;

ycast/templates/index.html

@@ -14,8 +14,8 @@
         <div class="header">
             <h2>YCast advanced</h2>
             <div>
-                <label for="id_category">station-source:</label>
-                <select tabindex="1" id="id_category" name="category" oninput="onInputSelect(event, this)">
+                <label for="idRequestSrc">station-source:</label>
+                <select tabindex="1" id="idRequestSrc" name="category" oninput="onInputSelect(event, this)">
                     <option value="recently">recently</option>
                     <option value="voted">voted</option>
                     <option value="language">language</option>
@@ -23,11 +23,9 @@
                 </select>
             </div>
             <div>
-                <label for="id_param">language or country:</label>
-                <input tabindex="2" list="paramlist" id="id_param" autocomplete=off disabled=true
-                       onclick="this.value=''" onfocus="this.value=''"
-                       onkeyup="keyUpEvent(event,this)" oninput="onInputSelect(event, this)">
-                <datalist id="paramlist">
+                <label for="idLanOrCountSelect">language or country:</label>
+                <input type="search" tabindex="2" list="listLangOrCountry" id="idLanOrCountSelect" autocomplete=off onclick="this.value=''" onfocus="this.value=''" onkeyup="keyUpEvent(event,this)" oninput="onInputSelect(event, this)">
+                <datalist id="listLangOrCountry">
                 </datalist>
             </div>
         </div>
@@ -36,9 +34,9 @@
                 <label class="miniinfo" id="stationcount">0/0</label>
                 <h3>Stations</h3>
                 <label for="stationsearch">search:</label>
-                <input tabindex="3" type="search" id="stationsearch" oninput="onInputSelect(event, this)">
+                <input type="search" tabindex="3" type="search" id="stationsearch" onkeyup="keyUpEvent(event,this)" oninput="onInputSelect(event, this)">
             </div>
-            <div class="contentitems" title="Clicking on this item copies it as a bookmark">
+            <div class="contentitems" title="Clicking on this item copies it as a bookmark" tabindex="4">
                 <ul id="stationList">
                 </ul>
             </div>
@@ -46,17 +44,16 @@
         <div class="content">
             <div class="contentheader">
                 <h3>Bookmarks</h3>
-                <label for="idCategory">category:</label>
-                <input tabindex="10000" list="categorylist" id="idCategory"
-                       onfocus="this.value=''" onclick="setBookmarkCategoryList()" oninput="onInputSelect(event, this)">
-                <datalist id="categorylist">
+                <label for="idTopic">category:</label>
+                <input type="search" tabindex="10000" list="topicList" id="idTopic" onkeyup="keyUpEvent(event,this)" oninput="onInputSelect(event, this)">
+                <datalist id="topicList">
                     <option value="Actual">
                     <option value="Pop">
                     <option value="Classics">
                 </datalist>
 
             </div>
-            <div class="contentitems" title="Clicking on this item will delete it">
+            <div class="contentitems" title="Clicking on this item will delete it" tabindex="5">
                 <ul id="bookmarkList">
                 </ul>
             </div>