1017798-1.html (3353B)
1 <!DOCTYPE html> 2 <!-- 3 This is a slightly minimised, modified and self-contained version of 4 gaia_switch/examples/index.html from the Gaia repository. 5 --> 6 <script> 7 'use strict'; 8 9 (function(exports) { 10 11 /** 12 * ComponentUtils is a utility which allows us to use web components earlier 13 * than we should be able to by polyfilling and fixing platform deficiencies. 14 */ 15 var ComponentUtils = { 16 17 /** 18 * Injects a style.css into both the shadow root and outside the shadow 19 * root so we can style projected content. Bug 992249. 20 */ 21 style: function(baseUrl) { 22 var style = document.createElement('style'); 23 style.setAttribute('scoped', ''); 24 var url = baseUrl + '1017798-1.css'; 25 style.innerHTML = '@import url(' + url + ');'; 26 27 this.appendChild(style); 28 29 if (!this.shadowRoot) { 30 return; 31 } 32 33 // The setTimeout is necessary to avoid missing @import styles 34 // when appending two stylesheets. Bug 1003294. 35 setTimeout(() => { 36 this.shadowRoot.appendChild(style.cloneNode(true)); 37 }); 38 } 39 40 }; 41 42 exports.ComponentUtils = ComponentUtils; 43 44 }(window)); 45 </script> 46 <script> 47 'use strict'; 48 /* global ComponentUtils */ 49 50 window.GaiaSwitch = (function(win) { 51 // Extend from the HTMLElement prototype 52 class GaiaSwitch extends HTMLElement { 53 connectedCallback() { 54 var shadow = this.attachShadow({ mode: "open" }); 55 this._template = template.content.cloneNode(true); 56 this._input = this._template.querySelector('input[type="checkbox"]'); 57 58 var checked = this.getAttribute('checked'); 59 if (checked !== null) { 60 this._input.checked = true; 61 } 62 63 shadow.appendChild(this._template); 64 65 ComponentUtils.style.call(this, ''); 66 } 67 }; 68 69 70 /** 71 * Proxy the checked property to the input element. 72 */ 73 Object.defineProperty( GaiaSwitch.prototype, 'checked', { 74 get: function() { 75 return this._input.checked; 76 }, 77 set: function(value) { 78 this._input.checked = value; 79 } 80 }); 81 82 /** 83 * Proxy the name property to the input element. 84 */ 85 Object.defineProperty( GaiaSwitch.prototype, 'name', { 86 get: function() { 87 return this.getAttribute('name'); 88 }, 89 set: function(value) { 90 this.setAttribute('name', value); 91 } 92 }); 93 94 // HACK: Create a <template> in memory at runtime. 95 // When the custom-element is created we clone 96 // this template and inject into the shadow-root. 97 // Prior to this we would have had to copy/paste 98 // the template into the <head> of every app that 99 // wanted to use <gaia-switch>, this would make 100 // markup changes complicated, and could lead to 101 // things getting out of sync. This is a short-term 102 // hack until we can import entire custom-elements 103 // using HTML Imports (bug 877072). 104 var template = document.createElement('template'); 105 template.innerHTML = '<label id="switch-label" class="pack-switch">' + 106 '<input type="checkbox">' + 107 '<span><slot></slot></span>' + 108 '</label>'; 109 110 // Register and return the constructor 111 win.customElements.define('gaia-switch', GaiaSwitch); 112 return GaiaSwitch; 113 })(window); 114 </script> 115 <body> 116 <section> 117 <gaia-switch> 118 <label>With a label</label> 119 </gaia-switch> 120 </section> 121 <script> 122 window.onload = function() { 123 document.querySelector('gaia-switch').checked = true; 124 }; 125 </script>