Merge pull request #2 from PolymerElements/zomg-first

swipe ALL the things!
PolymerElements · Dec 1, 2015 · f1b0c4f · f1b0c4f
2 parents 12a21da + cb1ee37
commit f1b0c4f
Show file tree

Hide file tree

Showing 9 changed files with 723 additions and 2 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+bower_components/
diff --git a/README.md b/README.md
@@ -1,4 +1,3 @@
-
 <!---
 
 This README is automatically generated from the comments in these files:
@@ -12,4 +11,3 @@ Edit this file, and the bot will squash your changes :)
 [![Build Status](https://travis-ci.org/PolymerElements/iron-swipeable-container.svg?branch=master)](https://travis-ci.org/PolymerElements/iron-swipeable-container)
 
 _[Demo and API Docs](https://elements.polymer-project.org/elements/iron-swipeable-container)_
-
diff --git a/bower.json b/bower.json
@@ -0,0 +1,37 @@
+{
+  "name": "iron-swipeable-container",
+  "version": "1.0.0",
+  "description": "A container that alows any of its nested children to be swiped away.",
+  "authors": [
+    "The Polymer Authors"
+  ],
+  "keywords": [
+    "web-components",
+    "polymer",
+    "swipe",
+    "swipeable"
+  ],
+  "main": [
+    "iron-swipeable-container.html"
+  ],
+  "private": true,
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/PolymerElements/iron-swipeable-container.git"
+  },
+  "license": "http://polymer.github.io/LICENSE.txt",
+  "homepage": "https://github.com/PolymerElements/iron-swipeable-container",
+  "ignore": [],
+  "dependencies": {
+    "polymer": "Polymer/polymer#^1.1.0"
+  },
+  "devDependencies": {
+    "webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
+    "web-component-tester": "polymer/web-component-tester#^3.4.0",
+    "test-fixture": "PolymerElements/test-fixture#^1.0.0",
+    "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
+    "iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0",
+    "paper-card": "PolymerElements/paper-card#^1.0.0",
+    "paper-styles": "PolymerElements/paper-styles#^1.0.0"
+  }
+}
diff --git a/demo/index.html b/demo/index.html
@@ -0,0 +1,119 @@
+<!doctype html>
+<!--
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+<html lang="en">
+<head>
+  <title>iron-swipeable-container demo</title>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
+
+  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+
+  <link rel="import" href="../iron-swipeable-container.html">
+  <link rel="import" href="../../paper-card/paper-card.html">
+  <link rel="import" href="../../paper-styles/demo-pages.html">
+  <link rel="import" href="../../paper-styles/color.html">
+
+  <style is="custom-style">
+    paper-card {
+      width: 100%;
+      margin-bottom: 16px;
+    }
+
+    .item {
+      margin-bottom: 16px;
+      padding: 20px;
+      background-color: var(--paper-lime-500);
+    }
+
+    .item.blue {
+      background-color: var(--paper-blue-300);
+    }
+
+    /* If you want your things to swipe nicely, you might want to disable
+     * text selection on those elements. */
+    .swipe {
+      -moz-user-select: none;
+      -ms-user-select: none;
+      -webkit-user-select: none;
+      user-select: none;
+      cursor: default;
+    }
+  </style>
+
+</head>
+<body unresolved>
+  <div class="vertical-section-container centered">
+    <h4>Horizontal swipe</h4>
+    <div class="vertical-section">
+      <iron-swipeable-container>
+        <div class="item swipe">You can swipe native elements. This is a plain div.</div>
+
+        <paper-card class="swipe" heading="Swipe me!">
+          <div class="card-content">
+            You can automatically swipe custom elements, too. This is a paper-card.
+          </div>
+        </paper-card>
+
+        <paper-card class="swipe">
+          <div class="card-content">
+            This is another paper-card. Hello!
+          </div>
+        </paper-card>
+
+        <div class="item blue disable-swipe">This is another div but it can't be swiped.</div>
+      </iron-swipeable-container>
+    </div>
+
+    <h4>Curve swipe</h4>
+    <div class="vertical-section">
+      <iron-swipeable-container swipe-style="curve">
+        <div class="item swipe">You can swipe native elements. This is a plain div.</div>
+
+        <paper-card class="swipe" heading="Swipe me!">
+          <div class="card-content">
+            You can automatically swipe custom elements, too. This is a paper-card.
+          </div>
+        </paper-card>
+
+        <paper-card class="swipe">
+          <div class="card-content">
+            This is another paper-card. Hello!
+          </div>
+        </paper-card>
+
+        <div class="item blue disable-swipe">This is another div but it can't be swiped.</div>
+      </iron-swipeable-container>
+    </div>
+
+    <h4>Swipe disabled</h4>
+    <div class="vertical-section">
+      <iron-swipeable-container disabled>
+        <div class="item swipe">You can swipe native elements. This is a plain div.</div>
+
+        <paper-card class="swipe" heading="Swipe me!">
+          <div class="card-content">
+            You can automatically swipe custom elements, too. This is a paper-card.
+          </div>
+        </paper-card>
+
+        <paper-card class="swipe">
+          <div class="card-content">
+            This is another paper-card. Hello!
+          </div>
+        </paper-card>
+
+        <div class="item blue">This is another div.</div>
+      </iron-swipeable-container>
+    </div>
+  </div>
+</body>
+</html>
diff --git a/index.html b/index.html
@@ -0,0 +1,28 @@
+<!doctype html>
+<!--
+@license
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+<html>
+<head>
+
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+  <title>iron-swipeable-container</title>
+
+  <script src="../webcomponentsjs/webcomponents-lite.js"></script>
+  <link rel="import" href="../iron-component-page/iron-component-page.html">
+
+</head>
+<body>
+
+<iron-component-page></iron-component-page>
+
+</body>
+</html>