Change gulp build tool to use gulp-terser for later nodejs version support

Author: dceejay

.npmrc

@@ -1,4 +1,9 @@
 
+### 3.4.1: Maintenance Release
+
+ - Change gulp build tool to use gulp-terser for later nodejs version support
+ - Fix datepicker to use chaneg not blur to stop Safari sending double messages
+
 ### 3.4.0: Milestone Release
 
  - Expose manifest.json display property in settingsjs ui section so can be set fullscreen if desired.

CHANGELOG.md

@@ -1,5 +1,5 @@
 CACHE MANIFEST
-# Time: Sun Dec 18 2022 11:13:16 GMT+0000 (Greenwich Mean Time)
+# Time: Sat Dec 31 2022 12:52:21 GMT+0000 (Greenwich Mean Time)
 
 CACHE:
 i18n.js
@@ -26,4 +26,4 @@ loading.html
 NETWORK:
 *
 
-# hash: e348c6d469545979847d57875aaf15ea390b49c8efbdd86dc91e283cc2f6d256
+# hash: 07bf360fe1eb14f187742aa95f70a4f1e8886bc6be2a67d69996855d92cc8800

dist/css/gridstack-extra.min.css

@@ -41,3 +41,20 @@ fs.readFile('node_modules/material-design-icons-iconfont/dist/material-design-ic
         });
     }
 });
+
+// GridStack layout css patches for sass
+fs.readFile('src/gridstack-extra.scss', 'utf8', function (err, file) {
+    if (err) { return; }
+    else {
+        console.log('Fixing up GridStack scss');
+        const res1 = file
+            .replace(/ \(100% \/ \$columns\)/g, ' calc(100% \/ \$columns)')
+        fs.writeFile('src/gridstack-extra.scss', res1, 'utf8', function (err) {
+            if (err) {
+                console.log('Failed to re-write file.');
+            } else {
+                console.log('Fixed  up GridStack scss');
+            }
+        });
+    }
+});

dist/dashboard.appcache

@@ -19,8 +19,8 @@ var
     gmanifest = require('gulp-manifest3'),
     rename = require('gulp-rename'),
     replace = require('gulp-replace'),
-    sass = require('gulp-sass')(require('node-sass')),
-    uglify = require('gulp-uglify'),
+    sass = require('gulp-sass')(require('sass')),
+    terser = require('gulp-terser'),
     gutil = require('gulp-util'),
     path = require('path'),
     streamqueue = require('streamqueue');
@@ -81,7 +81,7 @@ function js() {
         .pipe(gulp.dest('dist/'));
 
     return streamqueue({ objectMode:true }, scripts, templates)
-        .pipe(gulpif(/[.]min[.]js$/, gutil.noop(), uglify()))
+        .pipe(gulpif(/[.]min[.]js$/, gutil.noop(), terser()))
         .pipe(concat('app.min.js'))
         .pipe(header(fs.readFileSync('license.js')))
         .pipe(eol('\n'))

dist/js/app.min.js

@@ -1,6 +1,6 @@
 {
     "name": "node-red-dashboard",
-    "version": "3.4.0",
+    "version": "3.4.1",
     "description": "A set of dashboard nodes for Node-RED",
     "keywords": [
         "node-red"
@@ -88,7 +88,7 @@
         "compression": "^1.7.4",
         "gridstack": "^0.6.4",
         "serve-static": "^1.15.0",
-        "socket.io": "^4.5.2"
+        "socket.io": "^4.5.4"
     },
     "devDependencies": {
         "angular": "~1.8.3",
@@ -124,15 +124,15 @@
         "gulp-rename": "^1.4.0",
         "gulp-replace": "^1.1.4",
         "gulp-sass": "^5.1.0",
-        "gulp-uglify": "~3.0.2",
+        "gulp-terser": "~2.1.0",
         "gulp-util": "^3.0.8",
         "jquery": "~3.6.2",
-        "jshint": "~2.13.5",
+        "jshint": "~2.13.6",
         "justgage": "~1.6.1",
         "less": "^3.13.1",
         "material-design-icons-iconfont": "^6.7.0",
         "moment": "~2.29.4",
-        "node-sass": "^7.0.3",
+        "sass": "^1.57.1",
         "sprintf-js": "^1.1.2",
         "streamqueue": "~1.1.2",
         "svg-morpheus": "^0.3.0",

fixfa.js

@@ -11,13 +11,13 @@ $gridstack-columns: 11 !default;
   .grid-stack.grid-stack-#{$columns} {
 
     > .grid-stack-item {
-      min-width: 100% / $columns;
+      min-width: calc(100% / $columns);
 
       @for $i from 1 through $columns {
-        &[data-gs-width='#{$i}'] { width: (100% / $columns) * $i; }
-        &[data-gs-x='#{$i}'] { left: (100% / $columns) * $i; }
-        &[data-gs-min-width='#{$i}'] { min-width: (100% / $columns) * $i; }
-        &[data-gs-max-width='#{$i}'] { max-width: (100% / $columns) * $i; }
+        &[data-gs-width='#{$i}'] { width: calc(100% / $columns) * $i; }
+        &[data-gs-x='#{$i}'] { left: calc(100% / $columns) * $i; }
+        &[data-gs-min-width='#{$i}'] { min-width: calc(100% / $columns) * $i; }
+        &[data-gs-max-width='#{$i}'] { max-width: calc(100% / $columns) * $i; }
       }
     }
   }