├── template
    ├── var.after
    ├── var.before
    ├── license.before
    ├── license.after
    ├── md.after
    ├── amd.after
    ├── node.after
    ├── amd.before
    ├── copyright
    ├── node.before
    └── md.before
├── .gitignore
├── test
    ├── runtime-style-sheet.css
    ├── .test.js
    └── vitamer-mixins.js
├── .travis.yml
├── demo
    ├── input-mirror.js
    ├── html-binding.js
    ├── dbmonster.style.css
    ├── celsius-to-fahrenheit-input.js
    ├── dbmonster.html
    ├── celsius-to-fahrenheit-binding-changed.js
    ├── fake-tweet.js
    ├── domclass-vs-knockoutjs
    │   ├── minifiedHTML.js
    │   └── index.html
    ├── random-avatar.js
    ├── libs
    │   ├── monitor.js
    │   ├── memory-stats.js
    │   └── ENV.js
    ├── celsius-to-fahrenheit-seppuku.js
    ├── db-monster.js
    ├── index.html
    ├── x-greeter.js
    └── vitamer-mixins.js
├── .npmignore
├── src
    ├── ie-lte-9.js
    ├── Data.js
    ├── JSONKeys.js
    ├── dom-class-zero.js
    ├── examples.js
    ├── dom-class.js
    └── Bindings.js
├── utils
    ├── browserify.sh
    ├── watchify.sh
    ├── uglifyjs.sh
    └── jshint.sh
├── LICENSE.txt
├── package.json
├── testrunner.js
├── index.html
├── Makefile
└── README.md


/template/var.after:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/template/var.before:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/template/license.before:
--------------------------------------------------------------------------------
1 | /*!
2 | 


--------------------------------------------------------------------------------
/template/license.after:
--------------------------------------------------------------------------------
1 | 
2 | */
3 | 


--------------------------------------------------------------------------------
/template/md.after:
--------------------------------------------------------------------------------
1 | </body>
2 | </html>


--------------------------------------------------------------------------------
/template/amd.after:
--------------------------------------------------------------------------------
1 | 
2 | return DOMClass;
3 | });


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules/
3 | .idea
4 | 


--------------------------------------------------------------------------------
/template/node.after:
--------------------------------------------------------------------------------
1 | 
2 | module.exports = DOMClass;


--------------------------------------------------------------------------------
/template/amd.before:
--------------------------------------------------------------------------------
1 | define(['es-class', 'restyle'], function (Class, restyle) {
2 | 


--------------------------------------------------------------------------------
/test/runtime-style-sheet.css:
--------------------------------------------------------------------------------
1 | runtime-style-sheet {
2 |   margin-left: 6px;
3 | }


--------------------------------------------------------------------------------
/template/copyright:
--------------------------------------------------------------------------------
1 | /*! (C) Andrea Giammarchi - @WebReflection - Mit Style License */
2 | 


--------------------------------------------------------------------------------
/template/node.before:
--------------------------------------------------------------------------------
1 | var
2 |   Class = require('es-class'),
3 |   restyle = require('restyle')
4 | ;
5 | 


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | node_js:
3 |   - 4
4 |   - 6
5 | git:
6 |   depth: 1
7 | branches:
8 |   only:
9 |     - master


--------------------------------------------------------------------------------
/demo/input-mirror.js:
--------------------------------------------------------------------------------
1 | var InputMirror = DOMClass({
2 |   'with': DOMClass.bindings,
3 |   template: '<div>' +
4 |     '<input data-bind="value" placeholder="mirror">\n' +
5 |     '<span>{{value}}</span>' +
6 |   '</div>'
7 | });


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | .travis.yml
 3 | src/*
 4 | test/*
 5 | template/*
 6 | template/license.after
 7 | template/license.before
 8 | utils/*
 9 | node_modules/*
10 | build/*.amd.js
11 | Makefile
12 | index.html
13 | testrunner.js


--------------------------------------------------------------------------------
/src/ie-lte-9.js:
--------------------------------------------------------------------------------
1 | /*! IE LTE 9 ONLY *//*@cc_on (function(f){window.setTimeout=f(window.setTimeout);window.setInterval=f(window.setInterval)})(function(f){return function(c,t){var a=[].slice.call(arguments,2);return f(function(){c.apply(this,a)},t)}}); @*/


--------------------------------------------------------------------------------
/utils/browserify.sh:
--------------------------------------------------------------------------------
 1 | #!/usr/bin/env bash
 2 | 
 3 | program () {
 4 |   local bin="$1"
 5 |   if [ -d "node_modules/$bin" ]; then
 6 |     bin="$2"
 7 |   else
 8 |     if [ "$(which $bin)" = "" ]; then
 9 |       mkdir -p node_modules
10 |       echo "installing $1"
11 |       npm install $bin >/dev/null 2>&1
12 |       bin="$2"
13 |     fi
14 |   fi
15 |   echo $bin
16 | }
17 | 
18 | run () {
19 |   local bin="$(program 'browserify' 'node_modules/browserify/bin/cmd.js')"
20 |   $bin src/main.js -o build/bundle.max.js -d
21 | }
22 | 
23 | run


--------------------------------------------------------------------------------
/utils/watchify.sh:
--------------------------------------------------------------------------------
 1 | #!/usr/bin/env bash
 2 | 
 3 | program () {
 4 |   local bin="$1"
 5 |   if [ -d "node_modules/$bin" ]; then
 6 |     bin="$2"
 7 |   else
 8 |     if [ "$(which $bin)" = "" ]; then
 9 |       mkdir -p node_modules
10 |       echo "installing $1"
11 |       npm install $bin >/dev/null 2>&1
12 |       bin="$2"
13 |     fi
14 |   fi
15 |   echo $bin
16 | }
17 | 
18 | run () {
19 |   local bin="$(program 'watchify' 'node_modules/watchify/bin/cmd.js')"
20 |   $bin src/main.js -o build/bundle.max.js -v
21 | }
22 | 
23 | run
24 | 


--------------------------------------------------------------------------------
/utils/uglifyjs.sh:
--------------------------------------------------------------------------------
 1 | #!/usr/bin/env bash
 2 | 
 3 | run () {
 4 |   local bin="uglifyjs"
 5 |   if [ -d "node_modules/uglify-js" ]; then
 6 |     bin="node_modules/uglify-js/bin/uglifyjs"
 7 |   else
 8 |     if [ "$(which $bin)" = "" ]; then
 9 |       mkdir -p node_modules
10 |       echo "installing uglify-js"
11 |       npm install "uglify-js@1" >/dev/null 2>&1
12 |       bin="node_modules/uglify-js/bin/uglifyjs"
13 |     fi
14 |   fi
15 |   echo "$@" >build/bundle.js
16 |   $bin --verbose build/bundle.max.js >>build/bundle.js
17 |   
18 | }
19 | 
20 | run "$@"


--------------------------------------------------------------------------------
/demo/html-binding.js:
--------------------------------------------------------------------------------
 1 | var HtmlBinding = DOMClass({
 2 |   'with': DOMClass.bindings,
 3 |   template: 'some `{{text}}` text boldified: {{{bold(text)}}}. ' +
 4 |             'Also some plain html: `{{{html}}}`!',
 5 |   bindings: {
 6 |     text: 'plain',
 7 |     html: 'too <strong>damn</strong> easy',
 8 |     bold: function (value) {
 9 |       return '<strong>' + this.escape(value) + '</strong>';
10 |     },
11 |     escape: function (value) {
12 |       return value.replace(/[&<>'"]/g, function (m) {
13 |         return '&#' + m.charCodeAt(0) + ';';  
14 |       });
15 |     }
16 |   }
17 | });


--------------------------------------------------------------------------------
/template/md.before:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 | <style>
 5 | body {
 6 |   font-family: sans-serif;
 7 |   padding: 8px;
 8 |   font-size: 1em;
 9 | }
10 | h1, h2, h3 {
11 |   border-bottom: 1px solid #ccc;
12 |   padding: 4px;
13 | }
14 | hr {
15 |   display: block;
16 |   height: 1px;
17 |   border: 0;
18 |   border-bottom: 2px dashed #ddd;
19 |   margin: 8px;
20 | }
21 | pre {
22 |   background-color: #f8f8f8;
23 |   color: #555;
24 |   border: 1px solid #ccc;
25 |   font-size: .9em;
26 |   overflow: auto;
27 |   padding: 6px 10px;
28 |   border-radius: 3px;
29 | }
30 | </style>
31 | </head>
32 | <body>


--------------------------------------------------------------------------------
/demo/dbmonster.style.css:
--------------------------------------------------------------------------------
 1 | table {
 2 |   font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
 3 |   font-size: 14px;
 4 |   line-height: 1.42857143;
 5 |   color: #333;
 6 |   background-color: #fff;
 7 | }
 8 | 
 9 | #link {
10 |   position: fixed;
11 |   top: 0; right: 0;
12 |   font-size: 12px;
13 |   padding: 5px 10px;
14 |   background: rgba(255,255,255,0.85);
15 |   z-index: 5;
16 |   box-shadow: 0 0 8px rgba(0,0,0,0.6);
17 | }
18 |   #link .center {
19 |     display: block;
20 |     text-align: center;
21 |   }
22 | 
23 | .Query {
24 |   position: relative;
25 | }
26 | 
27 | .Query:hover .popover {
28 |   left: -100%;
29 |   width: 100%;
30 |   display: block;
31 | }


--------------------------------------------------------------------------------
/src/Data.js:
--------------------------------------------------------------------------------
 1 | Object.defineProperty(DOMClass, 'data', {
 2 |   enumerable: true,
 3 |   value: {
 4 | 
 5 |     /*! (C) 2015 Andrea Giammarchi - Mit Style License */
 6 | 
 7 |     data: function data(key, value) {'use strict';
 8 |       /* jshint eqnull:true */
 9 |       var v, k = 'data-dom-class-' + String(key).replace(
10 |         /([a-z])([A-Z])/g,
11 |         function (m, l, U) {
12 |           return l + '-' + U.toLowerCase();
13 |         }
14 |       ).toLowerCase();
15 |       if (arguments.length === 2) {
16 |         if (value == null) {
17 |           this.removeAttribute(k);
18 |         } else {
19 |           this.setAttribute(k, JSON.stringify(value));
20 |         }
21 |       } else {
22 |         v = this.getAttribute(k);
23 |         return v == null ? v : JSON.parse(v);
24 |       }
25 |     }
26 |   }
27 | });


--------------------------------------------------------------------------------
/utils/jshint.sh:
--------------------------------------------------------------------------------
 1 | #!/usr/bin/env bash
 2 | 
 3 | program () {
 4 |   local bin="$1"
 5 |   if [ -d "node_modules/$bin" ]; then
 6 |     bin="$2"
 7 |   else
 8 |     if [ "$(which $bin)" = "" ]; then
 9 |       mkdir -p node_modules
10 |       echo "installing $1"
11 |       npm install $bin >/dev/null 2>&1
12 |       bin="$2"
13 |     fi
14 |   fi
15 |   echo $bin
16 | }
17 | 
18 | run () {
19 |   local bin="$(program 'jshint' 'node_modules/jshint/bin/jshint')"
20 |   local folder=$1
21 |   local js=""
22 |   # drop some info in the stdout
23 |   echo "linting $f ... "
24 |   for f in $folder/*; do
25 |     # if it's a fodler, go for recursion
26 |     if [ -d "$f" ]; then
27 |       run "$f"
28 |     else
29 |       # grab .js files only
30 |       js=$(echo "$f" | sed 's/.js//')
31 |       if [ "$js" != "$f" ]; then
32 |         # finally use jshint to verify the file
33 |         $bin "$f"
34 |         # in case there was an error
35 |         if [[ $? -ne 0 ]] ; then
36 |           exit 1
37 |         fi
38 |       fi
39 |     fi
40 |   done
41 | }
42 | 
43 | run src


--------------------------------------------------------------------------------
/LICENSE.txt:
--------------------------------------------------------------------------------
 1 | Copyright (C) 2015 by WebReflection
 2 | 
 3 | Permission is hereby granted, free of charge, to any person obtaining a copy
 4 | of this software and associated documentation files (the "Software"), to deal
 5 | in the Software without restriction, including without limitation the rights
 6 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 7 | copies of the Software, and to permit persons to whom the Software is
 8 | furnished to do so, subject to the following conditions:
 9 | 
10 | The above copyright notice and this permission notice shall be included in
11 | all copies or substantial portions of the Software.
12 | 
13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
19 | THE SOFTWARE.
20 | 


--------------------------------------------------------------------------------
/src/JSONKeys.js:
--------------------------------------------------------------------------------
 1 | // Mixin Example - automatically serialized bindings
 2 | var JSONKeys = (function () {
 3 |   /*! (C) 2015 Andrea Giammarchi - Mit Style License */
 4 |   function bind(el, property) {
 5 |     Object.defineProperty(el, property, {
 6 |       configurable: true,
 7 |       get: function () {
 8 |         return JSON.parse(this.getAttribute(property));
 9 |       },
10 |       set: function (value) {
11 |         if (value == null) {
12 |           this.removeAttribute(property);
13 |         } else {
14 |           this.setAttribute(property, JSON.stringify(value));
15 |         }
16 |       }
17 |     });
18 |   }
19 |   return {
20 |     setJSONKeys: function () {
21 |       for (var i = arguments.length; i--; bind(this, arguments[i]));
22 |       return this;
23 |     }
24 |   };
25 | }());
26 | 
27 | 
28 | 
29 | // test it for real
30 | var JSONStorage = new DOMClass({
31 |   name: 'json-storage',
32 |   with: JSONKeys
33 | });
34 | 
35 | var js = document.body.appendChild(new JSONStorage);
36 | js.setJSONKeys('name', 'age', 'info');
37 | 
38 | js.name = 'Andrea';
39 | js.age = 37;
40 | js.info = {
41 |   currentCity: 'London',
42 |   sports: ['Snowboarding', 'Skydiving']
43 | };


--------------------------------------------------------------------------------
/test/.test.js:
--------------------------------------------------------------------------------
 1 | var
 2 |   fs = require('fs'),
 3 |   path = require('path'),
 4 |   spawn = require('child_process').spawn,
 5 |   modules = path.join(__dirname, '..', 'node_modules', 'wru', 'node', 'program.js'),
 6 |   tests = [],
 7 |   ext = /\.js$/,
 8 |   code = 0,
 9 |   many = 0;
10 | 
11 | function exit($code) {
12 |   if ($code) {
13 |     code = $code;
14 |   }
15 |   if (!--many) {
16 |     if (!code) {
17 |       fs.writeFileSync(
18 |         path.join(__dirname, '..', 'index.html'),
19 |         fs.readFileSync(
20 |           path.join(__dirname, '..', 'index.html'),
21 |           'utf-8'
22 |         ).replace(/var TESTS = \[.*?\];/, 'var TESTS = ' + JSON.stringify(tests) + ';'),
23 |         'utf-8'
24 |       );
25 |     }
26 |     process.exit(code);
27 |   }
28 | }
29 | 
30 | fs.readdirSync(__dirname).filter(function(file){
31 |   if (ext.test(file) && (fs.existsSync || path.existsSync)(path.join(__dirname, '..', 'src', file))) {
32 |     ++many;
33 |     tests.push(file.replace(ext, ''));
34 |     spawn(
35 |       'node', [modules, path.join('test', file)], {
36 |       detached: false,
37 |       stdio: [process.stdin, process.stdout, process.stderr]
38 |     }).on('exit', exit);
39 |   }
40 | });


--------------------------------------------------------------------------------
/demo/celsius-to-fahrenheit-input.js:
--------------------------------------------------------------------------------
 1 | var CelsiusToFahrenheitInput = DOMClass({
 2 |   'with': [DOMClass.bindings],
 3 |   template: '<div>' +
 4 |               '<input name="celsius" data-bind="value:celsius" type="number">°C' +
 5 |               '<span> ⇄ </span>' +
 6 |               '<input name="fahrenheit" data-bind="value:fahrenheit" type="number">°F' +
 7 |             '</div>',
 8 |   bindings: {},
 9 |   constructor: function () {
10 |     // whenever an input event bubbles up
11 |     this.addEventListener('input', this);
12 |   },
13 |   handleEvent: function (e) {
14 |     // if it was a celsius, update fahrenheit and vice-versa
15 |     var
16 |       key = e.target.name,
17 |       which = key === 'celsius' ?
18 |         'fahrenheit' : 'celsius',
19 |       convert = key === 'celsius' ?
20 |         'toFahrenheit' : 'toCelsius'
21 |     ;
22 |     this.bindings[which] = this[convert](e.target.value);
23 |   },
24 |   setCelsius: function (value) {
25 |     this.bindings.celsius = value;
26 |     this.bindings.fahrenheit = this.toFahrenheit(value);
27 |   },
28 |   setFahrenheit: function (value) {
29 |     this.bindings.fahrenheit = value;
30 |     this.bindings.celsius = this.toCelsius(value);
31 |   },
32 |   toCelsius: function (value) {
33 |     return (5/9 * (parseFloat(value) - 32)).toFixed(1);
34 |   },
35 |   toFahrenheit: function (value) {
36 |     return (9/5 * parseFloat(value) + 32).toFixed(1);
37 |   }
38 | });


--------------------------------------------------------------------------------
/demo/dbmonster.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |   <title>DBMonster via DOMClass &amp; bindings Mixin</title>
 5 |   <meta http-equiv=content-type content="text/html; charset=utf-8">
 6 |   <meta http-equiv="content-language" content="en-US"/>
 7 |   <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
 8 |   <link rel="stylesheet" href="bootstrap.min.css">
 9 |   <link rel="stylesheet" href="dbmonster.style.css">
10 |   <script src="vitamer-mixins.js"></script>
11 | </head>
12 | <body>
13 | <div id="link">
14 |   You're looking at DOMClass &amp; DOMClass.bindings<br>
15 |   version of <a href="https://dbmonster.firebaseapp.com/">DBMonster</a>.
16 |   Compare with <a href="http://webreflection.github.io/dbmonster/">pure DOM</a>.
17 | </div>
18 | <div>
19 |   <div id="app"></div>
20 | </div>
21 | <script src="db-monster.js"></script>
22 | <script src="libs/ENV.js"></script>
23 | <script src="libs/memory-stats.js"></script>
24 | <script src="libs/monitor.js"></script>
25 | <script>
26 |   var dbm = document.getElementById('app').appendChild(
27 |       new DBMonster(ENV.generateData(false).toArray())
28 |   );
29 | 
30 |   // ... and update its content ASAP
31 |   function render() {
32 |     Monitoring.renderRate.ping();
33 |     dbm.update(ENV.generateData(false).toArray());
34 |     setTimeout(render, ENV.timeout);
35 |   }
36 |   render();
37 | </script>
38 | </body>
39 | </html>
40 | 


--------------------------------------------------------------------------------
/demo/celsius-to-fahrenheit-binding-changed.js:
--------------------------------------------------------------------------------
 1 | var CelsiusToFahrenheitBindingChanged = DOMClass({
 2 |   'with': [DOMClass.bindings],
 3 |   template: '<div>' +
 4 |               '<input name="celsius" data-bind="value:celsius" type="number">°C' +
 5 |               '<span> ⇄ </span>' +
 6 |               '<input name="fahrenheit" data-bind="value:fahrenheit" type="number">°F' +
 7 |             '</div>',
 8 |   bindings: {},
 9 |   dispatchBindings: true,
10 |   constructor: function () {
11 |     this.addEventListener('bindingChanged', this);
12 |   },
13 |   handleEvent: function (e) {
14 |     // if it was a celsius, update fahrenheit and vice-versa
15 |     var
16 |       key = e.detail.key,
17 |       which = key === 'celsius' ?
18 |         'fahrenheit' : 'celsius',
19 |       convert = key === 'celsius' ?
20 |         'toFahrenheit' : 'toCelsius',
21 |       value = this[convert](e.detail.value)
22 |     ;
23 |     // avoid repeated dispatch when value is the same
24 |     if (value !== this.bindings[which])
25 |       this.bindings[which] = value;
26 |   },
27 |   toCelsius: function (value) {
28 |     return (5/9 * (parseFloat(value) - 32)).toFixed(1);
29 |   },
30 |   toFahrenheit: function (value) {
31 |     return (9/5 * parseFloat(value) + 32).toFixed(1);
32 |   },
33 |   setCelsius: function (value) {
34 |     // this will cause a dispatch
35 |     this.bindings.celsius = value;
36 |   },
37 |   setFahrenheit: function (value) {
38 |     // this will cause a dispatch
39 |     this.bindings.fahrenheit = value;
40 |   }
41 | });


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "version": "0.7.0",
 3 |   "license": "MIT",
 4 |   "name": "dom-class",
 5 |   "description": "A lightweight, cross browser, simplification of WebComponents",
 6 |   "homepage": "https://github.com/WebReflection/dom-class",
 7 |   "keywords": [
 8 |     "custom",
 9 |     "elements",
10 |     "class",
11 |     "vitamer",
12 |     "dom",
13 |     "restyle",
14 |     "es-class"
15 |   ],
16 |   "author": {
17 |     "name": "Andrea Giammarchi",
18 |     "web": "http://webreflection.blogspot.com/"
19 |   },
20 |   "repository": {
21 |     "type": "git",
22 |     "url": "git://github.com/WebReflection/dom-class.git"
23 |   },
24 |   "main": "./build/dom-class.node.js",
25 |   "scripts": {
26 |     "test": "phantomjs testrunner.js",
27 |     "web": "node node_modules/tiny-cdn/tiny-cdn run -p=1337",
28 |     "demo": "node node_modules/tiny-cdn/tiny-cdn run -p=1337 -s=demo -d=demo",
29 |     "install-global-dev": "node -e '(function(o){for(var k in o)require(\"child_process\").spawn(\"npm\",[\"install\",\"-g\",k+\"@\"+o[k]]).on(\"exit\",console.log.bind(console,k+\"@\"+o[k]));}(require(\"package.json\").globalDevDependencies))'"
30 |   },
31 |   "globalDevDependencies": {
32 |     "uglify-js": "1",
33 |     "jshint": "2",
34 |     "browserify": "*",
35 |     "watchify": "*",
36 |     "phantomjs-prebuilt": "*",
37 |     "tiny-cdn": "*"
38 |   },
39 |   "devDependencies": {
40 |     "wru": "*",
41 |     "document-register-element": "*",
42 |     "dom4": "*",
43 |     "query-result": "*"
44 |   },
45 |   "dependencies": {
46 |     "es-class": "*",
47 |     "restyle": "*"
48 |   }
49 | }
50 | 


--------------------------------------------------------------------------------
/demo/fake-tweet.js:
--------------------------------------------------------------------------------
 1 | var  FakeTweet = DOMClass({
 2 |   'with': DOMClass.bindings,
 3 |   css: {
 4 |     '': {
 5 |       display: 'block',
 6 |       position: 'relative'
 7 |     },
 8 |     '.left': {
 9 |       width: 64,
10 |       position: 'absolute'
11 |     },
12 |     '.right': {
13 |       padding: '8px 8px 8px 72px'
14 |     },
15 |     'header .handler, header .time': {
16 |       marginLeft: 8,
17 |       fontSize: '.8em',
18 |       color: '#666'
19 |     },
20 |     'header .time:before': {
21 |       content: '"-"',
22 |       marginRight: 8
23 |     },
24 |     'footer a, footer a:hover': {
25 |       textDecoration: 'none',
26 |       color: '#666',
27 |       fontSize: 'bold',
28 |       marginRight: '15%'
29 |     },
30 |     'footer a:first-child': {
31 |       marginLeft: '15%'
32 |     },
33 |     'strong, .content': {
34 |       fontSize: '.9em'
35 |     }
36 |   },
37 |   template: ''.concat(
38 |     '<div class="left">',
39 |       '<random-avatar size="64"></random-avatar>',
40 |     '</div>',
41 |     '<div class="right">',
42 |       '<header>',
43 |         '<strong>{{name}}</strong>',
44 |         '<span class="handler">{{handler}}</span>',
45 |         '<span class="time">{{time}}</span>',
46 |       '</header>',
47 |       '<div class="content">{{content}}</div>',
48 |       '<footer>',
49 |         '<a href="#reply">⤺</a>',
50 |         '<a href="#retweet">⟲</a>',
51 |         '<a href="#favorite">🌟</a>',
52 |         '<a href="#more">...</a>',
53 |       '</footer>',
54 |     '</div>'
55 |   ),
56 |   constructor: function (info) {
57 |     for (var key in info) this.bindings[key] = info[key];
58 |   }
59 | });


