Fix #873: Make ui- classes optional based on addUiClasses property

SitePen · Mar 28, 2014 · eeb6eaf · eeb6eaf
1 parent d88323d
commit eeb6eaf
Show file tree

Hide file tree

Showing 29 changed files with 151 additions and 111 deletions.
diff --git a/CellSelection.js b/CellSelection.js
@@ -74,7 +74,8 @@ return declare(Selection, {
 			if(element){
 				// add or remove classes as appropriate
 				if(value){
-					put(element, ".dgrid-selected.ui-state-active");
+					put(element, ".dgrid-selected" +
+						(this.addUiClasses ? ".ui-state-active" : ""));
 				}else{
 					put(element, "!dgrid-selected!ui-state-active");
 				}

diff --git a/List.js b/List.js
@@ -125,6 +125,10 @@ function(kernel, declare, dom, listen, has, miscUtil, TouchScroll, hasClass, put
 		//		incorporate logic from the TouchScroll module (at the expense of
 		//		normal desktop/mouse or native mobile scrolling functionality).
 		useTouchScroll: !has("dom-scrollbar-width"),
+
+		// addUiClasses: Boolean
+		//		Whether to add jQuery UI classes to various elements in dgrid's DOM.
+		addUiClasses: true,
 
 		// cleanEmptyObservers: Boolean
 		//		Whether to clean up observers for empty result sets.
@@ -204,6 +208,7 @@ function(kernel, declare, dom, listen, has, miscUtil, TouchScroll, hasClass, put
 		},
 		buildRendering: function(){
 			var domNode = this.domNode,
+				addUiClasses = this.addUiClasses,
 				self = this,
 				headerNode, spacerNode, bodyNode, footerNode, isRTL;
 
@@ -215,11 +220,13 @@ function(kernel, declare, dom, listen, has, miscUtil, TouchScroll, hasClass, put
 			// class / className setter), then apply standard classes/attributes
 			domNode.className = "";
 
-			put(domNode, "[role=grid].ui-widget.dgrid.dgrid-" + this.listType);
+			put(domNode, "[role=grid].dgrid.dgrid-" + this.listType +
+				(addUiClasses ? ".ui-widget" : ""));
 
 			// Place header node (initially hidden if showHeader is false).
 			headerNode = this.headerNode = put(domNode, 
-				"div.dgrid-header.dgrid-header-row.ui-widget-header" +
+				"div.dgrid-header.dgrid-header-row" +
+				(addUiClasses ? ".ui-widget-header" : "") +
 				(this.showHeader ? "" : ".dgrid-header-hidden"));
 			if(has("quirks") || has("ie") < 8){
 				spacerNode = put(domNode, "div.dgrid-spacer");
@@ -233,7 +240,8 @@ function(kernel, declare, dom, listen, has, miscUtil, TouchScroll, hasClass, put
 				bodyNode.tabIndex = -1;
 			}
 
-			this.headerScrollNode = put(domNode, "div.dgrid-header-scroll.dgrid-scrollbar-width.ui-widget-header");
+			this.headerScrollNode = put(domNode, "div.dgrid-header.dgrid-header-scroll.dgrid-scrollbar-width" +
+				(addUiClasses ? ".ui-widget-header" : ""));
 
 			// Place footer node (initially hidden if showFooter is false).
 			footerNode = this.footerNode = put("div.dgrid-footer" +
@@ -256,7 +264,8 @@ function(kernel, declare, dom, listen, has, miscUtil, TouchScroll, hasClass, put
 			this.configStructure();
 			this.renderHeader();
 
-			this.contentNode = this.touchNode = put(this.bodyNode, "div.dgrid-content.ui-widget-content");
+			this.contentNode = this.touchNode = put(this.bodyNode,
+				"div.dgrid-content" + (addUiClasses ? ".ui-widget-content" : ""));
 			// add window resize handler, with reference for later removal if needed
 			this._listeners.push(this._resizeHandle = listen(window, "resize",
 				miscUtil.throttleDelayed(winResizeHandler, this)));
@@ -329,9 +338,9 @@ function(kernel, declare, dom, listen, has, miscUtil, TouchScroll, hasClass, put
 				if(scrollbarWidth != 17 && !quirks){
 					// for modern browsers, we can perform a one-time operation which adds
 					// a rule to account for scrollbar width in all grid headers.
-					miscUtil.addCssRule(".dgrid-header", "right: " + scrollbarWidth + "px");
+					miscUtil.addCssRule(".dgrid-header-row", "right: " + scrollbarWidth + "px");
 					// add another for RTL grids
-					miscUtil.addCssRule(".dgrid-rtl-nonwebkit .dgrid-header", "left: " + scrollbarWidth + "px");
+					miscUtil.addCssRule(".dgrid-rtl-nonwebkit .dgrid-header-row", "left: " + scrollbarWidth + "px");
 				}
 			}
 
@@ -428,9 +437,10 @@ function(kernel, declare, dom, listen, has, miscUtil, TouchScroll, hasClass, put
 		newRow: function(object, parentNode, beforeNode, i, options){
 			if(parentNode){
 				var row = this.insertRow(object, parentNode, beforeNode, i, options);
-				put(row, ".ui-state-highlight");
+				put(row, ".dgrid-highlight" +
+					(this.addUiClasses ? ".ui-state-highlight" : ""));
 				setTimeout(function(){
-					put(row, "!ui-state-highlight");
+					put(row, "!dgrid-highlight!ui-state-highlight");
 				}, this.highlightDuration);
 				return row;
 			}
@@ -712,7 +722,9 @@ function(kernel, declare, dom, listen, has, miscUtil, TouchScroll, hasClass, put
 				this.removeRow(row);
 			}
 			row = this.renderRow(object, options);
-			row.className = (row.className || "") + " ui-state-default dgrid-row " + (i % 2 == 1 ? oddClass : evenClass);
+			row.className = (row.className || "") + " dgrid-row " +
+				(i % 2 == 1 ? oddClass : evenClass) +
+				(this.addUiClasses ? " ui-state-default" : "");
 			// get the row id for easy retrieval
 			this._rowIdToObject[row.id = id] = object;
 			parent.insertBefore(row, beforeNode || null);

diff --git a/Selection.js b/Selection.js
@@ -508,7 +508,8 @@ return declare(null, {
 			if(element){
 				// add or remove classes as appropriate
 				if(value){
-					put(element, ".dgrid-selected.ui-state-active");
+					put(element, ".dgrid-selected" +
+						(this.addUiClasses ? ".ui-state-active" : ""));
 				}else{
 					put(element, "!dgrid-selected!ui-state-active");
 				}

diff --git a/css/dgrid.css b/css/dgrid.css
@@ -9,6 +9,9 @@
 
 .dgrid-header {
 	background-color: #eee;
+}
+
+.dgrid-header-row {
 	position: absolute;
 	right: 17px; /* scrollbar width; revised in List.js if necessary */
 	left: 0;

diff --git a/css/dgrid_rtl.css b/css/dgrid_rtl.css
@@ -6,7 +6,7 @@
 	.dgrid-rtl-nonwebkit is also added to the domNode if
 		the grid's isRTL is true AND the client isn't WebKit
 */
-.dgrid-rtl-nonwebkit .dgrid-header {
+.dgrid-rtl-nonwebkit .dgrid-header-row {
 	right: 0;
 	left: 17px;
 }
@@ -50,7 +50,7 @@
 .dgrid-rtl.dgrid-autoheight .dgrid-header {
 	left: 0;
 }
-.has-ie-6 .dgrid-rtl .dgrid-header {
+.has-ie-6 .dgrid-rtl .dgrid-header-row {
 	left: auto;
 	right: auto;
 }

diff --git a/css/skins/cactus.css b/css/skins/cactus.css
@@ -1,4 +1,4 @@
-.cactus .ui-widget-content {
+.cactus .dgrid-content {
 	border: none;
 	background: #faffef;
 	color: #000;
@@ -8,7 +8,7 @@
 	border-bottom: none;
 }
 
-.cactus .ui-widget-header,
+.cactus .dgrid-header,
 .cactus .dgrid-footer {
 	color: #fff;
 	background: #333; /* Old browsers */
@@ -21,7 +21,7 @@
 	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4e4e4e', endColorstr='#141414',GradientType=0 ); /* IE6-9 */
 }
 
-.cactus .ui-widget-header th {
+.cactus .dgrid-header th {
 	padding: 7px 3px;
 	font-weight: bold;
 	color: #fff;
@@ -76,12 +76,12 @@
 	border-color: #333;
 }
 
-.cactus .ui-state-active:hover {
+.cactus .dgrid-selected:hover {
 	background: #333;
 	border-color: #333;
 }
 
-.cactus .ui-state-highlight {
+.cactus .dgrid-highlight {
 	background: #d6e5a5; /* background-color doesn't override CSS3 gradient */
 	filter: none; /* override gradient in IE */
 	color: #000;

diff --git a/css/skins/claro.css b/css/skins/claro.css
@@ -4,10 +4,10 @@
 	color: #000;
 }
 
-.claro .ui-widget-header {
+.claro .dgrid-header {
 	font-weight: bold;
 }
-.claro .ui-widget-header,
+.claro .dgrid-header,
 .claro .dgrid-footer { 
 	background: #ebf0f5; /* Old browsers */
 	background: -moz-linear-gradient(top, #ebf0f5 0%, #d5e0ea 100%); /* FF3.6+ */
@@ -18,7 +18,7 @@
 	background: linear-gradient(top, #ebf0f5 0%,#d5e0ea 100%); /* W3C */
 	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebf0f5', endColorstr='#d5e0ea',GradientType=0 ); /* IE6-9 */
 }
-.claro .ui-widget-header .dgrid-cell:hover {
+.claro .dgrid-header .dgrid-cell:hover {
 	background: #ebf1f6; /* Old browsers */
 	background: -moz-linear-gradient(top, #ffffff 0%, #d2e0eb 100%); /* FF3.6+ */
 	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#d2e0eb)); /* Chrome,Safari4+ */
@@ -28,7 +28,7 @@
 	background: linear-gradient(top, #ffffff 0%,#d2e0eb 100%); /* W3C */
 }
 
-.claro .ui-state-default { 
+.claro .dgrid-row { 
 	-webkit-transition-duration: 0.2s;
 	-moz-transition-duration: 0.2s;
 	-o-transition-duration: 0.2s;
@@ -39,29 +39,29 @@
 	transition-property: background-color, border-color;
 	background: url("images/row_back.png") #fff repeat-x;
 }
-.has-ie-6 .claro .ui-state-default {
+.has-ie-6 .claro .dgrid-row {
 	background-image: none;
 }
-.claro .ui-state-default:hover {
+.claro .dgrid-row:hover {
 	background-color: #e9f2fe;
 }
 
-.claro .ui-state-active {
+.claro .dgrid-selected {
 	background-color: #cee6fa;
 }
 
-.claro .ui-state-active:hover {
+.claro .dgrid-selected:hover {
 	background-color: #9bc6f2;
 }
 
-.claro .ui-state-highlight {
+.claro .dgrid-highlight {
 	background-color: #ff6;
 }
 
 .claro .dgrid-cell {
 	border-color: #edc;
 }
 
-.claro .ui-widget-header .dgrid-cell {
+.claro .dgrid-header .dgrid-cell {
 	border-color: #bbb;
-}
+}
diff --git a/css/skins/nihilo.css b/css/skins/nihilo.css
@@ -2,11 +2,11 @@
 	border-color: #bba;
 }
 
-.nihilo .ui-widget-content {
+.nihilo .dgrid-content {
 	background: #fff;
 	color: #000;
 }
-.nihilo .ui-widget-header {
+.nihilo .dgrid-header {
 	background: #fff;
 	border-bottom-color: #919191;
 }
@@ -18,21 +18,21 @@
 	border-right-color: #acab99;
 }
 
-.nihilo .ui-state-active {
+.nihilo .dgrid-selected {
 	background-color: #aec7e3;
 }
-.nihilo .ui-state-default:hover {
+.nihilo .dgrid-row:hover {
 	background-color: #ffe284;
 }
 
-.nihilo .ui-state-highlight {
+.nihilo .dgrid-highlight {
 	background-color: #ff6;
 }
 
 .nihilo .dgrid-cell {
 	border-color: #ddc;
 }
 
-.nihilo .ui-widget-header .dgrid-cell {
+.nihilo .dgrid-header .dgrid-cell {
 	border-color: #bba;
 }
diff --git a/css/skins/sage.css b/css/skins/sage.css
@@ -1,4 +1,4 @@
-.sage .ui-widget-content {
+.sage .dgrid-content {
 	border: none;
 	background: #fff;
 	color: #000;
@@ -9,7 +9,8 @@
 	border-bottom: none;
 }
 
-.sage .ui-widget-header, .sage .dgrid-footer {
+.sage .dgrid-header,
+.sage .dgrid-footer {
 	color: #fff;
 	background: #333; /* Old browsers */
 	background: -moz-linear-gradient(top, #4e4e4e 0%, #555555 12%, #636363 25%, #505050 39%, #303030 49%, #000000 50%, #1c1c1c 60%, #292929 76%, #1e1e1e 91%, #141414 100%); /* FF3.6+ */
@@ -21,7 +22,7 @@
 	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4e4e4e', endColorstr='#141414',GradientType=0 ); /* IE6-9 */
 }
 
-.sage .ui-widget-header th {
+.sage .dgrid-header th {
 	padding: 7px 3px;
 	font-weight: bold;
 	color: #fff;
@@ -47,7 +48,7 @@
 	text-shadow: 0 1px 0 rgba(255,255,255,.5);
 }
 
-.sage .ui-state-default { 
+.sage .dgrid-row { 
 	-webkit-transition-duration: 0.1s;
 	-moz-transition-duration: 0.1s;
 	transition-duration: 0.1s;
@@ -62,7 +63,7 @@
 	text-shadow: 0 1px 0 rgba(255,255,255,.6);
 }
 
-.sage .ui-state-highlight {
+.sage .dgrid-highlight {
 	background-color: #d5e8bd;
 }
 

diff --git a/css/skins/slate.css b/css/skins/slate.css
@@ -1,4 +1,4 @@
-.slate .ui-widget-content {
+.slate .dgrid-content {
 	background: #fff; 
 	color: #000;
 	text-shadow: 0 1px 0 rgba(255,255,255,.9);
@@ -8,7 +8,8 @@
 	border-bottom: none;
 }
 
-.slate .ui-widget-header, .slate .dgrid-footer {
+.slate .dgrid-header,
+.slate .dgrid-footer {
 	color: #fff;
 	background: #333; /* Old browsers */
 	background: -moz-linear-gradient(top, #4e4e4e 0%, #555555 12%, #636363 25%, #505050 39%, #303030 49%, #000000 50%, #1c1c1c 60%, #292929 76%, #1e1e1e 91%, #141414 100%); /* FF3.6+ */
@@ -20,7 +21,7 @@
 	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4e4e4e', endColorstr='#141414',GradientType=0 ); /* IE6-9 */
 }
 
-.slate .ui-widget-header th {
+.slate .dgrid-header th {
 	padding: 7px 3px;
 	font-weight: bold;
 	color: #FFF;
@@ -37,14 +38,14 @@
 	background-color: #ddd;
 }
 
-.slate .ui-state-active,
-.slate .ui-state-active:hover {
+.slate .dgrid-selected,
+.slate .dgrid-selected:hover {
 	background-color: #555;
 	color: #fff;
 	text-shadow: 0 -1px 0 rgba(0,0,0,.5);	
 }
 
-.slate .ui-state-highlight {
+.slate .dgrid-highlight {
 	background-color: #999;
 }