Replace var with let/const.

frontends/ycdl_flask/static/js/api.js

@@ -6,8 +6,8 @@ api.channels = {};
 api.channels.add_channel =
 function add_channel(channel_id, callback)
 {
-    var url = "/add_channel";
+    const url = "/add_channel";
-    data = new FormData();
+    const data = new FormData();
     data.append("channel_id", channel_id);
     return common.post(url, data, callback);
 }
@@ -15,16 +15,16 @@ function add_channel(channel_id, callback)
 api.channels.delete_channel =
 function delete_channel(channel_id, callback)
 {
-    var url = `/channel/${channel_id}/delete`;
+    const url = `/channel/${channel_id}/delete`;
-    data = new FormData();
+    const data = new FormData();
     return common.post(url, data, callback);
 }
 
 api.channels.refresh_channel =
 function refresh_channel(channel_id, force, callback)
 {
-    var url = `/channel/${channel_id}/refresh`;
+    const url = `/channel/${channel_id}/refresh`;
-    data = new FormData();
+    const data = new FormData();
     data.append("force", force)
     return common.post(url, data, callback);
 }
@@ -32,8 +32,8 @@ function refresh_channel(channel_id, force, callback)
 api.channels.refresh_all_channels =
 function refresh_all_channels(force, callback)
 {
-    var url = "/refresh_all_channels";
+    const url = "/refresh_all_channels";
-    data = new FormData();
+    const data = new FormData();
     data.append("force", force)
     return common.post(url, data, callback);
 }
@@ -41,8 +41,8 @@ function refresh_all_channels(force, callback)
 api.channels.set_automark =
 function set_automark(channel_id, state, callback)
 {
-    var url = `/channel/${channel_id}/set_automark`;
+    const url = `/channel/${channel_id}/set_automark`;
-    data = new FormData();
+    const data = new FormData();
     data.append("state", state);
     return common.post(url, data, callback);
 }
@@ -66,8 +66,8 @@ api.videos = {};
 api.videos.mark_state =
 function mark_state(video_ids, state, callback)
 {
-    var url = "/mark_video_state";
+    const url = "/mark_video_state";
-    data = new FormData();
+    const data = new FormData();
     data.append("video_ids", video_ids);
     data.append("state", state);
     return common.post(url, data, callback);
@@ -76,8 +76,8 @@ function mark_state(video_ids, state, callback)
 api.videos.start_download =
 function start_download(video_ids, callback)
 {
-    var url = "/start_download";
+    const url = "/start_download";
-    data = new FormData();
+    const data = new FormData();
     data.append("video_ids", video_ids);
     return common.post(url, data, callback);
 }

frontends/ycdl_flask/static/js/common.js

@@ -5,8 +5,8 @@ common.INPUT_TYPES = new Set(["INPUT", "TEXTAREA"]);
 common._request =
 function _request(method, url, callback)
 {
-    var request = new XMLHttpRequest();
+    let request = new XMLHttpRequest();
-    var response = {
+    let response = {
         "completed": false,
     };
 
@@ -29,7 +29,7 @@ function _request(method, url, callback)
         }
         callback(response);
     };
-    var asynchronous = true;
+    let asynchronous = true;
     request.open(method, url, asynchronous);
     return request;
 }
@@ -61,7 +61,7 @@ function bind_box_to_button(box, button, ctrl_enter)
     Thanks Yaroslav Yakovlev
     http://stackoverflow.com/a/9343095
     */