--------------------------------------------------------------------------------
/demo/domclass-vs-knockoutjs/minifiedHTML.js:
--------------------------------------------------------------------------------
 1 | var minifiedHTML = (function (escaped, es, trim, voidType) {
 2 |   function attributes(el) {
 3 |     for (var
 4 |       attr,
 5 |       value,
 6 |       out = [],
 7 |       attrs = el.attributes,
 8 |       len = attrs.length,
 9 |       i = 0; i < len; i++
10 |     ) {
11 |       attr = attrs[i];
12 |       value = attr.value || attr.nodeValue || '';
13 |       out.push(' ', attr.name || attr.nodeName);
14 |       if (value) out.push('="', value.replace(es, cape), '"');
15 |     }
16 |     return out.join('');
17 |   }
18 |   function cape(m) {
19 |     return escaped[m];
20 |   }
21 |   function minifiedHTML(el) {
22 |     if (el.nodeType !== 1) return '';
23 |     for (var
24 |       child,
25 |       nodeName = (el.nodeName || el.tagName).toLowerCase(),
26 |       out = ['<', nodeName, attributes(el), '>'],
27 |       childNodes = el.childNodes,
28 |       len = childNodes.length,
29 |       i = 0; i < len; i++
30 |     ) {
31 |       child = childNodes[i];
32 |       switch (child.nodeType) {
33 |         case 1: out.push(minifiedHTML(child));
34 |           break;
35 |         case 3: out.push(child.textContent.replace(trim, '').replace(es, cape));
36 |           break;
37 |       }
38 |     }
39 |     if (!voidType.test(nodeName)) out.push('</', nodeName, '>');
40 |     return out.join('');
41 |   }
42 |   return minifiedHTML;
43 | }(
44 |   {
45 |     '&': '&amp;',
46 |     '<': '&lt;',
47 |     '>': '&gt;',
48 |     "'": '&#39;',
49 |     '"': '&quot;'
50 |   },
51 |   /[&<>'"]/g,
52 |   /^\s+|\s+$/g,
53 |   /^(?:area|base|br|col|embed|hr|img|input|keygen|link|menuitem|meta|param|source|track|wbr)$/i
54 | ));


--------------------------------------------------------------------------------
/demo/random-avatar.js:
--------------------------------------------------------------------------------
 1 | var RandomAvatar = DOMClass({
 2 |   name: 'random-avatar',
 3 |   constructor: function (width) {
 4 |     this.textContent = '';
 5 |     var
 6 |       canvas = (this.ownerDocument || document).createElement('canvas'),
 7 |       context = canvas.getContext('2d'),
 8 |       pr = window.devicePixelRatio || 1,
 9 |       size = width || parseFloat(this.getAttribute('size')),
10 |       diameter = size * pr,
11 |       radius = diameter / 2,
12 |       lineWidth = (size * .06) * pr,
13 |       random = Math.random
14 |     ;
15 |     canvas.width = canvas.height = diameter;
16 |     canvas.style.cssText = ''.concat(
17 |       'width:', size, 'px;',
18 |       'height:', size, 'px;'
19 |     );
20 |     context.beginPath();
21 |     context.arc(radius, radius, radius - lineWidth, 0, 2 * Math.PI, false);
22 |     // background
23 |     context.fillStyle = 'rgb('.concat(
24 |       [
25 |         random() * 256 | 0,
26 |         random() * 256 | 0,
27 |         random() * 256 | 0
28 |       ].join(','),
29 |       ')'
30 |     );
31 |     context.fill();
32 |     // border
33 |     context.lineWidth = lineWidth;
34 |     context.strokeStyle = 'rgb('.concat(
35 |       [
36 |         random() * 256 | 0,
37 |         random() * 256 | 0,
38 |         random() * 256 | 0
39 |       ].join(','),
40 |       ')'
41 |     );
42 |     context.stroke();
43 |     // text
44 |     context.fillStyle = context.strokeStyle;
45 |     context.font = (radius | 0) + 'px sans-serif';
46 |     context.textAlign = 'center';
47 |     context.fillText(
48 |       String.fromCharCode(48 + (random() * 75 | 0)),
49 |       radius,
50 |       radius + radius / 3
51 |     );
52 |     context.closePath();
53 |     if (canvas.toDataURL) {
54 |       this.appendChild(new Image(size, size)).src = canvas.toDataURL();
55 |     } else {
56 |       this.append(canvas);
57 |     }
58 |   }
59 | });


--------------------------------------------------------------------------------
/demo/libs/monitor.js:
--------------------------------------------------------------------------------
 1 | var Monitoring = Monitoring || (function() {
 2 | 
 3 | 		var stats = new MemoryStats();
 4 | 		stats.domElement.style.position = 'fixed';
 5 | 		stats.domElement.style.right        = '0px';
 6 | 		stats.domElement.style.bottom       = '0px';
 7 | 		document.body.appendChild( stats.domElement );
 8 | 		requestAnimationFrame(function rAFloop(){
 9 | 			stats.update();
10 | 			requestAnimationFrame(rAFloop);
11 | 		});
12 | 
13 | 		var RenderRate = function () {
14 | 			var container = document.createElement( 'div' );
15 | 			container.id  = 'stats';
16 | 			container.style.cssText = 'width:150px;opacity:0.9;cursor:pointer;position:fixed;right:80px;bottom:0px;';
17 | 
18 | 			var msDiv = document.createElement( 'div' );
19 | 			msDiv.id  = 'ms';
20 | 			msDiv.style.cssText = 'padding:0 0 3px 3px;text-align:left;background-color:#020;';
21 | 			container.appendChild( msDiv );
22 | 
23 | 			var msText  = document.createElement( 'div' );
24 | 			msText.id = 'msText';
25 | 			msText.style.cssText = 'color:#0f0;font-family:Helvetica,Arial,sans-serif;font-size:9px;font-weight:bold;line-height:15px';
26 | 			msText.innerHTML= 'Repaint rate: 0/sec';
27 | 			msDiv.appendChild( msText );
28 | 
29 | 			var bucketSize = 20;
30 | 			var bucket = [];
31 | 			var lastTime  = Date.now();
32 | 			return {
33 | 				domElement: container,
34 | 				ping: function () {
35 | 					var start = lastTime;
36 | 					var stop = Date.now();
37 | 					var rate = 1000 / (stop - start);
38 | 					bucket.push(rate);
39 | 					if (bucket.length > bucketSize) {
40 | 						bucket.shift();
41 | 					}
42 | 					var sum = 0;
43 | 					for (var i = 0; i < bucket.length; i++) {
44 | 						sum = sum + bucket[i];
45 | 					}
46 | 					msText.textContent = "Repaint rate: " + (sum / bucket.length).toFixed(2) + "/sec";
47 | 					lastTime = stop;
48 | 				}
49 | 			}
50 | 		};
51 | 
52 | 		var renderRate = new RenderRate();
53 | 		document.body.appendChild( renderRate.domElement );
54 | 
55 | 		return {
56 | 			memoryStats: stats,
57 | 			renderRate: renderRate
58 | 		};
59 | 
60 | 	})();


--------------------------------------------------------------------------------
/testrunner.js:
--------------------------------------------------------------------------------
 1 | console.log('Loading: test.html');
 2 | var page = require('webpage').create();
 3 | var url = 'index.html';
 4 | page.onInitialized = function () {
 5 |   page.evaluate(function () {
 6 |     window.__PHANTOMJS__ = true;
 7 |   });
 8 | };
 9 | page.open(url, function (status) {
10 |   if (status === 'success') {
11 |     setTimeout(function () {
12 |       var results = page.evaluate(function() {
13 |         // remove the first node with the total from the following counts
14 |         var passed = Math.max(0, document.querySelectorAll('.pass').length - 1);
15 |         // return {total: document.body.innerHTML};
16 |         return {
17 |           // retrieve the total executed tests number
18 |           total: ''.concat(
19 |             passed,
20 |             ' blocks (',
21 |             document.querySelector('#wru strong').textContent.replace(/\D/g, ''),
22 |             ' single tests)'
23 |           ),
24 |           passed: passed,
25 |           failed: Math.max(0, document.querySelectorAll('.fail').length - 1),
26 |           failures: [].map.call(document.querySelectorAll('.fail'), function (node) {
27 |             return node.textContent;
28 |           }),
29 |           errored: Math.max(0, document.querySelectorAll('.error').length - 1),
30 |           errors: [].map.call(document.querySelectorAll('.error'), function (node) {
31 |             return node.textContent;
32 |           })
33 |         };
34 |       });
35 |       console.log('- - - - - - - - - -');
36 |       console.log('total:   ' + results.total);
37 |       console.log('- - - - - - - - - -');
38 |       console.log('passed:  ' + results.passed);
39 |       if (results.failed) {
40 |         console.log('failures: \n' + results.failures.join('\n'));
41 |       } else {
42 |         console.log('failed: ' + results.failed);
43 |       }
44 |       if (results.errored) {
45 |         console.log('errors: \n' + results.errors.join('\n'));
46 |       } else {
47 |         console.log('errored: ' + results.errored);
48 |       }
49 |       console.log('- - - - - - - - - -');
50 |       if (0 < results.failed + results.errored) {
51 |         status = 'failed';
52 |       }
53 |       phantom.exit(0);
54 |     }, 3000);
55 |   } else {
56 |     phantom.exit(1);
57 |   }
58 | });


--------------------------------------------------------------------------------
/demo/celsius-to-fahrenheit-seppuku.js:
--------------------------------------------------------------------------------
 1 | var CelsiusToFahrenheitSeppuku = DOMClass({
 2 |   'with': [DOMClass.bindings],
 3 |   template: '<div>' +
 4 |               '<input name="celsius" data-bind="value:celsius" type="number">°C' +
 5 |               '<span> ⇄ </span>' +
 6 |               '<input name="fahrenheit" data-bind="value:fahrenheit" type="number">°F' +
 7 |             '</div>',
 8 |   bindings: {
 9 |     // bindings can be setters too but it's easy to create a call-stack mess
10 |     // this is just an example on how to instantly update two fields
11 |     // no matters how the property is changed (user, ce.bindings, input.value)
12 |     set celsius(value) { this.update('celsius', 'fahrenheit', this.toFahrenheit, value); },
13 |     set fahrenheit(value) { this.update('fahrenheit', 'celsius', this.toCelsius, value); },
14 |     // the main catch is to avoid recursive callbacks
15 |     update: function (binding, change, converter, value) {
16 |       // we need to ignore redundant calls
17 |       if (!(binding in this.state)) {
18 |         this.state[binding] = true;
19 |         // we should also avoid changes in the other target
20 |         if (!(change in this.state)) {
21 |           // at this point we need to trigger the UI change
22 |           // this is quite dirty approach because we deal with
23 |           // UI in an entire DATA related context (data bindings)
24 |           // However, we locked bindings out of their same setters
25 |           // so this is actually kinda safe (and will try to invoke setters again)
26 |           this[change + 'View'].value = converter.call(this, value);
27 |         }
28 |         delete this.state[binding];
29 |       }
30 |     },
31 |     toCelsius: function (value) {
32 |       return (5/9 * (parseFloat(value) - 32)).toFixed(1);
33 |     },
34 |     toFahrenheit: function (value) {
35 |       return (9/5 * parseFloat(value) + 32).toFixed(1);
36 |     }
37 |   },
38 |   constructor: function () {
39 |     // enrich current bindings with a state
40 |     // and give it the ability to directly change the UI
41 |     this.bindings.state = Object.create(null);
42 |     this.bindings.celsiusView = this.query('[name="celsius"]');
43 |     this.bindings.fahrenheitView = this.query('[name="fahrenheit"]');
44 |   }
45 | });


--------------------------------------------------------------------------------
/src/dom-class-zero.js:
--------------------------------------------------------------------------------
 1 | var DOMClass = (function (O,o) {
 2 | 
 3 |   /*! (C) Andrea Giammarchi */
 4 | 
 5 |   var
 6 |     create = O.create,
 7 |     css = create(null),
 8 |     dP = O.defineProperty,
 9 |     gOPD = O.getOwnPropertyDescriptor,
10 |     gOPN = O.getOwnPropertyNames,
11 |     gOPS = O.getOwnPropertySymbols,
12 |     ownKeys = gOPS ?
13 |       function (object) {
14 |         return gOPN(object).concat(gOPS(object));
15 |       } :
16 |       gOPN,
17 |     loadCSS = function (document, href) {
18 |       var
19 |         head =  document.head,
20 |         link =  document.createElement('link')
21 |       ;
22 |       link.rel   = 'stylesheet';
23 |       link.type  = 'text/css';
24 |       link.href  = href;
25 |       css[href] = head.insertBefore(link, head.lastChild);
26 |     }
27 |   ;
28 | 
29 |   return function DOMClass(description) {
30 |     for (var
31 |       k, name, xtends,
32 |       constructor,
33 |       stylesheet,
34 |       descriptors = {},
35 |       keys = ownKeys(description),
36 |       set = function (s) {
37 |         dP(descriptors, s, {
38 |           enumerable: true,
39 |           writable: true,
40 |           value: gOPD(description, k)
41 |         });
42 |       },
43 |       i = 0; i < keys.length; i++
44 |     ) {
45 |       k = keys[i];
46 |       switch (k.toLowerCase()) {
47 |         case 'name': name = description[k]; break;
48 |         case 'stylesheet': stylesheet = description[k]; break;
49 |         case 'extends':
50 |           xtends = typeof description[k] === 'function' ?
51 |             description[k].prototype : description[k];
52 |           break;
53 |         case 'constructor': constructor = description[k];
54 |                             set('createdCallback');           break;
55 |         case 'onattached':  set('attachedCallback');          break;
56 |         case 'onchanged':   set('attributeChangedCallback');  break;
57 |         case 'ondetached':  set('detachedCallback');          break;
58 |         default: set(k); break;
59 |       }
60 |     }
61 |     if (stylesheet) {
62 |       descriptors.createdCallback.value = function () {
63 |         if (!(stylesheet in css))
64 |           loadCSS(this.ownerDocument || document, stylesheet);
65 |         if (constructor) constructor.apply(this, arguments);
66 |       };
67 |     }
68 |     return document.registerElement(
69 |       name || ('zero-dom-class-'+ ++o),
70 |       {prototype: create(xtends || HTMLElement.prototype, descriptors)}
71 |     );
72 |   };
73 | 
74 | }(Object, 0));


--------------------------------------------------------------------------------
/demo/libs/memory-stats.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * @author mrdoob / http://mrdoob.com/
  3 |  * @author jetienne / http://jetienne.com/
  4 |  * @author paulirish / http://paulirish.com/
  5 |  */
  6 | var MemoryStats = function (){
  7 | 
  8 | 	var msMin	= 100;
  9 | 	var msMax	= 0;
 10 | 
 11 | 	var container	= document.createElement( 'div' );
 12 | 	container.id	= 'stats';
 13 | 	container.style.cssText = 'width:80px;opacity:0.9;cursor:pointer';
 14 | 
 15 | 	var msDiv	= document.createElement( 'div' );
 16 | 	msDiv.id	= 'ms';
 17 | 	msDiv.style.cssText = 'padding:0 0 3px 3px;text-align:left;background-color:#020;';
 18 | 	container.appendChild( msDiv );
 19 | 
 20 | 	var msText	= document.createElement( 'div' );
 21 | 	msText.id	= 'msText';
 22 | 	msText.style.cssText = 'color:#0f0;font-family:Helvetica,Arial,sans-serif;font-size:9px;font-weight:bold;line-height:15px';
 23 | 	msText.innerHTML= 'Memory';
 24 | 	msDiv.appendChild( msText );
 25 | 
 26 | 	var msGraph	= document.createElement( 'div' );
 27 | 	msGraph.id	= 'msGraph';
 28 | 	msGraph.style.cssText = 'position:relative;width:74px;height:30px;background-color:#0f0';
 29 | 	msDiv.appendChild( msGraph );
 30 | 
 31 | 	while ( msGraph.children.length < 74 ) {
 32 | 
 33 | 		var bar = document.createElement( 'span' );
 34 | 		bar.style.cssText = 'width:1px;height:30px;float:left;background-color:#131';
 35 | 		msGraph.appendChild( bar );
 36 | 
 37 | 	}
 38 | 
 39 | 	var updateGraph = function ( dom, height, color ) {
 40 | 
 41 | 		var child = dom.appendChild( dom.firstChild );
 42 | 		child.style.height = height + 'px';
 43 | 		if( color ) child.style.backgroundColor = color;
 44 | 
 45 | 	}
 46 | 
 47 | 	var perf = window.performance || {};
 48 | 	// polyfill usedJSHeapSize
 49 | 	if (!perf && !perf.memory){
 50 | 		perf.memory = { usedJSHeapSize : 0 };
 51 | 	}
 52 | 	if (perf && !perf.memory){
 53 | 		perf.memory = { usedJSHeapSize : 0 };
 54 | 	}
 55 | 
 56 | 	// support of the API?
 57 | 	if( perf.memory.totalJSHeapSize === 0 ){
 58 | 		console.warn('totalJSHeapSize === 0... performance.memory is only available in Chrome .')
 59 | 	}
 60 | 
 61 | 	// TODO, add a sanity check to see if values are bucketed.
 62 | 	// If so, reminde user to adopt the --enable-precise-memory-info flag.
 63 | 	// open -a "/Applications/Google Chrome.app" --args --enable-precise-memory-info
 64 | 
 65 | 	var lastTime	= Date.now();
 66 | 	var lastUsedHeap= perf.memory.usedJSHeapSize;
 67 | 	return {
 68 | 		domElement: container,
 69 | 
 70 | 		update: function () {
 71 | 
 72 | 			// refresh only 30time per second
 73 | 			if( Date.now() - lastTime < 1000/30 )	return;
 74 | 			lastTime	= Date.now()
 75 | 
 76 | 			var delta	= perf.memory.usedJSHeapSize - lastUsedHeap;
 77 | 			lastUsedHeap	= perf.memory.usedJSHeapSize;
 78 | 			var color	= delta < 0 ? '#830' : '#131';
 79 | 
 80 | 			var ms	= perf.memory.usedJSHeapSize;
 81 | 			msMin	= Math.min( msMin, ms );
 82 | 			msMax	= Math.max( msMax, ms );
 83 | 			msText.textContent = "Mem: " + bytesToSize(ms, 2);
 84 | 
 85 | 			var normValue	= ms / (30*1024*1024);
 86 | 			var height	= Math.min( 30, 30 - normValue * 30 );
 87 | 			updateGraph( msGraph, height, color);
 88 | 
 89 | 			function bytesToSize( bytes, nFractDigit ){
 90 | 				var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
 91 | 				if (bytes == 0) return 'n/a';
 92 | 				nFractDigit	= nFractDigit !== undefined ? nFractDigit : 0;
 93 | 				var precision	= Math.pow(10, nFractDigit);
 94 | 				var i 		= Math.floor(Math.log(bytes) / Math.log(1024));
 95 | 				return Math.round(bytes*precision / Math.pow(1024, i))/precision + ' ' + sizes[i];
 96 | 			};
 97 | 		}
 98 | 
 99 | 	}
100 | 
101 | };


--------------------------------------------------------------------------------
/demo/db-monster.js:
--------------------------------------------------------------------------------
 1 | var DBMonster = DOMClass({
 2 |   name: 'dm-monster',
 3 |   'extends': HTMLTableElement,
 4 |   'with': DOMClass.bindings,
 5 |   'static': {
 6 |     // each Custom Element row of the bench (200 Row components per benchmark)
 7 |     // it binds 2 properties and 1 attribute resolved via callback
 8 |     // it binds 2 properties and 1 invoke per each query result
 9 |     // total of 12 bindings (properties) with 2 bound call (resolved via methods)
10 |     Row: DOMClass({
11 |       name: 'dm-monster-row',
12 |       'extends': HTMLTableRowElement,
13 |       'with': DOMClass.bindings,
14 |       constructor: function (db) {
15 |         this.createBindings({
16 |           template: ''.concat(
17 |             '<td class="dbname">{{name}}</td>',
18 |             '<td class="query-count">',
19 |               '<span data-bind="class:countClassName">{{queries}}</span>',
20 |             '</td>'
21 |           ),
22 |           bindings: {
23 |             name: db.dbname,
24 |             queries: db.lastSample.nbQueries,
25 |             countClassName: db.lastSample.countClassName
26 |           }
27 |         });
28 |         this.queryResults = db.lastSample.topFiveQueries.map(function (query) {
29 |           return this.appendChild(new DBMonster.QueryResult(query));
30 |         }, this);
31 |       },
32 |       update: function (db) {
33 |         this.bindings.name = db.dbname;
34 |         this.bindings.queries = db.lastSample.nbQueries;
35 |         this.bindings.countClassName =  db.lastSample.countClassName;
36 |         this.queryResults.forEach(this.subUpdate, db.lastSample.topFiveQueries);
37 |       },
38 |       subUpdate: function (qr, i) {
39 |         qr.update(this[i]);
40 |       }
41 |     }),
42 |     // last 5 Custom Elements per each Row (1000 QueryResult components per benchmark)
43 |     // each TD binds 1 property and 1 invoke through the elapsed property
44 |     QueryResult: DOMClass({
45 |       name: 'dm-monster-query-cell',
46 |       'extends': HTMLTableCellElement,
47 |       'with': DOMClass.bindings,
48 |       constructor: function (query) {
49 |         this.createBindings({
50 |           template: ''.concat(
51 |             '<span class="foo">{{formatElapsed}}</span>',
52 |             '<div class="popover left">',
53 |               '<div class="popover-content">{{query}}</div>',
54 |               '<div class="arrow"></div>',
55 |             '</div>'
56 |           ),
57 |           bindings: {
58 |             query: query.query,
59 |             formatElapsed: query.formatElapsed
60 |           }
61 |         });
62 |         this.className = query.elapsedClassName;
63 |       },
64 |       update: function (query) {
65 |         this.bindings.query = query.query;
66 |         this.bindings.formatElapsed = query.formatElapsed;
67 |         this.className = query.elapsedClassName;
68 |       }
69 |     })
70 |   },
71 |   // the DBMonster Custom Element benchmark.
72 |   //  total amount of benchmark Custom Elements per instance: 1201
73 |   //  total amount of benchmark bindings per instance: 2400
74 |   //  total amount of bound invokes per instance: 1000
75 |   //  will it perform? Hell YEAH!
76 |   //    http://webreflection.github.io/dom-class/demo/dbmonster.html
77 |   constructor: function (dbs) {
78 |     this.className = 'table table-striped latest-data';
79 |     dbs.forEach(function (db) {
80 |       this.appendChild(new DBMonster.Row(db));
81 |     }, this.appendChild(document.createElement('tbody')));
82 |   },
83 |   update: function (dbs) {
84 |     Array.prototype.forEach.call(
85 |       this.firstChild.children, this.subUpdate, dbs);
86 |   },
87 |   subUpdate: function (row, i) {
88 |     row.update(this[i]);
89 |   }
90 | });
91 | 


--------------------------------------------------------------------------------
/demo/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 |   <head>
  4 |     <title>Vitamer Mixins Demo</title>
  5 |     <meta http-equiv=content-type content="text/html; charset=utf-8">
  6 |     <meta http-equiv="content-language" content="en-US"/>
  7 |     <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
  8 |     <style>
  9 | 
 10 |     html {
 11 |       -webkit-box-sizing: border-box;
 12 |       -moz-box-sizing: border-box;
 13 |       box-sizing: border-box;
 14 |       font-family: sans-serif;
 15 |     }
 16 | 
 17 |     *, *:before, *:after {
 18 |       box-sizing: inherit;
 19 |     }
 20 | 
 21 |     .fake-twitter {
 22 |       margin: 32px 0;
 23 |       max-width: 560px;
 24 |       border-top: 2px solid silver;
 25 |       border-bottom: 2px solid silver;
 26 |       /*
 27 |       overflow: auto;
 28 |       max-height: 200px;
 29 |       */
 30 |     }
 31 |     </style>
 32 |     <script src="vitamer-mixins.js"></script>
 33 |     <script src="x-greeter.js"></script>
 34 |     <script src="input-mirror.js"></script>
 35 |     <script src="celsius-to-fahrenheit-input.js"></script>
 36 |     <script src="random-avatar.js"></script>
 37 |     <script src="fake-tweet.js"></script>
 38 |     <script src="html-binding.js"></script>
 39 |     <script>
 40 |     this.onload = function () {
 41 | 
 42 |       // try the following:
 43 |       //  xGreeter.bindings.bold = true;
 44 |       //  xGreeter.bindings.selectedIndex = 2;
 45 |       //  xGreeter.query('input').checked = false;
 46 |       //  xGreeter.query('select').selectedIndex = 5;
 47 |       this.xGreeter = document.body.appendChild(
 48 |         new XGreeter()
 49 |       );
 50 | 
 51 | 
 52 |       // write anything you want and see it on its right
 53 |       // it is also possible to ochange its value directly
 54 |       // document.query('[placeholder="mirror"]').value = 123;
 55 |       this.inputMirror = document.body.appendChild(
 56 |         new InputMirror()
 57 |       );
 58 | 
 59 | 
 60 |       // dual way binding, each time one of these two inputs
 61 |       // gets updates via user interactions, the other one will update
 62 |       this.celsiusToFahrenheitInput = document.body.appendChild(
 63 |         new CelsiusToFahrenheitInput()
 64 |       );
 65 |       // If we access directly the bindings:
 66 |       // this.celsiusToFahrenheitInput.bindings.celsius = 32;
 67 |       // this.celsiusToFahrenheitInput.bindings.fahrenheit = 32;
 68 |       // we will update only the one related bound input at time.
 69 |       // To see the dual way we need to trigger an input change.
 70 |       // There are 2 ways of doing this:
 71 |       //  - use provided utilities to update both fields
 72 |       //   celsiusToFahrenheitInput.setCelsius(32);
 73 |       //   celsiusToFahrenheitInput.setFahrenheit(32);
 74 |       //
 75 |       //  - use DOM way to update fields and dispatch
 76 |       //   // to trigger celsius input and update fahrenheit
 77 |       //   celsiusToFahrenheitInput.query('[name="celsius"]').value 32;
 78 |       //   celsiusToFahrenheitInput.query('[name="celsius"]')
 79 |       //    .dispatchEvent(new CustomEvent('input', {bubbles: true}));
 80 |       //   // to trigger fahrenheit input and update celsius
 81 |       //   celsiusToFahrenheitInput.query('[name="fahrenheit"]').value 32;
 82 |       //   celsiusToFahrenheitInput.query('[name="fahrenheit"]')
 83 |       //    .dispatchEvent(new CustomEvent('input', {bubbles: true}));
 84 | 
 85 | 
 86 |       // portion of html can be bound too
 87 |       // use {{{propName}}} within triple stache
 88 |       // try:
 89 |       //  htmlBinding.bindings.text = 'plain text';
 90 |       //  htmlBinding.bindings.html = 'some <strong>html</strong>!';
 91 |       this.htmlBinding = document.body.appendChild(
 92 |         new HtmlBinding()
 93 |       );
 94 | 
 95 | 
 96 |       (function () {
 97 |         function generateText(numOfChars) {
 98 |           for (var a = [], i = 0; i < numOfChars; i++) {
 99 |             a[i] = i % 23 ? 18 + random() * 110 | 0 : 32;
100 |           }
101 |           return String.fromCharCode.apply(String, a);
102 |         }
103 |         var random = Math.random;
104 |         var fakeTwitter = document.body.appendChild(
105 |           document.createElement('div')
106 |         );
107 |         fakeTwitter.classList.add('fake-twitter');
108 |         for (var i = 0, f = document.createDocumentFragment(); i < 100; i++) {
109 |           f.appendChild(new FakeTweet({
110 |             name: generateText(23),
111 |             handler: generateText(12),
112 |             time: (random() * 50 | 0) + 'm',
113 |             content: generateText(10 + random() * 130 | 0)
114 |           }));
115 |         }
116 |         fakeTwitter.appendChild(f);
117 |       }());
118 | 
119 | 
120 |       // just an input
121 |       var MyInput = DOMClass({
122 |         extends: HTMLInputElement,
123 |         // just for demo purpose
124 |         constructor: function (value) {
125 |           this.value = value;
126 |         }
127 |       });
128 |       document.body.appendChild(new MyInput('The End'));
129 | 
130 |     };
131 |     </script>
132 |   </head>
133 |   <body></body>
134 | </html>


--------------------------------------------------------------------------------
/src/examples.js:
--------------------------------------------------------------------------------
  1 | 
  2 | // examples, feel free to ignore this file, is rather pointless in  its current state
  3 | 
  4 | 
  5 | /*
  6 | 
  7 | // test it for real
  8 | var EDiv = new DOMClass({
  9 |   with: Data,
 10 |   name: 'e-div',
 11 |   css: {'': {display: 'block'}},
 12 |   onChanged: function () {
 13 |     console.log(arguments);
 14 |   }
 15 | });
 16 | 
 17 | var ediv = document.body.appendChild(new EDiv);
 18 | 
 19 | ediv.data('name', 'Andrea');
 20 | ediv.data('age', 37);
 21 | ediv.data('info', {
 22 |   currentCity: 'London',
 23 |   sports: ['Snowboarding', 'Skydiving']
 24 | });
 25 | 
 26 | //*/
 27 | 
 28 | /*
 29 | document.body.innerHTML = '';
 30 | Bindings.withBindings.call(document.body, {
 31 |   template: '<input data-bind="value:a">' +
 32 |             '<input data-bind="value:b">' +
 33 |             '<input data-bind="value:sum(a,b)" disabled>' +
 34 |             '<br/>' +
 35 |             'The sum of {{a}} + {{b}} is equal to {{sum(a,b)}}',
 36 |   bindings: {a: 0, b: 0, sum: function (a, b) {
 37 |     var result = parseFloat(a) + parseFloat(b);
 38 |     return isNaN(result) ? '?' : result;
 39 |   }}
 40 | });
 41 | //*/
 42 | 
 43 | /*
 44 | 
 45 | document.body.innerHTML = '';
 46 | Bindings.withBindings.call(document.body, {
 47 |   template: '{{sum(a,b)}} or just {{a}} and just {{b}}',
 48 |   bindings: {a: 1, b: 2, sum: function (a, b) {
 49 |     return a + b;
 50 |   }}
 51 | });
 52 | 
 53 | */
 54 | 
 55 | /*
 56 | 
 57 | var ToUpperCase = DOMClass({
 58 |   with: Bindings,
 59 |   template: '{{name}} {{surname}}',
 60 |   bindings: {
 61 |     get name() {
 62 |       return this._name;
 63 |     },
 64 |     set name(value) {
 65 |       this._name = value.toUpperCase();
 66 |     }
 67 |   }
 68 | });
 69 | 
 70 | var tuc = document.body.insertBefore(
 71 |   new ToUpperCase,
 72 |   document.body.firstChild
 73 | );
 74 | 
 75 | 
 76 | */
 77 | 
 78 | /*
 79 | 
 80 | var Celsius2Fahrenheit = DOMClass({
 81 |   with: Bindings,
 82 |   name: 'celsius-2-Fahrenheit',
 83 |   css: {
 84 |     'input': {
 85 |       maxWidth: 64,
 86 |       border: {width: 1, color: 'silver'}
 87 |     }
 88 |   },
 89 |   template: '<div>' +
 90 |               '<input name="celsius" type="number" data-bind="value:celsius">°C' +
 91 |               '<span> ⇄ </span>' +
 92 |               '<input name="fahrenheit" type="number" data-bind="value:fahrenheit">°F' +
 93 |             '</div>',
 94 |   bindings: {
 95 |     celsius: 32,
 96 |     fahrenheit: 0
 97 |   },
 98 |   constructor: function () {
 99 |     this.addEventListener('input', function (e) {
100 |       switch (e.target.name) {
101 |         case 'celsius':
102 |           e.currentTarget.bindings.fahrenheit =
103 |             9/5 * parseFloat(e.target.value) + 32;
104 |           break;
105 |         case 'fahrenheit':
106 |           e.currentTarget.bindings.celsius =
107 |             5/9 * (parseFloat(e.target.value) - 32)
108 |           break;
109 |       }
110 |     });
111 |   },
112 |   updateTemperature: function (which, temp) {
113 |     if (which in this.bindings) {
114 |       this.bindings[which] = temp;
115 |       this.query('[name="' + which + '"]').dispatchEvent(
116 |         new CustomEvent('input', {bubbles: true})
117 |       ); 
118 |     } else {
119 |       alert('how to convert ' + which + ' ?');
120 |     }
121 |   }
122 | });
123 | 
124 | var c2f = document.body.insertBefore(
125 |   new Celsius2Fahrenheit,
126 |   document.body.firstChild
127 | );
128 | 
129 | //*/
130 | 
131 | /*
132 | var EditableNameTag = DOMClass({
133 |   with: Bindings,
134 |   name: 'editable-name-tag',
135 |   template: '<p data-bind="custom:owner">'+
136 |               'This is a <strong>{{owner}}</strong>\'s editable-name-tag.' +
137 |             '</p>' +
138 |             '<input data-bind="value:owner" placeholder="Your name here...">',
139 |   bindings: {owner: "Daniel"}
140 | });
141 | 
142 | var ent = document.body.insertBefore(
143 |   new EditableNameTag,
144 |   document.body.firstChild
145 | );
146 | 
147 | function verify() {
148 |   console.log(
149 |     ent.bindings.owner,
150 |     ent.firstChild.getAttribute('custom'),
151 |     ent.lastChild.value,
152 |     ent.firstChild.childNodes[1].textContent
153 |   );
154 | }
155 | 
156 | setTimeout(function () {
157 |   ent.bindings.owner = 'Andrea';
158 |   setTimeout(function () {
159 |     verify();
160 |     ent.firstChild.setAttribute('custom', 'WebReflection');
161 |     setTimeout(function () {
162 |       verify();
163 |       ent.lastChild.value = 'Daniel';
164 |       setTimeout(verify, 1000);
165 |     }, 1000);
166 |   }, 1000);
167 | }, 1000);
168 | 
169 | //*/
170 | 
171 | /*
172 | Bindings.withBindings.call(document.body, {
173 |   template: '<input data-bind="value:name, random">' +
174 |             '<input type="checkbox" data-bind="checked">',
175 |   bindings: {name: 'webreflection', random: 'wut', checked: false}
176 | });
177 | 
178 | setTimeout(function () {
179 |   document.body.bindings.name = 'asd';
180 |   document.body.bindings.checked = true;
181 | }, 500);
182 | //*/
183 | 
184 | /*
185 | Bindings.withBindings.call(document.body, {
186 |   template: '{{dumber}} and {{dumber}}',
187 |   bindings: {dumber: 'dumber'}
188 | });
189 | 
190 | document.body.bindings.dumber = 'yo';
191 | //*/
192 | 
193 | /*
194 | 
195 | var BoundContent = new DOMClass({
196 |   with: Bindings
197 | });
198 | 
199 | var bc = (new BoundContent).withBindings({
200 |   template: '<span>{{text}}</span>',
201 |   bindings: {text: 'Hello World'}
202 | });
203 | 
204 | //*/


--------------------------------------------------------------------------------
/demo/x-greeter.js:
--------------------------------------------------------------------------------
  1 | var XGreeter = DOMClass({
  2 | 
  3 |   // use bindings mixin
  4 |   'with': [DOMClass.bindings],
  5 | 
  6 |   // style any internal node with a class strong
  7 |   css: {'.strong':{fontWeight: 'bold'}},
  8 | 
  9 |   // template, it could be ES6 back-tick multi line string as well
 10 |   template: ''.concat(
 11 |     //
 12 |     // data-bind accepts one or more comma separated bindings.
 13 |     // Each data binding is a key:value pair
 14 |     //  - the key is the node property or attribute
 15 |     //  - the value is the property name in the bindings object
 16 |     // The value could also be method invocation.
 17 |     // In latter case, every time one of its parameters changes
 18 |     // the method will be re-executed and its return assigned
 19 |     // on the element as property or attribute.
 20 |     // example:
 21 |     '<p data-bind="class:changeClass(bold)">',
 22 |     //               ↑         ↑      ↑
 23 |     //               └─────────┤      └─── every time the 'bold'
 24 |     //                         │            property changes ┐
 25 |     // and the p 'class'       │                             │
 26 |     // attribute changes       └── changeClass gets invoked ←┘
 27 |     //
 28 |     // ---------------------------------------------------------
 29 |     //
 30 |     // When it comes to text nodes we don't have
 31 |     // properties or attributes like we do on elements.
 32 |     // In this case we can either bind a property by name
 33 |     // or just a method which will update the text node
 34 |     // content every time one of its parameters changes.
 35 |     //
 36 |       'Hello {{greeter(selectedIndex)}}, and Welcome!',
 37 |     //             ↑         ↑
 38 |     //             │         └─── every time the property
 39 |     // it's return │              selectedIndex changes ┐
 40 |     // is the text │                                    │
 41 |     //             └── the method greeter gets invoked ←┘
 42 |     '</p>',
 43 |     '<p><label>',
 44 |       '<small>How would like to be called?</small>', ' ',
 45 |       '<select data-bind="selectedIndex"></select>',
 46 |     //                          ↑
 47 |     // ┌────────────────────────┘
 48 |     // └─ if the element property is the same
 49 |     //    used in the bindings we can write propName
 50 |     //    instead of writing propName:propName.
 51 |     //
 52 |     //    If the select changes, or the bindings.selectedIndex
 53 |     //    is manually set to a different index
 54 |     //      - it invokes greeter(selectedIndex) writing new value
 55 |     //      - if it was a manual change it will update the select
 56 |     //      - if it was a UI user change it will update bindings
 57 |     //
 58 |     '</label></p>',
 59 |     '<p><label>',
 60 |       '<small>Would you like bold greetings?</small>', ' ',
 61 |       '<input type="checkbox" data-bind="checked:bold">',
 62 |     //                                      ↑     ↑
 63 |     // ┌────────────────────────────────────┴─────┘
 64 |     // └─ in this case we are binding the property bold
 65 |     //    of the bindings object with the checked status
 66 |     //    of the input and vice-versa, if the checked
 67 |     //    status changes for any reason, the bold property
 68 |     //    will update accordingly. This change will:
 69 |     //      - invoke the initial changeClass(bold)
 70 |     //      - it will update the class attribute on
 71 |     //        the first p node.
 72 |     //
 73 |     '</label></p>'
 74 |   ),
 75 | 
 76 |   // the binding object, it's inherited per each instance
 77 |   // but its bound properties are created on top
 78 |   // whenever this.createBindings(this.bindings) is called
 79 |   // The DOMClass.bindings mixin has aumatic mixin:init()
 80 |   // so that this will be understood and correctly analyzed
 81 |   // whenever a new instance is created
 82 |   bindings: {
 83 |     // reflects the initial <select> selectedIndex value
 84 |     selectedIndex: 0,
 85 |     // reflects the initial input checkbox status
 86 |     bold: 0,
 87 |     // not listened anywhere, it will be used in the constructor
 88 |     options: ['', 'Mrs', 'Miss', 'Mr', 'Jr', 'Chap'],
 89 |     // the greeter method with the index to show
 90 |     greeter: function (i) {
 91 |       // it's a method, its context is the current
 92 |       // instance of XGreeter bindings object
 93 |       return this.options[i] || 'user';
 94 |     },
 95 |     // the changeClass method returning the 'bold' or '' class
 96 |     changeClass: function (bold) {
 97 |       return bold ? 'strong' : '';
 98 |     }
 99 |   },
100 | 
101 |   // if true (or an integer greater than -1)
102 |   // it will dispatch an event every time
103 |   // something changes. When it's an integer
104 |   // it will be used to debounce multiple calls.
105 |   // If it's value is 0 it will assume ASAP invocation
106 |   // and it will use requestAnimationFrame
107 |   dispatchBindings: false,
108 | 
109 |   // it will be invoked per each new instance
110 |   constructor: function () {
111 |     // per each bindings.options
112 |     this.bindings.options.forEach(function (option) {
113 |       // create an option and append it to the select
114 |       var el = this.appendChild(document.createElement('option'));
115 |       // setting also value and content
116 |       el.value = option;
117 |       el.textContent = option;
118 |     }, this.query('select'));
119 |     // DOM4 has query and queryAll methods which look
120 |     // for nested nodes only and DOMClass uses DOM4 features
121 |   }
122 | });


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html>
  3 |     <head>
  4 |         <title>DOMClass &amp; Vitamer</title>
  5 |         <meta http-equiv="content-language" content="en-US"/>
  6 |         <meta http-equiv=content-type content="text/html; charset=utf-8">
  7 |         <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
  8 |         <meta name="apple-mobile-web-app-capable" content="yes"/>
  9 |         <meta names="apple-mobile-web-app-status-bar-style" content="black"/>
 10 |         <script>
 11 |         // here the list of tests to run with wru
 12 |         var TESTS = ["vitamer-mixins"];
 13 |         </script>
 14 |         <script>// don't change code here
 15 |         for(var i = 0; i < TESTS.length; document.write(
 16 |           '<script src="build/' + TESTS[i++] + '.js"><' + '/script>'
 17 |         ));
 18 |         function wru(wru){
 19 |           var
 20 |             all = [],
 21 |             test = wru.test,
 22 |             XHR = typeof XMLHttpRequest === typeof XHR ?
 23 |               function () {
 24 |                 return new ActiveXObject("Microsoft.XMLHTTP");
 25 |               } :
 26 |               function () {
 27 |                 return new XMLHttpRequest;
 28 |               }
 29 |           ;
 30 |           wru.test = function () {
 31 |             all = all.concat.apply(all, arguments);
 32 |           };
 33 |           function load(file, then) {
 34 |             var xhr = XHR();
 35 |             xhr.open('get', file, true);
 36 |             xhr.onreadystatechange = function () {
 37 |               if (xhr.readyState == 4) {
 38 |                 Function("wru", xhr.responseText.
 39 |                   replace(/\/\/remove:[^\x00]*?\/\/:remove/g, '')
 40 |                 )(wru);
 41 |                 then();
 42 |               }
 43 |             };
 44 |             xhr.send(null);
 45 |           }
 46 |           this.onload = function () {
 47 |             (function onload() {
 48 |               if (TESTS.length) {
 49 |                 load('test/' + TESTS.shift() + '.js?' + Math.random(), onload);
 50 |               } else {
 51 |                 wru.test = test;
 52 |                 wru.test(all);
 53 |               }
 54 |             }());
 55 |           };
 56 |         }</script>
 57 |         <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 58 |         <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
 59 |         <style type="text/css">
 60 | #wru {
 61 |     font-family: sans-serif;
 62 |     font-size: 11pt;
 63 |     border: 1px solid #333;
 64 | }
 65 | #wru div {
 66 |     cursor: default;
 67 |     padding: 0;
 68 |     color: #000;
 69 | }
 70 | #wru div span,
 71 | #wru div strong {
 72 |     display: block;
 73 |     padding: 4px;
 74 |     margin: 0;
 75 | }
 76 | #wru div ul {
 77 |     margin: 0;
 78 |     padding-bottom: 4px;
 79 | }
 80 | #wru div.pass {
 81 |     background: #90EE90;
 82 | }
 83 | #wru div.fail {
 84 |     background: #FF6347;
 85 | }
 86 | #wru div.error {
 87 |     background: #000;
 88 |     color: #FFF;
 89 | }
 90 |         </style>
 91 |     </head>
 92 |     <body>
 93 |         <div id="wru"></div>
 94 |         <script>
 95 | /*!
 96 | (C) Andrea Giammarchi, @WebReflection - Mit Style License
 97 | */
 98 | wru(function(Y){function j(){A=K.call(m);if(A){if(typeof A=="function"){A={name:A[S]||"anonymous",test:A}}(P=l(l(Z.node,"div"),"span"))[E]=((ag(A,S)&&A[S])||(ag(A,e)&&A[e])||Q)+i+i;a=[];u=[];T=[];ab={};b("setup");T[ah]||b("test");N||r()}else{t()}}function p(aj){try{return O.call(h,aj)}catch(ai){return h.createElement(aj)}}function l(ai,aj){return ai.appendChild(p(aj))}function g(ai){P[E]=x.call(P[E],0,-2)+i+ai}function t(){var ak=Z.node.insertBefore(p("div"),Z.node.firstChild),al,aj,ai;if(ad){ai=aj="error";al="There Are Errors: "+ad}else{if(C){ai=aj="fail";al=C+" Tests Failed"}else{ai=aj="pass";al="Passed "+s+" Tests"}}Z.status=ai;ak[E]="<strong>"+al+"</strong>";ak.className=aj}function G(){var ai=this.lastChild.style;ai.display=ai.display=="none"?"block":"none"}function c(ai){P[E]+="<ul>"+D+v.call(ai,d+D)+d+"</ul>";(P.onclick=G).call(P)}function r(){f();s+=a[ah];C+=u[ah];ad+=T[ah];g("("+v.call([a[ah],M=u[ah],T[ah]],", ")+")");P=P.parentNode;T[ah]?c(T,W="error"):(M?c(u,W="fail"):W="pass");P.className=W;M=0;W=i;j()}function b(ai){if(ag(A,ai)){try{A[ai](ab)}catch(aj){aa.call(T,i+aj)}}}function ag(aj,ai){return q.call(aj,ai)}function w(){return F()<0.5?-1:1}function f(){if(R){H(R);R=0}b("teardown")}var Z={assert:function U(aj,ai){if(arguments[ah]==1){ai=aj;aj=Q}z=I;aa.call(ai?a:u,W+aj);return ai},async:function V(aj,am,ak,al){al=++N;if(typeof aj=="function"){ak=am;am=aj;aj="asynchronous test #"+al}ak=X(function(){al=0;aa.call(u,aj);--N||(R=X(r,0))},L(ak||y)||y);return function ai(){if(!al){return}z=ae;W=aj+": ";try{am.apply(this,arguments)}catch(an){z=I;aa.call(T,W+an)}W=i;if(z){H(ak);--N||(R=X(r,0))}}},test:function n(ai,aj){Z.after=aj||function(){};m=J.apply(m,[ai]);Z.random&&af.call(m,w);N||j()}},I=true,ae=!I,y=100,i=" ",Q="unknown",ah="length",S="name",e="description",D="<li>",d="</li>",k="\\|/-",q=Z.hasOwnProperty,W=i,ac=W.charAt,x=W.slice,m=[],J=m.concat,v=m.join,aa=m.push,K=m.shift,af=m.sort,N=0,M=0,s=0,C=0,ad=0,R=0,E="innerHTML",h=Y.document,O=h.createElement,B,L,F,X,H,A,P,a,u,T,ab,z;B=Y.Math;L=B.abs;F=B.random;X=Y.setTimeout;H=Y.clearTimeout;Z.node=(h.getElementById("wru")||h.body||h.documentElement);Y.setInterval(function(){N&&g(ac.call(k,M++%4))},y);undefined;Z.log=function o(aj,ai){ai?alert(aj):(typeof console!="undefined")&&console.log(aj)};y*=y;Z.random=ae;return Z}(this));
 99 |         </script>
