Software engineer, available for freelance work! • he/him/his
Published
Edited
Feb 11, 2019
Importers
9 stars
viewof lecture = slideshow({
title: 'CSE 124 Lecture Slides',
description: 'Lecture slides of one of my classes, hosted/presented w/ Google Drive',
options: cse124Lectures.map(lecture=>({
label: lecture.name,
value: lecture.id
})),
})
html`<iframe src="https://drive.google.com/file/d/${lecture}/preview" style="border:0'" width=${width} height=${width/1.9}></iframe>`
viewof emotion = slideshow({
title: 'Feelings',
description: 'How do you feel today?',
options: [
{ label: "🤷", value: "shrug" },
{ label: "😂", value: "tears-of-joy" },
{ label: "😍", value: "loving-it" },
{ label: "🤔", value: "hmmm" },
{ label: "😱", value: "yikes" },
{ label: "😈", value: "mischievous" },
{ label: "💩", value: "poo" }
],
})
md`you feel **${emotion}**`
slideshow = function *(config={}) {
let {title, options=[], initial=0, description} = config;
if(Array.isArray(config)) options = config;
let index = initial;
const butFirst = html`<button class="first" value="first"><<</button>`;
const butPrev = html`<button class="prev" value="prev"><</button>`;
const mid = html`<select>${options.map((a,i)=>{
return Object.assign(html`<option>`, {value:`${a.value || a}`, selected:i===index, textContent:`${a.label || a}`})
})}`;
const butNext = html`<button class="next" value="next">></button>`;
const butLast = html`<button class="last" value="last">>></button>`;
const form = html`
<div class="slide" style="text-align:center;">
${(title && `<div style="font: 700 0.9rem sans-serif;">${title || ''}</div>`) || ''}
${butFirst}
${butPrev}
${mid}
${butNext}
${butLast}
${(description && `<div style="font-size: 0.85rem; font-style: italic;">${description}</div>`) || ''}
</div>
<style>
.slide button, .slide select {
cursor: pointer;
width: 30px;
padding: .2rem;
}
.slide select {
margin:1rem;
width: auto;
}</style>`; // the style at the end is painful, i know
form.value = options[index].value || options[index]
const updateAbility = ()=> {
if(options.length === 0) {
[butFirst,butPrev,butNext, butLast].map(b=>b.setAttribute('disabled', 'true'))
return
}
if (index === 0) {
butFirst.setAttribute('disabled', 'true')
butPrev.setAttribute('disabled', 'true')
}
else {
butFirst.removeAttribute('disabled')
butPrev.removeAttribute('disabled')
}
if (index === options.length -1) {
butLast.setAttribute('disabled', 'true')
butNext.setAttribute('disabled', 'true')
}
else {
butLast.removeAttribute('disabled')
butNext.removeAttribute('disabled')
}
}
updateAbility()
const updateIndexDecorator = f => {
return e => {
f(e);
updateAbility();
mid.selectedIndex = index;
form.value = options[index].value || options[index];
form.dispatchEvent(new CustomEvent('input'))
}
}
butFirst.onclick = updateIndexDecorator(e=>{
index = 0;
})
butPrev.onclick = updateIndexDecorator(e=>{
if(index <= 0) return
index--;
})
butNext.onclick = updateIndexDecorator(e=>{
if(index >= options.length - 1) return
index++;
})
butLast.onclick = updateIndexDecorator(e=>{
index = options.length - 1;
})
mid.onchange = updateIndexDecorator(e => {
index = e.target.selectedIndex
});
yield form;
}
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.
