#179, made packery drag and drop mode evident, added ability to save and restore

Former-commit-id: f4335f3beab8f47d5b91af929e5053a03a2d1df2

5 files changed, 141 insertions, 27 deletions

diff --git a/www/css/style.css b/www/css/style.css
index fb2f6241..65b92df3 100644
--- a/www/css/style.css
+++ b/www/css/style.css
@@ -208,13 +208,13 @@ figcaption {
 }
 
 .normal-figcaption {
-    background: #575656;
+    background: rgba(0,0,0,0.2);
     color: #FFF;
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
-    opacity:0.7;
+    
 }
 
 .alarmed-figcaption {
@@ -786,6 +786,11 @@ body { font-family: sans-serif; }
 /* ---- grid ---- */
 
 
+.dragborder
+{
+    border:2px dotted #3498db;
+}
+
 .grid-sizer,
 .grid-item { width: 20%; }
 .grid-item-20 { width: 20%; }
@@ -809,18 +814,15 @@ body { font-family: sans-serif; }
 .grid-item img {
   display: block;
   max-width: 100%;
+  
 }
 /* ---- .grid-item ---- */
 
 
-.grid-item:hover {
-  border-color: hsla(0, 0%, 100%, 0.5);
-  cursor: move;
-}
 
 .grid-item.is-dragging,
 .grid-item.is-positioning-post-drag {
-  background: #C90;
+  background: #34495e;
   z-index: 2;
 }
 
diff --git a/www/external/packery.pkgd.js b/www/external/packery.pkgd.js
index c8353909..cd5b2a2c 100644
--- a/www/external/packery.pkgd.js
+++ b/www/external/packery.pkgd.js
@@ -2743,6 +2743,48 @@ Packery.Item = Item;
 
 var proto = Packery.prototype;
 
+// get JSON-friendly data for items positions
+Packery.prototype.getShiftPositions = function( attrName ) {
+  attrName = attrName || 'id';
+  var _this = this;
+  return this.items.map( function( item ) {
+    return {
+      attr: item.element.getAttribute( attrName ),
+      x: item.rect.x / _this.packer.width
+    }
+  });
+};
+
+Packery.prototype.initShiftLayout = function( positions, attr ) {
+  if ( !positions ) {
+    // if no initial positions, run packery layout
+    this.layout();
+    return;
+  }
+  // parse string to JSON
+  if ( typeof positions == 'string' ) {
+    try {
+      positions = JSON.parse( positions );
+    } catch( error ) {
+      console.error( 'JSON parse error: ' + error );
+      this.layout();
+      return;
+    }
+  }
+
+  attr = attr || 'id'; // default to id attribute
+  this._resetLayout();
+  // set item order and horizontal position from saved positions
+  this.items = positions.map( function( itemPosition ) {
+    var selector = '[' + attr + '="' + itemPosition.attr  + '"]'
+    var itemElem = this.element.querySelector( selector );
+    var item = this.getItem( itemElem );
+    item.rect.x = itemPosition.x * this.packer.width;
+    return item;
+  }, this );
+  this.shiftLayout();
+};
+
 proto._create = function() {
   // call super
   Outlayer.prototype._create.call( this );
diff --git a/www/js/DataModel.js b/www/js/DataModel.js
index 814c87ff..5efede89 100644
--- a/www/js/DataModel.js
+++ b/www/js/DataModel.js
@@ -71,6 +71,7 @@ angular.module('zmApp.controllers')
          'defaultPushSound': false,
          'enableBlog':true,
          'use24hr':false,
+         'packeryPositions':''
          
         
     };
@@ -285,6 +286,13 @@ angular.module('zmApp.controllers')
                     
                 }
                 
