From 8d306abd782c6046596e96885cc3376ee1749bfe Mon Sep 17 00:00:00 2001
From: Mottie <wowmotty@gmail.com>
Date: Thu, 22 May 2014 21:40:53 -0500
Subject: [PATCH] Docs: reflow widget demo replace resizable div with set
 widths

---
 docs/example-widget-reflow.html  | 137 +++++++++++++++++++++++++++----
 docs/example-widget-reflow1.html |   4 +
 docs/example-widget-reflow2.html |   4 +
 docs/example-widget-reflow3.html |   4 +
 docs/img/screens-blue.png        | Bin 0 -> 474 bytes
 docs/img/screens.png             | Bin 0 -> 495 bytes
 6 files changed, 131 insertions(+), 18 deletions(-)
 create mode 100644 docs/img/screens-blue.png
 create mode 100644 docs/img/screens.png

diff --git a/docs/example-widget-reflow.html b/docs/example-widget-reflow.html
index 2394588e9..f95eef791 100644
--- a/docs/example-widget-reflow.html
+++ b/docs/example-widget-reflow.html
@@ -13,9 +13,11 @@
 	<link rel="stylesheet" href="css/bootstrap.min.css">
 	<script src="js/bootstrap.min.js"></script>
 	<link rel="stylesheet" href="css/jq.css">
+	<link href="css/tipsy.css" rel="stylesheet">
 	<link href="css/prettify.css" rel="stylesheet">
 	<script src="js/prettify.js"></script>
 	<script src="js/docs.js"></script>
+	<script src="js/jquery.tipsy.min.js"></script>
 
 	<!-- Tablesorter: required -->
 	<link rel="stylesheet" href="../css/theme.blue.css">
@@ -76,25 +78,63 @@
 		color: #ddd;
 	}
 	#table1, #table2, #table3 {
-		max-width: 98%;
-		width: 1000px;
-		height: 410px;
+		max-width: 100%;
 	}
 	iframe {
-		width: 99%;
+		width: 100%;
 		height: 100%;
 		border: 0;
 	}
