mntouch eingebaut, dynamisches Hintergrundbild geadded

2016-11-22 10:56:57 +01:00
parent ec1a308629
commit 5e323b684d
9 changed files with 175 additions and 7 deletions
--- a/www/lib/mn-touch/mn-touch.js
+++ b/www/lib/mn-touch/mn-touch.js
@@ -0,0 +1,125 @@
+/**
+ * 
+ * @name: mnTouch
+ * @version: 1.3.2
+ * @description: Ultrafast AngularJS touch events directive (tap, hold and swipe)
+ * @author: Alessandro Bellini - ilmente
+ * @license: MIT
+ *
+ */
+"use strict";
+
+angular.module("mn", []).directive("mnTouch", [ "$timeout", function($timeout) {
+    var touchEngine = function(scope, element, attrs) {
+        scope.$event = {
+            name: "",
+            isSecure: false,
+            isRunning: false,
+            target: element[0],
+            threshold: !!attrs.threshold ? attrs.threshold : 10,
+            holdfor: !!attrs.holdfor ? attrs.holdfor : 500,
+            types: {
+                start: "mousedown",
+                move: "mousemove",
+                end: "mouseup",
+                cancel: ""
+            },
+            time: {},
+            coords: {},
+            events: {},
+            directionX: 0,
+            directionY: 0,
+            offsetX: 0,
+            offsetY: 0
+        };
+        var fn = function(eventName) {
+            scope.$event.name = eventName;
+            if (!!attrs[eventName]) {
+                scope.$eval(attrs[eventName]);
+                scope.$apply();
+            }
+        };
+        var getCoords = function(event) {
+            return {
+                x: event.pageX || 0,
+                y: event.pageY || 0
+            };
+        };
+        if (typeof window.ontouchstart !== "undefined" && typeof window.ontouchend !== "undefined" && typeof window.ontouchcancel !== "undefined") {
+            scope.$event.types.start = "touchstart";
+            scope.$event.types.move = "touchmove";
+            scope.$event.types.end = "touchend";
+            scope.$event.types.cancel = "touchcancel";
+            getCoords = function(event) {
+                var coords = !!event && !!event.changedTouches && !!event.changedTouches.length > 0 ? event.changedTouches[0] : {};
+                return {
+                    x: coords.pageX || event.pageX || 0,
+                    y: coords.pageY || event.pageY || 0
+                };
+            };
+        } else if (window.navigator.pointerEnabled) {
+            scope.$event.types.start = "pointerdown";
+            scope.$event.types.move = "pointermove";
+            scope.$event.types.end = "pointerup";
+        } else if (window.navigator.msPointerEnabled) {
+            scope.$event.types.start = "MSPointerDown";
+            scope.$event.types.move = "MSPointerMove";
+            scope.$event.types.end = "MSPointerUp";
+            scope.$event.types.cancel = "MSPointerOut";
+        }
+        if (!!attrs["tap"]) {
+            scope.$event.isSecure = false;
+            scope.$event.isRunning = false;
+            var onStartEvent = function(startEvent) {
+                scope.$event.events.start = startEvent;
+                scope.$event.coords.start = getCoords(startEvent);
+                fn("tap");
+            };
+            scope.$event.target.addEventListener(scope.$event.types.start, onStartEvent, false);
+        } else {
+            scope.$event.isSecure = true;
+            var holdPromise = null;
+            var onStartEvent = function(startEvent) {
+                scope.$event.isRunning = true;
+                scope.$event.time.start = new Date().getTime();
+                scope.$event.events.start = startEvent;
+                scope.$event.coords.start = getCoords(startEvent);
+                if (!!attrs["hold"]) {
+                    holdPromise = $timeout(function() {
+                        onEndEvent(scope.$event.events.move || startEvent);
+                    }, scope.$event.holdfor, false);
+                }
+            };
+            var onMoveEvent = function(moveEvent) {
+                if (scope.$event.isRunning) {
+                    scope.$event.events.move = moveEvent;
+                }
+            };
+            var onEndEvent = function(endEvent) {
+                if (!!holdPromise) $timeout.cancel(holdPromise);
+                if (scope.$event.isRunning) {
+                    scope.$event.isRunning = false;
+                    scope.$event.time.end = new Date().getTime();
+                    scope.$event.time.duration = scope.$event.time.end - scope.$event.time.start;
+                    scope.$event.events.end = endEvent;
+                    scope.$event.coords.end = getCoords(endEvent);
+                    scope.$event.directionX = scope.$event.coords.end.x - scope.$event.coords.start.x;
+                    scope.$event.directionY = scope.$event.coords.end.y - scope.$event.coords.start.y;
+                    scope.$event.offsetX = Math.abs(scope.$event.directionX);
+                    scope.$event.offsetY = Math.abs(scope.$event.directionY);
+                    if (scope.$event.offsetX <= scope.$event.threshold && scope.$event.offsetY <= scope.$event.threshold) {
+                        if (!!attrs["hold"] && scope.$event.time.duration >= scope.$event.holdfor) fn("hold"); else fn("secureTap");
+                    } else if (scope.$event.offsetX >= scope.$event.offsetY) fn(scope.$event.directionX > 0 ? "swipeRight" : "swipeLeft"); else fn(scope.$event.directionY > 0 ? "swipeDown" : "swipeUp");
+                }
+            };
+            scope.$event.target.addEventListener(scope.$event.types.start, onStartEvent, false);
+            scope.$event.target.addEventListener(scope.$event.types.end, onEndEvent, false);
+            if (!!scope.$event.types.cancel) scope.$event.target.addEventListener(scope.$event.types.cancel, onEndEvent, false);
+            if (!!attrs["hold"]) scope.$event.target.addEventListener(scope.$event.types.move, onMoveEvent, false);
+        }
+    };
+    return {
+        restrict: "A",
+        link: touchEngine
+    };
+} ]);