Skip to content
This repository was archived by the owner on May 15, 2023. It is now read-only.

Commit f1b0c4f

Browse files
notwaldorfnotwaldorf
committed
Merge pull request #2 from PolymerElements/zomg-first
swipe ALL the things!
2 parents 12a21da + cb1ee37 commit f1b0c4f

File tree

9 files changed

+723
-2
lines changed

9 files changed

+723
-2
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
bower_components/

‎README.md‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
21
<!---
32
43
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 :)
1211
[![Build Status](https://travis-ci.org/PolymerElements/iron-swipeable-container.svg?branch=master)](https://travis-ci.org/PolymerElements/iron-swipeable-container)
1312

1413
_[Demo and API Docs](https://elements.polymer-project.org/elements/iron-swipeable-container)_
15-

‎bower.json‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
{
2+
"name": "iron-swipeable-container",
3+
"version": "1.0.0",
4+
"description": "A container that alows any of its nested children to be swiped away.",
5+
"authors": [
6+
"The Polymer Authors"
7+
],
8+
"keywords": [
9+
"web-components",
10+
"polymer",
11+
"swipe",
12+
"swipeable"
13+
],
14+
"main": [
15+
"iron-swipeable-container.html"
16+
],
17+
"private": true,
18+
"repository": {
19+
"type": "git",
20+
"url": "git://github.com/PolymerElements/iron-swipeable-container.git"
21+
},
22+
"license": "http://polymer.github.io/LICENSE.txt",
23+
"homepage": "https://github.com/PolymerElements/iron-swipeable-container",
24+
"ignore": [],
25+
"dependencies": {
26+
"polymer": "Polymer/polymer#^1.1.0"
27+
},
28+
"devDependencies": {
29+
"webcomponentsjs": "webcomponents/webcomponentsjs#^0.7.0",
30+
"web-component-tester": "polymer/web-component-tester#^3.4.0",
31+
"test-fixture": "PolymerElements/test-fixture#^1.0.0",
32+
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
33+
"iron-test-helpers": "PolymerElements/iron-test-helpers#^1.0.0",
34+
"paper-card": "PolymerElements/paper-card#^1.0.0",
35+
"paper-styles": "PolymerElements/paper-styles#^1.0.0"
36+
}
37+
}

‎demo/index.html‎

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
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 lang="en">
12+
<head>
13+
<title>iron-swipeable-container demo</title>
14+
<meta charset="utf-8">
15+
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
16+
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
17+
18+
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
19+
20+
<link rel="import" href="../iron-swipeable-container.html">
21+
<link rel="import" href="../../paper-card/paper-card.html">
22+
<link rel="import" href="../../paper-styles/demo-pages.html">
23+
<link rel="import" href="../../paper-styles/color.html">
24+
25+
<style is="custom-style">
26+
paper-card {
27+
width: 100%;
28+
margin-bottom: 16px;
29+
}
30+
31+
.item {
32+
margin-bottom: 16px;
33+
padding: 20px;
34+
background-color: var(--paper-lime-500);
35+
}
36+
37+
.item.blue {
38+
background-color: var(--paper-blue-300);
39+
}
40+
41+
/* If you want your things to swipe nicely, you might want to disable
42+
* text selection on those elements. */
43+
.swipe {
44+
-moz-user-select: none;
45+
-ms-user-select: none;
46+
-webkit-user-select: none;
47+
user-select: none;
48+
cursor: default;
49+
}
50+
</style>
51+
52+
</head>
53+
<body unresolved>
54+
<div class="vertical-section-container centered">
55+
<h4>Horizontal swipe</h4>
56+
<div class="vertical-section">
57+
<iron-swipeable-container>
58+
<div class="item swipe">You can swipe native elements. This is a plain div.</div>
59+
60+
<paper-card class="swipe" heading="Swipe me!">
61+
<div class="card-content">
62+
You can automatically swipe custom elements, too. This is a paper-card.
63+
</div>
64+
</paper-card>
65+
66+
<paper-card class="swipe">
67+
<div class="card-content">
68+
This is another paper-card. Hello!
69+
</div>
70+
</paper-card>
71+
72+
<div class="item blue disable-swipe">This is another div but it can't be swiped.</div>
73+
</iron-swipeable-container>
74+
</div>
75+
76+
<h4>Curve swipe</h4>
77+
<div class="vertical-section">
78+
<iron-swipeable-container swipe-style="curve">
79+
<div class="item swipe">You can swipe native elements. This is a plain div.</div>
80+
81+
<paper-card class="swipe" heading="Swipe me!">
82+
<div class="card-content">
83+
You can automatically swipe custom elements, too. This is a paper-card.
84+
</div>
85+
</paper-card>
86+
87+
<paper-card class="swipe">
88+
<div class="card-content">
89+
This is another paper-card. Hello!
90+
</div>
91+
</paper-card>
92+
93+
<div class="item blue disable-swipe">This is another div but it can't be swiped.</div>
94+
</iron-swipeable-container>
95+
</div>
96+
97+
<h4>Swipe disabled</h4>
98+
<div class="vertical-section">
99+
<iron-swipeable-container disabled>
100+
<div class="item swipe">You can swipe native elements. This is a plain div.</div>
101+
102+
<paper-card class="swipe" heading="Swipe me!">
103+
<div class="card-content">
104+
You can automatically swipe custom elements, too. This is a paper-card.
105+
</div>
106+
</paper-card>
107+
108+
<paper-card class="swipe">
109+
<div class="card-content">
110+
This is another paper-card. Hello!
111+
</div>
112+
</paper-card>
113+
114+
<div class="item blue">This is another div.</div>
115+
</iron-swipeable-container>
116+
</div>
117+
</div>
118+
</body>
119+
</html>

‎index.html‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
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+
<title>iron-swipeable-container</title>
18+
19+
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
20+
<link rel="import" href="../iron-component-page/iron-component-page.html">
21+
22+
</head>
23+
<body>
24+
25+
<iron-component-page></iron-component-page>
26+
27+
</body>
28+
</html>

0 commit comments

Comments
 (0)