:zap: some files

.gitignore

@@ -19,43 +19,6 @@ nbproject/private
 node_modules/
 bower_components/
 
-# Plugins
-/plugins/**/*.html
-/plugins/**/*.less
-/plugins/**/*.md
-/plugins/**/*.scss
-/plugins/**/*.ts
-/plugins/**/bower.json
-/plugins/**/package.json
-/plugins/**/webpack.config.js
-/plugins/**/demo/
-/plugins/**/demos/
-/plugins/**/dev/
-/plugins/**/example/
-/plugins/**/examples/
-/plugins/**/less/
-/plugins/**/test/
-/plugins/**/tests/
-/plugins/daterangepicker/website/
-/plugins/daterangepicker/drp.png
-/plugins/daterangepicker/moment.min.js
-/plugins/daterangepicker/package.js
-/plugins/daterangepicker/website.css
-/plugins/daterangepicker/website.js
-/plugins/jquery-ui/AUTHORS.txt
-/plugins/jquery-ui/external/jquery/jquery.js
-/plugins/inputmask/bindings/
-/plugins/flot/plugins/jquery*.js
-!/plugins/flot/plugins/jquery.flot.*.js
-!/plugins/**/LICENSE.md
-!/plugins/**/LICENSE.txt
-!/plugins/**/license.md
-!/plugins/**/license.txt
-!/plugins/**/LICENSE
-!/plugins/**/license
-!/plugins/**/COPYING
-
-
 # Docs
 /docs/_site/
 /docs/vendor/

gulpfile.js

@@ -147,7 +147,7 @@ const html = () => src([paths.src.html])
     .pipe(dest(paths.temp.html))
     .pipe(browserSync.stream())
 
