Changeset 26429 for main

Show
Ignore:
Timestamp:
31.10.2012 13:53:44 (7 years ago)
Author:
sjm84
Message:

Rewriting the map-scripts in jQuery

Files:
1 modified

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}