+                if (typeof loginData.packeryPositions == 'undefined')
+                {
+                    zmDebug ("packeryPositions does not exist. Setting to empty");
+                    loginData.packeryPositions  = "";
+                    
+                }
+                
                 if (typeof loginData.use24hr == 'undefined')
                 {
                     zmDebug ("use24hr does not exist. Setting to false");
diff --git a/www/js/MontageCtrl.js b/www/js/MontageCtrl.js
index 051c189e..43a96e2d 100644
--- a/www/js/MontageCtrl.js
+++ b/www/js/MontageCtrl.js
@@ -4,7 +4,7 @@
 /* global cordova,StatusBar,angular,console,ionic,Packery, Draggabilly, imagesLoaded */
 
 
-angular.module('zmApp.controllers').controller('zmApp.MontageCtrl', ['$scope', '$rootScope', 'ZMDataModel', 'message', '$ionicSideMenuDelegate', '$timeout', '$interval', '$ionicModal', '$ionicLoading', '$http', '$state', '$ionicPopup', '$stateParams', '$ionicHistory', '$ionicScrollDelegate', '$ionicPlatform', 'zm', '$ionicPopover', '$controller', 'imageLoadingDataShare', '$window', function ($scope, $rootScope, ZMDataModel, message, $ionicSideMenuDelegate, $timeout, $interval, $ionicModal, $ionicLoading, $http, $state, $ionicPopup, $stateParams, $ionicHistory, $ionicScrollDelegate, $ionicPlatform, zm, $ionicPopover, $controller, imageLoadingDataShare, $window) {
+angular.module('zmApp.controllers').controller('zmApp.MontageCtrl', ['$scope', '$rootScope', 'ZMDataModel', 'message', '$ionicSideMenuDelegate', '$timeout', '$interval', '$ionicModal', '$ionicLoading', '$http', '$state', '$ionicPopup', '$stateParams', '$ionicHistory', '$ionicScrollDelegate', '$ionicPlatform', 'zm', '$ionicPopover', '$controller', 'imageLoadingDataShare', '$window',  '$localstorage', function ($scope, $rootScope, ZMDataModel, message, $ionicSideMenuDelegate, $timeout, $interval, $ionicModal, $ionicLoading, $http, $state, $ionicPopup, $stateParams, $ionicHistory, $ionicScrollDelegate, $ionicPlatform, zm, $ionicPopover, $controller, imageLoadingDataShare, $window, $localstorage) {
 
     $controller('zmApp.BaseController', {
         $scope: $scope
@@ -43,6 +43,7 @@ angular.module('zmApp.controllers').controller('zmApp.MontageCtrl', ['$scope', '
     var draggies;
     $scope.isDragabillyOn = false;
     $scope.gridScale = "grid-item-20";
+    $scope.animateMonitor="";
     
     $scope.changeScale = function()
     {
@@ -123,25 +124,47 @@ function initPackery()
         
         var progressCalled = false;
         draggies = [];
+    
+        var layouttype = true;
+        var ld = ZMDataModel.getLogin();
+    
+        
+        var positionsStr = ld.packeryPositions;
+        var positions={};
+    
+        if (positionsStr == '')
+        {
+            ZMDataModel.zmLog ("Did NOT find a packery layout");
+            layouttype  = true;
+        }
+        else
+        {
+            console.log ("POSITION STR IS " + positionsStr);
+            positions = JSON.parse(positionsStr);
+            ZMDataModel.zmLog ("found a packery layout");
+            layouttype = false;
+        }
         
         var elem =  angular.element(document.getElementById("mygrid"));
         pckry = new Packery('.grid', 
                              {
                                 itemSelector: '.grid-item',
                                 percentPosition: true,
-                               columnWidth: '.grid-sizer',
-                                initLayout: true,
+                                columnWidth: '.grid-sizer',
+                                gutter:0,
+                                initLayout:layouttype
+                                
                             });
-         console.log ("**** mygrid is " + JSON.stringify(elem));
+         //console.log ("**** mygrid is " + JSON.stringify(elem));
          
         imagesLoaded(elem).on('progress', function() {
                 console.log ("******** SOME IMAGE LOADED");
                 progressCalled = true;
-                pckry.layout();
+                if (layouttype) $timeout (function(){pckry.shiftLayout();},50);
         });
         
         imagesLoaded(elem).on('always', function() {
-                console.log ("******** ALL IMAGE LOADED");
+                console.log ("******** ALL IMAGES LOADED");
                 
                 if (!progressCalled)
                 {
@@ -156,8 +179,17 @@ function initPackery()
                       draggies.push(draggie);
                       draggie.disable();
                 });
-            
+                
                 pckry.on( 'dragItemPositioned', itemDragged );
+            
+                
+               
+                if (!isEmpty(positions))
+                {
+                    ZMDataModel.zmLog ("Arranging as per packery grid");
+                    $timeout(function(){pckry.initShiftLayout(positions, 'data-item-id');},500);
+                    //$grid.packery( 'initShiftLayout', initPositions, 'data-item-id' );
+                }
                
         });
     
@@ -167,16 +199,27 @@ function initPackery()
             
             pckry.getItemElements().forEach(function (itemElem) {
              
-                //itemElem.attr('data-module-index', i);   
-                console.log (itemElem.attributes['data-item-id'].value);
+                console.log (itemElem.attributes['data-item-id'].value+" size  "+itemElem.attributes['data-item-size'].value );
             });
             
+            var positions = pckry.getShiftPositions('data-item-id');
+             console.log ("POSITIONS MAP " + JSON.stringify(positions));
+             var ld = ZMDataModel.getLogin();
+             ld.packeryPositions = JSON.stringify(positions);
+             ZMDataModel.setLogin(ld);
         }
   
         
     }
 
     
+    function isEmpty( obj ) 
+    { 
+      for ( var prop in obj ) { 
+        return false; 
+      } 
+      return true; 
+}
     
    
     // --------------------------------------------------------
@@ -471,7 +514,7 @@ function initPackery()
             " and hidden order as " + hiddenOrder.toString());
         $scope.modal.remove();
         ZMDataModel.zmLog ("Reloading packery");
-        $timeout (function(){pckry.reloadItems(); pckry.layout();},500);
+        $timeout (function(){pckry.reloadItems(); pckry.shiftLayout();},50);
     };
 
     $scope.cancelReorder = function () {
@@ -668,6 +711,7 @@ function initPackery()
         ZMDataModel.zmDebug ("setting dragabilly to " + $scope.isDragabillyOn);
         if ($scope.isDragabillyOn)  
         {
+            $scope.dragBorder="dragborder";
             ZMDataModel.zmDebug ("Enabling drag for " + draggies.length + " items");
             for (i=0; i < draggies.length; i++)
             {
@@ -677,6 +721,7 @@ function initPackery()
         }
         else
         {
+            $scope.dragBorder="";
             ZMDataModel.zmDebug ("Disabling drag for " + draggies.length + " items");
             for ( i=0; i < draggies.length; i++)
             {
@@ -1073,13 +1118,27 @@ function initPackery()
     //---------------------------------------------------------
 
     $scope.sliderChanged = function () {
+        
+        
 
          //pckry.destroy();
          $scope.gridScale = "grid-item-" + ($scope.slider.monsize * 10).toString();
-         console.log("**** CSS IS " + $scope.gridScale);
-         setTimeout(function () {
-             pckry.layout();
-         });
+         //console.log("**** CSS IS " + $scope.gridScale);
+         $timeout(function () {
+             pckry.shiftLayout();
+             pckry.getItemElements().forEach(function (itemElem) {
+             
+                console.log (itemElem.attributes['data-item-id'].value+" size  "+itemElem.attributes['data-item-size'].value );
+                 
+                     
+            });
+              var positions = pckry.getShiftPositions('data-item-id');
+             console.log ("POSITIONS MAP " + JSON.stringify(positions));
+             var ld = ZMDataModel.getLogin();
+             ld.packeryPositions = JSON.stringify(positions);
+             ZMDataModel.setLogin(ld);
+          
+         },50);
        // pckry.destroy();
      //   $timeout ( function () {initPackery(); },500);
           //pckry.reloadItems();
diff --git a/www/templates/montage.html b/www/templates/montage.html
index 7a6319c7..efeebec0 100644
--- a/www/templates/montage.html
+++ b/www/templates/montage.html
@@ -8,14 +8,17 @@
 
     <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="dragToggle();">&nbsp;
+        <button class="button button-icon button-clear ion-arrow-move" ng-click="dragToggle();">&nbsp;
         </button>
         
-        <span class="rotate-button">
+        <!--<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="changeScale();">
                 </button>
-        </span>
+        </span>-->
 
         <!--<span class="rotate-button">
                 <button class="button button-icon button-clear ion-arrow-swap"
@@ -46,15 +49,15 @@
 
 
         <div class="grid" id="mygrid">
-            <div class="grid-sizer {{gridScale}}"></div>
+            <div class="grid-sizer {{gridScale}} {{dragborder}}"></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 {{gridScale}}" data-item-id="{{monitor.Monitor.Id}}">
+            <div class="grid-item {{gridScale}} {{dragBorder}}" data-item-id="{{monitor.Monitor.Id}}" data-item-size="{{gridScale}}" >
                 <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>