├── demo-assets
    ├── images
    │   └── ico
    │   │   └── favicon.png
    ├── css
    │   ├── demo.css
    │   └── codemirror.css
    └── js
    │   ├── demo.js
    │   ├── xml.js
    │   ├── CustomElements.min.js
    │   ├── holder.js
    │   ├── bootstrap-web-components.js
    │   └── HTMLImports.min.js
├── .gitignore
├── js
    ├── badge.js
    ├── popover.js
    ├── common.js
    ├── label.js
    ├── alert.js
    ├── progress-bar.js
    ├── list-group.js
    ├── modal.js
    ├── tooltip.js
    └── carousel.js
├── bower.json
├── package.json
├── README.md
├── Gruntfile.js
├── dist
    ├── imports.html
    ├── bootstrap-web-components.min.js
    └── bootstrap-web-components.js
└── demo.html


/demo-assets/images/ico/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MikeCostello/bootstrap-web-components/HEAD/demo-assets/images/ico/favicon.png


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | node_modules
 2 | 
 3 | # OS generated files #
 4 | ######################
 5 | .DS_Store
 6 | .DS_Store?
 7 | ._*
 8 | .Spotlight-V100
 9 | .Trashes
10 | ehthumbs.db
11 | Thumbs.db


--------------------------------------------------------------------------------
/js/badge.js:
--------------------------------------------------------------------------------
 1 | // Badge
 2 | XBadge = document.registerElement(prefix + '-badge', {
 3 |   prototype: Object.create(HTMLElement.prototype, {
 4 |     createdCallback: {
 5 |       value: function() {
 6 |         this.classList.add('badge');
 7 |       }
 8 |     }
 9 |   })
10 | });


--------------------------------------------------------------------------------
/js/popover.js:
--------------------------------------------------------------------------------
 1 | // Popover
 2 | XPopover = document.registerElement(prefix + '-popover', {
 3 |   prototype: Object.create(XTooltip.prototype, {
 4 |     plugin: {
 5 |       value: {
 6 |         namespace: 'bs.popover',
 7 |         name: 'popover'
 8 |       }
 9 |     }
10 |   })
11 | });


--------------------------------------------------------------------------------
/demo-assets/css/demo.css:
--------------------------------------------------------------------------------
 1 | .container .btn {
 2 | 	margin-top: 5px;
 3 | 	margin-bottom: 5px;
 4 | }
 5 | 
 6 | .container {
 7 | 	margin-bottom: 50px;
 8 | }
 9 | 
10 | textarea {
11 | 	width: 100%;
12 | }
13 | 
14 | .CodeMirror {
15 | 	border-top: 1px solid #000;
16 | 	border-bottom: 1px solid #000;
17 | 	border-right: 1px solid #000;
18 | 	height: 150px;
19 | }
20 | 


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "bootstrap-web-components",
 3 |   "version": "1.0.3",
 4 |   "keywords": ["bootstrap", "css", "web components"],
 5 |   "main": [
 6 |     "./dist/bootstrap-web-components.js",
 7 |     "./dist/imports.html"
 8 |   ],
 9 |   "ignore": [
10 |     "**/.*",
11 |     "demo-assets",
12 |     "demo.html"
13 |   ],
14 |   "dependencies": {
15 |     "bootstrap": ">= 3.0.0"
16 |   }
17 | }


