js lint init

.gitignore

@@ -9,3 +9,4 @@ tmp/
 /Gemfile.lock
 /dist/
 /_site/
+/.cache/

js/src/app/charts.js

@@ -2,15 +2,15 @@
   $(document).ready(function () {
 
     $().peity && $('[data-spark]').each(function () {
-      var $this = $(this),
+      const $this = $(this),
         data = $this.attr('data-spark'),
         color = $this.attr('data-spark-color') || 'blue',
         type = $this.attr('data-spark-type') || 'line';
 
-      var $div = $('<div />').html(data);
+      const $div = $('<div />').html(data);
       $this.append($div);
 
-      var strokeColor = tabler.colors[color],
+      let strokeColor = tabler.colors[color],
         fillColor = tabler.colors[color];
 
       if (type === 'donut' || type === 'pie') {
@@ -125,5 +125,5 @@ if (window.Apex) {
         show: false
       }
     }
-  }
+  };
 }

js/src/tabler.js

@@ -0,0 +1,114 @@
+const tabler = {
+  colorVariation: function (color, variation) {
+    const colorValue = this.colors[color];
+
+    if (colorValue) {
+      switch (variation) {
+      case 'light':
+        return this.mixColors(colorValue, '#ffffff', 70);
+      case 'lighten':
+        return this.mixColors(colorValue, '#ffffff', 30);
+      case 'lightest':
+        return this.mixColors(colorValue, '#ffffff', 10);
+      case 'dark':
+        return this.mixColors(colorValue, '#000000', 80);
+      case 'darken':
+        return this.mixColors(colorValue, '#000000', 40);
+      case 'darkest':
+        return this.mixColors(colorValue, '#000000', 20);
+      }
+
+      return colorValue;
+    }
+
+    throw new Error('Wrong color: ' + color);
+  },
+
+  hexToRgbA: function (hex, opacity) {
+    let c;
+
+    opacity = opacity || 1;
+
+    if (/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)) {
+      c = hex.substring(1).split('');
+      if (c.length === 3) {
+        c = [c[0], c[0], c[1], c[1], c[2], c[2]];
+      }
+      c = '0x' + c.join('');
+      return 'rgba(' + [(c >> 16) & 255, (c >> 8) & 255, c & 255].join(',') + ',' + opacity + ')';
+    }
+    throw new Error('Bad Hex');
+  },
+
+  mixColors: function (color_1, color_2, weight) {
+    color_1 = color_1.substr(1);
+    color_2 = color_2.substr(1);
+
+    function d2h(d) {
+      return d.toString(16);
+    }
+
+    function h2d(h) {
+      return parseInt(h, 16);
+    }
+
+    weight = (typeof(weight) !== 'undefined') ? weight : 50;
+
+    let color = '#';
+
+    for (let i = 0; i <= 5; i += 2) {
+      let v1 = h2d(color_1.substr(i, 2)),
+        v2 = h2d(color_2.substr(i, 2));
+
+      let val = d2h(Math.floor(v2 + (v1 - v2) * (weight / 100.0)));
+
+      while (val.length < 2) {
+        val = '0' + val;
+      }
+
+      color += val;
+    }
+
+    return color;
+  },
+
+  toggleFullscreen: function (elem) {
+    elem = elem || document.documentElement;
+    if (!document.fullscreenElement && !document.mozFullScreenElement &&
+      !document.webkitFullscreenElement && !document.msFullscreenElement) {
+      if (elem.requestFullscreen) {
+        elem.requestFullscreen();
+      } else if (elem.msRequestFullscreen) {
+        elem.msRequestFullscreen();
+      } else if (elem.mozRequestFullScreen) {
+        elem.mozRequestFullScreen();
+      } else if (elem.webkitRequestFullscreen) {
+        elem.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
+      }
+    } else {
+      if (document.exitFullscreen) {
+        document.exitFullscreen();
+      } else if (document.msExitFullscreen) {
+        document.msExitFullscreen();
+      } else if (document.mozCancelFullScreen) {
+        document.mozCancelFullScreen();
+      } else if (document.webkitExitFullscreen) {
+        document.webkitExitFullscreen();
+      }
+    }
+  }
+};
+
+
+$(document).ready(function () {
+  const $body = $('body');
+
+  $body.on('click', '[data-toggle="sidebar"]', function (e) {
+    $body.toggleClass('sidebar-opened');
+
+    e.preventDefault();
+    return false;
+  });
+});
+
+window.tabler = tabler;

js/ui-kit.js

