├── .idea
    ├── .name
    ├── vcs.xml
    ├── modules.xml
    ├── paper-swipe.iml
    ├── misc.xml
    └── workspace.xml
├── .gitignore
├── .yo-rc.json
├── LICENSE
├── bower.json
├── index.html
├── demo
    ├── index.html
    ├── swipe-list.html
    ├── boilerplate-generator.html
    └── simple-demo.html
├── README.md
└── paper-swipe.html


/.idea/.name:
--------------------------------------------------------------------------------
1 | paper-swipe


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | bower_components
2 | 


--------------------------------------------------------------------------------
/.yo-rc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "generator-polymer": {
3 |     "ghUser": "motss"
4 |   }
5 | }


--------------------------------------------------------------------------------
/.idea/vcs.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <project version="4">
3 |   <component name="VcsDirectoryMappings">
4 |     <mapping directory="$PROJECT_DIR$" vcs="Git" />
5 |   </component>
6 | </project>


--------------------------------------------------------------------------------
/.idea/modules.xml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <project version="4">
3 |   <component name="ProjectModuleManager">
4 |     <modules>
5 |       <module fileurl="file://$PROJECT_DIR$/.idea/paper-swipe.iml" filepath="$PROJECT_DIR$/.idea/paper-swipe.iml" />
6 |     </modules>
7 |   </component>
8 | </project>


--------------------------------------------------------------------------------
/.idea/paper-swipe.iml:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?>
2 | <module type="WEB_MODULE" version="4">
3 |   <component name="NewModuleRootManager">
4 |     <content url="file://$MODULE_DIR$" />
5 |     <orderEntry type="inheritedJdk" />
6 |     <orderEntry type="sourceFolder" forTests="false" />
7 |   </component>
8 | </module>


--------------------------------------------------------------------------------
/.idea/misc.xml:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <project version="4">
 3 |   <component name="ProjectLevelVcsManager" settingsEditedManually="false">
 4 |     <OptionsSetting value="true" id="Add" />
 5 |     <OptionsSetting value="true" id="Remove" />
 6 |     <OptionsSetting value="true" id="Checkout" />
 7 |     <OptionsSetting value="true" id="Update" />
 8 |     <OptionsSetting value="true" id="Status" />
 9 |     <OptionsSetting value="true" id="Edit" />
10 |     <ConfirmationsSetting value="0" id="Add" />
11 |     <ConfirmationsSetting value="0" id="Remove" />
12 |   </component>
13 |   <component name="ProjectRootManager" version="2" />
14 | </project>


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2015 motss
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 
23 | 


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "paper-swipe",
 3 |   "version": "1.0.2",
 4 |   "authors": [
 5 |     "motss <wes_ngrongsen@hotmail.com>"
 6 |   ],
 7 |   "description": "Custom Element with swiping feature named paper-swipe",
 8 |   "keywords": [
 9 |     "web-component",
10 |     "web-components",
11 |     "polymer",
12 |     "seed",
13 |     "paper-swipe",
14 |     "swipe",
15 |     "paper",
16 |     "motss"
17 |   ],
18 |   "main": "paper-swipe.html",
19 |   "license": "MIT",
20 |   "homepage": "https://github.com/motss/paper-swipe",
21 |   "ignore": [
22 |     "/.*",
23 |     "/test/",
24 |     "LICENSE",
25 |     "README.md"
26 |   ],
27 |   "dependencies": {
28 |     "polymer": "Polymer/polymer#^1.2.3"
29 |   },
30 |   "devDependencies": {
31 |     "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
32 |     "paper-checkbox": "polymerelements/paper-checkbox#^1.1.0",
33 |     "paper-tabs": "polymerelements/paper-tabs#^1.3.3",
34 |     "app-layout": "polymerlabs/app-layout#^0.0.6",
35 |     "iron-pages": "polymerelements/iron-pages#^1.0.5",
36 |     "iron-list": "polymerelements/iron-list#^1.2.0",
37 |     "paper-item": "PolymerElements/paper-item#^1.1.3"
38 |   }
39 | }
40 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <!--
 3 | @license
 4 | Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
 5 | This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
 6 | The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
 7 | The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
 8 | Code distributed by Google as part of the polymer project is also
 9 | subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
10 | -->
11 | <html>
12 | <head>
13 | 
14 |   <meta charset="utf-8">
15 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
16 | 
17 |   <script src="../webcomponentsjs/webcomponents-lite.min.js"></script>
18 |   <link rel="import" href="../iron-component-page/iron-component-page.html">
19 | 
20 | </head>
21 | <body>
22 |   <!-- Note: if the main element for this repository doesn't
23 |        match the folder name, add a src="&lt;main-component&gt;.html" attribute,
24 |        where &lt;main-component&gt;.html" is a file that imports all of the
25 |        components you want documented. -->
26 |   <iron-component-page view="demo"></iron-component-page>
27 | 
28 | </body>
29 | </html>
30 | 


--------------------------------------------------------------------------------
/demo/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html>
  3 |   <head>
  4 |     <meta charset="utf-8">
  5 |     <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
  6 |     <title>paper-swipe Demo</title>
  7 |     <script src="../../webcomponentsjs/webcomponents-lite.min.js"></script>
  8 |     <link rel="import" href="simple-demo.html">
  9 |     <link rel="import" href="swipe-list.html">
 10 |     <link rel="import" href="boilerplate-generator.html">
 11 | 
 12 |     <link rel="import" href="../../iron-pages/iron-pages.html">
 13 | 
 14 |     <link rel="import" href="../../paper-styles/paper-styles.html">
 15 |     <link rel="import" href="../../paper-tabs/paper-tabs.html">
 16 | 
 17 |     <link rel="import" href="../../app-layout/app-layout.html">
 18 | 
 19 |     <style is="custom-style">
 20 |       body {
 21 |         margin: 0;
 22 |         padding: 0;
 23 |         -webkit-user-select: none;
 24 |         -moz-user-select: none;
 25 |         -ms-user-select: none;
 26 |         user-select: none;
 27 | 
 28 |         box-sizing: border-box;
 29 |       }
 30 | 
 31 |       *, *:before, *:after {
 32 |         box-sizing: inherit;
 33 |       }
 34 | 
 35 |       app-toolbar {
 36 |         background-color: #1976D2;
 37 |         color: #fff;
 38 |         @apply(--layout-flex);
 39 |       }
 40 |       paper-tab {
 41 |         text-transform: uppercase;
 42 |       }
 43 | 
 44 |       iron-pages > * {
 45 |         padding-top: 8px;
 46 |         padding-bottom: 8px;
 47 |       }
 48 | 
 49 |       simple-demo {
 50 |         --simple-demo-horizontal-section-container: {
 51 |           display: block;
 52 |         };
 53 |       }
 54 |     </style>
 55 |   </head>
 56 |   <body>
 57 |     <template is="dom-bind" id="swipe" strip-whitespace>
 58 |       <app-header-layout>
 59 |         <app-header fixed shadow>
 60 |           <app-toolbar>
 61 |             <paper-tabs selected="{{tab}}" bottom-item>
 62 |               <paper-tab>
 63 |                 <div class="">
 64 |                   simple
 65 |                   <div class="">
 66 |                     demo
 67 |                   </div>
 68 |                 </div>
 69 |               </paper-tab>
 70 |               <paper-tab>
 71 |                 <div class="">
 72 |                   swipe
 73 |                   <div class="">
 74 |                     list
 75 |                   </div>
 76 |                 </div>
 77 |               </paper-tab>
 78 |               <paper-tab>
 79 |                 <div class="">
 80 |                   <div class="">
 81 |                     boilerplate
 82 |                   </div>
 83 |                   generator
 84 |                 </div>
 85 |               </paper-tab>
 86 |             </paper-tabs>
 87 |           </app-toolbar>
 88 |         </app-header>
 89 | 
 90 |         <iron-pages selected="[[tab]]">
 91 |           <simple-demo></simple-demo>
 92 |           <swipe-list></swipe-list>
 93 |           <boilerplate-generator></boilerplate-generator>
 94 |         </iron-pages>
 95 |       </app-header-layout>
 96 |     </template>
 97 | 
 98 |     <script>
 99 |       swipe.tab = 0;
100 |     </script>
101 |   </body>
102 | </html>
103 | 


