Merge pull request #62 from pattern-lab/dev

Configurable Viewport Range
pattern-lab · May 16, 2017 · 51f2fc2 · 51f2fc2
2 parents e6017ed + a462352
commit 51f2fc2
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 24 deletions.
diff --git a/dist/styleguide/js/patternlab-viewer.js b/dist/styleguide/js/patternlab-viewer.js
@@ -1323,10 +1323,26 @@ window.addEventListener("message", receiveIframeMessage, false);
 (function (w) {
 
   var sw = document.body.clientWidth, //Viewport Width
-    sh = $(document).height(), //Viewport Height
-    minViewportWidth = parseInt(config.ishMinimum), //Minimum Size for Viewport
-    maxViewportWidth = parseInt(config.ishMaximum), //Maxiumum Size for Viewport
-    viewportResizeHandleWidth = 14, //Width of the viewport drag-to-resize handle
+    sh = $(document).height(); //Viewport Height
+
+    var minViewportWidth = 240;
+    var maxViewportWidth = 2600;
+
+    //set minimum and maximum viewport based on confg
+    if (config.ishMinimum !== undefined) {
+      minViewportWidth = parseInt(config.ishMinimum); //Minimum Size for Viewport
+    }
+    if (config.ishMaximum !== undefined) {
+      maxViewportWidth = parseInt(config.ishMaximum); //Maxiumum Size for Viewport
+    }
+
+    //alternatively, use the ishViewportRange object
+    if (config.ishViewportRange !== undefined) {
+      minViewportWidth = config.ishViewportRange.s[0];
+      maxViewportWidth = config.ishViewportRange.l[1];
+    }
+
+    var viewportResizeHandleWidth = 14, //Width of the viewport drag-to-resize handle
     $sgViewport = $('#sg-viewport'), //Viewport element
     $sizePx = $('.sg-size-px'), //Px size input element in toolbar
     $sizeEms = $('.sg-size-em'), //Em size input element in toolbar
@@ -1421,7 +1437,10 @@ window.addEventListener("message", receiveIframeMessage, false);
     killDisco();
     killHay();
     fullMode = false;
-    sizeiframe(getRandom(minViewportWidth,500));
+    sizeiframe(getRandom(
+      minViewportWidth,
+      config.ishViewportRange !== undefined ? parseInt(config.ishViewportRange.s[1]) : 500
+    ));
   }
 
   $('#sg-size-s').on("click", function(e){
@@ -1439,7 +1458,10 @@ window.addEventListener("message", receiveIframeMessage, false);
     killDisco();
     killHay();
     fullMode = false;
-    sizeiframe(getRandom(500,800));
+    sizeiframe(getRandom(
+      config.ishViewportRange !== undefined ? parseInt(config.ishViewportRange.m[0]) : 500,
+      config.ishViewportRange !== undefined ? parseInt(config.ishViewportRange.m[1]) : 800
+    ));
   }
 
   $('#sg-size-m').on("click", function(e){
@@ -1457,7 +1479,10 @@ window.addEventListener("message", receiveIframeMessage, false);
     killDisco();
     killHay();
     fullMode = false;
-    sizeiframe(getRandom(800,1200));
+    sizeiframe(getRandom(
+      config.ishViewportRange !== undefined ? parseInt(config.ishViewportRange.l[0]) : 800,
+      config.ishViewportRange !== undefined ? parseInt(config.ishViewportRange.l[1]) : 1200
+    ));
   }
 
   $('#sg-size-l').on("click", function(e){
@@ -1888,9 +1913,9 @@ window.addEventListener("message", receiveIframeMessage, false);
     try {
       data = (typeof event.data !== 'string') ? event.data : JSON.parse(event.data);
     } catch(e) {}
-    
+
     if (data.event !== undefined) {
-      
+
       if (data.event == "patternLab.pageLoad") {
 
         if (!urlHandler.skipBack) {
@@ -1940,9 +1965,9 @@ window.addEventListener("message", receiveIframeMessage, false);
         }
         return false;
       }
-      
+
     }
-    
+
   }
   window.addEventListener("message", receiveIframeMessage, false);