- Improved Login Header (support for *.webp images + 4k resolution)

- Minor bug fixes
- Bump version to `v2.0.0`

app/pathfinder.ini

@@ -13,8 +13,8 @@ NAME                        =   Pathfinder
 ;           Version is used for CSS/JS cache busting and is part of the URL for static resources:
 ;           e.g. public/js/vX.X.X/app.js
 ; Syntax:   String (current version)
-; Default:  v2.0.0-rc.1
-VERSION                     =   v2.0.0-rc.1
+; Default:  v2.0.0
+VERSION                     =   v2.0.0
 
 ; Contact information [optional]
 ;           Shown on 'licence', 'contact' page.

gulpfile.js

@@ -240,15 +240,16 @@ colors.theme({
     disabled:       (...args) => colors.dim.gray(util.format(...args)),
     comment:        (...args) => colors.disabled.italic(util.format(...args)),
 
-    //badgeSuccess:   (...args) => `${colors.success.bold(`[OK]`)} ${colors.success(util.format(...args))}`,
-    //badgeError:     (...args) => `${colors.danger.bold(`[ERROR]`)} ${colors.danger.italic(util.format(...args))}`,
-
     iconSuccess:    text => ` ${colors.success(`✔`)} ${colors.success(text)}`,
     iconDanger:     text => ` ${colors.danger(`✘`)} ${colors.danger(text)}`,
 
     divider:        text => colors.disabled(`${(text || '').trim().length ? `═ ${(text || '').trim().toUpperCase()} ═` : ''}`.padEnd(cliBoxLength, '═'))
 });
 
+/**
+ * example output formatting
+ */
+/*
 log(colors.primary('primary'));
 log(colors.success('success'));
 log(colors.info('info'));
@@ -258,9 +259,6 @@ log(colors.danger('danger'));
 log(colors.disabled('disabled'));
 log(colors.comment('comment'));
 
-//log(colors.badgeSuccess(`Success`));
-//log(colors.badgeError('Error!'));
-
 log(colors.iconSuccess('success'));
 log(colors.iconDanger('danger'));
 
@@ -276,9 +274,9 @@ log(colors.blue('blue'));
 log(colors.blueBright('blueBright'));
 log(colors.yellow('yellow'));
 log(colors.yellowBright('yellowBright'));
-
 log('');
 log('');
+*/
 
 // == Helper methods ==================================================================================================
 
