repeater-list.js 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498
  1. /*
  2. * Fuel UX Repeater - List View Plugin
  3. * https://github.com/ExactTarget/fuelux
  4. *
  5. * Copyright (c) 2014 ExactTarget
  6. * Licensed under the BSD New license.
  7. */
  8. // -- BEGIN UMD WRAPPER PREFACE --
  9. // For more information on UMD visit:
  10. // https://github.com/umdjs/umd/blob/master/jqueryPlugin.js
  11. (function (factory) {
  12. if (typeof define === 'function' && define.amd) {
  13. // if AMD loader is available, register as an anonymous module.
  14. define(['jquery', 'fuelux/repeater'], factory);
  15. } else {
  16. // OR use browser globals if AMD is not present
  17. factory(jQuery);
  18. }
  19. }(function ($) {
  20. // -- END UMD WRAPPER PREFACE --
  21. // -- BEGIN MODULE CODE HERE --
  22. if($.fn.repeater){
  23. //ADDITIONAL METHODS
  24. $.fn.repeater.Constructor.prototype.list_clearSelectedItems = function () {
  25. this.$canvas.find('.repeater-list-check').remove();
  26. this.$canvas.find('.repeater-list table tbody tr.selected').removeClass('selected');
  27. };
  28. $.fn.repeater.Constructor.prototype.list_highlightColumn = function (index, force) {
  29. var tbody = this.$canvas.find('.repeater-list tbody');
  30. if (this.viewOptions.list_highlightSortedColumn || force) {
  31. tbody.find('td.sorted').removeClass('sorted');
  32. tbody.find('tr').each(function () {
  33. var col = $(this).find('td:nth-child(' + (index + 1) + ')');
  34. col.addClass('sorted');
  35. });
  36. }
  37. };
  38. $.fn.repeater.Constructor.prototype.list_getSelectedItems = function () {
  39. var selected = [];
  40. this.$canvas.find('.repeater-list table tbody tr.selected').each(function () {
  41. var $item = $(this);
  42. selected.push({
  43. data: $item.data('item_data'),
  44. element: $item
  45. });
  46. });
  47. return selected;
  48. };
  49. $.fn.repeater.Constructor.prototype.list_positionHeadings = function () {
  50. var $wrapper = this.$element.find('.repeater-list-wrapper');
  51. var offsetLeft = $wrapper.offset().left;
  52. var scrollLeft = $wrapper.scrollLeft();
  53. if (scrollLeft > 0) {
  54. $wrapper.find('.repeater-list-heading').each(function () {
  55. var $heading = $(this);
  56. var left = ($heading.parents('th:first').offset().left - offsetLeft) + 'px';
  57. $heading.addClass('shifted').css('left', left);
  58. });
  59. } else {
  60. $wrapper.find('.repeater-list-heading').each(function () {
  61. $(this).removeClass('shifted').css('left', '');
  62. });
  63. }
  64. };
  65. $.fn.repeater.Constructor.prototype.list_setSelectedItems = function (items, force) {
  66. var selectable = this.viewOptions.list_selectable;
  67. var self = this;
  68. var data, i, $item, l;
  69. //this function is necessary because lint yells when a function is in a loop
  70. function checkIfItemMatchesValue () {
  71. $item = $(this);
  72. data = $item.data('item_data') || {};
  73. if (data[items[i].property] === items[i].value) {
  74. selectItem($item, items[i].selected);
  75. }
  76. }
  77. function selectItem ($itm, select) {
  78. select = (select !== undefined) ? select : true;
  79. if (select) {
  80. if (!force && selectable !== 'multi') {
  81. self.list_clearSelectedItems();
  82. }
  83. if (!$itm.hasClass('selected')) {
  84. $itm.addClass('selected');
  85. $itm.find('td:first').prepend('<div class="repeater-list-check"><span class="glyphicon glyphicon-ok"></span></div>');
  86. }
  87. } else {
  88. $itm.find('.repeater-list-check').remove();
  89. $itm.removeClass('selected');
  90. }
  91. }
  92. if (!$.isArray(items)) {
  93. items = [items];
  94. }
  95. if (force === true || selectable === 'multi') {
  96. l = items.length;
  97. } else if (selectable) {
  98. l = (items.length > 0) ? 1 : 0;
  99. } else {
  100. l = 0;
  101. }
  102. for (i = 0; i < l; i++) {
  103. if (items[i].index !== undefined) {
  104. $item = this.$canvas.find('.repeater-list table tbody tr:nth-child(' + (items[i].index + 1) + ')');
  105. if ($item.length > 0) {
  106. selectItem($item, items[i].selected);
  107. }
  108. } else if (items[i].property !== undefined && items[i].value !== undefined) {
  109. this.$canvas.find('.repeater-list table tbody tr').each(checkIfItemMatchesValue);
  110. }
  111. }
  112. };
  113. $.fn.repeater.Constructor.prototype.list_sizeHeadings = function () {
  114. var $table = this.$element.find('.repeater-list table');
  115. $table.find('thead th').each(function () {
  116. var $hr = $(this);
  117. var $heading = $hr.find('.repeater-list-heading');
  118. $heading.outerHeight($hr.outerHeight());
  119. $heading.outerWidth($hr.outerWidth());
  120. });
  121. };
  122. //ADDITIONAL DEFAULT OPTIONS
  123. $.fn.repeater.defaults = $.extend({}, $.fn.repeater.defaults, {
  124. list_columnRendered: null,
  125. list_columnSizing: true,
  126. list_columnSyncing: true,
  127. list_highlightSortedColumn: false,
  128. list_infiniteScroll: false,
  129. list_noItemsHTML: '',
  130. list_selectable: false,
  131. list_sortClearing: false,
  132. list_rowRendered: null
  133. });
  134. //EXTENSION DEFINITION
  135. $.fn.repeater.viewTypes.list = {
  136. cleared: function () {
  137. if (this.viewOptions.list_columnSyncing) {
  138. this.list_sizeHeadings();
  139. }
  140. },
  141. dataOptions: function (options) {
  142. if (this.list_sortDirection) {
  143. options.sortDirection = this.list_sortDirection;
  144. }
  145. if (this.list_sortProperty) {
  146. options.sortProperty = this.list_sortProperty;
  147. }
  148. return options;
  149. },
  150. initialize: function (helpers, callback) {
  151. this.list_sortDirection = null;
  152. this.list_sortProperty = null;
  153. callback();
  154. },
  155. resize: function () {
  156. if (this.viewOptions.list_columnSyncing) {
  157. this.list_sizeHeadings();
  158. }
  159. },
  160. selected: function () {
  161. var infScroll = this.viewOptions.list_infiniteScroll;
  162. var opts;
  163. this.list_firstRender = true;
  164. this.$loader.addClass('noHeader');
  165. if (infScroll) {
  166. opts = (typeof infScroll === 'object') ? infScroll : {};
  167. this.infiniteScrolling(true, opts);
  168. }
  169. },
  170. before: function(helpers){
  171. var $listContainer = helpers.container.find('.repeater-list');
  172. var self = this;
  173. var $table;
  174. if ($listContainer.length < 1) {
  175. $listContainer = $('<div class="repeater-list" data-preserve="shallow"><div class="repeater-list-wrapper" data-infinite="true" data-preserve="shallow"><table aria-readonly="true" class="table" data-preserve="shallow" role="grid"></table></div></div>');
  176. $listContainer.find('.repeater-list-wrapper').on('scroll.fu.repeaterList', function () {
  177. if (self.viewOptions.list_columnSyncing) {
  178. self.list_positionHeadings();
  179. }
  180. });
  181. helpers.container.append($listContainer);
  182. }
  183. $table = $listContainer.find('table');
  184. renderThead.call(this, $table, helpers.data);
  185. renderTbody.call(this, $table, helpers.data);
  186. return false;
  187. },
  188. renderItem: function(helpers){
  189. renderRow.call(this, helpers.container, helpers.subset, helpers.index);
  190. return false;
  191. },
  192. after: function(){
  193. var $sorted;
  194. if (this.viewOptions.list_columnSyncing) {
  195. this.list_sizeHeadings();
  196. this.list_positionHeadings();
  197. }
  198. $sorted = this.$canvas.find('.repeater-list-heading.sorted');
  199. if ($sorted.length > 0) {
  200. this.list_highlightColumn($sorted.data('fu_item_index'));
  201. }
  202. return false;
  203. }
  204. };
  205. }
  206. //ADDITIONAL METHODS
  207. function renderColumn ($row, rows, rowIndex, columns, columnIndex) {
  208. var className = columns[columnIndex].className;
  209. var content = rows[rowIndex][columns[columnIndex].property];
  210. var $col = $('<td></td>');
  211. var width = columns[columnIndex]._auto_width;
  212. $col.addClass(((className !== undefined) ? className : '')).append(content);
  213. if (width !== undefined) {
  214. $col.outerWidth(width);
  215. }
  216. $row.append($col);
  217. if (this.viewOptions.list_columnRendered) {
  218. this.viewOptions.list_columnRendered({
  219. container: $row,
  220. columnAttr: columns[columnIndex].property,
  221. item: $col,
  222. rowData: rows[rowIndex]
  223. }, function () {});
  224. }
  225. }
  226. function renderHeader ($tr, columns, index) {
  227. var chevDown = 'glyphicon-chevron-down';
  228. var chevron = '.glyphicon.rlc:first';
  229. var chevUp = 'glyphicon-chevron-up';
  230. var $div = $('<div class="repeater-list-heading"><span class="glyphicon rlc"></span></div>');
  231. var $header = $('<th></th>');
  232. var self = this;
  233. var $both, className, sortable, $span, $spans;
  234. $div.data('fu_item_index', index);
  235. $div.prepend(columns[index].label);
  236. $header.html($div.html()).find('[id]').removeAttr('id');
  237. $header.append($div);
  238. $both = $header.add($div);
  239. $span = $div.find(chevron);
  240. $spans = $span.add($header.find(chevron));
  241. className = columns[index].className;
  242. if (className !== undefined) {
  243. $both.addClass(className);
  244. }
  245. sortable = columns[index].sortable;
  246. if (sortable) {
  247. $both.addClass('sortable');
  248. $div.on('click.fu.repeaterList', function () {
  249. self.list_sortProperty = (typeof sortable === 'string') ? sortable : columns[index].property;
  250. if ($div.hasClass('sorted')) {
  251. if ($span.hasClass(chevUp)) {
  252. $spans.removeClass(chevUp).addClass(chevDown);
  253. self.list_sortDirection = 'desc';
  254. } else {
  255. if (!self.viewOptions.list_sortClearing) {
  256. $spans.removeClass(chevDown).addClass(chevUp);
  257. self.list_sortDirection = 'asc';
  258. } else {
  259. $both.removeClass('sorted');
  260. $spans.removeClass(chevDown);
  261. self.list_sortDirection = null;
  262. self.list_sortProperty = null;
  263. }
  264. }
  265. } else {
  266. $tr.find('th, .repeater-list-heading').removeClass('sorted');
  267. $spans.removeClass(chevDown).addClass(chevUp);
  268. self.list_sortDirection = 'asc';
  269. $both.addClass('sorted');
  270. }
  271. self.render({
  272. clearInfinite: true,
  273. pageIncrement: null
  274. });
  275. });
  276. }
  277. if (columns[index].sortDirection === 'asc' || columns[index].sortDirection === 'desc') {
  278. $tr.find('th, .repeater-list-heading').removeClass('sorted');
  279. $both.addClass('sortable sorted');
  280. if (columns[index].sortDirection === 'asc') {
  281. $spans.addClass(chevUp);
  282. this.list_sortDirection = 'asc';
  283. } else {
  284. $spans.addClass(chevDown);
  285. this.list_sortDirection = 'desc';
  286. }
  287. this.list_sortProperty = (typeof sortable === 'string') ? sortable : columns[index].property;
  288. }
  289. $tr.append($header);
  290. }
  291. function renderRow ($tbody, rows, index) {
  292. var $row = $('<tr></tr>');
  293. var self = this;
  294. var i, l;
  295. if (this.viewOptions.list_selectable) {
  296. $row.addClass('selectable');
  297. $row.attr('tabindex', 0); // allow items to be tabbed to / focused on
  298. $row.data('item_data', rows[index]);
  299. $row.on('click.fu.repeaterList', function () {
  300. var $item = $(this);
  301. if ($item.hasClass('selected')) {
  302. $item.removeClass('selected');
  303. $item.find('.repeater-list-check').remove();
  304. $item.$element.trigger('deselected.fu.repeaterList', $item);
  305. } else {
  306. if (self.viewOptions.list_selectable !== 'multi') {
  307. self.$canvas.find('.repeater-list-check').remove();
  308. self.$canvas.find('.repeater-list tbody tr.selected').each(function () {
  309. $(this).removeClass('selected');
  310. self.$element.trigger('deselected.fu.repeaterList', $(this));
  311. });
  312. }
  313. $item.addClass('selected');
  314. $item.find('td:first').prepend('<div class="repeater-list-check"><span class="glyphicon glyphicon-ok"></span></div>');
  315. self.$element.trigger('selected.fu.repeaterList', $item);
  316. }
  317. });
  318. // allow selection via enter key
  319. $row.keyup(function (e) {
  320. if (e.keyCode === 13) {
  321. // triggering a standard click event to be caught by the row click handler above
  322. $row.trigger('click.fu.repeaterList');
  323. }
  324. });
  325. }
  326. $tbody.append($row);
  327. for (i = 0, l = this.list_columns.length; i < l; i++) {
  328. renderColumn.call(this, $row, rows, index, this.list_columns, i);
  329. }
  330. if (this.viewOptions.list_rowRendered) {
  331. this.viewOptions.list_rowRendered({
  332. container: $tbody,
  333. item: $row,
  334. rowData: rows[index]
  335. }, function () {});
  336. }
  337. }
  338. function renderTbody ($table, data) {
  339. var $tbody = $table.find('tbody');
  340. var $empty;
  341. if ($tbody.length < 1) {
  342. $tbody = $('<tbody data-container="true"></tbody>');
  343. $table.append($tbody);
  344. }
  345. if (data.items && data.items.length < 1) {
  346. $empty = $('<tr class="empty"><td colspan="' + this.list_columns.length + '"></td></tr>');
  347. $empty.find('td').append(this.viewOptions.list_noItemsHTML);
  348. $tbody.append($empty);
  349. }
  350. }
  351. function renderThead ($table, data) {
  352. var columns = data.columns || [];
  353. var i, j, l, $thead, $tr;
  354. function differentColumns (oldCols, newCols) {
  355. if (!newCols) {
  356. return false;
  357. }
  358. if (!oldCols || (newCols.length !== oldCols.length)) {
  359. return true;
  360. }
  361. for (i = 0, l = newCols.length; i < l; i++) {
  362. if (!oldCols[i]) {
  363. return true;
  364. } else {
  365. for (j in newCols[i]) {
  366. if (oldCols[i][j] !== newCols[i][j]) {
  367. return true;
  368. }
  369. }
  370. }
  371. }
  372. return false;
  373. }
  374. if (this.list_firstRender || differentColumns(this.list_columns, columns)) {
  375. $table.find('thead').remove();
  376. this.list_columns = columns;
  377. this.list_firstRender = false;
  378. this.$loader.removeClass('noHeader');
  379. $thead = $('<thead data-preserve="deep"><tr></tr></thead>');
  380. $tr = $thead.find('tr');
  381. for (i = 0, l = columns.length; i < l; i++) {
  382. renderHeader.call(this, $tr, columns, i);
  383. }
  384. $table.prepend($thead);
  385. sizeColumns.call(this, $tr);
  386. }
  387. }
  388. function sizeColumns ($tr) {
  389. var auto = [];
  390. var self = this;
  391. var i, l, newWidth, taken;
  392. if (this.viewOptions.list_columnSizing) {
  393. i = 0;
  394. taken = 0;
  395. $tr.find('th').each(function () {
  396. var $th = $(this);
  397. var isLast = ($th.next('th').length === 0);
  398. var width;
  399. if (self.list_columns[i].width !== undefined) {
  400. width = self.list_columns[i].width;
  401. $th.outerWidth(width);
  402. taken += $th.outerWidth();
  403. if (!isLast) {
  404. self.list_columns[i]._auto_width = width;
  405. } else {
  406. $th.outerWidth('');
  407. }
  408. } else {
  409. auto.push({
  410. col: $th,
  411. index: i,
  412. last: isLast
  413. });
  414. }
  415. i++;
  416. });
  417. l = auto.length;
  418. if (l > 0) {
  419. newWidth = Math.floor((this.$canvas.width() - taken) / l);
  420. for (i = 0; i < l; i++) {
  421. if (!auto[i].last) {
  422. auto[i].col.outerWidth(newWidth);
  423. this.list_columns[auto[i].index]._auto_width = newWidth;
  424. }
  425. }
  426. }
  427. }
  428. }
  429. // -- BEGIN UMD WRAPPER AFTERWORD --
  430. }));
  431. // -- END UMD WRAPPER AFTERWORD --