Add colvis button, colresizable

.eslintrc.cjs

@@ -1,16 +1,16 @@
 module.exports = {
-    "env": {
-        "browser": true,
-        "es2021": true
-    },
-    "extends": "airbnb-base",
-    "overrides": [
-    ],
-    "parserOptions": {
-        "ecmaVersion": "latest",
-        "sourceType": "module"
-    },
-    "rules": {
-      "import/extensions": ["error", "ignorePackages"],
-    }
-}
+  env: {
+    browser: true,
+    es2021: true,
+  },
+  extends: 'airbnb-base',
+  overrides: [
+  ],
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+  },
+  rules: {
+    'import/extensions': ['error', 'ignorePackages'],
+  },
+};

.github/workflows/CI.yml

@@ -20,7 +20,7 @@ jobs:
     steps:
         # Check-out repository under GitHub workspace
         # https://github.com/actions/checkout
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
         # Step's name
       - name: Use Node.js ${{ matrix.node-version }}
         # Configures the node version used on GitHub-hosted runners

.github/workflows/github-pages-with-gulp.yml

@@ -57,7 +57,7 @@ jobs:
         uses: actions/configure-pages@v3
 
       - name: Upload artifact
-        uses: actions/upload-pages-artifact@v1
+        uses: actions/upload-pages-artifact@v2
         with:
           path: "."
 

README.md

