causeway-standard-theme/causeway/js/components/tree-list.js

(function(window, $) {
  'use strict';

  //  Tree List

  window.Causeway.treeList = {};
  window.Causeway.treeList.elements = function (el) {
    return $(el);
  };
  window.Causeway.treeList.addContentWrapper = function (el) {
    el.append('<div class="tree-list-content">');
    window.Causeway.treeList.treeElements = $('.tree-list-content', el);
  };
  window.Causeway.treeList.getElementsForButtons = function (el) {
    if (el.data('treelist-buttons')) {
      return el;
    }
    return false;
  };
  window.Causeway.treeList.addNoChildrenClass = function (el) {
    var lastNodeParent = $('ul:has(>li.no-children)', el);
    lastNodeParent.each(function () {
      var lis = $('li', $(this)).length,
        lisNo = $('li.no-children', $(this)).length;
      if (lis === lisNo) {
        $(this).addClass('no-children');
      }
      if(lis > 0) {
        $('>li', $(this)).addClass('has-sibling');
      }
    });
  };
  window.Causeway.treeList.addPartialSelection = function(el) {
    var noChildULs = $('ul.no-children', el);

    // Add partial checkbox
    noChildULs.each(function() {
      var numOfChild = $('li.no-children', $(this)).length,
        numOfCheckedInputs = $('input[type=checkbox]:checked', $(this)).length;

      if(numOfCheckedInputs < numOfChild && numOfCheckedInputs > 0) {
        $(this).removeClass('all').addClass('partial');
        var partial = $(this).parents('li.jqtree_common').has('.partial');
        $('>.jqtree-element>.form-group.checkbox', partial).addClass('partial');
      } else if (numOfCheckedInputs === numOfChild && numOfCheckedInputs > 0) {

        $(this).removeClass('partial').addClass('all');
        var allTill = $(this).parentsUntil($('ul.jqtree-tree'), '.has-sibling');
        var all = allTill.has('.all');
        var partial1 = $(this).parents('li.jqtree_common').has('.partial');
        $('>.jqtree-element>.form-group.checkbox', partial1).removeClass('partial');
        $('>.jqtree-element>.form-group.checkbox>input[type=checkbox]', all).prop('checked','checked');
        $('>.jqtree-element>.form-group.checkbox>label', all).addClass('checked');

        var parentSiblings = allTill.nextAll(),
          setFlag = true;
        parentSiblings.each(function() {
          setFlag = $('>.jqtree-element>.form-group.checkbox > input', $(this)).is(':checked');
          if(!setFlag) {
            return false;
          }
        });

        if(!setFlag) {
          $('>.jqtree-element>.form-group.checkbox', (allTill.parent()).parent('li.jqtree_common')).addClass('partial');
        }
      }

    });

    var childUls = ($('li.no-children', el)).parent().not('.no-children');
    childUls.each(function() {
      var child = $('>li', $(this)),
        numOfChild = child.length,
        numOfCheckedInputs = $('input[type=checkbox]:checked', child).length;

      if (numOfCheckedInputs < numOfChild && numOfCheckedInputs > 0) {
        $('>.jqtree-element>.form-group.checkbox', $(this).parent('li.jqtree_common')).addClass('partial');
      }
    });
  };
  window.Causeway.treeList.init = function (elements, data, options) {
    var $this = window.Causeway.treeList.elements(elements);
    var optionsParameter = typeof options !== 'undefined' ? options : {};

    if ($this.length === 0) {
      return;
    }

    var Options = {
      data: data,
      autoOpen: typeof optionsParameter.autoOpen !== 'undefined' ? optionsParameter.autoOpen : false,
      autoEscape: typeof optionsParameter.autoEscape !== 'undefined' ? optionsParameter.autoEscape : false,
      selectable: typeof optionsParameter.selectable !== 'undefined' ? optionsParameter.selectable : false,
      useContextMenu: typeof optionsParameter.useContextMenu !== 'undefined' ? optionsParameter.useContextMenu : false,
      closedIcon: typeof optionsParameter.closedIcon !== 'undefined' ? optionsParameter.closedIcon : '',
      openedIcon: typeof optionsParameter.openedIcon !== 'undefined' ? optionsParameter.openedIcon : '',
      onCreateLi: function(node, $li) {

        var createLi = function (node, $li) {
          var jqTreeElement = $li.find('.jqtree-element'),
            selectedNode = node.selected || node.parent.selected,
            checked = '',
            labelClass = '';

          if (selectedNode) {
            node.selected = true;
            checked = 'checked=\'checked\'';
            labelClass = 'class=\'checked\'';
          }

          jqTreeElement.prepend(
            '<div class=\'form-group checkbox no-label\'>' +
            '<input type=\'checkbox\' class=\'value hidden-checkbox\' data-node-id=\'' + node.id +'\' id=\''+ node.id +'\'' + checked +'>' +
            '<label for=\''+ node.id +'\'' + labelClass + '>' +
            '<span class=\'checkbox-icon\'></span>' +
            '</label>' +
            '</div>'
          );
          $('.jqtree-title', jqTreeElement).wrapInner('<label for=\''+ node.id +'\'>');

          if (!$li.hasClass('jqtree-folder')) {
            $li.addClass('no-children');
          }
        };

        if(typeof optionsParameter.onCreateLi !== 'undefined') {
          createLi(node, $li);
          optionsParameter.onCreateLi(node, $li);
        } else {
          createLi(node, $li);
        }
      }
    };

    //Add content wrapper
    window.Causeway.treeList.addContentWrapper($this);

    //Initialize the tree list
    window.Causeway.treeList.treeElements.tree(Options);

    // Add class to ul that has no children
    window.Causeway.treeList.addNoChildrenClass($this);

    // Add buttons
    if (window.Causeway.treeList.getElementsForButtons($this)) {
      $this.append(
        '<div class=\'tree-list-buttons\'>' +
        '<button type=\'button\' class=\'btn btn-text show-selected\'>Show Selected</button>' +
        '<button type=\'button\' class=\'btn btn-default\'>Show All</button>' +
        '</div>'
      );
    }

    var noChildULs = $('ul.no-children', $this),
      checkedInputs = $('input[type=checkbox]:checked', noChildULs);

    // Open the selected node
    if(!Options.autoOpen){
      checkedInputs.parents('ul.no-children').first().prev('.jqtree-element').find('.jqtree-toggler').trigger('click');
    }

    // Add partial checkbox
    window.Causeway.treeList.addPartialSelection($this);
  };
  window.Causeway.treeList.toJSon = function (id) {
    return $(id + ' > .tree-list-content').tree('toJson');
  };

// Handlers for buttons
  $(document).on('click', '.tree-list-buttons button', function () {
    var $this = $(this);
    var unchecked = $this.parent().prev('.tree-list-content').find('li.no-children input[type=checkbox]').not(':checked'),
      buttons = $('.tree-list-buttons button', $(this).parents('.tree-list'));

    if ($this.hasClass('show-selected')) {
      unchecked.parents('li.no-children').hide();
    } else {
      unchecked.parents('li.no-children').show();
    }

    buttons.removeClass('btn-default').addClass('btn-text');
    $(this).removeClass('btn-text').addClass('btn-default');
  });

// Handlers for checkboxes
  $(document).on('change partial', '.form-group.checkbox input[type=checkbox]', function () {
    var $this = $(this),
      $thisTree = $this.parents('.tree-list-content'),
      $thisNode = $thisTree.tree('getNodeById', $this.attr('id')),

      thisFormGroup = $($thisNode.element.firstChild.firstChild),
      thisLi = $($thisNode.element),
      thisCheckbox = thisFormGroup.children('input[type=checkbox]'),
      thisLabel = thisCheckbox.next('label'),

      thisParentLi, parentLiFormGroup, parentLiCheckbox, parentLiLabel,
      thisChildLi, childLiFormGroup, childLiCheckbox, childLiLabel,

      sibLingCheckboxes, siblingChecked, numberOfSibCheckboxes, numberOfSibChecked, $parentNode;


    if (typeof $thisNode.parent.element !== 'undefined') {
      thisParentLi = $($thisNode.parent.element);
      parentLiFormGroup = thisParentLi.children('.jqtree-element').children('.form-group.checkbox');
      parentLiCheckbox = parentLiFormGroup.children('input[type=checkbox]');
      parentLiLabel = parentLiCheckbox.next('label');

      sibLingCheckboxes = thisParentLi.children('ul').children('li').children('div').find('input[type=checkbox]');
      siblingChecked = sibLingCheckboxes.filter(':checked');
      numberOfSibCheckboxes = sibLingCheckboxes.length;
      numberOfSibChecked = siblingChecked.length;
      $parentNode = $thisTree.tree('getNodeById', parentLiCheckbox.attr('id'));
    }

    if (thisLi.children('ul').length > 0) {
      thisChildLi = thisLi.children('ul').find('li');
      childLiFormGroup = thisChildLi.children('.jqtree-element').children('.form-group.checkbox');
      childLiCheckbox = childLiFormGroup.children('input[type=checkbox]');
      childLiLabel = childLiCheckbox.next('label');
    }

    if (!thisLi.hasClass('no-children')) {
      if ($this.is(':checked')) {
        thisFormGroup.removeClass('partial');
        thisCheckbox.prop('checked', 'checked');
        thisLabel.addClass('checked');
        $thisNode.selected = true;

        if (typeof childLiCheckbox !== 'undefined' && (typeof childLiCheckbox !== 'undefined' ? childLiCheckbox.length > 0 : false)) {
          childLiCheckbox.prop('checked', 'checked');
          childLiFormGroup.removeClass('partial');
          childLiLabel.addClass('checked');
          childLiCheckbox.each(function (i) {
            var $childNode = $thisTree.tree('getNodeById', childLiCheckbox[i].id);
            $childNode.selected = true;
          });
        }
      } else if (!$this.is(':checked') && !thisFormGroup.hasClass('partial')) {
        thisCheckbox.removeAttr('checked');
        thisLabel.removeClass('checked');
        $thisNode.selected = false;
        if (typeof childLiCheckbox !== 'undefined' && (typeof childLiCheckbox !== 'undefined' ? childLiCheckbox.length > 0 : false)) {
          childLiCheckbox.removeAttr('checked', 'checked');
          childLiLabel.removeClass('checked');
          childLiCheckbox.each(function (i) {
            var $childNode = $thisTree.tree('getNodeById', childLiCheckbox[i].id);
            $childNode.selected = false;
          });
        }
      }
    } else if (thisLi.hasClass('no-children')) {
      if ($this.is(':checked')) {
        $thisNode.selected = true;
      } else if (!$this.is(':checked')) {
        $thisNode.selected = false;
      }
    }

    if (numberOfSibChecked === numberOfSibCheckboxes && numberOfSibChecked > 0) {
      parentLiFormGroup.removeClass('partial');
      parentLiCheckbox.prop('checked', 'checked');
      parentLiLabel.addClass('checked');
      $parentNode.selected = true;
    } else if ((numberOfSibChecked < numberOfSibCheckboxes && numberOfSibChecked > 0)) {
      parentLiFormGroup.addClass('partial');
      parentLiCheckbox.removeAttr('checked');
      parentLiLabel.removeClass('checked');
      $parentNode.selected = false;
    } else if (numberOfSibChecked === 0 && $this.parent('.form-group').hasClass('partial')) {
      parentLiFormGroup.addClass('partial');
      parentLiCheckbox.removeAttr('checked');
      parentLiLabel.removeClass('checked');
      $parentNode.selected = false;
    } else if (numberOfSibChecked === 0) {
      parentLiFormGroup.removeClass('partial');
      parentLiCheckbox.removeAttr('checked');
      parentLiLabel.removeClass('checked');
      $parentNode.selected = false;
    }

    if (typeof parentLiCheckbox !== 'undefined') {
      parentLiCheckbox.trigger('partial');
    }

  });

}(window, jQuery));