diff --git a/.babelrc b/.babelrc new file mode 100644 index 0000000000000000000000000000000000000000..a29ac9986c16f6d43d17626144d9c312fbe7d0b9 --- /dev/null +++ b/.babelrc @@ -0,0 +1,5 @@ +{ + "presets": [ + "@babel/preset-env" + ] +} diff --git a/build/banner.js b/build/banner.js index c1720f251309f038d16a0f62a684bce0762af95d..107c2d738e2c4f531ac7c74b8959331510ae107b 100644 --- a/build/banner.js +++ b/build/banner.js @@ -1,7 +1,7 @@ 'use strict'; -const pkg = require('../package.json'); -const year = new Date().getFullYear(); +const pkg = require('../package.json'), + year = new Date().getFullYear(); function getBanner(pluginFilename) { return `/*! diff --git a/build/browsersync.js b/build/browsersync.js index 2f2220e48b1f7c9fbe9e207114beb4ba3df07714..592c6bc56d19d23ddefcaf323600894e756800cc 100755 --- a/build/browsersync.js +++ b/build/browsersync.js @@ -2,7 +2,6 @@ const bs = require('browser-sync').create(); bs.init({ watch: true, - port: 4567, server: { routes: { '/': 'tmp', diff --git a/build/rollup.config.js b/build/rollup.config.js index 039b94ca7fd5d1da5c3cae15d562d00e74b95c4a..ab615a289b8b1fbd4273d8084cf35b133659da8d 100644 --- a/build/rollup.config.js +++ b/build/rollup.config.js @@ -1,56 +1,43 @@ 'use strict'; -const path = require('path'); -const babel = require('rollup-plugin-babel'); -const resolve = require('rollup-plugin-node-resolve'); -const banner = require('./banner.js'); - const BUNDLE = process.env.BUNDLE === 'true'; -const ESM = process.env.ESM === 'true'; -let fileDest = `tabler${ESM ? '.esm' : ''}`; -const external = ['popper.js']; -const plugins = [ - babel({ - // Only transpile our source code - exclude: 'node_modules/**', - // Include only required helpers - externalHelpersWhitelist: [ - 'defineProperties', - 'createClass', - 'inheritsLoose', - 'defineProperty', - 'objectSpread', - ], - }), -]; +import path from 'path'; +import babel from 'rollup-plugin-babel'; +import resolve from 'rollup-plugin-node-resolve'; +import minify from 'rollup-plugin-babel-minify'; -const globals = { - 'popper.js': 'Popper', -}; + +const fileDest = 'tabler', + banner = require('./banner'); + +let plugins = [ + resolve() +]; if (BUNDLE) { - fileDest += '.bundle'; - // Remove last entry in external array to bundle Popper - external.pop(); - delete globals['popper.js']; - plugins.push(resolve()); + plugins = [plugins, ...[ + babel({ + exclude: 'node_modules/**' + }), + minify({ + comments: false + }) + ]]; } -const rollupConfig = { - input: path.resolve(__dirname, '../js/tabler.js'), +module.exports = { + input: { + tabler: path.resolve(__dirname, '../js/tabler.js'), + 'tabler-charts': path.resolve(__dirname, '../js/tabler-charts.js'), + demo: path.resolve(__dirname, '../js/demo.js') + }, output: { banner, - file: path.resolve(__dirname, `../dist/js/${fileDest}.js`), - format: ESM ? 'esm' : 'umd', - globals, + // name: 'tabler', + dir: path.resolve(__dirname, `../dist/js/`), + entryFileNames: BUNDLE ? '[name].min.js' : '[name].js', + format: 'cjs' }, - external, plugins, }; - -if (!ESM) { - rollupConfig.output.name = 'tabler'; -} - -module.exports = rollupConfig; diff --git a/js/autosize.js b/js/autosize.js deleted file mode 100644 index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..0000000000000000000000000000000000000000 diff --git a/js/demo.js b/js/demo.js index 2f2288bae671d31161b51ee1a02b4e134427b13b..ba1a01550f44282b863a7dd211f3eecf6cdd0c6e 100644 --- a/js/demo.js +++ b/js/demo.js @@ -192,10 +192,4 @@ Init demo (function () { const demo = new TablerDemo(); window.DEMO = demo; - - let elem = document.getElementById('layout-manager'); - - if (elem) { - demo.renderManagerHtml(elem); - } })(); diff --git a/js/polyfill.js b/js/polyfill.js deleted file mode 100644 index ad9a93a7c160f02945911772460eb8a1bcb003db..0000000000000000000000000000000000000000 --- a/js/polyfill.js +++ /dev/null @@ -1 +0,0 @@ -'use strict'; diff --git a/js/charts.js b/js/tabler-charts.js similarity index 65% rename from js/charts.js rename to js/tabler-charts.js index d6e798d473123244980f023a8d82c149c0ee8396..10a378e7f27517756f25d08a6efe7ce9d44d8a48 100644 --- a/js/charts.js +++ b/js/tabler-charts.js @@ -1,38 +1,38 @@ -(function($) { - $(document).ready(function() { +(function ($) { + $(document).ready(function () { $().peity && - $('[data-spark]').each(function() { - const $this = $(this), - data = $this.attr('data-spark'), - color = $this.attr('data-spark-color') || 'blue', - type = $this.attr('data-spark-type') || 'line'; - - const $div = $('
').html(data); - $this.append($div); - - let strokeColor = tabler.colors[color], - fillColor = tabler.colors[color]; - - if (type === 'donut' || type === 'pie') { - fillColor = [fillColor, tabler.hexToRgbA(fillColor, 0.1)]; - } else if (type === 'bar') { - fillColor = [fillColor]; - } else if (type === 'line') { - fillColor = tabler.hexToRgbA(fillColor, 0.1); - } - - $div.peity(type, { - width: $this.width(), - height: $this.height(), - // max: 100, - // min: 0, - stroke: strokeColor, - strokeWidth: 2, - fill: fillColor, - padding: 0.2, - innerRadius: type === 'donut' ? 17 : 0, - }); + $('[data-spark]').each(function () { + const $this = $(this), + data = $this.attr('data-spark'), + color = $this.attr('data-spark-color') || 'blue', + type = $this.attr('data-spark-type') || 'line'; + + const $div = $('
').html(data); + $this.append($div); + + let strokeColor = tabler.colors[color], + fillColor = tabler.colors[color]; + + if (type === 'donut' || type === 'pie') { + fillColor = [fillColor, tabler.hexToRgbA(fillColor, 0.1)]; + } else if (type === 'bar') { + fillColor = [fillColor]; + } else if (type === 'line') { + fillColor = tabler.hexToRgbA(fillColor, 0.1); + } + + $div.peity(type, { + width: $this.width(), + height: $this.height(), + // max: 100, + // min: 0, + stroke: strokeColor, + strokeWidth: 2, + fill: fillColor, + padding: 0.2, + innerRadius: type === 'donut' ? 17 : 0, }); + }); }); })(jQuery); diff --git a/package.json b/package.json index 05158db6e8f960203c6d47afb70d5fe4b6c24255..ab4c1483e1a917c0405f7b59ddd2e51bbcd10cb3 100644 --- a/package.json +++ b/package.json @@ -24,12 +24,9 @@ "watch-js": "nodemon --watch js/ --ext js --exec \"npm run js-compile-standalone\"", "js": "npm-run-all js-compile js-minify", "js-lint": "eslint --cache --cache-location .cache/.eslintcache js build/", - "js-compile": "npm-run-all --parallel js-compile-* --sequential js-minify", + "js-compile": "npm-run-all --sequential js-compile-*", "js-compile-standalone": "rollup --environment BUNDLE:false --config build/rollup.config.js --sourcemap", "js-compile-bundle": "rollup --environment BUNDLE:true --config build/rollup.config.js --sourcemap", - "js-minify": "npm-run-all js-minify-standalone* js-minify-bundle", - "js-minify-standalone": "terser --compress typeofs=false --mangle --comments \"/^!/\" --source-map \"content=dist/js/tabler.js.map,includeSources,url=tabler.min.js.map\" --output dist/js/tabler.min.js dist/js/tabler.js", - "js-minify-bundle": "terser --compress typeofs=false --mangle --comments \"/^!/\" --source-map \"content=dist/js/tabler.bundle.js.map,includeSources,url=tabler.bundle.min.js.map\" --output dist/js/tabler.bundle.min.js dist/js/tabler.bundle.js", "svg-svgo": "svgo -f svg/fe --pretty && svgo -f svg/brand --pretty", "svg-iconfont": "mkdir -p svg-tmp && for i in svg/*/*.svg;do N=`echo $i | sed -e 's/^svg\\///g' | sed -e 's/\\\\.svg$//g' | sed -e 's/\\//-/g'`; echo $i; rsvg-convert $i -o svg-tmp/$N.svg -f svg -w 1000; done && svgo ./svg-tmp/*.svg --disable={removeViewBox} && icon-font-generator ./svg-tmp/*.svg -o fonts/tabler-webfont --html false --cssfontsurl ../fonts/tabler-webfont --csstp build/tabler-webfont.hbs --csspath scss/fonts/_tabler-webfont.scss --center --normalize --name tabler-webfont --types svg,eot,ttf,woff,woff2 --json false && rm -rf svg-tmp && node build/generate-font-codepoints.js" }, @@ -53,6 +50,7 @@ ], "homepage": "https://tabler.io", "devDependencies": { + "@babel/preset-env": "^7.6.0", "browser-sync": "2.26.7", "bundlesize": "0.17.2", "clean-css-cli": "4.3.0", @@ -70,6 +68,10 @@ "postcss-cli": "6.1.2", "rollup": "1.15.6", "rollup-plugin-babel": "4.3.2", + "rollup-plugin-babel-minify": "^9.0.0", + "rollup-plugin-commonjs": "10.1.0", + "rollup-plugin-filesize": "6.2.0", + "rollup-plugin-multi-input": "1.0.2", "rollup-plugin-node-resolve": "5.0.3", "shx": "0.3.2", "stylelint": "10.1.0", @@ -81,8 +83,9 @@ "dependencies": { "apexcharts": "3.8.0", "autosize": "4.0.2", - "bootstrap": "twbs/bootstrap#fb475e9", + "bootstrap": "twbs/bootstrap#2f549ec", "imask": "5.1.5", + "jquery": "3.4.1", "selectize": "0.12.6" }, "bundlesize": [ diff --git a/pages/_includes/layout/js.html b/pages/_includes/layout/js.html index be6b4cde823951457d60f5bf211590e6b253708f..39810c5bcb0efe37c6388e10dac265190d082847 100644 --- a/pages/_includes/layout/js.html +++ b/pages/_includes/layout/js.html @@ -1,17 +1,19 @@ + - - - + + + + + + - - - - + +