@@ -1,114 +0,0 @@
-var tabler = {
-    colorVariation: function (color, variation) {
-        var colorValue = this.colors[color];
-
-        if (colorValue) {
-            switch (variation) {
-                case 'light':
-                    return this.mixColors(colorValue, '#ffffff', 70);
-                case 'lighten':
-                    return this.mixColors(colorValue, '#ffffff', 30);
-                case 'lightest':
-                    return this.mixColors(colorValue, '#ffffff', 10);
-                case 'dark':
-                    return this.mixColors(colorValue, '#000000', 80);
-                case 'darken':
-                    return this.mixColors(colorValue, '#000000', 40);
-                case 'darkest':
-                    return this.mixColors(colorValue, '#000000', 20);
-            }
-
-            return colorValue;
-        }
-
-        throw new Error('Wrong color: ' + color);
-    },
-
-    hexToRgbA: function (hex, opacity) {
-        var c;
-
-        opacity = opacity || 1;
-
-        if (/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)) {
-            c = hex.substring(1).split('');
-            if (c.length === 3) {
-                c = [c[0], c[0], c[1], c[1], c[2], c[2]];
-            }
-            c = '0x' + c.join('');
-            return 'rgba(' + [(c >> 16) & 255, (c >> 8) & 255, c & 255].join(',') + ',' + opacity + ')';
-        }
-        throw new Error('Bad Hex');
-    },
-
-    mixColors: function (color_1, color_2, weight) {
-        color_1 = color_1.substr(1);
-        color_2 = color_2.substr(1);
-
-        function d2h(d) {
-            return d.toString(16);
-        }
-
-        function h2d(h) {
-            return parseInt(h, 16);
-        }
-
-        weight = (typeof(weight) !== 'undefined') ? weight : 50;
-
-        var color = '#';
-
-        for (var i = 0; i <= 5; i += 2) {
-            var v1 = h2d(color_1.substr(i, 2)),
-                v2 = h2d(color_2.substr(i, 2));
-
-            var val = d2h(Math.floor(v2 + (v1 - v2) * (weight / 100.0)));
-
-            while (val.length < 2) {
-                val = '0' + val;
-            }
-
-            color += val;
-        }
-
-        return color;
-    },
-
-    toggleFullscreen: function (elem) {
-        elem = elem || document.documentElement;
-        if (!document.fullscreenElement && !document.mozFullScreenElement &&
-            !document.webkitFullscreenElement && !document.msFullscreenElement) {
-            if (elem.requestFullscreen) {
-                elem.requestFullscreen();
-            } else if (elem.msRequestFullscreen) {
-                elem.msRequestFullscreen();
-            } else if (elem.mozRequestFullScreen) {
-                elem.mozRequestFullScreen();
-            } else if (elem.webkitRequestFullscreen) {
-                elem.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
-            }
-        } else {
-            if (document.exitFullscreen) {
-                document.exitFullscreen();
-            } else if (document.msExitFullscreen) {
-                document.msExitFullscreen();
-            } else if (document.mozCancelFullScreen) {
-                document.mozCancelFullScreen();
-            } else if (document.webkitExitFullscreen) {
-                document.webkitExitFullscreen();
-            }
-        }
-    }
-};
-
-
-$(document).ready(function () {
-    var $body = $('body');
-
-    $body.on('click', '[data-toggle="sidebar"]', function (e) {
-        $body.toggleClass('sidebar-opened');
-
-        e.preventDefault();
-        return false;
-    });
-});
-
-window.tabler = tabler;

package.json

@@ -6,7 +6,10 @@
     "start": "npm-run-all --parallel watch docs-serve",
     "bundlesize": "bundlesize",
     "linkinator": "linkinator _gh_pages --recurse --skip \"^(?!http://localhost)\"",
+    "lint": "npm-run-all --parallel js-lint css-lint",
     "docs-serve": "hugo server --port 9001 --disableFastRender",
+    "css-main": "npm-run-all css-lint css-compile-main css-prefix-main css-minify-main css-copy",
+    "js-lint": "eslint --cache --cache-location .cache/.eslintcache js/src build/",
     "watch": "npm-run-all --parallel watch-*",
     "watch-css": "nodemon --watch scss/ --ext scss --exec \"npm run css-main\"",
     "watch-js": "nodemon --watch js/src/ --ext js --exec \"npm run js-compile\""
@@ -21,6 +24,14 @@
   "bugs": {
     "url": "https://github.com/tabler/tabler/issues"
   },
+  "engines": {
+    "node": ">=8"
+  },
+  "files": [
+    "dist/{css,js}/*.{css,js,map}",
+    "js/{src,dist}/**/*.{js,map}",
+    "scss/**/*.scss"
+  ],
   "homepage": "https://tabler.io",
   "devDependencies": {
     "apexcharts": "3.6.2",
@@ -28,6 +39,12 @@
     "bundlesize": "0.15.3",
     "http-server": "0.11.1",
     "hugo-bin": "0.42.0",
-    "popper.js": "1.15.0"
+    "popper.js": "1.15.0",
+    "npm-run-all": "4.1.5",
+    "nodemon": "1.18.11",
+    "eslint": "5.16.0",
+    "eslint-config-xo": "0.26.0",
+    "eslint-plugin-import": "2.16.0",
+    "eslint-plugin-unicorn": "8.0.2"
   }
 }