From 26f247d56829afa96897b7807cba21642b1c1d2f Mon Sep 17 00:00:00 2001 From: eavichay Date: Mon, 12 Dec 2016 17:03:21 +0200 Subject: [PATCH] fixing slim-states demo --- example/Components/bg_texture.png | Bin 3076 -> 0 bytes example/Components/button-demo.html | 22 --- example/Components/index.html | 244 ------------------------- example/Components/injection-demo.html | 25 --- example/Components/repeat-demo.html | 20 -- example/Components/repeat-item.html | 20 -- example/Components/slim.js.logo.png | Bin 7627 -> 0 bytes 7 files changed, 331 deletions(-) delete mode 100644 example/Components/bg_texture.png delete mode 100644 example/Components/button-demo.html delete mode 100644 example/Components/index.html delete mode 100644 example/Components/injection-demo.html delete mode 100644 example/Components/repeat-demo.html delete mode 100644 example/Components/repeat-item.html delete mode 100644 example/Components/slim.js.logo.png diff --git a/example/Components/bg_texture.png b/example/Components/bg_texture.png deleted file mode 100644 index f7bd7e8deaf44ff720dbbca0b9f21f001db27f62..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 3076 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 eVl4p~+2*HL8^JWHBs+F~&5@QTESP5A(f - \ No newline at end of file diff --git a/example/Components/index.html b/example/Components/index.html deleted file mode 100644 index 416dc74..0000000 --- a/example/Components/index.html +++ /dev/null @@ -1,244 +0,0 @@ - - - - - slim.js - Productive Web Components Library - - - - - - - - - - - - - - - - - - - -© 2016 Avichay Eyal. All code provided is open source under the MIT License -Fork me on GitHub - - - -
- -

With es6 and slim you could write native web components double-time with no hassle of using external libraries that affect your workflow

-
-

SLIM is your PRODUCTIVE way
for writing NATIVE web components

- -

Featuring

-
    -
  • Lightweight and fast (~1KB minified)
    • -
  • Easy and intuitive data binding across your application
    • -
  • Dependency injection
    • -
  • Text template with data binding done naturally
    • -
  • Repeater with array as data source
    • -
- - 
bower install slimjs
-npm install slim-js
- - 
Data binding and Text-to-data Binding
todo-task-item.js
document.registerElement(
-    'todo-task-item',
-    class extends SlimBaseElement {
-
-        get updateOnAttributes() {
-            return ['name', 'done', 'todoid']
-        }
-
-        get template() {
-            return `
-                <div id="container">
-                    <span id="number" bind>[[data.todoId]]</span>
-                    <input type="checkbox" done="[done]"/>
-                    <span id="title" text="[name]" bind>[[data.name]]</span>
-                    <input type="button" value="X">
-                </div>`
-        }
-
-        update() {
-            super.update() // propogate downstream the DOM
-            var checkbox = this.find('input[type=checkbox]')
-            var delButton = this.find('input[value="X"]')
-
-            checkbox.dataItem = this.data
-            if (this.data.done) {
-                checkbox.setAttribute('checked', 'checked')
-            } else {
-                checkbox.removeAttribute('checked')
-            }
-
-            checkbox.onchange = () => {
-                checkbox.dataItem.done = checkbox.checked
-            }
-
-            delButton.onclick = () => {
-                checkbox.dataItem.delete()
-            }
-        }
-
-    })
- - 
Using repeater
todo-task-list.js
document.registerElement(
-    'todo-task-list',
-    class extends SlimBaseElement {
-
-    // @override
-    get updateOnAttributes() {
-        return ['model']
-    }
-
-    // @override
-    get template() {
-        return `<s-repeat source="items"><todo-task-item></todo-task-item></s-repeat>`
-    }
-
-    // @override abstract
-    afterRender() {
-        this.model.addEventListener('change', () => {
-            this.find('s-repeat').update()
-        })
-        this.find('s-repeat').update()
-    }})
-
-    get items() {
-        return this.model.todos
-    }
- - 
Using injection
Todo.html
<todo-task-list model="{model}"></todo-task-list>
-
- - 
TodoModel.js

-class TodoModel {
-
-    constructor extends EventDispatcher() {
-        this.todos = []
-    }
-
-    addTask(value) {
-        this.todos.push( {
-            name: value,
-            done: false,
-            todoId: this.todos.length + 1,
-            delete: function() {
-            instance.removeTask(this.todoId)
-        }})
-
-        this.dispatchEvent(new Event('change'))
-    }
-
-    removeTask(taskId) {
-        this.todos.splice(taskId - 1, 1)
-        this.todos.forEach( (todo, index) => {
-            todo.todoId = index + 1
-        })
-        this.dispatchEvent(new Event('change'))
-    }
-
-}
-
-const singleton = new TodoModel()
-
-SlimInjector.define('model', () => { return singleton })
- - - - - - \ No newline at end of file diff --git a/example/Components/injection-demo.html b/example/Components/injection-demo.html deleted file mode 100644 index 5797e37..0000000 --- a/example/Components/injection-demo.html +++ /dev/null @@ -1,25 +0,0 @@ - \ No newline at end of file diff --git a/example/Components/repeat-demo.html b/example/Components/repeat-demo.html deleted file mode 100644 index bd3e585..0000000 --- a/example/Components/repeat-demo.html +++ /dev/null @@ -1,20 +0,0 @@ - \ No newline at end of file diff --git a/example/Components/repeat-item.html b/example/Components/repeat-item.html deleted file mode 100644 index a654399..0000000 --- a/example/Components/repeat-item.html +++ /dev/null @@ -1,20 +0,0 @@ - \ No newline at end of file diff --git a/example/Components/slim.js.logo.png b/example/Components/slim.js.logo.png deleted file mode 100644 index 837031fd7de5a42c1176bf5924e52eb08eddaae7..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 7627 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 Rz`wt;