summaryrefslogtreecommitdiffstats
path: root/rsrc
diff options
context:
space:
mode:
Diffstat (limited to 'rsrc')
-rw-r--r--rsrc/main.css107
-rw-r--r--rsrc/main.js61
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