New menu with a container for mutliple always available non scrollable items
Change-Id: I5c8379cc82038da4a6c0923bbf59ec8faaa1eb9f
diff --git a/dev/demo/containermenu.html b/dev/demo/containermenu.html
new file mode 100644
index 0000000..cfff976
--- /dev/null
+++ b/dev/demo/containermenu.html
@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>ContainerMenu demo</title>
+ <meta charset="utf-8" />
+
+ <!-- Load remote -->
+ <script data-main="/demo/containermenudemo.js" src="/js/lib/require.js" async="async"></script>
+ <link type="text/css" rel="stylesheet" href="/css/kalamar.css" />
+
+
+ <!-- Load local -->
+ <script data-main="containermenudemo.js" src="../js/lib/require.js" async="async"></script>
+ <link type="text/css" rel="stylesheet" href="../css/kalamar.css" />
+
+ <style type="text/css" rel="stylesheet">
+.info {
+ background-color: #ddd;
+ color: black;
+ padding: 1em;
+ font-family: mono;
+}
+body {
+ margin: 0;
+ background-color: #ddd;
+}
+ </style>
+ </head>
+ <body>
+ <div style="position: absolute; background-color: #7ba400; height: 50px; width: 100%;"></div>
+
+ <div id="menu" class="vc" style="padding-top: 80px; padding-left: 80px;"></div>
+ <div id="largemenu" style="padding-top: 0px; padding-left: 500px;"></div>
+ <div id="multisortmenu" style="padding-top: 0px; padding-left: 550px;"></div>
+
+ <span id="choose-ql" class="menu select" style="position: absolute; right: 100px; top: 90px;">
+ <select name="ql">
+ <option value="poliqarp">Poliqarp</option>
+ <option value="cosmas2">Cosmas 2</option>
+ <option value="annis" selected>Annis QL</option>
+ <option value="cql">CQL</option>
+ </select>
+ </span>
+
+
+ <main>
+ <div>
+ <div id="pagination"><a rel="prev"><span><i class="fa fa-caret-left"></i></span></a><a rel="self"><span>1</span></a><a href="/kalamar?q=der+%5Bmate/m%3Dnumber:sg%5D&ql=poliqarp&p=2"><span>2</span></a><a href="/kalamar?q=der+%5Bmate/m%3Dnumber:sg%5D&ql=poliqarp&p=3"><span>3</span></a><span><i class="fa fa-ellipsis-h"></i></span><a href="/kalamar?q=der+%5Bmate/m%3Dnumber:sg%5D&ql=poliqarp&p=52230"><span>52230</span></a><a rel="next" href="/kalamar?q=der+%5Bmate/m%3Dnumber:sg%5D&ql=poliqarp&p=2"><span><i class="fa fa-caret-right"></i></span></a></div>
+ </div>
+ </main>
+ </body>
+</html>
diff --git a/dev/demo/containermenudemo.js b/dev/demo/containermenudemo.js
new file mode 100644
index 0000000..9c81bf0
--- /dev/null
+++ b/dev/demo/containermenudemo.js
@@ -0,0 +1,225 @@
+requirejs.config({
+ baseUrl: '../js/src'
+});
+ // here alwaysmenu instead of normal menu, then + alwaysEntry
+require(['containermenu','menu/item', 'menu/prefix', 'menu/lengthField', 'selectMenu', 'hint/item', 'hint/lengthField',
+'container/container', 'container/containeritem'
+ ],
+function (containerMenuClass, itemClass, prefixClass, lengthFieldClass, selectMenuClass, hintItemClass, hintLengthField, containerClass, containerItemClass) {
+
+ /**
+ * Create own menu item class.
+ */
+ var OwnMenuItemClass = {
+ create : function (params) {
+ return Object.create(itemClass).upgradeTo(this)._init(params);
+ },
+
+ // content function
+ content : function (content) {
+ if (arguments.length === 1) {
+ this._content = content;
+ };
+ return this._content;
+ },
+
+ // enter or click
+ onclick : function () {
+ console.log(this._name);
+ },
+
+ // right arrow
+ further : function () {
+ console.log("Further: " + this._name);
+ },
+
+ // initialize item
+ _init : function (params) {
+ if (params[0] === undefined)
+ throw new Error("Missing parameters");
+
+ this._name = params[0];
+ this._content = document.createTextNode(this._name);
+ this._lcField = ' ' + this.content().textContent.toLowerCase();
+ this._i=0;
+ return this;
+ }
+ };
+
+
+ /**
+ * Create own conainerItem class.
+ */
+ var OwnContainerItemClass = {
+ create : function () {
+ var obj = containerItemClass.create()
+ .upgradeTo(this);
+ //._init();
+ obj.value="";
+ return obj;
+ },
+ add : function (letter) {
+ this.value+=letter;
+ },
+ clear : function () {
+ this.value = "";
+ },
+ further : function () {
+ this.value = this.value + this.value;
+ },
+ onclick : function () {
+ 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.
+ var ExampleItemList = new Array;
+ ExampleItemList.push(OwnContainerItemClass.create());
+ ExampleItemList.push(OwnContainerItemClass.create());
+ ExampleItemList[0].value = "Example Item 1";
+ ExampleItemList[0]._i = 3;
+ ExampleItemList[1]._i = 4;
+
+ //Own container class.
+ var OwnContainerClass = {
+ create : function (listOfContainerItems, params) {
+ console.log(containerClass);
+ return containerClass.create(listOfContainerItems, params)
+ .upgradeTo(this);
+ }
+ //Dont know what you would want to add though
+ // You could add the containerItemClass parameter here *if* you really wanted to.
+ };
+
+ /**
+ * Create own menu class.
+ */
+
+ var OwnMenu = {
+ create : function (list) {
+ const params = {
+ itemClass : OwnMenuItemClass,
+ prefixClass : prefixClass,
+ lengthFieldClass : lengthFieldClass,
+ containerClass : OwnContainerClass,
+ containerItemClass : OwnContainerItemClass
+ };
+ console.log("Am now in OwnMenu create",containerMenuClass);
+ console.log(ExampleItemList); // we learn, that it definetly has all the functions defined in alwaysmenu.js
+ var obj = containerMenuClass.create(list,params,ExampleItemList)
+ .upgradeTo(this);
+ //._init(list, params);
+ obj._firstActive = true;
+ console.log("OwnMenu Element",obj._el);
+ return obj;
+ }
+ };
+
+ var list = [
+ ["Constituency"],
+ ["Lemma"],
+ ["Morphology"],
+ ["Part-of-Speech"],
+ ["Syntax"]
+ ];
+
+ /**
+ var list = [
+ ['Titel', 'title', 'string'],
+ ['Untertitel', 'subTitle', 'string'],
+ ['Beschreibung', 'desc', 'string'],
+ ['Veröffentlichungsdatum', 'pubDate', 'date'],
+ ['Länge', 'length', 'integer'],
+ ['Autor', 'author', 'string'],
+ ['Genre', 'genre', 'string'],
+ ['corpusID', 'corpusID', 'string'],
+ ['docID', 'docID', 'string'],
+ ['textID', 'textID', 'string']
+ ];
+ */
+
+ var menu = OwnMenu.create(list);
+
+ /**
+ var largeMenu = OwnMenu.create([
+ // http://www.ids-mannheim.de/cosmas2/projekt/referenz/stts/morph.html
+ // http://nachhalt.sfb632.uni-potsdam.de/owl-docu/stts.html
+ // "$.", "$(", "$,"
+ ["ADJA","ADJA ", "Attributive Adjective"],
+ ["ADJD","ADJD ", "Predicative Adjective"],
+ ["ADV","ADV ", "Adverb"],
+ ["APPO","APPO ", "Postposition"],
+ ["APPR","APPR ", "Preposition"],
+ ["APPRART","APPRART ", "Preposition with Determiner"],
+ ["APZR","APZR ","Right Circumposition"],
+ ["ART","ART ", "Determiner"],
+ ["CARD","CARD ", "Cardinal Number"],
+ ["FM","FM ", "Foreign Material"],
+ ["ITJ","ITJ ", "Interjection"],
+ ["KOKOM","KOKOM ", "Comparison Particle"],
+ ["KON","KON ", "Coordinating Conjuncion"],
+ ["KOUI","KOUI ", "Subordinating Conjunction with 'zu'"],
+ ["KOUS","KOUS ", "Subordinating Conjunction with Sentence"],
+ ["NE","NE ", "Named Entity"],
+ ["NN","NN ", "Normal Nomina"],
+ ["PAV", "PAV ", "Pronominal Adverb"],
+ ["PDAT","PDAT ","Attributive Demonstrative Pronoun"],
+ ["PDS","PDS ", "Substitutive Demonstrative Pronoun"],
+ ["PIAT","PIAT ", "Attributive Indefinite Pronoun without Determiner"],
+ ["PIDAT","PIDAT ", "Attributive Indefinite Pronoun with Determiner"],
+ ["PIS","PIS ", "Substitutive Indefinite Pronoun"],
+ ["PPER","PPER ", "Personal Pronoun"],
+ ["PPOSAT","PPOSAT ", "Attributive Possessive Pronoun"],
+ ["PPOSS","PPOSS ", "Substitutive Possessive Pronoun"],
+ ["PRELAT","PRELAT ", "Attributive Relative Pronoun"],
+ ["PRELS","PRELS ", "Substitutive Relative Pronoun"],
+ ["PRF","PRF ", "Reflexive Pronoun"],
+ ["PROAV","PROAV ", "Pronominal Adverb"],
+ ["PTKA","PTKA ","Particle with Adjective"],
+ ["PTKANT","PTKANT ", "Answering Particle"],
+ ["PTKNEG","PTKNEG ", "Negation Particle"],
+ ["PTKVZ","PTKVZ ", "Separated Verbal Particle"],
+ ["PTKZU","PTKZU ", "'zu' Particle"],
+ ["PWAT","PWAT ", "Attributive Interrogative Pronoun"],
+ ["PWAV","PWAV ", "Adverbial Interrogative Pronoun"],
+ ["PWS","PWS ", "Substitutive Interrogative Pronoun"],
+ ["TRUNC","TRUNC ","Truncated"],
+ ["VAFIN","VAFIN ", "Auxiliary Finite Verb"],
+ ["VAIMP","VAIMP ", "Auxiliary Finite Imperative Verb"],
+ ["VAINF","VAINF ", "Auxiliary Infinite Verb"],
+ ["VAPP","VAPP ", "Auxiliary Perfect Participle"],
+ ["VMFIN","VMFIN ", "Modal Finite Verb"],
+ ["VMINF","VMINF ", "Modal Infinite Verb"],
+ ["VMPP","VMPP ", "Modal Perfect Participle"],
+ ["VVFIN","VVFIN ","Finite Verb"],
+ ["VVIMP","VVIMP ", "Finite Imperative Verb"],
+ ["VVINF","VVINF ", "Infinite Verb"],
+ ["VVIZU","VVIZU ", "Infinite Verb with 'zu'"],
+ ["VVPP","VVPP ", "Perfect Participle"],
+ ["XY", "XY ", "Non-Word"]
+ ]);
+ */
+ document.getElementById('menu').appendChild(menu.element());
+ //document.getElementById('largemenu').appendChild(largeMenu.element());
+
+ menu.limit(3).show(3);
+ menu.focus();
+
+ //largeMenu.limit(8).show(3);
+});