Commit e134e53665735a897015767f56cd246e760dfd32

Authored by Luigi Serra
1 parent e61ed14e

updates

Showing 177 changed files with 1093 additions and 20 deletions

Too many changes.

To preserve performance only 100 of 177 files are displayed.

bower.json
1   -{
2   - "name": "COMPONENT",
3   - "version": "1.0.0",
4   - "authors": [
5   - "Luigi Serra"
6   - ],
7   - "description": "Datalet and Controllet repository",
8   - "license": "MIT",
9   - "ignore": [
10   - "**/.*",
11   - "node_modules",
12   - "bower_components",
13   - "test",
14   - "tests"
15   - ],
16   - "dependencies": {
17   - "polymer": "Polymer/polymer#^1.0.0",
18   - "google-map": "GoogleWebComponents/google-map#^1.0.0"
19   - }
20   -}
  1 +{
  2 + "name": "COMPONENT",
  3 + "version": "1.0.0",
  4 + "authors": [
  5 + "Luigi Serra"
  6 + ],
  7 + "description": "Datalet and Controllet repository",
  8 + "license": "MIT",
  9 + "ignore": [
  10 + "**/.*",
  11 + "node_modules",
  12 + "bower_components",
  13 + "test",
  14 + "tests"
  15 + ],
  16 + "dependencies": {
  17 + "google-map": "GoogleWebComponents/google-map#^1.0.0",
  18 + "paper-fab-transitions": "~0.1.0",
  19 + "polymer": "Polymer/polymer#^1.0.0"
  20 + }
  21 +}
... ...
bower_components/paper-fab-transitions/.bower.json 0 → 100644
  1 +{
  2 + "name": "paper-fab-transitions",
  3 + "version": "0.1.0",
  4 + "homepage": "https://github.com/GabiAxel/paper-fab-transitions",
  5 + "authors": [
  6 + "Gabriel Axel"
  7 + ],
  8 + "main": "paper-fab-transitions.html",
  9 + "description": "Polymer components for adding morphing and speed dial transitions to floating action buttons",
  10 + "keywords": [
  11 + "web-components",
  12 + "polymer",
  13 + "fab",
  14 + "floating action button",
  15 + "morph",
  16 + "speed dial"
  17 + ],
  18 + "license": "MIT",
  19 + "repository": {
  20 + "type": "git",
  21 + "url": "git://github.com/GabiAxel/paper-fab-transitions.git"
  22 + },
  23 + "dependencies": {
  24 + "polymer": "^1.1.0",
  25 + "iron-dropdown": "PolymerElements/iron-dropdown#^1.0.0",
  26 + "neon-animation": "PolymerElements/neon-animation#^1.0.0"
  27 + },
  28 + "devDependencies": {
  29 + "iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
  30 + "iron-component-page": "polymerelements/iron-component-page#^1.0.0",
  31 + "test-fixture": "polymerelements/test-fixture#^1.0.0",
  32 + "iron-test-helpers": "polymerelements/iron-test-helpers#^1.0.0",
  33 + "paper-fab": "PolymerElements/paper-fab#^1.0.0",
  34 + "iron-icons": "PolymerElements/iron-icons#^1.0.0",
  35 + "paper-menu": "PolymerElements/paper-menu#^1.0.0",
  36 + "paper-item": "PolymerElements/paper-item#^1.0.0",
  37 + "paper-toolbar": "PolymerElements/paper-toolbar#^1.0.0",
  38 + "paper-dialog": "PolymerElements/paper-dialog#^1.0.0",
  39 + "paper-button": "PolymerElements/paper-button#^1.0.0",
  40 + "paper-card": "PolymerElements/paper-card#^1.0.0",
  41 + "web-component-tester": "*"
  42 + },
  43 + "_release": "0.1.0",
  44 + "_resolution": {
  45 + "type": "version",
  46 + "tag": "0.1.0",
  47 + "commit": "82a9d70b450437362dedbf302bb23d8bb3998fde"
  48 + },
  49 + "_source": "git://github.com/GabiAxel/paper-fab-transitions.git",
  50 + "_target": "~0.1.0",
  51 + "_originalSource": "paper-fab-transitions",
  52 + "_direct": true
  53 +}
0 54 \ No newline at end of file
... ...
bower_components/paper-fab-transitions/.gitignore 0 → 100644
  1 +bower_components
