joshua/janus
1
0
Fork 0
mirror of https://github.com/seigler/janus synced 2025-07-27 09:46:10 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: syncronize position across several windows

Browse source
This commit is contained in:
Joshua Seigler 2016-10-10 12:47:11 -04:00
parent 31c44a39bb
commit 59e965047e
3 changed files with 54 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

9
index.html
View file

@ -9,9 +9,14 @@
<main> <main>
<section> <section>
<h1>Presentation Title</h1> <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>
<section class="image"> <section>
<img src="https://placekitten.com/1024/768" alt="" /> <img class="cover" src="https://placekitten.com/1024/768" alt="" />
<h1>Slide Two</h1> <h1>Slide Two</h1>
</section> </section>
<section> <section>

49
scripts/app.js
View file

@ -9,15 +9,24 @@
function $(selector) { function $(selector) {
return document.querySelector(selector); return document.querySelector(selector);
} }
function $$(selector){ function $$(selector) {
return Array.prototype.slice.call(document.querySelectorAll(selector), 0); 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) { slides.forEach(function (item, index, array) {
if (index < currentSlideNumber) { if (index < currentSlideNumber) {
item.setAttribute('janus-timeline', 'past'); if (slides[index].contains(slides[currentSlideNumber])) {
} else if (index == currentSlideNumber) { item.setAttribute('janus-timeline', 'present');
} else {
item.setAttribute('janus-timeline', 'past');
}
} else if (index === currentSlideNumber) {
item.setAttribute('janus-timeline', 'present'); item.setAttribute('janus-timeline', 'present');
} else { } else {
item.setAttribute('janus-timeline', 'future'); 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() { var init = function() {
slides = $$('main>section'); slides = $$('main>section, [janus-timeline]');
currentSlideNumber = 0; currentSlideNumber = 0;
shortcut.add('F1', function() { shortcut.add('F1', function() {
document.body.classList.toggle('show-notes'); document.body.classList.toggle('show-notes');
}); });
shortcut.add('Page_down', function() { shortcut.add('Page_down', function() {
if (currentSlideNumber < slides.length - 1) { setCurrentSlide(currentSlideNumber + 1);
currentSlideNumber++;
moveSlides();
}
}); });
shortcut.add('Page_up', function() { shortcut.add('Page_up', function() {
if (currentSlideNumber > 0) { setCurrentSlide(currentSlideNumber - 1);
currentSlideNumber--;
moveSlides();
}
}); });
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);
})(); })();

20
styles/main.css
View file

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