Reference Universe widget MKWS-156
authorJason Skomorowski <jason@indexdata.com>
Fri, 16 May 2014 04:59:28 +0000 (00:59 -0400)
committerJason Skomorowski <jason@indexdata.com>
Fri, 16 May 2014 04:59:28 +0000 (00:59 -0400)
examples/htdocs/mkws-widget-ru.css [new file with mode: 0644]
examples/htdocs/mkws-widget-ru.html [new file with mode: 0644]
examples/htdocs/mkws-widget-ru.js [new file with mode: 0644]
examples/htdocs/mkws-widget-ru.readme [new file with mode: 0644]

diff --git a/examples/htdocs/mkws-widget-ru.css b/examples/htdocs/mkws-widget-ru.css
new file mode 100644 (file)
index 0000000..39765ff
--- /dev/null
@@ -0,0 +1,31 @@
+.mkwsReferenceUniverse {
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  background: #FCFBFA;
+  padding: 0.5em 1em 0.25em;
+  box-shadow: 0 0 2px 0 #7F8F93;
+  border-radius: 0 0 1.5em;
+  -moz-border-radius: 0 0 1.5em;
+  -webkit-border-radius: 0 0 1.5em;
+  line-height: 1.4;
+  color: #86979B;
+  background: radial-gradient(ellipse at center,  #ffffff 0%,#f8f8f8 100%);
+}
+
+h2 {
+  font-size: 100%;
+  color: #4A5456;
+  padding-bottom: .5em;
+}
+
+.record, .mkwsSummary {
+  margin: .95em .25em;
+  padding-top: .75em;
+  border-top: 1px dotted #BEC8CC;
+  font-size: 90%;
+}
+
+a {
+  text-decoration: none;
+  font-weight:normal;
+  color: #2B77AF;
+}
diff --git a/examples/htdocs/mkws-widget-ru.html b/examples/htdocs/mkws-widget-ru.html
new file mode 100644 (file)
index 0000000..64ef386
--- /dev/null
@@ -0,0 +1,8 @@
+<html>
+  <div style="max-width: 18em; margin: 1.5em 1.5em">
+    <script src="//mkws.indexdata.com/mkws-complete.js"></script>
+    <script src="mkws-widget-ru.js"></script>
+    <link rel="stylesheet" type="text/css" href="mkws-widget-ru.css" />
+    <div class="mkwsReferenceUniverse" autosearch="!param!q"></div>
+  </div>
+</html>
diff --git a/examples/htdocs/mkws-widget-ru.js b/examples/htdocs/mkws-widget-ru.js
new file mode 100644 (file)
index 0000000..e38d957
--- /dev/null
@@ -0,0 +1,11 @@
+mkws.registerWidgetType('ReferenceUniverse', function() {
+    //this.team.config.service_proxy_auth = "http://mkws.indexdata.com/service-proxy/?command=auth&action=login&username=paratext&password=paratext_mkc";
+    // this.team.config.perpage_default = 5;
+    // this.team.config.sort_default = "position";
+    var teamClass = 'mkwsTeam_' + this.team.name();
+    var html = "<h2>Reference Universe results:</h2>\n";
+    html += '<div class="mkwsRecords ' + teamClass 
+            + '" autosearch="' + $(this.node).attr("autosearch")
+            + '" sort="position" perpage="5"></div>';
+    $(this.node).html(html);
+});
diff --git a/examples/htdocs/mkws-widget-ru.readme b/examples/htdocs/mkws-widget-ru.readme
new file mode 100644 (file)
index 0000000..c55272e
--- /dev/null
@@ -0,0 +1,34 @@
+# Embedding Reference Universe with MKWS
+
+## Quick start
+Simply paste this inline with the markup on any page: 
+
+    <script src="//mkws.indexdata.com/mkws-complete.js"></script>
+    <script src="//mkws.indexdata.com/mkws-widget-ru.js"></script>
+    <link rel="stylesheet" type="text/css" href="//mkws.indexdata.com/mkws-widget-ru.css" />
+    <div class="mkwsReferenceUniverse" autosearch="!param!q"></div>
+    
+## A bit more detail 
+
+The MasterKey Widget Set ([MKWS](http://mkws.indexdata.com/)) lets you easily embed search-enabled widgets which run in the client browser and display results from a web service. In this case, it searches Reference Universe.
+
+You need to include two scripts: one for MKWS and one for the Reference Universe widget. This can be inline as above or you can include them in the header or aggregate them with your application's scripts.
+
+    <script src="//mkws.indexdata.com/mkws-complete.js"></script>
+    <script src="//mkws.indexdata.com/mkws-widget-ru.js"></script>
+    
+The provided stylesheet is generic and you're encouraged to replace it entirely by styling the new elements to fit seamlessly with your content. 
+
+    <link rel="stylesheet" type="text/css" href="//mkws.indexdata.com/mkws-widget-ru.css" />
+    
+Any element you give the class `mkwsReferenceUniverse` will have is contents replaced by the top results from a search against the Reference Universe service for the current query.
+    
+    <div class="mkwsReferenceUniverse" autosearch="!param!q"></div>
+
+### Finding the query 
+
+The `autosearch` attribute of the widget container lets it know where to find the query. There are three places it might look to find that you're searching for *water*: 
+
+* `!param!foo` indicates a GET parameter and would match `http://site.tld/search?foo=water`
+* `!path!2` will take the 2nd path component from the end of the url and would find the query in `http://site.tld/apps/search/water/mobile`
+* `!var!foo` will look for the query in a JavaScript variable named `foo` in the `window` context (ie. a top level variable)