... ...
bower_components/paper-fab-transitions/LICENSE 0 → 100644
  1 +Copyright (c) 2015 Gabriel Axel
  2 +
  3 +Permission is hereby granted, free of charge, to any person
  4 +obtaining a copy of this software and associated documentation
  5 +files (the "Software"), to deal in the Software without
  6 +restriction, including without limitation the rights to use,
  7 +copy, modify, merge, publish, distribute, sublicense, and/or sell
  8 +copies of the Software, and to permit persons to whom the
  9 +Software is furnished to do so, subject to the following
  10 +conditions:
  11 +
  12 +The above copyright notice and this permission notice shall be
  13 +included in all copies or substantial portions of the Software.
  14 +
  15 +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
  16 +EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
  17 +OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
  18 +NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
  19 +HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
  20 +WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
  21 +FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
  22 +OTHER DEALINGS IN THE SOFTWARE.
... ...
bower_components/paper-fab-transitions/README.md 0 → 100644
  1 +paper-fab-transitions
  2 +=====================
  3 +
  4 +Polymer elements for adding morphing and speed dial transitions to floating
  5 +action buttons as defined by Material Design specifications.
  6 +
  7 +## Install
  8 +```
  9 +bower install paper-fab-transitions --save
  10 +```
  11 +
  12 +## Usage
  13 +
  14 +### Morphing
  15 +
  16 +Add morphing transition from a fab with the class `dropdown-trigger` to an element with the class `dropdown-content`:
  17 +
  18 +```html
  19 +<link rel="import" href="bower_components/paper-fab-transitions/paper-fab-morph.html">
  20 +
  21 +<paper-fab-morph>
  22 + <paper-fab icon="menu" class="dropdown-trigger">
  23 + <paper-material class="dropdown-content">
  24 + <paper-menu>
  25 + <paper-item>One</paper-item>
  26 + <paper-item>Two</paper-item>
  27 + </paper-menu>
  28 + </paper-mterial>
  29 +</paper-fab-morph>
  30 +```
  31 +
  32 +### Speed Dial
  33 +
  34 +When tapping a fab with the class `dropdown-trigger`, open a speed dial menu with the class `dropdown-content`:
  35 +
  36 +```html
  37 +<link rel="import" href="bower_components/paper-fab-transitions/paper-fab-speed-dial.html">
  38 +
  39 +<paper-fab-speed-dial>
  40 + <paper-fab icon="add" class="dropdown-trigger"></paper-fab>
  41 + <div class="dropdown-content">
  42 + <paper-fab mini icon="star-border"></paper-fab>
  43 + <paper-fab mini icon="star-half"></paper-fab>
  44 + <paper-fab mini icon="star"></paper-fab>
  45 + </div>
  46 +</paper-fab-speed-dial>
  47 +```
  48 +
  49 +[Documentation](http://gabiaxel.github.io/paper-fab-transitions/components/paper-fab-transitions/)
  50 +
  51 +[Demo](http://gabiaxel.github.io/paper-fab-transitions/components/paper-fab-transitions/demo/)
  52 +
  53 +[Material Design specifications](https://www.google.com/design/spec/components/buttons-floating-action-button.html#buttons-floating-action-button-transitions)
... ...
bower_components/paper-fab-transitions/bower.json 0 → 100644
  1 +{
  2 + "name": "paper-fab-transitions",
  3 + "version": "0.1.0",
  4 + "homepage": "https://github.com/GabiAxel/paper-fab-transitions",
  5 + "authors": [
  6 + "Gabriel Axel"
  7 + ],
  8 + "main": "paper-fab-transitions.html",
  9 + "description": "Polymer components for adding morphing and speed dial transitions to floating action buttons",
  10 + "keywords": [
  11 + "web-components",
  12 + "polymer",
  13 + "fab",
  14 + "floating action button",
  15 + "morph",
  16 + "speed dial"
  17 + ],
  18 + "license": "MIT",
  19 + "repository": {
  20 + "type": "git",
  21 + "url": "git://github.com/GabiAxel/paper-fab-transitions.git"
  22 + },
  23 + "dependencies": {
  24 + "polymer": "^1.1.0",
  25 + "iron-dropdown": "PolymerElements/iron-dropdown#^1.0.0",
  26 + "neon-animation": "PolymerElements/neon-animation#^1.0.0"
  27 + },
  28 + "devDependencies": {
  29 + "iron-flex-layout": "PolymerElements/iron-flex-layout#^1.0.0",
  30 + "iron-component-page": "polymerelements/iron-component-page#^1.0.0",
  31 + "test-fixture": "polymerelements/test-fixture#^1.0.0",
  32 + "iron-test-helpers": "polymerelements/iron-test-helpers#^1.0.0",
  33 + "paper-fab": "PolymerElements/paper-fab#^1.0.0",
  34 + "iron-icons": "PolymerElements/iron-icons#^1.0.0",
  35 + "paper-menu": "PolymerElements/paper-menu#^1.0.0",
  36 + "paper-item": "PolymerElements/paper-item#^1.0.0",
  37 + "paper-toolbar": "PolymerElements/paper-toolbar#^1.0.0",
  38 + "paper-dialog": "PolymerElements/paper-dialog#^1.0.0",
  39 + "paper-button": "PolymerElements/paper-button#^1.0.0",
  40 + "paper-card": "PolymerElements/paper-card#^1.0.0",
  41 + "web-component-tester": "*"
  42 + }
  43 +}
... ...
bower_components/paper-fab-transitions/demo/images/grumpycat.jpg 0 → 100644

1.33 KB

bower_components/paper-fab-transitions/demo/images/lilbub.jpg 0 → 100644

3.47 KB

bower_components/paper-fab-transitions/demo/images/maru.jpg 0 → 100644

2.35 KB

bower_components/paper-fab-transitions/demo/index.html 0 → 100644
  1 +<!DOCTYPE html>
  2 +<html>
  3 + <head>
  4 + <meta charset="utf-8">
  5 + <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 + <script>
  7 + window.Polymer = {
  8 + dom: 'shadow'
  9 + };
  10 + </script>
  11 + <script src="../../webcomponentsjs/webcomponents-lite.min.js"></script>
  12 + <link rel="import" href="../../paper-styles/demo-pages.html">
  13 + <link rel="import" href="../../paper-styles/color.html">
  14 + <link rel="import" href="../../paper-fab/paper-fab.html">
  15 + <link rel="import" href="../../iron-icons/iron-icons.html">
  16 + <link rel="import" href="../../iron-icons/communication-icons.html">
  17 + <link rel="import" href="../../paper-menu/paper-menu.html">
  18 + <link rel="import" href="../../paper-item/paper-item.html">
  19 + <link rel="import" href="../../paper-toolbar/paper-toolbar.html">
  20 + <link rel="import" href="../../paper-dialog/paper-dialog.html">
  21 + <link rel="import" href="../../paper-button/paper-button.html">
  22 + <link rel="import" href="../../paper-card/paper-card.html">
  23 + <link rel="import" href="../../neon-animation/neon-animations.html">
  24 + <link rel="import" href="../paper-fab-transitions.html">
  25 +
  26 + <style is="custom-style">
  27 + paper-card {
  28 + position: relative;
  29 + margin: 10px;
  30 + }
  31 + .card-content {
  32 + width: 300px;
  33 + height: 300px;
  34 + }
  35 + .top-left {
  36 + position: absolute;
  37 + top: 10px;
  38 + left: 10px;
  39 + }
  40 + .bottom-right {
  41 + position: absolute;
  42 + bottom: 10px;
  43 + right: 10px;
  44 + }
  45 + #show-toolbar {
  46 + /* In real cases it would make sense use fixed position for the element,
  47 + * and then no need to position --paper-morph-dropdown and --paper-morph-content
  48 + */
  49 + --paper-morph-background: var(--default-primary-color);
  50 + --paper-morph-dropdown: {
  51 + position: static !important; /* didn't find alternative to !important for Safari */
  52 + }
  53 + --paper-morph-content: {
  54 + position: absolute;
  55 + left: 0;
  56 + bottom: 0;
  57 + width: 100%;
  58 + overflow: visible;
  59 + }
  60 + }
  61 + #show-toolbar paper-fab {
  62 + position: absolute;
  63 + bottom: 10px;
  64 + right: 10px;
  65 + --paper-fab-background: var(--default-primary-color);
  66 + }
  67 + paper-dialog {
  68 + width: 200px;
  69 + height: 100px;
  70 + }
  71 + paper-fab.light-blue {
  72 + --paper-fab-background: var(--paper-light-blue-500);
  73 + }
  74 + paper-fab.blue {
  75 + --paper-fab-background: var(--paper-blue-500);
  76 + }
  77 + paper-fab.green {
  78 + --paper-fab-background: var(--paper-green-500);
  79 + }
  80 + paper-fab.teal {
  81 + --paper-fab-background: var(--paper-teal-500);
  82 + }
  83 + paper-fab.orange {
  84 + --paper-fab-background: var(--paper-orange-500);
  85 + }
  86 + paper-fab.red {
  87 + --paper-fab-background: var(--paper-red-500);
  88 + }
  89 + paper-fab.grumpycat {
  90 + --paper-fab: {
  91 + background-image: url('images/grumpycat.jpg');
  92 + }
  93 + }
  94 + paper-fab.lilbub {
  95 + --paper-fab: {
  96 + background-image: url('images/lilbub.jpg');
  97 + }
  98 + }
  99 + paper-fab.maru {
  100 + --paper-fab: {
  101 + background-image: url('images/maru.jpg');
  102 + }
  103 + }
  104 + </style>
  105 + </head>
  106 + <body unresolved class="layout horizontal wrap">
  107 +
  108 + <paper-card heading="Speed Dial">
  109 + <div class="card-content">
  110 +
  111 + <paper-fab-speed-dial class="top-left">
  112 + <paper-fab icon="create" class="dropdown-trigger red"></paper-fab>
  113 + <div class="dropdown-content">
  114 + <paper-fab mini icon="folder" class="orange"></paper-fab>
  115 + <paper-fab mini icon="description" class="blue"></paper-fab>
  116 + <paper-fab mini icon="event" class="teal"></paper-fab>
  117 + </div>
  118 + </paper-fab-speed-dial>
  119 +
  120 + <paper-fab-speed-dial direction="top" class="bottom-right">
  121 + <paper-fab icon="communication:call" class="dropdown-trigger green"></paper-fab>
  122 + <div class="dropdown-content">
  123 + <paper-fab mini class="grumpycat"></paper-fab>
  124 + <paper-fab mini class="lilbub"></paper-fab>
  125 + <paper-fab mini class="maru"></paper-fab>
  126 + </div>
  127 + </paper-fab-speed-dial>
  128 +
  129 + </div>
  130 + </paper-card>
  131 +
  132 +
  133 + <paper-card heading="Morph Positioned Dropdown">
  134 + <div class="card-content">
  135 +
  136 + <paper-fab-morph class="top-left">
  137 + <paper-fab icon="add" class="dropdown-trigger light-blue"></paper-fab>
  138 + <paper-material class="dropdown-content">
  139 + <paper-menu>
  140 + <paper-item>One</paper-item>
  141 + <paper-item>Two</paper-item>
  142 + <paper-item>Three</paper-item>
  143 + </paper-menu>
  144 + </paper-material>
  145 + </paper-fab-morph>
  146 +
  147 + <paper-fab-morph class="bottom-right" vertical-align="bottom" horizontal-align="right">
  148 + <paper-fab icon="communication:chat-bubble" class="dropdown-trigger teal"></paper-fab>
  149 + <paper-material class="dropdown-content">
  150 + <paper-menu>
  151 + <paper-item>One</paper-item>
  152 + <paper-item>Two</paper-item>
  153 + <paper-item>Three</paper-item>
  154 + </paper-menu>
  155 + </paper-material>
  156 + </paper-fab-morph>
  157 +
  158 + </div>
  159 + </paper-card>
  160 +
  161 + <paper-card heading="Morph Dialog and Toolbar">
  162 + <div class="card-content">
  163 +
  164 + <paper-fab-morph is-overlay-content class="top-left">
  165 + <paper-fab icon="launch" class="dropdown-trigger"></paper-fab>
  166 + <paper-dialog class="dropdown-content">
  167 + <h2>Example Dialog</h2>
  168 +
  169 + <div class="buttons">
  170 + <paper-button dialog-dismiss>Close</paper-dialog>
  171 + </div>
  172 + </paper-dialog>
  173 + </paper-fab-morph>
  174 +
  175 + <paper-fab-morph id="show-toolbar" vertical-align="bottom" horizontal-align="right">
  176 + <paper-fab icon="more-horiz" class="dropdown-trigger"></paper-fab>
  177 + <paper-toolbar class="dropdown-content">
  178 + <iron-icon icon="create" class="flex"></iron-icon>
  179 + <iron-icon icon="attachment" class="flex"></iron-icon>
  180 + <iron-icon icon="build" class="flex"></iron-icon>
  181 + </paper-toolbar>
  182 + </paper-fab-morph>
  183 +
  184 + </div>
  185 + </paper-card>
  186 +
  187 + </body>
  188 +</html>
... ...
bower_components/paper-fab-transitions/index.html 0 → 100644
  1 +<!doctype html>
  2 +<html>
  3 +<head>
  4 +
  5 + <meta charset="utf-8">
  6 + <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7 +
  8 + <script src="../webcomponentsjs/webcomponents-lite.js"></script>
  9 + <link rel="import" href="../iron-component-page/iron-component-page.html">
  10 +
  11 +</head>
  12 +<body unresolved>
  13 +
  14 + <iron-component-page></iron-component-page>
  15 +
  16 +</body>
  17 +</html>
... ...
bower_components/paper-fab-transitions/paper-fab-morph.html 0 → 100644
  1 +<link rel="import" href="../iron-dropdown/iron-dropdown.html">
  2 +
  3 +<!--
  4 +`paper-fab-morph` can be used to wrap a floating action button and another
  5 +element which is initially hidden, and when tapping the button, it will appear
  6 +as if the button is morphing into the other element, which appears in its place.
  7 +
  8 +This element expects its content to contain two children: one with the class
  9 +`dropdown-trigger` , which is initially visible and acts as the trigger, and
  10 +another one with the class `dropdown-content` , which will be hidden until the
  11 +trigger is tapped.
  12 +
  13 +Example:
  14 +
  15 + <paper-fab-morph>
  16 + <paper-fab icon="menu" class="dropdown-trigger">
  17 + <paper-material class="dropdown-content">
  18 + <paper-menu>
  19 + <paper-item>One</paper-item>
  20 + <paper-item>Two</paper-item>
  21 + </paper-menu>
  22 + </paper-mterial>
  23 + </paper-fab-morph>
  24 +
  25 +In the example above, the menu will be wrapped by an `iron-dropdown` element
  26 +and will be positioned relative to the button. Positioning can be modified by
  27 +setting the `horizontalAlign`, `verticalAlign`, `horizontalOffset` and
  28 +`verticalOffset` properties.
  29 +
  30 +Alternatively, it's possible to set content element with fixed position, which
  31 +nullifies the dropdown positioning. This is useful for morphing into toolbars
  32 +and full screen elements for example.
  33 +
  34 +It is also possible to use an element which implements overlay behavior as the
  35 +content, instead of having it wrapped with an `iron-dropdown`. In this case, the
  36 +`isOverlayContent` property should be set to true.
  37 +
  38 +Example:
  39 +
  40 + <paper-fab-morph is-overlay-content>
  41 + <paper-fab icon="create" class="dropdown-trigger">
  42 + <paper-dialog class="dropdown-content">
  43 + <div>Dialog</div>
  44 + <paper-dialog>
  45 + </paper-fab-morph>
  46 +
  47 +### Styling
  48 +
  49 +The following custom properties and mixins are also available for styling:
  50 +
  51 +Custom property | Description | Default
  52 +----------------|-------------|----------
  53 +`--paper-morph-background` | Background color of the morphing element | `#fff`
  54 +`--paper-morph-dropdown` | Mixin applied to the `iron-dropdown` | `{}`
  55 +`--paper-morph-content` | Mixin applied to the dropdown's content | `{}`
  56 +
  57 +@hero hero.svg
  58 +@demo demo/index.html
  59 +-->
  60 +
  61 +<dom-module id="paper-fab-morph">
  62 + <template>
  63 + <style>
  64 + iron-dropdown {
  65 + @apply(--paper-morph-dropdown);
  66 + }
  67 + .dropdown-content {
  68 + @apply(--paper-morph-content);
  69 + }
  70 + #morpher {
  71 + position: fixed;
  72 + display: none;
  73 + background-color: var(--paper-morph-background, #fff);
  74 + }
  75 + </style>
  76 + <content id="fabContainer" select=".dropdown-trigger"></content>
  77 + <content id="contentContainer" select=".dropdown-content"></content>
  78 + <paper-material id="morpher"></paper-material>
  79 + </template>
  80 +</dom-module>
  81 +<script>
  82 +(function(Polymer) {
  83 + Polymer({
  84 + is: 'paper-fab-morph',
  85 + properties: {
  86 + /**
  87 + * Whether the content already has overlay behavior.
  88 + * If false, it will be wrapped by an iron-dropdown element, which can be
  89 + * configured with `horizontalAlign`, `verticalAlign`, `horizontalOffset`
  90 + * and `verticalOffset` properties.
  91 + */
  92 + isOverlayContent: {
  93 + type: Boolean,
  94 + value: false
  95 + },
  96 + /**
  97 + * The transition duration in milliseconds.
  98 + */
  99 + duration: {
  100 + type: Number,
  101 + value: 200
  102 + },
  103 + /**
  104 + * The orientation against which to align the dropdown
  105 + * horizontally relative to the trigger button.
  106 + */
  107 + horizontalAlign: {
  108 + type: String,
  109 + value: 'left',
  110 + reflectToAttribute: true
  111 + },
  112 +
  113 + /**
  114 + * The orientation against which to align the dropdown
  115 + * vertically relative to the trigger button.
  116 + */
  117 + verticalAlign: {
  118 + type: String,
  119 + value: 'top',
  120 + reflectToAttribute: true
  121 + },
  122 +
  123 + /**
  124 + * A pixel value that will be added to the position calculated for the
  125 + * given `horizontalAlign`. Use a negative value to offset to the
  126 + * left, or a positive value to offset to the right.
  127 + */
  128 + horizontalOffset: {
  129 + type: Number,
  130 + value: 0,
  131 + notify: true
  132 + },
  133 +
  134 + /**
  135 + * A pixel value that will be added to the position calculated for the
  136 + * given `verticalAlign`. Use a negative value to offset towards the
  137 + * top, or a positive value to offset towards the bottom.
  138 + */
  139 + verticalOffset: {
  140 + type: Number,
  141 + value: 0,
  142 + notify: true
  143 + }
  144 + },
  145 + observers: [
  146 + '_updateOverlayPosition(verticalAlign, horizontalAlign, verticalOffset, horizontalOffset)'
  147 + ],
  148 + ready: function() {
  149 +
  150 + this._fab = Polymer.dom(this.$.fabContainer).getDistributedNodes()[0];
  151 + this._content = Polymer.dom(this.$.contentContainer).getDistributedNodes()[0];
  152 +
  153 + if(this.isOverlayContent) {
  154 +
  155 + this._fab.addEventListener('tap', function() {
  156 + this._content.open();
  157 + }.bind(this));
  158 +
  159 + this._overlay = this._content;
  160 +
  161 + } else {
  162 +
  163 + var dropdown = document.createElement('iron-dropdown');
  164 +
  165 + Polymer.dom(dropdown).appendChild(this._content);
  166 + Polymer.dom(this.root).appendChild(dropdown);
  167 +
  168 + this._overlay = dropdown;
  169 + this._dropdown = dropdown;
  170 +
  171 + this._fab.addEventListener('tap', function() {
  172 + this._dropdown.open();
  173 + }.bind(this));
  174 +
  175 + this._updateOverlayPosition(this.verticalAlign, this.horizontalAlign, this.verticalOffset, this.horizontalOffset);
  176 + }
  177 +
  178 + this._overlay.addEventListener('iron-overlay-opened', function() {
  179 + this._morphOpen();
  180 + }.bind(this));
  181 +
  182 + this._overlay.addEventListener('iron-overlay-closed', function() {
  183 + this._morphClose();
  184 + }.bind(this));
  185 +
  186 + },
  187 + /**
  188 + * Show the content.
  189 + */
  190 + open: function() {
  191 + this._overlay.open();
  192 + },
  193 + /**
  194 + * Hide the content.
  195 + */
  196 + close: function() {
  197 + this._overlay.close();
  198 + },
  199 + _updateOverlayPosition: function(verticalAlign, horizontalAlign, verticalOffset, horizontalOffset) {
  200 + if(this._dropdown) {
  201 + var d = this._dropdown;
  202 + d.verticalAlign = verticalAlign;
  203 + d.horizontalAlign = horizontalAlign;
  204 + d.verticalOffset = verticalOffset;
  205 + d.horizontalOffset = horizontalOffset;
  206 + }
  207 + },
  208 + _morphOpen: function() {
  209 +
  210 + var fab = this._fab;
  211 + var content = this._content;
  212 +
  213 + var fabRect = fab.getBoundingClientRect();
  214 + var morpher = this.$.morpher;
  215 + var ms = morpher.style;
  216 +
  217 + ms.display = 'block';
  218 + ms.top = fabRect.top + 'px';
  219 + ms.left = fabRect.left + 'px';
  220 + ms.width = fabRect.width + 'px';
  221 + ms.height = fabRect.height + 'px';
  222 + ms.borderRadius = '50%';
  223 + ms.transitionDuration = this.duration + 'ms';
  224 +
  225 + fab.style.visibility = 'hidden';
  226 + content.style.visibility = 'hidden';
  227 +
  228 + var contentRect = content.getBoundingClientRect();
  229 +
  230 + ms.top = contentRect.top + 'px';
  231 + ms.left = contentRect.left + 'px';
  232 + ms.width = contentRect.width + 'px';
  233 + ms.height = contentRect.height + 'px';
  234 + ms.borderRadius = '';
  235 +
  236 + this.async(function() {
  237 + morpher.style.display = 'none';
  238 + content.style.visibility = 'visible';
  239 + }, this.duration);
  240 +
  241 + },
  242 + _morphClose: function() {
  243 +
  244 + var fab = this._fab;
  245 + var content = this._content;
  246 +
  247 + var contentRect = fab.getBoundingClientRect();
  248 + var morpher = this.$.morpher;
  249 + var ms = morpher.style;
  250 +
  251 + morpher.style.display = 'block';
  252 +
  253 + this.async(function() {
  254 +
  255 + var fabRect = fab.getBoundingClientRect();
  256 + ms.top = fabRect.top + 'px';
  257 + ms.left = fabRect.left + 'px';
  258 + ms.width = fabRect.width + 'px';
  259 + ms.height = fabRect.height + 'px';
  260 + ms.borderRadius = '50%';
  261 +
  262 + this.async(function() {
  263 + morpher.style.display = 'none';
  264 + fab.style.visibility = 'visible';
  265 + }, this.duration);
  266 +
  267 + });
  268 + }
  269 + });
  270 +})(Polymer);
  271 +</script>
... ...
bower_components/paper-fab-transitions/paper-fab-speed-dial.html 0 → 100644
  1 +<link rel="import" href="../iron-flex-layout/classes/iron-flex-layout.html">
  2 +<link rel="import" href="../iron-dropdown/iron-dropdown.html">
  3 +<link rel="import" href="../neon-animation/neon-animations.html">
  4 +<link rel="import" href="paper-square-grow-animation.html">
  5 +
  6 +<!--
  7 +`paper-fab-speed-dial` builds on `iron-dropdown` to allow showing a list of
  8 +speed dial actions when tapping on a floating action button.
  9 +
  10 +This element expects its content to contain two children: one with the class
  11 +`dropdown-trigger` , which is initially visible and acts as the trigger, and
  12 +another one with the class `dropdown-content` , which will be hidden until the
  13 +trigger is tapped, and will contain the speed dial option elements.
  14 +
  15 +Example:
  16 +
  17 + <paper-fab-speed-dial>
  18 + <paper-fab icon="add" class="dropdown-trigger"></paper-fab>
  19 + <div class="dropdown-content">
  20 + <paper-fab mini icon="star-border"></paper-fab>
  21 + <paper-fab mini icon="star-half"></paper-fab>
  22 + <paper-fab mini icon="star"></paper-fab>
  23 + </div>
  24 + </paper-fab-speed-dial>
  25 +
  26 +The `direction` property can be set to `top`, `bottom`, `left` or `right` to
  27 +control the direction in which the options dropdown is expanded.
  28 +
  29 +### Styling
  30 +
  31 +The following custom properties and mixins are also available for styling:
  32 +
  33 +Custom property | Description | Default
  34 +----------------|-------------|----------
  35 +`--paper-fab-speed-dial-option` | Mixin applied to each option element | `{}`
  36 +
  37 +@hero hero.svg
  38 +@demo demo/index.html
  39 +-->
  40 +
  41 +<dom-module id="paper-fab-speed-dial">
  42 + <template>
  43 + <style>
  44 + .vertical ::content .dropdown-content {
  45 + @apply(--layout-vertical);
  46 + }
  47 + .horizontal ::content .dropdown-content {
  48 + @apply(--layout-horizontal);
  49 + }
  50 + ::content .dropdown-content > * {
  51 + margin: 8px;
  52 + @apply(--paper-fab-speed-dial-option);
  53 + }
  54 + </style>
  55 + <content id="fabContainer" select=".dropdown-trigger"></content>
  56 + <iron-dropdown
  57 + id="dropdown"
  58 + open-animation-config="[[openAnimationConfig]]"
  59 + close-animation-config="[[closeAnimationConfig]]">
  60 + <content id="contentContainer" select=".dropdown-content"></content>
  61 + </iron-dropdown>
  62 + </template>
  63 +</dom-module>
  64 +<script>
  65 +(function(Polymer) {
  66 + Polymer({
  67 + is: 'paper-fab-speed-dial',
  68 + properties: {
  69 +
  70 + /**
  71 + * The direction in which to expand the options. One of `top`, `bottom`
  72 + * `left` and `right`.
  73 + */
  74 + direction: {
  75 + type: String,
  76 + value: 'bottom'
  77 + },
  78 + /**
  79 + * A pixel value for the distance of the first option fron the trigger
  80 + * button.
  81 + */
  82 + offset: {
  83 + type: Number,
  84 + value: 66
  85 + },
  86 + /**
  87 + * An animation config. If provided, this will be used to animate the
  88 + * opening of the options dropdown.
  89 + */
  90 + openAnimationConfig: {
  91 + type: Array,
  92 + value: function() {
  93 + return [{
  94 + name: 'fade-in-animation',
  95 + timing: {
  96 + delay: 150,
  97 + duration: 50
  98 + }
  99 + }, {
  100 + name: 'paper-square-grow-animation',
  101 + startSize: 56,
  102 + timing: {
  103 + delay: 150,
  104 + duration: 200
  105 + }
  106 + }];
  107 + }
  108 + },
  109 + /**
  110 + * An animation config. If provided, this will be used to animate the
  111 + * closing of the options dropdown.
  112 + */
  113 + closeAnimationConfig: {
  114 + type: Array,
  115 + value: function() {
  116 + return [{
  117 + name: 'fade-out-animation',
  118 + timing: {
  119 + duration: 200
  120 + }
  121 + }];
  122 + }
  123 + }
  124 + },
  125 + observers: [
  126 + '_updateDropdown(direction, offset)'
  127 + ],
  128 + ready: function() {
  129 +
  130 + var fab = Polymer.dom(this.$.fabContainer).getDistributedNodes()[0];
  131 + fab.addEventListener('tap', function() {
  132 + this.$.dropdown.open();
  133 + }.bind(this));
  134 +
  135 + var content = Polymer.dom(this.$.contentContainer).getDistributedNodes()[0];
  136 + content.addEventListener('tap', function() {
  137 + this.$.dropdown.close();
  138 + }.bind(this));
  139 + },
  140 + /**
  141 + * Show the speed dial options.
  142 + */
  143 + open: function() {
  144 + this.$.dropdown.open();
  145 + },
  146 + /**
  147 + * Hide the speed dial options.
  148 + */
  149 + close: function() {
  150 + this.$.dropdown.close();
  151 + },
  152 + _updateDropdown: function(direction, offset) {
  153 + var d = this.$.dropdown;
  154 + switch(direction) {
  155 + case 'bottom':
  156 + d.verticalAlign = 'top';
  157 + d.horizontalOffset = 0;
  158 + d.verticalOffset = offset;
  159 + d.classList.add('vertical');
  160 + d.classList.remove('horizontal');
  161 + break;
  162 + case 'top':
  163 + d.verticalAlign = 'bottom';
  164 + d.horizontalOffset = 0;
  165 + d.verticalOffset = offset;
  166 + d.classList.add('vertical');
  167 + d.classList.remove('horizontal');
  168 + break;
  169 + case 'right':
  170 + d.horizontalAlign = 'left';
  171 + d.horizontalOffset = offset;
  172 + d.verticalOffset = 0;
  173 + d.classList.add('horizontal');
  174 + d.classList.remove('vertical');
  175 + break;
  176 + case 'left':
  177 + d.horizontalAlign = 'right';
  178 + d.horizontalOffset = offset;
  179 + d.verticalOffset = 0;
  180 + d.classList.add('horizontal');
  181 + d.classList.remove('vertical');
  182 + break;
  183 + default:
  184 + throw 'Invalid direction. Must be one of [top, bottom, left, right].';
  185 + }
  186 + }
  187 + });
  188 +})(Polymer);
  189 +</script>
... ...
bower_components/paper-fab-transitions/paper-fab-transitions.html 0 → 100644
  1 +<link rel="import" href="paper-fab-morph.html">
  2 +<link rel="import" href="paper-fab-speed-dial.html">
  3 +
  4 +<!--
  5 +@element paper-fab-transitions
  6 +@demo http://gabiaxel.github.io/paper-fab-transitions/components/paper-fab-transitions/demo/
  7 +-->
... ...
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

526 Bytes | W: | H:

526 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin
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

506 Bytes | W: | H:

506 Bytes | W: | H:

  • 2-up
  • Swipe
  • Onion skin
demo.html 100644 → 100755
docs/ROUTETOPADataletDeveloperGuidev0.1.html 100644 → 100755
docs/images/image00.png 100644 → 100755

41.4 KB | W: | H:

41.4 KB | W: | H: