ui photo #15

ismism.ts/ui/index/bind.ts

@@ -54,15 +54,38 @@ function eagenda(
 	agenda: Agenda[]
 ) {
 	el.innerHTML = ""
-	for (const { _id, name, tag, utc } of agenda) {
-		const [t, [a, c, s, et, ed]] = template("agenda", ["idname", "id", "name", "tag", "date"]);
-		(a as HTMLLinkElement).href = `#a${_id}`
-		c.innerText = `a${_id}`
-		if (hash === c.innerText) c.classList.add("darkgray")
-		else c.classList.remove("darkgray")
-		s.innerText = name
-		etag(et, tag)
-		ed.innerText = `公示时间: ${utc_medium(utc)}\n更新时间：${utc_medium(Date.now())}`
+	for (const { _id, name, tag, utc, dat } of agenda) {
+		const [t, [
+			cidname, cid, cname, ctag, cdate,
+			cphoto, cphoto_title, cphoto_prev, cphoto_next, cphoto_nbr, cphoto_total, cphoto_img,
+		]] = template("agenda", [
+			"idname", "id", "name", "tag", "date",
+			"photo", "photo-title", "photo-prev", "photo-next", "photo-nbr", "photo-total", "photo-img"
+		]);
+
+		(cidname as HTMLLinkElement).href = `#a${_id}`
+		cid.innerText = `a${_id}`
+		if (hash === cid.innerText) cid.classList.add("darkgray")
+		else cid.classList.remove("darkgray")
+		cname.innerText = name
+		etag(ctag, tag)
+		cdate.innerText = `公示时间: ${utc_medium(utc)}\n更新时间：${utc_medium(Date.now())}`
+
+		if (dat === null || dat.img.length === 0)
+			cphoto.parentNode?.parentNode?.removeChild(cphoto.parentNode)
+		else {
+			cphoto_total.innerText = `${dat.img.length}`
+			let n = 0
+			const nimg = (d: number) => {
+				n = ((n + d) % dat.img.length + dat.img.length) % dat.img.length
+				cphoto_title.innerText = dat.img[n].title
+				cphoto_nbr.innerText = `${n + 1}`;
+				(cphoto_img as HTMLImageElement).src = dat.img[n].src
+			}
+			nimg(0)
+			cphoto_prev.addEventListener("click", () => nimg(-1))
+			cphoto_next.addEventListener("click", () => nimg(1))
+		}
 		el.appendChild(t)
 	}
 }

ismism.ts/ui/index/index.html

@@ -130,12 +130,25 @@
 		background: var(--black);
 	}
 
+	button.photo-prev,
+	button.photo-next {
+		font-size: 1em;
+		margin: 0;
+		padding: 0;
+		color: var(--darkgray);
+		background: none;
+		border: none;
+		cursor: pointer;
+	}
+
 	@media (hover: hover) {
 		a.video:hover {
 			color: var(--amber);
 		}
 
-		a.tag:hover {
+		a.tag:hover,
+		button.photo-prev:hover,
+		button.photo-next:hover {
 			color: var(--white) !important;
 			border-color: var(--darkgray) !important;
 			background: var(--darkgray) !important;
@@ -172,6 +185,47 @@
 		margin: 10px 0;
 	}
 
+	div.photo {
+		display: flex;
+		width: auto;
+		flex-flow: row wrap;
+		align-items: center;
+		text-align: center;
+		color: var(--darkgray);
+		border-top: 1px dotted var(--darkgray);
+		padding: 10px 0;
+	}
+
+	img.photo-img {
+		width: 100%;
+		box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
+	}
+
+	@media (max-width: 720px) {
+		div.photo>span {
+			width: 100%;
+		}
+	}
+
+	@media (min-width: 720px) {
+		div.photo>span {
+			flex-basis: 180px;
+			flex-grow: 1;
+		}
+
+		div.photo>span:nth-child(1) {
+			text-align: left;
+		}
+
+		div.photo>span:nth-child(2) {
+			text-align: center;
+		}
+
+		div.photo>span:nth-child(3) {
+			text-align: right;
+		}
+	}
+
 	article {
 		margin: 16px;
 		padding: 8px 16px;
@@ -181,6 +235,7 @@
 
 	article>section {
 		margin: 0;
+		padding: 0;
 	}
 
 	footer {
@@ -200,6 +255,14 @@
 			<div class="tag">tag</div>
 			<div class="date">date</div>
 		</section>
+		<section>
+			<div class="photo">
+				<span class="photo-title">photo title</span>
+				<span><button class="photo-prev">上一张</button> / <button class="photo-next">下一张</button></span>
+				<span>第<span class="photo-nbr">1</span>张 / 共<span class="photo-total">6</span>张</span>
+			</div>
+			<img class="photo-img">
+		</section>
 	</article>
 </template>