-const lintHtml = () => src([paths.temp.html + '/**/*.html', paths.temp.base + '*.html'])
+const lintHtml = () => src([paths.temp.html + '/**/*.html', paths.temp.base + '*.html'], { since: lastRun(lintHtml) })
     .pipe(validator())
 
 const serve = () => {

package.json

@@ -12,7 +12,8 @@
     "docs-lint": "node -v",
     "lint": "npx gulp lint && npm run lockfile-lint",
     "compile": "npx gulp compile",
-    "production": "npx gulp production"
+    "production": "npx gulp production",
+    "dev": "npx gulp"
   },
   "keywords": [
     "css",

src/assets/js/dashboard.js

@@ -1,99 +0,0 @@
-/* eslint-disable no-undef */
-/* Chart.js Charts */
-// Sales chart
-const salesChartCanvas = document.querySelector('#revenue-chart-canvas').getContext('2d')
-
-const salesChartData = {
-  labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
-  datasets: [
-    {
-      label: 'Digital Goods',
-      backgroundColor: 'rgba(60,141,188,0.9)',
-      borderColor: 'rgba(60,141,188,0.8)',
-      fill: true,
-      tension: 0.4,
-      pointRadius: 0,
-      pointColor: '#3b8bba',
-      pointStrokeColor: 'rgba(60,141,188,1)',
-      pointHighlightFill: '#fff',
-      pointHighlightStroke: 'rgba(60,141,188,1)',
-      data: [28, 48, 40, 19, 86, 27, 90]
-    },
-    {
-      label: 'Electronics',
-      backgroundColor: 'rgba(210, 214, 222, 1)',
-      borderColor: 'rgba(210, 214, 222, 1)',
-      fill: true,
-      tension: 0.4,
-      pointRadius: 0,
-      pointColor: 'rgba(210, 214, 222, 1)',
-      pointStrokeColor: '#c1c7d1',
-      pointHighlightFill: '#fff',
-      pointHighlightStroke: 'rgba(220,220,220,1)',
-      data: [65, 59, 80, 81, 56, 55, 40]
-    }
-  ]
-}
-
-const salesChartOptions = {
-  maintainAspectRatio: false,
-  responsive: true,
-  plugins: {
-    legend: {
-      display: false
-    }
-  },
-  scales: {
-    xAxes: [{
-      grid: {
-        display: false
-      }
-    }],
-    yAxes: [{
-      grid: {
-        display: false
-      }
-    }]
-  }
-}
-
-// This will get the first returned node in the jQuery collection.
-// eslint-disable-next-line no-unused-vars
-const salesChart = new Chart(salesChartCanvas, { // lgtm[js/unused-local-variable]
-  type: 'line',
-  data: salesChartData,
-  options: salesChartOptions
-})
-
-// Donut Chart
-const pieChartCanvas = document.querySelector('#sales-chart-canvas').getContext('2d')
-const pieData = {
-  labels: [
-    'Instore Sales',
-    'Download Sales',
-    'Mail-Order Sales'
-  ],
-  datasets: [
-    {
-      data: [30, 12, 20],
-      backgroundColor: ['#f56954', '#00a65a', '#f39c12']
-    }
-  ]
-}
-const pieOptions = {
-  plugins: {
-    legend: {
-      display: false
-    }
-  },
-  maintainAspectRatio: false,
-  responsive: true
-}
-// Create pie or douhnut chart
-// You can switch between pie and douhnut using the method below.
-// eslint-disable-next-line no-unused-vars
-const pieChart = new Chart(pieChartCanvas, { // lgtm[js/unused-local-variable]
-  type: 'doughnut',
-  data: pieData,
-  options: pieOptions
-})

src/assets/js/dashboard2.js

@@ -1,120 +0,0 @@
-/* eslint-disable no-undef */
-/* ChartJS
-  * -------
-  * Here we will create a few charts using ChartJS
-  */
-
-//-----------------------
-// - MONTHLY SALES CHART -
-//-----------------------
-
-// Get context with querySelector - using Chart.js .getContext('2d') method.
-const salesChartCanvas = document.querySelector('#salesChart').getContext('2d')
-
-const salesChartData = {
-  labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
-  datasets: [
-    {
-      label: 'Digital Goods',
-      backgroundColor: 'rgba(60,141,188,0.9)',
-      borderColor: 'rgba(60,141,188,0.8)',
-      fill: true,
-      pointRadius: 0,
-      pointColor: '#3b8bba',
-      pointStrokeColor: 'rgba(60,141,188,1)',
-      pointHighlightFill: '#fff',
-      pointHighlightStroke: 'rgba(60,141,188,1)',
-      data: [28, 48, 40, 19, 86, 27, 90]
-    },
-    {
-      label: 'Electronics',
-      backgroundColor: 'rgba(210, 214, 222, 1)',
-      borderColor: 'rgba(210, 214, 222, 1)',
-      fill: true,
-      pointRadius: 0,
-      pointColor: 'rgba(210, 214, 222, 1)',
-      pointStrokeColor: '#c1c7d1',
-      pointHighlightFill: '#fff',
-      pointHighlightStroke: 'rgba(220,220,220,1)',
-      data: [65, 59, 80, 81, 56, 55, 40]
-    }
-  ]
-}
-
-const salesChartOptions = {
-  maintainAspectRatio: false,
-  responsive: true,
-  tension: 0.4,
-  plugins: {
-    legend: {
-      display: false
-    }
-  },
-  scales: {
-    xAxes: [{
-      grid: {
-        display: false
-      }
-    }],
-    yAxes: [{
-      grid: {
-        display: false
-      }
-    }]
-  }
-}
-
-// This will get the first returned node in the jQuery collection.
-// eslint-disable-next-line no-unused-vars
-const salesChart = new Chart(salesChartCanvas, {
-  type: 'line',
-  data: salesChartData,
-  options: salesChartOptions
-})
-
-//---------------------------
-// - END MONTHLY SALES CHART -
-//---------------------------
-
-//-------------
-// - PIE CHART -
-//-------------
-
-// Get context with querySelector - using Chart.js .getContext('2d') method.
-const pieChartCanvas = document.querySelector('#pieChart').getContext('2d')
-
-const pieData = {
-  labels: [
-    'Chrome',
-    'IE',
-    'FireFox',
-    'Safari',
-    'Opera',
-    'Navigator'
-  ],
-  datasets: [
-    {
-      data: [700, 500, 400, 600, 300, 100],
-      backgroundColor: ['#f56954', '#00a65a', '#f39c12', '#00c0ef', '#3c8dbc', '#d2d6de']
-    }
-  ]
-}
-const pieOptions = {
-  plugins: {
-    legend: {
-      display: false
-    }
-  }
-}
-// Create pie or douhnut chart
-// You can switch between pie and douhnut using the method below.
-// eslint-disable-next-line no-unused-vars
-const pieChart = new Chart(pieChartCanvas, {
-  type: 'doughnut',
-  data: pieData,
-  options: pieOptions
-})
-
-//-----------------
-// - END PIE CHART -
-//-----------------

src/assets/js/dashboard3.js

@@ -1,117 +0,0 @@
-/* global Chart:false */
-
-const ticksStyle = {
-  fontColor: '#495057',
-  fontStyle: 'bold'
-}
-
-const mode = 'index'
-const intersect = true
-
-const salesChartSelector = document.querySelector('#sales-chart')
-// eslint-disable-next-line no-unused-vars
-const salesChart = new Chart(salesChartSelector, {
-  type: 'bar',
-  data: {
-    labels: ['JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'],
-    datasets: [{
-      label: 'My First Dataset',
-      data: [65, 59, 80, 81, 56, 55, 40],
-      backgroundColor: [
-        'rgba(255, 99, 132, 0.2)',
-        'rgba(255, 159, 64, 0.2)',
-        'rgba(255, 205, 86, 0.2)',
-        'rgba(75, 192, 192, 0.2)',
-        'rgba(54, 162, 235, 0.2)',
-        'rgba(153, 102, 255, 0.2)',
-        'rgba(201, 203, 207, 0.2)'
-      ],
-      borderColor: [
-        'rgb(255, 99, 132)',
-        'rgb(255, 159, 64)',
-        'rgb(255, 205, 86)',
-        'rgb(75, 192, 192)',
-        'rgb(54, 162, 235)',
-        'rgb(153, 102, 255)',
-        'rgb(201, 203, 207)'
-      ],
-      borderWidth: 1
-    }]
-  },
-  options: {
-    maintainAspectRatio: false,
-    scales: {
-      y: {
-        beginAtZero: true
-      }
-    }
-  }
-})
-
-const visitorsChartSelector = document.querySelector('#visitors-chart')
-// eslint-disable-next-line no-unused-vars
-const visitorsChart = new Chart(visitorsChartSelector, {
-  data: {
-    labels: ['18th', '20th', '22nd', '24th', '26th', '28th', '30th'],
-    datasets: [{
-      type: 'line',
-      data: [100, 120, 170, 167, 180, 177, 160],
-      backgroundColor: 'transparent',
-      borderColor: '#007bff',
-      pointBorderColor: '#007bff',
-      pointBackgroundColor: '#007bff'
-      // pointHoverBackgroundColor: '#007bff',
-      // pointHoverBorderColor    : '#007bff'
-    },
-    {
-      type: 'line',
-      data: [60, 80, 70, 67, 80, 77, 100],
-      backgroundColor: 'tansparent',
-      borderColor: '#ced4da',
-      pointBorderColor: '#ced4da',
-      pointBackgroundColor: '#ced4da'
-      // pointHoverBackgroundColor: '#ced4da',
-      // pointHoverBorderColor    : '#ced4da'
-    }]
-  },
-  options: {
-    maintainAspectRatio: false,
-    tooltip: {
-      mode,
-      intersect
-    },
-    hover: {
-      mode,
-      intersect
-    },
-    plugins: {
-      legend: {
-        display: false
-      }
-    },
-    scales: {
-      yAxes: [{
-        // display: false,
-        grid: {
-          display: true,
-          lineWidth: '4px',
-          color: 'rgba(0, 0, 0, .2)',
-          zeroLineColor: 'transparent'
-        },
-        ticks: Object.assign({
-          beginAtZero: true,
-          suggestedMax: 200
-        }, ticksStyle)
-      }],
-      xAxes: [{
-        display: true,
-        grid: {
-          display: false
-        },
-        ticks: ticksStyle
-      }]
-    }
-  }
-})
-
-// lgtm [js/unused-local-variable]

src/index.html

@@ -364,7 +364,113 @@
 
     <!-- ChartJS -->
     <script src="https://cdn.jsdelivr.net/npm/chart.js@3.6.0/dist/chart.min.js" integrity="sha256-7lWo7cjrrponRJcS6bc8isfsPDwSKoaYfGIHgSheQkk=" crossorigin="anonymous"></script>
-    <!-- AdminLTE dashboard demo (This is only for demo purposes) -->
-    <script src="./assets/js/dashboard.js"></script>
+    <script>
+      // NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
+      // IT'S ALL JUST JUNK FOR DEMO
+      // ++++++++++++++++++++++++++++++++++++++++++
+
+      /* Chart.js Charts */
+      // Sales chart
+      (function () {
+        'use strict'
+
+        var salesChartCanvas = document.querySelector('#revenue-chart-canvas').getContext('2d')
+
+        var salesChartData = {
+          labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+          datasets: [
+            {
+              label: 'Digital Goods',
+              backgroundColor: 'rgba(60,141,188,0.9)',
+              borderColor: 'rgba(60,141,188,0.8)',
+              fill: true,
+              tension: 0.4,
+              pointRadius: 0,
+              pointColor: '#3b8bba',
+              pointStrokeColor: 'rgba(60,141,188,1)',
+              pointHighlightFill: '#fff',
+              pointHighlightStroke: 'rgba(60,141,188,1)',
+              data: [28, 48, 40, 19, 86, 27, 90]
+            },
+            {
+              label: 'Electronics',
+              backgroundColor: 'rgba(210, 214, 222, 1)',
+              borderColor: 'rgba(210, 214, 222, 1)',
+              fill: true,
+              tension: 0.4,
+              pointRadius: 0,
+              pointColor: 'rgba(210, 214, 222, 1)',
+              pointStrokeColor: '#c1c7d1',
+              pointHighlightFill: '#fff',
+              pointHighlightStroke: 'rgba(220,220,220,1)',
+              data: [65, 59, 80, 81, 56, 55, 40]
+            }
+          ]
+        }
+
+        var salesChartOptions = {
+          maintainAspectRatio: false,
+          responsive: true,
+          plugins: {
+            legend: {
+              display: false
+            }
+          },
+          scales: {
+            xAxes: {
+              gridLines: {
+                display: false
+              }
+            },
+            yAxes: {
+              gridLines: {
+                display: false
+              }
+            }
+          }
+        }
+
+        // This will get the first returned node in the js collection.
+        var salesChart = new Chart(salesChartCanvas, { // lgtm[js/unused-local-variable]
+          type: 'line',
+          data: salesChartData,
+          options: salesChartOptions
+        })
+
+        // Donut Chart
+        var pieChartCanvas = document.querySelector('#sales-chart-canvas').getContext('2d')
+        var pieData = {
+          labels: [
+            'Instore Sales',
+            'Download Sales',
+            'Mail-Order Sales'
+          ],
+          datasets: [
+            {
+              data: [30, 12, 20],
+              backgroundColor: ['#f56954', '#00a65a', '#f39c12']
+            }
+          ]
+        }
+        var pieOptions = {
+          plugins: {
+            legend: {
+              display: false
+            }
+          },
+          maintainAspectRatio: false,
+          responsive: true
+        }
+        // Create pie or douhnut chart
+        // You can switch between pie and douhnut using the method below.
+        // eslint-disable-next-line no-unused-vars
+        var pieChart = new Chart(pieChartCanvas, { // lgtm[js/unused-local-variable]
+          type: 'doughnut',
+          data: pieData,
+          options: pieOptions
+        })
+      })()
+
+    </script>
   </body>
 </html>

src/index2.html

@@ -838,7 +838,131 @@
 
     <!-- ChartJS -->
     <script src="https://cdn.jsdelivr.net/npm/chart.js@3.6.0/dist/chart.min.js" integrity="sha256-7lWo7cjrrponRJcS6bc8isfsPDwSKoaYfGIHgSheQkk=" crossorigin="anonymous"></script>
-    <!-- AdminLTE dashboard2 demo (This is only for demo purposes) -->
-    <script src="./assets/js/dashboard2.js"></script>
+
+    <script>
+      // NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
+      // IT'S ALL JUST JUNK FOR DEMO
+      // ++++++++++++++++++++++++++++++++++++++++++
+
+      /* ChartJS
+        * -------
+        * Here we will create a few charts using ChartJS
+        */
+
+      //-----------------------
+      // - MONTHLY SALES CHART -
+      //-----------------------
+      (function () {
+        'use strict'
+        // Get context with querySelector - using Chart.js .getContext('2d') method.
+        var salesChartCanvas = document.querySelector('#salesChart').getContext('2d')
+
+        var salesChartData = {
+          labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+          datasets: [
+            {
+              label: 'Digital Goods',
+              backgroundColor: 'rgba(60,141,188,0.9)',
+              borderColor: 'rgba(60,141,188,0.8)',
+              fill: true,
+              pointRadius: 0,
+              pointColor: '#3b8bba',
+              pointStrokeColor: 'rgba(60,141,188,1)',
+              pointHighlightFill: '#fff',
+              pointHighlightStroke: 'rgba(60,141,188,1)',
+              data: [28, 48, 40, 19, 86, 27, 90]
+            },
+            {
+              label: 'Electronics',
+              backgroundColor: 'rgba(210, 214, 222, 1)',
+              borderColor: 'rgba(210, 214, 222, 1)',
+              fill: true,
+              pointRadius: 0,
+              pointColor: 'rgba(210, 214, 222, 1)',
+              pointStrokeColor: '#c1c7d1',
+              pointHighlightFill: '#fff',
+              pointHighlightStroke: 'rgba(220,220,220,1)',
+              data: [65, 59, 80, 81, 56, 55, 40]
+            }
+          ]
+        }
+
+        var salesChartOptions = {
+          maintainAspectRatio: false,
+          responsive: true,
+          tension: 0.4,
+          plugins: {
+            legend: {
+              display: false
+            }
+          },
+          scales: {
+            xAxes: {
+              gridLines: {
+                display: false
+              }
+            },
+            yAxes: {
+              gridLines: {
+                display: false
+              }
+            }
+          }
+        }
+
+        // This will get the first returned node in the js collection.
+        var salesChart = new Chart(salesChartCanvas, {
+          type: 'line',
+          data: salesChartData,
+          options: salesChartOptions
+        })
+
+        //---------------------------
+        // - END MONTHLY SALES CHART -
+        //---------------------------
+
+        //-------------
+        // - PIE CHART -
+        //-------------
+
+        // Get context with querySelector - using Chart.js .getContext('2d') method.
+        var pieChartCanvas = document.querySelector('#pieChart').getContext('2d')
+
+        var pieData = {
+          labels: [
+            'Chrome',
+            'IE',
+            'FireFox',
+            'Safari',
+            'Opera',
+            'Navigator'
+          ],
+          datasets: [
+            {
+              data: [700, 500, 400, 600, 300, 100],
+              backgroundColor: ['#f56954', '#00a65a', '#f39c12', '#00c0ef', '#3c8dbc', '#d2d6de']
+            }
+          ]
+        }
+        var pieOptions = {
+          plugins: {
+            legend: {
+              display: false
+            }
+          }
+        }
+        // Create pie or douhnut chart
+        // You can switch between pie and douhnut using the method below.
+        // eslint-disable-next-line no-unused-vars
+        var pieChart = new Chart(pieChartCanvas, {
+          type: 'doughnut',
+          data: pieData,
+          options: pieOptions
+        })
+      })()
+      //-----------------
+      // - END PIE CHART -
+      //-----------------
+    </script>
   </body>
 </html>

src/index3.html

@@ -303,5 +303,128 @@
     <script src="https://cdn.jsdelivr.net/npm/chart.js@3.6.0/dist/chart.min.js" integrity="sha256-7lWo7cjrrponRJcS6bc8isfsPDwSKoaYfGIHgSheQkk=" crossorigin="anonymous"></script>
     <!-- AdminLTE dashboard3 demo (This is only for demo purposes) -->
     <script src="./assets/js/dashboard3.js"></script>
+    <script>
+      // NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
+      // IT'S ALL JUST JUNK FOR DEMO
+      // ++++++++++++++++++++++++++++++++++++++++++
+
+      /* global Chart:false */
+      (function () {
+        'use strict'
+
+        var ticksStyle = {
+          fontColor: '#495057',
+          fontStyle: 'bold'
+        }
+
+        var mode = 'index'
+        var intersect = true
+
+        var salesChartSelector = document.querySelector('#sales-chart')
+        // eslint-disable-next-line no-unused-vars
+        var salesChart = new Chart(salesChartSelector, {
+          type: 'bar',
+          data: {
+            labels: ['JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'],
+            datasets: [{
+              label: 'My First Dataset',
+              data: [65, 59, 80, 81, 56, 55, 40],
+              backgroundColor: [
+                'rgba(255, 99, 132, 0.2)',
+                'rgba(255, 159, 64, 0.2)',
+                'rgba(255, 205, 86, 0.2)',
+                'rgba(75, 192, 192, 0.2)',
+                'rgba(54, 162, 235, 0.2)',
+                'rgba(153, 102, 255, 0.2)',
+                'rgba(201, 203, 207, 0.2)'
+              ],
+              borderColor: [
+                'rgb(255, 99, 132)',
+                'rgb(255, 159, 64)',
+                'rgb(255, 205, 86)',
+                'rgb(75, 192, 192)',
+                'rgb(54, 162, 235)',
+                'rgb(153, 102, 255)',
+                'rgb(201, 203, 207)'
+              ],
+              borderWidth: 1
+            }]
+          },
+          options: {
+            maintainAspectRatio: false,
+            scales: {
+              y: {
+                beginAtZero: true
+              }
+            }
+          }
+        })
+
+        var visitorsChartSelector = document.querySelector('#visitors-chart')
+        var visitorsChart = new Chart(visitorsChartSelector, {
+          data: {
+            labels: ['18th', '20th', '22nd', '24th', '26th', '28th', '30th'],
+            datasets: [{
+              type: 'line',
+              data: [100, 120, 170, 167, 180, 177, 160],
+              backgroundColor: 'transparent',
+              borderColor: '#007bff',
+              pointBorderColor: '#007bff',
+              pointBackgroundColor: '#007bff'
+              // pointHoverBackgroundColor: '#007bff',
+              // pointHoverBorderColor    : '#007bff'
+            },
+            {
+              type: 'line',
+              data: [60, 80, 70, 67, 80, 77, 100],
+              backgroundColor: 'tansparent',
+              borderColor: '#ced4da',
+              pointBorderColor: '#ced4da',
+              pointBackgroundColor: '#ced4da'
+              // pointHoverBackgroundColor: '#ced4da',
+              // pointHoverBorderColor    : '#ced4da'
+            }]
+          },
+          options: {
+            maintainAspectRatio: false,
+            tooltip: {
+              mode: mode,
+              intersect: intersect
+            },
+            hover: {
+              mode: mode,
+              intersect: intersect
+            },
+            plugins: {
+              legend: {
+                display: false
+              }
+            },
+            scales: {
+              yAxes: {
+                // display: false,
+                gridLines: {
+                  display: true,
+                  lineWidth: '4px',
+                  color: 'rgba(0, 0, 0, .2)',
+                  zeroLineColor: 'transparent'
+                },
+                ticks: Object.assign({
+                  beginAtZero: true,
+                  suggestedMax: 200
+                }, ticksStyle)
+              },
+              xAxes: {
+                display: true,
+                gridLines: {
+                  display: false
+                },
+                ticks: ticksStyle
+              }
+            }
+          }
+        })
+      })()
+    </script>
   </body>
 </html>