3 * https://github.com/ExactTarget/fuelux
\r
5 * Copyright (c) 2012 ExactTarget
\r
6 * Licensed under the MIT license.
\r
9 define(['require','jquery'],function(require) {
\r
11 var $ = require('jquery');
\r
14 // TREE CONSTRUCTOR AND PROTOTYPE
\r
16 var Tree = function (element, options) {
\r
17 this.$element = $(element);
\r
18 this.options = $.extend({}, $.fn.tree.defaults, options);
\r
20 this.$element.on('click', '.tree-item', $.proxy( function(ev) { this.selectItem(ev.currentTarget); } ,this));
\r
21 this.$element.on('click', '.tree-folder-header', $.proxy( function(ev) { this.selectFolder(ev.currentTarget); }, this));
\r
29 render: function () {
\r
30 this.populate(this.$element);
\r
33 populate: function ($el) {
\r
35 var loader = $el.parent().find('.tree-loader:eq(0)');
\r
38 this.options.dataSource.data($el.data(), function (items) {
\r
41 $.each( items.data, function(index, value) {
\r
44 if(value.type === "folder") {
\r
45 $entity = self.$element.find('.tree-folder:eq(0)').clone().show();
\r
46 $entity.find('.tree-folder-name').html(value.name);
\r
47 $entity.find('.tree-loader').html(self.options.loadingHTML);
\r
48 $entity.find('.tree-folder-header').data(value);
\r
49 } else if (value.type === "item") {
\r
50 $entity = self.$element.find('.tree-item:eq(0)').clone().show();
\r
51 $entity.find('.tree-item-name').html(value.name);
\r
52 $entity.data(value);
\r
55 if($el.hasClass('tree-folder-header')) {
\r
56 $el.parent().find('.tree-folder-content:eq(0)').append($entity);
\r
58 $el.append($entity);
\r
62 self.$element.trigger('loaded');
\r
66 selectItem: function (el) {
\r
68 var $all = this.$element.find('.tree-selected');
\r
71 if (this.options.multiSelect) {
\r
72 $.each($all, function(index, value) {
\r
73 var $val = $(value);
\r
74 if($val[0] !== $el[0]) {
\r
75 data.push( $(value).data() );
\r
78 } else if ($all[0] !== $el[0]) {
\r
79 $all.removeClass('tree-selected')
\r
80 .find('i').removeClass('icon-ok').addClass('tree-dot');
\r
81 data.push($el.data());
\r
84 if($el.hasClass('tree-selected')) {
\r
85 $el.removeClass('tree-selected');
\r
86 $el.find('i').removeClass('icon-ok').addClass('tree-dot');
\r
88 $el.addClass ('tree-selected');
\r
89 $el.find('i').removeClass('tree-dot').addClass('icon-ok');
\r
90 if (this.options.multiSelect) {
\r
91 data.push( $el.data() );
\r
96 this.$element.trigger('selected', {info: data});
\r
101 selectFolder: function (el) {
\r
103 var $par = $el.parent();
\r
105 if($el.find('.icon-folder-close').length) {
\r
106 if ($par.find('.tree-folder-content').children().length) {
\r
107 $par.find('.tree-folder-content:eq(0)').show();
\r
109 this.populate( $el );
\r
112 $par.find('.icon-folder-close:eq(0)')
\r
113 .removeClass('icon-folder-close')
\r
114 .addClass('icon-folder-open');
\r
116 this.$element.trigger('opened', $el.data());
\r
118 if(this.options.cacheItems) {
\r
119 $par.find('.tree-folder-content:eq(0)').hide();
\r
121 $par.find('.tree-folder-content:eq(0)').empty();
\r
124 $par.find('.icon-folder-open:eq(0)')
\r
125 .removeClass('icon-folder-open')
\r
126 .addClass('icon-folder-close');
\r
128 this.$element.trigger('closed', $el.data());
\r
132 selectedItems: function () {
\r
133 var $sel = this.$element.find('.tree-selected');
\r
136 $.each($sel, function (index, value) {
\r
137 data.push($(value).data());
\r
144 // TREE PLUGIN DEFINITION
\r
146 $.fn.tree = function (option, value) {
\r
149 var $set = this.each(function () {
\r
150 var $this = $(this);
\r
151 var data = $this.data('tree');
\r
152 var options = typeof option === 'object' && option;
\r
154 if (!data) $this.data('tree', (data = new Tree(this, options)));
\r
155 if (typeof option === 'string') methodReturn = data[option](value);
\r
158 return (methodReturn === undefined) ? $set : methodReturn;
\r
161 $.fn.tree.defaults = {
\r
162 multiSelect: false,
\r
163 loadingHTML: '<div>Loading...</div>',
\r
167 $.fn.tree.Constructor = Tree;
\r