From 03c366fff81891da154ecd52d07db25785059eff Mon Sep 17 00:00:00 2001 From: Ethan Dalool Date: Thu, 3 Sep 2020 15:44:58 -0700 Subject: [PATCH] Replace var with let/const. --- frontends/ycdl_flask/static/js/api.js | 28 +++--- frontends/ycdl_flask/static/js/common.js | 95 +++++++++++---------- frontends/ycdl_flask/static/js/spinner.js | 25 +++--- frontends/ycdl_flask/templates/channel.html | 77 +++++++++-------- 4 files changed, 112 insertions(+), 113 deletions(-) diff --git a/frontends/ycdl_flask/static/js/api.js b/frontends/ycdl_flask/static/js/api.js index 7820998..f93547a 100644 --- a/frontends/ycdl_flask/static/js/api.js +++ b/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"; - data = new FormData(); + const url = "/add_channel"; + 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`; - data = new FormData(); + const url = `/channel/${channel_id}/delete`; + 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`; - data = new FormData(); + const url = `/channel/${channel_id}/refresh`; + 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"; - data = new FormData(); + const url = "/refresh_all_channels"; + 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`; - data = new FormData(); + const url = `/channel/${channel_id}/set_automark`; + 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"; - data = new FormData(); + const url = "/mark_video_state"; + 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"; - data = new FormData(); + const url = "/start_download"; + const data = new FormData(); data.append("video_ids", video_ids); return common.post(url, data, callback); } diff --git a/frontends/ycdl_flask/static/js/common.js b/frontends/ycdl_flask/static/js/common.js index 3c9c54d..9f425d7 100644 --- a/frontends/ycdl_flask/static/js/common.js +++ b/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(); - var response = { + let request = new XMLHttpRequest(); + 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){ - var a_params = new URLSearchParams(a.search); - var new_params = new URLSearchParams(); + let as = Array.from(document.getElementsByClassName("merge_params")); + for (const a of as) + { + 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")); - buttons.forEach(function(button) + let buttons = Array.from(document.getElementsByClassName("button_with_confirm")); + 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; - var input_source; + let prompt; + 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")); - elements.forEach(function(element) + let elements = Array.from(document.getElementsByClassName("enable_on_pageload")); + 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; - var tab_buttons = tab_button.parentElement.getElementsByClassName("tab_button"); - var tabs = tab_button.parentElement.parentElement.getElementsByClassName("tab"); - for (let tab_button of tab_buttons) + let tab_id = tab_button.dataset.tabId; + let tab_buttons = tab_button.parentElement.getElementsByClassName("tab_button"); + let tabs = tab_button.parentElement.parentElement.getElementsByClassName("tab"); + 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")); - tabbed_containers.forEach(function(tabbed_container) + let tabbed_containers = Array.from(document.getElementsByClassName("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")); - tabs.forEach(function(tab) + let tabs = Array.from(tabbed_container.getElementsByClassName("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 = diff --git a/frontends/ycdl_flask/static/js/spinner.js b/frontends/ycdl_flask/static/js/spinner.js index a1b6d42..4a2f34a 100644 --- a/frontends/ycdl_flask/static/js/spinner.js +++ b/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")); - buttons.forEach(function(button) + let buttons = Array.from(document.getElementsByClassName("button_with_spinner")); + 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); - var spin_delay = parseFloat(button.dataset.spinnerDelay) || 0; + let spin = new spinner.Spinner(spinner_element); + 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 = diff --git a/frontends/ycdl_flask/templates/channel.html b/frontends/ycdl_flask/templates/channel.html index bbb985a..44b73aa 100644 --- a/frontends/ycdl_flask/templates/channel.html +++ b/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); - var show_button = video_card.getElementsByClassName("show_embed_button")[0]; - var hide_button = video_card.getElementsByClassName("hide_embed_button")[0]; - var embed_toolbox = video_card.getElementsByClassName("embed_toolbox")[0]; - var embeds = video_card.getElementsByClassName("video_iframe_holder"); + let video_card = document.getElementById("video_card_" + video_id); + let show_button = video_card.getElementsByClassName("show_embed_button")[0]; + let hide_button = video_card.getElementsByClassName("hide_embed_button")[0]; + let embed_toolbox = video_card.getElementsByClassName("embed_toolbox")[0]; + let embeds = video_card.getElementsByClassName("video_iframe_holder"); if (embeds.length == 0) { - var html = `
` - var embed = common.html_to_element(html); + let 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; - for (var index = 0; index < video_card_selections.length; index +=1) + let video_card_first_selected = null; + 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); - var end_index = video_cards.indexOf(event.target); + let start_index = video_cards.indexOf(video_card_first_selected); + 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(card) > -1) + if (video_card_selections.indexOf(video_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; - var this_card = event.target.parentElement.parentElement; + let elements; + 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 = []; - for (var index = 0; index < elements.length; index += 1) + let video_ids = []; + 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] - var buttons = Array.from(toolbox.getElementsByTagName("button")); - var is_pending = video_card_div.classList.contains("video_card_pending"); + let toolbox = video_card_div.getElementsByClassName("action_toolbox")[0] + let buttons = Array.from(toolbox.getElementsByTagName("button")); + 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; - for (var index = 0; index < video_ids.length; index += 1) + let video_ids = response.data.video_ids; + let state = response.data.state; + let state_class = "video_card_" + state; + for (const video_id of video_ids) { - var video_id = video_ids[index]; - var state = response.data.state; - var card = document.getElementById("video_card_" + video_id); + let 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); } }