GeneratePDFView.js 8.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278
  1. 'use strict';
  2. /**
  3. * Licensed Materials - Property of IBM
  4. * IBM Watson Analytics (C) Copyright IBM Corp. 2019
  5. * US Government Users Restricted Rights - Use, duplication or disclosure restricted by GSA ADP Schedule Contract with IBM Corp.
  6. */
  7. define(['doT', 'jquery', 'text!./templates/GeneratePDFView.html', 'text!../../app/ui/templates/SelectMenu.html', '../../app/nls/StringResources', '../../lib/@waca/core-client/js/core-client/ui/core/View'], function (doT, $, GeneratePDFTemplate, SelectMenuTemplate, stringResources, View) {
  8. 'use strict';
  9. var KEY_CODES = {
  10. ENTER: 13,
  11. UP: 38,
  12. DOWN: 40,
  13. TAB: 9,
  14. SPACE: 32
  15. };
  16. var GeneratePDFView = View.extend([], {
  17. generatePDFTemplate: doT.template(GeneratePDFTemplate),
  18. selectMenuTemplate: doT.template(SelectMenuTemplate),
  19. pageSize: [stringResources.get('letter'), stringResources.get('legal'), stringResources.get('a4'), stringResources.get('tabloid')],
  20. orientation: [stringResources.get('portrait'), stringResources.get('landscape')],
  21. selectIndexPageSize: 0,
  22. selectIndexOrientation: 0,
  23. pdfDocsLink: 'https://www.ibm.com/support/knowledgecenter/SSEP7J_11.0.0/com.ibm.swg.ba.cognos.ug_ca_dshb.doc/ca_export_to_PDF.html',
  24. checkBoxState: false,
  25. events: {
  26. 'primaryaction .dtSelectListItem': '_onSelectValue',
  27. 'primaryaction .dtColDropdown': 'toggleSelectMenu',
  28. 'primaryaction .dtEditFooterContent': 'toggleCheckbox'
  29. },
  30. init: function init() {
  31. GeneratePDFView.inherited('init', this, arguments);
  32. },
  33. render: function render() {
  34. this.$el.empty();
  35. this.$el.append(this.generatePDFTemplate({
  36. pagesize: stringResources.get('pageSize'),
  37. orientation: stringResources.get('orientation'),
  38. printInfo: stringResources.get('printPDFInfo'),
  39. pdfLink: this.pdfDocsLink,
  40. getRow: this._getRow.bind(this),
  41. filterOptionText: stringResources.get('includeFilters')
  42. }));
  43. return this.$el;
  44. },
  45. remove: function remove() {
  46. if (this._closeSelectMenu_bind) {
  47. $(document.body).off('click', this._closeSelectMenu_bind);
  48. this._closeSelectMenu_bind = null;
  49. }
  50. GeneratePDFView.inherited('init', this, arguments);
  51. },
  52. onOpen: function onOpen() {
  53. this.$el.closest('.modalDialog').addClass('exportPDF');
  54. },
  55. getPageSize: function getPageSize() {
  56. var pageSize = {};
  57. pageSize = {
  58. pageSize: this.pageSize[this.selectIndexPageSize],
  59. orientation: this.orientation[this.selectIndexOrientation]
  60. };
  61. return pageSize;
  62. },
  63. _onSelectValue: function _onSelectValue(event) {
  64. this._selectValue(event.currentTarget);
  65. this._closeSelectMenu();
  66. },
  67. _selectValue: function _selectValue(target) {
  68. var $currentTarget = $(target);
  69. var $dropDownNode = $currentTarget.closest('.dtSelect').find('.dtColDropdown');
  70. var $list = $currentTarget.parent('.dtSelectList');
  71. var rowId = $list.data('rowid');
  72. var index = $currentTarget.data('optid');
  73. if (rowId == 0) {
  74. this.selectIndexPageSize = index;
  75. } else {
  76. this.selectIndexOrientation = index;
  77. }
  78. var update = this._getRow(rowId);
  79. var text = null;
  80. var checkmarkSelector = '.row_checkIcon_' + rowId + ' .dt-checked';
  81. this.$checkmark = this.$el.find(checkmarkSelector);
  82. this.$tableRow = this.$checkmark.closest('.dtEditTableRowsItem');
  83. if (update.state.selectedIndex >= 0) {
  84. text = update.state.values[update.state.selectedIndex];
  85. this.$checkmark.removeClass('hidden');
  86. this.$tableRow.addClass('mapped');
  87. } else {
  88. this.$checkmark.addClass('hidden');
  89. this.$tableRow.removeClass('mapped');
  90. }
  91. $dropDownNode.find('.dtColDropdownLabel').text(text);
  92. },
  93. toggleSelectMenu: function toggleSelectMenu(event) {
  94. var $currentTarget = $(event.currentTarget);
  95. if ($currentTarget.hasClass('dtColDropdown') && this.$el.find('.dtSelectList').length) {
  96. this._closeSelectMenu();
  97. } else if ($currentTarget.hasClass('dtColDropdown')) {
  98. this._openSelectMenu(event);
  99. }
  100. },
  101. _onDropDownKeydown: function _onDropDownKeydown($node, event) {
  102. var $current = $node.find('span.psuedoHover');
  103. var next = [];
  104. var prev = [];
  105. var isUpArrow = event.which === KEY_CODES.UP || event.keyCode === KEY_CODES.UP;
  106. var isDownArrow = event.which === KEY_CODES.DOWN || event.keyCode === KEY_CODES.DOWN;
  107. var isDirectionAllowed = isUpArrow || isDownArrow;
  108. var isEnter = event.which === KEY_CODES.ENTER || event.keyCode === KEY_CODES.ENTER;
  109. var isTab = event.which === KEY_CODES.TAB || event.keyCode === KEY_CODES.TAB;
  110. if (isTab) {
  111. this._closeSelectMenu();
  112. }
  113. if ($current.length) {
  114. next = $current.next();
  115. prev = $current.prev();
  116. if (isDirectionAllowed) {
  117. //Check for hover due to mouse
  118. $current = $current.is(':hover') ? $current.addClass('noPsuedoHover') : $current;
  119. //Remove psuedo Hover
  120. $current = $current.removeClass('psuedoHover');
  121. }
  122. }
  123. if ($current.length) {
  124. if (isEnter) {
  125. this._selectValue($current);
  126. } else if (isDirectionAllowed) {
  127. if (isUpArrow) {
  128. if (prev.length) {
  129. prev.addClass('psuedoHover').removeClass('noPsuedoHover');
  130. } else {
  131. $node.find('span').last().addClass('psuedoHover').removeClass('noPsuedoHover');
  132. }
  133. } else if (isDownArrow) {
  134. if (next.length) {
  135. next.addClass('psuedoHover').removeClass('noPsuedoHover');
  136. } else {
  137. $node.find('span').first().addClass('psuedoHover').removeClass('noPsuedoHover');
  138. }
  139. }
  140. }
  141. } else if (isDirectionAllowed) {
  142. if (isUpArrow) {
  143. $node.find('span').last().addClass('psuedoHover').removeClass('noPsuedoHover');
  144. } else if (isDownArrow) {
  145. $node.find('span').first().addClass('psuedoHover').removeClass('noPsuedoHover');
  146. }
  147. }
  148. $current = $node.find('span.psuedoHover');
  149. if ($current.length && !this._iswithinVerticalBounds($current, $node)) {
  150. $current.get(0).scrollIntoView();
  151. }
  152. },
  153. _closeSelectMenu: function _closeSelectMenu() {
  154. var $list = this.$el.find('.dtSelectList');
  155. if ($list.length) {
  156. var $dropDownNode = $list.siblings('.dtColDropdown');
  157. $dropDownNode.find('.dtDropDownIcon').removeClass('open');
  158. $list.hide();
  159. $list.remove();
  160. $dropDownNode.unbind('keydown', this._onDropDownKeydown_bind);
  161. if (this._closeSelectMenu_bind) {
  162. $(document.body).off('click', this._closeSelectMenu_bind);
  163. }
  164. $dropDownNode.attr('aria-expanded', false);
  165. }
  166. },
  167. _openSelectMenu: function _openSelectMenu(event) {
  168. event.preventDefault();
  169. event.stopPropagation();
  170. var $dropDownNode = $(event.currentTarget);
  171. var $selectNode = $dropDownNode.parent();
  172. var $dtDropDownIcon = $dropDownNode.find('.dtDropDownIcon');
  173. var rowId = event.currentTarget.dataset.rowid;
  174. var sHtml = this.selectMenuTemplate({
  175. rowId: rowId,
  176. getRow: this._getRow.bind(this)
  177. });
  178. var $node = $(sHtml);
  179. $selectNode.append($node);
  180. $dtDropDownIcon.addClass('open');
  181. $dropDownNode.attr('aria-expanded', true);
  182. this._closeSelectMenu_bind = this._closeSelectMenu.bind(this);
  183. this._onDropDownKeydown_bind = this._onDropDownKeydown.bind(this, $node);
  184. $(document.body).on('click', this._closeSelectMenu_bind);
  185. $dropDownNode.keydown(this._onDropDownKeydown_bind);
  186. $node.on('mouseover mousemove mousein mouseout', function (event) {
  187. $node.find('span').removeClass('noPsuedoHover psuedoHover');
  188. $(event.target).addClass('psuedoHover');
  189. });
  190. $node.show();
  191. var $list = $selectNode.find('.dtSelectList');
  192. var $selected = $list.find('span.dtSelected').addClass('psuedoHover');
  193. if ($selected.length) {
  194. if (!this._iswithinVerticalBounds($selected, $list)) {
  195. $selected.get(0).scrollIntoView();
  196. }
  197. }
  198. },
  199. _iswithinVerticalBounds: function _iswithinVerticalBounds($childElement, $containerElem) {
  200. var containerRect = $containerElem.get(0).getBoundingClientRect();
  201. var childRect = $childElement.get(0).getBoundingClientRect();
  202. return childRect.top >= containerRect.top && childRect.bottom <= containerRect.bottom;
  203. },
  204. toggleCheckbox: function toggleCheckbox(event) {
  205. event.stopPropagation();
  206. event.preventDefault();
  207. var $content = $(event.currentTarget);
  208. var $checkInput = $content.find('input');
  209. var $label = $content.find('label');
  210. $checkInput.prop('checked', !$checkInput.prop('checked'));
  211. var state = $checkInput.prop('checked');
  212. $label.toggleClass('dt-checked', state);
  213. this.checkBoxState = state;
  214. },
  215. _getRow: function _getRow(rowIndex) {
  216. if (rowIndex == 0) {
  217. return {
  218. state: {
  219. selectedIndex: this.selectIndexPageSize,
  220. values: this.pageSize
  221. }
  222. };
  223. } else {
  224. return {
  225. state: {
  226. selectedIndex: this.selectIndexOrientation,
  227. values: this.orientation
  228. }
  229. };
  230. }
  231. }
  232. });
  233. return GeneratePDFView;
  234. });
  235. //# sourceMappingURL=GeneratePDFView.js.map