feat: syncronize position across several windows

index.html

@@ -9,9 +9,14 @@
     <main>
       <section>
         <h1>Presentation Title</h1>
+        <ul>
+          <li janus-timeline>Point one</li>
+          <li janus-timeline>Point two</li>
+          <li janus-timeline>Point three!</li>
+        </ul>
       </section>
-      <section class="image">
-        <img src="https://placekitten.com/1024/768" alt="" />
+      <section>
+        <img class="cover" src="https://placekitten.com/1024/768" alt="" />
         <h1>Slide Two</h1>
       </section>
       <section>

scripts/app.js

@@ -9,15 +9,24 @@
   function $(selector) {
     return document.querySelector(selector);
   }
-  function $$(selector){
+  function $$(selector) {
     return Array.prototype.slice.call(document.querySelectorAll(selector), 0);
   }
 
-  function moveSlides() {
+  function setCurrentSlide(newSlideNumber) {
+    newSlideNumber = Math.max(Math.min(newSlideNumber, slides.length - 1), 0);
+    if (newSlideNumber !== currentSlideNumber) {
+      currentSlideNumber = newSlideNumber;
+      localStorage.setItem('janus-currentSlideNumber', currentSlideNumber);
+    }
     slides.forEach(function (item, index, array) {
       if (index < currentSlideNumber) {
-        item.setAttribute('janus-timeline', 'past');
-      } else if (index == currentSlideNumber) {
+        if (slides[index].contains(slides[currentSlideNumber])) {
+          item.setAttribute('janus-timeline', 'present');
+        } else {
+          item.setAttribute('janus-timeline', 'past');
+        }
+      } else if (index === currentSlideNumber) {
         item.setAttribute('janus-timeline', 'present');
       } else {
         item.setAttribute('janus-timeline', 'future');
@@ -25,26 +34,34 @@
     });
   }
 
+  var sessionListener = function(e) {
+    if (e.url === window.location.href) {
+      if (e.key === 'janus-currentSlideNumber') {
+        setCurrentSlide(+e.newValue);
+      }
+    }
+  };
+
   var init = function() {
-    slides = $$('main>section');
+    slides = $$('main>section, [janus-timeline]');
     currentSlideNumber = 0;
     shortcut.add('F1', function() {
       document.body.classList.toggle('show-notes');
     });
     shortcut.add('Page_down', function() {
-      if (currentSlideNumber < slides.length - 1) {
-        currentSlideNumber++;
-        moveSlides();
-      }
+      setCurrentSlide(currentSlideNumber + 1);
     });
     shortcut.add('Page_up', function() {
-      if (currentSlideNumber > 0) {
-        currentSlideNumber--;
-        moveSlides();
-      }
+      setCurrentSlide(currentSlideNumber - 1);
     });
-    moveSlides();
-  }
+    var storedSlideNumber;
+    if (storedSlideNumber = localStorage.getItem('janus-currentSlideNumber')) {
+      setCurrentSlide(storedSlideNumber);
+    } else {
+      setCurrentSlide(0);
+    }
+  };
 
-  document.addEventListener("DOMContentLoaded", init);
+  document.addEventListener('DOMContentLoaded', init);
+  window.addEventListener('storage', sessionListener);
 })();

styles/main.css

@@ -13,6 +13,10 @@
   font-size: calc(2vw + 2em);
 }
 
+li {
+  list-style: none;
+}
+
 /* Layout */
 body {
   display: flex;
@@ -37,7 +41,7 @@ section {
   z-index: 1;
   display: flex;
   flex-direction: column;
-  justify-content: space-around;
+  justify-content: center;
   width: 100%;
   height: 100%;
   margin: 0;
@@ -45,15 +49,16 @@ section {
   overflow: hidden;
   text-align: center;
   background-color: black;
-  transition: transform ease 1s, opacity ease 1s, visibility step-end 1s;
+  transition: transform ease 0.5s, opacity ease 0.5s, visibility step-end 0.5s;
   transform-origin: 50% 50%;
 }
 
 [janus-timeline='past'] {
+  transition: transform ease-in 0.5s, opacity ease-in 0.5s, visibility step-end 0.5s;
 }
 
 [janus-timeline='present'] {
-  transition: transform ease 1s, opacity ease 1s, visibility step-start 1s;
+  transition: transform ease-out 0.5s, opacity ease-out 0.5s, visibility step-start 0.5s;
 }
 
 @media only screen {
@@ -88,7 +93,7 @@ section[janus-timeline='future'] {
   pointer-events: none;
 }
 
-section.image > img {
+img.cover {
   position: absolute;
   top: 0;
   left: 0;
@@ -98,15 +103,18 @@ section.image > img {
   z-index: -1;
 }
 
-body.show-notes section[janus-timeline='present'] + section[janus-timeline='future'] {
+body.show-notes section {
   transition: none;
+}
+
+body.show-notes section[janus-timeline='present'] + section[janus-timeline='future'] {
   transform: scale(0.25);
   transform-origin: bottom right;
   top: auto;
   left: auto;
   bottom: 0.4rem;
   right: 0.4rem;
-  opacity: 1;
+  opacity: 0.75;
   visibility: visible;
   outline: 0.1rem solid white;
   z-index: 3;