Initial commit

2 files changed, 168 insertions, 0 deletions

diff --git a/rsrc/main.css b/rsrc/main.css
new file mode 100644
index 0000000..65de888
--- /dev/null
+++ b/rsrc/main.css
@@ -0,0 +1,107 @@
+/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
+/* Main
+/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
+html{margin:0;padding:0;height:100%;font-size:1.25rem;background:#DDD;}
+body{margin:0;padding:0;height:100%;font-size:1.00rem;display:flex;}
+
+main{margin:auto;padding:1rem;background:#FFF;width:60rem;border:0.05rem solid #AAA;}
+
+/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
+/* Slideshow
+/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
+.slideshow {
+	display:flex;
+	width:100%;
+	height:30rem;
+	border:0.05rem solid #AAA;
+}
+
+.slideshow > ul,
+.slideshow > div {
+	display:flex;
+	box-sizing:border-box;
+	align-items:center;
+}
+
+.slideshow > div {
+	width:5%;
+	background:#DDD;
+	justify-content:center;
+	cursor:pointer;
+	font-weight:600;
+	padding:0.25rem;
+}
+
+.slideshow > ul {
+	list-style:none;
+	margin:0;
+	padding:0;
+	width:90%;
+	border:0.05rem solid #AAA;
+	border-top:none;
+	border-bottom:none;
+	box-sizing:border-box;
+	z-index:0;
+	position:relative;
+	overflow:hidden;
+}
+
+.slideshow > ul > li {
+	transition:visibility 0.5s linear, opacity 0.5s linear;
+	position:absolute;
+	top:0;
+	padding:0.5rem;
+	box-sizing:border-box;
+}
+
+.slideshow > ul > li.show {
+	visibility:visible;
+	opacity:1;
+}
+
+.slideshow > ul > li.show img {
+	animation-name:animation;
+	animation-duration:0.5s;
+	animation-fill-mode:both;
+}
+
+.slideshow > ul > li.show.next img{
+	animation-name:nextAnimation;
+}
+
+.slideshow > ul > li.show.prev img{
+	animation-name:prevAnimation;
+}
+
+.slideshow > ul > li.hide {
+	visibility:hidden;
+	opacity:0;
+}
+
+/* The "object-fit" attribute is equivalent to "background-size".  */
+.slideshow > ul,
+.slideshow > ul > li,
+.slideshow > ul > li > img {
+	width:100%;
+	height:100%;
+	object-fit:contain;
+	background:#DDD;
+}
+
+/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
+/* Animation
+/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
+@keyframes animation {
+	0%  {transform:translateY(-50rem);}
+	100%{transform:translateY(0);}
+}
+
+@keyframes prevAnimation {
+	0%  {transform:translateX(-50rem);}
+	100%{transform:translateX(0);}
+}
+
+@keyframes nextAnimation {
+	0%  {transform:translateX(50rem);}
+	100%{transform:translateX(0);}
+}
\ No newline at end of file
diff --git a/rsrc/main.js b/rsrc/main.js
new file mode 100644
index 0000000..c35f983
--- /dev/null
+++ b/rsrc/main.js
@@ -0,0 +1,61 @@
+class Slideshow {
+	constructor(node) {
+		let prev, next, time;
+
+		this.autostop = false;
+		this.timeout = false;
+		this.current = 0;
+		this.list = node.getElementsByTagName("ul")[0].getElementsByTagName("li");
+
+		if(prev = node.getElementsByClassName("prev")[0]) {
+			prev.onclick = () => {
+				this.initializeTimeout();
+				this.changeDirection("prev")
+			};
+		}
+
+		if(next = node.getElementsByClassName("next")[0]) {
+			next.onclick = () => {
+				this.initializeTimeout();
+				this.changeDirection("next");
+			};
+		}
+
+		if(time = node.getAttribute("data-time")) {
+			setInterval(() => {
+				!this.autostop && this.changeDirection("next");
+			}, time);
+		}
+	}
+
+	initializeTimeout() {
+		if(this.timeout) {
+			clearTimeout(this.timeout);
+		}
+
+		this.autostop = true;
+		this.timeout = setTimeout(() => {
+			this.autostop = false;
+		}, 15000);
+	}
+
+	changeDirection(direction) {
+		(direction === "prev" && --this.current);
+		(direction === "next" && ++this.current);
+
+		if(this.list[this.current] === undefined) {
+			switch(direction) {
+				case "prev": this.current = this.list.length - 1; break;
+				case "next": this.current = 0;
+			}
+		}
+
+		for(let i = 0; i < this.list.length; ++i) {
+			if(this.current === i) {
+				this.list[i].getAttribute("class") !== "show" && this.list[i].setAttribute("class", "show " + direction);
+			} else {
+				this.list[i].getAttribute("class") !== "hide" && this.list[i].setAttribute("class", "hide");
+			}
+		}
+	}
+}
\ No newline at end of file