-\r
<html>\r
<head>\r
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />\r
- <title>A-group silly demo</title>\r
+ <title>Dictionary lookup demo</title>\r
<script type="text/javascript">\r
var mkws_config = {\r
- //responsive_design_width: 990\r
- //perpage_default: 10,\r
- service_proxy_auth: "http://mkws.indexdata.com/service-proxy/?command=auth&action=login&username=dic&password=dic"\r
- };\r
+ sp_auth_credentials: "mkwsdict/mkwsdict"\r
+ };\r
</script>\r
- <link rel="stylesheet" type="text/css" href="http://mkws.indexdata.com/mkws.css" />\r
- <script src="http://mkws.indexdata.com/mkws-complete.js"></script>\r
+ <link rel="stylesheet" type="text/css" href="//mkws.indexdata.com/mkws.css" />\r
+ <link rel="stylesheet" type="text/css" href="mkws-widget-reference.css" />\r
+ <script src="//mkws.indexdata.com/mkws-complete.js"></script>\r
+ <script>$ = jQuery = mkws.$; </script>\r
</head>\r
<body>\r
\r
<table height="100%" width="100%">\r
- <tr valign="top" height="100%">\r
- <td width="60%" valign="top">\r
-\r
- <h1>MKWS: the MasterKey Widget Set</h1>\r
- <p>\r
- This site contains tools, not content:\r
- </p>\r
- <ul>\r
- <li>\r
- <a href="mkws.js">mkws.js</a>\r
- --\r
- JavaScript code that powers the MasterKey Widget Set\r
- </li>\r
- <li>\r
- <a href="/pazpar2/js/pz2.js">/pazpar2/js/pz2.js</a>\r
- --\r
- Low-level JavaScript library for access to the MasterKey web\r
- service.\r
- </li>\r
- <li>\r
- <a href="mkws-complete.js"\r
- >mkws-complete.js</a>\r
- --\r
- A single large JavaScript file containing everything needed for\r
- MKWS to work: the widget-set itself, the API library, and any\r
- additional prerequisites such as jQuery.\r
- </li>\r
- <li>\r
- <a href="mkws.css">mkws.css</a>\r
- --\r
- A stylesheet which styles only MasterKey widgets, and does not\r
- otherwise interfere with application-site's styles.\r
- <!--\r
- <p style="color:darkred">\r
- Note. This is not yet quite true: the stylesheet needs tweaking\r
- to make it more specific to only the MKWS components. At present\r
- it spills over into styling parts of the containing site, too.\r
- </p>\r
- -->\r
- </li>\r
- </ul>\r
- <p>\r
- For examples of how to use the widget-set, see:\r
- </p>\r
- <ul>\r
- <li>\r
- A very simple application at\r
- <a href="http://example.indexdata.com/"\r
- >http://example.indexdata.com/</a>.\r
- It's worth viewing the source to see how small it is.\r
- </li>\r
- <li>\r
- <a href="http://example.indexdata.com/index-full.html"\r
- >A more detailed version</a>\r
- that contains a configuration structure instead of accepting\r
- the defaults. Includes a custom translation option to present\r
- the application in Arabic.\r
- </li>\r
- <li>\r
- The\r
- <a href="http://example.indexdata.com/index-jquery.html"\r
- >jQuery plugin</a>\r
- version, consisting of a single line of JavaScript code.\r
- </li>\r
- <li>\r
- An application that\r
- <a href="http://example.indexdata.com/index-lowlevel.html"\r
- >uses lower-level MKWS components</a>\r
- rather than the all-in-one <tt>#mkwsResults</tt> division,\r
- allowing it to use a rather different layout.\r
- </li>\r
- <li>\r
- <a href="http://example.indexdata.com/index-mobile.html"\r
- >A version suitable for mobile devices</a>,\r
- with a responsive design that moves components around\r
- depending on the screen size.\r
- </li>\r
- <li>\r
- <a href="http://example.indexdata.com/index-popup.html"\r
- >A version that uses a jQuery popup</a>.\r
- </li>\r
- <li>\r
- An existing web-site,\r
- <a href="http://sagp.miketaylor.org.uk/"\r
- >The Self-Appointed Grammar Police</a>,\r
- which has been fitted with an MKWS searching widget.\r
- (See also the MKWS-widget customisations in\r
- <a href="http://sagp.miketaylor.org.uk/style.css"\r
- >that site's stylesheet</a>.)\r
- </li>\r
- <li>\r
- Another existing web-site,\r
- <a href="http://zthes.z3950.org/"\r
- >The Zthes specifications</a>,\r
- which has been fitted with a popup MKWS search-box.\r
- </li>\r
- </ul>\r
- <p>\r
- The set of targets can be maintained:\r
- </p>\r
- <ul>\r
- <li>\r
- Use the main\r
- <a href="http://mk2.indexdata.com/console/"\r
- >MasterKey Admin Console</a>,\r
- and act as the "MK Demo" library administrator.\r
- </li>\r
- </ul>\r
- <p>\r
- Documentation:\r
- </p>\r
- <ul>\r
- <li>\r
- The <a href="whitepaper.html">The whitepaper, including a reference section.</a>\r
- </li>\r
- <li>\r
- The <a href="README.html">README.html</a>\r
- </li>\r
- <li>\r
- The <a href="html-structure.txt"\r
- >structure of the HTML generated by the MKWS widgets</a>,\r
- which can be used to guide the customisation of its CSS styles.\r
- </li>\r
- </ul>\r
- </td>\r
- <td width="40%" align="top">\r
- <div id="mkwsSearch"></div>\r
- <div id="mkwsRecords"></div>\r
- <div id="mkwsPager"></div>\r
- </td>\r
- </tr>\r
+ <tr valign="top" height="100%">\r
+ <td width="60%" valign="top">\r
+ <div id="intro" style="background:yellow; padding:0.1em 1em"\r
+ onclick="this.style.display = 'none'">\r
+ <p>\r
+ What follows is seed content for the dictionary-lookup\r
+ demo (taken from <a href="http://en.wikipedia.org/wiki/Computer"\r
+ >the Wikipedia page for "computer"</a>).\r
+ Select any region of text on this page (for example, by\r
+ double-clicking a word) and that word will be looked up,\r
+ with the results displayed in the sidebar on the right.\r
+ </p>\r
+ <p>\r
+ Click this introduction to dismiss it.\r
+ </p>\r
+ </div>\r
+ <p>A <b>computer</b> is a general purpose device that can be <a href="http://en.wikipedia.org/wiki/Computer_program" title="Computer program">programmed</a> to carry out a set of arithmetic or logical operations. Since a sequence of operations can be readily changed, the computer can solve more than one kind of problem.</p>\r
+ <p>Conventionally, a computer consists of at least one processing element, typically a <a href="http://en.wikipedia.org/wiki/Central_processing_unit" title="Central processing unit">central processing unit</a> (CPU) and some form of <a href="http://en.wikipedia.org/wiki/Memory_(computers)" title="Memory (computers)" class="mw-redirect">memory</a>. The processing element carries out arithmetic and logic operations, and a sequencing and control unit that can change the order of operations based on stored information. Peripheral devices allow information to be retrieved from an external source, and the result of operations saved and retrieved.</p>\r
+ <p>In <a href="http://en.wikipedia.org/wiki/World_War_II" title="World War II">World War II</a>, <a href="http://en.wikipedia.org/wiki/Mechanical_computer" title="Mechanical computer">mechanical</a> <a href="http://en.wikipedia.org/wiki/Analog_computers" title="Analog computers" class="mw-redirect">analog computers</a> were used for specialized military applications. During this time the first electronic <a href="http://en.wikipedia.org/wiki/Digital_data" title="Digital data">digital</a> computers were developed. Originally they were the size of a large room, consuming as much power as several hundred modern <a href="http://en.wikipedia.org/wiki/Personal_computer" title="Personal computer">personal computers</a> (PCs).<sup id="cite_ref-1" class="reference"><a href="http://en.wikipedia.org/wiki/Computer#cite_note-1"><span>[</span>1<span>]</span></a></sup></p>\r
+ <p>Modern computers based on <a href="http://en.wikipedia.org/wiki/Integrated_circuit" title="Integrated circuit">integrated circuits</a> are millions to billions of times more capable than the early machines, and occupy a fraction of the space.<sup id="cite_ref-2" class="reference"><a href="http://en.wikipedia.org/wiki/Computer#cite_note-2"><span>[</span>2<span>]</span></a></sup> Simple computers are small enough to fit into <a href="http://en.wikipedia.org/wiki/Mobile_device" title="Mobile device">mobile devices</a>, and <a href="http://en.wikipedia.org/wiki/Mobile_computing" title="Mobile computing">mobile computers</a> can be powered by small <a href="http://en.wikipedia.org/wiki/Battery_(electricity)" title="Battery (electricity)">batteries</a>. Personal computers in their various forms are <a href="http://en.wikipedia.org/wiki/Icon" title="Icon">icons</a> of the <a href="http://en.wikipedia.org/wiki/Information_Age" title="Information Age">Information Age</a> and are what most people think of as “computers.” However, the <a href="http://en.wikipedia.org/wiki/Embedded_system" title="Embedded system">embedded computers</a> found in many devices from <a href="http://en.wikipedia.org/wiki/Digital_audio_player" title="Digital audio player" class="mw-redirect">MP3 players</a> to <a href="http://en.wikipedia.org/wiki/Fighter_aircraft" title="Fighter aircraft">fighter aircraft</a> and from toys to <a href="http://en.wikipedia.org/wiki/Industrial_robot" title="Industrial robot">industrial robots</a> are the most numerous.</p>\r
+ </td>\r
+ <td width="40%" align="top">\r
+ <div class="mkws-search"></div>\r
+ <div class="mkws-reference"></div>\r
+ </td>\r
+ </tr>\r
</table>\r
<script type="text/javascript">\r
- $("#mkwsSearch").hide();\r
- $("#mkwsPager").hide();\r
+ $(".mkws-search").hide();\r
+ $(".mkws-reference").hide();\r
\r
document.onclick = clickfunc;\r
var selectedtext="";\r
var clicking = false;\r
function clickfunc(e) {\r
+ // may not work on older Browsers, as IE8\r
var sel = window.getSelection();\r
//console.log("click: " + sel + " clicking=" + clicking );\r
if ( sel != "" && ! clicking ) {\r
clicking = true;\r
- $("input#mkwsQuery").val(sel);\r
+ $(".mkws-reference").show();\r
+ $("input.mkws-query").val(sel);\r
//console.log("click: Set value " + sel + " clicking=" + clicking );\r
- $("input#mkwsButton").trigger("click");\r
+ $("input.mkws-button").trigger("click");\r
clicking = false;\r
}\r
}\r
projects / mkws-moved-to-github.git / blobdiff