100 |     </body>
101 | </html>
102 | 


--------------------------------------------------------------------------------
/demo/libs/ENV.js:
--------------------------------------------------------------------------------
  1 | var ENV = ENV || (function() {
  2 | 		"use strict";
  3 | 
  4 | 		var first = true;
  5 | 		var counter = 0;
  6 | 		var data;
  7 | 		var _base;
  8 | 		(_base = String.prototype).lpad || (_base.lpad = function(padding, toLength) {
  9 | 			return padding.repeat((toLength - this.length) / padding.length).concat(this);
 10 | 		});
 11 | 
 12 | 		function formatElapsed(value) {
 13 | 			var str = parseFloat(value).toFixed(2);
 14 | 			if (value > 60) {
 15 | 				minutes = Math.floor(value / 60);
 16 | 				comps = (value % 60).toFixed(2).split('.');
 17 | 				seconds = comps[0].lpad('0', 2);
 18 | 				ms = comps[1];
 19 | 				str = minutes + ":" + seconds + "." + ms;
 20 | 			}
 21 | 			return str;
 22 | 		}
 23 | 
 24 | 		function getElapsedClassName(elapsed) {
 25 | 			var className = 'Query elapsed';
 26 | 			if (elapsed >= 10.0) {
 27 | 				className += ' warn_long';
 28 | 			}
 29 | 			else if (elapsed >= 1.0) {
 30 | 				className += ' warn';
 31 | 			}
 32 | 			else {
 33 | 				className += ' short';
 34 | 			}
 35 | 			return className;
 36 | 		}
 37 | 
 38 | 		function countClassName(queries) {
 39 | 			var countClassName = "label";
 40 | 			if (queries >= 20) {
 41 | 				countClassName += " label-important";
 42 | 			}
 43 | 			else if (queries >= 10) {
 44 | 				countClassName += " label-warning";
 45 | 			}
 46 | 			else {
 47 | 				countClassName += " label-success";
 48 | 			}
 49 | 			return countClassName;
 50 | 		}
 51 | 
 52 | 		function updateQuery(object) {
 53 | 			if (!object) {
 54 | 				object = {};
 55 | 			}
 56 | 			var elapsed = Math.random() * 15;
 57 | 			object.elapsed = elapsed;
 58 | 			object.formatElapsed = formatElapsed(elapsed);
 59 | 			object.elapsedClassName = getElapsedClassName(elapsed);
 60 | 			object.query = "SELECT blah FROM something";
 61 | 			object.waiting = Math.random() < 0.5;
 62 | 			if (Math.random() < 0.2) {
 63 | 				object.query = "<IDLE> in transaction";
 64 | 			}
 65 | 			if (Math.random() < 0.1) {
 66 | 				object.query = "vacuum";
 67 | 			}
 68 | 			return object;
 69 | 		}
 70 | 
 71 | 		function cleanQuery(value) {
 72 | 			if (value) {
 73 | 				value.formatElapsed = "";
 74 | 				value.elapsedClassName = "";
 75 | 				value.query = "";
 76 | 				delete value.elapsed;
 77 | 				delete value.waiting;
 78 | 			} else {
 79 | 				return {
 80 | 					query: "***",
 81 | 					formatElapsed: "",
 82 | 					elapsedClassName: ""
 83 | 				};
 84 | 			}
 85 | 		}
 86 | 
 87 | 		function generateRow(object, keepIdentity, counter) {
 88 | 			var nbQueries = Math.floor((Math.random() * 10) + 1);
 89 | 			if (!object) {
 90 | 				object = {};
 91 | 			}
 92 | 			object.lastMutationId = counter;
 93 | 			object.nbQueries = nbQueries;
 94 | 			if (!object.lastSample) {
 95 | 				object.lastSample = {};
 96 | 			}
 97 | 			if (!object.lastSample.topFiveQueries) {
 98 | 				object.lastSample.topFiveQueries = [];
 99 | 			}
100 | 			if (keepIdentity) {
101 | 				// for Angular optimization
102 | 				if (!object.lastSample.queries) {
103 | 					object.lastSample.queries = [];
104 | 					for (var l = 0; l < 12; l++) {
105 | 						object.lastSample.queries[l] = cleanQuery();
106 | 					}
107 | 				}
108 | 				for (var j in object.lastSample.queries) {
109 | 					var value = object.lastSample.queries[j];
110 | 					if (j <= nbQueries) {
111 | 						updateQuery(value);
112 | 					} else {
113 | 						cleanQuery(value);
114 | 					}
115 | 				}
116 | 			} else {
117 | 				object.lastSample.queries = [];
118 | 				for (var j = 0; j < 12; j++) {
119 | 					if (j < nbQueries) {
120 | 						var value = updateQuery(cleanQuery());
121 | 						object.lastSample.queries.push(value);
122 | 					} else {
123 | 						object.lastSample.queries.push(cleanQuery());
124 | 					}
125 | 				}
126 | 			}
127 | 			for (var i = 0; i < 5; i++) {
128 | 				var source = object.lastSample.queries[i];
129 | 				object.lastSample.topFiveQueries[i] = source;
130 | 			}
131 | 			object.lastSample.nbQueries = nbQueries;
132 | 			object.lastSample.countClassName = countClassName(nbQueries);
133 | 			return object;
134 | 		}
135 | 
136 | 		function getData(keepIdentity) {
137 | 			var oldData = data;
138 | 			if (!keepIdentity) { // reset for each tick when !keepIdentity
139 | 				data = [];
140 | 				for (var i = 1; i <= ENV.rows; i++) {
141 | 					data.push({ dbname: 'cluster' + i, query: "", formatElapsed: "", elapsedClassName: "" });
142 | 					data.push({ dbname: 'cluster' + i + ' slave', query: "", formatElapsed: "", elapsedClassName: "" });
143 | 				}
144 | 			}
145 | 			if (!data) { // first init when keepIdentity
146 | 				data = [];
147 | 				for (var i = 1; i <= ENV.rows; i++) {
148 | 					data.push({ dbname: 'cluster' + i });
149 | 					data.push({ dbname: 'cluster' + i + ' slave' });
150 | 				}
151 | 				oldData = data;
152 | 			}
153 | 			for (var i in data) {
154 | 				var row = data[i];
155 | 				if (!keepIdentity && oldData && oldData[i]) {
156 | 					row.lastSample = oldData[i].lastSample;
157 | 				}
158 | 				if (!row.lastSample || Math.random() < ENV.mutations()) {
159 | 					counter = counter + 1;
160 | 					if (!keepIdentity) {
161 | 						delete row.lastSample;
162 | 					}
163 | 					generateRow(row, keepIdentity, counter);
164 | 				} else {
165 | 					data[i] = oldData[i];
166 | 				}
167 | 			}
168 | 			first = false;
169 | 			return {
170 | 				toArray: function() {
171 | 					return data;
172 | 				}
173 | 			};
174 | 		}
175 | 
176 | 		var mutationsValue = 0.5;
177 | 
178 | 		function mutations(value) {
179 | 			if (value) {
180 | 				mutationsValue = value;
181 | 				return mutationsValue;
182 | 			} else {
183 | 				return mutationsValue;
184 | 			}
185 | 		}
186 | 
187 | 		var body = document.querySelector('body');
188 | 		var theFirstChild = body.firstChild;
189 | 
190 | 		var sliderContainer = document.createElement( 'div' );
191 | 		sliderContainer.style.cssText = "display: flex";
192 | 		var slider = document.createElement('input');
193 | 		var text = document.createElement('label');
194 | 		text.innerHTML = 'mutations : ' + (mutationsValue * 100).toFixed(0) + '%';
195 | 		text.id = "ratioval";
196 | 		slider.setAttribute("type", "range");
197 | 		slider.style.cssText = 'margin-bottom: 10px; margin-top: 5px';
198 | 		slider.addEventListener('change', function(e) {
199 | 			ENV.mutations(e.target.value / 100);
200 | 			document.querySelector('#ratioval').innerHTML = 'mutations : ' + (ENV.mutations() * 100).toFixed(0) + '%';
201 | 		});
202 | 		sliderContainer.appendChild( text );
203 | 		sliderContainer.appendChild( slider );
204 | 		body.insertBefore( sliderContainer, theFirstChild );
205 | 
206 | 		return  {
207 | 			generateData: getData,
208 | 			rows: 50,
209 | 			timeout: 0,
210 | 			mutations: mutations
211 | 		};
212 | 	})();


--------------------------------------------------------------------------------
/Makefile:
--------------------------------------------------------------------------------
  1 | .PHONY: build duk var demo node amd mixins vitamer vitamer-qr vitamer-mixins vitamer-mixins-qr size hint clean test web preview pages dependencies
  2 | 
  3 | # repository name
  4 | REPO = dom-class
  5 | 
  6 | # make var files
  7 | VAR = src/$(REPO).js
  8 | 
  9 | # make node files
 10 | NODE = $(VAR)
 11 | 
 12 | # make amd files
 13 | AMD = $(VAR)
 14 | 
 15 | VITAMER =	src/ie-lte-9.js \
 16 | 					node_modules/dom4/build/dom4.js \
 17 | 					node_modules/document-register-element/build/document-register-element.js \
 18 | 					node_modules/restyle/build/restyle.js \
 19 | 					node_modules/es-class/build/es-class.js
 20 | 
 21 | # README constant
 22 | 
 23 | 
 24 | # default build task
 25 | build:
 26 | 	make clean
 27 | 	make var
 28 | 	make node
 29 | 	make amd
 30 | 	make mixins
 31 | 	make vitamer
 32 | 	make vitamer-qr
 33 | 	make vitamer-mixins
 34 | 	make vitamer-mixins-qr
 35 | 	make test
 36 | 	make hint
 37 | 	make size
 38 | 	make demo
 39 | 
 40 | # build generic version
 41 | var:
 42 | 	mkdir -p build
 43 | 	cat template/var.before $(VAR) template/var.after >build/no-copy.$(REPO).max.js
 44 | 	node node_modules/uglify-js/bin/uglifyjs --verbose build/no-copy.$(REPO).max.js >build/no-copy.$(REPO).js
 45 | 	cat template/license.before LICENSE.txt template/license.after build/no-copy.$(REPO).max.js >build/$(REPO).max.js
 46 | 	cat template/copyright build/no-copy.$(REPO).js >build/$(REPO).js
 47 | 	rm build/no-copy.$(REPO).max.js
 48 | 	rm build/no-copy.$(REPO).js
 49 | 	node node_modules/uglify-js/bin/uglifyjs --verbose src/Bindings.js >build/no-copy.bindings.js
 50 | 
 51 | mixins:
 52 | 	node node_modules/uglify-js/bin/uglifyjs --verbose src/Data.js >build/no-copy.data.js
 53 | 	node node_modules/uglify-js/bin/uglifyjs --verbose src/Bindings.js >build/no-copy.bindings.js
 54 | 	cat template/copyright build/no-copy.data.js >build/dom-class-mixins.js
 55 | 	echo '' >>build/dom-class-mixins.js
 56 | 	cat build/no-copy.bindings.js >>build/dom-class-mixins.js
 57 | 	rm build/no-copy*
 58 | 
 59 | vitamer:
 60 | 	mkdir -p build
 61 | 	cat template/var.before $(VAR) template/var.after >build/no-copy.$(REPO).max.js
 62 | 	node node_modules/uglify-js/bin/uglifyjs --verbose build/no-copy.$(REPO).max.js >build/no-copy.$(REPO).js
 63 | 	echo '' >build/vitamer.cr.js
 64 | 	cat $(VITAMER) build/vitamer.cr.js build/no-copy.$(REPO).js >build/vitamer.js
 65 | 	node -e 'var fs=require("fs");fs.writeFileSync("build/vitamer.cr.js",fs.readFileSync("build/vitamer.js").toString().replace(/\/\*\!.+?\*\//g,""));'
 66 | 	cat template/copyright build/vitamer.cr.js >build/vitamer.js
 67 | 	rm build/no-copy.$(REPO).max.js
 68 | 	rm build/no-copy.$(REPO).js
 69 | 	rm build/vitamer.cr.js
 70 | 
 71 | vitamer-qr:
 72 | 	mkdir -p build
 73 | 	cat template/var.before $(VAR) template/var.after >build/no-copy.$(REPO).max.js
 74 | 	node node_modules/uglify-js/bin/uglifyjs --verbose build/no-copy.$(REPO).max.js >build/no-copy.$(REPO).js
 75 | 	echo '' >build/vitamer.cr.js
 76 | 	cat $(VITAMER) node_modules/query-result/build/query-result.js build/vitamer.cr.js build/no-copy.$(REPO).js >build/vitamer-qr.js
 77 | 	node -e 'var fs=require("fs");fs.writeFileSync("build/vitamer.cr.js",fs.readFileSync("build/vitamer-qr.js").toString().replace(/\/\*\!.+?\*\//g,""));'
 78 | 	cat template/copyright build/vitamer.cr.js >build/vitamer-qr.js
 79 | 	rm build/no-copy.$(REPO).max.js
 80 | 	rm build/no-copy.$(REPO).js
 81 | 	rm build/vitamer.cr.js
 82 | 
 83 | vitamer-mixins:
 84 | 	mkdir -p build
 85 | 	cat build/vitamer.js >build/vitamer-mixins.js
 86 | 	node -e 'var fs=require("fs");fs.writeFileSync("build/no-copy.dom-class-mixins.js",fs.readFileSync("build/dom-class-mixins.js").toString().replace(/\/\*\!.+?\*\//g,""));'
 87 | 	cat build/no-copy.dom-class-mixins.js >>build/vitamer-mixins.js
 88 | 	rm build/no-copy*.js
 89 | 
 90 | vitamer-mixins-qr:
 91 | 	mkdir -p build
 92 | 	cat build/vitamer-qr.js >build/vitamer-mixins-qr.js
 93 | 	node -e 'var fs=require("fs");fs.writeFileSync("build/no-copy.dom-class-mixins.js",fs.readFileSync("build/dom-class-mixins.js").toString().replace(/\/\*\!.+?\*\//g,""));'
 94 | 	cat build/no-copy.dom-class-mixins.js >>build/vitamer-mixins-qr.js
 95 | 	rm build/no-copy*.js
 96 | 
 97 | # build node.js version
 98 | node:
 99 | 	mkdir -p build
100 | 	cat template/license.before LICENSE.txt template/license.after template/node.before $(NODE) template/node.after >build/$(REPO).node.js
101 | 
102 | # build AMD version
103 | amd:
104 | 	mkdir -p build
105 | 	cat template/amd.before $(AMD) template/amd.after >build/no-copy.$(REPO).max.amd.js
106 | 	node node_modules/uglify-js/bin/uglifyjs --verbose build/no-copy.$(REPO).max.amd.js >build/no-copy.$(REPO).amd.js
107 | 	cat template/license.before LICENSE.txt template/license.after build/no-copy.$(REPO).max.amd.js >build/$(REPO).max.amd.js
108 | 	cat template/copyright build/no-copy.$(REPO).amd.js >build/$(REPO).amd.js
109 | 	rm build/no-copy.$(REPO).max.amd.js
110 | 	rm build/no-copy.$(REPO).amd.js
111 | 
112 | # build self executable for duktape
113 | duk:
114 | 	node -e 'var fs=require("fs");\
115 |           fs.writeFileSync(\
116 |             "test/duk.js",\
117 |             fs.readFileSync("node_modules/wru/build/wru.console.js") +\
118 |             "\n" +\
119 |             fs.readFileSync("build/$(REPO).js") +\
120 |             "\n" +\
121 |             fs.readFileSync("test/$(REPO).js").toString().replace(/^[^\x00]+?\/\/:remove\s*/,"")\
122 |           );'
123 | 
124 | 
125 | size:
126 | 	wc -c build/$(REPO).max.js
127 | 	gzip -c build/$(REPO).js | wc -c
128 | 	gzip -c build/vitamer.js | wc -c
129 | 	gzip -c build/vitamer-qr.js | wc -c
130 | 
131 | # hint built file
132 | hint:
133 | 	node node_modules/jshint/bin/jshint src/$(REPO).js
134 | 	node node_modules/jshint/bin/jshint src/Data.js
135 | 	node node_modules/jshint/bin/jshint src/Bindings.js
136 | 
137 | # clean/remove build folder
138 | clean:
139 | 	rm -rf build
140 | 
141 | # tests, as usual and of course
142 | test:
143 | 	npm test
144 | 
145 | demo:
146 | 	cp build/vitamer-mixins.js demo/
147 | 
148 | # launch tiny-cdn (ctrl+click to open the page)
149 | web:
150 | 	node node_modules/tiny-cdn/tiny-cdn run
151 | 
152 | # markdown the readme and view it
153 | preview:
154 | 	node_modules/markdown/bin/md2html.js README.md >README.md.htm
155 | 	cat template/md.before README.md.htm template/md.after >README.md.html
156 | 	open README.md.html
157 | 	sleep 3
158 | 	rm README.md.htm README.md.html
159 | 
160 | pages:
161 | 	git pull --rebase
162 | 	git checkout gh-pages
163 | 	git pull --rebase
164 | 	git checkout master
165 | 	mkdir -p ~/tmp
166 | 	mkdir -p ~/tmp/$(REPO)
167 | 	cp .gitignore ~/tmp/
168 | 	cp -rf src ~/tmp/$(REPO)
169 | 	cp -rf build ~/tmp/$(REPO)
170 | 	cp -rf test ~/tmp/$(REPO)
171 | 	cp -rf demo ~/tmp/$(REPO)
172 | 	cp index.html ~/tmp/$(REPO)
173 | 	git checkout gh-pages
174 | 	cp ~/tmp/.gitignore ./
175 | 	mkdir -p test
176 | 	rm -rf test
177 | 	cp -rf ~/tmp/$(REPO) test
178 | 	cp -rf test/demo .
179 | 	rm -rf test/demo
180 | 	git add .gitignore
181 | 	git add test
182 | 	git add test/.
183 | 	git add demo
184 | 	git add demo/.
185 | 	git commit -m 'automatic test generator'
186 | 	git push
187 | 	git checkout master
188 | 	rm -r ~/tmp/$(REPO)
189 | 
190 | # modules used in this repo
191 | dependencies:
192 | 	rm -rf node_modules
193 | 	mkdir node_modules
194 | 	npm install wru
195 | 	npm install tiny-cdn
196 | 	npm install uglify-js@1
197 | 	npm install jshint
198 | 	npm install markdown
199 | 	npm install browserify
200 | 	npm install watchify
201 | 
202 | # bundle: creates the browserified version of the project as js/bundle.max.js
203 | bundle:
204 | 	sh utils/browserify.sh
205 | 
206 | # watch: update the browserified version of the project as soon as file changes
207 | watch:
208 | 	sh utils/watchify.sh
209 | 
210 | # minified: create the minifeid version of the project as js/bundle.js
211 | minified:
212 | 	make -s bundle
213 | 	sh utils/uglifyjs.sh $(LICENSE)
214 | 	make -s size
215 | 
216 | # jshint: recursively checks for javascript files inside the src folder and lint them
217 | jshint:
218 | 	sh utils/jshint.sh
219 | 


