Nils Diewald | 2fe12e1 | 2015-03-06 16:47:06 +0000 | [diff] [blame] | 1 | /** |
| 2 | * Create scrollable drop-down menus. |
| 3 | * |
| 4 | * @author Nils Diewald |
| 5 | */ |
Nils Diewald | 2488d05 | 2015-04-09 21:46:02 +0000 | [diff] [blame] | 6 | /* |
Nils Diewald | 0e6992a | 2015-04-14 20:13:52 +0000 | [diff] [blame] | 7 | * TODO: space is not a valid prefix! |
Nils Diewald | 2488d05 | 2015-04-09 21:46:02 +0000 | [diff] [blame] | 8 | */ |
Nils Diewald | 0e6992a | 2015-04-14 20:13:52 +0000 | [diff] [blame] | 9 | define([ |
| 10 | 'menu/item', |
| 11 | 'menu/prefix', |
| 12 | 'util' |
| 13 | ], function (defaultItemClass, |
| 14 | defaultPrefixClass) { |
Nils Diewald | fda29d9 | 2015-01-22 17:28:01 +0000 | [diff] [blame] | 15 | |
Nils Diewald | 0e6992a | 2015-04-14 20:13:52 +0000 | [diff] [blame] | 16 | // Todo: This may not be necessary |
| 17 | // Default maximum number of menu items |
| 18 | var menuLimit = 8; |
| 19 | |
| 20 | function _codeFromEvent (e) { |
| 21 | if (e.charCode && (e.keyCode == 0)) |
| 22 | return e.charCode |
| 23 | return e.keyCode; |
Nils Diewald | 59c02fc | 2015-03-07 01:29:09 +0000 | [diff] [blame] | 24 | }; |
| 25 | |
Nils Diewald | 86dad5b | 2015-01-28 15:09:07 +0000 | [diff] [blame] | 26 | |
| 27 | /** |
| 28 | * List of items for drop down menu (complete). |
| 29 | * Only a sublist of the menu is filtered (live). |
| 30 | * Only a sublist of the filtered menu is visible (shown). |
| 31 | */ |
Nils Diewald | 0e6992a | 2015-04-14 20:13:52 +0000 | [diff] [blame] | 32 | return { |
Nils Diewald | 86dad5b | 2015-01-28 15:09:07 +0000 | [diff] [blame] | 33 | /** |
| 34 | * Create new Menu based on the action prefix |
| 35 | * and a list of menu items. |
| 36 | * |
| 37 | * @this {Menu} |
| 38 | * @constructor |
| 39 | * @param {string} Context prefix |
| 40 | * @param {Array.<Array.<string>>} List of menu items |
| 41 | */ |
| 42 | create : function (params) { |
Nils Diewald | 0e6992a | 2015-04-14 20:13:52 +0000 | [diff] [blame] | 43 | return Object.create(this)._init(params); |
Nils Diewald | 86dad5b | 2015-01-28 15:09:07 +0000 | [diff] [blame] | 44 | }, |
| 45 | |
Nils Diewald | 6e43ffd | 2015-03-25 18:55:39 +0000 | [diff] [blame] | 46 | /** |
| 47 | * Destroy this menu |
| 48 | * (in case you don't trust the |
| 49 | * mark and sweep GC)! |
| 50 | */ |
| 51 | destroy : function () { |
| 52 | if (this._element != undefined) |
| 53 | delete this._element["menu"]; |
| 54 | |
| 55 | for (var i = 0; i < this._items.length; i++) { |
| 56 | delete this._items[i]["_menu"]; |
| 57 | }; |
Nils Diewald | 5c5a747 | 2015-04-02 22:13:38 +0000 | [diff] [blame] | 58 | delete this._prefix['_menu']; |
Nils Diewald | 6e43ffd | 2015-03-25 18:55:39 +0000 | [diff] [blame] | 59 | }, |
| 60 | |
Nils Diewald | 2fe12e1 | 2015-03-06 16:47:06 +0000 | [diff] [blame] | 61 | focus : function () { |
| 62 | this._element.focus(); |
| 63 | }, |
| 64 | |
Nils Diewald | 59c02fc | 2015-03-07 01:29:09 +0000 | [diff] [blame] | 65 | // mouse wheel treatment |
| 66 | _mousewheel : function (e) { |
| 67 | var delta = 0; |
Nils Diewald | 5975d70 | 2015-03-09 17:45:42 +0000 | [diff] [blame] | 68 | |
| 69 | delta = e.deltaY / 120; |
| 70 | if (delta > 0) |
Nils Diewald | 59c02fc | 2015-03-07 01:29:09 +0000 | [diff] [blame] | 71 | this.next(); |
Nils Diewald | 5975d70 | 2015-03-09 17:45:42 +0000 | [diff] [blame] | 72 | else if (delta < 0) |
Nils Diewald | 59c02fc | 2015-03-07 01:29:09 +0000 | [diff] [blame] | 73 | this.prev(); |
Nils Diewald | 59c02fc | 2015-03-07 01:29:09 +0000 | [diff] [blame] | 74 | e.halt(); |
| 75 | }, |
| 76 | |
| 77 | // Arrow key and prefix treatment |
Nils Diewald | 5975d70 | 2015-03-09 17:45:42 +0000 | [diff] [blame] | 78 | _keypress : function (e) { |
Nils Diewald | 59c02fc | 2015-03-07 01:29:09 +0000 | [diff] [blame] | 79 | var code = _codeFromEvent(e); |
| 80 | |
Nils Diewald | 59c02fc | 2015-03-07 01:29:09 +0000 | [diff] [blame] | 81 | switch (code) { |
| 82 | case 27: // 'Esc' |
| 83 | e.halt(); |
| 84 | this.hide(); |
| 85 | break; |
Nils Diewald | 5975d70 | 2015-03-09 17:45:42 +0000 | [diff] [blame] | 86 | |
Nils Diewald | 59c02fc | 2015-03-07 01:29:09 +0000 | [diff] [blame] | 87 | case 38: // 'Up' |
| 88 | e.halt(); |
| 89 | this.prev(); |
| 90 | break; |
Nils Diewald | 5975d70 | 2015-03-09 17:45:42 +0000 | [diff] [blame] | 91 | case 33: // 'Page up' |
Nils Diewald | 59c02fc | 2015-03-07 01:29:09 +0000 | [diff] [blame] | 92 | e.halt(); |
Nils Diewald | 5975d70 | 2015-03-09 17:45:42 +0000 | [diff] [blame] | 93 | this.prev(); |
| 94 | break; |
| 95 | case 40: // 'Down' |
| 96 | e.halt(); |
| 97 | this.next(); |
| 98 | break; |
| 99 | case 34: // 'Page down' |
| 100 | e.halt(); |
| 101 | this.next(); |
| 102 | break; |
| 103 | case 39: // 'Right' |
Nils Diewald | e8518f8 | 2015-03-18 22:41:49 +0000 | [diff] [blame] | 104 | if (this._prefix.active()) |
| 105 | break; |
| 106 | |
Nils Diewald | 5975d70 | 2015-03-09 17:45:42 +0000 | [diff] [blame] | 107 | var item = this.liveItem(this._position); |
| 108 | if (item["further"] !== undefined) { |
| 109 | item["further"].bind(item).apply(); |
| 110 | e.halt(); |
| 111 | }; |
| 112 | break; |
| 113 | case 13: // 'Enter' |
| 114 | |
| 115 | // Click on prefix |
| 116 | if (this._prefix.active()) |
Nils Diewald | 6e43ffd | 2015-03-25 18:55:39 +0000 | [diff] [blame] | 117 | this._prefix.onclick(e); |
Nils Diewald | 5975d70 | 2015-03-09 17:45:42 +0000 | [diff] [blame] | 118 | |
| 119 | // Click on item |
| 120 | else |
Nils Diewald | 6e43ffd | 2015-03-25 18:55:39 +0000 | [diff] [blame] | 121 | this.liveItem(this._position).onclick(e); |
Nils Diewald | 5975d70 | 2015-03-09 17:45:42 +0000 | [diff] [blame] | 122 | e.halt(); |
Nils Diewald | 59c02fc | 2015-03-07 01:29:09 +0000 | [diff] [blame] | 123 | break; |
| 124 | case 8: // 'Backspace' |
Nils Diewald | 5975d70 | 2015-03-09 17:45:42 +0000 | [diff] [blame] | 125 | this._prefix.backspace(); |
| 126 | this.show(); |
Nils Diewald | 59c02fc | 2015-03-07 01:29:09 +0000 | [diff] [blame] | 127 | e.halt(); |
| 128 | break; |
| 129 | default: |
Nils Diewald | 5975d70 | 2015-03-09 17:45:42 +0000 | [diff] [blame] | 130 | if (e.key !== undefined && |
| 131 | e.key.length != 1) |
Nils Diewald | 59c02fc | 2015-03-07 01:29:09 +0000 | [diff] [blame] | 132 | return; |
| 133 | |
| 134 | // Add prefix |
Nils Diewald | 5975d70 | 2015-03-09 17:45:42 +0000 | [diff] [blame] | 135 | this._prefix.add(e.key.toLowerCase()); |
| 136 | |
| 137 | if (!this.show()) { |
| 138 | this.prefix('').show(); |
| 139 | }; |
Nils Diewald | 59c02fc | 2015-03-07 01:29:09 +0000 | [diff] [blame] | 140 | }; |
| 141 | }, |
| 142 | |
Nils Diewald | 2fe12e1 | 2015-03-06 16:47:06 +0000 | [diff] [blame] | 143 | // Initialize list |
Nils Diewald | 5975d70 | 2015-03-09 17:45:42 +0000 | [diff] [blame] | 144 | _init : function (itemClass, prefixClass, params) { |
Nils Diewald | 59c02fc | 2015-03-07 01:29:09 +0000 | [diff] [blame] | 145 | var that = this; |
Nils Diewald | 0e6992a | 2015-04-14 20:13:52 +0000 | [diff] [blame] | 146 | this._itemClass = itemClass || defaultItemClass; |
Nils Diewald | 5975d70 | 2015-03-09 17:45:42 +0000 | [diff] [blame] | 147 | |
| 148 | if (prefixClass !== undefined) |
| 149 | this._prefix = prefixClass.create(); |
| 150 | else |
Nils Diewald | 0e6992a | 2015-04-14 20:13:52 +0000 | [diff] [blame] | 151 | this._prefix = defaultPrefixClass.create(); |
Nils Diewald | 5975d70 | 2015-03-09 17:45:42 +0000 | [diff] [blame] | 152 | |
Nils Diewald | 5c5a747 | 2015-04-02 22:13:38 +0000 | [diff] [blame] | 153 | this._prefix._menu = this; |
| 154 | |
Nils Diewald | 5975d70 | 2015-03-09 17:45:42 +0000 | [diff] [blame] | 155 | var e = document.createElement("ul"); |
Nils Diewald | 59c02fc | 2015-03-07 01:29:09 +0000 | [diff] [blame] | 156 | e.style.opacity = 0; |
| 157 | e.style.outline = 0; |
| 158 | e.setAttribute('tabindex', 0); |
Nils Diewald | 5c5a747 | 2015-04-02 22:13:38 +0000 | [diff] [blame] | 159 | e.classList.add('menu'); |
Nils Diewald | 5814133 | 2015-04-07 16:18:45 +0000 | [diff] [blame] | 160 | e.classList.add('roll'); |
Nils Diewald | 5975d70 | 2015-03-09 17:45:42 +0000 | [diff] [blame] | 161 | e.appendChild(this._prefix.element()); |
Nils Diewald | 86dad5b | 2015-01-28 15:09:07 +0000 | [diff] [blame] | 162 | |
Nils Diewald | 6e43ffd | 2015-03-25 18:55:39 +0000 | [diff] [blame] | 163 | // This has to be cleaned up later on |
| 164 | e["menu"] = this; |
| 165 | |
Nils Diewald | 59c02fc | 2015-03-07 01:29:09 +0000 | [diff] [blame] | 166 | // Arrow keys |
| 167 | e.addEventListener( |
Nils Diewald | 5975d70 | 2015-03-09 17:45:42 +0000 | [diff] [blame] | 168 | 'keypress', |
Nils Diewald | 59c02fc | 2015-03-07 01:29:09 +0000 | [diff] [blame] | 169 | function (ev) { |
Nils Diewald | 5975d70 | 2015-03-09 17:45:42 +0000 | [diff] [blame] | 170 | that._keypress(ev) |
Nils Diewald | 59c02fc | 2015-03-07 01:29:09 +0000 | [diff] [blame] | 171 | }, |
| 172 | false |
| 173 | ); |
| 174 | |
| 175 | // Mousewheel |
| 176 | e.addEventListener( |
Nils Diewald | 5975d70 | 2015-03-09 17:45:42 +0000 | [diff] [blame] | 177 | 'wheel', |
Nils Diewald | 59c02fc | 2015-03-07 01:29:09 +0000 | [diff] [blame] | 178 | function (ev) { |
| 179 | that._mousewheel(ev) |
Nils Diewald | 2fe12e1 | 2015-03-06 16:47:06 +0000 | [diff] [blame] | 180 | }, |
| 181 | false |
| 182 | ); |
| 183 | |
Nils Diewald | 5975d70 | 2015-03-09 17:45:42 +0000 | [diff] [blame] | 184 | this._element = e; |
Nils Diewald | 86dad5b | 2015-01-28 15:09:07 +0000 | [diff] [blame] | 185 | this.active = false; |
| 186 | this._items = new Array(); |
| 187 | var i; |
Nils Diewald | 2fe12e1 | 2015-03-06 16:47:06 +0000 | [diff] [blame] | 188 | |
| 189 | // Initialize item list based on parameters |
Nils Diewald | 86dad5b | 2015-01-28 15:09:07 +0000 | [diff] [blame] | 190 | for (i in params) { |
Nils Diewald | 0e6992a | 2015-04-14 20:13:52 +0000 | [diff] [blame] | 191 | var obj = this._itemClass.create(params[i]); |
Nils Diewald | 6e43ffd | 2015-03-25 18:55:39 +0000 | [diff] [blame] | 192 | |
| 193 | // This may become circular |
| 194 | obj["_menu"] = this; |
| 195 | |
Nils Diewald | 2fe12e1 | 2015-03-06 16:47:06 +0000 | [diff] [blame] | 196 | this._items.push(obj); |
Nils Diewald | 86dad5b | 2015-01-28 15:09:07 +0000 | [diff] [blame] | 197 | }; |
Nils Diewald | 0e6992a | 2015-04-14 20:13:52 +0000 | [diff] [blame] | 198 | this._limit = menuLimit; |
Nils Diewald | 86dad5b | 2015-01-28 15:09:07 +0000 | [diff] [blame] | 199 | this._position = 0; // position in the active list |
| 200 | this._active = -1; // active item in the item list |
Nils Diewald | 86dad5b | 2015-01-28 15:09:07 +0000 | [diff] [blame] | 201 | this._reset(); |
| 202 | return this; |
| 203 | }, |
| 204 | |
Nils Diewald | 2fe12e1 | 2015-03-06 16:47:06 +0000 | [diff] [blame] | 205 | /** |
| 206 | * Get the instantiated HTML element |
| 207 | */ |
Nils Diewald | 86dad5b | 2015-01-28 15:09:07 +0000 | [diff] [blame] | 208 | element : function () { |
| 209 | return this._element; |
| 210 | }, |
| 211 | |
Nils Diewald | 2fe12e1 | 2015-03-06 16:47:06 +0000 | [diff] [blame] | 212 | /** |
| 213 | * Get the creator object for items |
| 214 | */ |
Nils Diewald | 86dad5b | 2015-01-28 15:09:07 +0000 | [diff] [blame] | 215 | itemClass : function () { |
| 216 | return this._itemClass; |
| 217 | }, |
| 218 | |
| 219 | /** |
Nils Diewald | 2fe12e1 | 2015-03-06 16:47:06 +0000 | [diff] [blame] | 220 | * Get and set numerical value for limit, |
| 221 | * i.e. the number of items visible. |
Nils Diewald | 86dad5b | 2015-01-28 15:09:07 +0000 | [diff] [blame] | 222 | */ |
| 223 | limit : function (limit) { |
Nils Diewald | 5975d70 | 2015-03-09 17:45:42 +0000 | [diff] [blame] | 224 | if (arguments.length === 1) { |
Nils Diewald | 86dad5b | 2015-01-28 15:09:07 +0000 | [diff] [blame] | 225 | this._limit = limit; |
Nils Diewald | 5975d70 | 2015-03-09 17:45:42 +0000 | [diff] [blame] | 226 | return this; |
| 227 | }; |
Nils Diewald | 86dad5b | 2015-01-28 15:09:07 +0000 | [diff] [blame] | 228 | return this._limit; |
| 229 | }, |
| 230 | |
| 231 | /** |
| 232 | * Upgrade this object to another object, |
| 233 | * while private data stays intact. |
| 234 | * |
Nils Diewald | 2fe12e1 | 2015-03-06 16:47:06 +0000 | [diff] [blame] | 235 | * @param {Object} An object with properties. |
Nils Diewald | 86dad5b | 2015-01-28 15:09:07 +0000 | [diff] [blame] | 236 | */ |
| 237 | upgradeTo : function (props) { |
| 238 | for (var prop in props) { |
| 239 | this[prop] = props[prop]; |
| 240 | }; |
| 241 | return this; |
| 242 | }, |
| 243 | |
Nils Diewald | 2fe12e1 | 2015-03-06 16:47:06 +0000 | [diff] [blame] | 244 | // Reset chosen item and prefix |
Nils Diewald | 86dad5b | 2015-01-28 15:09:07 +0000 | [diff] [blame] | 245 | _reset : function () { |
| 246 | this._offset = 0; |
| 247 | this._pos = 0; |
Nils Diewald | 5975d70 | 2015-03-09 17:45:42 +0000 | [diff] [blame] | 248 | this._prefix.value(''); |
Nils Diewald | 86dad5b | 2015-01-28 15:09:07 +0000 | [diff] [blame] | 249 | }, |
| 250 | |
| 251 | /** |
| 252 | * Filter the list and make it visible |
| 253 | * |
| 254 | * @param {string} Prefix for filtering the list |
| 255 | */ |
Nils Diewald | 5975d70 | 2015-03-09 17:45:42 +0000 | [diff] [blame] | 256 | show : function () { |
Nils Diewald | e8518f8 | 2015-03-18 22:41:49 +0000 | [diff] [blame] | 257 | |
Nils Diewald | 86dad5b | 2015-01-28 15:09:07 +0000 | [diff] [blame] | 258 | // Initialize the list |
| 259 | if (!this._initList()) |
Nils Diewald | 59c02fc | 2015-03-07 01:29:09 +0000 | [diff] [blame] | 260 | return false; |
Nils Diewald | 86dad5b | 2015-01-28 15:09:07 +0000 | [diff] [blame] | 261 | |
Nils Diewald | 2fe12e1 | 2015-03-06 16:47:06 +0000 | [diff] [blame] | 262 | // show based on initial offset |
Nils Diewald | 86dad5b | 2015-01-28 15:09:07 +0000 | [diff] [blame] | 263 | this._showItems(0); |
| 264 | |
| 265 | // Set the first element to active |
Nils Diewald | 2fe12e1 | 2015-03-06 16:47:06 +0000 | [diff] [blame] | 266 | // Todo: Or the last element chosen |
Nils Diewald | 86dad5b | 2015-01-28 15:09:07 +0000 | [diff] [blame] | 267 | this.liveItem(0).active(true); |
Nils Diewald | e8518f8 | 2015-03-18 22:41:49 +0000 | [diff] [blame] | 268 | this._prefix.active(false); |
Nils Diewald | 86dad5b | 2015-01-28 15:09:07 +0000 | [diff] [blame] | 269 | |
Nils Diewald | 86dad5b | 2015-01-28 15:09:07 +0000 | [diff] [blame] | 270 | this._active = this._list[0]; |
Nils Diewald | 5975d70 | 2015-03-09 17:45:42 +0000 | [diff] [blame] | 271 | this._position = 0; |
Nils Diewald | 2fe12e1 | 2015-03-06 16:47:06 +0000 | [diff] [blame] | 272 | this._element.style.opacity = 1; |
| 273 | |
Nils Diewald | 86dad5b | 2015-01-28 15:09:07 +0000 | [diff] [blame] | 274 | // Add classes for rolling menus |
| 275 | this._boundary(true); |
Nils Diewald | 59c02fc | 2015-03-07 01:29:09 +0000 | [diff] [blame] | 276 | return true; |
Nils Diewald | 86dad5b | 2015-01-28 15:09:07 +0000 | [diff] [blame] | 277 | }, |
| 278 | |
Nils Diewald | 2fe12e1 | 2015-03-06 16:47:06 +0000 | [diff] [blame] | 279 | hide : function () { |
Nils Diewald | 59c02fc | 2015-03-07 01:29:09 +0000 | [diff] [blame] | 280 | this.active = false; |
| 281 | this.delete(); |
Nils Diewald | 2fe12e1 | 2015-03-06 16:47:06 +0000 | [diff] [blame] | 282 | this._element.style.opacity = 0; |
Nils Diewald | 5c5a747 | 2015-04-02 22:13:38 +0000 | [diff] [blame] | 283 | this.onHide(); |
Nils Diewald | 6e43ffd | 2015-03-25 18:55:39 +0000 | [diff] [blame] | 284 | /* this._element.blur(); */ |
Nils Diewald | 86dad5b | 2015-01-28 15:09:07 +0000 | [diff] [blame] | 285 | }, |
| 286 | |
Nils Diewald | 5c5a747 | 2015-04-02 22:13:38 +0000 | [diff] [blame] | 287 | // To be override |
| 288 | onHide : function () {}, |
| 289 | |
Nils Diewald | 2fe12e1 | 2015-03-06 16:47:06 +0000 | [diff] [blame] | 290 | // Initialize the list |
Nils Diewald | 86dad5b | 2015-01-28 15:09:07 +0000 | [diff] [blame] | 291 | _initList : function () { |
| 292 | |
Nils Diewald | 2fe12e1 | 2015-03-06 16:47:06 +0000 | [diff] [blame] | 293 | // Create a new list |
Nils Diewald | 86dad5b | 2015-01-28 15:09:07 +0000 | [diff] [blame] | 294 | if (this._list === undefined) { |
| 295 | this._list = []; |
| 296 | } |
| 297 | else if (this._list.length != 0) { |
| 298 | this._boundary(false); |
| 299 | this._list.length = 0; |
| 300 | }; |
| 301 | |
| 302 | // Offset is initially zero |
| 303 | this._offset = 0; |
| 304 | |
Nils Diewald | 2fe12e1 | 2015-03-06 16:47:06 +0000 | [diff] [blame] | 305 | // There is no prefix set |
Nils Diewald | 86dad5b | 2015-01-28 15:09:07 +0000 | [diff] [blame] | 306 | if (this.prefix().length <= 0) { |
Nils Diewald | 5975d70 | 2015-03-09 17:45:42 +0000 | [diff] [blame] | 307 | var i = 0; |
| 308 | for (; i < this._items.length; i++) |
Nils Diewald | 86dad5b | 2015-01-28 15:09:07 +0000 | [diff] [blame] | 309 | this._list.push(i); |
Nils Diewald | 5975d70 | 2015-03-09 17:45:42 +0000 | [diff] [blame] | 310 | while (this._items[++i] !== undefined) { |
| 311 | this._items[i].lowlight(); |
Nils Diewald | 2488d05 | 2015-04-09 21:46:02 +0000 | [diff] [blame] | 312 | // console.log(this._item); |
Nils Diewald | 5975d70 | 2015-03-09 17:45:42 +0000 | [diff] [blame] | 313 | }; |
Nils Diewald | 86dad5b | 2015-01-28 15:09:07 +0000 | [diff] [blame] | 314 | return true; |
| 315 | }; |
| 316 | |
Nils Diewald | 2fe12e1 | 2015-03-06 16:47:06 +0000 | [diff] [blame] | 317 | // There is a prefix set, so filter the list |
Nils Diewald | 86dad5b | 2015-01-28 15:09:07 +0000 | [diff] [blame] | 318 | var pos; |
| 319 | var paddedPrefix = " " + this.prefix(); |
| 320 | |
Nils Diewald | 2fe12e1 | 2015-03-06 16:47:06 +0000 | [diff] [blame] | 321 | // Iterate over all items and choose preferred matching items |
| 322 | // i.e. the matching happens at the word start |
Nils Diewald | 86dad5b | 2015-01-28 15:09:07 +0000 | [diff] [blame] | 323 | for (pos = 0; pos < this._items.length; pos++) { |
| 324 | if ((this.item(pos).lcField().indexOf(paddedPrefix)) >= 0) |
| 325 | this._list.push(pos); |
| 326 | }; |
| 327 | |
Nils Diewald | 2fe12e1 | 2015-03-06 16:47:06 +0000 | [diff] [blame] | 328 | // The list is empty - so lower your expectations |
| 329 | // Iterate over all items and choose matching items |
| 330 | // i.e. the matching happens anywhere in the word |
Nils Diewald | 86dad5b | 2015-01-28 15:09:07 +0000 | [diff] [blame] | 331 | if (this._list.length == 0) { |
| 332 | for (pos = 0; pos < this._items.length; pos++) { |
| 333 | if ((this.item(pos).lcField().indexOf(this.prefix())) >= 0) |
| 334 | this._list.push(pos); |
| 335 | }; |
| 336 | }; |
| 337 | |
Nils Diewald | 2fe12e1 | 2015-03-06 16:47:06 +0000 | [diff] [blame] | 338 | // Filter was successful - yeah! |
Nils Diewald | 86dad5b | 2015-01-28 15:09:07 +0000 | [diff] [blame] | 339 | return this._list.length > 0 ? true : false; |
| 340 | }, |
| 341 | |
| 342 | // Set boundary for viewport |
| 343 | _boundary : function (bool) { |
| 344 | this.item(this._list[0]).noMore(bool); |
| 345 | this.item(this._list[this._list.length - 1]).noMore(bool); |
| 346 | }, |
| 347 | |
| 348 | /** |
| 349 | * Get the prefix for filtering, |
Nils Diewald | 2fe12e1 | 2015-03-06 16:47:06 +0000 | [diff] [blame] | 350 | * e.g. "ve" for "verb" |
Nils Diewald | 86dad5b | 2015-01-28 15:09:07 +0000 | [diff] [blame] | 351 | */ |
Nils Diewald | 5975d70 | 2015-03-09 17:45:42 +0000 | [diff] [blame] | 352 | prefix : function (pref) { |
| 353 | if (arguments.length === 1) { |
| 354 | this._prefix.value(pref); |
| 355 | return this; |
| 356 | }; |
| 357 | return this._prefix.value(); |
Nils Diewald | 86dad5b | 2015-01-28 15:09:07 +0000 | [diff] [blame] | 358 | }, |
| 359 | |
Nils Diewald | 2fe12e1 | 2015-03-06 16:47:06 +0000 | [diff] [blame] | 360 | // Append Items that should be shown |
Nils Diewald | 86dad5b | 2015-01-28 15:09:07 +0000 | [diff] [blame] | 361 | _showItems : function (offset) { |
| 362 | this.delete(); |
| 363 | |
| 364 | // Use list |
| 365 | var shown = 0; |
| 366 | var i; |
| 367 | for (i in this._list) { |
| 368 | |
| 369 | // Don't show - it's before offset |
| 370 | if (shown++ < offset) |
| 371 | continue; |
| 372 | |
| 373 | this._append(this._list[i]); |
| 374 | |
| 375 | if (shown >= (this.limit() + this._offset)) |
| 376 | break; |
| 377 | }; |
| 378 | }, |
| 379 | |
| 380 | /** |
| 381 | * Delete all visible items from the menu element |
| 382 | */ |
| 383 | delete : function () { |
| 384 | var child; |
Nils Diewald | 2fe12e1 | 2015-03-06 16:47:06 +0000 | [diff] [blame] | 385 | |
Nils Diewald | 5975d70 | 2015-03-09 17:45:42 +0000 | [diff] [blame] | 386 | /* |
Nils Diewald | 2fe12e1 | 2015-03-06 16:47:06 +0000 | [diff] [blame] | 387 | // Iterate over all visible items |
Nils Diewald | 86dad5b | 2015-01-28 15:09:07 +0000 | [diff] [blame] | 388 | for (var i = 0; i <= this.limit(); i++) { |
| 389 | |
Nils Diewald | 5975d70 | 2015-03-09 17:45:42 +0000 | [diff] [blame] | 390 | // there is a visible element |
| 391 | // unhighlight! |
Nils Diewald | 59c02fc | 2015-03-07 01:29:09 +0000 | [diff] [blame] | 392 | if (child = this.shownItem(i)) { |
Nils Diewald | 86dad5b | 2015-01-28 15:09:07 +0000 | [diff] [blame] | 393 | child.lowlight(); |
Nils Diewald | 59c02fc | 2015-03-07 01:29:09 +0000 | [diff] [blame] | 394 | child.active(false); |
| 395 | }; |
Nils Diewald | 86dad5b | 2015-01-28 15:09:07 +0000 | [diff] [blame] | 396 | }; |
Nils Diewald | 5975d70 | 2015-03-09 17:45:42 +0000 | [diff] [blame] | 397 | */ |
| 398 | |
| 399 | for (var i in this._list) { |
| 400 | var item = this._items[this._list[i]]; |
| 401 | item.lowlight(); |
| 402 | item.active(false); |
| 403 | }; |
Nils Diewald | 86dad5b | 2015-01-28 15:09:07 +0000 | [diff] [blame] | 404 | |
Nils Diewald | 2fe12e1 | 2015-03-06 16:47:06 +0000 | [diff] [blame] | 405 | // Remove all children |
Nils Diewald | 5975d70 | 2015-03-09 17:45:42 +0000 | [diff] [blame] | 406 | var children = this._element.childNodes; |
| 407 | for (var i = children.length - 1; i >= 1; i--) { |
| 408 | this._element.removeChild( |
| 409 | children[i] |
| 410 | ); |
| 411 | }; |
Nils Diewald | 86dad5b | 2015-01-28 15:09:07 +0000 | [diff] [blame] | 412 | }, |
| 413 | |
| 414 | |
| 415 | // Append item to the shown list based on index |
| 416 | _append : function (i) { |
| 417 | var item = this.item(i); |
| 418 | |
| 419 | // Highlight based on prefix |
| 420 | if (this.prefix().length > 0) |
| 421 | item.highlight(this.prefix()); |
| 422 | |
| 423 | // Append element |
| 424 | this.element().appendChild(item.element()); |
| 425 | }, |
| 426 | |
| 427 | |
Nils Diewald | 2fe12e1 | 2015-03-06 16:47:06 +0000 | [diff] [blame] | 428 | // Prepend item to the shown list based on index |
| 429 | _prepend : function (i) { |
| 430 | var item = this.item(i); |
| 431 | |
| 432 | // Highlight based on prefix |
| 433 | if (this.prefix().length > 0) |
| 434 | item.highlight(this.prefix()); |
| 435 | |
| 436 | var e = this.element(); |
| 437 | // Append element |
| 438 | e.insertBefore( |
| 439 | item.element(), |
Nils Diewald | 5975d70 | 2015-03-09 17:45:42 +0000 | [diff] [blame] | 440 | e.children[1] |
Nils Diewald | 2fe12e1 | 2015-03-06 16:47:06 +0000 | [diff] [blame] | 441 | ); |
| 442 | }, |
| 443 | |
| 444 | |
| 445 | /** |
| 446 | * Get a specific item from the complete list |
| 447 | * |
| 448 | * @param {number} index of the list item |
| 449 | */ |
| 450 | item : function (index) { |
| 451 | return this._items[index] |
| 452 | }, |
| 453 | |
| 454 | |
Nils Diewald | 86dad5b | 2015-01-28 15:09:07 +0000 | [diff] [blame] | 455 | /** |
| 456 | * Get a specific item from the filtered list |
| 457 | * |
| 458 | * @param {number} index of the list item |
Nils Diewald | 2fe12e1 | 2015-03-06 16:47:06 +0000 | [diff] [blame] | 459 | * in the filtered list |
Nils Diewald | 86dad5b | 2015-01-28 15:09:07 +0000 | [diff] [blame] | 460 | */ |
| 461 | liveItem : function (index) { |
| 462 | if (this._list === undefined) |
| 463 | if (!this._initList()) |
| 464 | return; |
| 465 | |
| 466 | return this._items[this._list[index]]; |
| 467 | }, |
| 468 | |
Nils Diewald | 86dad5b | 2015-01-28 15:09:07 +0000 | [diff] [blame] | 469 | |
| 470 | /** |
| 471 | * Get a specific item from the visible list |
| 472 | * |
| 473 | * @param {number} index of the list item |
Nils Diewald | 2fe12e1 | 2015-03-06 16:47:06 +0000 | [diff] [blame] | 474 | * in the visible list |
Nils Diewald | 86dad5b | 2015-01-28 15:09:07 +0000 | [diff] [blame] | 475 | */ |
| 476 | shownItem : function (index) { |
| 477 | if (index >= this.limit()) |
| 478 | return; |
| 479 | return this.liveItem(this._offset + index); |
| 480 | }, |
| 481 | |
| 482 | |
Nils Diewald | 2fe12e1 | 2015-03-06 16:47:06 +0000 | [diff] [blame] | 483 | /** |
| 484 | * Get the length of the full list |
| 485 | */ |
| 486 | length : function () { |
| 487 | return this._items.length; |
| 488 | }, |
| 489 | |
| 490 | |
| 491 | /** |
| 492 | * Make the next item in the filtered menu active |
Nils Diewald | 86dad5b | 2015-01-28 15:09:07 +0000 | [diff] [blame] | 493 | */ |
| 494 | next : function () { |
Nils Diewald | 5975d70 | 2015-03-09 17:45:42 +0000 | [diff] [blame] | 495 | |
Nils Diewald | 86dad5b | 2015-01-28 15:09:07 +0000 | [diff] [blame] | 496 | // No active element set |
Nils Diewald | 5975d70 | 2015-03-09 17:45:42 +0000 | [diff] [blame] | 497 | if (this._position === -1) |
Nils Diewald | 86dad5b | 2015-01-28 15:09:07 +0000 | [diff] [blame] | 498 | return; |
| 499 | |
Nils Diewald | 5975d70 | 2015-03-09 17:45:42 +0000 | [diff] [blame] | 500 | var newItem; |
| 501 | |
Nils Diewald | 86dad5b | 2015-01-28 15:09:07 +0000 | [diff] [blame] | 502 | // Set new live item |
Nils Diewald | e8518f8 | 2015-03-18 22:41:49 +0000 | [diff] [blame] | 503 | if (!this._prefix.active()) { |
| 504 | var oldItem = this.liveItem(this._position); |
| 505 | oldItem.active(false); |
| 506 | }; |
| 507 | |
| 508 | this._position++; |
| 509 | |
Nils Diewald | 5975d70 | 2015-03-09 17:45:42 +0000 | [diff] [blame] | 510 | newItem = this.liveItem(this._position); |
Nils Diewald | 86dad5b | 2015-01-28 15:09:07 +0000 | [diff] [blame] | 511 | |
Nils Diewald | 5975d70 | 2015-03-09 17:45:42 +0000 | [diff] [blame] | 512 | // The next element is undefined - roll to top or to prefix |
Nils Diewald | 86dad5b | 2015-01-28 15:09:07 +0000 | [diff] [blame] | 513 | if (newItem === undefined) { |
Nils Diewald | 5975d70 | 2015-03-09 17:45:42 +0000 | [diff] [blame] | 514 | |
| 515 | // Activate prefix |
| 516 | var prefix = this._prefix; |
| 517 | |
| 518 | // Mark prefix |
| 519 | if (prefix.isSet() && !prefix.active()) { |
| 520 | this._position--; |
| 521 | prefix.active(true); |
| 522 | return; |
| 523 | } |
| 524 | else { |
| 525 | this._offset = 0; |
| 526 | this._position = 0; |
| 527 | newItem = this.liveItem(0); |
| 528 | this._showItems(0); |
| 529 | }; |
Nils Diewald | 86dad5b | 2015-01-28 15:09:07 +0000 | [diff] [blame] | 530 | } |
| 531 | |
| 532 | // The next element is outside the view - roll down |
Nils Diewald | 2fe12e1 | 2015-03-06 16:47:06 +0000 | [diff] [blame] | 533 | else if (this._position >= (this.limit() + this._offset)) { |
Nils Diewald | 86dad5b | 2015-01-28 15:09:07 +0000 | [diff] [blame] | 534 | this._removeFirst(); |
| 535 | this._offset++; |
| 536 | this._append(this._list[this._position]); |
| 537 | }; |
Nils Diewald | 5975d70 | 2015-03-09 17:45:42 +0000 | [diff] [blame] | 538 | |
| 539 | this._prefix.active(false); |
Nils Diewald | 86dad5b | 2015-01-28 15:09:07 +0000 | [diff] [blame] | 540 | newItem.active(true); |
| 541 | }, |
| 542 | |
Nils Diewald | e8518f8 | 2015-03-18 22:41:49 +0000 | [diff] [blame] | 543 | /* |
| 544 | * Page down to the first item on the next page |
| 545 | */ |
| 546 | /* |
| 547 | nextPage : function () { |
| 548 | |
| 549 | // Prefix is active |
| 550 | if (this._prefix.active()) { |
| 551 | this._prefix.active(false); |
| 552 | } |
| 553 | |
| 554 | // Last item is chosen |
| 555 | else if (this._position >= this.limit() + this._offset) { |
| 556 | |
| 557 | this._position = this.limit() + this._offset - 1; |
| 558 | newItem = this.liveItem(this._position); |
| 559 | var oldItem = this.liveItem(this._position--); |
| 560 | oldItem.active(false); |
| 561 | } |
| 562 | |
| 563 | // Last item of page is chosen |
| 564 | else if (0) { |
| 565 | |
| 566 | // Jump to last item |
| 567 | else { |
| 568 | var oldItem = this.liveItem(this._position); |
| 569 | oldItem.active(false); |
| 570 | |
| 571 | this._position = this.limit() + this._offset - 1; |
| 572 | newItem = this.liveItem(this._position); |
| 573 | }; |
| 574 | |
| 575 | newItem.active(true); |
| 576 | }, |
| 577 | */ |
| 578 | |
Nils Diewald | 86dad5b | 2015-01-28 15:09:07 +0000 | [diff] [blame] | 579 | |
| 580 | /* |
| 581 | * Make the previous item in the menu active |
| 582 | */ |
Nils Diewald | 86dad5b | 2015-01-28 15:09:07 +0000 | [diff] [blame] | 583 | prev : function () { |
Nils Diewald | 2d21075 | 2015-03-09 19:01:15 +0000 | [diff] [blame] | 584 | |
Nils Diewald | 2fe12e1 | 2015-03-06 16:47:06 +0000 | [diff] [blame] | 585 | // No active element set |
Nils Diewald | e8518f8 | 2015-03-18 22:41:49 +0000 | [diff] [blame] | 586 | if (this._position === -1) { |
Nils Diewald | 86dad5b | 2015-01-28 15:09:07 +0000 | [diff] [blame] | 587 | return; |
Nils Diewald | e8518f8 | 2015-03-18 22:41:49 +0000 | [diff] [blame] | 588 | // TODO: Choose last item |
| 589 | }; |
Nils Diewald | 86dad5b | 2015-01-28 15:09:07 +0000 | [diff] [blame] | 590 | |
Nils Diewald | 5975d70 | 2015-03-09 17:45:42 +0000 | [diff] [blame] | 591 | var newItem; |
| 592 | |
Nils Diewald | 86dad5b | 2015-01-28 15:09:07 +0000 | [diff] [blame] | 593 | // Set new live item |
Nils Diewald | 2d21075 | 2015-03-09 19:01:15 +0000 | [diff] [blame] | 594 | if (!this._prefix.active()) { |
| 595 | var oldItem = this.liveItem(this._position--); |
| 596 | oldItem.active(false); |
| 597 | }; |
| 598 | |
Nils Diewald | 5975d70 | 2015-03-09 17:45:42 +0000 | [diff] [blame] | 599 | newItem = this.liveItem(this._position); |
Nils Diewald | 86dad5b | 2015-01-28 15:09:07 +0000 | [diff] [blame] | 600 | |
| 601 | // The previous element is undefined - roll to bottom |
| 602 | if (newItem === undefined) { |
Nils Diewald | 5975d70 | 2015-03-09 17:45:42 +0000 | [diff] [blame] | 603 | |
| 604 | // Activate prefix |
| 605 | var prefix = this._prefix; |
Nils Diewald | 2fe12e1 | 2015-03-06 16:47:06 +0000 | [diff] [blame] | 606 | this._offset = this.liveLength() - this.limit(); |
Nils Diewald | 2d21075 | 2015-03-09 19:01:15 +0000 | [diff] [blame] | 607 | |
| 608 | // Normalize offset |
| 609 | this._offset = this._offset < 0 ? 0 : this._offset; |
| 610 | |
Nils Diewald | 2fe12e1 | 2015-03-06 16:47:06 +0000 | [diff] [blame] | 611 | this._position = this.liveLength() - 1; |
Nils Diewald | 5975d70 | 2015-03-09 17:45:42 +0000 | [diff] [blame] | 612 | |
| 613 | if (prefix.isSet() && !prefix.active()) { |
| 614 | this._position++; |
| 615 | prefix.active(true); |
| 616 | return; |
| 617 | } |
| 618 | else { |
| 619 | newItem = this.liveItem(this._position); |
| 620 | this._showItems(this._offset); |
| 621 | }; |
Nils Diewald | 86dad5b | 2015-01-28 15:09:07 +0000 | [diff] [blame] | 622 | } |
| 623 | |
| 624 | // The previous element is outside the view - roll up |
| 625 | else if (this._position < this._offset) { |
| 626 | this._removeLast(); |
| 627 | this._offset--; |
| 628 | this._prepend(this._list[this._position]); |
| 629 | }; |
Nils Diewald | 2fe12e1 | 2015-03-06 16:47:06 +0000 | [diff] [blame] | 630 | |
Nils Diewald | 5975d70 | 2015-03-09 17:45:42 +0000 | [diff] [blame] | 631 | this._prefix.active(false); |
Nils Diewald | 86dad5b | 2015-01-28 15:09:07 +0000 | [diff] [blame] | 632 | newItem.active(true); |
| 633 | }, |
Nils Diewald | 86dad5b | 2015-01-28 15:09:07 +0000 | [diff] [blame] | 634 | |
| 635 | |
Nils Diewald | 5975d70 | 2015-03-09 17:45:42 +0000 | [diff] [blame] | 636 | // Length of the filtered list |
| 637 | liveLength : function () { |
| 638 | if (this._list === undefined) |
| 639 | this._initList(); |
| 640 | return this._list.length; |
| 641 | }, |
| 642 | |
| 643 | |
Nils Diewald | 2fe12e1 | 2015-03-06 16:47:06 +0000 | [diff] [blame] | 644 | // Remove the HTML node from the first item |
Nils Diewald | 86dad5b | 2015-01-28 15:09:07 +0000 | [diff] [blame] | 645 | _removeFirst : function () { |
| 646 | this.item(this._list[this._offset]).lowlight(); |
Nils Diewald | 5975d70 | 2015-03-09 17:45:42 +0000 | [diff] [blame] | 647 | this._element.removeChild(this._element.children[1]); |
Nils Diewald | 86dad5b | 2015-01-28 15:09:07 +0000 | [diff] [blame] | 648 | }, |
| 649 | |
Nils Diewald | 2fe12e1 | 2015-03-06 16:47:06 +0000 | [diff] [blame] | 650 | |
| 651 | // Remove the HTML node from the last item |
Nils Diewald | 86dad5b | 2015-01-28 15:09:07 +0000 | [diff] [blame] | 652 | _removeLast : function () { |
Nils Diewald | 2fe12e1 | 2015-03-06 16:47:06 +0000 | [diff] [blame] | 653 | this.item(this._list[this._offset + this.limit() - 1]).lowlight(); |
Nils Diewald | 86dad5b | 2015-01-28 15:09:07 +0000 | [diff] [blame] | 654 | this._element.removeChild(this._element.lastChild); |
Nils Diewald | 2fe12e1 | 2015-03-06 16:47:06 +0000 | [diff] [blame] | 655 | } |
Nils Diewald | 86dad5b | 2015-01-28 15:09:07 +0000 | [diff] [blame] | 656 | }; |
Nils Diewald | 0e6992a | 2015-04-14 20:13:52 +0000 | [diff] [blame] | 657 | }); |