blob: f0dd15dd7e9a8a687f89e0355373a16d6bf3cd0a [file] [log] [blame]
var KorAP = KorAP || {};
/**
* Create scrollable drop-down menus.
*
* @author Nils Diewald
*/
(function (KorAP) {
"use strict";
// Default maximum number of menu items
KorAP.menuLimit = 8;
/**
* List of items for drop down menu (complete).
* Only a sublist of the menu is filtered (live).
* Only a sublist of the filtered menu is visible (shown).
*/
KorAP.Menu = {
/**
* Create new Menu based on the action prefix
* and a list of menu items.
*
* @this {Menu}
* @constructor
* @param {string} Context prefix
* @param {Array.<Array.<string>>} List of menu items
*/
create : function (params) {
return Object.create(KorAP.Menu)._init(params);
},
focus : function () {
this._element.focus();
},
// Initialize list
_init : function (itemClass, params) {
// this._element.addEventListener("click", chooseHint, false);
this._itemClass = itemClass;
this._element = document.createElement("ul");
this._element.style.opacity = 0;
/*
this._listener = document.createElement('input');
this._listener.setAttribute('type', 'text');
// this._listener.style.display = "none";
*/
this._element.addEventListener(
"keydown",
function (e) {
console.log('+++');
},
false
);
this.active = false;
this._items = new Array();
var i;
// Initialize item list based on parameters
for (i in params) {
var obj = itemClass.create(params[i]);
this._items.push(obj);
};
this._limit = KorAP.menuLimit;
this._position = 0; // position in the active list
this._active = -1; // active item in the item list
this._reset();
return this;
},
/**
* Get the instantiated HTML element
*/
element : function () {
return this._element;
},
/**
* Get the creator object for items
*/
itemClass : function () {
return this._itemClass;
},
/**
* Get and set numerical value for limit,
* i.e. the number of items visible.
*/
limit : function (limit) {
if (arguments.length === 1)
this._limit = limit;
return this._limit;
},
/**
* Upgrade this object to another object,
* while private data stays intact.
*
* @param {Object} An object with properties.
*/
upgradeTo : function (props) {
for (var prop in props) {
this[prop] = props[prop];
};
return this;
},
// Reset chosen item and prefix
_reset : function () {
this._offset = 0;
this._pos = 0;
this._prefix = undefined;
},
/**
* Filter the list and make it visible
*
* @param {string} Prefix for filtering the list
*/
show : function (prefix) {
this._prefix = prefix;
// Initialize the list
if (!this._initList())
return;
// show based on initial offset
this._showItems(0);
// Set the first element to active
// Todo: Or the last element chosen
this.liveItem(0).active(true);
this._position = 0;
this._active = this._list[0];
this._element.style.opacity = 1;
// Add classes for rolling menus
this._boundary(true);
},
hide : function () {
this._element.style.opacity = 0;
},
// Initialize the list
_initList : function () {
// Create a new list
if (this._list === undefined) {
this._list = [];
}
else if (this._list.length != 0) {
this._boundary(false);
this._list.length = 0;
};
// Offset is initially zero
this._offset = 0;
// There is no prefix set
if (this.prefix().length <= 0) {
for (var i = 0; i < this._items.length; i++)
this._list.push(i);
return true;
};
// There is a prefix set, so filter the list
var pos;
var paddedPrefix = " " + this.prefix();
// Iterate over all items and choose preferred matching items
// i.e. the matching happens at the word start
for (pos = 0; pos < this._items.length; pos++) {
if ((this.item(pos).lcField().indexOf(paddedPrefix)) >= 0)
this._list.push(pos);
};
// The list is empty - so lower your expectations
// Iterate over all items and choose matching items
// i.e. the matching happens anywhere in the word
if (this._list.length == 0) {
for (pos = 0; pos < this._items.length; pos++) {
if ((this.item(pos).lcField().indexOf(this.prefix())) >= 0)
this._list.push(pos);
};
};
// Filter was successful - yeah!
return this._list.length > 0 ? true : false;
},
// Set boundary for viewport
_boundary : function (bool) {
this.item(this._list[0]).noMore(bool);
this.item(this._list[this._list.length - 1]).noMore(bool);
},
/**
* Get the prefix for filtering,
* e.g. &quot;ve&quot; for &quot;verb&quot;
*/
prefix : function () {
return this._prefix || '';
},
// Append Items that should be shown
_showItems : function (offset) {
this.delete();
// Use list
var shown = 0;
var i;
for (i in this._list) {
// Don't show - it's before offset
if (shown++ < offset)
continue;
this._append(this._list[i]);
if (shown >= (this.limit() + this._offset))
break;
};
},
/**
* Delete all visible items from the menu element
*/
delete : function () {
var child;
// Iterate over all visible items
for (var i = 0; i <= this.limit(); i++) {
// there is a visible element - unhighlight!
if (child = this.shownItem(i))
child.lowlight();
};
// Remove all children
while (child = this._element.firstChild)
this._element.removeChild(child);
},
// Append item to the shown list based on index
_append : function (i) {
var item = this.item(i);
// Highlight based on prefix
if (this.prefix().length > 0)
item.highlight(this.prefix());
// Append element
this.element().appendChild(item.element());
},
// Prepend item to the shown list based on index
_prepend : function (i) {
var item = this.item(i);
// Highlight based on prefix
if (this.prefix().length > 0)
item.highlight(this.prefix());
var e = this.element();
// Append element
e.insertBefore(
item.element(),
e.firstChild
);
},
/**
* Get a specific item from the complete list
*
* @param {number} index of the list item
*/
item : function (index) {
return this._items[index]
},
/**
* Get a specific item from the filtered list
*
* @param {number} index of the list item
* in the filtered list
*/
liveItem : function (index) {
if (this._list === undefined)
if (!this._initList())
return;
return this._items[this._list[index]];
},
/**
* Get a specific item from the visible list
*
* @param {number} index of the list item
* in the visible list
*/
shownItem : function (index) {
if (index >= this.limit())
return;
return this.liveItem(this._offset + index);
},
/**
* Get the length of the full list
*/
length : function () {
return this._items.length;
},
/**
* Make the next item in the filtered menu active
*/
next : function () {
// No active element set
if (this._position == -1)
return;
// Set new live item
var oldItem = this.liveItem(this._position++);
oldItem.active(false);
var newItem = this.liveItem(this._position);
// The next element is undefined - roll to top
if (newItem === undefined) {
this._offset = 0;
this._position = 0;
newItem = this.liveItem(0);
this._showItems(0);
}
// The next element is outside the view - roll down
else if (this._position >= (this.limit() + this._offset)) {
this._removeFirst();
this._offset++;
this._append(this._list[this._position]);
};
newItem.active(true);
},
/*
* Make the previous item in the menu active
*/
prev : function () {
// No active element set
if (this._position == -1)
return;
// Set new live item
var oldItem = this.liveItem(this._position--);
oldItem.active(false);
var newItem = this.liveItem(this._position);
// The previous element is undefined - roll to bottom
if (newItem === undefined) {
this._offset = this.liveLength() - this.limit();
this._position = this.liveLength() - 1;
newItem = this.liveItem(this._position);
this._showItems(this._offset);
}
// The previous element is outside the view - roll up
else if (this._position < this._offset) {
this._removeLast();
this._offset--;
this._prepend(this._list[this._position]);
};
newItem.active(true);
},
// Remove the HTML node from the first item
_removeFirst : function () {
this.item(this._list[this._offset]).lowlight();
this._element.removeChild(this._element.firstChild);
},
// Remove the HTML node from the last item
_removeLast : function () {
this.item(this._list[this._offset + this.limit() - 1]).lowlight();
this._element.removeChild(this._element.lastChild);
},
// Length of the filtered list
liveLength : function () {
if (this._list === undefined)
this._initList();
return this._list.length;
}
};
/**
* Item in the Dropdown menu
*/
KorAP.MenuItem = {
/**
* Create a new MenuItem object.
*
* @constructor
* @this {MenuItem}
* @param {Array.<string>} An array object of name, action and
* optionally a description
*/
create : function (params) {
return Object.create(KorAP.MenuItem)._init(params);
},
/**
* Upgrade this object to another object,
* while private data stays intact.
*
* @param {Object] An object with properties.
*/
upgradeTo : function (props) {
for (var prop in props) {
this[prop] = props[prop];
};
return this;
},
content : function (content) {
if (arguments.length === 1)
this._content = document.createTextNode(content);
return this._content;
},
lcField : function () {
return this._lcField;
},
action : function (action) {
if (arguments.length === 1)
this._action = action;
return this._action;
},
/**
* Check or set if the item is active
*
* @param {boolean|null} State of activity
*/
active : function (bool) {
var cl = this.element().classList;
if (bool === undefined)
return cl.contains("active");
else if (bool)
cl.add("active");
else
cl.remove("active");
},
/**
* Check or set if the item is
* at the boundary of the menu
* list
*
* @param {boolean|null} State of activity
*/
noMore : function (bool) {
var cl = this.element().classList;
if (bool === undefined)
return cl.contains("no-more");
else if (bool)
cl.add("no-more");
else
cl.remove("no-more");
},
/**
* Get the document element of the menu item
*/
element : function () {
// already defined
if (this._element !== undefined)
return this._element;
// Create list item
var li = document.createElement("li");
// Connect action
li["action"] = this._action;
// Append template
li.appendChild(this.content());
return this._element = li;
},
/**
* Highlight parts of the item
*
* @param {string} Prefix string for highlights
*/
highlight : function (prefix) {
var children = this.element().childNodes;
for (var i = children.length -1; i >= 0; i--) {
this._highlight(children[i], prefix);
};
},
// Highlight a certain substring of the menu item
_highlight : function (elem, prefix) {
if (elem.nodeType === 3) {
var text = elem.nodeValue;
var textlc = text.toLowerCase();
var pos = textlc.indexOf(prefix);
if (pos >= 0) {
// First element
if (pos > 0) {
elem.parentNode.insertBefore(
document.createTextNode(text.substr(0, pos)),
elem
);
};
// Second element
var hl = document.createElement("mark");
hl.appendChild(
document.createTextNode(text.substr(pos, prefix.length))
);
elem.parentNode.insertBefore(hl, elem);
// Third element
var third = text.substr(pos + prefix.length);
if (third.length > 0) {
var thirdE = document.createTextNode(third);
elem.parentNode.insertBefore(
thirdE,
elem
);
this._highlight(thirdE, prefix);
};
var p = elem.parentNode;
p.removeChild(elem);
};
}
else {
var children = elem.childNodes;
for (var i = children.length -1; i >= 0; i--) {
this._highlight(children[i], prefix);
};
};
},
/**
* Remove highlight of the menu item
*/
lowlight : function () {
var e = this.element();
var marks = e.getElementsByTagName("mark");
for (var i = marks.length - 1; i >= 0; i--) {
// Create text node clone
var x = document.createTextNode(
marks[i].firstChild.nodeValue
);
// Replace with content
marks[i].parentNode.replaceChild(
x,
marks[i]
);
};
// Remove consecutive textnodes
e.normalize();
},
// Initialize menu item
_init : function (params) {
if (params[0] === undefined)
throw new Error("Missing parameters");
this.content(params[0]);
if (params.length === 2)
this._action = params[1];
this._lcField = ' ' + this.content().textContent.toLowerCase();
return this;
},
};
/*
KorAP._updateKey : function (e) {
var code = this._codeFromEvent(e)
};
*/
}(this.KorAP));