Make DnD_touch test page a bit more mobile-friendly

kriszyp · Sep 20, 2012 · 16c9a01 · 16c9a01
1 parent d288f1f
commit 16c9a01
Showing 1 changed file with 26 additions and 20 deletions.
diff --git a/test/extensions/DnD_touch.html b/test/extensions/DnD_touch.html
@@ -16,21 +16,23 @@
 
 			.dojoDndItem { padding: 0; } /* override dijit.css */
 
+			.gridcontainer {
+				float: left;
+				width: 40%;
+				padding: 0 5%;
+			}
+
 			.dgrid {
-				margin: 10px;
 				height: 400px;
 			}
 
 			/* styles for handles in 2nd grid */
 			.handleColumn {
 				width: 3em;
 			}
-			.handleColumn .dojoDndHandle {
-				width: 1em;
-				height: 1em;
-				background-color: #999;
-				border: 1px dotted #000;
-				margin: 0 auto;
+			.dgrid-content .handleColumn {
+				background-color: #eee;
+				border: 1px dotted #999;
 			}
 		</style>
 		<script type="text/javascript" src="../../../dojo/dojo.js"
@@ -39,7 +41,7 @@
 			require(["dgrid/OnDemandGrid", "dgrid/Selection", "dgrid/extensions/DnD", "put-selector/put",
 				"dojo/dnd/Source", "dojo/_base/declare", "dojo/_base/lang", "dojo/_base/array", "dojo/_base/Deferred",  "dgrid/test/data/base", "dojo/domReady!"],
 			function(Grid, Selection, DnD, put, DnDSource, declare, lang, arrayUtil, Deferred){
-				var DnDGrid = declare([Grid, Selection, DnD]);
+				var DnDGrid = declare([Grid, DnD]);
 
 				// Create a custom data array based on testOrderedData, but looping
 				// several times to create enough items to reasonably test node removal,
@@ -48,7 +50,7 @@
 					len = testOrderedData.length,
 					i, j, obj;
 
-				for(i = 0; i < 10; i++){
+				for(i = 0; i < 5; i++){
 					for(j = 0; j < len; j++){
 						obj = lang.clone(testOrderedData[j]);
 						obj.order = obj.id = i * len + j + 1;
@@ -71,25 +73,25 @@
 				// so leaving sort disabled on columns in this grid.
 				var grid = window.grid = new DnDGrid(lang.mixin(getCommonProperties(), {
 					columns: [
-						{label:"Name", field:"name", sortable: false},
-						{label:"Description", field:"description", sortable: false}
+						{ label: "Name", field:"name", sortable: false }
 					],
-					touchesToScroll: 2
+					touchesToScroll: 2,
+					dndSourceType: "grid-row"
 				}), "grid");
 
 				var gridWithHandles = window.gridWithHandles = new DnDGrid(lang.mixin(getCommonProperties(), {
 					columns: [
 						{
 							label: "Drag",
 							className: "handleColumn",
-							renderCell: function(){
-								return put("div.dojoDndHandle");
+							renderCell: function(object, data, cell){
+								cell.className += " dojoDndHandle";
 							},
 							sortable: false
 						},
-						{ label: "Name", field: "name", sortable: false },
-						{ label: "Description", field: "description", sortable: false }
+						{ label: "Name", field: "name", sortable: false }
 					],
+					dndSourceType: "gridWithHandles-row",
 					dndParams: {
 						withHandles: true
 					}
@@ -99,9 +101,13 @@
 	</head>
 	<body class="tundra">
 		<p>This page contains grids with DnD set up for touch devices.</p>
-		<h2>Grid with no DnD handles (entire items are draggable), 2-finger scroll</h2>
-		<div id="grid"></div>
-		<h2>Grid with DnD handles, 1-finger scroll elsewhere</h2>
-		<div id="gridWithHandles"></div>
+		<div class="gridcontainer">
+			<h2>no handles, 2-finger scroll</h2>
+			<div id="grid"></div>
+		</div>
+		<div class="gridcontainer">
+			<h2>handles, 1-finger scroll elsewhere</h2>
+			<div id="gridWithHandles"></div>
+		</div>
 	</body>
 </html>