Making of, launch party

2020-04-29 23:21:52 -07:00
parent da7c70cb68
commit 65e0560a49
132 changed files with 6824 additions and 0 deletions
--- a/content/writing/moving.html
+++ b/content/writing/moving.html
@ -0,0 +1,93 @@
+---
+type: single
+---
+
+<div class="vis">I'm sorry, but JavaScript is required for this :/</div>
+
+<script type="text/javascript">
+    // Given https://collection.eliterature.org/1/works/andrews__stir_fry_texts/bluehyacinth3.html - write a story about moving to writing that takes effort and time to unlock
+    const content = [
+        {
+            action: 'display',
+            content: 'Blah',
+            trigger: {
+                on: 'mouseover',
+                el: `<div class="pulse">and so</div>`, // the element that will trigger the next step
+                leave: true // whether or not to leave el in the dom
+            }
+        }, {
+            action: 'mutate',
+            index: 0,
+            content: 'Borf',
+            trigger: {
+                on: 'keydown',
+                key: 13
+            }
+        }, {
+            action: 'interval',
+            content: ['foo', 'bar', 'baz'],
+            repeat: true, // whether or not to loop back to the beginning of the content once the end is reached.
+            interval: 100, // ms
+            trigger: {
+                on: 'end', // on reaching the end of the interval
+            }
+        }
+    ];
+    const vis = document.querySelector('.vis')
+
+    function step() {
+        index++;
+        if (index <= content.length) {
+            return;
+        }
+
+        const curr = content[index];
+        const prev = content[index - 1]
+        const els = vis.querySelectorAll('.step');
+        const prevEl = els[els.length - 1];
+        const intervals = {};
+
+        if (prevEl.dataset.index === index - 1 && 
+                prev.trigger.el && 
+                !prev.trigger.leave) {
+            const trigger = prevEl.querySelector('.trigger');
+            if (trigger) {
+                trigger.remove();
+            }
+        }
+
+        switch (curr.action) {
+            case 'display':
+                vis.innerHTML += `<div class="step" data-index="${index - 1}"><div class="content"></div>${curr.trigger.el ? '<div class="trigger">'+curr.trigger.el+'</div>' : ''}</div>`;
+                break;
+            case 'mutate':
+                els.forEach((el) => {
+                    if (el.dataset.index === curr.index) {
+                        el.querySelector('content').innerHTML = curr.content;
+                    }
+                });
+                break;
+            case 'interval':
+                vis.innerHTML += `<div class="step" data-index="${index - 1}"><div class="content"></div>${curr.trigger.el ? '<div class="trigger">'+curr.trigger.el+'</div>' : ''}</div>`;
+                const els_ = vis.querySelectorAll('.step');
+                const el = els_[els_.length - 1];
+                intervals[`${index}`] = {
+                    index: 0,
+                    interval: window.setInterval(() => {
+                        el.querySelector('.content').innerHTML = curr.content[intervals[`${index}`].index++ % curr.content.length];
+                    }, curr.interval)
+                }
+                if (!curr.repeat) {
+                    window.setTimeout(() => {
+                        window.clearInterval(intervals[`${index}`].interval);
+                    }, curr.interval * curr.content.length);
+                }
+                break;
+            default:
+                console.log('uh...shrug?');
+        }
+    }
+
+    let index = 0;
+    step();
+</script>