opendaylight/adsal/web/root/src/main/resources/js/fuelux/tree.js

   1 /*\r
   2  * Fuel UX Tree\r
   3  * https://github.com/ExactTarget/fuelux\r
   4  *\r
   5  * Copyright (c) 2012 ExactTarget\r
   6  * Licensed under the MIT license.\r
   7  */\r
   8 \r
   9 define(['require','jquery'],function(require) {\r
  10 \r
  11         var $ = require('jquery');\r
  12 \r
  13 \r
  14         // TREE CONSTRUCTOR AND PROTOTYPE\r
  15 \r
  16         var Tree = function (element, options) {\r
  17                 this.$element = $(element);\r
  18                 this.options = $.extend({}, $.fn.tree.defaults, options);\r
  19 \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
  22 \r
  23                 this.render();\r
  24         };\r
  25 \r
  26         Tree.prototype = {\r
  27                 constructor: Tree,\r
  28 \r
  29                 render: function () {\r
  30                         this.populate(this.$element);\r
  31                 },\r
  32 \r
  33                 populate: function ($el) {\r
  34                         var self = this;\r
  35                         var loader = $el.parent().find('.tree-loader:eq(0)');\r
  36 \r
  37                         loader.show();\r
  38                         this.options.dataSource.data($el.data(), function (items) {\r
  39                                 loader.hide();\r
  40 \r
  41                                 $.each( items.data, function(index, value) {\r
  42                                         var $entity;\r
  43 \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
  53                                         }\r
  54 \r
  55                                         if($el.hasClass('tree-folder-header')) {\r
  56                                                 $el.parent().find('.tree-folder-content:eq(0)').append($entity);\r
  57                                         } else {\r
  58                                                 $el.append($entity);\r
  59                                         }\r
  60                                 });\r
  61 \r
  62                                 self.$element.trigger('loaded');\r
  63                         });\r
  64                 },\r
  65 \r
  66                 selectItem: function (el) {\r
  67                         var $el = $(el);\r
  68                         var $all = this.$element.find('.tree-selected');\r
  69                         var data = [];\r
  70 \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
  76                                         }\r
  77                                 });\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
  82                         }\r
  83 \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
  87                         } else {\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
  92                                 }\r
  93                         }\r
  94 \r
  95                         if(data.length) {\r
  96                                 this.$element.trigger('selected', {info: data});\r
  97                         }\r
  98 \r
  99                 },\r
 100 \r
 101                 selectFolder: function (el) {\r
 102                         var $el = $(el);\r
 103                         var $par = $el.parent();\r
 104 \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
 108                                 } else {\r
 109                                         this.populate( $el );\r
 110                                 }\r
 111 \r
 112                                 $par.find('.icon-folder-close:eq(0)')\r
 113                                         .removeClass('icon-folder-close')\r
 114                                         .addClass('icon-folder-open');\r
 115 \r
 116                                 this.$element.trigger('opened', $el.data());\r
 117                         } else {\r
 118                                 if(this.options.cacheItems) {\r
 119                                         $par.find('.tree-folder-content:eq(0)').hide();\r
 120                                 } else {\r
 121                                         $par.find('.tree-folder-content:eq(0)').empty();\r
 122                                 }\r
 123 \r
 124                                 $par.find('.icon-folder-open:eq(0)')\r
 125                                         .removeClass('icon-folder-open')\r
 126                                         .addClass('icon-folder-close');\r
 127 \r
 128                                 this.$element.trigger('closed', $el.data());\r
 129                         }\r
 130                 },\r
 131 \r
 132                 selectedItems: function () {\r
 133                         var $sel = this.$element.find('.tree-selected');\r
 134                         var data = [];\r
 135 \r
 136                         $.each($sel, function (index, value) {\r
 137                                 data.push($(value).data());\r
 138                         });\r
 139                         return data;\r
 140                 }\r
 141         };\r
 142 \r
 143 \r
 144         // TREE PLUGIN DEFINITION\r
 145 \r
 146         $.fn.tree = function (option, value) {\r
 147                 var methodReturn;\r
 148 \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
 153 \r
 154                         if (!data) $this.data('tree', (data = new Tree(this, options)));\r
 155                         if (typeof option === 'string') methodReturn = data[option](value);\r
 156                 });\r
 157 \r
 158                 return (methodReturn === undefined) ? $set : methodReturn;\r
 159         };\r
 160 \r
 161         $.fn.tree.defaults = {\r
 162                 multiSelect: false,\r
 163                 loadingHTML: '<div>Loading...</div>',\r
 164                 cacheItems: true\r
 165         };\r
 166 \r
 167         $.fn.tree.Constructor = Tree;\r
 168 \r
 169 });\r