port 2e8299d as part of #80

Author: bmuenzenmeyer

src/js/styleguide.js

@@ -7,10 +7,26 @@
 (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
 		$sgIframe = $('.pl-js-iframe'), //Viewport element
 		$sizePx = $('#pl-size-px'), //Px size input element in toolbar
 		$sizeEms = $('#pl-size-em'), //Em size input element in toolbar
@@ -80,7 +96,10 @@
 		killDisco();
 		killHay();
 		fullMode = false;
-		sizeiframe(getRandom(500, 800));
+		sizeiframe(getRandom(
+			minViewportWidth,
+			config.ishViewportRange !== undefined ? parseInt(config.ishViewportRange.s[1]) : 500
+		));
 	}
 
 	$('#pl-size-m').on("click", function (e) {
@@ -98,7 +117,10 @@
 		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
+		));
 	}
 
 	$('#pl-size-l').on("click", function (e) {