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

rpg-docs/public/custom_components/swipe-detect/swipe-detect.html

@@ -0,0 +1,83 @@
+<link rel="import" href="/bower_components/polymer/polymer.html">
+
+
+<polymer-element name="swipe-detect" attributes="threshold">
+
+	<template>
+
+		<div id="swipeDetector" class="swipeDetector" touch-action="pan-y">
+			<content></content>
+		</div>
+
+	</template>
+
+	<script>
+		(function(){
+			'use strict';
+
+			var isWebkit = document.body.style.webkitTransform !== undefined;
+
+			Polymer({
+
+				setupEventHandlers : function(){
+					this.setupTrackStartEventHandler();
+					this.setupTrackEventHandler();
+					this.setupTrackEndEventHandler();
+				},
+
+				setupTrackStartEventHandler : function(){
+					PolymerGestures.addEventListener(this, "trackstart", function(event){
+						//tracking started
+					});
+				},
+
+				setupTrackEventHandler : function(){
+					PolymerGestures.addEventListener(this, "track", function(event){
+						var userIsSwipingLeftwards = (event.dx < 0);
+						var userIsSwipingRightwards = (event.dx > 0);
+						//tracking events fired
+					});
+				},
+
+				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.getBoundingClientRect().width) > this.threshold;
+
+						if (thresholdWasCrossed){
+							if (userIsSwipingRightwards){
+								$(this).trigger("swiperight")
+							}
+							if (userIsSwipingLeftwards){
+								$(this).trigger("swipeleft")
+							}
+						}
+					});
+				},
+
+				publish: {
+					/**
+          * 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
+          */
+					threshold: 0.3,
+				},
+
+				ready: function(){
+					this.setupEventHandlers();
+				}
+
+			});
+
+		})();
+
+
+	</script>
+
+</polymer-element>