web: update to jquery 3.4.1 and wheelcolorpicker 3.0.8

code/html/custom.js

@@ -513,47 +513,35 @@ function doUpgrade() {
         var data = new FormData();
         data.append("upgrade", file, file.name);
 
-        $.ajax({
-
-            // Your server script to process the upload
-            url: urls.upgrade.href,
-            type: "POST",
-
-            // Form data
-            data: data,
-
-            // Tell jQuery not to process data or worry about content-type
-            // You *must* include these options!
-            cache: false,
-            contentType: false,
-            processData: false,
-
-            success: function(data, text) {
-                $("#upgrade-progress").hide();
-                if ("OK" === data) {
-                    alert("Firmware image uploaded, board rebooting. This page will be refreshed in 5 seconds.");
-                    doReload(5000);
-                } else {
-                    alert("There was an error trying to upload the new image, please try again (" + data + ").");
-                }
-            },
-
-            // Custom XMLHttpRequest
-            xhr: function() {
-                $("#upgrade-progress").show();
-                var myXhr = $.ajaxSettings.xhr();
-                if (myXhr.upload) {
-                    // For handling the progress of the upload
-                    myXhr.upload.addEventListener("progress", function(e) {
-                        if (e.lengthComputable) {
-                            $("progress").attr({ value: e.loaded, max: e.total });
-                        }
-                    } , false);
-                }
-                return myXhr;
+        var xhr = new XMLHttpRequest();
+
+        var network_error = function() {
+            alert("There was a network error trying to upload the new image, please try again.");
+        };
+        xhr.addEventListener("error", network_error, false);
+        xhr.addEventListener("abort", network_error, false);
+
+        xhr.addEventListener("load", function(e) {
+            $("#upgrade-progress").hide();
+            if ("OK" === xhr.responseText) {
+                alert("Firmware image uploaded, board rebooting. This page will be refreshed in 5 seconds.");
+                doReload(5000);
+            } else {
+                alert("There was an error trying to upload the new image, please try again ("
+                    + "response: " + xhr.responseText + ", "
+                    + "status: " + xhr.statusText + ")");
             }
+        }, false);
 
-        });
+        xhr.upload.addEventListener("progress", function(e) {
+            $("#upgrade-progress").show();
+            if (e.lengthComputable) {
+                $("progress").attr({ value: e.loaded, max: e.total });
+            }
+        }, false);
+
+        xhr.open("POST", urls.upgrade.href);
+        xhr.send(data);
 
     });
 
