recursive repeater test

slimjs · Dec 18, 2016 · 4857e03 · 4857e03
1 parent fa2ee2b
commit 4857e03
Show file tree

Hide file tree

Showing 7 changed files with 230 additions and 6 deletions.
diff --git a/components/ShowCase.html b/components/ShowCase.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Slim Components Showcase</title>
+    <script>
+        var isChrome;
+        try {
+            isChrome = typeof window.chrome.webstore === 'object'
+        }
+        catch (err) {
+            isChrome = false;
+        }
+        if (!isChrome) {
+            let s = "<script type=\"text\/javascript\" " +
+                    "src=\"https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/0.7.23/webcomponents.min.js\"" +
+                    " > <\/script> "
+            document.write(s)
+        }
+    </script>
+
+    <style>
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+        }
+        body {
+            background-color: #f7f4ed;
+            display: flex;
+            align-items: center;
+            flex-direction: column;
+            font-family: 'Verdana', sans-serif;
+        }
+    </style>
+
+    <script src="../Slim.js"></script>
+
+    <link rel="import" href="slim-notification.html" />
+    <link rel="import" href="slim-combo.html" />
+
+</head>
+<body>
+    <slim-notification type="error">This is an error message</slim-notification>
+    <slim-notification type="success">This is a success</slim-notification>
+    <slim-notification type="warning">This is a warning</slim-notification>
+    This is a combo box <slim-combo></slim-combo>
+
+    <script>
+        var items = ['dog', 'cat', 'banana', 'apple', 'candy', 'citroen']
+        document.querySelector('slim-combo').onchange = function(value) {
+            document.querySelector('slim-combo').items = items.filter( item => {
+                return item.indexOf(value) >= 0
+            })
+        }
+    </script>
+</body>
+</html>
diff --git a/components/slim-combo.html b/components/slim-combo.html
@@ -0,0 +1,54 @@
+<script>
+    Slim.tag('slim-combo', class extends Slim{
+
+
+        get template() {
+            return `<div class="slim-combo"><input slim-id="search" type="text" /><span class="slim-combo-option" slim-repeat="items" bind>[[data]]</span></div>`
+        }
+
+        onBeforeCreated() {
+            this.items = []
+        }
+
+        noOp() {}
+
+        get onChangeInterface() {
+            return this.onchange || this.noOp
+        }
+
+        onAfterRender() {
+            this.search.onchange = (e) => {
+                e.stopImmediatePropagation()
+                e.stopPropagation()
+            }
+            this.search.onkeyup = (e) => {
+                e.stopPropagation()
+                this.onChangeInterface( this.search.value )
+            }
+            this.onclick = (e) => {
+                if (e.srcElement.data) {
+                    this.search.value = e.srcElement.data
+                    this.onChangeInterface(e.srcElement.data)
+                    this.items = []
+                }
+            }
+        }
+
+
+    })
+</script>
+
+
+<style>
+    slim-combo div.slim-combo {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+    }
+
+    slim-combo span.slim-combo-option {
+        display: inline-flex;
+        width: 100%;
+        cursor: pointer;
+    }
+</style>
diff --git a/components/slim-notification.html b/components/slim-notification.html
@@ -0,0 +1,86 @@
+<script>
+    Slim.tag('slim-notification', class extends Slim {
+        get template() {
+            return `<p bind>[[text]]</p><button slim-id="closeBtn" class="ui-notification_button"><svg width="14" height="15" viewBox="0 0 14 15" xmlns="http://www.w3.org/2000/svg"><path d="M5.434 9.455H.04V6.39h5.394V.935h3.053V6.39h5.395v3.065H8.487v5.386H5.434" fill-rule="evenodd"/></svg></button>`
+        }
+
+        createdCallback() {
+            this.text = this.textContent
+            this.innerHTML = ''
+            super.createdCallback()
+        }
+
+        get type() {
+            return this.getAttribute('type') || 'error'
+        }
+
+        onCreated() {
+            this.classList.add(`is--${this.type}`)
+        }
+
+        onAfterRender() {
+            this.closeBtn.onclick = () => {
+                this.remove()
+            }
+        }
+    })
+</script>
+<style>
+    slim-notification {
+        border-radius: 4px;
+        color: white;
+        display: flex;
+        justify-content: center;
+        margin: 1em;
+        opacity: 1;
+        padding: 1em 2em;
+        position: relative;
+        transform: translateY(0px);
+        transition: all 0.3s ease-in-out;
+        visibility: visible;
+        width: 90%;
+        max-width: 40em;
+    }
+
+    slim-notification.is--success {
+        background-color: #8AC832;
+    }
+
+    slim-notification.is--warning {
+        background-color: #FFA700;
+    }
+
+    slim-notification.is--warning svg {
+        fill: #BF7E02;
+    }
+
+    slim-notification.is--error {
+        background-color: #E03F3D;
+    }
+
+    slim-notification.is--error svg {
+        fill: #A02B29;
+    }
+
+
+    slim-notification .ui-notification_button {
+        background: none;
+        border: none;
+        cursor: pointer;
+        transform-origin: center;
+        transform: rotate(134deg) scale(1);
+        transition: transform 0.2s ease-in-out;
+        outline: none;
+        position: absolute;
+        right: 15px;
+    }
+
+    slim-notification .ui-notification_button:hover,
+    slim-notification .ui-notification_button:focus {
+        transform: rotate(134deg) scale(1.2);
+    }
+
+    slim-notification .ui-notification_button svg {
+        fill: #ffffff;
+    }
+</style>
diff --git a/example/tests/bind-child.js b/example/tests/bind-child.js
@@ -1,7 +1,7 @@
 Slim.tag('bind-child', class extends Slim {
 
     get template() {
-        return `<div>Click for value</div>`
+        return `<div bind>[[data.label]] Click for value</div>`
     }
 
     onBeforeCreated() {

diff --git a/example/tests/bind-parent.js b/example/tests/bind-parent.js
@@ -6,13 +6,23 @@ Slim.tag('bind-parent', class extends Slim {
 <div slim-repeat="items" bind>[[data.label]] >>> [[data.value]]</div>
 <hr/>
 <bind-child slim-repeat="items" a-prop="[myProp]" b-prop="[urProp]"></bind-child>
+<br/>
+<hr/>
+<tree-list slim-repeat="tree"></tree-list>
 `
     }
 
     onBeforeCreated() {
         this.myProp = 0
         this.urProp = 1
         this.wProp = this.myProp + this.urProp
+        this.tree = [
+            "alpha", "beta", "charlie", "delta", [
+                "echo", "foxtrot", "golf", "hotel", "juliet", [
+                    "kilo", "lima", "mike", "november"
+                ]
+            ]
+        ]
         this.items = [ {label: 'item1', value: 1}]
     }
 
@@ -33,7 +43,8 @@ Slim.tag('bind-parent', class extends Slim {
                 })
             }
             this.items = tmpItems
-        }, 15000)
+            this.tree = this.tree
+        }, 1500)
         setTimeout( () => {
             this.myProp = Math.random()
             this.urProp = Math.random()
@@ -46,7 +57,7 @@ Slim.tag('bind-parent', class extends Slim {
                 })
             }
             this.items = tmpItems
-        }, 5000)
+        }, 500)
     }
 
 })
diff --git a/example/tests/bind-test.html b/example/tests/bind-test.html
@@ -7,13 +7,14 @@
     <script src="../../Slim.js"></script>
     <script src="bind-parent.js"></script>
     <script src="bind-child.js"></script>
+    <script src="treeList.js"></script>
 </head>
 <body>
 
     <script>
-        Slim.plugin('create', e => {console.log('Created', e)})
-        Slim.plugin('beforeRender', e => {console.log('Before Render', e)})
-        Slim.plugin('afterRender', e => {console.log('After Render', e)})
+//        Slim.plugin('create', e => {console.log('Created', e)})
+//        Slim.plugin('beforeRender', e => {console.log('Before Render', e)})
+//        Slim.plugin('afterRender', e => {console.log('After Render', e)})
     </script>
 
 

diff --git a/example/tests/treeList.js b/example/tests/treeList.js
@@ -0,0 +1,14 @@
+Slim.tag('tree-list', class extends Slim {
+
+
+
+
+    get template() {
+        if (this.data instanceof Array) {
+            return '<span>---</span><tree-list slim-repeat="data"></tree-list>>'
+        } else {
+            return '<div><span bind>Text: [[data]]</span></div>'
+        }
+    }
+
+})