call popup with config parameters, MKWS-31
[mkws-moved-to-github.git] / tools / htdocs / mkws.js
index f1b3fb1..c928f9c 100644 (file)
@@ -198,10 +198,6 @@ function my_onterm(data) {
 
     var termlist = document.getElementById("mkwsTermlists");
     replaceHtml(termlist, acc.join(''));
-
-    // ### I don't believe these lines should be necessary (but they are)
-    if (mkws_config.responsive_design)
-        mkws_mobile_resize();
 }
 
 function add_single_facet(acc, caption, data, max, cclIndex) {
@@ -532,7 +528,7 @@ function mkws_html_all(config) {
        perpage_menu: true,     /* show/hide perpage menu */
        lang_display: [],       /* display languages links for given languages, [] for all */
        facets: ["sources", "subjects", "authors"], /* display facets, in this order, [] for none */
-       responsive_design_width: 980, /* a page with less pixel width considered as mobile */
+       responsive_design_width: 980, /* a page with less pixel width considered as narrow */
        debug: 1,     /* debug level for development: 0..2 */
 
        dummy: "dummy"
@@ -583,7 +579,7 @@ function mkws_html_all(config) {
        $("#mkwsResults").html('\
       <table width="100%" border="0" cellpadding="6" cellspacing="0">\
         <tr>\
-          <td width="250" valign="top">\
+          <td id="mkwsTermlistContainer1" width="250" valign="top">\
             <div id="mkwsTermlists"></div>\
           </td>\
           <td id="mkwsMOTDContainer" valign="top">\
@@ -593,6 +589,11 @@ function mkws_html_all(config) {
             <div id="mkwsRecords"></div>\
           </td>\
         </tr>\
+        <tr>\
+          <td colspan="2">\
+            <div id="mkwsTermlistContainer2"></div>\
+          </td>\
+        </tr>\
       </table>');
     }
 
@@ -618,9 +619,9 @@ function mkws_html_all(config) {
     if (mkws_config.responsive_design) {
        // Responsive web design - change layout on the fly based on
        // current screen width. Required for mobile devices.
-       $(window).resize( function(e) { mkws_mobile_resize() });
+       $(window).resize( function(e) { mkws_resize_page() });
        // initial check after page load
-       $(document).ready(function() { mkws_mobile_resize() });
+       $(document).ready(function() { mkws_resize_page() });
     }
 
     domReady();
@@ -780,28 +781,30 @@ function mkws_html_lang(mkws_config) {
     $("#mkwsLang").html(data);
 }
 
-function mkws_mobile_resize () {
-    debug("resize width: " + $(window).height() + ", width: " + $(window).width());
+function mkws_resize_page () {
     var list = ["mkwsSwitch"];
-    var obj;
-    // alert($(window).width());
 
     var width = mkws_config.responsive_design_width || 980;
-
-    if ($(window).width() <= width) {
+    var parentId = $("#mkwsTermlists").parent().attr('id');
+
+    if ($(window).width() <= width &&
+       parentId === "mkwsTermlistContainer1") {
+       debug("changing from wide to narrow: " + $(window).width());
+       $("#mkwsTermlists").appendTo($("#mkwsTermlistContainer2"));
+       $("#mkwsTermlistContainer1").hide();
+       $("#mkwsTermlistContainer2").show();
        for(var i = 0; i < list.length; i++) {
            $("#" + list[i]).hide();
        }
-
-       $("#mkwsTermlists").hide();
-       obj = $("#mkwsTermlists").html();
-        $("#mkwsShiftedTermlists").html(obj);
-    } else {
+    } else if ($(window).width() > width &&
+       parentId === "mkwsTermlistContainer2") {
+       debug("changing from narrow to wide: " + $(window).width());
+       $("#mkwsTermlists").appendTo($("#mkwsTermlistContainer1"));
+       $("#mkwsTermlistContainer1").show();
+       $("#mkwsTermlistContainer2").hide();
        for(var i = 0; i < list.length; i++) {
            $("#" + list[i]).show();
        }
-       $("#mkwsTermlists").show();
-       $("#mkwsShiftedTermlists").html("");
     }
 };
 
@@ -815,87 +818,138 @@ function M(word) {
     return mkws_locale_lang[lang][word] ? mkws_locale_lang[lang][word] : word;
 }
 
-/* implement jQuery.parseQuerystring() for parsing URL parameters */
+/*
+ * implement jQuery plugins
+ */
 jQuery.extend({
-  parseQuerystring: function() {
-    var nvpair = {};
-    var qs = window.location.search.replace('?', '');
-    var pairs = qs.split('&');
-    $.each(pairs, function(i, v){
-       var pair = v.split('=');
-       nvpair[pair[0]] = pair[1];
-    });
-    return nvpair;
-  },
-  pazpar2: function(config) {
-
-    // simple layout
-    var div = '<div id="mkwsSwitch"></div>\
-    <div id="mkwsLang"></div>\
-    <div id="mkwsSearch"></div>\
-    <div id="mkwsResults"></div>\
-    <div id="mkwsTargets"></div>\
-    <div id="mkwsFooter">\
-      <div id="mkwsStat"></div>\
-      <span>Powered by MKWS &copy; 2013 <a target="_new" href="http://www.indexdata.com">Index Data</a></span>\
-    </div>';
-
-    // new table layout
-    var table = '\
-    <style type="text/css">\
-      #mkwsTermlists div.facet {\
-      float:left;\
-      width: 30%;\
-      margin: 0.3em;\
-      }\
-      #mkwsStat {\
-      text-align: right;\
-      }\
-    </style>\
-       \
-    <table width="100%" border="0">\
-      <tr>\
-        <td>\
-          <div id="mkwsSwitch"></div>\
-          <div id="mkwsLang"></div>\
-          <div id="mkwsSearch"></div>\
-        </td>\
-      </tr>\
-      <tr>\
-        <td>\
-          <div style="height:500px; overflow: auto">\
-            <div id="mkwsPager"></div>\
-            <div id="mkwsNavi"></div>\
-            <div id="mkwsRecords"></div>\
-            <div id="mkwsTargets"></div>\
-            <div id="mkwsRanking"></div>\
-          </div>\
-        </td>\
-      </tr>\
-      <tr>\
-        <td>\
-          <div style="height:300px; overflow: hidden">\
-            <div id="mkwsTermlists"></div>\
-          </div>\
-        </td>\
-      </tr>\
-      <tr>\
-        <td>\
-          <div id="mkwsStat"></div>\
-        </td>\
-      </tr>\
-    </table>';
-
-    if (config && config.layout == 'table') {
-       document.write(table);
-    } else {
-       document.write(div);
-    }
+    // implement jQuery.parseQuerystring() for parsing URL parameters
+    parseQuerystring: function() {
+       var nvpair = {};
+       var qs = window.location.search.replace('?', '');
+       var pairs = qs.split('&');
+       $.each(pairs, function(i, v){
+           var pair = v.split('=');
+           nvpair[pair[0]] = pair[1];
+       });
+       return nvpair;
+    },
 
-    mkws_html_all(mkws_config);
-  }
+    debug2: function(string) { // delayed debug, internal variables are set after dom ready
+       setTimeout(function() { debug(string); }, 500);
+    },
+
+    // service-proxy or pazpar2
+    pazpar2: function(config) {
+       // simple layout
+       var div = '<div id="mkwsSwitch"></div>\
+       <div id="mkwsLang"></div>\
+       <div id="mkwsSearch"></div>\
+       <div id="mkwsResults"></div>\
+       <div id="mkwsTargets"></div>\
+        <div id="mkwsStat"></div>';
+
+       // new table layout
+       var table = '\
+       <style type="text/css">\
+         #mkwsTermlists div.facet {\
+         float:left;\
+         width: 30%;\
+         margin: 0.3em;\
+         }\
+         #mkwsStat {\
+         text-align: right;\
+         }\
+       </style>\
+           \
+       <table width="100%" border="0">\
+         <tr>\
+           <td>\
+             <div id="mkwsSwitch"></div>\
+             <div id="mkwsLang"></div>\
+             <div id="mkwsSearch"></div>\
+           </td>\
+         </tr>\
+         <tr>\
+           <td>\
+             <div style="height:500px; overflow: auto">\
+               <div id="mkwsPager"></div>\
+               <div id="mkwsNavi"></div>\
+               <div id="mkwsRecords"></div>\
+               <div id="mkwsTargets"></div>\
+               <div id="mkwsRanking"></div>\
+             </div>\
+           </td>\
+         </tr>\
+         <tr>\
+           <td>\
+             <div style="height:300px; overflow: hidden">\
+               <div id="mkwsTermlists"></div>\
+             </div>\
+           </td>\
+         </tr>\
+         <tr>\
+           <td>\
+             <div id="mkwsStat"></div>\
+           </td>\
+         </tr>\
+       </table>';
+
+       var popup = '\
+         <div id="mkwsSearch"></div>\
+         <div id="mkwsPopup">\
+           <div id="mkwsSwitch"></div>\
+           <div id="mkwsLang"></div>\
+           <div id="mkwsResults"></div>\
+           <div id="mkwsTargets"></div>\
+           <div id="mkwsStat"></div>\
+         </div>'
+
+       if (config && config.layout == 'div') {
+           this.debug2("jquery plugin layout: div");
+           document.write(div);
+       } else if (config && config.layout == 'popup') {
+           this.debug2("jquery plugin layout: popup");
+           document.write(popup);
+           $(document).ready( function() { init_popup(config); } );
+       } else {
+           this.debug2("jquery plugin layout: table");
+           document.write(table);
+       }
+    }
 });
 
+function init_popup(obj) {
+    var config = obj && obj.config ? obj.config : {};
+
+    var height = config.height || 760;
+    var width = config.width || 880;
+    var id_button = config.button || "input#mkwsButton";
+    var id_popup = config.popup || "#mkwsPopup";
+
+    debug("popup height: " + height + ", width: " + width);
+
+    $(id_popup).dialog({
+      closeOnEscape: true,
+      autoOpen: false,
+      height: height,
+      width: width,
+      modal: true,
+      resizable: true,
+      buttons: {
+             Cancel: function() {
+                     $(this).dialog("close");
+             }
+      },
+      close: function() { }
+    });
+
+    $(id_button)
+      .button()
+      .click(function() {
+             $(id_popup).dialog("open");
+      });
+};
+
 function debug(string) {
     if (!mkws_debug)
        return;
@@ -913,5 +967,6 @@ function debug(string) {
     console.log(string);
 }
 
+
 /* magic */
 $(document).ready(function() { mkws_html_all(mkws_config) });