summaryrefslogtreecommitdiff
path: root/www
diff options
context:
space:
mode:
Diffstat (limited to 'www')
-rw-r--r--www/.DS_Storebin6148 -> 6148 bytes
-rw-r--r--www/css/style.css6
-rw-r--r--www/js/EventCtrl.js5
-rw-r--r--www/js/ModalCtrl.js198
-rw-r--r--www/templates/events-modal.html6
-rw-r--r--www/templates/monitors-modal.html35
6 files changed, 102 insertions, 148 deletions
diff --git a/www/.DS_Store b/www/.DS_Store
index c21f88ea..03dd21d2 100644
--- a/www/.DS_Store
+++ b/www/.DS_Store
Binary files differ
diff --git a/www/css/style.css b/www/css/style.css
index 42ef1e30..62545261 100644
--- a/www/css/style.css
+++ b/www/css/style.css
@@ -567,4 +567,10 @@ input[type=range]::-webkit-slider-thumb {
}
+#monitorimage
+{
+ -webkit-animation-duration: 200ms;
+}
+
+
diff --git a/www/js/EventCtrl.js b/www/js/EventCtrl.js
index 42c96118..71bf6b27 100644
--- a/www/js/EventCtrl.js
+++ b/www/js/EventCtrl.js
@@ -1247,8 +1247,9 @@ angular.module('zmApp.controllers')
//Navigate to next/prev event in full screen mode
//--------------------------------------------------------
- $scope.onSwipe = function(eid,dirn)
+ $scope.onSwipeEvent = function(eid,dirn)
{
+ console.log ("HERE");
var ld = ZMDataModel.getLogin();
if (!ld.canSwipeMonitors) return;
@@ -1258,7 +1259,7 @@ angular.module('zmApp.controllers')
console.log("Image is zoomed in - not honoring swipe");
return;
}
-
+ console.log ("JUMPING");
jumpToEvent(eid,dirn);
};
diff --git a/www/js/ModalCtrl.js b/www/js/ModalCtrl.js
index dea908d8..1384b519 100644
--- a/www/js/ModalCtrl.js
+++ b/www/js/ModalCtrl.js
@@ -9,6 +9,7 @@ angular.module('zmApp.controllers').controller('ModalCtrl', ['$scope', '$rootSco
console.log("**** INSIDE MODAL CTRL, recomputing rand *****");
+ $scope.animationInProgress = false;
$scope.imageFit = false;
// FIXME: This is a hack - for some reason
// the custom slider view is messed up till the image loads
@@ -301,72 +302,48 @@ angular.module('zmApp.controllers').controller('ModalCtrl', ['$scope', '$rootSco
});
}
+
$scope.finishedLoadingImage = function () {
// console.log("***Monitor image FINISHED Loading***");
$ionicLoading.hide();
};
-
- $scope.onTapLeft = function (m,d)
- {
-
- var curstate = $ionicHistory.currentStateName();
- var found=0;
- var mid;
- mid = ZMDataModel.getNextMonitor(m, d);
- if (curstate != "monitors")
- {
- do
- {
- mid = ZMDataModel.getNextMonitor(m, d);
- m = mid;
- found = 0;
- for (var i = 0 ; i< $scope.monitors.length; i++)
- {
- if ($scope.monitors[i].Monitor.Id == mid && $scope.monitors[i].Monitor.listDisplay != 'noshow')
- {
- found = 1;
- ZMDataModel.zmDebug("ModalCtrl: swipe detected, moving to " + mid);
- break;
- }
- }
-
-
- }
- while (found !=1);
- }
-
- $scope.monitorId = mid;
- $scope.monitorName = ZMDataModel.getMonitorName(mid);
-
- $ionicLoading.hide();
- $ionicLoading.show({
- template: "please wait...",
- noBackdrop: true,
- duration: zm.loadingTimeout,
- });
- };
-
$scope.getZoomLevel = function()
{
console.log ("ON RELEASE");
var zl = $ionicScrollDelegate.$getByHandle("imgscroll").getScrollPosition();
console.log (JSON.stringify(zl));
+ };
+
+ $scope.onTap = function (m,d)
+ {
+
+ moveToMonitor(m,d);
};
- $scope.onSwipeLeft = function (m, d) {
+
+
+
+ $scope.onSwipe = function (m, d)
+ {
var ld = ZMDataModel.getLogin();
if (!ld.canSwipeMonitors) return;
- if
- ($ionicScrollDelegate.$getByHandle("imgscroll").getScrollPosition().zoom!=1)
- {
- console.log("Image is zoomed in - not honoring swipe");
- return;
- }
+ if
+ ($ionicScrollDelegate.$getByHandle("imgscroll").getScrollPosition().zoom!=1)
+ {
+ console.log("Image is zoomed in - not honoring swipe");
+ return;
+ }
+ moveToMonitor(m,d);
+
+ };
+
+ function moveToMonitor(m,d)
+ {
var curstate = $ionicHistory.currentStateName();
var found=0;
var mid;
@@ -399,104 +376,59 @@ angular.module('zmApp.controllers').controller('ModalCtrl', ['$scope', '$rootSco
while (found !=1);
}
- $scope.monitorId = mid;
- $scope.monitorName = ZMDataModel.getMonitorName(mid);
-
-
- $ionicLoading.hide();
- $ionicLoading.show({
- template: "please wait...",
- noBackdrop: true,
- duration: zm.loadingTimeout,
- });
-
-
-
- };
-
- $scope.onTapRight = function (m,d)
- {
- //ZMDataModel.zmDebug("ModalCtrl:Right tap detected, moving to " + ZMDataModel.getNextMonitor(m, d));
- var found=0;
- var mid;
- var curstate = $ionicHistory.currentStateName();
- mid = ZMDataModel.getNextMonitor(m, d);
- if (curstate != "monitors")
+ var slidein;
+ var slideout;
+ var dirn=d;
+ if (dirn==1)
{
- do
- {
-
- mid = ZMDataModel.getNextMonitor(m, d);
- m = mid;
- found = 0;
- for (var i = 0 ; i< $scope.monitors.length; i++)
- {
- if ($scope.monitors[i].Monitor.Id == mid && $scope.monitors[i].Monitor.listDisplay != 'noshow' )
- {
- found = 1;
- ZMDataModel.zmDebug("ModalCtrl: swipe detected, moving to " + mid);
- break;
- }
- }
-
-
- }
- while (found !=1);
+ slideout = "animated slideOutLeft";
+ slidein = "animated slideInRight";
+ }
+ else
+ {
+ slideout = "animated slideOutRight";
+ slidein = "animated slideInLeft";
}
+
+ var element = angular.element(document.getElementById("monitorimage"));
+ element.addClass(slideout)
+ .one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', outWithOld);
- $scope.monitorId = mid;
- $scope.monitorName = ZMDataModel.getMonitorName(mid);
- $ionicLoading.show({
- template: "please wait...",
- noBackdrop: true,
- duration: zm.loadingTimeout,
- });
- };
- $scope.onSwipeRight = function (m, d) {
- if (!ld.canSwipeMonitors) return;
-
- if
- ($ionicScrollDelegate.$getByHandle("imgscroll").getScrollPosition().zoom!=1)
- {
- console.log("Image is zoomed in - not honoring swipe");
- return;
- }
-
- var found=0;
- var mid;
- var curstate = $ionicHistory.currentStateName();
- mid = ZMDataModel.getNextMonitor(m, d);
- if (curstate != "monitors")
- {
- do
- {
- mid = ZMDataModel.getNextMonitor(m, d);
- m = mid;
- found = 0;
- for (var i = 0 ; i< $scope.monitors.length; i++)
- {
- if ($scope.monitors[i].Monitor.Id == mid && $scope.monitors[i].Monitor.listDisplay != 'noshow')
- {
- found = 1;
- ZMDataModel.zmDebug("ModalCtrl: swipe detected, moving to " + mid);
- break;
- }
- }
+ function outWithOld()
+ {
+
+ element.removeClass(slideout);
+ $scope.rand = Math.floor((Math.random() * 100000) + 1);
+ $scope.animationInProgress = true;
+
+ element.addClass(slidein)
+ .one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', inWithNew );
+ $scope.monitorId = mid;
+ $scope.monitorName = ZMDataModel.getMonitorName(mid);
+ }
- }
- while (found !=1);
+ function inWithNew()
+ {
+
+ element.removeClass(slidein);
+ $scope.animationInProgress = false;
+
}
+
- $scope.monitorId = mid;
- $scope.monitorName = ZMDataModel.getMonitorName(mid);
+ $ionicLoading.hide();
$ionicLoading.show({
template: "please wait...",
noBackdrop: true,
duration: zm.loadingTimeout,
});
- };
+
+
+ }
+
+
//-----------------------------------------------------------------------
// Sucess/Error handlers for saving a snapshot of the
diff --git a/www/templates/events-modal.html b/www/templates/events-modal.html
index 8c2ca549..3a3f36ff 100644
--- a/www/templates/events-modal.html
+++ b/www/templates/events-modal.html
@@ -3,7 +3,8 @@
<ion-modal-view cache-view="false">
<ion-content style="background-color:#444444" ng-cloak>
- <ion-scroll has-bouncing=false min-zoom=1 zooming="true" direction="xy" style="width: 100%; " delegate-handle="imgscroll">
+ <ion-scroll has-bouncing=false min-zoom=1 zooming="true" direction="xy" style="width: 100%; " delegate-handle="imgscroll" on-swipe-left="onSwipeEvent(nextId,1)"
+ on-swipe-right="onSwipeEvent(prevId,-1)">
<div id="full-screen-event" style="height: 100vh;">
@@ -16,8 +17,7 @@
image-spinner-src="{{playbackURL}}/index.php?view=image&rand={{$root.rand}}&path={{relativePath}}{{slide.img}}&scale={{loginData.singleImageQuality}}"
image-spinner-loader="lines"
ng-class="{'zm-image-fit':imageFit==true, 'zm-image-crop':imageFit==false}"
- on-swipe-left="onSwipe(nextId,1)"
- on-swipe-right="onSwipe(prevId,-1)"
+
/>
</div>
<div ng-if="animationInProgress">
diff --git a/www/templates/monitors-modal.html b/www/templates/monitors-modal.html
index 47f67f08..e0779ed9 100644
--- a/www/templates/monitors-modal.html
+++ b/www/templates/monitors-modal.html
@@ -10,14 +10,29 @@
direction="xy" style="width: 100%; ">
<!-- android needs this 100vh - otherwise max- does not work -->
- <div style="height: 100vh;" class="main">
- <div ng-if="$root.authSession!='undefined'">
- <img id="monitorimage" imageonload="finishedLoadingImage()"
- image-spinner-loader="lines"
- image-spinner-src="{{LoginData.streamingurl}}/cgi-bin/nph-zms?mode=single&monitor={{monitorId}}{{$root.authSession}}&rand={{$root.modalRand}}" ng-class="{'zm-image-fit':imageFit==true, 'zm-image-crop':imageFit==false}"
- on-swipe-left="onSwipeLeft(monitorId,1)"
- on-swipe-right="onSwipeRight(monitorId,-1)" />
- <!-- on-swipe-left="onSwipeLeft(monitorId,-1)" on-swipe-right="onSwipeRight(monitorId,1)"-->
+ <div id="monitorimage" style="height: 100vh;" class="main">
+
+
+
+ <div ng-if="$root.authSession!='undefined'">
+
+
+ <div ng-if="!animationInProgress">
+ <img imageonload="finishedLoadingImage()"
+ image-spinner-loader="lines"
+ image-spinner-src="{{LoginData.streamingurl}}/cgi-bin/nph-zms?mode=single&monitor={{monitorId}}{{$root.authSession}}&rand={{$root.modalRand}}" ng-class="{'zm-image-fit':imageFit==true, 'zm-image-crop':imageFit==false}"
+ on-swipe-left="onSwipe(monitorId,1)"
+ on-swipe-right="onSwipe(monitorId,-1)" />
+
+ </div>
+ <div ng-if="animationInProgress">
+ <img
+
+ ng-src="img/pausevideo.png" ng-class="{'zm-image-fit':imageFit==true, 'zm-image-crop':imageFit==false}"
+ />
+ </div>
+
+
</div>
<div ng-if="$root.authSession=='undefined'">
<img id="img-$index" ng-src="img/pausevideo.png" style="display:block;"
@@ -52,9 +67,9 @@
</nav>
<nav mfb-menu position="tr" effect="zoomin" label="collapse" active-icon="ion-chevron-up" resting-icon="ion-chevron-down" toggling-method="click">
- <button mfb-button icon="ion-android-arrow-back" label="previous monitor" ng-click="onTapLeft(monitorId,-1);">
+ <button mfb-button icon="ion-android-arrow-back" label="previous monitor" ng-click="onTap(monitorId,-1);">
</button>
- <button mfb-button icon="ion-android-arrow-forward" label="next monitor" ng-click="onTapRight(monitorId,1);">
+ <button mfb-button icon="ion-android-arrow-forward" label="next monitor" ng-click="onTap(monitorId,1);">
</button>
</nav>
generated by cgit v1.2.3 (git 2.25.1) at 2025-12-06 09:43:13 +0000