jschaufuss/DiceCloud
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added more material design touch response, swipe pages, and began effects lists

Browse Source
This commit is contained in:
Thaum
2014-12-09 13:42:05 +00:00
parent ad474590bd
commit a26589157e
33 changed files with 840 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
rpg-docs/public/bower_components/swipe-pages/.bowerrc vendored Normal file
View File

@@ -0,0 +1,3 @@
{
"directory": "../"
}

1
rpg-docs/public/bower_components/swipe-pages/.gitattributes vendored Normal file
View File

@@ -0,0 +1 @@
* text=auto

6
rpg-docs/public/bower_components/swipe-pages/.gitignore vendored Normal file
View File

@@ -0,0 +1,6 @@
node_modules
dist
.sass-cache
.tmp
.editorconfig
.jshintrc

35
rpg-docs/public/bower_components/swipe-pages/README.md vendored Normal file
View File

@@ -0,0 +1,35 @@
swipe-pages
================
See the [component page](http://TheSeamau5.github.io/swipe-pages) for more information.
## TODO
- [x] Improve page scroll stability
- [x] Improve page scroll performance
- [ ] Improve performance in swiping between pages (by reusing pages?)
- [x] Have pages scroll down independently of each other
- [ ] Make element play nicer with the polymer core-elements (like core-scroll-header-panel and core-list)
- [ ] Add option to mark each page with a browser tag to resume state from url
- [x] Include sane defaults for hardware acceleration (translateZ hack in the right places)
- [ ] Make a nicer demo with more features to better explain the element
- [ ] Add option to reverse direction for rtl languages
- [ ] Do some more rigorous testing to ensure stability!!!
- [ ] Allow for individual pages to be created dynamically.
## Installation
With Bower:
bower install swipe-pages
## Basic Example
<swipe-pages>
<swipe-page>I am page 0<swipe-page>
<swipe-page>I am page 1<swipe-page>
<swipe-page>I am page 2<swipe-page>
</swipe-pages>

16
rpg-docs/public/bower_components/swipe-pages/bower.json vendored Normal file
View File

@@ -0,0 +1,16 @@
{
"name": "swipe-pages",
"version": "0.2.1",
"keywords": [
"seed",
"polymer",
"web-components"
],
"main": "swipe-pages.html",
"dependencies": {
"polymer": "Polymer/polymer#^0.4.0"
},
"devDependencies": {
"polymer-test-tools": "Polymer/polymer-test-tools#^0.4.0"
}
}

22
rpg-docs/public/bower_components/swipe-pages/demo.html vendored Normal file
View File

@@ -0,0 +1,22 @@
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=no">
<title>swipe-pages Demo</title>
<script src="../platform/platform.js"></script>
<link rel="import" href="swipe-pages.html">
</head>
<body unresolved fullbleed layout vertical center center-justified>
<swipe-pages>
<swipe-page style="background-color: blue" layout vertical>
<div style="top: 50%; height: 100%; width: 100%; background-color:beige"></div>
</swipe-page>
<swipe-page style="background-color: red"></swipe-page>
<swipe-page style="background-color: green"></swipe-page>
<swipe-page style="background-color: indigo"></swipe-page>
</swipe-pages>
</body>
</html>

15
rpg-docs/public/bower_components/swipe-pages/index.html vendored Normal file
View File

@@ -0,0 +1,15 @@
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<script src="../platform/platform.js"></script>
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../core-component-page/core-component-page.html">
</head>
<body unresolved>
<core-component-page></core-component-page>
</body>
</html>

15
rpg-docs/public/bower_components/swipe-pages/swipe-page.css vendored Normal file
View File

@@ -0,0 +1,15 @@
:host, .pageContainer{
display: block;
height: 100%;
width: 100%;
}
.pageContainer{
overflow-y: auto;
background-color: rgba(255,255,255,0);
/*This is for a bug in chrome where pages flash white. Why? I dunno.
But, these two lines solve the problem... so... DO NOT TOUCH THIS!*/
backface-visibility: hidden;
transform: scale(1);
}

30
rpg-docs/public/bower_components/swipe-pages/swipe-page.html vendored Normal file
View File

@@ -0,0 +1,30 @@
<link rel="import" href="../polymer/polymer.html">
<polymer-element name="swipe-page" attributes="">
<template>
<link rel="stylesheet" href="swipe-page.css" />
<div id="pageContainer" class="pageContainer">
<content></content>
</div>
</template>
<script>
(function(){
'use strict';
Polymer({
});
})();
</script>
</polymer-element>

20
rpg-docs/public/bower_components/swipe-pages/swipe-pages.css vendored Normal file
View File

@@ -0,0 +1,20 @@
:host, .pagesContainer {
display: block;
height: 100%;
width: 100%;
}
:host{
overflow: hidden;
}
.pagesContainer{
overflow-x : hidden;
overflow-y: hidden;
background-color: rgba(255,255,255,0);
transform: translateZ(0);
}
content[select="swipe-page"]::content *{
position: relative;
}

279
rpg-docs/public/bower_components/swipe-pages/swipe-pages.html vendored Normal file
View File

@@ -0,0 +1,279 @@
<!--
Copyright (c) 2014 Hassan Hayat <hassan.hayat7@gmail.com>
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
-->
<!--
Provides horizontally swipeable pages.
The `swipe-pages` element must have `swipe-page` elements as its children.
This ensures readibility of code and a given amount of control on the behavior
of individual pages.
A `swipe-pages` element is an element containing several `swipe-page` elements
as subviews. The `swipe-pages` element is given a certain width and height
through CSS and then each individual `swipe-page` will automatically take of the full size
of the parent element. This means that the `swipe-page` elements are assumed
to all have the exact same size which they all derive from the `swipe-pages`
element.
###Example:
<swipe-pages selected = "1">
<swipe-page>Hey I'm page 0</swipe-page>
<swipe-page><h1>Hi, I'm on page 1</h1></swipe-page>
<swipe-page><p>I am page 2 and I totally rock!</p></swipe-page>
</swipe-pages>
Swiping left moves to the next page while swiping right moves to the previous page.
This behavior is very typical on mobile applications.
The key to this element is that when swiping, the page follows your finger
horizontally so as to give the user immediate feedback that he/she is swiping
between pages.
Pages only transition when the swipe gesture has crossed a certain threshold
which is exposed by the `threshold` attribute.
###Example:
<swipe-pages threshold = "0.5">
<swipe-page> ... </swipe-page>
<swipe-page> ... </swipe-page>
</swipe-pages>
By setting the `threshold` to 0.5, you ensure that the page will only transition
if the swipe gesture has crossed half the `swipe-pages` width horizontally.
`threshold` accepts values between 0 and 1.
A `threshold` value of 0 implies that any swipe gesture will cause a page
transition. A `threshold` value of 1 implies that no page transition is possible
as you must cross more that the entire size of the `swipe-pages` element horizontally
which is impossible given that the size of the `swipe-pages` element is well-defined.
@class swipe-pages
@blurb Provides horizontally swipeable pages.
@status alpha
-->
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="swipe-page.html">
<polymer-element name="swipe-pages" attributes="selected threshold transitionDuration">
<template>
<link rel="stylesheet" href="swipe-pages.css" />
<div id="pagesContainer" class="pagesContainer" touch-action="pan-y">
<content id="pages" select="swipe-page"></content>
</div>
</template>
<script>
(function(){
'use strict';
var isWebkit = document.body.style.webkitTransform !== undefined;
var getPositionArray = function(length){
var a = [];
for (var i = 0; i < length; i++){
a[i] = (i * 100);
}
return a;
};
var resetAnimations = function(element){
setTransition("", element);
};
var setAnimationDuration = function(duration, element, easingFunction){
easingFunction = easingFunction || "ease-out";
var transition = (isWebkit ? "-webkit-" : "") + "transform " + duration.toString() + "s " + easingFunction;
setTransition(transition, element);
};
var setTransition = function(transition, element){
if (isWebkit){
element.$.pagesContainer.style.webkitTransition = transition;
}else{
element.$.pagesContainer.style.transition = transition;
}
};
var setTransform = function(transform, element){
if (isWebkit){
element.$.pagesContainer.style.webkitTransform = transform;
}else{
element.$.pagesContainer.style.transform = transform;
}
};
var moveToPosition = function(position, element){
var transform = "translateX(" + position.toString() + "%)";
setTransform(transform, element);
};
var moveToPage = function(pageNumber, element){
var position = -pageNumber * 100 / element.pageCount;
moveToPosition(position, element);
};
var resetScrollTop = function(element){
element.$.pageContainer.scrollTop = 0;
};
Polymer({
get pageCount(){
return this.$.pages.getDistributedNodes().length;
},
get pages(){
return this.$.pages.getDistributedNodes();
},
get pageWidth(){
return this.getBoundingClientRect().width;
},
resetPositions : function(){
var positionArray = getPositionArray(this.pageCount);
for (var i = 0; i < this.pageCount; i++){
this.pages[i].style.left = "" + (positionArray[i] / this.pageCount) + "%";
this.pages[i].style.top = "-" + positionArray[i].toString() + "%";
}
},
resetWidths : function(){
this.$.pagesContainer.style.width = "" + (100 * this.pageCount) + "%";
for (var i = 0; i < this.pageCount; i++){
this.pages[i].style.width = "" + (100 / this.pageCount) + "%";
}
},
setupEventHandlers : function(){
this.setupTrackStartEventHandler();
this.setupTrackEventHandler();
this.setupTrackEndEventHandler();
},
setupTrackStartEventHandler : function(){
PolymerGestures.addEventListener(this, "trackstart", function(event){
resetAnimations(this);
});
},
setupTrackEventHandler : function(){
PolymerGestures.addEventListener(this, "track", function(event){
var isFirstPage = (this.selected === 0);
var isLastPage = (this.selected === (this.pageCount - 1));
var userIsSwipingLeftwards = (event.dx < 0);
var userIsSwipingRightwards = (event.dx > 0);
var tryingToSwipeToLeftOfFirstPage = userIsSwipingRightwards && isFirstPage;
var tryingToSwipeToRightOfLastPage = userIsSwipingLeftwards && isLastPage;
var tryingToSwipeToOutOfBoundsPage = tryingToSwipeToLeftOfFirstPage || tryingToSwipeToRightOfLastPage;
if (!tryingToSwipeToOutOfBoundsPage){
var position = -(this.selected - (event.dx / this.pageWidth)) * 100 / this.pageCount;
moveToPosition(position, this);
}
});
},
setupTrackEndEventHandler : function(){
PolymerGestures.addEventListener(this, "trackend", function(event){
var userIsSwipingLeftwards = (event.dx < 0);
var userIsSwipingRightwards = (event.dx > 0);
var thresholdWasCrossed = (Math.abs(event.dx) / this.pageWidth) > this.threshold;
setAnimationDuration(this.transitionDuration, this);
if (thresholdWasCrossed){
if (userIsSwipingRightwards){
this.selected = Math.max(this.selected - 1, 0);
}
if (userIsSwipingLeftwards){
this.selected = Math.min(this.selected + 1, this.pageCount - 1);
}
}else{
moveToPage(this.selected, this);
}
});
},
publish: {
/**
* Specifies the index of the currently selected page
* @attribute selected
* @default 0
* @type Number
*/
threshold: 0.3,
/**
* Specifies the threshold the user must swipe in order to
* cause a page transition.
* Only accepts values between 0 and 1.
* @attribute threshold
* @default 0.3
* @type Number
*/
transitionDuration: 0.3,
/**
* Specifies the duration (in seconds) of the transition from one
* page to another
* @attribute transitionDuration
* @default 0.3
* @type Number
*/
selected: 0,
},
selectedChanged : function(oldValue, newValue){
if (newValue >= this.pageCount || newValue < 0){
var errorMessage = "Page " + newValue.toString() + " is not a defined page. There are only " + this.pageCount.toString() + " pages.";
throw errorMessage;
}
moveToPage(newValue, this);
var self = this;
window.setTimeout(function(){
resetScrollTop(self.pages[oldValue]);
}, self.transitionDuration * 1000);
},
ready: function(){
this.resetPositions();
this.resetWidths();
this.setupEventHandlers();
}
});
})();
</script>
</polymer-element>