Devices: NodesLearnt table integration with FuelUx Datagrid.

[controller.git] / opendaylight / web / root / src / main / resources / js / fuelux / tree.js

diff --git a/opendaylight/web/root/src/main/resources/js/fuelux/tree.js b/opendaylight/web/root/src/main/resources/js/fuelux/tree.js
new file mode 100755 (executable)
index 0000000..b243719
--- /dev/null
+++ b/opendaylight/web/root/src/main/resources/js/fuelux/tree.js
@@ -0,0 +1,169 @@
+/*\r
+ * Fuel UX Tree\r
+ * https://github.com/ExactTarget/fuelux\r
+ *\r
+ * Copyright (c) 2012 ExactTarget\r
+ * Licensed under the MIT license.\r
+ */\r
+\r
+define(['require','jquery'],function(require) {\r
+\r
+       var $ = require('jquery');\r
+\r
+\r
+       // TREE CONSTRUCTOR AND PROTOTYPE\r
+\r
+       var Tree = function (element, options) {\r
+               this.$element = $(element);\r
+               this.options = $.extend({}, $.fn.tree.defaults, options);\r
+\r
+               this.$element.on('click', '.tree-item', $.proxy( function(ev) { this.selectItem(ev.currentTarget); } ,this));\r
+               this.$element.on('click', '.tree-folder-header', $.proxy( function(ev) { this.selectFolder(ev.currentTarget); }, this));\r
+\r
+               this.render();\r
+       };\r
+\r
+       Tree.prototype = {\r
+               constructor: Tree,\r
+\r
+               render: function () {\r
+                       this.populate(this.$element);\r
+               },\r
+\r
+               populate: function ($el) {\r
+                       var self = this;\r
+                       var loader = $el.parent().find('.tree-loader:eq(0)');\r
+\r
+                       loader.show();\r
+                       this.options.dataSource.data($el.data(), function (items) {\r
+                               loader.hide();\r
+\r
+                               $.each( items.data, function(index, value) {\r
+                                       var $entity;\r
+\r
+                                       if(value.type === "folder") {\r
+                                               $entity = self.$element.find('.tree-folder:eq(0)').clone().show();\r
+                                               $entity.find('.tree-folder-name').html(value.name);\r
+                                               $entity.find('.tree-loader').html(self.options.loadingHTML);\r
+                                               $entity.find('.tree-folder-header').data(value);\r
+                                       } else if (value.type === "item") {\r
+                                               $entity = self.$element.find('.tree-item:eq(0)').clone().show();\r
+                                               $entity.find('.tree-item-name').html(value.name);\r
+                                               $entity.data(value);\r
+                                       }\r
+\r
+                                       if($el.hasClass('tree-folder-header')) {\r
+                                               $el.parent().find('.tree-folder-content:eq(0)').append($entity);\r
+                                       } else {\r
+                                               $el.append($entity);\r
+                                       }\r
+                               });\r
+\r
+                               self.$element.trigger('loaded');\r
+                       });\r
+               },\r
+\r
+               selectItem: function (el) {\r
+                       var $el = $(el);\r
+                       var $all = this.$element.find('.tree-selected');\r
+                       var data = [];\r
+\r
+                       if (this.options.multiSelect) {\r
+                               $.each($all, function(index, value) {\r
+                                       var $val = $(value);\r
+                                       if($val[0] !== $el[0]) {\r
+                                               data.push( $(value).data() );\r
+                                       }\r
+                               });\r
+                       } else if ($all[0] !== $el[0]) {\r
+                               $all.removeClass('tree-selected')\r
+                                       .find('i').removeClass('icon-ok').addClass('tree-dot');\r
+                               data.push($el.data());\r
+                       }\r
+\r
+                       if($el.hasClass('tree-selected')) {\r
+                               $el.removeClass('tree-selected');\r
+                               $el.find('i').removeClass('icon-ok').addClass('tree-dot');\r
+                       } else {\r
+                               $el.addClass ('tree-selected');\r
+                               $el.find('i').removeClass('tree-dot').addClass('icon-ok');\r
+                               if (this.options.multiSelect) {\r
+                                       data.push( $el.data() );\r
+                               }\r
+                       }\r
+\r
+                       if(data.length) {\r
+                               this.$element.trigger('selected', {info: data});\r
+                       }\r
+\r
+               },\r
+\r
+               selectFolder: function (el) {\r
+                       var $el = $(el);\r
+                       var $par = $el.parent();\r
+\r
+                       if($el.find('.icon-folder-close').length) {\r
+                               if ($par.find('.tree-folder-content').children().length) {\r
+                                       $par.find('.tree-folder-content:eq(0)').show();\r
+                               } else {\r
+                                       this.populate( $el );\r
+                               }\r
+\r
+                               $par.find('.icon-folder-close:eq(0)')\r
+                                       .removeClass('icon-folder-close')\r
+                                       .addClass('icon-folder-open');\r
+\r
+                               this.$element.trigger('opened', $el.data());\r
+                       } else {\r
+                               if(this.options.cacheItems) {\r
+                                       $par.find('.tree-folder-content:eq(0)').hide();\r
+                               } else {\r
+                                       $par.find('.tree-folder-content:eq(0)').empty();\r
+                               }\r
+\r
+                               $par.find('.icon-folder-open:eq(0)')\r
+                                       .removeClass('icon-folder-open')\r
+                                       .addClass('icon-folder-close');\r
+\r
+                               this.$element.trigger('closed', $el.data());\r
+                       }\r
+               },\r
+\r
+               selectedItems: function () {\r
+                       var $sel = this.$element.find('.tree-selected');\r
+                       var data = [];\r
+\r
+                       $.each($sel, function (index, value) {\r
+                               data.push($(value).data());\r
+                       });\r
+                       return data;\r
+               }\r
+       };\r
+\r
+\r
+       // TREE PLUGIN DEFINITION\r
+\r
+       $.fn.tree = function (option, value) {\r
+               var methodReturn;\r
+\r
+               var $set = this.each(function () {\r
+                       var $this = $(this);\r
+                       var data = $this.data('tree');\r
+                       var options = typeof option === 'object' && option;\r
+\r
+                       if (!data) $this.data('tree', (data = new Tree(this, options)));\r
+                       if (typeof option === 'string') methodReturn = data[option](value);\r
+               });\r
+\r
+               return (methodReturn === undefined) ? $set : methodReturn;\r
+       };\r
+\r
+       $.fn.tree.defaults = {\r
+               multiSelect: false,\r
+               loadingHTML: '<div>Loading...</div>',\r
+               cacheItems: true\r
+       };\r
+\r
+       $.fn.tree.Constructor = Tree;\r
+\r
+});\r