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

   1 /*
   2  * Fuel UX Datagrid
   3  * https://github.com/ExactTarget/fuelux
   4  *
   5  * Copyright (c) 2012 ExactTarget
   6  * Licensed under the MIT license.
   7  */
   8
   9 define(['require','jquery'],function(require) {
  10
  11         var $ = require('jquery');
  12
  13         // Relates to thead .sorted styles in datagrid.less
  14         var SORTED_HEADER_OFFSET = 22;
  15
  16
  17         // DATAGRID CONSTRUCTOR AND PROTOTYPE
  18
  19         var Datagrid = function (element, options) {
  20                 this.$element = $(element);
  21                 this.$thead = this.$element.find('thead');
  22                 this.$tfoot = this.$element.find('tfoot');
  23                 this.$footer = this.$element.find('tfoot th');
  24                 this.$footerchildren = this.$footer.children().show().css('visibility', 'hidden');
  25                 this.$topheader = this.$element.find('thead th');
  26                 this.$searchcontrol = this.$element.find('.datagrid-search');
  27                 this.$filtercontrol = this.$element.find('.filter');
  28                 this.$pagesize = this.$element.find('.grid-pagesize');
  29                 this.$pageinput = this.$element.find('.grid-pager input');
  30                 this.$pagedropdown = this.$element.find('.grid-pager .dropdown-menu');
  31                 this.$prevpagebtn = this.$element.find('.grid-prevpage');
  32                 this.$nextpagebtn = this.$element.find('.grid-nextpage');
  33                 this.$pageslabel = this.$element.find('.grid-pages');
  34                 this.$countlabel = this.$element.find('.grid-count');
  35                 this.$startlabel = this.$element.find('.grid-start');
  36                 this.$endlabel = this.$element.find('.grid-end');
  37
  38                 this.$tbody = $('<tbody>').insertAfter(this.$thead);
  39                 this.$colheader = $('<tr>').appendTo(this.$thead);
  40
  41                 this.options = $.extend(true, {}, $.fn.datagrid.defaults, options);
  42
  43                 // Shim until v3 -- account for FuelUX select or native select for page size:
  44                 if (this.$pagesize.hasClass('select')) {
  45                         this.options.dataOptions.pageSize = parseInt(this.$pagesize.select('selectedItem').value, 10);
  46                 } else {
  47                         this.options.dataOptions.pageSize = parseInt(this.$pagesize.val(), 10);
  48                 }
  49
  50                 // Shim until v3 -- account for older search class:
  51                 if (this.$searchcontrol.length <= 0) {
  52                         this.$searchcontrol = this.$element.find('.search');
  53                 }
  54
  55                 this.columns = this.options.dataSource.columns();
  56
  57                 this.$nextpagebtn.on('click', $.proxy(this.next, this));
  58                 this.$prevpagebtn.on('click', $.proxy(this.previous, this));
  59                 this.$searchcontrol.on('searched cleared', $.proxy(this.searchChanged, this));
  60                 this.$filtercontrol.on('changed', $.proxy(this.filterChanged, this));
  61                 this.$colheader.on('click', 'th', $.proxy(this.headerClicked, this));
  62
  63                 if(this.$pagesize.hasClass('select')) {
  64                         this.$pagesize.on('changed', $.proxy(this.pagesizeChanged, this));
  65                 } else {
  66                         this.$pagesize.on('change', $.proxy(this.pagesizeChanged, this));
  67                 }
  68
  69                 this.$pageinput.on('change', $.proxy(this.pageChanged, this));
  70
  71                 this.renderColumns();
  72
  73                 if (this.options.stretchHeight) this.initStretchHeight();
  74
  75                 this.renderData();
  76         };
  77
  78         Datagrid.prototype = {
  79
  80                 constructor: Datagrid,
  81
  82                 renderColumns: function () {
  83                         var self = this;
  84
  85                         this.$footer.attr('colspan', this.columns.length);
  86                         this.$topheader.attr('colspan', this.columns.length);
  87
  88                         var colHTML = '';
  89
  90                         $.each(this.columns, function (index, column) {
  91                                 colHTML += '<th data-property="' + column.property + '"';
  92                                 if (column.sortable) colHTML += ' class="sortable"';
  93                                 colHTML += '>' + column.label + '</th>';
  94                         });
  95
  96                         self.$colheader.append(colHTML);
  97                 },
  98
  99                 updateColumns: function ($target, direction) {
 100                         this._updateColumns(this.$colheader, $target, direction);
 101
 102                         if (this.$sizingHeader) {
 103                                 this._updateColumns(this.$sizingHeader, this.$sizingHeader.find('th').eq($target.index()), direction);
 104                         }
 105                 },
 106
 107                 _updateColumns: function ($header, $target, direction) {
 108                         var className = (direction === 'asc') ? 'icon-chevron-up' : 'icon-chevron-down';
 109                         $header.find('i.datagrid-sort').remove();
 110                         $header.find('th').removeClass('sorted');
 111                         $('<i>').addClass(className + ' datagrid-sort').appendTo($target);
 112                         $target.addClass('sorted');
 113                 },
 114
 115                 updatePageDropdown: function (data) {
 116                         var pageHTML = '';
 117
 118                         for (var i = 1; i <= data.pages; i++) {
 119                                 pageHTML += '<li><a>' + i + '</a></li>';
 120                         }
 121
 122                         this.$pagedropdown.html(pageHTML);
 123                 },
 124
 125                 updatePageButtons: function (data) {
 126                         if (data.page === 1) {
 127                                 this.$prevpagebtn.attr('disabled', 'disabled');
 128                         } else {
 129                                 this.$prevpagebtn.removeAttr('disabled');
 130                         }
 131
 132                         if (data.page === data.pages) {
 133                                 this.$nextpagebtn.attr('disabled', 'disabled');
 134                         } else {
 135                                 this.$nextpagebtn.removeAttr('disabled');
 136                         }
 137                 },
 138
 139                 renderData: function () {
 140                         var self = this;
 141
 142                         this.$tbody.html(this.placeholderRowHTML(this.options.loadingHTML));
 143
 144                         this.options.dataSource.data(this.options.dataOptions, function (data) {
 145                                 var itemdesc = (data.count === 1) ? self.options.itemText : self.options.itemsText;
 146                                 var rowHTML = '';
 147
 148                                 self.$footerchildren.css('visibility', function () {
 149                                         return (data.count > 0) ? 'visible' : 'hidden';
 150                                 });
 151
 152                                 self.$pageinput.val(data.page);
 153                                 self.$pageslabel.text(data.pages);
 154                                 self.$countlabel.text(data.count + ' ' + itemdesc);
 155                                 self.$startlabel.text(data.start);
 156                                 self.$endlabel.text(data.end);
 157
 158                                 self.updatePageDropdown(data);
 159                                 self.updatePageButtons(data);
 160
 161                                 $.each(data.data, function (index, row) {
 162                                         rowHTML += '<tr>';
 163                                         $.each(self.columns, function (index, column) {
 164                                                 rowHTML += '<td>' + row[column.property] + '</td>';
 165                                         });
 166                                         rowHTML += '</tr>';
 167                                 });
 168
 169                                 if (!rowHTML) rowHTML = self.placeholderRowHTML('0 ' + self.options.itemsText);
 170
 171                                 self.$tbody.html(rowHTML);
 172                                 self.stretchHeight();
 173
 174                                 self.$element.trigger('loaded');
 175                         });
 176
 177                 },
 178
 179                 placeholderRowHTML: function (content) {
 180                         return '<tr><td style="text-align:center;padding:20px;border-bottom:none;" colspan="' +
 181                                 this.columns.length + '">' + content + '</td></tr>';
 182                 },
 183
 184                 headerClicked: function (e) {
 185                         var $target = $(e.target);
 186                         if (!$target.hasClass('sortable')) return;
 187
 188                         var direction = this.options.dataOptions.sortDirection;
 189                         var sort = this.options.dataOptions.sortProperty;
 190                         var property = $target.data('property');
 191
 192                         if (sort === property) {
 193                                 this.options.dataOptions.sortDirection = (direction === 'asc') ? 'desc' : 'asc';
 194                         } else {
 195                                 this.options.dataOptions.sortDirection = 'asc';
 196                                 this.options.dataOptions.sortProperty = property;
 197                         }
 198
 199                         this.options.dataOptions.pageIndex = 0;
 200                         this.updateColumns($target, this.options.dataOptions.sortDirection);
 201                         this.renderData();
 202                 },
 203
 204                 pagesizeChanged: function (e, pageSize) {
 205                         if(pageSize) {
 206                                 this.options.dataOptions.pageSize = parseInt(pageSize.value, 10);
 207                         } else {
 208                                 this.options.dataOptions.pageSize = parseInt($(e.target).val(), 10);
 209                         }
 210
 211                         this.options.dataOptions.pageIndex = 0;
 212                         this.renderData();
 213                 },
 214
 215                 pageChanged: function (e) {
 216                         var pageRequested = parseInt($(e.target).val(), 10);
 217                         pageRequested = (isNaN(pageRequested)) ? 1 : pageRequested;
 218                         var maxPages = this.$pageslabel.text();
 219
 220                         this.options.dataOptions.pageIndex =
 221                                 (pageRequested > maxPages) ? maxPages - 1 : pageRequested - 1;
 222
 223                         this.renderData();
 224                 },
 225
 226                 searchChanged: function (e, search) {
 227                         this.options.dataOptions.search = search;
 228                         this.options.dataOptions.pageIndex = 0;
 229                         this.renderData();
 230                 },
 231
 232                 filterChanged: function (e, filter) {
 233                         this.options.dataOptions.filter = filter;
 234                         this.options.dataOptions.pageIndex = 0;
 235                         this.renderData();
 236                 },
 237
 238                 previous: function () {
 239                         this.$nextpagebtn.attr('disabled', 'disabled');
 240                         this.$prevpagebtn.attr('disabled', 'disabled');
 241                         this.options.dataOptions.pageIndex--;
 242                         this.renderData();
 243                 },
 244
 245                 next: function () {
 246                         this.$nextpagebtn.attr('disabled', 'disabled');
 247                         this.$prevpagebtn.attr('disabled', 'disabled');
 248                         this.options.dataOptions.pageIndex++;
 249                         this.renderData();
 250                 },
 251
 252                 reload: function () {
 253                         this.options.dataOptions.pageIndex = 0;
 254                         this.renderData();
 255                 },
 256
 257                 initStretchHeight: function () {
 258                         this.$gridContainer = this.$element.parent();
 259
 260                         this.$element.wrap('<div class="datagrid-stretch-wrapper">');
 261                         this.$stretchWrapper = this.$element.parent();
 262
 263                         this.$headerTable = $('<table>').attr('class', this.$element.attr('class'));
 264                         this.$footerTable = this.$headerTable.clone();
 265
 266                         this.$headerTable.prependTo(this.$gridContainer).addClass('datagrid-stretch-header');
 267                         this.$thead.detach().appendTo(this.$headerTable);
 268
 269                         this.$sizingHeader = this.$thead.clone();
 270                         this.$sizingHeader.find('tr:first').remove();
 271
 272                         this.$footerTable.appendTo(this.$gridContainer).addClass('datagrid-stretch-footer');
 273                         this.$tfoot.detach().appendTo(this.$footerTable);
 274                 },
 275
 276                 stretchHeight: function () {
 277                         if (!this.$gridContainer) return;
 278
 279                         this.setColumnWidths();
 280
 281                         var targetHeight = this.$gridContainer.height();
 282                         var headerHeight = this.$headerTable.outerHeight();
 283                         var footerHeight = this.$footerTable.outerHeight();
 284                         var overhead = headerHeight + footerHeight;
 285
 286                         this.$stretchWrapper.height(targetHeight - overhead);
 287                 },
 288
 289                 setColumnWidths: function () {
 290                         if (!this.$sizingHeader) return;
 291
 292                         this.$element.prepend(this.$sizingHeader);
 293
 294                         var $sizingCells = this.$sizingHeader.find('th');
 295                         var columnCount = $sizingCells.length;
 296
 297                         function matchSizingCellWidth(i, el) {
 298                                 if (i === columnCount - 1) return;
 299
 300                                 var $el = $(el);
 301                                 var $sourceCell = $sizingCells.eq(i);
 302                                 var width = $sourceCell.width();
 303
 304                                 // TD needs extra width to match sorted column header
 305                                 if ($sourceCell.hasClass('sorted') && $el.prop('tagName') === 'TD') width = width + SORTED_HEADER_OFFSET;
 306
 307                                 $el.width(width);
 308                         }
 309
 310                         this.$colheader.find('th').each(matchSizingCellWidth);
 311                         this.$tbody.find('tr:first > td').each(matchSizingCellWidth);
 312
 313                         this.$sizingHeader.detach();
 314                 }
 315         };
 316
 317
 318         // DATAGRID PLUGIN DEFINITION
 319
 320         $.fn.datagrid = function (option) {
 321                 return this.each(function () {
 322                         var $this = $(this);
 323                         var data = $this.data('datagrid');
 324                         var options = typeof option === 'object' && option;
 325
 326                         if (!data) $this.data('datagrid', (data = new Datagrid(this, options)));
 327                         if (typeof option === 'string') data[option]();
 328                 });
 329         };
 330
 331         $.fn.datagrid.defaults = {
 332                 dataOptions: { pageIndex: 0, pageSize: 10 },
 333                 loadingHTML: '<div class="progress progress-striped active" style="width:50%;margin:auto;"><div class="bar" style="width:100%;"></div></div>',
 334                 itemsText: 'items',
 335                 itemText: 'item'
 336         };
 337
 338         $.fn.datagrid.Constructor = Datagrid;
 339
 340 });