source: main/trunk/greenstone3/web/interfaces/default/transform/layouts/webswing-collage.xsl@ 38966

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    xmlns:java="http://xml.apache.org/xslt/java"
    xmlns:util="xalan://org.greenstone.gsdl3.util.XSLTUtil"
    xmlns:gslib="http://www.greenstone.org/skinning"
    xmlns:gsf="http://www.greenstone.org/greenstone3/schema/ConfigFormat"
    extension-element-prefixes="java util"
    exclude-result-prefixes="java util gsf">
  
    <xsl:template name="webswing-embed-collage">
      <link rel="stylesheet" href="/webswing-server/css/style.css" />
      <div id="webswing-collage" class="webswing-element" data-webswing-instance="webswingInstance0" style="width: 800px; height: 400px;">
        
        <div id="loading" class="ws-modal-container">
              <div class="ws-login">
        <div  class="ws-login-content">
                  <div class="ws-spinner">
            <div class="ws-spinner-dot-1"><xsl:comment>filler</xsl:comment></div>
            <div class="ws-spinner-dot-2"><xsl:comment>filler</xsl:comment></div>
          </div>
        </div>
              </div>
        </div>
        
      </div>

      <gsf:script>
        // https://www.webswing.org/docs/23.2/configure/applet.html
        // https://www.webswing.org/docs/23.2/configure/swing.html
        // https://www.webswing.org/docs/23.2/integrate/javascript-api?_h=customArgs%2Cargs#usage-with-customization-and-options        
        // https://www.webswing.org/docs/23.2/integrate/embed.html
        // https://www.webswing.org/docs/20.1/integrate/urlparams.html
        // https://www.webswing.org/docs/23.2/integrate/urlparams.html
        // https://www.webswing.org/docs/20.1/integrate/customize.html
        // https://www.webswing.org/docs/2.7/integrate/embed.html
        
    var webswingInstance0 = {
        options: {
        autoStart: true,    
    //appletParams: {"collection":"smallbea", "library":"library"},
            connectionUrl:'/webswing-server/collage',

        customization: function(injector) {
        injector.services.base.handleActionEvent = function(actionName, data, binaryData) {
                //console.log("WebSwing actionEvent callback handler: called with actionName = " + actionName);

            if (actionName === "openURL") {
              var url = data;
          // check if a target tab/window name has been specified
          // TODO: Any better way of passing > 1 string between Java and JavaScript?
          var index = url.indexOf(" - ");
          if (index !== -1) {
             var target = url.substring(index+3); // skip past " - " to get target name
             url = url.substring(0, index);
             // Note that target window name is not the same as target window title
             // https://stackoverflow.com/questions/8051811/how-to-show-window-title-using-window-open
             window.open(url, target);               
          } else {
             window.open(url, '_blank');
          }
        } else if (actionName == "javaToWebswingJSConsoleLog") {
            console.log("Got message from java:\n" + data);
        }
        
          }
            }

        
       }
       };
       
      
       // The applet jar files can just remain in web/applet where they are compiled up
       
       if(!webswingInstance0.options.args) {
          webswingInstance0.options.args="";       
       }

       var verbosity = 3;
       var appletEl = document.getElementById("collage-applet-element");
       
       // Fill up webswingParams JSON record with non-dynamic values and other vals
       // that may perhaps not be set on the applet element, to use as fallback
       var webswingParams = {
       //"webswing":1, // set in webswing.config.in to discourage editing
       "verbosity": verbosity,
       "gsdlversion":3,
       "maxDepth": 500,
       "maxDisplay": 25,
       "refreshDelay": 1500,
       "isJava2":"auto",
       "bgcolor":"#96c29a"
       };
       
       if(!appletEl &amp;&amp; verbosity >= 4) {
          console.log("No collage-applet-element on page. Using webswing params vals from pageResponse/XSLT.");
       }      
      
       // The entirely javascript way of setting our webswing app parameters
       // (does not read the parameters set on the applet element)

       //https://stackoverflow.com/questions/25203124/how-to-get-base-url-with-jquery-or-javascript
       var baseURL;
       if(gs.requestInformation.baseURL) {
          baseURL = window.location.protocol + gs.requestInformation.baseURL; // contains servlet
       } else { // will this else block ever again need to be used?
          baseURL = window.location.origin+window.location.pathname;       
          // webswingInstance0.options.args += "\"" + baseURL+ "?a=a&amp;rt=d&amp;s=GsdlCollageApplet&amp;c=smallbea\"";
          var servlet_index = baseURL.indexOf("/"+gs.xsltParams.library_name);
          if(servlet_index > 0) {
             baseURL = baseURL.substring(0, servlet_index+1);
      }
       }
       
       //var gs3CollImgPath = gs.xsltParams.library_name + "/sites/" + gs.xsltParams.site_name + "/collect/" + gs.cgiParams.c;
       var gs3CollBrowsePath = gs.xsltParams.library_name + "/collection/" + gs.cgiParams.c + "/browse/" + gs.cgiParams.cl; // cl is classifier, e.g "CL3"

       webswingParams["baseurl"] = baseURL;
       webswingParams["collection"] = gs.cgiParams.c;
       webswingParams["library"] = gs.xsltParams.library_name;
       webswingParams["documentroot"] = gs.xsltParams.servlet_context;
       webswingParams["hrefMustHave"] = gs3CollBrowsePath;
       webswingParams["imageMustNotHave"] = "interfaces/";
       webswingParams["imageType"] = ".jpg%.png";
       webswingParams["classifier"] = gs.cgiParams.cl + ".1";
       
       
    if(appletEl) { // get all available webswing config settings from applet element
       if(verbosity >= 4) {
          console.log("collage-applet-element on page, using its params where available.");
       }
       // If using the inactive/deprecated applet element as shim, instead of javascript
       // working out the webswing config params from the pageRequest or XSLT variables:
       // Get the webswing configuration arguments from the lingering applet html element,
       // as a GS3 library designer may know to how to customize applet parameters
       // better than they know javascript or how to construct webswing parameters.       
             
       // Now get the param subelements of the applet element
       for (var webswingParam of Object.keys(webswingParams)) {
          var querySelectorStr = "param[name='"+webswingParam+"']";       
          var appletParam = appletEl.querySelector(querySelectorStr);
      if(appletParam) { // if this parameter was set on the applet
         webswingParams[webswingParam] = appletParam.value;
      } else {
         if(verbosity>=3) {
            console.log("Applet element doesn't supply param: " + webswingParam + ". Using fallback: " + webswingParams[webswingParam]);
         }
      }
       }

    }
    verbosity = webswingParams["verbosity"]; // so JavaScript logging obeys user-supplied verbosity
    
       // Special case: width and height are attributes of the applet tag not subelements
       // and may need parsing.
       // Control the width and height of the Java application launched with webswing by
       // passing the width and height params set on the webswing element, unless an applet
       // element is available. In that case try to get the dimensions from the applet tag.
       // https://stackoverflow.com/questions/21851633/get-height-from-style-attribute
       var w = appletEl ? appletEl.getAttribute("width") : document.getElementById("webswing-collage").style.width;
       var h = appletEl ? appletEl.getAttribute("height") : document.getElementById("webswing-collage").style.height;
       webswingParams["width"] = stripUnitOffAttribute("px", w);
       webswingParams["height"] = stripUnitOffAttribute("px", h);

       // Webswing only uses the width and height set on the webswing-collage element
       // Override this with any dimensions set on any applet element, as that is user-controlled
       // from GLI. style.setProperty failed without the important parameter to force the setting.
       // https://stackoverflow.com/questions/5191478/changing-element-style-attribute-dynamically-using-javascript
       document.getElementById("webswing-collage").style.setProperty("width", webswingParams["width"] + "px", "important");
       document.getElementById("webswing-collage").style.setProperty("height", webswingParams["height"] + "px", "important");

       if(verbosity >= 3) {
          console.log("@@@ Final verbosity: " + webswingParams["verbosity"]
            + ", width: " + webswingParams["width"] + ", height: " + webswingParams["height"]);
       }
       // Having collected all the webswingParams, we can finally build up the single webswing customArgs string
       var _args = "";
       for (var webswingParam of Object.keys(webswingParams)) {
          _args += "--" + webswingParam + " \"" + webswingParams[webswingParam] + "\" "; // space at end to precede next arg
       }
       webswingInstance0.options.args += _args.substring(0, _args.length-1); // remove extra space at end
   
       
       // Set to false if running the webswing instance as a webswing application. This has
       // nothing to do with if the applet element exists on the page: it can be on the page
       // and you can still decide to run GsdlCollage as a webswing application. If switching
       // between running as application and applet, remember to adjust webswing.config.in
       // Either way, since we still push the deprecated applet element onto the page, we can use
       // it as a shim: use JavaScript to read its configuration params and pass them to webswing.

       var isWebswingRunAsApplet = true;

       // When run as webswing applet (instead of as webswing application), the webswing var
       // customargs becomes assigned as the value of key "xtraParams" in webswing.config.in
       // and is a string of key-value pairs. And our Java code is able to successfully
       // receive these key-valye pairs in the form k1::v1;;k2::v2;; (URL form of key-value
       // pairs is not easy to pass in from JavaScript through webswing into Java).

       if(isWebswingRunAsApplet) {
          var xtraParams = webswingInstance0.options.args;
          var hyphens_index = xtraParams.indexOf("--");
          var spaceAfterKey = -1;
          while(hyphens_index >= 0) {
             // Locate start of value in each key-value pair
             spaceAfterKey = xtraParams.indexOf(" ", hyphens_index);
         if(spaceAfterKey >= 0) {
            // insert (splice in) the key-value internal separator,creating "key::value"
                xtraParams = [xtraParams.slice(0, spaceAfterKey), "::", xtraParams.slice(spaceAfterKey+1)].join('');
         }
         hyphens_index = xtraParams.indexOf("--", hyphens_index+2);
          }
          // now add separator *between* each key-value pairs with ;;
          xtraParams = xtraParams.replaceAll(" --", ";;");
          webswingInstance0.options.args = xtraParams.substring(2);
       }

       if(verbosity >= 4) {
          console.log("args: " +  webswingInstance0.options.args);
       }

    function getParam(name) {
        name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
        var results = new RegExp("[\\?&amp;]" + name + "=([^&amp;#]*)").exec(location.href);
        return results == null ? null : decodeURIComponent(results[1]);
    }

    function stripUnitOffAttribute(unit, attr) {
    // common code, regardless of whether we use the applet element as a shim or not
       var suffixIndex = 0;
       if(attr) {       
          suffixIndex = attr.indexOf(unit);
          if(suffixIndex>0) {
             attr = attr.substring(0, suffixIndex);
          }
       }       
       return attr;
    }
  </gsf:script>

      
  <script data-webswing-global-var="webswing">
    <xsl:text disable-output-escaping="yes">
      var unloaded = false;
      
    (function (window, document) {
        var loader = function () {

        unloaded = false; // reset state, because we are reloading the webswing app
    
        var baseUrl = '/webswing-server/collage';
            baseUrl = baseUrl.indexOf("/", baseUrl.length - 1) !== -1 ? baseUrl : (baseUrl + "/");
            var xmlhttp = new XMLHttpRequest();
            xmlhttp.onreadystatechange = function () {
                if (xmlhttp.readyState == XMLHttpRequest.DONE) {
                    var version = xmlhttp.status == 200 ? xmlhttp.responseText : "undefined";
                    var script = document.createElement("script"),
                        tag = document.getElementsByTagName("script")[0];
                    script.src = baseUrl + "javascript/webswing-embed.js?version=" + version;
                    tag.parentNode.insertBefore(script, tag);
                }
            };
            xmlhttp.open("GET", baseUrl + "rest/version", true);
            xmlhttp.send();
        };

    var navigatingAway = function () {
       if(verbosity >= 4) {
          console.log("*** navigatingAway called");
       }
          
       // Multiple eventlisteners are registered to call navigatingAway, as not all are 
       // triggered in all contexts (desktop vs mobile vs older browsers)
       // https://developer.mozilla.org/en-US/docs/Web/API/Window/unload_event
       // We work with multiple eventlisteners to ensure we cleanup webswing collage app when
       // user navigates away from page. But we should only do the cleanup once, even if *all*
       // event handlers got triggered. We use the unloaded var to ensure we cleanup only once
       if(!unloaded) {

          // Sadly, sending messages to Java from JavaScript using the webswing API does not
          // work for us.
          // So we do not succeed in calling our handler in Java for our custom action
          // navigatingAway or even testJavaCall, like this (Java does not get the message):
          //
          // if(typeof webswingInstance0.setControl === 'function') {
          //   Allow sending user events to swing application
          //   https://www.webswing.org/docs/20.2/integrate/embed.html
          //   webswingInstance0.setControl(true);
          //
          //   console.log("@@@ Asking webswing to stop the collage application");
          //   webswingInstance0.performAction({actionName: "navigatingAway"});
          ///  webswingInstance0.performAction({actionName: "testJavaCall"});
          //   // unload only once even if multiple listeners call navigatingAway() callback
          //   unloaded = true;
          // }
          //
          // Fortunately the official webswing kill() function on the webswing
          // instance is successfully sent and detected on the Java end.
          // In fact, the behaviour on kill() is a little more complicated:
          // kill() is able to stop the GsdlCollageApplet when collage runs as an
          // application, because the default webswing behaviour is to generate a
          // WindowClosing event, which GsdlCollage is written to respond to when run as an
          // application).
          // When GsdlCollageApplet is run as an applet, it cannot detect and respond to
          // the regular WindowClosing event and the Java end needs to implement the webswing
          // shutdown-handler to cleanly stop and exit.
          
          if(typeof webswingInstance0.kill === 'function') { // it should exist
             if(verbosity >= 3) {
                console.log("@@@ Telling webswing to stop the collage application/applet");
         }
         webswingInstance0.kill();
         unloaded = true; // do not unload again, if multiple listeners call navigatingAway() callback function
         if(verbosity >= 4) {
            console.log("@@@@ unloaded");
         }
          } // else cannot call method that does not exist
       } else {
          if(verbosity >= 4) {   
             console.log("@@@@ already unloaded.");
          }
       }
      
    };
    window.addEventListener ? window.addEventListener("load", loader, false) : window.attachEvent("onload", loader);


    // When the user navigates away from this page or reloads it, we want to
    // shutdown the webswing Java application/applet.   
    
    // https://developer.mozilla.org/en-US/docs/Web/API/Window/unload_event
    // unload is discouraged as it is not always supported (some mobile devices),
    // so we listen for pagehide events too. Visibilitychange events happen on minimising the
    // window or another tab getting focus. So do not stop the app on mere visibilitychange.
    // https://dev.to/amersikira/top-3-ways-to-easily-detect-when-a-user-leaves-a-page-using-javascript-2ce4
    
    // Pagehide is also fired when user presses back button: https://developer.mozilla.org/en-US/docs/Web/API/Window/pagehide_event
    // https://stackoverflow.com/questions/15925251/trigger-an-event-when-user-navigates-away
    
    // Order of registering listeners may matter and be useful:
    // https://stackoverflow.com/questions/31852179/javascript-event-listeners-firing-order
    // https://stackoverflow.com/questions/2706109/are-javascript-dom-event-handlers-called-in-order-of-registration
    // https://medium.com/@olofbaage/javascript-essentials-all-you-need-to-know-about-event-listeners-8ed889bffb8d
    // Event support detection
    // https://stackoverflow.com/questions/158673/onbeforeunload-support-detection
    // https://stackoverflow.com/questions/2877393/detecting-support-for-a-given-javascript-event
    // http://perfectionkills.com/detecting-event-support-without-browser-sniffing

    // Does onUnload not leave enough time to get webswing to shutdown? OnBeforeUnload works
    // https://caniuse.com/?search=beforeunload
    
    window.addEventListener ? window.addEventListener("beforeunload", navigatingAway, false) : window.attachEvent("onbeforeunload", navigatingAway);
    window.addEventListener ? window.addEventListener("pagehide", navigatingAway, false) : window.attachEvent("onpagehide", navigatingAway);
    //window.addEventListener ? window.addEventListener("visibilitychange", navigatingAway, false) : window.attachEvent("onvisibilitychange", navigatingAway);  
    
    })(window, document);
    </xsl:text>
  </script>

  </xsl:template>
  
</xsl:stylesheet>