Changeset 26429


Ignore:
Timestamp:
2012-10-31T13:53:44+13:00 (11 years ago)
Author:
sjm84
Message:

Rewriting the map-scripts in jQuery

File:
1 edited

Legend:

Unmodified
Added
Removed

  • main/trunk/greenstone3/web/interfaces/default/js/map-scripts.js

    r26161 r26429  
    1919    setUpMap();
    2020   
    21     var jsonNodeDiv = document.getElementById("jsonNodes");
    22     if(jsonNodeDiv)
    23     {
    24         var jsonNodes = eval(jsonNodeDiv.innerHTML);
     21    var jsonNodeDiv = $("#jsonNodes");
     22    if(jsonNodeDiv.length)
     23    {
     24        var jsonNodes = eval(jsonNodeDiv.html());
    2525        if(jsonNodes && jsonNodes.length > 0)
    2626        {
    … …  
    3535        else
    3636        {
    37             document.getElementById("map_canvas").style.visibility = "hidden";
    38             document.getElementById("map_canvas").style.height = "0px";
     37            $("#map_canvas").css({visibility:"hidden", height:"0px"});
    3938        }
    4039    }
    … …  
    4443    if(_docList.ids.length > 1)
    4544    {
    46         var startStopCheckbox = document.createElement("input");
    47         startStopCheckbox.setAttribute("type", "checkbox");
    48         startStopCheckbox.setAttribute("checked", "true");
    49         startStopCheckbox.setAttribute("id", "scrollCheckbox");
    50         startStopCheckbox.onclick = function()
    51         {
    52             if(startStopCheckbox.checked)
     45        var startStopCheckbox = $("<input>", {"type": "checkbox", "checked": "true", "id": "scrollCheckbox"});
     46        startStopCheckbox.click(function()
     47        {
     48            if(startStopCheckbox.attr("checked"))
    5349            {
    5450                if(_intervalHandle == null)
    … …  
    6258                _intervalHandle = null;
    6359            }
    64         };
    65        
    66         var label = document.createElement("span");
    67         label.innerHTML = "Scroll through places";
    68        
    69         var container = document.createElement("DIV");
    70         container.appendChild(startStopCheckbox);
    71         container.appendChild(label);
    72         container.setAttribute("class", "ui-widget-header ui-corner-all");
    73         container.setAttribute("style", "clear:right; float:right; padding:0px 5px 3px 0px;");
     60        });
     61       
     62        var label = $("<span>Scroll through places</span>");
     63        var container = $("<div>", {"class": "ui-widget-header ui-corner-all", "style": "clear:right; float:right; padding:0px 5px 3px 0px;"});
     64        container.append(startStopCheckbox);
     65        container.append(label);
    7466
    7567        $(container).insertAfter("#map_canvas");
    … …  
    8779        mapTypeId: google.maps.MapTypeId.HYBRID
    8880    };
    89     _map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
     81    _map = new google.maps.Map($("#map_canvas")[0], myOptions);
    9082    google.maps.event.addListener(_map, 'bounds_changed', performSearchForMarkers);
    9183}
    … …  
    179171    }
    180172   
    181     var ajax = new gs.functions.ajaxRequest();
    182     ajax.open("GET", gs.xsltParams.library_name + "?a=q&s=RawQuery&rt=rd&c=" + gs.cgiParams.c + "&s1.rawquery=" + query + "&excerptid=jsonNodes", true);
    183     ajax.onreadystatechange = function()
    184     {
    185         if(ajax.readyState == 4 && ajax.status == 200)
    186         {
    187             if(ajax.responseText.search("id=\"jsonNodes") != -1)
    188             {
    189                 var startIndex = ajax.responseText.indexOf(">");
    190                 var endIndex = ajax.responseText.indexOf("</");
    191 
    192                 var jsonNodes = eval(ajax.responseText.substring(startIndex+1, endIndex));
    193                 if(jsonNodes && jsonNodes.length > 0)
     173    var url = gs.xsltParams.library_name + "?a=q&s=RawQuery&rt=rd&c=" + gs.cgiParams.c + "&s1.rawquery=" + query + "&excerptid=jsonNodes";
     174   
     175    $.ajax(url)
     176    .success(function(responseText)
     177    {
     178        if(responseText.search("id=\"jsonNodes") != -1)
     179        {
     180            var startIndex = responseText.indexOf(">");
     181            var endIndex = responseText.indexOf("</");
     182
     183            var jsonNodes = eval(responseText.substring(startIndex+1, endIndex));
     184            if(jsonNodes && jsonNodes.length > 0)
     185            {
     186                for(var i = 0; i < jsonNodes.length; i++)
    194187                {
    195                     for(var i = 0; i < jsonNodes.length; i++)
     188                    var doc = jsonNodes[i];
     189                   
     190                    var found = false;
     191                    for(var j = 0; j < _docList.ids.length; j++){if(doc.nodeID == _docList.ids[j]){found = true; break;}}
     192                   
     193                    if(!found)
    196194                    {
    197                         var doc = jsonNodes[i];
    198                        
    199                         var found = false;
    200                         for(var j = 0; j < _docList.ids.length; j++){if(doc.nodeID == _docList.ids[j]){found = true; break;}}
    201                        
    202                         if(!found)
    203                         {
    204                             _docList[doc.nodeID] = doc;
    205                             _docList.ids.push(doc.nodeID);
    206 
    207                             createMarker(doc, false);
    208                         }
     195                        _docList[doc.nodeID] = doc;
     196                        _docList.ids.push(doc.nodeID);
     197
     198                        createMarker(doc, false);
    209199                    }
    210200                }
    211201            }
    212             else
    213             {
    214                 console.log("No JSON information received");
    215             }
    216            
    217             _searchRunning = false;
    218         }
    219     }
    220     ajax.send();
     202        }
     203        else
     204        {
     205            console.log("No JSON information received");
     206        }
     207       
     208        _searchRunning = false;
     209    });
    221210}
    222211
    … …  
    342331
    343332        var doc = visibleMarkers[_docList.loopIndex];
    344         var elem = document.getElementById("div" + doc.nodeID);
    345         if(elem)
    346         {
    347             elem.style.background = "#BBFFBB";
    348             setTimeout(function(){elem.style.background = "";}, 2000);
     333        var elem = gs.jqGet("div" + doc.nodeID);
     334        if(elem.length)
     335        {
     336            elem.css("background", "#BBFFBB");
     337            setTimeout(function(){elem.css("background", "");}, 2000);
    349338        }
    350339        _docList.loopIndex++;
    … …  
    371360        clearAllInfoBoxes();
    372361        doc.marker.markerInfo.open(_map, doc.marker);
    373         var scrollCheckbox = document.getElementById("scrollCheckbox");
     362        var scrollCheckbox = $("#scrollCheckbox");
    374363        if(scrollCheckbox.checked)
    375364        {
    … …  
    412401    }
    413402
    414     var docElement = document.getElementById("div" + doc.nodeID);
     403    var docElement = gs.jqGet("div" + doc.nodeID);
    415404    var parent;
    416405    if(docElement)
    … …  
    421410    while(parent && parent.nodeName != "BODY")
    422411    {
    423         if(parent.getAttribute("id") && parent.getAttribute("id").search("divCL") != -1)
     412        if($(parent).attr("id") && $(parent).attr("id").search("divCL") != -1)
    424413        {
    425414            doc.parentCL = parent;
    … …  
    439428function getSubClassifier(sectionID)
    440429{
    441     var ajax = new gs.functions.ajaxRequest();
    442     ajax.open("GET", gs.xsltParams.library_name + "?a=b&rt=s&s=ClassifierBrowse&c=" + gs.cgiParams.c + "&cl=" + sectionID + "&excerptid=jsonNodes", true);     
    443     ajax.onreadystatechange = function()
    444     {
    445         if(ajax.readyState == 4 && ajax.status == 200)
    446         {
    447             var startIndex = ajax.responseText.indexOf(">");
    448             var endIndex = ajax.responseText.indexOf("</");
    449            
    450             var jsonNodes = eval(ajax.responseText.substring(startIndex+1, endIndex));
    451             if(jsonNodes && jsonNodes.length > 0)
    452             {
    453                 for(var i = 0; i < jsonNodes.length; i++)
    454                 {
    455                     var doc = jsonNodes[i];
    456                     _docList[doc.nodeID] = doc;
    457                     _docList.ids.push(doc.nodeID);
    458 
    459                     createMarker(doc, false);
    460                 }
    461                
    462                 document.getElementById("map_canvas").style.visibility = "visible";
    463                 document.getElementById("map_canvas").style.height = undefined;
    464             }
    465            
    466             updateMap();
    467         }
    468         else if(ajax.readyState == 4)
    469         {
    470             console.log("Error getting subclassifiers");
    471             return;
    472         }
    473     }
    474     ajax.send();
     430    var url = gs.xsltParams.library_name + "?a=b&rt=s&s=ClassifierBrowse&c=" + gs.cgiParams.c + "&cl=" + sectionID + "&excerptid=jsonNodes";
     431    $.ajax(url)
     432    .success(function(responseText)
     433    {
     434        var startIndex = responseText.indexOf(">");
     435        var endIndex = responseText.indexOf("</");
     436       
     437        var jsonNodes = eval(responseText.substring(startIndex+1, endIndex));
     438        if(jsonNodes && jsonNodes.length > 0)
     439        {
     440            for(var i = 0; i < jsonNodes.length; i++)
     441            {
     442                var doc = jsonNodes[i];
     443                _docList[doc.nodeID] = doc;
     444                _docList.ids.push(doc.nodeID);
     445
     446                createMarker(doc, false);
     447            }
     448           
     449            $("#map_canvas").css({"visibility": "visible", "height": ""});
     450        }
     451       
     452        updateMap();
     453    })
     454    .error(function()
     455    {
     456        console.log("Error getting subclassifiers");
     457        return;
     458    });
    475459}
    476460
    … …  
    522506    </xsl:template>';
    523507   
    524     var ajax = new gs.functions.ajaxRequest();
    525     ajax.open("GET", gs.xsltParams.library_name + "?a=q&s=RawQuery&rt=rd&c=" + gs.cgiParams.c + "&s1.rawquery=" + query + "&excerptid=nearbyDocs&ilt=" + inlineTemplate.replace(/ /, "%20"), true);     
    526     ajax.onreadystatechange = function()
    527     {
    528         if(ajax.readyState == 4 && ajax.status == 200)
    529         {
    530             var response = ajax.responseText;
    531             response = response.replace(/<img src="[^"]*map_marker.png"[^>]*>/g, "");
    532 
    533             console.log(ajax.responseText);
    534 
    535             var nearbyDocsArray = new Array();
    536 
    537             var lats = new Array();
    538             var lngs = new Array();
    539 
    540             var matches = response.match(/___(-?[0-9\.]*)___/g);
    541             for(var i = 0; i < matches.length; i += 2)
    542             {
    543                 var matchLatFloat = parseFloat(matches[i].replace("___", ""));
    544                 var matchLngFloat = parseFloat(matches[i+1].replace("___", ""));
    545 
    546                 lats.push(matchLatFloat);
    547                 lngs.push(matchLngFloat);
    548                
    549                 var distance = Math.sqrt(Math.pow(matchLatFloat - parseFloat(lat), 2) + Math.pow(matchLngFloat - parseFloat(lng), 2)) * (40000.0/360.0);
    550                 var distanceString = "" + distance;
    551                 distanceString = distanceString.substring(0, 6);
    552 
    553                 response = response.replace(matches[i] + matches[i+1], distanceString);
    554             }
    555            
    556             var index = 0;
    557             var i = 0;
    558             while(true)
    559             {
    560                 var distanceStart = response.indexOf("<td>", index);
    561                 if(distanceStart == -1)
    562                 {
    563                     break;
    564                 }
    565                 var distanceEnd = response.indexOf("</td>", distanceStart);
    566                
    567                 var docLinkStart = response.indexOf("<td>", distanceEnd);
    568                 var docLinkEnd = response.indexOf("</td>", docLinkStart);
    569                
    570                 var dist = response.substring(distanceStart + 4, distanceEnd);
    571                 var docLink = response.substring(docLinkStart + 4, docLinkEnd);
    572 
    573                 _nearbyDocs.push({title:docLink, distance:dist, lat:lats[i], lng:lngs[i++]});
    574                
    575                 index = docLinkEnd;
    576             }
    577            
    578             sortByDistance();
    579            
    580             var toggle = document.getElementById("nearbyDocumentsToggle");
    581             toggle.setAttribute("src", gs.imageURLs.collapse);
    582             gs.functions.makeToggle(toggle, document.getElementById("nearbyDocuments"));
    583         }
    584     }
    585     ajax.send();
     508    var url = gs.xsltParams.library_name + "?a=q&s=RawQuery&rt=rd&c=" + gs.cgiParams.c + "&s1.rawquery=" + query + "&excerptid=nearbyDocs&ilt=" + inlineTemplate.replace(/ /, "%20");
     509    $.ajax(url)
     510    .success(function(response)
     511    {
     512        response = response.replace(/<img src="[^"]*map_marker.png"[^>]*>/g, "");
     513
     514        var nearbyDocsArray = new Array();
     515
     516        var lats = new Array();
     517        var lngs = new Array();
     518
     519        var matches = response.match(/___(-?[0-9\.]*)___/g);
     520        for(var i = 0; i < matches.length; i += 2)
     521        {
     522            var matchLatFloat = parseFloat(matches[i].replace("___", ""));
     523            var matchLngFloat = parseFloat(matches[i+1].replace("___", ""));
     524
     525            lats.push(matchLatFloat);
     526            lngs.push(matchLngFloat);
     527           
     528            var distance = Math.sqrt(Math.pow(matchLatFloat - parseFloat(lat), 2) + Math.pow(matchLngFloat - parseFloat(lng), 2)) * (40000.0/360.0);
     529            var distanceString = "" + distance;
     530            distanceString = distanceString.substring(0, 6);
     531
     532            response = response.replace(matches[i] + matches[i+1], distanceString);
     533        }
     534       
     535        var index = 0;
     536        var i = 0;
     537        while(true)
     538        {
     539            var distanceStart = response.indexOf("<td>", index);
     540            if(distanceStart == -1)
     541            {
     542                break;
     543            }
     544            var distanceEnd = response.indexOf("</td>", distanceStart);
     545           
     546            var docLinkStart = response.indexOf("<td>", distanceEnd);
     547            var docLinkEnd = response.indexOf("</td>", docLinkStart);
     548           
     549            var dist = response.substring(distanceStart + 4, distanceEnd);
     550            var docLink = response.substring(docLinkStart + 4, docLinkEnd);
     551
     552            _nearbyDocs.push({title:docLink, distance:dist, lat:lats[i], lng:lngs[i++]});
     553           
     554            index = docLinkEnd;
     555        }
     556       
     557        sortByDistance();
     558       
     559        var toggle = $("#nearbyDocumentsToggle");
     560        toggle.attr("src", gs.imageURLs.collapse);
     561        gs.functions.makeToggle(toggle, $("#nearbyDocuments"));
     562    });
    586563}
    587564
    … …  
    596573    sortedTable += "</table>";
    597574   
    598     document.getElementById("nearbyDocuments").innerHTML = sortedTable;
     575    $("#nearbyDocuments").html(sortedTable);
    599576}
    600577
    … …  
    618595    sortedTable += "</table>";
    619596   
    620     document.getElementById("nearbyDocuments").innerHTML = sortedTable;
     597    $("#nearbyDocuments").html(sortedTable);
    621598}
    622599
    … …  
    646623    toggleSection = function(sectionID)
    647624    {
    648         var section = document.getElementById("div" + sectionID);
    649         var sectionToggle = document.getElementById("toggle" + sectionID);
     625        var section = gs.jqGet("div" + sectionID);
     626        var sectionToggle = gs.jqGet("toggle" + sectionID);
    650627       
    651628        if(sectionToggle == undefined)
    … …  
    658635            if(isExpanded(sectionID))
    659636            {
    660                 section.style.display = "none";
    661                 sectionToggle.setAttribute("src", gs.imageURLs.expand);
     637                section.css("display", "none");
     638                sectionToggle.attr("src", gs.imageURLs.expand);
    662639               
    663640                if(openClassifiers[sectionID] != undefined)
    … …  
    668645            else
    669646            {
    670                 section.style.display = "block";
    671                 sectionToggle.setAttribute("src", gs.imageURLs.collapse);
     647                section.css("display", "block");
     648                sectionToggle.attr("src", gs.imageURLs.collapse);
    672649                openClassifiers[sectionID] = true; 
    673650            }
    … …  
    686663        {
    687664            inProgress[sectionID] = true;
    688             var httpRequest = new gs.functions.ajaxRequest();
    689            
    690             var sectionToggle = document.getElementById("toggle" + sectionID);
    691             sectionToggle.setAttribute("src", gs.imageURLs.loading);
     665           
     666            var sectionToggle = gs.jqGet("toggle" + sectionID);
     667            sectionToggle.attr("src", gs.imageURLs.loading);
    692668
    693669            var url = gs.xsltParams.library_name + "/collection/" + gs.cgiParams.c + "/browse/" + sectionID.replace(/\./g, "/") + "?excerptid=div" + sectionID;
    … …  
    702678                url = url.substring(0, url.indexOf("#"));
    703679            }
    704             httpRequest.open('GET', url, true);
    705             httpRequest.onreadystatechange = function()
    706             {
    707                 if (httpRequest.readyState == 4)
     680           
     681            $.ajax(url)
     682            .success(function(responseText)
     683            {
     684                var newDiv = $("<div>");                                       
     685                var sibling = gs.jqGet("title" + sectionID);
     686                sibling.before(newDiv);
     687               
     688                newDiv.html(responseText);
     689                sectionToggle.attr("src", gs.imageURLs.collapse);
     690                openClassifiers[sectionID] = true; 
     691               
     692                if(gs.cgiParams.berryBasket == "on")
    708693                {
    709                     if (httpRequest.status == 200)
    710                     {
    711                         var newDiv = document.createElement("div");                                     
    712                         var sibling = document.getElementById("title" + sectionID);
    713                         var parent = sibling.parentNode;
    714                         if(sibling.nextSibling)
    715                         {
    716                             parent.insertBefore(newDiv, sibling.nextSibling);
    717                         }
    718                         else
    719                         {
    720                             parent.appendChild(newDiv);
    721                         }
    722                        
    723                         newDiv.innerHTML = httpRequest.responseText;
    724                         sectionToggle.setAttribute("src", gs.imageURLs.collapse);
    725                         openClassifiers[sectionID] = true; 
    726                        
    727                         if(gs.cgiParams.berryBasket == "on")
    728                         {
    729                             checkout();
    730                         }
    731                         updateOpenClassifiers();
    732                         getSubClassifier(sectionID);
    733                     }
    734                     else
    735                     {
    736                         sectionToggle.setAttribute("src", gs.imageURLs.expand);
    737                     }
    738                     inProgress[sectionID] = false;
    739                     busy = false;
     694                    checkout();
    740695                }
    741             }
    742             httpRequest.send();
    743         }
    744     }
    745 }
     696                updateOpenClassifiers();
     697                getSubClassifier(sectionID);
     698            })
     699            .error(function()
     700            {
     701                sectionToggle.attr("src", gs.imageURLs.expand);
     702            })
     703            .complete(function()
     704            {
     705                inProgress[sectionID] = false;
     706                busy = false;
     707            });
     708        }
     709    }
     710}
Note: See TracChangeset for help on using the changeset viewer.