thrimbletrimmer: Add some helpers for creating elements

No functional changes intended.

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");
+	// Shortcut builder for image-based buttons
-	rangeContainer.classList.add("range-definition-removable");
+	const button = (cls, src, alt) => makeElement("img", [cls, "click"], {
-
+		src, alt, title: alt,
-	const rangeTimesContainer = document.createElement("div");
+	});
-	rangeTimesContainer.classList.add("range-definition-times");
+
-	const rangeStart = document.createElement("input");
+	const rangeContainer = makeElement("div", ["range-definition-removable"]);
-	rangeStart.type = "text";
+
-	rangeStart.classList.add("range-definition-start");
+	const rangeTimesContainer = makeElement("div", ["range-definition-times"]);
-	const rangeStartSet = document.createElement("img");
+	const rangeStart = makeElement("input", ["range-definition-start"], {type: "text"});
-	rangeStartSet.src = "images/pencil.png";
+	const rangeStartSet = button(
-	rangeStartSet.alt = "Set range start point to the current video time";
+		"range-definition-set-start",
-	rangeStartSet.title = rangeStartSet.alt;
+		"images/pencil.png",
-	rangeStartSet.classList.add("range-definition-set-start");
+		"Set range start point to the current video time",
-	rangeStartSet.classList.add("click");
+	);
-	const rangeStartPlay = document.createElement("img");
+	const rangeStartPlay = button(
-	rangeStartPlay.src = "images/play_to.png";
+		"range-definition-play-start",
-	rangeStartPlay.alt = "Play from start point";
+		"images/play_to.png",
-	rangeStartPlay.title = rangeStartPlay.alt;
+		"Play from start point",
-	rangeStartPlay.classList.add("range-definition-play-start");
+	);
-	rangeStartPlay.classList.add("click");
+	const rangeTimeGap = makeElement("div", ["range-definition-between-time-gap"]);
-	const rangeTimeGap = document.createElement("div");
+	const rangeEnd = makeElement("input", ["range-definition-end"], {type: "text"});
-	rangeTimeGap.classList.add("range-definition-between-time-gap");
+	const rangeEndSet = button(
-	const rangeEnd = document.createElement("input");
+		"range-definition-set-end",
-	rangeEnd.type = "text";
+		"images/pencil.png",
-	rangeEnd.classList.add("range-definition-end");
+		"Set range end point to the current video time",
-	const rangeEndSet = document.createElement("img");
+	);
-	rangeEndSet.src = "images/pencil.png";
+	const rangeEndPlay = button(
-	rangeEndSet.alt = "Set range end point to the current video time";
+		"range-definition-play-end",
-	rangeEndSet.title = rangeEndSet.alt;
+		"images/play_to.png",
-	rangeEndSet.classList.add("range-definition-set-end");
+		"Play from end point",
-	rangeEndSet.classList.add("click");
+	);
-	const rangeEndPlay = document.createElement("img");
+	const removeRange = button(
-	rangeEndPlay.src = "images/play_to.png";
+		"range-definition-remove",
-	rangeEndPlay.alt = "Play from end point";
+		"images/minus.png",
-	rangeEndPlay.title = rangeEndPlay.alt;
+		"Remove range",
-	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");
 
 	if (canEditVideo()) {
 		rangeStartSet.addEventListener("click", getRangeSetClickHandler("start"));
@@ -1449,37 +1453,37 @@ function rangeDefinitionDOM() {
 		removeRange.classList.add("hidden");
 	}
 
-	const currentRangeMarker = document.createElement("img");
+	const currentRangeMarkerAlt = "Range affected by keyboard shortcuts";
-	currentRangeMarker.alt = "Range affected by keyboard shortcuts";
+	const currentRangeMarker = makeElement("img", ["range-definition-current", "hidden"], {
-	currentRangeMarker.title = "Range affected by keyboard shortcuts";
+		src: "images/arrow.png",
-	currentRangeMarker.src = "images/arrow.png";
+		alt: currentRangeMarkerAlt,
-	currentRangeMarker.classList.add("range-definition-current");
+		title: currentRangeMarkerAlt,
-	currentRangeMarker.classList.add("hidden");
+	});
-
+
-	rangeTimesContainer.appendChild(rangeStart);
+	rangeTimesContainer.append(
-	rangeTimesContainer.appendChild(rangeStartSet);
+		rangeStart,
-	rangeTimesContainer.appendChild(rangeStartPlay);
+		rangeStartSet,
-	rangeTimesContainer.appendChild(rangeTimeGap);
+		rangeStartPlay,
-	rangeTimesContainer.appendChild(rangeEnd);
+		rangeTimeGap,
-	rangeTimesContainer.appendChild(rangeEndSet);
+		rangeEnd,
-	rangeTimesContainer.appendChild(rangeEndPlay);
+		rangeEndSet,
-	rangeTimesContainer.appendChild(removeRange);
+		rangeEndPlay,
-	rangeTimesContainer.appendChild(currentRangeMarker);
+		removeRange,
-
+		currentRangeMarker,
-	const rangeChaptersContainer = document.createElement("div");
+	);
+
+	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");
+	const rangeAddChapterElem = button(
-	rangeAddChapterElem.src = "images/plus.png";
+		"add-range-definition-chapter-marker",
-	rangeAddChapterElem.alt = "Add chapter marker";
+		"images/plus.png",
-	rangeAddChapterElem.title = "Add chapter marker";
+		"Add chapter marker",
-	rangeAddChapterElem.classList.add("add-range-definition-chapter-marker");
+	);
-	rangeAddChapterElem.classList.add("click");
 	if (!chaptersEnabled) {
 		rangeAddChapterElem.classList.add("hidden");
 	}
@@ -1489,9 +1493,11 @@ function rangeDefinitionDOM() {
 		rangeAddChapterElem.classList.add("hidden");
 	}
 
-	rangeContainer.appendChild(rangeTimesContainer);
+	rangeContainer.append(
-	rangeContainer.appendChild(rangeChaptersContainer);
+		rangeTimesContainer,
-	rangeContainer.appendChild(rangeAddChapterElem);
+		rangeChaptersContainer,
+		rangeAddChapterElem,
+	);
 
 	return rangeContainer;
 }