Commit e134e53665735a897015767f56cd246e760dfd32
1 parent
e61ed14e
updates
Showing
177 changed files
with
1093 additions
and
20 deletions
Too many changes.
To preserve performance only 100 of 177 files are displayed.
bower.json
| 1 | -{ | |
| 2 | - "name": "COMPONENT", | |
| 3 | - "version": "1.0.0", | |
| 4 | - "authors": [ | |
| 5 | - "Luigi Serra" | |
| 6 | - ], | |
| 7 | - "description": "Datalet and Controllet repository", | |
| 8 | - "license": "MIT", | |
| 9 | - "ignore": [ | |
| 10 | - "**/.*", | |
| 11 | - "node_modules", | |
| 12 | - "bower_components", | |
| 13 | - "test", | |
| 14 | - "tests" | |
| 15 | - ], | |
| 16 | - "dependencies": { | |
| 17 | - "polymer": "Polymer/polymer#^1.0.0", | |
| 18 | - "google-map": "GoogleWebComponents/google-map#^1.0.0" | |
| 19 | - } | |
| 20 | -} | |
| 1 | +{ | |
| 2 | + "name": "COMPONENT", | |
| 3 | + "version": "1.0.0", | |
| 4 | + "authors": [ | |
| 5 | + "Luigi Serra" | |
| 6 | + ], | |
| 7 | + "description": "Datalet and Controllet repository", | |
| 8 | + "license": "MIT", | |
| 9 | + "ignore": [ | |
| 10 | + "**/.*", | |
| 11 | + "node_modules", | |
| 12 | + "bower_components", | |
| 13 | + "test", | |
| 14 | + "tests" | |
| 15 | + ], | |
| 16 | + "dependencies": { | |
| 17 | + "google-map": "GoogleWebComponents/google-map#^1.0.0", | |
| 18 | + "paper-fab-transitions": "~0.1.0", | |
| 19 | + "polymer": "Polymer/polymer#^1.0.0" | |
| 20 | + } | |
| 21 | +} | ... | ... |
bower_components/paper-fab-transitions/.bower.json
0 → 100644
| 1 | +{ | |
| 2 | + "name": "paper-fab-transitions", | |
| 3 | + "version": "0.1.0", | |
| 4 | + "homepage": "https://github.com/GabiAxel/paper-fab-transitions", | |
| 5 | + "authors": [ | |
| 6 | + "Gabriel Axel" | |
| 7 | + ], | |
| 8 | + "main": "paper-fab-transitions.html", | |
| 9 | + "description": "Polymer components for adding morphing and speed dial transitions to floating action buttons", | |
| 10 | + "keywords": [ | |
| 11 | + "web-components", | |
| 12 | + "polymer", | |
| 13 | + "fab", | |
| 14 | + "floating action button", | |
| 15 | + "morph", | |
| 16 | + "speed dial" | |
| 17 | + ], | |
| 18 | + "license": "MIT", | |
| 19 | + "repository": { | |
| 20 | + "type": "git", | |
| 21 | + "url": "git://github.com/GabiAxel/paper-fab-transitions.git" | |
| 22 | + }, | |
| 23 | + "dependencies": { | |
| 24 | + "polymer": "^1.1.0", | |
| 25 | + "iron-dropdown": "PolymerElements/iron-dropdown#^1.0.0", | |
| 26 | + "neon-animation": "PolymerElements/neon-animation#^1.0.0" | |
| 27 | + }, | |
| 28 | + "devDependencies": { | |
| 29 | + "iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0", | |
| 30 | + "iron-component-page": "polymerelements/iron-component-page#^1.0.0", | |
| 31 | + "test-fixture": "polymerelements/test-fixture#^1.0.0", | |
| 32 | + "iron-test-helpers": "polymerelements/iron-test-helpers#^1.0.0", | |
| 33 | + "paper-fab": "PolymerElements/paper-fab#^1.0.0", | |
| 34 | + "iron-icons": "PolymerElements/iron-icons#^1.0.0", | |
| 35 | + "paper-menu": "PolymerElements/paper-menu#^1.0.0", | |
| 36 | + "paper-item": "PolymerElements/paper-item#^1.0.0", | |
| 37 | + "paper-toolbar": "PolymerElements/paper-toolbar#^1.0.0", | |
| 38 | + "paper-dialog": "PolymerElements/paper-dialog#^1.0.0", | |
| 39 | + "paper-button": "PolymerElements/paper-button#^1.0.0", | |
| 40 | + "paper-card": "PolymerElements/paper-card#^1.0.0", | |
| 41 | + "web-component-tester": "*" | |
| 42 | + }, | |
| 43 | + "_release": "0.1.0", | |
| 44 | + "_resolution": { | |
| 45 | + "type": "version", | |
| 46 | + "tag": "0.1.0", | |
| 47 | + "commit": "82a9d70b450437362dedbf302bb23d8bb3998fde" | |
| 48 | + }, | |
| 49 | + "_source": "git://github.com/GabiAxel/paper-fab-transitions.git", | |
| 50 | + "_target": "~0.1.0", | |
| 51 | + "_originalSource": "paper-fab-transitions", | |
| 52 | + "_direct": true | |
| 53 | +} | |
| 0 | 54 | \ No newline at end of file | ... | ... |
bower_components/paper-fab-transitions/.gitignore
0 → 100644
| 1 | +bower_components | ... | ... |
bower_components/paper-fab-transitions/LICENSE
0 → 100644
| 1 | +Copyright (c) 2015 Gabriel Axel | |
| 2 | + | |
| 3 | +Permission is hereby granted, free of charge, to any person | |
| 4 | +obtaining a copy of this software and associated documentation | |
| 5 | +files (the "Software"), to deal in the Software without | |
| 6 | +restriction, including without limitation the rights to use, | |
| 7 | +copy, modify, merge, publish, distribute, sublicense, and/or sell | |
| 8 | +copies of the Software, and to permit persons to whom the | |
| 9 | +Software is furnished to do so, subject to the following | |
| 10 | +conditions: | |
| 11 | + | |
| 12 | +The above copyright notice and this permission notice shall be | |
| 13 | +included in all copies or substantial portions of the Software. | |
| 14 | + | |
| 15 | +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, | |
| 16 | +EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES | |
| 17 | +OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND | |
| 18 | +NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT | |
| 19 | +HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, | |
| 20 | +WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING | |
| 21 | +FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR | |
| 22 | +OTHER DEALINGS IN THE SOFTWARE. | ... | ... |
bower_components/paper-fab-transitions/README.md
0 → 100644
| 1 | +paper-fab-transitions | |
| 2 | +===================== | |
| 3 | + | |
| 4 | +Polymer elements for adding morphing and speed dial transitions to floating | |
| 5 | +action buttons as defined by Material Design specifications. | |
| 6 | + | |
| 7 | +## Install | |
| 8 | +``` | |
| 9 | +bower install paper-fab-transitions --save | |
| 10 | +``` | |
| 11 | + | |
| 12 | +## Usage | |
| 13 | + | |
| 14 | +### Morphing | |
| 15 | + | |
| 16 | +Add morphing transition from a fab with the class `dropdown-trigger` to an element with the class `dropdown-content`: | |
| 17 | + | |
| 18 | +```html | |
| 19 | +<link rel="import" href="bower_components/paper-fab-transitions/paper-fab-morph.html"> | |
| 20 | + | |
| 21 | +<paper-fab-morph> | |
| 22 | + <paper-fab icon="menu" class="dropdown-trigger"> | |
| 23 | + <paper-material class="dropdown-content"> | |
| 24 | + <paper-menu> | |
| 25 | + <paper-item>One</paper-item> | |
| 26 | + <paper-item>Two</paper-item> | |
| 27 | + </paper-menu> | |
| 28 | + </paper-mterial> | |
| 29 | +</paper-fab-morph> | |
| 30 | +``` | |
| 31 | + | |
| 32 | +### Speed Dial | |
| 33 | + | |
| 34 | +When tapping a fab with the class `dropdown-trigger`, open a speed dial menu with the class `dropdown-content`: | |
| 35 | + | |
| 36 | +```html | |
| 37 | +<link rel="import" href="bower_components/paper-fab-transitions/paper-fab-speed-dial.html"> | |
| 38 | + | |
| 39 | +<paper-fab-speed-dial> | |
| 40 | + <paper-fab icon="add" class="dropdown-trigger"></paper-fab> | |
| 41 | + <div class="dropdown-content"> | |
| 42 | + <paper-fab mini icon="star-border"></paper-fab> | |
| 43 | + <paper-fab mini icon="star-half"></paper-fab> | |
| 44 | + <paper-fab mini icon="star"></paper-fab> | |
| 45 | + </div> | |
| 46 | +</paper-fab-speed-dial> | |
| 47 | +``` | |
| 48 | + | |
| 49 | +[Documentation](http://gabiaxel.github.io/paper-fab-transitions/components/paper-fab-transitions/) | |
| 50 | + | |
| 51 | +[Demo](http://gabiaxel.github.io/paper-fab-transitions/components/paper-fab-transitions/demo/) | |
| 52 | + | |
| 53 | +[Material Design specifications](https://www.google.com/design/spec/components/buttons-floating-action-button.html#buttons-floating-action-button-transitions) | ... | ... |
bower_components/paper-fab-transitions/bower.json
0 → 100644
| 1 | +{ | |
| 2 | + "name": "paper-fab-transitions", | |
| 3 | + "version": "0.1.0", | |
| 4 | + "homepage": "https://github.com/GabiAxel/paper-fab-transitions", | |
| 5 | + "authors": [ | |
| 6 | + "Gabriel Axel" | |
| 7 | + ], | |
| 8 | + "main": "paper-fab-transitions.html", | |
| 9 | + "description": "Polymer components for adding morphing and speed dial transitions to floating action buttons", | |
| 10 | + "keywords": [ | |
| 11 | + "web-components", | |
| 12 | + "polymer", | |
| 13 | + "fab", | |
| 14 | + "floating action button", | |
| 15 | + "morph", | |
| 16 | + "speed dial" | |
| 17 | + ], | |
| 18 | + "license": "MIT", | |
| 19 | + "repository": { | |
| 20 | + "type": "git", | |
| 21 | + "url": "git://github.com/GabiAxel/paper-fab-transitions.git" | |
| 22 | + }, | |
| 23 | + "dependencies": { | |
| 24 | + "polymer": "^1.1.0", | |
| 25 | + "iron-dropdown": "PolymerElements/iron-dropdown#^1.0.0", | |
| 26 | + "neon-animation": "PolymerElements/neon-animation#^1.0.0" | |
| 27 | + }, | |
| 28 | + "devDependencies": { | |
| 29 | + "iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0", | |
| 30 | + "iron-component-page": "polymerelements/iron-component-page#^1.0.0", | |
| 31 | + "test-fixture": "polymerelements/test-fixture#^1.0.0", | |
| 32 | + "iron-test-helpers": "polymerelements/iron-test-helpers#^1.0.0", | |
| 33 | + "paper-fab": "PolymerElements/paper-fab#^1.0.0", | |
| 34 | + "iron-icons": "PolymerElements/iron-icons#^1.0.0", | |
| 35 | + "paper-menu": "PolymerElements/paper-menu#^1.0.0", | |
| 36 | + "paper-item": "PolymerElements/paper-item#^1.0.0", | |
| 37 | + "paper-toolbar": "PolymerElements/paper-toolbar#^1.0.0", | |
| 38 | + "paper-dialog": "PolymerElements/paper-dialog#^1.0.0", | |
| 39 | + "paper-button": "PolymerElements/paper-button#^1.0.0", | |
| 40 | + "paper-card": "PolymerElements/paper-card#^1.0.0", | |
| 41 | + "web-component-tester": "*" | |
| 42 | + } | |
| 43 | +} | ... | ... |
bower_components/paper-fab-transitions/demo/images/grumpycat.jpg
0 → 100644
1.33 KB
bower_components/paper-fab-transitions/demo/images/lilbub.jpg
0 → 100644
3.47 KB
bower_components/paper-fab-transitions/demo/images/maru.jpg
0 → 100644
2.35 KB
bower_components/paper-fab-transitions/demo/index.html
0 → 100644
| 1 | +<!DOCTYPE html> | |
| 2 | +<html> | |
| 3 | + <head> | |
| 4 | + <meta charset="utf-8"> | |
| 5 | + <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| 6 | + <script> | |
| 7 | + window.Polymer = { | |
| 8 | + dom: 'shadow' | |
| 9 | + }; | |
| 10 | + </script> | |
| 11 | + <script src="../../webcomponentsjs/webcomponents-lite.min.js"></script> | |
| 12 | + <link rel="import" href="../../paper-styles/demo-pages.html"> | |
| 13 | + <link rel="import" href="../../paper-styles/color.html"> | |
| 14 | + <link rel="import" href="../../paper-fab/paper-fab.html"> | |
| 15 | + <link rel="import" href="../../iron-icons/iron-icons.html"> | |
| 16 | + <link rel="import" href="../../iron-icons/communication-icons.html"> | |
| 17 | + <link rel="import" href="../../paper-menu/paper-menu.html"> | |
| 18 | + <link rel="import" href="../../paper-item/paper-item.html"> | |
| 19 | + <link rel="import" href="../../paper-toolbar/paper-toolbar.html"> | |
| 20 | + <link rel="import" href="../../paper-dialog/paper-dialog.html"> | |
| 21 | + <link rel="import" href="../../paper-button/paper-button.html"> | |
| 22 | + <link rel="import" href="../../paper-card/paper-card.html"> | |
| 23 | + <link rel="import" href="../../neon-animation/neon-animations.html"> | |
| 24 | + <link rel="import" href="../paper-fab-transitions.html"> | |
| 25 | + | |
| 26 | + <style is="custom-style"> | |
| 27 | + paper-card { | |
| 28 | + position: relative; | |
| 29 | + margin: 10px; | |
| 30 | + } | |
| 31 | + .card-content { | |
| 32 | + width: 300px; | |
| 33 | + height: 300px; | |
| 34 | + } | |
| 35 | + .top-left { | |
| 36 | + position: absolute; | |
| 37 | + top: 10px; | |
| 38 | + left: 10px; | |
| 39 | + } | |
| 40 | + .bottom-right { | |
| 41 | + position: absolute; | |
| 42 | + bottom: 10px; | |
| 43 | + right: 10px; | |
| 44 | + } | |
| 45 | + #show-toolbar { | |
| 46 | + /* In real cases it would make sense use fixed position for the element, | |
| 47 | + * and then no need to position --paper-morph-dropdown and --paper-morph-content | |
| 48 | + */ | |
| 49 | + --paper-morph-background: var(--default-primary-color); | |
| 50 | + --paper-morph-dropdown: { | |
| 51 | + position: static !important; /* didn't find alternative to !important for Safari */ | |
| 52 | + } | |
| 53 | + --paper-morph-content: { | |
| 54 | + position: absolute; | |
| 55 | + left: 0; | |
| 56 | + bottom: 0; | |
| 57 | + width: 100%; | |
| 58 | + overflow: visible; | |
| 59 | + } | |
| 60 | + } | |
| 61 | + #show-toolbar paper-fab { | |
| 62 | + position: absolute; | |
| 63 | + bottom: 10px; | |
| 64 | + right: 10px; | |
| 65 | + --paper-fab-background: var(--default-primary-color); | |
| 66 | + } | |
| 67 | + paper-dialog { | |
| 68 | + width: 200px; | |
| 69 | + height: 100px; | |
| 70 | + } | |
| 71 | + paper-fab.light-blue { | |
| 72 | + --paper-fab-background: var(--paper-light-blue-500); | |
| 73 | + } | |
| 74 | + paper-fab.blue { | |
| 75 | + --paper-fab-background: var(--paper-blue-500); | |
| 76 | + } | |
| 77 | + paper-fab.green { | |
| 78 | + --paper-fab-background: var(--paper-green-500); | |
| 79 | + } | |
| 80 | + paper-fab.teal { | |
| 81 | + --paper-fab-background: var(--paper-teal-500); | |
| 82 | + } | |
| 83 | + paper-fab.orange { | |
| 84 | + --paper-fab-background: var(--paper-orange-500); | |
| 85 | + } | |
| 86 | + paper-fab.red { | |
| 87 | + --paper-fab-background: var(--paper-red-500); | |
| 88 | + } | |
| 89 | + paper-fab.grumpycat { | |
| 90 | + --paper-fab: { | |
| 91 | + background-image: url('images/grumpycat.jpg'); | |
| 92 | + } | |
| 93 | + } | |
| 94 | + paper-fab.lilbub { | |
| 95 | + --paper-fab: { | |
| 96 | + background-image: url('images/lilbub.jpg'); | |
| 97 | + } | |
| 98 | + } | |
| 99 | + paper-fab.maru { | |
| 100 | + --paper-fab: { | |
| 101 | + background-image: url('images/maru.jpg'); | |
| 102 | + } | |
| 103 | + } | |
| 104 | + </style> | |
| 105 | + </head> | |
| 106 | + <body unresolved class="layout horizontal wrap"> | |
| 107 | + | |
| 108 | + <paper-card heading="Speed Dial"> | |
| 109 | + <div class="card-content"> | |
| 110 | + | |
| 111 | + <paper-fab-speed-dial class="top-left"> | |
| 112 | + <paper-fab icon="create" class="dropdown-trigger red"></paper-fab> | |
| 113 | + <div class="dropdown-content"> | |
| 114 | + <paper-fab mini icon="folder" class="orange"></paper-fab> | |
| 115 | + <paper-fab mini icon="description" class="blue"></paper-fab> | |
| 116 | + <paper-fab mini icon="event" class="teal"></paper-fab> | |
| 117 | + </div> | |
| 118 | + </paper-fab-speed-dial> | |
| 119 | + | |
| 120 | + <paper-fab-speed-dial direction="top" class="bottom-right"> | |
| 121 | + <paper-fab icon="communication:call" class="dropdown-trigger green"></paper-fab> | |
| 122 | + <div class="dropdown-content"> | |
| 123 | + <paper-fab mini class="grumpycat"></paper-fab> | |
| 124 | + <paper-fab mini class="lilbub"></paper-fab> | |
| 125 | + <paper-fab mini class="maru"></paper-fab> | |
| 126 | + </div> | |
| 127 | + </paper-fab-speed-dial> | |
| 128 | + | |
| 129 | + </div> | |
| 130 | + </paper-card> | |
| 131 | + | |
| 132 | + | |
| 133 | + <paper-card heading="Morph Positioned Dropdown"> | |
| 134 | + <div class="card-content"> | |
| 135 | + | |
| 136 | + <paper-fab-morph class="top-left"> | |
| 137 | + <paper-fab icon="add" class="dropdown-trigger light-blue"></paper-fab> | |
| 138 | + <paper-material class="dropdown-content"> | |
| 139 | + <paper-menu> | |
| 140 | + <paper-item>One</paper-item> | |
| 141 | + <paper-item>Two</paper-item> | |
| 142 | + <paper-item>Three</paper-item> | |
| 143 | + </paper-menu> | |
| 144 | + </paper-material> | |
| 145 | + </paper-fab-morph> | |
| 146 | + | |
| 147 | + <paper-fab-morph class="bottom-right" vertical-align="bottom" horizontal-align="right"> | |
| 148 | + <paper-fab icon="communication:chat-bubble" class="dropdown-trigger teal"></paper-fab> | |
| 149 | + <paper-material class="dropdown-content"> | |
| 150 | + <paper-menu> | |
| 151 | + <paper-item>One</paper-item> | |
| 152 | + <paper-item>Two</paper-item> | |
| 153 | + <paper-item>Three</paper-item> | |
| 154 | + </paper-menu> | |
| 155 | + </paper-material> | |
| 156 | + </paper-fab-morph> | |
| 157 | + | |
| 158 | + </div> | |
| 159 | + </paper-card> | |
| 160 | + | |
| 161 | + <paper-card heading="Morph Dialog and Toolbar"> | |
| 162 | + <div class="card-content"> | |
| 163 | + | |
| 164 | + <paper-fab-morph is-overlay-content class="top-left"> | |
| 165 | + <paper-fab icon="launch" class="dropdown-trigger"></paper-fab> | |
| 166 | + <paper-dialog class="dropdown-content"> | |
| 167 | + <h2>Example Dialog</h2> | |
| 168 | + | |
| 169 | + <div class="buttons"> | |
| 170 | + <paper-button dialog-dismiss>Close</paper-dialog> | |
| 171 | + </div> | |
| 172 | + </paper-dialog> | |
| 173 | + </paper-fab-morph> | |
| 174 | + | |
| 175 | + <paper-fab-morph id="show-toolbar" vertical-align="bottom" horizontal-align="right"> | |
| 176 | + <paper-fab icon="more-horiz" class="dropdown-trigger"></paper-fab> | |
| 177 | + <paper-toolbar class="dropdown-content"> | |
| 178 | + <iron-icon icon="create" class="flex"></iron-icon> | |
| 179 | + <iron-icon icon="attachment" class="flex"></iron-icon> | |
| 180 | + <iron-icon icon="build" class="flex"></iron-icon> | |
| 181 | + </paper-toolbar> | |
| 182 | + </paper-fab-morph> | |
| 183 | + | |
| 184 | + </div> | |
| 185 | + </paper-card> | |
| 186 | + | |
| 187 | + </body> | |
| 188 | +</html> | ... | ... |
bower_components/paper-fab-transitions/index.html
0 → 100644
| 1 | +<!doctype html> | |
| 2 | +<html> | |
| 3 | +<head> | |
| 4 | + | |
| 5 | + <meta charset="utf-8"> | |
| 6 | + <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| 7 | + | |
| 8 | + <script src="../webcomponentsjs/webcomponents-lite.js"></script> | |
| 9 | + <link rel="import" href="../iron-component-page/iron-component-page.html"> | |
| 10 | + | |
| 11 | +</head> | |
| 12 | +<body unresolved> | |
| 13 | + | |
| 14 | + <iron-component-page></iron-component-page> | |
| 15 | + | |
| 16 | +</body> | |
| 17 | +</html> | ... | ... |
bower_components/paper-fab-transitions/paper-fab-morph.html
0 → 100644
| 1 | +<link rel="import" href="../iron-dropdown/iron-dropdown.html"> | |
| 2 | + | |
| 3 | +<!-- | |
| 4 | +`paper-fab-morph` can be used to wrap a floating action button and another | |
| 5 | +element which is initially hidden, and when tapping the button, it will appear | |
| 6 | +as if the button is morphing into the other element, which appears in its place. | |
| 7 | + | |
| 8 | +This element expects its content to contain two children: one with the class | |
| 9 | +`dropdown-trigger` , which is initially visible and acts as the trigger, and | |
| 10 | +another one with the class `dropdown-content` , which will be hidden until the | |
| 11 | +trigger is tapped. | |
| 12 | + | |
| 13 | +Example: | |
| 14 | + | |
| 15 | + <paper-fab-morph> | |
| 16 | + <paper-fab icon="menu" class="dropdown-trigger"> | |
| 17 | + <paper-material class="dropdown-content"> | |
| 18 | + <paper-menu> | |
| 19 | + <paper-item>One</paper-item> | |
| 20 | + <paper-item>Two</paper-item> | |
| 21 | + </paper-menu> | |
| 22 | + </paper-mterial> | |
| 23 | + </paper-fab-morph> | |
| 24 | + | |
| 25 | +In the example above, the menu will be wrapped by an `iron-dropdown` element | |
| 26 | +and will be positioned relative to the button. Positioning can be modified by | |
| 27 | +setting the `horizontalAlign`, `verticalAlign`, `horizontalOffset` and | |
| 28 | +`verticalOffset` properties. | |
| 29 | + | |
| 30 | +Alternatively, it's possible to set content element with fixed position, which | |
| 31 | +nullifies the dropdown positioning. This is useful for morphing into toolbars | |
| 32 | +and full screen elements for example. | |
| 33 | + | |
| 34 | +It is also possible to use an element which implements overlay behavior as the | |
| 35 | +content, instead of having it wrapped with an `iron-dropdown`. In this case, the | |
| 36 | +`isOverlayContent` property should be set to true. | |
| 37 | + | |
| 38 | +Example: | |
| 39 | + | |
| 40 | + <paper-fab-morph is-overlay-content> | |
| 41 | + <paper-fab icon="create" class="dropdown-trigger"> | |
| 42 | + <paper-dialog class="dropdown-content"> | |
| 43 | + <div>Dialog</div> | |
| 44 | + <paper-dialog> | |
| 45 | + </paper-fab-morph> | |
| 46 | + | |
| 47 | +### Styling | |
| 48 | + | |
| 49 | +The following custom properties and mixins are also available for styling: | |
| 50 | + | |
| 51 | +Custom property | Description | Default | |
| 52 | +----------------|-------------|---------- | |
| 53 | +`--paper-morph-background` | Background color of the morphing element | `#fff` | |
| 54 | +`--paper-morph-dropdown` | Mixin applied to the `iron-dropdown` | `{}` | |
| 55 | +`--paper-morph-content` | Mixin applied to the dropdown's content | `{}` | |
| 56 | + | |
| 57 | +@hero hero.svg | |
| 58 | +@demo demo/index.html | |
| 59 | +--> | |
| 60 | + | |
| 61 | +<dom-module id="paper-fab-morph"> | |
| 62 | + <template> | |
| 63 | + <style> | |
| 64 | + iron-dropdown { | |
| 65 | + @apply(--paper-morph-dropdown); | |
| 66 | + } | |
| 67 | + .dropdown-content { | |
| 68 | + @apply(--paper-morph-content); | |
| 69 | + } | |
| 70 | + #morpher { | |
| 71 | + position: fixed; | |
| 72 | + display: none; | |
| 73 | + background-color: var(--paper-morph-background, #fff); | |
| 74 | + } | |
| 75 | + </style> | |
| 76 | + <content id="fabContainer" select=".dropdown-trigger"></content> | |
| 77 | + <content id="contentContainer" select=".dropdown-content"></content> | |
| 78 | + <paper-material id="morpher"></paper-material> | |
| 79 | + </template> | |
| 80 | +</dom-module> | |
| 81 | +<script> | |
| 82 | +(function(Polymer) { | |
| 83 | + Polymer({ | |
| 84 | + is: 'paper-fab-morph', | |
| 85 | + properties: { | |
| 86 | + /** | |
| 87 | + * Whether the content already has overlay behavior. | |
| 88 | + * If false, it will be wrapped by an iron-dropdown element, which can be | |
| 89 | + * configured with `horizontalAlign`, `verticalAlign`, `horizontalOffset` | |
| 90 | + * and `verticalOffset` properties. | |
| 91 | + */ | |
| 92 | + isOverlayContent: { | |
| 93 | + type: Boolean, | |
| 94 | + value: false | |
| 95 | + }, | |
| 96 | + /** | |
| 97 | + * The transition duration in milliseconds. | |
| 98 | + */ | |
| 99 | + duration: { | |
| 100 | + type: Number, | |
| 101 | + value: 200 | |
| 102 | + }, | |
| 103 | + /** | |
| 104 | + * The orientation against which to align the dropdown | |
| 105 | + * horizontally relative to the trigger button. | |
| 106 | + */ | |
| 107 | + horizontalAlign: { | |
| 108 | + type: String, | |
| 109 | + value: 'left', | |
| 110 | + reflectToAttribute: true | |
| 111 | + }, | |
| 112 | + | |
| 113 | + /** | |
| 114 | + * The orientation against which to align the dropdown | |
| 115 | + * vertically relative to the trigger button. | |
| 116 | + */ | |
| 117 | + verticalAlign: { | |
| 118 | + type: String, | |
| 119 | + value: 'top', | |
| 120 | + reflectToAttribute: true | |
| 121 | + }, | |
| 122 | + | |
| 123 | + /** | |
| 124 | + * A pixel value that will be added to the position calculated for the | |
| 125 | + * given `horizontalAlign`. Use a negative value to offset to the | |
| 126 | + * left, or a positive value to offset to the right. | |
| 127 | + */ | |
| 128 | + horizontalOffset: { | |
| 129 | + type: Number, | |
| 130 | + value: 0, | |
| 131 | + notify: true | |
| 132 | + }, | |
| 133 | + | |
| 134 | + /** | |
| 135 | + * A pixel value that will be added to the position calculated for the | |
| 136 | + * given `verticalAlign`. Use a negative value to offset towards the | |
| 137 | + * top, or a positive value to offset towards the bottom. | |
| 138 | + */ | |
| 139 | + verticalOffset: { | |
| 140 | + type: Number, | |
| 141 | + value: 0, | |
| 142 | + notify: true | |
| 143 | + } | |
| 144 | + }, | |
| 145 | + observers: [ | |
| 146 | + '_updateOverlayPosition(verticalAlign, horizontalAlign, verticalOffset, horizontalOffset)' | |
| 147 | + ], | |
| 148 | + ready: function() { | |
| 149 | + | |
| 150 | + this._fab = Polymer.dom(this.$.fabContainer).getDistributedNodes()[0]; | |
| 151 | + this._content = Polymer.dom(this.$.contentContainer).getDistributedNodes()[0]; | |
| 152 | + | |
| 153 | + if(this.isOverlayContent) { | |
| 154 | + | |
| 155 | + this._fab.addEventListener('tap', function() { | |
| 156 | + this._content.open(); | |
| 157 | + }.bind(this)); | |
| 158 | + | |
| 159 | + this._overlay = this._content; | |
| 160 | + | |
| 161 | + } else { | |
| 162 | + | |
| 163 | + var dropdown = document.createElement('iron-dropdown'); | |
| 164 | + | |
| 165 | + Polymer.dom(dropdown).appendChild(this._content); | |
| 166 | + Polymer.dom(this.root).appendChild(dropdown); | |
| 167 | + | |
| 168 | + this._overlay = dropdown; | |
| 169 | + this._dropdown = dropdown; | |
| 170 | + | |
| 171 | + this._fab.addEventListener('tap', function() { | |
| 172 | + this._dropdown.open(); | |
| 173 | + }.bind(this)); | |
| 174 | + | |
| 175 | + this._updateOverlayPosition(this.verticalAlign, this.horizontalAlign, this.verticalOffset, this.horizontalOffset); | |
| 176 | + } | |
| 177 | + | |
| 178 | + this._overlay.addEventListener('iron-overlay-opened', function() { | |
| 179 | + this._morphOpen(); | |
| 180 | + }.bind(this)); | |
| 181 | + | |
| 182 | + this._overlay.addEventListener('iron-overlay-closed', function() { | |
| 183 | + this._morphClose(); | |
| 184 | + }.bind(this)); | |
| 185 | + | |
| 186 | + }, | |
| 187 | + /** | |
| 188 | + * Show the content. | |
| 189 | + */ | |
| 190 | + open: function() { | |
| 191 | + this._overlay.open(); | |
| 192 | + }, | |
| 193 | + /** | |
| 194 | + * Hide the content. | |
| 195 | + */ | |
| 196 | + close: function() { | |
| 197 | + this._overlay.close(); | |
| 198 | + }, | |
| 199 | + _updateOverlayPosition: function(verticalAlign, horizontalAlign, verticalOffset, horizontalOffset) { | |
| 200 | + if(this._dropdown) { | |
| 201 | + var d = this._dropdown; | |
| 202 | + d.verticalAlign = verticalAlign; | |
| 203 | + d.horizontalAlign = horizontalAlign; | |
| 204 | + d.verticalOffset = verticalOffset; | |
| 205 | + d.horizontalOffset = horizontalOffset; | |
| 206 | + } | |
| 207 | + }, | |
| 208 | + _morphOpen: function() { | |
| 209 | + | |
| 210 | + var fab = this._fab; | |
| 211 | + var content = this._content; | |
| 212 | + | |
| 213 | + var fabRect = fab.getBoundingClientRect(); | |
| 214 | + var morpher = this.$.morpher; | |
| 215 | + var ms = morpher.style; | |
| 216 | + | |
| 217 | + ms.display = 'block'; | |
| 218 | + ms.top = fabRect.top + 'px'; | |
| 219 | + ms.left = fabRect.left + 'px'; | |
| 220 | + ms.width = fabRect.width + 'px'; | |
| 221 | + ms.height = fabRect.height + 'px'; | |
| 222 | + ms.borderRadius = '50%'; | |
| 223 | + ms.transitionDuration = this.duration + 'ms'; | |
| 224 | + | |
| 225 | + fab.style.visibility = 'hidden'; | |
| 226 | + content.style.visibility = 'hidden'; | |
| 227 | + | |
| 228 | + var contentRect = content.getBoundingClientRect(); | |
| 229 | + | |
| 230 | + ms.top = contentRect.top + 'px'; | |
| 231 | + ms.left = contentRect.left + 'px'; | |
| 232 | + ms.width = contentRect.width + 'px'; | |
| 233 | + ms.height = contentRect.height + 'px'; | |
| 234 | + ms.borderRadius = ''; | |
| 235 | + | |
| 236 | + this.async(function() { | |
| 237 | + morpher.style.display = 'none'; | |
| 238 | + content.style.visibility = 'visible'; | |
| 239 | + }, this.duration); | |
| 240 | + | |
| 241 | + }, | |
| 242 | + _morphClose: function() { | |
| 243 | + | |
| 244 | + var fab = this._fab; | |
| 245 | + var content = this._content; | |
| 246 | + | |
| 247 | + var contentRect = fab.getBoundingClientRect(); | |
| 248 | + var morpher = this.$.morpher; | |
| 249 | + var ms = morpher.style; | |
| 250 | + | |
| 251 | + morpher.style.display = 'block'; | |
| 252 | + | |
| 253 | + this.async(function() { | |
| 254 | + | |
| 255 | + var fabRect = fab.getBoundingClientRect(); | |
| 256 | + ms.top = fabRect.top + 'px'; | |
| 257 | + ms.left = fabRect.left + 'px'; | |
| 258 | + ms.width = fabRect.width + 'px'; | |
| 259 | + ms.height = fabRect.height + 'px'; | |
| 260 | + ms.borderRadius = '50%'; | |
| 261 | + | |
| 262 | + this.async(function() { | |
| 263 | + morpher.style.display = 'none'; | |
| 264 | + fab.style.visibility = 'visible'; | |
| 265 | + }, this.duration); | |
| 266 | + | |
| 267 | + }); | |
| 268 | + } | |
| 269 | + }); | |
| 270 | +})(Polymer); | |
| 271 | +</script> | ... | ... |
bower_components/paper-fab-transitions/paper-fab-speed-dial.html
0 → 100644
| 1 | +<link rel="import" href="../iron-flex-layout/classes/iron-flex-layout.html"> | |
| 2 | +<link rel="import" href="../iron-dropdown/iron-dropdown.html"> | |
| 3 | +<link rel="import" href="../neon-animation/neon-animations.html"> | |
| 4 | +<link rel="import" href="paper-square-grow-animation.html"> | |
| 5 | + | |
| 6 | +<!-- | |
| 7 | +`paper-fab-speed-dial` builds on `iron-dropdown` to allow showing a list of | |
| 8 | +speed dial actions when tapping on a floating action button. | |
| 9 | + | |
| 10 | +This element expects its content to contain two children: one with the class | |
| 11 | +`dropdown-trigger` , which is initially visible and acts as the trigger, and | |
| 12 | +another one with the class `dropdown-content` , which will be hidden until the | |
| 13 | +trigger is tapped, and will contain the speed dial option elements. | |
| 14 | + | |
| 15 | +Example: | |
| 16 | + | |
| 17 | + <paper-fab-speed-dial> | |
| 18 | + <paper-fab icon="add" class="dropdown-trigger"></paper-fab> | |
| 19 | + <div class="dropdown-content"> | |
| 20 | + <paper-fab mini icon="star-border"></paper-fab> | |
| 21 | + <paper-fab mini icon="star-half"></paper-fab> | |
| 22 | + <paper-fab mini icon="star"></paper-fab> | |
| 23 | + </div> | |
| 24 | + </paper-fab-speed-dial> | |
| 25 | + | |
| 26 | +The `direction` property can be set to `top`, `bottom`, `left` or `right` to | |
| 27 | +control the direction in which the options dropdown is expanded. | |
| 28 | + | |
| 29 | +### Styling | |
| 30 | + | |
| 31 | +The following custom properties and mixins are also available for styling: | |
| 32 | + | |
| 33 | +Custom property | Description | Default | |
| 34 | +----------------|-------------|---------- | |
| 35 | +`--paper-fab-speed-dial-option` | Mixin applied to each option element | `{}` | |
| 36 | + | |
| 37 | +@hero hero.svg | |
| 38 | +@demo demo/index.html | |
| 39 | +--> | |
| 40 | + | |
| 41 | +<dom-module id="paper-fab-speed-dial"> | |
| 42 | + <template> | |
| 43 | + <style> | |
| 44 | + .vertical ::content .dropdown-content { | |
| 45 | + @apply(--layout-vertical); | |
| 46 | + } | |
| 47 | + .horizontal ::content .dropdown-content { | |
| 48 | + @apply(--layout-horizontal); | |
| 49 | + } | |
| 50 | + ::content .dropdown-content > * { | |
| 51 | + margin: 8px; | |
| 52 | + @apply(--paper-fab-speed-dial-option); | |
| 53 | + } | |
| 54 | + </style> | |
| 55 | + <content id="fabContainer" select=".dropdown-trigger"></content> | |
| 56 | + <iron-dropdown | |
| 57 | + id="dropdown" | |
| 58 | + open-animation-config="[[openAnimationConfig]]" | |
| 59 | + close-animation-config="[[closeAnimationConfig]]"> | |
| 60 | + <content id="contentContainer" select=".dropdown-content"></content> | |
| 61 | + </iron-dropdown> | |
| 62 | + </template> | |
| 63 | +</dom-module> | |
| 64 | +<script> | |
| 65 | +(function(Polymer) { | |
| 66 | + Polymer({ | |
| 67 | + is: 'paper-fab-speed-dial', | |
| 68 | + properties: { | |
| 69 | + | |
| 70 | + /** | |
| 71 | + * The direction in which to expand the options. One of `top`, `bottom` | |
| 72 | + * `left` and `right`. | |
| 73 | + */ | |
| 74 | + direction: { | |
| 75 | + type: String, | |
| 76 | + value: 'bottom' | |
| 77 | + }, | |
| 78 | + /** | |
| 79 | + * A pixel value for the distance of the first option fron the trigger | |
| 80 | + * button. | |
| 81 | + */ | |
| 82 | + offset: { | |
| 83 | + type: Number, | |
| 84 | + value: 66 | |
| 85 | + }, | |
| 86 | + /** | |
| 87 | + * An animation config. If provided, this will be used to animate the | |
| 88 | + * opening of the options dropdown. | |
| 89 | + */ | |
| 90 | + openAnimationConfig: { | |
| 91 | + type: Array, | |
| 92 | + value: function() { | |
| 93 | + return [{ | |
| 94 | + name: 'fade-in-animation', | |
| 95 | + timing: { | |
| 96 | + delay: 150, | |
| 97 | + duration: 50 | |
| 98 | + } | |
| 99 | + }, { | |
| 100 | + name: 'paper-square-grow-animation', | |
| 101 | + startSize: 56, | |
| 102 | + timing: { | |
| 103 | + delay: 150, | |
| 104 | + duration: 200 | |
| 105 | + } | |
| 106 | + }]; | |
| 107 | + } | |
| 108 | + }, | |
| 109 | + /** | |
| 110 | + * An animation config. If provided, this will be used to animate the | |
| 111 | + * closing of the options dropdown. | |
| 112 | + */ | |
| 113 | + closeAnimationConfig: { | |
| 114 | + type: Array, | |
| 115 | + value: function() { | |
| 116 | + return [{ | |
| 117 | + name: 'fade-out-animation', | |
| 118 | + timing: { | |
| 119 | + duration: 200 | |
| 120 | + } | |
| 121 | + }]; | |
| 122 | + } | |
| 123 | + } | |
| 124 | + }, | |
| 125 | + observers: [ | |
| 126 | + '_updateDropdown(direction, offset)' | |
| 127 | + ], | |
| 128 | + ready: function() { | |
| 129 | + | |
| 130 | + var fab = Polymer.dom(this.$.fabContainer).getDistributedNodes()[0]; | |
| 131 | + fab.addEventListener('tap', function() { | |
| 132 | + this.$.dropdown.open(); | |
| 133 | + }.bind(this)); | |
| 134 | + | |
| 135 | + var content = Polymer.dom(this.$.contentContainer).getDistributedNodes()[0]; | |
| 136 | + content.addEventListener('tap', function() { | |
| 137 | + this.$.dropdown.close(); | |
| 138 | + }.bind(this)); | |
| 139 | + }, | |
| 140 | + /** | |
| 141 | + * Show the speed dial options. | |
| 142 | + */ | |
| 143 | + open: function() { | |
| 144 | + this.$.dropdown.open(); | |
| 145 | + }, | |
| 146 | + /** | |
| 147 | + * Hide the speed dial options. | |
| 148 | + */ | |
| 149 | + close: function() { | |
| 150 | + this.$.dropdown.close(); | |
| 151 | + }, | |
| 152 | + _updateDropdown: function(direction, offset) { | |
| 153 | + var d = this.$.dropdown; | |
| 154 | + switch(direction) { | |
| 155 | + case 'bottom': | |
| 156 | + d.verticalAlign = 'top'; | |
| 157 | + d.horizontalOffset = 0; | |
| 158 | + d.verticalOffset = offset; | |
| 159 | + d.classList.add('vertical'); | |
| 160 | + d.classList.remove('horizontal'); | |
| 161 | + break; | |
| 162 | + case 'top': | |
| 163 | + d.verticalAlign = 'bottom'; | |
| 164 | + d.horizontalOffset = 0; | |
| 165 | + d.verticalOffset = offset; | |
| 166 | + d.classList.add('vertical'); | |
| 167 | + d.classList.remove('horizontal'); | |
| 168 | + break; | |
| 169 | + case 'right': | |
| 170 | + d.horizontalAlign = 'left'; | |
| 171 | + d.horizontalOffset = offset; | |
| 172 | + d.verticalOffset = 0; | |
| 173 | + d.classList.add('horizontal'); | |
| 174 | + d.classList.remove('vertical'); | |
| 175 | + break; | |
| 176 | + case 'left': | |
| 177 | + d.horizontalAlign = 'right'; | |
| 178 | + d.horizontalOffset = offset; | |
| 179 | + d.verticalOffset = 0; | |
| 180 | + d.classList.add('horizontal'); | |
| 181 | + d.classList.remove('vertical'); | |
| 182 | + break; | |
| 183 | + default: | |
| 184 | + throw 'Invalid direction. Must be one of [top, bottom, left, right].'; | |
| 185 | + } | |
| 186 | + } | |
| 187 | + }); | |
| 188 | +})(Polymer); | |
| 189 | +</script> | ... | ... |
bower_components/paper-fab-transitions/paper-fab-transitions.html
0 → 100644
bower_components/paper-fab-transitions/paper-square-grow-animation.html
0 → 100644
| 1 | +<link rel="import" href="../polymer/polymer.html"> | |
| 2 | +<link rel="import" href="../neon-animation/web-animations.html"> | |
| 3 | +<link rel="import" href="../neon-animation/neon-animation-behavior.html"> | |
| 4 | + | |
| 5 | +<!-- | |
| 6 | +`<paper-square-grow-animation>` increases the element's width and height from an initial | |
| 7 | +predefined pixel square size to its final size. | |
| 8 | + | |
| 9 | +Configuration: | |
| 10 | +``` | |
| 11 | +{ | |
| 12 | + name: 'expand-animation', | |
| 13 | + node: <node>, | |
| 14 | + startSize: <start-size-in-px>, | |
| 15 | + timing: <animation-timing>, | |
| 16 | +} | |
| 17 | +``` | |
| 18 | + | |
| 19 | +@hero hero.svg | |
| 20 | +@demo demo/index.html | |
| 21 | +--> | |
| 22 | + | |
| 23 | +<script> | |
| 24 | + Polymer({ | |
| 25 | + is: 'paper-square-grow-animation', | |
| 26 | + behaviors: [ | |
| 27 | + Polymer.NeonAnimationBehavior | |
| 28 | + ], | |
| 29 | + configure: function(config) { | |
| 30 | + var node = config.node; | |
| 31 | + var startSize = config.startSize; | |
| 32 | + var height = node.getBoundingClientRect().height; | |
| 33 | + var width = node.getBoundingClientRect().width; | |
| 34 | + this._effect = new KeyframeEffect(node, [{ | |
| 35 | + height: startSize + 'px', | |
| 36 | + width: startSize + 'px' | |
| 37 | + }, { | |
| 38 | + height: height + 'px', | |
| 39 | + width: width + 'px' | |
| 40 | + }], this.timingFromConfig(config)); | |
| 41 | + return this._effect; | |
| 42 | + } | |
| 43 | + }); | |
| 44 | +</script> | ... | ... |
bower_components/paper-fab-transitions/preview.png
0 → 100644
4.96 KB
bower_components/paper-fab-transitions/test/index.html
0 → 100644
| 1 | +<!doctype html> | |
| 2 | + | |
| 3 | +<html> | |
| 4 | +<head> | |
| 5 | + <meta charset="UTF-8"> | |
| 6 | + <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes"> | |
| 7 | + <title>paper-fab-transitions tests</title> | |
| 8 | + <script src="../../webcomponentsjs/webcomponents-lite.js"></script> | |
| 9 | + <script src="../../web-component-tester/browser.js"></script> | |
| 10 | +</head> | |
| 11 | +<body> | |
| 12 | + <script> | |
| 13 | + WCT.loadSuites([ | |
| 14 | + 'paper-fab-morph.html', | |
| 15 | + 'paper-fab-speed-dial.html' | |
| 16 | + ]); | |
| 17 | + </script> | |
| 18 | +</body> | |
| 19 | +</html> | ... | ... |
bower_components/paper-fab-transitions/test/paper-fab-morph.html
0 → 100644
| 1 | +<!doctype html> | |
| 2 | + | |
| 3 | +<html> | |
| 4 | +<head> | |
| 5 | + <meta charset="UTF-8"> | |
| 6 | + <title>paper-fab-morph tests</title> | |
| 7 | + <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> | |
| 8 | + | |
| 9 | + <script src="../../webcomponentsjs/webcomponents-lite.js"></script> | |
| 10 | + <script src="../../web-component-tester/browser.js"></script> | |
| 11 | + <script src="../../test-fixture/test-fixture-mocha.js"></script> | |
| 12 | + <script src="../../iron-test-helpers/mock-interactions.js"></script> | |
| 13 | + | |
| 14 | + <link rel="import" href="../../paper-fab/paper-fab.html"> | |
| 15 | + <link rel="import" href="../../paper-dialog/paper-dialog.html"> | |
| 16 | + <link rel="import" href="../paper-fab-morph.html"> | |
| 17 | + <link rel="import" href="../../test-fixture/test-fixture.html"> | |
| 18 | + | |
| 19 | +</head> | |
| 20 | +<body> | |
| 21 | + | |
| 22 | + <test-fixture id="DropdownWrapped"> | |
| 23 | + <template> | |
| 24 | + <paper-fab-morph> | |
| 25 | + <paper-fab class="dropdown-trigger"></paper-fab> | |
| 26 | + <div class="dropdown-content">content</div> | |
| 27 | + </paper-fab-morph> | |
| 28 | + </template> | |
| 29 | + </test-fixture> | |
| 30 | + | |
| 31 | + <test-fixture id="OriginalOverlay"> | |
| 32 | + <template> | |
| 33 | + <paper-fab-morph is-overlay-content> | |
| 34 | + <paper-fab class="dropdown-trigger"></paper-fab> | |
| 35 | + <paper-dialog class="dropdown-content">dialog</paper-dialog> | |
| 36 | + </paper-fab-morph> | |
| 37 | + </template> | |
| 38 | + </test-fixture> | |
| 39 | + | |
| 40 | + <script> | |
| 41 | + | |
| 42 | + suite('<paper-fab-morph>', function() { | |
| 43 | + | |
| 44 | + suite('dropdown wrapped', function() { | |
| 45 | + | |
| 46 | + var trigger; | |
| 47 | + var dropdown; | |
| 48 | + | |
| 49 | + setup(function() { | |
| 50 | + var morph = fixture('DropdownWrapped'); | |
| 51 | + trigger = Polymer.dom(morph).querySelector('.dropdown-trigger'); | |
| 52 | + dropdown = morph.querySelector('iron-dropdown'); | |
| 53 | + }); | |
| 54 | + | |
| 55 | + test('dropdown is initially closed', function() { | |
| 56 | + expect(dropdown.opened).to.be.equal(false); | |
| 57 | + }); | |
| 58 | + | |
| 59 | + test('tapping the trigger opens the dropdown', function(done) { | |
| 60 | + MockInteractions.downAndUp(trigger, function() { | |
| 61 | + Polymer.Base.async(function() { | |
| 62 | + expect(dropdown.opened).to.be.equal(true); | |
| 63 | + done(); | |
| 64 | + }, 100); | |
| 65 | + }); | |
| 66 | + }); | |
| 67 | + | |
| 68 | + }); | |
| 69 | + | |
| 70 | + suite('original overlay', function() { | |
| 71 | + | |
| 72 | + var trigger; | |
| 73 | + var overlay; | |
| 74 | + | |
| 75 | + setup(function() { | |
| 76 | + var morph = fixture('OriginalOverlay'); | |
| 77 | + trigger = Polymer.dom(morph).querySelector('.dropdown-trigger'); | |
| 78 | + overlay = Polymer.dom(morph).querySelector('.dropdown-content'); | |
| 79 | + }); | |
| 80 | + | |
| 81 | + test('overlay is initially closed', function() { | |
| 82 | + expect(overlay.opened).to.be.equal(false); | |
| 83 | + }); | |
| 84 | + | |
| 85 | + test('tapping the trigger opens the overlay', function(done) { | |
| 86 | + MockInteractions.downAndUp(trigger, function() { | |
| 87 | + Polymer.Base.async(function() { | |
| 88 | + expect(overlay.opened).to.be.equal(true); | |
| 89 | + done(); | |
| 90 | + }, 100); | |
| 91 | + }); | |
| 92 | + }); | |
| 93 | + | |
| 94 | + }); | |
| 95 | + | |
| 96 | + }); | |
| 97 | + </script> | |
| 98 | + | |
| 99 | +</body> | |
| 100 | +</html> | ... | ... |
bower_components/paper-fab-transitions/test/paper-fab-speed-dial.html
0 → 100644
| 1 | +<!doctype html> | |
| 2 | + | |
| 3 | +<html> | |
| 4 | +<head> | |
| 5 | + <meta charset="UTF-8"> | |
| 6 | + <title>paper-fab-speed-dial tests</title> | |
| 7 | + <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> | |
| 8 | + | |
| 9 | + <script src="../../webcomponentsjs/webcomponents-lite.js"></script> | |
| 10 | + <script src="../../web-component-tester/browser.js"></script> | |
| 11 | + <script src="../../test-fixture/test-fixture-mocha.js"></script> | |
| 12 | + <script src="../../iron-test-helpers/mock-interactions.js"></script> | |
| 13 | + | |
| 14 | + <link rel="import" href="../../paper-fab/paper-fab.html"> | |
| 15 | + <link rel="import" href="../paper-fab-speed-dial.html"> | |
| 16 | + <link rel="import" href="../../test-fixture/test-fixture.html"> | |
| 17 | + | |
| 18 | +</head> | |
| 19 | +<body> | |
| 20 | + | |
| 21 | + <test-fixture id="SpeedDial"> | |
| 22 | + <template> | |
| 23 | + <paper-fab-speed-dial> | |
| 24 | + <paper-fab class="dropdown-trigger"></paper-fab> | |
| 25 | + <div class="dropdown-content">content</div> | |
| 26 | + </paper-fab-morph> | |
| 27 | + </template> | |
| 28 | + </test-fixture> | |
| 29 | + | |
| 30 | + <script> | |
| 31 | + | |
| 32 | + suite('<paper-fab-speed-dial>', function() { | |
| 33 | + | |
| 34 | + suite('basic', function() { | |
| 35 | + | |
| 36 | + var trigger; | |
| 37 | + var content; | |
| 38 | + var dropdown; | |
| 39 | + | |
| 40 | + setup(function() { | |
| 41 | + var morph = fixture('SpeedDial'); | |
| 42 | + trigger = Polymer.dom(morph).querySelector('.dropdown-trigger'); | |
| 43 | + dropdown = morph.querySelector('iron-dropdown'); | |
| 44 | + }); | |
| 45 | + | |
| 46 | + test('dropdown is initially closed', function() { | |
| 47 | + expect(dropdown.opened).to.be.equal(false); | |
| 48 | + }); | |
| 49 | + | |
| 50 | + test('tapping the trigger opens the dropdown', function(done) { | |
| 51 | + MockInteractions.downAndUp(trigger, function() { | |
| 52 | + Polymer.Base.async(function() { | |
| 53 | + expect(dropdown.opened).to.be.equal(true); | |
| 54 | + done(); | |
| 55 | + }, 100); | |
| 56 | + }); | |
| 57 | + }); | |
| 58 | + | |
| 59 | + }); | |
| 60 | + | |
| 61 | + }); | |
| 62 | + </script> | |
| 63 | + | |
| 64 | +</body> | |
| 65 | +</html> | ... | ... |
controllets/full-view-controllet/full-view-controllet.html
100644 → 100755
controllets/list-controllet/list-controllet.html
100644 → 100755
controllets/list-view-controllet/list-view-controllet.html
100644 → 100755
controllets/text-element-controllet/docs.html
100644 → 100755
datalets/barchart-datalet/barchart-datalet.html
100644 → 100755
datalets/barchart-datalet/barchart-datalet.png
100644 → 100755
datalets/base-datalet/static/js/BaseDataletBehavior.js
100644 → 100755
datalets/base-datalet/static/js/WorkcycleBehavior.js
100644 → 100755
datalets/columnchart-datalet/columnchart-datalet.html
100644 → 100755
datalets/columnchart-datalet/columnchart-datalet.png
100644 → 100755
demo.html
100644 → 100755
docs/ROUTETOPADataletDeveloperGuidev0.1.html
100644 → 100755
docs/images/image00.png
100644 → 100755
docs/images/image01.png
100644 → 100755
docs/images/image02.png
100644 → 100755
docs/js/editarea_0_8_2/change_log.txt
100644 → 100755
docs/js/editarea_0_8_2/docs/about.html
100644 → 100755
docs/js/editarea_0_8_2/docs/compatibility.html
100644 → 100755
docs/js/editarea_0_8_2/docs/configuration.html
100644 → 100755
docs/js/editarea_0_8_2/docs/credits.html
100644 → 100755
docs/js/editarea_0_8_2/docs/customization_language.html
100644 → 100755
docs/js/editarea_0_8_2/docs/customization_plugin.html
100644 → 100755
docs/js/editarea_0_8_2/docs/customization_syntax.html
100644 → 100755
docs/js/editarea_0_8_2/docs/doc_style.css
100644 → 100755
docs/js/editarea_0_8_2/docs/include.html
100644 → 100755
docs/js/editarea_0_8_2/docs/index.html
100644 → 100755
docs/js/editarea_0_8_2/docs/installation.html
100644 → 100755
docs/js/editarea_0_8_2/docs/javascript_functions.html
100644 → 100755
docs/js/editarea_0_8_2/docs/license.html
100644 → 100755
docs/js/editarea_0_8_2/edit_area/autocompletion.js
100644 → 100755
docs/js/editarea_0_8_2/edit_area/edit_area.css
100644 → 100755
docs/js/editarea_0_8_2/edit_area/edit_area.js
100644 → 100755
docs/js/editarea_0_8_2/edit_area/edit_area_compressor.php
100644 → 100755
docs/js/editarea_0_8_2/edit_area/edit_area_full.gz
100644 → 100755
No preview for this file type
docs/js/editarea_0_8_2/edit_area/edit_area_full.js
100644 → 100755
docs/js/editarea_0_8_2/edit_area/edit_area_functions.js
100644 → 100755
docs/js/editarea_0_8_2/edit_area/edit_area_loader.js
100644 → 100755
docs/js/editarea_0_8_2/edit_area/elements_functions.js
100644 → 100755
docs/js/editarea_0_8_2/edit_area/highlight.js
100644 → 100755
docs/js/editarea_0_8_2/edit_area/images/autocompletion.gif
100644 → 100755
docs/js/editarea_0_8_2/edit_area/images/close.gif
100644 → 100755
docs/js/editarea_0_8_2/edit_area/images/fullscreen.gif
100644 → 100755
docs/js/editarea_0_8_2/edit_area/images/go_to_line.gif
100644 → 100755
docs/js/editarea_0_8_2/edit_area/images/help.gif
100644 → 100755
docs/js/editarea_0_8_2/edit_area/images/highlight.gif
100644 → 100755
docs/js/editarea_0_8_2/edit_area/images/load.gif
100644 → 100755
docs/js/editarea_0_8_2/edit_area/images/move.gif
100644 → 100755
docs/js/editarea_0_8_2/edit_area/images/newdocument.gif
100644 → 100755
docs/js/editarea_0_8_2/edit_area/images/opacity.png
100644 → 100755
docs/js/editarea_0_8_2/edit_area/images/processing.gif
100644 → 100755
docs/js/editarea_0_8_2/edit_area/images/redo.gif
100644 → 100755
docs/js/editarea_0_8_2/edit_area/images/reset_highlight.gif
100644 → 100755
docs/js/editarea_0_8_2/edit_area/images/save.gif
100644 → 100755
docs/js/editarea_0_8_2/edit_area/images/search.gif
100644 → 100755
docs/js/editarea_0_8_2/edit_area/images/smooth_selection.gif
100644 → 100755
docs/js/editarea_0_8_2/edit_area/images/spacer.gif
100644 → 100755
docs/js/editarea_0_8_2/edit_area/images/statusbar_resize.gif
100644 → 100755
docs/js/editarea_0_8_2/edit_area/images/undo.gif
100644 → 100755
docs/js/editarea_0_8_2/edit_area/images/word_wrap.gif
100644 → 100755
docs/js/editarea_0_8_2/edit_area/keyboard.js
100644 → 100755
docs/js/editarea_0_8_2/edit_area/langs/bg.js
100644 → 100755
docs/js/editarea_0_8_2/edit_area/langs/cs.js
100644 → 100755
docs/js/editarea_0_8_2/edit_area/langs/de.js
100644 → 100755
docs/js/editarea_0_8_2/edit_area/langs/dk.js
100644 → 100755
docs/js/editarea_0_8_2/edit_area/langs/en.js
100644 → 100755
docs/js/editarea_0_8_2/edit_area/langs/eo.js
100644 → 100755
docs/js/editarea_0_8_2/edit_area/langs/es.js
100644 → 100755
docs/js/editarea_0_8_2/edit_area/langs/fi.js
100644 → 100755
docs/js/editarea_0_8_2/edit_area/langs/fr.js
100644 → 100755
docs/js/editarea_0_8_2/edit_area/langs/hr.js
100644 → 100755
docs/js/editarea_0_8_2/edit_area/langs/it.js
100644 → 100755
docs/js/editarea_0_8_2/edit_area/langs/ja.js
100644 → 100755
docs/js/editarea_0_8_2/edit_area/langs/mk.js
100644 → 100755
docs/js/editarea_0_8_2/edit_area/langs/nl.js
100644 → 100755
docs/js/editarea_0_8_2/edit_area/langs/pl.js
100644 → 100755
docs/js/editarea_0_8_2/edit_area/langs/pt.js
100644 → 100755
docs/js/editarea_0_8_2/edit_area/langs/ru.js
100644 → 100755
docs/js/editarea_0_8_2/edit_area/langs/sk.js
100644 → 100755
docs/js/editarea_0_8_2/edit_area/langs/zh.js
100644 → 100755
docs/js/editarea_0_8_2/edit_area/license_apache.txt
100644 → 100755
docs/js/editarea_0_8_2/edit_area/license_bsd.txt
100644 → 100755