@@ -1,6 +1,6 @@
-# Digital Element. Frontend test assignment. 
-[![CI](https://github.com/Teihden/d-element-test/actions/workflows/CI.yml/badge.svg)](https://github.com/Teihden/d-element-test/actions/workflows/CI.yml)
-[![Github Pages](https://github.com/Teihden/d-element-test/actions/workflows/github-pages-with-gulp.yml/badge.svg)](https://github.com/Teihden/d-element-test/actions/workflows/github-pages-with-gulp.yml)
+# OPT6. Frontend test assignment. 
+[![CI](https://github.com/Teihden/opt6-test/actions/workflows/CI.yml/badge.svg)](https://github.com/Teihden/opt6-test/actions/workflows/CI.yml)
+[![Github Pages](https://github.com/Teihden/opt6-test/actions/workflows/github-pages-with-gulp.yml/badge.svg)](https://github.com/Teihden/opt6-test/actions/workflows/github-pages-with-gulp.yml)
 
 ## Setup
 

gulpfile.js

@@ -1,20 +1,18 @@
+/* eslint-disable import/no-unresolved */
 /* eslint-disable import/no-extraneous-dependencies */
 import gulp from 'gulp';
 import dartSass from 'sass';
 import gulpSass from 'gulp-sass';
 import stylelint from '@ronilaukkarinen/gulp-stylelint';
 import pug from 'gulp-pug';
 import pugLinter from 'gulp-pug-linter';
-import htmlmin from 'gulp-html-minifier-terser';
-import imagemin from 'gulp-imagemin';
-import svgmin from 'gulp-svgmin';
-import { stacksvg } from 'gulp-stacksvg';
+import htmlMin from 'gulp-html-minifier-terser';
+import svgSprite from 'gulp-svg-sprite';
 import { deleteAsync } from 'del';
 import browserSync from 'browser-sync';
 import postcss from 'gulp-postcss';
 import csso from 'postcss-csso';
 import autoprefixer from 'autoprefixer';
-// eslint-disable-next-line import/no-unresolved
 import eslint from 'gulp-eslint-new';
 import terser from 'gulp-terser';
 import rename from 'gulp-rename';
@@ -80,7 +78,7 @@ function compilePug() {
 
 function optimizeHTML() {
   return gulp.src('build/*.html')
-    .pipe(htmlmin({ collapseWhitespace: true }))
+    .pipe(htmlMin({ collapseWhitespace: true }))
     .pipe(gulp.dest('build'));
 }
 
@@ -99,20 +97,28 @@ function optimizeJS() {
     .pipe(sourcemaps.init())
     .pipe(terser())
     .pipe(sourcemaps.write('./'))
-    .pipe(gulp.dest('build/js'));
+    .pipe(gulp.dest('build/js'))
+    .pipe(browser.stream());
 }
 
-// Images
-function imageMin() {
-  return gulp.src(['src/img/**/*.{png,jpg}', 'src/apple-touch-icon.png'], {
-    since: gulp.lastRun(imageMin),
-    base: 'src',
-  })
-    .pipe(imagemin())
-    .pipe(gulp.dest('build'))
-    .pipe(browserSync.stream());
+// SVG
+function makeSprite() {
+  return gulp.src([
+    'src/img/icons/*.svg',
+  ])
+    .pipe(svgSprite({
+      mode: {
+        symbol: {
+          dest: '',
+          sprite: 'sprite.svg',
+          inline: true,
+        },
+      },
+    }))
+    .pipe(gulp.dest('build/img/icons'));
 }
 
+// Copy resources
 function copyImages() {
   return gulp.src([
     'src/img/**/*.{png,jpg,svg}',
@@ -121,36 +127,20 @@ function copyImages() {
     .pipe(gulp.dest('build/img'));
 }
 
-// SVG
-async function svgMin() {
-  gulp.src([
-    'src/img/**/*.svg',
-    '!src/img/icons/*.svg',
-  ])
-    .pipe(svgmin())
-    .pipe(gulp.dest('build/img'));
-}
-
-function stackSVG() {
-  return gulp.src([
-    'src/img/icons/*.svg',
-  ])
-    .pipe(svgmin())
-    .pipe(stacksvg({ output: 'stack' }))
-    .pipe(gulp.dest('build/img/icons'));
-}
-
-// Copy resourses
-function copyMisc() {
-  return gulp.src(['src/favicon.ico', 'src/manifest.webmanifest'])
+function copyMisc(cb) {
+  gulp.src(['src/favicon.ico', 'src/site.webmanifest'])
     .pipe(gulp.dest('build/'))
     .pipe(browser.stream());
-}
 
-function copyFonts() {
-  return gulp.src('src/fonts/**/*')
+  gulp.src(['src/vendor/**'])
+    .pipe(gulp.dest('build/vendor'))
+    .pipe(browser.stream());
+
+  gulp.src('src/fonts/**/*')
     .pipe(gulp.dest('build/fonts/'))
     .pipe(browser.stream());
+
+  cb();
 }
 
 // Clean
@@ -173,9 +163,15 @@ function browsersync() {
 function watcher(cb) {
   gulp.watch('src/pug/**/*.pug', gulp.series(lintPug, compilePug));
   gulp.watch('src/scss/**/*.scss', gulp.series(lintSass, compileScss));
-  gulp.watch(['src/img/**/*.{png,jpg,svg}', 'src/apple-touch-icon.png'], copyImages);
-  gulp.watch(['src/favicon.ico', 'src/manifest.webmanifest'], copyMisc);
-  gulp.watch('src/fonts/**/*.{woff,woff2}', copyFonts);
+  gulp.watch(
+    [
+      'src/favicon.ico',
+      'src/manifest.webmanifest',
+      'src/fonts/**/*.{woff,woff2}',
+      'src/vendor',
+    ],
+    copyMisc,
+  );
   gulp.watch('src/js/**/*.js', gulp.series(lintJS, optimizeJS));
 
   cb();
@@ -195,11 +191,9 @@ export const build = gulp.series(
     gulp.series(lintPug, compilePug, optimizeHTML),
     gulp.series(lintSass, compileScss, postCSS),
     gulp.series(lintJS, optimizeJS),
-    copyFonts,
+    copyImages,
     copyMisc,
-    imageMin,
-    svgMin,
-    stackSVG,
+    makeSprite,
   ),
 );
 
@@ -210,10 +204,9 @@ export default gulp.series(
     gulp.series(lintPug, compilePug),
     gulp.series(lintSass, compileScss),
     gulp.series(lintJS, optimizeJS),
-    copyFonts,
-    copyMisc,
     copyImages,
-    stackSVG,
+    copyMisc,
+    makeSprite,
   ),
   gulp.series(
     watcher,