Add JavaScript version of FixPhrase library

FixPhrase.lib.php

@@ -1,5 +1,28 @@
 <?php
+/* Copyright 2021 Netsyms Technologies.
 
+ Redistribution and use in source and binary forms, with or without modification, are permitted
+ provided that the following conditions are met:
+
+ 1. Redistributions of source code must retain the above copyright notice, this list of conditions
+ and the following disclaimer.
+
+ 2. Redistributions in binary form must reproduce the above copyright notice, this list of
+ conditions and the following disclaimer in the documentation and/or other materials provided with
+ the distribution.
+
+ 3. Neither the name of the copyright holder nor the names of its contributors may be used to
+ endorse or promote products derived from this software without specific prior written permission.
+
+ THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR
+ IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND
+ FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR
+ CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+ DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+ DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER
+ IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT
+ OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
 class FixPhrase {
 
     private const WORDLIST = [

index.html

@@ -8,6 +8,7 @@
         <link rel="stylesheet" href="js/maplibre-gl/dist/mapbox-gl.css" />
         <script src="https://static.netsyms.net/jquery/jquery.min.js"></script>
         <script src="https://static.netsyms.net/bootstrap/5/bootstrap.bundle.min.js"></script>
+        <script src="js/fixphrase.js"></script>
         <script src="js/map.js"></script>
         <script src="js/maplibre-gl/dist/mapbox-gl.js"></script>
         <script src="js/map_maplibre.js"></script>
@@ -167,6 +168,23 @@
             };
 
             function dolookup(words) {
+                try {
+                    words = words.trim().toLowerCase().replace(/\s+/g, ' ');
+                    var coords = FixPhrase.decode(words);
+
+                    location.hash = "#map";
+                        new mapboxgl.Popup()
+                                .setLngLat({lat: coords[0], lng: coords[1]})
+                                .setHTML("<b>" + words + "</b><br>" + coords[0] + ", " + coords[1])
+                                .addTo(map);
+                        map.animateMapIn(coords[0], coords[1], 18);
+                } catch (e) {
+                    alert(e);
+                }
+
+                return;
+
+                // Example of accessing the PHP API instead of using JS
                 $.getJSON("lookup.php", {
                     words: words
                 }, function (resp) {

js/map_maplibre.js

@@ -23,13 +23,25 @@ function maplibreMap() {
 
     map.on('click', function (e) {
         var coordinates = e.lngLat;
+        try {
+            var words = FixPhrase.encode(coordinates.lat, coordinates.lng);
+            var popup = new mapboxgl.Popup();
+            popup.setLngLat(coordinates);
+            popup.setHTML("<b>" + words + "</b><br>" + (Math.round(coordinates.lat * 10000) / 10000) + ", " + (Math.round(coordinates.lng * 10000) / 10000));
+            popup.addTo(map);
+        } catch (e) {
+            alert(e);
+        }
+        return;
+        
+        // Example of accessing the PHP API instead of using JS
         $.getJSON("lookup.php", {
             latitude: coordinates.lat,
             longitude: coordinates.lng
         }, function (resp) {
             var popup = new mapboxgl.Popup();
             popup.setLngLat(coordinates);
-            popup.setHTML("<b>" + resp.words + "</b><br>" + resp.coords[0] + ", " + resp.coords[1])
+            popup.setHTML("<b>" + resp.words + "</b><br>" + resp.coords[0] + ", " + resp.coords[1]);
             popup.addTo(map);
         });
     });