Remove xstyle dependency

* Remove use of xstyle/css! AMD plugin * List: Replace xstyle/hasClass use with inline logic * Ensure that dgrid.css is explicitly loaded in all test pages * Move structural CSS to Stylus and create one central CSS file * Use nib/vendor to reduce cross-browser prefix boilerplate * Add Pagination to skin.html for footer skin testing, and remove skin switching from Pagination's own test pages * Move skin/rtl GET param logic to a separate module for better organization and potential reuse * Add module for unit tests to add dgrid.css when necessary Removing xstyle usage simplifies loading and allows CSS to be optimized with the cssOptimize flag during builds, with no extra configuration required. This change requires all code using dgrid to incorporate dgrid.css directly, as it will no longer be automatically loaded through the module loader. Even loading all structural styles unconditionally still involves slightly less bandwidth than loading xstyle modules. This difference becomes more significant when gzip is taken into consideration. It should also be feasible for developers using stylus to directly incorporate specific components of dgrid's structural styles into their own stylesheets if they don't need everything.
SitePen · Feb 15, 2015 · 17b06f5 · 17b06f5
1 parent cb7637b
commit 17b06f5
Show file tree

Hide file tree

Showing 77 changed files with 1,001 additions and 642 deletions.
diff --git a/ColumnSet.js b/ColumnSet.js
@@ -7,8 +7,7 @@ define([
 	'dojo/query',
 	'dojo/has',
 	'./util/misc',
-	'dojo/_base/sniff',
-	'xstyle/css!./css/columnset.css'
+	'dojo/_base/sniff'
 ], function (declare, lang, domConstruct, on, aspect, query, has, miscUtil) {
 	has.add('event-mousewheel', function (global, document, element) {
 		return 'onmousewheel' in element;

diff --git a/List.js b/List.js
@@ -5,12 +5,17 @@ define([
 	'dojo/on',
 	'dojo/has',
 	'./util/misc',
-	'xstyle/has-class',
-	'dojo/_base/sniff',
-	'xstyle/css!./css/dgrid.css'
-], function (declare, domConstruct, domClass, listen, has, miscUtil, hasClass) {
-	// Add user agent/feature CSS classes
-	hasClass('mozilla', 'touch');
+	'dojo/_base/sniff'
+], function (declare, domConstruct, domClass, listen, has, miscUtil) {
+	// Add user agent/feature CSS classes needed for structural CSS
+	var featureClasses = [];
+	if (has('mozilla')) {
+		featureClasses.push('has-mozilla');
+	}
+	if (has('touch')) {
+		featureClasses.push('has-touch');
+	}
+	domClass.add(document.documentElement, featureClasses);
 
 	// Add a feature test for pointer (only Dojo 1.10 has pointer-events and MSPointer tests)
 	has.add('pointer', function (global) {

diff --git a/README.md b/README.md
@@ -45,8 +45,6 @@ bower install dijit#<target>
 
 Alternatively, dgrid and its dependencies can be downloaded individually:
 
-* [xstyle](https://github.com/kriszyp/xstyle)
-* [put-selector](https://github.com/kriszyp/put-selector)
 * [dstore](https://github.com/SitePen/dstore) for store-backed grids
 * [The Dojo Toolkit](http://dojotoolkit.org) SDK version 1.8 or higher
     * Out of the DTK components, Dojo core is the only hard dependency for dgrid;
@@ -61,16 +59,14 @@ directory structure like the following:
 * `dojo`
 * `dojox` (optional, dependency of some dgrid tests)
 * `dstore`
-* `put-selector`
-* `xstyle`
 * `util` (optional, e.g. if pursuing a custom build)
 
 ## CDN
 
 [RawGit](http://rawgit.com/) now offers CDN hosting of raw tagged git URLs.
-It can serve any version of dgrid, xstyle, and put-selector via MaxCDN.
+It can serve any version of dgrid and dstore via MaxCDN.
 
-For example, here's a `packages` configuration for dgrid 0.4.0, xstyle 0.2.1, and put-selector 0.3.5:
+For example, here's a `packages` configuration for dgrid 0.4.0 and dstore 1.0.0:
 
 ```js
 packages: [
@@ -79,12 +75,8 @@ packages: [
         location: '//cdn.rawgit.com/SitePen/dgrid/v0.4.0'
     },
     {
-        name: 'xstyle',
-        location: '//cdn.rawgit.com/kriszyp/xstyle/v0.2.1'
-    },
-    {
-        name: 'put-selector',
-        location: '//cdn.rawgit.com/kriszyp/put-selector/v0.3.5'
+        name: 'dstore',
+        location: '//cdn.rawgit.com/SitePen/dstore/v1.0.0'
     }
 ]
 ```

diff --git a/TouchScroll.js b/TouchScroll.js
@@ -7,8 +7,7 @@ define([
 	'dojo/dom-class',
 	'dojo/on',
 	'./util/touch',
-	'./util/has-css3',
-	'xstyle/css!./css/TouchScroll.css'
+	'./util/has-css3'
 ], function (declare, domConstruct, domClass, on, touchUtil, has) {
 	var calcTimerRes = 50, // ms between drag velocity measurements
 		glideTimerRes = 30, // ms between glide animation ticks

diff --git a/bower.json b/bower.json
@@ -18,9 +18,7 @@
 	},
 	"dependencies": {
 		"dojo": ">=1.8.9",
-		"dstore": "~1.0",
-		"xstyle": ">=0.1.3",
-		"put-selector": ">=0.3.6"
+		"dstore": "~1.0"
 	},
 	"ignore": [
 		".*",

diff --git a/css/columnset.css → css/ColumnSet.styl b/css/columnset.css → css/ColumnSet.styl
@@ -1,9 +1,9 @@
 .dgrid-column-set {
 	overflow: hidden;
 	width: 100%;
-	position: relative; /* This is needed because we setting position: relative on cells in the grid for focus in IE7*/
+	position: relative; // This is needed because we set position: relative on cells in the grid for focus in IE7
 	height: 100%;
-	/* On touch devices, disable default X-axis drag behavior but allow vertical scrolling */
+	// On touch devices, disable default X-axis drag behavior but allow vertical scrolling
 	-ms-touch-action: pan-y;
 	touch-action: pan-y;
 }
@@ -30,8 +30,3 @@
 .dgrid-column-set-scroller-content {
 	height: 1px;
 }
-
-/* indicator of a successful load */
-#dgrid-css-columnset-loaded {
-	display: none;
-}
diff --git a/css/TouchScroll.css b/css/TouchScroll.css
@@ -1,55 +1,43 @@
-/* styles for scrollbars during touch-scroll */
-
-.touchscroll-x, .touchscroll-y {
-	display: none; /* overridden below */
-	overflow: hidden; /* cut off ends of scrollbar during rubber-banding */
-	position: absolute;
-	/* establish base style for scrollbar fade-in/out */
-	opacity: 0.7;
+.touchscroll-x,
+.touchscroll-y {
+  display: none;
+  overflow: hidden;
+  position: absolute;
+  opacity: 0.7;
 }
-.touchscroll-fadeout .touchscroll-x, .touchscroll-fadeout .touchscroll-y {
-	opacity: 0;
-	-webkit-transition: opacity 0.3s ease-out 0.1s;
-	-moz-transition: opacity 0.3s ease-out 0.1s;
-	-o-transition: opacity 0.3s ease-out 0.1s;
-	transition: opacity 0.3s ease-out 0.1s;
+.touchscroll-fadeout .touchscroll-x,
+.touchscroll-fadeout .touchscroll-y {
+  opacity: 0;
+  -webkit-transition: opacity 0.3s ease-out 0.1s;
+  -moz-transition: opacity 0.3s ease-out 0.1s;
+  -o-transition: opacity 0.3s ease-out 0.1s;
+  transition: opacity 0.3s ease-out 0.1s;
 }
-
 .touchscroll-bar {
-	background-color: rgba(88,88,88,0.97);
-	border: 1px solid rgba(88,88,88,1);
-	border-radius: 3px;
-
-	/* the borders aren't anti-aliased on Android, so this smooths it out a bit */
-	-webkit-box-shadow: 0 0 1px rgba(88,88,88,0.4);
+  background-color: rgba(88,88,88,0.97);
+  border: 1px solid #585858;
+  border-radius: 3px;
+  -webkit-box-shadow: 0 0 1px rgba(88,88,88,0.4);
 }
-
 .touchscroll-x {
-	left: 1px;
-	right: 3px;
-	bottom: 1px;
-	height: 5px;
+  left: 1px;
+  right: 3px;
+  bottom: 1px;
+  height: 5px;
 }
 .touchscroll-y {
-	top: 1px;
-	bottom: 3px;
-	right: 1px;
-	width: 5px;
+  top: 1px;
+  bottom: 3px;
+  right: 1px;
+  width: 5px;
 }
-
-.touchscroll-scrollable-x .touchscroll-x, .touchscroll-scrollable-y .touchscroll-y {
-	display: block; /* display scrollbar when appropriate */
+.touchscroll-scrollable-x .touchscroll-x,
+.touchscroll-scrollable-y .touchscroll-y {
+  display: block;
 }
-
 .touchscroll-bar {
-	/* Establish transition property and timing function for scrollbars */
-	-webkit-transition: transform cubic-bezier(0.33, 0.66, 0.66, 1);
-	-moz-transition: transform cubic-bezier(0.33, 0.66, 0.66, 1);
-	-o-transition: transform cubic-bezier(0.33, 0.66, 0.66, 1);
-	transition: transform cubic-bezier(0.33, 0.66, 0.66, 1);
+  -webkit-transition: transform cubic-bezier(0.33, 0.66, 0.66, 1);
+  -moz-transition: transform cubic-bezier(0.33, 0.66, 0.66, 1);
+  -o-transition: transform cubic-bezier(0.33, 0.66, 0.66, 1);
+  transition: transform cubic-bezier(0.33, 0.66, 0.66, 1);
 }
-
-/* indicator of a successful load */
-#dgrid-css-TouchScroll-loaded {
-	display: none;
-}
diff --git a/css/TouchScroll.styl b/css/TouchScroll.styl
@@ -0,0 +1,50 @@
+// styles for scrollbars during touch-scroll
+
+.touchscroll-x, .touchscroll-y {
+	display: none; // overridden below
+	overflow: hidden; // cut off ends of scrollbar during rubber-banding
+	position: absolute;
+	// establish base style for scrollbar fade-in/out
+	opacity: 0.7;
+}
+.touchscroll-fadeout .touchscroll-x, .touchscroll-fadeout .touchscroll-y {
+	opacity: 0;
+	-webkit-transition: opacity 0.3s ease-out 0.1s;
+	-moz-transition: opacity 0.3s ease-out 0.1s;
+	-o-transition: opacity 0.3s ease-out 0.1s;
+	transition: opacity 0.3s ease-out 0.1s;
+}
+
+.touchscroll-bar {
+	background-color: rgba(88,88,88,0.97);
+	border: 1px solid rgba(88,88,88,1);
+	border-radius: 3px;
+
+	// the borders aren't anti-aliased on Android, so this smooths it out a bit
+	-webkit-box-shadow: 0 0 1px rgba(88,88,88,0.4);
+}
+
+.touchscroll-x {
+	left: 1px;
+	right: 3px;
+	bottom: 1px;
+	height: 5px;
+}
+.touchscroll-y {
+	top: 1px;
+	bottom: 3px;
+	right: 1px;
+	width: 5px;
+}
+
+.touchscroll-scrollable-x .touchscroll-x, .touchscroll-scrollable-y .touchscroll-y {
+	display: block; // display scrollbar when appropriate
+}
+
+.touchscroll-bar {
+	// Establish transition property and timing function for scrollbars
+	-webkit-transition: transform cubic-bezier(0.33, 0.66, 0.66, 1);
+	-moz-transition: transform cubic-bezier(0.33, 0.66, 0.66, 1);
+	-o-transition: transform cubic-bezier(0.33, 0.66, 0.66, 1);
+	transition: transform cubic-bezier(0.33, 0.66, 0.66, 1);
+}
diff --git a/css/Tree.styl b/css/Tree.styl
@@ -0,0 +1,18 @@
+.ui-icon-triangle-1-e {
+	background-position: -32px -16px;
+}
+.ui-icon-triangle-1-se {
+	background-position: -48px -16px;
+}
+
+.dgrid-expando-icon {
+	width: 16px;
+	height: 16px;
+}
+.dgrid-tree-container {
+	transition-duration: 0.3s;
+	overflow: hidden;
+}
+.dgrid-tree-container.dgrid-tree-resetting {
+	transition-duration: 0;
+}