779114e6f44b1044a4079219ceaf988cb0694f394320a321b00048f5cd2a71684267616d627b9badebbe02a7a771b0b4878eb70c6b3f7153edff4195928187 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187
  1. 'use strict';
  2. describe('WalkontableBorder', function () {
  3. var $table,
  4. $container,
  5. $wrapper,
  6. debug = false;
  7. beforeEach(function () {
  8. $container = $('<div></div>');
  9. $wrapper = $('<div></div>');
  10. $container.width(100).height(200);
  11. $table = $('<table></table>');
  12. $container.append($wrapper);
  13. $wrapper.append($table);
  14. $container.appendTo('body');
  15. createDataArray();
  16. });
  17. afterEach(function () {
  18. if (!debug) {
  19. $('.wtHolder').remove();
  20. }
  21. $container.remove();
  22. });
  23. it('should add/remove border to selection when cell is clicked', function () {
  24. var wt = new Walkontable.Core({
  25. table: $table[0],
  26. data: getData,
  27. totalRows: 5,
  28. totalColumns: 5,
  29. selections: [new Walkontable.Selection({
  30. border: {
  31. width: 1,
  32. color: 'red'
  33. }
  34. })],
  35. onCellMouseDown: function onCellMouseDown(event, coords, TD) {
  36. wt.selections.current.clear();
  37. wt.selections.current.add(coords);
  38. wt.draw();
  39. }
  40. });
  41. shimSelectionProperties(wt);
  42. wt.draw();
  43. var $td1 = $table.find('tbody tr:eq(1) td:eq(0)');
  44. var $td2 = $table.find('tbody tr:eq(2) td:eq(1)');
  45. var $top = $(wt.selections.current.getBorder(wt).top);
  46. var $right = $(wt.selections.current.getBorder(wt).right);
  47. var $bottom = $(wt.selections.current.getBorder(wt).bottom);
  48. var $left = $(wt.selections.current.getBorder(wt).left);
  49. $td1.simulate('mousedown');
  50. expect($top.css('height')).toBe('1px');
  51. expect($top.position().top).toBe(23);
  52. expect($top.position().left).toBe(0);
  53. expect($right.css('width')).toBe('1px');
  54. expect($right.position().top).toBe(23);
  55. expect($right.position().left).toBe(49);
  56. expect($bottom.css('height')).toBe('1px');
  57. expect($bottom.position().top).toBe(46);
  58. expect($bottom.position().left).toBe(0);
  59. expect($left.css('width')).toBe('1px');
  60. expect($left.position().top).toBe(23);
  61. expect($left.position().left).toBe(0);
  62. $td2.simulate('mousedown');
  63. expect($top.css('height')).toBe('1px');
  64. expect($top.position().top).toBe(46);
  65. expect($top.position().left).toBe(49);
  66. expect($right.css('width')).toBe('1px');
  67. expect($right.position().top).toBe(46);
  68. expect($right.position().left).toBe(99);
  69. expect($bottom.css('height')).toBe('1px');
  70. expect($bottom.position().top).toBe(69);
  71. expect($bottom.position().left).toBe(49);
  72. expect($left.css('width')).toBe('1px');
  73. expect($left.position().top).toBe(46);
  74. expect($left.position().left).toBe(49);
  75. });
  76. it('should add/remove corner to selection when cell is clicked', function () {
  77. var wt = new Walkontable.Core({
  78. table: $table[0],
  79. data: getData,
  80. totalRows: 5,
  81. totalColumns: 5,
  82. selections: [new Walkontable.Selection({
  83. border: {
  84. width: 2,
  85. color: 'green',
  86. cornerVisible: function cornerVisible() {
  87. return true;
  88. }
  89. }
  90. }), new Walkontable.Selection({})],
  91. onCellMouseDown: function onCellMouseDown(event, coords, TD) {
  92. wt.selections.current.clear();
  93. wt.selections.current.add(coords);
  94. wt.draw();
  95. }
  96. });
  97. shimSelectionProperties(wt);
  98. wt.draw();
  99. var $td1 = $table.find('tbody tr:eq(1) td:eq(0)');
  100. var $td2 = $table.find('tbody tr:eq(2) td:eq(1)');
  101. var $corner = $(wt.selections.current.getBorder(wt).corner);
  102. $td1.simulate('mousedown');
  103. expect($corner.css('width')).toBe('5px');
  104. expect($corner.css('height')).toBe('5px');
  105. expect($corner.position().top).toBe(42);
  106. expect($corner.position().left).toBe(45);
  107. $td2.simulate('mousedown');
  108. expect($corner.css('width')).toBe('5px');
  109. expect($corner.css('height')).toBe('5px');
  110. expect($corner.position().top).toBe(65);
  111. expect($corner.position().left).toBe(95);
  112. });
  113. it('should move the fill handle / corner border to the left, if in the position it would overlap the container (e.g.: far-right)', function () {
  114. $container.css({
  115. overflow: 'hidden',
  116. width: '200px'
  117. });
  118. var wt = new Walkontable.Core({
  119. table: $table[0],
  120. data: getData,
  121. totalRows: 5,
  122. totalColumns: 4,
  123. selections: [new Walkontable.Selection({
  124. border: {
  125. width: 2,
  126. color: 'green',
  127. cornerVisible: function cornerVisible() {
  128. return true;
  129. }
  130. }
  131. }), new Walkontable.Selection({})],
  132. onCellMouseDown: function onCellMouseDown(event, coords, TD) {
  133. wt.selections.current.clear();
  134. wt.selections.current.add(coords);
  135. wt.draw();
  136. }
  137. });
  138. shimSelectionProperties(wt);
  139. wt.draw();
  140. var $td1 = $table.find('tbody tr:eq(1) td:eq(0)');
  141. var $td2 = $table.find('tbody tr:eq(3) td:eq(3)');
  142. var $td3 = $table.find('tbody tr:eq(2) td:eq(1)');
  143. var $corner = $(wt.selections.current.getBorder(wt).corner);
  144. $td1.simulate('mousedown');
  145. expect($corner.css('width')).toBe('5px');
  146. expect($corner.css('height')).toBe('5px');
  147. expect($corner.position().top).toBe(42);
  148. expect($corner.position().left).toBe(45);
  149. expect($container[0].clientWidth === $container[0].scrollWidth).toBe(true);
  150. $td2.simulate('mousedown');
  151. expect($corner.css('width')).toBe('5px');
  152. expect($corner.css('height')).toBe('5px');
  153. expect($corner.position().top).toBe(88);
  154. expect($corner.position().left).toBe(193);
  155. expect($container[0].clientWidth === $container[0].scrollWidth).toBe(true);
  156. $td3.simulate('mousedown');
  157. expect($corner.css('width')).toBe('5px');
  158. expect($corner.css('height')).toBe('5px');
  159. expect($corner.position().top).toBe(65);
  160. expect($corner.position().left).toBe(95);
  161. expect($container[0].clientWidth === $container[0].scrollWidth).toBe(true);
  162. });
  163. });