From ae61921c2afe13fe75f63e9b4d3acde91f372ab7 Mon Sep 17 00:00:00 2001
From: Pliable Pixels <pliablepixels@gmail.com>
Date: Wed, 20 Jul 2016 15:28:32 -0400
Subject: #286 - did I finally resolve it ? Almost ?

Former-commit-id: 1737966892f9f741a0b1827440a0e7cb2ea3e84f
---
 www/css/style.css          | 13 +++++++++++--
 www/js/MontageCtrl.js      | 22 ++++++++++++----------
 www/js/app.js              |  1 +
 www/templates/montage.html | 15 ++++++++-------
 4 files changed, 32 insertions(+), 19 deletions(-)

(limited to 'www')

diff --git a/www/css/style.css b/www/css/style.css
index 9299d518..1e6627b4 100644
--- a/www/css/style.css
+++ b/www/css/style.css
@@ -93,6 +93,9 @@ ion-popover-view.fit ion-content {
 }
 
 
+
+
+
 /* I am using flexboxes to dynamicall adapt content
 in montage view.
 Credit: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
@@ -850,6 +853,7 @@ body { font-family: sans-serif; }
     border:4px solid #e74c3c;
 }
 
+
 .grid-sizer {width:10%; }
 .grid-item { width: 20%; }
 .grid-item-10 {width: 10%; }
@@ -862,7 +866,11 @@ body { font-family: sans-serif; }
 .grid-item-80 { width: 80%; }
 .grid-item-90 {width:  90%; }
 .grid-item-100 {width:100%; }
-.
+
+
+
+
+
 /* clear fix */
 .grid:after {
   content: '';
@@ -873,7 +881,8 @@ body { font-family: sans-serif; }
 
 .grid-item img {
   display: block;
-  max-width: 100%;
+  width: 100%;
+    height:auto;
   
 }
 /* ---- .grid-item ---- */
diff --git a/www/js/MontageCtrl.js b/www/js/MontageCtrl.js
index d463ed8d..f073d836 100644
--- a/www/js/MontageCtrl.js
+++ b/www/js/MontageCtrl.js
@@ -200,11 +200,11 @@ function initPackery()
                         ZMDataModel.zmDebug ("All images loaded, doing image layout");
                         $timeout (function() {pckry.initShiftLayout(positions, 'data-item-id');},0); 
                     }
-                    $timeout(function(){ZMDataModel.zmLog ("Force calling resize"); pckry.shiftLayout();},300);// don't ask
+                    $timeout(function(){ZMDataModel.zmLog ("Force calling resize"); pckry.shiftLayout();},zm.packeryTimer);// don't ask
 
                    
                    
-                },300);
+                },zm.packeryTimer);
                
         });
     
@@ -701,10 +701,10 @@ function initPackery()
                 });
                
               
+                // we don't really need this as we have stopped the timer
+               // $scope.isModalActive = true;
 
-                $scope.isModalActive = true;
-
-
+                //$timeout (function() {pckry.shiftLayout();},zm.packeryTimer);
                 $scope.modal.show();
 
             });
@@ -744,6 +744,8 @@ function initPackery()
             //  console.log ("Refreshing Image...");
         }.bind(this), 5000);
         
+       // $timeout (function() {pckry.shiftLayout();},zm.packeryTimer);
+        
         
     };
 
@@ -928,7 +930,7 @@ $scope.$on('$ionicView.afterEnter', function () {
 
  console.log("**VIEW ** Montage Ctrl AFTER ENTER");
         window.addEventListener("resize", orientationChanged, false);
-        $timeout ( function () {initPackery(); },500);
+       $timeout ( function () {initPackery(); },zm.packeryTimer);
         document.addEventListener("pause", onPause, false);
         document.addEventListener("resume", onResume, false);
     
@@ -1005,7 +1007,7 @@ $scope.$on('$ionicView.afterEnter', function () {
                    // $scope.slider.monsize = 2;
                 });
                 //layout(pckry);
-                $timeout (function(){pckry.layout();}); // force here - no shiftlayout
+                $timeout (function(){pckry.layout();},zm.packeryTimer); // force here - no shiftlayout
                
                
             },100);
