Remove YUI Compressor and use plain JavaScript

projecthorus · darksidelemm · Oct 17, 2024 · Oct 17, 2024 · Oct 17, 2024 · 2c86e40ab24d6f05db46bfdd6c4a904740be1b7d
commit 2c86e40ab24d6f05db46bfdd6c4a904740be1b7d
diff --git a/.gitignore b/.gitignore
@@ -1,8 +1,6 @@
 *.swp
 *.pyc
 *.log
-js/mobile.js
-js/init_plot.js
-css/mobile.css
-cache.manifest
+/index.html
+/service-worker.js
 tiles/
diff --git a/.htaccess b/.htaccess
diff --git a/DEVELOPER_README.md b/DEVELOPER_README.md
@@ -4,6 +4,6 @@ To get a copy of the code and run a test web server:
 
 1. [Fork the repository](https://github.com/projecthorus/sondehub-amateur-tracker/fork) by visiting [https://github.com/projecthorus/sondehub-amateur-tracker/fork](https://github.com/projecthorus/sondehub-amateur-tracker/fork).
 2. Clone the repository with your git tool of choice.
-3. Run `build.sh` to compile the javascript files. (This requires Java to be installed and in your path.)
+3. Run `build.sh` to generate `index.html` and `service-worker.js`.
 4. Run `python serve.py` to run a simple web server to (This requires python 3.x)
 5. Visit [http://localhost:8000](http://localhost:8000) to view the local version of the server!
diff --git a/README.md b/README.md
@@ -31,10 +31,11 @@ Pull requests are welcome.
 
 ## Installation
 
-Requirements: Java
-
     $ git clone https://github.com/projecthorus/sondehub-amateur-tracker.git
     $ ./build.sh
+    $ python serve.py
+
+Visit [http://localhost:8000](http://localhost:8000) to view the local version of the tracker!
 
 ## Original design
 

diff --git a/build.sh b/build.sh
@@ -1,48 +1,18 @@
 #!/bin/bash
 
-# compile stylesheet
-echo -n "Compiling CSS... "
-cd css
-rm -f mobile.css
-cat base.css skeleton.css layout.css habitat-font.css main.css leaflet.css leaflet.fullscreen.css > mobile.tmp
-java -jar "../tools/yuicompressor-2.4.8.jar" --type=css mobile.tmp > mobile.css
-rm -f mobile.tmp
-cd ..
-echo "Done!"
-
-#compile javascript
-echo -n "Compiling JavaScript... "
-cd js
-rm -f mobile.js init_plot.js
-# precompiled libs
-cat jquery* >> mobile.js
+set -e
 
 VERSION="`git rev-parse --short HEAD`"
-
 BUILD_DATE="`date -u +%Y-%m-%dT%H:%M:%SZ`"
 
-# compile the rest
-java -jar "../tools/yuicompressor-2.4.8.jar" --type=js --disable-optimizations --nomunge iscroll.js >> mobile.js
-java -jar "../tools/yuicompressor-2.4.8.jar" --type=js --disable-optimizations --nomunge chasecar.lib.js | sed "s/{VER}/$VERSION/" >> mobile.js
-java -jar "../tools/yuicompressor-2.4.8.jar" --type=js --disable-optimizations --nomunge tracker.js >> mobile.js
-java -jar "../tools/yuicompressor-2.4.8.jar" --type=js --disable-optimizations --nomunge app.js | sed "s/{VER}/$VERSION/" | sed "s/{BUILD_DATE}/$BUILD_DATE/" >> mobile.js
-java -jar "../tools/yuicompressor-2.4.8.jar" --type=js --disable-optimizations --nomunge colour-map.js >> mobile.js
-java -jar "../tools/yuicompressor-2.4.8.jar" --type=js --disable-optimizations --nomunge suncalc.js >> mobile.js
-java -jar "../tools/yuicompressor-2.4.8.jar" --type=js --disable-optimizations --nomunge format.js >> mobile.js
-java -jar "../tools/yuicompressor-2.4.8.jar" --type=js --disable-optimizations --nomunge flight_doc.js >> mobile.js
-
 
-#compile plot lib and config
-java -jar "../tools/yuicompressor-2.4.8.jar" --type=js --disable-optimizations --nomunge _jquery.flot.js >> init_plot.js
-java -jar "../tools/yuicompressor-2.4.8.jar" --type=js --disable-optimizations --nomunge plot_config.js >> init_plot.js
-
-cd ..
+# cache fixes
+echo -n "Generating index.html... "
+sed -e "s/{VER}/$VERSION/" -e "s/{BUILD_DATE}/$BUILD_DATE/" index.template.html > index.html
 echo "Done!"
-echo -n "Generate cache.manifest..."
-
-
-sed "s/^\(# version\) .*$/\1 $VERSION `date +%s`/" cache.manifest-dev > cache.manifest
 
+echo -n "Generating service-worker.js... "
+sed -e "s/{VER}/$VERSION/" service-worker.template.js > service-worker.js
 echo "Done!"
 
-echo "Build version: $VERSION Build date: $BUILD_DATE"
+echo "Build version: $VERSION Build date: $BUILD_DATE"
diff --git a/cache.manifest-dev b/cache.manifest-dev
diff --git a/index.html → index.template.html b/index.html → index.template.html
@@ -19,10 +19,35 @@
         <link rel="icon" type="image/x-icon" href="favicon.ico" />
         <link rel="manifest" href="manifest.json">
 
-        <link rel="stylesheet" href="css/mobile.css"/>
+        <link rel="stylesheet" href="css/base.css"/>
+        <link rel="stylesheet" href="css/skeleton.css"/>
+        <link rel="stylesheet" href="css/layout.css"/>
+        <link rel="stylesheet" href="css/habitat-font.css"/>
+        <link rel="stylesheet" href="css/main.css"/>
+        <link rel="stylesheet" href="css/leaflet.css"/>
+        <link rel="stylesheet" href="css/leaflet.fullscreen.css"/>
 
+        <script src="https://sdk.amazonaws.com/js/aws-sdk-2.1130.0.min.js"></script>
+        <script type="text/javascript" language="javascript" src="js/leaflet.js?v={VER}"></script>
+        <script type="text/javascript" language="javascript" src="js/Leaflet.fullscreen.min.js?v={VER}"></script>
+        <script type="text/javascript" language="javascript" src="js/L.Terminator.js?v={VER}"></script>
+        <script type="text/javascript" language="javascript" src="js/L.TileLayer.NoGap.js?v={VER}"></script>
+        <script type="text/javascript" language="javascript" src="js/leaflet.antimeridian-src.js?v={VER}"></script>
+        <script type="text/javascript" language="javascript" src="js/paho-mqtt.js?v={VER}"></script>
+
+        <script type="text/javascript" language="javascript" src="js/jquery-1.12.4-min.js"></script>
+        <script type="text/javascript" language="javascript" src="js/iscroll.js?v={VER}"></script>
+        <script type="text/javascript" language="javascript" src="js/chasecar.lib.js?v={VER}"></script>
+        <script type="text/javascript" language="javascript" src="js/sondehub.js?v={VER}"></script>
+        <script type="text/javascript" language="javascript" src="js/colour-map.js?v={VER}"></script>
+        <script type="text/javascript" language="javascript" src="js/suncalc.js?v={VER}"></script>
+        <script type="text/javascript" language="javascript" src="js/format.js?v={VER}"></script>
+
+        <script type="text/javascript" language="javascript" src="js/rbush.js?v={VER}"></script>
+        <script type="text/javascript" language="javascript" src="js/pwa.js?v={VER}"></script>
+
     </head>
-    <body>
+    <body data-version="{VER}">
 
     <div id="loading">
         <div>
@@ -131,9 +156,10 @@ <h4>Contribute</h4>
                 <a href="https://github.com/projecthorus/sondehub-amateur-tracker" target="_blank" rel="noopener">github/sondehub-amateur-tracker</a>.
                 Bug reports, suggestions and pull requests are welcome. A huge thanks to RGP for developing the mobile tracker that this site is based on.
                 <br/><br/>
-                Tracker Revision: <span class="r" id="build_version"></span>
+                Tracker Revision: <span class="r">{VER}</span>
                 <br/>
-                Build Date: <span class="r" id="build_date"></span>
+                Build Date: <span class="r">{BUILD_DATE}</span>
+
             </p>
         </div>
     </div>
@@ -380,26 +406,10 @@ <h2>Prediction Settings</h2>
         </div>
     </div>
     <!-- Was 3.31-->
+
+    <script type="text/javascript" language="javascript" src="js/app.js?v={VER}"></script>
+    <script type="text/javascript" language="javascript" src="js/flight_doc.js?v={VER}"></script>
+
     <script type="text/javascript" language="javascript" src="https://xc5dqkj2cgb1.statuspage.io/embed/script.js" async defer></script>
-    <script src="https://sdk.amazonaws.com/js/aws-sdk-2.1130.0.min.js"></script>
-    <script type="text/javascript" language="javascript" src="js/leaflet.js"></script>
-    <script type="text/javascript" language="javascript" src="js/Leaflet.fullscreen.min.js"></script>
-    <script type="text/javascript" language="javascript" src="js/L.Terminator.js"></script>
-    <script type="text/javascript" language="javascript" src="js/L.TileLayer.NoGap.js"></script>
-    <script type="text/javascript" language="javascript" src="js/leaflet.antimeridian-src.js"></script>
-    <script type="text/javascript" language="javascript" src="js/paho-mqtt.js"></script>
-    <!--
-    <script type="text/javascript" language="javascript" src="js/iscroll.js"></script>
-    <script type="text/javascript" language="javascript" src="js/jquery-1.12.4-min.js"></script>
-    <script type="text/javascript" language="javascript" src="js/jquery-ui.min.js"></script>
-    <script type="text/javascript" language="javascript" src="js/chasecar.lib.js"></script>
-    <script type="text/javascript" language="javascript" src="js/tracker.js"></script>
-    <script type="text/javascript" language="javascript" src="js/tracker.js"></script>
-    <script type="text/javascript" language="javascript" src="js/color-map.js"></script>
-    -->
-    <script type="text/javascript" language="javascript" src="js/mobile.js"></script>
-    <script type="text/javascript" language="javascript" src="js/rbush.js"></script>
-    <script type="text/javascript" language="javascript" src="js/pwa.js"></script>
-
     </body>
 </html>
diff --git a/js/app.js b/js/app.js
@@ -197,15 +197,17 @@ function trackerInit() {
     if(is_mobile || wvar.enabled) $(".nav .wvar").hide();
 
     if(!is_mobile) {
-        $.getScript("js/init_plot.js", function() { checkSize(); if(!map) load(); });
+        $.getScript("js/_jquery.flot.js", function() {
+            $.getScript("js/plot_config.js", function() { checkSize(); if(!map) load(); });
+        });
         if(wvar.graph) $('#telemetry_graph').attr('style','');
 
         return;
     }
     if(!map) load();
 }
 
-// if for some reason, applicationCache is not working, load the app after a 3s timeout
+// load the app after a 3s timeout
 var initTimer = setTimeout(trackerInit, 3000);
 
 var listScroll;
@@ -362,7 +364,7 @@ var positionUpdateHandle = function(position) {
         }
         else { return; }
 
-        // add/update marker on the map (tracker.js)
+        // add/update marker on the map (sondehub.js)
         updateCurrentPosition(lat, lon);
 
         // round the coordinates
@@ -482,10 +484,6 @@ $(window).ready(function() {
         updateTime(new Date());
     }, 1000);
 
-    // Update Tracker version info
-    $('#build_version').text("{VER}");
-    $('#build_date').text("{BUILD_DATE}");
-
     // resize elements if needed
     checkSize();
 

diff --git a/js/chasecar.lib.js b/js/chasecar.lib.js
@@ -23,7 +23,7 @@ ChaseCar.updatePosition = function(callsign, position) {
 
     var _doc = {
         "software_name": "SondeHub-Amateur",
-        "software_version": "{VER}",
+        "software_version": document.body.dataset.version,
         "uploader_callsign": callsign,
         "uploader_position": [position.coords.latitude, position.coords.longitude, _position_alt],
         "uploader_antenna": "Mobile Station",
@@ -39,4 +39,4 @@ ChaseCar.updatePosition = function(callsign, position) {
             dataType: "json",
             data: JSON.stringify(_doc),
     });
-};
+};
diff --git a/js/tracker.js → js/sondehub.js b/js/tracker.js → js/sondehub.js
diff --git a/service-worker.js → service-worker.template.js b/service-worker.js → service-worker.template.js
@@ -1,18 +1,34 @@
 self.addEventListener('install', function(event) {
     event.waitUntil(
-        caches.open(cacheName).then(function(cache) {
+        caches.open("{VER}").then(function(cache) {
             return cache.addAll(
                 [
-                    '/css/mobile.css',
+                    '/css/base.css',
+                    '/css/skeleton.css',
+                    '/css/layout.css',
+                    '/css/habitat-font.css',
+                    '/css/main.css',
                     '/css/leaflet.css',
                     '/css/leaflet.fullscreen.css',
                     '/js/leaflet.js',
                     '/js/Leaflet.fullscreen.min.js',
                     '/js/L.Terminator.js',
-                    '/js/mobile.js',
+                    '/js/L.TileLayer.NoGap.js',
+                    '/js/leaflet.antimeridian-src.js',
+                    '/js/paho-mqtt.js',
+                    '/js/jquery-1.12.4-min.js',
+                    '/js/iscroll.js',
+                    '/js/chasecar.lib.js',
+                    '/js/sondehub.js',
+                    '/js/app.js',
+                    '/js/colour-map.js',
+                    '/js/suncalc.js',
+                    '/js/flight_doc.js',
+                    '/js/format.js',
                     '/js/rbush.js',
                     '/js/pwa.js',
-                    '/js/init_plot.js',
+                    '/js/_jquery.flot.js',
+                    '/js/plot_config.js',
                     '/img/markers/balloon.svg',
                     '/img/markers/car.svg',
                     '/img/markers/parachute.svg',
@@ -40,4 +56,4 @@ self.addEventListener('fetch', function (event) {
             return response || fetch(event.request);
         }),
     );
-});
+});
diff --git a/tools/yuicompressor-2.4.8.jar b/tools/yuicompressor-2.4.8.jar