I like to create and experiment with tools for thought and visualization with a special focus on the language system FORMWELT and its underlying 4-valued logic uFORM iFORM.
gifstarter(myurl+'.png')
{
const wrapper = html`<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 400px)); grid-gap: 2px;"></div>`;
yield* gifstarter(myurl+'.png', {id: 'first', figure: true, caption: 'Example 1', wrapper: wrapper});
yield* gifstarter(myurl+'.png', {id: 'second', figure: true, caption: 'Example 2', wrapper: wrapper});
}
prevCSS();
prevCSS = () => {
return html`
<style>
.${CLASSNAMES.gifmaker} {
max-width: max-content;
position: relative;
width: auto;
height: auto;
}
.${CLASSNAMES.gifmaker+' > .'+CLASSNAMES.prevDisplay} {
top: 0;
left: 0;
display: block;
position: absolute;
width: 100%;
height: 100%;
z-index: 99;
text-align: center;
opacity: 0.0;
transition: all 0.2s ease-out;
}
.${CLASSNAMES.gifmaker+' > .'+CLASSNAMES.prevDisplay}:hover {
cursor: pointer;
}
.${CLASSNAMES.gifmaker+'.'+CLASSNAMES.preview+' > .'+CLASSNAMES.prevDisplay} {
opacity: 1.0;
}
.${CLASSNAMES.gifmaker+' > .'+CLASSNAMES.prevDisplay+' > div'} {
position: relative;
top: 50%;
left: 50%;
width: 4em;
height: 4em;
margin-left: -2em;
margin-top: -2em;
}
.${CLASSNAMES.gifmaker+' > .'+CLASSNAMES.prevDisplay+' > div > svg'} {
fill: rgba(255,255,255,0.2);
transition: all 0.2s ease-out;
}
.${CLASSNAMES.gifmaker+' > .'+CLASSNAMES.prevDisplay+':hover > div > svg'} {
fill: rgba(255,255,255,0.6);
}
</style>
`
}
gifstarter = function* (url, _opts) {
const opts = Object.assign({id: DOM.uid().id, figure: false, caption: '', wrapper: null}, _opts);
const gifElem = gifstarterWrapper(url, opts.id);
let innerElem = gifElem;
if (opts.figure) {
innerElem = html`
<figure>
${gifElem}
${ (opts.caption.length > 0) ? html`<figcaption>${opts.caption}</figcaption>` : '' }
</figure>`;
}
const outerElem = (opts.wrapper !== null) ?
(opts.wrapper.appendChild(innerElem), opts.wrapper) : innerElem;
yield outerElem;
visibility().then(gifstarterEvents(opts.id));
}
gifstarterWrapper = function (url, id) {
return html`<div id="${id}" class="${CLASSNAMES.gifmaker} ${CLASSNAMES.preview}">
<img src="${url}"/>
<div class="${CLASSNAMES.prevDisplay}">${prevHTML}</div>
</div>`;
}
gifstarterEvents = function (containerId) {
const container = document.getElementById(containerId);
const img = container.getElementsByTagName('img')[0];
const prevDisplay = container.querySelector('.'+CLASSNAMES.prevDisplay);
const url = img.getAttribute('src');
prevDisplay.addEventListener('click', e => {
if (container.classList.contains(CLASSNAMES.preview)) {
img.setAttribute('src', url.replace(PREV_EXTENSION, '.gif'));
container.classList.remove(CLASSNAMES.preview);
}
else {
img.setAttribute('src', url);
container.classList.add(CLASSNAMES.preview);
}
});
prevDisplay.addEventListener('mouseleave', e => {
img.setAttribute('src', url);
container.classList.add(CLASSNAMES.preview);
});
}
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.
