Changeset 38931


Ignore:
Timestamp:
2024-04-17T12:06:50+12:00 (2 months ago)
Author:
anupama
Message:

Copied the webswing collage JavaScript and XSL code into classifier.xsl. It works in one go. But maybe it would be tidier in its own file, in case there's the possibility to import a file whose template I call.

Location:
main/trunk/greenstone3/web/interfaces/default/transform/pages
Files:
2 edited

Legend:

Unmodified
Added
Removed
  • main/trunk/greenstone3/web/interfaces/default/transform/pages/classifier.xsl

    r38929 r38931  
    147147  </xsl:template>
    148148
     149
     150    <xsl:template name="webswing-embed-collage">
     151      <link rel="stylesheet" href="/webswing-server/css/style.css" />
     152      <div id="webswing-collage" class="webswing-element" data-webswing-instance="webswingInstance0" style="width: 800px; height: 400px;">
     153        <div id="loading" class="ws-modal-container">
     154              <div class="ws-login">
     155        <div  class="ws-login-content">
     156                  <div class="ws-spinner">
     157            <div class="ws-spinner-dot-1"><xsl:comment>filler</xsl:comment></div>
     158            <div class="ws-spinner-dot-2"><xsl:comment>filler</xsl:comment></div>
     159          </div>
     160        </div>
     161              </div>
     162        </div>
     163      </div>
     164
     165      <gsf:script>
     166        // https://www.webswing.org/docs/23.2/configure/applet.html
     167        // https://www.webswing.org/docs/23.2/configure/swing.html
     168        // https://www.webswing.org/docs/23.2/integrate/javascript-api?_h=customArgs%2Cargs#usage-with-customization-and-options       
     169        // https://www.webswing.org/docs/23.2/integrate/embed.html
     170        // https://www.webswing.org/docs/20.1/integrate/urlparams.html
     171        // https://www.webswing.org/docs/23.2/integrate/urlparams.html
     172        // https://www.webswing.org/docs/20.1/integrate/customize.html
     173        // https://www.webswing.org/docs/2.7/integrate/embed.html
     174       
     175    var webswingInstance0 = {
     176        options: {
     177        autoStart: true,
     178    //appletParams: getParam('appletParams'),
     179    //appletParams: {"collection":"smallbea", "library":"library"},
     180            connectionUrl:'/webswing-server/collage',
     181
     182        customization: function(injector) {
     183        injector.services.base.handleActionEvent = function(actionName, data, binaryData) {
     184                //console.log("WebSwing actionEvent callback handler: called with actionName = " + actionName);
     185
     186            if (actionName === "openURL") {
     187              var url = data;
     188          // check if a target tab/window name has been specified
     189          // TODO: Any better way of passing > 1 string between Java and JavaScript?
     190          var index = url.indexOf(" - ");
     191          if (index !== -1) {
     192             var target = url.substring(index+3); // skip past " - " to get target name
     193             url = url.substring(0, index);
     194             // Note that target window name is not the same as target window title
     195             // https://stackoverflow.com/questions/8051811/how-to-show-window-title-using-window-open
     196             window.open(url, target);               
     197          } else {
     198             window.open(url, '_blank');
     199          }
     200        } else if (actionName == "javaToWebswingJSConsoleLog") {
     201            console.log("Got message from java:\n" + data);
     202        }
     203       
     204          }
     205            }
     206
     207       
     208       }
     209       };
     210
     211       
     212       // The applet jar files can just remain in web/applet where they are compiled up
     213       
     214       if(!webswingInstance0.options.args) {
     215       webswingInstance0.options.args="";       
     216       }
     217       
     218       //https://stackoverflow.com/questions/25203124/how-to-get-base-url-with-jquery-or-javascript
     219       var baseURL = window.location.origin+window.location.pathname;       
     220       // webswingInstance0.options.args += "\"" + baseURL+ "?a=a&amp;rt=d&amp;s=GsdlCollageApplet&amp;c=smallbea\"";
     221       var servlet_index = baseURL.indexOf("/"+gs.xsltParams.library_name);
     222       if(servlet_index > 0) {
     223       baseURL = baseURL.substring(0, servlet_index+1);
     224       }
     225       var baseClassifier = "CL3";
     226       //var gs3CollImgPath = gs.xsltParams.library_name + "/sites/" + gs.xsltParams.site_name + "/collect/" + gs.cgiParams.c;
     227       var gs3CollBrowsePath = gs.xsltParams.library_name + "/collection/" + gs.cgiParams.c + "/browse/" + baseClassifier;
     228       
     229       webswingInstance0.options.args += "--baseurl \"" + baseURL + "\"";
     230       //webswingInstance0.options.args += " --gsdlversion 3";       
     231       webswingInstance0.options.args += " --collection " + gs.cgiParams.c;
     232       webswingInstance0.options.args += " --library " + gs.xsltParams.library_name;
     233       webswingInstance0.options.args += " --documentroot greenstone3";
     234       webswingInstance0.options.args += " --hrefMustHave " + gs3CollBrowsePath;
     235       webswingInstance0.options.args += " --imageMustNotHave \"interfaces/\"";
     236       webswingInstance0.options.args += " --verbosity " + 3;
     237       webswingInstance0.options.args += " --imageType " + "\".jpg%.png\"";
     238       webswingInstance0.options.args += " --classifier \"" + baseClassifier + ".1\""; // "CL3.1"
     239       webswingInstance0.options.args += " --maxDepth 500 --maxDisplay 25 --refreshDelay 1500 --bgcolor \"#96c29a\"";       
     240
     241       // Control the width and height of the Java application launched with webswing
     242       // by passing width and height params set to the attributes of the webswing element
     243       // https://stackoverflow.com/questions/21851633/get-height-from-style-attribute
     244       var w = document.getElementById("webswing-collage").style.width;
     245       var suffixIndex = 0;
     246       if(w) {       
     247       suffixIndex = w.indexOf("px");
     248       if(suffixIndex>0) {
     249          w = w.substring(0, suffixIndex);
     250       }
     251       webswingInstance0.options.args += " --width " + w;
     252       }
     253       var h = document.getElementById("webswing-collage").style.height;
     254       if(h) {
     255       suffixIndex = h.indexOf("px");
     256       if(suffixIndex>0) {
     257          h = h.substring(0, suffixIndex);
     258       }
     259       webswingInstance0.options.args += " --height " + h;
     260       }
     261       
     262       //console.log("args: " +  webswingInstance0.options.args);
     263
     264       // Allow sending user events to swing application
     265       // https://www.webswing.org/docs/20.2/integrate/embed.html
     266       //webswingInstance0.setControl(true);
     267       
     268    function getParam(name) {
     269        name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
     270        var results = new RegExp("[\\?&amp;]" + name + "=([^&amp;#]*)").exec(location.href);
     271        return results == null ? null : decodeURIComponent(results[1]);
     272    }
     273  </gsf:script>
     274
     275     
     276  <script data-webswing-global-var="webswing">
     277    <xsl:text disable-output-escaping="yes">
     278
     279      var unloaded = false;
     280     
     281    (function (window, document) {
     282        var loader = function () {
     283
     284        unloaded = false; // reset state, because we are reloading the webswing app
     285   
     286        var baseUrl = '/webswing-server/collage';
     287            baseUrl = baseUrl.indexOf("/", baseUrl.length - 1) !== -1 ? baseUrl : (baseUrl + "/");
     288            var xmlhttp = new XMLHttpRequest();
     289            xmlhttp.onreadystatechange = function () {
     290                if (xmlhttp.readyState == XMLHttpRequest.DONE) {
     291                    var version = xmlhttp.status == 200 ? xmlhttp.responseText : "undefined";
     292                    var script = document.createElement("script"),
     293                        tag = document.getElementsByTagName("script")[0];
     294                    script.src = baseUrl + "javascript/webswing-embed.js?version=" + version;
     295                    tag.parentNode.insertBefore(script, tag);
     296                }
     297            };
     298            xmlhttp.open("GET", baseUrl + "rest/version", true);
     299            xmlhttp.send();
     300        };
     301
     302    var navigatingAway = function () {
     303       console.log("*** navigatingAway called");
     304
     305       // Multiple eventlisteners are registered to call navigatingAway, as not all are
     306       // triggered in all contexts (desktop vs mobile vs older browsers)
     307       // https://developer.mozilla.org/en-US/docs/Web/API/Window/unload_event
     308       // We work with multiple eventlisteners to ensure we cleanup webswing collage app when
     309       // user navigates away from page. But we should only do the cleanup once, even if *all*
     310       // event handlers got triggered. We use the unloaded var to ensure we cleanup only once
     311       if(!unloaded) {
     312          if(typeof webswingInstance0.kill === 'function') { // it should exist
     313         
     314             console.log("@@@ Asking webswing to stop the collage application");
     315         webswingInstance0.kill();
     316         unloaded = true; // do not unload again, if multiple listeners call navigatingAway() callback function
     317         console.log("@@@@ unloaded");
     318          } // else cannot call method that does not exist
     319       } else {
     320          console.log("@@@@ already unloaded.");
     321       }
     322     
     323    };
     324    window.addEventListener ? window.addEventListener("load", loader, false) : window.attachEvent("onload", loader);
     325
     326
     327    // When the user navigates away from this page or reloads it, we want to
     328    // shutdown the webswing Java application. 
     329   
     330    // https://developer.mozilla.org/en-US/docs/Web/API/Window/unload_event
     331    // unload is discouraged as it is not always supported (some mobile devices),
     332    // so we listen for pagehide events too. Visibilitychange events happen on minimising win
     333    // or another tab getting focus. So do not stop the app on mere visibilitychange.
     334    // https://dev.to/amersikira/top-3-ways-to-easily-detect-when-a-user-leaves-a-page-using-javascript-2ce4
     335   
     336    // Pagehide is also fired when user presses back button: https://developer.mozilla.org/en-US/docs/Web/API/Window/pagehide_event
     337    // https://stackoverflow.com/questions/15925251/trigger-an-event-when-user-navigates-away
     338   
     339    // Order of registering listeners may matter and be useful:
     340    // https://stackoverflow.com/questions/31852179/javascript-event-listeners-firing-order
     341    // https://stackoverflow.com/questions/2706109/are-javascript-dom-event-handlers-called-in-order-of-registration
     342    // https://medium.com/@olofbaage/javascript-essentials-all-you-need-to-know-about-event-listeners-8ed889bffb8d
     343    // Event support detection
     344    // https://stackoverflow.com/questions/158673/onbeforeunload-support-detection
     345    // https://stackoverflow.com/questions/2877393/detecting-support-for-a-given-javascript-event
     346    // http://perfectionkills.com/detecting-event-support-without-browser-sniffing
     347
     348    // Does onUnload not leave enough time to get webswing to shutdown? OnBeforeUnload works
     349    // https://caniuse.com/?search=beforeunload
     350    window.addEventListener ? window.addEventListener("beforeunload", navigatingAway, false) : window.attachEvent("onbeforeunload", navigatingAway);
     351    window.addEventListener ? window.addEventListener("pagehide", navigatingAway, false) : window.attachEvent("onpagehide", navigatingAway);
     352    //window.addEventListener ? window.addEventListener("visibilitychange", navigatingAway, false) : window.attachEvent("onvisibilitychange", navigatingAway); 
     353   
     354    })(window, document);
     355    </xsl:text>
     356  </script>
     357
     358    </xsl:template>
     359 
    149360  <xsl:template name="Collage">
    150361
     
    313524    <xsl:choose>
    314525      <xsl:when test="not(*)">
     526        <xsl:call-template name="webswing-embed-collage"/>
    315527        <xsl:call-template name="Collage" />
    316528      </xsl:when>
  • main/trunk/greenstone3/web/interfaces/default/transform/pages/webswing-collage.xsl

    r38929 r38931  
    281281    // unload is discouraged as it is not always supported (some mobile devices),
    282282    // so we listen for pagehide events too. Visibilitychange events happen on minimising win
    283     // or another tab getting focus. We do not want to stop the app on mere visibilitychange:
     283    // or another tab getting focus. So do not stop the app on mere visibilitychange.
    284284    // https://dev.to/amersikira/top-3-ways-to-easily-detect-when-a-user-leaves-a-page-using-javascript-2ce4
    285285   
     
    287287    // https://stackoverflow.com/questions/15925251/trigger-an-event-when-user-navigates-away
    288288   
    289     // Order of registering may matter and be useful:
     289    // Order of registering listeners may matter and be useful:
    290290    // https://stackoverflow.com/questions/31852179/javascript-event-listeners-firing-order
    291291    // https://stackoverflow.com/questions/2706109/are-javascript-dom-event-handlers-called-in-order-of-registration
Note: See TracChangeset for help on using the changeset viewer.