refactor: moved version check to JS

The version checking logic is now inside a JS file and should be bundled inside the last-bundle dist file.

Author: TGRHavoc

debug.html

@@ -55,6 +55,7 @@
     <script src="js/vendor/a_jquery-3.3.1.js"></script>
     <script src="js/vendor/b_bootstrap.js"></script>
     <script src="js/vendor/c_bootstrap-notify.js"></script>
+    <script src="js/vendor/d_version_check.js"></script>
 
     <!-- Custom JS files -->
     <script src="js/src/alerter.1.js"></script>
@@ -76,7 +77,7 @@
             </button>
             <a class="navbar-brand" href="https://github.com/TGRHavoc/">
                     <img src="https://avatars1.githubusercontent.com/u/1770893?s=460&v=4" style="max-height: 30px" >
-                    Live Map v<span id="livemap_version">2.0.0</span>
+                    Live Map v<span id="livemap_version">0.0.0</span>
             </a>
 
             <div class="collapse navbar-collapse" id="navbarNav">
@@ -185,6 +186,7 @@
     </div>
 
     <script src="js/src/controls.2.js"></script>
+    <script src="js/src/version-check.2.js"></script>
 
     <script>
     var greenIcon = L.icon({

js/src/version-check.2.js

@@ -0,0 +1,50 @@
+$(document).ready(function () {
+    $.ajax("version.json", {
+        error: function (textStatus, errorThrown) {
+            createAlert({
+                title: "<strong>Error getting version.json!</strong>",
+                message: textStatus.statusText
+            });
+        },
+        dataType: "text", // We want to strip any comments in the file first
+        success: function (data, textStatus) {
+            var str = stripJsonOfComments(data);
+            var p = JSON.parse(str);
+
+            window.version = p["interface"];
+
+            $("#livemap_version").text(window.version); // Show it on the interface
+
+            $.ajax("//raw.githubusercontent.com/TGRHavoc/live_map-interface/master/version.json", {
+                error: function (textStatus, errorThrown) {
+                    createAlert({
+                        title: "<strong>Error latest version for check!</strong>",
+                        message: textStatus.statusText
+                    });
+                },
+                dataType: "text", // We want to strip any comments in the file first
+                success: function (data, textStatus) {
+                    var str = stripJsonOfComments(data);
+                    var p = JSON.parse(str);
+
+                    // Check versions
+                    if (window.compareVersions(window.version, p["interface"]) < 0){
+                        createAlert({
+                            title: "Update available",
+                            message: `An update is available (${window.version} -> ${p["interface"]}). Please download it <a style='color: #000;' href='https://github.com/TGRHavoc/live_map-interface'>HERE.</a>`
+                        })
+                    }else{
+                        console.log("Up to date or, a higher version");
+                    }
+
+                }
+            });
+        }
+    });
+});
+
+/*
+        $jsArrayString = sprintf("An update is available (%s -> %s). Please download it <a style=\'color: #000;\' href=\'%s\'>HERE.</a>", self::$version, self::$latestVer, self::$downloadUrl);
+
+        return "<script> createAlert({ title: 'Update available', message: '" . $jsArrayString . "'}, {type: 'danger', delay: 0}); </script>";
+*/

js/vendor/d_version_check.js

@@ -0,0 +1,75 @@
+/* global define */
+(function (root, factory) {
+    /* istanbul ignore next */
+    if (typeof define === 'function' && define.amd) {
+        define([], factory);
+    } else if (typeof exports === 'object') {
+        module.exports = factory();
+    } else {
+        root.compareVersions = factory();
+    }
+}(this, function () {
+
+    var semver = /^v?(?:\d+)(\.(?:[x*]|\d+)(\.(?:[x*]|\d+)(\.(?:[x*]|\d+))?(?:-[\da-z\-]+(?:\.[\da-z\-]+)*)?(?:\+[\da-z\-]+(?:\.[\da-z\-]+)*)?)?)?$/i;
+
+    function indexOrEnd(str, q) {
+        return str.indexOf(q) === -1 ? str.length : str.indexOf(q);
+    }
+
+    function split(v) {
+        var c = v.replace(/^v/, '').replace(/\+.*$/, '');
+        var patchIndex = indexOrEnd(c, '-');
+        var arr = c.substring(0, patchIndex).split('.');
+        arr.push(c.substring(patchIndex + 1));
+        return arr;
+    }
+
+    function tryParse(v) {
+        return isNaN(Number(v)) ? v : Number(v);
+    }
+
+    function validate(version) {
+        if (typeof version !== 'string') {
+            throw new TypeError('Invalid argument expected string');
+        }
+        if (!semver.test(version)) {
+            throw new Error('Invalid argument not valid semver (\'' + version + '\' received)');
+        }
+    }
+
+    return function compareVersions(v1, v2) {
+        [v1, v2].forEach(validate);
+
+        var s1 = split(v1);
+        var s2 = split(v2);
+
+        for (var i = 0; i < Math.max(s1.length - 1, s2.length - 1); i++) {
+            var n1 = parseInt(s1[i] || 0, 10);
+            var n2 = parseInt(s2[i] || 0, 10);
+
+            if (n1 > n2) return 1;
+            if (n2 > n1) return -1;
+        }
+
+        var sp1 = s1[s1.length - 1];
+        var sp2 = s2[s2.length - 1];
+
+        if (sp1 && sp2) {
+            var p1 = sp1.split('.').map(tryParse);
+            var p2 = sp2.split('.').map(tryParse);
+
+            for (i = 0; i < Math.max(p1.length, p2.length); i++) {
+                if (p1[i] === undefined || typeof p2[i] === 'string' && typeof p1[i] === 'number') return -1;
+                if (p2[i] === undefined || typeof p1[i] === 'string' && typeof p2[i] === 'number') return 1;
+
+                if (p1[i] > p2[i]) return 1;
+                if (p2[i] > p1[i]) return -1;
+            }
+        } else if (sp1 || sp2) {
+            return sp1 ? -1 : 1;
+        }
+
+        return 0;
+    };
+
+}));

style/src/style.css

@@ -94,7 +94,6 @@ input[type=text] {display:inline;}
 .fix-row label {display:block;vertical-align: middle;padding: 8px 0;}
 .fix-row input {float:right;}
 .info-window {padding:10px;}
-.info-icon {background-image: url(../images/icons/info.png);background-repeat:no-repeat;background-position: center center;float:left;width:32px;height:32px;margin-right:5px;}
 .info-header-box {margin-bottom:2px;}
 .info-header {float:left;font-size:1.8em!important;font-weight:bold!important;color:#333!important;padding-top:3px;}
 .info-body {color:#333 !important; height:33px;border-top:1px solid #333;}

version.json

@@ -1,3 +1,3 @@
 {
-  "interface" : "2.2.11"
+  "interface" : "3.0.0"
 }