You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
185 lines
5.9 KiB
185 lines
5.9 KiB
// Extending Fancytree |
|
// =================== |
|
// |
|
// See also the [live demo](http://wwwendt.de/tech/fancytree/demo/sample-ext-childcounter.html) of this code. |
|
// |
|
// Every extension should have a comment header containing some information |
|
// about the author, copyright and licensing. Also a pointer to the latest |
|
// source code. |
|
// Prefix with `/*!` so the comment is not removed by the minifier. |
|
|
|
/*! |
|
* jquery.fancytree.childcounter.js |
|
* |
|
* Add a child counter bubble to tree nodes. |
|
* (Extension module for jquery.fancytree.js: https://github.com/mar10/fancytree/) |
|
* |
|
* Copyright (c) 2014, Martin Wendt (http://wwWendt.de) |
|
* |
|
* Released under the MIT license |
|
* https://github.com/mar10/fancytree/wiki/LicenseInfo |
|
* |
|
* @version @VERSION |
|
* @date @DATE |
|
*/ |
|
|
|
// To keep the global namespace clean, we wrap everything in a closure |
|
|
|
;(function($, undefined) { |
|
|
|
// Consider to use [strict mode](http://ejohn.org/blog/ecmascript-5-strict-mode-json-and-more/) |
|
"use strict"; |
|
|
|
// The [coding guidelines](http://contribute.jquery.org/style-guide/js/) |
|
// require jshint compliance. |
|
// But for this sample, we want to allow unused variables for demonstration purpose. |
|
|
|
/*jshint unused:false */ |
|
|
|
|
|
// Adding methods |
|
// -------------- |
|
|
|
// New member functions can be added to the `Fancytree` class. |
|
// This function will be available for every tree instance. |
|
// |
|
// var tree = $("#tree").fancytree("getTree"); |
|
// tree.countSelected(false); |
|
|
|
$.ui.fancytree._FancytreeClass.prototype.countSelected = function(topOnly){ |
|
var tree = this, |
|
treeOptions = tree.options; |
|
return tree.getSelectedNodes(topOnly).length; |
|
}; |
|
|
|
|
|
// The `FancytreeNode` class can also be easily extended. This would be called |
|
// like |
|
// |
|
// node.toUpper(); |
|
|
|
$.ui.fancytree._FancytreeNodeClass.prototype.toUpper = function(){ |
|
var node = this; |
|
return node.setTitle(node.title.toUpperCase()); |
|
}; |
|
|
|
|
|
// Finally, we can extend the widget API and create functions that are called |
|
// like so: |
|
// |
|
// $("#tree").fancytree("widgetMethod1", "abc"); |
|
|
|
$.ui.fancytree.prototype.widgetMethod1 = function(arg1){ |
|
var tree = this.tree; |
|
return arg1; |
|
}; |
|
|
|
|
|
// Register a Fancytree extension |
|
// ------------------------------ |
|
// A full blown extension, extension is available for all trees and can be |
|
// enabled like so (see also the [live demo](http://wwwendt.de/tech/fancytree/demo/sample-ext-childcounter.html)): |
|
// |
|
// <script src="../src/jquery.fancytree.js" type="text/javascript"></script> |
|
// <script src="../src/jquery.fancytree.childcounter.js" type="text/javascript"></script> |
|
// ... |
|
// |
|
// $("#tree").fancytree({ |
|
// extensions: ["childcounter"], |
|
// childcounter: { |
|
// hideExpanded: true |
|
// }, |
|
// ... |
|
// }); |
|
// |
|
|
|
|
|
/* 'childcounter' extension */ |
|
$.ui.fancytree.registerExtension({ |
|
// Every extension must be registered by a unique name. |
|
name: "childcounter", |
|
// Version information should be compliant with [semver](http://semver.org) |
|
version: "1.0.0", |
|
|
|
// Extension specific options and their defaults. |
|
// This options will be available as `tree.options.childcounter.hideExpanded` |
|
|
|
options: { |
|
deep: true, |
|
hideZeros: true, |
|
hideExpanded: false |
|
}, |
|
|
|
// Attributes other than `options` (or functions) can be defined here, and |
|
// will be added to the tree.ext.EXTNAME namespace, in this case `tree.ext.childcounter.foo`. |
|
// They can also be accessed as `this._local.foo` from within the extension |
|
// methods. |
|
foo: 42, |
|
|
|
// Local functions are prefixed with an underscore '_'. |
|
// Callable as `this._local._appendCounter()`. |
|
|
|
_appendCounter: function(bar){ |
|
var tree = this; |
|
}, |
|
|
|
// **Override virtual methods for this extension.** |
|
// |
|
// Fancytree implements a number of 'hook methods', prefixed by 'node...' or 'tree...'. |
|
// with a `ctx` argument (see [EventData](http://www.wwwendt.de/tech/fancytree/doc/jsdoc/global.html#EventData) |
|
// for details) and an extended calling context:<br> |
|
// `this` : the Fancytree instance<br> |
|
// `this._local`: the namespace that contains extension attributes and private methods (same as this.ext.EXTNAME)<br> |
|
// `this._super`: the virtual function that was overridden (member of previous extension or Fancytree) |
|
// |
|
// See also the [complete list of available hook functions](http://www.wwwendt.de/tech/fancytree/doc/jsdoc/Fancytree_Hooks.html). |
|
|
|
/* Init */ |
|
// `treeInit` is triggered when a tree is initalized. We can set up classes or |
|
// bind event handlers here... |
|
treeInit: function(ctx){ |
|
var tree = this, // same as ctx.tree, |
|
opts = ctx.options, |
|
extOpts = ctx.options.childcounter; |
|
// Optionally check for dependencies with other extensions |
|
/* this._requireExtension("glyph", false, false); */ |
|
// Call the base implementation |
|
this._super(ctx); |
|
// Add a class to the tree container |
|
this.$container.addClass("fancytree-ext-childcounter"); |
|
}, |
|
|
|
// Destroy this tree instance (we only call the default implementation, so |
|
// this method could as well be omitted). |
|
|
|
treeDestroy: function(ctx){ |
|
this._super(ctx); |
|
}, |
|
|
|
// Overload the `renderTitle` hook, to append a counter badge |
|
nodeRenderTitle: function(ctx, title) { |
|
var node = ctx.node, |
|
extOpts = ctx.options.childcounter, |
|
count = (node.data.childCounter == null) ? node.countChildren(extOpts.deep) : +node.data.childCounter; |
|
// Let the base implementation render the title |
|
this._super(ctx, title); |
|
// Append a counter badge |
|
if( (count || ! extOpts.hideZeros) && (!node.isExpanded() || !extOpts.hideExpanded) ){ |
|
$("span.fancytree-icon", node.span).parent().append($("<span class='fancytree-childcounter'/>").text(count)); |
|
} |
|
}, |
|
// Overload the `setExpanded` hook, so the counters are updated |
|
nodeSetExpanded: function(ctx, flag, opts) { |
|
var tree = ctx.tree, |
|
node = ctx.node; |
|
// Let the base implementation expand/collapse the node, then redraw the title |
|
// after the animation has finished |
|
return this._super(ctx, flag, opts).always(function(){ |
|
tree.nodeRenderTitle(ctx); |
|
}); |
|
} |
|
|
|
// End of extension definition |
|
}); |
|
// End of namespace closure |
|
}(jQuery));
|
|
|