Nils Diewald | 19ccee9 | 2014-12-08 11:30:08 +0000 | [diff] [blame] | 1 | /** |
Nils Diewald | 5c5a747 | 2015-04-02 22:13:38 +0000 | [diff] [blame] | 2 | * Hint menu for Kalamar. |
Nils Diewald | 47f366b | 2015-04-15 20:06:35 +0000 | [diff] [blame] | 3 | * Based on menu object. |
Nils Diewald | 19ccee9 | 2014-12-08 11:30:08 +0000 | [diff] [blame] | 4 | * |
| 5 | * @author Nils Diewald |
| 6 | */ |
Akron | 308db38 | 2016-05-30 22:34:07 +0200 | [diff] [blame] | 7 | /* |
| 8 | * TODO: List can be shown when prefix is like 'base/s=pcorenlp/' |
| 9 | * TODO: Sometimes the drop-down box down vanish when list is shown |
| 10 | * TODO: Create should expect an input text field |
| 11 | * TODO: Embed only one single menu (not multiple) |
Akron | 02360e4 | 2016-06-07 13:41:12 +0200 | [diff] [blame] | 12 | * By holding the current menu in _active |
| 13 | * TODO: show() should accept a context field (especially for no-context fields, |
| 14 | * like fragments) |
| 15 | * TODO: Improve context analyzer from hint! |
| 16 | * TODO: Marked annotations should be addable to "fragments" |
Akron | 308db38 | 2016-05-30 22:34:07 +0200 | [diff] [blame] | 17 | */ |
Nils Diewald | 0e6992a | 2015-04-14 20:13:52 +0000 | [diff] [blame] | 18 | define([ |
| 19 | 'hint/input', |
| 20 | 'hint/menu', |
| 21 | 'hint/contextanalyzer', |
Akron | 00cd4d1 | 2016-05-31 21:01:11 +0200 | [diff] [blame] | 22 | 'hint/alert', |
Nils Diewald | 0e6992a | 2015-04-14 20:13:52 +0000 | [diff] [blame] | 23 | 'util' |
| 24 | ], function (inputClass, |
Akron | 00cd4d1 | 2016-05-31 21:01:11 +0200 | [diff] [blame] | 25 | menuClass, |
| 26 | analyzerClass, |
| 27 | alertClass) { |
Nils Diewald | 19ccee9 | 2014-12-08 11:30:08 +0000 | [diff] [blame] | 28 | "use strict"; |
| 29 | |
Nils Diewald | 19ccee9 | 2014-12-08 11:30:08 +0000 | [diff] [blame] | 30 | /** |
| 31 | * @define {regex} Regular expression for context |
| 32 | */ |
Nils Diewald | 0e6992a | 2015-04-14 20:13:52 +0000 | [diff] [blame] | 33 | KorAP.context = KorAP.context || |
Nils Diewald | 19ccee9 | 2014-12-08 11:30:08 +0000 | [diff] [blame] | 34 | "(?:^|[^-_a-zA-Z0-9])" + // Anchor |
| 35 | "((?:[-_a-zA-Z0-9]+?)\/" + // Foundry |
| 36 | "(?:" + |
| 37 | "(?:[-_a-zA-Z0-9]+?)=" + // Layer |
Akron | 113cc1a | 2016-01-22 21:17:57 +0100 | [diff] [blame] | 38 | "(?:"+ |
| 39 | "(?:[^:=\/ ]+?):|" + // Key |
Akron | 308db38 | 2016-05-30 22:34:07 +0200 | [diff] [blame] | 40 | "(?:[^-=\/ ]+?)-" + // Node |
Akron | 113cc1a | 2016-01-22 21:17:57 +0100 | [diff] [blame] | 41 | ")?" + |
Nils Diewald | 19ccee9 | 2014-12-08 11:30:08 +0000 | [diff] [blame] | 42 | ")?" + |
| 43 | ")$"; |
Nils Diewald | 19ccee9 | 2014-12-08 11:30:08 +0000 | [diff] [blame] | 44 | KorAP.hintArray = KorAP.hintArray || {}; |
| 45 | |
Nils Diewald | 0e6992a | 2015-04-14 20:13:52 +0000 | [diff] [blame] | 46 | /** |
| 47 | * Return keycode based on event |
| 48 | */ |
Nils Diewald | 0e6992a | 2015-04-14 20:13:52 +0000 | [diff] [blame] | 49 | |
| 50 | // Initialize hint array |
Nils Diewald | 5c5a747 | 2015-04-02 22:13:38 +0000 | [diff] [blame] | 51 | |
| 52 | /** |
| 53 | * KorAP.Hint.create({ |
| 54 | * inputField : node, |
| 55 | * context : context regex |
| 56 | * }); |
| 57 | */ |
Nils Diewald | 0e6992a | 2015-04-14 20:13:52 +0000 | [diff] [blame] | 58 | return { |
Nils Diewald | 5c5a747 | 2015-04-02 22:13:38 +0000 | [diff] [blame] | 59 | |
| 60 | // Some variables |
| 61 | // _firstTry : true, |
Akron | 00cd4d1 | 2016-05-31 21:01:11 +0200 | [diff] [blame] | 62 | // active : false, |
Nils Diewald | 5c5a747 | 2015-04-02 22:13:38 +0000 | [diff] [blame] | 63 | |
Nils Diewald | 0e6992a | 2015-04-14 20:13:52 +0000 | [diff] [blame] | 64 | /** |
| 65 | * Create new hint helper. |
| 66 | */ |
Nils Diewald | 5c5a747 | 2015-04-02 22:13:38 +0000 | [diff] [blame] | 67 | create : function (param) { |
Nils Diewald | 0e6992a | 2015-04-14 20:13:52 +0000 | [diff] [blame] | 68 | return Object.create(this)._init(param); |
Nils Diewald | 5c5a747 | 2015-04-02 22:13:38 +0000 | [diff] [blame] | 69 | }, |
| 70 | |
Nils Diewald | 0e6992a | 2015-04-14 20:13:52 +0000 | [diff] [blame] | 71 | // Initialize hint helper |
Nils Diewald | 5c5a747 | 2015-04-02 22:13:38 +0000 | [diff] [blame] | 72 | _init : function (param) { |
| 73 | param = param || {}; |
| 74 | |
| 75 | // Holds all menus per prefix context |
Akron | 00cd4d1 | 2016-05-31 21:01:11 +0200 | [diff] [blame] | 76 | this._menu = {}; |
| 77 | this._alert = alertClass.create(); |
Akron | 02360e4 | 2016-06-07 13:41:12 +0200 | [diff] [blame] | 78 | this._active = null; |
Nils Diewald | 5c5a747 | 2015-04-02 22:13:38 +0000 | [diff] [blame] | 79 | |
| 80 | // Get input field |
Nils Diewald | 0e6992a | 2015-04-14 20:13:52 +0000 | [diff] [blame] | 81 | var qfield = param["inputField"] || document.getElementById("q-field"); |
| 82 | if (!qfield) |
| 83 | return null; |
| 84 | |
Akron | 00cd4d1 | 2016-05-31 21:01:11 +0200 | [diff] [blame] | 85 | // Create input field |
Nils Diewald | 0e6992a | 2015-04-14 20:13:52 +0000 | [diff] [blame] | 86 | this._inputField = inputClass.create(qfield); |
Nils Diewald | 5c5a747 | 2015-04-02 22:13:38 +0000 | [diff] [blame] | 87 | |
| 88 | var inputFieldElement = this._inputField.element(); |
| 89 | |
Akron | 00cd4d1 | 2016-05-31 21:01:11 +0200 | [diff] [blame] | 90 | var c = this._inputField.container(); |
Nils Diewald | 5c5a747 | 2015-04-02 22:13:38 +0000 | [diff] [blame] | 91 | |
Akron | 00cd4d1 | 2016-05-31 21:01:11 +0200 | [diff] [blame] | 92 | // create alert |
| 93 | c.appendChild(this._alert.element()); |
| 94 | |
Akron | 00cd4d1 | 2016-05-31 21:01:11 +0200 | [diff] [blame] | 95 | var that = this; |
Nils Diewald | 5c5a747 | 2015-04-02 22:13:38 +0000 | [diff] [blame] | 96 | |
Nils Diewald | 47f366b | 2015-04-15 20:06:35 +0000 | [diff] [blame] | 97 | this._inputField.container().addEventListener('click', function (e) { |
| 98 | if (!this.classList.contains('active')) { |
| 99 | that.show(false); |
| 100 | }; |
| 101 | }); |
| 102 | |
Akron | 00cd4d1 | 2016-05-31 21:01:11 +0200 | [diff] [blame] | 103 | var _down = function (e) { |
| 104 | var code = _codeFromEvent(e); |
| 105 | if (code === 40) { |
| 106 | this.show(false); |
| 107 | e.halt(); |
| 108 | }; |
Nils Diewald | 47f366b | 2015-04-15 20:06:35 +0000 | [diff] [blame] | 109 | }; |
| 110 | |
| 111 | // Move infobox |
Akron | 00cd4d1 | 2016-05-31 21:01:11 +0200 | [diff] [blame] | 112 | inputFieldElement.addEventListener("keyup", this.update.bind(this)); |
| 113 | inputFieldElement.addEventListener("click", this.update.bind(this)); |
| 114 | |
| 115 | // Add event listener for key pressed down |
| 116 | inputFieldElement.addEventListener( |
| 117 | "keydown", _down.bind(this), false |
| 118 | ); |
Nils Diewald | 5c5a747 | 2015-04-02 22:13:38 +0000 | [diff] [blame] | 119 | |
| 120 | // Set Analyzer for context |
Nils Diewald | 0e6992a | 2015-04-14 20:13:52 +0000 | [diff] [blame] | 121 | this._analyzer = analyzerClass.create( |
Nils Diewald | 5c5a747 | 2015-04-02 22:13:38 +0000 | [diff] [blame] | 122 | param["context"] || KorAP.context |
| 123 | ); |
Nils Diewald | 19ccee9 | 2014-12-08 11:30:08 +0000 | [diff] [blame] | 124 | return this; |
| 125 | }, |
| 126 | |
Akron | 308db38 | 2016-05-30 22:34:07 +0200 | [diff] [blame] | 127 | |
| 128 | /** |
| 129 | * Return the input field attached to the hint helper. |
| 130 | */ |
Nils Diewald | 5c5a747 | 2015-04-02 22:13:38 +0000 | [diff] [blame] | 131 | inputField : function () { |
| 132 | return this._inputField; |
| 133 | }, |
Nils Diewald | 19ccee9 | 2014-12-08 11:30:08 +0000 | [diff] [blame] | 134 | |
Akron | 308db38 | 2016-05-30 22:34:07 +0200 | [diff] [blame] | 135 | |
| 136 | /** |
| 137 | * Altert at a specific character position. |
| 138 | */ |
Akron | 00cd4d1 | 2016-05-31 21:01:11 +0200 | [diff] [blame] | 139 | alert : function (charPos, msg) { |
| 140 | |
| 141 | if (arguments.length === 0) |
| 142 | return this._alert; |
| 143 | |
| 144 | // Do not alert if already alerted! |
| 145 | if (this._alert.active) |
| 146 | return false; |
| 147 | |
| 148 | // Move to the correct position |
Akron | 308db38 | 2016-05-30 22:34:07 +0200 | [diff] [blame] | 149 | this._inputField.moveto(charPos); |
Akron | 00cd4d1 | 2016-05-31 21:01:11 +0200 | [diff] [blame] | 150 | |
| 151 | // Set container to active (aka hide the hint helper button) |
| 152 | |
| 153 | this._alert.show(msg); |
Akron | 02360e4 | 2016-06-07 13:41:12 +0200 | [diff] [blame] | 154 | this.active(this._alert); |
Akron | 00cd4d1 | 2016-05-31 21:01:11 +0200 | [diff] [blame] | 155 | return true; |
Akron | 308db38 | 2016-05-30 22:34:07 +0200 | [diff] [blame] | 156 | }, |
| 157 | |
Akron | 00cd4d1 | 2016-05-31 21:01:11 +0200 | [diff] [blame] | 158 | _unshowAlert : function () { |
Akron | 02360e4 | 2016-06-07 13:41:12 +0200 | [diff] [blame] | 159 | this._alert.hide(); |
| 160 | this.active(null); |
Akron | 00cd4d1 | 2016-05-31 21:01:11 +0200 | [diff] [blame] | 161 | }, |
| 162 | |
| 163 | update : function () { |
| 164 | this._inputField.update(); |
Akron | 02360e4 | 2016-06-07 13:41:12 +0200 | [diff] [blame] | 165 | if (this._alert.hide()) |
| 166 | this.active(null); |
Akron | 00cd4d1 | 2016-05-31 21:01:11 +0200 | [diff] [blame] | 167 | }, |
| 168 | |
| 169 | |
Nils Diewald | 5c5a747 | 2015-04-02 22:13:38 +0000 | [diff] [blame] | 170 | /** |
Nils Diewald | 5c5a747 | 2015-04-02 22:13:38 +0000 | [diff] [blame] | 171 | * Return hint menu and probably init based on an action |
| 172 | */ |
| 173 | menu : function (action) { |
Nils Diewald | 5c5a747 | 2015-04-02 22:13:38 +0000 | [diff] [blame] | 174 | if (this._menu[action] === undefined) { |
| 175 | |
| 176 | // No matching hint menu |
| 177 | if (KorAP.hintArray[action] === undefined) |
| 178 | return; |
| 179 | |
| 180 | // Create matching hint menu |
Nils Diewald | 0e6992a | 2015-04-14 20:13:52 +0000 | [diff] [blame] | 181 | this._menu[action] = menuClass.create( |
Nils Diewald | 5c5a747 | 2015-04-02 22:13:38 +0000 | [diff] [blame] | 182 | this, action, KorAP.hintArray[action] |
Nils Diewald | 19ccee9 | 2014-12-08 11:30:08 +0000 | [diff] [blame] | 183 | ); |
Nils Diewald | 5c5a747 | 2015-04-02 22:13:38 +0000 | [diff] [blame] | 184 | }; |
| 185 | |
| 186 | // Return matching hint menu |
| 187 | return this._menu[action]; |
| 188 | }, |
| 189 | |
| 190 | /** |
| 191 | * Get the correct menu based on the context |
| 192 | */ |
| 193 | contextMenu : function (ifContext) { |
Akron | 02360e4 | 2016-06-07 13:41:12 +0200 | [diff] [blame] | 194 | |
| 195 | // Get context (aka left text) |
Nils Diewald | 5c5a747 | 2015-04-02 22:13:38 +0000 | [diff] [blame] | 196 | var context = this._inputField.context(); |
Akron | ee9ef4a | 2016-06-03 12:50:08 +0200 | [diff] [blame] | 197 | |
Akron | 02360e4 | 2016-06-07 13:41:12 +0200 | [diff] [blame] | 198 | if (context === undefined || context.length === 0) |
Nils Diewald | 5c5a747 | 2015-04-02 22:13:38 +0000 | [diff] [blame] | 199 | return ifContext ? undefined : this.menu("-"); |
| 200 | |
Akron | 02360e4 | 2016-06-07 13:41:12 +0200 | [diff] [blame] | 201 | // Get context (aka left text matching regex) |
Nils Diewald | 5c5a747 | 2015-04-02 22:13:38 +0000 | [diff] [blame] | 202 | context = this._analyzer.test(context); |
Akron | ee9ef4a | 2016-06-03 12:50:08 +0200 | [diff] [blame] | 203 | |
Nils Diewald | 5c5a747 | 2015-04-02 22:13:38 +0000 | [diff] [blame] | 204 | if (context === undefined || context.length == 0) |
| 205 | return ifContext ? undefined : this.menu("-"); |
| 206 | |
Akron | 02360e4 | 2016-06-07 13:41:12 +0200 | [diff] [blame] | 207 | return this.menu(context) || this.menu('-'); |
Nils Diewald | 5c5a747 | 2015-04-02 22:13:38 +0000 | [diff] [blame] | 208 | }, |
| 209 | |
Akron | 02360e4 | 2016-06-07 13:41:12 +0200 | [diff] [blame] | 210 | active : function (obj) { |
Akron | 00cd4d1 | 2016-05-31 21:01:11 +0200 | [diff] [blame] | 211 | if (arguments.length === 1) { |
| 212 | var c = this._inputField.container(); |
Akron | 02360e4 | 2016-06-07 13:41:12 +0200 | [diff] [blame] | 213 | if (obj !== null) { |
Akron | 00cd4d1 | 2016-05-31 21:01:11 +0200 | [diff] [blame] | 214 | c.classList.add('active'); |
Akron | 02360e4 | 2016-06-07 13:41:12 +0200 | [diff] [blame] | 215 | this._active = obj; |
Akron | 00cd4d1 | 2016-05-31 21:01:11 +0200 | [diff] [blame] | 216 | } |
| 217 | else { |
| 218 | c.classList.remove('active'); |
Akron | 02360e4 | 2016-06-07 13:41:12 +0200 | [diff] [blame] | 219 | this._active = null; |
Akron | 00cd4d1 | 2016-05-31 21:01:11 +0200 | [diff] [blame] | 220 | } |
| 221 | }; |
| 222 | return this._active; |
| 223 | }, |
| 224 | |
Nils Diewald | 5c5a747 | 2015-04-02 22:13:38 +0000 | [diff] [blame] | 225 | |
| 226 | /** |
Akron | 308db38 | 2016-05-30 22:34:07 +0200 | [diff] [blame] | 227 | * Show the menu. |
| 228 | * Currently this means that multiple menus may be loaded |
| 229 | * but not shown. |
Akron | 02360e4 | 2016-06-07 13:41:12 +0200 | [diff] [blame] | 230 | * |
| 231 | * @param {boolean} Boolean value to indicate if context |
| 232 | * is necessary (true) or if the main context should |
| 233 | * be shown if context fails. |
| 234 | * |
Nils Diewald | 5c5a747 | 2015-04-02 22:13:38 +0000 | [diff] [blame] | 235 | */ |
| 236 | show : function (ifContext) { |
| 237 | |
Akron | 02360e4 | 2016-06-07 13:41:12 +0200 | [diff] [blame] | 238 | var c = this._inputField.container(); |
| 239 | |
Nils Diewald | 5c5a747 | 2015-04-02 22:13:38 +0000 | [diff] [blame] | 240 | // Menu is already active |
Akron | 02360e4 | 2016-06-07 13:41:12 +0200 | [diff] [blame] | 241 | if (this.active() !== null) { |
| 242 | |
| 243 | // This does not work for alert currently! |
| 244 | if (this._active._type !== 'alert') { |
| 245 | c.removeChild(this._active.element()); |
| 246 | }; |
| 247 | |
| 248 | // This may already be hidden! |
| 249 | this._active.hide(); |
| 250 | this.active(null); |
Akron | 00cd4d1 | 2016-05-31 21:01:11 +0200 | [diff] [blame] | 251 | |
| 252 | // Alert is not active |
Akron | 02360e4 | 2016-06-07 13:41:12 +0200 | [diff] [blame] | 253 | /* |
| 254 | if (!this._alert.unshow()) |
Akron | 00cd4d1 | 2016-05-31 21:01:11 +0200 | [diff] [blame] | 255 | return; |
Akron | 02360e4 | 2016-06-07 13:41:12 +0200 | [diff] [blame] | 256 | */ |
Akron | 00cd4d1 | 2016-05-31 21:01:11 +0200 | [diff] [blame] | 257 | }; |
Nils Diewald | 5c5a747 | 2015-04-02 22:13:38 +0000 | [diff] [blame] | 258 | |
Nils Diewald | 5c5a747 | 2015-04-02 22:13:38 +0000 | [diff] [blame] | 259 | // Get the menu |
| 260 | var menu; |
| 261 | if (menu = this.contextMenu(ifContext)) { |
Akron | 02360e4 | 2016-06-07 13:41:12 +0200 | [diff] [blame] | 262 | |
| 263 | // TODO: Remove old element! |
| 264 | |
| 265 | this.active(menu); |
| 266 | |
Nils Diewald | 2488d05 | 2015-04-09 21:46:02 +0000 | [diff] [blame] | 267 | c.appendChild(menu.element()); |
Akron | 6ed1399 | 2016-05-23 18:06:05 +0200 | [diff] [blame] | 268 | menu.show(); |
Nils Diewald | 5c5a747 | 2015-04-02 22:13:38 +0000 | [diff] [blame] | 269 | menu.focus(); |
Akron | 308db38 | 2016-05-30 22:34:07 +0200 | [diff] [blame] | 270 | // Focus on input field |
| 271 | // this.inputField.element.focus(); |
Nils Diewald | 19ccee9 | 2014-12-08 11:30:08 +0000 | [diff] [blame] | 272 | }; |
Akron | 00cd4d1 | 2016-05-31 21:01:11 +0200 | [diff] [blame] | 273 | }, |
| 274 | |
Akron | 02360e4 | 2016-06-07 13:41:12 +0200 | [diff] [blame] | 275 | // Show an object in the containerField |
| 276 | // This will hide all other objects |
| 277 | // Accepts menus as well as alerts |
| 278 | show2 : function (obj) {}, |
| 279 | |
| 280 | // This will get the context of the field |
| 281 | getContext : function () {}, |
| 282 | |
Akron | 00cd4d1 | 2016-05-31 21:01:11 +0200 | [diff] [blame] | 283 | unshow : function () { |
Akron | 02360e4 | 2016-06-07 13:41:12 +0200 | [diff] [blame] | 284 | this.active(null); |
Akron | 00cd4d1 | 2016-05-31 21:01:11 +0200 | [diff] [blame] | 285 | this.inputField().element().focus(); |
Nils Diewald | 19ccee9 | 2014-12-08 11:30:08 +0000 | [diff] [blame] | 286 | } |
| 287 | }; |
Nils Diewald | 0e6992a | 2015-04-14 20:13:52 +0000 | [diff] [blame] | 288 | }); |