-    var bound_box_hook = function(event)
+    let bound_box_hook = function(event)
     {
         if (event.key !== "Enter")
             {return;}
@@ -83,9 +83,9 @@ function create_message_bubble(message_area, message_positivity, message_text, l
     {
         lifespan = 8000;
     }
-    var message = document.createElement("div");
+    let message = document.createElement("div");
     message.className = "message_bubble " + message_positivity;
-    var span = document.createElement("span");
+    let span = document.createElement("span");
     span.innerHTML = message_text;
     message.appendChild(span);
     message_area.appendChild(message);
@@ -105,7 +105,7 @@ common.entry_with_history_hook =
 function entry_with_history_hook(event)
 {
     //console.log(event);
-    var box = event.target;
+    let box = event.target;
 
     if (box.entry_history === undefined)
         {box.entry_history = [];}
@@ -143,7 +143,7 @@ function entry_with_history_hook(event)
 common.html_to_element =
 function html_to_element(html)
 {
-    var template = document.createElement("template");
+    let template = document.createElement("template");
     template.innerHTML = html;
     return template.content.firstChild;
 }
@@ -162,16 +162,17 @@ function init_atag_merge_params()
         href: "?orderby=date"
         Result: "?filter=hello&orderby=date"
     */
-    var as = Array.from(document.getElementsByClassName("merge_params"));
     page_params = new URLSearchParams(window.location.search);
-    as.forEach(function(a){
+    let as = Array.from(document.getElementsByClassName("merge_params"));
-        var a_params = new URLSearchParams(a.search);
+    for (const a of as)
-        var new_params = new URLSearchParams();
+    {
+        let a_params = new URLSearchParams(a.search);
+        let new_params = new URLSearchParams();
         page_params.forEach(function(value, key) {new_params.set(key, value); });
         a_params.forEach(function(value, key) {new_params.set(key, value); });
         a.search = new_params.toString();
         a.classList.remove("merge_params");
-    });
+    }
 }
 
 common.init_button_with_confirm =
@@ -204,29 +205,29 @@ function init_button_with_confirm()
 
         data-holder-class: CSS class for the new span that holds the menu.
     */
-    var buttons = Array.from(document.getElementsByClassName("button_with_confirm"));
+    let buttons = Array.from(document.getElementsByClassName("button_with_confirm"));
-    buttons.forEach(function(button)
+    for (const button of buttons)
     {
         button.classList.remove("button_with_confirm");
 
-        var holder = document.createElement("span");
+        let holder = document.createElement("span");
         holder.classList.add("confirm_holder");
         holder.classList.add(button.dataset.holderClass || "confirm_holder");
         button.parentElement.insertBefore(holder, button);
         button.parentElement.removeChild(button);
 
-        var holder_stage1 = document.createElement("span");
+        let holder_stage1 = document.createElement("span");
         holder_stage1.classList.add("confirm_holder_stage1");
         holder_stage1.appendChild(button);
         holder.appendChild(holder_stage1);
 
-        var holder_stage2 = document.createElement("span");
+        let holder_stage2 = document.createElement("span");
         holder_stage2.classList.add("confirm_holder_stage2");
         holder_stage2.classList.add("hidden");
         holder.appendChild(holder_stage2);
 
-        var prompt;
+        let prompt;
-        var input_source;
+        let input_source;
         if (button.dataset.isInput)
         {
             prompt = document.createElement("input");
@@ -244,7 +245,7 @@ function init_button_with_confirm()
         delete button.dataset.prompt;
         delete button.dataset.promptClass;
 
-        var button_confirm = document.createElement("button");
+        let button_confirm = document.createElement("button");
         button_confirm.innerText = (button.dataset.confirm || button.innerText).trim();
         if (button.dataset.confirmClass === undefined)
         {
@@ -266,7 +267,7 @@ function init_button_with_confirm()
         delete button.dataset.confirmClass;
         delete button.dataset.isInput;
 
-        var button_cancel = document.createElement("button");
+        let button_cancel = document.createElement("button");
         button_cancel.innerText = button.dataset.cancel || "Cancel";
         button_cancel.className = button.dataset.cancelClass || "";
         holder_stage2.appendChild(button_cancel);
@@ -274,9 +275,9 @@ function init_button_with_confirm()
         delete button.dataset.cancelClass;
 
         // If this is stupid, let me know.
-        var confirm_onclick = button.dataset.onclick + `
+        let confirm_onclick = button.dataset.onclick + `
             ;
-            var holder = event.target.parentElement.parentElement;
+            let holder = event.target.parentElement.parentElement;
             holder.getElementsByClassName("confirm_holder_stage1")[0].classList.remove("hidden");
             holder.getElementsByClassName("confirm_holder_stage2")[0].classList.add("hidden");
         `
@@ -284,10 +285,10 @@ function init_button_with_confirm()
         button.removeAttribute("onclick");
         button.onclick = function(event)
         {
-            var holder = event.target.parentElement.parentElement;
+            let holder = event.target.parentElement.parentElement;
             holder.getElementsByClassName("confirm_holder_stage1")[0].classList.add("hidden");
             holder.getElementsByClassName("confirm_holder_stage2")[0].classList.remove("hidden");
-            var input = holder.getElementsByTagName("input")[0];
+            let input = holder.getElementsByTagName("input")[0];
             if (input)
             {
                 input.focus();
@@ -296,12 +297,12 @@ function init_button_with_confirm()
 
         button_cancel.onclick = function(event)
         {
-            var holder = event.target.parentElement.parentElement;
+            let holder = event.target.parentElement.parentElement;
             holder.getElementsByClassName("confirm_holder_stage1")[0].classList.remove("hidden");
             holder.getElementsByClassName("confirm_holder_stage2")[0].classList.add("hidden");
         }
         delete button.dataset.onclick;
-    });
+    }
 }
 
 common.init_enable_on_pageload =
@@ -312,28 +313,28 @@ function init_enable_on_pageload()
     the DOM has completed loading, give it the disabled attribute and the
     class "enable_on_pageload".
     */
-    var elements = Array.from(document.getElementsByClassName("enable_on_pageload"));
+    let elements = Array.from(document.getElementsByClassName("enable_on_pageload"));
-    elements.forEach(function(element)
+    for (const element of elements)
     {
         element.disabled = false;
         element.classList.remove("enable_on_pageload");
-    });
+    }
 }
 
 common.init_tabbed_container =
 function init_tabbed_container()
 {
-    var switch_tab =
+    let switch_tab =
     function switch_tab(event)
     {
-        var tab_button = event.target;
+        let tab_button = event.target;
         if (tab_button.classList.contains("tab_button_active"))
             { return; }
 
-        var tab_id = tab_button.dataset.tabId;
+        let tab_id = tab_button.dataset.tabId;
-        var tab_buttons = tab_button.parentElement.getElementsByClassName("tab_button");
+        let tab_buttons = tab_button.parentElement.getElementsByClassName("tab_button");
-        var tabs = tab_button.parentElement.parentElement.getElementsByClassName("tab");
+        let tabs = tab_button.parentElement.parentElement.getElementsByClassName("tab");
-        for (let tab_button of tab_buttons)
+        for (const tab_button of tab_buttons)
         {
             if (tab_button.dataset.tabId === tab_id)
             {
@@ -346,7 +347,7 @@ function init_tabbed_container()
                 tab_button.classList.add("tab_button_inactive");
             }
         }
-        for (let tab of tabs)
+        for (const tab of tabs)
         {
             if (tab.dataset.tabId === tab_id)
                 { tab.classList.remove("hidden"); }
@@ -355,31 +356,31 @@ function init_tabbed_container()
         }
     }
 
-    var tabbed_containers = Array.from(document.getElementsByClassName("tabbed_container"));
+    let tabbed_containers = Array.from(document.getElementsByClassName("tabbed_container"));
-    tabbed_containers.forEach(function(tabbed_container)
+    for (const tabbed_container of tabbed_containers)
     {
-        var button_container = document.createElement("div");
+        let button_container = document.createElement("div");
         button_container.className = "tab_buttons";
         tabbed_container.prepend(button_container);
-        var tabs = Array.from(tabbed_container.getElementsByClassName("tab"));
+        let tabs = Array.from(tabbed_container.getElementsByClassName("tab"));
-        tabs.forEach(function(tab)
+        for (const tab of tabs)
         {
             tab.classList.add("hidden");
-            var tab_id = tab.dataset.tabId || tab.dataset.tabTitle;
+            let tab_id = tab.dataset.tabId || tab.dataset.tabTitle;
             tab.dataset.tabId = tab_id;
             tab.style.borderTopColor = "transparent";
 
-            var button = document.createElement("button");
+            let button = document.createElement("button");
             button.className = "tab_button tab_button_inactive";
             button.onclick = switch_tab;
             button.innerText = tab.dataset.tabTitle;
             button.dataset.tabId = tab_id;
             button_container.append(button);
-        });
+        }
         tabs[0].classList.remove("hidden");
         button_container.firstElementChild.classList.remove("tab_button_inactive");
         button_container.firstElementChild.classList.add("tab_button_active");
-    });
+    }
 }
 
 common.refresh =

frontends/ycdl_flask/static/js/spinner.js

@@ -54,10 +54,10 @@ function close_grouped_spinners(group_id)
     if (group_id && !(spinner.spinner_group_closing[group_id]))
     {
         spinner.spinner_group_closing[group_id] = true;
-        spinner.button_spinner_groups[group_id].forEach(function(button)
+        for (const button of spinner.button_spinner_groups[group_id])
         {
             window[button.dataset.spinnerCloser]();
-        });
+        }
         delete spinner.spinner_group_closing[group_id];
     }
 }
@@ -65,10 +65,10 @@ function close_grouped_spinners(group_id)
 spinner.open_grouped_spinners =
 function open_grouped_spinners(group_id)
 {
-    spinner.button_spinner_groups[group_id].forEach(function(button)
+    for (const button of spinner.button_spinner_groups[group_id])
     {
         window[button.dataset.spinnerOpener]();
-    });
+    }
 }
 
 spinner.init_button_with_spinner =
@@ -98,20 +98,19 @@ function init_button_with_spinner()
             page, or two buttons which do opposite things and you only want one
             to run at a time.
     */
-    var buttons = Array.from(document.getElementsByClassName("button_with_spinner"));
+    let buttons = Array.from(document.getElementsByClassName("button_with_spinner"));
-    buttons.forEach(function(button)
+    for (const button of buttons)
     {
         button.classList.remove("button_with_spinner");
         button.innerHTML = button.innerHTML.trim();
 
-        var holder = document.createElement("span");
+        let holder = document.createElement("span");
         holder.classList.add("spinner_holder");
         holder.classList.add(button.dataset.holderClass || "spinner_holder");
         button.parentElement.insertBefore(holder, button);
-        button.parentElement.removeChild(button);
         holder.appendChild(button);
 
-        var spinner_element;
+        let spinner_element;
         if (button.dataset.spinnerId)
         {
             spinner_element = document.getElementById(button.dataset.spinnerId);
@@ -129,8 +128,8 @@ function init_button_with_spinner()
             spinner.add_to_spinner_group(button.dataset.spinnerGroup, button);
         }
 
-        var spin = new spinner.Spinner(spinner_element);
+        let spin = new spinner.Spinner(spinner_element);
-        var spin_delay = parseFloat(button.dataset.spinnerDelay) || 0;
+        let spin_delay = parseFloat(button.dataset.spinnerDelay) || 0;
 
         button.dataset.spinnerOpener = "spinner_opener_" + spinner.spinner_button_index;
         window[button.dataset.spinnerOpener] = function spinner_opener()
@@ -149,7 +148,7 @@ function init_button_with_spinner()
             button.disabled = false;
         }
 
-        var wrapped_onclick = button.onclick;
+        let wrapped_onclick = button.onclick;
         button.removeAttribute('onclick');
         button.onclick = function()
         {
@@ -165,7 +164,7 @@ function init_button_with_spinner()
         }
 
         spinner.spinner_button_index += 1;
-    });
+    }
 }
 
 spinner.on_pageload =

frontends/ycdl_flask/templates/channel.html

@@ -333,14 +333,14 @@ function filter_video_cards(search_term)
     mismatched cards from the dom.
     Apply the search filter textbox by hiding the mismatched cards.
     */
-    var count = 0;
+    let count = 0;
     video_cards = document.getElementById("video_cards");
     video_cards.classList.add("hidden");
     search_term = search_term.toLocaleLowerCase();
-    var download_filter_class = "video_card_" + DOWNLOAD_FILTER;
+    let download_filter_class = "video_card_" + DOWNLOAD_FILTER;
     Array.from(video_cards.getElementsByClassName("video_card")).forEach(function(video_card)
     {
-        var title = video_card.getElementsByClassName("video_title")[0].innerText.toLocaleLowerCase();
+        let title = video_card.getElementsByClassName("video_title")[0].innerText.toLocaleLowerCase();
         if (DOWNLOAD_FILTER && !video_card.classList.contains(download_filter_class))
         {
             video_cards.removeChild(video_card);
@@ -361,15 +361,15 @@ function filter_video_cards(search_term)
 
 function toggle_embed_video(video_id)
 {
-    var video_card = document.getElementById("video_card_" + video_id);
+    let video_card = document.getElementById("video_card_" + video_id);
-    var show_button = video_card.getElementsByClassName("show_embed_button")[0];
+    let show_button = video_card.getElementsByClassName("show_embed_button")[0];
-    var hide_button = video_card.getElementsByClassName("hide_embed_button")[0];
+    let hide_button = video_card.getElementsByClassName("hide_embed_button")[0];
-    var embed_toolbox = video_card.getElementsByClassName("embed_toolbox")[0];
+    let embed_toolbox = video_card.getElementsByClassName("embed_toolbox")[0];
-    var embeds = video_card.getElementsByClassName("video_iframe_holder");
+    let embeds = video_card.getElementsByClassName("video_iframe_holder");
     if (embeds.length == 0)
     {
-        var html = `<div class="video_iframe_holder"><iframe width="711" height="400" src="https://www.youtube.com/embed/${video_id}" frameborder="0" allow="encrypted-media" allowfullscreen></iframe></div>`
+        let html = `<div class="video_iframe_holder"><iframe width="711" height="400" src="https://www.youtube.com/embed/${video_id}" frameborder="0" allow="encrypted-media" allowfullscreen></iframe></div>`
-        var embed = common.html_to_element(html);
+        let embed = common.html_to_element(html);
         embed_toolbox.appendChild(embed);
         show_button.classList.add("hidden");
         hide_button.classList.remove("hidden");
@@ -384,10 +384,10 @@ function toggle_embed_video(video_id)
 
 function deselect_all()
 {
-    var video_card_first_selected = null;
+    let video_card_first_selected = null;
-    for (var index = 0; index < video_card_selections.length; index +=1)
+    for (const video_card_selection of video_card_selections)
     {
-        video_card_selections[index].classList.remove("video_card_selected");
+        video_card_selection.classList.remove("video_card_selected");
     }
     video_card_selections = [];
 }
@@ -403,7 +403,7 @@ function onclick_select(event)
         video_card_first_selected = event.target;
     }
 
-    var video_cards = Array.from(document.getElementById("video_cards").children);
+    let video_cards = Array.from(document.getElementById("video_cards").children);
 
     if (event.shiftKey === false && event.ctrlKey === false)
     {
@@ -414,16 +414,16 @@ function onclick_select(event)
     else if (event.shiftKey === true)
     {
         video_card_selections = [];
-        var start_index = video_cards.indexOf(video_card_first_selected);
+        let start_index = video_cards.indexOf(video_card_first_selected);
-        var end_index = video_cards.indexOf(event.target);
+        let end_index = video_cards.indexOf(event.target);
         if (end_index < start_index)
         {
-            var temp = start_index;
+            let temp = start_index;
             start_index = end_index;
             end_index = temp;
         }
 
-        for (var index = start_index; index <= end_index; index += 1)
+        for (let index = start_index; index <= end_index; index += 1)
         {
             if (video_cards[index].classList.contains("hidden"))
             {
@@ -434,7 +434,7 @@ function onclick_select(event)
     }
     else if (event.ctrlKey === true)
     {
-        var existing_index = video_card_selections.indexOf(event.target)
+        let existing_index = video_card_selections.indexOf(event.target)
         if (existing_index == -1)
         {
             video_card_first_selected = event.target;
@@ -446,16 +446,15 @@ function onclick_select(event)
         }
     }
 
-    for (var index = 0; index < video_cards.length; index += 1)
+    for (const video_card of video_cards)
     {
-        card = video_cards[index];
+        if (video_card_selections.indexOf(video_card) > -1)
-        if (video_card_selections.indexOf(card) > -1)
         {
-            card.classList.add("video_card_selected");
+            video_card.classList.add("video_card_selected");
         }
         else
         {
-            card.classList.remove("video_card_selected");
+            video_card.classList.remove("video_card_selected");
         }
     }
     document.getSelection().removeAllRanges();
@@ -465,8 +464,8 @@ function onclick_select(event)
 
 function action_button_passthrough(event, action_function, action_argument)
 {
-    var elements;
+    let elements;
-    var this_card = event.target.parentElement.parentElement;
+    let this_card = event.target.parentElement.parentElement;
     if (video_card_selections.length > 0 && video_card_selections.indexOf(this_card) > -1)
     {
         elements = video_card_selections;
@@ -476,10 +475,10 @@ function action_button_passthrough(event, action_function, action_argument)
         // Button -> button toolbox -> video card
         elements = [this_card];
     }
-    var video_ids = [];
+    let video_ids = [];
-    for (var index = 0; index < elements.length; index += 1)
+    for (const element of elements)
     {
-        video_ids.push(elements[index].dataset["ytid"]);
+        video_ids.push(element.dataset["ytid"]);
     }
     video_ids = video_ids.join(",");
 
@@ -499,9 +498,9 @@ function action_button_passthrough(event, action_function, action_argument)
 
 function give_action_buttons(video_card_div)
 {
-    var toolbox = video_card_div.getElementsByClassName("action_toolbox")[0]
+    let toolbox = video_card_div.getElementsByClassName("action_toolbox")[0]
-    var buttons = Array.from(toolbox.getElementsByTagName("button"));
+    let buttons = Array.from(toolbox.getElementsByTagName("button"));
-    var is_pending = video_card_div.classList.contains("video_card_pending");
+    let is_pending = video_card_div.classList.contains("video_card_pending");
     buttons.forEach(function(button)
     {
         if (is_pending)
@@ -510,7 +509,7 @@ function give_action_buttons(video_card_div)
             { button.classList.add("hidden"); }
     });
 
-    var button_pending = video_card_div.getElementsByClassName("video_action_pending")[0];
+    let button_pending = video_card_div.getElementsByClassName("video_action_pending")[0];
     if (is_pending)
         { button_pending.classList.add("hidden"); }
     else
@@ -519,16 +518,16 @@ function give_action_buttons(video_card_div)
 
 function receive_action_response(response)
 {
-    var video_ids = response.data.video_ids;
+    let video_ids = response.data.video_ids;
-    for (var index = 0; index < video_ids.length; index += 1)
+    let state = response.data.state;
+    let state_class = "video_card_" + state;
+    for (const video_id of video_ids)
     {
-        var video_id = video_ids[index];
+        let card = document.getElementById("video_card_" + video_id);
-        var state = response.data.state;
-        var card = document.getElementById("video_card_" + video_id);
         {% for statename in all_states %}
         card.classList.remove("video_card_{{statename}}");
         {% endfor %}
-        card.classList.add("video_card_" + state);
+        card.classList.add(state_class);
         give_action_buttons(card);
     }
 }