html`<button onclick="
var changeHandler = function(){
var fs = ((document.fullScreenElement && document.fullScreenElement !== null) || (!document.mozFullScreen && !document.webkitIsFullScreen));
if (fs) {
[...document.cells].forEach(e=>{e.style.height= ''});
} else {
[...document.cells].forEach(e=>{e.style.height= window.screen.height+'px'});
var elmnt = document.cells[2];
elmnt.scrollIntoView();
}
}
document.addEventListener('fullscreenchange', changeHandler,false);
document.addEventListener('webkitfullscreenchange', changeHandler, false);
document.addEventListener('mozfullscreenchange', changeHandler, false);
if ((document.fullScreenElement && document.fullScreenElement !== null) ||
(!document.mozFullScreen && !document.webkitIsFullScreen)) {
if (document.documentElement.requestFullScreen) {
document.documentElement.requestFullScreen();
} else if (document.documentElement.mozRequestFullScreen) {
document.documentElement.mozRequestFullScreen();
} else if (document.documentElement.webkitRequestFullScreen) {
document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
}
}
">Click to go fullscreen</button>`
keypresscontrol= {
document.cells = document.getElementsByClassName("observablehq");
document.current=2;
document.stopnumber = document.cells.length- 5
//keymap
document.onkeyup = function(e) {
console.log(e) ;
if (e.which === 83){console.log('re -s- tart');
document.current=2
var elmnt = document.cells[document.current]
elmnt.scrollIntoView();
}
if (e.which === 32| e.which === 39| e.which === 40){console.log('space');
document.current+=1
if (document.current < (document.stopnumber)){
var elmnt=document.cells[document.current];
if (elmnt.innerHTML != '<div class="end"></div>'){
elmnt.scrollIntoView();
} else {
document.stopnumber = document.current;
}
}else{document.current = document.stopnumber
}
}
if (e.which === 38 | e.which === 37){console.log('back');
document.current-=1
if (document.current <2){document.current = 2}
var elmnt = document.cells[document.current]
elmnt.scrollIntoView();
}
}
}
slide = {
function slide() {
const container = document.createElement("div");
container.className = "slide";
container.appendChild(md.apply(this, arguments));
return container;
}
function end() {
const container = document.createElement("div");
container.className = "end";
return container;
}
slide.end = end;
function iframe(strings) {
const container = document.createElement("div");
container.innerHTML="<iframe style='position:absolute;display:block; top:0px; left:-8px; bottom:0px; right:0px; width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden; z-index:999999;' frameBorder='0' src='"+strings+"'></iframe>"
container.className = "slide";
return container;
}
slide.iframe=iframe;
function html(strings) {
const container = document.createElement("div");
container.innerHTML = strings;
container.className = "slide slide--html";
return container;
}
slide.html = html;
function htmldark(strings) {
const container = document.createElement("div");
container.innerHTML = strings;
container.className = "slide slide--html dark";
return container;
}
slide.htmldark = htmldark;
function code(strings) {
const container = document.createElement("div");
const pre = container.appendChild(document.createElement("pre"));
const code = pre.appendChild(document.createElement("code"));
let string = strings[0] + "", i = 0, n = arguments.length;
while (++i < n) string += arguments[i] + "" + strings[i];
code.textContent = string.trim();
container.className = "slide slide--code";
return container;
}
slide.code = code;
slide.js = function() {
const container = code.apply(this, arguments);
const content = container.firstChild.firstChild;
content.className = "js hljs javascript";
hl.highlightBlock(content);
return container;
};
slide.img = function(strings) {
const img = new Image;
let string = strings[0] + "", i = 0, n = arguments.length;
while (++i < n) string += arguments[i] + "" + strings[i];
img.src = string.trim();
img.className = "slide slide--img";
return img;
};
return slide;
}
hl = require("@observablehq/highlight.js@1.0.0/highlight.min.js")
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
