Dashboard sipadu mbip
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

aui-datatable-selection-debug.js 8.8KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426
  1. AUI.add('aui-datatable-selection', function(A) {
  2. // TODO - add support for row/column selection
  3. var Lang = A.Lang,
  4. isBoolean = Lang.isBoolean,
  5. isString = Lang.isString,
  6. AgetClassName = A.getClassName,
  7. _toInitialCap = A.cached(function(str) {
  8. return str.substring(0, 1).toUpperCase() + str.substring(1);
  9. }),
  10. CELL = 'cell',
  11. COLUMNSET = 'columnset',
  12. COLUMNSET_CHANGE = 'columnsetChange',
  13. DATATABLE = 'datatable',
  14. DOWN = 'down',
  15. ESC = 'esc',
  16. FOCUSED = 'focused',
  17. HOST = 'host',
  18. ID = 'id',
  19. KEYDOWN = 'keydown',
  20. LEFT = 'left',
  21. MOUSEDOWN = 'mousedown',
  22. MOUSE_EVENT = 'mouseEvent',
  23. MULTIPLE = 'multiple',
  24. RECORDSET = 'recordset',
  25. RECORDSET_CHANGE = 'recordsetChange',
  26. RETURN = 'return',
  27. RIGHT = 'right',
  28. ROW = 'row',
  29. SELECT = 'select',
  30. SELECTED = 'selected',
  31. SELECT_ROW = 'selectRow',
  32. TAB = 'tab',
  33. TABINDEX = 'tabindex',
  34. TR = 'tr',
  35. UP = 'up',
  36. CSS_DATATABLE_CELL_SELECTED = AgetClassName(DATATABLE, CELL, SELECTED),
  37. CSS_DATATABLE_ROW_SELECTED = AgetClassName(DATATABLE, ROW, SELECTED);
  38. var DataTableSelection = A.Base.create("dataTableSelection", A.Plugin.Base, [], {
  39. activeColumnIndex: -1,
  40. activeRecordIndex: -1,
  41. handlerKeyDown: null,
  42. selectedCellHash: null,
  43. selectedColumnHash: null,
  44. selectedRowHash: null,
  45. initializer: function() {
  46. var instance = this;
  47. instance.selectedCellHash = {};
  48. instance.selectedColumnHash = {};
  49. instance.selectedRowHash = {};
  50. instance.publish({
  51. select: {
  52. defaultFn: instance._defSelectFn
  53. }
  54. });
  55. instance.afterHostEvent(instance.get(MOUSE_EVENT), instance._afterMouseEvent);
  56. instance.afterHostEvent(COLUMNSET_CHANGE, instance._afterHostColumnsetChange);
  57. instance.afterHostEvent(RECORDSET_CHANGE, instance._afterHostRecordsetChange);
  58. instance.handlerKeyDown = A.getDoc().on(KEYDOWN, A.bind(instance._afterKeyEvent, instance));
  59. },
  60. destroy: function() {
  61. var instance = this;
  62. var handlerKeyDown = instance.handlerKeyDown;
  63. if (handlerKeyDown) {
  64. handlerKeyDown.detach();
  65. }
  66. },
  67. getActiveColumn: function() {
  68. var instance = this;
  69. var host = instance.get(HOST);
  70. return host.get(COLUMNSET).getColumn(instance.activeColumnIndex);
  71. },
  72. getActiveRecord: function() {
  73. var instance = this;
  74. var host = instance.get(HOST);
  75. return host.get(RECORDSET).getRecord(instance.activeRecordIndex);
  76. },
  77. isCellSelected: function(cell) {
  78. var instance = this;
  79. return instance.selectedCellHash[cell.get(ID)];
  80. },
  81. isColumnSelected: function(column) {
  82. // TODO
  83. },
  84. isRowSelected: function(row) {
  85. var instance = this;
  86. return instance.selectedRowHash[row.get(ID)];
  87. },
  88. select: function(cell, row) {
  89. var instance = this;
  90. var host = instance.get(HOST);
  91. var columnset = host.get(COLUMNSET);
  92. var recordset = host.get(RECORDSET);
  93. var column = columnset.getColumnByCell(cell);
  94. var record = recordset.getRecordByRow(row || cell.ancestor(TR));
  95. instance.activeColumnIndex = columnset.getColumnIndex(column);
  96. instance.activeRecordIndex = recordset.getRecordIndex(record);
  97. if (cell) {
  98. instance.selectCell(cell);
  99. }
  100. if (instance.get(SELECT_ROW) && row) {
  101. instance.selectRow(row);
  102. }
  103. },
  104. selectCell: function(cell) {
  105. var instance = this;
  106. if (!instance.get(MULTIPLE)) {
  107. instance.unselectAllCells();
  108. }
  109. instance.selectedCellHash[cell.get(ID)] = cell;
  110. cell.setAttribute(TABINDEX, 0).focus();
  111. cell.addClass(CSS_DATATABLE_CELL_SELECTED);
  112. },
  113. selectColumn: function(row) {
  114. // TODO
  115. },
  116. selectRow: function(row) {
  117. var instance = this;
  118. if (!instance.get(MULTIPLE)) {
  119. instance.unselectAllRows();
  120. }
  121. instance.selectedRowHash[row.get(ID)] = row;
  122. row.addClass(CSS_DATATABLE_ROW_SELECTED);
  123. },
  124. toggleCell: function(cell, forceAdd) {
  125. var instance = this;
  126. if (forceAdd || !instance.isCellSelected(cell)) {
  127. instance.selectCell(cell);
  128. }
  129. else {
  130. instance.unselectCell(cell);
  131. }
  132. },
  133. toggleColumn: function(column, forceAdd) {
  134. // TODO
  135. },
  136. toggleRow: function(row, forceAdd) {
  137. var instance = this;
  138. if (forceAdd || !instance.isRowSelected(row)) {
  139. instance.selectRow(row);
  140. }
  141. else {
  142. instance.unselectRow(row);
  143. }
  144. },
  145. unselectCell: function(cell) {
  146. var instance = this;
  147. delete instance.selectedCellHash[cell.get(ID)];
  148. cell.removeAttribute(TABINDEX);
  149. cell.removeClass(CSS_DATATABLE_CELL_SELECTED);
  150. },
  151. unselectColumn: function(column) {
  152. // TODO
  153. },
  154. unselectRow: function(row) {
  155. var instance = this;
  156. delete instance.selectedRowHash[row.get(ID)];
  157. row.removeClass(CSS_DATATABLE_ROW_SELECTED);
  158. },
  159. unselectAllCells: function() {
  160. var instance = this;
  161. A.each(instance.selectedCellHash, A.bind(instance.unselectCell, instance));
  162. },
  163. unselectAllColumns: function() {
  164. // TODO
  165. },
  166. unselectAllRows: function() {
  167. var instance = this;
  168. A.each(instance.selectedRowHash, A.bind(instance.unselectRow, instance));
  169. },
  170. _afterHostColumnsetChange: function(event) {
  171. var instance = this;
  172. instance._cleanUp();
  173. },
  174. _afterHostRecordsetChange: function(event) {
  175. var instance = this;
  176. instance._cleanUp();
  177. },
  178. _afterMouseEvent: function(event) {
  179. var instance = this;
  180. instance._handleSelectEvent(event);
  181. },
  182. _afterKeyEvent: function(event) {
  183. var instance = this;
  184. var host = instance.get(HOST);
  185. var column = instance.getActiveColumn();
  186. var record = instance.getActiveRecord();
  187. if (!host.get(FOCUSED) || !column || !record) {
  188. // Don't process keys if the wigdet is not focused or column or record is undefined.
  189. return;
  190. }
  191. if (host.events) {
  192. // Update event with the new payload information for the next "cell" calculated by the "events" module.
  193. host.events.updateEventPayload(
  194. host.getCellNode(record, column),
  195. event
  196. );
  197. }
  198. if (event.isNavKey()) {
  199. if (event.isKey(ESC)) {
  200. instance._onEscKey(event);
  201. }
  202. else if (event.isKey(RETURN)) {
  203. instance._onReturnKey(event);
  204. }
  205. else {
  206. instance._navigate(event);
  207. }
  208. event.halt();
  209. }
  210. },
  211. _cleanUp: function() {
  212. var instance = this;
  213. instance.selectedCellHash = {};
  214. instance.selectedColumnHash = {};
  215. instance.selectedRowHash = {};
  216. },
  217. _defSelectFn: function(event) {
  218. var instance = this;
  219. instance.select(event.cell, event.row);
  220. },
  221. _navigate: function(event) {
  222. var instance = this;
  223. instance._updateNavKeyInfo(event);
  224. instance._handleSelectEvent(event);
  225. },
  226. _onEscKey: function(event) {
  227. var instance = this;
  228. var host = instance.get(HOST);
  229. var editor = host.getCellEditor(event.record, event.column);
  230. if (editor) {
  231. editor.hide();
  232. }
  233. },
  234. _onReturnKey: function(event) {
  235. var instance = this;
  236. var host = instance.get(HOST);
  237. host._editCell(event);
  238. },
  239. _handleSelectEvent: function(event) {
  240. var instance = this;
  241. instance.fire(SELECT, {
  242. cell: event.cell,
  243. column: event.column,
  244. inHead: event.inHead,
  245. liner: event.liner,
  246. originalEvent: event.originalEvent,
  247. row: event.row,
  248. record: event.record
  249. });
  250. },
  251. _updateNavKeyInfo: function(event) {
  252. var instance = this;
  253. var host = instance.get(HOST);
  254. var originalEvent = event.originalEvent;
  255. var columnset = host.get(COLUMNSET);
  256. var columnIndex = event.column.keyIndex;
  257. var recordset = host.get(RECORDSET);
  258. var recordIndex = recordset.getRecordIndex(event.record);
  259. var ctrlKey = originalEvent.ctrlKey || originalEvent.metaKey;
  260. var shiftKey = originalEvent.shiftKey;
  261. if (originalEvent.isKey(LEFT) ||
  262. (shiftKey && originalEvent.isKey(TAB))) {
  263. if (ctrlKey) {
  264. columnIndex = 0;
  265. }
  266. else {
  267. columnIndex--;
  268. }
  269. }
  270. else if (originalEvent.isKey(RIGHT) ||
  271. (!shiftKey && originalEvent.isKey(TAB))) {
  272. if (ctrlKey) {
  273. columnIndex = columnset.getLength() - 1;
  274. }
  275. else {
  276. columnIndex++;
  277. }
  278. }
  279. else if (originalEvent.isKey(DOWN)) {
  280. if (ctrlKey) {
  281. recordIndex = recordset.getLength() - 1;
  282. }
  283. else {
  284. recordIndex++;
  285. }
  286. }
  287. else if (originalEvent.isKey(UP)) {
  288. if (ctrlKey) {
  289. recordIndex = 0;
  290. }
  291. else {
  292. recordIndex--;
  293. }
  294. }
  295. // Fixing indexes range
  296. columnIndex = Math.max(Math.min(columnIndex, columnset.getLength() - 1), 0);
  297. recordIndex = Math.max(Math.min(recordIndex, recordset.getLength() - 1), 0);
  298. if (host.events) {
  299. var newColumn = columnset.getColumn(columnIndex);
  300. var newRecord = recordset.getRecord(recordIndex);
  301. // Update event with the new payload information for the next "cell" calculated by the "events" module.
  302. host.events.updateEventPayload(
  303. host.getCellNode(newRecord, newColumn),
  304. event
  305. );
  306. }
  307. },
  308. _setMouseEvent: function(val) {
  309. return CELL + _toInitialCap(val);
  310. }
  311. },
  312. {
  313. NS: "selection",
  314. NAME: "dataTableSelection",
  315. ATTRS: {
  316. selectRow: {
  317. value: false,
  318. validator: isBoolean
  319. },
  320. multiple: {
  321. value: false,
  322. validator: isBoolean
  323. },
  324. mouseEvent: {
  325. setter: '_setMouseEvent',
  326. value: MOUSEDOWN,
  327. validator: isString
  328. }
  329. }
  330. });
  331. A.namespace("Plugin").DataTableSelection = DataTableSelection;
  332. }, '@VERSION@' ,{requires:['aui-datatable-base'], skinnable:true});