--------------------------------------------------------------------------------
/js/common.js:
--------------------------------------------------------------------------------
1 | var prefix = 'bs';
2 | var importDoc = document.currentScript === document._currentScript ? document.currentScript.ownerDocument: document._currentScript.ownerDocument;
3 | 
4 | // Create <style> elm with template CSS
5 | var css = importDoc.querySelector('#x-css');
6 | var style = document.createElement('style');
7 | 
8 | style.appendChild(css.content.cloneNode(true));
9 | document.head.appendChild(style);


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "bootstrap-web-components"
 3 |   , "description": "Twitter Bootstrap as Web Components"
 4 |   , "version": "1.0.3"
 5 |   , "keywords": ["bootstrap", "css", "web components"]
 6 |   , "author": "Mike Costello"
 7 |   , "licenses": [
 8 |     {
 9 |         "type": "Apache-2.0"
10 |       , "url": "http://www.apache.org/licenses/LICENSE-2.0"
11 |     }
12 |   ]
13 |   , "devDependencies": {
14 |       "grunt": "~0.4.1"
15 |     , "grunt-contrib-concat": "~0.3.0"
16 |     , "grunt-contrib-uglify": "~0.2.4"
17 |     , "grunt-contrib-watch": "~0.5.3"
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | #Bootstrap Web Components
 2 | 
 3 | A sampling of Bootstrap components as [web components](http://www.w3.org/TR/components-intro/)
 4 | 
 5 | ## [Demo](http://mikecostello.github.io/bootstrap-web-components)
 6 | 
 7 | ## Quick start
 8 | 
 9 | Three quick start options are available:
10 | 
11 | * [Download the latest release](https://github.com/MikeCostello/bootstrap-web-components/archive/master.zip).
12 | * Clone the repo: `git clone https://github.com/MikeCostello/bootstrap-web-components.git`.
13 | * Install with [Bower](http://bower.io): `bower install bootstrap-web-components`.
14 | 
15 | ## Local Demo
16 | 
17 | If you open demo.html locally make sure to run it in a web server environment.


--------------------------------------------------------------------------------
/js/label.js:
--------------------------------------------------------------------------------
 1 | // Label
 2 | XLabel = document.registerElement(prefix + '-label', {
 3 |   prototype: Object.create(HTMLElement.prototype, {
 4 |     createdCallback: {
 5 |       value: function() {
 6 |         this.attributeChangedCallback('type', '', this.getAttribute('type'));
 7 |         this.classList.add('label');
 8 |       }
 9 |     },
10 |     attributeChangedCallback: {
11 |       value: function(name, oldValue, value) {
12 |         if (name === 'type') {
13 |           this.classList.add('label-' + (value || 'default'));
14 |           if (oldValue) {
15 |             this.classList.remove('label-' + oldValue);
16 | 
17 |           } else if (oldValue === null) {
18 |             this.classList.remove('label-default');
19 |           }
20 |         }
21 |       }
22 |     }
23 |   })
24 | });


--------------------------------------------------------------------------------
/demo-assets/js/demo.js:
--------------------------------------------------------------------------------
 1 | document.addEventListener('DOMContentLoaded', function() {
 2 | 	var codeMirrorSettings = {
 3 | 		lineNumbers: true,
 4 | 		mode: {
 5 | 			name: 'xml',
 6 | 			htmlMode: true
 7 | 		}
 8 | 	};
 9 | 
10 | 	var textareas = document.querySelectorAll('textarea');
11 | 
12 | 	function changeHandler(codeMirror) {
13 | 		var dataTarget = codeMirror.getTextArea().dataset.target;
14 | 		var target = document.querySelector(dataTarget);
15 | 
16 | 		target.innerHTML =  codeMirror.getValue();
17 | 
18 | 		if (/carousel/.test(dataTarget)) {
19 | 			Holder.run();
20 | 		}
21 | 	}
22 | 
23 | 	for (var i = 0; i < textareas.length; i++) {
24 | 		var textarea = textareas[i];
25 | 
26 | 		if (textarea.dataset.target) {
27 | 			var codeMirror = CodeMirror.fromTextArea(textarea, codeMirrorSettings);
28 | 
29 | 			codeMirror.on('change', changeHandler);
30 | 		}
31 | 	}
32 | });


--------------------------------------------------------------------------------
/Gruntfile.js:
--------------------------------------------------------------------------------
 1 | module.exports = function(grunt) {
 2 | 
 3 |   grunt.initConfig({
 4 |     pkg: grunt.file.readJSON('package.json'),
 5 |     concat: {
 6 |       options: {
 7 |         separator: '\n\n\n'
 8 |       },
 9 |       dist: {
10 |         src: ['js/common.js', 'js/tooltip.js', 'js/popover.js', 'js/*.js'],
11 |         dest: 'dist/<%= pkg.name %>.js'
12 |       }
13 |     },
14 |     uglify: {
15 |       options: {
16 |         banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n'
17 |       },
18 |       dist: {
19 |         files: {
20 |           'dist/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>']
21 |         }
22 |       }
23 |     },
24 |     watch: {
25 |       files: ['<%= concat.dist.src %>'],
26 |       tasks: ['default']
27 |     }
28 |   });
29 | 
30 |   grunt.loadNpmTasks('grunt-contrib-uglify');
31 |   grunt.loadNpmTasks('grunt-contrib-concat');
32 |   grunt.loadNpmTasks('grunt-contrib-watch');
33 | 
34 |   grunt.registerTask('default', ['concat', 'uglify']);
35 | };


--------------------------------------------------------------------------------
/js/alert.js:
--------------------------------------------------------------------------------
 1 | // Alert
 2 | XAlert = document.registerElement(prefix + '-alert', {
 3 |   prototype: Object.create(HTMLElement.prototype, {
 4 |     createdCallback: {
 5 |       value: function() {
 6 |         var template = importDoc.querySelector('#x-alert');
 7 |         this.insertBefore(template.content.cloneNode(true), this.firstChild);
 8 | 
 9 |         this.attributeChangedCallback('type', '', this.getAttribute('type'));
10 |         this.attributeChangedCallback('close', '', this.getAttribute('close'));
11 | 
12 |         this.classList.add('alert');
13 |       }
14 |     },
15 |     attributeChangedCallback: {
16 |       value: function(name, oldValue, value) {
17 |         if (name === 'type') {
18 |           this.classList.add('alert-' + (value || 'danger'));
19 |           if (oldValue) {
20 |             this.classList.remove('alert-' + oldValue);
21 |           } else if (oldValue === null) {
22 |             this.classList.remove('alert-danger');
23 |           }
24 |         } else if (name === 'close') {
25 |           var action = (value === 'false') ? 'add' : 'remove';
26 |           this.querySelector('.close').classList[action]('hide');
27 |         }
28 |       }
29 |     }
30 |   })
31 | });


--------------------------------------------------------------------------------
/js/progress-bar.js:
--------------------------------------------------------------------------------
 1 | // Progress Bar
 2 | XProgress = document.registerElement(prefix + '-progress', {
 3 |   prototype: Object.create(HTMLElement.prototype, {
 4 |     createdCallback: {
 5 |       value: function() {
 6 |         var template = importDoc.querySelector('#x-progress');
 7 |         this.appendChild(template.content.cloneNode(true));
 8 | 
 9 |         var attrs = this.attributes;
10 |         for (var i = 0; i < attrs.length; i++) {
11 |           this.attributeChangedCallback(attrs[i].name.toLowerCase(), null, attrs[i].value);
12 |         }
13 | 
14 |         this.classList.add('progress');
15 |       }
16 |     },
17 |     attributeChangedCallback: {
18 |       value: function(name, oldValue, value) {
19 |         var action;
20 |         var elmProgressbar = this.querySelector('[role=progressbar]');
21 | 
22 |         if (name === 'value') {
23 |           elmProgressbar.setAttribute('aria-valuenow', value);
24 |           elmProgressbar.style.width = value + '%';
25 | 
26 |         } else if (name === 'type') {
27 |           elmProgressbar.classList.add('progress-bar-' + value);
28 |           if (oldValue) {
29 |             elmProgressbar.classList.remove('progress-bar-' + oldValue);
30 |           }
31 |         } else if (name === 'striped') {
32 |           action = (value === 'false' || value === null) ? 'remove' : 'add';
33 |           this.classList[action]('progress-striped');
34 | 
35 |         } else if (/animated|active/i.test(name)) {
36 |           action = (value === 'false' || value === null) ? 'remove' : 'add';
37 |           this.classList[action]('active');
38 |         }
39 |       }
40 |     }
41 |   })
42 | });


--------------------------------------------------------------------------------
/js/list-group.js:
--------------------------------------------------------------------------------
 1 | // List Group
 2 | XListGroup = document.registerElement(prefix + '-list-group', {
 3 |   prototype: Object.create(HTMLElement.prototype, {
 4 |     createdCallback: {
 5 |       value: function() {
 6 |         this.classList.add('list-group');
 7 | 
 8 |         this.decorateItems(this.children);
 9 | 
10 |         // Observe child mutations
11 |         var observer = new MutationObserver(function(mutations) {
12 |           var listItems = [];
13 | 
14 |           mutations.forEach(function(mutation) {
15 |             for (var i = 0; i < mutation.addedNodes.length; i++) {
16 |               var addedNode = mutation.addedNodes[i];
17 |               // Filter on ELEMENT_NODEs only
18 |               if (addedNode.nodeType === 1) {
19 |                 listItems.push(addedNode);
20 |               }
21 |             }
22 |           });
23 | 
24 |           this.decorateItems(listItems);
25 |         }.bind(this));
26 | 
27 |         observer.observe(this, { childList: true });
28 |       }
29 |     },
30 |     decorateItems: {
31 |       value: function(listItems) {
32 |         for (var i = 0; i < listItems.length; i++) {
33 |           var item = listItems[i];
34 |           item.classList.add('list-group-item');
35 | 
36 |           var attrActive = item.getAttribute('active');
37 |           if (attrActive !== null) {
38 |             var action = (attrActive === 'false') ? 'remove' : 'add';
39 |             item.classList[action]('active');
40 |           }
41 | 
42 |           var children = item.children;
43 |           for (var j = 0; j < children.length; j++) {
44 |             var child = children[j];
45 | 
46 |             if (/^h[1-6]$/i.test(child.tagName)) {
47 |               child.classList.add('list-group-item-heading');
48 |             } else if (/^p$/i.test(child.tagName)) {
49 |               child.classList.add('list-group-item-text');
50 |             }
51 |           }
52 |         }
53 |       }
54 |     }
55 |   })
56 | });


--------------------------------------------------------------------------------
/dist/imports.html:
--------------------------------------------------------------------------------
 1 | <!-- jQuery / Bootstrap Requirements -->
 2 | <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
 3 | <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap-theme.min.css">
 4 | 
 5 | <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
 6 | <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
 7 | 
 8 | <!-- CSS -->
 9 | <template id="x-css">
10 | bs-alert, bs-carousel, bs-progress {
11 | 	display: block;
12 | }
13 | 
14 | bs-modal .x-modal-no-title {
15 | 	border-bottom: none;
16 | }
17 | 
18 | bs-modal  .x-modal-no-title > .modal-title {
19 | 	display: none;
20 | }
21 | </template>
22 | 
23 | <!-- Templates -->
24 | <!-- Alert -->
25 | <template id="x-alert">
26 | 	<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
27 | </template>
28 | 
29 | <!-- Modal -->
30 | <template id="x-modal">
31 |   <div class="modal-dialog">
32 |     <div class="modal-content">
33 |       <div class="modal-header x-modal-no-title">
34 |         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
35 |         <h4 class="modal-title">...</h4>
36 |       </div>
37 |       <div class="modal-body">
38 |         ...
39 |       </div>
40 |     </div>
41 |   </div>
42 | </template>
43 | 
44 | <!-- Progress Bar -->
45 | <template id="x-progress">
46 | 	<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0;"></div>
47 | </template>
48 | 
49 | <!-- Carousel -->
50 | <template id="x-carousel" class="carousel slide" data-ride="carousel">
51 |   <ol class="carousel-indicators"></ol>
52 | 
53 |   <div class="carousel-inner"></div>
54 | 
55 |   <a class="left carousel-control" href="#" data-slide="prev">
56 |     <span class="glyphicon glyphicon-chevron-left"></span>
57 |   </a>
58 |   <a class="right carousel-control" href="#" data-slide="next">
59 |     <span class="glyphicon glyphicon-chevron-right"></span>
60 |   </a>
61 | </template>
62 | 
63 | <!-- JavaScripts -->
64 | <script src="bootstrap-web-components.js"></script>


--------------------------------------------------------------------------------
/js/modal.js:
--------------------------------------------------------------------------------
 1 | // Modal
 2 | XModal = document.registerElement(prefix + '-modal', {
 3 |   prototype: Object.create(HTMLElement.prototype, {
 4 |     createdCallback: {
 5 |       value: function() {
 6 |         // jQuery creates an extra looking for CSS display value
 7 |         if (!this.parentNode) {
 8 |           return false;
 9 |         }
10 | 
11 |         var template = importDoc.querySelector('#x-modal');
12 |         var modal = template.content.cloneNode(true);
13 |         var elmHeader = modal.querySelector('.modal-header');
14 |         var attrs = this.attributes;
15 |         var options = {};
16 | 
17 |         this.classList.add('modal');
18 |         this.setAttribute('role', 'modal');
19 | 
20 |         for (var i = 0; i < attrs.length; i++) {
21 |           var name = attrs[i].name.toLowerCase();
22 |           var value = attrs[i].value;
23 | 
24 |           if (name === 'title') {
25 |             var elmTitle = modal.querySelector('.modal-title');
26 |             elmTitle.textContent = value;
27 |             elmHeader.classList.remove('x-modal-no-title');
28 | 
29 |           } else if (name === 'close' && value === 'false') {
30 |             elmHeader.querySelector('.close').classList.add('hide');
31 | 
32 |           } else if (/backdrop|keyboard|show/i.test(name)) {
33 |             if (/true|false/i.test(value)) {
34 |               value = (value === 'true');
35 |             }
36 | 
37 |             options[name] = value;
38 |           }
39 |         }
40 | 
41 |         // Content
42 |         modal.querySelector('.modal-body').innerHTML = this.innerHTML;
43 |         this.innerHTML = '';
44 | 
45 |         this.appendChild(modal);
46 |         $(this).modal(options);
47 |       }
48 |     },
49 |     attributeChangedCallback: {
50 |       value: function(name, oldValue, value) {
51 |         var $elm = $(this);
52 |         var bsModal = $elm.data('bs.modal');
53 |         var option= {};
54 |         var action;
55 | 
56 |         if (name === 'title') {
57 |           this.querySelector('.modal-title').textContent = value;
58 | 
59 |           action = (value === null) ? 'add' : 'remove';
60 |           this.querySelector('.modal-header').classList[action]('x-modal-no-title');
61 | 
62 |         } else if (name === 'close') {
63 |           action = (value === 'false') ? 'add' : 'remove';
64 |           this.querySelector('.close').classList[action]('hide');
65 | 
66 |         } else if (/backdrop|keyboard|show/i.test(name)) {
67 |           if (/true|false/i.test(value)) {
68 |             value = (value === 'true');
69 |           }
70 | 
71 |           option[name] = value;
72 |           $elm.modal($.extend(bsModal.options, option));
73 |         }
74 |       }
75 |     }
76 |   })
77 | });


--------------------------------------------------------------------------------
/js/tooltip.js:
--------------------------------------------------------------------------------
  1 | // Tooltip
  2 | XTooltip = document.registerElement(prefix + '-tooltip', {
  3 |   prototype: Object.create(HTMLElement.prototype, {
  4 |     plugin: {
  5 |       value: {
  6 |         namespace: 'bs.tooltip',
  7 |         name: 'tooltip'
  8 |       }
  9 |     },
 10 |     createdCallback: {
 11 |       value: function() {
 12 |         var attrFor = this.getAttribute('for');
 13 |         var id = attrFor ? '#' + attrFor : null;
 14 |         var $elm = $(id || this);
 15 |         var attrs = this.attributes;
 16 |         var defaults = $.fn[this.plugin.name].Constructor.DEFAULTS;
 17 |         var options = {};
 18 | 
 19 |         for (var i = 0; i < attrs.length; i++) {
 20 |           var name = attrs[i].name.toLowerCase();
 21 |           var value = attrs[i].value;
 22 | 
 23 |           if (name === 'for') {
 24 |             this.classList.add('hide');
 25 | 
 26 |             if (('content' in defaults) && !('content' in attrs)) {
 27 |               options.content = this.innerHTML;
 28 |             } else if (!('title' in attrs)) {
 29 |               options.title = this.innerHTML;
 30 |             }
 31 |           } else if (/^[delay]/i.test(name)) {
 32 |             var delays = name.split('-');
 33 | 
 34 |             if (delays.length === 1) {
 35 |               options.delay = {
 36 |                 show: value,
 37 |                 hide: value
 38 |               };
 39 |             } else {
 40 |               options.delay = options.delay || {};
 41 |               options.delay[delays[1]] = value;
 42 |             }
 43 |           } else if (name in defaults) {
 44 |             if (/true|false/i.test(value)) {
 45 |               value = (value === 'true');
 46 |             }
 47 | 
 48 |             options[name] = value;
 49 |           }
 50 |         }
 51 | 
 52 |         $elm[this.plugin.name](options);
 53 |       }
 54 |     },
 55 |     attributeChangedCallback: {
 56 |       value: function(name, oldValue, value) {
 57 |         var defaults = $.fn[this.plugin.name].Constructor.DEFAULTS;
 58 |         name = name.toLowerCase();
 59 | 
 60 |         if (name === 'for' || name in defaults) {
 61 |           var attrFor = this.getAttribute('for');
 62 |           var id = attrFor ? '#' + attrFor : null;
 63 |           var $elm = $(id || this);
 64 |           var bsInstance = $elm.data(this.plugin.namespace) || $('#' + oldValue).data(this.plugin.namespace);
 65 |           var option = {};
 66 | 
 67 |           if (/^delay/i.test(name)) {
 68 |             var delays = name.split('-');
 69 | 
 70 |             if (delays.length === 1) {
 71 |               option.delay = {
 72 |                 show: value,
 73 |                 hide: value
 74 |               };
 75 |             } else {
 76 |               option.delay = option.delay || {};
 77 |               option.delay[delays[1]] = value;
 78 |             }
 79 |           } else if (name === 'title') {
 80 |             if (value) {
 81 |               this.setAttribute('data-original-title', value);
 82 |               this.setAttribute('title', '');
 83 |             }
 84 |           } else if (name === 'for') {
 85 |             // Create new tooltip
 86 |             $elm[this.plugin.name](bsInstance.options);
 87 |             bsInstance.destroy();
 88 |           } else {
 89 |             if (/true|false/i.test(value)) {
 90 |               value = (value === 'true');
 91 |             }
 92 | 
 93 |             option[name] = value;
 94 |           }
 95 | 
 96 |           if (!$.isEmptyObject(option)) {
 97 |             $elm[this.plugin.name]($.extend(bsInstance.options, option));
 98 |           }
 99 |         }
100 |       }
101 |     }
102 |   })
103 | });


--------------------------------------------------------------------------------
/js/carousel.js:
--------------------------------------------------------------------------------
  1 | // Carousel
  2 | XCarousel = document.registerElement(prefix + '-carousel', {
  3 |   prototype: Object.create(HTMLElement.prototype, {
  4 |     plugin: {
  5 |       value: {
  6 |         namespace: 'bs.carousel',
  7 |         name: 'carousel'
  8 |       }
  9 |     },
 10 |     createdCallback: {
 11 |       value: function() {
 12 |         var i, j, attrTitle;
 13 | 
 14 |         var template = importDoc.querySelector('#x-carousel');
 15 |         var carousel = template.content.cloneNode(true);
 16 |         var carouselInner = carousel.querySelector('.carousel-inner');
 17 |         var carouselControls = carousel.querySelectorAll('.carousel-control');
 18 |         var carouselIndicators = carousel.querySelector('.carousel-indicators');
 19 | 
 20 |         // Carousel Items
 21 |         carouselInner.innerHTML = this.innerHTML;
 22 | 
 23 |         var firstItem = carouselInner.children[0];
 24 |         var items = carouselInner.querySelectorAll('.carousel-inner > ' + firstItem.tagName);
 25 |         var nodes = carouselInner.childNodes;
 26 | 
 27 |         var itemWrapper =document.createElement('div');
 28 |         var newCarouselInner = document.createDocumentFragment();
 29 | 
 30 |         function setCaption(text) {
 31 |           if (text) {
 32 |             var caption = itemWrapper.querySelector('.carousel-caption');
 33 | 
 34 |             if (!caption) {
 35 |               caption = document.createElement('div');
 36 |               caption.classList.add('carousel-caption');
 37 |               caption.textContent =  text;
 38 | 
 39 |               itemWrapper.appendChild(caption);
 40 |             }
 41 |           }
 42 |         }
 43 | 
 44 |         for (i = 0, j = 0; i < nodes.length; i++) {
 45 |           var node = nodes[i];
 46 |           var item = items[j];
 47 | 
 48 |           // Item Wrapper
 49 |           if (node === item) {
 50 |             // Add proir
 51 |             if (itemWrapper.hasChildNodes()) {
 52 |               setCaption(attrTitle);
 53 |               newCarouselInner.appendChild(itemWrapper);
 54 | 
 55 |               itemWrapper = document.createElement('div');
 56 |             } else if (j === 0) {
 57 |               itemWrapper.classList.add('active');
 58 |             }
 59 | 
 60 |             attrTitle = item.getAttribute('title');
 61 | 
 62 |             itemWrapper.classList.add('item');
 63 |             itemWrapper.appendChild(item.cloneNode(true));
 64 | 
 65 |             // Indicator
 66 |             var indicator = document.createElement('li');
 67 |             indicator.setAttribute('data-slide-to', j);
 68 | 
 69 |             if (j === 0) {
 70 |               indicator.setAttribute('class', 'active');
 71 |             }
 72 | 
 73 |             carouselIndicators.appendChild(indicator);
 74 | 
 75 |             j++;
 76 |           } else if (j > 0) {
 77 |             // Captions
 78 |             if (node.nodeType === 1 || (node.nodeType === 3 && node.nodeValue.trim().length)) {
 79 |               var caption = itemWrapper.querySelector('.carousel-caption');
 80 | 
 81 |               if (!caption) {
 82 |                 caption = document.createElement('div');
 83 |                 caption.classList.add('carousel-caption');
 84 |                 caption = itemWrapper.appendChild(caption);
 85 |               }
 86 | 
 87 |               caption.appendChild(node.cloneNode(true));
 88 |             }
 89 |           }
 90 | 
 91 |           // Last Item
 92 |           if (i === nodes.length - 1) {
 93 |             if (itemWrapper.hasChildNodes()) {
 94 |               setCaption(attrTitle);
 95 |               newCarouselInner.appendChild(itemWrapper);
 96 |             }
 97 |           }
 98 |         }
 99 | 
100 |         carouselInner.innerHTML = '';
101 |         carouselInner.appendChild(newCarouselInner);
102 | 
103 |         // Next & Previous
104 |         function carouselControlCallback(event) {
105 |           var target = event.currentTarget;
106 |           var attrSlide = target.getAttribute('data-slide');
107 | 
108 |           if (attrSlide) {
109 |             $(this).carousel(attrSlide);
110 |           }
111 | 
112 |           event.preventDefault();
113 |         }
114 | 
115 |         for (i = 0; i < carouselControls.length; i++) {
116 |           carouselControls[i].addEventListener('click', carouselControlCallback.bind(this));
117 |         }
118 | 
119 |         // Indicators
120 |         this.addEventListener('click', function(event) {
121 |           var target = event.target || event.srcElement;
122 |           var attrSlideTo = target.getAttribute('data-slide-to');
123 | 
124 |           if (target.tagName.toLowerCase() === 'li' &&  attrSlideTo) {
125 |             $(this).carousel(+attrSlideTo);
126 |           }
127 | 
128 |           event.stopPropagation();
129 |         });
130 | 
131 |         // Init
132 |         ['carousel', 'slide'].forEach(function(className) {
133 |           this.classList.add(className);
134 |         }, this);
135 | 
136 |         var attrs = this.attributes;
137 |         var defaults = $.fn[this.plugin.name].Constructor.DEFAULTS;
138 |         var options = {};
139 | 
140 |         for (i = 0; i < attrs.length; i++) {
141 |           var name = attrs[i].name.toLowerCase();
142 |           var value = attrs[i].value;
143 | 
144 |           if (name in defaults) {
145 |             if (/true|false/i.test(value)) {
146 |               value = (value === 'true');
147 |             }
148 | 
149 |             options[name] = value;
150 |           }
151 |         }
152 | 
153 |         this.innerHTML = '';
154 |         this.appendChild(carousel);
155 |         $(this).carousel(options);
156 |       }
157 |     },
158 |     attributeChangedCallback: {
159 |       value: function(name, oldValue, value) {
160 |         var defaults = $.fn[this.plugin.name].Constructor.DEFAULTS;
161 |         name = name.toLowerCase();
162 | 
163 |         if (name in defaults) {
164 |           if (/true|false/i.test(value)) {
165 |             value = (value === 'true');
166 |           }
167 | 
168 |           var option = {};
169 |           option[name] = value;
170 | 
171 |           $elm = $(this);
172 |           $elm[this.plugin.name]($.extend($elm.data(this.plugin.namespace).options, option));
173 |         }
174 |       }
175 |     }
176 |   })
177 | });


--------------------------------------------------------------------------------
/demo-assets/css/codemirror.css:
--------------------------------------------------------------------------------
  1 | /* BASICS */
  2 | 
  3 | .CodeMirror {
  4 |   /* Set height, width, borders, and global font properties here */
  5 |   font-family: monospace;
  6 |   height: 300px;
  7 | }
  8 | .CodeMirror-scroll {
  9 |   /* Set scrolling behaviour here */
 10 |   overflow: auto;
 11 | }
 12 | 
 13 | /* PADDING */
 14 | 
 15 | .CodeMirror-lines {
 16 |   padding: 4px 0; /* Vertical padding around content */
 17 | }
 18 | .CodeMirror pre {
 19 |   padding: 0 4px; /* Horizontal padding of content */
 20 | }
 21 | 
 22 | .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
 23 |   background-color: white; /* The little square between H and V scrollbars */
 24 | }
 25 | 
 26 | /* GUTTER */
 27 | 
 28 | .CodeMirror-gutters {
 29 |   border-right: 1px solid #ddd;
 30 |   background-color: #f7f7f7;
 31 |   white-space: nowrap;
 32 | }
 33 | .CodeMirror-linenumbers {}
 34 | .CodeMirror-linenumber {
 35 |   padding: 0 3px 0 5px;
 36 |   min-width: 20px;
 37 |   text-align: right;
 38 |   color: #999;
 39 | }
 40 | 
 41 | /* CURSOR */
 42 | 
 43 | .CodeMirror div.CodeMirror-cursor {
 44 |   border-left: 1px solid black;
 45 |   z-index: 3;
 46 | }
 47 | /* Shown when moving in bi-directional text */
 48 | .CodeMirror div.CodeMirror-secondarycursor {
 49 |   border-left: 1px solid silver;
 50 | }
 51 | .CodeMirror.cm-keymap-fat-cursor div.CodeMirror-cursor {
 52 |   width: auto;
 53 |   border: 0;
 54 |   background: #7e7;
 55 |   z-index: 1;
 56 | }
 57 | /* Can style cursor different in overwrite (non-insert) mode */
 58 | .CodeMirror div.CodeMirror-cursor.CodeMirror-overwrite {}
 59 | 
 60 | .cm-tab { display: inline-block; }
 61 | 
 62 | /* DEFAULT THEME */
 63 | 
 64 | .cm-s-default .cm-keyword {color: #708;}
 65 | .cm-s-default .cm-atom {color: #219;}
 66 | .cm-s-default .cm-number {color: #164;}
 67 | .cm-s-default .cm-def {color: #00f;}
 68 | .cm-s-default .cm-variable {color: black;}
 69 | .cm-s-default .cm-variable-2 {color: #05a;}
 70 | .cm-s-default .cm-variable-3 {color: #085;}
 71 | .cm-s-default .cm-property {color: black;}
 72 | .cm-s-default .cm-operator {color: black;}
 73 | .cm-s-default .cm-comment {color: #a50;}
 74 | .cm-s-default .cm-string {color: #a11;}
 75 | .cm-s-default .cm-string-2 {color: #f50;}
 76 | .cm-s-default .cm-meta {color: #555;}
 77 | .cm-s-default .cm-qualifier {color: #555;}
 78 | .cm-s-default .cm-builtin {color: #30a;}
 79 | .cm-s-default .cm-bracket {color: #997;}
 80 | .cm-s-default .cm-tag {color: #170;}
 81 | .cm-s-default .cm-attribute {color: #00c;}
 82 | .cm-s-default .cm-header {color: blue;}
 83 | .cm-s-default .cm-quote {color: #090;}
 84 | .cm-s-default .cm-hr {color: #999;}
 85 | .cm-s-default .cm-link {color: #00c;}
 86 | 
 87 | .cm-negative {color: #d44;}
 88 | .cm-positive {color: #292;}
 89 | .cm-header, .cm-strong {font-weight: bold;}
 90 | .cm-em {font-style: italic;}
 91 | .cm-link {text-decoration: underline;}
 92 | 
 93 | .cm-s-default .cm-error {color: #f00;}
 94 | .cm-invalidchar {color: #f00;}
 95 | 
 96 | div.CodeMirror span.CodeMirror-matchingbracket {color: #0f0;}
 97 | div.CodeMirror span.CodeMirror-nonmatchingbracket {color: #f22;}
 98 | .CodeMirror-activeline-background {background: #e8f2ff;}
 99 | 
100 | /* STOP */
101 | 
102 | /* The rest of this file contains styles related to the mechanics of
103 |    the editor. You probably shouldn't touch them. */
104 | 
105 | .CodeMirror {
106 |   line-height: 1;
107 |   position: relative;
108 |   overflow: hidden;
109 |   background: white;
110 |   color: black;
111 | }
112 | 
113 | .CodeMirror-scroll {
114 |   /* 30px is the magic margin used to hide the element's real scrollbars */
115 |   /* See overflow: hidden in .CodeMirror */
116 |   margin-bottom: -30px; margin-right: -30px;
117 |   padding-bottom: 30px; padding-right: 30px;
118 |   height: 100%;
119 |   outline: none; /* Prevent dragging from highlighting the element */
120 |   position: relative;
121 |   -moz-box-sizing: content-box;
122 |   box-sizing: content-box;
123 | }
124 | .CodeMirror-sizer {
125 |   position: relative;
126 | }
127 | 
128 | /* The fake, visible scrollbars. Used to force redraw during scrolling
129 |    before actuall scrolling happens, thus preventing shaking and
130 |    flickering artifacts. */
131 | .CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
132 |   position: absolute;
133 |   z-index: 6;
134 |   display: none;
135 | }
136 | .CodeMirror-vscrollbar {
137 |   right: 0; top: 0;
138 |   overflow-x: hidden;
139 |   overflow-y: scroll;
140 | }
141 | .CodeMirror-hscrollbar {
142 |   bottom: 0; left: 0;
143 |   overflow-y: hidden;
144 |   overflow-x: scroll;
145 | }
146 | .CodeMirror-scrollbar-filler {
147 |   right: 0; bottom: 0;
148 | }
149 | .CodeMirror-gutter-filler {
150 |   left: 0; bottom: 0;
151 | }
152 | 
153 | .CodeMirror-gutters {
154 |   position: absolute; left: 0; top: 0;
155 |   padding-bottom: 30px;
156 |   z-index: 3;
157 | }
158 | .CodeMirror-gutter {
159 |   white-space: normal;
160 |   height: 100%;
161 |   -moz-box-sizing: content-box;
162 |   box-sizing: content-box;
163 |   padding-bottom: 30px;
164 |   margin-bottom: -32px;
165 |   display: inline-block;
166 |   /* Hack to make IE7 behave */
167 |   *zoom:1;
168 |   *display:inline;
169 | }
170 | .CodeMirror-gutter-elt {
171 |   position: absolute;
172 |   cursor: default;
173 |   z-index: 4;
174 | }
175 | 
176 | .CodeMirror-lines {
177 |   cursor: text;
178 | }
179 | .CodeMirror pre {
180 |   /* Reset some styles that the rest of the page might have set */
181 |   -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0;
182 |   border-width: 0;
183 |   background: transparent;
184 |   font-family: inherit;
185 |   font-size: inherit;
186 |   margin: 0;
187 |   white-space: pre;
188 |   word-wrap: normal;
189 |   line-height: inherit;
190 |   color: inherit;
191 |   z-index: 2;
192 |   position: relative;
193 |   overflow: visible;
194 | }
195 | .CodeMirror-wrap pre {
196 |   word-wrap: break-word;
197 |   white-space: pre-wrap;
198 |   word-break: normal;
199 | }
200 | .CodeMirror-code pre {
201 |   border-right: 30px solid transparent;
202 |   width: -webkit-fit-content;
203 |   width: -moz-fit-content;
204 |   width: fit-content;
205 | }
206 | .CodeMirror-wrap .CodeMirror-code pre {
207 |   border-right: none;
208 |   width: auto;
209 | }
210 | .CodeMirror-linebackground {
211 |   position: absolute;
212 |   left: 0; right: 0; top: 0; bottom: 0;
213 |   z-index: 0;
214 | }
215 | 
216 | .CodeMirror-linewidget {
217 |   position: relative;
218 |   z-index: 2;
219 |   overflow: auto;
220 | }
221 | 
222 | .CodeMirror-widget {}
223 | 
224 | .CodeMirror-wrap .CodeMirror-scroll {
225 |   overflow-x: hidden;
226 | }
227 | 
228 | .CodeMirror-measure {
229 |   position: absolute;
230 |   width: 100%;
231 |   height: 0;
232 |   overflow: hidden;
233 |   visibility: hidden;
234 | }
235 | .CodeMirror-measure pre { position: static; }
236 | 
237 | .CodeMirror div.CodeMirror-cursor {
238 |   position: absolute;
239 |   visibility: hidden;
240 |   border-right: none;
241 |   width: 0;
242 | }
243 | .CodeMirror-focused div.CodeMirror-cursor {
244 |   visibility: visible;
245 | }
246 | 
247 | .CodeMirror-selected { background: #d9d9d9; }
248 | .CodeMirror-focused .CodeMirror-selected { background: #d7d4f0; }
249 | 
250 | .cm-searching {
251 |   background: #ffa;
252 |   background: rgba(255, 255, 0, .4);
253 | }
254 | 
255 | /* IE7 hack to prevent it from returning funny offsetTops on the spans */
256 | .CodeMirror span { *vertical-align: text-bottom; }
257 | 
258 | @media print {
259 |   /* Hide the cursor when printing */
260 |   .CodeMirror div.CodeMirror-cursor {
261 |     visibility: hidden;
262 |   }
263 | }
264 | 


--------------------------------------------------------------------------------
/dist/bootstrap-web-components.min.js:
--------------------------------------------------------------------------------
1 | /*! bootstrap-web-components 08-06-2015 */
2 | var prefix="bs",importDoc=document.currentScript===document._currentScript?document.currentScript.ownerDocument:document._currentScript.ownerDocument,css=importDoc.querySelector("#x-css"),style=document.createElement("style");style.appendChild(css.content.cloneNode(!0)),document.head.appendChild(style),XTooltip=document.registerElement(prefix+"-tooltip",{prototype:Object.create(HTMLElement.prototype,{plugin:{value:{namespace:"bs.tooltip",name:"tooltip"}},createdCallback:{value:function(){for(var a=this.getAttribute("for"),b=a?"#"+a:null,c=$(b||this),d=this.attributes,e=$.fn[this.plugin.name].Constructor.DEFAULTS,f={},g=0;g<d.length;g++){var h=d[g].name.toLowerCase(),i=d[g].value;if("for"===h)this.classList.add("hide"),"content"in e&&!("content"in d)?f.content=this.innerHTML:"title"in d||(f.title=this.innerHTML);else if(/^[delay]/i.test(h)){var j=h.split("-");1===j.length?f.delay={show:i,hide:i}:(f.delay=f.delay||{},f.delay[j[1]]=i)}else h in e&&(/true|false/i.test(i)&&(i="true"===i),f[h]=i)}c[this.plugin.name](f)}},attributeChangedCallback:{value:function(a,b,c){var d=$.fn[this.plugin.name].Constructor.DEFAULTS;if(a=a.toLowerCase(),"for"===a||a in d){var e=this.getAttribute("for"),f=e?"#"+e:null,g=$(f||this),h=g.data(this.plugin.namespace)||$("#"+b).data(this.plugin.namespace),i={};if(/^delay/i.test(a)){var j=a.split("-");1===j.length?i.delay={show:c,hide:c}:(i.delay=i.delay||{},i.delay[j[1]]=c)}else"title"===a?c&&(this.setAttribute("data-original-title",c),this.setAttribute("title","")):"for"===a?(g[this.plugin.name](h.options),h.destroy()):(/true|false/i.test(c)&&(c="true"===c),i[a]=c);$.isEmptyObject(i)||g[this.plugin.name]($.extend(h.options,i))}}}})}),XPopover=document.registerElement(prefix+"-popover",{prototype:Object.create(XTooltip.prototype,{plugin:{value:{namespace:"bs.popover",name:"popover"}}})}),XAlert=document.registerElement(prefix+"-alert",{prototype:Object.create(HTMLElement.prototype,{createdCallback:{value:function(){var a=importDoc.querySelector("#x-alert");this.insertBefore(a.content.cloneNode(!0),this.firstChild),this.attributeChangedCallback("type","",this.getAttribute("type")),this.attributeChangedCallback("close","",this.getAttribute("close")),this.classList.add("alert")}},attributeChangedCallback:{value:function(a,b,c){if("type"===a)this.classList.add("alert-"+(c||"danger")),b?this.classList.remove("alert-"+b):null===b&&this.classList.remove("alert-danger");else if("close"===a){var d="false"===c?"add":"remove";this.querySelector(".close").classList[d]("hide")}}}})}),XBadge=document.registerElement(prefix+"-badge",{prototype:Object.create(HTMLElement.prototype,{createdCallback:{value:function(){this.classList.add("badge")}}})}),XCarousel=document.registerElement(prefix+"-carousel",{prototype:Object.create(HTMLElement.prototype,{plugin:{value:{namespace:"bs.carousel",name:"carousel"}},createdCallback:{value:function(){function a(a){if(a){var b=n.querySelector(".carousel-caption");b||(b=document.createElement("div"),b.classList.add("carousel-caption"),b.textContent=a,n.appendChild(b))}}function b(a){var b=a.currentTarget,c=b.getAttribute("data-slide");c&&$(this).carousel(c),a.preventDefault()}var c,d,e,f=importDoc.querySelector("#x-carousel"),g=f.content.cloneNode(!0),h=g.querySelector(".carousel-inner"),i=g.querySelectorAll(".carousel-control"),j=g.querySelector(".carousel-indicators");h.innerHTML=this.innerHTML;var k=h.children[0],l=h.querySelectorAll(".carousel-inner > "+k.tagName),m=h.childNodes,n=document.createElement("div"),o=document.createDocumentFragment();for(c=0,d=0;c<m.length;c++){var p=m[c],q=l[d];if(p===q){n.hasChildNodes()?(a(e),o.appendChild(n),n=document.createElement("div")):0===d&&n.classList.add("active"),e=q.getAttribute("title"),n.classList.add("item"),n.appendChild(q.cloneNode(!0));var r=document.createElement("li");r.setAttribute("data-slide-to",d),0===d&&r.setAttribute("class","active"),j.appendChild(r),d++}else if(d>0&&(1===p.nodeType||3===p.nodeType&&p.nodeValue.trim().length)){var s=n.querySelector(".carousel-caption");s||(s=document.createElement("div"),s.classList.add("carousel-caption"),s=n.appendChild(s)),s.appendChild(p.cloneNode(!0))}c===m.length-1&&n.hasChildNodes()&&(a(e),o.appendChild(n))}for(h.innerHTML="",h.appendChild(o),c=0;c<i.length;c++)i[c].addEventListener("click",b.bind(this));this.addEventListener("click",function(a){var b=a.target||a.srcElement,c=b.getAttribute("data-slide-to");"li"===b.tagName.toLowerCase()&&c&&$(this).carousel(+c),a.stopPropagation()}),["carousel","slide"].forEach(function(a){this.classList.add(a)},this);var t=this.attributes,u=$.fn[this.plugin.name].Constructor.DEFAULTS,v={};for(c=0;c<t.length;c++){var w=t[c].name.toLowerCase(),x=t[c].value;w in u&&(/true|false/i.test(x)&&(x="true"===x),v[w]=x)}this.innerHTML="",this.appendChild(g),$(this).carousel(v)}},attributeChangedCallback:{value:function(a,b,c){var d=$.fn[this.plugin.name].Constructor.DEFAULTS;if(a=a.toLowerCase(),a in d){/true|false/i.test(c)&&(c="true"===c);var e={};e[a]=c,$elm=$(this),$elm[this.plugin.name]($.extend($elm.data(this.plugin.namespace).options,e))}}}})}),XLabel=document.registerElement(prefix+"-label",{prototype:Object.create(HTMLElement.prototype,{createdCallback:{value:function(){this.attributeChangedCallback("type","",this.getAttribute("type")),this.classList.add("label")}},attributeChangedCallback:{value:function(a,b,c){"type"===a&&(this.classList.add("label-"+(c||"default")),b?this.classList.remove("label-"+b):null===b&&this.classList.remove("label-default"))}}})}),XListGroup=document.registerElement(prefix+"-list-group",{prototype:Object.create(HTMLElement.prototype,{createdCallback:{value:function(){this.classList.add("list-group"),this.decorateItems(this.children);var a=new MutationObserver(function(a){var b=[];a.forEach(function(a){for(var c=0;c<a.addedNodes.length;c++){var d=a.addedNodes[c];1===d.nodeType&&b.push(d)}}),this.decorateItems(b)}.bind(this));a.observe(this,{childList:!0})}},decorateItems:{value:function(a){for(var b=0;b<a.length;b++){var c=a[b];c.classList.add("list-group-item");var d=c.getAttribute("active");if(null!==d){var e="false"===d?"remove":"add";c.classList[e]("active")}for(var f=c.children,g=0;g<f.length;g++){var h=f[g];/^h[1-6]$/i.test(h.tagName)?h.classList.add("list-group-item-heading"):/^p$/i.test(h.tagName)&&h.classList.add("list-group-item-text")}}}}})}),XModal=document.registerElement(prefix+"-modal",{prototype:Object.create(HTMLElement.prototype,{createdCallback:{value:function(){if(!this.parentNode)return!1;var a=importDoc.querySelector("#x-modal"),b=a.content.cloneNode(!0),c=b.querySelector(".modal-header"),d=this.attributes,e={};this.classList.add("modal"),this.setAttribute("role","modal");for(var f=0;f<d.length;f++){var g=d[f].name.toLowerCase(),h=d[f].value;if("title"===g){var i=b.querySelector(".modal-title");i.textContent=h,c.classList.remove("x-modal-no-title")}else"close"===g&&"false"===h?c.querySelector(".close").classList.add("hide"):/backdrop|keyboard|show/i.test(g)&&(/true|false/i.test(h)&&(h="true"===h),e[g]=h)}b.querySelector(".modal-body").innerHTML=this.innerHTML,this.innerHTML="",this.appendChild(b),$(this).modal(e)}},attributeChangedCallback:{value:function(a,b,c){var d,e=$(this),f=e.data("bs.modal"),g={};"title"===a?(this.querySelector(".modal-title").textContent=c,d=null===c?"add":"remove",this.querySelector(".modal-header").classList[d]("x-modal-no-title")):"close"===a?(d="false"===c?"add":"remove",this.querySelector(".close").classList[d]("hide")):/backdrop|keyboard|show/i.test(a)&&(/true|false/i.test(c)&&(c="true"===c),g[a]=c,e.modal($.extend(f.options,g)))}}})}),XProgress=document.registerElement(prefix+"-progress",{prototype:Object.create(HTMLElement.prototype,{createdCallback:{value:function(){var a=importDoc.querySelector("#x-progress");this.appendChild(a.content.cloneNode(!0));for(var b=this.attributes,c=0;c<b.length;c++)this.attributeChangedCallback(b[c].name.toLowerCase(),null,b[c].value);this.classList.add("progress")}},attributeChangedCallback:{value:function(a,b,c){var d,e=this.querySelector("[role=progressbar]");"value"===a?(e.setAttribute("aria-valuenow",c),e.style.width=c+"%"):"type"===a?(e.classList.add("progress-bar-"+c),b&&e.classList.remove("progress-bar-"+b)):"striped"===a?(d="false"===c||null===c?"remove":"add",this.classList[d]("progress-striped")):/animated|active/i.test(a)&&(d="false"===c||null===c?"remove":"add",this.classList[d]("active"))}}})});


--------------------------------------------------------------------------------
/demo.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en">
  3 | <head>
  4 |   <meta charset="UTF-8">
  5 |   <title>Web Component &middot; Bootstrap</title>
  6 |   <link rel="stylesheet" href="demo-assets/css/codemirror.css">
  7 |   <link rel="stylesheet" href="demo-assets/css/demo.css">
  8 |   <link rel="shortcut icon" href="demo-assets/images/ico/favicon.png">
  9 | 
 10 |   <!-- Web Components polyfills (http://webcomponents.org) -->
 11 |   <script src="demo-assets/js/HTMLImports.min.js"></script>
 12 |   <script src="demo-assets/js/CustomElements.min.js"></script>
 13 |   <link rel="import" href="dist/imports.html">
 14 | 
 15 |   <script src="demo-assets/js/codemirror.js"></script>
 16 |   <script src="demo-assets/js/xml.js"></script>
 17 | 
 18 |   <script src="demo-assets/js/holder.js"></script>
 19 | 
 20 |   <script src="demo-assets/js/demo.js"></script>
 21 | </head>
 22 | <body>
 23 | 
 24 | <div class="container">
 25 |   <!-- Modal -->
 26 |   <div class="row">
 27 |     <h3 class="col-md-12">Modal</h3>
 28 |     <div class="col-md-6">
 29 | <textarea data-target="#modal-demo">
 30 | <bs-modal title="Title" show="false">
 31 |   Dialog Contents
 32 | </bs-modal>
 33 | </textarea>
 34 |     </div>
 35 |     <div class="col-md-6">
 36 |       <div id="modal-demo">
 37 |         <bs-modal title="Title" show="false">Dialog Contents</bs-modal>
 38 |       </div>
 39 |       <button class="btn btn-primary" data-toggle="modal" data-target="#modal-demo bs-modal">Open Modal</button>
 40 |     </div>
 41 |   </div>
 42 | 
 43 |   <!-- Badges -->
 44 |   <div class="row">
 45 |     <h3 class="col-md-12">Badges</h3>
 46 |     <div class="col-md-6">
 47 | <textarea data-target="#badges-demo">
 48 | <bs-badge>Badge</bs-badge><br>
 49 | 
 50 | <button class="btn btn-primary">
 51 |   Messages
 52 |   <bs-badge>4</bs-badge>
 53 | </button>
 54 | </textarea>
 55 |     </div>
 56 |     <div class="col-md-6" id="badges-demo">
 57 |       <bs-badge>Badge</bs-badge><br>
 58 |       <button class="btn btn-primary">Messages <bs-badge>4</bs-badge></button>
 59 |     </div>
 60 |   </div>
 61 | 
 62 |   <!-- Labels -->
 63 |   <div class="row">
 64 |     <h3 class="col-md-12">Labels</h3>
 65 |     <div class="col-md-6">
 66 | <textarea data-target="#labels-demo">
 67 | <bs-label>Default</bs-label>
 68 | <bs-label type="primary">Primary</bs-label>
 69 | <bs-label type="success">Success</bs-label>
 70 | <bs-label type="info">Info</bs-label>
 71 | <bs-label type="warning">Warning</bs-label>
 72 | <bs-label type="danger">Danger</bs-label>
 73 | </textarea>
 74 |     </div>
 75 |     <div class="col-md-6" id="labels-demo">
 76 |       <bs-label>Default</bs-label>
 77 |       <bs-label type="primary">Primary</bs-label>
 78 |       <bs-label type="success">Success</bs-label>
 79 |       <bs-label type="info">Info</bs-label>
 80 |       <bs-label type="warning">Warning</bs-label>
 81 |       <bs-label type="danger">Danger</bs-label>
 82 |     </div>
 83 |   </div>
 84 | 
 85 |   <!-- Tooltip -->
 86 |   <div class="row">
 87 |     <h3 class="col-md-12">Tooltips</h3>
 88 |     <div class="col-md-6">
 89 | <textarea data-target="#tooltips-demo">
 90 | <bs-tooltip placement="left" title="Tooltip">Left</bs-tooltip> |
 91 | <bs-tooltip title="Tooltip">Top</bs-tooltip> |
 92 | <bs-tooltip placement="bottom" title="Tooltip">Bottom</bs-tooltip> |
 93 | <bs-tooltip placement="right" title="Tooltip">Right</bs-tooltip>
 94 | 
 95 | <bs-tooltip for="tooltip-target">Targeted Tooltip</bs-tooltip>
 96 | </textarea>
 97 |     </div>
 98 |     <div class="col-md-6">
 99 |       <p id="tooltips-demo">
100 |         <bs-tooltip for="tooltip-target">Targeted Tooltip</bs-tooltip>
101 | 
102 |         <bs-tooltip title="Tooltip" placement="left">Left</bs-tooltip> |
103 |         <bs-tooltip title="Tooltip">Top</bs-tooltip> |
104 |         <bs-tooltip title="Tooltip" placement="bottom">Bottom</bs-tooltip> |
105 |         <bs-tooltip title="Tooltip" placement="right">Right</bs-tooltip>
106 |       </p>
107 |       <button id="tooltip-target" class="btn btn-default">Button</button>
108 |     </div>
109 |   </div>
110 | 
111 |   <!-- Popover -->
112 |   <div class="row">
113 |     <h3 class="col-md-12">Popovers</h3>
114 |     <div class="col-md-6">
115 | <textarea data-target="#popovers-demo">
116 | <bs-popover placement="top" for="popover-target">
117 |   Sample content for a popover ballon. Vivamus
118 |   sagittis lacus vel faucibus.
119 | </bs-popover>
120 | 
121 | <bs-popover title="Popover with Title" for="popover-target2">
122 |   Sample content for a popover ballon. Vivamus
123 |   sagittis faucibus.
124 | </bs-popover>
125 | </textarea>
126 |     </div>
127 |     <div class="col-md-6">
128 |       <div id="popovers-demo">
129 |         <bs-popover for="popover-target" placement="top">Sample content for a popover ballon. Vivamus sagittis lacus vel faucibus.</bs-popover>
130 |         <bs-popover title="Popover with Title" for="popover-target2">Sample content for a popover ballon. Vivamus sagittis faucibus.</bs-popover>
131 |       </div>
132 | 
133 |       <button id="popover-target" class="btn btn-default">Popover (Top)</button>
134 |       <button id="popover-target2" class="btn btn-default">Popover &amp; Title</button>
135 |     </div>
136 |   </div>
137 | 
138 |   <!-- List Group -->
139 |   <div class="row">
140 |     <h3 class="col-md-12">List Group</h3>
141 |     <div class="col-md-6">
142 | <textarea data-target="#list-group-demo">
143 | <bs-list-group>
144 |   <div>
145 |     <h3>Item Heading 1</h3>
146 |     <p>List group item text</p>
147 |   </div>
148 |   <a href="#" active>Active Linked Item 2</a>
149 |   <a href="#">Linked Item 3</a>
150 | </bs-list-group>
151 | </textarea>
152 |     </div>
153 |     <div class="col-md-6" id="list-group-demo">
154 |       <bs-list-group>
155 |         <div>
156 |           <h3>Item Heading 1</h3>
157 |           <p>List group item text</p>
158 |         </div>
159 |         <a href="#" active>Active Linked Item 2</a>
160 |         <a href="#">Linked Item 3</a>
161 |       </bs-list-group>
162 |     </div>
163 |   </div>
164 | 
165 |   <!-- Alert -->
166 |   <div class="row">
167 |     <h3 class="col-md-12">Alerts</h3>
168 |     <div class="col-md-6">
169 | <textarea data-target="#alert-demo">
170 | <bs-alert>Danger (default)</bs-alert>
171 | <bs-alert type="warning">Warning</bs-alert>
172 | <bs-alert type="info" close="false">Info</bs-alert>
173 | </textarea>
174 |     </div>
175 |     <div class="col-md-6" id="alert-demo">
176 |       <bs-alert>Danger (default)</bs-alert>
177 |       <bs-alert type="warning">Warning</bs-alert>
178 |       <bs-alert type="info" close="false">Info</bs-alert>
179 |     </div>
180 |   </div>
181 | 
182 |   <!-- Progress Bars -->
183 |   <div class="row">
184 |     <h3 class="col-md-12">Progress Bars</h3>
185 |     <div class="col-md-6">
186 | <textarea data-target="#progress-demo">
187 | <bs-progress value="10"></bs-progress>
188 | <bs-progress value="20" type="info"></bs-progress>
189 | <bs-progress value="40" type="success"></bs-progress>
190 | <bs-progress value="60" type="warning" striped></bs-progress>
191 | <bs-progress value="80" type="danger" striped animated></bs-progress>
192 | </textarea>
193 |     </div>
194 |     <div class="col-md-6" id="progress-demo">
195 |       <bs-progress value="10"></bs-progress>
196 |       <bs-progress value="20" type="info"></bs-progress>
197 |       <bs-progress value="40" type="success"></bs-progress>
198 |       <bs-progress value="60" type="warning" striped></bs-progress>
199 |       <bs-progress value="80" type="danger" striped animated></bs-progress>
200 |     </div>
201 |   </div>
202 | 
203 |   <!-- Carousel -->
204 |   <div class="row" id="carousel">
205 |     <h3 class="col-md-12">Carousel</h3>
206 |     <div class="col-md-6">
207 | <textarea data-target="#carousel-demo">
208 | <bs-carousel style="width:450px;">
209 |   <img src="holder.js/450x250/sky/text:First slide">
210 |   <img src="holder.js/450x250/industrial/text:Second Slide" title="Second slide caption">
211 |   <img src="holder.js/450x250/social/text: ">
212 |   <h3>Third Slide Title</h3>
213 |   <p>Caption: Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
214 | </bs-carousel>
215 | </textarea>
216 |     </div>
217 |     <div class="col-md-6" id="carousel-demo">
218 |       <bs-carousel style="width:450px;">
219 |         <img data-src="holder.js/450x250/sky/text:First slide">
220 |         <img data-src="holder.js/450x250/industrial/text:Second Slide" title="Second slide caption">
221 |         <img data-src="holder.js/450x250/social/text: ">
222 |         <h3>Third Slide Title</h3>
223 |         <p>Caption: Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
224 |       </bs-carousel>
225 |     </div>
226 |   </div>
227 | </div>
228 | </body>
229 | </html>


--------------------------------------------------------------------------------
/demo-assets/js/xml.js:
--------------------------------------------------------------------------------
  1 | CodeMirror.defineMode("xml", function(config, parserConfig) {
  2 |   var indentUnit = config.indentUnit;
  3 |   var multilineTagIndentFactor = parserConfig.multilineTagIndentFactor || 1;
  4 |   var multilineTagIndentPastTag = parserConfig.multilineTagIndentPastTag || true;
  5 | 
  6 |   var Kludges = parserConfig.htmlMode ? {
  7 |     autoSelfClosers: {'area': true, 'base': true, 'br': true, 'col': true, 'command': true,
  8 |                       'embed': true, 'frame': true, 'hr': true, 'img': true, 'input': true,
  9 |                       'keygen': true, 'link': true, 'meta': true, 'param': true, 'source': true,
 10 |                       'track': true, 'wbr': true},
 11 |     implicitlyClosed: {'dd': true, 'li': true, 'optgroup': true, 'option': true, 'p': true,
 12 |                        'rp': true, 'rt': true, 'tbody': true, 'td': true, 'tfoot': true,
 13 |                        'th': true, 'tr': true},
 14 |     contextGrabbers: {
 15 |       'dd': {'dd': true, 'dt': true},
 16 |       'dt': {'dd': true, 'dt': true},
 17 |       'li': {'li': true},
 18 |       'option': {'option': true, 'optgroup': true},
 19 |       'optgroup': {'optgroup': true},
 20 |       'p': {'address': true, 'article': true, 'aside': true, 'blockquote': true, 'dir': true,
 21 |             'div': true, 'dl': true, 'fieldset': true, 'footer': true, 'form': true,
 22 |             'h1': true, 'h2': true, 'h3': true, 'h4': true, 'h5': true, 'h6': true,
 23 |             'header': true, 'hgroup': true, 'hr': true, 'menu': true, 'nav': true, 'ol': true,
 24 |             'p': true, 'pre': true, 'section': true, 'table': true, 'ul': true},
 25 |       'rp': {'rp': true, 'rt': true},
 26 |       'rt': {'rp': true, 'rt': true},
 27 |       'tbody': {'tbody': true, 'tfoot': true},
 28 |       'td': {'td': true, 'th': true},
 29 |       'tfoot': {'tbody': true},
 30 |       'th': {'td': true, 'th': true},
 31 |       'thead': {'tbody': true, 'tfoot': true},
 32 |       'tr': {'tr': true}
 33 |     },
 34 |     doNotIndent: {"pre": true},
 35 |     allowUnquoted: true,
 36 |     allowMissing: true
 37 |   } : {
 38 |     autoSelfClosers: {},
 39 |     implicitlyClosed: {},
 40 |     contextGrabbers: {},
 41 |     doNotIndent: {},
 42 |     allowUnquoted: false,
 43 |     allowMissing: false
 44 |   };
 45 |   var alignCDATA = parserConfig.alignCDATA;
 46 | 
 47 |   // Return variables for tokenizers
 48 |   var tagName, type;
 49 | 
 50 |   function inText(stream, state) {
 51 |     function chain(parser) {
 52 |       state.tokenize = parser;
 53 |       return parser(stream, state);
 54 |     }
 55 | 
 56 |     var ch = stream.next();
 57 |     if (ch == "<") {
 58 |       if (stream.eat("!")) {
 59 |         if (stream.eat("[")) {
 60 |           if (stream.match("CDATA[")) return chain(inBlock("atom", "]]>"));
 61 |           else return null;
 62 |         } else if (stream.match("--")) {
 63 |           return chain(inBlock("comment", "-->"));
 64 |         } else if (stream.match("DOCTYPE", true, true)) {
 65 |           stream.eatWhile(/[\w\._\-]/);
 66 |           return chain(doctype(1));
 67 |         } else {
 68 |           return null;
 69 |         }
 70 |       } else if (stream.eat("?")) {
 71 |         stream.eatWhile(/[\w\._\-]/);
 72 |         state.tokenize = inBlock("meta", "?>");
 73 |         return "meta";
 74 |       } else {
 75 |         var isClose = stream.eat("/");
 76 |         tagName = "";
 77 |         var c;
 78 |         while ((c = stream.eat(/[^\s\u00a0=<>\"\'\/?]/))) tagName += c;
 79 |         if (!tagName) return "tag error";
 80 |         type = isClose ? "closeTag" : "openTag";
 81 |         state.tokenize = inTag;
 82 |         return "tag";
 83 |       }
 84 |     } else if (ch == "&") {
 85 |       var ok;
 86 |       if (stream.eat("#")) {
 87 |         if (stream.eat("x")) {
 88 |           ok = stream.eatWhile(/[a-fA-F\d]/) && stream.eat(";");
 89 |         } else {
 90 |           ok = stream.eatWhile(/[\d]/) && stream.eat(";");
 91 |         }
 92 |       } else {
 93 |         ok = stream.eatWhile(/[\w\.\-:]/) && stream.eat(";");
 94 |       }
 95 |       return ok ? "atom" : "error";
 96 |     } else {
 97 |       stream.eatWhile(/[^&<]/);
 98 |       return null;
 99 |     }
100 |   }
101 | 
102 |   function inTag(stream, state) {
103 |     var ch = stream.next();
104 |     if (ch == ">" || (ch == "/" && stream.eat(">"))) {
105 |       state.tokenize = inText;
106 |       type = ch == ">" ? "endTag" : "selfcloseTag";
107 |       return "tag";
108 |     } else if (ch == "=") {
109 |       type = "equals";
110 |       return null;
111 |     } else if (ch == "<") {
112 |       state.tokenize = inText;
113 |       var next = state.tokenize(stream, state);
114 |       return next ? next + " error" : "error";
115 |     } else if (/[\'\"]/.test(ch)) {
116 |       state.tokenize = inAttribute(ch);
117 |       state.stringStartCol = stream.column();
118 |       return state.tokenize(stream, state);
119 |     } else {
120 |       stream.eatWhile(/[^\s\u00a0=<>\"\']/);
121 |       return "word";
122 |     }
123 |   }
124 | 
125 |   function inAttribute(quote) {
126 |     var closure = function(stream, state) {
127 |       while (!stream.eol()) {
128 |         if (stream.next() == quote) {
129 |           state.tokenize = inTag;
130 |           break;
131 |         }
132 |       }
133 |       return "string";
134 |     };
135 |     closure.isInAttribute = true;
136 |     return closure;
137 |   }
138 | 
139 |   function inBlock(style, terminator) {
140 |     return function(stream, state) {
141 |       while (!stream.eol()) {
142 |         if (stream.match(terminator)) {
143 |           state.tokenize = inText;
144 |           break;
145 |         }
146 |         stream.next();
147 |       }
148 |       return style;
149 |     };
150 |   }
151 |   function doctype(depth) {
152 |     return function(stream, state) {
153 |       var ch;
154 |       while ((ch = stream.next()) != null) {
155 |         if (ch == "<") {
156 |           state.tokenize = doctype(depth + 1);
157 |           return state.tokenize(stream, state);
158 |         } else if (ch == ">") {
159 |           if (depth == 1) {
160 |             state.tokenize = inText;
161 |             break;
162 |           } else {
163 |             state.tokenize = doctype(depth - 1);
164 |             return state.tokenize(stream, state);
165 |           }
166 |         }
167 |       }
168 |       return "meta";
169 |     };
170 |   }
171 | 
172 |   var curState, curStream, setStyle;
173 |   function pass() {
174 |     for (var i = arguments.length - 1; i >= 0; i--) curState.cc.push(arguments[i]);
175 |   }
176 |   function cont() {
177 |     pass.apply(null, arguments);
178 |     return true;
179 |   }
180 | 
181 |   function pushContext(tagName, startOfLine) {
182 |     var noIndent = Kludges.doNotIndent.hasOwnProperty(tagName) || (curState.context && curState.context.noIndent);
183 |     curState.context = {
184 |       prev: curState.context,
185 |       tagName: tagName,
186 |       indent: curState.indented,
187 |       startOfLine: startOfLine,
188 |       noIndent: noIndent
189 |     };
190 |   }
191 |   function popContext() {
192 |     if (curState.context) curState.context = curState.context.prev;
193 |   }
194 | 
195 |   function element(type) {
196 |     if (type == "openTag") {
197 |       curState.tagName = tagName;
198 |       curState.tagStart = curStream.column();
199 |       return cont(attributes, endtag(curState.startOfLine));
200 |     } else if (type == "closeTag") {
201 |       var err = false;
202 |       if (curState.context) {
203 |         if (curState.context.tagName != tagName) {
204 |           if (Kludges.implicitlyClosed.hasOwnProperty(curState.context.tagName.toLowerCase())) {
205 |             popContext();
206 |           }
207 |           err = !curState.context || curState.context.tagName != tagName;
208 |         }
209 |       } else {
210 |         err = true;
211 |       }
212 |       if (err) setStyle = "error";
213 |       return cont(endclosetag(err));
214 |     }
215 |     return cont();
216 |   }
217 |   function endtag(startOfLine) {
218 |     return function(type) {
219 |       var tagName = curState.tagName;
220 |       curState.tagName = curState.tagStart = null;
221 |       if (type == "selfcloseTag" ||
222 |           (type == "endTag" && Kludges.autoSelfClosers.hasOwnProperty(tagName.toLowerCase()))) {
223 |         maybePopContext(tagName.toLowerCase());
224 |         return cont();
225 |       }
226 |       if (type == "endTag") {
227 |         maybePopContext(tagName.toLowerCase());
228 |         pushContext(tagName, startOfLine);
229 |         return cont();
230 |       }
231 |       return cont();
232 |     };
233 |   }
234 |   function endclosetag(err) {
235 |     return function(type) {
236 |       if (err) setStyle = "error";
237 |       if (type == "endTag") { popContext(); return cont(); }
238 |       setStyle = "error";
239 |       return cont(arguments.callee);
240 |     };
241 |   }
242 |   function maybePopContext(nextTagName) {
243 |     var parentTagName;
244 |     while (true) {
245 |       if (!curState.context) {
246 |         return;
247 |       }
248 |       parentTagName = curState.context.tagName.toLowerCase();
249 |       if (!Kludges.contextGrabbers.hasOwnProperty(parentTagName) ||
250 |           !Kludges.contextGrabbers[parentTagName].hasOwnProperty(nextTagName)) {
251 |         return;
252 |       }
253 |       popContext();
254 |     }
255 |   }
256 | 
257 |   function attributes(type) {
258 |     if (type == "word") {setStyle = "attribute"; return cont(attribute, attributes);}
259 |     if (type == "endTag" || type == "selfcloseTag") return pass();
260 |     setStyle = "error";
261 |     return cont(attributes);
262 |   }
263 |   function attribute(type) {
264 |     if (type == "equals") return cont(attvalue, attributes);
265 |     if (!Kludges.allowMissing) setStyle = "error";
266 |     else if (type == "word") {setStyle = "attribute"; return cont(attribute, attributes);}
267 |     return (type == "endTag" || type == "selfcloseTag") ? pass() : cont();
268 |   }
269 |   function attvalue(type) {
270 |     if (type == "string") return cont(attvaluemaybe);
271 |     if (type == "word" && Kludges.allowUnquoted) {setStyle = "string"; return cont();}
272 |     setStyle = "error";
273 |     return (type == "endTag" || type == "selfCloseTag") ? pass() : cont();
274 |   }
275 |   function attvaluemaybe(type) {
276 |     if (type == "string") return cont(attvaluemaybe);
277 |     else return pass();
278 |   }
279 | 
280 |   return {
281 |     startState: function() {
282 |       return {tokenize: inText, cc: [], indented: 0, startOfLine: true, tagName: null, tagStart: null, context: null};
283 |     },
284 | 
285 |     token: function(stream, state) {
286 |       if (!state.tagName && stream.sol()) {
287 |         state.startOfLine = true;
288 |         state.indented = stream.indentation();
289 |       }
290 |       if (stream.eatSpace()) return null;
291 | 
292 |       setStyle = type = tagName = null;
293 |       var style = state.tokenize(stream, state);
294 |       state.type = type;
295 |       if ((style || type) && style != "comment") {
296 |         curState = state; curStream = stream;
297 |         while (true) {
298 |           var comb = state.cc.pop() || element;
299 |           if (comb(type || style)) break;
300 |         }
301 |       }
302 |       state.startOfLine = false;
303 |       if (setStyle)
304 |         style = setStyle == "error" ? style + " error" : setStyle;
305 |       return style;
306 |     },
307 | 
308 |     indent: function(state, textAfter, fullLine) {
309 |       var context = state.context;
310 |       // Indent multi-line strings (e.g. css).
311 |       if (state.tokenize.isInAttribute) {
312 |         return state.stringStartCol + 1;
313 |       }
314 |       if ((state.tokenize != inTag && state.tokenize != inText) ||
315 |           context && context.noIndent)
316 |         return fullLine ? fullLine.match(/^(\s*)/)[0].length : 0;
317 |       // Indent the starts of attribute names.
318 |       if (state.tagName) {
319 |         if (multilineTagIndentPastTag)
320 |           return state.tagStart + state.tagName.length + 2;
321 |         else
322 |           return state.tagStart + indentUnit * multilineTagIndentFactor;
323 |       }
324 |       if (alignCDATA && /<!\[CDATA\[/.test(textAfter)) return 0;
325 |       if (context && /^<\//.test(textAfter))
326 |         context = context.prev;
327 |       while (context && !context.startOfLine)
328 |         context = context.prev;
329 |       if (context) return context.indent + indentUnit;
330 |       else return 0;
331 |     },
332 | 
333 |     electricChars: "/",
334 |     blockCommentStart: "<!--",
335 |     blockCommentEnd: "-->",
336 | 
337 |     configuration: parserConfig.htmlMode ? "html" : "xml",
338 |     helperType: parserConfig.htmlMode ? "html" : "xml"
339 |   };
340 | });
341 | 
342 | CodeMirror.defineMIME("text/xml", "xml");
343 | CodeMirror.defineMIME("application/xml", "xml");
344 | if (!CodeMirror.mimeModes.hasOwnProperty("text/html"))
345 |   CodeMirror.defineMIME("text/html", {name: "xml", htmlMode: true});
346 | 


--------------------------------------------------------------------------------
/demo-assets/js/CustomElements.min.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @license
 3 |  * Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
 4 |  * This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
 5 |  * The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
 6 |  * The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
 7 |  * Code distributed by Google as part of the polymer project is also
 8 |  * subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 9 |  */
10 | // @version 0.6.1
11 | "undefined"==typeof WeakMap&&!function(){var e=Object.defineProperty,t=Date.now()%1e9,r=function(){this.name="__st"+(1e9*Math.random()>>>0)+(t++ +"__")};r.prototype={set:function(t,r){var n=t[this.name];return n&&n[0]===t?n[1]=r:e(t,this.name,{value:[t,r],writable:!0}),this},get:function(e){var t;return(t=e[this.name])&&t[0]===e?t[1]:void 0},"delete":function(e){var t=e[this.name];return t&&t[0]===e?(t[0]=t[1]=void 0,!0):!1},has:function(e){var t=e[this.name];return t?t[0]===e:!1}},window.WeakMap=r}(),function(e){function t(e){_.push(e),b||(b=!0,h(n))}function r(e){return window.ShadowDOMPolyfill&&window.ShadowDOMPolyfill.wrapIfNeeded(e)||e}function n(){b=!1;var e=_;_=[],e.sort(function(e,t){return e.uid_-t.uid_});var t=!1;e.forEach(function(e){var r=e.takeRecords();o(e),r.length&&(e.callback_(r,e),t=!0)}),t&&n()}function o(e){e.nodes_.forEach(function(t){var r=v.get(t);r&&r.forEach(function(t){t.observer===e&&t.removeTransientObservers()})})}function i(e,t){for(var r=e;r;r=r.parentNode){var n=v.get(r);if(n)for(var o=0;o<n.length;o++){var i=n[o],a=i.options;if(r===e||a.subtree){var s=t(a);s&&i.enqueue(s)}}}}function a(e){this.callback_=e,this.nodes_=[],this.records_=[],this.uid_=++E}function s(e,t){this.type=e,this.target=t,this.addedNodes=[],this.removedNodes=[],this.previousSibling=null,this.nextSibling=null,this.attributeName=null,this.attributeNamespace=null,this.oldValue=null}function d(e){var t=new s(e.type,e.target);return t.addedNodes=e.addedNodes.slice(),t.removedNodes=e.removedNodes.slice(),t.previousSibling=e.previousSibling,t.nextSibling=e.nextSibling,t.attributeName=e.attributeName,t.attributeNamespace=e.attributeNamespace,t.oldValue=e.oldValue,t}function u(e,t){return y=new s(e,t)}function c(e){return N?N:(N=d(y),N.oldValue=e,N)}function l(){y=N=void 0}function f(e){return e===N||e===y}function p(e,t){return e===t?e:N&&f(e)?N:null}function m(e,t,r){this.observer=e,this.target=t,this.options=r,this.transientObservedNodes=[]}var h,v=new WeakMap;if(/Trident|Edge/.test(navigator.userAgent))h=setTimeout;else if(window.setImmediate)h=window.setImmediate;else{var w=[],g=String(Math.random());window.addEventListener("message",function(e){if(e.data===g){var t=w;w=[],t.forEach(function(e){e()})}}),h=function(e){w.push(e),window.postMessage(g,"*")}}var b=!1,_=[],E=0;a.prototype={observe:function(e,t){if(e=r(e),!t.childList&&!t.attributes&&!t.characterData||t.attributeOldValue&&!t.attributes||t.attributeFilter&&t.attributeFilter.length&&!t.attributes||t.characterDataOldValue&&!t.characterData)throw new SyntaxError;var n=v.get(e);n||v.set(e,n=[]);for(var o,i=0;i<n.length;i++)if(n[i].observer===this){o=n[i],o.removeListeners(),o.options=t;break}o||(o=new m(this,e,t),n.push(o),this.nodes_.push(e)),o.addListeners()},disconnect:function(){this.nodes_.forEach(function(e){for(var t=v.get(e),r=0;r<t.length;r++){var n=t[r];if(n.observer===this){n.removeListeners(),t.splice(r,1);break}}},this),this.records_=[]},takeRecords:function(){var e=this.records_;return this.records_=[],e}};var y,N;m.prototype={enqueue:function(e){var r=this.observer.records_,n=r.length;if(r.length>0){var o=r[n-1],i=p(o,e);if(i)return void(r[n-1]=i)}else t(this.observer);r[n]=e},addListeners:function(){this.addListeners_(this.target)},addListeners_:function(e){var t=this.options;t.attributes&&e.addEventListener("DOMAttrModified",this,!0),t.characterData&&e.addEventListener("DOMCharacterDataModified",this,!0),t.childList&&e.addEventListener("DOMNodeInserted",this,!0),(t.childList||t.subtree)&&e.addEventListener("DOMNodeRemoved",this,!0)},removeListeners:function(){this.removeListeners_(this.target)},removeListeners_:function(e){var t=this.options;t.attributes&&e.removeEventListener("DOMAttrModified",this,!0),t.characterData&&e.removeEventListener("DOMCharacterDataModified",this,!0),t.childList&&e.removeEventListener("DOMNodeInserted",this,!0),(t.childList||t.subtree)&&e.removeEventListener("DOMNodeRemoved",this,!0)},addTransientObserver:function(e){if(e!==this.target){this.addListeners_(e),this.transientObservedNodes.push(e);var t=v.get(e);t||v.set(e,t=[]),t.push(this)}},removeTransientObservers:function(){var e=this.transientObservedNodes;this.transientObservedNodes=[],e.forEach(function(e){this.removeListeners_(e);for(var t=v.get(e),r=0;r<t.length;r++)if(t[r]===this){t.splice(r,1);break}},this)},handleEvent:function(e){switch(e.stopImmediatePropagation(),e.type){case"DOMAttrModified":var t=e.attrName,r=e.relatedNode.namespaceURI,n=e.target,o=new u("attributes",n);o.attributeName=t,o.attributeNamespace=r;var a=e.attrChange===MutationEvent.ADDITION?null:e.prevValue;i(n,function(e){return!e.attributes||e.attributeFilter&&e.attributeFilter.length&&-1===e.attributeFilter.indexOf(t)&&-1===e.attributeFilter.indexOf(r)?void 0:e.attributeOldValue?c(a):o});break;case"DOMCharacterDataModified":var n=e.target,o=u("characterData",n),a=e.prevValue;i(n,function(e){return e.characterData?e.characterDataOldValue?c(a):o:void 0});break;case"DOMNodeRemoved":this.addTransientObserver(e.target);case"DOMNodeInserted":var s,d,f=e.target;"DOMNodeInserted"===e.type?(s=[f],d=[]):(s=[],d=[f]);var p=f.previousSibling,m=f.nextSibling,o=u("childList",e.target.parentNode);o.addedNodes=s,o.removedNodes=d,o.previousSibling=p,o.nextSibling=m,i(e.relatedNode,function(e){return e.childList?o:void 0})}l()}},e.JsMutationObserver=a,e.MutationObserver||(e.MutationObserver=a)}(this),window.CustomElements=window.CustomElements||{flags:{}},function(e){var t=e.flags,r=[],n=function(e){r.push(e)},o=function(){r.forEach(function(t){t(e)})};e.addModule=n,e.initializeModules=o,e.hasNative=Boolean(document.registerElement),e.useNative=!t.register&&e.hasNative&&!window.ShadowDOMPolyfill&&(!window.HTMLImports||HTMLImports.useNative)}(CustomElements),CustomElements.addModule(function(e){function t(e,t){r(e,function(e){return t(e)?!0:void n(e,t)}),n(e,t)}function r(e,t,n){var o=e.firstElementChild;if(!o)for(o=e.firstChild;o&&o.nodeType!==Node.ELEMENT_NODE;)o=o.nextSibling;for(;o;)t(o,n)!==!0&&r(o,t,n),o=o.nextElementSibling;return null}function n(e,r){for(var n=e.shadowRoot;n;)t(n,r),n=n.olderShadowRoot}function o(e,t){i(e,t,[])}function i(e,t,r){if(e=wrap(e),!(r.indexOf(e)>=0)){r.push(e);for(var n,o=e.querySelectorAll("link[rel="+a+"]"),s=0,d=o.length;d>s&&(n=o[s]);s++)n["import"]&&i(n["import"],t,r);t(e)}}var a=window.HTMLImports?HTMLImports.IMPORT_LINK_TYPE:"none";e.forDocumentTree=o,e.forSubtree=t}),CustomElements.addModule(function(e){function t(e){return r(e)||n(e)}function r(t){return e.upgrade(t)?!0:void s(t)}function n(e){_(e,function(e){return r(e)?!0:void 0})}function o(e){s(e),f(e)&&_(e,function(e){s(e)})}function i(e){M.push(e),N||(N=!0,setTimeout(a))}function a(){N=!1;for(var e,t=M,r=0,n=t.length;n>r&&(e=t[r]);r++)e();M=[]}function s(e){y?i(function(){d(e)}):d(e)}function d(e){e.__upgraded__&&(e.attachedCallback||e.detachedCallback)&&!e.__attached&&f(e)&&(e.__attached=!0,e.attachedCallback&&e.attachedCallback())}function u(e){c(e),_(e,function(e){c(e)})}function c(e){y?i(function(){l(e)}):l(e)}function l(e){e.__upgraded__&&(e.attachedCallback||e.detachedCallback)&&e.__attached&&!f(e)&&(e.__attached=!1,e.detachedCallback&&e.detachedCallback())}function f(e){for(var t=e,r=wrap(document);t;){if(t==r)return!0;t=t.parentNode||t.nodeType===Node.DOCUMENT_FRAGMENT_NODE&&t.host}}function p(e){if(e.shadowRoot&&!e.shadowRoot.__watched){b.dom&&console.log("watching shadow-root for: ",e.localName);for(var t=e.shadowRoot;t;)v(t),t=t.olderShadowRoot}}function m(e){if(b.dom){var r=e[0];if(r&&"childList"===r.type&&r.addedNodes&&r.addedNodes){for(var n=r.addedNodes[0];n&&n!==document&&!n.host;)n=n.parentNode;var o=n&&(n.URL||n._URL||n.host&&n.host.localName)||"";o=o.split("/?").shift().split("/").pop()}console.group("mutations (%d) [%s]",e.length,o||"")}e.forEach(function(e){"childList"===e.type&&(O(e.addedNodes,function(e){e.localName&&t(e)}),O(e.removedNodes,function(e){e.localName&&u(e)}))}),b.dom&&console.groupEnd()}function h(e){for(e=wrap(e),e||(e=wrap(document));e.parentNode;)e=e.parentNode;var t=e.__observer;t&&(m(t.takeRecords()),a())}function v(e){if(!e.__observer){var t=new MutationObserver(m);t.observe(e,{childList:!0,subtree:!0}),e.__observer=t}}function w(e){e=wrap(e),b.dom&&console.group("upgradeDocument: ",e.baseURI.split("/").pop()),t(e),v(e),b.dom&&console.groupEnd()}function g(e){E(e,w)}var b=e.flags,_=e.forSubtree,E=e.forDocumentTree,y=!window.MutationObserver||window.MutationObserver===window.JsMutationObserver;e.hasPolyfillMutations=y;var N=!1,M=[],O=Array.prototype.forEach.call.bind(Array.prototype.forEach),L=Element.prototype.createShadowRoot;L&&(Element.prototype.createShadowRoot=function(){var e=L.call(this);return CustomElements.watchShadow(this),e}),e.watchShadow=p,e.upgradeDocumentTree=g,e.upgradeSubtree=n,e.upgradeAll=t,e.attachedNode=o,e.takeRecords=h}),CustomElements.addModule(function(e){function t(t){if(!t.__upgraded__&&t.nodeType===Node.ELEMENT_NODE){var n=t.getAttribute("is"),o=e.getRegisteredDefinition(n||t.localName);if(o){if(n&&o.tag==t.localName)return r(t,o);if(!n&&!o["extends"])return r(t,o)}}}function r(t,r){return a.upgrade&&console.group("upgrade:",t.localName),r.is&&t.setAttribute("is",r.is),n(t,r),t.__upgraded__=!0,i(t),e.attachedNode(t),e.upgradeSubtree(t),a.upgrade&&console.groupEnd(),t}function n(e,t){Object.__proto__?e.__proto__=t.prototype:(o(e,t.prototype,t["native"]),e.__proto__=t.prototype)}function o(e,t,r){for(var n={},o=t;o!==r&&o!==HTMLElement.prototype;){for(var i,a=Object.getOwnPropertyNames(o),s=0;i=a[s];s++)n[i]||(Object.defineProperty(e,i,Object.getOwnPropertyDescriptor(o,i)),n[i]=1);o=Object.getPrototypeOf(o)}}function i(e){e.createdCallback&&e.createdCallback()}var a=e.flags;e.upgrade=t,e.upgradeWithDefinition=r,e.implementPrototype=n}),CustomElements.addModule(function(e){function t(t,n){var d=n||{};if(!t)throw new Error("document.registerElement: first argument `name` must not be empty");if(t.indexOf("-")<0)throw new Error("document.registerElement: first argument ('name') must contain a dash ('-'). Argument provided was '"+String(t)+"'.");if(o(t))throw new Error("Failed to execute 'registerElement' on 'Document': Registration failed for type '"+String(t)+"'. The type name is invalid.");if(u(t))throw new Error("DuplicateDefinitionError: a type with name '"+String(t)+"' is already registered");return d.prototype||(d.prototype=Object.create(HTMLElement.prototype)),d.__name=t.toLowerCase(),d.lifecycle=d.lifecycle||{},d.ancestry=i(d["extends"]),a(d),s(d),r(d.prototype),c(d.__name,d),d.ctor=l(d),d.ctor.prototype=d.prototype,d.prototype.constructor=d.ctor,e.ready&&w(document),d.ctor}function r(e){if(!e.setAttribute._polyfilled){var t=e.setAttribute;e.setAttribute=function(e,r){n.call(this,e,r,t)};var r=e.removeAttribute;e.removeAttribute=function(e){n.call(this,e,null,r)},e.setAttribute._polyfilled=!0}}function n(e,t,r){e=e.toLowerCase();var n=this.getAttribute(e);r.apply(this,arguments);var o=this.getAttribute(e);this.attributeChangedCallback&&o!==n&&this.attributeChangedCallback(e,n,o)}function o(e){for(var t=0;t<y.length;t++)if(e===y[t])return!0}function i(e){var t=u(e);return t?i(t["extends"]).concat([t]):[]}function a(e){for(var t,r=e["extends"],n=0;t=e.ancestry[n];n++)r=t.is&&t.tag;e.tag=r||e.__name,r&&(e.is=e.__name)}function s(e){if(!Object.__proto__){var t=HTMLElement.prototype;if(e.is){var r=document.createElement(e.tag),n=Object.getPrototypeOf(r);n===e.prototype&&(t=n)}for(var o,i=e.prototype;i&&i!==t;)o=Object.getPrototypeOf(i),i.__proto__=o,i=o;e["native"]=t}}function d(e){return b(O(e.tag),e)}function u(e){return e?N[e.toLowerCase()]:void 0}function c(e,t){N[e]=t}function l(e){return function(){return d(e)}}function f(e,t,r){return e===M?p(t,r):L(e,t)}function p(e,t){var r=u(t||e);if(r){if(e==r.tag&&t==r.is)return new r.ctor;if(!t&&!r.is)return new r.ctor}var n;return t?(n=p(e),n.setAttribute("is",t),n):(n=O(e),e.indexOf("-")>=0&&_(n,HTMLElement),n)}function m(e,t){var r=e[t];e[t]=function(){var e=r.apply(this,arguments);return g(e),e}}var h,v=e.isIE11OrOlder,w=e.upgradeDocumentTree,g=e.upgradeAll,b=e.upgradeWithDefinition,_=e.implementPrototype,E=e.useNative,y=["annotation-xml","color-profile","font-face","font-face-src","font-face-uri","font-face-format","font-face-name","missing-glyph"],N={},M="http://www.w3.org/1999/xhtml",O=document.createElement.bind(document),L=document.createElementNS.bind(document);h=Object.__proto__||E?function(e,t){return e instanceof t}:function(e,t){for(var r=e;r;){if(r===t.prototype)return!0;r=r.__proto__}return!1},m(Node.prototype,"cloneNode"),m(document,"importNode"),v&&!function(){var e=document.importNode;document.importNode=function(){var t=e.apply(document,arguments);if(t.nodeType==t.DOCUMENT_FRAGMENT_NODE){var r=document.createDocumentFragment();return r.appendChild(t),r}return t}}(),document.registerElement=t,document.createElement=p,document.createElementNS=f,e.registry=N,e["instanceof"]=h,e.reservedTagList=y,e.getRegisteredDefinition=u,document.register=document.registerElement}),function(e){function t(){a(wrap(document)),window.HTMLImports&&(HTMLImports.__importsParsingHook=function(e){a(wrap(e["import"]))}),CustomElements.ready=!0,setTimeout(function(){CustomElements.readyTime=Date.now(),window.HTMLImports&&(CustomElements.elapsed=CustomElements.readyTime-HTMLImports.readyTime),document.dispatchEvent(new CustomEvent("WebComponentsReady",{bubbles:!0}))})}var r=e.useNative,n=e.initializeModules,o=/Trident/.test(navigator.userAgent);if(r){var i=function(){};e.watchShadow=i,e.upgrade=i,e.upgradeAll=i,e.upgradeDocumentTree=i,e.upgradeSubtree=i,e.takeRecords=i,e["instanceof"]=function(e,t){return e instanceof t}}else n();var a=e.upgradeDocumentTree;if(window.wrap||(window.ShadowDOMPolyfill?(window.wrap=ShadowDOMPolyfill.wrapIfNeeded,window.unwrap=ShadowDOMPolyfill.unwrapIfNeeded):window.wrap=window.unwrap=function(e){return e}),o&&"function"!=typeof window.CustomEvent&&(window.CustomEvent=function(e,t){t=t||{};var r=document.createEvent("CustomEvent");return r.initCustomEvent(e,Boolean(t.bubbles),Boolean(t.cancelable),t.detail),r},window.CustomEvent.prototype=window.Event.prototype),"complete"===document.readyState||e.flags.eager)t();else if("interactive"!==document.readyState||window.attachEvent||window.HTMLImports&&!window.HTMLImports.ready){var s=window.HTMLImports&&!HTMLImports.ready?"HTMLImportsLoaded":"DOMContentLoaded";window.addEventListener(s,t)}else t();e.isIE11OrOlder=o}(window.CustomElements);


--------------------------------------------------------------------------------
/demo-assets/js/holder.js:
--------------------------------------------------------------------------------
  1 | /*
  2 | 
  3 | Holder - 2.2 - client side image placeholders
  4 | (c) 2012-2013 Ivan Malopinsky / http://imsky.co
  5 | 
  6 | Provided under the MIT License.
  7 | Commercial use requires attribution.
  8 | 
  9 | */
 10 | 
 11 | var Holder = Holder || {};
 12 | (function (app, win) {
 13 | 
 14 | var preempted = false,
 15 | fallback = false,
 16 | canvas = document.createElement('canvas');
 17 | var dpr = 1, bsr = 1;
 18 | var resizable_images = [];
 19 | 
 20 | if (!canvas.getContext) {
 21 | 	fallback = true;
 22 | } else {
 23 | 	if (canvas.toDataURL("image/png")
 24 | 		.indexOf("data:image/png") < 0) {
 25 | 		//Android doesn't support data URI
 26 | 		fallback = true;
 27 | 	} else {
 28 | 		var ctx = canvas.getContext("2d");
 29 | 	}
 30 | }
 31 | 
 32 | if(!fallback){
 33 |     dpr = window.devicePixelRatio || 1,
 34 |     bsr = ctx.webkitBackingStorePixelRatio || ctx.mozBackingStorePixelRatio || ctx.msBackingStorePixelRatio || ctx.oBackingStorePixelRatio || ctx.backingStorePixelRatio || 1;
 35 | }
 36 | 
 37 | var ratio = dpr / bsr;
 38 | 
 39 | var settings = {
 40 | 	domain: "holder.js",
 41 | 	images: "img",
 42 | 	bgnodes: ".holderjs",
 43 | 	themes: {
 44 | 		"gray": {
 45 | 			background: "#eee",
 46 | 			foreground: "#aaa",
 47 | 			size: 12
 48 | 		},
 49 | 		"social": {
 50 | 			background: "#3a5a97",
 51 | 			foreground: "#fff",
 52 | 			size: 12
 53 | 		},
 54 | 		"industrial": {
 55 | 			background: "#434A52",
 56 | 			foreground: "#C2F200",
 57 | 			size: 12
 58 | 		},
 59 | 		"sky": {
 60 | 			background: "#0D8FDB",
 61 | 			foreground: "#fff",
 62 | 			size: 12
 63 | 		},
 64 | 		"vine": {
 65 | 			background: "#39DBAC",
 66 | 			foreground: "#1E292C",
 67 | 			size: 12
 68 | 		},
 69 | 		"lava": {
 70 | 			background: "#F8591A",
 71 | 			foreground: "#1C2846",
 72 | 			size: 12
 73 | 		}
 74 | 	},
 75 | 	stylesheet: ""
 76 | };
 77 | app.flags = {
 78 | 	dimensions: {
 79 | 		regex: /^(\d+)x(\d+)$/,
 80 | 		output: function (val) {
 81 | 			var exec = this.regex.exec(val);
 82 | 			return {
 83 | 				width: +exec[1],
 84 | 				height: +exec[2]
 85 | 			}
 86 | 		}
 87 | 	},
 88 | 	fluid: {
 89 | 		regex: /^([0-9%]+)x([0-9%]+)$/,
 90 | 		output: function (val) {
 91 | 			var exec = this.regex.exec(val);
 92 | 			return {
 93 | 				width: exec[1],
 94 | 				height: exec[2]
 95 | 			}
 96 | 		}
 97 | 	},
 98 | 	colors: {
 99 | 		regex: /#([0-9a-f]{3,})\:#([0-9a-f]{3,})/i,
100 | 		output: function (val) {
101 | 			var exec = this.regex.exec(val);
102 | 			return {
103 | 				size: settings.themes.gray.size,
104 | 				foreground: "#" + exec[2],
105 | 				background: "#" + exec[1]
106 | 			}
107 | 		}
108 | 	},
109 | 	text: {
110 | 		regex: /text\:(.*)/,
111 | 		output: function (val) {
112 | 			return this.regex.exec(val)[1];
113 | 		}
114 | 	},
115 | 	font: {
116 | 		regex: /font\:(.*)/,
117 | 		output: function (val) {
118 | 			return this.regex.exec(val)[1];
119 | 		}
120 | 	},
121 | 	auto: {
122 | 		regex: /^auto$/
123 | 	},
124 | 	textmode: {
125 | 		regex: /textmode\:(.*)/,
126 | 		output: function(val){
127 | 			return this.regex.exec(val)[1];
128 | 		}
129 | 	}
130 | }
131 | 
132 | //getElementsByClassName polyfill
133 | document.getElementsByClassName||(document.getElementsByClassName=function(e){var t=document,n,r,i,s=[];if(t.querySelectorAll)return t.querySelectorAll("."+e);if(t.evaluate){r=".//*[contains(concat(' ', @class, ' '), ' "+e+" ')]",n=t.evaluate(r,t,null,0,null);while(i=n.iterateNext())s.push(i)}else{n=t.getElementsByTagName("*"),r=new RegExp("(^|\\s)"+e+"(\\s|$)");for(i=0;i<n.length;i++)r.test(n[i].className)&&s.push(n[i])}return s})
134 | 
135 | //getComputedStyle polyfill
136 | window.getComputedStyle||(window.getComputedStyle=function(e){return this.el=e,this.getPropertyValue=function(t){var n=/(\-([a-z]){1})/g;return t=="float"&&(t="styleFloat"),n.test(t)&&(t=t.replace(n,function(){return arguments[2].toUpperCase()})),e.currentStyle[t]?e.currentStyle[t]:null},this})
137 | 
138 | //http://javascript.nwbox.com/ContentLoaded by Diego Perini with modifications
139 | function contentLoaded(n,t){var l="complete",s="readystatechange",u=!1,h=u,c=!0,i=n.document,a=i.documentElement,e=i.addEventListener?"addEventListener":"attachEvent",v=i.addEventListener?"removeEventListener":"detachEvent",f=i.addEventListener?"":"on",r=function(e){(e.type!=s||i.readyState==l)&&((e.type=="load"?n:i)[v](f+e.type,r,u),!h&&(h=!0)&&t.call(n,null))},o=function(){try{a.doScroll("left")}catch(n){setTimeout(o,50);return}r("poll")};if(i.readyState==l)t.call(n,"lazy");else{if(i.createEventObject&&a.doScroll){try{c=!n.frameElement}catch(y){}c&&o()}i[e](f+"DOMContentLoaded",r,u),i[e](f+s,r,u),n[e](f+"load",r,u)}}
140 | 
141 | //https://gist.github.com/991057 by Jed Schmidt with modifications
142 | function selector(a){
143 | 	a=a.match(/^(\W)?(.*)/);var b=document["getElement"+(a[1]?a[1]=="#"?"ById":"sByClassName":"sByTagName")](a[2]);
144 | 	var ret=[];	b!==null&&(b.length?ret=b:b.length===0?ret=b:ret=[b]);	return ret;
145 | }
146 | 
147 | //shallow object property extend
148 | function extend(a,b){
149 | 	var c={};
150 | 	for(var i in a){
151 | 		if(a.hasOwnProperty(i)){
152 | 			c[i]=a[i];
153 | 		}
154 | 	}
155 | 	for(var i in b){
156 | 		if(b.hasOwnProperty(i)){
157 | 			c[i]=b[i];
158 | 		}
159 | 	}
160 | 	return c
161 | }
162 | 
163 | //hasOwnProperty polyfill
164 | if (!Object.prototype.hasOwnProperty)
165 |     /*jshint -W001, -W103 */
166 |     Object.prototype.hasOwnProperty = function(prop) {
167 | 		var proto = this.__proto__ || this.constructor.prototype;
168 | 		return (prop in this) && (!(prop in proto) || proto[prop] !== this[prop]);
169 | 	}
170 |     /*jshint +W001, +W103 */
171 | 
172 | function text_size(width, height, template) {
173 | 	height = parseInt(height, 10);
174 | 	width = parseInt(width, 10);
175 | 	var bigSide = Math.max(height, width)
176 | 	var smallSide = Math.min(height, width)
177 | 	var scale = 1 / 12;
178 | 	var newHeight = Math.min(smallSide * 0.75, 0.75 * bigSide * scale);
179 | 	return {
180 | 		height: Math.round(Math.max(template.size, newHeight))
181 | 	}
182 | }
183 | 
184 | function draw(args) {
185 | 	var ctx = args.ctx;
186 | 	var dimensions = args.dimensions;
187 | 	var template = args.template;
188 | 	var ratio = args.ratio;
189 | 	var holder = args.holder;
190 | 	var literal = holder.textmode == "literal";
191 | 	var exact = holder.textmode == "exact";
192 | 
193 | 	var ts = text_size(dimensions.width, dimensions.height, template);
194 | 	var text_height = ts.height;
195 | 	var width = dimensions.width * ratio,
196 | 		height = dimensions.height * ratio;
197 | 	var font = template.font ? template.font : "sans-serif";
198 | 	canvas.width = width;
199 | 	canvas.height = height;
200 | 	ctx.textAlign = "center";
201 | 	ctx.textBaseline = "middle";
202 | 	ctx.fillStyle = template.background;
203 | 	ctx.fillRect(0, 0, width, height);
204 | 	ctx.fillStyle = template.foreground;
205 | 	ctx.font = "bold " + text_height + "px " + font;
206 | 	var text = template.text ? template.text : (Math.floor(dimensions.width) + "x" + Math.floor(dimensions.height));
207 | 	if (literal) {
208 | 		var dimensions = holder.dimensions;
209 | 		text = dimensions.width + "x" + dimensions.height;
210 | 	}
211 | 	else if(exact && holder.exact_dimensions){
212 | 		var dimensions = holder.exact_dimensions;
213 | 		text = (Math.floor(dimensions.width) + "x" + Math.floor(dimensions.height));
214 | 	}
215 | 	var text_width = ctx.measureText(text).width;
216 | 	if (text_width / width >= 0.75) {
217 | 		text_height = Math.floor(text_height * 0.75 * (width / text_width));
218 | 	}
219 | 	//Resetting font size if necessary
220 | 	ctx.font = "bold " + (text_height * ratio) + "px " + font;
221 | 	ctx.fillText(text, (width / 2), (height / 2), width);
222 | 	return canvas.toDataURL("image/png");
223 | }
224 | 
225 | function render(mode, el, holder, src) {
226 | 	
227 | 	var dimensions = holder.dimensions,
228 | 		theme = holder.theme,
229 | 		text = holder.text ? decodeURIComponent(holder.text) : holder.text;
230 | 	var dimensions_caption = dimensions.width + "x" + dimensions.height;
231 | 	theme = (text ? extend(theme, {
232 | 		text: text
233 | 	}) : theme);
234 | 	theme = (holder.font ? extend(theme, {
235 | 		font: holder.font
236 | 	}) : theme);
237 | 	el.setAttribute("data-src", src);
238 | 	holder.theme = theme;
239 | 	el.holder_data = holder;
240 | 	
241 | 	if (mode == "image") {
242 | 		el.setAttribute("alt", text ? text : theme.text ? theme.text + " [" + dimensions_caption + "]" : dimensions_caption);
243 | 		if (fallback || !holder.auto) {
244 | 			el.style.width = dimensions.width + "px";
245 | 			el.style.height = dimensions.height + "px";
246 | 		}
247 | 		if (fallback) {
248 | 			el.style.backgroundColor = theme.background;
249 | 		} else {
250 | 			el.setAttribute("src", draw({ctx: ctx, dimensions: dimensions, template: theme, ratio:ratio, holder: holder}));
251 | 			
252 | 			if(holder.textmode && holder.textmode == "exact"){
253 | 				resizable_images.push(el);
254 | 				resizable_update(el);
255 | 			}
256 | 			
257 | 		}
258 | 	} else if (mode == "background") {
259 | 		if (!fallback) {
260 | 			el.style.backgroundImage = "url(" + draw({ctx:ctx, dimensions: dimensions, template: theme, ratio: ratio, holder: holder}) + ")";
261 | 			el.style.backgroundSize = dimensions.width + "px " + dimensions.height + "px";
262 | 		}
263 | 	} else if (mode == "fluid") {
264 | 		el.setAttribute("alt", text ? text : theme.text ? theme.text + " [" + dimensions_caption + "]" : dimensions_caption);
265 | 		if (dimensions.height.slice(-1) == "%") {
266 | 			el.style.height = dimensions.height
267 | 		} else {
268 | 			el.style.height = dimensions.height + "px"
269 | 		}
270 | 		if (dimensions.width.slice(-1) == "%") {
271 | 			el.style.width = dimensions.width
272 | 		} else {
273 | 			el.style.width = dimensions.width + "px"
274 | 		}
275 | 		if (el.style.display == "inline" || el.style.display === "" || el.style.display == "none") {
276 | 			el.style.display = "block";
277 | 		}
278 | 		if (fallback) {
279 | 			el.style.backgroundColor = theme.background;
280 | 		} else {
281 | 			resizable_images.push(el);
282 | 			resizable_update(el);
283 | 		}
284 | 	}
285 | }
286 | 
287 | function dimension_check(el, callback) {
288 | 	var dimensions = {
289 | 		height: el.clientHeight,
290 | 		width: el.clientWidth
291 | 	};
292 | 	if (!dimensions.height && !dimensions.width) {
293 | 		if (el.hasAttribute("data-holder-invisible")) {
294 | 			throw new Error("Holder: placeholder is not visible");
295 | 		} else {
296 | 			el.setAttribute("data-holder-invisible", true)
297 | 			setTimeout(function () {
298 | 				callback.call(this, el)
299 | 			}, 1)
300 | 			return null;
301 | 		}
302 | 	} else {
303 | 		el.removeAttribute("data-holder-invisible")
304 | 	}
305 | 	return dimensions;
306 | }
307 | 
308 | function resizable_update(element) {
309 | 	var images;
310 | 	if (element.nodeType == null) {
311 | 		images = resizable_images;
312 | 	} else {
313 | 		images = [element]
314 | 	}
315 | 	for (var i in images) {
316 | 		if (!images.hasOwnProperty(i)) {
317 | 			continue;
318 | 		}
319 | 		var el = images[i]
320 | 		if (el.holder_data) {
321 | 			var holder = el.holder_data;
322 | 			var dimensions = dimension_check(el, resizable_update)
323 | 			if(dimensions){
324 | 				if(holder.fluid){
325 | 					el.setAttribute("src", draw({
326 | 						ctx: ctx,
327 | 						dimensions: dimensions,
328 | 						template: holder.theme,
329 | 						ratio: ratio,
330 | 						holder: holder
331 | 					}))
332 | 				}
333 | 				if(holder.textmode && holder.textmode == "exact"){
334 | 					holder.exact_dimensions = dimensions;
335 | 					el.setAttribute("src", draw({
336 | 						ctx: ctx,
337 | 						dimensions: holder.dimensions,
338 | 						template: holder.theme,
339 | 						ratio: ratio,
340 | 						holder: holder
341 | 					}))
342 | 				}
343 | 			}
344 | 		}
345 | 	}
346 | }
347 | 
348 | function parse_flags(flags, options) {
349 | 	var ret = {
350 | 		theme: extend(settings.themes.gray, {})
351 | 	};
352 | 	var render = false;
353 | 	for (sl = flags.length, j = 0; j < sl; j++) {
354 | 		var flag = flags[j];
355 | 		if (app.flags.dimensions.match(flag)) {
356 | 			render = true;
357 | 			ret.dimensions = app.flags.dimensions.output(flag);
358 | 		} else if (app.flags.fluid.match(flag)) {
359 | 			render = true;
360 | 			ret.dimensions = app.flags.fluid.output(flag);
361 | 			ret.fluid = true;
362 | 		} else if (app.flags.textmode.match(flag)) {
363 | 			ret.textmode = app.flags.textmode.output(flag)
364 | 		} else if (app.flags.colors.match(flag)) {
365 | 			ret.theme = app.flags.colors.output(flag);
366 | 		} else if (options.themes[flag]) {
367 | 			//If a theme is specified, it will override custom colors
368 | 			if(options.themes.hasOwnProperty(flag)){
369 | 				ret.theme = extend(options.themes[flag], {});
370 | 			}
371 | 		} else if (app.flags.font.match(flag)) {
372 | 			ret.font = app.flags.font.output(flag);
373 | 		} else if (app.flags.auto.match(flag)) {
374 | 			ret.auto = true;
375 | 		} else if (app.flags.text.match(flag)) {
376 | 			ret.text = app.flags.text.output(flag);
377 | 		}
378 | 	}
379 | 	return render ? ret : false;
380 | }
381 | 
382 | for (var flag in app.flags) {
383 | 	if (!app.flags.hasOwnProperty(flag)) continue;
384 | 	app.flags[flag].match = function (val) {
385 | 		return val.match(this.regex)
386 | 	}
387 | }
388 | app.add_theme = function (name, theme) {
389 | 	name != null && theme != null && (settings.themes[name] = theme);
390 | 	return app;
391 | };
392 | app.add_image = function (src, el) {
393 | 	var node = selector(el);
394 | 	if (node.length) {
395 | 		for (var i = 0, l = node.length; i < l; i++) {
396 | 			var img = document.createElement("img")
397 | 			img.setAttribute("data-src", src);
398 | 			node[i].appendChild(img);
399 | 		}
400 | 	}
401 | 	return app;
402 | };
403 | app.run = function (o) {
404 | 	preempted = true;
405 | 	
406 | 	var options = extend(settings, o),
407 | 		images = [],
408 | 		imageNodes = [],
409 | 		bgnodes = [];
410 | 	if (typeof (options.images) == "string") {
411 | 		imageNodes = selector(options.images);
412 | 	} else if (window.NodeList && options.images instanceof window.NodeList) {
413 | 		imageNodes = options.images;
414 | 	} else if (window.Node && options.images instanceof window.Node) {
415 | 		imageNodes = [options.images];
416 | 	}
417 | 	
418 | 	if (typeof (options.bgnodes) == "string") {
419 | 		bgnodes = selector(options.bgnodes);
420 | 	} else if (window.NodeList && options.elements instanceof window.NodeList) {
421 | 		bgnodes = options.bgnodes;
422 | 	} else if (window.Node && options.bgnodes instanceof window.Node) {
423 | 		bgnodes = [options.bgnodes];
424 | 	}
425 | 	for (i = 0, l = imageNodes.length; i < l; i++) images.push(imageNodes[i]);
426 | 	var holdercss = document.getElementById("holderjs-style");
427 | 	if (!holdercss) {
428 | 		holdercss = document.createElement("style");
429 | 		holdercss.setAttribute("id", "holderjs-style");
430 | 		holdercss.type = "text/css";
431 | 		document.getElementsByTagName("head")[0].appendChild(holdercss);
432 | 	}
433 | 	if (!options.nocss) {
434 | 		if (holdercss.styleSheet) {
435 | 			holdercss.styleSheet.cssText += options.stylesheet;
436 | 		} else {
437 | 			holdercss.appendChild(document.createTextNode(options.stylesheet));
438 | 		}
439 | 	}
440 | 	var cssregex = new RegExp(options.domain + "\/(.*?)\"?\\)");
441 | 	for (var l = bgnodes.length, i = 0; i < l; i++) {
442 | 		var src = window.getComputedStyle(bgnodes[i], null)
443 | 			.getPropertyValue("background-image");
444 | 		var flags = src.match(cssregex);
445 | 		var bgsrc = bgnodes[i].getAttribute("data-background-src");
446 | 		if (flags) {
447 | 			var holder = parse_flags(flags[1].split("/"), options);
448 | 			if (holder) {
449 | 				render("background", bgnodes[i], holder, src);
450 | 			}
451 | 		} else if (bgsrc != null) {
452 | 			var holder = parse_flags(bgsrc.substr(bgsrc.lastIndexOf(options.domain) + options.domain.length + 1)
453 | 				.split("/"), options);
454 | 			if (holder) {
455 | 				render("background", bgnodes[i], holder, src);
456 | 			}
457 | 		}
458 | 	}
459 | 	for (l = images.length, i = 0; i < l; i++) {
460 | 		var attr_data_src, attr_src;
461 | 		attr_src = attr_data_src = src = null;
462 | 		try {
463 | 			attr_src = images[i].getAttribute("src");
464 | 			attr_datasrc = images[i].getAttribute("data-src");
465 | 		} catch (e) {}
466 | 		if (attr_datasrc == null && !! attr_src && attr_src.indexOf(options.domain) >= 0) {
467 | 			src = attr_src;
468 | 		} else if ( !! attr_datasrc && attr_datasrc.indexOf(options.domain) >= 0) {
469 | 			src = attr_datasrc;
470 | 		}
471 | 		if (src) {
472 | 			var holder = parse_flags(src.substr(src.lastIndexOf(options.domain) + options.domain.length + 1)
473 | 				.split("/"), options);
474 | 			if (holder) {
475 | 				if (holder.fluid) {
476 | 					render("fluid", images[i], holder, src)
477 | 				} else {
478 | 					render("image", images[i], holder, src);
479 | 				}
480 | 			}
481 | 		}
482 | 	}
483 | 	return app;
484 | };
485 | contentLoaded(win, function () {
486 | 	if (window.addEventListener) {
487 | 		window.addEventListener("resize", resizable_update, false);
488 | 		window.addEventListener("orientationchange", resizable_update, false);
489 | 	} else {
490 | 		window.attachEvent("onresize", resizable_update)
491 | 	}
492 | 	preempted || app.run();
493 | });
494 | if (typeof define === "function" && define.amd) {
495 | 	define([], function () {
496 | 		return app;
497 | 	});
498 | }
499 | 
500 | })(Holder, window);
501 | 


--------------------------------------------------------------------------------
/demo-assets/js/bootstrap-web-components.js:
--------------------------------------------------------------------------------
  1 | var prefix = 'bs';
  2 | var importDoc = document.currentScript === document._currentScript ? document.currentScript.ownerDocument: document._currentScript.ownerDocument;
  3 | 
  4 | // Create <style> elm with template CSS
  5 | var css = importDoc.querySelector('#x-css');
  6 | var style = document.createElement('style');
  7 | 
  8 | style.appendChild(css.content.cloneNode(true));
  9 | document.head.appendChild(style);
 10 | 
 11 | 
 12 | // Tooltip
 13 | XTooltip = document.registerElement(prefix + '-tooltip', {
 14 | 	prototype: Object.create(HTMLElement.prototype, {
 15 | 		plugin: {
 16 | 			value: {
 17 | 				namespace: 'bs.tooltip',
 18 | 				name: 'tooltip'
 19 | 			}
 20 | 		},
 21 | 		createdCallback: {
 22 | 			value: function() {
 23 | 				var attrFor = this.getAttribute('for');
 24 | 				var id = attrFor ? '#' + attrFor : null;
 25 | 				var $elm = $(id || this);
 26 | 				var attrs = this.attributes;
 27 | 				var defaults = $.fn[this.plugin.name].Constructor.DEFAULTS;
 28 | 				var options = {};
 29 | 
 30 | 				for (var i = 0; i < attrs.length; i++) {
 31 | 					var name = attrs[i].name.toLowerCase();
 32 | 					var value = attrs[i].value;
 33 | 
 34 | 					if (name === 'for') {
 35 | 						this.classList.add('hide');
 36 | 
 37 | 						if (('content' in defaults) && !('content' in attrs)) {
 38 | 							options.content = this.innerHTML;
 39 | 						} else if (!('title' in attrs)) {
 40 | 							options.title = this.innerHTML;
 41 | 						}
 42 | 					} else if (/^[delay]/i.test(name)) {
 43 | 						var delays = name.split('-');
 44 | 
 45 | 						if (delays.length === 1) {
 46 | 							options.delay = {
 47 | 								show: value,
 48 | 								hide: value
 49 | 							};
 50 | 						} else {
 51 | 							options.delay = options.delay || {};
 52 | 							options.delay[delays[1]] = value;
 53 | 						}
 54 | 					} else if (name in defaults) {
 55 | 						if (/true|false/i.test(value)) {
 56 | 							value = (value === 'true');
 57 | 						}
 58 | 
 59 | 						options[name] = value;
 60 | 					}
 61 | 				}
 62 | 
 63 | 				$elm[this.plugin.name](options);
 64 | 			}
 65 | 		},
 66 | 		attributeChangedCallback: {
 67 | 			value: function(name, oldValue, value) {
 68 | 				var defaults = $.fn[this.plugin.name].Constructor.DEFAULTS;
 69 | 				name = name.toLowerCase();
 70 | 
 71 | 				if (name === 'for' || name in defaults) {
 72 | 					var attrFor = this.getAttribute('for');
 73 | 					var id = attrFor ? '#' + attrFor : null;
 74 | 					var $elm = $(id || this);
 75 | 					var bsInstance = $elm.data(this.plugin.namespace) || $('#' + oldValue).data(this.plugin.namespace);
 76 | 					var option = {};
 77 | 
 78 | 					if (/^delay/i.test(name)) {
 79 | 						var delays = name.split('-');
 80 | 
 81 | 						if (delays.length === 1) {
 82 | 							option.delay = {
 83 | 								show: value,
 84 | 								hide: value
 85 | 							};
 86 | 						} else {
 87 | 							option.delay = option.delay || {};
 88 | 							option.delay[delays[1]] = value;
 89 | 						}
 90 | 					} else if (name === 'title') {
 91 | 						if (value) {
 92 | 							this.setAttribute('data-original-title', value);
 93 | 							this.setAttribute('title', '');
 94 | 						}
 95 | 					} else if (name === 'for') {
 96 | 						// Create new tooltip
 97 | 						$elm[this.plugin.name](bsInstance.options);
 98 | 						bsInstance.destroy();
 99 | 					} else {
100 | 						if (/true|false/i.test(value)) {
101 | 							value = (value === 'true');
102 | 						}
103 | 
104 | 						option[name] = value;
105 | 					}
106 | 
107 | 					if (!$.isEmptyObject(option)) {
108 | 						$elm[this.plugin.name]($.extend(bsInstance.options, option));
109 | 					}
110 | 				}
111 | 			}
112 | 		}
113 | 	})
114 | });
115 | 
116 | 
117 | // Popover
118 | XPopover = document.registerElement(prefix + '-popover', {
119 | 	prototype: Object.create(XTooltip.prototype, {
120 | 		plugin: {
121 | 			value: {
122 | 				namespace: 'bs.popover',
123 | 				name: 'popover'
124 | 			}
125 | 		}
126 | 	})
127 | });
128 | 
129 | 
130 | // Alert
131 | XAlert = document.registerElement(prefix + '-alert', {
132 | 	prototype: Object.create(HTMLElement.prototype, {
133 | 		createdCallback: {
134 | 			value: function() {
135 | 				var template = importDoc.querySelector('#x-alert');
136 | 				this.insertBefore(template.content.cloneNode(true), this.firstChild);
137 | 
138 | 				this.attributeChangedCallback('type', '', this.getAttribute('type'));
139 | 				this.attributeChangedCallback('close', '', this.getAttribute('close'));
140 | 
141 | 				this.classList.add('alert');
142 | 			}
143 | 		},
144 | 		attributeChangedCallback: {
145 | 			value: function(name, oldValue, value) {
146 | 				if (name === 'type') {
147 | 					this.classList.add('alert-' + (value || 'danger'));
148 | 					if (oldValue) {
149 | 						this.classList.remove('alert-' + oldValue);
150 | 					} else if (oldValue === null) {
151 | 						this.classList.remove('alert-danger');
152 | 					}
153 | 				} else if (name === 'close') {
154 | 					var action = (value === 'false') ? 'add' : 'remove';
155 | 					this.querySelector('.close').classList[action]('hide');
156 | 				}
157 | 			}
158 | 		}
159 | 	})
160 | });
161 | 
162 | 
163 | // Badge
164 | XBadge = document.registerElement(prefix + '-badge', {
165 | 	prototype: Object.create(HTMLElement.prototype, {
166 | 		createdCallback: {
167 | 			value: function() {
168 | 				this.classList.add('badge');
169 | 			}
170 | 		}
171 | 	})
172 | });
173 | 
174 | 
175 | // Carousel
176 | XCarousel = document.registerElement(prefix + '-carousel', {
177 | 	prototype: Object.create(HTMLElement.prototype, {
178 | 		plugin: {
179 | 			value: {
180 | 				namespace: 'bs.carousel',
181 | 				name: 'carousel'
182 | 			}
183 | 		},
184 | 		createdCallback: {
185 | 			value: function() {
186 | 				var i, j, attrTitle;
187 | 
188 | 				var template = importDoc.querySelector('#x-carousel');
189 | 				var carousel = template.content.cloneNode(true);
190 | 				var carouselInner = carousel.querySelector('.carousel-inner');
191 | 				var carouselControls = carousel.querySelectorAll('.carousel-control');
192 | 				var carouselIndicators = carousel.querySelector('.carousel-indicators');
193 | 
194 | 				// Carousel Items
195 | 				carouselInner.innerHTML = this.innerHTML;
196 | 
197 | 				var firstItem = carouselInner.children[0];
198 | 				var items = carouselInner.querySelectorAll('.carousel-inner > ' + firstItem.tagName);
199 | 				var nodes = carouselInner.childNodes;
200 | 
201 | 				var itemWrapper =document.createElement('div');
202 | 				var newCarouselInner = document.createDocumentFragment();
203 | 
204 | 				function setCaption(text) {
205 | 					if (text) {
206 | 						var caption = itemWrapper.querySelector('.carousel-caption');
207 | 
208 | 						if (!caption) {
209 | 							caption = document.createElement('div');
210 | 							caption.classList.add('carousel-caption');
211 | 							caption.textContent =  text;
212 | 
213 | 							itemWrapper.appendChild(caption);
214 | 						}
215 | 					}
216 | 				}
217 | 
218 | 				for (i = 0, j = 0; i < nodes.length; i++) {
219 | 					var node = nodes[i];
220 | 					var item = items[j];
221 | 
222 | 					// Item Wrapper
223 | 					if (node === item) {
224 | 						// Add proir
225 | 						if (itemWrapper.hasChildNodes()) {
226 | 							setCaption(attrTitle);
227 | 							newCarouselInner.appendChild(itemWrapper);
228 | 
229 | 							itemWrapper = document.createElement('div');
230 | 						} else if (j === 0) {
231 | 							itemWrapper.classList.add('active');
232 | 						}
233 | 
234 | 						attrTitle = item.getAttribute('title');
235 | 
236 | 						itemWrapper.classList.add('item');
237 | 						itemWrapper.appendChild(item.cloneNode(true));
238 | 
239 | 						// Indicator
240 | 						var indicator = document.createElement('li');
241 | 						indicator.setAttribute('data-slide-to', j);
242 | 
243 | 						if (j === 0) {
244 | 							indicator.setAttribute('class', 'active');
245 | 						}
246 | 
247 | 						carouselIndicators.appendChild(indicator);
248 | 
249 | 						j++;
250 | 					} else if (j > 0) {
251 | 						// Captions
252 | 						if (node.nodeType === 1 || (node.nodeType === 3 && node.nodeValue.trim().length)) {
253 | 							var caption = itemWrapper.querySelector('.carousel-caption');
254 | 
255 | 							if (!caption) {
256 | 								caption = document.createElement('div');
257 | 								caption.classList.add('carousel-caption');
258 | 								caption = itemWrapper.appendChild(caption);
259 | 							}
260 | 
261 | 							caption.appendChild(node.cloneNode(true));
262 | 						}
263 | 					}
264 | 
265 | 					// Last Item
266 | 					if (i === nodes.length - 1) {
267 | 						if (itemWrapper.hasChildNodes()) {
268 | 							setCaption(attrTitle);
269 | 							newCarouselInner.appendChild(itemWrapper);
270 | 						}
271 | 					}
272 | 				}
273 | 
274 | 				carouselInner.innerHTML = '';
275 | 				carouselInner.appendChild(newCarouselInner);
276 | 
277 | 				// Next & Previous
278 | 				function carouselControlCallback(event) {
279 | 					var target = event.currentTarget;
280 | 					var attrSlide = target.getAttribute('data-slide');
281 | 
282 | 					if (attrSlide) {
283 | 						$(this).carousel(attrSlide);
284 | 					}
285 | 
286 | 					event.preventDefault();
287 | 				}
288 | 
289 | 				for (i = 0; i < carouselControls.length; i++) {
290 | 					carouselControls[i].addEventListener('click', carouselControlCallback.bind(this));
291 | 				}
292 | 
293 | 				// Indicators
294 | 				this.addEventListener('click', function(event) {
295 | 					var target = event.target || event.srcElement;
296 | 					var attrSlideTo = target.getAttribute('data-slide-to');
297 | 
298 | 					if (target.tagName.toLowerCase() === 'li' &&  attrSlideTo) {
299 | 						$(this).carousel(+attrSlideTo);
300 | 					}
301 | 
302 | 					event.stopPropagation();
303 | 				});
304 | 
305 | 				// Init
306 | 				['carousel', 'slide'].forEach(function(className) {
307 | 					this.classList.add(className);
308 | 				}, this);
309 | 
310 | 				var attrs = this.attributes;
311 | 				var defaults = $.fn[this.plugin.name].Constructor.DEFAULTS;
312 | 				var options = {};
313 | 
314 | 				for (i = 0; i < attrs.length; i++) {
315 | 					var name = attrs[i].name.toLowerCase();
316 | 					var value = attrs[i].value;
317 | 
318 | 					if (name in defaults) {
319 | 						if (/true|false/i.test(value)) {
320 | 							value = (value === 'true');
321 | 						}
322 | 
323 | 						options[name] = value;
324 | 					}
325 | 				}
326 | 
327 | 				this.innerHTML = '';
328 | 				this.appendChild(carousel);
329 | 				$(this).carousel(options);
330 | 			}
331 | 		},
332 | 		attributeChangedCallback: {
333 | 			value: function(name, oldValue, value) {
334 | 				var defaults = $.fn[this.plugin.name].Constructor.DEFAULTS;
335 | 				name = name.toLowerCase();
336 | 
337 | 				if (name in defaults) {
338 | 					if (/true|false/i.test(value)) {
339 | 						value = (value === 'true');
340 | 					}
341 | 
342 | 					var option = {};
343 | 					option[name] = value;
344 | 
345 | 					$elm = $(this);
346 | 					$elm[this.plugin.name]($.extend($elm.data(this.plugin.namespace).options, option));
347 | 				}
348 | 			}
349 | 		}
350 | 	})
351 | });
352 | 
353 | 
354 | // Label
355 | XLabel = document.registerElement(prefix + '-label', {
356 | 	prototype: Object.create(HTMLElement.prototype, {
357 | 		createdCallback: {
358 | 			value: function() {
359 | 				this.attributeChangedCallback('type', '', this.getAttribute('type'));
360 | 				this.classList.add('label');
361 | 			}
362 | 		},
363 | 		attributeChangedCallback: {
364 | 			value: function(name, oldValue, value) {
365 | 				if (name === 'type') {
366 | 					this.classList.add('label-' + (value || 'default'));
367 | 					if (oldValue) {
368 | 						this.classList.remove('label-' + oldValue);
369 | 
370 | 					} else if (oldValue === null) {
371 | 						this.classList.remove('label-default');
372 | 					}
373 | 				}
374 | 			}
375 | 		}
376 | 	})
377 | });
378 | 
379 | 
380 | // List Group
381 | XListGroup = document.registerElement(prefix + '-list-group', {
382 | 	prototype: Object.create(HTMLElement.prototype, {
383 | 		createdCallback: {
384 | 			value: function() {
385 | 				this.classList.add('list-group');
386 | 
387 | 				this.decorateItems(this.children);
388 | 
389 | 				// Observe child mutations
390 | 				var observer = new MutationObserver(function(mutations) {
391 | 					var listItems = [];
392 | 
393 | 					mutations.forEach(function(mutation) {
394 | 						for (var i = 0; i < mutation.addedNodes.length; i++) {
395 | 							var addedNode = mutation.addedNodes[i];
396 | 							// Filter on ELEMENT_NODEs only
397 | 							if (addedNode.nodeType === 1) {
398 | 								listItems.push(addedNode);
399 | 							}
400 | 						}
401 | 					});
402 | 
403 | 					this.decorateItems(listItems);
404 | 				}.bind(this));
405 | 
406 | 				observer.observe(this, { childList: true });
407 | 			}
408 | 		},
409 | 		decorateItems: {
410 | 			value: function(listItems) {
411 | 				for (var i = 0; i < listItems.length; i++) {
412 | 					var item = listItems[i];
413 | 					item.classList.add('list-group-item');
414 | 
415 | 					var attrActive = item.getAttribute('active');
416 | 					if (attrActive !== null) {
417 | 						var action = (attrActive === 'false') ? 'remove' : 'add';
418 | 						item.classList[action]('active');
419 | 					}
420 | 
421 | 					var children = item.children;
422 | 					for (var j = 0; j < children.length; j++) {
423 | 						var child = children[j];
424 | 
425 | 						if (/^h[1-6]$/i.test(child.tagName)) {
426 | 							child.classList.add('list-group-item-heading');
427 | 						} else if (/^p$/i.test(child.tagName)) {
428 | 							child.classList.add('list-group-item-text');
429 | 						}
430 | 					}
431 | 				}
432 | 			}
433 | 		}
434 | 	})
435 | });
436 | 
437 | 
438 | // Modal
439 | XModal = document.registerElement(prefix + '-modal', {
440 | 	prototype: Object.create(HTMLElement.prototype, {
441 | 		createdCallback: {
442 | 			value: function() {
443 | 				// jQuery creates an extra looking for CSS display value
444 | 				if (!this.parentNode) {
445 | 					return false;
446 | 				}
447 | 
448 | 				var template = importDoc.querySelector('#x-modal');
449 | 				var modal = template.content.cloneNode(true);
450 | 				var elmHeader = modal.querySelector('.modal-header');
451 | 				var attrs = this.attributes;
452 | 				var options = {};
453 | 
454 | 				this.classList.add('modal');
455 | 				this.setAttribute('role', 'modal');
456 | 
457 | 				for (var i = 0; i < attrs.length; i++) {
458 | 					var name = attrs[i].name.toLowerCase();
459 | 					var value = attrs[i].value;
460 | 
461 | 					if (name === 'title') {
462 | 						var elmTitle = modal.querySelector('.modal-title');
463 | 						elmTitle.textContent = value;
464 | 						elmHeader.classList.remove('x-modal-no-title');
465 | 
466 | 					} else if (name === 'close' && value === 'false') {
467 | 						elmHeader.querySelector('.close').classList.add('hide');
468 | 
469 | 					} else if (/backdrop|keyboard|show/i.test(name)) {
470 | 						if (/true|false/i.test(value)) {
471 | 							value = (value === 'true');
472 | 						}
473 | 
474 | 						options[name] = value;
475 | 					}
476 | 				}
477 | 
478 | 				// Content
479 | 				modal.querySelector('.modal-body').innerHTML = this.innerHTML;
480 | 				this.innerHTML = '';
481 | 
482 | 				this.appendChild(modal);
483 | 				$(this).modal(options);
484 | 			}
485 | 		},
486 | 		attributeChangedCallback: {
487 | 			value: function(name, oldValue, value) {
488 | 				var $elm = $(this);
489 | 				var bsModal = $elm.data('bs.modal');
490 | 				var option= {};
491 | 				var action;
492 | 
493 | 				if (name === 'title') {
494 | 					this.querySelector('.modal-title').textContent = value;
495 | 
496 | 					action = (value === null) ? 'add' : 'remove';
497 | 					this.querySelector('.modal-header').classList[action]('x-modal-no-title');
498 | 
499 | 				} else if (name === 'close') {
500 | 					action = (value === 'false') ? 'add' : 'remove';
501 | 					this.querySelector('.close').classList[action]('hide');
502 | 
503 | 				} else if (/backdrop|keyboard|show/i.test(name)) {
504 | 					if (/true|false/i.test(value)) {
505 | 						value = (value === 'true');
506 | 					}
507 | 
508 | 					option[name] = value;
509 | 					$elm.modal($.extend(bsModal.options, option));
510 | 				}
511 | 			}
512 | 		}
513 | 	})
514 | });
515 | 
516 | 
517 | // Progress Bar
518 | XProgress = document.registerElement(prefix + '-progress', {
519 | 	prototype: Object.create(HTMLElement.prototype, {
520 | 		createdCallback: {
521 | 			value: function() {
522 | 				var template = importDoc.querySelector('#x-progress');
523 | 				this.appendChild(template.content.cloneNode(true));
524 | 
525 | 				var attrs = this.attributes;
526 | 				for (var i = 0; i < attrs.length; i++) {
527 | 					this.attributeChangedCallback(attrs[i].name.toLowerCase(), null, attrs[i].value);
528 | 				}
529 | 
530 | 				this.classList.add('progress');
531 | 			}
532 | 		},
533 | 		attributeChangedCallback: {
534 | 			value: function(name, oldValue, value) {
535 | 				var action;
536 | 				var elmProgressbar = this.querySelector('[role=progressbar]');
537 | 
538 | 				if (name === 'value') {
539 | 					elmProgressbar.setAttribute('aria-valuenow', value);
540 | 					elmProgressbar.style.width = value + '%';
541 | 
542 | 				} else if (name === 'type') {
543 | 					elmProgressbar.classList.add('progress-bar-' + value);
544 | 					if (oldValue) {
545 | 						elmProgressbar.classList.remove('progress-bar-' + oldValue);
546 | 					}
547 | 				} else if (name === 'striped') {
548 | 					action = (value === 'false' || value === null) ? 'remove' : 'add';
549 | 					this.classList[action]('progress-striped');
550 | 
551 | 				} else if (/animated|active/i.test(name)) {
552 | 					action = (value === 'false' || value === null) ? 'remove' : 'add';
553 | 					this.classList[action]('active');
554 | 				}
555 | 			}
556 | 		}
557 | 	})
558 | });


--------------------------------------------------------------------------------
/demo-assets/js/HTMLImports.min.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @license
 3 |  * Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
 4 |  * This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
 5 |  * The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
 6 |  * The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
 7 |  * Code distributed by Google as part of the polymer project is also
 8 |  * subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 9 |  */
10 | // @version 0.6.1
11 | "undefined"==typeof WeakMap&&!function(){var e=Object.defineProperty,t=Date.now()%1e9,r=function(){this.name="__st"+(1e9*Math.random()>>>0)+(t++ +"__")};r.prototype={set:function(t,r){var n=t[this.name];return n&&n[0]===t?n[1]=r:e(t,this.name,{value:[t,r],writable:!0}),this},get:function(e){var t;return(t=e[this.name])&&t[0]===e?t[1]:void 0},"delete":function(e){var t=e[this.name];return t&&t[0]===e?(t[0]=t[1]=void 0,!0):!1},has:function(e){var t=e[this.name];return t?t[0]===e:!1}},window.WeakMap=r}(),function(e){function t(e){E.push(e),_||(_=!0,f(n))}function r(e){return window.ShadowDOMPolyfill&&window.ShadowDOMPolyfill.wrapIfNeeded(e)||e}function n(){_=!1;var e=E;E=[],e.sort(function(e,t){return e.uid_-t.uid_});var t=!1;e.forEach(function(e){var r=e.takeRecords();o(e),r.length&&(e.callback_(r,e),t=!0)}),t&&n()}function o(e){e.nodes_.forEach(function(t){var r=v.get(t);r&&r.forEach(function(t){t.observer===e&&t.removeTransientObservers()})})}function i(e,t){for(var r=e;r;r=r.parentNode){var n=v.get(r);if(n)for(var o=0;o<n.length;o++){var i=n[o],a=i.options;if(r===e||a.subtree){var s=t(a);s&&i.enqueue(s)}}}}function a(e){this.callback_=e,this.nodes_=[],this.records_=[],this.uid_=++L}function s(e,t){this.type=e,this.target=t,this.addedNodes=[],this.removedNodes=[],this.previousSibling=null,this.nextSibling=null,this.attributeName=null,this.attributeNamespace=null,this.oldValue=null}function d(e){var t=new s(e.type,e.target);return t.addedNodes=e.addedNodes.slice(),t.removedNodes=e.removedNodes.slice(),t.previousSibling=e.previousSibling,t.nextSibling=e.nextSibling,t.attributeName=e.attributeName,t.attributeNamespace=e.attributeNamespace,t.oldValue=e.oldValue,t}function c(e,t){return y=new s(e,t)}function u(e){return M?M:(M=d(y),M.oldValue=e,M)}function l(){y=M=void 0}function h(e){return e===M||e===y}function m(e,t){return e===t?e:M&&h(e)?M:null}function p(e,t,r){this.observer=e,this.target=t,this.options=r,this.transientObservedNodes=[]}var f,v=new WeakMap;if(/Trident|Edge/.test(navigator.userAgent))f=setTimeout;else if(window.setImmediate)f=window.setImmediate;else{var b=[],g=String(Math.random());window.addEventListener("message",function(e){if(e.data===g){var t=b;b=[],t.forEach(function(e){e()})}}),f=function(e){b.push(e),window.postMessage(g,"*")}}var _=!1,E=[],L=0;a.prototype={observe:function(e,t){if(e=r(e),!t.childList&&!t.attributes&&!t.characterData||t.attributeOldValue&&!t.attributes||t.attributeFilter&&t.attributeFilter.length&&!t.attributes||t.characterDataOldValue&&!t.characterData)throw new SyntaxError;var n=v.get(e);n||v.set(e,n=[]);for(var o,i=0;i<n.length;i++)if(n[i].observer===this){o=n[i],o.removeListeners(),o.options=t;break}o||(o=new p(this,e,t),n.push(o),this.nodes_.push(e)),o.addListeners()},disconnect:function(){this.nodes_.forEach(function(e){for(var t=v.get(e),r=0;r<t.length;r++){var n=t[r];if(n.observer===this){n.removeListeners(),t.splice(r,1);break}}},this),this.records_=[]},takeRecords:function(){var e=this.records_;return this.records_=[],e}};var y,M;p.prototype={enqueue:function(e){var r=this.observer.records_,n=r.length;if(r.length>0){var o=r[n-1],i=m(o,e);if(i)return void(r[n-1]=i)}else t(this.observer);r[n]=e},addListeners:function(){this.addListeners_(this.target)},addListeners_:function(e){var t=this.options;t.attributes&&e.addEventListener("DOMAttrModified",this,!0),t.characterData&&e.addEventListener("DOMCharacterDataModified",this,!0),t.childList&&e.addEventListener("DOMNodeInserted",this,!0),(t.childList||t.subtree)&&e.addEventListener("DOMNodeRemoved",this,!0)},removeListeners:function(){this.removeListeners_(this.target)},removeListeners_:function(e){var t=this.options;t.attributes&&e.removeEventListener("DOMAttrModified",this,!0),t.characterData&&e.removeEventListener("DOMCharacterDataModified",this,!0),t.childList&&e.removeEventListener("DOMNodeInserted",this,!0),(t.childList||t.subtree)&&e.removeEventListener("DOMNodeRemoved",this,!0)},addTransientObserver:function(e){if(e!==this.target){this.addListeners_(e),this.transientObservedNodes.push(e);var t=v.get(e);t||v.set(e,t=[]),t.push(this)}},removeTransientObservers:function(){var e=this.transientObservedNodes;this.transientObservedNodes=[],e.forEach(function(e){this.removeListeners_(e);for(var t=v.get(e),r=0;r<t.length;r++)if(t[r]===this){t.splice(r,1);break}},this)},handleEvent:function(e){switch(e.stopImmediatePropagation(),e.type){case"DOMAttrModified":var t=e.attrName,r=e.relatedNode.namespaceURI,n=e.target,o=new c("attributes",n);o.attributeName=t,o.attributeNamespace=r;var a=e.attrChange===MutationEvent.ADDITION?null:e.prevValue;i(n,function(e){return!e.attributes||e.attributeFilter&&e.attributeFilter.length&&-1===e.attributeFilter.indexOf(t)&&-1===e.attributeFilter.indexOf(r)?void 0:e.attributeOldValue?u(a):o});break;case"DOMCharacterDataModified":var n=e.target,o=c("characterData",n),a=e.prevValue;i(n,function(e){return e.characterData?e.characterDataOldValue?u(a):o:void 0});break;case"DOMNodeRemoved":this.addTransientObserver(e.target);case"DOMNodeInserted":var s,d,h=e.target;"DOMNodeInserted"===e.type?(s=[h],d=[]):(s=[],d=[h]);var m=h.previousSibling,p=h.nextSibling,o=c("childList",e.target.parentNode);o.addedNodes=s,o.removedNodes=d,o.previousSibling=m,o.nextSibling=p,i(e.relatedNode,function(e){return e.childList?o:void 0})}l()}},e.JsMutationObserver=a,e.MutationObserver||(e.MutationObserver=a)}(this),window.HTMLImports=window.HTMLImports||{flags:{}},function(e){function t(e,t){t=t||p,n(function(){i(e,t)},t)}function r(e){return"complete"===e.readyState||e.readyState===b}function n(e,t){if(r(t))e&&e();else{var o=function(){("complete"===t.readyState||t.readyState===b)&&(t.removeEventListener(g,o),n(e,t))};t.addEventListener(g,o)}}function o(e){e.target.__loaded=!0}function i(e,t){function r(){d==c&&e&&e({allImports:s,loadedImports:u,errorImports:l})}function n(e){o(e),u.push(this),d++,r()}function i(e){l.push(this),d++,r()}var s=t.querySelectorAll("link[rel=import]"),d=0,c=s.length,u=[],l=[];if(c)for(var h,m=0;c>m&&(h=s[m]);m++)a(h)?(d++,r()):(h.addEventListener("load",n),h.addEventListener("error",i));else r()}function a(e){return l?e.__loaded||e["import"]&&"loading"!==e["import"].readyState:e.__importParsed}function s(e){for(var t,r=0,n=e.length;n>r&&(t=e[r]);r++)d(t)&&c(t)}function d(e){return"link"===e.localName&&"import"===e.rel}function c(e){var t=e["import"];t?o({target:e}):(e.addEventListener("load",o),e.addEventListener("error",o))}var u="import",l=Boolean(u in document.createElement("link")),h=Boolean(window.ShadowDOMPolyfill),m=function(e){return h?ShadowDOMPolyfill.wrapIfNeeded(e):e},p=m(document),f={get:function(){var e=HTMLImports.currentScript||document.currentScript||("complete"!==document.readyState?document.scripts[document.scripts.length-1]:null);return m(e)},configurable:!0};Object.defineProperty(document,"_currentScript",f),Object.defineProperty(p,"_currentScript",f);var v=/Trident|Edge/.test(navigator.userAgent),b=v?"complete":"interactive",g="readystatechange";l&&(new MutationObserver(function(e){for(var t,r=0,n=e.length;n>r&&(t=e[r]);r++)t.addedNodes&&s(t.addedNodes)}).observe(document.head,{childList:!0}),function(){if("loading"===document.readyState)for(var e,t=document.querySelectorAll("link[rel=import]"),r=0,n=t.length;n>r&&(e=t[r]);r++)c(e)}()),t(function(e){HTMLImports.ready=!0,HTMLImports.readyTime=(new Date).getTime();var t=p.createEvent("CustomEvent");t.initCustomEvent("HTMLImportsLoaded",!0,!0,e),p.dispatchEvent(t)}),e.IMPORT_LINK_TYPE=u,e.useNative=l,e.rootDocument=p,e.whenReady=t,e.isIE=v}(HTMLImports),function(e){var t=[],r=function(e){t.push(e)},n=function(){t.forEach(function(t){t(e)})};e.addModule=r,e.initializeModules=n}(HTMLImports),HTMLImports.addModule(function(e){var t=/(url\()([^)]*)(\))/g,r=/(@import[\s]+(?!url\())([^;]*)(;)/g,n={resolveUrlsInStyle:function(e,t){var r=e.ownerDocument,n=r.createElement("a");return e.textContent=this.resolveUrlsInCssText(e.textContent,t,n),e},resolveUrlsInCssText:function(e,n,o){var i=this.replaceUrls(e,o,n,t);return i=this.replaceUrls(i,o,n,r)},replaceUrls:function(e,t,r,n){return e.replace(n,function(e,n,o,i){var a=o.replace(/["']/g,"");return r&&(a=new URL(a,r).href),t.href=a,a=t.href,n+"'"+a+"'"+i})}};e.path=n}),HTMLImports.addModule(function(e){var t={async:!0,ok:function(e){return e.status>=200&&e.status<300||304===e.status||0===e.status},load:function(r,n,o){var i=new XMLHttpRequest;return(e.flags.debug||e.flags.bust)&&(r+="?"+Math.random()),i.open("GET",r,t.async),i.addEventListener("readystatechange",function(e){if(4===i.readyState){var r=i.getResponseHeader("Location"),a=null;if(r)var a="/"===r.substr(0,1)?location.origin+r:r;n.call(o,!t.ok(i)&&i,i.response||i.responseText,a)}}),i.send(),i},loadDocument:function(e,t,r){this.load(e,t,r).responseType="document"}};e.xhr=t}),HTMLImports.addModule(function(e){var t=e.xhr,r=e.flags,n=function(e,t){this.cache={},this.onload=e,this.oncomplete=t,this.inflight=0,this.pending={}};n.prototype={addNodes:function(e){this.inflight+=e.length;for(var t,r=0,n=e.length;n>r&&(t=e[r]);r++)this.require(t);this.checkDone()},addNode:function(e){this.inflight++,this.require(e),this.checkDone()},require:function(e){var t=e.src||e.href;e.__nodeUrl=t,this.dedupe(t,e)||this.fetch(t,e)},dedupe:function(e,t){if(this.pending[e])return this.pending[e].push(t),!0;return this.cache[e]?(this.onload(e,t,this.cache[e]),this.tail(),!0):(this.pending[e]=[t],!1)},fetch:function(e,n){if(r.load&&console.log("fetch",e,n),e)if(e.match(/^data:/)){var o=e.split(","),i=o[0],a=o[1];a=i.indexOf(";base64")>-1?atob(a):decodeURIComponent(a),setTimeout(function(){this.receive(e,n,null,a)}.bind(this),0)}else{var s=function(t,r,o){this.receive(e,n,t,r,o)}.bind(this);t.load(e,s)}else setTimeout(function(){this.receive(e,n,{error:"href must be specified"},null)}.bind(this),0)},receive:function(e,t,r,n,o){this.cache[e]=n;for(var i,a=this.pending[e],s=0,d=a.length;d>s&&(i=a[s]);s++)this.onload(e,i,n,r,o),this.tail();this.pending[e]=null},tail:function(){--this.inflight,this.checkDone()},checkDone:function(){this.inflight||this.oncomplete()}},e.Loader=n}),HTMLImports.addModule(function(e){var t=function(e){this.addCallback=e,this.mo=new MutationObserver(this.handler.bind(this))};t.prototype={handler:function(e){for(var t,r=0,n=e.length;n>r&&(t=e[r]);r++)"childList"===t.type&&t.addedNodes.length&&this.addedNodes(t.addedNodes)},addedNodes:function(e){this.addCallback&&this.addCallback(e);for(var t,r=0,n=e.length;n>r&&(t=e[r]);r++)t.children&&t.children.length&&this.addedNodes(t.children)},observe:function(e){this.mo.observe(e,{childList:!0,subtree:!0})}},e.Observer=t}),HTMLImports.addModule(function(e){function t(e){return"link"===e.localName&&e.rel===u}function r(e){var t=n(e);return"data:text/javascript;charset=utf-8,"+encodeURIComponent(t)}function n(e){return e.textContent+o(e)}function o(e){var t=e.ownerDocument;t.__importedScripts=t.__importedScripts||0;var r=e.ownerDocument.baseURI,n=t.__importedScripts?"-"+t.__importedScripts:"";return t.__importedScripts++,"\n//# sourceURL="+r+n+".js\n"}function i(e){var t=e.ownerDocument.createElement("style");return t.textContent=e.textContent,a.resolveUrlsInStyle(t),t}var a=e.path,s=e.rootDocument,d=e.flags,c=e.isIE,u=e.IMPORT_LINK_TYPE,l="link[rel="+u+"]",h={documentSelectors:l,importsSelectors:[l,"link[rel=stylesheet]","style","script:not([type])",'script[type="text/javascript"]'].join(","),map:{link:"parseLink",script:"parseScript",style:"parseStyle"},dynamicElements:[],parseNext:function(){var e=this.nextToParse();e&&this.parse(e)},parse:function(e){if(this.isParsed(e))return void(d.parse&&console.log("[%s] is already parsed",e.localName));var t=this[this.map[e.localName]];t&&(this.markParsing(e),t.call(this,e))},parseDynamic:function(e,t){this.dynamicElements.push(e),t||this.parseNext()},markParsing:function(e){d.parse&&console.log("parsing",e),this.parsingElement=e},markParsingComplete:function(e){e.__importParsed=!0,this.markDynamicParsingComplete(e),e.__importElement&&(e.__importElement.__importParsed=!0,this.markDynamicParsingComplete(e.__importElement)),this.parsingElement=null,d.parse&&console.log("completed",e)},markDynamicParsingComplete:function(e){var t=this.dynamicElements.indexOf(e);t>=0&&this.dynamicElements.splice(t,1)},parseImport:function(e){if(HTMLImports.__importsParsingHook&&HTMLImports.__importsParsingHook(e),e["import"]&&(e["import"].__importParsed=!0),this.markParsingComplete(e),e.dispatchEvent(e.__resource&&!e.__error?new CustomEvent("load",{bubbles:!1}):new CustomEvent("error",{bubbles:!1})),e.__pending)for(var t;e.__pending.length;)t=e.__pending.shift(),t&&t({target:e});this.parseNext()},parseLink:function(e){t(e)?this.parseImport(e):(e.href=e.href,this.parseGeneric(e))},parseStyle:function(e){var t=e;e=i(e),t.__appliedElement=e,e.__importElement=t,this.parseGeneric(e)},parseGeneric:function(e){this.trackElement(e),this.addElementToDocument(e)},rootImportForElement:function(e){for(var t=e;t.ownerDocument.__importLink;)t=t.ownerDocument.__importLink;return t},addElementToDocument:function(e){var t=this.rootImportForElement(e.__importElement||e);t.parentNode.insertBefore(e,t)},trackElement:function(e,t){var r=this,n=function(n){t&&t(n),r.markParsingComplete(e),r.parseNext()};if(e.addEventListener("load",n),e.addEventListener("error",n),c&&"style"===e.localName){var o=!1;if(-1==e.textContent.indexOf("@import"))o=!0;else if(e.sheet){o=!0;for(var i,a=e.sheet.cssRules,s=a?a.length:0,d=0;s>d&&(i=a[d]);d++)i.type===CSSRule.IMPORT_RULE&&(o=o&&Boolean(i.styleSheet))}o&&e.dispatchEvent(new CustomEvent("load",{bubbles:!1}))}},parseScript:function(t){var n=document.createElement("script");n.__importElement=t,n.src=t.src?t.src:r(t),e.currentScript=t,this.trackElement(n,function(t){n.parentNode.removeChild(n),e.currentScript=null}),this.addElementToDocument(n)},nextToParse:function(){return this._mayParse=[],!this.parsingElement&&(this.nextToParseInDoc(s)||this.nextToParseDynamic())},nextToParseInDoc:function(e,r){if(e&&this._mayParse.indexOf(e)<0){this._mayParse.push(e);for(var n,o=e.querySelectorAll(this.parseSelectorsForNode(e)),i=0,a=o.length;a>i&&(n=o[i]);i++)if(!this.isParsed(n))return this.hasResource(n)?t(n)?this.nextToParseInDoc(n["import"],n):n:void 0}return r},nextToParseDynamic:function(){return this.dynamicElements[0]},parseSelectorsForNode:function(e){var t=e.ownerDocument||e;return t===s?this.documentSelectors:this.importsSelectors},isParsed:function(e){return e.__importParsed},needsDynamicParsing:function(e){return this.dynamicElements.indexOf(e)>=0},hasResource:function(e){return t(e)&&void 0===e["import"]?!1:!0}};e.parser=h,e.IMPORT_SELECTOR=l}),HTMLImports.addModule(function(e){function t(e){return r(e,a)}function r(e,t){return"link"===e.localName&&e.getAttribute("rel")===t}function n(e){return!!Object.getOwnPropertyDescriptor(e,"baseURI")}function o(e,t){var r=document.implementation.createHTMLDocument(a);r._URL=t;var o=r.createElement("base");o.setAttribute("href",t),r.baseURI||n(r)||Object.defineProperty(r,"baseURI",{value:t});var i=r.createElement("meta");return i.setAttribute("charset","utf-8"),r.head.appendChild(i),r.head.appendChild(o),r.body.innerHTML=e,window.HTMLTemplateElement&&HTMLTemplateElement.bootstrap&&HTMLTemplateElement.bootstrap(r),r}var i=e.flags,a=e.IMPORT_LINK_TYPE,s=e.IMPORT_SELECTOR,d=e.rootDocument,c=e.Loader,u=e.Observer,l=e.parser,h={documents:{},documentPreloadSelectors:s,importsPreloadSelectors:[s].join(","),loadNode:function(e){m.addNode(e)},loadSubtree:function(e){var t=this.marshalNodes(e);m.addNodes(t)},marshalNodes:function(e){return e.querySelectorAll(this.loadSelectorsForNode(e))},loadSelectorsForNode:function(e){var t=e.ownerDocument||e;return t===d?this.documentPreloadSelectors:this.importsPreloadSelectors},loaded:function(e,r,n,a,s){if(i.load&&console.log("loaded",e,r),r.__resource=n,r.__error=a,t(r)){var d=this.documents[e];void 0===d&&(d=a?null:o(n,s||e),d&&(d.__importLink=r,this.bootDocument(d)),this.documents[e]=d),r["import"]=d}l.parseNext()},bootDocument:function(e){this.loadSubtree(e),this.observer.observe(e),l.parseNext()},loadedAll:function(){l.parseNext()}},m=new c(h.loaded.bind(h),h.loadedAll.bind(h));if(h.observer=new u,!document.baseURI){var p={get:function(){var e=document.querySelector("base");return e?e.href:window.location.href},configurable:!0};Object.defineProperty(document,"baseURI",p),Object.defineProperty(d,"baseURI",p)}e.importer=h,e.importLoader=m}),HTMLImports.addModule(function(e){var t=e.parser,r=e.importer,n={added:function(e){for(var n,o,i,a,s=0,d=e.length;d>s&&(a=e[s]);s++)n||(n=a.ownerDocument,o=t.isParsed(n)),i=this.shouldLoadNode(a),i&&r.loadNode(a),this.shouldParseNode(a)&&o&&t.parseDynamic(a,i)},shouldLoadNode:function(e){return 1===e.nodeType&&o.call(e,r.loadSelectorsForNode(e))},shouldParseNode:function(e){return 1===e.nodeType&&o.call(e,t.parseSelectorsForNode(e))}};r.observer.addCallback=n.added.bind(n);var o=HTMLElement.prototype.matches||HTMLElement.prototype.matchesSelector||HTMLElement.prototype.webkitMatchesSelector||HTMLElement.prototype.mozMatchesSelector||HTMLElement.prototype.msMatchesSelector}),function(e){function t(){HTMLImports.importer.bootDocument(o)}var r=e.initializeModules,n=e.isIE;if(!e.useNative){n&&"function"!=typeof window.CustomEvent&&(window.CustomEvent=function(e,t){t=t||{};var r=document.createEvent("CustomEvent");return r.initCustomEvent(e,Boolean(t.bubbles),Boolean(t.cancelable),t.detail),r},window.CustomEvent.prototype=window.Event.prototype),r();var o=e.rootDocument;"complete"===document.readyState||"interactive"===document.readyState&&!window.attachEvent?t():document.addEventListener("DOMContentLoaded",t)}}(HTMLImports);


--------------------------------------------------------------------------------
/dist/bootstrap-web-components.js:
--------------------------------------------------------------------------------
  1 | var prefix = 'bs';
  2 | var importDoc = document.currentScript === document._currentScript ? document.currentScript.ownerDocument: document._currentScript.ownerDocument;
  3 | 
  4 | // Create <style> elm with template CSS
  5 | var css = importDoc.querySelector('#x-css');
  6 | var style = document.createElement('style');
  7 | 
  8 | style.appendChild(css.content.cloneNode(true));
  9 | document.head.appendChild(style);
 10 | 
 11 | 
 12 | // Tooltip
 13 | XTooltip = document.registerElement(prefix + '-tooltip', {
 14 |   prototype: Object.create(HTMLElement.prototype, {
 15 |     plugin: {
 16 |       value: {
 17 |         namespace: 'bs.tooltip',
 18 |         name: 'tooltip'
 19 |       }
 20 |     },
 21 |     createdCallback: {
 22 |       value: function() {
 23 |         var attrFor = this.getAttribute('for');
 24 |         var id = attrFor ? '#' + attrFor : null;
 25 |         var $elm = $(id || this);
 26 |         var attrs = this.attributes;
 27 |         var defaults = $.fn[this.plugin.name].Constructor.DEFAULTS;
 28 |         var options = {};
 29 | 
 30 |         for (var i = 0; i < attrs.length; i++) {
 31 |           var name = attrs[i].name.toLowerCase();
 32 |           var value = attrs[i].value;
 33 | 
 34 |           if (name === 'for') {
 35 |             this.classList.add('hide');
 36 | 
 37 |             if (('content' in defaults) && !('content' in attrs)) {
 38 |               options.content = this.innerHTML;
 39 |             } else if (!('title' in attrs)) {
 40 |               options.title = this.innerHTML;
 41 |             }
 42 |           } else if (/^[delay]/i.test(name)) {
 43 |             var delays = name.split('-');
 44 | 
 45 |             if (delays.length === 1) {
 46 |               options.delay = {
 47 |                 show: value,
 48 |                 hide: value
 49 |               };
 50 |             } else {
 51 |               options.delay = options.delay || {};
 52 |               options.delay[delays[1]] = value;
 53 |             }
 54 |           } else if (name in defaults) {
 55 |             if (/true|false/i.test(value)) {
 56 |               value = (value === 'true');
 57 |             }
 58 | 
 59 |             options[name] = value;
 60 |           }
 61 |         }
 62 | 
 63 |         $elm[this.plugin.name](options);
 64 |       }
 65 |     },
 66 |     attributeChangedCallback: {
 67 |       value: function(name, oldValue, value) {
 68 |         var defaults = $.fn[this.plugin.name].Constructor.DEFAULTS;
 69 |         name = name.toLowerCase();
 70 | 
 71 |         if (name === 'for' || name in defaults) {
 72 |           var attrFor = this.getAttribute('for');
 73 |           var id = attrFor ? '#' + attrFor : null;
 74 |           var $elm = $(id || this);
 75 |           var bsInstance = $elm.data(this.plugin.namespace) || $('#' + oldValue).data(this.plugin.namespace);
 76 |           var option = {};
 77 | 
 78 |           if (/^delay/i.test(name)) {
 79 |             var delays = name.split('-');
 80 | 
 81 |             if (delays.length === 1) {
 82 |               option.delay = {
 83 |                 show: value,
 84 |                 hide: value
 85 |               };
 86 |             } else {
 87 |               option.delay = option.delay || {};
 88 |               option.delay[delays[1]] = value;
 89 |             }
 90 |           } else if (name === 'title') {
 91 |             if (value) {
 92 |               this.setAttribute('data-original-title', value);
 93 |               this.setAttribute('title', '');
 94 |             }
 95 |           } else if (name === 'for') {
 96 |             // Create new tooltip
 97 |             $elm[this.plugin.name](bsInstance.options);
 98 |             bsInstance.destroy();
 99 |           } else {
100 |             if (/true|false/i.test(value)) {
101 |               value = (value === 'true');
102 |             }
103 | 
104 |             option[name] = value;
105 |           }
106 | 
107 |           if (!$.isEmptyObject(option)) {
108 |             $elm[this.plugin.name]($.extend(bsInstance.options, option));
109 |           }
110 |         }
111 |       }
112 |     }
113 |   })
114 | });
115 | 
116 | 
117 | // Popover
118 | XPopover = document.registerElement(prefix + '-popover', {
119 |   prototype: Object.create(XTooltip.prototype, {
120 |     plugin: {
121 |       value: {
122 |         namespace: 'bs.popover',
123 |         name: 'popover'
124 |       }
125 |     }
126 |   })
127 | });
128 | 
129 | 
130 | // Alert
131 | XAlert = document.registerElement(prefix + '-alert', {
132 |   prototype: Object.create(HTMLElement.prototype, {
133 |     createdCallback: {
134 |       value: function() {
135 |         var template = importDoc.querySelector('#x-alert');
136 |         this.insertBefore(template.content.cloneNode(true), this.firstChild);
137 | 
138 |         this.attributeChangedCallback('type', '', this.getAttribute('type'));
139 |         this.attributeChangedCallback('close', '', this.getAttribute('close'));
140 | 
141 |         this.classList.add('alert');
142 |       }
143 |     },
144 |     attributeChangedCallback: {
145 |       value: function(name, oldValue, value) {
146 |         if (name === 'type') {
147 |           this.classList.add('alert-' + (value || 'danger'));
148 |           if (oldValue) {
149 |             this.classList.remove('alert-' + oldValue);
150 |           } else if (oldValue === null) {
151 |             this.classList.remove('alert-danger');
152 |           }
153 |         } else if (name === 'close') {
154 |           var action = (value === 'false') ? 'add' : 'remove';
155 |           this.querySelector('.close').classList[action]('hide');
156 |         }
157 |       }
158 |     }
159 |   })
160 | });
161 | 
162 | 
163 | // Badge
164 | XBadge = document.registerElement(prefix + '-badge', {
165 |   prototype: Object.create(HTMLElement.prototype, {
166 |     createdCallback: {
167 |       value: function() {
168 |         this.classList.add('badge');
169 |       }
170 |     }
171 |   })
172 | });
173 | 
174 | 
175 | // Carousel
176 | XCarousel = document.registerElement(prefix + '-carousel', {
177 |   prototype: Object.create(HTMLElement.prototype, {
178 |     plugin: {
179 |       value: {
180 |         namespace: 'bs.carousel',
181 |         name: 'carousel'
182 |       }
183 |     },
184 |     createdCallback: {
185 |       value: function() {
186 |         var i, j, attrTitle;
187 | 
188 |         var template = importDoc.querySelector('#x-carousel');
189 |         var carousel = template.content.cloneNode(true);
190 |         var carouselInner = carousel.querySelector('.carousel-inner');
191 |         var carouselControls = carousel.querySelectorAll('.carousel-control');
192 |         var carouselIndicators = carousel.querySelector('.carousel-indicators');
193 | 
194 |         // Carousel Items
195 |         carouselInner.innerHTML = this.innerHTML;
196 | 
197 |         var firstItem = carouselInner.children[0];
198 |         var items = carouselInner.querySelectorAll('.carousel-inner > ' + firstItem.tagName);
199 |         var nodes = carouselInner.childNodes;
200 | 
201 |         var itemWrapper =document.createElement('div');
202 |         var newCarouselInner = document.createDocumentFragment();
203 | 
204 |         function setCaption(text) {
205 |           if (text) {
206 |             var caption = itemWrapper.querySelector('.carousel-caption');
207 | 
208 |             if (!caption) {
209 |               caption = document.createElement('div');
210 |               caption.classList.add('carousel-caption');
211 |               caption.textContent =  text;
212 | 
213 |               itemWrapper.appendChild(caption);
214 |             }
215 |           }
216 |         }
217 | 
218 |         for (i = 0, j = 0; i < nodes.length; i++) {
219 |           var node = nodes[i];
220 |           var item = items[j];
221 | 
222 |           // Item Wrapper
223 |           if (node === item) {
224 |             // Add proir
225 |             if (itemWrapper.hasChildNodes()) {
226 |               setCaption(attrTitle);
227 |               newCarouselInner.appendChild(itemWrapper);
228 | 
229 |               itemWrapper = document.createElement('div');
230 |             } else if (j === 0) {
231 |               itemWrapper.classList.add('active');
232 |             }
233 | 
234 |             attrTitle = item.getAttribute('title');
235 | 
236 |             itemWrapper.classList.add('item');
237 |             itemWrapper.appendChild(item.cloneNode(true));
238 | 
239 |             // Indicator
240 |             var indicator = document.createElement('li');
241 |             indicator.setAttribute('data-slide-to', j);
242 | 
243 |             if (j === 0) {
244 |               indicator.setAttribute('class', 'active');
245 |             }
246 | 
247 |             carouselIndicators.appendChild(indicator);
248 | 
249 |             j++;
250 |           } else if (j > 0) {
251 |             // Captions
252 |             if (node.nodeType === 1 || (node.nodeType === 3 && node.nodeValue.trim().length)) {
253 |               var caption = itemWrapper.querySelector('.carousel-caption');
254 | 
255 |               if (!caption) {
256 |                 caption = document.createElement('div');
257 |                 caption.classList.add('carousel-caption');
258 |                 caption = itemWrapper.appendChild(caption);
259 |               }
260 | 
261 |               caption.appendChild(node.cloneNode(true));
262 |             }
263 |           }
264 | 
265 |           // Last Item
266 |           if (i === nodes.length - 1) {
267 |             if (itemWrapper.hasChildNodes()) {
268 |               setCaption(attrTitle);
269 |               newCarouselInner.appendChild(itemWrapper);
270 |             }
271 |           }
272 |         }
273 | 
274 |         carouselInner.innerHTML = '';
275 |         carouselInner.appendChild(newCarouselInner);
276 | 
277 |         // Next & Previous
278 |         function carouselControlCallback(event) {
279 |           var target = event.currentTarget;
280 |           var attrSlide = target.getAttribute('data-slide');
281 | 
282 |           if (attrSlide) {
283 |             $(this).carousel(attrSlide);
284 |           }
285 | 
286 |           event.preventDefault();
287 |         }
288 | 
289 |         for (i = 0; i < carouselControls.length; i++) {
290 |           carouselControls[i].addEventListener('click', carouselControlCallback.bind(this));
291 |         }
292 | 
293 |         // Indicators
294 |         this.addEventListener('click', function(event) {
295 |           var target = event.target || event.srcElement;
296 |           var attrSlideTo = target.getAttribute('data-slide-to');
297 | 
298 |           if (target.tagName.toLowerCase() === 'li' &&  attrSlideTo) {
299 |             $(this).carousel(+attrSlideTo);
300 |           }
301 | 
302 |           event.stopPropagation();
303 |         });
304 | 
305 |         // Init
306 |         ['carousel', 'slide'].forEach(function(className) {
307 |           this.classList.add(className);
308 |         }, this);
309 | 
310 |         var attrs = this.attributes;
311 |         var defaults = $.fn[this.plugin.name].Constructor.DEFAULTS;
312 |         var options = {};
313 | 
314 |         for (i = 0; i < attrs.length; i++) {
315 |           var name = attrs[i].name.toLowerCase();
316 |           var value = attrs[i].value;
317 | 
318 |           if (name in defaults) {
319 |             if (/true|false/i.test(value)) {
320 |               value = (value === 'true');
321 |             }
322 | 
323 |             options[name] = value;
324 |           }
325 |         }
326 | 
327 |         this.innerHTML = '';
328 |         this.appendChild(carousel);
329 |         $(this).carousel(options);
330 |       }
331 |     },
332 |     attributeChangedCallback: {
333 |       value: function(name, oldValue, value) {
334 |         var defaults = $.fn[this.plugin.name].Constructor.DEFAULTS;
335 |         name = name.toLowerCase();
336 | 
337 |         if (name in defaults) {
338 |           if (/true|false/i.test(value)) {
339 |             value = (value === 'true');
340 |           }
341 | 
342 |           var option = {};
343 |           option[name] = value;
344 | 
345 |           $elm = $(this);
346 |           $elm[this.plugin.name]($.extend($elm.data(this.plugin.namespace).options, option));
347 |         }
348 |       }
349 |     }
350 |   })
351 | });
352 | 
353 | 
354 | // Label
355 | XLabel = document.registerElement(prefix + '-label', {
356 |   prototype: Object.create(HTMLElement.prototype, {
357 |     createdCallback: {
358 |       value: function() {
359 |         this.attributeChangedCallback('type', '', this.getAttribute('type'));
360 |         this.classList.add('label');
361 |       }
362 |     },
363 |     attributeChangedCallback: {
364 |       value: function(name, oldValue, value) {
365 |         if (name === 'type') {
366 |           this.classList.add('label-' + (value || 'default'));
367 |           if (oldValue) {
368 |             this.classList.remove('label-' + oldValue);
369 | 
370 |           } else if (oldValue === null) {
371 |             this.classList.remove('label-default');
372 |           }
373 |         }
374 |       }
375 |     }
376 |   })
377 | });
378 | 
379 | 
380 | // List Group
381 | XListGroup = document.registerElement(prefix + '-list-group', {
382 |   prototype: Object.create(HTMLElement.prototype, {
383 |     createdCallback: {
384 |       value: function() {
385 |         this.classList.add('list-group');
386 | 
387 |         this.decorateItems(this.children);
388 | 
389 |         // Observe child mutations
390 |         var observer = new MutationObserver(function(mutations) {
391 |           var listItems = [];
392 | 
393 |           mutations.forEach(function(mutation) {
394 |             for (var i = 0; i < mutation.addedNodes.length; i++) {
395 |               var addedNode = mutation.addedNodes[i];
396 |               // Filter on ELEMENT_NODEs only
397 |               if (addedNode.nodeType === 1) {
398 |                 listItems.push(addedNode);
399 |               }
400 |             }
401 |           });
402 | 
403 |           this.decorateItems(listItems);
404 |         }.bind(this));
405 | 
406 |         observer.observe(this, { childList: true });
407 |       }
408 |     },
409 |     decorateItems: {
410 |       value: function(listItems) {
411 |         for (var i = 0; i < listItems.length; i++) {
412 |           var item = listItems[i];
413 |           item.classList.add('list-group-item');
414 | 
415 |           var attrActive = item.getAttribute('active');
416 |           if (attrActive !== null) {
417 |             var action = (attrActive === 'false') ? 'remove' : 'add';
418 |             item.classList[action]('active');
419 |           }
420 | 
421 |           var children = item.children;
422 |           for (var j = 0; j < children.length; j++) {
423 |             var child = children[j];
424 | 
425 |             if (/^h[1-6]$/i.test(child.tagName)) {
426 |               child.classList.add('list-group-item-heading');
427 |             } else if (/^p$/i.test(child.tagName)) {
428 |               child.classList.add('list-group-item-text');
429 |             }
430 |           }
431 |         }
432 |       }
433 |     }
434 |   })
435 | });
436 | 
437 | 
438 | // Modal
439 | XModal = document.registerElement(prefix + '-modal', {
440 |   prototype: Object.create(HTMLElement.prototype, {
441 |     createdCallback: {
442 |       value: function() {
443 |         // jQuery creates an extra looking for CSS display value
444 |         if (!this.parentNode) {
445 |           return false;
446 |         }
447 | 
448 |         var template = importDoc.querySelector('#x-modal');
449 |         var modal = template.content.cloneNode(true);
450 |         var elmHeader = modal.querySelector('.modal-header');
451 |         var attrs = this.attributes;
452 |         var options = {};
453 | 
454 |         this.classList.add('modal');
455 |         this.setAttribute('role', 'modal');
456 | 
457 |         for (var i = 0; i < attrs.length; i++) {
458 |           var name = attrs[i].name.toLowerCase();
459 |           var value = attrs[i].value;
460 | 
461 |           if (name === 'title') {
462 |             var elmTitle = modal.querySelector('.modal-title');
463 |             elmTitle.textContent = value;
464 |             elmHeader.classList.remove('x-modal-no-title');
465 | 
466 |           } else if (name === 'close' && value === 'false') {
467 |             elmHeader.querySelector('.close').classList.add('hide');
468 | 
469 |           } else if (/backdrop|keyboard|show/i.test(name)) {
470 |             if (/true|false/i.test(value)) {
471 |               value = (value === 'true');
472 |             }
473 | 
474 |             options[name] = value;
475 |           }
476 |         }
477 | 
478 |         // Content
479 |         modal.querySelector('.modal-body').innerHTML = this.innerHTML;
480 |         this.innerHTML = '';
481 | 
482 |         this.appendChild(modal);
483 |         $(this).modal(options);
484 |       }
485 |     },
486 |     attributeChangedCallback: {
487 |       value: function(name, oldValue, value) {
488 |         var $elm = $(this);
489 |         var bsModal = $elm.data('bs.modal');
490 |         var option= {};
491 |         var action;
492 | 
493 |         if (name === 'title') {
494 |           this.querySelector('.modal-title').textContent = value;
495 | 
496 |           action = (value === null) ? 'add' : 'remove';
497 |           this.querySelector('.modal-header').classList[action]('x-modal-no-title');
498 | 
499 |         } else if (name === 'close') {
500 |           action = (value === 'false') ? 'add' : 'remove';
501 |           this.querySelector('.close').classList[action]('hide');
502 | 
503 |         } else if (/backdrop|keyboard|show/i.test(name)) {
504 |           if (/true|false/i.test(value)) {
505 |             value = (value === 'true');
506 |           }
507 | 
508 |           option[name] = value;
509 |           $elm.modal($.extend(bsModal.options, option));
510 |         }
511 |       }
512 |     }
513 |   })
514 | });
515 | 
516 | 
517 | // Progress Bar
518 | XProgress = document.registerElement(prefix + '-progress', {
519 |   prototype: Object.create(HTMLElement.prototype, {
520 |     createdCallback: {
521 |       value: function() {
522 |         var template = importDoc.querySelector('#x-progress');
523 |         this.appendChild(template.content.cloneNode(true));
524 | 
525 |         var attrs = this.attributes;
526 |         for (var i = 0; i < attrs.length; i++) {
527 |           this.attributeChangedCallback(attrs[i].name.toLowerCase(), null, attrs[i].value);
528 |         }
529 | 
530 |         this.classList.add('progress');
531 |       }
532 |     },
533 |     attributeChangedCallback: {
534 |       value: function(name, oldValue, value) {
535 |         var action;
536 |         var elmProgressbar = this.querySelector('[role=progressbar]');
537 | 
538 |         if (name === 'value') {
539 |           elmProgressbar.setAttribute('aria-valuenow', value);
540 |           elmProgressbar.style.width = value + '%';
541 | 
542 |         } else if (name === 'type') {
543 |           elmProgressbar.classList.add('progress-bar-' + value);
544 |           if (oldValue) {
545 |             elmProgressbar.classList.remove('progress-bar-' + oldValue);
546 |           }
547 |         } else if (name === 'striped') {
548 |           action = (value === 'false' || value === null) ? 'remove' : 'add';
549 |           this.classList[action]('progress-striped');
550 | 
551 |         } else if (/animated|active/i.test(name)) {
552 |           action = (value === 'false' || value === null) ? 'remove' : 'add';
553 |           this.classList[action]('active');
554 |         }
555 |       }
556 |     }
557 |   })
558 | });


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