JAVASCRIPT   31

Epp

Guest on 29th April 2022 01:28:29 AM

  1. Epp = {};
  2. Epp.Table = {};
  3.  
  4. var implode = function(glue, arr) {
  5.     s = '';
  6.     if (arr.length > 0) {
  7.         s = arr;
  8.     }
  9.     for (i = 1, n = arr.length; i < n; i++) {
  10.         s += glue + arr;
  11.     }
  12.     return s;
  13. };
  14.  
  15. var replaceAll = function(find, replace, str) {
  16.     return str.replace(new RegExp(find, 'g'), replace);
  17. };
  18.  
  19. var parseHTML = function(str) {
  20.     var tmp = document.implementation.createHTMLDocument();
  21.     tmp.body.innerHTML = str;
  22.     return tmp.body.children;
  23. };
  24. var addClass = function(el, className) {
  25.     if (el.classList) {
  26.         el.classList.add(className);
  27.     } else {
  28.         el.className += ' ' + className;
  29.     }
  30. };
  31. var removeClass = function(el, className) {
  32.     if (el.classList)
  33.         el.classList.remove(className);
  34.     else
  35.         el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
  36. };
  37.  
  38. function Table(opt) {
  39.     this.table = opt.table;
  40.     this.provider = opt.provider;
  41.     this.columns = opt.columns;
  42.     this.onSelectionChange = opt.onSelectionChange;
  43.     this.onColumnHeaderClick = opt.onColumnHeaderClick;
  44.     this.style = {
  45.         row: "row",
  46.         rowOdd: "row-odd",
  47.         rowEven: "row-even",
  48.         rowSelected: "row-selected"
  49.     };
  50.     this.sortBy = opt.columns[0];
  51.     this.sortDirection = 0;
  52.  
  53.     this.handleTBodyClick = function(e) {
  54.         el = e.toElement;
  55.         var rows = this.tbody.children;
  56.         var achou = false;
  57.         for (var i = 0; i < rows.length; i++) {
  58.             if (achou) {
  59.                 removeClass(rows[i], this.style.rowSelected);
  60.                 addClass(rows[i], (i % 2) ? this.style.rowOdd : this.style.rowEven);
  61.                 continue;
  62.             }
  63.  
  64.             var cols = rows[i].children;
  65.             for (var j = 0; j < cols.length; j++) {
  66.                 if (cols[j].contains(el)) {
  67.                     achou = true;
  68.                     this.selectedColIndex = j;
  69.                     this.selectedIndex = i;
  70.                     this.selected = true;
  71.  
  72.                     addClass(rows[i], this.style.rowSelected);
  73.                     removeClass(rows[i], (i % 2) ? this.style.rowOdd : this.style.rowEven);
  74.  
  75.                     if (this.onSelectionChange) {
  76.                         this.onSelectionChange();
  77.                     }
  78.                     break;
  79.                 }
  80.             }
  81.  
  82.             if (!achou) {
  83.                 removeClass(rows[i], this.style.rowSelected);
  84.                 addClass(rows[i], (i % 2) ? this.style.rowOdd : this.style.rowEven);
  85.             }
  86.         }
  87.     };
  88.  
  89.     this.handleTHeadClick = function(e) {
  90.         el = e.toElement;
  91.         var cols = this.thead.children[0].children;
  92.         for (i = 0; i < cols.length; i++) {
  93.             if (cols[i] === el) {
  94.                 this.sortBy = this.columns[i];
  95.                 this.sortDirection = this.sortDirection === 0 ? 1 : 0;
  96.  
  97.                 if (this.onColumnHeaderClick) {
  98.                     this.onColumnHeaderClick();
  99.                 }
  100.  
  101.                 if (this.columns[i].onClick) {
  102.                     this.columns[i].onClick();
  103.                 }
  104.                 break;
  105.             }
  106.         }
  107.     };
  108.  
  109.     this.setSortColumn = function() {
  110.         triangle
  111.     };
  112.  
  113.     this.setSortDirection = function() {
  114.         removeClass(triangle, this.getSortDirection)
  115.     }
  116.  
  117.     this.setItems = function(i) {
  118.         this.items = i;
  119.         this.refresh();
  120.     };
  121.  
  122.     this.refresh = function() {
  123.         this.tbody.innerHTML = '';
  124.         for (var i in this.items) {
  125.             tr = document.createElement("tr");
  126.             tr.addEventListener('click', this.handleTBodyClick.bind(this));
  127. //            addClass(tr, this.style.row);
  128.             addClass(tr, (i % 2) ? this.style.rowOdd : this.style.rowEven);
  129.  
  130.             for (var j in this.columns) {
  131.                 td = document.createElement("td");
  132.                 td.innerHTML = this.columns[j].render(this.columns[j], this.items[i]);
  133.                 tr.appendChild(td);
  134.             }
  135.             this.tbody.appendChild(tr);
  136.         }
  137.     };
  138.  
  139.     this.create = function(table) {
  140.         this.table = table;
  141.         this.thead = document.createElement('thead');
  142.         tr = document.createElement('tr');
  143.         for (var i in this.columns) {
  144.             th = document.createElement('th');
  145.             th.textContent = this.columns[i].text;
  146.  
  147.             triangle = document.createElement('span');
  148. //            addClass(triangle, 'arrow-down');
  149. //          triangle.setAttribute('style', 'border-bottom: none; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 4px solid #000');
  150.  
  151.             th.appendChild(triangle);
  152.  
  153.             if (this.columns[i].className) {
  154.                 addClass(th, this.columns[i].className);
  155.             }
  156.             tr.appendChild(th);
  157.         }
  158.         tr.addEventListener('click', this.handleTHeadClick.bind(this));
  159.         this.thead.appendChild(tr);
  160.         this.table.appendChild(this.thead);
  161.         this.tbody = document.createElement('tbody');
  162.         this.table.appendChild(this.tbody);
  163.     };
  164. }
  165. ;
  166.  
  167. var CellRender = {
  168.     Text: function(column, item) {
  169.         return item[column.name];
  170.     },
  171.     CheckBox: function(column, item) {
  172.         return "<input type=\"radio\" name=\"" + column.name + "\" value=\"" + item[column.name] + "\">";
  173.     }
  174. };
  175.  
  176. function Column(opt) {
  177.     this.name = opt.name;
  178.     this.text = opt.text;
  179.     this.className = opt.className || '';
  180.     this.render = opt.render || CellRender.Text;
  181.     this.onClick = opt.onClick;
  182. }
  183.  
  184. Epp.CellRender = {};
  185. Epp.CellRender.Text = function(n) {
  186.     return {
  187.         name: n,
  188.         render: function(item) {
  189.             return item[this.name];
  190.         }
  191.     };
  192. };
  193. Epp.CellRender.Link = function(n) {
  194.     return {
  195.         name: n,
  196.         render: function(item) {
  197.             return "<a href=\"#\">" + item[this.name] + "</a>";
  198.         }
  199.     };
  200. };
  201. Epp.CellRender.StaticText = function(n) {
  202.     return {
  203.         text: n,
  204.         render: function(item) {
  205.             return this.text;
  206.         }
  207.     };
  208. };
  209. Epp.CellRender.StaticButton = function(n) {
  210.     return {
  211.         name: n,
  212.         render: function(item) {
  213.             return "<button type=\"button\">" + this.name + "</button>";
  214.         }
  215.     };
  216. };

Raw Paste


Login or Register to edit or fork this paste. It's free.