added state handling to checkbox plugin if not tied to selection

dist/jstree.js

@@ -5021,6 +5021,42 @@
 			}
 			return full ? $.map(obj, $.proxy(function (i) { return this.get_node(i); }, this)) : obj;
 		};
+		this.load_node = function (obj, callback) {
+			var k, l, i, j, c, tmp;
+			if(!$.isArray(obj) && !this.settings.checkbox.tie_selection) {
+				tmp = this.get_node(obj);
+				if(tmp && tmp.state.loaded) {
+					for(k = 0, l = tmp.children_d.length; k < l; k++) {
+						if(this._model.data[tmp.children_d[k]].state.checked) {
+							c = true;
+							this._data.checkbox.selected = $.vakata.array_remove_item(this._data.checkbox.selected, tmp.children_d[k]);
+						}
+					}
+				}
+			}
+			return parent.load_node.apply(this, arguments);
+		};
+		this.get_state = function () {
+			var state = parent.get_state.apply(this, arguments);
+			if(this.settings.checkbox.tie_selection) { return state; }
+			state.checkbox = this._data.checkbox.selected.slice();
+			return state;
+		};
+		this.set_state = function (state, callback) {
+			var res = parent.set_state.apply(this, arguments);
+			if(res && state.checkbox) {
+				if(!this.settings.checkbox.tie_selection) {
+					this.uncheck_all();
+					var _this = this;
+					$.each(state.checkbox, function (i, v) {
+						_this.check_node(v);
+					});
+				}
+				delete state.checkbox;
+				return false;
+			}
+			return res;
+		};
 	};
 
 	// include the checkbox plugin by default

gruntfile.js

@@ -45,7 +45,7 @@ module.exports = function(grunt) {
       }
     },
     qunit: {
-      files: ['test/**/*.html']
+      files: ['test/unit/**/*.html']
     },
     jshint: {
       options: {
@@ -119,6 +119,33 @@ module.exports = function(grunt) {
         }
       },
     },
+    'phantomcss-gitdiff': {
+      options: {
+        baseUrl: 'http://127.0.0.1/jstree/',
+        serverRoot: 'test/visual/',
+        gitDiff: true,
+      },
+      desktop : {
+        options: {
+          screenshots: 'test/visual/screenshots/',
+          failures: 'test/visual/failures/',
+          viewportSize : [ 1280, 800 ]
+        },
+        src: [
+          'test/visual/d.html'
+        ]
+      },
+      mobile : {
+        options: {
+          screenshots: 'test/visual/screenshots/',
+          failures: 'test/visual/failures/',
+          viewportSize : [ 360, 800 ]
+        },
+        src: [
+          'test/visual/m.html'
+        ]
+      }
+    },
     imagemin: {
       dynamic: {
         options: {                       // Target options
@@ -162,6 +189,7 @@ module.exports = function(grunt) {
   grunt.loadNpmTasks('grunt-contrib-uglify');
   grunt.loadNpmTasks('grunt-contrib-less');
   grunt.loadNpmTasks('grunt-contrib-qunit');
+  grunt.loadNpmTasks('grunt-phantomcss-gitdiff');
   grunt.loadNpmTasks('grunt-contrib-watch');
   grunt.loadNpmTasks('grunt-contrib-imagemin');
   grunt.loadNpmTasks('grunt-text-replace');
@@ -205,7 +233,7 @@ module.exports = function(grunt) {
   });
 
   // Default task.
-  grunt.registerTask('default', ['jshint:beforeconcat','concat','amd','jshint:afterconcat','copy:libs','uglify','less','imagemin','replace','copy:docs','qunit','dox']);
+  grunt.registerTask('default', ['jshint:beforeconcat','concat','amd','jshint:afterconcat','copy:libs','uglify','less','imagemin','replace','copy:docs','qunit','phantomcss-gitdiff','dox']);
   grunt.registerTask('js', ['concat','amd','uglify']);
   grunt.registerTask('css', ['copy','less']);
 

package.json

@@ -35,7 +35,8 @@
     "grunt-contrib-watch": "~0.5.3",
     "grunt-contrib-imagemin": "~0.4.0",
     "grunt-contrib-qunit": "~v0.3.0",
-    "grunt-text-replace": "~0.3.11"
+    "grunt-text-replace": "~0.3.11",
+    "grunt-phantomcss-gitdiff": "0.0.7"
   },
   "dependencies": {
     "jquery": ">=1.9.1"

src/jstree.checkbox.js

@@ -697,6 +697,42 @@
 			}
 			return full ? $.map(obj, $.proxy(function (i) { return this.get_node(i); }, this)) : obj;
 		};
+		this.load_node = function (obj, callback) {
+			var k, l, i, j, c, tmp;
+			if(!$.isArray(obj) && !this.settings.checkbox.tie_selection) {
+				tmp = this.get_node(obj);
+				if(tmp && tmp.state.loaded) {
+					for(k = 0, l = tmp.children_d.length; k < l; k++) {
+						if(this._model.data[tmp.children_d[k]].state.checked) {
+							c = true;
+							this._data.checkbox.selected = $.vakata.array_remove_item(this._data.checkbox.selected, tmp.children_d[k]);
+						}
+					}
+				}
+			}
+			return parent.load_node.apply(this, arguments);
+		};
+		this.get_state = function () {
+			var state = parent.get_state.apply(this, arguments);
+			if(this.settings.checkbox.tie_selection) { return state; }
+			state.checkbox = this._data.checkbox.selected.slice();
+			return state;
+		};
+		this.set_state = function (state, callback) {
+			var res = parent.set_state.apply(this, arguments);
+			if(res && state.checkbox) {
+				if(!this.settings.checkbox.tie_selection) {
+					this.uncheck_all();
+					var _this = this;
+					$.each(state.checkbox, function (i, v) {
+						_this.check_node(v);
+					});
+				}
+				delete state.checkbox;
+				return false;
+			}
+			return res;
+		};
 	};
 
 	// include the checkbox plugin by default

