Changeset 34721


Ignore:
Timestamp:
2021-01-25T16:08:18+13:00 (3 years ago)
Author:
davidb
Message:

Next stage in developing collaging, to be activated in next release of GS3

File:
1 edited

Legend:

Unmodified
Added
Removed

  • main/trunk/greenstone3/web/interfaces/default/transform/pages/classifier.xsl-for-gs311

    r34646 r34721  
    126126
    127127  <xsl:template name="Collage">
    128 
    129         <script language="javascript" type="text/javascript">
    130             <xsl:text disable-output-escaping="yes">
    131                 window.onload=function(){getImages()};
    132 
    133                 var _allImagesURLS = new Array();
    134                 var _allDocids = new Array();
    135 
    136                 var _allImages = new Array();
    137                
    138                 var _collageDelayMsec = 5000; // used to be 10000
    139                 var currentImage;
    140                 var cFrameNum;
    141                 var timer;
    142                 //var Caption = "More Pre-history";
    143        
    144                 function collageNextImage(collageFrameNum)
    145                 {
    146                     cFrameNum = collageFrameNum;
    147                     var wrapper = $("#collagewrapper");
    148 
    149                     var wrapperWidth = wrapper.width();
    150                     var wrapperHeight = wrapper.height();
    151                    
    152                     var image_i_pos = collageFrameNum % _allImages.length;
    153                     currentImage = _allImages[image_i_pos].clone();
    154 
    155                     var imageHeight = currentImage[0].naturalHeight;
    156                     var imageWidth = currentImage[0].naturalWidth;
    157 
    158                     if ((imageHeight == 0) || (imageWidth == 0)) {
    159                         // looks like the image hasn't had time to load in yet
    160                         console.log("For image-frame-number=" + image_i_pos + ", zero dimension encountered => skipping" );
    161                     }
    162                     else {
    163                         var x = Math.random() * (wrapperWidth - imageWidth);
    164                         var y = Math.random() * (wrapperHeight - imageHeight);
    165 
    166                         currentImage.css({position:"absolute", visibility:"visible", opacity:"1"});
    167                         currentImage.offset({top:y, left:x});
    168 
    169                         var doc_href = gs.xsltParams.library_name + "/collection/" + gs.cgiParams.c + "/document/" + _allDocids[image_i_pos];
    170                         var anchoredCurrentImage = $('&lt;a&gt;', {'href': doc_href, 'target': '_blank'} );
    171                         anchoredCurrentImage.append(currentImage);
    172                    
    173                         wrapper.append(anchoredCurrentImage);
    174                    
    175                         currentImage.fadeTo(25000, 0, function()
    176                         {
    177                             $(this).css({position:"absolute", top:"0px", left:"0px", visibility:"hidden"});
    178                         });
    179                     }
    180                        
    181                     timer = setTimeout(function()
    182                     {
    183                        
    184                         collageNextImage(collageFrameNum + 1);
    185                     }, _collageDelayMsec);
    186                 }
    187 
    188                 function initCollage()
    189                 {
    190                     for(var i = 0; i &lt; _allImagesURLS.length; i++)
    191                     {
    192                             var wrapper = $("#collagewrapper");
    193                            
    194                         var newImage = $("&lt;img&gt;", {src:_allImagesURLS[i]});
    195                         newImage.css({position:"absolute", top:"0px", left:"0px", visibility:"hidden"});
    196 
    197                         wrapper.append(newImage);
    198                        
    199                         var wrapperHeight = 586;
    200                         if(window != window.top){wrapperHeight=400;}
    201                         var wrapperWidth = wrapper.width();
    202                    
    203                         var imageHeight = newImage.height();
    204                         var imageWidth = newImage.width();
    205                        
    206                         if(imageWidth &gt; wrapperWidth || imageHeight &gt; wrapperHeight)
    207                         {
    208                             var xDifference = imageWidth - wrapperWidth;
    209                             var yDifference = imageHeight - wrapperHeight;
    210                             if(xDifference > yDifference)
    211                             {
    212                                 newImage.width(wrapperWidth);
    213                             }
    214                             else
    215                             {
    216                                 newImage.height(wrapperHeight);
    217                             }
    218                         }
    219                         _allImages.push(newImage);
    220                     }
    221 
    222                    
    223                 }
    224 
    225                 function changeClick(){
    226 
    227                     var div = document.getElementById("collagewrapper");
    228                     div.onclick = function(){pause()};
    229                    
    230                 }
    231 
    232                 function pause(){
    233        
    234                     currentImage.stop();
    235                     clearTimeout(timer);
    236                     var div = document.getElementById("collagewrapper");
    237                     div.onclick = function(){stopPause()};
    238                
    239                    
    240                    
    241                 }
    242 
    243                 function stopPause(){
    244                    
    245                     currentImage.fadeTo(25000, 0, function()
    246                     {
    247                         $(this).css({position:"absolute", top:"0px", left:"0px", visibility:"hidden"});
    248                     });
    249 
    250                     timer = setTimeout(function()
    251                     {
    252                         collageNextImage(cFrameNum + 1);
    253                     }, _collageDelayMsec);
    254 
    255                    
    256                     changeClick()
    257                 }
    258 
    259                 function caption(event){
    260                    
    261                     var div = document.getElementById('collagewrapper');
    262                     var node = document.createElement('div');
    263                     node.style.top = event.layerY + 'px';   
    264                     node.style.left = event.layerX + 'px';
    265                     node.style.textAlign = "center";
    266                     node.style.background = "#FEFDE1";
    267                     node.style.border = "1px solid black";
    268                     node.style.position = "absolute";
    269                     node.id = 'popBox';
    270                     node.innerHTML = Caption;
    271                     div.appendChild(node);
    272                    
    273                 }
    274 
    275                 function hideCaption(){
    276                     node = document.getElementById('popBox');
    277                     node.parentNode.removeChild(node);
    278                 }
    279 
    280                
    281             </xsl:text>
    282         </script>
    283         <div id="collagewrapper" style="width: 800px; height: 643px; position: relative; background-image:url('sites/{$site_name}/collect/twso/images/oldimagebackground1.png'); text-align: center;" alt="Click to start/stop a collage of newspaper clippings" title="Click to start/stop a collage of newspaper clippings" onmouseover="" onmouseout=""><xsl:text> </xsl:text></div>
    284         <!--<div id="text" style="text-align: center; background-color:#ffffff; background-color:rgba(255, 255, 255, 0.3)">
    285             <div id="textcontent">
    286                 <h3>Hamilton Orchestral Society, 1903</h3>(precursor to the Trust Waikato Symphony Orchestra)
    287             </div>
    288         </div>-->
    289         <script type="text/javascript">
    290             <xsl:text disable-output-escaping="yes">
    291               function getImages()
    292              
    293                 {
    294                 var extregex = ".*(jpg$|png$)";
    295                 extregex = extregex.replace(/\|/g, "%7C");
    296                
    297                 var url = gs.xsltParams.library_name + "?a=g&amp;s=GetAllImagesInCollection&amp;rt=r&amp;s1.extregex="+extregex+"&amp;s1.c=" + gs.cgiParams.c + "&amp;o=xml"; 
    298                    
    299                     var callback = {
    300                         success: function(data)
    301                         {
    302                             var xml = data.responseXML;
    303 
    304                             var imageList = xml.getElementsByTagName("image");
    305                            
    306                    
    307                             for(var i = 0; i &lt; imageList.length; i++)
    308                             {
    309 
    310                                     var imageElem = imageList[i];
    311                                     var docid = imageElem.getAttribute("docid");
    312                                 //console.log("****docid = " + docid);
    313                                     var imageURL = imageElem.firstChild.nodeValue;
    314                                
    315                                 imageURL = imageURL.replace(/\\/gi, "/");
    316                                 imageURL = imageURL.replace(/%5C/gi, "/");
    317                                
    318                                 imageURL = imageURL.substring(imageURL.indexOf("sites"));
    319                                 // assoc file paths now need to start with the library name
    320                                 _allImagesURLS.push("library/"+imageURL);
    321                                 _allDocids.push(docid);
    322                             }
    323                            
    324                             if(_allImagesURLS.length &gt; 0)
    325                             {
    326                                     initCollage();
    327                            
    328                                 // start the collaging of the img tags
    329                                     collageNextImage(0);
    330 
    331                                 // Set a click handler on the collage-div to pause if clicked
    332                                 console.log("*** currently supressing div click handler");
    333                                 //changeClick();
    334 
    335                             }
    336                         },
    337                         failed: function(data){alert("FAILED");}
    338                     };
    339                    
    340                     YAHOO.util.Connect.asyncRequest("GET", url , callback);
    341                 }
    342             </xsl:text>
    343         </script>
    344 
     128    <script type="text/javascript" src="interfaces/{$interface_name}/js/collage_scripts.js"><xsl:text> </xsl:text></script>
     129        <div id="collagewrapper" style="width: 800px; height: 643px; position: relative; background-image:url('sites/{$site_name}/collect/twso/images/oldimagebackground1.png'); text-align: center;" alt="Click to start/stop a collage of images" title="Click to start/stop a collage of images" onmouseover="" onmouseout=""><xsl:text> </xsl:text></div>
    345130   
    346131  </xsl:template>
Note: See TracChangeset for help on using the changeset viewer.