/*
|
* Fuel UX Spinner
|
* https://github.com/ExactTarget/fuelux
|
* Improved by keenthemes for metronic theme
|
* Copyright (c) 2012 ExactTarget
|
* Licensed under the MIT license.
|
*/
|
|
!function ($) {
|
var Tree = function (element, options) {
|
this.$element = $(element);
|
this.options = $.extend({}, $.fn.tree.defaults, options);
|
|
this.$element.on('click', '.tree-item', $.proxy( function(ev) { this.selectItem(ev.currentTarget); } ,this));
|
this.$element.on('click', '.tree-folder-header', $.proxy( function(ev) { this.selectFolder(ev.currentTarget); }, this));
|
|
this.render();
|
};
|
|
Tree.prototype = {
|
constructor: Tree,
|
|
render: function () {
|
this.populate(this.$element);
|
},
|
|
populate: function ($el) {
|
var self = this;
|
var $parent = $el.parent();
|
var loader = $parent.find('.tree-loader:eq(0)');
|
|
loader.show();
|
this.options.dataSource.data($el.data(), function (items) {
|
loader.hide();
|
|
$.each( items.data, function(index, value) {
|
var $entity;
|
|
if(value.type === "folder") {
|
$entity = self.$element.find('.tree-folder:eq(0)').clone().show();
|
$entity.find('.tree-folder-name').html(value.name);
|
$entity.find('.tree-loader').html(self.options.loadingHTML);
|
$entity.find('.tree-folder-header').data(value);
|
} else if (value.type === "item") {
|
$entity = self.$element.find('.tree-item:eq(0)').clone().show();
|
$entity.find('.tree-item-name').html(value.name);
|
$entity.data(value);
|
}
|
|
// Decorate $entity with data making the element
|
// easily accessable with libraries like jQuery.
|
//
|
// Values are contained within the object returned
|
// for folders and items as dataAttributes:
|
//
|
// {
|
// name: "An Item",
|
// type: 'item',
|
// dataAttributes = {
|
// 'classes': 'required-item red-text',
|
// 'data-parent': parentId,
|
// 'guid': guid
|
// }
|
// };
|
|
var dataAttributes = value.dataAttributes || [];
|
$.each(dataAttributes, function(key, value) {
|
switch (key) {
|
case 'class':
|
case 'classes':
|
case 'className':
|
$entity.addClass(value);
|
break;
|
|
// id, style, data-*
|
default:
|
$entity.attr(key, value);
|
break;
|
}
|
});
|
|
if($el.hasClass('tree-folder-header')) {
|
$parent.find('.tree-folder-content:eq(0)').append($entity);
|
} else {
|
$el.append($entity);
|
}
|
});
|
|
// return newly populated folder
|
self.$element.trigger('loaded', $parent);
|
});
|
},
|
|
selectItem: function (el) {
|
var $el = $(el);
|
var $all = this.$element.find('.tree-selected');
|
var data = [];
|
|
if (this.options.multiSelect) {
|
$.each($all, function(index, value) {
|
var $val = $(value);
|
if($val[0] !== $el[0]) {
|
data.push( $(value).data() );
|
}
|
});
|
} else if ($all[0] !== $el[0]) {
|
$all.removeClass('tree-selected')
|
.find('i').removeClass('fa fa-check').addClass('tree-dot');
|
data.push($el.data());
|
}
|
|
if (this.options.selectable) {
|
var eventType = 'selected';
|
if($el.hasClass('tree-selected')) {
|
eventType = 'unselected';
|
$el.removeClass('tree-selected');
|
$el.find('i').removeClass('fa fa-check').addClass('tree-dot');
|
} else {
|
$el.addClass ('tree-selected');
|
$el.find('i').removeClass('tree-dot').addClass('fa fa-check');
|
if (this.options.multiSelect) {
|
data.push( $el.data() );
|
}
|
}
|
}
|
|
if(data.length) {
|
this.$element.trigger('selected', {info: data});
|
}
|
|
// Return new list of selected items, the item
|
// clicked, and the type of event:
|
$el.trigger('updated', {
|
info: data,
|
item: $el,
|
eventType: eventType
|
});
|
},
|
|
selectFolder: function (el) {
|
var $el = $(el);
|
var $parent = $el.parent();
|
var $treeFolderContent = $parent.find('.tree-folder-content');
|
var $treeFolderContentFirstChild = $treeFolderContent.eq(0);
|
|
var eventType, classToTarget, classToAdd;
|
if ($el.find('.fa.fa-folder').length) {
|
eventType = 'opened';
|
classToTarget = '.fa.fa-folder';
|
classToAdd = 'fa fa-folder-open';
|
|
$treeFolderContentFirstChild.show();
|
if (!$treeFolderContent.children().length) {
|
this.populate($el);
|
}
|
} else {
|
eventType = 'closed';
|
classToTarget = '.fa.fa-folder-open';
|
classToAdd = 'fa fa-folder';
|
|
$treeFolderContentFirstChild.hide();
|
if (!this.options.cacheItems) {
|
$treeFolderContentFirstChild.empty();
|
}
|
}
|
|
$parent.find(classToTarget).eq(0)
|
.removeClass('fa fa-folder fa-folder-open')
|
.addClass(classToAdd);
|
|
this.$element.trigger(eventType, $el.data());
|
},
|
|
selectedItems: function () {
|
var $sel = this.$element.find('.tree-selected');
|
var data = [];
|
|
$.each($sel, function (index, value) {
|
data.push($(value).data());
|
});
|
return data;
|
},
|
|
// collapses open folders
|
collapse: function () {
|
var cacheItems = this.options.cacheItems;
|
|
// find open folders
|
this.$element.find('.fa.fa-folder-open').each(function () {
|
// update icon class
|
var $this = $(this)
|
.removeClass('fa fa-folder fa-folder-open')
|
.addClass('fa fa-folder');
|
|
// "close" or empty folder contents
|
var $parent = $this.parent().parent();
|
var $folder = $parent.children('.tree-folder-content');
|
|
$folder.hide();
|
if (!cacheItems) {
|
$folder.empty();
|
}
|
});
|
}
|
};
|
|
|
// TREE PLUGIN DEFINITION
|
|
$.fn.tree = function (option, value) {
|
var methodReturn;
|
|
var $set = this.each(function () {
|
var $this = $(this);
|
var data = $this.data('tree');
|
var options = typeof option === 'object' && option;
|
|
if (!data) $this.data('tree', (data = new Tree(this, options)));
|
if (typeof option === 'string') methodReturn = data[option](value);
|
});
|
|
return (methodReturn === undefined) ? $set : methodReturn;
|
};
|
|
$.fn.tree.defaults = {
|
selectable: true,
|
multiSelect: false,
|
loadingHTML: '<div>Loading...</div>',
|
cacheItems: true
|
};
|
|
$.fn.tree.Constructor = Tree;
|
}(window.jQuery);
|
