Changeset 25009

Show
Ignore:
Timestamp:
26.01.2012 14:26:20 (8 years ago)
Author:
sjm84
Message:

Added in a lot of code for the new paged-image navigation

Files:
1 modified

Legend:

Unmodified
Added
Removed
  • main/trunk/greenstone3/web/interfaces/oran/js/document_scripts.js

    r24655 r25009  
    33********************/ 
    44 
    5 var collapseImageURL = gs.imageURLs.collapse; 
    6 var expandImageURL = gs.imageURLs.expand; 
    7 var chapterImageURL = gs.imageURLs.chapter; 
    8 var pageImageURL = gs.imageURLs.page; 
    9  
    105function toggleSection(sectionID) 
    116{ 
     
    1914    { 
    2015        docElem.style.display = "block"; 
    21         docToggleElem.setAttribute("src", collapseImageURL); 
     16        docToggleElem.setAttribute("src", gs.imageURLs.collapse); 
    2217         
    2318        if(tocToggleElem) 
    2419        { 
    25             tocToggleElem.setAttribute("src", collapseImageURL); 
     20            tocToggleElem.setAttribute("src", gs.imageURLs.collapse); 
    2621        } 
    2722         
     
    3631         
    3732        //Use the page image if this is a leaf node and the chapter image if it not 
    38         docToggleElem.setAttribute("src", expandImageURL); 
     33        docToggleElem.setAttribute("src", gs.imageURLs.expand); 
    3934         
    4035        if(tocToggleElem) 
    4136        { 
    42             tocToggleElem.setAttribute("src", expandImageURL); 
     37            tocToggleElem.setAttribute("src", gs.imageURLs.expand); 
    4338        } 
    4439         
     
    6964} 
    7065 
    71 function focusSection(sectionID) 
    72 { 
    73     var tableOfContentsDiv = document.getElementById("tableOfContents"); 
    74     var images = tableOfContentsDiv.getElementsByTagName("img"); 
    75     var nodeArray = new Array(); 
    76      
    77     for(var i = 0; i < images.length; i++) 
    78     {    
    79         nodeArray[i] = images[i].getAttribute("id").substring(7); 
    80     } 
    81      
    82     for(var j = 0; j < nodeArray.length; j++) 
    83     { 
    84         //If this is the node that was clicked and it is not expanded then expand it 
    85         if(nodeArray[j] == sectionID) 
    86         { 
    87             if(!isExpanded(nodeArray[j])) 
     66function minimizeSidebar() 
     67{ 
     68    var coverImage = document.getElementById("coverImage"); 
     69    var toc = document.getElementById("contentsArea"); 
     70    var maxLink = document.getElementById("sidebarMaximizeButton"); 
     71    var minLink = document.getElementById("sidebarMinimizeButton"); 
     72     
     73    if(coverImage) 
     74    { 
     75        coverImage.style.display = "none"; 
     76    } 
     77     
     78    if(toc) 
     79    { 
     80        toc.style.display = "none"; 
     81    } 
     82     
     83    maxLink.style.display = "block"; 
     84    minLink.style.display = "none"; 
     85} 
     86 
     87function maximizeSidebar() 
     88{ 
     89    var coverImage = document.getElementById("coverImage"); 
     90    var toc = document.getElementById("contentsArea"); 
     91    var maxLink = document.getElementById("sidebarMaximizeButton"); 
     92    var minLink = document.getElementById("sidebarMinimizeButton"); 
     93     
     94    if(coverImage) 
     95    { 
     96        coverImage.style.display = "block"; 
     97    } 
     98     
     99    if(toc) 
     100    { 
     101        toc.style.display = "block"; 
     102    } 
     103     
     104    maxLink.style.display = "none"; 
     105    minLink.style.display = "block"; 
     106} 
     107 
     108/********************** 
     109* PAGED-IMAGE SCRIPTS * 
     110**********************/ 
     111 
     112function changePage(href) 
     113{ 
     114    var ajax = new gs.functions.ajaxRequest(); 
     115    ajax.open("GET", href + "&excerptid=gs-document"); 
     116    ajax.onreadystatechange = function() 
     117    { 
     118        if(ajax.readyState == 4 && ajax.status == 200) 
     119        { 
     120            var contentElem = document.getElementById("gs-document"); 
     121            contentElem.innerHTML = ajax.responseText; 
     122        } 
     123    } 
     124    ajax.send(); 
     125} 
     126 
     127function changeView() 
     128{ 
     129    var viewList = document.getElementById("viewSelection"); 
     130    var currentVal = viewList.value; 
     131     
     132    var view; 
     133    if(currentVal == "Image view") 
     134    { 
     135        setImageVisible(true); 
     136        setTextVisible(false); 
     137        view = "image"; 
     138    } 
     139    else if(currentVal == "Text view") 
     140    { 
     141        setImageVisible(false); 
     142        setTextVisible(true); 
     143        view = "text"; 
     144    } 
     145    else 
     146    { 
     147        setImageVisible(true); 
     148        setTextVisible(true); 
     149        view = ""; 
     150    } 
     151     
     152    var ajax = gs.functions.ajaxRequest(); 
     153    ajax.open("GET", gs.xsltParams.library_name + "?a=d&view=" + view + "&c=" + gs.cgiParams.c); 
     154    ajax.send(); 
     155} 
     156 
     157function setImageVisible(visible) 
     158{ 
     159    var image = document.getElementById("gs-document-image"); 
     160    if(visible) 
     161    { 
     162        image.setAttribute("class", image.getAttribute("class").replace(/\bhidden\b/g, "")); 
     163    } 
     164    else 
     165    { 
     166        if(image.getAttribute("class").search(/\bhidden\b/) == -1) 
     167        { 
     168            image.setAttribute("class", image.getAttribute("class") + " hidden"); 
     169        } 
     170    } 
     171} 
     172 
     173function setTextVisible(visible) 
     174{ 
     175    var text = document.getElementById("gs-document-text"); 
     176    if(visible) 
     177    { 
     178        text.setAttribute("class", text.getAttribute("class").replace(/\bhidden\b/g, "")); 
     179    } 
     180    else 
     181    { 
     182        if(text.getAttribute("class").search(/\bhidden\b/) == -1) 
     183        { 
     184            text.setAttribute("class", text.getAttribute("class") + " hidden"); 
     185        } 
     186    } 
     187} 
     188 
     189function retrieveTableOfContents() 
     190{ 
     191    var ajax = gs.functions.ajaxRequest(); 
     192     
     193    ajax.open("GET", gs.xsltParams.library_name + "?a=d&ed=1&c=" + gs.cgiParams.c + "&d=" + gs.cgiParams.d + "&excerptid=tableOfContents"); 
     194    ajax.onreadystatechange = function() 
     195    { 
     196        if(ajax.readyState == 4 && ajax.status == 200) 
     197        { 
     198            document.getElementById("contentsArea").innerHTML = document.getElementById("contentsArea").innerHTML + ajax.responseText; 
     199            replaceLinksWithSlider(); 
     200        } 
     201    } 
     202    ajax.send(); 
     203} 
     204 
     205function replaceLinksWithSlider() 
     206{ 
     207    var tableOfContents = document.getElementById("tableOfContents"); 
     208    var liElems = tableOfContents.getElementsByTagName("LI"); 
     209     
     210    var leafSections = new Array(); 
     211    for (var i = 0; i < liElems.length; i++) 
     212    { 
     213        var section = liElems[i]; 
     214        var add = true; 
     215        for(var j = 0; j < leafSections.length; j++) 
     216        { 
     217            if(leafSections[j] == undefined){continue;} 
     218             
     219            var leaf = leafSections[j]; 
     220            if(leaf.getAttribute("id").search(section.getAttribute("id")) != -1) 
    88221            { 
    89                 toggleSection(nodeArray[j]); 
     222                add = false; 
    90223            } 
    91224             
    92             continue; 
    93         } 
    94          
    95         //If the node is a parent or child of the node that is clicked and is not expanded then expand it 
    96         if((isParentOf(nodeArray[j], sectionID) || isParentOf(sectionID, nodeArray[j])) && !isExpanded(nodeArray[j])) 
    97         { 
    98             toggleSection(nodeArray[j]); 
    99         } 
    100         //If the node is not a parent or child and is expanded then collapse it 
    101         else if(!(isParentOf(nodeArray[j], sectionID) || isParentOf(sectionID, nodeArray[j])) && isExpanded(nodeArray[j])) 
    102         { 
    103             toggleSection(nodeArray[j]); 
    104         } 
    105     } 
    106 } 
    107  
    108 function minimizeSidebar() 
    109 { 
    110     var coverImage = document.getElementById("coverImage"); 
    111     var toc = document.getElementById("tableOfContents"); 
    112     var maxLink = document.getElementById("sidebarMaximizeButton"); 
    113     var minLink = document.getElementById("sidebarMinimizeButton"); 
    114      
    115     if(coverImage) 
    116     { 
    117         coverImage.style.display = "none"; 
    118     } 
    119      
    120     if(toc) 
    121     { 
    122         toc.style.display = "none"; 
    123     } 
    124      
    125     maxLink.style.display = "block"; 
    126     minLink.style.display = "none"; 
    127 } 
    128  
    129 function maximizeSidebar() 
    130 { 
    131     var coverImage = document.getElementById("coverImage"); 
    132     var toc = document.getElementById("tableOfContents"); 
    133     var maxLink = document.getElementById("sidebarMaximizeButton"); 
    134     var minLink = document.getElementById("sidebarMinimizeButton"); 
    135      
    136     if(coverImage) 
    137     { 
    138         coverImage.style.display = "block"; 
    139     } 
    140      
    141     if(toc) 
    142     { 
    143         toc.style.display = "block"; 
    144     } 
    145      
    146     maxLink.style.display = "none"; 
    147     minLink.style.display = "block"; 
     225            if(section.getAttribute("id").search(leaf.getAttribute("id")) != -1) 
     226            { 
     227                delete leafSections[j]; 
     228            } 
     229        } 
     230         
     231        if(add) 
     232        { 
     233            leafSections.push(section); 
     234        } 
     235    } 
     236     
     237    for(var i = 0 ; i < leafSections.length; i++) 
     238    { 
     239        if(leafSections[i] == undefined){continue;} 
     240        leafSections[i].style.display = "none"; 
     241        var links = leafSections[i].getElementsByTagName("A"); 
     242        var widget = new SliderWidget(links); 
     243        leafSections[i].parentNode.insertBefore(widget.getElem(), leafSections[i]); 
     244    } 
     245} 
     246 
     247function SliderWidget(_links) 
     248{ 
     249    //**************** 
     250    //MEMBER VARIABLES 
     251    //**************** 
     252 
     253    //The container for the widget 
     254    var _mainDiv = document.createElement("DIV"); 
     255    _mainDiv.setAttribute("class", "pageSlider"); 
     256     
     257    //The table of images 
     258    var _linkTable = document.createElement("TABLE"); 
     259    _mainDiv.appendChild(_linkTable); 
     260    _linkTable.style.width = (75 * _links.length) + "px"; 
     261     
     262    //The image row of the table 
     263    var _linkRow = document.createElement("TR"); 
     264    _linkTable.appendChild(_linkRow); 
     265     
     266    //The label row 
     267    var _numberRow = document.createElement("TR"); 
     268    _linkTable.appendChild(_numberRow); 
     269 
     270    //**************** 
     271    //PUBLIC FUNCTIONS 
     272    //**************** 
     273     
     274    //Function that returns the widget element 
     275    this.getElem = function() 
     276    { 
     277        return _mainDiv; 
     278    } 
     279     
     280    //***************** 
     281    //PRIVATE FUNCTIONS 
     282    //***************** 
     283     
     284    var getImage = function(page) 
     285    { 
     286        var ajax = gs.functions.ajaxRequest(); 
     287 
     288        var href = page.getAttribute("href"); 
     289        //ajax.open("GET", href + "&excerptid=meta&dmd=true"); 
     290        var template = '<xsl:template match="/"><html><gsf:metadata name="thumbicon"/></html></xsl:template>'; 
     291        ajax.open("GET", href + "&ilt=" + template.replace(" ", "%20")); 
     292        ajax.onreadystatechange = function() 
     293        { 
     294            if(ajax.readyState == 4 && ajax.status == 200) 
     295            { 
     296                var text = ajax.responseText; 
     297 
     298                var start = text.indexOf("<img", text); 
     299                if(start == -1) 
     300                { 
     301                    page.isLoading = false; 
     302                    page.noImage = true; 
     303                    page.image.setAttribute("src", gs.imageURLs.blank); 
     304                    return; 
     305                } 
     306                var end = text.indexOf(">", start) + 4; 
     307                 
     308                var image = text.substring(start, end); 
     309                image = image.replace("[parent(Top):assocfilepath]", gs.documentMetadata.assocfilepath); 
     310                page.link.innerHTML = image; 
     311                 
     312                page.isLoading = false; 
     313                page.imageLoaded = true; 
     314            } 
     315            else if (ajax.readyState == 4 && !page.failed) 
     316            { 
     317                page.failed = true; 
     318                getImage(page); 
     319            } 
     320        } 
     321        ajax.send(); 
     322    } 
     323     
     324    var startCheckFunction = function() 
     325    { 
     326        var checkFunction = function() 
     327        { 
     328            var widgetLeft = _mainDiv.scrollLeft; 
     329            var widgetRight = _mainDiv.clientWidth + _mainDiv.scrollLeft; 
     330 
     331            var visiblePages = new Array(); 
     332            for(var i = 0; i < _links.length; i++) 
     333            { 
     334                var current = _links[i].cell; 
     335                var currentLeft = current.offsetLeft; 
     336                var currentRight = currentLeft + current.clientWidth; 
     337                if(currentRight > widgetLeft && currentLeft < widgetRight) 
     338                { 
     339                    visiblePages.push(_links[i]); 
     340                } 
     341            } 
     342 
     343            for(var i = 0; i < visiblePages.length; i++) 
     344            { 
     345                var page = visiblePages[i]; 
     346                if(!page || page.imageLoaded || page.noImage || page.isLoading) 
     347                { 
     348                    continue; 
     349                } 
     350                 
     351                page.isLoading = true; 
     352                getImage(page); 
     353            } 
     354        } 
     355        setInterval(checkFunction, 1000); 
     356    } 
     357     
     358    //*********** 
     359    //CONSTRUCTOR 
     360    //*********** 
     361     
     362    for(var i = 0; i < _links.length; i++) 
     363    { 
     364        var col = document.createElement("TD"); 
     365        _linkRow.appendChild(col); 
     366        col.setAttribute("class", "pageSliderCol"); 
     367        _links[i].cell = col; 
     368         
     369        var link = document.createElement("A"); 
     370        col.appendChild(link); 
     371        _links[i].link = link; 
     372        var href = _links[i].getAttribute("href"); 
     373        link.setAttribute("href", "javascript:changePage(\"" + href + "\");"); 
     374         
     375        var image = document.createElement("IMG"); 
     376        link.appendChild(image); 
     377        image.setAttribute("src", gs.imageURLs.loading); 
     378        _links[i].image = image; 
     379         
     380        var spacer = document.createElement("TD"); 
     381        _linkRow.appendChild(spacer); 
     382        spacer.setAttribute("class", "pageSliderSpacer"); 
     383         
     384        var num = document.createElement("TD"); 
     385        _numberRow.appendChild(num); 
     386        num.innerHTML = "Page " + (i + 1); 
     387        num.style.textAlign = "center"; 
     388         
     389        var spacer = document.createElement("TD"); 
     390        _numberRow.appendChild(spacer); 
     391        spacer.setAttribute("class", "pageSliderSpacer"); 
     392    } 
     393     
     394    startCheckFunction(); 
    148395} 
    149396