test/visual/d.html

@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<title>Light theme visual tests</title>
+	<link rel="stylesheet" href="./../../dist/themes/default/style.min.css">
+	<link rel="stylesheet" href="./../../dist/themes/default-dark/style.min.css">
+	<style>.tree { border:1px solid black; padding:10px; width:300px; margin:20px; float:left; min-height:200px; }</style>
+</head>
+<body style="background:white;">
+	<div class="tree" id="empty"></div>
+	<div class="tree" id="core"><ul><li>asdf</li></ul></div>
+	<div class="tree" id="tree">
+		<ul>
+			<li>Node 01
+				<ul>
+					<li>Node</li>
+					<li>Node</li>
+				</ul>
+			</li>
+			<li>Node 02</li>
+			<li data-jstree='{"opened" : true}'>Node 03
+				<ul>
+					<li>Node</li>
+					<li>Node</li>
+				</ul>
+			</li>
+			<li>Node 04</li>
+			<li>Node 05</li>
+		</ul>
+	</div>
+	<div class="tree" id="full"><ul><li data-jstree='{ "selected" : true, "type" : "file" }'>full</li><li>asdf</li></ul></div>
+	<div class="tree" id="dark"><ul><li data-jstree='{ "selected" : true, "type" : "file"}'>full</li><li>asdf</li></ul></div>
+
+	<script src="./../../dist/libs/jquery.js"></script>
+	<script src="./../../dist/jstree.min.js"></script>
+	<script>
+	$('#empty').jstree();
+	$('#tree, #core').jstree();
+	$('#full').jstree({ plugins : ["checkbox","sort","types","wholerow"], "types" : { "file" : { "icon" : "jstree-file" } } });
+	$('#dark').jstree({ plugins : ["checkbox","sort","types","wholerow"], "core" : { "themes" : { "name" : "default-dark" } }, "types" : { "file" : { "icon" : "jstree-file" } } });
+	</script>
+</body>
+</html>

test/visual/m.html

@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<title>Mobile theme visual tests</title>
+	<link rel="stylesheet" href="./../../dist/themes/default/style.min.css">
+	<link rel="stylesheet" href="./../../dist/themes/default-dark/style.min.css">
+	<style>.tree { border:1px solid black; padding:10px; width:300px; margin:20px; float:left; min-height:200px; }</style>
+</head>
+<body style="background:white;">
+	<div class="tree" id="tree">
+		<ul>
+			<li>Node 01
+				<ul>
+					<li>Node</li>
+					<li>Node</li>
+				</ul>
+			</li>
+			<li>Node 02</li>
+			<li data-jstree='{"opened" : true}'>Node 03
+				<ul>
+					<li>Node</li>
+					<li>Node</li>
+				</ul>
+			</li>
+			<li>Node 04</li>
+			<li>Node 05</li>
+		</ul>
+	</div>
+	<div class="tree" id="full"><ul><li data-jstree='{ "selected" : true, "type" : "file" }'>full</li><li>asdf</li></ul></div>
+	<div class="tree" id="dark"><ul><li data-jstree='{ "selected" : true, "type" : "file"}'>full</li><li>asdf</li></ul></div>
+
+	<script src="./../../dist/libs/jquery.js"></script>
+	<script src="./../../dist/jstree.min.js"></script>
+	<script>
+	$.jstree.defaults.core.themes.responsive = true;
+	$('#tree').jstree();
+	$('#full').jstree({ plugins : ["checkbox","sort","types","wholerow"], "types" : { "file" : { "icon" : "jstree-file" } } });
+	$('#dark').jstree({ plugins : ["checkbox","sort","types","wholerow"], "core" : { "themes" : { "name" : "default-dark" } }, "types" : { "file" : { "icon" : "jstree-file" } } });
+	</script>
+</body>
+</html>