SaveText.Ru

Без имени
  1. const wrapTable = function(table) {
  2.         const tableWrapper = document.createElement('div');
  3.  
  4.         tableWrapper.classList.add('table-wrapper');
  5.         tableWrapper.innerHTML = table.outerHTML;
  6.         table.parentNode.replaceChild(tableWrapper, table);
  7.         return tableWrapper;
  8. };
  9.  
  10. const addResizeHeightButton = function(wrapper, mode) {
  11.         const button = document.createElement('button');
  12.         const tableWrapper = document.querySelector('.table-wrapper');
  13.        
  14.         if (mode === 'bottom') {
  15.                 button.classList.add('rollup-table-button');
  16.                 button.classList.add('rollup-table-button--open');
  17.                 button.classList.add('rollupt-table-button--bottom');
  18.         }
  19.         if (mode === 'right') {
  20.                 button.classList.add('rollup-table-button');
  21.                 button.classList.add('rollup-table-button--open');
  22.                 button.classList.add('rollupt-table-button--right');
  23.         }
  24.  
  25.         wrapper.appendChild(button);
  26. };
  27.  
  28. const app = function(table, mode) {
  29.         const tableHead = table.querySelector('thead');
  30.         const tableHeight = table.offsetHeight;
  31.         const tableWidth = table.offsetWidth;
  32.         const tableHeadHeight = tableHead.offsetHeight;
  33.  
  34.         const tableWrapper = wrapTable(table);
  35.        
  36.         let tableState = 'open';
  37.        
  38.         if (mode === 'bottom') {
  39.                 addResizeHeightButton(tableWrapper, mode);
  40.  
  41.                 const fullTableHeight = tableWrapper.offsetHeight;
  42.                 const button = tableWrapper.querySelector('.rollup-table-button');
  43.                 const buttonHeight = button.offsetHeight;
  44.  
  45.                 const changeHeight = function() {
  46.                         //const tableWrapper = document.querySelector('.table-wrapper');
  47.                        
  48.                         if (tableState === 'open') {
  49.                                 this.classList.remove('rollup-table-button--open');
  50.                                 this.classList.add('rollup-table-button--close');
  51.                                 //const newHeight = tableHeadHeight + buttonHeight + 'px';
  52.                                 const newHeight = tableHeadHeight + buttonHeight + 'px';
  53.                                 $(tableWrapper).animate({height: newHeight}, 400);
  54.                         } else {
  55.                                 this.classList.remove('rollup-table-button--close');
  56.                                 this.classList.add('rollup-table-button--open');
  57.                                 const newHeight = fullTableHeight + 'px';
  58.                                 $(tableWrapper).animate({height: newHeight}, 400);
  59.                                 // tableWrapper.style.height = tableWrapperHeight + 'px';
  60.                         }
  61.                        
  62.                         tableState = tableState === 'open' ? 'close' : 'open';
  63.                 };
  64.  
  65.                 const addChangeHeightFn = function() {
  66.                         const heightSizeButton = tableWrapper.querySelector('.rollup-table-button');
  67.                         heightSizeButton.addEventListener('click', changeHeight);
  68.                 };
  69.                
  70.                 addChangeHeightFn();
  71.         }
  72.        
  73.         if (mode === 'right') {
  74.                 addResizeHeightButton(tableWrapper, mode);
  75.                
  76.                 const changeWidth = function() {
  77.                         if (tableState === 'open') {
  78.                                 this.classList.remove('rollup-table-button--open');
  79.                                 this.classList.add('rollup-table-button--close');
  80.                                 const newHeight = tableWidth / 10;
  81.                                 $(tableWrapper).animate({width: 24, height: tableHeight + 16}, 400);
  82.                         } else {
  83.                                 this.classList.remove('rollup-table-button--close');
  84.                                 this.classList.add('rollup-table-button--open');
  85.                                 const newHeight = tableWidth + 'px';
  86.                                 $(tableWrapper).animate({width: newHeight}, 400);
  87.                                 // tableWrapper.style.height = tableWrapperHeight + 'px';
  88.                         }
  89.                         tableState = tableState === 'open' ? 'close' : 'open';
  90.                 };
  91.                
  92.                 const addChangeWidthFn = function() {
  93.                         const widthSizeButton = tableWrapper.querySelector('.rollup-table-button');
  94.                         widthSizeButton.addEventListener('click', changeWidth);
  95.                 };
  96.                
  97.                 addChangeWidthFn();
  98.         }
  99. }
  100.  
  101. const initBottomResize = function(){
  102.         const table = document.querySelector('.main-table');
  103.         app(table, 'bottom');
  104. };
  105.  
  106. const initRightResize = function(){
  107.         const table = document.querySelector('.second-table');
  108.         app(table, 'right');
  109. };
  110.  
  111. const initThirdTable = function(){
  112.         const table = document.querySelector('.third-table');
  113.         app(table, 'right');
  114. };
  115.  
  116. const initFourthTable = function(){
  117.         const table = document.querySelector('.fourth-table');
  118.         app(table, 'right');
  119. };
  120.  
  121. document.addEventListener("DOMContentLoaded", initBottomResize);
  122. document.addEventListener("DOMContentLoaded", initRightResize);
  123. document.addEventListener("DOMContentLoaded", initThirdTable);
  124. document.addEventListener("DOMContentLoaded", initFourthTable);
  125.  
  126.  
  127. /*
  128. $(window).on('load', function(){
  129.         const button = $('.rollup-table-button');
  130.                 let tableState = 'open';
  131.                
  132.                 const table = $('table');
  133.                 const tableHeader = table.find('thead');
  134.                 const tableHeaderFirstCell = tableHeader.find('th').eq(1);
  135.                
  136.                 const fullSizeTable = table.parent().height();
  137.                
  138.                 const smallSizeTable = tableHeaderFirstCell.height() + 8;
  139.                
  140.                 console.log(smallSizeTable);
  141.                
  142.                
  143.                 const open = function() {
  144.                         tableState = 'close';
  145.                         table.parent().animate({height: smallSizeTable}, 50);
  146.                
  147.                 };
  148.                
  149.                 const close = function() {
  150.                         tableState = 'open';
  151.                         table.parent().animate({height: fullSizeTable}, 50);
  152.                 };
  153.        
  154.        
  155.         const rollTable = function() {
  156.                 if (tableState === 'open') {
  157.                         open();
  158.                 } else {
  159.                         close();
  160.                 }
  161.                
  162.         };
  163.        
  164.         button.on('click', rollTable);
  165. });
  166. */
  167. .second-container {
  168.         display: flex;
  169.         flex-wrap: wrap;
  170. }
  171.  
  172. .second-container .table-wrapper:nth-child(1) {
  173.         margin-right: 5px;
  174. }
  175.  
  176. .second-table {
  177.         width: 500px;
  178. }
  179.  
  180. .third-table {
  181.         width: 500px;
  182. }
  183.  
  184. .table-wrapper {
  185.         overflow: hidden;
  186.         position: relative;
  187.         overflow: hidden;
  188.         //transition: height 0.6s;
  189. }
  190.  
  191. .main-table {
  192.         // transition: width 2s;
  193.         margin-bottom: 30px;
  194. }
  195.  
  196. .rollup-table-button {
  197.         position: absolute;
  198.        
  199.         display: flex;
  200.         align-items: center;
  201.         justify-content: center;
  202.        
  203.        
  204.         padding: 0;
  205.         border: none;
  206.        
  207.         background-color: lightgray;
  208.        
  209.         transition: background-color 0.2s;
  210. }
  211.  
  212. .rollupt-table-button--bottom {
  213.         left: 0;
  214.         bottom: 0;
  215.        
  216.         width: 100%;
  217.         height: 24px;
  218. }
  219.  
  220. .rollupt-table-button--right {
  221.         right: 0;
  222.         top: 0;
  223.        
  224.         width: 24px;
  225.         height: calc(100% - 16px);
  226. }
  227.  
  228. .rollup-table-button {
  229.         padding: 0;
  230.  
  231. }
  232.  
  233. .rollup-table-button::before {
  234.         content: "▲";
  235. }
  236.  
  237. .rollupt-table-button--right::before {
  238.         transform: rotate(-90deg);
  239. }
  240.  
  241. .rollup-table-button::before {
  242.         transition: transform 0.5s;
  243.         transition-delay: 0.3s;
  244. }
  245.  
  246. .rollup-table-button.rollup-table-button--close::before {
  247.         transform: rotate(-180deg);
  248. }
  249.  
  250. .rollupt-table-button--right.rollup-table-button--close::before {
  251.         transform: rotate(90deg);
  252. }
  253.  
  254.  
  255. .rollup-table-button:hover {
  256.         background-color: gray;
  257. }
  258.  
  259. .rollup-table-button:active {
  260.         opacity: 0.9;
  261. }

Share with your friends:

Print