927ee80a01f76b48d3987d8f43d907832f90f03f365320925a6644d83f8e64d30e5eb927d93a0ba206b458717dd8e8ea8aae6c932a1f2a0761e578581d38ce 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376
  1. describe('manualRowResize', function () {
  2. var id = 'test';
  3. var defaultRowHeight = 22;
  4. beforeEach(function () {
  5. this.$container = $('<div id="' + id + '"></div>').appendTo('body');
  6. });
  7. afterEach(function () {
  8. if (this.$container) {
  9. destroy();
  10. this.$container.remove();
  11. }
  12. });
  13. it('should change row heights at init', function () {
  14. handsontable({
  15. rowHeaders: true,
  16. manualRowResize: [50, 40, 100]
  17. });
  18. expect(rowHeight(this.$container, 0)).toEqual(51);
  19. expect(rowHeight(this.$container, 1)).toEqual(40);
  20. expect(rowHeight(this.$container, 2)).toEqual(100);
  21. });
  22. it('should be enabled after specifying it in updateSettings config', function () {
  23. var hot = handsontable({
  24. data: [{ id: 1, name: 'Ted', lastName: 'Right' }, { id: 2, name: 'Frank', lastName: 'Honest' }, { id: 3, name: 'Joan', lastName: 'Well' }, { id: 4, name: 'Sid', lastName: 'Strong' }, { id: 5, name: 'Jane', lastName: 'Neat' }],
  25. rowHeaders: true
  26. });
  27. updateSettings({ manualRowResize: true });
  28. this.$container.find('tbody tr:eq(0) th:eq(0)').simulate('mouseover');
  29. expect($('.manualRowResizer').size()).toBeGreaterThan(0);
  30. });
  31. it('should change the default row height with updateSettings', function () {
  32. handsontable({
  33. manualRowResize: true
  34. });
  35. expect(rowHeight(this.$container, 0)).toEqual(defaultRowHeight + 2); // + Double border
  36. expect(rowHeight(this.$container, 1)).toEqual(defaultRowHeight + 1); // + Single border
  37. expect(rowHeight(this.$container, 2)).toEqual(defaultRowHeight + 1); // + Single border
  38. updateSettings({
  39. manualRowResize: [60, 50, 80]
  40. });
  41. expect(rowHeight(this.$container, 0)).toEqual(61);
  42. expect(rowHeight(this.$container, 1)).toEqual(50);
  43. expect(rowHeight(this.$container, 2)).toEqual(80);
  44. });
  45. it('should change the row height with updateSettings', function () {
  46. handsontable({
  47. manualRowResize: [60, 50, 80]
  48. });
  49. expect(rowHeight(this.$container, 0)).toEqual(61);
  50. expect(rowHeight(this.$container, 1)).toEqual(50);
  51. expect(rowHeight(this.$container, 2)).toEqual(80);
  52. updateSettings({
  53. manualRowResize: [30, 80, 100]
  54. });
  55. expect(rowHeight(this.$container, 0)).toEqual(31);
  56. expect(rowHeight(this.$container, 1)).toEqual(80);
  57. expect(rowHeight(this.$container, 2)).toEqual(100);
  58. });
  59. it('should not change the row height when `true` is passing', function () {
  60. handsontable({
  61. manualRowResize: [60, 50, 80]
  62. });
  63. expect(rowHeight(this.$container, 0)).toEqual(61);
  64. expect(rowHeight(this.$container, 1)).toEqual(50);
  65. expect(rowHeight(this.$container, 2)).toEqual(80);
  66. updateSettings({
  67. manualRowResize: true
  68. });
  69. expect(rowHeight(this.$container, 0)).toEqual(61);
  70. expect(rowHeight(this.$container, 1)).toEqual(50);
  71. expect(rowHeight(this.$container, 2)).toEqual(80);
  72. });
  73. it('should change the row height to defaults when undefined is passed', function () {
  74. handsontable({
  75. manualRowResize: [60, 50, 80]
  76. });
  77. expect(rowHeight(this.$container, 0)).toEqual(61);
  78. expect(rowHeight(this.$container, 1)).toEqual(50);
  79. expect(rowHeight(this.$container, 2)).toEqual(80);
  80. updateSettings({
  81. manualRowResize: void 0
  82. });
  83. expect(rowHeight(this.$container, 0)).toEqual(defaultRowHeight + 2); // + Double border
  84. expect(rowHeight(this.$container, 1)).toEqual(defaultRowHeight + 1); // + Single border
  85. expect(rowHeight(this.$container, 2)).toEqual(defaultRowHeight + 1); // + Single border
  86. });
  87. it('should reset row height', function () {
  88. handsontable({
  89. manualRowResize: true
  90. });
  91. expect(rowHeight(this.$container, 0)).toEqual(defaultRowHeight + 2);
  92. expect(rowHeight(this.$container, 1)).toEqual(defaultRowHeight + 1);
  93. expect(rowHeight(this.$container, 2)).toEqual(defaultRowHeight + 1);
  94. updateSettings({
  95. manualRowResize: true
  96. });
  97. expect(rowHeight(this.$container, 0)).toEqual(defaultRowHeight + 2);
  98. expect(rowHeight(this.$container, 1)).toEqual(defaultRowHeight + 1);
  99. expect(rowHeight(this.$container, 2)).toEqual(defaultRowHeight + 1);
  100. });
  101. it('should trigger afterRowResize event after row height changes', function () {
  102. var afterRowResizeCallback = jasmine.createSpy('afterRowResizeCallback');
  103. handsontable({
  104. data: Handsontable.helper.createSpreadsheetData(5, 5),
  105. rowHeaders: true,
  106. manualRowResize: true,
  107. afterRowResize: afterRowResizeCallback
  108. });
  109. expect(rowHeight(this.$container, 0)).toEqual(defaultRowHeight + 2);
  110. resizeRow(0, 100);
  111. expect(afterRowResizeCallback).toHaveBeenCalledWith(0, 100, void 0, void 0, void 0, void 0);
  112. expect(rowHeight(this.$container, 0)).toEqual(101);
  113. });
  114. it('should not trigger afterRowResize event if row height does not change (delta = 0)', function () {
  115. var afterRowResizeCallback = jasmine.createSpy('afterRowResizeCallback');
  116. handsontable({
  117. data: Handsontable.helper.createSpreadsheetData(5, 5),
  118. rowHeaders: true,
  119. manualRowResize: true,
  120. afterRowResize: afterRowResizeCallback
  121. });
  122. expect(rowHeight(this.$container, 0)).toEqual(defaultRowHeight + 2);
  123. resizeRow(0, defaultRowHeight);
  124. expect(afterRowResizeCallback).not.toHaveBeenCalled();
  125. expect(rowHeight(this.$container, 0)).toEqual(defaultRowHeight + 2);
  126. });
  127. it('should not trigger afterRowResize event after if row height does not change (no mousemove event)', function () {
  128. var afterRowResizeCallback = jasmine.createSpy('afterRowResizeCallback');
  129. handsontable({
  130. data: Handsontable.helper.createSpreadsheetData(5, 5),
  131. rowHeaders: true,
  132. manualRowResize: true,
  133. afterRowResize: afterRowResizeCallback
  134. });
  135. expect(rowHeight(this.$container, 0)).toEqual(defaultRowHeight + 2);
  136. var $th = this.$container.find('tbody tr:eq(0) th:eq(0)');
  137. $th.simulate('mouseover');
  138. var $resizer = this.$container.find('.manualRowResizer');
  139. var resizerPosition = $resizer.position();
  140. $resizer.simulate('mousedown', {
  141. clientY: resizerPosition.top
  142. });
  143. $resizer.simulate('mouseup');
  144. expect(afterRowResizeCallback).not.toHaveBeenCalled();
  145. expect(rowHeight(this.$container, 0)).toEqual(defaultRowHeight + 2);
  146. });
  147. it('should trigger an afterRowResize after row size changes, after double click', function (done) {
  148. var afterRowResizeCallback = jasmine.createSpy('afterRowResizeCallback');
  149. handsontable({
  150. data: Handsontable.helper.createSpreadsheetData(5, 5),
  151. rowHeaders: true,
  152. manualRowResize: true,
  153. autoRowSize: true,
  154. afterRowResize: afterRowResizeCallback
  155. });
  156. expect(rowHeight(this.$container, 0)).toEqual(defaultRowHeight + 2);
  157. var $th = this.$container.find('tbody tr:eq(2) th:eq(0)');
  158. $th.simulate('mouseover');
  159. var $resizer = this.$container.find('.manualRowResizer');
  160. var resizerPosition = $resizer.position();
  161. $resizer.simulate('mousedown', {
  162. clientY: resizerPosition.top
  163. });
  164. $resizer.simulate('mouseup');
  165. $resizer.simulate('mousedown', {
  166. clientY: resizerPosition.top
  167. });
  168. $resizer.simulate('mouseup');
  169. setTimeout(function () {
  170. expect(afterRowResizeCallback.calls.count()).toEqual(1);
  171. expect(afterRowResizeCallback.calls.argsFor(0)[0]).toEqual(2);
  172. expect(afterRowResizeCallback.calls.argsFor(0)[1]).toEqual(defaultRowHeight + 1);
  173. expect(rowHeight(spec().$container, 2)).toEqual(defaultRowHeight + 1);
  174. done();
  175. }, 1000);
  176. });
  177. it('should not trigger afterRowResize event after if row height does not change (no dblclick event)', function () {
  178. var afterRowResizeCallback = jasmine.createSpy('afterRowResizeCallback');
  179. handsontable({
  180. data: Handsontable.helper.createSpreadsheetData(5, 5),
  181. rowHeaders: true,
  182. manualRowResize: true,
  183. afterRowResize: afterRowResizeCallback
  184. });
  185. expect(rowHeight(this.$container, 0)).toEqual(defaultRowHeight + 2);
  186. var $th = this.$container.find('tbody tr:eq(2) th:eq(0)');
  187. $th.simulate('mouseover');
  188. var $resizer = this.$container.find('.manualRowResizer');
  189. var resizerPosition = $resizer.position();
  190. $resizer.simulate('mousedown', {
  191. clientY: resizerPosition.top
  192. });
  193. $resizer.simulate('mouseup');
  194. expect(afterRowResizeCallback).not.toHaveBeenCalled();
  195. expect(rowHeight(this.$container, 0)).toEqual(defaultRowHeight + 2);
  196. });
  197. it('should display the resize handle in the correct place after the table has been scrolled', function () {
  198. var hot = handsontable({
  199. data: Handsontable.helper.createSpreadsheetData(20, 20),
  200. rowHeaders: true,
  201. manualRowResize: true,
  202. height: 100,
  203. width: 200
  204. });
  205. var mainHolder = hot.view.wt.wtTable.holder;
  206. var $rowHeader = this.$container.find('.ht_clone_left tbody tr:eq(2) th:eq(0)');
  207. $rowHeader.simulate('mouseover');
  208. var $handle = this.$container.find('.manualRowResizer');
  209. $handle[0].style.background = 'red';
  210. expect($rowHeader.offset().left).toBeCloseTo($handle.offset().left, 0);
  211. expect($rowHeader.offset().top + $rowHeader.height() - 5).toBeCloseTo($handle.offset().top, 0);
  212. $(mainHolder).scrollTop(200);
  213. $(mainHolder).scroll();
  214. $rowHeader = this.$container.find('.ht_clone_left tbody tr:eq(2) th:eq(0)');
  215. $rowHeader.simulate('mouseover');
  216. expect($rowHeader.offset().left).toBeCloseTo($handle.offset().left, 0);
  217. expect($rowHeader.offset().top + $rowHeader.height() - 5).toBeCloseTo($handle.offset().top, 0);
  218. });
  219. it('should autosize selected rows after double click on handler', function (done) {
  220. handsontable({
  221. data: Handsontable.helper.createSpreadsheetData(9, 9),
  222. rowHeaders: true,
  223. manualRowResize: true
  224. });
  225. resizeRow(2, 300);
  226. var $resizer = this.$container.find('.manualRowResizer');
  227. var resizerPosition = $resizer.position();
  228. this.$container.find('.ht_clone_left tbody tr:eq(1) th:eq(0)').simulate('mousedown');
  229. this.$container.find('.ht_clone_left tbody tr:eq(2) th:eq(0)').simulate('mouseover');
  230. this.$container.find('.ht_clone_left tbody tr:eq(3) th:eq(0)').simulate('mouseover');
  231. this.$container.find('.ht_clone_left tbody tr:eq(3) th:eq(0)').simulate('mousemove');
  232. this.$container.find('.ht_clone_left tbody tr:eq(3) th:eq(0)').simulate('mouseup');
  233. setTimeout(function () {
  234. $resizer.simulate('mousedown', { clientY: resizerPosition.top });
  235. $resizer.simulate('mouseup');
  236. $resizer.simulate('mousedown', { clientY: resizerPosition.top });
  237. $resizer.simulate('mouseup');
  238. }, 600);
  239. setTimeout(function () {
  240. expect(rowHeight(spec().$container, 1)).toBeAroundValue(24);
  241. expect(rowHeight(spec().$container, 2)).toBeAroundValue(24);
  242. expect(rowHeight(spec().$container, 3)).toBeAroundValue(24);
  243. done();
  244. }, 1600);
  245. });
  246. it('should resize (expanding and narrowing) selected rows', function (done) {
  247. var hot = handsontable({
  248. data: Handsontable.helper.createSpreadsheetData(10, 20),
  249. rowHeaders: true,
  250. manualRowResize: true
  251. });
  252. resizeRow(2, 60);
  253. var $rowsHeaders = this.$container.find('.ht_clone_left tr th');
  254. this.$container.find('.ht_clone_left tbody tr:eq(1) th:eq(0)').simulate('mouseover');
  255. $rowsHeaders.eq(1).simulate('mousedown');
  256. $rowsHeaders.eq(2).simulate('mouseover');
  257. $rowsHeaders.eq(3).simulate('mouseover');
  258. $rowsHeaders.eq(3).simulate('mousemove');
  259. $rowsHeaders.eq(3).simulate('mouseup');
  260. var $resizer = this.$container.find('.manualRowResizer');
  261. var resizerPosition = $resizer.position();
  262. setTimeout(function () {
  263. $resizer.simulate('mousedown', { clientY: resizerPosition.top });
  264. $resizer.simulate('mousemove', { clientY: resizerPosition.top - $rowsHeaders.eq(3).height() + 80 });
  265. $resizer.simulate('mouseup');
  266. expect($rowsHeaders.eq(1).height()).toEqual(80);
  267. expect($rowsHeaders.eq(2).height()).toEqual(80);
  268. expect($rowsHeaders.eq(3).height()).toEqual(80);
  269. }, 600);
  270. setTimeout(function () {
  271. $resizer.simulate('mousedown', { clientY: resizerPosition.top });
  272. $resizer.simulate('mousemove', { clientY: resizerPosition.top - $rowsHeaders.eq(3).height() + 35 });
  273. $resizer.simulate('mouseup');
  274. expect($rowsHeaders.eq(1).height()).toEqual(35);
  275. expect($rowsHeaders.eq(2).height()).toEqual(35);
  276. expect($rowsHeaders.eq(3).height()).toEqual(35);
  277. done();
  278. }, 1800);
  279. });
  280. describe('handle and guide', function () {
  281. it('should display the resize handle in the proper position and with a proper size', function () {
  282. var hot = handsontable({
  283. data: [{ id: 1, name: 'Ted', lastName: 'Right' }, { id: 2, name: 'Frank', lastName: 'Honest' }, { id: 3, name: 'Joan', lastName: 'Well' }, { id: 4, name: 'Sid', lastName: 'Strong' }, { id: 5, name: 'Jane', lastName: 'Neat' }],
  284. rowHeaders: true,
  285. manualRowResize: true
  286. });
  287. var $headerTH = this.$container.find('tbody tr:eq(1) th:eq(0)');
  288. $headerTH.simulate('mouseover');
  289. var $handle = $('.manualRowResizer');
  290. expect($handle.offset().top).toBeCloseTo($headerTH.offset().top + $headerTH.outerHeight() - $handle.outerHeight() - 1, 0);
  291. expect($handle.width()).toBeCloseTo($headerTH.outerWidth(), 0);
  292. });
  293. });
  294. });