diff options
| -rw-r--r-- | www/css/style.css | 10 | ||||
| -rw-r--r-- | www/js/MontageCtrl.js | 116 | ||||
| -rw-r--r-- | www/js/app.js | 2 | ||||
| -rw-r--r-- | www/templates/montage.html | 22 |
4 files changed, 122 insertions, 28 deletions
diff --git a/www/css/style.css b/www/css/style.css index d93a3352..fb2f6241 100644 --- a/www/css/style.css +++ b/www/css/style.css @@ -788,7 +788,15 @@ body { font-family: sans-serif; } .grid-sizer, .grid-item { width: 20%; } - +.grid-item-20 { width: 20%; } +.grid-item-30 { width: 30%; } +.grid-item-40 { width: 40%; } +.grid-item-50 { width: 50%; } +.grid-item-60 {width: 60%; } +.grid-item-70 { width: 70%; } +.grid-item-80 { width: 80%; } +.grid-item-90 {width: 90%; } +.grid-item-100 {width:100%; } . /* clear fix */ .grid:after { diff --git a/www/js/MontageCtrl.js b/www/js/MontageCtrl.js index 03bde86c..051c189e 100644 --- a/www/js/MontageCtrl.js +++ b/www/js/MontageCtrl.js @@ -25,6 +25,9 @@ angular.module('zmApp.controllers').controller('zmApp.MontageCtrl', ['$scope', ' $scope.scaleDirection = []; // 1 = increase -1 = decrease $scope.slider = {}; + + + $scope.slider.monsize = ZMDataModel.getMontageSize(); @@ -36,7 +39,36 @@ angular.module('zmApp.controllers').controller('zmApp.MontageCtrl', ['$scope', ' var oldMonitors = []; // To keep old order if user cancels after sort; - var pckry = ""; + var pckry, draggie; + var draggies; + $scope.isDragabillyOn = false; + $scope.gridScale = "grid-item-20"; + + $scope.changeScale = function() + { + if ($scope.gridScale=="") + $scope.gridScale = "grid-item-40"; + + else if ($scope.gridScale=="grid-item-40") + $scope.gridScale="grid-item-60"; + + else if ($scope.gridScale=="grid-item-60") + $scope.gridScale="grid-item-80"; + + + else if ($scope.gridScale =="grid-item-80") + $scope.gridScale = "grid-item-100"; + + + else if ($scope.gridScale =="grid-item-100") + $scope.gridScale = ""; + + ZMDataModel.zmLog ("Changing scale to " + $scope.gridScale); + pckry.destroy(); + $timeout ( function () {initPackery(); },500); + + + }; // Montage display order may be different so don't // mangle monitors as it will affect other screens @@ -90,6 +122,7 @@ function initPackery() { var progressCalled = false; + draggies = []; var elem = angular.element(document.getElementById("mygrid")); pckry = new Packery('.grid', @@ -97,6 +130,7 @@ function initPackery() itemSelector: '.grid-item', percentPosition: true, columnWidth: '.grid-sizer', + initLayout: true, }); console.log ("**** mygrid is " + JSON.stringify(elem)); @@ -111,30 +145,33 @@ function initPackery() if (!progressCalled) { - // this is a hack - trying to figure out why this - // problem is occuring - my hack does not work - console.log ("*** BUG SOMECALLED WAS NOT CALLED"); - /* pckry.destroy(); - pckry = new Packery('.grid', - { - itemSelector: '.grid-item', - percentPosition: true, - columnWidth: '.grid-sizer', - }); - pckry.layout();*/ + ZMDataModel.zmlog ("*** BUG PROGRESS WAS NOT CALLED"); pckry.reloadItems(); } - pckry.getItemElements().forEach(function (itemElem) { - var draggie = new Draggabilly(itemElem); + pckry.getItemElements().forEach(function (itemElem) { + draggie = new Draggabilly(itemElem); pckry.bindDraggabillyEvents(draggie); - console.log ("**** MAPPED DRAG"); - // pckry.shiftLayout(); + draggies.push(draggie); + draggie.disable(); }); - + + pckry.on( 'dragItemPositioned', itemDragged ); }); + + function itemDragged(item) + { + ZMDataModel.zmDebug ("drag complete"); + + pckry.getItemElements().forEach(function (itemElem) { + + //itemElem.attr('data-module-index', i); + console.log (itemElem.attributes['data-item-id'].value); + }); + + } } @@ -623,6 +660,32 @@ function initPackery() $scope.monitors[otherIndex] = otherObj; }; + + $scope.dragToggle = function() + { + var i; + $scope.isDragabillyOn = !$scope.isDragabillyOn; + ZMDataModel.zmDebug ("setting dragabilly to " + $scope.isDragabillyOn); + if ($scope.isDragabillyOn) + { + ZMDataModel.zmDebug ("Enabling drag for " + draggies.length + " items"); + for (i=0; i < draggies.length; i++) + { + draggies[i].enable(); + } + + } + else + { + ZMDataModel.zmDebug ("Disabling drag for " + draggies.length + " items"); + for ( i=0; i < draggies.length; i++) + { + draggies[i].disable(); + } + + } + }; + //--------------------------------------------------------------------- // main monitor modal open @@ -1010,7 +1073,24 @@ function initPackery() //--------------------------------------------------------- $scope.sliderChanged = function () { - processSliderChanged($scope.slider.monsize); + + //pckry.destroy(); + $scope.gridScale = "grid-item-" + ($scope.slider.monsize * 10).toString(); + console.log("**** CSS IS " + $scope.gridScale); + setTimeout(function () { + pckry.layout(); + }); + // pckry.destroy(); + // $timeout ( function () {initPackery(); },500); + //pckry.reloadItems(); + // console.log ("calling layout"); + // pckry.shiftLayout(); + /* pckry.once( 'layoutComplete', function() { + console.log('layout done, just this one time'); + });*/ + //$timeout ( function () {initPackery(); },50); + + // processSliderChanged($scope.slider.monsize); }; diff --git a/www/js/app.js b/www/js/app.js index c76546e2..2914ae7a 100644 --- a/www/js/app.js +++ b/www/js/app.js @@ -382,7 +382,7 @@ angular.module('zmApp', [ link: function ($scope, $element, $attributes) { if ($attributes.imageSpinnerLoader) { - var loader = $compile('<div class="image-loader-container"><ion-spinner style="position:fixed;top:5%;left:5%" class="image-loader" icon="' + $attributes.imageSpinnerLoader + '"></ion-spinner></div>')($scope); + var loader = $compile('<div class="image-loader-container"><ion-spinner style="position:fixed;top:5%;right:5%" class="image-loader" icon="' + $attributes.imageSpinnerLoader + '"></ion-spinner></div>')($scope); $element.after(loader); } imageLoadingDataShare.set(1); diff --git a/www/templates/montage.html b/www/templates/montage.html index 46cbbd8b..7a6319c7 100644 --- a/www/templates/montage.html +++ b/www/templates/montage.html @@ -8,15 +8,21 @@ <ion-nav-buttons side="right"> - <button ng-class="packMontage?'button button-icon button-clear ion-android-more-vertical':'button button-icon button-clear ion-android-more-horizontal'" ng-click="toggleMontageDisplayOrder();"> + <button ng-class="packMontage?'button button-icon button-clear ion-android-more-vertical':'button button-icon button-clear ion-android-more-horizontal'" ng-click="dragToggle();"> </button> - + <span class="rotate-button"> <button class="button button-icon button-clear ion-arrow-swap" - ng-click="toggleReorder();"> + ng-click="changeScale();"> </button> </span> + <!--<span class="rotate-button"> + <button class="button button-icon button-clear ion-arrow-swap" + ng-click="toggleReorder();"> + </button> + </span>--> + <button class="button button-icon button-clear ion-android-contract" ng-click="switchMinimal()"> </button> @@ -31,8 +37,8 @@ <span ng-show="!minimal"> <div class="range range-positive"> <i style="color:#bbbbbb" class="icon ion-grid"></i> - <input type="range" ng-model="slider.monsize" min="1" - max="5" ng-change="sliderChanged(slider.monsize)"> + <input type="range" ng-model="slider.monsize" min="2" + max="10" ng-change="sliderChanged(slider.monsize)"> <i style="color:#bbbbbb" class="icon ion-image"></i> </div> @@ -40,15 +46,15 @@ <div class="grid" id="mygrid"> - <div class="grid-sizer"></div> + <div class="grid-sizer {{gridScale}}"></div> <span ng-repeat="monitor in MontageMonitors|limitTo: monLimit" ng-if="monitor.Monitor.Function!='None' && monitor.Monitor.listDisplay!='noshow' && monitor.Monitor.Enabled !='0'"> - <div class="grid-item"> + <div class="grid-item {{gridScale}}" data-item-id="{{monitor.Monitor.Id}}"> <figure> <div ng-if="!isModalActive" > <div ng-if="$root.authSession!='undefined' && !isBackground()"> <div ng-if = "!minimal"> - <img id="img-{{$index}}" image-spinner-src="{{LoginData.streamingurl}}/nph-zms?mode=single&monitor={{monitor.Monitor.Id}}&scale={{LoginData.montageQuality}}{{$root.authSession}}&rand={{$root.rand}}" ng-click="openModal(monitor.Monitor.Id, monitor.Monitor.Controllable, monitor.Monitor.ControlId, monitor.Monitor.connKey)" image-spinner-loader="lines" /> + <img id="img-{{$index}}" image-spinner-src="{{LoginData.streamingurl}}/nph-zms?mode=single&monitor={{monitor.Monitor.Id}}&scale={{LoginData.montageQuality}}{{$root.authSession}}&rand={{$root.rand}}" ng-click="openModal(monitor.Monitor.Id, monitor.Monitor.Controllable, monitor.Monitor.ControlId, monitor.Monitor.connKey)" image-spinner-loader="lines" /> </div> |