--------------------------------------------------------------------------------
/src/dom-class.js:
--------------------------------------------------------------------------------
  1 | var DOMClass = (function (g, A, O) {'use strict';
  2 |   var
  3 |     ATTACHED = 'onAttached',
  4 |     ATTACHED_CALLBACK = 'attachedCallback',
  5 |     CHANGED = 'onChanged',
  6 |     CHANGED_CALLBACK = 'attributeChangedCallback',
  7 |     CONSTRUCTOR = 'constructor',
  8 |     CONSTRUCTOR_CALLBACK = 'createdCallback',
  9 |     CSS = 'css',
 10 |     STYLE = '<style>',
 11 |     STYLESHEET = 'stylesheet',
 12 |     DETACHED = 'onDetached',
 13 |     DETACHED_CALLBAK = 'detachedCallback',
 14 |     EXTENDS = 'extends',
 15 |     NAME = 'name',
 16 |     document = g.document,
 17 |     html = document.documentElement,
 18 |     hOP = O.hasOwnProperty,
 19 |     empty = A.prototype,
 20 |     copyOwn = function (source, target) {
 21 |       for (var k, p = gOK(source), i = p.length; i--;) {
 22 |         k = p[i];
 23 |         if (ignore.indexOf(k) < 0 && !hOP.call(target, k)) {
 24 |           dP(target, k, gOPD(source, k));
 25 |         }
 26 |       }
 27 |     },
 28 |     dP = O.defineProperty,
 29 |     gOPD = O.getOwnPropertyDescriptor,
 30 |     gOPN = O.getOwnPropertyNames || O.keys || function (o) {
 31 |       var a = [], k;
 32 |       for (k in o) if (hOP.call(o, k)) a.push(k);
 33 |       return a;
 34 |     },
 35 |     gOPS = O.getOwnPropertySymbols || function () {
 36 |       return empty;
 37 |     },
 38 |     getHTMLConstructor = function (name) {
 39 |       return g['HTML' + name + 'Element'];
 40 |     },
 41 |     gOK = function (obj) {
 42 |       return gOPS(obj).concat(gOPN(obj));
 43 |     },
 44 |     grantArguments = function (el, args) {
 45 |       if (!args.length) {
 46 |         var attr = el.getAttribute('data-arguments');
 47 |         if (attr) {
 48 |           args = attr.charAt(0) === '[' ?
 49 |             JSON.parse(attr) :
 50 |             attr.split(/\s*,\s*/);
 51 |         }
 52 |       }
 53 |       return args;
 54 |     },
 55 |     ignore = gOK(function () {}),
 56 |     setIfThere = function  (where, what, target, alias) {
 57 |       if (hOP.call(where, what)) {
 58 |         target[alias] = where[what];
 59 |       }
 60 |     },
 61 |     // WUT? https://gist.github.com/WebReflection/4327762cb87a8c634a29
 62 |     slice = function slice() {
 63 |       for (var
 64 |         o = +this,
 65 |         i = o,
 66 |         l = arguments.length,
 67 |         n = l - o,
 68 |         a = new A(n < 0 ? 0 : n);
 69 |         i < l; i++
 70 |       ) a[i - o] = arguments[i];
 71 |       return a;
 72 |     },
 73 |     uid = function (name) {
 74 |       return name + '-i-' + (
 75 |         hOP.call(uids, name) ? ++uids[name] : (uids[name] = 0)
 76 |       );
 77 |     },
 78 |     lazyStyle = function (el, key, uniqueClassId) {
 79 |       var style;
 80 |       el.setAttribute('dom-class-uid', uniqueClassId);
 81 |       dP(el, CSS, {
 82 |         configurable: true,
 83 |         get: function () {
 84 |           return style || (style = restyle(
 85 |             key + '[dom-class-uid="' + uniqueClassId + '"]', {}
 86 |           ));
 87 |         },
 88 |         set: function (info) {
 89 |           el[CSS].replace(info);
 90 |         }
 91 |       });
 92 |     },
 93 |     loadStyle = function (prefix, source) {
 94 |       var
 95 |         xhr = new XMLHttpRequest(),
 96 |         where = document.body ||
 97 |                 document.head ||
 98 |                 html,
 99 |         css,
100 |         style
101 |       ;
102 |       try {
103 |         xhr.open('GET', source, false);
104 |         xhr.send(null);
105 |         css = xhr.responseText;
106 |         style = where.insertBefore(
107 |           document.createElement('style'),
108 |           where.lastChild
109 |         );
110 |         style.type = 'text/css';
111 |         if ('styleSheet' in style) {
112 |           style.styleSheet.cssText = css;
113 |         } else {
114 |           style.appendChild(document.createTextNode(css));
115 |         }
116 |       } catch(deprecated) {
117 |         style = document.createElement('link');
118 |         style.href  = source;
119 |         style.rel   = 'stylesheet';
120 |         style.type  = 'text/css';
121 |         where.insertBefore(style, where.lastChild);
122 |       }
123 |       return html.offsetWidth;
124 |     },
125 |     // preFix = function (prefix, css) {
126 |     //   var
127 |     //     _ = function (selectors) {
128 |     //       var s = selectors.split(/\s*,\s*/), i = s.length;
129 |     //       while (i--) s[i] = prefix + ' ' + trim.call(s[i]);
130 |     //       return s.join(',');
131 |     //     },
132 |     //     i = 0,
133 |     //     length = css.length,
134 |     //     out = [],
135 |     //     open, close
136 |     //   ;
137 |     //   while (i < length) {
138 |     //     open = css.indexOf('{', i);
139 |     //     if (open < 0) break;
140 |     //     close = css.indexOf('}', open) + 1;
141 |     //     out.push(_(css.slice(i, open)), css.slice(open, close));
142 |     //     i = close;
143 |     //   }
144 |     //   return out.join('');
145 |     // },
146 |     // trim = ''.trim || function () {
147 |     //   return this.replace(/^\s+|\s+/g, '');
148 |     // },
149 |     uids = {},
150 |     i = 0
151 |   ;
152 |   return function DOMClass(description) {
153 |     var
154 |       CustomElement = function CustomElement() {
155 |         if (hasStyleSheet) {
156 |           hasStyleSheet = false;
157 |           loadStyle(key, styleSheet);
158 |         }
159 |         args = slice.apply(0, arguments);
160 |         return new Element();
161 |       },
162 |       args = empty,
163 |       el = {},
164 |       css = hOP.call(description, CSS),
165 |       init = hOP.call(description, CONSTRUCTOR),
166 |       hasStyleSheet = hOP.call(description, STYLESHEET),
167 |       styleSheet = hasStyleSheet && description[STYLESHEET],
168 |       createdCallback = init && description[CONSTRUCTOR],
169 |       Element,
170 |       constructor,
171 |       key, proto, cssName, nodeName
172 |     ;
173 |     setIfThere(description, ATTACHED, el, ATTACHED_CALLBACK);
174 |     setIfThere(description, CHANGED, el, CHANGED_CALLBACK);
175 |     setIfThere(description, DETACHED, el, DETACHED_CALLBAK);
176 |     for (key in description) {
177 |       if (hOP.call(description, key)) {
178 |         switch (key) {
179 |           case ATTACHED:
180 |           case CHANGED:
181 |           case CONSTRUCTOR:
182 |           case DETACHED:
183 |           case EXTENDS:
184 |           case NAME:
185 |           case CSS:
186 |           case STYLESHEET:
187 |             break;
188 |           default:
189 |             el[key] = description[key];
190 |             break;
191 |         }
192 |       }
193 |     }
194 |     el[EXTENDS] = hOP.call(description, EXTENDS) ?
195 |       description[EXTENDS].prototype :
196 |       HTMLElement.prototype
197 |     ;
198 |     if (el[EXTENDS] instanceof HTMLElement) {
199 |       // dumbest thing I've possibly ever written, right here!
200 |       //  Object.getOwnPropertyNames(this).filter((k) => {return k.slice(0, 4)==='HTML'}).map((k)=>{return k.slice(4, -7)}).sort();
201 |       //  ["", "AllCol", "Anchor", "Applet", "Area", "Audio", "BR", "Base", "Body", "Button", "Canvas", "Col", "Content",
202 |       //  "D", "DList", "DataList", "Details", "Dialog", "Directory", "Div", "Embed", "FieldSet", "Font", "Form", "FormControlsCol",
203 |       //  "Frame", "FrameSet", "HR", "Head", "Heading", "Html", "IFrame", "Image", "Input", "Keygen", "LI", "Label", "Legend",
204 |       //  "Link", "Map", "Marquee", "Media", "Menu", "Meta", "Meter", "Mod", "OList", "Object", "OptGroup", "Option", "OptionsCol",
205 |       //  "Output", "Paragraph", "Param", "Picture", "Pre", "Progress", "Quote", "Script", "Select", "Shadow", "Source", "Span",
206 |       //  "Style", "Table", "TableCaption", "TableCell", "TableCol", "TableRow", "TableSection", "Template", "TextArea", "Title",
207 |       //  "Track", "UList", "Unknown", "Video"]
208 |       // but I'll enable only most common one ... please file a bug if you need others
209 |       // also, if you know a way to retrieve a nodeName via its constructor please shout it to me!
210 |       switch (description[EXTENDS]) {
211 |         case getHTMLConstructor('Anchor'): nodeName = 'a'; break;
212 |         case getHTMLConstructor('Audio'): nodeName = 'audio'; break;
213 |         case getHTMLConstructor('BR'): nodeName = 'br'; break;
214 |         case getHTMLConstructor('Body'): nodeName = 'body'; break;
215 |         case getHTMLConstructor('Button'): nodeName = 'button'; break;
216 |         case getHTMLConstructor('Canvas'): nodeName = 'canvas'; break;
217 |         case getHTMLConstructor('Col'): nodeName = 'col'; break;
218 |         case getHTMLConstructor('DataList'): nodeName = 'dl'; break;
219 |         case getHTMLConstructor('Div'): nodeName = 'div'; break;
220 |         case getHTMLConstructor('Form'): nodeName = 'form'; break;
221 |         case getHTMLConstructor('HR'): nodeName = 'hr'; break;
222 |         case getHTMLConstructor('Head'): nodeName = 'head'; break;
223 |         case getHTMLConstructor('IFrame'): nodeName = 'iframe'; break;
224 |         case getHTMLConstructor('Image'): nodeName = 'img'; break;
225 |         case getHTMLConstructor('Input'): nodeName = 'input'; break;
226 |         case getHTMLConstructor('LI'): nodeName = 'li'; break;
227 |         case getHTMLConstructor('Label'): nodeName = 'label'; break;
228 |         case getHTMLConstructor('Legend'): nodeName = 'legend'; break;
229 |         case getHTMLConstructor('Link'): nodeName = 'link'; break;
230 |         case getHTMLConstructor('Menu'): nodeName = 'menu'; break;
231 |         case getHTMLConstructor('OList'): nodeName = 'ol'; break;
232 |         case getHTMLConstructor('Option'): nodeName = 'option'; break;
233 |         case getHTMLConstructor('Paragraph'): nodeName = 'p'; break;
234 |         case getHTMLConstructor('Progress'): nodeName = 'progress'; break;
235 |         case getHTMLConstructor('Quote'): nodeName = 'quote'; break;
236 |         case getHTMLConstructor('Select'): nodeName = 'select'; break;
237 |         case getHTMLConstructor('Span'): nodeName = 'span'; break;
238 |         case getHTMLConstructor('Style'): nodeName = 'style'; break;
239 |         case getHTMLConstructor('Table'): nodeName = 'table'; break;
240 |         case getHTMLConstructor('TableCaption'): nodeName = 'caption'; break;
241 |         case getHTMLConstructor('TableCell'): nodeName = 'td'; break;
242 |         case getHTMLConstructor('TableCol'): nodeName = 'colgroup'; break;
243 |         case getHTMLConstructor('TableRow'): nodeName = 'tr'; break;
244 |         case getHTMLConstructor('TableSection'): nodeName = 'tbody'; break;
245 |         case getHTMLConstructor('Table'): nodeName = 'table'; break;
246 |         case getHTMLConstructor('Table'): nodeName = 'table'; break;
247 |         case getHTMLConstructor('TextArea'): nodeName = 'textarea'; break;
248 |         case getHTMLConstructor('Track'): nodeName = 'track'; break;
249 |         case getHTMLConstructor('UList'): nodeName = 'ul'; break;
250 |         case getHTMLConstructor('Video'): nodeName = 'video'; break;
251 |         // GZIP ALL THE THINGS!
252 |       }
253 |     }
254 |     key = hOP.call(description, NAME) ?
255 |       description[NAME] : ('x-dom-class-' + i++);
256 |     if (css) {
257 |       cssName = nodeName ? (nodeName + '[is="' + key + '"]') : key;
258 |       el[STYLE] = restyle(cssName, description[CSS]);
259 |     }
260 |     el[CONSTRUCTOR_CALLBACK] = function () {
261 |       var a = grantArguments(this, args);
262 |       args = empty;
263 |       constructor.apply(this, a);
264 |       if (css) lazyStyle(this, cssName, uid(key));
265 |       if (init) createdCallback.apply(this, a);
266 |     };
267 |     constructor = new Class(el);
268 |     copyOwn(constructor, CustomElement);
269 |     proto = {prototype: constructor.prototype};
270 |     // if we are extending an HTML element
271 |     // we should retrieve a name and an `is` property
272 |     if (nodeName) proto[EXTENDS] = nodeName;
273 |     Element = document.registerElement(key, proto);
274 |     CustomElement.prototype = Element.prototype;
275 |     dP(Element.prototype, CONSTRUCTOR, {value: CustomElement});
276 |     return CustomElement;
277 |   };
278 | }((this && this.window) || global, Array, Object));


