refactor(defaultTheme): rename item-list to entry-list

marjune163 · marjune163 · commit e847cd394e7f · 2025-12-07T18:59:46.000+08:00
diff --git a/src/tpl/defaultTheme/frontend/index.css b/src/tpl/defaultTheme/frontend/index.css
@@ -391,21 +391,21 @@ html.dragging::before {
 	padding: 0 0.5em;
 }
 
-.item-list {
+.entry-list {
 	margin: 1em;
 	line-height: 1.2;
 }
 
-.item-list li {
+.entry-list li {
 	position: relative;
 }
 
-.item-list a {
+.entry-list a {
 	padding: 0.6em;
 }
 
-.item-list .detail,
-.item-list .delete {
+.entry-list .detail,
+.entry-list .delete {
 	display: flex;
 	flex-flow: row nowrap;
 	align-items: center;
@@ -417,12 +417,12 @@ html.dragging::before {
 	padding-right: 2.2em;
 }
 
-.item-list .field {
+.entry-list .field {
 	margin: 0 0 0 1em;
 	flex-shrink: 0;
 }
 
-.item-list .name {
+.entry-list .name {
 	flex-grow: 1;
 	flex-shrink: 1;
 	flex-basis: 0;
@@ -432,20 +432,20 @@ html.dragging::before {
 	word-break: break-all;
 }
 
-.item-list .size {
+.entry-list .size {
 	white-space: nowrap;
 	text-align: right;
 	color: #666;
 }
 
-.item-list .time {
+.entry-list .time {
 	color: #999;
 	text-align: right;
 	white-space: nowrap;
 	overflow: hidden;
 }
 
-.item-list .delete {
+.entry-list .delete {
 	position: absolute;
 	top: 0;
 	right: 0;
@@ -454,7 +454,7 @@ html.dragging::before {
 	align-items: stretch;
 }
 
-.item-list .delete button {
+.entry-list .delete button {
 	border: 0;
 	color: #800000;
 	background: none;
@@ -464,23 +464,23 @@ html.dragging::before {
 	padding: 0.1875em 0.3125em 0.3125em;
 }
 
-.item-list .delete button:hover {
+.entry-list .delete button:hover {
 	background: #fee;
 }
 
-.item-list .header .detail {
+.entry-list .header .detail {
 	background: #fcfcfc;
 }
 
-.item-list .header .field {
+.entry-list .header .field {
 	display: inline-block;
 	margin: 0;
 	font-size: 1.5em;
 	color: #808080;
 	overflow: hidden;
 }
 
-.item-list .header .time {
+.entry-list .header .time {
 	width: 6.5em;
 	text-align: center;
 }
@@ -559,28 +559,28 @@ html.dragging::before {
 		border-color: #555;
 	}
 
-	.item-list .detail,
-	.item-list .delete {
+	.entry-list .detail,
+	.entry-list .delete {
 		border-bottom-color: #222;
 	}
 
-	.item-list .size {
+	.entry-list .size {
 		color: #999;
 	}
 
-	.item-list .time {
+	.entry-list .time {
 		color: #666;
 	}
 
-	.item-list .delete button {
+	.entry-list .delete button {
 		color: #f99;
 	}
 
-	.item-list .delete button:hover {
+	.entry-list .delete button:hover {
 		background-color: #433;
 	}
 
-	.item-list .header .detail {
+	.entry-list .header .detail {
 		background-color: #181818;
 	}
 
@@ -590,17 +590,17 @@ html.dragging::before {
 }
 
 @media screen and (max-width: 375px) {
-	.item-list .header .time {
+	.entry-list .header .time {
 		width: 4.05em;
 	}
 
-	.item-list .detail .time span {
+	.entry-list .detail .time span {
 		display: none;
 	}
 }
 
 @media screen and (max-width: 350px) {
-	.item-list .detail .time {
+	.entry-list .detail .time {
 		display: none;
 	}
 }
@@ -610,12 +610,12 @@ html.dragging::before {
 		display: none;
 	}
 
-	.item-list li {
+	.entry-list li {
 		page-break-inside: avoid;
 		break-inside: avoid;
 	}
 
-	.item-list li.parent {
+	.entry-list li.parent {
 		display: none;
 	}
 
diff --git a/src/tpl/defaultTheme/frontend/index.html b/src/tpl/defaultTheme/frontend/index.html
@@ -98,7 +98,7 @@ <h3>{{.Trans.UploadLabel}}</h3>
 	</div>
 </div>
 {{end -}}
-<ul class="item-list{{if .HasDeletable}} has-deletable{{end}}">
+<ul class="entry-list{{if .HasDeletable}} has-deletable{{end}}">
 	{{if not $isSimple -}}
 	<li class="header">{{$dirSort := .SortState.DirSort}}{{$sortKey := .SortState.Key}}
 		<span class="detail">
diff --git a/src/tpl/defaultTheme/frontend/index.js b/src/tpl/defaultTheme/frontend/index.js
@@ -12,10 +12,10 @@
 	const selectorIsNone = '.' + classNone;
 	const selectorNotNone = `:not(${selectorIsNone})`;
 	const selectorPathList = '.path-list';
-	const selectorItemList = '.item-list';
-	const selectorItem = `li:not(.${classHeader}):not(.parent)`;
-	const selectorItemIsNone = selectorItem + selectorIsNone;
-	const selectorItemNotNone = selectorItem + selectorNotNone;
+	const selectorEntryList = '.entry-list';
+	const selectorEntry = `li:not(.${classHeader}):not(.parent)`;
+	const selectorEntryIsNone = selectorEntry + selectorIsNone;
+	const selectorEntryNotNone = selectorEntry + selectorNotNone;
 
 	const Enter = 'Enter';
 	const Escape = 'Escape';
@@ -46,46 +46,46 @@
 
 		const clear = filter.querySelector('button') || document.createElement('button');
 
-		const itemList = document.querySelector(selectorItemList)
+		const entryList = document.querySelector(selectorEntryList);
 
 		let timeoutId;
 		const doFilter = function () {
 			const filteringText = input.value.trim().toLowerCase();
 			if (filteringText === filteredText) return;
 
-			let items
+			let entries
 			if (filteringText) {
 				clear.style.display = 'block';
 
 				let selector
-				if (filteringText.includes(filteredText)) {	// increment search, find in visible items
-					selector = selectorItemNotNone;
-				} else if (filteredText.includes(filteringText)) {	// decrement search, find in hidden items
-					selector = selectorItemIsNone;
+				if (filteringText.includes(filteredText)) {	// increment search, find in visible entries
+					selector = selectorEntryNotNone;
+				} else if (filteredText.includes(filteringText)) {	// decrement search, find in hidden entries
+					selector = selectorEntryIsNone;
 				} else {
-					selector = selectorItem;
+					selector = selectorEntry;
 				}
 				filteredText = filteringText;
 
-				items = itemList.querySelectorAll(selector);
-				items.forEach(item => {
-					const name = item.querySelector('.name');
+				entries = entryList.querySelectorAll(selector);
+				entries.forEach(entry => {
+					const name = entry.querySelector('.name');
 					if (matchFilter(name.textContent)) {
-						if (selector !== selectorItemNotNone) {
-							item.classList.remove(classNone);
+						if (selector !== selectorEntryNotNone) {
+							entry.classList.remove(classNone);
 						}
 					} else {
-						if (selector !== selectorItemIsNone) {
-							item.classList.add(classNone);
+						if (selector !== selectorEntryIsNone) {
+							entry.classList.add(classNone);
 						}
 					}
 				});
-			} else {	// filter cleared, show all items
+			} else {	// filter cleared, show all entries
 				clear.style.display = '';
 				filteredText = '';
 
-				items = itemList.querySelectorAll(selectorItemIsNone);
-				items.forEach(item => item.classList.remove(classNone));
+				entries = entryList.querySelectorAll(selectorEntryIsNone);
+				entries.forEach(entry => entry.classList.remove(classNone));
 			}
 		};
 
@@ -149,9 +149,9 @@
 			if (link && link !== lastFocused) lastFocused = link;
 		}
 
-		const itemList = document.body.querySelector(selectorItemList);
-		itemList.addEventListener('focusin', onFocus);
-		itemList.addEventListener('click', onFocus);
+		const entryList = document.body.querySelector(selectorEntryList);
+		entryList.addEventListener('focusin', onFocus);
+		entryList.addEventListener('click', onFocus);
 		window.addEventListener('pageshow', function () {
 			if (lastFocused && lastFocused !== document.activeElement) {
 				lastFocused.focus();
@@ -187,12 +187,12 @@
 		prevChildName = decodeURIComponent(prevChildName);
 		if (!matchFilter(prevChildName)) return;
 
-		const items = Array.from(document.body.querySelectorAll(selectorItemList + '>' + selectorItemNotNone));
+		const entries = Array.from(document.body.querySelectorAll(selectorEntryList + '>' + selectorEntryNotNone));
 		const selectorName = '.field.name';
 		const selectorLink = 'a';
-		for (let i = 0; i < items.length; i++) {
-			const item = items[i];
-			const elName = item.querySelector(selectorName);
+		for (let i = 0; i < entries.length; i++) {
+			const entry = entries[i];
+			const elName = entry.querySelector(selectorName);
 			if (!elName) continue;
 
 			let text = elName.textContent;
@@ -201,7 +201,7 @@
 			}
 			if (text !== prevChildName) continue;
 
-			const elLink = item.querySelector(selectorLink);
+			const elLink = entry.querySelector(selectorLink);
 			if (!elLink) break;
 
 			lastFocused = elLink;
@@ -213,8 +213,8 @@
 
 	function enableKeyboardNavigate() {
 		const pathList = document.body.querySelector(selectorPathList);
-		const itemList = document.body.querySelector(selectorItemList);
-		if (!pathList && !itemList) {
+		const entryList = document.body.querySelector(selectorEntryList);
+		if (!pathList && !entryList) {
 			return;
 		}
 
@@ -369,15 +369,15 @@
 				switch (e.key) {
 					case ARROW_DOWN:
 						if (isToEnd(e)) {
-							return getLastFocusableSibling(itemList);
+							return getLastFocusableSibling(entryList);
 						} else {
-							return getFocusableSibling(itemList, false);
+							return getFocusableSibling(entryList, false);
 						}
 					case ARROW_UP:
 						if (isToEnd(e)) {
-							return getFirstFocusableSibling(itemList);
+							return getFirstFocusableSibling(entryList);
 						} else {
-							return getFocusableSibling(itemList, true);
+							return getFocusableSibling(entryList, true);
 						}
 					case ARROW_RIGHT:
 						if (isToEnd(e)) {
@@ -394,7 +394,7 @@
 				}
 			}
 			if (!e.ctrlKey && (!e.altKey || IS_MAC_PLATFORM) && !e.metaKey && e.key.length === 1) {
-				return lookup(itemList, e.key, e.shiftKey);
+				return lookup(entryList, e.key, e.shiftKey);
 			}
 		}
 
@@ -955,11 +955,11 @@
 	}
 
 	function enableNonRefreshDelete() {
-		const itemList = document.body.querySelector(selectorItemList);
-		if (!itemList) return;
-		if (!itemList.classList.contains('has-deletable')) return;
+		const entryList = document.body.querySelector(selectorEntryList);
+		if (!entryList) return;
+		if (!entryList.classList.contains('has-deletable')) return;
 
-		itemList.addEventListener('submit', function (e) {
+		entryList.addEventListener('submit', function (e) {
 			if (e.defaultPrevented) return;
 
 			const form = e.target;

Original file line number	Diff line number	Diff line change
`@@ -391,21 +391,21 @@ html.dragging::before {`
`391`	`391`	`padding: 0 0.5em;`
`392`	`392`	`}`
`393`	`393`
`394`		`-.item-list {`
	`394`	`+.entry-list {`
`395`	`395`	`margin: 1em;`
`396`	`396`	`line-height: 1.2;`
`397`	`397`	`}`
`398`	`398`
`399`		`-.item-list li {`
	`399`	`+.entry-list li {`
`400`	`400`	`position: relative;`
`401`	`401`	`}`
`402`	`402`
`403`		`-.item-list a {`
	`403`	`+.entry-list a {`
`404`	`404`	`padding: 0.6em;`
`405`	`405`	`}`
`406`	`406`
`407`		`-.item-list .detail,`
`408`		`-.item-list .delete {`
	`407`	`+.entry-list .detail,`
	`408`	`+.entry-list .delete {`
`409`	`409`	`display: flex;`
`410`	`410`	`flex-flow: row nowrap;`
`411`	`411`	`align-items: center;`
`@@ -417,12 +417,12 @@ html.dragging::before {`
`417`	`417`	`padding-right: 2.2em;`
`418`	`418`	`}`
`419`	`419`
`420`		`-.item-list .field {`
	`420`	`+.entry-list .field {`
`421`	`421`	`margin: 0 0 0 1em;`
`422`	`422`	`flex-shrink: 0;`
`423`	`423`	`}`
`424`	`424`
`425`		`-.item-list .name {`
	`425`	`+.entry-list .name {`
`426`	`426`	`flex-grow: 1;`
`427`	`427`	`flex-shrink: 1;`
`428`	`428`	`flex-basis: 0;`
`@@ -432,20 +432,20 @@ html.dragging::before {`
`432`	`432`	`word-break: break-all;`
`433`	`433`	`}`
`434`	`434`
`435`		`-.item-list .size {`
	`435`	`+.entry-list .size {`
`436`	`436`	`white-space: nowrap;`
`437`	`437`	`text-align: right;`
`438`	`438`	`color: #666;`
`439`	`439`	`}`
`440`	`440`
`441`		`-.item-list .time {`
	`441`	`+.entry-list .time {`
`442`	`442`	`color: #999;`
`443`	`443`	`text-align: right;`
`444`	`444`	`white-space: nowrap;`
`445`	`445`	`overflow: hidden;`
`446`	`446`	`}`
`447`	`447`
`448`		`-.item-list .delete {`
	`448`	`+.entry-list .delete {`
`449`	`449`	`position: absolute;`
`450`	`450`	`top: 0;`
`451`	`451`	`right: 0;`
`@@ -454,7 +454,7 @@ html.dragging::before {`
`454`	`454`	`align-items: stretch;`
`455`	`455`	`}`
`456`	`456`
`457`		`-.item-list .delete button {`
	`457`	`+.entry-list .delete button {`
`458`	`458`	`border: 0;`
`459`	`459`	`color: #800000;`
`460`	`460`	`background: none;`
`@@ -464,23 +464,23 @@ html.dragging::before {`
`464`	`464`	`padding: 0.1875em 0.3125em 0.3125em;`
`465`	`465`	`}`
`466`	`466`
`467`		`-.item-list .delete button:hover {`
	`467`	`+.entry-list .delete button:hover {`
`468`	`468`	`background: #fee;`
`469`	`469`	`}`
`470`	`470`
`471`		`-.item-list .header .detail {`
	`471`	`+.entry-list .header .detail {`
`472`	`472`	`background: #fcfcfc;`
`473`	`473`	`}`
`474`	`474`
`475`		`-.item-list .header .field {`
	`475`	`+.entry-list .header .field {`
`476`	`476`	`display: inline-block;`
`477`	`477`	`margin: 0;`
`478`	`478`	`font-size: 1.5em;`
`479`	`479`	`color: #808080;`
`480`	`480`	`overflow: hidden;`
`481`	`481`	`}`
`482`	`482`
`483`		`-.item-list .header .time {`
	`483`	`+.entry-list .header .time {`
`484`	`484`	`width: 6.5em;`
`485`	`485`	`text-align: center;`
`486`	`486`	`}`
`@@ -559,28 +559,28 @@ html.dragging::before {`
`559`	`559`	`border-color: #555;`
`560`	`560`	`}`
`561`	`561`
`562`		`- .item-list .detail,`
`563`		`- .item-list .delete {`
	`562`	`+ .entry-list .detail,`
	`563`	`+ .entry-list .delete {`
`564`	`564`	`border-bottom-color: #222;`
`565`	`565`	`}`
`566`	`566`
`567`		`- .item-list .size {`
	`567`	`+ .entry-list .size {`
`568`	`568`	`color: #999;`
`569`	`569`	`}`
`570`	`570`
`571`		`- .item-list .time {`
	`571`	`+ .entry-list .time {`
`572`	`572`	`color: #666;`
`573`	`573`	`}`
`574`	`574`
`575`		`- .item-list .delete button {`
	`575`	`+ .entry-list .delete button {`
`576`	`576`	`color: #f99;`
`577`	`577`	`}`
`578`	`578`
`579`		`- .item-list .delete button:hover {`
	`579`	`+ .entry-list .delete button:hover {`
`580`	`580`	`background-color: #433;`
`581`	`581`	`}`
`582`	`582`
`583`		`- .item-list .header .detail {`
	`583`	`+ .entry-list .header .detail {`
`584`	`584`	`background-color: #181818;`
`585`	`585`	`}`
`586`	`586`
`@@ -590,17 +590,17 @@ html.dragging::before {`
`590`	`590`	`}`
`591`	`591`
`592`	`592`	`@media screen and (max-width: 375px) {`
`593`		`- .item-list .header .time {`
	`593`	`+ .entry-list .header .time {`
`594`	`594`	`width: 4.05em;`
`595`	`595`	`}`
`596`	`596`
`597`		`- .item-list .detail .time span {`
	`597`	`+ .entry-list .detail .time span {`
`598`	`598`	`display: none;`
`599`	`599`	`}`
`600`	`600`	`}`
`601`	`601`
`602`	`602`	`@media screen and (max-width: 350px) {`
`603`		`- .item-list .detail .time {`
	`603`	`+ .entry-list .detail .time {`
`604`	`604`	`display: none;`
`605`	`605`	`}`
`606`	`606`	`}`
`@@ -610,12 +610,12 @@ html.dragging::before {`
`610`	`610`	`display: none;`
`611`	`611`	`}`
`612`	`612`
`613`		`- .item-list li {`
	`613`	`+ .entry-list li {`
`614`	`614`	`page-break-inside: avoid;`
`615`	`615`	`break-inside: avoid;`
`616`	`616`	`}`
`617`	`617`
`618`		`- .item-list li.parent {`
	`618`	`+ .entry-list li.parent {`
`619`	`619`	`display: none;`
`620`	`620`	`}`
`621`	`621`