From 23e64116bde12da61a5861bf91b53ed6bb3a88c3 Mon Sep 17 00:00:00 2001 From: Mike Lang Date: Fri, 4 Oct 2024 04:19:50 +1000 Subject: [PATCH] thrimbletrimmer: Add some helpers for creating elements No functional changes intended. --- thrimbletrimmer/scripts/edit.js | 148 +++++++++++++++++--------------- 1 file changed, 77 insertions(+), 71 deletions(-) diff --git a/thrimbletrimmer/scripts/edit.js b/thrimbletrimmer/scripts/edit.js index 8277a62..530ef82 100644 --- a/thrimbletrimmer/scripts/edit.js +++ b/thrimbletrimmer/scripts/edit.js @@ -1363,50 +1363,54 @@ function addRangeDefinition() { rangeContainer.appendChild(newRangeDOM); } +function makeElement(tag, classes = [], values = {}) { + const element = document.createElement(tag); + for (const cls of classes) { + element.classList.add(cls); + } + for (const [key, value] of Object.entries(values)) { + element[key] = value; + } + return element; +} + function rangeDefinitionDOM() { - const rangeContainer = document.createElement("div"); - rangeContainer.classList.add("range-definition-removable"); - - const rangeTimesContainer = document.createElement("div"); - rangeTimesContainer.classList.add("range-definition-times"); - const rangeStart = document.createElement("input"); - rangeStart.type = "text"; - rangeStart.classList.add("range-definition-start"); - const rangeStartSet = document.createElement("img"); - rangeStartSet.src = "images/pencil.png"; - rangeStartSet.alt = "Set range start point to the current video time"; - rangeStartSet.title = rangeStartSet.alt; - rangeStartSet.classList.add("range-definition-set-start"); - rangeStartSet.classList.add("click"); - const rangeStartPlay = document.createElement("img"); - rangeStartPlay.src = "images/play_to.png"; - rangeStartPlay.alt = "Play from start point"; - rangeStartPlay.title = rangeStartPlay.alt; - rangeStartPlay.classList.add("range-definition-play-start"); - rangeStartPlay.classList.add("click"); - const rangeTimeGap = document.createElement("div"); - rangeTimeGap.classList.add("range-definition-between-time-gap"); - const rangeEnd = document.createElement("input"); - rangeEnd.type = "text"; - rangeEnd.classList.add("range-definition-end"); - const rangeEndSet = document.createElement("img"); - rangeEndSet.src = "images/pencil.png"; - rangeEndSet.alt = "Set range end point to the current video time"; - rangeEndSet.title = rangeEndSet.alt; - rangeEndSet.classList.add("range-definition-set-end"); - rangeEndSet.classList.add("click"); - const rangeEndPlay = document.createElement("img"); - rangeEndPlay.src = "images/play_to.png"; - rangeEndPlay.alt = "Play from end point"; - rangeEndPlay.title = rangeEndPlay.alt; - rangeEndPlay.classList.add("range-definition-play-end"); - rangeEndPlay.classList.add("click"); - const removeRange = document.createElement("img"); - removeRange.alt = "Remove range"; - removeRange.title = removeRange.alt; - removeRange.src = "images/minus.png"; - removeRange.classList.add("range-definition-remove"); - removeRange.classList.add("click"); + // Shortcut builder for image-based buttons + const button = (cls, src, alt) => makeElement("img", [cls, "click"], { + src, alt, title: alt, + }); + + const rangeContainer = makeElement("div", ["range-definition-removable"]); + + const rangeTimesContainer = makeElement("div", ["range-definition-times"]); + const rangeStart = makeElement("input", ["range-definition-start"], {type: "text"}); + const rangeStartSet = button( + "range-definition-set-start", + "images/pencil.png", + "Set range start point to the current video time", + ); + const rangeStartPlay = button( + "range-definition-play-start", + "images/play_to.png", + "Play from start point", + ); + const rangeTimeGap = makeElement("div", ["range-definition-between-time-gap"]); + const rangeEnd = makeElement("input", ["range-definition-end"], {type: "text"}); + const rangeEndSet = button( + "range-definition-set-end", + "images/pencil.png", + "Set range end point to the current video time", + ); + const rangeEndPlay = button( + "range-definition-play-end", + "images/play_to.png", + "Play from end point", + ); + const removeRange = button( + "range-definition-remove", + "images/minus.png", + "Remove range", + ); if (canEditVideo()) { rangeStartSet.addEventListener("click", getRangeSetClickHandler("start")); @@ -1449,37 +1453,37 @@ function rangeDefinitionDOM() { removeRange.classList.add("hidden"); } - const currentRangeMarker = document.createElement("img"); - currentRangeMarker.alt = "Range affected by keyboard shortcuts"; - currentRangeMarker.title = "Range affected by keyboard shortcuts"; - currentRangeMarker.src = "images/arrow.png"; - currentRangeMarker.classList.add("range-definition-current"); - currentRangeMarker.classList.add("hidden"); - - rangeTimesContainer.appendChild(rangeStart); - rangeTimesContainer.appendChild(rangeStartSet); - rangeTimesContainer.appendChild(rangeStartPlay); - rangeTimesContainer.appendChild(rangeTimeGap); - rangeTimesContainer.appendChild(rangeEnd); - rangeTimesContainer.appendChild(rangeEndSet); - rangeTimesContainer.appendChild(rangeEndPlay); - rangeTimesContainer.appendChild(removeRange); - rangeTimesContainer.appendChild(currentRangeMarker); - - const rangeChaptersContainer = document.createElement("div"); + const currentRangeMarkerAlt = "Range affected by keyboard shortcuts"; + const currentRangeMarker = makeElement("img", ["range-definition-current", "hidden"], { + src: "images/arrow.png", + alt: currentRangeMarkerAlt, + title: currentRangeMarkerAlt, + }); + + rangeTimesContainer.append( + rangeStart, + rangeStartSet, + rangeStartPlay, + rangeTimeGap, + rangeEnd, + rangeEndSet, + rangeEndPlay, + removeRange, + currentRangeMarker, + ); + + const rangeChaptersContainer = makeElement("div", ["range-definition-chapter-markers"]); const enableChaptersElem = document.getElementById("enable-chapter-markers"); const chaptersEnabled = enableChaptersElem.checked; - rangeChaptersContainer.classList.add("range-definition-chapter-markers"); if (!chaptersEnabled) { rangeChaptersContainer.classList.add("hidden"); } - const rangeAddChapterElem = document.createElement("img"); - rangeAddChapterElem.src = "images/plus.png"; - rangeAddChapterElem.alt = "Add chapter marker"; - rangeAddChapterElem.title = "Add chapter marker"; - rangeAddChapterElem.classList.add("add-range-definition-chapter-marker"); - rangeAddChapterElem.classList.add("click"); + const rangeAddChapterElem = button( + "add-range-definition-chapter-marker", + "images/plus.png", + "Add chapter marker", + ); if (!chaptersEnabled) { rangeAddChapterElem.classList.add("hidden"); } @@ -1489,9 +1493,11 @@ function rangeDefinitionDOM() { rangeAddChapterElem.classList.add("hidden"); } - rangeContainer.appendChild(rangeTimesContainer); - rangeContainer.appendChild(rangeChaptersContainer); - rangeContainer.appendChild(rangeAddChapterElem); + rangeContainer.append( + rangeTimesContainer, + rangeChaptersContainer, + rangeAddChapterElem, + ); return rangeContainer; }