fix: JS CI

Author: fsbraun

eslint.config.js

@@ -1,15 +1,34 @@
 export default [
+    {
+        ignores: [
+            '**/dist/**',
+            '**/node_modules/**',
+            '**/*.min.js',
+            '**/filer/static/filer/js/dist/**'
+        ]
+    },
     {
         files: ['**/*.js'],
         languageOptions: {
-            ecmaVersion: 2015,
-            sourceType: 'script',
+            ecmaVersion: 2020,
+            sourceType: 'module',
             globals: {
                 // Browser globals
                 window: 'readonly',
                 document: 'readonly',
                 console: 'readonly',
                 alert: 'readonly',
+                Event: 'readonly',
+                CustomEvent: 'readonly',
+                MutationObserver: 'readonly',
+                setTimeout: 'readonly',
+                clearTimeout: 'readonly',
+                setInterval: 'readonly',
+                clearInterval: 'readonly',
+                NodeList: 'readonly',
+                HTMLCollection: 'readonly',
+                URL: 'readonly',
+                navigator: 'readonly',
                 // Node.js globals
                 require: 'readonly',
                 module: 'readonly',
@@ -22,6 +41,11 @@ export default [
                 Mediator: 'readonly',
                 Class: 'readonly',
                 opener: 'readonly',
+                // Custom globals
+                Cl: 'readonly',
+                // jQuery (for legacy code/tests)
+                $: 'readonly',
+                jQuery: 'readonly',
                 // Test globals
                 jasmine: 'readonly',
                 describe: 'readonly',
@@ -49,9 +73,26 @@ export default [
             'max-len': ['error', { 'code': 120, 'ignoreUrls': true, 'ignoreRegExpLiterals': true }],
 
             // Best practices
-            'strict': ['error', 'global'],
+            'strict': 'off', // Not needed for ES6 modules
             'no-implied-eval': 'error',
             'no-new-func': 'error'
         }
+    },
+    {
+        files: ['gulpfile.js', '**/karma.conf.js'],
+        languageOptions: {
+            ecmaVersion: 2020,
+            sourceType: 'script',
+            globals: {
+                require: 'readonly',
+                module: 'readonly',
+                __dirname: 'readonly',
+                process: 'readonly',
+                console: 'readonly'
+            }
+        },
+        rules: {
+            'strict': ['error', 'global']
+        }
     }
 ];

filer/static/filer/css/admin_filer.cms.icons.css

@@ -17,10 +17,10 @@
     class Dropdown {
         constructor(element) {
             this.element = element;
-            element.addEventListener('click', (e) => this.toggle(e));
+            element.addEventListener('click', () => this.toggle());
         }
 
-        toggle(e) {
+        toggle() {
             const element = this.element;
             const parent = getParent(element);
             const isActive = parent.classList.contains('open');

filer/static/filer/css/admin_filer.css

@@ -9,7 +9,6 @@ if (Dropzone) {
 }
 
 document.addEventListener('DOMContentLoaded', () => {
-    const dropzoneTemplateSelector = '.js-filer-dropzone-template';
     const previewImageSelector = '.js-img-preview';
     const dropzoneSelector = '.js-filer-dropzone';
     const dropzones = document.querySelectorAll(dropzoneSelector);
@@ -41,7 +40,7 @@ document.addEventListener('DOMContentLoaded', () => {
             window.parent.CMS.API.Messages.open({
                 message: message
             });
-        } catch (e) {
+        } catch {
             if (window.filerShowError) {
                 window.filerShowError(message);
             } else {
@@ -99,7 +98,7 @@ document.addEventListener('DOMContentLoaded', () => {
                 if (clearButton) {
                     clearButton.addEventListener('click', () => {
                         dropzone.classList.remove(objectAttachedClass);
-                        const changeEvent = new Event('change', { bubbles: true });
+                        // const changeEvent = new Event('change', { bubbles: true });
                         // inputId?.dispatchEvent(changeEvent);
                     });
                 }

filer/static/filer/css/admin_filer.fa.icons.css

@@ -104,7 +104,9 @@ window.Cl = window.Cl || {};
         }
 
         _makeDraggable() {
-            if (!this.circle) return;
+            if (!this.circle) {
+                return;
+            }
 
             this.circle.classList.add(this.options.draggableClass);
             this.circle.addEventListener('mousedown', this._onMouseDown);
@@ -136,7 +138,9 @@ window.Cl = window.Cl || {};
         }
 
         _onMouseMove(event) {
-            if (!this.isDragging) return;
+            if (!this.isDragging) {
+                return;
+            }
 
             event.preventDefault();
 

filer/static/filer/js/addons/dropdown-menu.js

@@ -76,7 +76,7 @@ document.addEventListener('DOMContentLoaded', () => {
         autoProcessQueue: true
     });
 
-    dropzone.on('addedfile', (file) => {
+    dropzone.on('addedfile', () => {
         Cl.mediator.remove('filer-upload-in-progress', removeButton);
         Cl.mediator.publish('filer-upload-in-progress');
         submitNum++;

filer/static/filer/js/addons/dropzone.init.js

@@ -105,28 +105,33 @@ gulp.task('icons', function () {
             normalize: true,
             formats: ['svg', 'ttf', 'eot', 'woff', 'woff2']
         }))
-        .on('glyphs', function (glyphs, options) {
+        .on('glyphs', function (glyphs) {
             log.info('Generated', glyphs.length, 'glyphs');
         })
         .pipe(gulp.dest(PROJECT_PATH.icons));
 });
 
 // #############################################################################
 // LINTING
-gulp.task('eslint', function () {
-    return gulp.src(PROJECT_PATTERNS.lint)
-        .pipe(eslint())
-        .pipe(eslint.format())
-        .pipe(eslint.failAfterError());
-});
+gulp.task('lint', function () {
+    var fix = process.argv.includes('--fix');
+    var stream = gulp.src(PROJECT_PATTERNS.lint, { allowEmpty: true });
+
+    if (fix) {
+        stream = stream
+            .pipe(eslint({fix: true}))
+            .pipe(eslint.format())
+            .pipe(gulp.dest(function(file) {
+                return file.base;
+            }));
+    } else {
+        stream = stream
+            .pipe(eslint())
+            .pipe(eslint.format())
+            .pipe(eslint.failAfterError());
+    }
 
-gulp.task('eslint:fix', function () {
-    return gulp.src(PROJECT_PATTERNS.lint)
-        .pipe(eslint({fix: true}))
-        .pipe(eslint.format())
-        .pipe(gulp.dest(function(file) {
-            return file.base;
-        }));
+    return stream;
 });
 
 // #############################################################################
@@ -144,14 +149,13 @@ gulp.task('tests:watch', function () {
 // #############################################################################
 // TASKS
 gulp.task('build', gulp.series('sass', 'bundle'));
-gulp.task('js', gulp.series('eslint' /* ,'tests:unit'*/));
+gulp.task('js', gulp.series('lint' /* ,'tests:unit'*/));
 gulp.task('js:watch', function () {
     gulp.watch(PROJECT_PATTERNS.lint, gulp.series('js'));
 });
 gulp.task('watch', gulp.parallel('sass:watch', 'js:watch'));
-gulp.task('lint', gulp.series('eslint'));
 gulp.task('lint:watch', function () {
     gulp.watch(PROJECT_PATTERNS.lint, gulp.series('lint'));
 });
-gulp.task('ci', gulp.series('sass', 'bundle', 'eslint', 'lint', 'tests:unit'));
+gulp.task('ci', gulp.series('sass', 'bundle', 'lint', 'tests:unit'));
 gulp.task('default', gulp.parallel('sass:watch', 'js:watch', 'lint:watch'));

filer/static/filer/js/addons/focal-point.js

@@ -27,6 +27,7 @@
     "gulp-sass": "^5.1.0",
     "gulp-sourcemaps": "^3.0.0",
     "jasmine-core": "^5.9.0",
+    "jquery": "^3.7.1",
     "karma": "^6.4.4",
     "karma-chrome-launcher": "^3.2.0",
     "karma-fixture": "^0.2.6",