#179 - more updates

Former-commit-id: 9afe9ae5461733f4013c38cc682fc1dfa96bf19a

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();">&nbsp;
+        <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();">&nbsp;
         </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>