Changeset 25009


Ignore:
Timestamp:
01/26/12 14:26:20 (9 years ago)
Author:
sjm84
Message:

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

File:
1 edited

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
Note: See TracChangeset for help on using the changeset viewer.