Use containerMenu as a base for HintMenu instead of regular menu
Change-Id: Ic1ed2e216a9c61aabf1f1cac41972b1a4e96a91a
diff --git a/dev/demo/containermenudemo.js b/dev/demo/containermenudemo.js
index e3b0f99..dfb4df3 100644
--- a/dev/demo/containermenudemo.js
+++ b/dev/demo/containermenudemo.js
@@ -24,8 +24,9 @@
},
// enter or click
- onclick : function () {
+ onclick : function (event) {
console.log(this._name);
+ event.halt();
},
// right arrow
@@ -56,6 +57,7 @@
.upgradeTo(this);
//._init();
obj.value="";
+ obj.defaultTextValue = "CI";
return obj;
},
add : function (letter) {
@@ -67,25 +69,18 @@
further : function () {
this.value = this.value + this.value;
},
+ isSelectable : function () {
+ return (this.value !== "");
+ },
+ chop : function () {
+ console.log("chop");
+ console.log(this.content(this.value));
+ },
onclick : function () {
- console.log('ContainerItem' + this.value);
+ console.log('ContainerItem ' + this.value);
console.log(this._i);
this._menu.limit(this._i);
this._menu.show();
- },
- element : function () {
- // already defined
- if (this._el !== undefined) return this._el;
-
- // Create list item
- const li = document.createElement("li");
- li.innerHTML="CI";
-
- // Connect action
- if (this["onclick"] !== undefined) {
- li["onclick"] = this.onclick.bind(this);
- };
- return this._el = li;
}
};
//List of items.
@@ -224,6 +219,8 @@
document.getElementById('menu').appendChild(menu.element());
//document.getElementById('largemenu').appendChild(largeMenu.element());
+ menu.container().addItem({ value : "Dynamically added", defaultTextValue : "dynamic", _i : 5})
+
menu.limit(3).show(3);
menu.focus();
diff --git a/dev/demo/hintdemo.js b/dev/demo/hintdemo.js
index 413625c..4f2e12d 100644
--- a/dev/demo/hintdemo.js
+++ b/dev/demo/hintdemo.js
@@ -15,6 +15,14 @@
KorAP.Hint = hintClass.create();
+ var newItem = {
+ onclick : function (e) { console.log("CI click"); console.log(this.element()); console.log("'" + this._menu.prefix() + "'" + " <-- If this returns the empty string when\
+ it should not, we know that the click event listener in container.js gets called too early and overwrites the prefix before we can read it.");},
+ chop : function () { console.log("chop"); },
+ defaultTextValue : "Text Example"
+ };
+ KorAP.Hint.menu("-").container().addItem(newItem); //must be added to a specific context menu.
+
/**
* Add query panel
*/
@@ -69,10 +77,13 @@
}
}]
});
+
+ console.log(KorAP.Hint);
});
});
function demoAlert (pos, msg) {
if (KorAP.hint !== undefined)
KorAP.Hint.alert(pos, msg);
+ console.log(KorAP.Hint);
}
diff --git a/dev/demo/querystoring.html b/dev/demo/querystoring.html
new file mode 100644
index 0000000..e1d51fd
--- /dev/null
+++ b/dev/demo/querystoring.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Hint demo</title>
+ <meta charset="utf-8" />
+ <script data-main="querystoringdemo.js" src="../js/lib/require.js" async="async"></script>
+ <link type="text/css" rel="stylesheet" href="../css/kalamar.css" />
+ </head>
+ <body>
+ <header>
+ <form id="searchform" autocomplete="off" action="/kalamar">
+ <div id="searchbar">
+ <input type="search"
+ placeholder="Find ..."
+ name="q"
+ id="q-field"
+ value="mbfhjgfghfhgfhfghfghnhvrthrjvztrhhrnvnthvft"
+ autofocus="autofocus" />
+ <button type="submit"><span>Go</span></button>
+ </div>
+ <div id="vc-view"></div>
+ </form>
+ </header>
+
+ <a onclick="demoAlert(14, 'This is a warning')">Alert at 14</a>
+ </body>
+</html>
diff --git a/dev/demo/querystoringdemo.js b/dev/demo/querystoringdemo.js
new file mode 100644
index 0000000..6991865
--- /dev/null
+++ b/dev/demo/querystoringdemo.js
@@ -0,0 +1,184 @@
+requirejs.config({
+ baseUrl: '../js/src',
+ paths : {
+ 'lib': '../lib'
+ }
+});
+
+var hint = undefined;
+
+require(['plugin/server','panel/query', 'hint','hint/foundries/cnx','lib/domReady','api'], function (pluginClass, queryPanelClass, hintClass, hintArray, domReady) {
+ KorAP.hintArray = hintArray;
+ KorAP.Hint = null;
+
+ domReady(function() {
+ KorAP.URL="http://localhost:3000"
+ //console.log(KorAP.URL=http://localhost:3003);
+
+ KorAP.Hint = hintClass.create();
+
+ KorAP.restoreMinusMenuButton = { // Whenever used is at location 0
+ defaultTextValue : "Back",
+ onclick : function (e) {
+ this._menu.hint().unReadQueries();
+ //e.halt();
+ }
+ };
+
+ KorAP.triggerDeleteModeButton = { // Whenever used is at location 1
+ defaultTextValue : "Delete Queries",
+ onclick : function (e) {
+ if (this._menu.hint()._queryReadMode === "READ") {
+ this._menu.hint()._deleteTheseQueries = [];
+ this.content("Delete Selected Queries");
+ this._menu.hint()._queryReadMode = "DELETE";
+
+
+ } else if (this._menu.hint()._queryReadMode === "DELETE") {
+ this._menu.hint()._deleteTheseQueries.forEach(function (query){
+ KorAP.API.deleteQuery(qn,console.log);
+ },undefined);
+ this._menu.hint()._deleteTheseQueries = [];
+ this._menu.hint()._queryReadMode = "READ";
+ this.content("Delete Queries");
+
+ } else {
+ //ERROR
+ console.log("What?");
+ };
+ this.menu("-").show();
+ //e.halt();
+ }
+ };
+
+ JSONListToQueryTemplates= function(JSONList) {
+ var queryItemTemplates = [];
+ JSONList.forEach(function(query){ //I need to see what this actually looks like!
+ queryItemTemplates.push([query["qname"],query["q"],query["desc"]])
+ }, undefined); //no "this" needed
+ return queryItemTemplates
+ };
+
+
+ KorAP.SaveButton = { // Whenever used is at location 0
+ onclick : function (e) {
+ var query = {}
+ query.q = "this._menu._hint._inputField._el.value";
+ query.ql = "a";
+ query.desc = "b";
+ KorAP.API.putQuery("query1",query,console.log);
+ this.menu("-").show();
+ //e.halt();
+ },
+ defaultTextValue : "Save Query"
+ };
+
+ KorAP.DisplayQueriesButton = { // Whenever used is at location 1
+ onclick : function (e) {
+ KorAP.API.getQueryList(KorAP.Hint.readQueries,console.log);
+ this.menu("-").show();
+ //e.halt();
+ },
+ defaultTextValue : "Display Stored Queries"
+ };
+
+
+ KorAP.Hint.menu("-").container().addItem(KorAP.SaveButton); //must be added to a specific context menu.
+ KorAP.Hint.menu("-").container().addItem(KorAP.DisplayQueriesButton); //must be added to a specific context menu.
+
+ KorAP.Hint.readQueries = function (JSONList) {
+ console.log(JSONList);
+ //Need to check what JSONList looks like
+ // 0: _name
+ // 1: _action (query)
+ // 2: _desc
+ var queryItemTemplates = JSONListToQueryTemplates(JSONList);
+ queryItemTemplates.push(["ExampleName","value","descr"]);
+ this.menu("-").readItems(queryItemTemplates);
+ this._queryReadMode = "READ"; //alternative: "DELETE"
+ this._deleteTheseQueries = [];
+ // add first, remove later to avoid empty lists
+ this.menu("-").container().addItem(KorAP.restoreMinusMenuButton);
+ this.menu("-").container().addItem(KorAP.triggerDeleteModeButton);
+ this.menu("-").container().removeItemByIndex(0); //Save Button
+ this.menu("-").container().removeItemByIndex(0); //Display Button
+ this.menu("-").show();
+ }.bind(KorAP.Hint);
+
+ KorAP.Hint.unReadQueries = function () {
+ KorAP.log("unread");
+ this.menu("-").readItems(KorAP.annotationHelper["-"]);
+ this._queryReadMode = "READ"; //alternative: "DELETE"
+ this._deleteTheseQueries = [];
+ // add first, remove later to avoid empty lists
+ this.menu("-").container().addItem(KorAP.SaveButton);
+ this.menu("-").container().addItem(KorAP.DisplayQueriesButton);
+ this.menu("-").container().removeItemByIndex(0); //restoreMinusMenuButton
+ this.menu("-").container().removeItemByIndex(0); //triggerDeleteModeButton
+ this.menu("-").show();
+
+ }.bind(KorAP.Hint);
+
+ /**
+ * Add query panel
+ */
+ var queryPanel = queryPanelClass.create();
+
+ // Get input field
+ var sform = document.getElementById("searchform");
+ var vcView = document.getElementById('vc-view')
+ if (sform && vcView) {
+ // The views are below the query bar
+ sform.insertBefore(queryPanel.element(),vcView);
+ KorAP.Panel = KorAP.Panel || {};
+ KorAP.Panel['query'] = queryPanel;
+ }
+
+ // Load plugin server
+ KorAP.Plugin = pluginClass.create();
+ KorAP.Plugin.register
+ // Register match plugin
+ KorAP.Plugin.register({
+ 'name' : 'Example New',
+ 'desc' : 'Some content about cats',
+ 'embed' : [{
+ 'panel' : 'query',
+ 'title' : 'Translate',
+ 'classes' : ['translate'],
+ 'onClick' : {
+ "template" : "http://localhost:3003/demo/plugin-client.html"
+ }
+ },{
+ 'panel' : 'query',
+ 'title' : 'Glemm',
+ 'classes' : ['glemm'],
+ 'onClick' : {
+ "action":"toggle",
+ "template" : "http://localhost:3003/demo/plugin-client.html"
+ }
+ }]
+ });
+
+ // Register match plugin
+ KorAP.Plugin.register({
+ 'name' : 'Glimpse',
+ 'desc' : 'Shorten all queries',
+ 'embed' : [{
+ 'panel' : 'query',
+ 'title' : 'Glimpse',
+ 'classes' : ['glimpse'],
+ 'onClick' : {
+ "action" : "toggle",
+ "template" : "http://localhost:3003/demo/plugin-client.html"
+ }
+ }]
+ });
+
+ console.log(KorAP.Hint);
+ });
+});
+
+function demoAlert (pos, msg) {
+ if (KorAP.hint !== undefined)
+ KorAP.Hint.alert(pos, msg);
+}