Created
September 29, 2016 15:31
-
-
Save SamMousa/245fba06d923b6fb2c784b330896b068 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.js"></script> | |
| <meta charset="UTF-8"> | |
| <title>Title</title> | |
| </head> | |
| <template id="mc"> | |
| <select multiple="multiple"> | |
| <content></content> | |
| </select> | |
| <style> | |
| label { | |
| display: block; | |
| } | |
| :host { | |
| display: inline-block; | |
| } | |
| </style> | |
| </template> | |
| <body> | |
| <script> | |
| setTimeout(function() { | |
| var CheckboxProto = Object.create(HTMLElement.prototype, { | |
| value: { | |
| get: function() { | |
| var o = this.querySelector("option:checked"); | |
| return o ? o.value : ""; | |
| }, | |
| set: function(val) { console.log(val); } | |
| }, | |
| selectedIndex: { | |
| get: function() { | |
| return Array.prototype.indexOf.call(this.querySelectorAll("option"), this.querySelector("option:checked")); | |
| } | |
| }, | |
| options: { | |
| get: function() { | |
| return this.querySelectorAll("option"); | |
| } | |
| } | |
| }); | |
| CheckboxProto.attributeChangedCallback = function() { | |
| console.log('attributeChanged', arguments); | |
| } | |
| CheckboxProto.createdCallback = function() { | |
| this.shadowRoot = this.createShadowRoot(); | |
| this.shadowRoot.appendChild(document.importNode(document.getElementById('mc').content, true)); | |
| this.type = "select-multiple"; | |
| this.tagName = "SELECT"; | |
| var that = this; | |
| this.shadowRoot.addEventListener('click', function(e) { | |
| if (e.target.matches("input")) { | |
| var t = that.querySelector('[value=' + e.target.value + ']'); | |
| t.selected = e.target.checked; | |
| console.log(t); | |
| } | |
| }); | |
| for (var i = 0; i < this.children.length; i++) { | |
| var option = this.children[i]; | |
| if (option.tagName !== 'OPTION') { | |
| throw "Invalid child tag: " + option.tagName; | |
| } else { | |
| $('<label>').append( | |
| $('<input/>') | |
| .attr({ | |
| type: "checkbox", | |
| value: option.value, | |
| checked: option.selected | |
| })) | |
| .append(option.textContent) | |
| .appendTo(this.shadowRoot) | |
| .on('click', function() { | |
| this.querySelector | |
| }); | |
| } | |
| } | |
| console.log(this); | |
| console.log('created', arguments); | |
| } | |
| var MultiCheckbox = document.registerElement('multi-checkbox', { | |
| prototype: CheckboxProto | |
| }); | |
| }, 1); | |
| </script> | |
| <select id="normal" name="normal" multiple="multiple"> | |
| <option value="opt1">Opt 1 title</option> | |
| <option value="opt2">Opt 2 title</option> | |
| <option value="opt3">Opt 3 title</option> | |
| </select> | |
| <multi-checkbox> | |
| <option value="opt1">Opt 1 title</option> | |
| <option value="opt2">Opt 2 title</option> | |
| <option value="opt3">Opt 3 title</option> | |
| </multi-checkbox> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Example of using custom elements combined with shadow root to create a multiple checkbox list that can be used just like a
<select multiple="multiple">.