% Embedded metasearching with the MasterKey Widget Set
% Mike Taylor
-% July-September 2013
Introduction
contains all the JavaScript needed by the widget-set.
* `mkws.css`
- provides the default CSS styling
+ provides the default CSS styling
Second, within the HTML body, `<div>` elements with special IDs that
begin `mkws` can be provided. These are filled in by the MKWS code,
in a popup. The key part of such an application is this invocation of
the MKWS jQuery plugin:
- <script type="text/javascript">
- jQuery.pazpar2({ "layout":"popup", width:800, height:500 });
- </script>
+ <div class="mkwsSearch"></div>
+ <div class="mkwsPopup" popup_width="1024" popup_height="650" popup_modal="0" popup_autoOpen="0" popup_button="input.mkwsButton">
+ <div class="mkwsSwitch"></div>
+ <div class="mkwsLang"></div>
+ <div class="mkwsResults"></div>
+ <div class="mkwsTargets"></div>
+ <div class="mkwsStat"></div>
+ </div>
The necessary scaffolding can be seen in an example application,
http://example.indexdata.com/index-popup.html
debug_level int 1 Level of debugging output to emit. 0 = none, 1 = messages, 2 = messages with
datestamps, 3 = messages with datestamps and stack-traces.
-facets array *Note 1* Ordered list of names of facets to display. Supported facet names are
+facets array *Note 1* Ordered list of names of facets to display. Supported facet names are
`xtargets`, `subject` and `author`.
lang string en Code of the default language to display the UI in. Supported language codes are `en` =
-### jQuery plugin invocation
+### jQuery UI popup invocation
-The MasterKey Widget Set can be invoked as a jQuery plugin rather than
-by providing an HTML skeleton explicitly. When this approach is used,
-the invocation is a single line of JavaScript:
+The MasterKey Widget Set can be invoked in a popup window on top of the page.
- <script>jQuery.pazpar2();</script>
+Note that when using the `popup` layout, facilities from the jQuery UI
+toolkit are used, so it's necessary to include both CSS and JavaScript
+from that toolkit. The relevant lines are:
-This code should be inserted in the page at the position where the
-metasearch should occur.
+ <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
+ <link rel="stylesheet" type="text/css"
+ href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
-When invoking this plugin, a key-value lookup table of named options
-may be passed in to modify the default behaviour, as in the exaple
-above. The available options are as follows:
+ <div class="mkwsSearch"></div>
+ <div class="mkwsPopup" popup_width="1024" popup_height="650" popup_modal="0" popup_autoOpen="0" popup_button="input.mkwsButton">
+ <div class="mkwsSwitch"></div>
+ <div class="mkwsLang"></div>
+ <div class="mkwsResults"></div>
+ <div class="mkwsTargets"></div>
+ <div class="mkwsStat"></div>
+ </div
---
Element Type Default Description
-------- ----- --------- ------------
-layout string popup Specifies how the user interface should
- appear. Options are `table` (the default,
- with facets at the bottom), `div` (with
- facets at the side) and `popup` (to
- obtain a popup window).
-
-width int 880 Width of the popup window (if used), in
+popup_width string 880 Width of the popup window (if used), in
pixels.
-height int 760 Height of the popup window (if used), in
+popup_height string 760 Height of the popup window (if used), in
pixels.
-id_button string input#mkwsButton (Never change this.)
+popup_button string input.mkwsButton (Never change this.)
-id_popup string #mkwsPopup (Never change this.)
----
+popup_modal string 0 Modal confirmation mode. Valid values are 0 or 1
-Note that when using the `popup` layout, facilities from the jQuery UI
-toolkit are used, so it's necessary to include both CSS and JavaScript
-from that toolkit. The relevant lines are:
+popup_autoOpen string 1 Open popup window on load. Valid values are 0 or 1
- <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
- <link rel="stylesheet" type="text/css"
- href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
+---
### The structure of the HTML generated by the MKWS widgets
- - -
-Copyright (C) 2013 by IndexData ApS, <http://www.indexdata.com>
+Copyright (C) 2013-2014 by IndexData ApS, <http://www.indexdata.com>
--- /dev/null
+<html>
+ <head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+ <title>MKWS demo: Reference widget with popup window</title>
+ <link rel="stylesheet" type="text/css" href="tools/htdocs/mkws.css" />
+ <link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
+ <link rel="stylesheet" type="text/css" href="mkws-widget-reference.css" />
+ <link rel="stylesheet" type="text/css" href="mkws-widget-credo.css" />
+
+ <script type="text/javascript">
+ var mkws_config = {
+ service_proxy_auth: "//mkws.indexdata.com/service-proxy-credoauth"
+ };
+ </script>
+
+ <script type="text/javascript" src="tools/htdocs/jquery-1.10.0.min.js"></script>
+ <script type="text/javascript" src="//code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
+
+ <script type="text/javascript" src="tools/htdocs/pz2.js"></script>
+ <script type="text/javascript" src="tools/htdocs/handlebars-v1.1.2.js"></script>
+ <script type="text/javascript" src="tools/htdocs/jquery.json-2.4.js"></script>
+
+ <script type="text/javascript" src="src/mkws-handlebars.js"></script>
+ <script type="text/javascript" src="src/mkws-core.js"></script>
+ <script type="text/javascript" src="src/mkws-team.js"></script>
+ <script type="text/javascript" src="src/mkws-filter.js"></script>
+ <script type="text/javascript" src="src/mkws-popup.js"></script>
+ <script type="text/javascript" src="src/mkws-widget.js"></script>
+ <script type="text/javascript" src="src/mkws-widget-main.js"></script>
+ <script type="text/javascript" src="src/mkws-widget-termlists.js"></script>
+ <script type="text/javascript" src="src/mkws-widget-authname.js"></script>
+ <script type="text/javascript" src="src/mkws-widget-categories.js"></script>
+ <script type="text/javascript" src="src/mkws-widget-log.js"></script>
+ <script type="text/javascript" src="src/mkws-widget-record.js"></script>
+ <script type="text/javascript" src="src/mkws-widget-reference.js"></script>
+ <script type="text/javascript" src="src/mkws-widget-builder.js"></script>
+
+ <script type="text/javascript" src="mkws-widget-credo.js"></script>
+ </head>
+ <body>
+ <h3>MKWS widgets in a popup window</h3>
+
+ <div class="mkwsSearch"></div>
+ <div class="mkwsPopup" popup_width="1024" popup_height="650" popup_modal="0" popup_autoOpen="0" popup_button="input.mkwsButton">
+ <div class="mkwsSwitch"></div>
+ <div class="mkwsLang"></div>
+ <div class="mkwsResults"></div>
+ <div class="mkwsTargets"></div>
+ <div class="mkwsStat"></div>
+ </div>
+
+ <div class="mkwsPopup" popup_width="1024" popup_height="800" popup_autoOpen="1">
+ <div class="mkwsCredo mkwsTeam_credo" autosearch="!param!q">mkwsCredo result will appear here</div>
+ </div>
+
+ <div class="mkwsPopup" popup_width="700" popup_height="600" popup_autoOpen="1">
+ <div class="mkwsReference mkwsTeam_credo" sentences="1" autosearch="!param!q">mkwsReference result will appear here</div>
+ </div>
+
+ </body>
+</html>
};
</script>
- <script type="text/javascript" src="tools/htdocs/jquery-1.10.0.min.js"></script>
+ <script type="text/javascript" src="tools/htdocs/mkws-complete.js"></script>
+ <script>jQuery = mkws.$</script>
<script type="text/javascript" src="//code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
-
- <script type="text/javascript" src="tools/htdocs/pz2.js"></script>
- <script type="text/javascript" src="tools/htdocs/handlebars-v1.1.2.js"></script>
- <script type="text/javascript" src="tools/htdocs/jquery.json-2.4.js"></script>
-
- <script type="text/javascript" src="src/mkws-handlebars.js"></script>
- <script type="text/javascript" src="src/mkws-core.js"></script>
- <script type="text/javascript" src="src/mkws-team.js"></script>
- <script type="text/javascript" src="src/mkws-filter.js"></script>
- <script type="text/javascript" src="src/mkws-popup.js"></script>
- <script type="text/javascript" src="src/mkws-widget.js"></script>
- <script type="text/javascript" src="src/mkws-widget-main.js"></script>
- <script type="text/javascript" src="src/mkws-widget-termlists.js"></script>
- <script type="text/javascript" src="src/mkws-widget-authname.js"></script>
- <script type="text/javascript" src="src/mkws-widget-categories.js"></script>
- <script type="text/javascript" src="src/mkws-widget-log.js"></script>
- <script type="text/javascript" src="src/mkws-widget-record.js"></script>
- <script type="text/javascript" src="src/mkws-widget-reference.js"></script>
- <script type="text/javascript" src="src/mkws-widget-builder.js"></script>
-
<script type="text/javascript" src="mkws-widget-credo.js"></script>
</head>
<body>
<div class="mkwsStat"></div>
</div>
- <div class="mkwsPopup popup_width="1024" popup_height="800" popup_autoOpen="1">
+ <div class="mkwsPopup" popup_width="1024" popup_height="800" popup_autoOpen="1">
<div class="mkwsCredo mkwsTeam_credo" autosearch="!param!q">mkwsCredo result will appear here</div>
</div>
projects / mkws-moved-to-github.git / commitdiff