adding unique number, adding attributeChanged detection, adding starg…

…azers demo app
slimjs · May 2, 2017 · 44ddb03 · 44ddb03
1 parent 3bdcb8c
commit 44ddb03
Show file tree

Hide file tree

Showing 6 changed files with 146 additions and 1 deletion.
diff --git a/Slim.js b/Slim.js
@@ -68,6 +68,12 @@ var Slim = function (_HTMLElement) {
                 if (Slim.__prototypeDict[tag] === clazz) return tag;
             }
         }
+    }, {
+        key: '__createUqIndex',
+        value: function __createUqIndex() {
+            Slim.__uqIndex++;
+            return Slim.__uqIndex.toString(16);
+        }
 
         /**
          * Supported HTML events built-in on slim components
@@ -534,6 +540,8 @@ var Slim = function (_HTMLElement) {
     }, {
         key: 'initialize',
         value: function initialize() {
+            this.uq_index = Slim.__createUqIndex();
+            this.setAttribute('slim-uq', this.uq_index);
             this._bindings = this._bindings || {};
             this._boundChildren = this._boundChildren || [];
             this._initInteractiveEvents();
@@ -593,6 +601,15 @@ var Slim = function (_HTMLElement) {
         value: function attachedCallback() {
             this.onAdded();
         }
+    }, {
+        key: 'attributeChangedCallback',
+        value: function attributeChangedCallback(attr, oldValue, newValue) {
+            if (oldValue === newValue) return;
+            if (!this._bindings) return;
+            if (this._bindings[attr]) {
+                this[Slim.__dashToCamel(attr)] = newValue;
+            }
+        }
     }, {
         key: 'onAdded',
         value: function onAdded() {/* abstract */}
@@ -1042,6 +1059,7 @@ Slim.rxProp = /\[\[(.+[^(\((.+)\))])\]\]/;
 Slim.rxMethod = /\[\[(.+)(\((.+)\)){1}\]\]/;
 Slim.__customAttributeProcessors = {};
 Slim.__prototypeDict = {};
+Slim.__uqIndex = 0;
 Slim.__templateDict = {};
 Slim.__plugins = {
     'create': [],

diff --git a/Slim.min.js b/Slim.min.js
diff --git a/example/stargazers/index.html b/example/stargazers/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Stargazers Demo</title>
+    <script src="../../src/Slim.js"></script>
+    <script>
+        Slim.polyfill('https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.24/webcomponents-lite.min.js');
+    </script>
+    <script src="stargazers-demo.js"></script>
+    <script src="stargazers-item.js"></script>
+</head>
+<body>
+    <stargazers-demo></stargazers-demo>
+</body>
+</html>
diff --git a/example/stargazers/stargazers-demo.js b/example/stargazers/stargazers-demo.js
@@ -0,0 +1,49 @@
+Slim.tag('stargazers-demo',
+
+    `<h1 bind>[[repoName]] Stargazers!</h1>
+    <div>
+        <input slim-id="myInput" type="text" placeholder="user/repo" />
+        <button click="search">Search...</button>
+    </div>
+    <div id="results">
+        <stargazer-item handle-select="handleSelect" size="128" slim-repeat="stargazers"></stargazer-item>
+    </div>
+    
+    <style bind>
+        #results {
+            display: flex;
+            flex-direction: row;
+        }
+    </style>
+`,
+
+    class extends Slim {
+        get useShadow() { return true; }
+
+        onBeforeCreated() {
+            this.repoName = 'eavichay/slim.js';
+            this.stargazers = [];
+        }
+
+        onCreated() {
+            this.runQuery();
+        }
+
+        handleSelect(data) {
+            alert(data.html_url);
+        }
+
+        search() {
+            this.repoName = this.myInput.value;
+            this.stargazers = [];
+            this.runQuery();
+        }
+
+        runQuery() {
+            fetch(`https://api.github.com/repos/${this.repoName}/stargazers?page=1&per_page=100`)
+                .then(response => response.json() )
+                .then(stargazers => {
+                    this.stargazers = stargazers;
+                });
+        }
+});
diff --git a/example/stargazers/stargazers-item.js b/example/stargazers/stargazers-item.js
@@ -0,0 +1,46 @@
+
+Slim.tag('stargazer-item',
+
+    `
+<img width="[[size]]" height="[[size]]" src="[[data.avatar_url]]" />
+<h1 bind click="handleClick">[[data.login]]</h1>
+
+<style bind>
+    :host {
+        position: relative;
+        display: inline-flex;
+        flex-direction: column;
+        width: [[size]]px;
+        height: [[size]]px;
+        border: 1px solid black;
+        overflow: hidden;
+        margin: 0;
+        padding: 0;
+        border-radius: 1em;
+    }
+
+    h1 {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+        background-color: rgba(0,0,0,0.8);
+        color: white;
+        font-size: 14px;
+        font-family: monospace;
+        cursor: pointer;
+    }
+
+    h1::before {
+        content: '[[data_index]] ';
+    }
+</style>
+`,
+
+    class extends Slim {
+        get useShadow() { return true; }
+
+        handleClick() {
+            this.callAttribute('handle-select', this.data);
+        }
+    });
diff --git a/src/Slim.js b/src/Slim.js
@@ -49,6 +49,11 @@ class Slim extends HTMLElement {
         }
     }
 
+    static __createUqIndex() {
+        Slim.__uqIndex++;
+        return Slim.__uqIndex.toString(16);
+    }
+
     /**
      * Supported HTML events built-in on slim components
      * @returns {Array<String>}
@@ -559,6 +564,8 @@ class Slim extends HTMLElement {
      * Part of the non-standard slim web-component's lifecycle. Overriding it is not recommended.
      */
     initialize() {
+        this.uq_index = Slim.__createUqIndex();
+        this.setAttribute('slim-uq', this.uq_index);
         this._bindings = this._bindings || {};
         this._boundChildren = this._boundChildren || [];
         this._initInteractiveEvents();
@@ -621,6 +628,14 @@ class Slim extends HTMLElement {
         this.onAdded();
     }
 
+    attributeChangedCallback(attr, oldValue, newValue) {
+        if (oldValue === newValue) return;
+        if (!this._bindings) return;
+        if (this._bindings[attr]) {
+            this[Slim.__dashToCamel(attr)] = newValue;
+        }
+    }
+
     onAdded() { /* abstract */ }
     onRemoved() { /* abstract */ }
     onBeforeCreated() { /* abstract */ }
@@ -800,6 +815,7 @@ Slim.rxProp = /\[\[(.+[^(\((.+)\))])\]\]/
 Slim.rxMethod = /\[\[(.+)(\((.+)\)){1}\]\]/
 Slim.__customAttributeProcessors = {};
 Slim.__prototypeDict = {};
+Slim.__uqIndex = 0;
 Slim.__templateDict = {};
 Slim.__plugins = {
     'create': [],