@@ -1092,7 +1094,7 @@ $scope.$on('$ionicView.afterEnter', function () {
                         ZMDataModel.setLogin(ld);
                        $ionicLoading.hide();
                        $scope.sliderChanging = false;
-                    },100);
+                    },zm.packeryTimer);
                 });
         
                 
@@ -1100,13 +1102,13 @@ $scope.$on('$ionicView.afterEnter', function () {
                 if (!somethingReset) 
                 {
                     console.log (">>>SOMETHING NOT RESET");
-                    $timeout(function() {pckry.layout();},300);
+                    $timeout(function() {pckry.layout();},zm.packeryTimer);
                 }
                 else
                 {
                     
                     console.log (">>>SOMETHING  RESET");
-                    $timeout(function() {layout(pckry);},300);
+                    $timeout(function() {layout(pckry);},zm.packeryTimer);
                 }
        
       
diff --git a/www/js/app.js b/www/js/app.js
index 74c2fb66..ef8c1990 100644
--- a/www/js/app.js
+++ b/www/js/app.js
@@ -76,6 +76,7 @@ angular.module('zmApp', [
     nphSwitchTimer: 3000,
     eventHistoryTimer: 10000,
     eventPlaybackQuery: 3000,
+    packeryTimer:500
 
 
 
diff --git a/www/templates/montage.html b/www/templates/montage.html
index c27e2ef9..4ce29ab3 100644
--- a/www/templates/montage.html
+++ b/www/templates/montage.html
@@ -65,14 +65,14 @@
                 
                    
                     
-                    <figure class="{{dragBorder}}" ng-show=" monitor.Monitor.listDisplay!='noshow'">
-                        <div ng-if="!isModalActive" >
+                    <figure height="{{Monitor.monitor.height}}" width="{{Monitor.monitor.width}}" class="{{dragBorder}}" ng-show=" monitor.Monitor.listDisplay!='noshow'">
+                        <!--<div ng-if="!isModalActive" >-->
                             <div ng-if="$root.authSession!='undefined' && !isBackground() && !areImagesLoading">
                                 <div ng-if = "!minimal">
                                     
                                  
                                     
-                                    <img   class="{{monitor.Monitor.selectStyle}}" id="img-{{$index}}" image-spinner-src="{{monitor.Monitor.streamingURL}}/zms?mode=single&monitor={{monitor.Monitor.Id}}&scale={{LoginData.montageQuality}}{{$root.authSession}}&rand={{$root.rand}}" ng-click="!isDragabillyOn?openModal(monitor.Monitor.Id, monitor.Monitor.Controllable, monitor.Monitor.ControlId, monitor.Monitor.connKey,monitor):toggleSelectItem($index);" image-spinner-loader="lines"  />
+                                    <img    class="{{monitor.Monitor.selectStyle}}" id="img-{{$index}}" image-spinner-src="{{monitor.Monitor.streamingURL}}/zms?mode=single&monitor={{monitor.Monitor.Id}}&scale={{LoginData.montageQuality}}{{$root.authSession}}&rand={{$root.rand}}" ng-click="!isDragabillyOn?openModal(monitor.Monitor.Id, monitor.Monitor.Controllable, monitor.Monitor.ControlId, monitor.Monitor.connKey,monitor):toggleSelectItem($index);" image-spinner-loader="lines"  />
 
                                     </div> 
 
@@ -82,7 +82,7 @@
                             </div>
 
                             <div ng-if="!$root.authSession=='undefined' || isBackground() || areImagesLoading">
-                                <img image-spinner-src="img/pausevideo.png" />
+                                <img img id="{{img-$index}}" image-spinner-src="img/pausevideo.png" />
                             </div>
 
 
@@ -97,10 +97,11 @@
 
 
 
-                        </div> <!-- modal not active-->
+                        <!--</div>--> <!-- modal not active-->
+                        <!--
                         <div ng-if="isModalActive">
-                            <img image-spinner-src="img/pausevideo.png" />
-                        </div>
+                            <img img id="{{img-$index}}" image-spinner-src="img/pausevideo.png" />
+                        </div>-->
                      
                     </figure>
                 </div>
-- 
cgit v1.2.3