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 | \ No newline at end of file | 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