├── .gitignore ├── .travis.yml ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── assets ├── logo.png ├── logo.svg └── svgrender.js ├── bower.json ├── dist ├── brick-action │ └── dist │ │ ├── brick-action.html │ │ └── brick-action.js ├── brick-appbar │ └── dist │ │ ├── brick-appbar.html │ │ └── brick-appbar.js ├── brick-button │ └── dist │ │ ├── brick-button.html │ │ └── brick-button.js ├── brick-calendar │ └── dist │ │ ├── brick-calendar.html │ │ └── brick-calendar.js ├── brick-common │ ├── brick-common.html │ ├── scripts │ │ └── brick-common.js │ └── styles │ │ ├── mixins.styl │ │ └── params.styl ├── brick-deck │ └── dist │ │ ├── brick-deck.html │ │ └── brick-deck.js ├── brick-dialog │ └── dist │ │ ├── brick-dialog.html │ │ └── brick-dialog.js ├── brick-flipbox │ └── dist │ │ ├── brick-flipbox.html │ │ └── brick-flipbox.js ├── brick-form │ └── dist │ │ ├── brick-form.html │ │ └── brick-form.js ├── brick-input │ └── dist │ │ ├── brick-input.html │ │ └── brick-input.js ├── brick-layout │ └── dist │ │ ├── brick-layout.html │ │ └── brick-layout.js ├── brick-listview │ └── dist │ │ ├── brick-listview.html │ │ └── brick-listview.js ├── brick-menu │ └── dist │ │ ├── brick-menu.html │ │ └── brick-menu.js ├── brick-storage-indexeddb │ └── dist │ │ ├── brick-storage-indexeddb.html │ │ └── brick-storage-indexeddb.js ├── brick-tabbar │ └── dist │ │ ├── brick-tabbar.html │ │ └── brick-tabbar.js ├── brick.html ├── brick.min.html ├── brick.min.js ├── es6-promise │ └── promise.js ├── font-awesome │ ├── css │ │ └── font-awesome.css │ └── fonts │ │ ├── FontAwesome.otf │ │ ├── fontawesome-webfont.eot │ │ ├── fontawesome-webfont.svg │ │ ├── fontawesome-webfont.ttf │ │ └── fontawesome-webfont.woff └── platform │ └── platform.js ├── gulpfile.js ├── karma.conf.js ├── manifest.webapp ├── package.json ├── tasks ├── distfile.js └── imports.js └── test └── smoke.js /.gitignore: -------------------------------------------------------------------------------- 1 | bower_components 2 | node_modules 3 | .DS_Store 4 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - 0.10 4 | addons: 5 | firefox: "29.0" 6 | before_script: 7 | - export DISPLAY=:99.0 8 | - sh -e /etc/init.d/xvfb start 9 | - npm install -g gulp bower 10 | - bower install 11 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing to Brick 2 | 3 | Thanks for helping to make Brick better! Brick as a project is spread out over several repositories- one for the site, one for the main project, and one for each individual component. 4 | 5 | If you're filing an issue or submitting a pull request, please try to file it in the right place: 6 | 7 | * [The Brick Project](https://github.com/mozbrick/brick/) - the overall project. Use this repository for question about usage, distribution, overall compatibility, and discussing possible new features/components. 8 | * [Brick website](https://github.com/mozbrick/mozbrick.github.io/) - Issues with the https://mozbrick.github.io/ website, such as issues with the documentation or examples. 9 | 10 | Individual component repositories: 11 | 12 | * [brick-action](https://github.com/mozbrick/brick-action) 13 | * [brick-appbar](https://github.com/mozbrick/brick-appbar) 14 | * [brick-calendar](https://github.com/mozbrick/brick-calendar) 15 | * [brick-deck](https://github.com/mozbrick/brick-deck) 16 | * [brick-flipbox](https://github.com/mozbrick/brick-flipbox) 17 | * [brick-form](https://github.com/mozbrick/brick-form) 18 | * [brick-layout](https://github.com/mozbrick/brick-layout) 19 | * [brick-menu](https://github.com/mozbrick/brick-menu) 20 | * [brick-storage-indexeddb](https://github.com/mozbrick/brick-storage-indexeddb) 21 | * [brick-tabbar](https://github.com/mozbrick/brick-tabbar) 22 | 23 | ## Filing pull requests 24 | 25 | Brick has a `.jshintrc` file to enforce coding style and best practices. Please run JSHint if you are modifying JavaScript files to verify they conform. 26 | 27 | ## Conduct 28 | 29 | Be respectful of other contributors to the project. The core Brick team is small, and Web Components are a young maturing technology. Others may not know the APIs and best practices as well as you do, so be gentle with newbie questions. A good attitude will be valued above good code. 30 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright 2014 Mozilla Corporation 2 | 3 | Licensed under the Apache License, Version 2.0 (the "License"); 4 | you may not use this file except in compliance with the License. 5 | You may obtain a copy of the License at 6 | 7 | http://www.apache.org/licenses/LICENSE-2.0 8 | 9 | Unless required by applicable law or agreed to in writing, software 10 | distributed under the License is distributed on an "AS IS" BASIS, 11 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | See the License for the specific language governing permissions and 13 | limitations under the License. 14 | 15 | Apache License 16 | Version 2.0, January 2004 17 | http://www.apache.org/licenses/ 18 | 19 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 20 | 21 | 1. Definitions. 22 | 23 | "License" shall mean the terms and conditions for use, reproduction, 24 | and distribution as defined by Sections 1 through 9 of this document. 25 | 26 | "Licensor" shall mean the copyright owner or entity authorized by 27 | the copyright owner that is granting the License. 28 | 29 | "Legal Entity" shall mean the union of the acting entity and all 30 | other entities that control, are controlled by, or are under common 31 | control with that entity. For the purposes of this definition, 32 | "control" means (i) the power, direct or indirect, to cause the 33 | direction or management of such entity, whether by contract or 34 | otherwise, or (ii) ownership of fifty percent (50%) or more of the 35 | outstanding shares, or (iii) beneficial ownership of such entity. 36 | 37 | "You" (or "Your") shall mean an individual or Legal Entity 38 | exercising permissions granted by this License. 39 | 40 | "Source" form shall mean the preferred form for making modifications, 41 | including but not limited to software source code, documentation 42 | source, and configuration files. 43 | 44 | "Object" form shall mean any form resulting from mechanical 45 | transformation or translation of a Source form, including but 46 | not limited to compiled object code, generated documentation, 47 | and conversions to other media types. 48 | 49 | "Work" shall mean the work of authorship, whether in Source or 50 | Object form, made available under the License, as indicated by a 51 | copyright notice that is included in or attached to the work 52 | (an example is provided in the Appendix below). 53 | 54 | "Derivative Works" shall mean any work, whether in Source or Object 55 | form, that is based on (or derived from) the Work and for which the 56 | editorial revisions, annotations, elaborations, or other modifications 57 | represent, as a whole, an original work of authorship. For the purposes 58 | of this License, Derivative Works shall not include works that remain 59 | separable from, or merely link (or bind by name) to the interfaces of, 60 | the Work and Derivative Works thereof. 61 | 62 | "Contribution" shall mean any work of authorship, including 63 | the original version of the Work and any modifications or additions 64 | to that Work or Derivative Works thereof, that is intentionally 65 | submitted to Licensor for inclusion in the Work by the copyright owner 66 | or by an individual or Legal Entity authorized to submit on behalf of 67 | the copyright owner. For the purposes of this definition, "submitted" 68 | means any form of electronic, verbal, or written communication sent 69 | to the Licensor or its representatives, including but not limited to 70 | communication on electronic mailing lists, source code control systems, 71 | and issue tracking systems that are managed by, or on behalf of, the 72 | Licensor for the purpose of discussing and improving the Work, but 73 | excluding communication that is conspicuously marked or otherwise 74 | designated in writing by the copyright owner as "Not a Contribution." 75 | 76 | "Contributor" shall mean Licensor and any individual or Legal Entity 77 | on behalf of whom a Contribution has been received by Licensor and 78 | subsequently incorporated within the Work. 79 | 80 | 2. Grant of Copyright License. Subject to the terms and conditions of 81 | this License, each Contributor hereby grants to You a perpetual, 82 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 83 | copyright license to reproduce, prepare Derivative Works of, 84 | publicly display, publicly perform, sublicense, and distribute the 85 | Work and such Derivative Works in Source or Object form. 86 | 87 | 3. Grant of Patent License. Subject to the terms and conditions of 88 | this License, each Contributor hereby grants to You a perpetual, 89 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 90 | (except as stated in this section) patent license to make, have made, 91 | use, offer to sell, sell, import, and otherwise transfer the Work, 92 | where such license applies only to those patent claims licensable 93 | by such Contributor that are necessarily infringed by their 94 | Contribution(s) alone or by combination of their Contribution(s) 95 | with the Work to which such Contribution(s) was submitted. If You 96 | institute patent litigation against any entity (including a 97 | cross-claim or counterclaim in a lawsuit) alleging that the Work 98 | or a Contribution incorporated within the Work constitutes direct 99 | or contributory patent infringement, then any patent licenses 100 | granted to You under this License for that Work shall terminate 101 | as of the date such litigation is filed. 102 | 103 | 4. Redistribution. You may reproduce and distribute copies of the 104 | Work or Derivative Works thereof in any medium, with or without 105 | modifications, and in Source or Object form, provided that You 106 | meet the following conditions: 107 | 108 | (a) You must give any other recipients of the Work or 109 | Derivative Works a copy of this License; and 110 | 111 | (b) You must cause any modified files to carry prominent notices 112 | stating that You changed the files; and 113 | 114 | (c) You must retain, in the Source form of any Derivative Works 115 | that You distribute, all copyright, patent, trademark, and 116 | attribution notices from the Source form of the Work, 117 | excluding those notices that do not pertain to any part of 118 | the Derivative Works; and 119 | 120 | (d) If the Work includes a "NOTICE" text file as part of its 121 | distribution, then any Derivative Works that You distribute must 122 | include a readable copy of the attribution notices contained 123 | within such NOTICE file, excluding those notices that do not 124 | pertain to any part of the Derivative Works, in at least one 125 | of the following places: within a NOTICE text file distributed 126 | as part of the Derivative Works; within the Source form or 127 | documentation, if provided along with the Derivative Works; or, 128 | within a display generated by the Derivative Works, if and 129 | wherever such third-party notices normally appear. The contents 130 | of the NOTICE file are for informational purposes only and 131 | do not modify the License. You may add Your own attribution 132 | notices within Derivative Works that You distribute, alongside 133 | or as an addendum to the NOTICE text from the Work, provided 134 | that such additional attribution notices cannot be construed 135 | as modifying the License. 136 | 137 | You may add Your own copyright statement to Your modifications and 138 | may provide additional or different license terms and conditions 139 | for use, reproduction, or distribution of Your modifications, or 140 | for any such Derivative Works as a whole, provided Your use, 141 | reproduction, and distribution of the Work otherwise complies with 142 | the conditions stated in this License. 143 | 144 | 5. Submission of Contributions. Unless You explicitly state otherwise, 145 | any Contribution intentionally submitted for inclusion in the Work 146 | by You to the Licensor shall be under the terms and conditions of 147 | this License, without any additional terms or conditions. 148 | Notwithstanding the above, nothing herein shall supersede or modify 149 | the terms of any separate license agreement you may have executed 150 | with Licensor regarding such Contributions. 151 | 152 | 6. Trademarks. This License does not grant permission to use the trade 153 | names, trademarks, service marks, or product names of the Licensor, 154 | except as required for reasonable and customary use in describing the 155 | origin of the Work and reproducing the content of the NOTICE file. 156 | 157 | 7. Disclaimer of Warranty. Unless required by applicable law or 158 | agreed to in writing, Licensor provides the Work (and each 159 | Contributor provides its Contributions) on an "AS IS" BASIS, 160 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or 161 | implied, including, without limitation, any warranties or conditions 162 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A 163 | PARTICULAR PURPOSE. You are solely responsible for determining the 164 | appropriateness of using or redistributing the Work and assume any 165 | risks associated with Your exercise of permissions under this License. 166 | 167 | 8. Limitation of Liability. In no event and under no legal theory, 168 | whether in tort (including negligence), contract, or otherwise, 169 | unless required by applicable law (such as deliberate and grossly 170 | negligent acts) or agreed to in writing, shall any Contributor be 171 | liable to You for damages, including any direct, indirect, special, 172 | incidental, or consequential damages of any character arising as a 173 | result of this License or out of the use or inability to use the 174 | Work (including but not limited to damages for loss of goodwill, 175 | work stoppage, computer failure or malfunction, or any and all 176 | other commercial damages or losses), even if such Contributor 177 | has been advised of the possibility of such damages. 178 | 179 | 9. Accepting Warranty or Additional Liability. While redistributing 180 | the Work or Derivative Works thereof, You may choose to offer, 181 | and charge a fee for, acceptance of support, warranty, indemnity, 182 | or other liability obligations and/or rights consistent with this 183 | License. However, in accepting such obligations, You may act only 184 | on Your own behalf and on Your sole responsibility, not on behalf 185 | of any other Contributor, and only if You agree to indemnify, 186 | defend, and hold each Contributor harmless for any liability 187 | incurred by, or claims asserted against, such Contributor by reason 188 | of your accepting any such warranty or additional liability. 189 | 190 | END OF TERMS AND CONDITIONS 191 | 192 | APPENDIX: How to apply the Apache License to your work. 193 | 194 | To apply the Apache License to your work, attach the following 195 | boilerplate notice, with the fields enclosed by brackets "{}" 196 | replaced with your own identifying information. (Don't include 197 | the brackets!) The text should be enclosed in the appropriate 198 | comment syntax for the file format. We also recommend that a 199 | file or class name and description of purpose be included on the 200 | same "printed page" as the copyright notice for easier 201 | identification within third-party archives. 202 | 203 | Copyright {yyyy} {name of copyright owner} 204 | 205 | Licensed under the Apache License, Version 2.0 (the "License"); 206 | you may not use this file except in compliance with the License. 207 | You may obtain a copy of the License at 208 | 209 | http://www.apache.org/licenses/LICENSE-2.0 210 | 211 | Unless required by applicable law or agreed to in writing, software 212 | distributed under the License is distributed on an "AS IS" BASIS, 213 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 214 | See the License for the specific language governing permissions and 215 | limitations under the License. 216 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Brick 2 | 3 | [![Build Status](https://travis-ci.org/mozbrick/brick.png)](https://travis-ci.org/mozbrick/brick) 4 | 5 | Brick is a collection of UI components designed for the easy and quick building of web application UIs. Brick components are built using the Web Components standard to allow developers to describe the UI of their app using the HTML syntax they already know. 6 | 7 | ## Install 8 | 9 | Brick can be installed using the [Bower](http://bower.io) package manager: 10 | 11 | ```sh 12 | bower install mozbrick/brick 13 | ``` 14 | 15 | To use Brick in your project, place the following in the `` of your main HTML: 16 | 17 | ```html 18 | 19 | 20 | ``` 21 | 22 | If you are already using Polymer, platform.js or a web browser that supports Web Components, you do not need the above ` -------------------------------------------------------------------------------- /dist/brick-action/dist/brick-action.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | 3 | var BrickActionElementPrototype = Object.create(HTMLElement.prototype); 4 | 5 | function cleanupHandler(el) { 6 | var pair = el._ns.listener; 7 | if (pair && pair[0]) { 8 | pair[0].removeEventListener(pair[1], pair[2]); 9 | } 10 | } 11 | 12 | function makeHandler(method, target) { 13 | return function(e) { 14 | var data = e.detail; 15 | if (method in target && typeof target[method] === 'function') { 16 | target[method](data); 17 | } 18 | }; 19 | } 20 | 21 | function setupHandler(el) { 22 | var source = el.getAttribute('source'); 23 | var trigger = el.getAttribute('trigger') || 'click'; 24 | var action = el.getAttribute('action'); 25 | var target = el.getAttribute('target'); 26 | var sourceEl; 27 | if (!action || !target) { 28 | return; 29 | } 30 | var targetEl = document.getElementById(target); 31 | if (!targetEl) { 32 | return; 33 | } 34 | if (source) { 35 | sourceEl = document.getElementById(source); 36 | } 37 | if (!sourceEl) { 38 | sourceEl = el; 39 | } 40 | var listener = makeHandler(action, targetEl); 41 | el._ns.listener = [sourceEl, trigger, listener]; 42 | sourceEl.addEventListener(trigger, listener); 43 | } 44 | 45 | BrickActionElementPrototype.createdCallback = function () { 46 | this._ns = {}; 47 | }; 48 | 49 | BrickActionElementPrototype.attachedCallback = function () { 50 | setupHandler(this); 51 | }; 52 | 53 | BrickActionElementPrototype.detachedCallback = function () { 54 | cleanupHandler(this); 55 | 56 | }; 57 | 58 | BrickActionElementPrototype.attributeChangedCallback = function () { 59 | cleanupHandler(this); 60 | setupHandler(this); 61 | }; 62 | 63 | if (!window.BrickActionElement) { 64 | window.BrickActionElement = document.registerElement('brick-action', { 65 | prototype: BrickActionElementPrototype 66 | }); 67 | } 68 | 69 | })(); 70 | -------------------------------------------------------------------------------- /dist/brick-appbar/dist/brick-appbar.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 103 | 104 | -------------------------------------------------------------------------------- /dist/brick-appbar/dist/brick-appbar.js: -------------------------------------------------------------------------------- 1 | /* global Platform */ 2 | 3 | (function () { 4 | 5 | var currentScript = document._currentScript || document.currentScript; 6 | 7 | var BrickAppbarElementPrototype = Object.create(HTMLElement.prototype); 8 | 9 | // Lifecycle methods 10 | BrickAppbarElementPrototype.attachedCallback = function () { 11 | 12 | var importDoc = currentScript.ownerDocument; 13 | var template = importDoc.querySelector('#brick-appbar-template'); 14 | 15 | // fix styling for polyfill 16 | if (Platform.ShadowCSS) { 17 | var styles = template.content.querySelectorAll('style'); 18 | for (var i = 0; i < styles.length; i++) { 19 | var style = styles[i]; 20 | var cssText = Platform.ShadowCSS.shimStyle(style, 'brick-appbar'); 21 | Platform.ShadowCSS.addCssToDocument(cssText); 22 | style.remove(); 23 | } 24 | } 25 | 26 | // create shadowRoot and append template to it. 27 | var shadowRoot = this.createShadowRoot(); 28 | shadowRoot.appendChild(template.content.cloneNode(true)); 29 | }; 30 | 31 | if (!window.BrickAppbarElement) { 32 | window.BrickAppbarElement = document.registerElement('brick-appbar', { 33 | prototype: BrickAppbarElementPrototype 34 | }); 35 | } 36 | 37 | })(); 38 | -------------------------------------------------------------------------------- /dist/brick-button/dist/brick-button.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /dist/brick-button/dist/brick-button.js: -------------------------------------------------------------------------------- 1 | /* global Platform */ 2 | 3 | (function () { 4 | 5 | var currentScript = document._currentScript || document.currentScript; 6 | 7 | function shimShadowStyles(styles, tag) { 8 | if (!Platform.ShadowCSS) { 9 | return; 10 | } 11 | for (var i = 0; i < styles.length; i++) { 12 | var style = styles[i]; 13 | var cssText = Platform.ShadowCSS.shimStyle(style, tag); 14 | Platform.ShadowCSS.addCssToDocument(cssText); 15 | style.remove(); 16 | } 17 | } 18 | 19 | var BrickButtonElementPrototype = Object.create(window.BrickActionElement.prototype); 20 | 21 | // Lifecycle methods 22 | 23 | BrickButtonElementPrototype.createdCallback = function () { 24 | 25 | window.BrickActionElement.prototype.createdCallback.call(this); 26 | 27 | // import template 28 | var importDoc = currentScript.ownerDocument; 29 | var templateContent = importDoc.querySelector('#brick-button-template').content; 30 | 31 | // fix styling for polyfill 32 | shimShadowStyles(templateContent.querySelectorAll('style'),'brick-button'); 33 | 34 | // create shadowRoot and append template 35 | var shadowRoot = this.createShadowRoot(); 36 | shadowRoot.appendChild(templateContent.cloneNode(true)); 37 | 38 | this.setAttribute('role', 'button'); 39 | 40 | }; 41 | 42 | // Register the element 43 | 44 | window.BrickButtonElement = document.registerElement('brick-button', { 45 | prototype: BrickButtonElementPrototype 46 | }); 47 | 48 | })(); 49 | -------------------------------------------------------------------------------- /dist/brick-calendar/dist/brick-calendar.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 133 | 134 | 135 | 136 | -------------------------------------------------------------------------------- /dist/brick-common/brick-common.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /dist/brick-common/scripts/brick-common.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mozbrick/brick/4cf4100085e736805f5f57b6f09da0e724cd4099/dist/brick-common/scripts/brick-common.js -------------------------------------------------------------------------------- /dist/brick-common/styles/mixins.styl: -------------------------------------------------------------------------------- 1 | strip-units($number) { 2 | $number / ($number * 0 + 1); 3 | } 4 | 5 | box-sizing($v) { 6 | -webkit-box-sizing: $v; 7 | -moz-box-sizing: $v; 8 | box-sizing: $v; 9 | } 10 | 11 | $borderBox { 12 | box-sizing(border-box); 13 | } 14 | 15 | nohighlight() { 16 | -webkit-touch-callout: none; 17 | -webkit-user-select: none; 18 | -khtml-user-select: none; 19 | -moz-user-select: none; 20 | -ms-user-select: none; 21 | user-select: none; 22 | 23 | -webkit-tap-highlight-color: transparent; 24 | -moz-tap-highlight-color: transparent; 25 | tap-highlight-color: transparent; 26 | } 27 | 28 | prefix_perspective($val){ 29 | -webkit-perspective: $val; 30 | -moz-perspective: $val; 31 | -o-perspective: $val; 32 | -ms-perspective: $val; 33 | perspective: $val; 34 | } 35 | 36 | backfaceVisibility($value){ 37 | -webkit-backface-visibility: $value; 38 | -moz-backface-visibility: $value; 39 | -ms-backface-visibility: $value; 40 | -o-backface-visibility: $value; 41 | backface-visibility: $value; 42 | } 43 | 44 | transformed($transform){ 45 | transform:$transform; 46 | -ms-transform:$transform; // IE 9 47 | -moz-transform:$transform; // Firefox 48 | -webkit-transform:$transform; // Safari and Chrome 49 | -o-transform:$transform; // Opera 50 | } 51 | 52 | replace(expr, str, val) { 53 | expr = clone(expr) 54 | for e, i in expr { 55 | if str == e { 56 | expr[i] = val 57 | } 58 | } 59 | expr 60 | } 61 | 62 | animated($properties = all, $durations = 0.2s, $timings = ease-in, $delays = 0s){ 63 | -webkit-transition-property: replace($properties, transform, 64 | -webkit-transform); 65 | -moz-transition-property: replace($properties, transform, 66 | -moz-transform); 67 | -ms-transition-property: replace($properties, transform, 68 | -ms-transform); 69 | -o-transition-property: replace($properties, transform, 70 | -o-transform); 71 | transition-property: $properties; 72 | 73 | -webkit-transition-duration: $durations; 74 | -moz-transition-duration: $durations; 75 | -ms-transition-duration: $durations; 76 | -o-transition-duration: $durations; 77 | transition-duration: $durations; 78 | 79 | -webkit-transition-timing-function: $timings; 80 | -moz-transition-timing-function: $timings; 81 | -ms-transition-timing-function: $timings; 82 | -o-transition-timing-function: $timings; 83 | transition-timing-function: $timings; 84 | 85 | -webkit-transition-delay: $delays; 86 | -moz-transition-delay: $delays; 87 | -ms-transition-delay: $delays; 88 | -o-transition-delay: $delays; 89 | transition-delay: $delays; 90 | } 91 | 92 | transformed($transform){ 93 | -webkit-transform: $transform; // Safari and Chrome 94 | -moz-transform: $transform; // Firefox 95 | -ms-transform: $transform; // IE 9 96 | -o-transform: $transform; // Opera 97 | transform: $transform; 98 | } 99 | 100 | rounded($radius = 4px){ 101 | border-radius: $radius; 102 | } 103 | 104 | simplegradientglossy($base = #ffffff){ 105 | $darker = darken($base, 15%); 106 | background-color: $base; 107 | background-repeat: no-repeat; 108 | 109 | background-image: -o-linear-gradient(top, $base, $base 50%, $darker 50%, $darker); 110 | background-image: -ms-linear-gradient(top, $base, $base 50%, $darker 50%, $darker); 111 | background-image: -moz-linear-gradient(top, $base, $base 50%, $darker 50%, $darker); 112 | background-image: -webkit-linear-gradient(top, $base, $base 50%, $darker 50%, $darker); 113 | background-image: linear-gradient(top, $base, $base 50%, $darker 50%, $darker); 114 | 115 | } 116 | 117 | simplegradient($base = #ffffff){ 118 | $darker = darken($base, 15%); 119 | background-color: $base; 120 | background-repeat: no-repeat; 121 | 122 | background-image: -o-linear-gradient(top, $base, $base 25%, $darker); 123 | background-image: -ms-linear-gradient(top, $base, $base 25%, $darker); 124 | background-image: -moz-linear-gradient(top, $base, $base 25%, $darker); 125 | background-image: -webkit-linear-gradient(top, $base, $base 25%, $darker); 126 | background-image: linear-gradient(top, $base, $base 25%, $darker); 127 | } 128 | 129 | unhighlightable(){ 130 | -webkit-touch-callout: none; 131 | -webkit-user-select: none; 132 | -khtml-user-select: none; 133 | -moz-user-select: none; 134 | -ms-user-select: none; 135 | user-select: none; 136 | 137 | -webkit-tap-highlight-color: transparent; 138 | -moz-tap-highlight-color: transparent; 139 | tap-highlight-color: transparent; 140 | } 141 | 142 | flexbox() { 143 | display: -webkit-box; 144 | display: -moz-box; 145 | display: -ms-flexbox; 146 | display: -webkit-flex; 147 | display: flex; 148 | } 149 | 150 | flex($values) { 151 | min-width: auto; 152 | min-height: auto; 153 | -webkit-box-flex: $values; 154 | -moz-box-flex: $values; 155 | -webkit-flex: $values; 156 | -ms-flex: $values; 157 | box-flex: $values; 158 | flex: $values; 159 | } 160 | 161 | align-items($align){ 162 | -webkit-align-items: $align; 163 | -moz-align-items: $align; 164 | -ms-align-items: $align; 165 | align-items: $align; 166 | } 167 | 168 | align-content($align){ 169 | -webkit-align-content: $align; 170 | -moz-align-content: $align; 171 | -ms-align-content: $align; 172 | align-content: $align; 173 | } 174 | 175 | justify-content($just){ 176 | -webkit-justify-content: $just; 177 | -moz-justify-content: $just; 178 | -ms-justify-content: $just; 179 | justify-content: $just; 180 | } 181 | 182 | order($val) { 183 | -webkit-box-ordinal-group: $val; 184 | -moz-box-ordinal-group: $val; 185 | -ms-flex-order: $val; 186 | -webkit-order: $val; 187 | order: $val; 188 | } 189 | 190 | -------------------------------------------------------------------------------- /dist/brick-common/styles/params.styl: -------------------------------------------------------------------------------- 1 | $_bgBaseColor = #858585; 2 | $_bgSelectBaseColor = #E1E1E1; 3 | $_bgHighlightColor = #A0A0A0; 4 | 5 | $highlight = #0095DD; 6 | $darkBG = #00202F; 7 | $barFG = #fff; 8 | 9 | $barHeight = 45px; 10 | $tapTargetSize = 32px; 11 | 12 | $COMPONENT_CUSTOM_FONT_NAME = "Fira Sans"; 13 | $fontFamilyPrimary = $COMPONENT_CUSTOM_FONT_NAME, "Fira Sans", "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif; 14 | $COMPONENT_UI_LINE_HEIGHT = 19px; 15 | $COMPONENT_UI_FONT_SIZE = 14px; 16 | $COMPONENT_UI_HEADER_FONT_SIZE = 20px; 17 | $COMPONENT_UI_LINE_PADDING = ($COMPONENT_UI_LINE_HEIGHT - $COMPONENT_UI_FONT_SIZE) / 2; // for when you don't want to specify line-height 18 | $COMPONENT_UI_TEXT_COLOR = #D4D4D4; 19 | $COMPONENT_UI_TEXT_COLOR_SELECTED = #F2F2F2; 20 | $COMPONENT_UI_TEXT_COLOR_HOVER = mix($COMPONENT_UI_TEXT_COLOR, $COMPONENT_UI_TEXT_COLOR_SELECTED, 25%); 21 | 22 | // responsive breakpoints 23 | $xs = { end: 768px, name: xs } 24 | $s = { start: 768px, end: 992px, name: s } 25 | $m = { start: 992px, end: 1200px, name: m } 26 | $l = { start: 1200px, name: l } -------------------------------------------------------------------------------- /dist/brick-deck/dist/brick-deck.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 157 | 158 | 159 | 160 | -------------------------------------------------------------------------------- /dist/brick-deck/dist/brick-deck.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | 3 | var BrickCardElementPrototype = Object.create(HTMLElement.prototype); 4 | 5 | BrickCardElementPrototype.createdCallback = function () { 6 | this.ns = {}; 7 | }; 8 | 9 | BrickCardElementPrototype.attachedCallback = function () { 10 | var deck = this.parentNode; 11 | if (deck.nodeName.toLowerCase() === 'brick-deck') { 12 | this.ns.deck = deck; 13 | if (this !== deck.selectedCard && this.selected) { 14 | deck.showCard(this, {'skipTransition':true}); 15 | } 16 | } 17 | }; 18 | 19 | BrickCardElementPrototype.detachedCallback = function () { 20 | var deck = this.ns.deck; 21 | if (deck) { 22 | if (this === deck.selectedCard) { 23 | deck.selectedCard = null; 24 | deck.removeAttribute('selected-index'); 25 | } 26 | this.ns.deck = null; 27 | } 28 | }; 29 | 30 | BrickCardElementPrototype.attributeChangedCallback = function (attr, oldVal, newVal) { 31 | if (attr in attrs) { 32 | attrs[attr].call(this, oldVal, newVal); 33 | } 34 | }; 35 | 36 | // Attribute handlers 37 | var attrs = { 38 | 'selected': function (oldVal, newVal) { 39 | var deck = this.ns.deck; 40 | if (!deck) { return; } 41 | // check for null because empty string is true 42 | // for our booleon attribute 43 | if (newVal !== null) { 44 | if (this !== deck.selectedCard) { deck.showCard(this); } 45 | } else { 46 | if (this === deck.selectedCard) { deck.hideCard(this); } 47 | } 48 | }, 49 | }; 50 | 51 | BrickCardElementPrototype.reveal = function() { 52 | this.dispatchEvent(new CustomEvent("reveal",{bubbles: true})); 53 | }; 54 | 55 | // Property handlers 56 | Object.defineProperties(BrickCardElementPrototype, { 57 | 'selected': { 58 | get : function () { 59 | return this.hasAttribute('selected'); 60 | }, 61 | set : function (newVal) { 62 | if (newVal) { 63 | this.setAttribute('selected',''); 64 | } else { 65 | this.removeAttribute('selected'); 66 | } 67 | } 68 | }, 69 | 'transitionType': { 70 | get: function() { 71 | return this.getAttribute("transition-type"); 72 | }, 73 | set: function(newVal) { 74 | this.setAttribute("transition-type", newVal); 75 | } 76 | } 77 | }); 78 | 79 | // Register the element 80 | if (!window.BrickCardElement) { 81 | window.BrickCardElement = document.registerElement('brick-card', { 82 | prototype: BrickCardElementPrototype 83 | }); 84 | } 85 | 86 | })(); 87 | ; 88 | /* global Platform */ 89 | (function () { 90 | 91 | var currentScript = document._currentScript || document.currentScript; 92 | 93 | var requestAnimationFrame = window.requestAnimationFrame || 94 | window.webkitRequestAnimationFrame || 95 | function (fn) { setTimeout(fn, 16); }; 96 | 97 | function delegate(selector, handler) { 98 | return function(e) { 99 | var target = e.target; 100 | var delegateEl = e.currentTarget; 101 | var matches = delegateEl.querySelectorAll(selector); 102 | for (var el = target; el.parentNode && el !== delegateEl; el = el.parentNode) { 103 | for (var i = 0; i < matches.length; i++) { 104 | if (matches[i] === el) { 105 | handler.call(el, e); 106 | return; 107 | } 108 | } 109 | } 110 | }; 111 | } 112 | 113 | var skipFrame = function(fn){ 114 | requestAnimationFrame(function(){ requestAnimationFrame(fn); }); 115 | }; 116 | 117 | var sides = { 118 | next: ['nextElementSibling', 'firstElementChild'], 119 | previous: ['previousElementSibling', 'lastElementChild'] 120 | }; 121 | 122 | function indexOfCard(deck, card){ 123 | return Array.prototype.indexOf.call(deck.children, card); 124 | } 125 | 126 | function getCard(deck, item){ 127 | if (item && item.nodeName) { 128 | return item; 129 | } else { 130 | if (isNaN(item)) { 131 | return deck.querySelector(item); 132 | } else { 133 | return deck.children[item]; 134 | } 135 | } 136 | } 137 | 138 | 139 | var card = document.createElement('brick-card'); 140 | //ensure the children is a brick-card (or wraps it with one) 141 | function ensureIsCard(child){ 142 | if(child.tagName !== 'BRICK-CARD'){ 143 | var wrap = card.cloneNode(), 144 | attributes = ['selected', 'transition-type'], 145 | attribute; 146 | 147 | for(var i=0, max=attributes.length; i currentIndex ? 'forward' : 'reverse'; 267 | // if looping is turned on, check if the other way round is shorter 268 | if (this.loop) { 269 | // the distance between two cards 270 | var dist = nextIndex - currentIndex; 271 | // the distance between two cards when skipping over the end of the deck 272 | var distLooped = this.cards.length - Math.max(nextIndex,currentIndex) + Math.min(nextIndex,currentIndex); 273 | // set the direction if the looped way is shorter 274 | if (Math.abs(distLooped) < Math.abs(dist)) { 275 | direction = nextIndex < currentIndex ? 'forward' : 'reverse'; 276 | } 277 | } 278 | } 279 | // hide the old card 280 | if (selectedCard) { this.hideCard(selectedCard, direction); } 281 | this.ns.selectedCard = card; 282 | this.ns.selectedIndex = nextIndex; 283 | this.setAttribute("selected-index", nextIndex); 284 | if (!card.selected) { card.selected = true; } 285 | card.removeAttribute("hide"); // be safe 286 | var hasTransition = card.hasAttribute('transition-type') || this.hasAttribute('transition-type'); 287 | if (!skipTransition && hasTransition) { 288 | // set attributes, set transitionend listener, skip a frame set transition attribute 289 | card.setAttribute('transition-direction', direction); 290 | var transitionendHandler = function() { 291 | card.dispatchEvent(new CustomEvent('show',{'bubbles': true})); 292 | card.removeEventListener('transitionend', transitionendHandler); 293 | }; 294 | card.addEventListener('transitionend', transitionendHandler); 295 | skipFrame(function(){ card.setAttribute('transition', ''); }); 296 | } else { 297 | card.dispatchEvent(new CustomEvent('show',{'bubbles': true})); 298 | if (hasTransition) { 299 | card.setAttribute('transition', ''); 300 | } 301 | } 302 | }; 303 | 304 | BrickDeckElementPrototype.hideCard = function(item, direction){ 305 | var card = getCard(this, item); 306 | if (!checkCard(this, card) || (card !== this.selectedCard)) { 307 | return; 308 | } 309 | this.ns.selectedCard = null; 310 | if (card.selected) { card.selected = false; } 311 | var hasTransition = card.hasAttribute('transition-type') || this.hasAttribute('transition-type'); 312 | if (hasTransition) { 313 | // set attributes, set transitionend listener, skip a frame set transition attribute 314 | var transitionendHandler = function() { 315 | card.removeAttribute('hide'); 316 | card.removeAttribute('transition'); 317 | card.removeAttribute('transition-direction'); 318 | card.dispatchEvent(new CustomEvent('hide',{'bubbles': true})); 319 | card.removeEventListener('transitionend', transitionendHandler); 320 | }; 321 | card.addEventListener('transitionend', transitionendHandler); 322 | skipFrame(function(){ 323 | card.setAttribute('transition-direction', direction || 'reverse'); 324 | card.setAttribute('hide', ''); 325 | }); 326 | } else { 327 | card.dispatchEvent(new CustomEvent('hide',{'bubbles': true})); 328 | } 329 | }; 330 | 331 | 332 | // Property handlers 333 | Object.defineProperties(BrickDeckElementPrototype, { 334 | 'loop': { 335 | get: function() { 336 | return this.hasAttribute('loop'); 337 | }, 338 | set: function(newVal) { 339 | if (newVal) { 340 | this.setAttribute('loop', newVal); 341 | } else { 342 | this.removeAttribute('loop'); 343 | } 344 | } 345 | }, 346 | 'cards': { 347 | get: function () { 348 | var cardList = this.querySelectorAll("brick-card"); 349 | return Array.prototype.slice.call(cardList); 350 | } 351 | }, 352 | 'selectedCard': { 353 | get: function() { 354 | return this.ns.selectedCard || null; 355 | } 356 | }, 357 | 'selectedIndex': { 358 | get: function() { 359 | return this.hasAttribute('selected-index') ? Number(this.getAttribute('selected-index')) : -1; 360 | }, 361 | set: function(value) { 362 | var index = Number(value); 363 | var card = this.cards[index]; 364 | if (card) { 365 | if (card !== this.ns.selectedCard) { 366 | this.showCard(card); 367 | } 368 | } else { 369 | this.removeAttribute('selected-index'); 370 | if (this.ns.selectedCard) { 371 | this.hideCard(this.ns.selectedCard); 372 | } 373 | } 374 | } 375 | }, 376 | 'transitionType': { 377 | get: function() { 378 | return this.getAttribute('transition-type'); 379 | }, 380 | set: function(newVal) { 381 | this.setAttribute('transition-type', newVal); 382 | } 383 | } 384 | }); 385 | 386 | // Register the element 387 | if (!window.BrickDeckElement) { 388 | window.BrickDeckElement = document.registerElement('brick-deck', { 389 | prototype: BrickDeckElementPrototype 390 | }); 391 | } 392 | 393 | })(); 394 | -------------------------------------------------------------------------------- /dist/brick-dialog/dist/brick-dialog.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 265 | 266 | 267 | -------------------------------------------------------------------------------- /dist/brick-dialog/dist/brick-dialog.js: -------------------------------------------------------------------------------- 1 | /* globals Platform */ 2 | 3 | (function () { 4 | 5 | var currentScript = document._currentScript || document.currentScript; 6 | 7 | var requestAnimationFrame = window.requestAnimationFrame || 8 | window.webkitRequestAnimationFrame || 9 | function (fn) { setTimeout(fn, 16); }; 10 | 11 | var skipFrame = function(fn){ 12 | requestAnimationFrame(function(){ requestAnimationFrame(fn); }); 13 | }; 14 | 15 | var BrickDialogElementPrototype = Object.create(HTMLElement.prototype); 16 | 17 | BrickDialogElementPrototype.attachedCallback = function() { 18 | 19 | var importDoc = currentScript.ownerDocument; 20 | var template = importDoc.querySelector('#brick-dialog-template'); 21 | 22 | // fix styling for polyfill 23 | if (Platform.ShadowCSS) { 24 | var styles = template.content.querySelectorAll('style'); 25 | for (var i = 0; i < styles.length; i++) { 26 | var style = styles[i]; 27 | var cssText = Platform.ShadowCSS.shimStyle(style, 'brick-dialog'); 28 | Platform.ShadowCSS.addCssToDocument(cssText); 29 | style.remove(); 30 | } 31 | } 32 | 33 | // create shadowRoot and append template to it. 34 | var shadowRoot = this.createShadowRoot(); 35 | shadowRoot.appendChild(template.content.cloneNode(true)); 36 | 37 | 38 | this.addEventListener('click', this.hide.bind(this)); 39 | 40 | var dialog = shadowRoot.querySelector('.dialog'); 41 | dialog.addEventListener('click', function(e) { 42 | e.stopPropagation(); 43 | }); 44 | 45 | }; 46 | 47 | BrickDialogElementPrototype.detachedCallback = function() { 48 | this.removeEventListener('click', this.hide.bind(this)); 49 | }; 50 | 51 | 52 | 53 | BrickDialogElementPrototype.show = function() { 54 | var dialog = this; 55 | dialog.setAttribute('show',''); 56 | 57 | skipFrame(function() { 58 | dialog.setAttribute('show', 'in'); 59 | }); 60 | }; 61 | 62 | BrickDialogElementPrototype.hide = function() { 63 | var dialog = this; 64 | dialog.setAttribute('show', 'out'); 65 | 66 | var animationendHandler = function() { 67 | dialog.removeAttribute('show'); 68 | dialog.removeEventListener('animationend', animationendHandler); 69 | dialog.removeEventListener('webkitAnimationEnd', animationendHandler); 70 | }; 71 | 72 | dialog.addEventListener('animationend', animationendHandler); 73 | dialog.addEventListener('webkitAnimationEnd', animationendHandler); 74 | }; 75 | 76 | // Register the element 77 | window.BrickDialogElement = document.registerElement('brick-dialog', { 78 | prototype: BrickDialogElementPrototype 79 | }); 80 | 81 | })(); 82 | -------------------------------------------------------------------------------- /dist/brick-flipbox/dist/brick-flipbox.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 94 | 95 | 96 | -------------------------------------------------------------------------------- /dist/brick-flipbox/dist/brick-flipbox.js: -------------------------------------------------------------------------------- 1 | /* global Platform */ 2 | 3 | (function () { 4 | 5 | var currentScript = document._currentScript || document.currentScript; 6 | 7 | var requestAnimationFrame = window.requestAnimationFrame || 8 | window.webkitRequestAnimationFrame || 9 | function (fn) { setTimeout(fn, 16); }; 10 | 11 | function delegate(selector, handler) { 12 | return function(e) { 13 | var target = e.target; 14 | var delegateEl = e.currentTarget; 15 | var matches = delegateEl.querySelectorAll(selector); 16 | for (var el = target; el.parentNode && el !== delegateEl; el = el.parentNode) { 17 | for (var i = 0; i < matches.length; i++) { 18 | if (matches[i] === el) { 19 | handler.call(el, e); 20 | return; 21 | } 22 | } 23 | } 24 | }; 25 | } 26 | 27 | var skipTransition = function(element, fn, bind){ 28 | element.style.webkitTransitionProperty = 'none'; 29 | element.style.transitionProperty = 'none'; 30 | var callback = fn ? fn.call(bind) : null; 31 | return requestAnimationFrame(function(){ 32 | requestAnimationFrame(function(){ 33 | element.style.webkitTransitionProperty = ''; 34 | element.style.transitionProperty = ''; 35 | if (callback) { 36 | requestAnimationFrame(callback); 37 | } 38 | }); 39 | }); 40 | }; 41 | 42 | function reveal(e) { 43 | var flipBox = e.currentTarget; 44 | if (this.parentNode === flipBox) { 45 | if (this.parentNode.firstElementChild === this) { 46 | flipBox.showFront(); 47 | } 48 | else if (this.parentNode.lastElementChild === this) { 49 | flipBox.showBack(); 50 | } 51 | } 52 | } 53 | 54 | var BrickFlipboxElementPrototype = Object.create(HTMLElement.prototype); 55 | 56 | BrickFlipboxElementPrototype.attachedCallback = function () { 57 | 58 | var importDoc = currentScript.ownerDocument; 59 | var template = importDoc.querySelector('#brick-flipbox-template'); 60 | 61 | // fix styling for polyfill 62 | if (Platform.ShadowCSS) { 63 | var styles = template.content.querySelectorAll('style'); 64 | for (var i = 0; i < styles.length; i++) { 65 | var style = styles[i]; 66 | var cssText = Platform.ShadowCSS.shimStyle(style, 'brick-flipbox'); 67 | Platform.ShadowCSS.addCssToDocument(cssText); 68 | style.remove(); 69 | } 70 | } 71 | 72 | // create shadowRoot and append template to it. 73 | var shadowRoot = this.createShadowRoot(); 74 | shadowRoot.appendChild(template.content.cloneNode(true)); 75 | 76 | // reveal a side when reveal a reveal event is triggered on it. 77 | this.revealEventHandler = delegate("x-flipbox > *", reveal); 78 | this.addEventListener("reveal", this.revealEventHandler); 79 | 80 | // default to right. 81 | var direction = this.getAttribute('direction') || 'right'; 82 | this.direction = direction; 83 | // instantiate sides without initial flip animation 84 | if (this.firstElementChild) { 85 | skipTransition(this.firstElementChild, function () {}); 86 | // fire an flipend Event when the transition ended. 87 | // only on the first child do avoid firing twice 88 | this.transitionendEventHandler = function(e) { 89 | var flipBox = e.target.parentNode; 90 | var event = new CustomEvent('flipend', {'bubbles': true}); 91 | flipBox.dispatchEvent(event); 92 | e.stopPropagation(); 93 | }; 94 | this.firstElementChild.addEventListener('transitionend', this.transitionendEventHandler); 95 | } 96 | if (this.lastElementChild) { 97 | skipTransition(this.lastElementChild, function () {}); 98 | } 99 | }; 100 | 101 | BrickFlipboxElementPrototype.detachedCallback = function () { 102 | // cleanup event listeners 103 | this.removeEventListener('reveal',this.revealEventHandler); 104 | if (this.firstElementChild && this.transitionendEventHandler) { 105 | this.firstElementChild.removeEventListener('transitionend',this.transitionendEventHandler); 106 | } 107 | }; 108 | 109 | BrickFlipboxElementPrototype.attributeChangedCallback = function (attr, oldVal, newVal) { 110 | if (attr in attrs) { 111 | attrs[attr].call(this, oldVal, newVal); 112 | } 113 | }; 114 | 115 | // Attribute handlers 116 | var attrs = { 117 | 'direction': function (oldVal, newVal) { 118 | // Use the setter to update the _anim-direction as well. 119 | this.direction = newVal; 120 | } 121 | }; 122 | 123 | // Custom methods 124 | BrickFlipboxElementPrototype.toggle = function() { 125 | var newFlippedState = !this.hasAttribute('flipped'); 126 | if (newFlippedState) { 127 | this.setAttribute('flipped',''); 128 | } else { 129 | this.removeAttribute('flipped'); 130 | } 131 | }; 132 | 133 | BrickFlipboxElementPrototype.showFront = function() { 134 | this.removeAttribute('flipped'); 135 | }; 136 | 137 | BrickFlipboxElementPrototype.showBack = function() { 138 | this.setAttribute ('flipped',''); 139 | }; 140 | 141 | // Property handlers 142 | Object.defineProperties(BrickFlipboxElementPrototype, { 143 | 144 | 'flipped': { 145 | // The flipped state is only represented in the flipped attribute. 146 | get: function() { 147 | return this.hasAttribute('flipped'); 148 | }, 149 | set: function(newVal) { 150 | if (newVal) { 151 | this.setAttribute('flipped', newVal); 152 | } else { 153 | this.removeAttribute('flipped'); 154 | } 155 | } 156 | }, 157 | 158 | 'direction': { 159 | get: function() { 160 | return this.getAttribute('direction'); 161 | }, 162 | set: function(newVal) { 163 | var self = this; 164 | // update the attribute if needed. 165 | if (self.setAttribute !== newVal) { 166 | self.setAttribute('direction', newVal); 167 | } 168 | // do skipTransition before setting the direction 169 | // with bot sides if we have sides. 170 | if (self.firstElementChild) { 171 | skipTransition(this.firstElementChild, function () { 172 | self.setAttribute('_anim-direction', newVal); 173 | }); 174 | skipTransition(this.lastElementChild, function () {}); 175 | } else { 176 | self.setAttribute('_anim-direction', newVal); 177 | } 178 | } 179 | } 180 | 181 | }); 182 | 183 | // Register the element 184 | if (!window.BrickFlipboxElement) { 185 | window.BrickFlipboxElement = document.registerElement('brick-flipbox', { 186 | prototype: BrickFlipboxElementPrototype 187 | }); 188 | } 189 | 190 | })(); 191 | -------------------------------------------------------------------------------- /dist/brick-form/dist/brick-form.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /dist/brick-form/dist/brick-form.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | var BrickFormElementPrototype = Object.create(HTMLElement.prototype); 3 | 4 | BrickFormElementPrototype.attachedCallback = function () { 5 | var self = this; 6 | 7 | // wrap everuthing inside a form 8 | self.form = document.createElement('form'); 9 | 10 | var children = Array.prototype.slice.call(self.childNodes); 11 | for (var i = 0; i < children.length; i++) { 12 | self.form.appendChild(children[i]); 13 | } 14 | self.appendChild(self.form); 15 | 16 | if (self.autosave) { 17 | self.form.addEventListener("change", function(){ 18 | self.saveFormData(); 19 | }); 20 | } 21 | 22 | self.form.addEventListener("submit", function(e){ 23 | e.preventDefault(); 24 | self.saveFormData(); 25 | }); 26 | 27 | self.loadFormData(); 28 | }; 29 | 30 | BrickFormElementPrototype.attributeChangedCallback = function (attr, oldVal, newVal) { 31 | if (attr === 'name') { 32 | if (newVal) { 33 | this.loadFormData(); 34 | } 35 | } 36 | }; 37 | 38 | BrickFormElementPrototype.loadFormData = function () { 39 | var self = this; 40 | if (!self.name) { 41 | return; 42 | } 43 | self.storage.get(self.name).then(function(data){ 44 | for (var i = 0; i < self.elements.length; i++) { 45 | var element = self.elements[i]; 46 | if (element.name) { 47 | var val = data ? data[element.name] || "" : ""; 48 | if (element.type === "checkbox") { 49 | element.checked = !!val; 50 | } else { 51 | element.value = val; 52 | } 53 | } 54 | } 55 | }); 56 | }; 57 | 58 | BrickFormElementPrototype.saveFormData = function () { 59 | var self = this; 60 | var data = {}; 61 | if (!self.name) { 62 | return; 63 | } 64 | data[self.keyname] = self.name; 65 | for (var i = 0; i < self.elements.length; i++) { 66 | var input = self.elements[i]; 67 | if (input.name) { 68 | var key = input.name; 69 | var value = input.value; 70 | if (input.type === "checkbox") { 71 | value = input.checked; 72 | } 73 | data[key] = value; 74 | } 75 | } 76 | return self.storage.set(data); 77 | }; 78 | 79 | // Property handlers 80 | Object.defineProperties(BrickFormElementPrototype, { 81 | 'name': { 82 | get: function () { 83 | return this.getAttribute("name"); 84 | }, 85 | set: function (newVal) { 86 | this.setAttribute("name", newVal); 87 | } 88 | }, 89 | 'autosave': { 90 | get: function () { 91 | return this.hasAttribute("autosave"); 92 | }, 93 | set: function (newVal) { 94 | if (newVal) { 95 | this.setAttribute("autosave", newVal); 96 | } else { 97 | this.removeAttribute("autosave"); 98 | } 99 | } 100 | }, 101 | 'storage': { 102 | get: function () { 103 | return document.getElementById(this.getAttribute("storage")); 104 | } 105 | }, 106 | 'elements': { 107 | get: function() { 108 | return this.querySelectorAll("input, select, textarea"); 109 | } 110 | }, 111 | 'keyname': { 112 | get: function() { 113 | return this.storage.getAttribute("keyname"); 114 | } 115 | } 116 | }); 117 | 118 | // Register the element 119 | if (!window.BrickFormElement) { 120 | window.BrickFormElement = document.registerElement('brick-form', { 121 | prototype: BrickFormElementPrototype 122 | }); 123 | } 124 | 125 | })(); 126 | -------------------------------------------------------------------------------- /dist/brick-input/dist/brick-input.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 125 | 126 | 127 | -------------------------------------------------------------------------------- /dist/brick-input/dist/brick-input.js: -------------------------------------------------------------------------------- 1 | /* globals Platform */ 2 | 3 | (function() { 4 | 5 | var currentScript = document._currentScript || document.currentScript; 6 | 7 | function shimShadowStyles(styles, tag) { 8 | if (!Platform.ShadowCSS) { 9 | return; 10 | } 11 | for (var i = 0; i < styles.length; i++) { 12 | var style = styles[i]; 13 | var cssText = Platform.ShadowCSS.shimStyle(style, tag); 14 | Platform.ShadowCSS.addCssToDocument(cssText); 15 | style.remove(); 16 | } 17 | } 18 | 19 | function copyAttributes(src, dest, exceptions) { 20 | var attrs = src.attributes; 21 | for (var i = 0; i < attrs.length; i++) { 22 | var attr = src.attributes[i]; 23 | if (exceptions.indexOf(attr.name) === -1) { 24 | dest.setAttribute(attr.name, attr.value); 25 | } 26 | } 27 | } 28 | 29 | function addListener(arr, el, event, handler, capture) { 30 | el.addEventListener(event, handler, capture); 31 | arr.push([el, event, handler, capture]); 32 | } 33 | function removeListener(el, event, handler, capture) { 34 | el.removeEventListener(event, handler, capture); 35 | } 36 | 37 | 38 | var BrickInputElementPrototype = Object.create(HTMLElement.prototype); 39 | 40 | BrickInputElementPrototype.createdCallback = function () { 41 | 42 | }; 43 | 44 | BrickInputElementPrototype.attachedCallback = function () { 45 | var brickInput = this; 46 | brickInput.listeners = []; 47 | 48 | // import template 49 | var importDoc = currentScript.ownerDocument; 50 | var templateContent = importDoc.querySelector('#brick-input-template').content; 51 | 52 | // fix styling for polyfill 53 | shimShadowStyles(templateContent.querySelectorAll('style'), 'brick-input'); 54 | 55 | // create shadowRoot and append template 56 | var shadowRoot = brickInput.createShadowRoot(); 57 | shadowRoot.appendChild(templateContent.cloneNode(true)); 58 | 59 | // get the input 60 | if (brickInput.hasAttribute('multiline')) { 61 | brickInput.input = document.createElement('textarea'); 62 | } else { 63 | brickInput.input = document.createElement('input'); 64 | } 65 | copyAttributes(brickInput,brickInput.input,['label', 'multiline']); 66 | brickInput.appendChild(brickInput.input); 67 | var inputChangeListener = function () { 68 | if(!brickInput.input.checkValidity()) { 69 | brickInput.setAttribute('invalid', ''); 70 | } else { 71 | brickInput.removeAttribute('invalid'); 72 | } 73 | }; 74 | addListener(brickInput.listeners, brickInput, 'change', inputChangeListener); 75 | 76 | // setup label 77 | var placeholderText = brickInput.getAttribute('placeholder'); 78 | var labelText = brickInput.getAttribute('label'); 79 | if (labelText) { 80 | var label = shadowRoot.querySelector('.label'); 81 | label.appendChild(document.createTextNode(labelText)); 82 | } 83 | var ariaLabel = labelText || placeholderText; 84 | if (ariaLabel) { 85 | brickInput.input.setAttribute('aria-label', labelText); 86 | } 87 | 88 | // setup error message 89 | var errorText = brickInput.getAttribute('error'); 90 | if (errorText) { 91 | var error = shadowRoot.querySelector('.error'); 92 | error.appendChild(document.createTextNode(errorText)); 93 | } 94 | 95 | // setup clear button and listen to it 96 | var clearButton = shadowRoot.querySelector('.clear'); 97 | brickInput.clearing = false; 98 | clearButton.addEventListener('click', function () { 99 | brickInput.input.value = ''; 100 | brickInput.input.focus(); 101 | }); 102 | var clearMouseDownListener = function () { 103 | brickInput.clearing = true; 104 | }; 105 | addListener(brickInput.listeners, clearButton, 'mousedown', clearMouseDownListener); 106 | var clearMouseUpListener = function () { 107 | brickInput.clearing = false; 108 | }; 109 | addListener(brickInput.listeners, clearButton, 'mouseup', clearMouseUpListener); 110 | 111 | // listen to focus and blur 112 | var focusListener = function () { 113 | brickInput.setAttribute('focus', ''); 114 | }; 115 | addListener(brickInput.listeners, brickInput.input, 'focus', focusListener); 116 | var blurListener =function () { 117 | if (!brickInput.clearing) { 118 | brickInput.removeAttribute('focus'); 119 | } 120 | }; 121 | addListener(brickInput.listeners, brickInput.input, 'blur', blurListener); 122 | }; 123 | 124 | BrickInputElementPrototype.detachedCallback = function () { 125 | // clean up listeners 126 | while(this.listeners.length) { 127 | removeListener.apply(this, this.listeners.shift()); 128 | } 129 | }; 130 | 131 | BrickInputElementPrototype.attributeChangedCallback = function (attr, oldVal, newVal) { 132 | if (attr in attrs) { 133 | attrs[attr].call(this, oldVal, newVal); 134 | } 135 | }; 136 | 137 | // Attribute handlers 138 | var attrs = { 139 | 140 | }; 141 | 142 | // Property handlers 143 | Object.defineProperties(BrickInputElementPrototype, { 144 | 145 | }); 146 | 147 | // Register the element 148 | if (!window.BrickInputElement) { 149 | window.BrickInputElement = document.registerElement('brick-input', { 150 | prototype: BrickInputElementPrototype 151 | }); 152 | } 153 | 154 | })(); 155 | -------------------------------------------------------------------------------- /dist/brick-layout/dist/brick-layout.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 538 | 539 | 540 | -------------------------------------------------------------------------------- /dist/brick-layout/dist/brick-layout.js: -------------------------------------------------------------------------------- 1 | /* global Platform */ 2 | 3 | (function () { 4 | 5 | var currentScript = document._currentScript || document.currentScript; 6 | 7 | var BrickLayoutElementPrototype = Object.create(HTMLElement.prototype); 8 | 9 | BrickLayoutElementPrototype.openDrawer = function() { 10 | this.setAttribute("open",""); 11 | }; 12 | BrickLayoutElementPrototype.closeDrawer = function() { 13 | this.removeAttribute("open"); 14 | }; 15 | BrickLayoutElementPrototype.toggleDrawer = function() { 16 | if (this.hasAttribute("open")) { 17 | this.removeAttribute("open"); 18 | } else { 19 | this.setAttribute("open",""); 20 | } 21 | }; 22 | 23 | BrickLayoutElementPrototype.attachedCallback = function() { 24 | var importDoc = currentScript.ownerDocument; 25 | var template = importDoc.querySelector('#brick-layout-template'); 26 | 27 | // fix styling for polyfill 28 | if (Platform.ShadowCSS) { 29 | var styles = template.content.querySelectorAll('style'); 30 | for (var i = 0; i < styles.length; i++) { 31 | var style = styles[i]; 32 | var cssText = Platform.ShadowCSS.shimStyle(style, 'brick-layout'); 33 | Platform.ShadowCSS.addCssToDocument(cssText); 34 | style.remove(); 35 | } 36 | } 37 | 38 | // create shadowRoot and append template to it. 39 | var shadowRoot = this.createShadowRoot(); 40 | shadowRoot.appendChild(template.content.cloneNode(true)); 41 | }; 42 | if (!window.BrickLayoutElement) { 43 | window.BrickLayoutElement = document.registerElement('brick-layout', { 44 | prototype: BrickLayoutElementPrototype 45 | }); 46 | } 47 | 48 | })(); 49 | -------------------------------------------------------------------------------- /dist/brick-listview/dist/brick-listview.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 68 | 69 | 70 | -------------------------------------------------------------------------------- /dist/brick-listview/dist/brick-listview.js: -------------------------------------------------------------------------------- 1 | /* global Platform, Promise*/ 2 | 3 | (function () { 4 | 5 | var SCROLL_TIMEOUT = 100; 6 | 7 | var currentScript = document._currentScript || document.currentScript; 8 | 9 | var requestAnimationFrame = window.requestAnimationFrame || 10 | window.mozRequestAnimationFrame || 11 | window.webkitRequestAnimationFrame || 12 | window.msRequestAnimationFrame || 13 | function (fn) { setTimeout(fn, 16); }; 14 | 15 | var cancelAnimationFrame = window.cancelAnimationFrame || 16 | window.mozCancelAnimationFrame || 17 | window.webkitCancelAnimationFrame || 18 | window.msCancelAnimationFrame || 19 | function () {}; 20 | 21 | var webComponentsReady = new Promise(function (resolve) { 22 | window.addEventListener('WebComponentsReady', resolve); 23 | }); 24 | 25 | function ArrayAdapter(array) { 26 | 27 | this.array = array; 28 | 29 | this.size = function () { 30 | return Promise.resolve(array.length); 31 | }; 32 | 33 | this.getMany = function (options) { 34 | options = options || {}; 35 | var start = options.offset || 0; 36 | var end = options.count ? options.count + start + 1: undefined; 37 | return Promise.resolve(array.slice(start, end)); 38 | }; 39 | 40 | } 41 | 42 | function shimShadowStyles(styles, tag) { 43 | if (!Platform.ShadowCSS) { 44 | return; 45 | } 46 | for (var i = 0; i < styles.length; i++) { 47 | var style = styles[i]; 48 | var cssText = Platform.ShadowCSS.shimStyle(style, tag); 49 | Platform.ShadowCSS.addCssToDocument(cssText); 50 | style.remove(); 51 | } 52 | } 53 | 54 | function computeMetrics(listview) { 55 | listview.ns.numItemsVisible = (listview.offsetHeight / listview.ns.height|0) + 1; 56 | } 57 | 58 | function init(listview) { 59 | var ns = listview.ns; 60 | var data = ns.data; 61 | if (!data) { 62 | return Promise.resolve(listview); 63 | } 64 | // create a hidden item to measure its height 65 | ns.list.innerHTML = '
test
'; 66 | return data.size().then(function (numItems) { 67 | // A list of created, not-in-use DOM nodes 68 | ns.deadPool = []; 69 | // Object key to use for display label; 70 | ns.labelKey = listview.getAttribute('label'); 71 | ns.imageKey = listview.getAttribute('image'); 72 | ns.detailKey = listview.getAttribute('detail'); 73 | // The indexes of the items currently rendered 74 | ns.visibleItems = []; 75 | // A lookup cache by index of items from ns.data 76 | ns.items = {}; 77 | ns.numItems = numItems; 78 | // A list of open requests for ranges of data 79 | ns.rangeRequests = []; 80 | ns.height = listview.querySelector('.sentinel').offsetHeight; 81 | // Set the height of the scrolling strip 82 | ns.list.style.height = ns.height * (numItems) + 'px'; 83 | return listview; 84 | }); 85 | } 86 | 87 | function defaultRenderer(el, row, listview) { 88 | el.innerHTML = ""; 89 | var labelKey = listview.ns.labelKey; 90 | var imageKey = listview.ns.imageKey; 91 | var detailKey = listview.ns.detailKey; 92 | 93 | // the image 94 | if (imageKey) { 95 | var img = document.createElement('img'); 96 | img.src = row[listview.getAttribute(imageKey)]; 97 | el.appendChild(img); 98 | } 99 | 100 | // the content 101 | var content = document.createElement('div'); 102 | content.classList.add('content'); 103 | 104 | if (labelKey) { 105 | var label = document.createElement('div'); 106 | label.textContent = row[labelKey]; 107 | content.appendChild(label); 108 | } 109 | if (detailKey) { 110 | var detail = document.createElement('div'); 111 | detail.textContent = row[detailKey]; 112 | content.appendChild(detail); 113 | } 114 | if (content.hasChildNodes()) { 115 | el.appendChild(content); 116 | } 117 | } 118 | 119 | function placeItem(listview, i) { 120 | var div; 121 | var deadPool = listview.ns.deadPool; 122 | if (deadPool.length) { 123 | div = deadPool.pop(); 124 | div.innerHTML = ''; 125 | } else { 126 | div = document.createElement('div'); 127 | div.classList.add('item'); 128 | } 129 | // place the element along the scroll strip. 130 | div.style.transform = 'translateY(' + i * 100 + '%)'; 131 | div.style.webkitTransform = 'translateY(' + i * 100 + '%)'; 132 | return div; 133 | } 134 | 135 | function stopScrolling(listview) { 136 | listview.classList.remove('scrolling'); 137 | } 138 | 139 | function renderItems(min, rows) { 140 | var listview = this; 141 | var ns = listview.ns; 142 | var items = ns.items; 143 | for (var i = 0; i < rows.length; i++) { 144 | if (items[i+min]) { 145 | items[i+min].__item__ = rows[i]; 146 | renderItem(items[i+min], rows[i], listview); 147 | } 148 | } 149 | } 150 | 151 | function renderItem(el, row, listview) { 152 | defaultRenderer(el, row, listview); 153 | } 154 | 155 | function removeReq(requests, min, max) { 156 | for (var i = 0; i < requests.length; i++) { 157 | var req = requests[i]; 158 | if (req.min === min && req.max === max) { 159 | requests.splice(i, 1); 160 | i--; 161 | } 162 | } 163 | } 164 | 165 | function fetchRange(listview, min, max) { 166 | var rangeRequests = listview.ns.rangeRequests; 167 | var realMin = min; 168 | var realMax = max; 169 | var data = listview.ns.data; 170 | 171 | rangeRequests.forEach(function (range) { 172 | if ((range.max > realMin && range.max < realMax) !== (range.min > realMin && range.min < realMax)) { 173 | if (range.max >= realMin && range.max < realMax) { 174 | realMin = range.max + 1; 175 | } 176 | if (range.min <= realMax && range.min > realMin) { 177 | realMax = range.min - 1; 178 | } 179 | } 180 | }); 181 | var req = data.getMany({offset: realMin, count: realMax-realMin+1}); 182 | 183 | rangeRequests.push({ 184 | min: realMin, 185 | max: realMax, 186 | request: req 187 | }); 188 | 189 | req.then(function (rows) { 190 | renderItems.call(listview, realMin, rows); 191 | }); 192 | 193 | req.then(function () { 194 | removeReq(rangeRequests, realMin, realMax); 195 | },function () { 196 | removeReq(rangeRequests, realMin, realMax); 197 | }); 198 | } 199 | 200 | function render(listview) { 201 | var ns = listview.ns; 202 | ns.skippedFrames = 0; 203 | var itemWindow = ns.numItemsVisible; 204 | if (!itemWindow) { 205 | computeMetrics(listview); 206 | itemWindow = ns.numItemsVisible; 207 | } 208 | var list = ns.list; 209 | var items = ns.items; 210 | var visibleItems = ns.visibleItems || []; 211 | var deadPool = ns.deadPool; 212 | var height = ns.height; 213 | var min = Math.max((listview.scrollTop / height|0) - itemWindow * 2, 0); 214 | var max = Math.min((listview.scrollTop / height|0) + itemWindow * 3, ns.numItems-1); 215 | 216 | var realMin = Infinity; 217 | var realMax = -Infinity; 218 | var numToFetch = 0; 219 | 220 | // is this item already rendered? 221 | for (var i = min; i <= max; i++) { 222 | if (!items[i]) { 223 | 224 | numToFetch++; 225 | 226 | // if not, create a new item and position it 227 | var newEl = placeItem(listview, i); 228 | items[i] = newEl; 229 | visibleItems.push(i); 230 | if (!newEl.parentNode) { 231 | list.appendChild(newEl); 232 | } 233 | 234 | // adjust the range of data we need to fetch 235 | realMin = Math.min(i, realMin); 236 | realMax = Math.max(i, realMax); 237 | } 238 | } 239 | 240 | // do we need to fetch data? 241 | if (numToFetch > 0) { 242 | fetchRange(listview, realMin, realMax); 243 | } 244 | 245 | for (i = 0; i < visibleItems.length; i++) { 246 | var idx = visibleItems[i]; 247 | if (idx < min || idx > max) { 248 | deadPool.push(items[idx]); 249 | visibleItems.splice(i,1); 250 | delete items[idx]; 251 | i--; 252 | } 253 | } 254 | } 255 | 256 | function scroll(listview) { 257 | if (!listview.ns.data) { 258 | return; 259 | } 260 | 261 | var ns = listview.ns; 262 | 263 | if (!ns.numItems) { 264 | return; 265 | } 266 | 267 | if (!ns.scrolling) { 268 | listview.classList.add('scrolling'); 269 | ns.scrolling = true; 270 | } 271 | if (ns.scrollTimeout) { 272 | clearTimeout(ns.scrollTimeout); 273 | } 274 | ns.scrollTimeout = setTimeout(function () { 275 | ns.scrolling = false; 276 | stopScrolling(listview); 277 | }, SCROLL_TIMEOUT); 278 | 279 | if (ns.nextFrame) { 280 | ns.skippedFrames = ns.skippedFrames + 1; 281 | cancelAnimationFrame(ns.nextFrame); 282 | ns.nextFrame = null; 283 | } 284 | ns.nextFrame = requestAnimationFrame(function () { 285 | render(listview); 286 | }); 287 | } 288 | 289 | function clickHandler(e) { 290 | if ('__item__' in e.target) { 291 | var ev = new CustomEvent("select", {"detail": e.target.__item__}); 292 | this.dispatchEvent(ev); 293 | } 294 | } 295 | 296 | var ListViewPrototype = Object.create(HTMLElement.prototype); 297 | 298 | ListViewPrototype.createdCallback = function () { 299 | this.ns = {}; 300 | var list = document.createElement('div'); 301 | list.classList.add('list'); 302 | this.ns.list = list; 303 | this.appendChild(list); 304 | }; 305 | 306 | ListViewPrototype.attachedCallback = function () { 307 | var listview = this; 308 | 309 | webComponentsReady.then(function() { 310 | 311 | // get the storage 312 | var storage = listview.getAttribute('storage'); 313 | if (storage) { 314 | storage = document.getElementById(storage); 315 | if (storage) { 316 | listview.ns.data = storage; 317 | } 318 | } 319 | 320 | // import template 321 | var importDoc = currentScript.ownerDocument; 322 | var templateContent = importDoc.querySelector('#brick-listview-template').content; 323 | 324 | // fix styling for polyfill 325 | shimShadowStyles(templateContent.querySelectorAll('style'), 'brick-listview'); 326 | 327 | // create shadowRoot and append template 328 | var shadowRoot = listview.createShadowRoot(); 329 | shadowRoot.appendChild(templateContent.cloneNode(true)); 330 | 331 | // setup event handlers 332 | listview.ns.scrollHandler = listview.addEventListener('scroll', function() { 333 | scroll(listview); 334 | }); 335 | listview.ns.clickHandler = listview.addEventListener('click', clickHandler.bind(listview)); 336 | 337 | // render the list 338 | listview.render(); 339 | 340 | }); 341 | }; 342 | 343 | ListViewPrototype.detachedCallback = function () { 344 | var listview = this; 345 | listview.removeEventListener('scroll', listview.ns.scrollHandler); 346 | listview.removeEventListener('click', listview.ns.clickHandler); 347 | }; 348 | 349 | var attrs = { 350 | 'storage': function (oldVal, newVal) { 351 | this.ns.storage = document.getElementById(newVal); 352 | this.render(); 353 | }, 354 | 'label': function () { 355 | this.render(); 356 | }, 357 | 'detail': function () { 358 | this.render(); 359 | }, 360 | 'image': function () { 361 | this.render(); 362 | } 363 | }; 364 | 365 | ListViewPrototype.attributeChangedCallback = function (attr, oldVal, newVal) { 366 | if (attr in attrs) { 367 | attrs[attr].call(this, oldVal, newVal); 368 | } 369 | }; 370 | 371 | ListViewPrototype.render = function () { 372 | init(this).then(render); 373 | }; 374 | 375 | Object.defineProperties (ListViewPrototype, { 376 | 'data': { 377 | get: function () { 378 | // return either the array or the store 379 | return this.ns.data.array || this.ns.data; 380 | }, 381 | set: function (newVal) { 382 | if (Array.isArray(newVal)) { 383 | this.ns.data = new ArrayAdapter(newVal); 384 | } else { 385 | this.ns.data = newVal; 386 | } 387 | this.render(); 388 | } 389 | } 390 | }); 391 | 392 | window.BrickListViewElement = document.registerElement('brick-listview', { 393 | prototype: ListViewPrototype 394 | }); 395 | 396 | })(); 397 | -------------------------------------------------------------------------------- /dist/brick-menu/dist/brick-menu.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 334 | 335 | 336 | -------------------------------------------------------------------------------- /dist/brick-menu/dist/brick-menu.js: -------------------------------------------------------------------------------- 1 | /* globals Platform */ 2 | 3 | (function () { 4 | 5 | var currentScript = document._currentScript || document.currentScript; 6 | 7 | var BrickMenuElementPrototype = Object.create(HTMLElement.prototype); 8 | 9 | BrickMenuElementPrototype.attachedCallback = function() { 10 | 11 | var importDoc = currentScript.ownerDocument; 12 | var template = importDoc.querySelector('#brick-menu-template'); 13 | 14 | // fix styling for polyfill 15 | if (Platform.ShadowCSS) { 16 | var styles = template.content.querySelectorAll('style'); 17 | for (var i = 0; i < styles.length; i++) { 18 | var style = styles[i]; 19 | var cssText = Platform.ShadowCSS.shimStyle(style, 'brick-menu'); 20 | Platform.ShadowCSS.addCssToDocument(cssText); 21 | style.remove(); 22 | } 23 | } 24 | 25 | // create shadowRoot and append template to it. 26 | var shadowRoot = this.createShadowRoot(); 27 | shadowRoot.appendChild(template.content.cloneNode(true)); 28 | 29 | }; 30 | 31 | // Register the element 32 | if (!window.BrickMenuElement) { 33 | window.BrickMenuElement = document.registerElement('brick-menu', { 34 | prototype: BrickMenuElementPrototype 35 | }); 36 | } 37 | 38 | })(); 39 | -------------------------------------------------------------------------------- /dist/brick-storage-indexeddb/dist/brick-storage-indexeddb.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /dist/brick-storage-indexeddb/dist/brick-storage-indexeddb.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | 3 | var KEYVALUE_API_VERSION = 1; 4 | 5 | var indexedDB = window.indexedDB || 6 | window.mozIndexedDB || 7 | window.webkitIndexedDB || 8 | window.msIndexedDB; 9 | 10 | var IDBKeyRange = window.IDBKeyRange || 11 | window.webkitIDBKeyRange || 12 | window.msIDBKeyRange; 13 | 14 | function wrap(req) { 15 | return new Promise(function (resolve, reject) { 16 | req.onsuccess = function () { 17 | resolve(req.result); 18 | }; 19 | req.onerror = function (e) { 20 | // prevent the transaction from being aborted 21 | // on a constraint error 22 | e.preventDefault(); 23 | reject(req.error); 24 | }; 25 | }); 26 | } 27 | 28 | function IndexedDbStore(storeName, key, indices) { 29 | 30 | var self = this; 31 | self._ready = false; 32 | self.storeName = storeName; 33 | self.indices = indices; 34 | if (key) { 35 | self.key = key; 36 | self.autoIncrement = false; 37 | } else { 38 | self.key = "id"; 39 | self.autoIncrement = true; 40 | } 41 | 42 | self.ready = new Promise(function (resolve, reject) { 43 | if (!indexedDB) { 44 | reject('No indexedDB implementation found!'); 45 | } 46 | var req = indexedDB.open(self.storeName, KEYVALUE_API_VERSION); 47 | req.onerror = function () { 48 | reject(req.error); 49 | }; 50 | req.onsuccess = function () { 51 | self.db = req.result; 52 | resolve(self); 53 | }; 54 | req.onupgradeneeded = function () { 55 | self.db = req.result; 56 | var store = self.db.createObjectStore(self.storeName, { keyPath: self.key, autoIncrement: self.autoIncrement }); 57 | // create indices 58 | for (var i = 0; i < self.indices.length; i++) { 59 | store.createIndex(self.indices[i], self.indices[i]); 60 | } 61 | }; 62 | req.onerror = reject; 63 | }); 64 | 65 | self.ready.then(function() { 66 | self._ready = true; 67 | }); 68 | } 69 | 70 | IndexedDbStore.prototype = { 71 | 72 | // Internal function: returns the objectStore with the supplied 73 | // transaction mode. Defaults to readonly transaction. 74 | _getTransactionAndStore: function(mode) { 75 | var self = this; 76 | mode = typeof mode !== 'undefined' ? mode : 'readonly'; 77 | var tx = self.db.transaction(self.storeName, mode); 78 | var store = tx.objectStore(self.storeName); 79 | return {'transaction': tx, 'store': store}; 80 | }, 81 | 82 | // Internal function to defer the execution of a supplied function 83 | // until the database is ready. 84 | _awaitReady: function(fn, args) { 85 | var self = this; 86 | if (self._ready) { 87 | return fn.apply(self, args); 88 | } else { 89 | return self.ready.then(function() { 90 | return fn.apply(self, args); 91 | }); 92 | } 93 | }, 94 | 95 | /** 96 | * Save an object into the database 97 | * @param {object} object 98 | * @return {promise} Promise for the id/key to which 99 | * it was saved 100 | */ 101 | insert: function (object) { 102 | var self = this; 103 | return self._awaitReady(self._insert, arguments); 104 | }, 105 | _insert: function (object) { 106 | var self = this; 107 | var db = self._getTransactionAndStore('readwrite'); 108 | var promise = wrap(db.store.add(object)); 109 | promise.abort = function(){ 110 | db.transaction.abort(); 111 | }; 112 | return promise; 113 | }, 114 | 115 | /** 116 | * Update or insert an Object at the given id/key. 117 | * @param {number} id 118 | * @param {string|number|object} object 119 | * @return {promise} Promise for the id/key of 120 | * the created object 121 | */ 122 | set: function (object) { 123 | var self = this; 124 | return self._awaitReady(self._set, arguments); 125 | }, 126 | _set: function (object) { 127 | var self = this; 128 | var db = self._getTransactionAndStore('readwrite'); 129 | var promise = wrap(db.store.put(object)); 130 | promise.abort = function(){ 131 | db.transaction.abort(); 132 | }; 133 | return promise; 134 | }, 135 | 136 | /** 137 | * Update or insert multiple objects into the database 138 | * @param {objects} objects 139 | * @return {promise} 140 | */ 141 | setMany: function (objects) { 142 | var self = this; 143 | return self._awaitReady(self._setMany, arguments); 144 | }, 145 | _setMany: function (objects) { 146 | var self = this; 147 | var db = self._getTransactionAndStore('readwrite'); 148 | var promises = []; 149 | for (var i = 0; i < objects.length; i++) { 150 | promises.push(db.store.put(objects[i])); 151 | } 152 | var promise = Promise.all(promises); 153 | promise.abort = function(){ 154 | db.transaction.abort(); 155 | }; 156 | return promise; 157 | }, 158 | 159 | /** 160 | * Get the object saved at a given id/key. 161 | * @param {number|string} key 162 | * @return {promise} Promise for the object 163 | */ 164 | get: function (key) { 165 | var self = this; 166 | return self._awaitReady(self._get, arguments); 167 | }, 168 | _get: function (key) { 169 | var self = this; 170 | var db = self._getTransactionAndStore(); 171 | var promise = wrap(db.store.get(key)); 172 | promise.abort = function(){ 173 | db.transaction.abort(); 174 | }; 175 | return promise; 176 | }, 177 | 178 | /** 179 | * Removes the the entry with the supplied id/key from the database. 180 | * @param {number|string} key 181 | * @return {promise} Promise for undefined 182 | */ 183 | remove: function (key) { 184 | var self = this; 185 | return self._awaitReady(self._remove, arguments); 186 | }, 187 | _remove: function (key) { 188 | var self = this; 189 | var db = self._getTransactionAndStore('readwrite'); 190 | var promise = wrap(db.store.delete(key)); 191 | promise.abort = function(){ 192 | db.transaction.abort(); 193 | }; 194 | return promise; 195 | }, 196 | 197 | /** 198 | * Returns multiple database entries. 199 | * @param {options} 200 | * {any} start The first id of the results. 201 | * {any} end The last id of the results. 202 | * {number} count The number of results. 203 | * {number} offset The offset of the first result. 204 | * {string} orderby The key by which the results will be ordered. 205 | * {boolean} reverse Reverse the order of the results. 206 | * use [start] with ([end] or/and [count]) 207 | * use [offset] with ([end] or/and [count]) 208 | * using [end] together with [count] the results stop at whatever comes first. 209 | * @return {promise} Promise for the objects 210 | */ 211 | getMany: function(options) { 212 | var self = this; 213 | return self._awaitReady(self._getMany, arguments); 214 | }, 215 | _getMany: function(options) { 216 | options = options || {}; 217 | var self = this; 218 | var db = self._getTransactionAndStore(); 219 | var counter = 0; 220 | var start = options.start; 221 | var end = options.end; 222 | var count = options.count || undefined; 223 | var offset = options.offset || 0; 224 | var advance = offset === 0 ? false : true; 225 | var direction = options.reverse ? 'prev' : 'next'; 226 | var orderby = options.orderby; 227 | 228 | // set bound based on options 229 | var bound; 230 | if (start && end) { 231 | bound = IDBKeyRange.bound(start,end); 232 | } else if (start) { 233 | bound = IDBKeyRange.lowerBound(start); 234 | } else if (end) { 235 | bound = IDBKeyRange.upperBound(end); 236 | } else { 237 | bound = null; 238 | } 239 | var allItems = []; 240 | var promise = new Promise(function(resolve,reject){ 241 | var cursorRequest; 242 | if (!orderby || orderby === self.key) { 243 | cursorRequest = db.store.openCursor(bound, direction); 244 | } else { 245 | var index = db.store.index(orderby); 246 | cursorRequest = index.openCursor(bound, direction); 247 | } 248 | cursorRequest.onsuccess = function(e){ 249 | var cursor = e.target.result; 250 | // if we reached the end of the items or as many items as 251 | // requested with the counter, resolve with the result array. 252 | if (!cursor || (counter !== undefined && counter >= count)) { 253 | resolve(allItems); 254 | } else { 255 | // if we no offset is specified or we skipped ahead 256 | // already, add the item to the results. 257 | // else advance the cursor by the offset. 258 | if (!advance) { 259 | allItems.push(cursor.value); 260 | counter++; 261 | cursor.continue(); 262 | } else { 263 | advance = false; 264 | cursor.advance(offset); 265 | } 266 | } 267 | }; 268 | }); 269 | promise.abort = function(){ 270 | db.transaction.abort(); 271 | }; 272 | return promise; 273 | }, 274 | 275 | /** 276 | * Returns the number of database entries. 277 | * @return {promise} Promise for the size. 278 | */ 279 | size: function() { 280 | var self = this; 281 | return self._awaitReady(self._size); 282 | }, 283 | _size: function() { 284 | var self = this; 285 | var db = self._getTransactionAndStore(); 286 | var promise = wrap(db.store.count()); 287 | promise.abort = function(){ 288 | db.transaction.abort(); 289 | }; 290 | return promise; 291 | }, 292 | 293 | /** 294 | * Deletes all database entries. 295 | * @return {promise} Promise for undefined. 296 | */ 297 | clear: function () { 298 | var self = this; 299 | return self._awaitReady(self._clear); 300 | }, 301 | _clear: function() { 302 | var self = this; 303 | var db = self._getTransactionAndStore('readwrite'); 304 | var promise = wrap(db.store.clear()); 305 | promise.abort = function(){ 306 | db.transaction.abort(); 307 | }; 308 | return promise; 309 | } 310 | }; 311 | 312 | window.IndexedDbStore = IndexedDbStore; 313 | 314 | })(); 315 | ; 316 | /* global IndexedDbStore */ 317 | 318 | (function () { 319 | 320 | var BrickStorageIndexeddbElementPrototype = Object.create(HTMLElement.prototype); 321 | 322 | BrickStorageIndexeddbElementPrototype.attachedCallback = function () { 323 | this.name = this.getAttribute('name') || 'storage'; 324 | this.keyname = this.getAttribute('keyname') || null; 325 | this.indexnames = this.getAttribute('indexname') ? this.getAttribute('indexname').split(" ") : []; 326 | this.storage = new IndexedDbStore(this.name, this.keyname, this.indexnames); 327 | }; 328 | 329 | BrickStorageIndexeddbElementPrototype.insert = function (object) { 330 | return this.storage.insert(object); 331 | }; 332 | BrickStorageIndexeddbElementPrototype.set = function (object) { 333 | return this.storage.set(object); 334 | }; 335 | BrickStorageIndexeddbElementPrototype.setMany = function (objects) { 336 | return this.storage.setMany(objects); 337 | }; 338 | BrickStorageIndexeddbElementPrototype.get = function (key) { 339 | return this.storage.get(key); 340 | }; 341 | BrickStorageIndexeddbElementPrototype.remove = function (key) { 342 | return this.storage.remove(key); 343 | }; 344 | BrickStorageIndexeddbElementPrototype.getMany = function (options) { 345 | return this.storage.getMany(options); 346 | }; 347 | BrickStorageIndexeddbElementPrototype.size = function () { 348 | return this.storage.size(); 349 | }; 350 | BrickStorageIndexeddbElementPrototype.clear = function () { 351 | return this.storage.clear(); 352 | }; 353 | 354 | // Register the element 355 | window.BrickStorageIndexeddbElement = document.registerElement('brick-storage-indexeddb', { 356 | prototype: BrickStorageIndexeddbElementPrototype 357 | }); 358 | 359 | })(); 360 | -------------------------------------------------------------------------------- /dist/brick-tabbar/dist/brick-tabbar.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 380 | 381 | 382 | 383 | -------------------------------------------------------------------------------- /dist/brick-tabbar/dist/brick-tabbar.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | 3 | function _onTapbarTabClick(tabEl) { 4 | if (tabEl.parentNode.nodeName.toLowerCase() === 'brick-tabbar') { 5 | var targetEvent = tabEl.targetEvent; 6 | var target = tabEl.targetElement; 7 | if (target) { 8 | target.dispatchEvent(new CustomEvent(targetEvent, {'bubbles': true})); 9 | } 10 | } 11 | } 12 | 13 | var BrickTabbarTabElementPrototype = Object.create(HTMLElement.prototype); 14 | 15 | BrickTabbarTabElementPrototype.attachedCallback = function() { 16 | this.addEventListener('click', function(e) { 17 | var tabEl = e.currentTarget; 18 | _onTapbarTabClick(tabEl); 19 | }); 20 | this.addEventListener('select', function(e) { 21 | var tabEl = e.currentTarget; 22 | _onTapbarTabClick(tabEl); 23 | }); 24 | }; 25 | 26 | BrickTabbarTabElementPrototype.select = function() { 27 | this.dispatchEvent(new CustomEvent('select', { 28 | 'bubbles': true 29 | })); 30 | }; 31 | 32 | Object.defineProperties(BrickTabbarTabElementPrototype, { 33 | 'target': { 34 | get: function() { 35 | return this.getAttribute('target'); 36 | }, 37 | set: function(newVal) { 38 | this.setAttribute('target', newVal); 39 | } 40 | }, 41 | 'targetEvent': { 42 | get: function() { 43 | if (this.hasAttribute('target-event')) { 44 | return this.getAttribute('target-event'); 45 | } else if (this.parentNode.nodeName.toLowerCase() === 'brick-tabbar') { 46 | return this.parentNode.targetEvent; 47 | } else { 48 | throw 'tabbar-tab is missing event to fire'; 49 | } 50 | }, 51 | set: function(newVal) { 52 | this.setAttribute('target-event', newVal); 53 | } 54 | }, 55 | 'targetElement': { 56 | get: function() { 57 | if (this.overrideElement) { 58 | return this.overrideElement; 59 | } else { 60 | return document.getElementById(this.target); 61 | } 62 | }, 63 | set: function(newVal) { 64 | this.overrideElement = newVal; 65 | this.removeAttribute('target'); 66 | } 67 | } 68 | }); 69 | 70 | if (!window.BrickTabbarTabElement) { 71 | window.BrickTabbarTabElement = document.registerElement('brick-tabbar-tab', { 72 | prototype: BrickTabbarTabElementPrototype 73 | }); 74 | } 75 | 76 | })(); 77 | ; 78 | /* global Platform */ 79 | 80 | (function () { 81 | 82 | var currentScript = document._currentScript || document.currentScript; 83 | 84 | function delegate(selector, handler) { 85 | return function(e) { 86 | var target = e.target; 87 | var delegateEl = e.currentTarget; 88 | var matches = delegateEl.querySelectorAll(selector); 89 | for (var el = target; el.parentNode && el !== delegateEl; el = el.parentNode) { 90 | for (var i = 0; i < matches.length; i++) { 91 | if (matches[i] === el) { 92 | handler.call(el, e); 93 | return; 94 | } 95 | } 96 | } 97 | }; 98 | } 99 | 100 | function _selectTab(tabEl) { 101 | var tabbar = tabEl.parentNode; 102 | var activeTab = tabbar.querySelectorAll('brick-tabbar-tab[selected]'); 103 | for (var i = 0; i < activeTab.length; i++) { 104 | activeTab[i].removeAttribute('selected'); 105 | } 106 | tabEl.setAttribute('selected', true); 107 | 108 | // move the indicator 109 | var index = tabbar.tabs.indexOf(tabEl); 110 | var indicator = tabbar.selectedIndicator; 111 | 112 | if (tabbar.hasAttribute('vertical')) { 113 | tabbar.selectedIndicator.style.height = 100 / tabbar.tabs.length + '%'; 114 | indicator.style.webkitTransform = 'translateY(' + 100 * index + '%)'; 115 | indicator.style.transform = 'translateY(' + 100 * index + '%)'; 116 | } else { 117 | tabbar.selectedIndicator.style.width = 100 / tabbar.tabs.length + '%'; 118 | indicator.style.webkitTransform = 'translateX(' + 100 * index + '%)'; 119 | indicator.style.transform = 'translateX(' + 100 * index + '%)'; 120 | } 121 | } 122 | 123 | var BrickTabbarElementPrototype = Object.create(HTMLElement.prototype); 124 | 125 | BrickTabbarElementPrototype.attachedCallback = function() { 126 | 127 | var importDoc = currentScript.ownerDocument; 128 | var template = importDoc.querySelector('#brick-tabbar-template'); 129 | 130 | // fix styling for polyfill 131 | if (Platform.ShadowCSS) { 132 | var styles = template.content.querySelectorAll('style'); 133 | for (var i = 0; i < styles.length; i++) { 134 | var style = styles[i]; 135 | var cssText = Platform.ShadowCSS.shimStyle(style, 'brick-tabbar'); 136 | Platform.ShadowCSS.addCssToDocument(cssText); 137 | style.remove(); 138 | } 139 | } 140 | 141 | // create shadowRoot and append template to it. 142 | var shadowRoot = this.createShadowRoot(); 143 | shadowRoot.appendChild(template.content.cloneNode(true)); 144 | 145 | // listen to click and select events 146 | this.selectedIndicator = shadowRoot.querySelector('.selected-indicator'); 147 | this.selectHandler = delegate('brick-tabbar-tab', function(){ 148 | _selectTab(this); 149 | }); 150 | this.addEventListener('click', this.selectHandler); 151 | this.addEventListener('select', this.selectHandler); 152 | 153 | // initially set the selected tab, 154 | // if none has the attribute [selected] 155 | // then select the first one 156 | var tabEl = this.selectedTab; 157 | if (tabEl) { 158 | _selectTab(tabEl); 159 | } else { 160 | var firstTab = this.querySelector('brick-tabbar-tab'); 161 | if (firstTab) { 162 | firstTab.dispatchEvent(new CustomEvent('select', { 163 | 'bubbles': true 164 | })); 165 | } 166 | } 167 | 168 | // check for new tabs being added and call selectTab() again, 169 | // to correct the size of the indicator 170 | var observer = new MutationObserver(function(mutations) { 171 | mutations.forEach(function(mutation) { 172 | var tabbar = mutation.target; 173 | if (mutation.type === "childList") { 174 | _selectTab(tabbar.selectedTab); 175 | } 176 | }); 177 | }); 178 | observer.observe(this, { childList: true }); 179 | }; 180 | 181 | BrickTabbarElementPrototype.detachedCallback = function() { 182 | this.removeEventListener('click', this.selectHandler); 183 | this.removeEventListener('select', this.selectHandler); 184 | }; 185 | 186 | Object.defineProperties(BrickTabbarElementPrototype, { 187 | 'targetEvent': { 188 | get: function() { 189 | return this.getAttribute('target-event') || 'reveal'; 190 | }, 191 | set: function(newVal) { 192 | this.setAttribute('target-event', newVal); 193 | } 194 | }, 195 | 'tabs': { 196 | get: function() { 197 | var tabList = this.querySelectorAll('brick-tabbar-tab'); 198 | return Array.prototype.slice.call(tabList); 199 | } 200 | }, 201 | 'selectedTab': { 202 | get: function() { 203 | return this.querySelector('brick-tabbar-tab[selected]'); 204 | } 205 | } 206 | }); 207 | 208 | if (!window.BrickTabbarElement) { 209 | window.BrickTabbarElement = document.registerElement('brick-tabbar', { 210 | prototype: BrickTabbarElementPrototype 211 | }); 212 | } 213 | 214 | })(); 215 | -------------------------------------------------------------------------------- /dist/brick.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /dist/es6-promise/promise.js: -------------------------------------------------------------------------------- 1 | (function() { 2 | var define, requireModule, require, requirejs; 3 | 4 | (function() { 5 | var registry = {}, seen = {}; 6 | 7 | define = function(name, deps, callback) { 8 | registry[name] = { deps: deps, callback: callback }; 9 | }; 10 | 11 | requirejs = require = requireModule = function(name) { 12 | requirejs._eak_seen = registry; 13 | 14 | if (seen[name]) { return seen[name]; } 15 | seen[name] = {}; 16 | 17 | if (!registry[name]) { 18 | throw new Error("Could not find module " + name); 19 | } 20 | 21 | var mod = registry[name], 22 | deps = mod.deps, 23 | callback = mod.callback, 24 | reified = [], 25 | exports; 26 | 27 | for (var i=0, l=deps.length; i\n\n '); 16 | var head = $('head'); 17 | files.forEach(function (file) { 18 | if (path.basename(file.path) === 'platform.js') { 19 | return; 20 | } 21 | var ext = path.extname(file.path); 22 | var fp = path.relative(file.base, file.path); 23 | switch (ext) { 24 | case '.css': 25 | head.append('\n '); 26 | break; 27 | case '.js': 28 | head.append('\n '); 29 | break; 30 | case '.html': 31 | head.append('\n '); 32 | break; 33 | } 34 | }); 35 | head.append('\n'); 36 | this.push(new util.File({ 37 | path: 'brick.html', 38 | base: '', 39 | contents: new Buffer($.html()) 40 | })); 41 | this.emit('end'); 42 | }); 43 | 44 | return stream; 45 | }; 46 | -------------------------------------------------------------------------------- /tasks/imports.js: -------------------------------------------------------------------------------- 1 | var cheerio = require('cheerio'); 2 | var es = require('event-stream'); 3 | var fs = require('fs'); 4 | var path = require('path'); 5 | var Promise = require('es6-promise').Promise; 6 | var transform = require('stream').Transform; 7 | var util = require('gulp-util'); 8 | 9 | module.exports = function () { 10 | 11 | var stream = new transform({ objectMode: true }); 12 | stream._transform = function(file, unused, done) { 13 | var f2 = new util.File({ 14 | cwd: file.cwd, 15 | base: file.base, 16 | path: file.path, 17 | contents: file.contents 18 | }); 19 | stream.push(f2); 20 | 21 | if (path.extname(file.path) === '.html') { 22 | crawl(file).then(function (files) { 23 | files.forEach(function (f) { 24 | stream.push(f); 25 | }); 26 | done(); 27 | }, done); 28 | } else { 29 | done(); 30 | } 31 | }; 32 | 33 | return stream; 34 | }; 35 | 36 | function getFile(path, base) { 37 | return new Promise(function (resolve, reject) { 38 | fs.readFile(path, function (error, contents) { 39 | if (error) { 40 | reject(error); 41 | return; 42 | } 43 | resolve(new util.File({ 44 | base: 'bower_components', 45 | path: path, 46 | contents: contents 47 | })); 48 | }); 49 | }); 50 | } 51 | 52 | // Returns a list of Vinyl File objects crawled. 53 | function crawl(file, cb) { 54 | return new Promise(function (resolve, reject) { 55 | var files = []; 56 | fs.readFile(file.path, function (error, contents) { 57 | if (error) { 58 | console.warn('could not locate file: ', file.path); 59 | reject(); 60 | return; 61 | } 62 | var $ = cheerio.load(contents); 63 | var scripts = $('script'); 64 | var styles = $('link[rel=stylesheet]'); 65 | var imports = $('link[rel=import]'); 66 | var importPromises = []; 67 | var baseDir = path.dirname(file.path); 68 | for (i = 0; i < scripts.length; i++) { 69 | importPromises.push(getFile(path.join(baseDir, scripts.eq(i).attr('src')),baseDir)); 70 | } 71 | for (i = 0; i < styles.length; i++) { 72 | importPromises.push(getFile(path.join(baseDir, styles.eq(i).attr('href')),baseDir)); 73 | } 74 | // for (i = 0; i < imports.length; i++) { 75 | // importPromises.push(crawl(path.join(baseDir, styles.eq(i).attr('href')))); 76 | // } 77 | resolve(Promise.all(importPromises).then(function (result) { 78 | return result; 79 | })); 80 | }); 81 | }); 82 | } -------------------------------------------------------------------------------- /test/smoke.js: -------------------------------------------------------------------------------- 1 | mocha.setup('bdd'); 2 | 3 | var ready; 4 | var expect = chai.expect; 5 | 6 | before(function (done) { 7 | ready = done; 8 | }); 9 | 10 | window.addEventListener('WebComponentsReady', function() { 11 | 12 | ready(); 13 | 14 | }); 15 | 16 | describe("The distribution", function (){ 17 | 18 | it("should work at all", function () { 19 | expect(document.registerElement).to.exist; 20 | }); 21 | 22 | it("should offer Promises", function () { 23 | expect(window.Promise).to.exist; 24 | }); 25 | 26 | it("should initialize components", function () { 27 | expect(window.BrickActionElement).to.exist; 28 | expect(window.BrickAppbarElement).to.exist; 29 | expect(window.BrickButtonElement).to.exist; 30 | expect(window.BrickCalendar).to.exist; 31 | expect(window.BrickCardElement).to.exist; 32 | expect(window.BrickDeckElement).to.exist; 33 | expect(window.BrickDialogElement).to.exist; 34 | expect(window.BrickFlipboxElement).to.exist; 35 | expect(window.BrickFormElement).to.exist; 36 | expect(window.BrickInputElement).to.exist; 37 | expect(window.BrickLayoutElement).to.exist; 38 | expect(window.BrickListViewElement).to.exist; 39 | expect(window.BrickMenuElement).to.exist; 40 | expect(window.BrickStorageIndexeddbElement).to.exist; 41 | expect(window.BrickTabbarTabElement).to.exist; 42 | expect(window.BrickTabbarElement).to.exist; 43 | }); 44 | 45 | }); 46 | --------------------------------------------------------------------------------