Merge pull request #663 from mar10/themeroller

Improve ext-themeroller and ext-filter

CHANGELOG.md

@@ -1,18 +1,22 @@
 # 2.20.0-0 / Unreleased
   * [Added] #419 `modifyChild` event. This event is also a good place to 
     implement auto sorting (#559)
+  * [Added] #297 filter option 'hideExpanders' to remove expanders if all child 
+    nodes are hidden by filter
   * [Added] #419 node.triggerModifyChild() and node.triggerModify()
   * [Added] #595 add custom node filter to `generateFormElements()`
   * [Added] #610 `tree.tooltip` option allows automatic or custom tooltips
   * [Added] #620 improved tooltip escaping to allow newlines
   * [DEPRECATED] `removeNode` event. Listen for `modifyChild` with operation
     'remove' instead (which is fired on the parent).
+  * [Improved] ThemeRoller theme
   * [Improved] #656 WAI-ARIA support
     - Set focus to first node on first tab-in
     - Support [home] and [end] keys
     - Set aria-activedescendant on container to active ID
     - Set aria-multiselectable on container if selectMode != 1
     - Set aria-treeitem, -selected, -expanded, on title span instead `<li>`
+  * [Fixed] #230 themeroller theme compatible with ext-filter
   * [Fixed] #528 autoCollapse option blocks filter's autoExpand option
   * [Fixed] #576 `loadKeyPath()` sometimes gets the root wrong
   * [Fixed] #615 Drag & drop helper icons lose indentation with table extension

demo/sample-ext-filter.html

@@ -34,11 +34,13 @@
 			},
 			filter: {
 				autoApply: true,  // Re-apply last filter if lazy data is loaded
-				counter: true,  // Show a badge with number of matching child nodes near parent icons
-				fuzzy: false,  // Match single characters in order, e.g. 'fb' will match 'FooBar'
-				hideExpandedCounter: true,  // Hide counter badge, when parent is expanded
+				counter: true,    // Show a badge with number of matching child nodes near parent icons
+				fuzzy: false,     // Match single characters in order, e.g. 'fb' will match 'FooBar'
+				hideExpandedCounter: true,  // Hide counter badge if parent is expanded
+				hideExpanders: true,        // Hide expanders if all child nodes are hidden by filter
 				highlight: true,  // Highlight matches by wrapping inside <mark> tags
-				mode: "dimm"  // Grayout unmatched nodes (pass "hide" to remove unmatched node instead)
+				nodata: true,     // Display a 'no data' status node if result is empty
+				mode: "dimm"      // Grayout unmatched nodes (pass "hide" to remove unmatched node instead)
 			},
 			activate: function(event, data) {
 //				alert("activate " + data.node);
@@ -59,10 +61,12 @@
 		 */
 		$("input[name=search]").keyup(function(e){
 			var n,
+				tree = $.ui.fancytree.getTree(),
 				opts = {
 					autoExpand: $("#autoExpand").is(":checked"),
 					leavesOnly: $("#leavesOnly").is(":checked")
 				},
+				filterFunc = $("#branchMode").is(":checked") ? tree.filterBranches : tree.filterNodes,
 				match = $(this).val();
 
 			if(e && e.which === $.ui.keyCode.ESCAPE || $.trim(match) === ""){
@@ -71,12 +75,12 @@
 			}
 			if($("#regex").is(":checked")) {
 				// Pass function to perform match
-				n = tree.filterNodes(function(node) {
+				n = filterFunc.call(tree, function(node) {
 					return new RegExp(match, "i").test(node.title);
 				}, opts);
 			} else {
 				// Pass a string to perform case insensitive matching
-				n = tree.filterNodes(match, opts);
+				n = filterFunc.call(tree, match, opts);
 			}
 			$("button#btnResetSearch").attr("disabled", false);
 			$("span#matches").text("(" + n + " matches)");
@@ -94,8 +98,9 @@
 
 			switch( id ) {
 			case "autoExpand":
-			case "regex":
+			case "branchMode":
 			case "leavesOnly":
+			case "regex":
 				// Re-apply filter only
 				break;
 			case "hideMode":
@@ -104,15 +109,17 @@
 			case "counter":
 			case "fuzzy":
 			case "hideExpandedCounter":
+			case "hideExpanders":
 			case "highlight":
+			case "nodata":
 				tree.options.filter[id] = flag;
 				break;
 			}
 			tree.clearFilter();
 			$("input[name=search]").keyup();
 		});
 
-		$("#counter,#hideExpandedCounter,#highlight").prop("checked", true);
+		// $("#counter,#hideExpandedCounter,#highlight").prop("checked", true);
 
 		addSampleButton({
 			label: "Filter active branch",
@@ -161,37 +168,52 @@ <h1>Example: 'filter' extension</h1>
 	</p>
 	<!-- Start_Exclude: This block is not part of the sample code -->
 	<fieldset>
+		<legend>Options</legend>
+		<label for="regex">
+			<input type="checkbox" id="regex">
+			Regular expression
+		</label>
+		<br>
 		<label for="hideMode">
 			<input type="checkbox" id="hideMode">
 			Hide unmatched nodes
 		</label>
-		<label for="leavesOnly">
-			<input type="checkbox" id="leavesOnly">
-			Leaves only
+		<label for="branchMode">
+			<input type="checkbox" id="branchMode">
+			Match whole branch
 		</label>
 		<label for="autoExpand">
-			<input type="checkbox" id="autoExpand">
+			<input type="checkbox" id="autoExpand" checked="checked">
 			Auto expand
 		</label>
+		<label for="leavesOnly">
+			<input type="checkbox" id="leavesOnly">
+			Leaves only
+		</label>
+		<br>
 		<label for="counter">
-			<input type="checkbox" id="counter">
+			<input type="checkbox" id="counter" checked="checked">
 			Counter badges
 		</label>
-		<label for="hideExpandedCounter">
-			<input type="checkbox" id="hideExpandedCounter">
-			hideExpandedCounter
-		</label>
 		<label for="fuzzy">
 			<input type="checkbox" id="fuzzy">
 			Fuzzy
 		</label>
+		<label for="hideExpandedCounter">
+			<input type="checkbox" id="hideExpandedCounter" checked="checked">
+			hideExpandedCounter
+		</label>
+		<label for="hideExpanders">
+			<input type="checkbox" id="hideExpanders" checked="checked">
+			hideExpanders
+		</label>
 		<label for="highlight">
-			<input type="checkbox" id="highlight">
+			<input type="checkbox" id="highlight" checked="checked">
 			Highlight
 		</label>
-		<label for="regex">
-			<input type="checkbox" id="regex">
-			Regular expression
+		<label for="nodata">
+			<input type="checkbox" id="nodata" checked="checked">
+			nodata
 		</label>
 	</fieldset>
 

demo/sample-ext-themeroller.html

@@ -2,20 +2,18 @@
 <html>
 <head>
 	<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
-	<title>Fancytree - Example: Themeroller</title>
+	<title>Fancytree - Example: ThemeRoller</title>
 
-	<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/start/jquery-ui.css" />
 	<script src="//code.jquery.com/jquery-1.12.1.min.js"></script>
 	<script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
+	<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" />
 	<link href="../src/skin-themeroller/ui.fancytree.css" rel="stylesheet">
 
 	<script src="../src/jquery.fancytree.js"></script>
 	<script src="../src/jquery.fancytree.columnview.js"></script>
-	<script src="../src/jquery.fancytree.dnd.js"></script>
 	<script src="../src/jquery.fancytree.table.js"></script>
 	<script src="../src/jquery.fancytree.themeroller.js"></script>
-	<!--
-	-->
+
 	<!-- Start_Exclude: This block is not part of the sample code -->
 	<link href="../lib/prettify.css" rel="stylesheet">
 	<script src="../lib/prettify.js"></script>
@@ -24,26 +22,34 @@
 
 	<script src="../lib/Super-Theme-Switcher/jquery.themeswitcher.js"></script>
 
-<style type="text/css">
-	ul.fancytree-container,
-	table.fancytree-container{
-		font-size: 0.8em;
-	}
-</style>
+	<style type="text/css">
+		ul.fancytree-container,
+		table.fancytree-container{
+			font-size: 0.8em;
+		}
+	</style>
 
+	<script type="text/javascript">
+		$(function(){
+			$("#switcher").themeswitcher({
+				jqueryuiversion: "1.12.1",
+				imgpath: "../lib/Super-Theme-Switcher/images/",
+				loadTheme: "base",
+				additionalthemes: [{
+					title: "Base",
+					name: "base",
+					icon: "theme_90_base.png"
+				}]
+			});
+		});
+	</script>
 	<!-- End_Exclude -->
+
 <style type="text/css">
 	/* Fancytree extension 'table' */
 	table.fancytree-ext-table {
 		width: 100%;
 	}
-	table.fancytree-ext-table tbody tr:nth-child(even){
-		background-color: #f4f4f8;
-	}
-	table.fancytree-ext-table tbody tr td {
-		border: 1px solid lightgray;
-	}
-
 	/* Fancytree extension 'columnview' */
 	table.fancytree-ext-columnview {
 		border-collapse: collapse;
@@ -57,18 +63,15 @@
 <!-- Add code to initialize the tree when the document is loaded: -->
 <script type="text/javascript">
 	$(function(){
-		<!-- Start_Exclude: This block is not part of the sample code -->
-		$("#switcher").themeswitcher({
-			jqueryuiversion: "1",
-			imgpath: "../lib/Super-Theme-Switcher/images/",
-			loadTheme: "Smoothness"
-		});
-		<!-- End_Exclude -->
 		// Attach the fancytree widget to an existing <div id="tree"> element
 		// and pass the tree options as an argument to the fancytree() function:
 		$("#tree").fancytree({
 			extensions: ["themeroller"],
 			checkbox: true,
+			themeroller: {
+				addClass: ""  // no rounded corners
+				// selectedClass: "ui-state-active"
+			},
 			source: [
 				{title: "Node 1"},
 				{title: "Node 2",
@@ -83,6 +86,10 @@
 		$("#treetable").fancytree({
 			extensions: ["table", "themeroller"],
 			checkbox: true,
+			themeroller: {
+				// addClass: "",
+				// selectedClass: "ui-state-active"
+			},
 			source: {
 				url: "ajax-tree-plain.json"
 			},
@@ -117,11 +124,11 @@
 	<h1>Example: 'themeroller' extension</h1>
 	<div class="description">
 		<p>
-			Allow to apply <a href="http://jqueryui.com/themeroller/" target="_blank">jQuery Themeroller</a>
+			Allow to apply <a href="http://jqueryui.com/themeroller/" target="_blank">jQuery ThemeRoller</a>
 			styles.
 		</p>
 		<p>
-			<b>Status</b>: pre-alpha
+			<b>Status</b>: beta
 		</p>
 	</div>
 

src/jquery.fancytree.filter.js

@@ -89,6 +89,7 @@ $.ui.fancytree._FancytreeClass.prototype._applyFilterImpl = function(filter, bra
 	} else {
 		this.$div.addClass("fancytree-ext-filter-dimm");
 	}
+	this.$div.toggleClass("fancytree-ext-filter-hide-expanders", !!filterOpts.hideExpanders);
 	// Reset current filter
 	this.visit(function(node){
 		delete node.match;
@@ -281,14 +282,13 @@ $.ui.fancytree.registerExtension({
 	// Default options for this extension.
 	options: {
 		autoApply: true,  // Re-apply last filter if lazy data is loaded
-		counter: true,  // Show a badge with number of matching child nodes near parent icons
-		fuzzy: false,  // Match single characters in order, e.g. 'fb' will match 'FooBar'
-		hideExpandedCounter: true,  // Hide counter badge, when parent is expanded
+		counter: true,    // Show a badge with number of matching child nodes near parent icons
+		fuzzy: false,     // Match single characters in order, e.g. 'fb' will match 'FooBar'
+		hideExpandedCounter: true,  // Hide counter badge if parent is expanded
+		hideExpanders: true,        // Hide expanders if all child nodes are hidden by filter
 		highlight: true,  // Highlight matches by wrapping inside <mark> tags
-		nodata: true,  // Display a 'no data' status node if result is empty
-		mode: "dimm",  // Grayout unmatched nodes (pass "hide" to remove unmatched node instead)
-		// events
-		enhanceTitle: null
+		nodata: true,     // Display a 'no data' status node if result is empty
+		mode: "dimm"      // Grayout unmatched nodes (pass "hide" to remove unmatched node instead)
 	},
 	nodeLoadChildren: function(ctx, source) {
 		return this._superApply(arguments).done(function() {

src/jquery.fancytree.js

@@ -4017,7 +4017,7 @@ $.extend(Fancytree.prototype,
 		// flag defaults to true
 		flag = (flag !== false);
 
-		node.debug("nodeSetSelected(" + flag + ")", ctx);
+		// node.debug("nodeSetSelected(" + flag + ")", ctx);
 		if( node.unselectable){
 			return;
 		}

src/jquery.fancytree.themeroller.js

@@ -27,15 +27,20 @@ $.ui.fancytree.registerExtension({
 	version: "@VERSION",
 	// Default options for this extension.
 	options: {
-		activeClass: "ui-state-active",
-		foccusClass: "ui-state-focus",
-		hoverClass: "ui-state-hover",
-		selectedClass: "ui-state-highlight"
+		activeClass: "ui-state-active",      // Class added to active node
+		// activeClass: "ui-state-highlight",
+		addClass: "ui-corner-all",           // Class added to all nodes
+		focusClass: "ui-state-focus",        // Class added to focused node
+		hoverClass: "ui-state-hover",        // Class added to hovered node
+		selectedClass: "ui-state-highlight"  // Class added to selected nodes
+		// selectedClass: "ui-state-active"
 	},
 
 	treeInit: function(ctx){
+		var $el = ctx.widget.element,
+			opts = ctx.options.themeroller;
+
 		this._superApply(arguments);
-		var $el = ctx.widget.element;
 
 		if($el[0].nodeName === "TABLE"){
 			$el.addClass("ui-widget ui-corner-all");
@@ -48,17 +53,21 @@ $.ui.fancytree.registerExtension({
 		$el.delegate(".fancytree-node", "mouseenter mouseleave", function(event){
 			var node = $.ui.fancytree.getNode(event.target),
 				flag = (event.type === "mouseenter");
-			node.debug("hover: " + flag);
-			$(node.tr ? node.tr : node.span).toggleClass("ui-state-hover ui-corner-all", flag);
+
+			$(node.tr ? node.tr : node.span)
+				.toggleClass(opts.hoverClass + " " + opts.addClass, flag);
 		});
 	},
 	treeDestroy: function(ctx){
 		this._superApply(arguments);
 		ctx.widget.element.removeClass("ui-widget ui-widget-content ui-corner-all");
 	},
 	nodeRenderStatus: function(ctx){
-		var node = ctx.node,
-			$el = $(node.tr ? node.tr : node.span);
+		var classes = {},
+			node = ctx.node,
+			$el = $(node.tr ? node.tr : node.span),
+			opts = ctx.options.themeroller;
+
 		this._superApply(arguments);
 /*
 		.ui-state-highlight: Class to be applied to highlighted or selected elements. Applies "highlight" container styles to an element and its child text, links, and icons.
@@ -70,9 +79,20 @@ $.ui.fancytree.registerExtension({
 		.ui-state-focus: Class to be applied on keyboard focus to clickable button-like elements. Applies "clickable hover" container styles to an element and its child text, links, and icons.
 		.ui-state-active: Class to be applied on mousedown to clickable button-like elements. Applies "clickable active" container styles to an element and its child text, links, and icons.
 */
-		$el.toggleClass("ui-state-active", node.isActive());
-		$el.toggleClass("ui-state-focus", node.hasFocus());
-		$el.toggleClass("ui-state-highlight", node.isSelected());
+		// Set ui-state-* class (handle the case that the same class is assigned
+		// to different states)
+		classes[opts.activeClass] = false;
+		classes[opts.focusClass] = false;
+		classes[opts.selectedClass] = false;
+		if( node.isActive() ) { classes[opts.activeClass] = true; }
+		if( node.hasFocus() ) { classes[opts.focusClass]  = true; }
+		// activeClass takes precedence before selectedClass:
+		if( node.isSelected() && !node.isActive() ) { classes[opts.selectedClass]  = true; }
+		$el.toggleClass(opts.activeClass, classes[opts.activeClass]);
+		$el.toggleClass(opts.focusClass, classes[opts.focusClass]);
+		$el.toggleClass(opts.selectedClass, classes[opts.selectedClass]);
+		// Additional classes (e.g. 'ui-corner-all')
+		$el.addClass(opts.addClass);
 	}
 });
 }(jQuery, window, document));