Reimplemented search box.

web_assets/overviewer.css

@@ -100,3 +100,34 @@ body {
     background-color: #fff; /* fallback */
     background-color: rgba(255,255,255,0.8);
 }
+
+#searchControl {
+    padding: 5px;
+    height: 20px;
+    font-family: Arial, sans-serif;
+}
+
+#searchControl > input {
+    border: 2px solid #000;
+    font-size: 12pt;
+    width: 20em;
+    background-colour: #fff;
+}
+
+div#searchDropDown {
+    border: 1px solid #000;
+    width: 17em;
+    font-size: 14pt;
+    background-color: #fff;
+    display: none;
+}
+
+div.searchResultItem  {
+    overflow: hidden;
+    text-overflow: ellipsis;    
+}
+
+div.searchResultItem img {
+    width: 24px;
+    height: 24px;
+}

web_assets/overviewer.js

@@ -58,6 +58,7 @@ var overviewer = {
             overviewer.util.initializeMarkers();
             overviewer.util.initializeRegions();
             overviewer.util.createMapControls();
+            overviewer.util.createSearchBox();
         },
         /**
          * This adds some methods to these classes because Javascript is stupid
@@ -96,6 +97,25 @@ var overviewer = {
                 return div;
             };
         },
+        /**
+         * Quote an arbitrary string for use in a regex matcher.
+         * WTB parametized regexes, JavaScript...
+         *
+         *   From http://kevin.vanzonneveld.net
+         *   original by: booeyOH
+         *   improved by: Ates Goral (http://magnetiq.com)
+         *   improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
+         *   bugfixed by: Onno Marsman
+         *     example 1: preg_quote("$40");
+         *     returns 1: '\$40'
+         *     example 2: preg_quote("*RRRING* Hello?");
+         *     returns 2: '\*RRRING\* Hello\?'
+         *     example 3: preg_quote("\\.+*?[^]$(){}=!<>|:");
+         *     returns 3: '\\\.\+\*\?\[\^\]\$\(\)\{\}\=\!\<\>\|\:'
+         */
+        "pregQuote": function(str) {
+            return (str+'').replace(/([\\\.\+\*\?\[\^\]\$\(\)\{\}\=\!\<\>\|\:])/g, "\\$1");
+        },
         /**
          * Setup the varous mapTypes before we actually create the map. This used
          * to be a bunch of crap down at the bottom of functions.js
@@ -317,6 +337,7 @@ var overviewer = {
                                 'icon':     iconURL,
                                 'visible':  false
                             });
+                            item.marker = marker;
                             overviewer.util.debug(label);
                             overviewer.collections.markers[label].push(marker);
                             if (item.type == 'sign') {
@@ -339,6 +360,7 @@ var overviewer = {
                             'icon':     iconURL,
                             'visible':  false
                         });
+                        item.marker = marker;
                         if (overviewer.collections.markers['__others__']) {
                             overviewer.collections.markers['__others__'].push(marker);
                         } else {
@@ -758,6 +780,61 @@ var overviewer = {
                 itemDiv.appendChild(textNode);
             }
         },
+        /**
+         * Create search box and dropdown in the top right google maps area.
+        */
+        'createSearchBox': function() {
+            var searchControl = document.createElement("div");
+            searchControl.id = "searchControl";
+
+            var searchInput = document.createElement("input");
+            searchInput.type = "text";
+
+            searchControl.appendChild(searchInput);
+
+            var searchDropDown = document.createElement("div");
+            searchDropDown.id = "searchDropDown";
+            searchControl.appendChild(searchDropDown);
+
+            $(searchInput).keyup(function(e) {
+                var newline_stripper = new RegExp("[\\r\\n]", "g")
+                if(searchInput.value.length !== 0) {
+                    $(searchDropDown).fadeIn();
+                        
+                    $(searchDropDown).empty();
+
+                    overviewer.collections.markerDatas.forEach(function(marker_list) {
+                        marker_list.forEach(function(sign) {
+                            var regex = new RegExp(overviewer.util.pregQuote(searchInput.value), "mi");
+                            if(sign.msg.match(regex)) {
+                                if(sign.marker !== undefined && sign.marker.getVisible()) {
+                                    var t = document.createElement("div");
+                                    t.className = "searchResultItem";
+                                    var i = document.createElement("img");
+                                    i.src = sign.marker.getIcon();
+                                    t.appendChild(i);
+                                    var s = document.createElement("span");
+                                    
+                                    $(s).text(sign.msg.replace(newline_stripper, ""));
+                                    t.appendChild(s);
+                                    searchDropDown.appendChild(t);
+                                    $(t).click(function(e) {
+                                        $(searchDropDown).fadeOut();
+                                        overviewer.map.setZoom(7);
+                                        overviewer.map.setCenter(sign.marker.getPosition());
+                                    });
+
+                                }
+                            }
+                        });
+                    });
+                } else {
+                    $(searchDropDown).fadeOut();
+                }
+            });
+
+            overviewer.map.controls[google.maps.ControlPosition.TOP_RIGHT].push(searchControl);
+        },
         /**
          * Create the pop-up infobox for when you click on a region, this can't
          * be done in-line because of stupid Javascript scoping problems with