From 5e323b684d08427840be87de1e3003c197635609 Mon Sep 17 00:00:00 2001 From: "Hilmer, Carsten" Date: Tue, 22 Nov 2016 10:56:57 +0100 Subject: [PATCH] mntouch eingebaut, dynamisches Hintergrundbild geadded --- README.md | 6 ++ www/css/style.css | 2 +- www/index.html | 16 ++++ www/js/app.js | 19 ++++- www/js/home_controller.js | 2 + www/js/minispiel1_controller.js | 6 +- www/js/suchspiel_controller.js | 4 +- www/lib/mn-touch/mn-touch.js | 125 ++++++++++++++++++++++++++++++++ www/templates/minispiel1.html | 2 +- 9 files changed, 175 insertions(+), 7 deletions(-) create mode 100644 www/lib/mn-touch/mn-touch.js diff --git a/README.md b/README.md index 7fcb93e..86aedea 100644 --- a/README.md +++ b/README.md @@ -15,6 +15,12 @@ cordova plugin add https://github.com/EddyVerbruggen/Insomnia-PhoneGap-Plugin.gi +JS - Module +================ +Install: npm install mn-touch +Doku: https://github.com/ilmente/mnTouch + + Css ================ https://github.com/miniMAC/magic diff --git a/www/css/style.css b/www/css/style.css index 35f1627..4b0cca7 100644 --- a/www/css/style.css +++ b/www/css/style.css @@ -9,7 +9,7 @@ */ .scroll-content { - background: url("../img/Background/background.svg"); + /*background: url("../img/Background/background.svg");*/ background-size: cover; color: #333; font: 100% Arial, Sans Serif; diff --git a/www/index.html b/www/index.html index a8c96e6..b13ed6c 100644 --- a/www/index.html +++ b/www/index.html @@ -31,6 +31,7 @@ + @@ -46,6 +47,21 @@ + + + + diff --git a/www/js/app.js b/www/js/app.js index 193b877..468c796 100644 --- a/www/js/app.js +++ b/www/js/app.js @@ -1,11 +1,23 @@ // Ionic Starter App + +//Global variable für alle Superglobalen Werte +window.globalVariable = { + //custom color style variable + color: { + appPrimaryColor: "" + },// End custom color style variable + backgroundimage: "img/Background/background.svg", + adMob: "ca-app-pub-3940256099942544/6300978111", //Use for AdMob API clientID. + adfree: "" +};// End Global variable + // angular.module is a global place for creating, registering and retrieving Angular modules // 'starter' is the name of this angular module example (also set in a attribute in index.html) // the 2nd parameter is an array of 'requires' -angular.module('kinderspiel', ['ionic', 'ngCordova','ngAnimate', 'ngDraggable', 'kinderspiel.controllers', 'kinderspiel.services']) +angular.module('kinderspiel', ['ionic', 'ngCordova','ngAnimate', 'ngDraggable', 'mn', 'kinderspiel.controllers', 'kinderspiel.services']) -.run(function($ionicPlatform, $state, backgroundsounds_mediahandler) { +.run(function($ionicPlatform, $rootScope, $state, backgroundsounds_mediahandler) { $ionicPlatform.ready(function() { @@ -38,6 +50,9 @@ angular.module('kinderspiel', ['ionic', 'ngCordova','ngAnimate', 'ngDraggable', */ //window.plugins.insomnia.allowSleepAgain(); + //SetBackgroundpic + $rootScope.backgroundimage = window.globalVariable.backgroundimage; + /* * Homebutton und Backgroundinfos abrufen */ diff --git a/www/js/home_controller.js b/www/js/home_controller.js index f6ea861..cbb117d 100644 --- a/www/js/home_controller.js +++ b/www/js/home_controller.js @@ -84,6 +84,8 @@ appControllers.controller('home', function($scope, $ionicPlatform, $cordovaMedia $scope.animate_kornspeicher=function(){ + //SetBackgroundpic + //$rootScope.backgroundimage = "img/ufo.png"; $scope.CSSKornspeicher=true; $timeout(function () { $scope.CSSKornspeicher=false; diff --git a/www/js/minispiel1_controller.js b/www/js/minispiel1_controller.js index 97eab37..a775a6d 100644 --- a/www/js/minispiel1_controller.js +++ b/www/js/minispiel1_controller.js @@ -40,6 +40,10 @@ $ionicPlatform.ready(function() { } else if (data[i].type=='gamesound'){ $scope.gamesounds.push(data[i].sound); + + $timeout(function () { + playsound('gamesound', $scope.gamesounds[0], minispielstart,'1.0'); + }, 1000); } else if (data[i].type=='backgroundmusic'){ backgroundsounds_mediahandler.setbackgroundsoundfile(data[i].sound); @@ -51,7 +55,7 @@ $ionicPlatform.ready(function() { });//$http - playsound('gamesound', $scope.gamesounds[0], minispielstart,'1.0'); + }); diff --git a/www/js/suchspiel_controller.js b/www/js/suchspiel_controller.js index 65e54e5..6731837 100644 --- a/www/js/suchspiel_controller.js +++ b/www/js/suchspiel_controller.js @@ -1,4 +1,4 @@ -appControllers.controller('Suchspiel', function($scope, $ionicPlatform, $cordovaMedia, backgroundsounds_mediahandler, $state, $timeout,$q, $http) { +appControllers.controller('Suchspiel', function($scope, $ionicPlatform, $cordovaMedia, backgroundsounds_mediahandler, $state, $timeout,$q, $http) { /* @@ -30,7 +30,7 @@ $scope.CSSFalscheAntwort = false; $scope.CCSInittimer = false; //SpieleTimer -$scope.Spielzeit = 10; +$scope.Spielzeit = 90; $scope.showgametimer = false; //Spielzeit vorbei diff --git a/www/lib/mn-touch/mn-touch.js b/www/lib/mn-touch/mn-touch.js new file mode 100644 index 0000000..fca1bd6 --- /dev/null +++ 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 + }; +} ]); \ No newline at end of file diff --git a/www/templates/minispiel1.html b/www/templates/minispiel1.html index 0f06815..7e72765 100644 --- a/www/templates/minispiel1.html +++ b/www/templates/minispiel1.html @@ -1,7 +1,7 @@ -
+