@@ -1830,12 +1818,17 @@ function connectToURL(url) {
 
     initUrls(url);
 
-    $.ajax({
+    fetch(urls.auth.href, {
         'method': 'GET',
-        'crossDomain': true,
-        'url': urls.auth.href,
-        'xhrFields': { 'withCredentials': true }
-    }).done(function(data) {
+        'cors': true,
+        'credentials': 'same-origin'
+    }).then(function(response) {
+        // Nothing to do, reload page and retry
+        if (response.status != 200) {
+            doReload(5000);
+            return;
+        }
+        // update websock object
         if (websock) { websock.close(); }
         websock = new WebSocket(urls.ws.href);
         websock.onmessage = function(evt) {
@@ -1844,8 +1837,9 @@ function connectToURL(url) {
                 processData(data);
             }
         };
-    }).fail(function() {
-        // Nothing to do, reload page and retry
+    }).catch(function(error) {
+        console.log(error);
+        doReload(5000);
     });
 
 }

code/html/index.html

@@ -12,7 +12,7 @@
         <link rel="stylesheet" href="vendor/pure-grids-responsive-1.0.0.min.css" />
         <link rel="stylesheet" href="vendor/side-menu.css" />
         <!-- removeIf(!light) -->
-        <link rel="stylesheet" href="vendor/jquery.wheelcolorpicker-3.0.3.css" />
+        <link rel="stylesheet" href="vendor/jquery.wheelcolorpicker-3.0.8.css" />
         <!-- endRemoveIf(!light) -->
         <!-- removeIf(!rfm69) -->
         <link rel="stylesheet" href="vendor/datatables-1.10.16.css" />
@@ -2009,10 +2009,10 @@
     </body>
 
     <!-- build:js script.js -->
-    <script src="vendor/jquery-3.2.1.min.js"></script>
+    <script src="vendor/jquery-3.4.1.slim.min.js"></script>
     <script src="custom.js"></script>
     <!-- removeIf(!light) -->
-    <script src="vendor/jquery.wheelcolorpicker-3.0.3.min.js"></script>
+    <script src="vendor/jquery.wheelcolorpicker-3.0.8.min.js"></script>
     <!-- endRemoveIf(!light) -->
     <!-- removeIf(!rfm69) -->
     <script src="vendor/datatables-1.10.16.min.js"></script>

code/html/vendor/jquery.wheelcolorpicker-3.0.3.css

@@ -1,160 +0,0 @@
-/**
- * jQuery Wheel Color Picker
- * Base Stylesheet
- * 
- * http://www.jar2.net/projects/jquery-wheelcolorpicker
- * 
- * Copyright © 2011-2016 Fajar Chandra. All rights reserved.
- * Released under MIT License.
- * http://www.opensource.org/licenses/mit-license.php
- * 
- * Note: Width, height, left, and top properties are handled by the 
- * plugin. These values might change on the fly.
- */
-
-.jQWCP-wWidget {
-	position: absolute;
-	width: 250px;
-	height: 180px;
-	background: #eee;
-	box-shadow: 1px 1px 4px rgba(0,0,0,.5);
-	border-radius: 4px;
-	border: solid 1px #aaa;
-	padding: 10px;
-	z-index: 1001;
-}
-
-.jQWCP-wWidget.jQWCP-block {
-	position: relative;
-	border-color: #aaa;
-	box-shadow: inset 1px 1px 1px #ccc;
-}
-
-.jQWCP-wWheel {
-	background-repeat: no-repeat;
-	background-position: center;
-	background-size: contain;
-	position: relative;
-	float: left;
-	width: 180px;
-	height: 180px;
-	-webkit-border-radius: 90px;
-	-moz-border-radius: 50%;
-	border-radius: 50%;
-	border: solid 1px #aaa;
-	margin: -1px;
-	margin-right: 10px;
-	transition: border .15s;
-	cursor: crosshair;
-}
-
-.jQWCP-wWheel:hover {
-	border-color: #666;
-}
-
-.jQWCP-wWheelOverlay {
-	position: absolute;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
-	background: #000;
-	opacity: 0;
-	-webkit-border-radius: 90px;
-	-moz-border-radius: 50%;
-	border-radius: 50%;
-}
-
-.jQWCP-wWheelCursor {
-	width: 8px;
-	height: 8px;
-	position: absolute;
-	top: 50%;
-	left: 50%;
-	margin: -6px -6px;
-	cursor: crosshair;
-	border: solid 2px #fff;
-	box-shadow: 1px 1px 2px #000;
-	border-radius: 50%;
-}
-
-.jQWCP-slider-wrapper,
-.jQWCP-wPreview {
-	position: relative;
-	width: 20px;
-	height: 180px;
-	float: left;
-	margin-right: 10px;
-}
-
-.jQWCP-wWheel:last-child,
-.jQWCP-slider-wrapper:last-child,
-.jQWCP-wPreview:last-child {
-    margin-right: 0;
-}
-
-.jQWCP-slider,
-.jQWCP-wPreviewBox {
-	position: absolute;
-	width: 100%;
-	height: 100%;
-	left: 0;
-	top: 0;
-	box-sizing: border-box;
-	border: solid 1px #aaa;
-	margin: -1px;
-	-moz-border-radius: 4px;
-	border-radius: 4px;
-	transition: border .15s;
-}
-
-.jQWCP-slider {
-	cursor: crosshair;
-}
-
-.jQWCP-slider-wrapper:hover .jQWCP-slider {
-	border-color: #666;
-}
-
-.jQWCP-scursor {
-	position: absolute;
-	left: 0;
-	top: 0;
-	right: 0;
-	height: 6px;
-	margin: -5px -1px -5px -3px;
-	cursor: crosshair;
-	border: solid 2px #fff;
-	box-shadow: 1px 1px 2px #000;
-	border-radius: 4px;
-}
-
-.jQWCP-wAlphaSlider,
-.jQWCP-wPreviewBox {
-	background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEVAQEB/f39eaJUuAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3QYRBDgK9dKdMgAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAARSURBVAjXY/jPwIAVYRf9DwB+vw/x6vMT1wAAAABJRU5ErkJggg==') center center;
-}
-
-.jQWCP-overlay {
-	position: fixed;
-	top: 0;
-	left: 0;
-	bottom: 0;
-	right: 0;
-	z-index: 1000;
-}
-
-/*********************/
-
-/* Mobile layout */
-
-.jQWCP-mobile.jQWCP-wWidget {
-    position: fixed;
-    bottom: 0;
-    left: 0 !important;
-    top: auto !important;
-    width: 100%;
-    height: 75%;
-    max-height: 240px;
-    box-sizing: border-box;
-    border-radius: 0;
-}

code/html/vendor/jquery.wheelcolorpicker-3.0.8.css

@@ -0,0 +1,161 @@
+/**
+ * Wheel Color Picker for jQuery
+ * Base Stylesheet
+ * 
+ * https://raffer.one/projects/jquery-wheelcolorpicker
+ * 
+ * Copyright © 2011-2019 Fajar Chandra. All rights reserved.
+ * Released under MIT License.
+ * http://www.opensource.org/licenses/mit-license.php
+ * 
+ * Note: Width, height, left, and top properties are handled by the 
+ * plugin. These values might change on the fly.
+ */
+
+.jQWCP-wWidget {
+  position: absolute;
+  width: 250px;
+  height: 180px;
+  background: #eee;
+  box-shadow: 1px 1px 4px rgba(0,0,0,.5);
+  border-radius: 4px;
+  border: solid 1px #aaa;
+  padding: 10px;
+  z-index: 1001;
+  touch-action: none;
+}
+
+.jQWCP-wWidget.jQWCP-block {
+  position: relative;
+  border-color: #aaa;
+  box-shadow: inset 1px 1px 1px #ccc;
+}
+
+.jQWCP-wWheel {
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+  position: relative;
+  float: left;
+  width: 180px;
+  height: 180px;
+  -webkit-border-radius: 90px;
+  -moz-border-radius: 50%;
+  border-radius: 50%;
+  border: solid 1px #aaa;
+  margin: -1px;
+  margin-right: 10px;
+  transition: border .15s;
+  cursor: crosshair;
+}
+
+.jQWCP-wWheel:hover {
+  border-color: #666;
+}
+
+.jQWCP-wWheelOverlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: #000;
+  opacity: 0;
+  -webkit-border-radius: 90px;
+  -moz-border-radius: 50%;
+  border-radius: 50%;
+}
+
+.jQWCP-wWheelCursor {
+  width: 8px;
+  height: 8px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  margin: -6px -6px;
+  cursor: crosshair;
+  border: solid 2px #fff;
+  box-shadow: 1px 1px 2px #000;
+  border-radius: 50%;
+}
+
+.jQWCP-slider-wrapper,
+.jQWCP-wPreview {
+  position: relative;
+  width: 20px;
+  height: 180px;
+  float: left;
+  margin-right: 10px;
+}
+
+.jQWCP-wWheel:last-child,
+.jQWCP-slider-wrapper:last-child,
+.jQWCP-wPreview:last-child {
+    margin-right: 0;
+}
+
+.jQWCP-slider,
+.jQWCP-wPreviewBox {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  box-sizing: border-box;
+  border: solid 1px #aaa;
+  margin: -1px;
+  -moz-border-radius: 4px;
+  border-radius: 4px;
+  transition: border .15s;
+}
+
+.jQWCP-slider {
+  cursor: crosshair;
+}
+
+.jQWCP-slider-wrapper:hover .jQWCP-slider {
+  border-color: #666;
+}
+
+.jQWCP-scursor {
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  height: 6px;
+  margin: -5px -1px -5px -3px;
+  cursor: crosshair;
+  border: solid 2px #fff;
+  box-shadow: 1px 1px 2px #000;
+  border-radius: 4px;
+}
+
+.jQWCP-wAlphaSlider,
+.jQWCP-wPreviewBox {
+  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEVAQEB/f39eaJUuAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3QYRBDgK9dKdMgAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAARSURBVAjXY/jPwIAVYRf9DwB+vw/x6vMT1wAAAABJRU5ErkJggg==') center center;
+}
+
+.jQWCP-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  z-index: 1000;
+}
+
+/*********************/
+
+/* Mobile layout */
+
+.jQWCP-mobile.jQWCP-wWidget {
+    position: fixed;
+    bottom: 0;
+    left: 0 !important;
+    top: auto !important;
+    width: 100%;
+    height: 75%;
+    max-height: 240px;
+    box-sizing: border-box;
+    border-radius: 0;
+}