@@ -361,11 +359,12 @@ let printHelp = () => {
                 ${colors.bold('tasks:')}
                     ${colors.primary('help')}              This view
                     ${colors.primary('default')}           Development environment. Working with row src files and file watcher, default:
-                    ${colors.primary('')}                      ${colors.gray('--jsUglify=false --jsSourcemaps=false --cssSourcemaps=false --jsGzip=false --cssGzip=false --jsBrotli=false --cssBrotli=false')}
+                    ${colors.primary('')}                      ${colors.gray('--jsUglify=false --jsSourcemaps=false --cssSourcemaps=false --jsGzip=false --cssGzip=false --jsBrotli=false --cssBrotli=false --imgActive=true')}
                     ${colors.primary('production')}        Production build. Concat and uglify static resources, default:
-                    ${colors.primary('')}                      ${colors.gray('--jsUglify=true --jsSourcemaps=true --cssSourcemaps=true --jsGzip=true --cssGzip=true --jsBrotli=true --cssBrotli=true')}
+                    ${colors.primary('')}                      ${colors.gray('--jsUglify=true --jsSourcemaps=true --cssSourcemaps=true --jsGzip=true --cssGzip=true --jsBrotli=true --cssBrotli=true --imgActive=true')}
                 ${colors.bold('helper tasks:')}
                     ${colors.primary('images')}            Build images. Convert src *.png images to *.webp and *.jpg. Crop & resize tasks
+                    ${colors.primary('')}                      ${colors.gray('--imgActive=true')}
 
                 ${colors.bold('options:')}
                     ${colors.yellow('--tag')}             Set build version.                  ${colors.gray(`default: --tag="${tagVersion}" -> dest path: public/js/${tagVersion}`)}
@@ -376,7 +375,7 @@ let printHelp = () => {
                     ${colors.yellow('--cssSourcemaps')}   Set CSS sourcemaps generation.      ${colors.gray('(true || false)')}
                     ${colors.yellow('--cssGzip')}         Set CSS "gzip" compression mode.    ${colors.gray('(true || false)')}
                     ${colors.yellow('--cssBrotli')}       Set CSS "brotli" compression mode.  ${colors.gray('(true || false)')}
-                    ${colors.yellow('--imgActive')}       Disables all IMG tasks.             ${colors.gray('(true || false)')}
+                    ${colors.yellow('--imgActive')}       Disables all image tasks.           ${colors.gray('(true || false)')}
                     ${colors.yellow('--debug')}           Set debug mode (more output).       ${colors.gray('(true || false)')}
             ${colors.divider(' ')}
     `);
@@ -988,6 +987,26 @@ gulp.task('task:configProduction',
     )
 );
 
+/**
+ * configure "image" task (standalone)
+ */
+gulp.task('task:configImages',
+    gulp.series(
+        done => {
+            let CONF_IMAGES = {
+                IMG: {
+                    ACTIVE: true
+                }
+            };
+
+            CONF = mergeConf(['TASK', 'TAG', 'IMG'].reduce((obj, key) => ({ ...obj, [key]: CONF[key] }), {}), CONF_IMAGES);
+            done();
+        },
+        'task:printConfig',
+        'task:checkConfig'
+    )
+);
+
 /**
  * updates JS destination move to (final) dir
  */
@@ -1165,3 +1184,13 @@ gulp.task(
     )
 );
 
+gulp.task(
+    'images',
+    gulp.series(
+        'task:configImages',
+        'task:cleanImgDest',
+        'task:watchImg',
+        //'task:printJsSummary'
+    )
+);
+

js/app/lib/dragSelect.js

@@ -135,7 +135,6 @@ define(['app/lib/eventHandler'], (EventHandler) => {
             this._selectBox = document.createElement('div');
             this._selectBox.id = this._instanceName;
             this._selectBox.classList.add(this._config.selectBoxClass);
-            this._selectBox.style.position = 'absolute';
             this._config.target.after(this._selectBox);
         }
 
@@ -149,12 +148,11 @@ define(['app/lib/eventHandler'], (EventHandler) => {
                 top:  e.pageY - this._targetDim.top
             });
 
-            Object.assign(this._selectBox.style,{
-                left:   this._selectBoxOrigin.left + 'px',
-                top:	this._selectBoxOrigin.top + 'px',
-                width:	'1px',
-                height:	'1px'
-            });
+            // limit render "reflow" bny adding all properties at once
+            this._selectBox.style.cssText = `--selectBox-left: ${this._selectBoxOrigin.left}px; ` +
+                `--selectBox-top: ${this._selectBoxOrigin.top}px; ` +
+                `--selectBox-width: 1px; ` +
+                `--selectBox-height: 1px;`;
 
             this._selectBox.classList.add(this._config.activeClass);
 
@@ -195,12 +193,10 @@ define(['app/lib/eventHandler'], (EventHandler) => {
             let dimensionHash = [newWidth, newHeight].join('_');
             if(this._selectBoxDimHash !== dimensionHash){
                 this._selectBoxDimHash = dimensionHash;
-                Object.assign(this._selectBox.style,{
-                    left:	newLeft + 'px',
-                    top:	newTop + 'px',
-                    width:	newWidth + 'px',
-                    height:	newHeight + 'px'
-                });
+                this._selectBox.style.cssText = `--selectBox-left: ${newLeft}px; ` +
+                    `--selectBox-top: ${newTop}px; ` +
+                    `--selectBox-width: ${newWidth}px; ` +
+                    `--selectBox-height: ${newHeight}px;`;
 
                 // set drag position data (which corner)
                 this._selectBox.dataset.origin = this.getSelectBoxDragOrigin(left, top, newLeft, newTop).join('|');

js/app/ui/layout/header_login.js

@@ -345,11 +345,12 @@ define([
             }
 
             let lockChange = (e) => {
+                /*
                 if(document.pointerLockElement === this._canvas){
-                    //this._canvas.addEventListener('pointermove', this.onPointerMove, {passive: true});
+                    this._canvas.addEventListener('pointermove', this.onPointerMove, {passive: true});
                 }else{
-                    //this._canvas.removeEventListener('pointermove', this.onPointerMove, {passive: true});
-                }
+                    this._canvas.removeEventListener('pointermove', this.onPointerMove, {passive: true});
+                }*/
             };
 
             //this._canvas.requestPointerLock()
@@ -384,10 +385,12 @@ define([
             this._mouse.x = Math.min(this._canvas.width, Math.max(0, x));
             this._mouse.y = Math.min(this._canvas.height, Math.max(0, y));
 
+            /*
             if(x !== this._mouse.x || y !== this._mouse.y){
                 // cursor outside canvas
-                // document.exitPointerLock();
+                document.exitPointerLock();
             }
+            */
         }
 
         onPointerDown(e){

js/app/util.js

@@ -1776,6 +1776,9 @@ define([
         requirejs(['pnotify.loader'], Notification => {
             // if notification is a "desktio" notification -> blink browser tab
             if(options.desktop && config.title){
+                options.desktop = {
+                    icon: `${imgRoot()}misc/notification.png`
+                };
                 startTabBlink(config.title);
             }