Added docs & updated demos for website publishing

plexium · Sep 15, 2015 · 69dd652 · 69dd652
1 parent 812bcac
commit 69dd652
Show file tree

Hide file tree

Showing 6 changed files with 141 additions and 36 deletions.
diff --git a/demo/b-autocomplete.html b/demo/b-autocomplete.html
@@ -17,7 +17,7 @@
 <body>
     <h1>Autocomplete</h1>
 
-    <h2>Autocomplete with &lt;datalist&gt;</h2>
+    <!--<h2>Autocomplete with &lt;datalist&gt;</h2>-->
     <datalist id="data">
         <option value="Alabama"></option>
         <option value="Alaska"></option>
@@ -72,7 +72,7 @@ <h2>Autocomplete with &lt;datalist&gt;</h2>
     </datalist>
     <b-autocomplete list="data"></b-autocomplete>
 
-    <h2>Autocomplete with JSON data & Handlebars template</h2>
+    <!--<h2>Autocomplete with JSON data & Handlebars template</h2>
     <b-autocomplete id="autocomplete2"></b-autocomplete>
 
     <script>
@@ -323,6 +323,6 @@ <h2>Autocomplete with JSON data & Handlebars template</h2>
             {name: 'Zambia', code: 'ZM'},
             {name: 'Zimbabwe', code: 'ZW'}
         ];
-    </script>
+    </script>-->
 
 </body>
diff --git a/demo/lib/bosonic-runtime.js b/demo/lib/bosonic-runtime.js
@@ -150,6 +150,9 @@
                 enumerable: true,
                 writable: true,
                 value: function(name, oldValue, newValue) {
+                    if (name.indexOf('data-') === 0) {
+                        name = name.substr(5);
+                    }
                     if (attrs.indexOf(name) !== -1 && this[name + 'Changed']) {
                         this[name + 'Changed'].call(this, oldValue, newValue);
                     }
@@ -158,6 +161,15 @@
             };
         }
 
+        if (options.mixins) {
+            options.mixins.forEach(function(mixin) {
+                for (var key in mixin) {
+                    prototype[key] = Object.getOwnPropertyDescriptor(mixin, key);
+                }
+            });
+            delete options.mixins;
+        }
+
         for (var key in options) {
             if (options.hasOwnProperty(key)) {
                 prototype[key] = Object.getOwnPropertyDescriptor(options, key);
@@ -173,4 +185,33 @@
 
         window[elementClass] = document.registerElement(name, elementDef);
     }
-})();
+})();
+Bosonic.CustomAttributes = {
+    hasCustomAttribute: function(name) {
+        return this.hasAttribute(name) || this._hasPrefixedAttribute(name);
+    },
+
+    getCustomAttribute: function(name) {
+        return this.getAttribute(this._getRealAttribute(name));
+    },
+
+    setCustomAttribute: function(name, value) {
+        this.setAttribute(this._getRealAttribute(name), value);
+    },
+
+    removeCustomAttribute: function(name) {
+        this.removeAttribute(this._getRealAttribute(name));
+    },
+
+    toggleCustomAttribute: function(name) {
+        this.hasCustomAttribute(name) ? this.removeCustomAttribute(name) : this.setCustomAttribute(name, '');
+    },
+
+    _hasPrefixedAttribute: function(name) {
+        return this.hasAttribute('data-' + name);
+    },
+
+    _getRealAttribute: function(name) {
+        return this._hasPrefixedAttribute(name) ? 'data-' + name : name;
+    }
+};
diff --git a/doc/b-autocomplete.html b/doc/b-autocomplete.html
diff --git a/doc/b-autocomplete.md b/doc/b-autocomplete.md
@@ -0,0 +1,39 @@
+{
+  title: "Autocomplete",
+  element: 'b-autocomplete',
+  category: "elements",
+  section: "data",
+  order: 1
+}
+
+# b-autocomplete
+
+## Usage
+
+There is two ways to provide its options. Using a `<datalist>` element:
+
+```html
+<b-autocomplete list="data"></b-autocomplete>
+
+<datalist id="data">
+    <option>Foo</option>
+    <option>Bar</option>
+    <option>Hello</option>
+    <option>World</option>
+</datalist>
+```
+Or, using the API:
+
+```html
+<b-autocomplete></b-autocomplete>
+
+<script>
+    var ac = document.querySelector('b-autocomplete');
+    ac.data = [
+        {name: 'Afghanistan', code: 'AF'},
+        {name: 'Åland Islands', code: 'AX'},
+        {name: 'Albania', code: 'AL'}
+        ...
+    ];
+</script>
+```
diff --git a/doc/b-combo-box.html b/doc/b-combo-box.html
diff --git a/doc/b-table.md b/doc/b-table.md
@@ -0,0 +1,57 @@
+{
+  title: "Tables",
+  element: 'b-table',
+  category: "elements",
+  section: "data",
+  order: 2
+}
+
+# b-table
+
+`b-table` transforms a classic HTML table into a full-featured datagrid.
+
+## Usage
+
+```html
+<b-table-column-toggle for="sample"></b-table-column-toggle>
+<table is="b-table" id="sample" sortable>
+    <thead is="b-thead">
+        <tr>
+            <th data-key="id"><button>ID</button></th>
+            <th data-key="firstname">
+                <button>Firstname</button>
+                <b-table-column-filter></b-table-column-filter>
+            </th>
+            <th data-key="lastname">
+                <button>Lastname</button>
+                <b-table-column-filter></b-table-column-filter>
+            </th>
+            <th data-key="email">
+                <button>Email</button>
+                <b-table-column-filter></b-table-column-filter>
+            </th>
+        </tr>
+    </thead>
+</table>
+
+<script type="text/javascript">
+    window.addEventListener('WebComponentsReady', function() {
+        var table = document.querySelector('table');
+        table.data = [ 
+            { 
+              "id" : 0,
+              "firstname" : "David",
+              "lastname" : "Anderson",
+              "email" : "[email protected]"
+            },
+            { 
+              "id" : 1,
+              "firstname" : "Jeffrey",
+              "lastname" : "Gonzalez",
+              "email" : "[email protected]"
+            },
+            ...
+        ];
+    });
+</script>
+```