mirror of
https://github.com/seigler/janus
synced 2025-07-27 01:36:11 +00:00
feat: better example slides
This commit is contained in:
Joshua Seigler
parent
59e965047e
commit
22927bfd38
4 changed files with 382 additions and 17 deletions
319
Janus-demo.html
Normal file
319
Janus-demo.html
Normal file
|
|
@ -0,0 +1,319 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Janus Presentation Framework</title>
|
||||||
|
<link rel="stylesheet" href="styles/main.css" charset="utf-8">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<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>
|
||||||
|
<img class="cover" src="https://placekitten.com/1024/768" alt="" />
|
||||||
|
<h1>Slide Two</h1>
|
||||||
|
</section>
|
||||||
|
<section>
|
||||||
|
<h1>Slide Three</h1>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
<script type="text/javascript">/**
|
||||||
|
* http://www.openjs.com/scripts/events/keyboard_shortcuts/
|
||||||
|
* Version : 2.01.B
|
||||||
|
* By Binny V A
|
||||||
|
* License : BSD
|
||||||
|
*/
|
||||||
|
shortcut = {
|
||||||
|
'all_shortcuts':{},//All the shortcuts are stored in this array
|
||||||
|
'add': function(shortcut_combination,callback,opt) {
|
||||||
|
//Provide a set of default options
|
||||||
|
var default_options = {
|
||||||
|
'type':'keydown',
|
||||||
|
'propagate':false,
|
||||||
|
'disable_in_input':false,
|
||||||
|
'target':document,
|
||||||
|
'keycode':false
|
||||||
|
}
|
||||||
|
if(!opt) opt = default_options;
|
||||||
|
else {
|
||||||
|
for(var dfo in default_options) {
|
||||||
|
if(typeof opt[dfo] == 'undefined') opt[dfo] = default_options[dfo];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var ele = opt.target;
|
||||||
|
if(typeof opt.target == 'string') ele = document.getElementById(opt.target);
|
||||||
|
var ths = this;
|
||||||
|
shortcut_combination = shortcut_combination.toLowerCase();
|
||||||
|
|
||||||
|
//The function to be called at keypress
|
||||||
|
var func = function(e) {
|
||||||
|
e = e || window.event;
|
||||||
|
|
||||||
|
if(opt['disable_in_input']) { //Don't enable shortcut keys in Input, Textarea fields
|
||||||
|
var element;
|
||||||
|
if(e.target) element=e.target;
|
||||||
|
else if(e.srcElement) element=e.srcElement;
|
||||||
|
if(element.nodeType==3) element=element.parentNode;
|
||||||
|
|
||||||
|
if(element.tagName == 'INPUT' || element.tagName == 'TEXTAREA') return;
|
||||||
|
}
|
||||||
|
|
||||||
|
//Find Which key is pressed
|
||||||
|
if (e.keyCode) code = e.keyCode;
|
||||||
|
else if (e.which) code = e.which;
|
||||||
|
var character = String.fromCharCode(code).toLowerCase();
|
||||||
|
|
||||||
|
if(code == 188) character=","; //If the user presses , when the type is onkeydown
|
||||||
|
if(code == 190) character="."; //If the user presses , when the type is onkeydown
|
||||||
|
|
||||||
|
var keys = shortcut_combination.split("+");
|
||||||
|
//Key Pressed - counts the number of valid keypresses - if it is same as the number of keys, the shortcut function is invoked
|
||||||
|
var kp = 0;
|
||||||
|
|
||||||
|
//Work around for stupid Shift key bug created by using lowercase - as a result the shift+num combination was broken
|
||||||
|
var shift_nums = {
|
||||||
|
"`":"~",
|
||||||
|
"1":"!",
|
||||||
|
"2":"@",
|
||||||
|
"3":"#",
|
||||||
|
"4":"$",
|
||||||
|
"5":"%",
|
||||||
|
"6":"^",
|
||||||
|
"7":"&",
|
||||||
|
"8":"*",
|
||||||
|
"9":"(",
|
||||||
|
"0":")",
|
||||||
|
"-":"_",
|
||||||
|
"=":"+",
|
||||||
|
";":":",
|
||||||
|
"'":"\"",
|
||||||
|
",":"<",
|
||||||
|
".":">",
|
||||||
|
"/":"?",
|
||||||
|
"\\":"|"
|
||||||
|
}
|
||||||
|
//Special Keys - and their codes
|
||||||
|
var special_keys = {
|
||||||
|
'esc':27,
|
||||||
|
'escape':27,
|
||||||
|
'tab':9,
|
||||||
|
'space':32,
|
||||||
|
'return':13,
|
||||||
|
'enter':13,
|
||||||
|
'backspace':8,
|
||||||
|
|
||||||
|
'scrolllock':145,
|
||||||
|
'scroll_lock':145,
|
||||||
|
'scroll':145,
|
||||||
|
'capslock':20,
|
||||||
|
'caps_lock':20,
|
||||||
|
'caps':20,
|
||||||
|
'numlock':144,
|
||||||
|
'num_lock':144,
|
||||||
|
'num':144,
|
||||||
|
|
||||||
|
'pause':19,
|
||||||
|
'break':19,
|
||||||
|
|
||||||
|
'insert':45,
|
||||||
|
'home':36,
|
||||||
|
'delete':46,
|
||||||
|
'end':35,
|
||||||
|
|
||||||
|
'pageup':33,
|
||||||
|
'page_up':33,
|
||||||
|
'pu':33,
|
||||||
|
|
||||||
|
'pagedown':34,
|
||||||
|
'page_down':34,
|
||||||
|
'pd':34,
|
||||||
|
|
||||||
|
'left':37,
|
||||||
|
'up':38,
|
||||||
|
'right':39,
|
||||||
|
'down':40,
|
||||||
|
|
||||||
|
'f1':112,
|
||||||
|
'f2':113,
|
||||||
|
'f3':114,
|
||||||
|
'f4':115,
|
||||||
|
'f5':116,
|
||||||
|
'f6':117,
|
||||||
|
'f7':118,
|
||||||
|
'f8':119,
|
||||||
|
'f9':120,
|
||||||
|
'f10':121,
|
||||||
|
'f11':122,
|
||||||
|
'f12':123
|
||||||
|
}
|
||||||
|
|
||||||
|
var modifiers = {
|
||||||
|
shift: { wanted:false, pressed:false},
|
||||||
|
ctrl : { wanted:false, pressed:false},
|
||||||
|
alt : { wanted:false, pressed:false},
|
||||||
|
meta : { wanted:false, pressed:false} //Meta is Mac specific
|
||||||
|
};
|
||||||
|
|
||||||
|
if(e.ctrlKey) modifiers.ctrl.pressed = true;
|
||||||
|
if(e.shiftKey) modifiers.shift.pressed = true;
|
||||||
|
if(e.altKey) modifiers.alt.pressed = true;
|
||||||
|
if(e.metaKey) modifiers.meta.pressed = true;
|
||||||
|
|
||||||
|
for(var i=0; k=keys[i],i<keys.length; i++) {
|
||||||
|
//Modifiers
|
||||||
|
if(k == 'ctrl' || k == 'control') {
|
||||||
|
kp++;
|
||||||
|
modifiers.ctrl.wanted = true;
|
||||||
|
|
||||||
|
} else if(k == 'shift') {
|
||||||
|
kp++;
|
||||||
|
modifiers.shift.wanted = true;
|
||||||
|
|
||||||
|
} else if(k == 'alt') {
|
||||||
|
kp++;
|
||||||
|
modifiers.alt.wanted = true;
|
||||||
|
} else if(k == 'meta') {
|
||||||
|
kp++;
|
||||||
|
modifiers.meta.wanted = true;
|
||||||
|
} else if(k.length > 1) { //If it is a special key
|
||||||
|
if(special_keys[k] == code) kp++;
|
||||||
|
|
||||||
|
} else if(opt['keycode']) {
|
||||||
|
if(opt['keycode'] == code) kp++;
|
||||||
|
|
||||||
|
} else { //The special keys did not match
|
||||||
|
if(character == k) kp++;
|
||||||
|
else {
|
||||||
|
if(shift_nums[character] && e.shiftKey) { //Stupid Shift key bug created by using lowercase
|
||||||
|
character = shift_nums[character];
|
||||||
|
if(character == k) kp++;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if(kp == keys.length &&
|
||||||
|
modifiers.ctrl.pressed == modifiers.ctrl.wanted &&
|
||||||
|
modifiers.shift.pressed == modifiers.shift.wanted &&
|
||||||
|
modifiers.alt.pressed == modifiers.alt.wanted &&
|
||||||
|
modifiers.meta.pressed == modifiers.meta.wanted) {
|
||||||
|
callback(e);
|
||||||
|
|
||||||
|
if(!opt['propagate']) { //Stop the event
|
||||||
|
//e.cancelBubble is supported by IE - this will kill the bubbling process.
|
||||||
|
e.cancelBubble = true;
|
||||||
|
e.returnValue = false;
|
||||||
|
|
||||||
|
//e.stopPropagation works in Firefox.
|
||||||
|
if (e.stopPropagation) {
|
||||||
|
e.stopPropagation();
|
||||||
|
e.preventDefault();
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.all_shortcuts[shortcut_combination] = {
|
||||||
|
'callback':func,
|
||||||
|
'target':ele,
|
||||||
|
'event': opt['type']
|
||||||
|
};
|
||||||
|
//Attach the function with the event
|
||||||
|
if(ele.addEventListener) ele.addEventListener(opt['type'], func, false);
|
||||||
|
else if(ele.attachEvent) ele.attachEvent('on'+opt['type'], func);
|
||||||
|
else ele['on'+opt['type']] = func;
|
||||||
|
},
|
||||||
|
|
||||||
|
//Remove the shortcut - just specify the shortcut and I will remove the binding
|
||||||
|
'remove':function(shortcut_combination) {
|
||||||
|
shortcut_combination = shortcut_combination.toLowerCase();
|
||||||
|
var binding = this.all_shortcuts[shortcut_combination];
|
||||||
|
delete(this.all_shortcuts[shortcut_combination])
|
||||||
|
if(!binding) return;
|
||||||
|
var type = binding['event'];
|
||||||
|
var ele = binding['target'];
|
||||||
|
var callback = binding['callback'];
|
||||||
|
|
||||||
|
if(ele.detachEvent) ele.detachEvent('on'+type, callback);
|
||||||
|
else if(ele.removeEventListener) ele.removeEventListener(type, callback, false);
|
||||||
|
else ele['on'+type] = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<script type="text/javascript">(function () {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
var slides = [],
|
||||||
|
currentSlideNumber = 0,
|
||||||
|
slideNext,
|
||||||
|
slidePrev;
|
||||||
|
|
||||||
|
function $(selector) {
|
||||||
|
return document.querySelector(selector);
|
||||||
|
}
|
||||||
|
function $$(selector) {
|
||||||
|
return Array.prototype.slice.call(document.querySelectorAll(selector), 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
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) {
|
||||||
|
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');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
var sessionListener = function(e) {
|
||||||
|
if (e.url === window.location.href) {
|
||||||
|
if (e.key === 'janus-currentSlideNumber') {
|
||||||
|
setCurrentSlide(+e.newValue);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
var init = function() {
|
||||||
|
slides = $$('main>section, [janus-timeline]');
|
||||||
|
currentSlideNumber = 0;
|
||||||
|
shortcut.add('F1', function() {
|
||||||
|
document.body.classList.toggle('show-notes');
|
||||||
|
});
|
||||||
|
shortcut.add('Page_down', function() {
|
||||||
|
setCurrentSlide(currentSlideNumber + 1);
|
||||||
|
});
|
||||||
|
shortcut.add('Page_up', function() {
|
||||||
|
setCurrentSlide(currentSlideNumber - 1);
|
||||||
|
});
|
||||||
|
var storedSlideNumber;
|
||||||
|
if (storedSlideNumber = localStorage.getItem('janus-currentSlideNumber')) {
|
||||||
|
setCurrentSlide(storedSlideNumber);
|
||||||
|
} else {
|
||||||
|
setCurrentSlide(0);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
document.addEventListener('DOMContentLoaded', init);
|
||||||
|
window.addEventListener('storage', sessionListener);
|
||||||
|
})();
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
44
index.html
44
index.html
|
|
@ -7,20 +7,44 @@
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<main>
|
<main>
|
||||||
<section>
|
<section style="background: linear-gradient(-30deg, black, rebeccapurple)">
|
||||||
<h1>Presentation Title</h1>
|
<h1>Janus Presentations</h1>
|
||||||
<ul>
|
<h2>Hotkey powered, multi-window presentations</h2>
|
||||||
<li janus-timeline>Point one</li>
|
<div>Press <code>Page Down</code> to continue.</div>
|
||||||
<li janus-timeline>Point two</li>
|
|
||||||
<li janus-timeline>Point three!</li>
|
|
||||||
</ul>
|
|
||||||
</section>
|
</section>
|
||||||
<section>
|
<section style="background: linear-gradient(-30deg, #400, black)">
|
||||||
|
<h1>Hotkeys</h1>
|
||||||
|
<div janus-timeline>
|
||||||
|
Clone Window: <code>F2</code>
|
||||||
|
</div>
|
||||||
|
<div janus-timeline>
|
||||||
|
Navigation: <code>Page Down</code>, <code>Page Up</code>
|
||||||
|
</div>
|
||||||
|
<div janus-timeline>
|
||||||
|
Toggle Presenter Mode: <code>F1</code>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section style="text-shadow: 0 0 1em black;">
|
||||||
<img class="cover" src="https://placekitten.com/1024/768" alt="" />
|
<img class="cover" src="https://placekitten.com/1024/768" alt="" />
|
||||||
<h1>Slide Two</h1>
|
<h1>Self-scaling cover images with <code>object-fit</code></h1>
|
||||||
|
</section>
|
||||||
|
<section style="background: linear-gradient(60deg, #060, black)">
|
||||||
|
<h1>Simple default markup</h1>
|
||||||
|
<div>
|
||||||
|
Any <code>section</code> tag or item with attribute <code>janus-timeline</code> is added to the timeline and revealed in sequence.
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section style="background: linear-gradient(-60deg, black, #630)">
|
||||||
|
<h1>Animations controlled by CSS</h1>
|
||||||
|
<div>
|
||||||
|
Framework sets custom attribute <code>janus-timeline</code> to <code>past</code>, <code>present</code>, or <code>future</code>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<section style="color: black; background-color: #FA0">
|
||||||
|
<h1>Cross-window synchronization with JavaScript <code>localStorage</code> events.</h1>
|
||||||
</section>
|
</section>
|
||||||
<section>
|
<section>
|
||||||
<h1>Slide Three</h1>
|
<h1>The end.</h1>
|
||||||
</section>
|
</section>
|
||||||
</main>
|
</main>
|
||||||
<script type="text/javascript" src="scripts/shortcut.js"></script>
|
<script type="text/javascript" src="scripts/shortcut.js"></script>
|
||||||
|
|
|
||||||
|
|
@ -35,6 +35,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
var sessionListener = function(e) {
|
var sessionListener = function(e) {
|
||||||
|
console.log(e);
|
||||||
if (e.url === window.location.href) {
|
if (e.url === window.location.href) {
|
||||||
if (e.key === 'janus-currentSlideNumber') {
|
if (e.key === 'janus-currentSlideNumber') {
|
||||||
setCurrentSlide(+e.newValue);
|
setCurrentSlide(+e.newValue);
|
||||||
|
|
@ -48,6 +49,9 @@
|
||||||
shortcut.add('F1', function() {
|
shortcut.add('F1', function() {
|
||||||
document.body.classList.toggle('show-notes');
|
document.body.classList.toggle('show-notes');
|
||||||
});
|
});
|
||||||
|
shortcut.add('F2', function() {
|
||||||
|
window.open(window.location.href, '_blank');
|
||||||
|
});
|
||||||
shortcut.add('Page_down', function() {
|
shortcut.add('Page_down', function() {
|
||||||
setCurrentSlide(currentSlideNumber + 1);
|
setCurrentSlide(currentSlideNumber + 1);
|
||||||
});
|
});
|
||||||
|
|
|
||||||
|
|
@ -17,6 +17,21 @@ li {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
code {
|
||||||
|
font-family: Consolas, monaco, monospace;
|
||||||
|
border: 2px dashed currentcolor;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
}
|
||||||
|
h2 {
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
h1, h2 {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
/* Layout */
|
/* Layout */
|
||||||
body {
|
body {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -61,18 +76,21 @@ section {
|
||||||
transition: transform ease-out 0.5s, opacity ease-out 0.5s, visibility step-start 0.5s;
|
transition: transform ease-out 0.5s, opacity ease-out 0.5s, visibility step-start 0.5s;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media only screen {
|
|
||||||
[janus-timeline='future'] {
|
|
||||||
opacity: 0.5;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media not print {
|
@media not print {
|
||||||
[janus-timeline='future'] {
|
[janus-timeline='future'] {
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
body.show-notes section [janus-timeline='future'] {
|
||||||
|
visibility: visible;
|
||||||
|
opacity: 0.25;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.show-notes section[janus-timeline='future'] [janus-timeline='future'] {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
section[janus-timeline='past'] {
|
section[janus-timeline='past'] {
|
||||||
transform: translate3d(0, 0, 0) scale(5);
|
transform: translate3d(0, 0, 0) scale(5);
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
|
|
@ -116,6 +134,6 @@ body.show-notes section[janus-timeline='present'] + section[janus-timeline='futu
|
||||||
right: 0.4rem;
|
right: 0.4rem;
|
||||||
opacity: 0.75;
|
opacity: 0.75;
|
||||||
visibility: visible;
|
visibility: visible;
|
||||||
outline: 0.1rem solid white;
|
outline: 0.2rem solid white;
|
||||||
z-index: 3;
|
z-index: 3;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue