states

slimjs · Dec 6, 2016 · 1855215 · 1855215
1 parent ea9bc5e
commit 1855215
Show file tree

Hide file tree

Showing 4 changed files with 88 additions and 93 deletions.
diff --git a/StateStack.js b/StateStack.js
diff --git a/StateView.js b/StateView.js
diff --git a/components/s-states.js b/components/s-states.js
@@ -0,0 +1,50 @@
+!!(function(document) {
+
+    const template = `<div currentState=""></div>`
+
+    document.registerElement('s-states', class extends SlimBaseElement {
+
+        get updateOnAttributes() {
+            return ['current-state']
+        }
+
+        get currentState() {
+            return this.getAttribute('current-state');
+        }
+
+        set currentState(value) {
+            if (value !== this.currentState) {
+                this.setAttribute('current-state')
+            }
+        }
+
+        beforeRender() {
+            this.virtual = document.createDocumentFragment()
+            this.actual = this.__bindingTree
+            this.currentState = this.getAttribute('current-state') || ''
+        }
+
+        render() {
+            this.update()
+        }
+
+        update() {
+            for (let i = this.actual.children.length; i > 0; i--) {
+                let child = this.actual.children[i - 1];
+                if (child.getAttribute('in-state') !== this.currentState) {
+                    this.actual.removeChild(child)
+                    this.virtual.appendChild(child)
+                }
+            }
+
+            for (let i = this.virtual.children.length; i > 0; i--) {
+                let child = this.virtual.children[i - 1];
+                if (child.getAttribute('in-state') === this.currentState) {
+                    this.virtual.removeChild(child)
+                    this.actual.appendChild(child)
+                }
+            }
+        }
+
+    })
+}(document))
diff --git a/example/States/index.html b/example/States/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>SlimJS - States Demo</title>
+
+    <script src="../../SlimElement.js"></script>
+    <script src="../../components/s-states.js"></script>
+</head>
+<body>
+
+
+<s-states current-state="init">
+
+    <div in-state="init">Init</div>
+    <div in-state="hello">Hello</div>
+    <div in-state="hello">World</div>
+    <div in-state="bye">Goodbye</div>
+
+
+</s-states>
+<button onclick="nextState()" value="next..."></button>
+
+<script>
+
+    const states = ['init','hello','bye'];
+    var x = 0;
+
+    function nextState() {
+        document.querySelector('s-states').setAttribute('current-state', states[x++ % states.length])
+        console.log(x)
+    }
+
+
+</script>
+
+</body>
+</html>