Want more features on Pastebin? Sign Up, it's FREE!
Guest

Table Jquery

By: a guest on Oct 13th, 2012  |  syntax: JavaScript  |  size: 5.65 KB  |  views: 32  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. (function (window, ElementPrototype, ArrayPrototype, polyfill) {
  2.         function NodeList() { [polyfill] }
  3.         NodeList.prototype.length = ArrayPrototype.length;
  4.  
  5.         ElementPrototype.matchesSelector = ElementPrototype.matchesSelector ||
  6.         ElementPrototype.mozMatchesSelector ||
  7.         ElementPrototype.msMatchesSelector ||
  8.         ElementPrototype.oMatchesSelector ||
  9.         ElementPrototype.webkitMatchesSelector ||
  10.         function matchesSelector(selector) {
  11.                 return ArrayPrototype.indexOf.call(this.parentNode.querySelectorAll(selector), this) > -1;
  12.         };
  13.  
  14.         ElementPrototype.ancestorQuerySelectorAll = ElementPrototype.ancestorQuerySelectorAll ||
  15.         ElementPrototype.mozAncestorQuerySelectorAll ||
  16.         ElementPrototype.msAncestorQuerySelectorAll ||
  17.         ElementPrototype.oAncestorQuerySelectorAll ||
  18.         ElementPrototype.webkitAncestorQuerySelectorAll ||
  19.         function ancestorQuerySelectorAll(selector) {
  20.                 for (var cite = this, newNodeList = new NodeList; cite = cite.parentElement;) {
  21.                         if (cite.matchesSelector(selector)) ArrayPrototype.push.call(newNodeList, cite);
  22.                 }
  23.  
  24.                 return newNodeList;
  25.         };
  26.  
  27.         ElementPrototype.ancestorQuerySelector = ElementPrototype.ancestorQuerySelector ||
  28.         ElementPrototype.mozAncestorQuerySelector ||
  29.         ElementPrototype.msAncestorQuerySelector ||
  30.         ElementPrototype.oAncestorQuerySelector ||
  31.         ElementPrototype.webkitAncestorQuerySelector ||
  32.         function ancestorQuerySelector(selector) {
  33.                 return this.ancestorQuerySelectorAll(selector)[0] || null;
  34.         };
  35. })(this, Element.prototype, Array.prototype);
  36.  
  37. function generateTableRow() {
  38.         var emptyColumn = document.createElement('tr');
  39.  
  40.         emptyColumn.innerHTML = '<td><a class="cut"><i class="icon-remove"></i></a><span contenteditable></span></td>' +
  41.                                                         '<td><span contenteditable></span></td>' +
  42.                                                         '<td><span data-prefix>£</span><span contenteditable>0.00</span></td>' +
  43.                                                         '<td><span contenteditable>0</span></td>' +
  44.                                                         '<td><span data-prefix>£</span><span>0.00</span></td>';
  45.  
  46.         return emptyColumn;
  47. }
  48.  
  49. function parseFloatHTML(element) {
  50.         return parseFloat(element.innerHTML.replace(/[^\d\.\-]+/g, '')) || 0;
  51. }
  52.  
  53. function parsePrice(number) {
  54.         return number.toFixed(2).replace(/(\d)(?=(\d\d\d)+([^\d]|$))/g, '$1,');
  55. }
  56.  
  57. function updateNumber(e) {
  58.         var
  59.         activeElement = document.activeElement,
  60.         value = parseFloat(activeElement.innerHTML),
  61.         wasPrice = activeElement.innerHTML == parsePrice(parseFloatHTML(activeElement));
  62.  
  63.         if (!isNaN(value) && (e.keyCode == 38 || e.keyCode == 40 || e.wheelDeltaY)) {
  64.                 e.preventDefault();
  65.  
  66.                 value += e.keyCode == 38 ? 1 : e.keyCode == 40 ? -1 : Math.round(e.wheelDelta * 0.025);
  67.                 value = Math.max(value, 0);
  68.  
  69.                 activeElement.innerHTML = wasPrice ? parsePrice(value) : value;
  70.         }
  71.  
  72.         updateInvoice();
  73. }
  74.  
  75. function updateInvoice() {
  76.         var total = 0;
  77.         var cells, price, total, a, i;
  78.  
  79.         for (var a = document.querySelectorAll('table.inventory tbody tr'), i = 0; a[i]; ++i) {
  80.  
  81.                 cells = a[i].querySelectorAll('span:last-child');
  82.  
  83.                 price = parseFloatHTML(cells[2]) * parseFloatHTML(cells[3]);
  84.  
  85.                 total += price;
  86.  
  87.                 cells[4].innerHTML = price;
  88.         }
  89.  
  90.         cells = document.querySelectorAll('table.balance td:last-child span:last-child');
  91.  
  92.         cells[0].innerHTML = total;
  93.  
  94.         cells[2].innerHTML = document.querySelector('table.meta tr:last-child td:last-child span:last-child').innerHTML = parsePrice(total - parseFloatHTML(cells[1]));
  95.  
  96.         var prefix = document.querySelector('#prefix').innerHTML;
  97.         for (a = document.querySelectorAll('[data-prefix]'), i = 0; a[i]; ++i) a[i].innerHTML = prefix;
  98.         for (a = document.querySelectorAll('span[data-prefix] + span'), i = 0; a[i]; ++i) if (document.activeElement != a[i]) a[i].innerHTML = parsePrice(parseFloatHTML(a[i]));
  99. }
  100. function onContentLoad() {
  101.         updateInvoice();
  102.  
  103.         var
  104.         input = document.querySelector('input'),
  105.         image = document.querySelector('img');
  106.  
  107.         function onClick(e) {
  108.                 var element = e.target.querySelector('[contenteditable]'), row;
  109.  
  110.                 element && e.target != document.documentElement && e.target != document.body && element.focus();
  111.  
  112.                 if (e.target.matchesSelector('.add')) {
  113.                         document.querySelector('table.inventory tbody').appendChild(generateTableRow());
  114.                 }
  115.                 else if (e.target.className == 'icon-remove') {
  116.                         row = e.target.ancestorQuerySelector('tr');
  117.  
  118.                         row.parentNode.removeChild(row);
  119.                 }
  120.  
  121.                 updateInvoice();
  122.         }
  123.  
  124.         function onEnterCancel(e) {
  125.                 e.preventDefault();
  126.  
  127.                 image.classList.add('hover');
  128.         }
  129.  
  130.         function onLeaveCancel(e) {
  131.                 e.preventDefault();
  132.  
  133.                 image.classList.remove('hover');
  134.         }
  135.  
  136.         function onFileInput(e) {
  137.                 image.classList.remove('hover');
  138.  
  139.                 var
  140.                 reader = new FileReader(),
  141.                 files = e.dataTransfer ? e.dataTransfer.files : e.target.files,
  142.                 i = 0;
  143.  
  144.                 reader.onload = onFileLoad;
  145.  
  146.                 while (files[i]) reader.readAsDataURL(files[i++]);
  147.         }
  148.  
  149.         function onFileLoad(e) {
  150.                 var data = e.target.result;
  151.  
  152.                 image.src = data;
  153.         }
  154.  
  155.         if (window.addEventListener) {
  156.                 document.addEventListener('click', onClick);
  157.  
  158.                 document.addEventListener('mousewheel', updateNumber);
  159.                 document.addEventListener('keydown', updateNumber);
  160.  
  161.                 document.addEventListener('keydown', updateInvoice);
  162.                 document.addEventListener('keyup', updateInvoice);
  163.  
  164.                 input.addEventListener('focus', onEnterCancel);
  165.                 input.addEventListener('mouseover', onEnterCancel);
  166.                 input.addEventListener('dragover', onEnterCancel);
  167.                 input.addEventListener('dragenter', onEnterCancel);
  168.  
  169.                 input.addEventListener('blur', onLeaveCancel);
  170.                 input.addEventListener('dragleave', onLeaveCancel);
  171.                 input.addEventListener('mouseout', onLeaveCancel);
  172.  
  173.                 input.addEventListener('drop', onFileInput);
  174.                 input.addEventListener('change', onFileInput);
  175.         }
  176. }
  177.  
  178. window.addEventListener && document.addEventListener('DOMContentLoaded', onContentLoad);
clone this paste RAW Paste Data