GeekUniversity#1

week13/jsx/animation.js

@@ -0,0 +1,56 @@
+const TICK = Symbol("tick");
+const TICK_HANDLER = Symbol("tick-handler")
+const ANIMATIONS = Symbol("animations")
+
+export class Timeline {
+    constructor(){
+
+        this[ANIMATIONS] = new Set()
+    }
+
+    start(){
+        let startTime = Date.now()
+        console.log(startTime)
+
+        this[TICK] = () => {
+            let t = Date.now() - startTime
+            for(let animation of this[ANIMATIONS]) {
+                let t0 = t;
+                if(animation.duration < t){
+                    this[ANIMATIONS].delete(animation);
+                    t0 = animation.duration;
+                }
+                animation.receive(t0)
+            }
+            requestAnimationFrame(this[TICK])
+        }
+        this[TICK]();
+    }
+
+
+    pause(){}
+    resume(){}
+
+    reset(){}
+    add(animation){
+        this[ANIMATIONS].add(animation)
+    }
+
+}
+
+export class Animation {
+    constructor(object, property, startValue, endValue, duration, timingFunction) {
+        this.object = object;
+        this.property = property;
+        this.startValue = startValue;
+        this.endValue = endValue;
+        this.duration = duration;
+        this.timingFunction = timingFunction;
+    }
+
+    receive(time) {
+
+        let range = this.endValue - this.startValue
+        this.object[this.property] = this.startValue + range * time / this.duration
+    }
+}

week13/jsx/carousel.js

@@ -0,0 +1,95 @@
+import { Component } from './framework';
+
+export class Carousel extends Component {
+    constructor(){
+        super();
+        this.attributes = Object.create(null);
+    }
+    setAttribute(name, value){
+        this.attributes[name] = value;
+    }
+    render(){
+        this.root = document.createElement("div")
+        this.root.classList.add("carousel")
+
+        for(let record of this.attributes.src){
+            let child = document.createElement('div');
+            child.style.backgroundImage = `url('${record}')`;
+
+            this.root.appendChild(child)
+        }
+
+        let position = 0;
+
+        this.root.addEventListener('mousedown', event => {
+
+            let children = this.root.children;
+            let startX = event.clientX;
+
+            console.log('mouse down');
+
+            let move = event => {
+                let x = event.clientX - startX;
+
+                let current = position - ((x - x %450) / 450)
+
+                for(let offset of [ -1, 0, 1]){
+                    let pos = current + offset;
+                    pos = (pos + children.length) % children.length;
+
+                    children[pos].style.transition = "none";
+                    children[pos].style.transform = 
+                        `translateX(${- pos * 450 + offset * 450 + x % 450}px)`;
+
+                }
+            }
+
+            let up = event => {
+                let x = event.clientX - startX;
+                position = position - Math.round(x / 450);
+
+                for(let offset of [0, -Math.sign(Math.round(x / 450) - x + 225 * Math.sign(x))]){
+                    let pos = position + offset;
+                    pos = (pos + children.length) % children.length;
+
+                    children[pos].style.transition = "";
+                    children[pos].style.transform = 
+                        `translateX(${- pos * 450 + offset * 450}px)`;
+
+                }
+                document.removeEventListener('mousemove', move);
+                document.removeEventListener('mouseup', up);
+            }
+
+            document.addEventListener('mousemove', move);
+
+            document.addEventListener('mouseup', up);
+        });
+
+
+        // let currentIndex = 0;
+        // setInterval(() => {
+        //     let children = this.root.children;
+        //     let nextIndex = (currentIndex + 1) % children.length;
+
+        //     let current = children[currentIndex];
+        //     let next = children[nextIndex];
+
+        //     next.style.transition = "none";
+        //     next.style.transform = `translateX(${100 - nextIndex * 100}%)`;
+
+        //     setTimeout(() => {
+        //         next.style.transition = "";
+        //         current.style.transform = `translateX(${-100 - currentIndex * 100}%)`;
+        //         next.style.transform = `translateX(${-nextIndex * 100}%)`;
+
+        //         currentIndex = nextIndex;
+        //     }, 16);
+        // }, 3000);
+
+        return this.root;
+    }
+    mountTo(parent){
+        parent.appendChild(this.render())
+    }
+}