var ElementCheckboxTree = (function () { var checkboxTree = function() { this.initialize.apply(this, arguments); }; checkboxTree.defaultOptions = { elementId: undefined, treeId: undefined, toggleChildren: true, toggleDialog: { message: '%action% all child items?', buttonNo: 'Just %action% this item', buttonYes: '%action% all child items', placement: 'right' } }; checkboxTree.prototype = { initialize: function (options) { var that = this; this.options = $.extend({}, checkboxTree.defaultOptions, options); if (this.options.treeId == undefined) { this.options.treeId = this.options.elementId + '-tree'; } this.element = $('#' + this.options.elementId); if (this.element.size()) { this.links = $('[data-tree-action]', this.element); if (this.links.size()) { $(this.links).bind('click.checkboxTree', function () { that.onLinkClick.apply(that, arguments); }); } if (this.options.toggleChildren) { this.checkbokses = $('input[type=checkbox]', this.element); if (this.checkbokses.size()) { $(this.checkbokses).bind('change.checkboxTree', function () { that.onCheckboxChange.apply(that, arguments); }); } } } return this; }, onLinkClick: function (e) { e.preventDefault(); var target = $(e.currentTarget); var action = $(target).data('tree-action'); var tree = $('#' + this.options.treeId); switch (action) { case 'checkAll': this.element.find(':checkbox').prop('checked', true); break; case 'uncheckAll': this.element.find(':checkbox').prop('checked', false); break; case 'expandAll': $(tree).data('toggler').apply($('div.hitarea', tree).filter(function() { return $(this).parent('.expandable').length; })); break; case 'collapseAll': $(tree).data('toggler').apply($('div.hitarea', tree).filter(function() { return $(this).parent('.collapsable').length; })); break; } return this; }, onCheckboxChange: function (e) { $('.toggle-children .btn-cancel').click(); var that = this; var target = $(e.currentTarget); var value = target.prop('checked'); var li = $(target).closest('li'); if ($('ul', li).size()) { var label = $(target).closest('label'); var title = this.getDialogMessage(value, 'message'); var content = '
' + ' ' + '' + '
'; label.popover({html: true, placement: this.options.toggleDialog.placement, trigger: 'manual', title: title, content: content}); label.popover('show'); $('.toggle-children .btn-cancel').bind('click.checkboxTree', function (e) { e.preventDefault(); $(label).popover('destroy'); }).removeAttr('disabled'); $('.toggle-children .btn-submit').bind('click.checkboxTree', function (e) { e.preventDefault(); that.toggleAll.apply(that, [li]); $(label).popover('destroy'); }).removeAttr('disabled'); } }, toggleAll: function (li) { var elements = $('input[type=checkbox]', li); var value = $(elements).first().prop('checked'); $(elements).prop('checked', value); }, getDialogMessage: function (value, key) { var action = 'check'; if (!value) { action = 'uncheck'; } var message = this.options.toggleDialog[key]; message = message.replace(/%action%/gi, action); var first = message.charAt(0).toUpperCase(); message = first + message.substr(1, message.length - 1); return message; } }; return checkboxTree; })();