-	.ui-resizable-e {
-		background: #eee;
+	.sizes, .toggle {
+		display: inline-block;
+		height: 30px;
+		vertical-align: text-bottom;
 	}
-	.ui-resizable-e:after {
-		content: '\2190 Resize';
-		font-size: 14px;
-		position: relative;
-		top: 50%;
-		left: 10px;
+	.resize-frame {
+		list-style: none;
+		width: 250px;
+		height: 35px;
+		cursor: pointer;
+		padding: 5px;
+		margin: 0;
+		display: inline-block;
+	}
+	.resize-frame li {
+		background-image: url(img/screens.png);
+		background-repeat: no-repeat;
+		width: 35px;
+		height: 28px;
+		margin: 0;
+		padding: 0;
+		display: inline-block;
+	}
+	.resize-frame li:hover, .resize-frame li.active {
+		color: #00488c;
+		background-color: #eee;
+		background-image: url(img/screens-blue.png);
+		border-radius: 3px;
+	}
+	.resize-frame li.setauto {
+		vertical-align: top;
+		background-image: none;
+		font-weight: bold;
+		font-family: Menlo, Monaco, Consolas, monospace;
+		font-size: 12px;
+		text-indent: 4px;
+		padding-top: 4px;
 	}
+	.setdktp { background-position: 0 2px; }
+	.settbll { background-position: -35px 2px; }
+	.settblp { background-position: -70px 2px; }
+	.setsmtl { background-position: -105px 2px; }
+	.setsmtp { background-position: -142px 2px; }
+
+	.full     { width: 100%;   height: 420px; } /* full browser */
+	.desktop  { width: 1440px; height: 420px; } /* desktop 1440x1024 */
+	.tablet-l { width: 1024px; height: 420px; } /* tablet landscape 1024x768 */
+	.tablet-p { width: 768px;  height: 420px; } /* tablet portrait 768x1024 */
+	.smart-l  { width: 480px;  height: 320px; } /* smartphone landscape 480x320 */
+	.smart-p  { width: 320px;  height: 420px; } /* smartphone portrait 320x480 */
 	</style>
 	<script src="../js/widgets/widget-columnSelector.js"></script>
 
@@ -146,9 +186,40 @@
 	<script src="../js/widgets/widget-reflow.js"></script>
 	<script>
 	$(function(){
-		$('#table1, #table2, #table3').resizable({
-			handles : 'e'
+		// screen size class names
+		var j = 0,
+		allClasses = '',
+		sizes = [
+			[ 'full',     '100% width' ],
+			[ 'desktop',  'Desktop 1440x1024' ],
+			[ 'tablet-l', 'Tablet landscape 1024x768' ],
+			[ 'tablet-p', 'tablet portrait 768x1024' ],
+			[ 'smart-l',  'smartphone landscape 480x320' ],
+			[ 'smart-p',  'smartphone portrait 320x480' ]
+		];
+		$('.resize-frame li')
+			.each(function(i){
+				// add tooltip to each table size button
+				$(this).attr('title', sizes[j][1]);
+				j = (j + 1) % 6;
+				if (i < 6) {
+					allClasses += sizes[i][0] + ' ';
+				}
+			})
+			.on('click', function(){
+				var $t = $(this),
+					indx = $t.index();
+				$t.addClass('active').siblings().removeClass('active');
+				$t.parent().nextAll('div:first').removeClass(allClasses).addClass( sizes[indx][0] );
+			});
+		// toggle thead in iframe
+		$('button.toggle').click(function(){
+			$(this).nextAll('div:first').find('iframe').contents().find('thead').toggleClass('hide-header');
 		});
+
+		// add tooltip
+		$('.resize-frame li, .toggle').tipsy({ gravity: 's' });
+
 	});
 	</script>
 </head>
@@ -423,19 +494,49 @@ <h3><a href="#">Required CSS</a></h3>
 
 	</p>
 
-	<h1>Demo <small>(Resize the browser window)</small></h1>
+	<h1>Demo <small>(Pick a table width or resize the browser window)</small></h1>
 	<div id="demo"><h3>Reflow widget only</h3>
-	<div id="table1">
+	<span class="sizes">Set table width:</span>
+	<ul class="resize-frame">
+		<li class="setauto active">Auto</li>
+		<li class="setdktp"></li>
+		<li class="settbll"></li>
+		<li class="settblp"></li>
+		<li class="setsmtl"></li>
+		<li class="setsmtp"></li>
+	</ul>
+	<button class="toggle" title="Hide/show table header when the breakpoint is reached">Toggle Headers</button>
+	<div id="table1" class="full">
 		<iframe src="example-widget-reflow1.html"></iframe>
 	</div>
 
 	<h3>Reflow + columnSelector widget</h3>
-	<div id="table2" class="frame-wrapper">
+	<span class="sizes">Set table width:</span>
+	<ul class="resize-frame">
+		<li class="setauto active">Auto</li>
+		<li class="setdktp"></li>
+		<li class="settbll"></li>
+		<li class="settblp"></li>
+		<li class="setsmtl"></li>
+		<li class="setsmtp"></li>
+	</ul>
+	<button class="toggle" title="Hide/show table header when the breakpoint is reached">Toggle Headers</button>
+	<div id="table2" class="frame-wrapper full">
 		<iframe src="example-widget-reflow2.html"></iframe>
 	</div>
 
 	<h3>Reflow2 widget (multiple thead rows)</h3>
-	<div id="table3" class="frame-wrapper">
+	<span class="sizes">Set table width:</span>
+	<ul class="resize-frame">
+		<li class="setauto active">Auto</li>
+		<li class="setdktp"></li>
+		<li class="settbll"></li>
+		<li class="settblp"></li>
+		<li class="setsmtl"></li>
+		<li class="setsmtp"></li>
+	</ul>
+	<button class="toggle" title="Hide/show table header when the breakpoint is reached">Toggle Headers</button>
+	<div id="table3" class="frame-wrapper full">
 		<iframe src="example-widget-reflow3.html"></iframe>
 	</div>
 
diff --git a/docs/example-widget-reflow1.html b/docs/example-widget-reflow1.html
index 2dab5d44e..c61e49884 100644
--- a/docs/example-widget-reflow1.html
+++ b/docs/example-widget-reflow1.html
@@ -41,6 +41,10 @@
 			text-align: bottom;
 			display: inline-block;
 		}
+		/* allow toggle of thead */
+		thead.hide-header {
+			display: none;
+		}
 	}
 	.ui-table-reflow .ui-table-cell-label {
 		display: none;
diff --git a/docs/example-widget-reflow2.html b/docs/example-widget-reflow2.html
index 8f8ed8c8b..862ebd9f6 100644
--- a/docs/example-widget-reflow2.html
+++ b/docs/example-widget-reflow2.html
@@ -126,6 +126,10 @@
 			display: inline-block;
 			margin: -.4em 1em -.4em -.4em;
 		}
+		/* allow toggle of thead */
+		thead.hide-header {
+			display: none;
+		}
 	}
 	.ui-table-reflow .ui-table-cell-label {
 		display: none;
diff --git a/docs/example-widget-reflow3.html b/docs/example-widget-reflow3.html
index 56f1f1d00..14afd2f02 100644
--- a/docs/example-widget-reflow3.html
+++ b/docs/example-widget-reflow3.html
@@ -56,6 +56,10 @@
 			display: inline-block;
 			margin: -.4em 1em -.4em -.4em;
 		}
+		/* allow toggle of thead */
+		thead.hide-header {
+			display: none;
+		}
 	}
 	.ui-table-reflow .ui-table-cell-label {
 		display: none;
diff --git a/docs/img/screens-blue.png b/docs/img/screens-blue.png
new file mode 100644
index 0000000000000000000000000000000000000000..d40e8a2799e304c5f37a21ae1894da32f29d378f
GIT binary patch
literal 474
zcmeAS@N?(olHy`uVBq!ia0vp^OMzH|g&9a@1}ZoKDXjpX5LY10;L$@2I;^v96;Ls6
zNswPKgPqibId_lbum2#R9==L!+A;<P#vo4@#}JFt$q5M$w0K*aKd|yx91s*Y_>ic;
zWpK}xiOE9b;{g#Fg-d6OEDmI<>7Vgoe{^O~SHf|w1GZdWweR>SswxDioc5XF{;;lf
z=1PV|Gu~MVa2@NsaW=)#=rfaMS`mY3%;7|}8;cY6PfAmhzHnytjx!+*pJo=!J~?CN
zMIbQqWw<%_+0&<KA~Q}_UJn3*A9>7^W}b0)E0i*mQ&^K>(wlPT75UFXFP)v^c;Zaj
zrL#P0DbGS=($+OGuWEfBn{2VeyJ_Z*N3x4!loV^XnKH{JPE>3->!atWvY}za%oz;E
zXFp3QH!=$tFI`YsthloBGn-2Osir?QXKz@DyTmWqz{A<MmyQ3NbyHKiBBNJe<aH^j
zTO3PF4@9kBy7Xz2q_2YIhK~ZfPiRdJfA7Y)yWqNP_;aD?av5)D#+N%@?>N2p$hE><
l<$(usWlo(tbg0RIf#F$A0Hc(u?+Z{QdAj<!taD0e0sxVGyo&$;

literal 0
HcmV?d00001

diff --git a/docs/img/screens.png b/docs/img/screens.png
new file mode 100644
index 0000000000000000000000000000000000000000..ccd4a5958b895947a52627c911d4fd25eaef034b
GIT binary patch
literal 495
zcmeAS@N?(olHy`uVBq!ia0vp^OMzH|gBeJ!S$NhNNZAMYgt!7}O2B5-CVilOk&+<4
zV1|5&HJ88lS<B3EoxEE>J^b~bBabKQ*-0}nFnW8sIEHu}KYQJKQ?r7IYoN#np$P@v
z=l&f3^=QA(1@T44*0ibaeJd^?8^2=7q3)Q6+XRjja%gK<3;7?KICYoDg`ZP<)VC{Z
zPxS~`aAfnHnnh9y#tYYnv#GRBKUE|*b+=aM#jYuVmCi!>p|fJA3hlL8KgnxzfKbC{
zE$J^waZ3gL&$v$wIqt?cD`IklV(i6Lv%IyGADk#V!5FlrU|av>=^;!SM;0(#v7h>l
zT`O{KyyVk+UO;N)oqMNdl<L<WI=^@N3ZVi&RpxW+Y98O7>Zu+Yb<@MVV$P-A^-BKQ
ze;lX&e71jAc3a^Jw{^z6hZjw%+4;bKzGCDj6X&R7EAnn<_1uWteJfz9RJgQ>`>O=`
zrg_RQ4o#gMqI*+SqO&v4s;AQ=Snaj=pRJ)A_UC_+f2$E<Q{gW7%J-=IZew-+dvhg^
lvF%HbGj_ILVE@T*VtoU<&8kJ=vSpxX^K|udS?83{1OUX$xqSct

literal 0
HcmV?d00001