New Suggestion module
diff --git a/lib/Korap.pm b/lib/Korap.pm
index b10157b..0710149 100644
--- a/lib/Korap.pm
+++ b/lib/Korap.pm
@@ -6,6 +6,7 @@
# Start dev with
# morbo -w lib -w templates -w public/sass -w public/js -w public/css script/korap
+# morbo -m test -w lib -w templates -w public/sass -w public/js -w public/css script/korap
# Start the application and register all routes and plugins
sub startup {
diff --git a/public/js/hint.js b/public/js/hint.js
index 80c7d25..eed45f3 100644
--- a/public/js/hint.js
+++ b/public/js/hint.js
@@ -1,248 +1,813 @@
-/*
-TODO:
- - Limit the size to a certain number of elements
- - addEventListener("click", ... , false);
- - addEventListener("paste", ... , false);
- - Make this a general purpose hint-System with left-context-suport
- - Die Funktion, wann was angezeigt werden soll, sollte extern
- definiert sein (der Kontext / changed)
- - Die Werteliste sollte weitere Attribute enthalten, wie title und class
-*/
+"use strict";
-var Hint = function (param) {
- var foundryRegex = new RegExp("(?:^|[^a-zA-Z0-9])([-a-zA-Z0-9]+?)\/(?:([^=]+?)=)?$");
+// Don't let events bubble up
+Event.prototype.halt = function () {
+ this.stopPropagation();
+ this.preventDefault();
+};
- var search = document.getElementById(param["ref"]);
- var qlField = document.getElementById(param["qlRef"]);
- var mirror = document.createElement("div");
- var hint = document.createElement("ul");
- var hintSize = param["hintSize"] ? param["hintSize"] : 10;
- var hints = param["hints"];
- var that = this;
- var ql;
+// http://www.nlpado.de/~sebastian/software/ner_german.shtml
+// http://www.cnts.ua.ac.be/conll2003/ner/
+var namedEntities = [
+ ["I-LOC", "I-LOC", "Location"],
+ ["I-MISC", "I-MISC", "Miscellaneous"],
+ ["I-ORG", "I-ORG", "Organization"],
+ ["I-PER", "I-PER", "Person"]
+];
- // Build the mirror element
- // <div id="searchMirror"><span></span><ul></ul></div>
- mirror.setAttribute("id", "searchMirror");
- mirror.appendChild(document.createElement("span"));
- mirror.appendChild(hint);
- document.getElementsByTagName("body")[0].appendChild(mirror);
- // Default active state
- this.active = -2;
+// http://www.ids-mannheim.de/cosmas2/projekt/referenz/stts/morph.html
+// http://nachhalt.sfb632.uni-potsdam.de/owl-docu/stts.html
+var sttsArray = [
+ // "$.", "$(", "$,"
+ ["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"],
+ ["VAINF","VAINF", "Auxiliary Infinite Verb"],
+ ["VAIMP","VAIMP", "Auxiliary Finite Imperative 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"]
+];
- // Show hint table
- this.show = function (topic) {
- if (!hints[topic])
- return;
- this.hide();
- this.active = -1;
- this.list(hints[topic]);
- var searchRight = search.getBoundingClientRect().right;
- var infoRight = hint.getBoundingClientRect().right;
- if (infoRight > searchRight) {
- hint.style.marginLeft = '-' + (infoRight - searchRight) + 'px';
- };
- hint.style.opacity = 1;
- };
+var mateSttsArray = sttsArray.slice(0);
+mateSttsArray.push(
+ ["<root-POS>","<root-POS>","Root Part of Speech"]
+);
- // Initialize the mirror element
- function init () {
- // Copy input style
- var searchRect = search.getBoundingClientRect();
- var searchStyle = window.getComputedStyle(search, null);
- with (mirror.style) {
- left = searchRect.left + "px";
- top = searchRect.bottom + "px";
- borderLeftColor = "transparent";
- paddingLeft = searchStyle.getPropertyValue("padding-left");
- marginLeft = searchStyle.getPropertyValue("margin-left");
- borderLeftWidth = searchStyle.getPropertyValue("border-left-width");
- borderLeftStyle = searchStyle.getPropertyValue("border-left-style");
- fontSize = searchStyle.getPropertyValue("font-size");
- fontFamily = searchStyle.getPropertyValue("font-family");
+var hintArray = {
+ "-" : [
+ ["Connexor", "cnx/"],
+ ["CoreNLP", "corenlp/"],
+ ["Mate", "mate/"],
+ ["OpenNLP", "opennlp/"],
+ ["TreeTagger", "tt/"],
+ ["Xerox Parser", "xip/"]
+ ],
+ "corenlp/" : [
+ ["Named Entity", "ne=" , "Combined"],
+ ["Named Entity", "ne_dewac_175m_600=" , "ne_dewac_175m_600"],
+ ["Named Entity", "ne_hgc_175m_600=", "ne_hgc_175m_600"]
+ ],
+ "corenlp/ne=" : namedEntities,
+ "corenlp/ne_dewac_175m_600=" : namedEntities,
+ "corenlp/ne_hgc_175m_600=" : namedEntities,
+ "cnx/" : [
+ ["Constituency", "c="],
+ ["Lemma", "l="],
+ ["Morphology", "m="],
+ ["Part-of-Speech", "p="],
+ ["Syntax", "syn="]
+ ],
+ "cnx/c=" : [
+ ["np", "np", "Nominal Phrase"]
+ ],
+ // http://www.ids-mannheim.de/cosmas2/projekt/referenz/connexor/morph.html
+ "cnx/m=" : [
+ ["Abbr","Abbr", "Nouns: Abbreviation"],
+ ["CMP","CMP", "Adjective: Comparative"],
+ ["IMP", "IMP", "Mood: Imperative"],
+ ["IND", "IND", "Mood: Indicative"],
+ ["INF", "INF", "Infinitive"],
+ ["ORD","ORD", "Numeral: Ordinal"],
+ ["PAST", "PAST", "Tense: past"],
+ ["PCP", "PCP", "Participle"],
+ ["PERF", "PERF", "Perfective Participle"],
+ ["PL","PL", "Nouns: Plural"],
+ ["PRES", "PRES", "Tense: present"],
+ ["PROG", "PROG", "Progressive Participle"],
+ ["Prop","Prop", "Nouns: Proper Noun"],
+ ["SUB", "SUB", "Mood: Subjunctive"],
+ ["SUP","SUP", "Adjective: Superlative"]
+ ],
+ // http://www.ids-mannheim.de/cosmas2/projekt/referenz/connexor/morph.html
+ "cnx/p=" : [
+ ["A", "A", "Adjective"],
+ ["ADV", "ADV", "Adverb"],
+ ["CC", "CC", "Coordination Marker"],
+ ["CS", "CS", "Clause Marker"],
+ ["DET", "DET", "Determiner"],
+ ["INTERJ", "INTERJ", "Interjection"],
+ ["N", "N", "Noun"],
+ ["NUM", "NUM", "Numeral"],
+ ["PREP", "PREP", "Preposition"],
+ ["PRON", "PRON", "Pro-Nominal"],
+ ["V", "V", "Verb"]
+ ],
+ // http://www.ids-mannheim.de/cosmas2/projekt/referenz/connexor/syntax.html
+ "cnx/syn=" : [
+ ["@ADVL", "@ADVL", "Adverbial Head"],
+ ["@AUX", "@AUX", "Auxiliary Verb"],
+ ["@CC", "@CC", "Coordination"]
+ ["@MAIN", "@MAIN", "Main Verb"],
+ ["@NH", "@NH", "Nominal Head"],
+ ["@POSTMOD", "@POSTMOD", "Postmodifier"],
+ ["@PREMARK", "@PREMARK", "Preposed Marker"],
+ ["@PREMOD", "@POSTMOD", "Premodifier"]
+ ],
+ "opennlp/" : [
+ ["Part-of-Speech", "p="]
+ ],
+ "opennlp/p=" : sttsArray,
+ "xip/" : [
+ ["Constituency", "c="],
+ // Inactive: ["Dependency", "d="],
+ ["Lemma", "l="],
+ ["Part-of-Speech", "p="],
+ ],
+ // "xip/c=" : [],
+ // Inactive: "xip/d=" : [],
+ // "xip/p=" : [],
+ "tt/" : [
+ ["Lemma", "l="],
+ ["Part-of-Speech", "p="]
+ ],
+ "tt/p=" : sttsArray,
+ "mate/" : [
+ // Inactive: "d" : ["d=", "Dependency"],
+ ["Lemma", "l="],
+ ["Morphology", "m="],
+ ["Part-of-Speech", "p="]
+ ],
+ // Inactive: mate/d=
+ "mate/p=" : mateSttsArray,
+ "mate/m=" : [
+ ["Case", "case:"],
+ ["Degree", "degree:"],
+ ["Gender", "gender:"],
+ ["Mood", "mood:"],
+ ["Number", "number:"],
+ ["Person", "person:"],
+ ["Tense","tense:"],
+ ["No type", "<no-type>"]
+ ],
+ "mate/m=case:" : [
+ ["acc", "acc", "Accusative"],
+ ["dat","dat", "Dative"],
+ ["gen", "gen","Genitive"],
+ ["nom","nom", "Nominative"],
+ ["*","*", "Undefined"]
+ ],
+ "mate/m=degree:" : [
+ ["comp","comp", "Comparative"],
+ ["pos","pos", "Positive"],
+ ["sup","sup", "Superative"]
+ ],
+ "mate/m=gender:" : [
+ ["fem", "fem", "Feminium"],
+ ["masc", "masc", "Masculinum"],
+ ["neut","neut", "Neuter"],
+ ["*","*","Undefined"]
+ ],
+ "mate/m=mood:" : [
+ ["imp","imp", "Imperative"],
+ ["ind","ind", "Indicative"],
+ ["subj","subj", "Subjunctive"]
+ ],
+ "mate/m=number:" : [
+ ["pl","pl","Plural"],
+ ["sg","sg","Singular"],
+ ["*","*","Undefined"]
+ ],
+ "mate/m=person:" : [
+ ["1","1", "First Person"],
+ ["2","2", "Second Person"],
+ ["3","3", "Third Person"]
+ ],
+ "mate/m=tense:" : [
+ ["past","past", "Past"],
+ ["pres","pres", "Present"]
+ ]
+};
+
+
+/**
+ * Analyze strings for prefixes
+ */
+var PrefixAnalyzer = {
+ _regex : new RegExp(
+ "(?:^|[^a-zA-Z0-9])" + // Anchor
+ "((?:[-a-zA-Z0-9]+?)\/" + // Foundry
+ "(?:" +
+ "(?:[^=:]+?)=" + // Layer
+ "(?:(?:[^:]+?):)?" + // Key
+ ")?" +
+ ")$"),
+ analyze : function (text) {
+ if (!this._regex.exec(text))
+ return undefined;
+ return RegExp.$1
+ }
+};
+
+/**
+ * Event handling after a key pressed
+ */
+function updateKey (that, e) {
+ var menu = that.menu();
+ switch (e.key) {
+ case 'Esc':
+ // Hide menu
+ menu.hide();
+ break;
+ case 'Down':
+ e.halt(); // No event propagation
+
+ // Menu is not active
+ if (!menu.active) {
+ that.popUp()
+ }
+ // Menu is active
+ else {
+ that.removePrefix();
+ menu.next();
};
- qlSelect();
- };
+ break;
+ case "Up":
+ if (!menu.active)
+ break;
+ e.halt(); // No event propagation
+ that.removePrefix();
+ menu.prev();
+ break;
+ case "Enter":
+ if (!menu.active)
+ break;
+ e.halt(); // No event propagation
+ that.insertText(menu.getActiveItem().getAction());
+ that.removePrefix();
- // Hide hint table
- this.hide = function () {
- if (this.active === -2)
- return;
- this.active = -2;
- hint.style.opacity = 0;
- hint.style.marginLeft = 0;
+ // Remove menu
+ menu.hide();
- // Remove all children
- var lis = hint.childNodes;
- for (var li = lis.length - 1; li >= 0; li--) {
- hint.removeChild(lis[li])
+ // Fill this with the correct value
+ // Todo: This is redundant with click function
+ var show;
+ if ((show = that.analyzeContext()) !== "-") {
+ menu.show(show);
+ menu.update(
+ e.target.getBoundingClientRect().right
+ );
};
- };
- // List elements in the hint table
- this.list = function (hintList) {
- var li, title;
- var arrayType = hintList instanceof Array;
- for (var i in hintList) {
- // Create list items
- li = document.createElement("li");
- li.setAttribute("data-action", arrayType ? hintList[i] : hintList[i][0]);
- title = document.createElement("strong");
- title.appendChild(document.createTextNode(arrayType ? hintList[i] : i));
- li.appendChild(title);
- hint.appendChild(li);
+ break;
+ default:
+ if (!menu.active)
+ break;
- // Include descriptions
- if (!arrayType && hintList[i][1]) {
- var desc = document.createElement("span");
- desc.appendChild(document.createTextNode(hintList[i][1]));
- li.appendChild(desc);
+ // key stroke is not a character
+ if (e.key.length != 1) {
+
+ // Key stroke is not a text modifying key
+ if (e.key !== 'Shift' &&
+ e.key !== 'Up' &&
+ e.key !== 'Down' &&
+ e.key !== 'Enter' &&
+ e.key !== 'Alt' &&
+ e.key !== 'AltGraph' &&
+ e.key !== 'CapsLock') {
+ that.insertPrefix();
+ menu.hide();
};
- };
- };
-
- // Choose next item in list
- this.next = function () {
- if (this.active === -2)
- return false;
-
- var lis = hint.getElementsByTagName("li");
- if (this.active === -1) {
- lis[0].setAttribute("class", "active");
- this.active = 0;
- }
- else if (this.active === lis.length - 1) {
- lis[this.active].removeAttribute("class");
- lis[0].setAttribute("class", "active");
- this.active = 0;
- }
- else {
- lis[this.active].removeAttribute("class");
- lis[++this.active].setAttribute("class", "active");
+ break;
};
- return true;
- };
+ e.halt(); // No event propagation
+
+ // Try to identify prefix
+ if (menu.skipToPrefix(e.key))
+ break;
- // Choose previous item in list
- this.previous = function () {
- if (this.active === -2)
+ // Prefix not found
+ that.insertPrefix();
+ menu.hide();
+ };
+};
+
+// new hint object
+var Hint = {
+ _search : undefined, // Return the search element
+ _mirror : undefined, // Return the mirror element
+ _menu : undefined,
+ _analyzer : undefined,
+ firstTry : true,
+ menu : function () {
+ // In case this wasn't defined yet
+ if (this._menu === undefined) {
+ this._menu = Object.create(Menu).init();
+ this._mirror.appendChild(this._menu.getElement());
+ };
+ return this._menu;
+ },
+
+ // Initialize the object
+ init : function () {
+ this._search = document.getElementById("q-field");
+ this._mirror = document.createElement("div");
+ this._mirror.setAttribute("id", "searchMirror");
+ this._mirror.appendChild(document.createElement("span"));
+ document.getElementsByTagName("body")[0].appendChild(this._mirror);
+
+ this._analyzer = Object.create(PrefixAnalyzer);
+
+ // Update positional information, in case the windows size changes
+ var that = this;
+ window.onresize = function () { that.reposition() };
+
+ // Add event listener for key pressed down
+ this._search.addEventListener(
+ "keydown",
+ function (e) {
+ updateKey(that, e)
+ },
+ false
+ );
+
+ // Reposition the mirror
+ this.reposition();
+
+ // Return object for chaining
+ return this;
+ },
+
+ // Popup method
+ popUp : function () {
+ if (this.active)
return;
- var lis = hint.getElementsByTagName("li");
- if (this.active === -1) {
- this.active = lis.length - 1;
- lis[this.active].setAttribute("class", "active");
- }
- else if (this.active === 0) {
- lis[0].removeAttribute("class");
- this.active = lis.length - 1;
- lis[this.active].setAttribute("class", "active");
- }
- else {
- lis[this.active].removeAttribute("class");
- lis[--this.active].setAttribute("class", "active");
- };
- };
+ // Reposition hint list on first try
+ if (this.firstTry)
+ this.reposition().firstTry = false;
- // Choose item from list
- this.choose = function () {
- if (this.active < 0)
- return;
+ // Update view
+ this.update();
- var action = hint.getElementsByTagName("li")[this.active].getAttribute("data-action");
+ // Fill this with the correct value
+ if (this.menu().show(this.analyzeContext()))
+ this.update(
+ this._search.getBoundingClientRect().right
+ );
+ else
+ this.hide();
- var value = search.value;
- var start = search.selectionStart;
+ this._search.focus();
+ },
+
+ // Reposition the mirror object
+ reposition : function () {
+
+ // Update style properties
+ var searchRect = this._search.getBoundingClientRect();
+ var searchStyle = window.getComputedStyle(this._search, null);
+ var mStyle = this._mirror.style;
+ mStyle.left = searchRect.left + "px";
+ mStyle.top = searchRect.bottom + "px";
+ mStyle.borderLeftColor = "transparent";
+ mStyle.height = "1px";
+ mStyle.paddingLeft = searchStyle.getPropertyValue("padding-left");
+ mStyle.marginLeft = searchStyle.getPropertyValue("margin-left");
+ mStyle.borderLeftWidth = searchStyle.getPropertyValue("border-left-width");
+ mStyle.borderLeftStyle = searchStyle.getPropertyValue("border-left-style");
+ mStyle.fontSize = searchStyle.getPropertyValue("font-size");
+ mStyle.fontFamily = searchStyle.getPropertyValue("font-family");
+ return this;
+ },
+
+ // Reposition the menu object
+ update : function () {
+ var s = this._search;
+ var start = s.selectionStart;
+ this._mirror.firstChild.textContent = s.value.substring(0, start);
+ },
+
+ analyzeContext : function () {
+ var context = this._splitInputText()[0];
+ if (context === undefined || context.length === 0)
+ return "-";
+ context = this._analyzer.analyze(context);
+ if (context === undefined || context.length === 0)
+ return "-";
+
+ return context;
+ },
+
+ _splitInputText : function () {
+ var s = this._search;
+ var value = s.value;
+ var start = s.selectionStart;
var begin = value.substring(0, start);
- var end = value.substring(start, value.length);
- search.value = begin + action + end;
- search.selectionStart = (begin + action).length
- search.selectionEnd = search.selectionStart;
+ var end = value.substring(start, value.length);
+ return new Array(begin, end);
+ },
- this.hide();
+ // Insert text at the current cursor position
+ insertText : function (text) {
+ var s = this._search;
+ var splitText = this._splitInputText();
+ s.value = splitText[0] + text + splitText[1];
+ s.selectionStart = (splitText[0] + text).length
+ s.selectionEnd = s.selectionStart;
+ this._mirror.firstChild.textContent = splitText[0] + text;
+ },
- // Check for new changes
- mirror.firstChild.textContent = begin + action;
+ // Remove stored prefix
+ removePrefix : function () {
+ this.menu()._prefix = undefined;
+ },
- if (foundryRegex.exec(begin + action))
- this.show(RegExp.$1 + (RegExp.$2 ? '/' + RegExp.$2 : ''));
-
- return true;
- };
-
- function changed (e) {
- var el = e.target;
- if (e.key === '/' || e.key === '=') {
- var start = el.selectionStart;
- mirror.firstChild.textContent = el.value.substring(0, start);
- var sub = el.value.substring(start - 128 >= 0 ? start - 128 : 0, start);
-
- if (foundryRegex.exec(sub))
- that.show(RegExp.$1 + (RegExp.$2 ? '/' + RegExp.$2 : ''));
- }
- else if (e.key === '>') {
- that.hide();
- }
- else if (ql === 'poliqarp' && (e.key === '[' || e.key === '<')) {
- mirror.firstChild.textContent = el.value.substring(0, el.selectionStart);
- that.show("-foundries");
- }
- else if (e.key !== 'Shift' &&
- e.key !== 'Up' &&
- e.key !== 'Down' &&
- e.key !== 'Enter' &&
- e.key !== 'Alt' &&
- e.key !== 'AltGraph' &&
- e.key !== 'CapsLock') {
- that.hide();
- };
- };
-
- // Select item from suggestion list
- function select (e) {
- if (that.active === -2)
+ // Insert stored prefix at current cursor position
+ insertPrefix : function () {
+ if (this.menu()._prefix === undefined)
return;
- if (e.key === 'Down') {
- e.stopPropagation();
- e.preventDefault();
- return that.next();
- }
- else if (e.key === 'Up') {
- e.stopPropagation();
- e.preventDefault();
- return that.previous();
- }
- else if (e.key === 'Enter' && that.choose()) {
- e.stopPropagation();
- e.preventDefault();
- return false;
- }
- else if (e.key !== 'Shift' &&
- e.key !== 'Alt' &&
- e.key !== 'AltGraph' &&
- e.key !== 'CapsLock') {
- that.hide();
- };
- return true;
- };
+ this.insertText(this.menu()._prefix);
+ }
+};
- function qlSelect () {
- var nodes = qlField.childNodes;
- for (var i = 0; i < nodes.length; i++) {
- if (nodes[i].selected) {
- ql = nodes[i].value;
- break;
+
+/**
+* Menu list
+*/
+var Menu = {
+ active : false,
+ _element : undefined,
+ _position : 0, // Position of menu item
+ _offset : 0, // Visual offset for chosen highlight
+ _size : 8, // Number of items to be shown
+ _items : [], // Items for menu
+ _name : undefined,
+ _prefix : undefined,
+ getElement : function () {
+ return this._element;
+ },
+ init : function () {
+ this._element = document.createElement("ul");
+
+ // Add onclick event
+ this._element.addEventListener("click", chooseHint, false);
+
+ this._element.style.opacity = 0;
+ this.active = false;
+ this._setDefaults();
+ return this;
+ },
+ update : function (searchRightPosition) {
+ var infoRightPosition = this._element.getBoundingClientRect().right;
+ if (infoRightPosition > searchRightPosition) {
+ this._element.style.marginLeft = '-' + (infoRightPosition - searchRightPosition) + 'px';
+ };
+ return this;
+ },
+ next : function () {
+ if (!this.active)
+ return;
+ this._clearView();
+ this._position++;
+
+ // In case the list is bigger than the view
+ if (this._items.length > this._size) {
+ if (this._position >= this._items.length) {
+ // Roll to top
+ this._offset = 0;
+ this._position = 0;
+ this._showItems(0);
+ }
+ else if (this._position >= (this._size + this._offset)) {
+ // Roll down
+ this._element.removeChild(this._element.firstChild);
+ this._offset++;
+ this._element.appendChild(this.getItem(this._position).getElement());
+ };
+ }
+ else if (this._position >= this._items.length) {
+ this._position = 0;
+ };
+ this._updateView();
+ },
+ prev : function () {
+ if (!this.active)
+ return;
+ this._clearView();
+ this._position--;
+
+ // In case the list is bigger than the view
+ if (this._items.length > this._size) {
+ if (this._position < 0) {
+ // roll to bottom
+ this._setToLast();
+ this._offset = (this._position - this._size) + 1;
+ this._showLastItems();
+ }
+ else if (this._position < this._offset) {
+ // roll up
+ this._element.removeChild(this._element.lastChild);
+ this._offset--;
+ this._element.insertBefore(
+ this.getItem(this._position).getElement(),
+ this._element.firstChild
+ );
+ };
+ }
+ else if (this._position < 0) {
+ this._setToLast();
+ };
+ this._updateView();
+ },
+ skipToPrefix : function (prefix) {
+ if (this._prefix === undefined)
+ this._prefix = prefix.toLocaleLowerCase();
+ else
+ this._prefix += prefix.toLocaleLowerCase();
+
+ var pos = 0;
+ var found = false;
+ var good = -1;
+ var test;
+ for (; pos < this._items.length; pos++) {
+ if ((test = this.getItem(pos).getLCName().indexOf(this._prefix)) !== -1) {
+ if (test === 0) {
+ found = true;
+ break;
+ };
+ good = pos;
};
};
+
+ // Perfect prefix
+ if (found)
+ return this.skipToPos(pos);
+ // At least infix
+ else if (good !== -1)
+ return this.skipToPos(good);
+ // No
+ return false;
+ },
+ skipToPos : function (index) {
+ if (!this.active)
+ return false;
+ if (index < 0 || index >= this._items.length)
+ return false;
+
+ this._clearView();
+ this._position = index;
+
+ if (index < this._offset || index >= (this._offset + this._size)) {
+
+ // Index is in the final frame
+ if (index >= (this._items.length - this._size)) {
+ this._offset = this._items.length - this._size;
+ this._showLastItems();
+ }
+
+ // Index is in the final frame
+ else {
+ this._offset = index;
+ this._showItems(index);
+ };
+ };
+
+ // Activate new position
+ this._updateView();
+ return true;
+ },
+ show : function (name) {
+ // The element is already given
+ if (this._name !== name) {
+
+ // Todo: store hints in hash
+
+ // Delete items
+ this._items.length = 0;
+
+ var items = hintArray[name];
+
+ // Hints not found
+ if (items === undefined)
+ return false;
+
+ var i;
+ for (i in items) {
+ var item = Object.create(MenuItem).init(items[i]);
+ this._items.push(item);
+ };
+
+ // Add classes for rolling menus
+ this.getItem(0).getElement().classList.add("no-more");
+ this.getItem(i).getElement().classList.add("no-more");
+
+ this._name = name;
+ };
+ this._showItems(0);
+ this._element.style.opacity = 1;
+ this._setDefaults();
+ this.active = true;
+ this._updateView();
+ return true;
+ },
+ hide : function () {
+ this._element.style.opacity = 0;
+ if (this.active)
+ this.getActiveItem().deactivate();
+ this._setDefaults();
+ this.active = false;
+ },
+ getActiveItem : function () {
+ return this._items[this._position];
+ },
+ getItem : function (index) {
+ return this._items[index];
+ },
+ getPrefix : function () {
+ return this._prefix;
+ },
+ _setDefaults : function () {
+ this._offset = 0;
+ this._position = 0;
+ this._prefix = undefined;
+ },
+ // Remove all visible list items
+ _deleteMenu : function () {
+ var child;
+ while (child = this._element.firstChild)
+ this._element.removeChild(child);
+ },
+ _clearView : function () {
+ var active = this.getActiveItem();
+ if (active !== undefined)
+ active.deactivate();
+ },
+ _updateView : function () {
+ var active = this.getActiveItem();
+ if (active !== undefined)
+ active.activate();
+ },
+
+ // Make all list items visible starting at a certain offset
+ _showItems : function (offset) {
+ this._deleteMenu();
+ for (var i = offset; i < this._size + offset; i++) {
+ if (i >= this._items.length)
+ break;
+ this._element.appendChild(
+ this._items[i].getElement()
+ )
+ };
+ },
+
+ // Make all final list items visible
+ _showLastItems : function () {
+ this._deleteMenu();
+ for (var i = (this._items.length - 1); i >= (this._items.length - this._size); i--) {
+ if (i < 0)
+ break;
+ if (!this._element.firstChild)
+ this._element.appendChild(this._items[i].getElement());
+ else
+ this._element.insertBefore(
+ this._items[i].getElement(),
+ this._element.firstChild
+ );
+ };
+ },
+ _setToLast : function () {
+ this._position = this._items.length - 1;
+ }
+};
+
+function chooseHint (e) {
+ var element = e.target;
+ while (element.nodeName == "STRONG" || element.nodeName == "SPAN") {
+ element = element.parentNode;
};
- // Initialize style
- init();
- window.onresize = init;
- search.addEventListener("keyup", changed, false);
- search.addEventListener("keydown", select, false);
- qlField.addEventListener("change", qlSelect, false);
+ if (element === undefined || element.nodeName != "LI")
+ return;
+
+ var action = element.getAttribute('data-action');
+ hint.insertText(action);
+ var menu = hint.menu();
+ menu.hide();
+
+ // Fill this with the correct value
+ var show;
+ if ((show = hint.analyzeContext()) !== "-") {
+ menu.show(show);
+ menu.update(
+ hint._search.getBoundingClientRect().right
+ );
+ };
+
+ hint._search.focus();
+};
+
+var MenuItem = {
+ _name : undefined,
+ _lcname : undefined,
+ _desc : undefined,
+ _element : undefined,
+ _action : "",
+ activate : function () {
+ this._element.classList.add("active");
+ },
+ deactivate : function () {
+ this._element.classList.remove("active");
+ },
+ // Initialize this item
+ init : function (param) {
+ this._name = param[0];
+ this._action = param[1];
+ this._lcname = this._name.toLocaleLowerCase();
+
+ if (param.length > 2) {
+ this._desc = param[2];
+ this._lcname += " " + this._desc.toLocaleLowerCase();
+ };
+
+ return this;
+ },
+
+ // Created element of this item
+ getElement : function () {
+ if (this._element !== undefined)
+ return this._element;
+
+ var li = document.createElement("li");
+
+ li.setAttribute("data-action", this._action);
+
+ var name = document.createElement("strong");
+
+ name.appendChild(document.createTextNode(this._name));
+ li.appendChild(name);
+ if (this._desc !== undefined) {
+ var desc = document.createElement("span");
+ desc.appendChild(document.createTextNode(this._desc));
+ li.appendChild(desc);
+ };
+ this._element = li;
+ return this._element;
+ },
+
+ // Name of this item
+ getName : function () {
+ return this._name;
+ },
+
+ getLCName : function () {
+ return this._lcname;
+ },
+
+ // Description of this item
+ getDesc : function () {
+ return this._desc;
+ },
+
+
+ getAction : function () {
+ return this._action;
+ }
};
diff --git a/public/sass/.sass-cache/86abc0b82ad2e06f1b202e58515c6ba54d335e00/colors.scssc b/public/sass/.sass-cache/86abc0b82ad2e06f1b202e58515c6ba54d335e00/colors.scssc
index da6a64a..afaff97 100644
--- a/public/sass/.sass-cache/86abc0b82ad2e06f1b202e58515c6ba54d335e00/colors.scssc
+++ b/public/sass/.sass-cache/86abc0b82ad2e06f1b202e58515c6ba54d335e00/colors.scssc
Binary files differ
diff --git a/public/sass/hint.scss b/public/sass/hint.scss
index 6cfc84f..7f60f87 100644
--- a/public/sass/hint.scss
+++ b/public/sass/hint.scss
@@ -2,6 +2,21 @@
@import "colors";
+#searchbar > i.show-hint {
+ z-index: 0;
+ position: absolute;
+ right: 65px;
+ top: 0;
+ font-size: 120%;
+ line-height: 120%;
+ padding: 3pt;
+ color: $dark-orange;
+ &:hover, &.active {
+ color: $light-green;
+ cursor: pointer;
+ }
+}
+
#searchMirror {
position: absolute;
margin-top: 1px;
@@ -29,17 +44,26 @@
box-shadow: $pagination-box-shadow;
opacity: 0;
padding: 0;
- padding-top: 5px;
- padding-bottom: 10px;
+ padding-bottom: 5px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
> li {
+ cursor: pointer;
list-style-type: none;
list-style-position: outside;
- padding: 3pt 10pt;
+ padding: 3px 10pt;
text-shadow: $light-shadow;
white-space: normal;
color: $light-green;
+ border: {
+ top: 5px solid transparent;
+ bottom: 5px solid transparent;
+ }
+ &:hover {
+ background-color: $dark-orange;
+ color: white;
+ text-shadow: none;
+ }
> span {
float: right;
margin-left: 30pt;
@@ -53,6 +77,18 @@
color: $dark-green;
text-shadow: none;
}
+ &:first-of-type:not(.no-more) {
+ border-top-color: $middle-grey;
+ &.active {
+ border-top-color: $dark-orange;
+ }
+ }
+ &:last-of-type:not(.no-more) {
+ border-bottom-color: $middle-grey;
+ &.active {
+ border-bottom-color: $dark-orange;
+ }
+ }
}
}
}
diff --git a/templates/layouts/default.html.ep b/templates/layouts/default.html.ep
index ac376e3..0f55866 100644
--- a/templates/layouts/default.html.ep
+++ b/templates/layouts/default.html.ep
@@ -62,6 +62,7 @@
% if (stash('test_port')) {
<button type="submit" name="action" value="inspect"><i class="fa fa-code"></i></button>
% };
+ <i onclick="hint.popUp()" class="fa fa-arrow-circle-down show-hint"></i>
</div>
<% if ($location) { %><%== $location %><% } %>
with
diff --git a/templates/partial/javascript.html.ep b/templates/partial/javascript.html.ep
index cad5ac7..3aa8eda 100644
--- a/templates/partial/javascript.html.ep
+++ b/templates/partial/javascript.html.ep
@@ -1,66 +1,7 @@
%= javascript begin
-new Hint({
- "ref" : "q-field",
- "qlRef" : "ql-field",
- "hintSize" : 10,
- "hints" : {
- "-foundries" : {
- "corenlp" : ["corenlp/", "CoreNLP"],
- "cnx" : ["cnx/", "Connexor"],
- "opennlp" : ["opennlp/", "OpenNLP"],
- "xip" : ["xip/", "Xerox"],
- "tt" : ["tt/", "TreeTagger"],
- "mate" : ["mate/", "Mate"]
- },
- "corenlp" : {
- "ne_dewac_175m_600" : ["ne_dewac_175m_600=", "Named Entity"],
- "ne_hgc_175m_600" : ["ne_hgc_175m_600=", "Named Entity"]
- },
- "corenlp/ne" : ["I-LOC","I-MISC","I-ORG","I-PER"],
- "corenlp/ne_dewac_175m_600" : ["I-LOC","I-MISC","I-ORG","I-PER"],
- "corenlp/ne_hgc_175m_600" : ["I-LOC","I-MISC","I-ORG","I-PER"],
- "cnx" : {
- "c" : ["c=", "Constituency"],
- "l" : ["l=", "Lemma"],
- "m" : ["m=", "Morpho Syntax"],
- "p" : ["p=", "Part of Speech"],
- "syn" : ["syn=", "Syntax"]
- },
- "cnx/c" : ["np"],
- "cnx/m" : ["Abbr","CMP","IMP","IND","INF","ORD","PAST","PCP","PERF","PL","PRES","PROG","Prop","SUB","SUP"],
- "cnx/p" : ["A","ADV","CC","CS","DET","INTERJ","N","NUM","PREP","PRON","V"],
- "cnx/syn" : ["@ADVL","@AUX","@CC","@MAIN","@NH","@POSTMOD","@PREMARK","@PREMOD"],
- "opennlp" : {
- "p" : ["p=", "Part of Speech"]
- },
- "opennlp/p" : ["$(","$,","$.","ADJA","ADJD","ADV","APPR","APPRART","ART","CARD","FM","KOKOM","KON","KOUI","KOUS","NE","NN","PDAT","PDS","PIAT","PIS","PPER","PPOSAT","PRELS","PRF","PROAV","PTKNEG","PTKVZ","PTKZU","PWAT","PWAV","PWS","TRUNC","VAFIN","VAINF","VAPP","VMFIN","VVFIN","VVIMP","VVINF","VVIZU","VVPP","XY"],
- "xip" : {
- "c" : ["c=", "Constituency"],
- "d" : ["d=", "Dependency"],
- "l" : ["l=", "Lemma"],
- "p" : ["p=", "Part of Speech"]
- },
- "xip/c" : ["ADJ","ADV","AP","CONJ","DET","INFC","INS","ITJ","MC","NEGAT","NOUN","NP","NPA","NUM","POSTP","PP","PREP","PRON","PTCL","PUNCT","SC","SYMBOL","TOP","TRUNC","VERB"],
- "xip/d" : ["ADJMOD","AUXIL","CONNECT","COORD","DATE","DETERM","EXPL","LOC","MODAL","NEGAT","NMOD","NMOD2","NUMMOD","OBJ","ORG","PERSON","PLINK","PRED","REFLEX","SUBJ","THEMA","TIME","TRUNC","VMAIN","VMOD","VPREF"],
- "xip/p" : ["ADJ","ADV","CONJ","DET","ITJ","NEGAT","NOUN","NUM","POSTP","PREP","PRON","PTCL","PUNCT","SYMBOL","TRUNC","VERB"],
- "tt" : {
- "l" : ["l=", "Lemma"],
- "p" : ["p=", "Part of Speech"]
- },
- "tt/p" : ["$.","ADJA","ADJD","ADV","APPO","APPR","APPRART","APZR","ART","CARD","FM","ITJ","KOKOM","KON","KOUI","KOUS","NE","NN","PDAT","PDS","PIAT","PIS","PPER","PPOSAT","PRELS","PRF","PROAV","PTKA","PTKNEG","PTKVZ","PTKZU","PWAT","PWAV","PWS","TRUNC","VAFIN","VAINF","VAPP","VMFIN","VMINF","VVFIN","VVIMP","VVINF","VVIZU","VVPP","XY"],
- "mate" : {
- "d" : ["d=", "Dependency"],
- "l" : ["l=", "Lemma"],
- "m" : ["m=", "Morpho Syntax"],
- "p" : ["p=", "Part of Speech"]
- },
- "mate/d" : ["--","AG","AMS","APP","CC","CD","CJ","CM","CP","CVC","DA","DM","EP","JU","MNR","MO","NG","NK","NMC","OA","OC","OG","OP","PAR","PD","PG","PH","PM","PNC","RC","RE","RS","SB","SBP","SVP","UC"],
- "mate/m" : ["<no-type>","case:*","case:acc","case:dat","case:gen","case:nom","degree:comp","degree:pos","degree:sup","gender:*","gender:fem","gender:masc","gender:neut","mood:imp","mood:ind","mood:subj","number:*","number:pl","number:sg","person:1","person:2","person:3","tense:past","tense:pres"],
- "mate/p" : ["$(","$,","$.","<root-POS>","ADJA","ADJD","ADV","APPO","APPR","APPRART","ART","CARD","FM","ITJ","KOKOM","KON","KOUI","KOUS","NE","NN","PDAT","PDS","PIAT","PIS","PPER","PPOSAT","PPOSS","PRELAT","PRELS","PRF","PROAV","PTKA","PTKNEG","PTKVZ","PTKZU","PWAT","PWAV","PWS","TRUNC","VAFIN","VAINF","VAPP","VMFIN","VVFIN","VVIMP","VVINF","VVIZU","VVPP","XY"]
- }}
-);
-
+// Create new hint
+var hint = Object.create(Hint).init();
function openTutorial (o) {
var tut = $("#tutorial");