--------------------------------------------------------------------------------
/demo/swipe-list.html:
--------------------------------------------------------------------------------
  1 | <link rel="import" href="../../polymer/polymer.html">
  2 | 
  3 | <link rel="import" href="../../iron-list/iron-list.html">
  4 | 
  5 | <link rel="import" href="../../paper-swipe/paper-swipe.html">
  6 | <link rel="import" href="../../paper-item/paper-icon-item.html">
  7 | 
  8 | <dom-module id="swipe-list">
  9 |   <template strip-whitespace>
 10 |     <style>
 11 |       :host {
 12 |         display: block;
 13 |         box-sizing: border-box;
 14 |         height: 100vh;
 15 |       }
 16 | 
 17 |       *, *:before, *:after {
 18 |         box-sizing: inherit;
 19 |       }
 20 | 
 21 |       iron-list {
 22 |         margin-top: 64px;
 23 |         @apply(--layout-fit);
 24 |       }
 25 |       .swipe-item {
 26 |         height: 64px;
 27 |         --paper-swipe-content: {
 28 |           background-color: #fff;
 29 |           border-bottom: 1px solid #ddd;
 30 |           padding: 12px;
 31 |         };
 32 |         --paper-swipe-underlay: {
 33 |           @apply(--layout-horizontal);
 34 |           @apply(--layout-center-center);
 35 |         };
 36 |       }
 37 |       .swipe-avatar {
 38 |         border-radius: 50%;
 39 |         height: 40px;
 40 |         width: 40px;
 41 |         display: inline-block;
 42 |         overflow: hidden;
 43 |         background: #ccc;
 44 |       }
 45 |       .swipe-underlay {
 46 |         color: #e0e0e0;
 47 |       }
 48 |       .a {
 49 |         background-color: #1976D2;
 50 |       }
 51 |       .b {
 52 |         background-color: #D32F2F;
 53 |       }
 54 |       .c {
 55 |         background-color: #0097A7;
 56 |       }
 57 |       .d {
 58 |         background-color: #388E3C;
 59 |       }
 60 |       .e {
 61 |         background-color: #FBC02D;
 62 |       }
 63 |       .f {
 64 |         background-color: #C2185B;
 65 |       }
 66 |       .g {
 67 |         background-color: #7B1FA2;
 68 |       }
 69 |     </style>
 70 | 
 71 |     <iron-list id="swipeList" items="[[swipeList]]">
 72 |       <template strip-whitespace>
 73 |         <paper-swipe class="swipe-item" peek-offset="0" fade on-edge="_onEdge">
 74 |           <paper-icon-item content>
 75 |             <div class$="swipe-avatar[[_randomColor(item.index)]]" item-icon></div>
 76 |             [[index]], [[item.content]] at [[item.index]]
 77 |           </paper-icon-item>
 78 |           <div underlay class$="swipe-underlay[[_randomColor(item.index)]]">
 79 |             [[index]], [[item.underlay]] at [[item.index]]
 80 |           </div>
 81 |         </paper-swipe>
 82 |       </template>
 83 |     </iron-list>
 84 |   </template>
 85 |   <script>
 86 |     Polymer({
 87 |       is: 'swipe-list',
 88 | 
 89 |       properties: {
 90 |         swipeList: {
 91 |           type: Array,
 92 |           value: function() {
 93 |             for (var i = 0, j = []; i < 100; i++) {
 94 |               j.push({
 95 |                 content: 'Lorem ipsum dolor sit amet.',
 96 |                 underlay: 'Lorem ipsum.',
 97 |                 index: i
 98 |               });
 99 |             }
100 |             return j;
101 |           }
102 |         },
103 | 
104 |       },
105 | 
106 |       _randomColor: function() {
107 |         var _colors = ['a', 'b', 'c', 'd', 'e', 'f', 'g', ''];
108 |         var _n = Math.floor(Math.random() * 8);
109 |         var _sc = ' ' + _colors[_n];
110 |         return _sc;
111 |       },
112 | 
113 |       _onEdge: function(ev) {
114 |         var _modelItem = ev.model.item;
115 |         var _target = ev.target;
116 |         // Remove swiped item from the list array.
117 |         this.splice('swipeList', ev.model.index, 1);
118 |         this.async(function() {
119 |           // iron-list will retain the generated list item at the exact position and reuse the item.
120 |           // However, iron-list only replaces the content of the list item.
121 |           // Which means that resetPosition() is required when new content comes in.
122 |           _target.resetPosition();
123 |           // Then update the size for the item.
124 |           this.$.swipeList.updateSizeForItem(ev.model.index);
125 |         }, 1);
126 |       },
127 | 
128 |     });
129 |   </script>
130 | </dom-module>
131 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | [![GitHub version](https://badge.fury.io/gh/motss%2Fpaper-swipe.svg)](http://badge.fury.io/gh/motss%2Fpaper-swipe)
  2 | [![Bower version](https://badge.fury.io/bo/paper-swipe.svg)](http://badge.fury.io/bo/paper-swipe)
  3 | 
  4 | # paper-swipe
  5 | 
  6 | ## Update (1.0.0)
  7 | Highlights of v1.0.0:
  8 | - Added `fade` attribute for simple fade in/ fade out effect when swiping.
  9 | - Removed `resetSwipe` attribute which is redundant and being taken care by new method `resetPosition()`.
 10 | - Fixed layout issue on Safari Mobile.
 11 | - Added custom mixins to style the element.
 12 | - Prettier demo.
 13 | - Code restructured.
 14 | 
 15 | See the [component page](http://motss.github.io/paper-swipe/components/paper-swipe/) for more information.
 16 | 
 17 | `paper-swipe` provides enables swipe gestures to swipe content to either the left or the right to unveil the underlay
 18 | behind it.
 19 | 
 20 | Example:
 21 | 
 22 |     <paper-swipe>By default, it can be swiped to either the left or the right.</paper-swipe>
 23 |     <paper-swipe disable-swipe>Swipe Gestures disabled</paper-swipe>
 24 |     <paper-swipe fade>Swipe with fade in/ fade out effect</paper-swipe>
 25 |     <paper-swipe left-swipe>Only Left Swipe</paper-swipe>
 26 |     <paper-swipe right-swipe>Only Right Swipe</paper-swipe>
 27 |     <paper-swipe on-tap-underlay='tapHandler'>Tap Event Handler</paper-swipe>
 28 |     <paper-swipe on-edge='edgeHandler'>Panel is now at the edge of the screen</paper-swipe>
 29 | 
 30 | `paper-swipe` allows user to use the custom DOM in the body to create basically any contents and it has two different
 31 | sections which allows the customization by using the `content` and `underlay` attributes:
 32 | 
 33 | Example:
 34 | 
 35 |     <paper-swipe>
 36 |       <div underlay>Underlay content goes here...</div>
 37 |       <div content>Content of swiping element goes here...</div>
 38 |     </paper-swipe>
 39 | 
 40 | ## Event handling
 41 | 
 42 | `paper-swipe` has been added some features to fire certain events such as `tap-underlay` and `edge` so that user can
 43 | make use of it to perform additional functions as you like:
 44 | 
 45 | Example:
 46 | 
 47 |     <paper-swipe on-edge="edgeHandler"
 48 |       <div underlay>Underlay content goes here...</div>
 49 |       <div content>Fire `edge` event when the panel is at the edge of the screen...</div>
 50 |     </paper-swipe>
 51 | 
 52 |     <paper-swipe on-tap-underlay="tapHandler">
 53 |       <div underlay>Underlay content goes here...</div>
 54 |       <div content>Fire `tap-underlay` event when the panel is being clicked...</div>
 55 |     </paper-swipe>
 56 | 
 57 | There are two ways to disable the swiping on the content panel by using `on-tap-underlay` or `on-click` event handler:
 58 | 
 59 | Example:
 60 | 
 61 |     <paper-swipe on-edge="resetPanel" on-tap-underlay="disablePanel">
 62 |         <div underlay>Click to reset the panel from the edge to its origin...</div>
 63 |         <div content>Swipe to remove the panel...</div>
 64 |     </paper-swipe>
 65 | 
 66 |     <paper-swipe on-edge="resetPanel">
 67 |         <div underlay on-click="disablePanel">Click to reset the panel from the edge to its origin...</div>
 68 |         <div content>Swipe to remove the panel...</div>
 69 |     </paper-swipe>
 70 | 
 71 | ## Styling
 72 | Note, it's important that specifying explicit height to the `paper-swipe` will render both the `content` and `underlay` layers to have the same height. Especially when multiple `paper-swipe` on the same document, explicit height will make all elements look consistent.
 73 | 
 74 |     paper-swipe {
 75 |       height: 100px;
 76 |     }
 77 | 
 78 |     paper-swipe {
 79 |       --paper-swipe: {
 80 |         height: 100px;
 81 |       };
 82 |     }
 83 | 
 84 | The following custom properties and mixins are also available for styling:
 85 | 
 86 | Custom mixin | Description | Default
 87 | ----------------|-------------|----------
 88 | `--paper-swipe` | `Mixin applied to paper-swipe` | `{}`
 89 | `--paper-swipe-swipeable-container` | `Mixin applied to paper-swipe-swipeable-container` | `{}`
 90 | `--paper-swipe-content` | `Mixin applied to swipeable content` | `{}`
 91 | `--paper-swipe-underlay` | `Mixin applied to underlay beneath the swipeable content` | `{}`
 92 | 
 93 | ## Demo + boilerplate generator
 94 | [paper-swipe demo + boilerplate generator](http://motss.github.io/paper-swipe/components/paper-swipe/demo/index.html)
 95 | 
 96 | ## Getting Started
 97 | 
 98 | 1. Install with bower  
 99 | `bower install --save paper-swipe`
100 | 
101 | 2. Load the web component and the dependencies
102 | 
103 | ```html
104 | <script src="/path-to-bower-components/webcomponentsjs/webcomponents-lite.min.js"></script>
105 | <link rel="import" href="/path-to-bower-components/polymer/polymer.html">
106 | <link rel="import" href="/path-to-bower-components/paper-swipe/paper-swipe.html">
107 | ```
108 | 
109 | 3. Markup with &lt;paper-swipe&gt;&lt;/paper-swipe&gt;
110 | 
111 | 4. Done
112 | 
113 | ### Supported Browsers
114 | 
115 | [Same as Polymer](http://www.polymer-project.org/resources/compatibility.html)
116 | 


--------------------------------------------------------------------------------
/demo/boilerplate-generator.html:
--------------------------------------------------------------------------------
  1 | <link rel="import" href="../../polymer/polymer.html">
  2 | 
  3 | <dom-module id="boilerplate-generator">
  4 |   <template strip-whitespace>
  5 |   <style>
  6 |     :host {
  7 |       box-sizing: border-box;
  8 |       display: block;
  9 |     }
 10 | 
 11 |     *, *:before, *:after {
 12 |       box-sizing: border-box;
 13 |     }
 14 | 
 15 |     .horizontal-section-container {
 16 |       @apply(--layout-horizontal);
 17 |       @apply(--layout-center-justified);
 18 |       @apply(--layout-wrap);
 19 |       @apply(--simple-demo-horizontal-section-container);
 20 |     }
 21 |     .horizontal-section-container > div {
 22 |       margin-left: 24px;
 23 |     }
 24 | 
 25 |     .horizontal-section {
 26 |       background-color: #fff;
 27 |       padding: 24px;
 28 |       margin-right: 24px;
 29 |       min-width: 130px;
 30 |       overflow-x: hidden;
 31 |       @apply(--shadow-elevation-2dp);
 32 |     }
 33 | 
 34 |     h4 {
 35 |       text-transform: capitalize;
 36 |     }
 37 | 
 38 |     paper-checkbox {
 39 |       margin-bottom: 20px;
 40 |       --paper-checkbox-checked-color: #00796B;
 41 |     }
 42 |     paper-checkbox.offset {
 43 |       --paper-checkbox-checked-color: #512DA8;
 44 |     }
 45 | 
 46 |     paper-swipe {
 47 |       --paper-swipe-content: {
 48 |         padding: 20px;
 49 |         color: var(--text-primary-color);
 50 |         height: 100px;
 51 |         cursor: pointer;
 52 |         background: var(--paper-blue-700, #1976D2);
 53 |       };
 54 |       --paper-swipe-underlay: {
 55 |         padding: 20px;
 56 |         color: var(--text-primary-color);
 57 |         height: 100px;
 58 |         background: var(--paper-orange-500, #FF9800);
 59 |       };
 60 |     }
 61 | 
 62 |     .ev-name {
 63 |       font-style: italic;
 64 |       font-weight: bold;
 65 |     }
 66 |     .stat-flag {
 67 |       text-align: right;
 68 |       @apply(--layout-flex-auto);
 69 |     }
 70 |     .ctrl-div {
 71 |       @apply(--layout);
 72 |     }
 73 |     .swipe-boilerplate {
 74 |       width: 90%;
 75 |       border: 1px solid #cfd8dc;
 76 |       color: #607d8b;
 77 |       display: block;
 78 |       height: 32px;
 79 |       -webkit-flex-shrink: 0;
 80 |       flex-shrink: 0;
 81 |       padding: 10px 4px;
 82 |       margin: 0 13px 12px;
 83 |       -moz-box-sizing: border-box;
 84 |       box-sizing: border-box;
 85 |       border-radius: 2px;
 86 |       font-size: 12px;
 87 |     }
 88 | 
 89 |     hr {
 90 |       color: #B6B6B6;
 91 |       margin-bottom: 20px;
 92 |     }
 93 | 
 94 |     .optional-note {
 95 |       font-size: 10px;
 96 |       font-style: italic;
 97 |       color: #727272;
 98 |     }
 99 | 
100 |     .required-note {
101 |       font-size: 12px;
102 |       font-style: italic;
103 |     }
104 |   </style>
105 | 
106 |   <div class="horizontal-section-container">
107 |     <div>
108 |       <h4>Element's Boilerplate</h4>
109 |       <section class="horizontal-section code-section">
110 |         <div  on-iron-change="genCode">
111 |           <div>
112 |             <paper-checkbox data-toggle="disable" checked="{{takeDisable}}" disabled="{{nodisable}}">
113 |               <span>disableSwipe</span>
114 |             </paper-checkbox>
115 |           </div>
116 |           <div>
117 |             <paper-checkbox data-toggle="fade" checked="{{takeFade}}" disabled="{{nofade}}">
118 |               <span>fade<span class="optional-note">&emsp;//Note: Set true if fade in/ fade out while swiping towards/ away from the screen edge.</span></span>
119 |             </paper-checkbox>
120 |           </div>
121 |           <div>
122 |             <paper-checkbox data-toggle="left" checked="{{takeLeft}}" disabled="{{noleft}}">
123 |               <span>swipeLeft</span>
124 |             </paper-checkbox>
125 |           </div>
126 |           <div>
127 |             <paper-checkbox data-toggle="right" checked="{{takeRight}}" disabled="{{noright}}">
128 |               <span>swipeRight</span>
129 |             </paper-checkbox>
130 |           </div>
131 |           <div>
132 |             <paper-checkbox data-toggle="edge" checked="{{takeEdge}}" disabled="{{noedge}}">
133 |               <span>onEdge</span>
134 |             </paper-checkbox>
135 |           </div>
136 |           <div>
137 |             <paper-checkbox data-toggle="underlay" checked="{{takeUnderlay}}" disabled="{{nounderlay}}">
138 |               <span>onTapUnderlay</span>
139 |             </paper-checkbox>
140 |           </div>
141 |           <hr>
142 |           <div>
143 |             <paper-checkbox class="offset" data-toggle="peek" checked="{{takePeek}}" disabled="{{nopeek}}">
144 |               <span>peekOffset<span class="optional-note">&emsp;//Optional: Number of pixels needed to slide in order to 'peek' the underlay's content.</span></span>
145 |             </paper-checkbox>
146 |           </div>
147 |           <div>
148 |             <paper-checkbox class="offset" data-toggle="slide" checked="{{takeSlide}}" disabled="{{noslide}}">
149 |               <span>slideOffset<span class="optional-note">&emsp;//Optional: Number of pixels needed to slide to let the slider moves to the edge itself.</span></span>
150 |             </paper-checkbox>
151 |           </div>
152 |         </div>
153 |         <hr>
154 |         <div>
155 |           <paper-checkbox class="required" checked disabled>
156 |             <span>content<span class="required-note">&emsp;//Required: Add the attribute on an element as the sliding panel. For more info, please refer to the doc.</span></span>
157 |           </paper-checkbox>
158 |         </div>
159 |         <div>
160 |           <paper-checkbox class="required" checked disabled>
161 |             <span>underlay<span class="required-note">&emsp;//Optional: Add the attribute on another element as the layer situated beneath the sliding panel. For more info, please refer to the doc.</span></span>
162 |           </paper-checkbox>
163 |         </div>
164 |         <input class="swipe-boilerplate" value="{{swipeCode}}" title="paper-swipe-boilerplate" readonly onclick="this.select();">
165 |       </section>
166 |     </div>
167 |   </div>
168 |   </template>
169 |   <script>
170 |     var swipeCount = 0;
171 | 
172 |     Polymer({
173 |       is: 'boilerplate-generator',
174 | 
175 |       properties: {
176 |         swipeCode: {
177 |           type: String,
178 |           value: '<paper-swipe></paper-swipe>'
179 |         },
180 |         nodisable: {
181 |           type: Boolean,
182 |           value: false
183 |         },
184 |         nopeek: {
185 |           type: Boolean,
186 |           value: false
187 |         },
188 |         nofade: {
189 |           type: Boolean,
190 |           value: false
191 |         },
192 |         noslide: {
193 |           type: Boolean,
194 |           value: false
195 |         },
196 |         noleft: {
197 |           type: Boolean,
198 |           value: false
199 |         },
200 |         noright: {
201 |           type: Boolean,
202 |           value: false
203 |         },
204 |         noedge: {
205 |           type: Boolean,
206 |           value: false
207 |         },
208 |         nounderlay: {
209 |           type: Boolean,
210 |           value: false
211 |         },
212 | 
213 |       },
214 | 
215 |       genCode: function(ev) {
216 |         var target = ev.target;
217 |         if (target.localName !== 'paper-checkbox' &&  !target.hasAttribute('data-toggle')) {
218 |           return;
219 |         }
220 | 
221 |         var targeting = target.getAttribute('data-toggle');
222 |         switch (targeting) {
223 |           case 'disable':
224 |             if (this.swipeCode) {
225 |               this.noleft = this.noright = this.nopeek = this.nofade = this.noslide = this.noedge = this.nounderlay = target.checked;
226 |               this.swipeCode = this._modCode(target.checked, this.swipeCode, ' disable-swipe', true);
227 |             }
228 |             break;
229 |           case 'peek':
230 |             if (this.swipeCode) {
231 |               this.nodisable = this._setDisable(target.checked);
232 |               this.swipeCode = this._modCode(target.checked, this.swipeCode, ' peek-offset=""');
233 |             }
234 |             break;
235 |           case 'fade':
236 |             if (this.swipeCode) {
237 |               this.nodisable = this._setDisable(target.checked);
238 |               this.swipeCode = this._modCode(target.checked, this.swipeCode, ' fade');
239 |             }
240 |             break;
241 |           case 'slide':
242 |             if (this.swipeCode) {
243 |               this.nodisable = this._setDisable(target.checked);
244 |               this.swipeCode = this._modCode(target.checked, this.swipeCode, ' slide-offset=""');
245 |             }
246 |             break;
247 |           case 'left':
248 |             if (this.swipeCode) {
249 |               this.nodisable = this._setDisable(target.checked);
250 |               this.noright = target.checked;
251 |               this.swipeCode = this._modCode(target.checked, this.swipeCode, ' swipe-left')
252 |             }
253 |             break;
254 |           case 'right':
255 |             if (this.swipeCode) {
256 |               this.nodisable = this._setDisable(target.checked);
257 |               this.noleft = target.checked;
258 |               this.swipeCode = this._modCode(target.checked, this.swipeCode, ' swipe-right');
259 |             }
260 |             break;
261 |           case 'edge':
262 |             if (this.swipeCode) {
263 |               this.nodisable = this._setDisable(target.checked);
264 |               this.swipeCode = this._modCode(target.checked, this.swipeCode, ' on-edge=""');
265 |             }
266 |             break;
267 |           case 'underlay':
268 |             if (this.swipeCode) {
269 |               this.nodisable = this._setDisable(target.checked);
270 |               this.swipeCode = this._modCode(target.checked, this.swipeCode, ' on-tap-underlay=""');
271 |             }
272 |             break;
273 |           default:
274 |             console.log('Error... at: ' + targeting);
275 |         }
276 |       },
277 | 
278 |       _setDisable: function(check){
279 |         check? swipeCount++: swipeCount--;
280 |         return swipeCount !== 0;
281 |       },
282 | 
283 |       _modCode: function(checked, code, ins, rst) {
284 |         var _modStr = '<paper-swipe disable-swipe></paper-swipe>', insertPt = 0, firstChunk = '', lastChunk = '';
285 |         if (checked && code !== undefined && ins !== undefined) {
286 |           if (!rst && rst === undefined) {
287 |             insertPt = code.indexOf('>');
288 |             firstChunk = code.substring(0, insertPt);
289 |             lastChunk = code.substring(insertPt);
290 |             _modStr = firstChunk.concat(ins, lastChunk);
291 |           }
292 |         }else {
293 |           _modStr = code.replace(ins, '');
294 |         }
295 |         return _modStr;
296 |       },
297 | 
298 |     });
299 |   </script>
300 | </dom-module>
301 | 


--------------------------------------------------------------------------------
/demo/simple-demo.html:
--------------------------------------------------------------------------------
  1 | <link rel="import" href="../../polymer/polymer.html">
  2 | <link rel="import" href="../paper-swipe.html">
  3 | 
  4 | <link rel="import" href="../../paper-styles/demo-pages.html">
  5 | <link rel="import" href="../../paper-ripple/paper-ripple.html">
  6 | <link rel="import" href="../../paper-checkbox/paper-checkbox.html">
  7 | 
  8 | <dom-module id="simple-demo">
  9 |   <template strip-whitespace>
 10 |     <style>
 11 |       :host {
 12 |         box-sizing: border-box;
 13 |         display: block;
 14 |         /*font-size: 14p;
 15 |         margin: 0;
 16 |         padding: 24px;
 17 |         background-color: var(--paper-grey-50);
 18 |         @apply(-paper-font-common-base);*/
 19 |       }
 20 | 
 21 |       *, *:before, *:after {
 22 |         box-sizing: border-box;
 23 |       }
 24 | 
 25 |       .horizontal-section-container {
 26 |         @apply(--layout-horizontal);
 27 |         @apply(--layout-center-justified);
 28 |         @apply(--layout-wrap);
 29 |         @apply(--simple-demo-horizontal-section-container);
 30 |       }
 31 |       .horizontal-section-container > div {
 32 |         margin-left: 24px;
 33 |       }
 34 | 
 35 |       .horizontal-section {
 36 |         background-color: #fff;
 37 |         padding: 24px;
 38 |         margin-right: 24px;
 39 |         min-width: 130px;
 40 |         overflow-x: hidden;
 41 |         @apply(--shadow-elevation-2dp);
 42 |       }
 43 | 
 44 |       h4 {
 45 |         text-transform: capitalize;
 46 |       }
 47 | 
 48 |       paper-checkbox {
 49 |         margin-bottom: 20px;
 50 |         --paper-checkbox-checked-color: #00796B;
 51 |       }
 52 |       paper-checkbox.offset {
 53 |         --paper-checkbox-checked-color: #512DA8;
 54 |       }
 55 | 
 56 |       paper-swipe {
 57 |         height: 100px;
 58 |         --paper-swipe-content: {
 59 |           padding: 20px;
 60 |           color: var(--text-primary-color);
 61 |           height: 100px;
 62 |           cursor: pointer;
 63 |           background: var(--paper-blue-700, #1976D2);
 64 |         };
 65 |         --paper-swipe-underlay: {
 66 |           padding: 20px;
 67 |           color: var(--text-primary-color);
 68 |           height: 100px;
 69 |           background: var(--paper-orange-500, #FF9800);
 70 |         };
 71 |       }
 72 | 
 73 |       .ev-name {
 74 |         font-style: italic;
 75 |         font-weight: bold;
 76 |       }
 77 |       .stat-flag {
 78 |         text-align: right;
 79 |         @apply(--layout-flex-auto);
 80 |       }
 81 |       .ctrl-div {
 82 |         @apply(--layout);
 83 |       }
 84 |       .swipe-boilerplate {
 85 |         width: 90%;
 86 |         border: 1px solid #cfd8dc;
 87 |         color: #607d8b;
 88 |         display: block;
 89 |         height: 32px;
 90 |         -webkit-flex-shrink: 0;
 91 |         flex-shrink: 0;
 92 |         padding: 10px 4px;
 93 |         margin: 0 13px 12px;
 94 |         -moz-box-sizing: border-box;
 95 |         box-sizing: border-box;
 96 |         border-radius: 2px;
 97 |         font-size: 12px;
 98 |       }
 99 | 
100 |       hr {
101 |         color: #B6B6B6;
102 |         margin-bottom: 20px;
103 |       }
104 | 
105 |       .optional-note {
106 |         font-size: 10px;
107 |         font-style: italic;
108 |         color: #727272;
109 |       }
110 | 
111 |       .required-note {
112 |         font-size: 12px;
113 |         font-style: italic;
114 |       }
115 |     </style>
116 | 
117 |     <div class="horizontal-section-container">
118 |       <div>
119 |         <h4>disable swipe</h4>
120 |         <div class="horizontal-section">
121 |           <div class="ctrl-div">
122 |             <paper-checkbox checked="{{disableCheck}}">Check to disable swiping</paper-checkbox>
123 |             <span class="stat-flag">disable-swipe: <span>{{disableCheck}}</span></span>
124 |           </div>
125 |           <paper-swipe id="disabled" disable-swipe="{{disableCheck}}">
126 |             <div id="content" content>
127 |               <div class="label">Swipe disabled</div>
128 |               <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, praesentium.</div>
129 |             </div>
130 |           </paper-swipe>
131 |         </div>
132 |       </div>
133 | 
134 |       <div>
135 |         <h4>left swipe only</h4>
136 |         <div class="horizontal-section">
137 |           <div class="ctrl-div">
138 |             <paper-checkbox checked disabled>Checked to enable only left swiping</paper-checkbox>
139 |           </div>
140 |           <paper-swipe id="left" swipe-left>
141 |             <div underlay>
142 |               <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, voluptas.</div>
143 |             </div>
144 |             <div content>
145 |               <div class="label">Only Swipe Left is allowed</div>
146 |               <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, eaque.</div>
147 |             </div>
148 |           </paper-swipe>
149 |         </div>
150 |       </div>
151 | 
152 |       <div>
153 |         <h4>right swipe only</h4>
154 |         <div class="horizontal-section">
155 |           <div class="ctrl-div">
156 |             <paper-checkbox checked disabled>Checked to enable only right swiping</paper-checkbox>
157 |           </div>
158 |           <paper-swipe id="right" swipe-right>
159 |             <div underlay>
160 |               <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Natus, repellendus?</div>
161 |             </div>
162 |             <div content>
163 |               <div class="label">Only Swipe Right is allowed</div>
164 |               <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, dolore?</div>
165 |             </div>
166 |           </paper-swipe>
167 |         </div>
168 |       </div>
169 | 
170 |       <div>
171 |         <h4>either side swiping</h4>
172 |         <div class="horizontal-section">
173 |           <div class="ctrl-div">
174 |             <paper-checkbox checked disabled>By default, can be swiped to either side</paper-checkbox>
175 |           </div>
176 |           <paper-swipe id="either">
177 |             <div underlay>
178 |               <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure, temporibus.</div>
179 |             </div>
180 |             <div content>
181 |               <div class="label">Swipe to any side</div>
182 |               <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam, vel.</div>
183 |             </div>
184 |           </paper-swipe>
185 |         </div>
186 |       </div>
187 | 
188 |       <div>
189 |         <h4>with tap handler</h4>
190 |         <div class="horizontal-section">
191 |           <div class="ctrl-div">
192 |             <paper-checkbox checked disabled>Left swiping is enabled here!</paper-checkbox>
193 |           </div>
194 |           <div class="">
195 |             <paper-checkbox checked disabled><span class="ev-name">tap-underlay</span> event will be fired here!</paper-checkbox>
196 |           </div>
197 |           <paper-swipe id="tap" swipe-left on-tap-underlay="tapAction">
198 |             <div underlay>
199 |               <paper-ripple></paper-ripple>
200 |               <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque, quae!</div>
201 |             </div>
202 |             <div content>
203 |               <paper-ripple></paper-ripple>
204 |               <div class="label">Fire tap-underlay event</div>
205 |               <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, sunt!</div>
206 |             </div>
207 |           </paper-swipe>
208 |         </div>
209 |       </div>
210 | 
211 |       <div>
212 |         <h4>fire event when content has been dragged to the edge!</h4>
213 |         <div class="horizontal-section">
214 |           <div class="ctrl-div">
215 |             <paper-checkbox checked disabled>Left swiping only!</paper-checkbox>
216 |           </div>
217 |           <div class="">
218 |             <paper-checkbox checked disabled>Swipe to fire <span class="ev-name">edge</span> event!</paper-checkbox>
219 |           </div>
220 |           <paper-swipe id="tap" swipe-left on-edge="edgeAction">
221 |             <div underlay>
222 |               <paper-ripple></paper-ripple>
223 |               <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea, ipsa!</div>
224 |             </div>
225 |             <div content>
226 |               <paper-ripple></paper-ripple>
227 |               <div class="label">Fire 'edge' event</div>
228 |               <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, sunt!</div>
229 |             </div>
230 |           </paper-swipe>
231 |         </div>
232 |       </div>
233 | 
234 |       <div>
235 |         <h4>reset swiping position with onClick on underlay!</h4>
236 |         <div class="horizontal-section">
237 |           <div class="ctrl-div">
238 |             <paper-checkbox checked disabled>Swipe left or right...</paper-checkbox>
239 |           </div>
240 |           <div>
241 |             <paper-checkbox checked disabled>Tap on underlay (orange panel) to dismiss swipe!</paper-checkbox>
242 |           </div>
243 |           <div>
244 |             <paper-checkbox checked disabled>This is achieved by using <span class="ev-name">on-click</span> event!</paper-checkbox>
245 |           </div>
246 |           <paper-swipe id="tap" peek-offset="-24" on-edge="disableAction">
247 |             <div underlay on-click="resetAction">
248 |               <paper-ripple></paper-ripple>
249 |               <div>Click to reset the position of the panel!</div>
250 |             </div>
251 |             <div content>
252 |               <paper-ripple></paper-ripple>
253 |               <div class="label">Reset Swipe Position</div>
254 |               <div>Swipe left or right to remove the panel.</div>
255 |             </div>
256 |           </paper-swipe>
257 | 
258 | 
259 |         </div>
260 |       </div>
261 | 
262 |       <div>
263 |         <h4>reset swiping position with onTapUnderlay event handler!</h4>
264 |         <div class="horizontal-section">
265 |           <div class="ctrl-div">
266 |             <paper-checkbox checked disabled>Swipe left or right...</paper-checkbox>
267 |           </div>
268 |           <div>
269 |             <paper-checkbox checked disabled>Tap on underlay (orange panel) to dismiss swipe!</paper-checkbox>
270 |           </div>
271 |           <div>
272 |             <paper-checkbox checked disabled>This is achieved by using <span class="ev-name">tap-underlay</span> event!</paper-checkbox>
273 |           </div>
274 |           <paper-swipe id="tap" peek-offset="-24" on-edge="disableAction" on-tap-underlay="resetAction">
275 |             <div underlay>
276 |               <paper-ripple></paper-ripple>
277 |               <div>Click to reset the position of the panel!</div>
278 |             </div>
279 |             <div content>
280 |               <paper-ripple></paper-ripple>
281 |               <div class="label">Reset Swipe Position</div>
282 |               <div>Swipe left or right to remove the panel.</div>
283 |             </div>
284 |           </paper-swipe>
285 |         </div>
286 |       </div>
287 | 
288 |       <div>
289 |         <h4>Fade while swiping towards/ away from the screen edge.</h4>
290 |         <div class="horizontal-section">
291 |           <div class="ctrl-div">
292 |             <paper-checkbox checked disabled>Swipe left or right...</paper-checkbox>
293 |           </div>
294 |           <div>
295 |             <paper-checkbox checked disabled>Swipeable content fades out while swiping towards the screen edge OR fades in while swiping away from the screen edge.</paper-checkbox>
296 |           </div>
297 |           <div>
298 |             <paper-checkbox checked disabled>Tap on underlay (orange panel) to dismiss swipe!</paper-checkbox>
299 |           </div>
300 |           <paper-swipe id="tap" fade peek-offset="-24" on-tap-underlay="resetAction">
301 |             <div underlay>
302 |               <paper-ripple></paper-ripple>
303 |               <div>Click to reset the position of the panel!</div>
304 |             </div>
305 |             <div content>
306 |               <paper-ripple></paper-ripple>
307 |               <div class="label">Reset Swipe Position</div>
308 |               <div>Swipe left or right to remove the panel.</div>
309 |             </div>
310 |           </paper-swipe>
311 |         </div>
312 |       </div>
313 |     </div>
314 |   </template>
315 |   <script>
316 |     Polymer({
317 |       is: 'simple-demo',
318 | 
319 |       tapAction: function(ev) {
320 |         var target = ev.detail.target.target,
321 |         parentElem;
322 |         if (target.localName === 'paper-ripple'){
323 |           parentElem = target.parentElement;
324 |           if (parentElem.attributes[0].name === 'content'){
325 |             console.log('Content is clicked');
326 |           }else {
327 |             console.log('Underlay is clicked!');
328 |           }
329 |         }
330 |       },
331 | 
332 |       edgeAction: function(ev) {
333 |         console.log('Edge!');
334 |       },
335 | 
336 |       disableAction: function(ev) {
337 |         var target = ev.target;
338 |         while (target.localName !== 'paper-swipe'){
339 |           target = target.parentElement;
340 |         }
341 |         target.setAttribute('disable-swipe', true);
342 |       },
343 | 
344 |       resetAction: function(ev) {
345 |         var target = ev.target;
346 |         if (ev.type === 'tap-underlay') {
347 |           target = ev.detail.target.target;
348 |         }
349 |         while (target.localName !== 'paper-swipe') {
350 |           target = target.parentElement;
351 |         }
352 |         target.removeAttribute('disable-swipe');
353 |         target.resetPosition();
354 |       },
355 | 
356 |     });
357 |   </script>
358 | </dom-module>
359 | 


--------------------------------------------------------------------------------
/paper-swipe.html:
--------------------------------------------------------------------------------
  1 | <link rel="import" href="../polymer/polymer.html">
  2 | <link rel="import" href="../iron-resizable-behavior/iron-resizable-behavior.html">
  3 | <!--
  4 | `paper-swipe` provides enables swipe gestures to swipe content to either the left or the right to unveil the underlay
  5 | behind it.
  6 | 
  7 | Example:
  8 | 
  9 |     <paper-swipe>By default, it can be swiped to either the left or the right.</paper-swipe>
 10 |     <paper-swipe disable-swipe>Swipe Gestures disabled</paper-swipe>
 11 |     <paper-swipe fade>Swipe with fade in/ fade out effect</paper-swipe>
 12 |     <paper-swipe left-swipe>Only Left Swipe</paper-swipe>
 13 |     <paper-swipe right-swipe>Only Right Swipe</paper-swipe>
 14 |     <paper-swipe on-tap-underlay='tapHandler'>Tap Event Handler</paper-swipe>
 15 |     <paper-swipe on-edge='edgeHandler'>Panel is now at the edge of the screen</paper-swipe>
 16 | 
 17 | `paper-swipe` allows user to use the custom DOM in the body to create basically any contents and it has two different
 18 | sections which allows the customization by using the `content` and `underlay` attributes:
 19 | 
 20 | Example:
 21 | 
 22 |     <paper-swipe>
 23 |       <div underlay>Underlay content goes here...</div>
 24 |       <div content>Content of swiping element goes here...</div>
 25 |     </paper-swipe>
 26 | 
 27 | ## Event handling
 28 | 
 29 | `paper-swipe` has been added some features to fire certain events such as `tap-underlay` and `edge` so that user can
 30 | make use of it to perform additional functions as you like:
 31 | 
 32 | Example:
 33 | 
 34 |     <paper-swipe on-edge="edgeHandler"
 35 |       <div underlay>Underlay content goes here...</div>
 36 |       <div content>Fire `edge` event when the panel is at the edge of the screen...</div>
 37 |     </paper-swipe>
 38 | 
 39 |     <paper-swipe on-tap-underlay="tapHandler">
 40 |       <div underlay>Underlay content goes here...</div>
 41 |       <div content>Fire `tap-underlay` event when the panel is being clicked...</div>
 42 |     </paper-swipe>
 43 | 
 44 | There are two ways to disable the swiping on the content panel by using `on-tap-underlay` or `on-click` event handler:
 45 | 
 46 | Example:
 47 | 
 48 |     <paper-swipe on-edge="resetPanel" on-tap-underlay="disablePanel">
 49 |         <div underlay>Click to reset the panel from the edge to its origin...</div>
 50 |         <div content>Swipe to remove the panel...</div>
 51 |     </paper-swipe>
 52 | 
 53 |     <paper-swipe on-edge="resetPanel">
 54 |         <div underlay on-click="disablePanel">Click to reset the panel from the edge to its origin...</div>
 55 |         <div content>Swipe to remove the panel...</div>
 56 |     </paper-swipe>
 57 | 
 58 | ## Styling
 59 | Note, it's important that specifying explicit height to the `paper-swipe` will render both the `content` and `underlay` layers to have the same height. Especially when multiple `paper-swipe` on the same document, explicit height will make all elements look consistent.
 60 | 
 61 |     paper-swipe {
 62 |       height: 100px;
 63 |     }
 64 | 
 65 |     paper-swipe {
 66 |       --paper-swipe: {
 67 |         height: 100px;
 68 |       };
 69 |     }
 70 | 
 71 | The following custom properties and mixins are also available for styling:
 72 | 
 73 | Custom mixin | Description | Default
 74 | ----------------|-------------|----------
 75 | `--paper-swipe` | `Mixin applied to paper-swipe` | `{}`
 76 | `--paper-swipe-swipeable-container` | `Mixin applied to paper-swipe-swipeable-container` | `{}`
 77 | `--paper-swipe-content` | `Mixin applied to swipeable content` | `{}`
 78 | `--paper-swipe-underlay` | `Mixin applied to underlay beneath the swipeable content` | `{}`
 79 | 
 80 | ## Generating Element's Boilerplate
 81 | At the end of the demo, there is a code generator that allows you to play around with to customize and generate boilerplate code of this custom element and really hoping that the section could help you to gain better understanding about how to utilize this element as well as to provide a simple and straightforward picture on which attributes that this element provides can be applied with and work well with one another.
 82 | 
 83 | @author motss
 84 | @element paper-swipe
 85 | @demo demo/index.html
 86 | -->
 87 | 
 88 | <dom-module id="paper-swipe">
 89 |   <template strip-whitespace>
 90 |     <style>
 91 |       :host {
 92 |         -webkit-user-select: none;
 93 |         -moz-user-select: none;
 94 |         -ms-user-select: none;
 95 |         user-select: none;
 96 | 
 97 |         display: block;
 98 |         position: relative;
 99 |         box-sizing: border-box;
100 |         @apply(--paper-swipe);
101 |       }
102 | 
103 |       *, *:before, *:after {
104 |         box-sizing: inherit;
105 |       }
106 | 
107 |       div.swipeable-container,
108 |       div.swipeable-container > ::content > *{
109 |         width: 100%;
110 |         height: 100%;
111 |         position: absolute;
112 |         top: 0;
113 |         box-sizing: border-box;
114 |       }
115 |       div.swipeable-container {
116 |         @apply(--paper-swipe-swipeable-container);
117 |       }
118 | 
119 |       div.swipeable-container > ::content > [underlay]{
120 |         @apply(--paper-swipe-underlay);
121 |       }
122 | 
123 |       div.swipeable-container > ::content > [content] {
124 |         will-change: transform;
125 |         @apply(--paper-swipe-content);
126 |       }
127 | 
128 |       ::content [content].transition {
129 |         transition: -webkit-transform cubic-bezier(.55,0,.1,1) 0.3s;
130 |         transition: -moz-transform cubic-bezier(.55,0,.1,1) 0.3s;
131 |         transition: -mx-transform cubic-bezier(.55,0,.1,1) 0.3s;
132 |         transition: -o-transform cubic-bezier(.55,0,.1,1) 0.3s;
133 |         transition: transform cubic-bezier(.55,0,.1,1) 0.3s;
134 |       }
135 |     </style>
136 | 
137 |     <div class="swipeable-container">
138 |       <content id="underlay" select="[underlay]"></content>
139 | 
140 |       <content id="content" select="[content]"></content>
141 |     </div>
142 | 
143 |   </template>
144 | </dom-module>
145 | 
146 | <script>
147 |   (function () {
148 | 
149 |     'use strict';
150 | 
151 |     var sharedPanel = null;
152 | 
153 |     Polymer({
154 |       is: 'paper-swipe',
155 | 
156 |       properties: {
157 |         /**
158 |          * If true, swiping is disabled
159 |          */
160 |         disableSwipe: {
161 |           type: Boolean,
162 |           value: false
163 |         },
164 |         /**
165 |          * If true, only swiping to the left.
166 |          */
167 |         swipeLeft: {
168 |           type: Boolean,
169 |           value: false
170 |         },
171 |         /**
172 |          * If true, only swiping to the right.
173 |          */
174 |         swipeRight: {
175 |           type: Boolean,
176 |           value: false
177 |         },
178 |         /**
179 |          * The number of pixels the swipeable content is peeking at from the screen edge
180 |          * after being swiped to the screen edge.
181 |          */
182 |         peekOffset: {
183 |           type: Number,
184 |           value: 30
185 |         },
186 |         /**
187 |          * How many pixels needed to trigger auto-slide to the edge.
188 |          */
189 |         slideOffset: {
190 |           type: Number,
191 |           value: 80
192 |         },
193 |         /**
194 |          * If true, fade out when swiping towards the edges and fade in while swiping away from the edges.
195 |          */
196 |         fade: {
197 |           type: Boolean,
198 |           value: false
199 |         },
200 | 
201 |         /**
202 |          * Whether the user is dragging the content interactively
203 |          */
204 |         _dragging: {
205 |           type: Boolean,
206 |           value: false
207 |         },
208 |         /**
209 |          * Whether the transition is enabled.
210 |          */
211 |         _transition: {
212 |           type: Boolean,
213 |           value: false
214 |         },
215 |         /**
216 |          * If true, swiping to the left is detected and it is only applied to swiping to either side.
217 |          * Otherwise, use `swipeLeft' or 'swipeRight'.
218 |          */
219 |         _slideLeft: {
220 |           type: Boolean
221 |         },
222 |         /**
223 |          * Repetitively evaluating delta of the transitions.
224 |          */
225 |         _transitionDelta: {
226 |           type: Number,
227 |           observer: '_transitionDeltaChanged'
228 |         },
229 |         /**
230 |          * If true, the `transitionDelta` meets the dragging requirements set by `peekOffset` and `slideOffset`.
231 |          */
232 |         _validDelta: {
233 |           type: Boolean,
234 |           value: false
235 |         },
236 |         /**
237 |          * If true, draggable panel is now at the edge of the screen.
238 |          */
239 |         _atEdge: {
240 |           type: Boolean,
241 |           value: false
242 |         },
243 |         /**
244 |          * Current pixel position of the draggable panel.
245 |          */
246 |         _curPos: {
247 |           type: Number
248 |         },
249 |         /**
250 |          * If true, the draggable panel has been dragged.
251 |          * It is used to ensure that the panel is dragging.
252 |          */
253 |         _tracking: {
254 |           type: Boolean,
255 |           value: false
256 |         },
257 | 
258 |         // Store children object via Polymer's getEffectiveChildren or getDistributedNodes;
259 |         _content: Object,
260 |       },
261 | 
262 |       behaviors: [
263 |         Polymer.IronResizableBehavior
264 |       ],
265 | 
266 |       ready: function() {
267 |         // Avoid transition at the beginning e.g. page loads and enable
268 |         // transitions only after the element is rendered and ready.
269 |         this._transition = true;
270 |         this.setScrollDirection(this._swipeAllowed()? 'y' : 'all');
271 |       },
272 | 
273 |       attached: function() {
274 |         // on child element attached, inherit the height of the content.
275 |         var _content = Polymer.dom(this.$.content).getDistributedNodes()[0];
276 |         // this.async(function() {
277 |         //   this.style.height = _content.offsetHeight + 'px';
278 |         // }, 1);
279 |         // save effective children object.
280 |         this.set('_content', _content);
281 |       },
282 | 
283 |       // Element Behaviorset
284 | 
285 |       /**
286 |        * The `edge` event is fired whenever `_atEdge` is set to true which
287 |        * indicates that the current position of the draggable panel is now at
288 |        * the edge of the viewport.
289 |        *
290 |        * @event edge
291 |        * @detail {{message: String, target: Object::Event}}
292 |        */
293 | 
294 |       /**
295 |        * The 'tap-underlay' event is fired whenever '_tapHandler' is called.
296 |        *
297 |        * @event tap-underlay
298 |        * @detail {{nodeName: Object, target: Object::Event}}
299 |        */
300 | 
301 |       listeners: {
302 |         'track': '_onTrack',
303 |         'down': '_downHandler',
304 |         'up': '_upHandler',
305 |         'tap': '_tapHandler',
306 |         'iron-resize': '_onIronResize'
307 |       },
308 | 
309 |       _transitionDeltaChanged: function (newValue, oldValue) {
310 |         if (this._swipeAllowed()){
311 |           /**
312 |            * To trigger auto-swipe to the right:-
313 |            * - newValue > oldValue
314 |            * - newValue >= slideOffset
315 |            *
316 |            * else return to original position.
317 |            */
318 |           if (this.swipeRight){
319 |             this._validDelta = this._atEdge ? newValue <= -this.slideOffset :
320 |               newValue >= this.slideOffset;
321 |           }
322 | 
323 |           /**
324 |            * To trigger auto-swipe to the left:-
325 |            * - newValue < oldValue
326 |            * - newValue <= -slideOffset
327 |            *
328 |            * else return to original position.
329 |            */
330 |           if (this.swipeLeft) {
331 |             this._validDelta = this._atEdge ? newValue >= this.slideOffset :
332 |               newValue <= -this.slideOffset;
333 |           }
334 | 
335 |           /**
336 |            * To trigger auto-swipe to either side,
337 |            * it basically works the same as [swipeLeft] and
338 |            * [swipeRight], just that it needs one more
339 |            * parameter to detect if it's dragging to the left.
340 |            *
341 |            * Assert [slideLeft] if the left-dragging is
342 |            * detected.
343 |            *
344 |            * else return to original position.
345 |            */
346 |           if (!this.swipeLeft && !this.swipeRight) {
347 |             if (newValue > oldValue) {
348 |               this._slideLeft = false;
349 |               this._validDelta = newValue >= this.slideOffset;
350 |             }
351 |             if (newValue < oldValue) {
352 |               this._slideLeft = true;
353 |               this._validDelta = newValue <= -this.slideOffset;
354 |             }
355 |           }
356 |         }
357 |       },
358 | 
359 |       _tapHandler: function (event) {
360 |         // when disableSwipe is true, only click event can be triggered!
361 |         this.fire('tap-underlay', {nodeName: 'underlay', target: event});
362 |         if (sharedPanel) {
363 |           // release the panel after use.
364 |           sharedPanel = null;
365 |         }
366 |       },
367 | 
368 |       _onTrack: function (event) {
369 |         if (sharedPanel && this !== sharedPanel) {
370 |           // release the panel.
371 |           sharedPanel = null;
372 |           return;
373 |         }
374 | 
375 |         if (this._swipeAllowed()){
376 |           switch (event.detail.state) {
377 |             case 'start':
378 |               this._trackStart(event);
379 |               break;
380 |             case 'track':
381 |               this._trackX(event);
382 |               break;
383 |             case 'end':
384 |               this._trackEnd(event);
385 |               break;
386 |           }
387 |         }
388 |       },
389 | 
390 |       _trackStart: function(event) {
391 |         if (this._swipeAllowed()) {
392 |           sharedPanel = this;
393 |           this._dragging = true;
394 |           if (this._dragging) {
395 |             this.width = this._content.offsetWidth;
396 |             this._transition = false;
397 |           }
398 |         }
399 |       },
400 | 
401 |       _trackX: function(event) {
402 |         if (this._dragging) {
403 |           var dx = event.detail.dx,
404 |             dragDx;
405 |           this._transitionDelta = dx;
406 |           dragDx = this._atEdge? this._curPos + dx: dx;
407 |           this._tracking = true;
408 |           this._moveDrawer(dragDx);
409 |         }
410 |       },
411 | 
412 |       _trackEnd: function(event) {
413 |         //reserve for future use.
414 |       },
415 | 
416 |       _downHandler: function (event) {
417 |         if (!this._dragging && !this.disableSwipe && !sharedPanel) {
418 |           // cancel selection
419 |           event.preventDefault();
420 |           // grab this panel
421 |           sharedPanel = this;
422 |         }
423 |       },
424 | 
425 |       _upHandler: function (event) {
426 |         this._dragging = false;
427 |         this._transition = true;
428 | 
429 |         /**
430 |          * Specialty for when [AtEdge] is asserted, hold it back to the edge.
431 |          */
432 |         if (this._swipeAllowed() && this._atEdge && !this._validDelta) {
433 |           this._moveDrawer(this._curPos);
434 |           // release the panel
435 |           sharedPanel = null;
436 |           return;
437 |         }
438 | 
439 |         /**
440 |          * tracking must be asserted.
441 |          */
442 |         if (this._swipeAllowed() && this._tracking){
443 |           /**
444 |            *  to swipe to the leftmost edge:-
445 |            *  - slide until [this.peekOffset] - [this.width].
446 |            *  - validDelta = true
447 |            *  - AtEdge = false
448 |            *  - store current position after swiping to leftmost edge, [curPos]
449 |            *  - animate the dragging by [_moveDrawer(pixel_to_animate)]
450 |            *
451 |            *  else vice versa for swiping to rightmsot edge and/ or either side.
452 |            */
453 |           var slideTo = this.width - this.peekOffset,
454 |             offsetLR = this.swipeRight? slideTo: -slideTo,
455 |             deltaLR;
456 |           if (!this.swipeLeft) {
457 |             offsetLR = this._slideLeft? -slideTo: slideTo;
458 |           }
459 |           deltaLR  = this._validDelta && !this._atEdge? offsetLR: null;
460 | 
461 |           this._curPos = this._atEdge? null: deltaLR;
462 |           this._atEdge = !(deltaLR === null);
463 |           if (this._atEdge) {
464 |             this.fire('edge', {message: 'panel-on-edge', target: event});
465 |           }
466 |           this._validDelta = false;
467 |           this._tracking = false;
468 |           this._moveDrawer(deltaLR);
469 |         }
470 |         // release the panel after use.
471 |         sharedPanel = null;
472 |       },
473 | 
474 |       _swipeAllowed: function () {
475 |         return !this.disableSwipe;
476 |       },
477 | 
478 |       _transformForTranslateX: function(translateX) {
479 |         if (translateX === null) {
480 |           /**
481 |            * return 0 works smoother on mobile than returning '';
482 |            */
483 |           return 'translate3d(0, 0, 0)';
484 |         }
485 |         return 'translate3d(' + translateX + 'px, 0, 0)';
486 |       },
487 | 
488 |       _moveDrawer: function(translateX) {
489 |         var _content = this._content;
490 |         // if fade is set, transform with fading opacity.
491 |         if (this.fade) {
492 |           var _contentOffsetWidth = _content.offsetWidth;
493 |           var _opacity = Math.max(0, (_contentOffsetWidth - Math.abs(translateX)) /
494 |             _contentOffsetWidth);
495 |           // translateX is null which means that swipeable content is returning to its original
496 |           // position hence opacity is '' or 1;
497 |           _content.style.opacity = translateX === null ? '' : _opacity;
498 |         }
499 |         // transform swipeable content.
500 |         this.transform(this._transformForTranslateX(translateX), _content);
501 | 
502 |         // apply class while transforming the drawer.
503 |         this.toggleClass('transition', this._transition, _content);
504 |         this.toggleClass('dragging', this._dragging, _content);
505 |         this.toggleClass('swipe-left', this.swipeLeft, _content);
506 |         this.toggleClass('swipe-right', this.swipeRight, _content);
507 |       },
508 | 
509 |       // Reset the position of the swipeable content with the attribute `content` from the edge after being dragged.
510 |       resetPosition: function() {
511 |         // this.transform(this._transformForTranslateX(null), this._content);
512 |         this._moveDrawer(null);
513 |         // reset position of the swipeable content from the edge.
514 |         this.set('_atEdge', false);
515 |         this.set('_curPos', 0);
516 |         // fire event when position is reset.
517 |         this.fire('position-reset');
518 |       },
519 | 
520 |       _onIronResize: function() {
521 |         // console.log('paper-swipe-resize');
522 |         // var _content = this._content;
523 |         // if (_content && this._toUpdateHeight) {
524 |         //   this.async(function() {
525 |         //     console.log(this._content.offsetHeight);
526 |         //     this.style.height = _content.offsetHeight + 'px';
527 |         //   }, 1);
528 |         // }
529 |       },
530 | 
531 |     });
532 |   })();
533 | </script>
534 | 


--------------------------------------------------------------------------------
/.idea/workspace.xml:
--------------------------------------------------------------------------------
  1 | <?xml version="1.0" encoding="UTF-8"?>
  2 | <project version="4">
  3 |   <component name="ChangeListManager">
  4 |     <list default="true" id="1141acc4-e750-45d5-adf7-85fc42f34110" name="Default" comment="">
  5 |       <change type="MODIFICATION" beforePath="$PROJECT_DIR$/demo/index.html" afterPath="$PROJECT_DIR$/demo/index.html" />
  6 |       <change type="MODIFICATION" beforePath="$PROJECT_DIR$/.idea/workspace.xml" afterPath="$PROJECT_DIR$/.idea/workspace.xml" />
  7 |     </list>
  8 |     <ignored path="paper-swipe.iws" />
  9 |     <ignored path=".idea/workspace.xml" />
 10 |     <option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" />
 11 |     <option name="TRACKING_ENABLED" value="true" />
 12 |     <option name="SHOW_DIALOG" value="false" />
 13 |     <option name="HIGHLIGHT_CONFLICTS" value="true" />
 14 |     <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
 15 |     <option name="LAST_RESOLUTION" value="IGNORE" />
 16 |   </component>
 17 |   <component name="ChangesViewManager" flattened_view="true" show_ignored="false" />
 18 |   <component name="CreatePatchCommitExecutor">
 19 |     <option name="PATCH_PATH" value="" />
 20 |   </component>
 21 |   <component name="ExecutionTargetManager" SELECTED_TARGET="default_target" />
 22 |   <component name="FavoritesManager">
 23 |     <favorites_list name="paper-swipe" />
 24 |   </component>
 25 |   <component name="FileEditorManager">
 26 |     <leaf>
 27 |       <file leaf-file-name="paper-swipe.html" pinned="false" current-in-tab="false">
 28 |         <entry file="file://$PROJECT_DIR$/paper-swipe.html">
 29 |           <provider selected="true" editor-type-id="text-editor">
 30 |             <state vertical-scroll-proportion="0.0">
 31 |               <caret line="83" column="3" selection-start-line="83" selection-start-column="3" selection-end-line="83" selection-end-column="3" />
 32 |               <folding />
 33 |             </state>
 34 |           </provider>
 35 |         </entry>
 36 |       </file>
 37 |       <file leaf-file-name="index.html" pinned="false" current-in-tab="true">
 38 |         <entry file="file://$PROJECT_DIR$/demo/index.html">
 39 |           <provider selected="true" editor-type-id="text-editor">
 40 |             <state vertical-scroll-proportion="0.5927835">
 41 |               <caret line="47" column="55" selection-start-line="47" selection-start-column="55" selection-end-line="47" selection-end-column="55" />
 42 |               <folding />
 43 |             </state>
 44 |           </provider>
 45 |         </entry>
 46 |       </file>
 47 |       <file leaf-file-name="README.md" pinned="false" current-in-tab="false">
 48 |         <entry file="file://$PROJECT_DIR$/README.md">
 49 |           <provider selected="true" editor-type-id="text-editor">
 50 |             <state vertical-scroll-proportion="0.0">
 51 |               <caret line="54" column="18" selection-start-line="54" selection-start-column="18" selection-end-line="54" selection-end-column="18" />
 52 |               <folding />
 53 |             </state>
 54 |           </provider>
 55 |         </entry>
 56 |       </file>
 57 |     </leaf>
 58 |   </component>
 59 |   <component name="Git.Settings">
 60 |     <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
 61 |   </component>
 62 |   <component name="IdeDocumentHistory">
 63 |     <option name="CHANGED_PATHS">
 64 |       <list>
 65 |         <option value="$PROJECT_DIR$/paper-swipe.html" />
 66 |         <option value="$PROJECT_DIR$/bower.json" />
 67 |         <option value="$PROJECT_DIR$/README.md" />
 68 |         <option value="$PROJECT_DIR$/demo/index.html" />
 69 |       </list>
 70 |     </option>
 71 |   </component>
 72 |   <component name="JsBuildToolGruntFileManager" detection-done="true" />
 73 |   <component name="JsGulpfileManager">
 74 |     <detection-done>true</detection-done>
 75 |   </component>
 76 |   <component name="NamedScopeManager">
 77 |     <order />
 78 |   </component>
 79 |   <component name="ProjectFrameBounds">
 80 |     <option name="x" value="39" />
 81 |     <option name="y" value="46" />
 82 |     <option name="width" value="1327" />
 83 |     <option name="height" value="722" />
 84 |   </component>
 85 |   <component name="ProjectLevelVcsManager" settingsEditedManually="false">
 86 |     <OptionsSetting value="true" id="Add" />
 87 |     <OptionsSetting value="true" id="Remove" />
 88 |     <OptionsSetting value="true" id="Checkout" />
 89 |     <OptionsSetting value="true" id="Update" />
 90 |     <OptionsSetting value="true" id="Status" />
 91 |     <OptionsSetting value="true" id="Edit" />
 92 |     <ConfirmationsSetting value="0" id="Add" />
 93 |     <ConfirmationsSetting value="0" id="Remove" />
 94 |   </component>
 95 |   <component name="ProjectView">
 96 |     <navigator currentView="ProjectPane" proportions="" version="1">
 97 |       <flattenPackages />
 98 |       <showMembers />
 99 |       <showModules />
100 |       <showLibraryContents />
101 |       <hideEmptyPackages />
102 |       <abbreviatePackageNames />
103 |       <autoscrollToSource />
104 |       <autoscrollFromSource />
105 |       <sortByType />
106 |     </navigator>
107 |     <panes>
108 |       <pane id="Scratches" />
109 |       <pane id="Scope" />
110 |       <pane id="ProjectPane">
111 |         <subPane>
112 |           <PATH>
113 |             <PATH_ELEMENT>
114 |               <option name="myItemId" value="paper-swipe" />
115 |               <option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.ProjectViewProjectNode" />
116 |             </PATH_ELEMENT>
117 |           </PATH>
118 |           <PATH>
119 |             <PATH_ELEMENT>
120 |               <option name="myItemId" value="paper-swipe" />
121 |               <option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.ProjectViewProjectNode" />
122 |             </PATH_ELEMENT>
123 |             <PATH_ELEMENT>
124 |               <option name="myItemId" value="paper-swipe" />
125 |               <option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.PsiDirectoryNode" />
126 |             </PATH_ELEMENT>
127 |           </PATH>
128 |           <PATH>
129 |             <PATH_ELEMENT>
130 |               <option name="myItemId" value="paper-swipe" />
131 |               <option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.ProjectViewProjectNode" />
132 |             </PATH_ELEMENT>
133 |             <PATH_ELEMENT>
134 |               <option name="myItemId" value="paper-swipe" />
135 |               <option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.PsiDirectoryNode" />
136 |             </PATH_ELEMENT>
137 |             <PATH_ELEMENT>
138 |               <option name="myItemId" value="demo" />
139 |               <option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.PsiDirectoryNode" />
140 |             </PATH_ELEMENT>
141 |           </PATH>
142 |           <PATH>
143 |             <PATH_ELEMENT>
144 |               <option name="myItemId" value="paper-swipe" />
145 |               <option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.ProjectViewProjectNode" />
146 |             </PATH_ELEMENT>
147 |             <PATH_ELEMENT>
148 |               <option name="myItemId" value="paper-swipe" />
149 |               <option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.PsiDirectoryNode" />
150 |             </PATH_ELEMENT>
151 |             <PATH_ELEMENT>
152 |               <option name="myItemId" value="bower_components" />
153 |               <option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.PsiDirectoryNode" />
154 |             </PATH_ELEMENT>
155 |           </PATH>
156 |           <PATH>
157 |             <PATH_ELEMENT>
158 |               <option name="myItemId" value="paper-swipe" />
159 |               <option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.ProjectViewProjectNode" />
160 |             </PATH_ELEMENT>
161 |             <PATH_ELEMENT>
162 |               <option name="myItemId" value="paper-swipe" />
163 |               <option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.PsiDirectoryNode" />
164 |             </PATH_ELEMENT>
165 |             <PATH_ELEMENT>
166 |               <option name="myItemId" value="bower_components" />
167 |               <option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.PsiDirectoryNode" />
168 |             </PATH_ELEMENT>
169 |             <PATH_ELEMENT>
170 |               <option name="myItemId" value="paper-button" />
171 |               <option name="myItemType" value="com.intellij.ide.projectView.impl.nodes.PsiDirectoryNode" />
172 |             </PATH_ELEMENT>
173 |           </PATH>
174 |         </subPane>
175 |       </pane>
176 |     </panes>
177 |   </component>
178 |   <component name="PropertiesComponent">
179 |     <property name="WebServerToolWindowFactoryState" value="false" />
180 |     <property name="HbShouldOpenHtmlAsHb" value="" />
181 |     <property name="last_opened_file_path" value="$PROJECT_DIR$" />
182 |     <property name="FullScreen" value="false" />
183 |   </component>
184 |   <component name="RunManager">
185 |     <configuration default="true" type="DartCommandLineRunConfigurationType" factoryName="Dart Command Line Application">
186 |       <method />
187 |     </configuration>
188 |     <configuration default="true" type="DartUnitRunConfigurationType" factoryName="DartUnit">
189 |       <method />
190 |     </configuration>
191 |     <configuration default="true" type="JavaScriptTestRunnerKarma" factoryName="Karma" config-file="">
192 |       <envs />
193 |       <method />
194 |     </configuration>
195 |     <configuration default="true" type="JavascriptDebugType" factoryName="JavaScript Debug">
196 |       <method />
197 |     </configuration>
198 |     <configuration default="true" type="JsTestDriver-test-runner" factoryName="JsTestDriver">
199 |       <setting name="configLocationType" value="CONFIG_FILE" />
200 |       <setting name="settingsFile" value="" />
201 |       <setting name="serverType" value="INTERNAL" />
202 |       <setting name="preferredDebugBrowser" value="Chrome" />
203 |       <method />
204 |     </configuration>
205 |     <configuration default="true" type="NodeJSConfigurationType" factoryName="Node.js" working-dir="">
206 |       <method />
207 |     </configuration>
208 |     <configuration default="true" type="cucumber.js" factoryName="Cucumber.js">
209 |       <option name="cucumberJsArguments" value="" />
210 |       <option name="executablePath" />
211 |       <option name="filePath" />
212 |       <method />
213 |     </configuration>
214 |     <configuration default="true" type="js.build_tools.gulp" factoryName="Gulp.js">
215 |       <node-options />
216 |       <gulpfile />
217 |       <tasks />
218 |       <arguments />
219 |       <pass-parent-envs>true</pass-parent-envs>
220 |       <envs />
221 |       <method />
222 |     </configuration>
223 |   </component>
224 |   <component name="ShelveChangesManager" show_recycled="false" />
225 |   <component name="SvnConfiguration">
226 |     <configuration />
227 |   </component>
228 |   <component name="TaskManager">
229 |     <task active="true" id="Default" summary="Default task">
230 |       <changelist id="1141acc4-e750-45d5-adf7-85fc42f34110" name="Default" comment="" />
231 |       <created>1439216972057</created>
232 |       <option name="number" value="Default" />
233 |       <updated>1439216972057</updated>
234 |     </task>
235 |     <servers />
236 |   </component>
237 |   <component name="ToolWindowManager">
238 |     <frame x="39" y="46" width="1327" height="722" extended-state="6" />
239 |     <editor active="true" />
240 |     <layout>
241 |       <window_info id="Project" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="true" weight="0.11026034" sideWeight="0.5" order="0" side_tool="false" content_ui="combo" />
242 |       <window_info id="TODO" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" weight="0.33" sideWeight="0.5" order="6" side_tool="false" content_ui="tabs" />
243 |       <window_info id="Event Log" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" weight="0.33" sideWeight="0.5" order="7" side_tool="true" content_ui="tabs" />
244 |       <window_info id="Application Servers" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" weight="0.33" sideWeight="0.5" order="7" side_tool="false" content_ui="tabs" />
245 |       <window_info id="Version Control" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" weight="0.33" sideWeight="0.5" order="7" side_tool="false" content_ui="tabs" />
246 |       <window_info id="Structure" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" weight="0.25" sideWeight="0.5" order="1" side_tool="false" content_ui="tabs" />
247 |       <window_info id="Terminal" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" weight="0.33" sideWeight="0.5" order="7" side_tool="false" content_ui="tabs" />
248 |       <window_info id="Favorites" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" weight="0.33" sideWeight="0.5" order="2" side_tool="true" content_ui="tabs" />
249 |       <window_info id="Cvs" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" weight="0.25" sideWeight="0.5" order="4" side_tool="false" content_ui="tabs" />
250 |       <window_info id="Message" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" weight="0.33" sideWeight="0.5" order="0" side_tool="false" content_ui="tabs" />
251 |       <window_info id="Commander" active="false" anchor="right" auto_hide="false" internal_type="SLIDING" type="SLIDING" visible="false" weight="0.4" sideWeight="0.5" order="0" side_tool="false" content_ui="tabs" />
252 |       <window_info id="Inspection" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" weight="0.4" sideWeight="0.5" order="5" side_tool="false" content_ui="tabs" />
253 |       <window_info id="Run" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" weight="0.33" sideWeight="0.5" order="2" side_tool="false" content_ui="tabs" />
254 |       <window_info id="Hierarchy" active="false" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" weight="0.25" sideWeight="0.5" order="2" side_tool="false" content_ui="combo" />
255 |       <window_info id="Find" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" weight="0.33" sideWeight="0.5" order="1" side_tool="false" content_ui="tabs" />
256 |       <window_info id="Ant Build" active="false" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" weight="0.25" sideWeight="0.5" order="1" side_tool="false" content_ui="tabs" />
257 |       <window_info id="Debug" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" weight="0.4" sideWeight="0.5" order="3" side_tool="false" content_ui="tabs" />
258 |     </layout>
259 |   </component>
260 |   <component name="Vcs.Log.UiProperties">
261 |     <option name="RECENTLY_FILTERED_USER_GROUPS">
262 |       <collection />
263 |     </option>
264 |     <option name="RECENTLY_FILTERED_BRANCH_GROUPS">
265 |       <collection />
266 |     </option>
267 |   </component>
268 |   <component name="VcsContentAnnotationSettings">
269 |     <option name="myLimit" value="2678400000" />
270 |   </component>
271 |   <component name="XDebuggerManager">
272 |     <breakpoint-manager />
273 |     <watches-manager />
274 |   </component>
275 |   <component name="editorHistoryManager">
276 |     <entry file="file://$PROJECT_DIR$/paper-swipe.html">
277 |       <provider selected="true" editor-type-id="text-editor">
278 |         <state vertical-scroll-proportion="0.0">
279 |           <caret line="83" column="3" selection-start-line="83" selection-start-column="3" selection-end-line="83" selection-end-column="3" />
280 |           <folding />
281 |         </state>
282 |       </provider>
283 |     </entry>
284 |     <entry file="file://$PROJECT_DIR$/demo/index.html">
285 |       <provider selected="true" editor-type-id="text-editor">
286 |         <state vertical-scroll-proportion="0.0">
287 |           <caret line="0" column="0" selection-start-line="0" selection-start-column="0" selection-end-line="0" selection-end-column="0" />
288 |           <folding />
289 |         </state>
290 |       </provider>
291 |     </entry>
292 |     <entry file="file://$PROJECT_DIR$/README.md">
293 |       <provider selected="true" editor-type-id="text-editor">
294 |         <state vertical-scroll-proportion="0.0">
295 |           <caret line="54" column="18" selection-start-line="54" selection-start-column="18" selection-end-line="54" selection-end-column="18" />
296 |           <folding />
297 |         </state>
298 |       </provider>
299 |     </entry>
300 |     <entry file="file://$PROJECT_DIR$/paper-swipe.html">
301 |       <provider selected="true" editor-type-id="text-editor">
302 |         <state vertical-scroll-proportion="0.0">
303 |           <caret line="83" column="3" selection-start-line="83" selection-start-column="3" selection-end-line="83" selection-end-column="3" />
304 |           <folding />
305 |         </state>
306 |       </provider>
307 |     </entry>
308 |     <entry file="file://$PROJECT_DIR$/demo/index.html">
309 |       <provider selected="true" editor-type-id="text-editor">
310 |         <state vertical-scroll-proportion="0.0">
311 |           <caret line="17" column="60" selection-start-line="17" selection-start-column="60" selection-end-line="17" selection-end-column="60" />
312 |           <folding />
313 |         </state>
314 |       </provider>
315 |     </entry>
316 |     <entry file="file://$PROJECT_DIR$/README.md">
317 |       <provider selected="true" editor-type-id="text-editor">
318 |         <state vertical-scroll-proportion="0.0">
319 |           <caret line="54" column="18" selection-start-line="54" selection-start-column="18" selection-end-line="54" selection-end-column="18" />
320 |           <folding />
321 |         </state>
322 |       </provider>
323 |     </entry>
324 |     <entry file="file://$PROJECT_DIR$/bower_components/paper-button/.bower.json">
325 |       <provider selected="true" editor-type-id="text-editor">
326 |         <state vertical-scroll-proportion="0.0">
327 |           <caret line="0" column="0" selection-start-line="0" selection-start-column="0" selection-end-line="0" selection-end-column="0" />
328 |           <folding />
329 |         </state>
330 |       </provider>
331 |     </entry>
332 |     <entry file="file://$PROJECT_DIR$/paper-swipe.html">
333 |       <provider selected="true" editor-type-id="text-editor">
334 |         <state vertical-scroll-proportion="0.0">
335 |           <caret line="83" column="3" selection-start-line="83" selection-start-column="3" selection-end-line="83" selection-end-column="3" />
336 |           <folding />
337 |         </state>
338 |       </provider>
339 |     </entry>
340 |     <entry file="file://$PROJECT_DIR$/demo/index.html">
341 |       <provider selected="true" editor-type-id="text-editor">
342 |         <state vertical-scroll-proportion="0.0">
343 |           <caret line="17" column="60" selection-start-line="17" selection-start-column="60" selection-end-line="17" selection-end-column="60" />
344 |           <folding />
345 |         </state>
346 |       </provider>
347 |     </entry>
348 |     <entry file="file://$PROJECT_DIR$/README.md">
349 |       <provider selected="true" editor-type-id="text-editor">
350 |         <state vertical-scroll-proportion="0.0">
351 |           <caret line="0" column="0" selection-start-line="0" selection-start-column="0" selection-end-line="0" selection-end-column="0" />
352 |           <folding />
353 |         </state>
354 |       </provider>
355 |     </entry>
356 |     <entry file="file://$PROJECT_DIR$/paper-swipe.html">
357 |       <provider selected="true" editor-type-id="text-editor">
358 |         <state vertical-scroll-proportion="0.0">
359 |           <caret line="83" column="3" selection-start-line="83" selection-start-column="3" selection-end-line="83" selection-end-column="3" />
360 |           <folding />
361 |         </state>
362 |       </provider>
363 |     </entry>
364 |     <entry file="file://$PROJECT_DIR$/bower.json">
365 |       <provider selected="true" editor-type-id="text-editor">
366 |         <state vertical-scroll-proportion="0.0">
367 |           <caret line="0" column="0" selection-start-line="0" selection-start-column="0" selection-end-line="0" selection-end-column="0" />
368 |         </state>
369 |       </provider>
370 |     </entry>
371 |     <entry file="file://$PROJECT_DIR$/demo/index.html">
372 |       <provider selected="true" editor-type-id="text-editor">
373 |         <state vertical-scroll-proportion="0.0">
374 |           <caret line="17" column="60" selection-start-line="17" selection-start-column="60" selection-end-line="17" selection-end-column="60" />
375 |           <folding />
376 |         </state>
377 |       </provider>
378 |     </entry>
379 |     <entry file="file://$PROJECT_DIR$/README.md">
380 |       <provider selected="true" editor-type-id="text-editor">
381 |         <state vertical-scroll-proportion="0.0">
382 |           <caret line="47" column="118" selection-start-line="47" selection-start-column="118" selection-end-line="47" selection-end-column="118" />
383 |           <folding />
384 |         </state>
385 |       </provider>
386 |     </entry>
387 |     <entry file="file://$PROJECT_DIR$/paper-swipe.html">
388 |       <provider selected="true" editor-type-id="text-editor">
389 |         <state vertical-scroll-proportion="0.0">
390 |           <caret line="83" column="3" selection-start-line="83" selection-start-column="3" selection-end-line="83" selection-end-column="3" />
391 |           <folding />
392 |         </state>
393 |       </provider>
394 |     </entry>
395 |     <entry file="file://$PROJECT_DIR$/bower.json">
396 |       <provider selected="true" editor-type-id="text-editor">
397 |         <state vertical-scroll-proportion="0.0">
398 |           <caret line="0" column="0" selection-start-line="0" selection-start-column="0" selection-end-line="0" selection-end-column="0" />
399 |         </state>
400 |       </provider>
401 |     </entry>
402 |     <entry file="file://$PROJECT_DIR$/demo/index.html">
403 |       <provider selected="true" editor-type-id="text-editor">
404 |         <state vertical-scroll-proportion="0.0">
405 |           <caret line="17" column="60" selection-start-line="17" selection-start-column="60" selection-end-line="17" selection-end-column="60" />
406 |           <folding />
407 |         </state>
408 |       </provider>
409 |     </entry>
410 |     <entry file="file://$PROJECT_DIR$/README.md">
411 |       <provider selected="true" editor-type-id="text-editor">
412 |         <state vertical-scroll-proportion="0.0">
413 |           <caret line="47" column="118" selection-start-line="47" selection-start-column="118" selection-end-line="47" selection-end-column="118" />
414 |           <folding />
415 |         </state>
416 |       </provider>
417 |     </entry>
418 |     <entry file="file://$PROJECT_DIR$/paper-swipe.html">
419 |       <provider selected="true" editor-type-id="text-editor">
420 |         <state vertical-scroll-proportion="0.0">
421 |           <caret line="0" column="0" selection-start-line="0" selection-start-column="0" selection-end-line="0" selection-end-column="0" />
422 |           <folding />
423 |         </state>
424 |       </provider>
425 |     </entry>
426 |     <entry file="file://$PROJECT_DIR$/demo/index.html">
427 |       <provider selected="true" editor-type-id="text-editor">
428 |         <state vertical-scroll-proportion="0.0">
429 |           <caret line="17" column="60" selection-start-line="17" selection-start-column="60" selection-end-line="17" selection-end-column="60" />
430 |           <folding />
431 |         </state>
432 |       </provider>
433 |     </entry>
434 |     <entry file="file://$PROJECT_DIR$/README.md">
435 |       <provider selected="true" editor-type-id="text-editor">
436 |         <state vertical-scroll-proportion="0.0">
437 |           <caret line="47" column="118" selection-start-line="47" selection-start-column="118" selection-end-line="47" selection-end-column="118" />
438 |           <folding />
439 |         </state>
440 |       </provider>
441 |     </entry>
442 |     <entry file="file://$PROJECT_DIR$/paper-swipe.html">
443 |       <provider selected="true" editor-type-id="text-editor">
444 |         <state vertical-scroll-proportion="0.0">
445 |           <caret line="16" column="69" selection-start-line="16" selection-start-column="69" selection-end-line="16" selection-end-column="69" />
446 |           <folding />
447 |         </state>
448 |       </provider>
449 |     </entry>
450 |     <entry file="file://$PROJECT_DIR$/demo/index.html">
451 |       <provider selected="true" editor-type-id="text-editor">
452 |         <state vertical-scroll-proportion="0.0">
453 |           <caret line="0" column="0" selection-start-line="0" selection-start-column="0" selection-end-line="0" selection-end-column="0" />
454 |           <folding />
455 |         </state>
456 |       </provider>
457 |     </entry>
458 |     <entry file="file://$PROJECT_DIR$/README.md">
459 |       <provider selected="true" editor-type-id="text-editor">
460 |         <state vertical-scroll-proportion="0.0">
461 |           <caret line="9" column="64" selection-start-line="9" selection-start-column="64" selection-end-line="9" selection-end-column="64" />
462 |           <folding />
463 |         </state>
464 |       </provider>
465 |     </entry>
466 |     <entry file="file://$PROJECT_DIR$/paper-swipe.html">
467 |       <provider selected="true" editor-type-id="text-editor">
468 |         <state vertical-scroll-proportion="0.0">
469 |           <caret line="0" column="0" selection-start-line="0" selection-start-column="0" selection-end-line="0" selection-end-column="0" />
470 |           <folding />
471 |         </state>
472 |       </provider>
473 |     </entry>
474 |     <entry file="file://$PROJECT_DIR$/bower_components/paper-button/paper-button.html">
475 |       <provider selected="true" editor-type-id="text-editor">
476 |         <state vertical-scroll-proportion="0.74044585">
477 |           <caret line="64" column="0" selection-start-line="64" selection-start-column="0" selection-end-line="68" selection-end-column="71" />
478 |         </state>
479 |       </provider>
480 |     </entry>
481 |     <entry file="file://$PROJECT_DIR$/bower.json">
482 |       <provider selected="true" editor-type-id="text-editor">
483 |         <state vertical-scroll-proportion="0.49468085">
484 |           <caret line="31" column="1" selection-start-line="31" selection-start-column="1" selection-end-line="31" selection-end-column="1" />
485 |         </state>
486 |       </provider>
487 |     </entry>
488 |     <entry file="file://$PROJECT_DIR$/bower_components/paper-button/.bower.json">
489 |       <provider selected="true" editor-type-id="text-editor">
490 |         <state vertical-scroll-proportion="0.61449754">
491 |           <caret line="36" column="61" selection-start-line="36" selection-start-column="61" selection-end-line="36" selection-end-column="61" />
492 |           <folding />
493 |         </state>
494 |       </provider>
495 |     </entry>
496 |     <entry file="file://$PROJECT_DIR$/README.md">
497 |       <provider selected="true" editor-type-id="text-editor">
498 |         <state vertical-scroll-proportion="0.0">
499 |           <caret line="54" column="18" selection-start-line="54" selection-start-column="18" selection-end-line="54" selection-end-column="18" />
500 |           <folding />
501 |         </state>
502 |       </provider>
503 |     </entry>
504 |     <entry file="file://$PROJECT_DIR$/paper-swipe.html">
505 |       <provider selected="true" editor-type-id="text-editor">
506 |         <state vertical-scroll-proportion="-0.0">
507 |           <caret line="83" column="3" selection-start-line="83" selection-start-column="3" selection-end-line="83" selection-end-column="3" />
508 |           <folding />
509 |         </state>
510 |       </provider>
511 |     </entry>
512 |     <entry file="file://$PROJECT_DIR$/demo/index.html">
513 |       <provider selected="true" editor-type-id="text-editor">
514 |         <state vertical-scroll-proportion="0.5927835">
515 |           <caret line="47" column="55" selection-start-line="47" selection-start-column="55" selection-end-line="47" selection-end-column="55" />
516 |           <folding />
517 |         </state>
518 |       </provider>
519 |     </entry>
520 |   </component>
521 | </project>


--------------------------------------------------------------------------------