--------------------------------------------------------------------------------
/test/vitamer-mixins.js:
--------------------------------------------------------------------------------
  1 | //remove:
  2 | var DOMClass = require('../build/dom-class.node.js');
  3 | //:remove
  4 | 
  5 | wru.test([
  6 |   {
  7 |     name: "main",
  8 |     test: function () {
  9 |       wru.assert(typeof DOMClass == "function");
 10 |       // wru.assert(0);
 11 |     }
 12 |   }, {
 13 |     name: 'basics',
 14 |     test: function () {
 15 |       var XDomClass0 = new DOMClass({
 16 |         constructor: function () {
 17 |           this.setAttribute('here', 'I am');
 18 |         }
 19 |       });
 20 |       var xdc0 = document.body.appendChild(new XDomClass0);
 21 |       setTimeout(wru.async(function () {
 22 |         wru.assert('constructor invoked', xdc0.getAttribute('here') === 'I am');
 23 |         wru.assert('right name', xdc0.nodeName === 'X-DOM-CLASS-0');
 24 |       }), 100);
 25 |     }
 26 |   }, {
 27 |     name: 'onAttached',
 28 |     test: function () {
 29 |       var XDomClass1 = new DOMClass({
 30 |         onAttached: wru.async(function () {
 31 |           wru.assert('OK');
 32 |         })
 33 |       });
 34 |       document.body.appendChild(new XDomClass1);
 35 |     }
 36 |   }, {
 37 |     name: 'onDetached',
 38 |     test: function () {
 39 |       var i =  0;
 40 |       var XDomClass2 = new DOMClass({
 41 |         onAttached: function () {
 42 |           i++;
 43 |         },
 44 |         onDetached: wru.async(function () {
 45 |           wru.assert(i === 1);
 46 |         })
 47 |       });
 48 |       document.body.appendChild(new XDomClass2);
 49 |       document.body.removeChild(document.body.lastChild);
 50 |     }
 51 |   }, {
 52 |     name: 'onChanged',
 53 |     test: function () {
 54 |       var XDomClass3 = new DOMClass({
 55 |         onChanged: wru.async(function (name, previously, value) {
 56 |           wru.assert('name is correct', name === 'all');
 57 |           wru.assert('previously not there', !previously);
 58 |           wru.assert('value is correct', value === 'good');
 59 |         })
 60 |       });
 61 |       document.body.appendChild(new XDomClass3).setAttribute('all', 'good');
 62 |     }
 63 |   }, {
 64 |     name: 'name',
 65 |     test: function () {
 66 |       var XNamed = new DOMClass({
 67 |         name: 'x-named',
 68 |         constructor: wru.async(function () {
 69 |           wru.assert(this.nodeName.toLowerCase() === 'x-named');
 70 |         })
 71 |       });
 72 |       document.body.appendChild(new XNamed);
 73 |     }
 74 |   }, {
 75 |     name: 'lazily implemented',
 76 |     test: function () {
 77 |       var div = document.body.appendChild(document.createElement('div'));
 78 |       var constructor = wru.async(function () {
 79 |         wru.assert(this.textContent === 'yo');
 80 |         this.parentNode.removeChild(this);
 81 |       });
 82 |       div.innerHTML = '<x-da-fuq>yo</x-da-fuq>';
 83 |       setTimeout(function () {
 84 |         var XDaFuq = new DOMClass({
 85 |           name: 'x-da-fuq',
 86 |           constructor: constructor
 87 |         });
 88 |       }, 100);
 89 |     }
 90 |   }, {
 91 |     name: 'css',
 92 |     test: function () {
 93 |       var XStyled = new DOMClass({
 94 |         name: 'x-styled',
 95 |         css: {
 96 |           'x-styled': {cursor: 'pointer'},
 97 |           'span': {fontSize: 37}
 98 |         },
 99 |         onAttached: wru.async(function () {
100 |           wru.assert('main style is OK', getComputedStyle(this, null).getPropertyValue('cursor') === 'pointer');
101 |           wru.assert('sub style is OK', getComputedStyle(this.firstChild, null).getPropertyValue('font-size') === '37px');
102 |           this.parentNode.removeChild(this);
103 |         })
104 |       });
105 |       var div = document.body.appendChild(document.createElement('div'));
106 |       div.innerHTML = '<x-styled><span>yo</span></x-styled>';
107 |     }
108 |   }, {
109 |     name: 'this.css',
110 |     test: function () {
111 |       var XReStyled = new DOMClass({
112 |         name: 'x-re-styled',
113 |         css: {
114 |           '': {cursor: 'pointer'},
115 |           'span': {fontSize: 37}
116 |         },
117 |         constructor: function () {
118 |           this.css.overwrite({
119 |             span: {fontSize: 27}
120 |           });
121 |         },
122 |         onAttached: wru.async(function () {
123 |           wru.assert('main style is OK', getComputedStyle(this, null).getPropertyValue('cursor') === 'pointer');
124 |           wru.assert('sub style is OK', getComputedStyle(this.firstChild, null).getPropertyValue('font-size') === '27px');
125 |           this.parentNode.removeChild(this);
126 |         })
127 |       });
128 |       var div = document.body.appendChild(document.createElement('div'));
129 |       div.innerHTML = '<x-re-styled><span>yo</span></x-re-styled>';
130 |     }
131 |   }, {
132 |     name: 'arguments are passed',
133 |     test: function () {
134 |       var random = Math.random();
135 |       var XArgs = new DOMClass({
136 |         constructor: wru.async(function () {
137 |           wru.assert(arguments[0] === random);
138 |         })
139 |       });
140 |       document.body.appendChild(new XArgs(random));
141 |     }
142 |   }, {
143 |     name: 'arguments are passed via DOM through JSON',
144 |     test: function () {
145 |       var random = Math.random();
146 |       var XArgs = new DOMClass({
147 |         name: 'x-with-args',
148 |         constructor: wru.async(function () {
149 |           wru.assert(arguments[0] === random);
150 |         })
151 |       });
152 |       var div = document.body.appendChild(document.createElement('div'));
153 |       div.innerHTML = '<x-with-args data-arguments="[' + random + ']"></x-with-args>';
154 |     }
155 |   }, {
156 |     name: 'arguments are passed via DOM through split',
157 |     test: function () {
158 |       var XArgs = new DOMClass({
159 |         name: 'x-with-split-args',
160 |         constructor: wru.async(function () {
161 |           wru.assert(arguments[0] === 'a' && arguments[1] === '2');
162 |         })
163 |       });
164 |       var div = document.body.appendChild(document.createElement('div'));
165 |       div.innerHTML = '<x-with-split-args data-arguments="a,2"></x-with-split-args>';
166 |     }
167 |   }, {
168 |     name: 'instanceof',
169 |     test: function () {
170 |       var XWCon = new DOMClass({
171 |         constructor: function () {}
172 |       });
173 |       var XWOCon = new DOMClass({});
174 |       wru.assert('with constructor',
175 |         new XWCon instanceof XWCon ||
176 |         // IE9
177 |         new XWCon instanceof HTMLUnknownElement);
178 |       wru.assert('without constructor',
179 |         new XWOCon instanceof XWOCon ||
180 |         // IE9
181 |         new XWCon instanceof HTMLUnknownElement);
182 |     }
183 |   }, {
184 |     name: 'constructor is the correct one',
185 |     test: function() {
186 |       var X = new DOMClass({
187 |         constructor: wru.async(function () {
188 |           var isntIt = this.constructor === X;
189 |           if (!isntIt) {
190 |             delete this.constructor;
191 |             this.constructor = X;
192 |             Object.defineProperty(this, 'constructor', {value: X});
193 |             isntIt = this.constructor === X;
194 |             if (isntIt) {
195 |               throw new Error('unexpected unfixed problem');
196 |             } else {
197 |               // expected epic fail in phantom JS
198 |               isntIt = true;
199 |             }
200 |           }
201 |           wru.assert(isntIt);
202 |         })
203 |       });
204 |       document.body.appendChild(new X);
205 |     }
206 |   }, {
207 |     name: 'x-clock',
208 |     test: function () {
209 |       var XClock = new DOMClass({
210 |         static: {
211 |           updateClock: function (xClock) {
212 |             var
213 |               now = new Date(),
214 |               hour = xClock.getAttribute("hours") || now.getHours(),
215 |               minute = xClock.getAttribute("minutes") || now.getMinutes(),
216 |               second = xClock.getAttribute("seconds") || now.getSeconds(),
217 |               secondAngle = second * 6,
218 |               minuteAngle = minute * 6 + secondAngle / 60,
219 |               hourAngle = ( ( hour % 12 ) / 12 ) * 360 + 90 + minute / 12,
220 |               rotate = function (deg) {
221 |                 return "rotate(" + deg + "deg)";
222 |               }
223 |             ;
224 |             xClock.css.overwrite({
225 |               '.clock-face-hour': {
226 |                 transform: rotate(hourAngle)
227 |               },
228 |               '.clock-face-minute': {
229 |                 transform: rotate(minuteAngle)
230 |               },
231 |               '.clock-face-second': {
232 |                 transform: rotate(secondAngle)
233 |               }
234 |             });
235 |           }
236 |         },
237 |         constructor: wru.async(function () {
238 |           this.innerHTML =
239 |             "<div class='clock-face-container'>" +
240 |               "<div class='clock-face-hour'></div>" +
241 |               "<div class='clock-face-minute'></div>" +
242 |               "<div class='clock-face-second'></div>" +
243 |             "</div>";
244 |           this.time = setInterval(XClock.updateClock, 1000, this);
245 |           XClock.updateClock(this);
246 |           wru.assert('OK');
247 |         }),
248 |         css: {
249 |           '': {
250 |             display: 'block',
251 |             width: 100,
252 |             height: 100,
253 |             position: 'relative',
254 |             border: '6px solid black',
255 |             'border-radius': '50%'
256 |           },
257 |           '.clock-face-container::after': {
258 |             position: 'absolute',
259 |             top: '50%',
260 |             left: '50%',
261 |             width: 12,
262 |             height: 12,
263 |             margin: '-6px 0 0 -6px',
264 |             background: 'black',
265 |             'border-radius': 6,
266 |             content: '""',
267 |             display: 'block'
268 |           },
269 |           '.clock-face-container > div': {
270 |             position: 'absolute',
271 |             top: '50%',
272 |             left: '50%',
273 |             background: 'black'
274 |           },
275 |           '.clock-face-hour': {
276 |             margin: '-4px 0 -4px -25%',
277 |             padding: '4px 0 4px 25%',
278 |             'transform-origin': '100% 50%',
279 |             'border-radius': '4px 0 0 4px'
280 |           },
281 |           '.clock-face-minute': {
282 |             margin: '-40% -3px 0',
283 |             padding: '40% 3px 0',
284 |             'transform-origin': '50% 100%',
285 |             'border-radius': '3px 3px 0 0'
286 |           },
287 |           '.clock-face-second': {
288 |             margin: '-40% -1px 0 0',
289 |             padding: '40% 1px 0',
290 |             'transform-origin': '50% 100%'
291 |           }
292 |         }
293 |       });
294 |       document.body.insertBefore(
295 |         new XClock,
296 |         document.body.firstChild
297 |       );
298 |     }
299 |   }, {
300 |     name: 'bindings as mixin',
301 |     test: function () {
302 |       var failures = [];
303 |       var done = wru.async(function () {
304 |         if (failures.length) {
305 |           wru.assert([''].concat(failures, '').join('\n'), false);
306 |         } else {
307 |           wru.assert('OK');
308 |         }
309 |       });
310 |       function verify() {
311 |         var value = ent.bindings.owner;
312 |         if (!value) {
313 |           failures.push('bindings.owner');
314 |         } else if (value != ent.firstChild.getAttribute('custom')) {
315 |           failures.push('should be ' + value + ' but firstChild.getAttribute is ' + ent.firstChild.getAttribute('custom'));
316 |         } else if (value != ent.lastChild.value) {
317 |           failures.push('should be ' + value + ' but lastChild.value is ' + ent.lastChild.value);
318 |         } else if (value != ent.firstChild.childNodes[1].textContent) {
319 |           failures.push('should be ' + value + ' but childNodes[1].textContent is ' + ent.lastChild.value);
320 |         }
321 |       }
322 |       var EditableNameTag = DOMClass({
323 |         'with': DOMClass.bindings,
324 |         name: 'editable-name-tag',
325 |         template: '<p data-bind="custom:owner">'+
326 |                     'This is a <strong>{{owner}}</strong>\'s editable-name-tag.' +
327 |                   '</p>' +
328 |                   '<input data-bind="value:owner" placeholder="Your name here...">',
329 |         bindings: {owner: "Daniel"}
330 |       });
331 |       window.ent = document.body.insertBefore(
332 |         new EditableNameTag,
333 |         document.body.firstChild
334 |       );
335 |       setTimeout(function () {
336 |         ent.bindings.owner = 'Andrea';
337 |         setTimeout(function () {
338 |           verify();
339 |           ent.firstChild.setAttribute('custom', 'WebReflection');
340 |           setTimeout(function () {
341 |             verify();
342 |             ent.lastChild.value = 'Daniel';
343 |             setTimeout(function () {
344 |               verify();
345 |               done();
346 |             }, 350);
347 |           }, 350);
348 |         }, 350);
349 |       }, 350);
350 |     }
351 |   }, {
352 |     name: 'temperature two way',
353 |     test: function () {
354 |       var Celsius2Fahrenheit = DOMClass({
355 |         'with': DOMClass.bindings,
356 |         name: 'celsius-2-Fahrenheit',
357 |         css: {'input': {
358 |           maxWidth: 64,
359 |           border: {width: 1, color: 'silver'}
360 |         }},
361 |         template: '<div>' +
362 |                     '<input name="celsius" type="number" data-bind="value:celsius">°C' +
363 |                     '<span> ⇄ </span>' +
364 |                     '<input name="fahrenheit" type="number" data-bind="value:fahrenheit">°F' +
365 |                   '</div>',
366 |         bindings: {
367 |           celsius: 0,
368 |           fahrenheit: 0
369 |         },
370 |         constructor: function () {
371 |           this.query('[name="celsius"]').addEventListener('input', this);
372 |           this.query('[name="fahrenheit"]').addEventListener('input', this);
373 |         },
374 |         updateTemperature: function (which, temp) {
375 |           if (which in this.bindings) {
376 |             this.bindings[which] = temp;
377 |             this.query('[name="' + which + '"]').dispatchEvent(
378 |               new CustomEvent('input')
379 |             ); 
380 |           } else {
381 |             alert('dunno how to convert ' + which);
382 |           }
383 |         },
384 |         // using the class itself to handle events? Why not!
385 |         handleEvent: function (e) {
386 |           var el = e.currentTarget;
387 |           if (e.type === 'input') {
388 |             switch (el.name) {
389 |               case 'celsius':
390 |                 this.bindings.fahrenheit =
391 |                   9/5 * parseFloat(el.value) + 32;
392 |                 break;
393 |               case 'fahrenheit':
394 |                 this.bindings.celsius =
395 |                   5/9 * (parseFloat(el.value) - 32)
396 |                 break;
397 |             }
398 |           }
399 |         }
400 |       });
401 | 
402 |       window.c2f = document.body.insertBefore(
403 |         new Celsius2Fahrenheit,
404 |         document.body.firstChild
405 |       );
406 | 
407 |       c2f.updateTemperature('celsius', 30);
408 | 
409 |     }
410 |   }, {
411 |     name: 'sum between inputs',
412 |     test: function () {
413 |       var SumOfTwo = DOMClass({
414 |         'with': DOMClass.bindings,
415 |         template: '<input data-bind="value:a" type="number">' +
416 |                   '<input data-bind="value:b" type="number">' +
417 |                   '<input data-bind="value:sum(a, b)">' +
418 |                   '<br/>' +
419 |                   'The sum of {{a}} + {{b}} is equal to {{sum(a, b)}}',
420 |         bindings: {a: 0, b: 0, sum: function (a, b) {
421 |           var result = parseFloat(a) + parseFloat(b);
422 |           return isNaN(result) ? '?' : result;
423 |         }},
424 |         dispatchBindings: true
425 |       });
426 |       window.sot = document.body.insertBefore(
427 |         new SumOfTwo,
428 |         document.body.firstChild
429 |       );
430 |       sot.addEventListener('bindingChanged', function (e) {
431 |         if (window.console) console.log(e.detail);
432 |       });
433 |     }
434 |   }, {
435 |     name: 'stylesheet attribute',
436 |     test: function () {
437 |       if (window.__PHANTOMJS__) return;
438 |       var StyleSheet = DOMClass({
439 |         name: 'runtime-style-sheet',
440 |         stylesheet: 'test/runtime-style-sheet.css',
441 |         template: 'Hello lazy blocking runtime style!'
442 |       });
443 |       var el = document.body.appendChild(new StyleSheet);
444 |       wru.assert('it should have 6px as margin-left',
445 |         getComputedStyle(el, null).getPropertyValue('margin-left') === '6px');
446 |       // document.body.removeChild(el);
447 |     }
448 |   }, {
449 |     name: 'styling using extends',
450 |     test: function () {
451 |       var XButton = new DOMClass({
452 |         extends: HTMLButtonElement,
453 |         name: 'x-button',
454 |         css: {
455 |           '': {
456 |             border: '4px solid black'
457 |           }
458 |         }
459 |       });
460 |       var xb = document.body.appendChild(new XButton);
461 |       setTimeout(wru.async(function () {
462 |         wru.assert('it should have 4px border',
463 |           getComputedStyle(xb, null).getPropertyValue('border-width') === '4px');
464 |         document.body.removeChild(xb);
465 |       }), 200);
466 |     }
467 |   }
468 | ]);


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | dom-class [![build status](https://secure.travis-ci.org/WebReflection/dom-class.svg)](http://travis-ci.org/WebReflection/dom-class)
  2 | =========
  3 | 
  4 | Built on top of [es-class](https://github.com/WebReflection/es-class#es-class-), and integrating handy [restyle](https://github.com/WebReflection/restyle#restyle) features, `DOMClass` is a lightweight, cross browser, simplification of [WebComponents](http://www.w3.org/standards/techs/components#w3c_all).
  5 | 
  6 | 
  7 | Please read the [related blog post](https://www.webreflection.co.uk/blog/2015/09/17/simplified-web-components-via-dom-class) to know extra details about this project.
  8 | 
  9 | 
 10 | ### Demo
 11 | In case of doubts, some demo could quickly clarify DOMClass potentials so here they are:
 12 | 
 13 |   * the (in)famouse [DBMonster](http://webreflection.github.io/dom-class/demo/dbmonster.html) benchmark, a [component](https://github.com/WebReflection/dom-class/blob/master/demo/db-monster.js) split in rows and cells that performs like its pure DOM counter part
 14 |   * few [classic basic components](http://webreflection.github.io/dom-class/demo/) for forms and playful interaction, or runtime creation
 15 |   * a one to one [comparison VS Knockout JS](http://webreflection.github.io/dom-class/demo/domclass-vs-knockoutjs/), showing main differences between these two approaches. TL;DR is that `DOMClass` doesn't use `eval` or `Function` and it's based on DRY components rather than magic HTML parsing (which is not necessarily a bad thing but it's surely a different paradigm)
 16 | 
 17 | Finally a quoted comment from [DOMClass.bindings Mixin VS Performance](https://www.webreflection.co.uk/blog/2015/09/21/dom-class-bindings-vs-performance) post
 18 | 
 19 | > This is seriously cool ... so much functionality via so little framework code.It begs the question ... "What the heck are those other frameworks doing that involves so much code?". I especially like that it is based on the existing web platform as opposed to what is promised in V.Next (i.e. ES5,6, etc, etc). Outstanding work.
 20 | 
 21 | 
 22 | ### How To
 23 | All [es-class features](https://github.com/WebReflection/es-class#features-example) are included, and the `constructor` will be automatically used once  the component has been initialized.
 24 | 
 25 | ```js
 26 | var MyComponent = new DOMClass({
 27 |   constructor: function () {
 28 |     this.textContent = 'Hello World!';
 29 |   }
 30 | });
 31 | 
 32 | document.body.append(new MyComponent);
 33 | ```
 34 | 
 35 | While by default new components will be created name-conflict free, it is possible to specify the desired node name via the `name` property.
 36 | 
 37 | ```js
 38 | var XAMe = new DOMClass({
 39 |   name: 'x-a-me',
 40 |   constructor: function () {
 41 |     console.log(this.textContent);
 42 |   }
 43 | });
 44 | 
 45 | // we can create via new DOMClass
 46 | // or we can use the name
 47 | document.body.innerHTML = '<x-a-me>Hello Again!</x-a-me>';
 48 | ```
 49 | 
 50 | ### Extending natives
 51 | Since version `0.4.0` it is also possible to extend directly extend native and all we need is basically the following:
 52 | ```js
 53 | var MyInput = DOMClass({
 54 |   extends: HTMLInputElement,
 55 |   // just for demo purpose
 56 |   constructor: function (value) {
 57 |     this.value = value;
 58 |   }
 59 | });
 60 | 
 61 | document.query('form').appendChild(
 62 |   new MyInput('hello')
 63 | );
 64 | ```
 65 | If a native constructor is used, and it's an instance of `HTMLElement`, there's no need to use the `is` property, stick with a name and `DOMClass` will take care of the rest.
 66 | 
 67 | 
 68 | ### DOMClass.bindings Mixin
 69 | Both one and two way bindings are supported, thanks to [the bindings mixin](https://github.com/WebReflection/dom-class/blob/master/src/Bindings.js). It is also possible to update partial text or html content using a different amount of curly brackets.
 70 | 
 71 | ```js
 72 | // bringing bindings in
 73 | var EasyBindings = DOMClass({
 74 |   // bring bindings in as a mixin
 75 |   with: [DOMClass.bindings],
 76 |   // bindings will look for an optional template
 77 |   template: `
 78 |         <div>
 79 |           This will be test: {{textContent}}.<br/>
 80 |           This will be html: {{{htmlContent}}}<br/>
 81 |           While this will call upper(textContent) each time textContent changes:
 82 |           {{upper(textContent)}}<br/>
 83 |           And this will call upper(htmlContent) each time it changes:
 84 |           {{{upper(htmlContent)}}}
 85 |         </div>
 86 |   `,
 87 |   // and an optional bindings property
 88 |   bindings: {
 89 |     // we are binding textContent and htmlContent
 90 |     // we can optionally provide their defaults
 91 |     textContent: 'just <strong>text</strong>, really',
 92 |     htmlContent: 'so <strong>bring it on</strong>, html!',
 93 |     // we are also binding a method invocation
 94 |     // that will update its bound "space" when one of its
 95 |     // parameters changes
 96 |     upper: function (textOrHTML) {
 97 |       return textOrHTML.toUpperCase();
 98 |     }
 99 |     // we could add any extra property or method, even if not bound
100 |   }
101 | });
102 | ```
103 | In order to avoid any sort of conflicts with the component itself, the bindings mixin creates per each new instance a `bindings` property
104 | that will inherit from the one defined in the class so that defaults and methods can simply be shared.
105 | 
106 | We can use this property to update the text just like this:
107 | ```js
108 | var eb = document.body.appendChild(
109 |   new EasyBindings
110 | );
111 | 
112 | // how can we change those properties?
113 | eb.bindings.textContent = 'is that it?';
114 | // it will update only yhe text part of the node
115 | 
116 | // let's update the html too
117 | eb.bindings.htmlContent = 'but this is <strong>awesome</strong>!';
118 | ```
119 | The bindings property is not directly aware of its owner, which is in the previous example the `new EasyBindings` variable called `eb`.
120 | This peculiarity ensures that data bindings will be data related, and never directly UI one.
121 | It separates concerns between the component itself and the kind of data it needs to take care of.
122 | 
123 | 
124 | ### Two way attributes binding
125 | We can update some content, but we cannot be updated if the content is manually changed. This is where two way bindings become handy: inputs, selects, nodes and classes, others ... these can be all managed via this mixin.
126 | 
127 | Inspired by [KnockoutJS data-bind syntax](http://knockoutjs.com/documentation/binding-syntax.html), `DOMClass.bindings` mixin will also look for `data-bind` attribute and bind properties accordingly.
128 | 
129 | This time we'll have any sort of property name on the left, and  any sort of value on its right.
130 | ```js
131 | var InputName = DOMClass({
132 |   with: DOMClass.bindings,
133 |   template: `
134 |     <input data-bind="value:name"><br>
135 |     Hello {{name}}!
136 |   `
137 | });
138 | 
139 | var me = document.body.appendChild(new InputName);
140 | me.bindings.name = 'Andrea';
141 | ```
142 | We can now even change directly `me.firstChild.value = "really?"` or `me.bindings.name = "no way!"` or simply digit our name in the input.
143 | 
144 | 
145 | ### Computed one way attributes
146 | Like it is for text and html, we can compute those attributes that won't be manually changed.
147 | ```js
148 | var LogIn = DOMClass({
149 |   with: DOMClass.bindings,
150 |   template: `
151 |     <div>
152 |       <input placeholder="user" data-bind="value:user">
153 |       <br>
154 |       <input placeholder="pass" data-bind="value:pass" type="password">
155 |       <br>
156 |       <input
157 |         type="submit"
158 |         data-bind="disabled:unauthorized(user,pass)"
159 |       >
160 |     <div>
161 |   `,
162 |   bindings: {
163 |     unauthorized: function (user, pass) {
164 |       return !(
165 |         /\S+/.test(user || '') &&
166 |         /\S{8,}/.test(pass || '')
167 |       );
168 |     }
169 |   }
170 | });
171 | 
172 | 
173 | var login = document.body.appendChild(new LogIn);
174 | // try to use input fields directly or ...
175 | login.bindings.user = 'this should be';
176 | login.bindings.pass = 'safe-enough';
177 | 
178 | ```
179 | If any of the parameters in `unauthorized` method gets updated, its DOM counterpart will be updated.
180 | This works within the component or its bindings object, or from the outer world.
181 | 
182 | 
183 | #### Same attribute and property name
184 | The mixin is smart enough to understand same properties name. If the binding is called value, no need to `value:value`, just `value` would do.
185 | ```js
186 | {
187 |   template: `
188 |     <input data-bind="value">
189 |   `,
190 |   bindings: {value: 'default'}
191 | }
192 | ```
193 | 
194 | 
195 | #### Multiple attributes binding per node
196 | Using comma separated value would do.
197 | ```js
198 | {
199 |   template: `
200 |     <span data-bind="key,data-wut:wut(some,prop),no:worries"></span>
201 |   `,
202 |   bindings: {
203 |     key: 'some-key-name',
204 |     wut: function (a, b) {
205 |       return a +  b;
206 |     },
207 |     worries: 'nope'
208 |   }
209 | }
210 | ```
211 | 
212 | ### Dispatching changed bindings
213 | If the `dispatchBindings` property is defined, and it's either truthy or an integer greater than -1, the component will trigger a `bindingChanged` event each time something changed.
214 | ```js
215 | var ChangingInput = DOMClass({
216 |   with: DOMClass.bindings,
217 |   dispatchBindings: true,
218 |   template: '<input data-bind="value">'
219 | });
220 | 
221 | document.body.appendChild(
222 |   new ChangingInput
223 | ).addEventListener(
224 |   'bindingChanged',
225 |   console.log.bind(console)
226 | );
227 | ```
228 | Every time we type a letter in that input its parent component will dispatch a `CustomEvent` with a `detail` property which will contain at least two properties: `key`, representing the component `bindings[key]` that triggered such notification, and `value`, which will be the newly assigned value to that bindings property.
229 | 
230 | Please note that by default, or better setting `dispatchBindings` just as true, there will be a delay between notifications.
231 | 
232 | This makes the mechanism less greedy by default but if needed, we can specify an arbitrary amount of milliseconds.
233 | Such amount will be used as `setTimoeut` delay or as `requestAnimationFrame` one in case it's 0, where 0 in this case means *ASAP*.
234 | 
235 | Bear in mind if you have a listener and within such lister you change another binding in the same component you are luckily to put yourself into an infinite updating loop: don't mix up UI changes and events notification with data related binding!
236 | 
237 | 
238 | #### Going dirty with bindings
239 | Of course it would be possible to assign `eb.bindings.self = this` within its constructor, but if we need to directly modify the DOM when data changes and from the inside of a bound method or setter (yes, setters in bindings are supported too) then we might rethink the logic.
240 | There are few sketchy attempts in the demo folder, the `CelsiusToFahrenheitBindingChanged` and the `CelsiusToFahrenheitSeppuku`. These are really not recommended approaches since everything could be solved easily and cleanly via the `CelsiusToFahrenheitInput` one.
241 | 
242 | 
243 | ### Custom Elements callbacks
244 | All [famous and verbose CustomElement callbacks](http://www.w3.org/TR/custom-elements/#types-of-callbacks) are aliased in a simpler, yet semantic, way.
245 | 
246 | ```js
247 | var MyCE = new DOMClass({
248 | 
249 |   // equivalent of createdCallback
250 |   // will be invoked after the component will get initialized
251 |   // in case there are mixins or super extends
252 |   constructor: function () {},
253 | 
254 |   // equivalent of attachedCallback
255 |   onAttached: function () {},
256 | 
257 |   // equivalent of detachedCallback
258 |   onDetached: function () {},
259 | 
260 |   // equivalent of attributeChangedCallback
261 |   onChanged: function () {}
262 | 
263 | });
264 | ```
265 | 
266 | It is possible to style elements per Component, which will eventually also create a `css` property we can use to apply own specific styles.
267 | 
268 | ```js
269 | var XSquare = new DOMClass({
270 |   name: 'x-square',
271 |   css: {
272 |     // to self reference the component
273 |     // it is also possible to use just empty selector
274 |     // handy specially when the name is unknown
275 |     'x-square': {
276 |       display: 'block',
277 |       padding: 0,
278 |       width: 32,
279 |       height: 32,
280 |       border: '1px solid black'
281 |     },
282 |     // to reference any element within the component
283 |     // simply use regular CSS selectors
284 |     'span': {
285 |       display: 'inline-block',
286 |       width: '100%',
287 |       lineHeight: 32,
288 |       textAlign: 'center',
289 |       font: {
290 |         size: 26,
291 |         weight: 'bold'
292 |       }
293 |     }
294 |     // mediq queries, animations, and everything else
295 |     // are also supported. Please see `restyle` documentation
296 |   },
297 |   // Yes! DOMClass accepts arguments too \o/
298 |   constructor: function (text) {
299 |     this.innerHTML = '<span>' + text + '</span>';
300 |     // if there is a css in the prototype,
301 |     // we can use the css property to overwrite/set the inherited one
302 |     // following is the equivalent of this.css = { ... }
303 |     this.css.set({
304 |       // empty selector, same as using 'x-square'
305 |       // to reference itself
306 |       '': {
307 |         backgroundColor: 'rgb(' + [
308 |           Math.random() * 256 | 0,
309 |           Math.random() * 256 | 0,
310 |           Math.random() * 256 | 0
311 |         ].join(',') + ')'
312 |       }
313 |     });
314 |   }
315 | });
316 | 
317 | // example
318 | document.body.append(new XSquare('!'));
319 | document.body.append(new XSquare('A'));
320 | document.body.append(new XSquare('Z'));
321 | ```
322 | 
323 | Please note there is no ShadowDOM, template, or HTMLImport polyfill, everything works with regular, well supported, HTML5 standards and on  top of [document.registerElement](https://github.com/WebReflection/document-register-element#document-register-element).
324 | 
325 | 
326 | ### Live demos and benchmarks
327 | In [the following demo page](http://webreflection.github.io/dom-class/demo/) it's possible to interact with components. Read its source code to know more.
328 | 
329 | The famous [DBMonster benchmark](http://webreflection.github.io/dom-class/demo/dbmonster.html) is also available for fun and comparison.
330 | All compatible devices can also be tested against this page and the component file is just [this little](https://github.com/WebReflection/dom-class/blob/master/demo/db-monster.js).
331 | 
332 | 
333 | ### Compatibility
334 | 
335 | The following list of **desktop** browsers has been successfully tested:
336 | 
337 |   * Chrome
338 |   * Firefox
339 |   * IE9 or greater
340 |   * Safari
341 |   * Opera
342 | 
343 | The following list of **mobile** OS has been successfully tested:
344 | 
345 |   * iOS 5.1 or greater
346 |   * Android 2.2 or greater
347 |   * FirefoxOS 1.1 or greater
348 |   * KindleFire 3 or greater
349 |   * Windows Phone 7 or greater
350 |   * Opera Mobile 12 or greater
351 |   * Blackberry OS 10
352 |   * webOS 2 or LG TV
353 |   * Samsung Bada OS 2 or greater
354 | 
355 | If you'd like to know if your browser is supported please check the [live test page](http://webreflection.github.io/dom-class/test/) and let me know if something is not green, thank you.
356 | 
357 | 
358 | ### Which file for what ?
359 | 
360 | The [build folder](https://github.com/WebReflection/dom-class/blob/master/build/) contains all variants, following explained:
361 | 
362 |   * **vanilla** `DOMClass` [minified](https://github.com/WebReflection/dom-class/blob/master/build/dom-class.js) or [magnified](https://github.com/WebReflection/dom-class/blob/master/build/dom-class.max.js), both requires [es-class](https://github.com/WebReflection/es-class) and, if used, [restyle](https://github.com/WebReflection/restyle)
363 |   * **browserify** [CommonJS module](https://github.com/WebReflection/dom-class/blob/master/build/dom-class.node.js), which also depends on [es-class](https://github.com/WebReflection/es-class) and [restyle](https://github.com/WebReflection/restyle)
364 |   * **AMD** [module](https://github.com/WebReflection/dom-class/blob/master/build/dom-class.amd.js), which also depends on [es-class](https://github.com/WebReflection/es-class) and [restyle](https://github.com/WebReflection/restyle)
365 |   * **Vitamer JS** [all in one shot](https://github.com/WebReflection/dom-class/blob/master/build/vitamer.js), which also optionally comes with [query-result](https://github.com/WebReflection/query-result) to simplify common DOM manipulation and operations. Such version is called [vitamer-qr.js](https://github.com/WebReflection/dom-class/blob/master/build/vitamer-qr.js)
366 |   * **dom-class-mixins** [minified](https://github.com/WebReflection/dom-class/blob/master/build/dom-class-mixins.js) to bring with DOMClass handy/evergreen mixins like `DOMClass.bindings`
367 |   * **Vitamer Mixins** [all in one file](https://github.com/WebReflection/dom-class/blob/master/build/vitamer-mixins.js) used in this repository for all tests and demos too.
368 |   * **Vitamer Mixins and $('query-selector')** [all in one file](https://github.com/WebReflection/dom-class/blob/master/build/vitamer-mixins-qr.js), to simplify DOM manipulation on top of all the goodies brought in via `vitamer`
369 | 
370 | 
371 | ### What is Vitamer JS ?
372 | Directly [from Wikipedia](https://en.wikipedia.org/wiki/Vitamer):
373 | 
374 | > Typically, the vitamin activity of multiple vitamers is due to the body's (limited) ability to convert one vitamer to another, or many vitamers to the same enzymatic cofactor(s), which is active in the body as the important form of the vitamin.
375 | > 
376 | > As part of the definition of vitamin, the body cannot completely synthesize an optimal amount of vitamin activity from simple foodstuffs, without some minimal amount of a vitamer molecule as a basis.
377 | 
378 | In this case it's the minimum amount of packages required in order to obtain a modern, comfortable, and cross browser environment based on latest DOM standards and proposals.
379 | 
380 | The "_all in  one shot_" file contains the following modules:
381 | 
382 |   * IE9 only [quick fix](src/ie-lte-9.js) for [standard timers](http://www.w3.org/TR/2011/WD-html5-20110525/timers.html#timers)
383 |   * the [dom4](https://github.com/WebReflection/dom4) normalizer
384 |   * the [document-register-element](https://github.com/WebReflection/document-register-element) polyfill
385 |   * the powerful and handy [restyle](https://github.com/WebReflection/restyle)
386 |   * the awesome [es-class](https://github.com/WebReflection/es-class), with lightweight traits capability and many other goodies
387 |   * optionally the quick and clean [query-result](https://github.com/WebReflection/query-result) to simplify DOM operations
388 |   * optionally DOMClass.mixins such `bindings` and `data` or others
389 | 
390 | From vanilla JS world, above package might be truly everything you need in order to create amazing apps, forgetting about cross platform issues or performance gotchas (greedy RAM or CPU operations).
391 | 
392 | Since the total package amount, once minified and gzipped, is *less than 9KB*, I thought *Vitamer*, as opposite to the well known *Polymer*,  would have worked as file name. Let me know if you have better name ideas :-)
393 | 
394 | 
395 | 
396 | ### License
397 | The MIT Style License
398 | ```
399 | Copyright (C) 2015 by Andrea Giammarchi - @WebReflection
400 | 
401 | Permission is hereby granted, free of charge, to any person obtaining a copy
402 | of this software and associated documentation files (the "Software"), to deal
403 | in the Software without restriction, including without limitation the rights
404 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
405 | copies of the Software, and to permit persons to whom the Software is
406 | furnished to do so, subject to the following conditions:
407 | 
408 | The above copyright notice and this permission notice shall be included in
409 | all copies or substantial portions of the Software.
410 | 
411 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
412 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
413 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
414 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
415 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
416 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
417 | THE SOFTWARE.
418 | ```
419 | 


--------------------------------------------------------------------------------
/demo/domclass-vs-knockoutjs/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 |   <head>
  4 |     <title>Vitamer Mixins Demo</title>
  5 |     <meta http-equiv=content-type content="text/html; charset=utf-8">
  6 |     <meta http-equiv="content-language" content="en-US"/>
  7 |     <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
  8 |     <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.8.0/styles/monokai_sublime.min.css">
  9 |     <style>
 10 | 
 11 |     html, main, live-demo {
 12 |       -webkit-box-sizing: border-box;
 13 |       -moz-box-sizing: border-box;
 14 |       box-sizing: border-box;
 15 |       font-family: sans-serif;
 16 |     }
 17 | 
 18 |     *, *:before, *:after {
 19 |       box-sizing: inherit;
 20 |     }
 21 | 
 22 |     html, body {
 23 |       padding: 0;
 24 |       margin: 0;
 25 |     }
 26 | 
 27 |     body {
 28 |       background-color: #eee;
 29 |     }
 30 | 
 31 |     live-demo {
 32 |       display: block;
 33 |       padding: 8px;
 34 |       background-color: #fee;
 35 |       border: 4px solid #ecc;
 36 |     }
 37 | 
 38 |     main {
 39 |       background-color: #fff;
 40 |       display: block;
 41 |       max-width: 760px;
 42 |       padding:  8px;
 43 |       margin: auto;
 44 |       -webkit-box-shadow: 0px 0px 10px 5px silver;
 45 |       -moz-box-shadow: 0px 0px 10px 5px silver;
 46 |       box-shadow: 0px 0px 10px 5px silver;
 47 |     }
 48 | 
 49 |     section, pre {
 50 |       padding: 8px;
 51 |     }
 52 |     code, pre:before {
 53 |       padding: 4px;
 54 |     }
 55 | 
 56 |     /*section:nth-child(1n+2)*/
 57 |     section {
 58 |       border-top: 4px dashed #eee;
 59 |     }
 60 | 
 61 |     pre:before {
 62 |       content: 'Source code';
 63 |       display: block;
 64 |       font-weight: bold;
 65 |       font-size: small;
 66 |       margin-bottom: 4px;
 67 |       -webkit-user-select: none;
 68 |       -moz-user-select: none;
 69 |       -ms-user-select: none;
 70 |       user-select: none;
 71 |       background-color: #333;
 72 |       color: #ccc;
 73 |     }
 74 |     code {
 75 |       background-color: #eee;
 76 |       color: #111;
 77 |     }
 78 |     pre {
 79 |       overflow-x: auto;
 80 |     }
 81 | 
 82 |     h1 {
 83 |       margin-top: 0;
 84 |       font-size: 1.4em;
 85 |     }
 86 |     h3 {
 87 |       font-size: 1.2em;
 88 |     }
 89 | 
 90 |     h3 a {
 91 |       font-size: small;
 92 |       text-decoration: none;
 93 |     }
 94 |     </style>
 95 |     <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.8.0/highlight.min.js"></script>
 96 |     <script src="../vitamer-mixins.js"></script>
 97 |     <script>
 98 |     document.addEventListener('DOMContentLoaded', function () {
 99 |       this.queryAll('section').forEach(function (section) {
100 |         var
101 |           node = section.query('live-demo').firstElementChild,
102 |           html = []
103 |         ;
104 |         while (node) {
105 |           if (node.nodeName === 'SCRIPT') {
106 |             html.push(node.outerHTML.replace(' type="dom-class/example"', ''));
107 |             setTimeout(eval, 0, node.textContent);
108 |           } else {
109 |             html.push(node.outerHTML);
110 |           }
111 |           node = node.nextElementSibling;
112 |         }
113 |         section.appendChild(
114 |           document.createElement('pre')
115 |         ).textContent = html.join('\n')
116 |           // drop unnecesxasry spaces
117 |           .replace(/\n          /g, '\n')
118 |           .replace('data-arguments="[&quot;Alpha&quot;,&quot;Beta&quot;,&quot;Gamma&quot;]"', 'data-arguments=\'["Alpha","Beta","Gamma"]\'')
119 |           .replace('data-arguments="[&quot;Fries&quot;,&quot;Eggs Benedict&quot;,&quot;Ham&quot;,&quot;Cheese&quot;]"', 'data-arguments=\'["Fries","Eggs Benedict","Ham","Cheese"]\'')
120 |           .replace('[{&quot;stringValue&quot;:&quot;Hello&quot;,&quot;passwordValue&quot;:&quot;mypass&quot;,&quot;booleanValue&quot;:true,&quot;optionValues&quot;:[&quot;Alpha&quot;,&quot;Beta&quot;,&quot;Gamma&quot;],&quot;selectedOptionValue&quot;:&quot;Gamma&quot;,&quot;multipleSelectedOptionValues&quot;:[&quot;Alpha&quot;],&quot;radioSelectedOptionValue&quot;:&quot;Beta&quot;}]', '[{"stringValue":"Hello","passwordValue":"mypass","booleanValue":true,"optionValues":["Alpha","Beta","Gamma"],"selectedOptionValue":"Gamma","multipleSelectedOptionValues":["Alpha"],"radioSelectedOptionValue":"Beta"}]')
121 |           .replace('[\n    &quot;Annabelle&quot;,[&quot;Arnie&quot;,&quot;Anders&quot;,&quot;Apple&quot;],\n    &quot;Bertie&quot;,[&quot;Boutros-Boutros&quot;,&quot;Brianna&quot;,&quot;Barbie&quot;,&quot;Bee-bop&quot;],\n    &quot;Charles&quot;,[&quot;Cayenne&quot;,&quot;Cleopatra&quot;]\n  ]', '[\n              "Annabelle",["Arnie","Anders","Apple"],\n              "Bertie",["Boutros-Boutros","Brianna","Barbie","Bee-bop"],\n              "Charles",["Cayenne","Cleopatra"]\n            ]')
122 |         ;
123 |         hljs.highlightBlock(section.lastChild);
124 |       });
125 |     });
126 |     </script>
127 |   </head>
128 |   <body>
129 |     <main>
130 |       <h1><a href="https://github.com/WebReflection/dom-class">DOMClass</a> VS <a href="http://knockoutjs.com/">Knockout</a></h1>
131 |       <p>
132 |         This page replicates <a href="http://knockoutjs.com/examples/">Knockout examples</a> via <code>DOMClass</code> components.
133 |       </p>
134 |       <p>
135 |         Each example explains main differences between original code <strong><small>[↗]</small></strong> and the one used here.
136 |       </p>
137 |       <p>
138 |         Feel free to check the source code of this page to actually see that <abbr title="What You See Is What You Get">WYSIWYG</abbr>.
139 |       </p>
140 |       <p>
141 |         Please bear in mind that DOMClass is a Web Components like abstraction, which is very different as paradigm to Knockout one.
142 |         Also please remember not a single piece of DOMClass code has been evaluated and also there are no repeaters in the templates.
143 |         It's a simplified way to create components which are nice and clean and don't need model definitions on the wild but just a class definition to possibly never even interact with directly but through events.
144 |       </p>
145 |       <section id="hello-world">
146 |         <h3>Hello World <a title="Knockout version" href="http://knockoutjs.com/examples/helloWorld.html">[↗]</a></h3>
147 |         <p>
148 |           Main difference is that DOMClass one changes in real time and not only on <code>change</code> event.
149 |         </p>
150 |         <live-demo>
151 |           <script type="dom-class/example">
152 |           DOMClass({
153 |             name: 'hello-world',
154 |             'with': [DOMClass.bindings],
155 |             bindings: {
156 |               firstName: 'Planet',
157 |               lastName: 'Earth',
158 |               join: function (firstName, lastName) {
159 |                 return [firstName, lastName].join(' ');
160 |               }
161 |             }
162 |             //  just to reflect their style
163 |             ,   css: {h2: {fontSize: '100%'}}
164 |           });
165 |           </script>
166 |           <hello-world>
167 |             <p>First name: <input data-bind="value:firstName" /></p>
168 |             <p>Last name: <input data-bind="value:lastName" /></p>
169 |             <h2>Hello, {{join(firstName, lastName)}}!</h2>
170 |           </hello-world>
171 |         </live-demo>
172 |       </section>
173 |       <section id="click-counter">
174 |         <h3>Click counter <a title="Knockout version" href="http://knockoutjs.com/examples/clickCounter.html">[↗]</a></h3>
175 |         <p>
176 |           Main difference is that we use standard events when we need them.
177 |           This gives us the ability to also drop them eventually in some edge case we might encounter.
178 |         </p>
179 |         <live-demo>
180 |           <script type="dom-class/example">
181 |           DOMClass({
182 |             name: 'click-counter',
183 |             'with': [DOMClass.bindings],
184 |             css: {'[visible=false]': {display: 'none'}},
185 |             bindings: {
186 |               clicks: 0,
187 |               tooMany: function (clicks) { return clicks >= 3; }
188 |             },
189 |             constructor: function () {
190 |               this.query('.increment').addEventListener('click', this);
191 |               this.query('.reset').addEventListener('click', this);
192 |             },
193 |             // handleEvent is **not** magic, just regular DOM3 behavior
194 |             handleEvent: function (e) {
195 |               var btn = e.currentTarget;
196 |               if (btn.classList.contains('increment')) ++this.bindings.clicks;
197 |               else this.bindings.clicks = 0;
198 |             }
199 |           });
200 |           </script>
201 |           <click-counter>
202 |             <div>You've clicked {{clicks}} times</div>
203 |             <button class="increment" data-bind='disabled:tooMany(clicks)'>Click me</button>
204 |             <div data-bind='visible:tooMany(clicks)'>
205 |               That's too many clicks! Please stop before you wear out your fingers.
206 |               <button class="reset">Reset clicks</button>
207 |             </div>
208 |           </click-counter>
209 |         </live-demo>
210 |       </section>
211 |       <section>
212 |         <h3>Simple list <a title="Knockout version" href="http://knockoutjs.com/examples/simpleList.html">[↗]</a></h3>
213 |         <p>
214 |           The main difference is that DOMClass doesn't have auto-magic behaviors. The bound <code>options</code>, as example,
215 |           will be exactly the <code>select.options</code> and instead of using <code>this.items.push(value)</code> we expose a proper <code>addItem</code> method.
216 |         </p>
217 |         <p>
218 |           Another important difference is the ability to pass constructor <code>arguments</code> as JSON Array and through the <code>data-arguments</code> property.
219 |           This makes the component usable as pre-rendered HTML, or as simple JS created one: <code>body.append(new SimpleList('a','b'))</code>
220 |         </p>
221 |         <live-demo>
222 |           <script type="dom-class/example">
223 |           var SimpleList = DOMClass({
224 |             name: 'simple-list',
225 |             'with': [DOMClass.bindings],
226 |             css: {select: {width: '100%'}},
227 |             bindings: {notAllowed: function (name) { return !name; }},
228 |             constructor: function () {
229 |               for (var i = 0; i < arguments.length; i++)
230 |                 this.addItem(arguments[i]);
231 |               this.query('button').addEventListener('click', this);
232 |             },
233 |             addItem: function (value) {
234 |               var option = document.createElement('option');
235 |               option.value = (option.textContent = value);
236 |               this.query('select').append(option);
237 |             },
238 |             handleEvent: function (e) {
239 |               var input = this.query('input');
240 |               this.addItem(input.value);
241 |               input.value = '';
242 |             }
243 |           });
244 |           </script>
245 |           <simple-list data-arguments='["Alpha","Beta","Gamma"]'>
246 |             New item:
247 |             <input data-bind="value:itemName">
248 |             <button data-bind="disabled:notAllowed(itemName)">Add</button>
249 |             <p>Your items:</p>
250 |             <select data-bind="options" multiple="multiple" width="50"></select>
251 |           </simple-list>
252 |         </live-demo>
253 |       </section>
254 |       <section>
255 |         <h3>Better list <a title="Knockout version" href="http://knockoutjs.com/examples/betterList.html">[↗]</a></h3>
256 |         <p>
257 |           Same differences described in the simple list plus some extra logic for sorting and removing.
258 |           Once again, there's no auto-magic behaviors in DOMClass, neither code evaluation.
259 |           We need to define what happens by ourselves and here that's defined in the <code>handleEvent</code>.
260 |         </p>
261 |         <live-demo>
262 |           <script type="dom-class/example">
263 |           var BetterList = DOMClass({
264 |             name: 'better-list',
265 |             'with': [DOMClass.bindings],
266 |             css: {select: {width: '100%'}},
267 |             bindings: {
268 |               optionsLength: 0,
269 |               disableAdd: function (name) { return !name; },
270 |               disableSort: function (length) { return length < 2; },
271 |               update: function () {
272 |                 this.optionsLength = this.options.length;
273 |                 this.disabledRemove = ![].some.call(this.options, function (option) {
274 |                   return option.selected;
275 |                 });
276 |               }
277 |             },
278 |             constructor: function () {
279 |               for (var i = 0; i < arguments.length; i++)
280 |                 this.addItem(arguments[i]);
281 |               this.queryAll('[name="add"],[name="remove"],[name="sort"]').forEach(
282 |                 function (button) { button.addEventListener('click', this); },
283 |                 this
284 |               );
285 |               this.query('select').addEventListener('change', this);
286 |               this.bindings.update();
287 |             },
288 |             addItem: function (value) {
289 |               var option = document.createElement('option');
290 |               option.value = (option.textContent = value);
291 |               this.query('select').append(option);
292 |               this.bindings.update();
293 |             },
294 |             handleEvent: function (e) {
295 |               var node;
296 |               switch(e.currentTarget.name) {
297 |                 case 'add':
298 |                   node = this.query('input');
299 |                   this.addItem(node.value);
300 |                   node.value = '';
301 |                   break;
302 |                 case 'remove':
303 |                   node = this.query('select');
304 |                   while (-1 < node.selectedIndex)
305 |                     node.options[node.selectedIndex].remove();
306 |                   break;
307 |                 case 'sort':
308 |                   node = this.query('select');
309 |                   [].map.call(node.options, Object).sort(function (a, b) {
310 |                     return  a.value.toLowerCase() <
311 |                             b.value.toLowerCase() ?
312 |                             -1 : 1;
313 |                   }).forEach(node.appendChild, node);
314 |                   break;
315 |               }
316 |               this.bindings.update();
317 |             }
318 |           });
319 |           </script>
320 |           <better-list data-arguments='["Fries","Eggs Benedict","Ham","Cheese"]'>
321 |             Add item: <input data-bind="value:itemName">
322 |             <button name="add" data-bind="disabled:disableAdd(itemName)">Add</button>
323 |             <p>Your values:</p>
324 |             <select data-bind="options" multiple="multiple" width="50"></select>
325 |             <div>
326 |               <button name="remove" data-bind="disabled:disabledRemove">Remove</button>
327 |               <button name="sort" data-bind="disabled:disableSort(optionsLength)">Sort</button>
328 |             </div>
329 |           </better-list>
330 |         </live-demo>
331 |       </section>
332 |       <section>
333 |         <h3>Control types <a title="Knockout version" href="http://knockoutjs.com/examples/controlTypes.html">[↗]</a></h3>
334 |         <p>The main difference is that in DOMClass you can invoke methods but you need to specify per which property such method should be invoked.</p>
335 |         <p>Please note this is a very demo-ish exercise and the crossed representation of the same binding in multiple place is not an ideal scenario to define with current bindings logic but also ... hey, it works ;-)</p>
336 |         <p>For the first time in this page we use direct methods bindings too so that <code>onchange:method</code> will invoke <code>bindings.method(event)</code> once it changes.</p>
337 |         <p>Again, this is a demo, so here I am showing off some bindings features but in a component like approach we could just use <code>addEventListener</code> and update bindings once triggered.</p>
338 |         <live-demo>
339 |           <script type="dom-class/example">
340 |           DOMClass({
341 |             name: 'control-types',
342 |             css: {
343 |               '.readout': {float: 'right'},
344 |               '.readout td': { width: '50%' },
345 |               'tr': { verticalAlign: 'top' },
346 |               'td': { padding: '0.2em 0.2em 0.6em 0.2em' },
347 |               'td.label': { textAlign: 'right', paddingRight: '0.5em' },
348 |               'input[type=radio]': { margin: '0 0.25em 0 0.25em' }
349 |             },
350 |             'with': [DOMClass.bindings],
351 |             bindings: {
352 |               selectedIndex: -1,
353 |               selectedOptions: [],
354 |               stringValue: '',
355 |               options: [],
356 |               getBoolTxt: function (b) { return b ? 'True' : 'False'; },
357 |               getRadio: function () {
358 |                 return this.options.filter(function (value) {
359 |                   return this['radio' + value];
360 |                 }, this)[0] || '';
361 |               },
362 |               getSingleSelectValue: function (i) {
363 |                 return i < 0 ? '' : this.singleSelectOptions[i].value;
364 |               },
365 |               getMultipleSelectValue: function (selectedOptions) {
366 |                 return selectedOptions.join(', ');
367 |               },
368 |               on: function (value) {
369 |                 this.changeValue = value;
370 |                 this.keyupValue = value;
371 |               },
372 |               updateStringValue: function (e) {
373 |                 this.stringValue = e.target.value;
374 |               },
375 |               updateMultiSelect: function (e) {
376 |                 this.selectedOptions = [].map.call(
377 |                   e.target.selectedOptions,
378 |                   function (option) { return option.value; }
379 |                 );
380 |               }
381 |             },
382 |             constructor: function (options) {
383 |               this.bindings.stringValue = options.stringValue || '';
384 |               this.bindings.passwordValue = options.passwordValue || '';
385 |               this.bindings.booleanValue = options.booleanValue == null ?
386 |                 true : options.booleanValue;
387 |               this.bindings.options = options.optionValues;
388 |               this.bindings['radio' + options.radioSelectedOptionValue] = true;
389 |               options.optionValues.forEach(function (value, i) {
390 |                 var option = this.appendChild(document.createElement('option'));
391 |                 option.textContent = (option.value = value);
392 |                 if (options.selectedOptionValue === value)
393 |                   this.selectedIndex = i;
394 |               }, this.query('select'));
395 |               options.optionValues.forEach(function (value, i) {
396 |                 var option = this.appendChild(document.createElement('option'));
397 |                 option.textContent = (option.value = value);
398 |                 if (-1 < options.multipleSelectedOptionValues.indexOf(value))
399 |                   option.selected = true;
400 |               }, this.query('select[multiple]'));
401 |               this.bindings.updateMultiSelect({target: this.query('select[multiple]')});
402 |             }
403 |           });
404 |           </script>
405 |           <control-types data-arguments='[{"stringValue":"Hello","passwordValue":"mypass","booleanValue":true,"optionValues":["Alpha","Beta","Gamma"],"selectedOptionValue":"Gamma","multipleSelectedOptionValues":["Alpha"],"radioSelectedOptionValue":"Beta"}]'>
406 |             <div class="readout">
407 |               <h3>What's in the model?</h3>
408 |               <table>
409 |                 <tr>
410 |                   <td class="label">Text value:</td>
411 |                   <td>{{stringValue}}</td>
412 |                 </tr>
413 |                 <tr>
414 |                   <td class="label">Password:</td>
415 |                   <td>{{passwordValue}}</td>
416 |                 </tr>
417 |                 <tr>
418 |                   <td class="label">Bool value:</td>
419 |                   <td>{{getBoolTxt(booleanValue)}}</td>
420 |                 </tr>
421 |                 <tr>
422 |                   <td class="label">Selected option:</td>
423 |                   <td>{{getSingleSelectValue(selectedIndex)}}</td>
424 |                 </tr>
425 |                 <tr>
426 |                   <td class="label">Multi-selected options:</td>
427 |                   <td>{{getMultipleSelectValue(selectedOptions)}}</td>
428 |                 </tr>
429 |                 <tr>
430 |                   <td class="label">Radio button selection:</td>
431 |                   <td>{{getRadio(radioAlpha,radioBeta,radioGamma)}}</td>
432 |                 </tr>
433 |               </table>
434 |             </div>
435 | 
436 |             <h3>HTML controls</h3>
437 |             <table>
438 |               <tr>
439 |                 <td class="label">Text value (updates on change):</td>
440 |                 <td><input data-bind="onchange:updateStringValue,value:changeValue,sync:on(stringValue)"></td>
441 |               </tr>
442 |               <tr>
443 |                 <td class="label">Text value (updates on keystroke):</td>
444 |                 <td><input data-bind="onkeyup:updateStringValue,value:keyupValue,sync:on(stringValue)"></td>
445 |               </tr>
446 |               <tr>
447 |                 <td class="label">Text value (multi-line):</td>
448 |                 <td><textarea data-bind="value:stringValue,sync:on(stringValue)"></textarea></td>
449 |               </tr>
450 |               <tr>
451 |                 <td class="label">Password:</td>
452 |                 <td><input type="password" data-bind="value:passwordValue" /></td>
453 |               </tr>
454 |               <tr>
455 |                 <td class="label">Checkbox:</td>
456 |                 <td><input type="checkbox" data-bind="checked:booleanValue" /></td>
457 |               </tr>
458 |               <tr>
459 |                 <td class="label">Drop-down list:</td>
460 |                 <td><select data-bind="options:singleSelectOptions,selectedIndex"></select></td>
461 |               </tr>
462 |               <tr>
463 |                 <td class="label">Multi-select drop-down list:</td>
464 |                 <td><select multiple="multiple" data-bind="onchange:updateMultiSelect"></select></td>
465 |               </tr>
466 |               <tr>
467 |                 <td class="label">Radio buttons:</td>
468 |                 <td>
469 |                   <label><input name="radio" type="radio" data-bind="checked:radioAlpha" />Alpha</label>
470 |                   <label><input name="radio" type="radio" data-bind="checked:radioBeta" />Beta</label>
471 |                   <label><input name="radio" type="radio" data-bind="checked:radioGamma" />Gamma</label>
472 |                 </td>
473 |               </tr>
474 |             </table>
475 |           </control-types>
476 |         </live-demo>
477 |       </section>
478 |       <section>
479 |         <h3>Working with Collections <a title="Knockout version" href="http://knockoutjs.com/examples/collections.html">[↗]</a></h3>
480 |         <p>Main difference in this example is that DOMClass does not use eval or Function so it's more procedural.</p>
481 |         <p>Also there are no repeaters in the template, because there are no nested bindings yet.</p>
482 |         <p>The component is split in 3: the main container, its generic Person and eventually children through the Child component.</p>
483 |         <live-demo>
484 |           <script type="dom-class/example">
485 |           DOMClass({
486 |             name: 'random-people',
487 |             'static': {
488 |               Person: DOMClass({
489 |                 'static': {
490 |                   Child: DOMClass({
491 |                     'with': [DOMClass.bindings],
492 |                     template: ''.concat(
493 |                       '<li>{{name}} <span class="renderTime">',
494 |                           '(child rendered at {{renderSeconds}})',
495 |                       '</span></li>'
496 |                     ),
497 |                     bindings: { get renderSeconds() { return new Date().getSeconds(); } },
498 |                     constructor: function (name) { this.bindings.name = name; }
499 |                   })
500 |                 },
501 |                 'with': [DOMClass.bindings],
502 |                 template: ''.concat(
503 |                   '<li><div>{{name}} has {{childrenLength}} children: ',
504 |                     '<a href="#" data-bind="onclick:addChild">Add child</a> ',
505 |                     '<span class="renderTime">',
506 |                       '(person rendered at {{renderSeconds}})',
507 |                     '</span>',
508 |                   '</div><ul></ul></li>'
509 |                 ),
510 |                 bindings: {
511 |                   childrenLength: 0,
512 |                   addChild: function () {
513 |                     this.childrenLength = this.children.push('New child');
514 |                     return false;
515 |                   },
516 |                   get renderSeconds() { return new Date().getSeconds(); }
517 |                 },
518 |                 dispatchBindings: true,
519 |                 constructor: function (name, children) {
520 |                   this.bindings.name = name;
521 |                   this.bindings.children = children.slice(0);
522 |                   this.bindings.childrenLength = children.length;
523 |                   this.addEventListener('bindingChanged', this);
524 |                 },
525 |                 handleEvent: function (e) {
526 |                   if (e.detail.key !== 'childrenLength') return;
527 |                   var ul = this.query('ul'),
528 |                       i = ul.children.length;
529 |                   while (i < this.bindings.children.length)
530 |                     ul.append(new this.constructor.Child(
531 |                       this.bindings.children[i++]
532 |                     ));
533 |                 }
534 |               })
535 |             },
536 |             'with': [DOMClass.bindings],
537 |             dispatchBindings: 0,
538 |             template: ''.concat(
539 |               '<ul></ul><label>',
540 |               '<input data-bind="checked" type="checkbox"> ',
541 |               'Show render times</label>'
542 |             ),
543 |             css: {
544 |               'ul .renderTime': {display: 'none'},
545 |               'ul.showTime .renderTime': {display: 'inline'},
546 |               '.renderTime': {fontSize: 'small', color: '#666'}
547 |             },
548 |             constructor: function () {
549 |               for (var
550 |                 Person = this.constructor.Person,
551 |                 ul = this.query('ul'),
552 |                 i = 0; i < arguments.length; i += 2
553 |               ) ul.appendChild(new Person(arguments[i], arguments[i + 1]));
554 |               this.updateRenderTime();
555 |               this.addEventListener('bindingChanged', this.updateRenderTime);
556 |             },
557 |             updateRenderTime: function () {
558 |               this.query('ul').classList.toggle('showTime', this.bindings.checked);
559 |             }
560 |           });
561 |           </script>
562 |           <random-people
563 |             data-arguments='[
564 |               "Annabelle",["Arnie","Anders","Apple"],
565 |               "Bertie",["Boutros-Boutros","Brianna","Barbie","Bee-bop"],
566 |               "Charles",["Cayenne","Cleopatra"]
567 |             ]'>
568 |           </random-people>
569 |         </live-demo>
570 |       </section>
571 |     </main>
572 |   </body>
573 | </html>


--------------------------------------------------------------------------------
/src/Bindings.js:
--------------------------------------------------------------------------------
  1 | Object.defineProperty(DOMClass, 'bindings', {
  2 |   enumerable: true,
  3 |   value: (function (O) {'use strict';
  4 | 
  5 |     /*! (C) 2015 Andrea Giammarchi - Mit Style License */
  6 | 
  7 |     // I must admit this wasn't fun ... so many quirks!
  8 |     // works down to Android 2.3, webOS (wut?!) and Windows Phone 7
  9 |     // BB7 has problems defining properties on DOM Object
 10 |     // ... I salute you BB7, it's been fun!
 11 | 
 12 |     var
 13 |       // constants
 14 |       STATE_OFF = 0,
 15 |       STATE_DIRECT = 1,
 16 |       STATE_ATTRIBUTE = 2,
 17 |       STATE_EVENT = 4,
 18 |       DOM_ATTR_MODIFIED = 'DOMAttrModified',
 19 |       ON_ATTACHED = 'attachedCallback',
 20 |       ON_DETACHED = 'detachedCallback',
 21 |       GET_ATTRIBUTE = 'getAttribute',
 22 |       SET_ATTRIBUTE = 'setAttribute',
 23 |       DROP_BINDINGS = 'destroyBindings',
 24 |       // shortcuts
 25 |       create = O.create,
 26 |       dP = O.defineProperty,
 27 |       gPO = O.getPrototypeOf,
 28 |       gOPD = O.getOwnPropertyDescriptor,
 29 |       // RegExp used all the time
 30 |       ignore = /IFRAME|NOFRAMES|NOSCRIPT|SCRIPT|SELECT|STYLE|TEXTAREA|[a-z]/,
 31 |       oneWay = /\{\{\{?[\S\s]+?\}\}\}?/g,
 32 |       oneWayHTML = /^\{[\S\s]+?\}$/,
 33 |       comma = /\s*,\s*/,
 34 |       colon = /\s*:\s*/,
 35 |       spaces = /^\s+|\s+$/g,
 36 |       decepticons = /^([\S]+?)\(([\S\s]*?)\)/,
 37 |       // MutationObserver common options
 38 |       whatToObserve = {attributes: true, subtree: true},
 39 |       // used to create HTML
 40 |       dummy = document.createElement('dummy'),
 41 |       // moar shortcuts
 42 |       hOP = whatToObserve.hasOwnProperty,
 43 |       notNull = function (v, f) {
 44 |         /* jshint eqnull:true */
 45 |         return v == null ? f : v;
 46 |       },
 47 |       on = function (el, type, handler) {
 48 |         el.addEventListener(type, handler, true);
 49 |         //                                  ^ ... but why?
 50 |         // because usually devs set listeners in bubbling
 51 |         // phase, meaning this one might fire before ^_^
 52 |       },
 53 |       off = function (el, type, handler) {
 54 |         el.removeEventListener(type, handler, true);
 55 |       },
 56 |       trim = DOM_ATTR_MODIFIED.trim || function () {
 57 |         return this.replace(spaces, '');
 58 |       },
 59 |       createGetSet = function (get, set) {
 60 |         return {
 61 |           configurable: true,
 62 |           enumerable: true,
 63 |           get: get,
 64 |           set: set
 65 |         };
 66 |       },
 67 |       // if attributes such onchange or others are used
 68 |       directMethod = function (bindings, method) {
 69 |         return typeof method === 'function' ?
 70 |           function () { return method.apply(bindings, arguments); } :
 71 |           method;
 72 |       },
 73 |       // given an element and a property
 74 |       // with direct info manipulation capability
 75 |       // test if there is a descriptor that could be
 76 |       // used in case it's wrapped/redefined
 77 |       getInterceptor = function (el, key) {
 78 |         var proto = el, descriptor;
 79 |         while (proto && !hOP.call(proto, key)) proto = gPO(proto);
 80 |         if (proto) {
 81 |           descriptor = gOPD(proto, key);
 82 |           if ('set' in descriptor && 'get' in descriptor) {
 83 |             try {
 84 |               if (descriptor.get.call(el) !== el[key]) {
 85 |                 throw descriptor;
 86 |               }
 87 |               return descriptor;
 88 |             } catch (iOS) {}
 89 |           }
 90 |         }
 91 |         return null;
 92 |       },
 93 |       MO =  window.MutationObserver ||
 94 |             window.WebKitMutationObserver ||
 95 |             window.MozMutationObserver,
 96 |       hasMo = !!MO,
 97 |       schedule = function (fn) {
 98 |         // requestAnimationFrame would be too greedy
 99 |         // however, it has its advantages like not bothering
100 |         // when the window/tab is not focused or something else.
101 |         // in this way we are sure we'll reschedule the timer
102 |         // only if rAF executes, instead of forever re-scheduled
103 |         return setTimeout(requestAnimationFrame, 100, fn);
104 |       },
105 |       cancel = clearTimeout, // cancelAnimationFrame
106 |       hasDAM = hasMo
107 |     ;
108 | 
109 |     // verify if the DOMAttrModified listener works at all
110 |     if (!hasDAM) {
111 |       (function verifyItWorks(html, uid) {
112 |         function suchAGoodBoy() { hasDAM = true; }
113 |         on(html, DOM_ATTR_MODIFIED, suchAGoodBoy);
114 |         html[SET_ATTRIBUTE](uid, 1);
115 |         html.removeAttribute(uid);
116 |         off(html, DOM_ATTR_MODIFIED, suchAGoodBoy);
117 |       }(
118 |         document.documentElement,
119 |         'dom-' + (Math.random() + '-class').slice(2)
120 |       ));
121 |     }
122 | 
123 |     // if there's some textual binding in the wild, like inside
124 |     // a generic node, it will be bound "one way" here
125 |     function boundTextNode(bindings, key, node, dB, dS) {
126 |       var value, setter = hOP.call(bindings, key) && gOPD(bindings, key).set;
127 |       dP(bindings, key, createGetSet(
128 |         function get() { return value; },
129 |         function set(v) {
130 |           node.nodeValue = (value = v);
131 |           if (dB) dS(key);
132 |           if (setter) setter.call(bindings, v);
133 |         }
134 |       ));
135 |       return node;
136 |     }
137 | 
138 |     // if there's some HTML binding in the wild, like inside
139 |     // a generic node, it will be bound "one way" here
140 |     function boundFragmentNode(bindings, key, document, innerHTML, dB, dS) {
141 |       var
142 |         setter = hOP.call(bindings, key) && gOPD(bindings, key).set,
143 |         pins = createFragment(document, innerHTML)
144 |       ;
145 |       dP(bindings, key, createGetSet(
146 |         function get() { return innerHTML; },
147 |         function set(value) {
148 |           pins = updatePins(document, pins, (innerHTML = value));
149 |           if (dB) dS(key);
150 |           if (setter) setter.call(bindings, value);
151 |         }
152 |       ));
153 |       return pins.fragment;
154 |     }
155 | 
156 |     // create a documentFragment adding before and after
157 |     // two comments node. There are immune to styles
158 |     // but these are also nodes so it's possible later on
159 |     // to replace the fragment within these comments ;-)
160 |     function createFragment(document, innerHTML) {
161 |       var pins, firstChild;
162 |       dummy.innerHTML = '<!---->' + innerHTML + '<!---->';
163 |       pins = {
164 |         start: dummy.firstChild,
165 |         end: dummy.lastChild,
166 |         fragment: document.createDocumentFragment()
167 |       };
168 |       while ((firstChild = dummy.firstChild))
169 |         pins.fragment.appendChild(firstChild);
170 |       return pins;
171 |     }
172 | 
173 |     // used to replace previous fragment
174 |     // will create a new "pins" object with
175 |     // comments boundaries and the fragment
176 |     function updatePins(document, pins, html) {
177 |       var
178 |         start = pins.start,
179 |         parentNode = start.parentNode,
180 |         nextSibling
181 |       ;
182 |       do {
183 |         nextSibling = start.nextSibling;
184 |         parentNode.removeChild(nextSibling);
185 |       } while (nextSibling !== pins.end);
186 |       pins = createFragment(document, html);
187 |       parentNode.replaceChild(pins.fragment, start);
188 |       return pins;
189 |     }
190 | 
191 |     // if there's some binding dependent to a method it will update
192 |     // the node whenever one bound parameter of the method changes
193 |     function boundTransformer(source, autobots, bindings, method, keys, document, isHTML) {
194 |       var
195 |         pins = null,
196 |         node = isHTML ? null : document.createTextNode('')
197 |       ;
198 |       keys.split(comma).forEach(optimusPrime, {
199 |         autobots: autobots,
200 |         bindings: bindings,
201 |         method: source[method],
202 |         source: source,
203 |         onUpdate: isHTML ?
204 |           function (value) {
205 |             pins = pins ?
206 |               updatePins(document, pins, value) :
207 |               createFragment(document, value);
208 |           } :
209 |           function (value) {
210 |             node.nodeValue = value;
211 |           }
212 |       });
213 |       return node || pins.fragment;
214 |     }
215 | 
216 |     // from a list of property names, returns an Array of values
217 |     function getArgs() {/* jshint validthis:true */
218 |       var a = [], i = 0;
219 |       while (i < arguments.length) a[i] = this[arguments[i++]];
220 |       return a;
221 |     }
222 | 
223 |     // it controls all autobots, trying to defeat
224 |     // all decepticons attack through their callbacks
225 |     function optimusPrime(key, i, args) {/* jshint validthis:true */
226 |       var
227 |         autobots = this.autobots,
228 |         bindings = this.bindings,
229 |         source = this.source,
230 |         method = this.method,
231 |         onUpdate = this.onUpdate,
232 |         setter = setGetSetIfAvailable(bindings, source, key).set,
233 |         invoke = !!setter
234 |       ;
235 |       autobots[key] = source[key];
236 |       dP(bindings, key, createGetSet(
237 |         function get() { return autobots[key]; },
238 |         function set(value) {
239 |           autobots[key] = value;
240 |           onUpdate(method.apply(bindings, getArgs.apply(autobots, args)));
241 |           if (invoke) setter.call(bindings, value);
242 |         }
243 |       ));
244 |       onUpdate(method.apply(bindings, getArgs.apply(autobots, args)));
245 |     }
246 | 
247 |     // plain borrowed from twemoji ... but that's my code anyway ^_^
248 |     function grabAllTextNodes(node, allText) {
249 |       var
250 |         childNodes = node.childNodes,
251 |         length = childNodes.length,
252 |         subnode,
253 |         nodeType;
254 |       while (length--) {
255 |         subnode = childNodes[length];
256 |         nodeType = subnode.nodeType;
257 |         if (nodeType === 3) allText.push(subnode);
258 |         else if (nodeType === 1 && !ignore.test(subnode.nodeName)) {
259 |           grabAllTextNodes(subnode, allText);
260 |         }
261 |       }
262 |       return allText;
263 |     }
264 | 
265 |     // used to understand if and how to dispatch events
266 |     function convertShenanigansToNumber(i) {
267 |       switch (true) {
268 |         case typeof i === 'number': return i < 0 ? -1 : i;
269 |         case i: return 133;
270 |         default: return -1;
271 |       }
272 |     }
273 | 
274 |     // set a binding property to a generic Custom Element
275 |     function setBindings(ce, bindings) {
276 |       dP(ce, 'bindings', {
277 |         configurable: true,
278 |         enumerable: true,
279 |         writable: false,
280 |         value: bindings
281 |       });
282 |     }
283 | 
284 |     // if the source had a getter/setter and
285 |     // the target hasn't one descriptor yet
286 |     // will copy such descriptor to not loose it
287 |     // once it's re-configured
288 |     function setGetSetIfAvailable(target, source, key) {
289 |       var descriptor;
290 |       if (hOP.call(target, key)) {
291 |         descriptor = gOPD(target, key);
292 |       } else {
293 |         descriptor = gOPD(source, key) || whatToObserve;
294 |         if (descriptor.set) {
295 |           dP(target, key, descriptor);
296 |         }
297 |       }
298 |       return descriptor;
299 |     }
300 | 
301 |     return {
302 | 
303 |       // if the template is the same per each component
304 |       // or there are common bindings, it does everything once created
305 |       init: function () {
306 |         if (this.template || this.bindings) this.createBindings(this);
307 |       },
308 | 
309 |       // but it's also possible to lazy attach bindings later on
310 |       // please not ce.dropBindings() will be called if already present
311 |       createBindings: function (info) {
312 | 
313 |         // if it's been invoked multiple times, clean  up all the things
314 |         if (hOP.call(this, DROP_BINDINGS)) this[DROP_BINDINGS]();
315 | 
316 |         // if the template is there but the node has no content
317 |         // meaning it has been probably created via JS
318 |         // it will inject the template right away
319 |         if (info.template && !trim.call(this.innerHTML)) {
320 |           this.innerHTML = info.template;
321 |         }
322 | 
323 |         var
324 |           // shortcut and reference
325 |           self = this,
326 |           // grab current document or use the global one
327 |           document = self.ownerDocument || document,
328 |           // used to define defaults, actually optional
329 |           bindings = info.bindings || {},
330 |           // will find all possible nodes with one-way bindings
331 |           textNodes = grabAllTextNodes(self, []),
332 |           // holds singular properties values related to nodes or attributes
333 |           autobots = create(null),
334 |           // maps DOM attribute names => bindings properties name
335 |           map = create(null),
336 |           // will be actually the exported binding object
337 |           values = create(info.bindings || null),
338 |           // grab all nodes with some [data-bind="value:prop"] info
339 |           attributes = self.queryAll('[data-bind]'),
340 |           // used as every DOM_ATTR_MODIFIED handler
341 |           dAM = function (e) {
342 |             var key = e.attrName, previous = state;
343 |             state = STATE_EVENT;
344 |             values[map[key]] = e.currentTarget[GET_ATTRIBUTE](key);
345 |             state = previous;
346 |           },
347 |           // will be updated later on if a MutationObserver is needed
348 |           setMO = false,
349 |           // default state
350 |           state = STATE_OFF,
351 |           // NOTIFICATIONS
352 |           // if bindings are dispatched, figure out in which frequency
353 |           dispatchDelay = convertShenanigansToNumber(
354 |             info.dispatchBindings || this.dispatchBindings
355 |           ),
356 |           // internal boolean flag, if dispatchDelay < 0 don't
357 |           dispatchBindings = -1 < dispatchDelay,
358 |           // in case there are bindings to dispatch, use a storage to filter notifications
359 |           tobeNotified = dispatchBindings && create(null),
360 |           // used to schedule and clean up notifications
361 |           // the value 0 means ASAP and in that case rAF is used instead of setTimeout
362 |           dispatcher = dispatchBindings && function (key) {
363 |             delete tobeNotified[key];
364 |             self.dispatchEvent(new CustomEvent('bindingChanged', {detail: {
365 |               key: key,
366 |               value: values[key]
367 |             }}));
368 |           },
369 |           // schedules the dispatcher accordingly with the delay
370 |           // if the dispatchDelay is 0 will use rAF instead (ASAP)
371 |           dispatchScheduler = dispatchDelay ?
372 |             function (key) {
373 |               if (key in tobeNotified) clearTimeout(tobeNotified[key]);
374 |               tobeNotified[key] = setTimeout(dispatcher, dispatchDelay, key);
375 |             } :
376 |             function (key) {
377 |               if (key in tobeNotified) cancelAnimationFrame(tobeNotified[key]);
378 |               tobeNotified[key] = requestAnimationFrame(function () {
379 |                 dispatcher(key);
380 |               });
381 |             },
382 |           // whenever it's dropped and nothing else should happe in this scope
383 |           dropped = false,
384 |           // will be eventually used as MutationObserver instance
385 |           mo
386 |         ;
387 | 
388 |         dP(self, DROP_BINDINGS, {
389 |           configurable: true,
390 |           value: function () {
391 |             var key;
392 |             // if already dropped get out
393 |             if (dropped) return;
394 |             // flag it as dropped
395 |             dropped = true;
396 |             // clean up all scheduled callbacks
397 |             if (dispatchBindings) {
398 |               for (key in tobeNotified) {
399 |                 if (dispatchDelay) clearTimeout(tobeNotified[key]);
400 |                 else cancelAnimationFrame(tobeNotified[key]);
401 |                 delete tobeNotified[key];
402 |               }
403 |             }
404 |             // clean up all info, getters, setters, etc
405 |             for (key in autobots) delete autobots[key];
406 |             for (key in map) delete map[key];
407 |             for (key in values) delete values[key];
408 |             setBindings(self, {});
409 |             // disconnect the MutationObserver
410 |             if (setMO) mo.disconnect();
411 |             // or remove  all listeners
412 |             else if (hasDAM) attributes.forEach(function (el) {
413 |               off(el, DOM_ATTR_MODIFIED, dAM);
414 |             });
415 |             // or drop the fake setAttribute method
416 |             else attributes.forEach(function (el) {
417 |               delete el[SET_ATTRIBUTE];
418 |             });
419 |           }
420 |         });
421 | 
422 |         // loop over all text nodes
423 |         textNodes.forEach(function (node) {
424 |           var
425 |             isHTML,
426 |             k, m, j, l,
427 |             i = 0,
428 |             value = node.nodeValue,
429 |             nodes = [],
430 |             bound = [],
431 |             parentNode = node.parentNode,
432 |             descriptor
433 |           ;
434 |           while ((m = oneWay.exec(value))) {
435 |             j = m.index;
436 |             l = m[0].length;
437 |             nodes.push(value.slice(i, j));
438 |             bound.push(value.substr(j + 2, l - 4));
439 |             i = j + l;
440 |           }
441 |           // and in case there was some binding in the wild
442 |           if (bound.length) {
443 |             // put last part of the loop in the list of nodes
444 |             nodes.push(value.slice(i));
445 |             // and append all of them
446 |             nodes.forEach(function (text, i) {
447 |               // let's ignore empty text nodes
448 |               if (text.length) parentNode.insertBefore(
449 |                 document.createTextNode(text),
450 |                 node
451 |               );
452 |               // bound nodes are always after regular
453 |               // unless we are at the end of the list
454 |               if (i < bound.length) {
455 |                 k = trim.call(bound[i]);
456 |                 // check if this is an HTML intent
457 |                 isHTML = oneWayHTML.test(k);
458 |                   if (isHTML) k = k.slice(1, -1);
459 |                 if ((m = decepticons.exec(k))) {
460 |                   parentNode.insertBefore(
461 |                     boundTransformer(
462 |                       bindings, autobots, values, m[1], m[2], document, isHTML
463 |                     ),
464 |                     node
465 |                   );
466 |                 } else {
467 |                   setGetSetIfAvailable(values, bindings, k);
468 |                   parentNode.insertBefore(
469 |                     isHTML ?
470 |                     boundFragmentNode(
471 |                       values, k,
472 |                       document,
473 |                       notNull(bindings[k], ''),
474 |                       dispatchBindings,
475 |                       dispatchScheduler
476 |                     ) :
477 |                     boundTextNode(
478 |                       values, k,
479 |                       document.createTextNode(
480 |                         notNull(bindings[k], '')
481 |                       ),
482 |                       dispatchBindings,
483 |                       dispatchScheduler
484 |                     ),
485 |                     node
486 |                   );
487 |                 }
488 |               }
489 |             });
490 |             // drop current node
491 |             node.remove();
492 |           }
493 |         });
494 | 
495 |         attributes.forEach(function (el) {
496 | 
497 |           var
498 |             setAttribute = el[SET_ATTRIBUTE],
499 |             fakeSetAttribute = function (key, value) {
500 |               var previous = state;
501 |               state = STATE_EVENT;  // it's a white lie to simulate DAM
502 |               setAttribute.call(this, key, value);
503 |               // update only known values and only if the context is the right one
504 |               // remember: we have one values per component shared only
505 |               // with its own sub nodes. If somebody .call via different context
506 |               // we don't want the values to be updated
507 |               if (key in map && this === el) values[map[key]] = value;
508 |               state = previous;
509 |             }
510 |           ;
511 | 
512 |           // KnockOut style, data-bind accepts a comma separated list of key/value pairs
513 |           el[GET_ATTRIBUTE]('data-bind')
514 |           .split(comma)
515 |           .filter(function (info, i, all) {
516 |             // sanitizes functions with possible multiple arguments
517 |             if (info.indexOf('(') > 0 && info.indexOf(')') < 0) {
518 |               all[i + 1] = info + ',' + all[i + 1];
519 |               return false;
520 |             }
521 |             return true;
522 |           }).forEach(function (info, i) {
523 | 
524 |             var
525 |               // these pairs can optionally be separated via `:`
526 |               pair = info.split(colon),
527 |               // so that we always have the related element attribute name
528 |               key = pair[0],
529 |               // and eventually the corresponding property name on the binding
530 |               value = pair[1] || key,
531 |               // is this property is one of those "magic" properties ?
532 |               // (value for inputs, selectedIndex for selects, checked for checkbox, etc)
533 |               direct = key in el,
534 |               m = pair[1] && decepticons.exec(value),
535 |               handler,
536 |               setter,
537 |               descriptor,
538 |               onAttached,
539 |               onDetached,
540 |               hasSet,
541 |               v
542 |             ;
543 | 
544 |             // one way binding, the attribute does not trigger changes in values
545 |             // but it gets updated every time one of its parameters changes
546 |             if (m) {
547 |               m[2].split(comma).forEach(optimusPrime, {
548 |                 autobots: autobots,
549 |                 bindings: values,
550 |                 method: bindings[m[1]],
551 |                 source: bindings,
552 |                 onUpdate: direct ?
553 |                   function (value) { el[key] = directMethod(values, value); } :
554 |                   function (value) { setAttribute.call(el, key, value); }
555 |               });
556 |             } else {
557 |               // handy to bring back property name from an attribute one
558 |               map[key] = value;
559 |               // if value has already a setter, don't loose it in the process
560 |               setter = setGetSetIfAvailable(values, bindings, value).set;
561 |               // in case there is a setter, we need to keep that "in mind"
562 |               hasSet = !!setter;
563 |               // if it's a direct property ...
564 |               if (direct) {
565 |                 // we can simply set it as such using provided defaults
566 |                 if (hOP.call(bindings, value)) el[key] =
567 |                   directMethod(values, bindings[value]);
568 |                 // console.log(gOPD(el, 'key'));
569 |                 // whenever we set such property via exported bindings
570 |                 dP(values, value, createGetSet(
571 |                   // we either return it directly
572 |                   function get() { return el[key]; },
573 |                   // or we set it directly
574 |                   function set(v) {
575 |                     var previous = state;
576 |                     state = STATE_DIRECT;
577 |                     // console.log('direct', previous, state);
578 |                     switch (previous) {
579 |                       case STATE_OFF:
580 |                       case STATE_EVENT:
581 |                         el[key] = v;
582 |                         if (dispatchBindings) dispatchScheduler(value);
583 |                         break;
584 |                     }
585 |                     // if there was already a setter
586 |                     // we should probably invoke it
587 |                     if (hasSet) setter.call(values, v);
588 |                     state = previous;
589 |                   }
590 |                 ));
591 |                 // in few specific cases where the input could change via UI
592 |                 // we should update exported bindings property too
593 |                 handler = function (e) {
594 |                   if (dropped) return off(el, e.type, handler);
595 |                   var previous = state;
596 |                   state = STATE_EVENT;
597 |                   values[value] = el[key];
598 |                   state = previous;
599 |                 };
600 |                 switch (key) {
601 |                   case 'value':
602 |                     on(el, 'input', handler);
603 |                   /* falls through */
604 |                   case 'checked':
605 |                   /* falls through */
606 |                   case 'selectedIndex':
607 |                     on(el, 'change', handler);
608 |                     break;
609 |                 }
610 |                 // we also would like to do the same in case
611 |                 // somebody directly changes the input.value
612 |                 // or the selectedIndex
613 |                 descriptor = getInterceptor(el, key);
614 |                 // if we can reuse the descriptor, we're better off this way
615 |                 if (descriptor) {
616 |                   direct = hOP.call(el, key);
617 |                   dP(el, key, {
618 |                     configurable: true,
619 |                     enumerable: descriptor.enumerable,
620 |                     // get it as it's supposed to be get
621 |                     get: descriptor.get,
622 |                     // use the descriptor once set to update the element value
623 |                     // and also update exported bindings property
624 |                     set: function (v) {
625 |                       if (dropped) return direct ?
626 |                         dP(el, key, descriptor) : delete el[key];
627 |                       var previous = state;
628 |                       state = STATE_ATTRIBUTE;
629 |                       descriptor.set.call(el, v);
630 |                       values[value] = v;
631 |                       state = previous;
632 |                     }
633 |                   });
634 |                 }
635 |                 // if we cannot reuse the inherited descriptor
636 |                 // we unfortunately need some utterly ugly polling fallback
637 |                 else {
638 |                   // polling seems to be the best option
639 |                   v = el[key];
640 |                   // each time the following runs ...
641 |                   handler = function () {
642 |                     // don't reschedule if dropped
643 |                     if (dropped) return;
644 |                     // if direct property access is different
645 |                     // from the known value
646 |                     if (el[key] !== v) {
647 |                       // we update the value
648 |                       // and the exported bindings
649 |                       var previous = state;
650 |                       state = STATE_ATTRIBUTE;
651 |                       v = el[key];
652 |                       values[value] = v;
653 |                       state = previous;
654 |                     }
655 |                     // check again ASAP
656 |                     i = schedule(handler);
657 |                   };
658 |                   // in order to have a not so greedy schedule
659 |                   // let's disable scheduling when the component
660 |                   // is not even on the DOM
661 |                   // TODO: should this actually run regardless?
662 |                   onAttached = self[ON_ATTACHED];
663 |                   onDetached = self[ON_DETACHED];
664 |                   dP(self, ON_ATTACHED, {
665 |                     configurable: true,
666 |                     value: function () {
667 |                       if (!dropped) handler(cancel(i));
668 |                       if (onAttached) onAttached.apply(el, arguments);
669 |                     }
670 |                   });
671 |                   dP(self, ON_DETACHED, {
672 |                     configurable: true,
673 |                     value: function () {
674 |                       if (!dropped) cancel(i);
675 |                       if (onDetached) onDetached.apply(el, arguments);
676 |                     }
677 |                   });
678 |                   // let's start checking
679 |                   handler();
680 |                 }
681 |               }
682 |               // here we are in setAttribute land
683 |               else {
684 |                 // we can use the native method to set default value, if any
685 |                 if (hOP.call(bindings, value)) setAttribute.call(el, key, bindings[value]);
686 |                 // now we can set a different operation to update exported bindings
687 |                 dP(values, value, createGetSet(
688 |                   // we use getAttribute when accessed
689 |                   function get() { return el[GET_ATTRIBUTE](key); },
690 |                   // and we use native setAttribute when changed
691 |                   function set(v) {
692 |                     var previous = state;
693 |                     state = STATE_ATTRIBUTE;
694 |                     // console.log('attribute', previous, state);
695 |                     switch (previous) {
696 |                       case STATE_OFF:
697 |                       case STATE_DIRECT:
698 |                         if (hasMo) mo.disconnect();
699 |                         else if(hasDAM) off(el, DOM_ATTR_MODIFIED, dAM);
700 |                         setAttribute.call(el, key, v);
701 |                         if (dispatchBindings) dispatchScheduler(value);
702 |                         if (hasMo) mo.observe(self, whatToObserve);
703 |                         else if(hasDAM) on(el, DOM_ATTR_MODIFIED, dAM);
704 |                         break;
705 |                     }
706 |                     // here again, if there was already a setter
707 |                     // we should probably invoke it
708 |                     if (hasSet) setter.call(values, v);
709 |                     state = previous;
710 |                   }
711 |                 ));
712 |                 // if we need to know about attributes
713 |                 // and MutationObserver is available
714 |                 if (hasMo) setMO = true; // let's use it
715 |                 // otherwise if DOMAttributeModified works
716 |                 // let's set a listener
717 |                 else if (hasDAM) on(el, DOM_ATTR_MODIFIED, dAM);
718 |                 // otherwise let's set once the  new fake method
719 |                 // it will simulate an event as if it was a DOMAttrModified
720 |                 else if (el[SET_ATTRIBUTE] !== fakeSetAttribute){
721 |                   dP(el, SET_ATTRIBUTE, {
722 |                     configurable: true,
723 |                     value: fakeSetAttribute
724 |                   });
725 |                 }
726 |               }
727 |             }
728 |           });
729 |           // if it's' a nested element avoid parsing from parent containers
730 |           el.removeAttribute('data-bind');
731 |         });
732 | 
733 |         // if MutationObserver is available and
734 |         // if there was at least one attribute to listen to
735 |         if (setMO) {
736 |           // we can recreate a MutationObserver
737 |           mo = new MO(function (records) {
738 |             var previous = state;
739 |             state = STATE_EVENT;
740 |             // console.log('Mutation Observer', previous, state);
741 |             for (var key, r, i = 0; i < records.length; i++) {
742 |               r = records[i];
743 |               // if it's about an attribute
744 |               if (r.type === 'attributes') {
745 |                 key = r.attributeName;
746 |                 // and there is a key to take care of
747 |                 // and such key is also well known
748 |                 /* jshint eqnull:true */
749 |                 if (key != null && key in map) {
750 |                   // we can update the value
751 |                   values[map[key]] = r.target[GET_ATTRIBUTE](key);
752 |                 }
753 |               }
754 |             }
755 |             state = previous;
756 |           });
757 |           // let's observe the node and its subnodes
758 |           mo.observe(self, whatToObserve);
759 | 
760 |           /* // TODO: should mo stop listening when offline ?
761 |           dP(self, 'attachedCallback', {
762 |             configurable: true,
763 |             value: function () {
764 |               mo.observe(self, whatToObserve);
765 |               if (onAttached) onAttached.apply(self, arguments);
766 |             }
767 |           });
768 |           dP(self, 'detachedCallback', {
769 |             configurable: true,
770 |             value: function () {
771 |               mo.disconnect();
772 |               if (onDetached) onDetached.apply(self, arguments);
773 |             }
774 |           });
775 |           //*/
776 | 
777 |         }
778 | 
779 |         // values object is the one exported as bindings
780 |         setBindings(self, values);
781 | 
782 |         return self;
783 | 
784 |       }
785 |     };
786 | 
787 |   }(Object))
788 | });


--------------------------------------------------------------------------------
/demo/vitamer-mixins.js:
--------------------------------------------------------------------------------
1 | /*! (C) Andrea Giammarchi - @WebReflection - Mit Style License */
2 | /*@cc_on (function(f){window.setTimeout=f(window.setTimeout);window.setInterval=f(window.setInterval)})(function(f){return function(c,t){var a=[].slice.call(arguments,2);return f(function(){c.apply(this,a)},t)}}); @*/
3 | (function(e){"use strict";function t(){return c.createDocumentFragment()}function n(e){return c.createElement(e)}function r(e,t){if(!e)throw new Error("Failed to construct "+t+": 1 argument required, but only 0 present.")}function i(e){if(e.length===1)return s(e[0]);for(var n=t(),r=R.call(e),i=0;i<e.length;i++)n.appendChild(s(r[i]));return n}function s(e){return typeof e=="string"?c.createTextNode(e):e}for(var o,u,a,f,l,c=e.document,h=Object.prototype.hasOwnProperty,p=Object.defineProperty||function(e,t,n){return h.call(n,"value")?e[t]=n.value:(h.call(n,"get")&&e.__defineGetter__(t,n.get),h.call(n,"set")&&e.__defineSetter__(t,n.set)),e},d=[].indexOf||function(t){var n=this.length;while(n--)if(this[n]===t)break;return n},v=function(e){if(!e)throw"SyntaxError";if(w.test(e))throw"InvalidCharacterError";return e},m=function(e){var t=typeof e.className=="undefined",n=t?e.getAttribute("class")||"":e.className,r=t||typeof n=="object",i=(r?t?n:n.baseVal:n).replace(b,"");i.length&&q.push.apply(this,i.split(w)),this._isSVG=r,this._=e},g={get:function(){return new m(this)},set:function(){}},y="dom4-tmp-".concat(Math.random()*+(new Date)).replace(".","-"),b=/^\s+|\s+$/g,w=/\s+/,E=" ",S="classList",x=function(t,n){if(this.contains(t))n||this.remove(t);else if(n===undefined||n)n=!0,this.add(t);return!!n},T=e.DocumentFragment&&DocumentFragment.prototype,N=e.Node,C=(N||Element).prototype,k=e.CharacterData||N,L=k&&k.prototype,A=e.DocumentType,O=A&&A.prototype,M=(e.Element||N||e.HTMLElement).prototype,_=e.HTMLSelectElement||n("select").constructor,D=_.prototype.remove,P=e.ShadowRoot,H=e.SVGElement,B=/ /g,j="\\ ",F=function(e){var t=e==="querySelectorAll";return function(n){var r,i,s,o,u,a,f=this.parentNode;if(f){for(s=this.getAttribute("id")||y,o=s===y?s:s.replace(B,j),a=n.split(","),i=0;i<a.length;i++)a[i]="#"+o+" "+a[i];n=a.join(",")}s===y&&this.setAttribute("id",s),u=(f||this)[e](n),s===y&&this.removeAttribute("id");if(t){i=u.length,r=new Array(i);while(i--)r[i]=u[i]}else r=u;return r}},I=function(e){"query"in e||(e.query=M.query),"queryAll"in e||(e.queryAll=M.queryAll)},q=["matches",M.matchesSelector||M.webkitMatchesSelector||M.khtmlMatchesSelector||M.mozMatchesSelector||M.msMatchesSelector||M.oMatchesSelector||function(t){var n=this.parentNode;return!!n&&-1<d.call(n.querySelectorAll(t),this)},"closest",function(t){var n=this,r;while((r=n&&n.matches)&&!n.matches(t))n=n.parentNode;return r?n:null},"prepend",function(){var t=this.firstChild,n=i(arguments);t?this.insertBefore(n,t):this.appendChild(n)},"append",function(){this.appendChild(i(arguments))},"before",function(){var t=this.parentNode;t&&t.insertBefore(i(arguments),this)},"after",function(){var t=this.parentNode,n=this.nextSibling,r=i(arguments);t&&(n?t.insertBefore(r,n):t.appendChild(r))},"replace",function(){this.replaceWith.apply(this,arguments)},"replaceWith",function(){var t=this.parentNode;t&&t.replaceChild(i(arguments),this)},"remove",function(){var t=this.parentNode;t&&t.removeChild(this)},"query",F("querySelector"),"queryAll",F("querySelectorAll")],R=q.slice,U=q.length;U;U-=2){u=q[U-2],u in M||(M[u]=q[U-1]),u==="remove"&&(_.prototype[u]=function(){return 0<arguments.length?D.apply(this,arguments):M.remove.call(this)}),/^(?:before|after|replace|replaceWith|remove)$/.test(u)&&(k&&!(u in L)&&(L[u]=q[U-1]),A&&!(u in O)&&(O[u]=q[U-1]));if(/^(?:append|prepend)$/.test(u))if(T)u in T||(T[u]=q[U-1]);else try{t().constructor.prototype[u]=q[U-1]}catch(z){}}I(c);if(T)I(T);else try{I(t().constructor.prototype)}catch(z){}P&&I(P.prototype),n("a").matches("a")||(M[u]=function(e){return function(n){return e.call(this.parentNode?this:t().appendChild(this),n)}}(M[u])),m.prototype={length:0,add:function(){for(var t=0,n;t<arguments.length;t++)n=arguments[t],this.contains(n)||q.push.call(this,u);this._isSVG?this._.setAttribute("class",""+this):this._.className=""+this},contains:function(e){return function(n){return U=e.call(this,u=v(n)),-1<U}}([].indexOf||function(e){U=this.length;while(U--&&this[U]!==e);return U}),item:function(t){return this[t]||null},remove:function(){for(var t=0,n;t<arguments.length;t++)n=arguments[t],this.contains(n)&&q.splice.call(this,U,1);this._isSVG?this._.setAttribute("class",""+this):this._.className=""+this},toggle:x,toString:function W(){return q.join.call(this,E)}},H&&!(S in H.prototype)&&p(H.prototype,S,g),S in c.documentElement?(f=n("div")[S],f.add("a","b","a"),"a b"!=f&&(a=f.constructor.prototype,"add"in a||(a=e.TemporaryTokenList.prototype),l=function(e){return function(){var t=0;while(t<arguments.length)e.call(this,arguments[t++])}},a.add=l(a.add),a.remove=l(a.remove),a.toggle=x)):p(M,S,g),"contains"in C||p(C,"contains",{value:function(e){while(e&&e!==this)e=e.parentNode;return this===e}}),"head"in c||p(c,"head",{get:function(){return o||(o=c.getElementsByTagName("head")[0])}}),function(){for(var t,n=e.requestAnimationFrame,r=e.cancelAnimationFrame,i=["o","ms","moz","webkit"],s=i.length;!r&&s--;)n=n||e[i[s]+"RequestAnimationFrame"],r=e[i[s]+"CancelAnimationFrame"]||e[i[s]+"CancelRequestAnimationFrame"];r||(n?(t=n,n=function(e){var n=!0;return t(function(){n&&e.apply(this,arguments)}),function(){n=!1}},r=function(e){e()}):(n=function(e){return setTimeout(e,15,15)},r=function(e){clearTimeout(e)})),e.requestAnimationFrame=n,e.cancelAnimationFrame=r}();try{new e.CustomEvent("?")}catch(z){e.CustomEvent=function(e,t){function n(n,i){var s=c.createEvent(e);if(typeof n!="string")throw new Error("An event name must be provided");return e=="Event"&&(s.initCustomEvent=r),i==null&&(i=t),s.initCustomEvent(n,i.bubbles,i.cancelable,i.detail),s}function r(e,t,n,r){this.initEvent(e,t,n),this.detail=r}return n}(e.CustomEvent?"CustomEvent":"Event",{bubbles:!1,cancelable:!1,detail:null})}try{new Event("_")}catch(z){z=function(e){function t(e,t){r(arguments.length,"Event");var n=c.createEvent("Event");return t||(t={}),n.initEvent(e,!!t.bubbles,!!t.cancelable),n}return t.prototype=e.prototype,t}(e.Event||function(){}),p(e,"Event",{value:z}),Event!==z&&(Event=z)}try{new KeyboardEvent("_",{})}catch(z){z=function(t){function a(e){for(var t=[],n=["ctrlKey","Control","shiftKey","Shift","altKey","Alt","metaKey","Meta","altGraphKey","AltGraph"],r=0;r<n.length;r+=2)e[n[r]]&&t.push(n[r+1]);return t.join(" ")}function f(e,t){for(var n in t)t.hasOwnProperty(n)&&!t.hasOwnProperty.call(e,n)&&(e[n]=t[n]);return e}function l(e,t,n){try{t[e]=n[e]}catch(r){}}function h(t,o){r(arguments.length,"KeyboardEvent"),o=f(o||{},i);var u=c.createEvent(s),h=o.ctrlKey,p=o.shiftKey,d=o.altKey,v=o.metaKey,m=o.altGraphKey,g=n>3?a(o):null,y=String(o.key),b=String(o.char),w=o.location,E=o.keyCode||(o.keyCode=y)&&y.charCodeAt(0)||0,S=o.charCode||(o.charCode=b)&&b.charCodeAt(0)||0,x=o.bubbles,T=o.cancelable,N=o.repeat,C=o.locale,k=o.view||e,L;o.which||(o.which=o.keyCode);if("initKeyEvent"in u)u.initKeyEvent(t,x,T,k,h,d,p,v,E,S);else if(0<n&&"initKeyboardEvent"in u){L=[t,x,T,k];switch(n){case 1:L.push(y,w,h,p,d,v,m);break;case 2:L.push(h,d,p,v,E,S);break;case 3:L.push(y,w,h,d,p,v,m);break;case 4:L.push(y,w,g,N,C);break;default:L.push(char,y,w,g,N,C)}u.initKeyboardEvent.apply(u,L)}else u.initEvent(t,x,T);for(y in u)i.hasOwnProperty(y)&&u[y]!==o[y]&&l(y,u,o);return u}var n=0,i={"char":"",key:"",location:0,ctrlKey:!1,shiftKey:!1,altKey:!1,metaKey:!1,altGraphKey:!1,repeat:!1,locale:navigator.language,detail:0,bubbles:!1,cancelable:!1,keyCode:0,charCode:0,which:0},s;try{var o=c.createEvent("KeyboardEvent");o.initKeyboardEvent("keyup",!1,!1,e,"+",3,!0,!1,!0,!1,!1),n=(o.keyIdentifier||o.key)=="+"&&(o.keyLocation||o.location)==3&&(o.ctrlKey?o.altKey?1:3:o.shiftKey?2:4)||9}catch(u){}return s=0<n?"KeyboardEvent":"Event",h.prototype=t.prototype,h}(e.KeyboardEvent||function(){}),p(e,"KeyboardEvent",{value:z}),KeyboardEvent!==z&&(KeyboardEvent=z)}try{new MouseEvent("_",{})}catch(z){z=function(t){function n(t,n){r(arguments.length,"MouseEvent");var i=c.createEvent("MouseEvent");return n||(n={}),i.initMouseEvent(t,!!n.bubbles,!!n.cancelable,n.view||e,n.detail||1,n.screenX||0,n.screenY||0,n.clientX||0,n.clientY||0,!!n.ctrlKey,!!n.altKey,!!n.shiftKey,!!n.metaKey,n.button||0,n.relatedTarget||null),i}return n.prototype=t.prototype,n}(e.MouseEvent||function(){}),p(e,"MouseEvent",{value:z}),MouseEvent!==z&&(MouseEvent=z)}})(window),function(e){"use strict";function n(){}function r(e,t,n){function i(e){i.once&&(e.currentTarget.removeEventListener(e.type,t,i),i.removed=!0),i.passive&&(e.preventDefault=r.preventDefault),typeof i.callback=="function"?i.callback.call(this,e):i.callback&&i.callback.handleEvent(e),i.passive&&delete e.preventDefault}return i.type=e,i.callback=t,i.capture=!!n.capture,i.passive=!!n.passive,i.once=!!n.once,i.removed=!1,i}var t=e.WeakMap||function(){function s(e,i,s){n=s,t=!1,r=undefined,e.dispatchEvent(i)}function o(e){this.value=e}function u(){e++,this.__ce__=new i("@DOMMap:"+e+Math.random())}var e=0,t=!1,n=!1,r;return o.prototype.handleEvent=function(i){t=!0,n?i.currentTarget.removeEventListener(i.type,this,!1):r=this.value},u.prototype={constructor:u,"delete":function(n){return s(n,this.__ce__,!0),t},get:function(t){s(t,this.__ce__,!1);var n=r;return r=undefined,n},has:function(n){return s(n,this.__ce__,!1),t},set:function(t,n){return s(t,this.__ce__,!0),t.addEventListener(this.__ce__.type,new o(n),!1),this}},u}();n.prototype=(Object.create||Object)(null),r.preventDefault=function(){};var i=e.CustomEvent,s=Object.prototype.hasOwnProperty,o=e.dispatchEvent,u=e.addEventListener,a=e.removeEventListener,f=0,l=function(){f++},c=[].indexOf||function(t){var n=this.length;while(n--)if(this[n]===t)break;return n},h=function(e){return"".concat(e.capture?"1":"0",e.passive?"1":"0",e.once?"1":"0")},p,d;try{u("_",l,{once:!0}),o(new i("_")),o(new i("_")),a("_",l,{once:!0})}catch(v){}f!==1&&function(){function s(e){return function(s,o,u){if(u&&typeof u!="boolean"){var a=i.get(this),f=h(u),l,p,d;a||i.set(this,a=new n),s in a||(a[s]={handler:[],wrap:[]}),p=a[s],l=c.call(p.handler,o),l<0?(l=p.handler.push(o)-1,p.wrap[l]=d=new n):d=p.wrap[l],f in d||(d[f]=r(s,o,u),e.call(this,s,d[f],d[f].capture))}else e.call(this,s,o,u)}}function o(e){return function(n,r,s){if(s&&typeof s!="boolean"){var o=i.get(this),u,a,f,l;if(o&&n in o){f=o[n],a=c.call(f.handler,r);if(-1<a){u=h(s),l=f.wrap[a];if(u in l){e.call(this,n,l[u],l[u].capture),delete l[u];for(u in l)return;f.handler.splice(a,1),f.wrap.splice(a,1),f.handler.length===0&&delete o[n]}}}}else e.call(this,n,r,s)}}var i=new t;p=function(e){if(!e)return;var t=e.prototype;t.addEventListener=s(t.addEventListener),t.removeEventListener=o(t.removeEventListener)},e.EventTarget?p(EventTarget):(p(e.Text),p(e.Element||e.HTMLElement),p(e.HTMLDocument),p(e.Window||{prototype:e}),p(e.XMLHttpRequest))}()}(self);
4 | (function(e,t,n,r){"use strict";function rt(e,t){for(var n=0,r=e.length;n<r;n++)vt(e[n],t)}function it(e){for(var t=0,n=e.length,r;t<n;t++)r=e[t],nt(r,b[ot(r)])}function st(e){return function(t){j(t)&&(vt(t,e),rt(t.querySelectorAll(w),e))}}function ot(e){var t=e.getAttribute("is"),n=e.nodeName.toUpperCase(),r=S.call(y,t?v+t.toUpperCase():d+n);return t&&-1<r&&!ut(n,t)?-1:r}function ut(e,t){return-1<w.indexOf(e+'[is="'+t+'"]')}function at(e){var t=e.currentTarget,n=e.attrChange,r=e.attrName,i=e.target;Q&&(!i||i===t)&&t.attributeChangedCallback&&r!=="style"&&e.prevValue!==e.newValue&&t.attributeChangedCallback(r,n===e[a]?null:e.prevValue,n===e[l]?null:e.newValue)}function ft(e){var t=st(e);return function(e){X.push(t,e.target)}}function lt(e){K&&(K=!1,e.currentTarget.removeEventListener(h,lt)),rt((e.target||t).querySelectorAll(w),e.detail===o?o:s),B&&pt()}function ct(e,t){var n=this;q.call(n,e,t),G.call(n,{target:n})}function ht(e,t){D(e,t),et?et.observe(e,z):(J&&(e.setAttribute=ct,e[i]=Z(e),e.addEventListener(p,G)),e.addEventListener(c,at)),e.createdCallback&&Q&&(e.created=!0,e.createdCallback(),e.created=!1)}function pt(){for(var e,t=0,n=F.length;t<n;t++)e=F[t],E.contains(e)||(n--,F.splice(t--,1),vt(e,o))}function dt(e){throw new Error("A "+e+" type is already registered")}function vt(e,t){var n,r=ot(e);-1<r&&(tt(e,b[r]),r=0,t===s&&!e[s]?(e[o]=!1,e[s]=!0,r=1,B&&S.call(F,e)<0&&F.push(e)):t===o&&!e[o]&&(e[s]=!1,e[o]=!0,r=1),r&&(n=e[t+"Callback"])&&n.call(e))}if(r in t)return;var i="__"+r+(Math.random()*1e5>>0),s="attached",o="detached",u="extends",a="ADDITION",f="MODIFICATION",l="REMOVAL",c="DOMAttrModified",h="DOMContentLoaded",p="DOMSubtreeModified",d="<",v="=",m=/^[A-Z][A-Z0-9]*(?:-[A-Z0-9]+)+$/,g=["ANNOTATION-XML","COLOR-PROFILE","FONT-FACE","FONT-FACE-SRC","FONT-FACE-URI","FONT-FACE-FORMAT","FONT-FACE-NAME","MISSING-GLYPH"],y=[],b=[],w="",E=t.documentElement,S=y.indexOf||function(e){for(var t=this.length;t--&&this[t]!==e;);return t},x=n.prototype,T=x.hasOwnProperty,N=x.isPrototypeOf,C=n.defineProperty,k=n.getOwnPropertyDescriptor,L=n.getOwnPropertyNames,A=n.getPrototypeOf,O=n.setPrototypeOf,M=!!n.__proto__,_=n.create||function mt(e){return e?(mt.prototype=e,new mt):this},D=O||(M?function(e,t){return e.__proto__=t,e}:L&&k?function(){function e(e,t){for(var n,r=L(t),i=0,s=r.length;i<s;i++)n=r[i],T.call(e,n)||C(e,n,k(t,n))}return function(t,n){do e(t,n);while((n=A(n))&&!N.call(n,t));return t}}():function(e,t){for(var n in t)e[n]=t[n];return e}),P=e.MutationObserver||e.WebKitMutationObserver,H=(e.HTMLElement||e.Element||e.Node).prototype,B=!N.call(H,E),j=B?function(e){return e.nodeType===1}:function(e){return N.call(H,e)},F=B&&[],I=H.cloneNode,q=H.setAttribute,R=H.removeAttribute,U=t.createElement,z=P&&{attributes:!0,characterData:!0,attributeOldValue:!0},W=P||function(e){J=!1,E.removeEventListener(c,W)},X,V=e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,10)},$=!1,J=!0,K=!0,Q=!0,G,Y,Z,et,tt,nt;O||M?(tt=function(e,t){N.call(t,e)||ht(e,t)},nt=ht):(tt=function(e,t){e[i]||(e[i]=n(!0),ht(e,t))},nt=tt),B?(J=!1,function(){var e=k(H,"addEventListener"),t=e.value,n=function(e){var t=new CustomEvent(c,{bubbles:!0});t.attrName=e,t.prevValue=this.getAttribute(e),t.newValue=null,t[l]=t.attrChange=2,R.call(this,e),this.dispatchEvent(t)},r=function(e,t){var n=this.hasAttribute(e),r=n&&this.getAttribute(e),i=new CustomEvent(c,{bubbles:!0});q.call(this,e,t),i.attrName=e,i.prevValue=n?r:null,i.newValue=t,n?i[f]=i.attrChange=1:i[a]=i.attrChange=0,this.dispatchEvent(i)},s=function(e){var t=e.currentTarget,n=t[i],r=e.propertyName,s;n.hasOwnProperty(r)&&(n=n[r],s=new CustomEvent(c,{bubbles:!0}),s.attrName=n.name,s.prevValue=n.value||null,s.newValue=n.value=t[r]||null,s.prevValue==null?s[a]=s.attrChange=0:s[f]=s.attrChange=1,t.dispatchEvent(s))};e.value=function(e,o,u){e===c&&this.attributeChangedCallback&&this.setAttribute!==r&&(this[i]={className:{name:"class",value:this.className}},this.setAttribute=r,this.removeAttribute=n,t.call(this,"propertychange",s)),t.call(this,e,o,u)},C(H,"addEventListener",e)}()):P||(E.addEventListener(c,W),E.setAttribute(i,1),E.removeAttribute(i),J&&(G=function(e){var t=this,n,r,s;if(t===e.target){n=t[i],t[i]=r=Z(t);for(s in r){if(!(s in n))return Y(0,t,s,n[s],r[s],a);if(r[s]!==n[s])return Y(1,t,s,n[s],r[s],f)}for(s in n)if(!(s in r))return Y(2,t,s,n[s],r[s],l)}},Y=function(e,t,n,r,i,s){var o={attrChange:e,currentTarget:t,attrName:n,prevValue:r,newValue:i};o[s]=e,at(o)},Z=function(e){for(var t,n,r={},i=e.attributes,s=0,o=i.length;s<o;s++)t=i[s],n=t.name,n!=="setAttribute"&&(r[n]=t.value);return r})),t[r]=function(n,r){c=n.toUpperCase(),$||($=!0,P?(et=function(e,t){function n(e,t){for(var n=0,r=e.length;n<r;t(e[n++]));}return new P(function(r){for(var i,s,o,u=0,a=r.length;u<a;u++)i=r[u],i.type==="childList"?(n(i.addedNodes,e),n(i.removedNodes,t)):(s=i.target,Q&&s.attributeChangedCallback&&i.attributeName!=="style"&&(o=s.getAttribute(i.attributeName),o!==i.oldValue&&s.attributeChangedCallback(i.attributeName,i.oldValue,o)))})}(st(s),st(o)),et.observe(t,{childList:!0,subtree:!0})):(X=[],V(function E(){while(X.length)X.shift().call(null,X.shift());V(E)}),t.addEventListener("DOMNodeInserted",ft(s)),t.addEventListener("DOMNodeRemoved",ft(o))),t.addEventListener(h,lt),t.addEventListener("readystatechange",lt),t.createElement=function(e,n){var r=U.apply(t,arguments),i=""+e,s=S.call(y,(n?v:d)+(n||i).toUpperCase()),o=-1<s;return n&&(r.setAttribute("is",n=n.toLowerCase()),o&&(o=ut(i.toUpperCase(),n))),Q=!t.createElement.innerHTMLHelper,o&&nt(r,b[s]),r},H.cloneNode=function(e){var t=I.call(this,!!e),n=ot(t);return-1<n&&nt(t,b[n]),e&&it(t.querySelectorAll(w)),t}),-2<S.call(y,v+c)+S.call(y,d+c)&&dt(n);if(!m.test(c)||-1<S.call(g,c))throw new Error("The type "+n+" is invalid");var i=function(){return f?t.createElement(l,c):t.createElement(l)},a=r||x,f=T.call(a,u),l=f?r[u].toUpperCase():c,c,p;return f&&-1<S.call(y,d+l)&&dt(l),p=y.push((f?v:d)+c)-1,w=w.concat(w.length?",":"",f?l+'[is="'+n.toLowerCase()+'"]':l),i.prototype=b[p]=T.call(a,"prototype")?a.prototype:_(H),rt(t.querySelectorAll(w),s),i}})(window,document,Object,"registerElement");
5 | var restyle=function(e){"use strict";function f(e,t,n,r,i){this.component=e,this.node=t,this.css=n,this.prefixes=r,this.doc=i}function l(e){e instanceof f||(e=a(this.component,e,this.prefixes,this.doc)),this.remove(),f.call(this,e.component,e.node,e.css,e.prefixes,e.doc)}function c(e,t,n){return t+"-"+n.toLowerCase()}function h(e,t,n){var i=[],s=typeof t=="number"?"px":"",o=e.replace(r,c),u;for(u=0;u<n.length;u++)i.push("-",n[u],"-",o,":",t,s,";");return i.push(o,":",t,s,";"),i.join("")}function p(e,t){return e.length?e+"-"+t:t}function d(e,t,r,i){var s,u,a;for(s in r)if(n.call(r,s))if(typeof r[s]=="object")if(o(r[s])){u=r[s];for(a=0;a<u.length;a++)e.push(h(p(t,s),u[a],i))}else d(e,p(t,s),r[s],i);else e.push(h(p(t,s),r[s],i));return e.join("")}function v(e,t,r){var o=[],a,f,l,c,h,p,m,g,y,b;for(m in t)if(n.call(t,m)){b=m.length,b||(m=e.slice(0,-1)),a=m.charAt(0)==="@",p=a||!e.indexOf(m+" "),f=a&&s.test(m)?e:"",l=a&&!i.test(m),c=l?m.slice(1):m,g=u.concat(t[b?m:""]);for(y=0;y<g.length;y++){h=g[y];if(l){b=r.length;while(b--)o.push("@-",r[b],"-",c,"{",v(f,h,[r[b]]),"}");o.push(m,"{",v(f,h,r),"}")}else o.push(p?m:e+m,"{",d([],"",h,r),"}")}}return o.join("")}var t=e.toString,n=e.hasOwnProperty,r=/([a-z])([A-Z])/g,i=/^@(?:page|font-face)/,s=/^@(?:media)/,o=Array.isArray||function(e){return t.call(e)==="[object Array]"},u=[],a;return f.prototype={overwrite:l,replace:l,set:l,remove:function(){var e=this.node,t=e.parentNode;t&&t.removeChild(e)},valueOf:function(){return this.css}},{"undefined":!0}[typeof document]?(a=function(e,t,n){return typeof e=="object"?(n=t,t=e,e=""):e+=" ",v(e,t,n||u)},a.restyle=a):a=function(e,t,n,r){typeof e=="object"?(r=n,n=t,t=e,i=e=""):i=e+" ";var i,s=r||(r=document),o=v(i,t,n||(n=a.prefixes)),u=s.head||s.getElementsByTagName("head")[0]||s.documentElement,l=u.insertBefore(s.createElement("style"),u.lastChild);return l.type="text/css",l.styleSheet?l.styleSheet.cssText=o:l.appendChild(s.createTextNode(o)),new f(e,l,o,n,r)},{"undefined":!0}[typeof window]||(a.animate=function(t){var n=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.msRequestAnimationFrame||function(e){setTimeout(e,10)},r={},i="restyle-".concat(Math.random()*+(new Date),"-"),s=0,o,u;switch(!0){case!!t.AnimationEvent:o="animationend";break;case!!t.WebKitAnimationEvent:o="webkitAnimationEnd";break;case!!t.MSAnimationEvent:o="MSAnimationEnd";break;case!!t.OAnimationEvent:o="oanimationend"}switch(!0){case!!t.TransitionEvent:u="transitionend";break;case!!t.WebKitTransitionEvent:u="webkitTransitionEnd";break;case!!t.MSTransitionEvent:u="MSTransitionEnd";break;case!!t.OTransitionEvent:u="oTransitionEnd"}a.transition=function(e,t,o){function b(){u?e.removeEventListener(u,E,!1):(clearTimeout(y),y=0)}function w(){d[v]=g.last=S(h,c.shift()),g.css.replace(d),u?e.addEventListener(u,E,!1):y=setTimeout(E,10)}function E(t){b(),c.length?n(w):(t?t.detail=m:t=new CustomEvent("transitionend",{detail:m}),o&&o.call(e,t))}function S(e,t){for(var n in t)e[n]=t[n];return e}var f=t.transition||"all .3s ease-out",l=e.getAttribute("id"),c=[].concat(t.to),h=S({},t.from),p=!l,d={},v,m,g,y;return p&&e.setAttribute("id",l=(i+s++).replace(".","-")),v="#"+l,r.hasOwnProperty(l)?(g=r[l],h=g.last=S(g.last,h),d[v]=h,g.transition.remove(),g.css.replace(d)):g=r[l]={last:d[v]=h,css:a(d)},n(function(){d[v]={transition:f},g.transition=a(d),n(w)}),m={clean:function(){p&&e.removeAttribute("id"),b(),g.transition.remove(),g.css.remove(),delete r[l]},drop:b}},f.prototype.getAnimationDuration=function(e,t){for(var n,r,i=e.className.split(/\s+/),s=i.length;s--;){n=i[s];if(n.length&&(new RegExp("\\."+n+"(?:|\\{|\\,)([^}]+?)\\}")).test(this.css)){n=RegExp.$1;if((new RegExp("animation-name:"+t+";.*?animation-duration:([^;]+?);")).test(n)||(new RegExp("animation:\\s*"+t+"\\s+([^\\s]+?);")).test(n)){n=RegExp.$1,r=parseFloat(n);if(r)return r*(/[^m]s$/.test(n)?1e3:1)}}}return-1},f.prototype.getTransitionDuration=function(e){var t=getComputedStyle(e),n=t.getPropertyValue("transition-duration")||/\s(\d+(?:ms|s))/.test(t.getPropertyValue("transition"))&&RegExp.$1;return parseFloat(n)*(/[^m]s$/.test(n)?1e3:1)},f.prototype.transit=u?function(e,t){function n(n){r(),t.call(e,n)}function r(){e.removeEventListener(u,n,!1)}return e.addEventListener(u,n,!1),{drop:r}}:function(e,t){var n=setTimeout(t,this.getTransitionDuration(e));return{drop:function(){clearTimeout(n)}}},f.prototype.animate=o?function(t,n,r){function i(e){e.animationName===n&&(s(),r.call(t,e))}function s(){t.removeEventListener(o,i,!1)}return t.addEventListener(o,i,!1),{drop:s}}:function(n,r,i){var s,o,u=this.getAnimationDuration(n,r);return u<0?o=e:(s=setTimeout(function(){i.call(n,{type:"animationend",animationName:r,currentTarget:n,target:n,stopImmediatePropagation:e,stopPropagation:e,preventDefault:e})},u),o=function(){clearTimeout(s)}),{drop:o}}}(window)),a.customElement=function(e,t,n){var r,i="extends",s=Object.create(t.prototype),o={prototype:s},u=o.hasOwnProperty,f=n&&u.call(n,i);f&&(o[i]=n[i]);for(r in n)r!==i&&(s[r]=r==="css"?a(f?n[i]+"[is="+e+"]":e,n[r]):n[r]);return document.registerElement(e,o)},a.prefixes=["webkit","moz","ms","o"],a}({});
6 | var Class=Class||function(e){"use strict";function D(e,t,n,r){for(var s,o=[],u=0;u<e.length;u++)s=X(e[u]),d.call(s,i)&&o.push(s[i]),B(s,t,n,!1,!1,r);return o}function P(e){for(var t,n,r,i=y(N(e)),s=C(e),o=0;o<s.length;o++)t=s[o],n=E(e,t),d.call(n,f)&&j(n,P),w(i,t,n);return i}function H(e,t){for(var n,r,i,s,o=C(e),u=0;u<o.length;u++)n=o[u],r=E(e,n),d.call(t,n)?d.call(r,f)&&(i=r[f],z(i)&&(r=E(t,n),d.call(r,f)&&(s=r[f],z(s)&&H(i,s)))):(d.call(r,f)&&j(r,P),w(t,n,r))}function B(e,t,n,r,i,s){for(var o,u=typeof e!="function",a=C(e),f=0;f<a.length;f++)o=a[f],(u||A.call(L,o)<0)&&U(o,i)&&(d.call(t,o)&&J("duplicated: "+o.toString()),V(n,t,o,E(e,o),r,s))}function j(e,t){var n=e[f];z(n)&&(e[f]=t(n))}function F(e,t){var n=function(){};return e&&""+t!=""+n?function(){return t.apply(this,arguments)}:n}function I(e,t,n,r){var i=R(t,r);w(e,t,{enumerable:!1,configurable:i,writable:i,value:n})}function q(e){return e?(e<65||90<e)&&(e<97||122<e)&&e!==95:!0}function R(e,t){return t?!W(e):!0}function U(e,a){return e!==t&&e!==n&&e!==r&&e!==s&&e!==o&&e!==u&&e!==l&&(a||e!==i)}function z(e){return e!=null&&typeof e=="object"}function W(e){for(var t,n=0;n<e.length;n++){t=e.charCodeAt(n);if((t<65||90<t)&&t!==95)return!1}return!0}function X(t){if(z(t))return t;var n,r,s,o,u;if(t.isClass){t.length&&J((t.name||"Class")+" should not expect arguments");for(o={init:t},u=t.prototype;u&&u!==e.prototype;u=N(u))for(n=0,s=C(u);n<s.length;n++)r=s[n],U(r,!1)&&!d.call(o,r)&&w(o,r,E(u,r))}else for(n=0,o={},u=t({}),s=C(u);n<s.length;n++)r=s[n],r!==i&&(~r.toString().indexOf("mixin:init")&&k(u[r])?o.init=u[r][0]:w(o,r,E(u,r)));return o}function V(e,n,r,i,s,o){var u=d.call(i,f),a,l;if(s){if(d.call(n,r)){e&&z(n[r])&&z(e[t][r])&&H(e[t][r],n[r]);return}u&&j(i,P)}else u?(l=i[f],typeof l=="function"&&M(l)&&(i[f]=K(e,r,l,s))):o&&(Q(e,r,i,"get"),Q(e,r,i,"set"));a=R(r,s),i.enumerable=!1,i.configurable=a,u&&(i.writable=a),w(n,r,i)}function $(e,t){for(var n,r,i=0;i<e.length;i++){n=e[i];for(r in n)d.call(n,r)&&!d.call(t,r)&&J(r.toString()+" is not implemented")}}function J(e){try{console.warn(e)}catch(t){}}function K(e,t,n,r){return function(){d.call(this,u)||I(this,u,null,r);var i=this[u],s=this[u]=e[t],o=n.apply(this,arguments);return this[u]=i,o}}function Q(e,t,n,r,i){d.call(n,r)&&M(n[r])&&(n[r]=K(E(e,t),r,n[r],i))}var t="constructor",n="extends",r="implements",i="init",s="prototype",o="static",u="super",a="toString",f="value",l="with",c="__proto__",h=["hasOwnProperty","isPrototypeOf","propertyIsEnumerable","toLocaleString",a,"valueOf"],p=e[s],d=p[h[0]],v=p[a],m=p[h[2]]||function(e){for(var t in this)if(e===t)return d.call(this,e);return!1},g=!m.call({toString:0},a),y=e.create||function(e){var t=this instanceof y;return y[s]=t?b:e||p,t?this:new y},b=y[s],w=e.defineProperty,E=e.getOwnPropertyDescriptor,S=e.getOwnPropertyNames||function(e){var t=[],n,r;for(r in e)d.call(e,r)&&t.push(r);if(g)for(n=0;n<h.length;n++)r=h[n],d.call(e,r)&&t.push(r);return t},x=e.getOwnPropertySymbols||function(){return[]},T=e.getPrototypeOf,N=T||function(e){return e[c]||null},C=function(e){return S(e).concat(x(e))},k=Array.isArray||function(e){return v.call(e)==="[object Array]"},L=S(function(){}).concat("arguments"),A=L.indexOf||function(e){for(var t=this.length;t--&&this[t]!==e;);return t},O={value:!0},M=(""+function(){this["super"]()}).indexOf(u)<0?function(){return!0}:function(e){var t=""+e,n=t.indexOf(u);return n<0?!1:q(t.charCodeAt(n-1))&&q(t.charCodeAt(n+5))};try{w({},"{}",{})}catch(_){"__defineGetter__"in{}?(w=function(e,t,n){return d.call(n,f)?e[t]=n[f]:(d.call(n,"get")&&e.__defineGetter__(t,n.get),d.call(n,"set")&&e.__defineSetter__(t,n.set)),e},E=function(e,t){var n=e.__lookupGetter__(t),r=e.__lookupSetter__(t),i={};return n||r?(n&&(i.get=n),r&&(i.set=r)):i[f]=e[t],i}):(w=function(e,t,n){return e[t]=n[f],e},E=function(e,t){return{value:e[t]}})}return function(e){var i=d.call(e,t),u=d.call(e,n),a=u&&e[n],f=u&&typeof a=="function",h=f?a[s]:a,p=i?e[t]:F(f,a),m=u&&i&&M(p),g=u?y(h):p[s],b=v.call(h).indexOf(" GObject_")<0,E,S;return m&&b&&(p=K(h,t,p,!1)),d.call(e,l)&&(E=D([].concat(e[l]),g,h,b),S=E.length,S&&(p=function(e){return function(){var t=0;while(t<S)E[t++].call(this);return e.apply(this,arguments)}}(p),p[s]=g)),d.call(e,o)&&B(e[o],p,h,!0,!0,b),u&&(a!==h&&B(a,p,h,!0,!0,b),p[s]=g),g[t]!==p&&I(g,t,p,!1),B(e,g,h,!1,!0,b),d.call(e,r)&&$([].concat(e[r]),g),u&&!T&&I(g,c,h,!1),w(p,"isClass",O)}}(Object);
7 | var DOMClass=function(e,t,n){"use strict";var r="onAttached",i="attachedCallback",s="onChanged",o="attributeChangedCallback",u="constructor",a="createdCallback",f="css",l="<style>",c="stylesheet",h="onDetached",p="detachedCallback",d="extends",v="name",m=e.document,g=m.documentElement,y=n.hasOwnProperty,b=t.prototype,w=function(e,t){for(var n,r=C(e),i=r.length;i--;)n=r[i],L.indexOf(n)<0&&!y.call(t,n)&&E(t,n,S(e,n))},E=n.defineProperty,S=n.getOwnPropertyDescriptor,x=n.getOwnPropertyNames||n.keys||function(e){var t=[],n;for(n in e)y.call(e,n)&&t.push(n);return t},T=n.getOwnPropertySymbols||function(){return b},N=function(t){return e["HTML"+t+"Element"]},C=function(e){return T(e).concat(x(e))},k=function(e,t){if(!t.length){var n=e.getAttribute("data-arguments");n&&(t=n.charAt(0)==="["?JSON.parse(n):n.split(/\s*,\s*/))}return t},L=C(function(){}),A=function(e,t,n,r){y.call(e,t)&&(n[r]=e[t])},O=function(){for(var n=+this,r=n,i=arguments.length,s=i-n,o=new t(s<0?0:s);r<i;r++)o[r-n]=arguments[r];return o},M=function(e){return e+"-i-"+(y.call(P,e)?++P[e]:P[e]=0)},_=function(e,t,n){var r;e.setAttribute("dom-class-uid",n),E(e,f,{configurable:!0,get:function(){return r||(r=restyle(t+'[dom-class-uid="'+n+'"]',{}))},set:function(t){e[f].replace(t)}})},D=function(e,t){var n=new XMLHttpRequest,r=m.body||m.head||g,i,s;try{n.open("GET",t,!1),n.send(null),i=n.responseText,s=r.insertBefore(m.createElement("style"),r.lastChild),s.type="text/css","styleSheet"in s?s.styleSheet.cssText=i:s.appendChild(m.createTextNode(i))}catch(o){s=m.createElement("link"),s.href=t,s.rel="stylesheet",s.type="text/css",r.insertBefore(s,r.lastChild)}return g.offsetWidth},P={},H=0;return function(t){var n=function(){return C&&(C=!1,D(F,L)),g=O.apply(0,arguments),new B},g=b,S={},x=y.call(t,f),T=y.call(t,u),C=y.call(t,c),L=C&&t[c],P=T&&t[u],B,j,F,I,q,R;A(t,r,S,i),A(t,s,S,o),A(t,h,S,p);for(F in t)if(y.call(t,F))switch(F){case r:case s:case u:case h:case d:case v:case f:case c:break;default:S[F]=t[F]}S[d]=y.call(t,d)?t[d].prototype:HTMLElement.prototype;if(S[d]instanceof HTMLElement)switch(t[d]){case N("Anchor"):R="a";break;case N("Audio"):R="audio";break;case N("BR"):R="br";break;case N("Body"):R="body";break;case N("Button"):R="button";break;case N("Canvas"):R="canvas";break;case N("Col"):R="col";break;case N("DataList"):R="dl";break;case N("Div"):R="div";break;case N("Form"):R="form";break;case N("HR"):R="hr";break;case N("Head"):R="head";break;case N("IFrame"):R="iframe";break;case N("Image"):R="img";break;case N("Input"):R="input";break;case N("LI"):R="li";break;case N("Label"):R="label";break;case N("Legend"):R="legend";break;case N("Link"):R="link";break;case N("Menu"):R="menu";break;case N("OList"):R="ol";break;case N("Option"):R="option";break;case N("Paragraph"):R="p";break;case N("Progress"):R="progress";break;case N("Quote"):R="quote";break;case N("Select"):R="select";break;case N("Span"):R="span";break;case N("Style"):R="style";break;case N("Table"):R="table";break;case N("TableCaption"):R="caption";break;case N("TableCell"):R="td";break;case N("TableCol"):R="colgroup";break;case N("TableRow"):R="tr";break;case N("TableSection"):R="tbody";break;case N("Table"):R="table";break;case N("Table"):R="table";break;case N("TextArea"):R="textarea";break;case N("Track"):R="track";break;case N("UList"):R="ul";break;case N("Video"):R="video"}return F=y.call(t,v)?t[v]:"x-dom-class-"+H++,x&&(q=R?R+'[is="'+F+'"]':F,S[l]=restyle(q,t[f])),S[a]=function(){var e=k(this,g);g=b,j.apply(this,e),x&&_(this,q,M(F)),T&&P.apply(this,e)},j=new Class(S),w(j,n),I={prototype:j.prototype},R&&(I[d]=R),B=m.registerElement(F,I),n.prototype=B.prototype,E(B.prototype,u,{value:n}),n}}(this&&this.window||global,Array,Object);
8 | Object.defineProperty(DOMClass,"data",{enumerable:!0,value:{data:function(t,n){"use strict";var r,i="data-dom-class-"+String(t).replace(/([a-z])([A-Z])/g,function(e,t,n){return t+"-"+n.toLowerCase()}).toLowerCase();if(arguments.length!==2)return r=this.getAttribute(i),r==null?r:JSON.parse(r);n==null?this.removeAttribute(i):this.setAttribute(i,JSON.stringify(n))}}});
9 | Object.defineProperty(DOMClass,"bindings",{enumerable:!0,value:function(e){"use strict";function j(e,t,n,r,i){var s,o=T.call(e,t)&&d(e,t).set;return h(e,t,A(function(){return s},function(a){n.nodeValue=s=a,r&&i(t),o&&o.call(e,a)})),n}function F(e,t,n,r,i,s){var o=T.call(e,t)&&d(e,t).set,u=I(n,r);return h(e,t,A(function(){return r},function(f){u=q(n,u,r=f),i&&s(t),o&&o.call(e,f)})),u.fragment}function I(e,t){var n,r;x.innerHTML="<!---->"+t+"<!---->",n={start:x.firstChild,end:x.lastChild,fragment:e.createDocumentFragment()};while(r=x.firstChild)n.fragment.appendChild(r);return n}function q(e,t,n){var r=t.start,i=r.parentNode,s;do s=r.nextSibling,i.removeChild(s);while(s!==t.end);return t=I(e,n),i.replaceChild(t.fragment,r),t}function R(e,t,n,r,i,s,o){var u=null,a=o?null:s.createTextNode("");return i.split(y).forEach(z,{autobots:t,bindings:n,method:e[r],source:e,onUpdate:o?function(e){u=u?q(s,u,e):I(s,e)}:function(e){a.nodeValue=e}}),a||u.fragment}function U(){var e=[],t=0;while(t<arguments.length)e[t]=this[arguments[t++]];return e}function z(e,t,n){var r=this.autobots,i=this.bindings,s=this.source,o=this.method,u=this.onUpdate,a=$(i,s,e).set,f=!!a;r[e]=s[e],h(i,e,A(function(){return r[e]},function(s){r[e]=s,u(o.apply(i,U.apply(r,n))),f&&a.call(i,s)})),u(o.apply(i,U.apply(r,n)))}function W(e,t){var n=e.childNodes,r=n.length,i,s;while(r--)i=n[r],s=i.nodeType,s===3?t.push(i):s===1&&!v.test(i.nodeName)&&W(i,t);return t}function X(e){switch(!0){case typeof e=="number":return e<0?-1:e;case e:return 133;default:return-1}}function V(e,t){h(e,"bindings",{configurable:!0,enumerable:!0,writable:!1,value:t})}function $(e,t,n){var r;return T.call(e,n)?r=d(e,n):(r=d(t,n)||S,r.set&&h(e,n,r)),r}var t=0,n=1,r=2,i=4,s="DOMAttrModified",o="attachedCallback",u="detachedCallback",a="getAttribute",f="setAttribute",l="destroyBindings",c=e.create,h=e.defineProperty,p=e.getPrototypeOf,d=e.getOwnPropertyDescriptor,v=/IFRAME|NOFRAMES|NOSCRIPT|SCRIPT|SELECT|STYLE|TEXTAREA|[a-z]/,m=/\{\{\{?[\S\s]+?\}\}\}?/g,g=/^\{[\S\s]+?\}$/,y=/\s*,\s*/,b=/\s*:\s*/,w=/^\s+|\s+$/g,E=/^([\S]+?)\(([\S\s]*?)\)/,S={attributes:!0,subtree:!0},x=document.createElement("dummy"),T=S.hasOwnProperty,N=function(e,t){return e==null?t:e},C=function(e,t,n){e.addEventListener(t,n,!0)},k=function(e,t,n){e.removeEventListener(t,n,!0)},L=s.trim||function(){return this.replace(w,"")},A=function(e,t){return{configurable:!0,enumerable:!0,get:e,set:t}},O=function(e,t){return typeof t=="function"?function(){return t.apply(e,arguments)}:t},M=function(e,t){var n=e,r;while(n&&!T.call(n,t))n=p(n);if(n){r=d(n,t);if("set"in r&&"get"in r)try{if(r.get.call(e)!==e[t])throw r;return r}catch(i){}}return null},_=window.MutationObserver||window.WebKitMutationObserver||window.MozMutationObserver,D=!!_,P=function(e){return setTimeout(requestAnimationFrame,100,e)},H=clearTimeout,B=D;return B||function(t,n){function r(){B=!0}C(t,s,r),t[f](n,1),t.removeAttribute(n),k(t,s,r)}(document.documentElement,"dom-"+(Math.random()+"-class").slice(2)),{init:function(){(this.template||this.bindings)&&this.createBindings(this)},createBindings:function(e){T.call(this,l)&&this[l](),e.template&&!L.call(this.innerHTML)&&(this.innerHTML=e.template);var p=this,d=p.ownerDocument||d,v=e.bindings||{},w=W(p,[]),x=c(null),I=c(null),q=c(e.bindings||null),U=p.queryAll("[data-bind]"),J=function(e){var t=e.attrName,n=Q;Q=i,q[I[t]]=e.currentTarget[a](t),Q=n},K=!1,Q=t,G=X(e.dispatchBindings||this.dispatchBindings),Y=-1<G,Z=Y&&c(null),et=Y&&function(e){delete Z[e],p.dispatchEvent(new CustomEvent("bindingChanged",{detail:{key:e,value:q[e]}}))},tt=G?function(e){e in Z&&clearTimeout(Z[e]),Z[e]=setTimeout(et,G,e)}:function(e){e in Z&&cancelAnimationFrame(Z[e]),Z[e]=requestAnimationFrame(function(){et(e)})},nt=!1,rt;return h(p,l,{configurable:!0,value:function(){var e;if(nt)return;nt=!0;if(Y)for(e in Z)G?clearTimeout(Z[e]):cancelAnimationFrame(Z[e]),delete Z[e];for(e in x)delete x[e];for(e in I)delete I[e];for(e in q)delete q[e];V(p,{}),K?rt.disconnect():B?U.forEach(function(e){k(e,s,J)}):U.forEach(function(e){delete e[f]})}}),w.forEach(function(e){var t,n,r,i,s,o=0,u=e.nodeValue,a=[],f=[],l=e.parentNode,c;while(r=m.exec(u))i=r.index,s=r[0].length,a.push(u.slice(o,i)),f.push(u.substr(i+2,s-4)),o=i+s;f.length&&(a.push(u.slice(o)),a.forEach(function(i,s){i.length&&l.insertBefore(d.createTextNode(i),e),s<f.length&&(n=L.call(f[s]),t=g.test(n),t&&(n=n.slice(1,-1)),(r=E.exec(n))?l.insertBefore(R(v,x,q,r[1],r[2],d,t),e):($(q,v,n),l.insertBefore(t?F(q,n,d,N(v[n],""),Y,tt):j(q,n,d.createTextNode(N(v[n],"")),Y,tt),e)))}),e.remove())}),U.forEach(function(e){var l=e[f],c=function(t,n){var r=Q;Q=i,l.call(this,t,n),t in I&&this===e&&(q[I[t]]=n),Q=r};e[a]("data-bind").split(y).filter(function(e,t,n){return e.indexOf("(")>0&&e.indexOf(")")<0?(n[t+1]=e+","+n[t+1],!1):!0}).forEach(function(d,m){var g=d.split(b),w=g[0],N=g[1]||w,L=w in e,_=g[1]&&E.exec(N),j,F,R,U,W,X,V;if(_)_[2].split(y).forEach(z,{autobots:x,bindings:q,method:v[_[1]],source:v,onUpdate:L?function(t){e[w]=O(q,t)}:function(t){l.call(e,w,t)}});else{I[w]=N,F=$(q,v,N).set,X=!!F;if(L){T.call(v,N)&&(e[w]=O(q,v[N])),h(q,N,A(function(){return e[w]},function(s){var o=Q;Q=n;switch(o){case t:case i:e[w]=s,Y&&tt(N)}X&&F.call(q,s),Q=o})),j=function(t){if(nt)return k(e,t.type,j);var n=Q;Q=i,q[N]=e[w],Q=n};switch(w){case"value":C(e,"input",j);case"checked":case"selectedIndex":C(e,"change",j)}R=M(e,w),R?(L=T.call(e,w),h(e,w,{configurable:!0,enumerable:R.enumerable,get:R.get,set:function(t){if(nt)return L?h(e,w,R):delete e[w];var n=Q;Q=r,R.set.call(e,t),q[N]=t,Q=n}})):(V=e[w],j=function(){if(nt)return;if(e[w]!==V){var t=Q;Q=r,V=e[w],q[N]=V,Q=t}m=P(j)},U=p[o],W=p[u],h(p,o,{configurable:!0,value:function(){nt||j(H(m)),U&&U.apply(e,arguments)}}),h(p,u,{configurable:!0,value:function(){nt||H(m),W&&W.apply(e,arguments)}}),j())}else T.call(v,N)&&l.call(e,w,v[N]),h(q,N,A(function(){return e[a](w)},function(o){var u=Q;Q=r;switch(u){case t:case n:D?rt.disconnect():B&&k(e,s,J),l.call(e,w,o),Y&&tt(N),D?rt.observe(p,S):B&&C(e,s,J)}X&&F.call(q,o),Q=u})),D?K=!0:B?C(e,s,J):e[f]!==c&&h(e,f,{configurable:!0,value:c})}}),e.removeAttribute("data-bind")}),K&&(rt=new _(function(e){var t=Q;Q=i;for(var n,r,s=0;s<e.length;s++)r=e[s],r.type==="attributes"&&(n=r.attributeName,n!=null&&n in I&&(q[I[n]]=r.target[a](n)));Q=t}),rt.observe(p,S)),V(p,q),p}}}(Object)});


--------------------------------------------------------------------------------