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