JorekTheGlitch

pagination.html

Jan 22nd, 2021 (edited)
907
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2.  
  3. <head>
  4.     <title>Paginator</title>
  5.     <style>
  6.         .pagination-container {
  7.             height: 25px;
  8.             display: flex;
  9.             justify-content: center;
  10.         }
  11.         .pagination-entry {
  12.             width: fit-content;
  13.             background: inherit;
  14.             border: 0px solid #a0a0a0;
  15.             padding: 5px;
  16.             margin: 0 10px;
  17.         }
  18.         .pagination-current {
  19.             width: 25px;
  20.             background: #000;
  21.             color: #fff;
  22.             border-radius: 50%;
  23.         }
  24.         .switch {
  25.             height: inherit;
  26.             border-radius: 50%;
  27.         }
  28.     </style>
  29.     <script>
  30.         function createTerminalButton(text) {
  31.             let tButton = document.createElement('div');
  32.             tButton.classList.add('switch');
  33.             return tButton;
  34.         }
  35.         function draw(root, page_no, total, callback) {
  36.             if (total < 2) {
  37.                 root.style.display = 'none';
  38.                 return;
  39.             };
  40.             let nums = new Array();
  41.             let triple = [page_no-1, page_no, page_no+1].filter(
  42.                 (item, index, _)=>(0<item)&(item<=total)
  43.             );
  44.             if ((triple.length==3)|(triple[0]!=1))
  45.                 nums.push('←');
  46.             if (triple[0]>1) {
  47.                 nums.push(1);
  48.                 nums.push('···');
  49.             };
  50.             nums = nums.concat(triple);
  51.             let last = triple[triple.length-1];
  52.             if (last<total) {
  53.                 nums.push('···');
  54.                 nums.push(total);
  55.             };
  56.             if ((triple.length==3)|(last!=total))
  57.                 nums.push('→');
  58.             callback = callback || function () {};
  59.             nums.forEach((item, index, array) => {
  60.                 let entry;
  61.                 if (!isNaN(item)) {
  62.                     entry = document.createElement('button');
  63.                     entry.append(document.createTextNode(item));
  64.                 } else if (item in ['←', '→']) {
  65.                     createTerminalButton(item);
  66.                     let shift = (item == '←') ? -1 : +1;
  67.                     item += shift;
  68.                 } else {
  69.                     entry = document.createElement('div');
  70.                     entry.append(document.createTextNode(item));
  71.                 }
  72.                 if (entry.tagName=='button')
  73.                     entry.onclick = (e) => callback(item);
  74.                 entry.classList.add('pagination-entry');
  75.                 switch (item) {
  76.                     case page_no:
  77.                         entry.classList.add('pagination-current');
  78.                         break;
  79.                 }
  80.                 root.append(entry);
  81.             });
  82.         };
  83.     </script>
  84. </head>
  85.  
  86. <body>
  87.     <div id="1" class="pagination-container">
  88.     </div>
  89.     <div id="2" class="pagination-container">
  90.     </div>
  91.     <div id="3" class="pagination-container">
  92.     </div>
  93.     <div id="4" class="pagination-container">
  94.     </div>
  95.     <div id="5" class="pagination-container">
  96.     </div>
  97.     <div id="6" class="pagination-container">
  98.     </div>
  99.     <div id="7" class="pagination-container">
  100.     </div>
  101.     <script defer>
  102.         for (let pos=1; pos<8; pos++) {
  103.             draw(document.getElementById(pos), pos, 7, console.log);
  104.         }
  105.     </script>
  106. </body>
RAW Paste Data