feat: add 12UL history (#19)

Co-authored-by: NuttyShrimp <[email protected]>

closes #16

content/index.erb

@@ -34,8 +34,9 @@ show_dj_registrations: false
 
 <%= render '/parts/separator.*', sid: 'separator1', sclass: 'bg2' %>
 <%= render '/parts/wedstrijd.*' %>
-<%# render '/parts/separator.*', sid: 'separator2', sclass: 'bg3' %>
-<%= render '/parts/separator.*', sid: 'separator3', sclass: 'bg4' %>
+<%= render '/parts/separator.*', sid: 'separator2', sclass: 'bg3' %>
 <%= render '/parts/animatie.*' %>
+<%= render '/parts/separator.*', sid: 'separator3', sclass: 'bg4' %>
+<%= render '/parts/history.*' %>
 <%= render '/parts/separator.*', sid: 'separator4', sclass: 'bg5' %>
 <%= render '/parts/contact.*' %>

content/javascripts/timeline.js

@@ -0,0 +1,123 @@
+(function() {
+
+    // VARIABLES
+    const timeline = document.querySelector(".timeline ol"),
+        elH = document.querySelectorAll(".timeline li > div"),
+        arrows = document.querySelectorAll(".timeline .arrows .arrow"),
+        arrowPrev = document.querySelector(".timeline .arrows .arrow__prev"),
+        arrowNext = document.querySelector(".timeline .arrows .arrow__next"),
+        firstItem = document.querySelector(".timeline li:first-child"),
+        lastItem = document.querySelector(".timeline li:last-child"),
+        xScrolling = 380,
+        disabledClass = "disabled";
+
+    // START
+    window.addEventListener("load", init);
+
+    function init() {
+        setEqualHeights(elH);
+        animateTl(xScrolling, arrows, timeline);
+        setSwipeFn(timeline, arrowPrev, arrowNext);
+        setKeyboardFn(arrowPrev, arrowNext);
+    }
+
+    // SET EQUAL HEIGHTS
+    function setEqualHeights(el) {
+        let counter = 0;
+        for (let i = 0; i < el.length; i++) {
+            const singleHeight = el[i].offsetHeight;
+
+            if (counter < singleHeight) {
+                counter = singleHeight;
+            }
+        }
+
+        counter -= 20;
+
+        for (let i = 0; i < el.length; i++) {
+            el[i].style.height = `${counter}px`;
+        }
+    }
+
+    // CHECK IF AN ELEMENT IS IN VIEWPORT
+    // http://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport
+    function isElementInViewport(el) {
+        const rect = el.getBoundingClientRect();
+        return (
+            rect.top >= 0 &&
+            rect.left >= 0 &&
+            rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
+            rect.right <= (window.innerWidth || document.documentElement.clientWidth)
+        );
+    }
+
+    // SET STATE OF PREV/NEXT ARROWS
+    function setBtnState(el, flag = true) {
+        if (flag) {
+            el.classList.add(disabledClass);
+        } else {
+            if (el.classList.contains(disabledClass)) {
+                el.classList.remove(disabledClass);
+            }
+            el.disabled = false;
+        }
+    }
+
+    // ANIMATE TIMELINE
+    function animateTl(scrolling, el, tl) {
+        let counter = 0;
+        for (let i = 0; i < el.length; i++) {
+            el[i].addEventListener("click", function() {
+                if (!arrowPrev.disabled) {
+                    arrowPrev.disabled = true;
+                }
+                if (!arrowNext.disabled) {
+                    arrowNext.disabled = true;
+                }
+                const sign = (this.classList.contains("arrow__prev")) ? "" : "-";
+                if (counter === 0) {
+                    tl.style.transform = `translateX(-${scrolling}px)`;
+                } else {
+                    const tlStyle = getComputedStyle(tl);
+                    // add more browser prefixes if needed here
+                    const tlTransform = tlStyle.getPropertyValue("-webkit-transform") || tlStyle.getPropertyValue("transform");
+                    const values = parseInt(tlTransform.split(",")[4]) + parseInt(`${sign}${scrolling}`);
+                    tl.style.transform = `translateX(${values}px)`;
+                }
+
+                setTimeout(() => {
+                    isElementInViewport(firstItem) ? setBtnState(arrowPrev) : setBtnState(arrowPrev, false);
+                    isElementInViewport(lastItem) ? setBtnState(arrowNext) : setBtnState(arrowNext, false);
+                }, 1100);
+
+                counter++;
+            });
+        }
+    }
+
+    // ADD SWIPE SUPPORT FOR TOUCH DEVICES
+    function setSwipeFn(tl, prev, next) {
+        const hammer = new Hammer(tl);
+        hammer.on("swipeleft", () => next.click());
+        hammer.on("swiperight", () => prev.click());
+    }
+
+    // ADD BASIC KEYBOARD FUNCTIONALITY
+    function setKeyboardFn(prev, next) {
+        document.addEventListener("keydown", (e) => {
+            if ((e.which === 37) || (e.which === 39)) {
+                const timelineOfTop = timeline.offsetTop;
+                const y = window.pageYOffset;
+                if (timelineOfTop !== y) {
+                    window.scrollTo(0, timelineOfTop);
+                }
+                if (e.which === 37) {
+                    prev.click();
+                } else if (e.which === 39) {
+                    next.click();
+                }
+            }
+        });
+    }
+
+})();

content/stylesheets/layout.scss

@@ -254,7 +254,7 @@ p.separator {
     padding-top: 240px;
 }
 
-.bg1, .bg2, .bg3, .bg4, .bg5 {
+.bg1, .bg2, .bg3, .bg4, .bg5, .bg6 {
     width: 100%; height: 100%;
     margin: 0; padding: 0;
     background-position: 50% 50%;
@@ -505,6 +505,16 @@ p.mid-text {
     box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.9);
 }
 
+#history {
+    background: url(../images/bg-dark.jpg) repeat;
+    position: relative;
+    z-index: 300;
+    padding-top: 40px;
+    padding-bottom: 40px;
+    -webkit-box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.9);
+    box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.9);
+}
+
 .done {
     font-family: 'Source Sans Pro', sans-serif;
     color: #fff;
@@ -518,6 +528,10 @@ p.mid-text {
   width: 80%;
 }
 
+.history {
+    width: 80%;
+}
+
 .contact-form {
     width: 80%;
     padding-left: 10%;

content/stylesheets/timeline.css

@@ -0,0 +1,208 @@
+/* .section SECTION
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+
+.section {
+    background: #fc0;
+    padding: 50px 0;
+}
+
+.section .container {
+    width: 90%;
+    max-width: 1200px;
+    margin: 0 auto;
+    text-align: center;
+}
+
+.section h1 {
+    font-size: 2.5rem;
+}
+
+.section h2 {
+    font-size: 1.3rem;
+}
+
+
+/* TIMELINE
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+
+.timeline {
+    white-space: nowrap;
+    overflow-x: hidden;
+    padding-right: 40px;
+}
+
+.timeline-btn {
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    outline: none;
+}
+
+.timeline ol {
+    font-size: 0;
+    width: 100vw;
+    padding: 250px 0;
+    transition: all 1s;
+}
+
+.timeline ol li {
+    position: relative;
+    display: inline-block;
+    list-style-type: none;
+    width: 100px;
+    height: 3px;
+    background: #fff;
+}
+
+.timeline ol li:last-child {
+    width: 280px;
+}
+
+.timeline ol li:not(:first-child) {
+    margin-left: 14px;
+}
+
+.timeline ol li:not(:last-child)::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: calc(100% + 1px);
+    bottom: 0;
+    width: 12px;
+    height: 12px;
+    transform: translateY(-50%);
+    border-radius: 50%;
+    background: #fc0;
+}
+
+.timeline ol li div {
+    position: absolute;
+    left: calc(100% + 7px);
+    width: 160px;
+    padding: 15px;
+    font-size: 1rem;
+    white-space: normal;
+    color: black;
+    background: white;
+}
+
+.timeline ol li div::before {
+    content: '';
+    position: absolute;
+    top: 100%;
+    left: 0;
+    width: 0;
+    height: 0;
+    border-style: solid;
+}
+
+.timeline ol li:nth-child(odd) div {
+    top: -16px;
+    transform: translateY(-100%);
+}
+
+.timeline ol li:nth-child(odd) div::before {
+    top: 100%;
+    border-width: 8px 8px 0 0;
+    border-color: white transparent transparent transparent;
+}
+
+.timeline ol li:nth-child(even) div {
+    top: calc(100% + 16px);
+}
+
+.timeline ol li:nth-child(even) div::before {
+    top: -8px;
+    border-width: 8px 0 0 8px;
+    border-color: transparent transparent transparent white;
+}
+
+.timeline time {
+    display: block;
+    font-size: 1.2rem;
+    font-weight: bold;
+    margin-bottom: 8px;
+}
+
+
+/* TIMELINE ARROWS
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+
+.timeline .arrows {
+    display: flex;
+    justify-content: center;
+    margin-bottom: 20px;
+}
+
+.timeline .arrows .arrow__prev {
+    margin-right: 20px;
+}
+
+.timeline .disabled {
+    opacity: .5;
+}
+
+.timeline .arrows img {
+    width: 45px;
+    height: 45px;
+}
+
+
+/* GENERAL MEDIA QUERIES
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+@media screen and (max-width: 599px) {
+    .timeline ol,
+    .timeline ol li {
+        width: auto;
+    }
+
+    .timeline ol {
+        padding: 0;
+        transform: none !important;
+    }
+
+    .timeline ol li {
+        display: block;
+        height: auto;
+        background: transparent;
+    }
+
+    .timeline ol li:first-child {
+        margin-top: 25px;
+    }
+
+    .timeline ol li:not(:first-child) {
+        margin-left: auto;
+    }
+
+    .timeline ol li div {
+        width: 94%;
+        height: auto !important;
+        margin: 0 auto 25px;
+    }
+
+    .timeline ol li div {
+        position: static;
+    }
+
+    .timeline ol li:nth-child(odd) div {
+        transform: none;
+    }
+
+    .timeline ol li:nth-child(odd) div::before,
+    .timeline ol li:nth-child(even) div::before {
+        left: 50%;
+        top: 100%;
+        transform: translateX(-50%);
+        border: none;
+        border-left: 1px solid white;
+        height: 25px;
+    }
+
+    .timeline ol li:last-child,
+    .timeline ol li:nth-last-child(2) div::before,
+    .timeline ol li:not(:last-child)::after,
+    .timeline .arrows {
+        display: none;
+    }
+}