+++ /dev/null
-(function($){
- $.fn.bonsai = function(options) {
- var args = arguments;
- return this.each(function() {
- var bonsai = $(this).data('bonsai');
- if (!bonsai) {
- bonsai = new Bonsai(this, options);
- $(this).data('bonsai', bonsai);
- }
- if (typeof options == 'string') {
- var method = options;
- bonsai[method].apply(bonsai, [].slice.call(args, 1));
- }
- });
- };
- $.bonsai = {};
- $.bonsai.defaults = {
- expandAll: false, // boolean expands all items
- expand: null, // function to expand an item
- collapse: null, // function to collapse an item
- checkboxes: false, // requires jquery.qubit
- // createCheckboxes: creates checkboxes for each list item.
- //
- // The name and value for the checkboxes can be declared in the
- // markup using `data-name` and `data-value`.
- //
- // The name is inherited from parent items if not specified.
- //
- // Checked state can be indicated using `data-checked`.
- createCheckboxes: false,
- // handleDuplicateCheckboxes: adds onChange bindings to update
- // any other checkboxes that have the same value.
- handleDuplicateCheckboxes: false,
- selectAllExclude: null
- };
- var Bonsai = function(el, options) {
- var self = this;
- options = options || {};
- this.options = $.extend({}, $.bonsai.defaults, options);
- this.el = $(el).addClass('bonsai').data('bonsai', this);
- this.update();
- if (this.isRootNode()) {
- if (this.options.handleDuplicateCheckboxes) this.handleDuplicates();
- if (this.options.checkboxes) this.el.qubit(this.options);
- if (this.options.addExpandAll) this.addExpandAllLink();
- if (this.options.addSelectAll) this.addSelectAllLink();
- this.el.on('click', '.thumb', function(ev) {
- self.toggle($(ev.currentTarget).closest('li'));
- });
- }
- if (this.options.expandAll) this.expandAll();
- };
- Bonsai.prototype = {
- isRootNode: function() {
- return this.options.scope == this.el;
- },
- toggle: function(listItem) {
- if (!$(listItem).hasClass('expanded')) {
- this.expand(listItem);
- }
- else {
- this.collapse(listItem);
- }
- },
- expand: function(listItem) {
- this.setExpanded(listItem, true);
- },
- collapse: function(listItem) {
- this.setExpanded(listItem, false);
- },
- setExpanded: function(listItem, expanded) {
- listItem = $(listItem);
- if (listItem.length > 1) {
- var self = this;
- listItem.each(function() {
- self.setExpanded(this, expanded);
- });
- return;
- }
- if (expanded) {
- if (!listItem.data('subList')) return;
- listItem = $(listItem).addClass('expanded')
- .removeClass('collapsed');
- $(listItem.data('subList')).css('height', 'auto');
- }
- else {
- listItem = $(listItem).addClass('collapsed')
- .removeClass('expanded');
- $(listItem.data('subList')).height(0);
- }
- },
- expandAll: function() {
- this.expand(this.el.find('li'));
- },
- collapseAll: function() {
- this.collapse(this.el.find('li'));
- },
- update: function() {
- var self = this;
- // store the scope in the options for child nodes
- if (!this.options.scope) {
- this.options.scope = this.el;
- }
- // look for a nested list (if any)
- this.el.children().each(function() {
- var item = $(this);
- if (self.options.createCheckboxes) self.insertCheckbox(item);
- // insert a thumb if it doesn't already exist
- if (item.children().filter('.thumb').length == 0) {
- var thumb = $('<div class="thumb"></div>');
- item.prepend(thumb);
- }
- var subLists = item.children().filter('ol, ul');
- item.toggleClass('has-children', subLists.find('li').length > 0);
- // if there is a child list
- subLists.each(function() {
- // that's not empty
- if ($('li', this).length == 0) {
- return;
- }
- // then this el has children
- item.data('subList', this);
- // collapse the nested list
- if (item.hasClass('expanded')) {
- self.expand(item);
- }
- else {
- self.collapse(item);
- }
- // handle any deeper nested lists
- var exists = !!$(this).data('bonsai');
- $(this).bonsai(exists ? 'update' : self.options);
- });
- });
- this.expand = this.options.expand || this.expand;
- this.collapse = this.options.collapse || this.collapse;
- },
- insertCheckbox: function(listItem) {
- if (listItem.find('> input[type=checkbox]').length) return;
- var id = this.generateId(listItem),
- checkbox = $('<input type="checkbox" name="'
- + this.getCheckboxName(listItem) + '" id="' + id + '" /> '
- ),
- children = listItem.children(),
- // get the first text node for the label
- text = listItem.contents().filter(function() {
- return this.nodeType == 3;
- }).first();
- checkbox.val(listItem.data('value'));
- checkbox.prop('checked', listItem.data('checked'))
- children.remove();
- listItem.append(checkbox)
- .append(
- $('<label for="' + id + '">').append(text ? text : children.first())
- )
- .append(text ? children : children.slice(1));
- },
- handleDuplicates: function() {
- var self = this;
- self.el.on('change', 'input[type=checkbox]', function(ev) {
- var checkbox = $(ev.target);
- if (!checkbox.val()) return;
- // select all duplicate checkboxes that need to be updated
- var selector = 'input[type=checkbox]'
- + '[value="' + checkbox.val() + '"]'
- + '[name="' + checkbox.attr('name') + '"]'
- + (checkbox.prop('checked') ? ':not(:checked)' : ':checked');
- self.el.find(selector).prop({
- checked: checkbox.prop('checked'),
- indeterminate: checkbox.prop('indeterminate')
- }).trigger('change');
- });
- },
- idPrefix: 'checkbox-',
- generateId: function(listItem) {
- do {
- var id = this.idPrefix + Bonsai.uniqueId++;
- }
- while($('#' + id).length > 0);
- return id;
- },
- getCheckboxName: function(listItem) {
- return listItem.data('name')
- || listItem.parents().filter('[data-name]').data('name');
- },
- addExpandAllLink: function() {
- var self = this;
- $('<div class="expand-all">')
- .append($('<a class="all">Expand all</a>')
- .on('click', function() {
- self.expandAll();
- })
- )
- .append('<i class="separator"></i>')
- .append($('<a class="none">Collapse all</a>')
- .on('click', function() {
- self.collapseAll();
- })
- )
- .insertBefore(this.el);
- },
- addSelectAllLink: function() {
- var scope = this.options.scope,
- self = this;
- function getCheckboxes() {
- // return all checkboxes that are not in hidden list items
- return scope.find('li')
- .filter(self.options.selectAllExclude || function() {
- return $(this).css('display') != 'none';
- })
- .find('> input[type=checkbox]');
- }
- $('<div class="check-all">')
- .append($('<a class="all">Select all</a>')
- .css('cursor', 'pointer')
- .on('click', function() {
- getCheckboxes().prop({
- checked: true,
- indeterminate: false
- });
- })
- )
- .append('<i class="separator"></i>')
- .append($('<a class="none">Select none</a>')
- .css('cursor', 'pointer')
- .on('click', function() {
- getCheckboxes().prop({
- checked: false,
- indeterminate: false
- });
- })
- )
- .insertAfter(this.el);
- },
- setCheckedValues: function(values) {
- var all = this.options.scope.find('input[type=checkbox]');
- $.each(values, function(key, value) {
- all.filter('[value="' + value + '"]')
- .prop('checked', true)
- .trigger('change');
- });
- }
- };
- $.extend(Bonsai, {
- uniqueId: 0
- });
-}(jQuery));
projects / RRRRHHHH_Artifacts / blobdiff