Nils Diewald | 0e6992a | 2015-04-14 20:13:52 +0000 | [diff] [blame] | 1 | /** |
| 2 | * Information about a match. |
| 3 | */ |
Nils Diewald | 7c8ced2 | 2015-04-15 19:21:00 +0000 | [diff] [blame^] | 4 | define([ |
| 5 | 'match/infolayer', |
| 6 | 'match/table', |
| 7 | 'match/tree', |
| 8 | 'match/treemenu', |
| 9 | 'util' |
| 10 | ], function (infoLayerClass, |
| 11 | matchTableClass, |
| 12 | matchTreeClass, |
| 13 | matchTreeMenuClass) { |
Nils Diewald | 0e6992a | 2015-04-14 20:13:52 +0000 | [diff] [blame] | 14 | |
| 15 | // TODO: Make this async |
| 16 | KorAP.API.getMatchInfo = KorAP.API.getMatchInfo || function () { |
| 17 | KorAP.log(0, 'KorAP.API.getMatchInfo() not implemented') |
| 18 | return {}; |
| 19 | }; |
| 20 | |
| 21 | var loc = KorAP.Locale; |
| 22 | |
| 23 | /** |
| 24 | * Create new object |
| 25 | */ |
| 26 | return { |
| 27 | create : function (match) { |
| 28 | return Object.create(this)._init(match); |
| 29 | }, |
| 30 | |
| 31 | /** |
| 32 | * Initialize object |
| 33 | */ |
| 34 | _init : function (match) { |
| 35 | this._match = match; |
| 36 | this.opened = false; |
| 37 | return this; |
| 38 | }, |
| 39 | |
| 40 | /** |
| 41 | * Get match object |
| 42 | */ |
| 43 | match : function () { |
| 44 | return this._match; |
| 45 | }, |
| 46 | |
| 47 | toggle : function () { |
| 48 | if (this.opened == true) { |
| 49 | this._match.element().children[0].removeChild( |
| 50 | this.element() |
| 51 | ); |
| 52 | this.opened = false; |
| 53 | } |
| 54 | else { |
| 55 | // Append element to match |
| 56 | this._match.element().children[0].appendChild( |
| 57 | this.element() |
| 58 | ); |
| 59 | this.opened = true; |
| 60 | }; |
| 61 | |
| 62 | return this.opened; |
| 63 | }, |
| 64 | |
| 65 | |
| 66 | /** |
| 67 | * Retrieve and parse snippet for table representation |
| 68 | */ |
| 69 | getTable : function (tokens, cb) { |
| 70 | var focus = []; |
| 71 | |
| 72 | // Get all tokens |
| 73 | if (tokens === undefined) { |
| 74 | focus = this._match.getTokens(); |
| 75 | } |
| 76 | |
| 77 | // Get only some tokens |
| 78 | else { |
| 79 | |
| 80 | // Push newly to focus array |
| 81 | for (var i = 0; i < tokens.length; i++) { |
| 82 | var term = tokens[i]; |
| 83 | try { |
| 84 | // Create info layer objects |
| 85 | var layer = infoLayerClass.create(term); |
| 86 | layer.type = "tokens"; |
| 87 | focus.push(layer); |
| 88 | } |
| 89 | catch (e) { |
| 90 | continue; |
| 91 | }; |
| 92 | }; |
| 93 | }; |
| 94 | |
| 95 | // No tokens chosen |
| 96 | if (focus.length == 0) |
| 97 | cb(null); |
| 98 | |
| 99 | // Get info (may be cached) |
| 100 | // TODO: Async |
| 101 | KorAP.API.getMatchInfo( |
| 102 | this._match, |
| 103 | { 'spans' : false, 'layer' : focus }, |
| 104 | |
| 105 | // Callback for retrieval |
| 106 | function (matchResponse) { |
| 107 | // Get snippet from match info |
| 108 | if (matchResponse["snippet"] !== undefined) { |
| 109 | this._table = matchTableClass.create(matchResponse["snippet"]); |
| 110 | cb(this._table); |
| 111 | }; |
| 112 | }.bind(this) |
| 113 | ); |
| 114 | |
| 115 | /* |
| 116 | // Todo: Store the table as a hash of the focus |
| 117 | return null; |
| 118 | */ |
| 119 | }, |
| 120 | |
| 121 | |
| 122 | /** |
| 123 | * Retrieve and parse snippet for tree representation |
| 124 | */ |
| 125 | getTree : function (foundry, layer, cb) { |
| 126 | var focus = []; |
| 127 | |
| 128 | // TODO: Support and cache multiple trees |
| 129 | KorAP.API.getMatchInfo( |
| 130 | this._match, { |
| 131 | 'spans' : true, |
| 132 | 'foundry' : foundry, |
| 133 | 'layer' : layer |
| 134 | }, |
| 135 | function (matchResponse) { |
| 136 | // Get snippet from match info |
| 137 | if (matchResponse["snippet"] !== undefined) { |
| 138 | // Todo: This should be cached somehow |
| 139 | cb(matchTreeClass.create(matchResponse["snippet"])); |
| 140 | } |
| 141 | else { |
| 142 | cb(null); |
| 143 | }; |
| 144 | }.bind(this) |
| 145 | ); |
| 146 | }, |
| 147 | |
| 148 | /** |
| 149 | * Destroy this match information view. |
| 150 | */ |
| 151 | destroy : function () { |
| 152 | |
| 153 | // Remove circular reference |
| 154 | if (this._treeMenu !== undefined) |
| 155 | delete this._treeMenu["info"]; |
| 156 | |
| 157 | this._treeMenu.destroy(); |
| 158 | this._treeMenu = undefined; |
| 159 | this._match = undefined; |
| 160 | |
| 161 | // Element destroy |
| 162 | }, |
| 163 | |
| 164 | /** |
| 165 | * Add a new tree view to the list |
| 166 | */ |
| 167 | addTree : function (foundry, layer, cb) { |
| 168 | var matchtree = document.createElement('div'); |
| 169 | matchtree.classList.add('matchtree'); |
| 170 | |
| 171 | var h6 = matchtree.appendChild(document.createElement('h6')); |
| 172 | h6.appendChild(document.createElement('span')) |
| 173 | .appendChild(document.createTextNode(foundry)); |
| 174 | h6.appendChild(document.createElement('span')) |
| 175 | .appendChild(document.createTextNode(layer)); |
| 176 | |
| 177 | var tree = matchtree.appendChild( |
| 178 | document.createElement('div') |
| 179 | ); |
| 180 | |
| 181 | this._element.insertBefore(matchtree, this._element.lastChild); |
| 182 | |
| 183 | var close = tree.appendChild(document.createElement('em')); |
| 184 | close.addEventListener( |
| 185 | 'click', function (e) { |
| 186 | matchtree.parentNode.removeChild(matchtree); |
| 187 | e.halt(); |
| 188 | } |
| 189 | ); |
| 190 | |
| 191 | // Get tree data async |
| 192 | this.getTree(foundry, layer, function (treeObj) { |
| 193 | // Something went wrong - probably log!!! |
| 194 | if (treeObj === null) { |
| 195 | tree.appendChild(document.createTextNode('No data available.')); |
| 196 | } |
| 197 | else { |
| 198 | tree.appendChild(treeObj.element()); |
| 199 | // Reposition the view to the center |
| 200 | // (This may in a future release be a reposition |
| 201 | // to move the root into the center or the actual |
| 202 | // match) |
| 203 | treeObj.center(); |
| 204 | } |
| 205 | |
| 206 | if (cb !== undefined) |
| 207 | cb(treeObj); |
| 208 | }); |
| 209 | }, |
| 210 | |
| 211 | /** |
| 212 | * Create match information view. |
| 213 | */ |
| 214 | element : function () { |
| 215 | |
| 216 | if (this._element !== undefined) |
| 217 | return this._element; |
| 218 | |
| 219 | // Create info table |
| 220 | var info = document.createElement('div'); |
| 221 | info.classList.add('matchinfo'); |
| 222 | |
| 223 | // Append default table |
| 224 | var matchtable = document.createElement('div'); |
| 225 | matchtable.classList.add('matchtable'); |
| 226 | info.appendChild(matchtable); |
| 227 | |
| 228 | // Create the table asynchronous |
| 229 | this.getTable(undefined, function (table) { |
| 230 | if (table !== null) { |
| 231 | matchtable.appendChild(table.element()); |
| 232 | }; |
| 233 | }); |
| 234 | |
| 235 | // Get spans |
| 236 | var spanLayers = this._match.getSpans().sort( |
| 237 | function (a, b) { |
| 238 | if (a.foundry < b.foundry) { |
| 239 | return -1; |
| 240 | } |
| 241 | else if (a.foundry > b.foundry) { |
| 242 | return 1; |
| 243 | } |
| 244 | else if (a.layer < b.layer) { |
| 245 | return -1; |
| 246 | } |
| 247 | else if (a.layer > b.layer) { |
| 248 | return 1; |
| 249 | }; |
| 250 | return 0; |
| 251 | }); |
| 252 | |
| 253 | var menuList = []; |
| 254 | |
| 255 | // Show tree views |
| 256 | for (var i = 0; i < spanLayers.length; i++) { |
| 257 | var span = spanLayers[i]; |
| 258 | |
| 259 | // Add foundry/layer to menu list |
| 260 | menuList.push([ |
| 261 | span.foundry + '/' + span.layer, |
| 262 | span.foundry, |
| 263 | span.layer |
| 264 | ]); |
| 265 | }; |
| 266 | |
| 267 | // Create tree menu |
| 268 | var treemenu = this.treeMenu(menuList); |
| 269 | var span = info.appendChild(document.createElement('p')); |
| 270 | span.classList.add('addtree'); |
| 271 | span.appendChild(document.createTextNode(loc.ADDTREE)); |
| 272 | |
| 273 | var treeElement = treemenu.element(); |
| 274 | span.appendChild(treeElement); |
| 275 | |
| 276 | span.addEventListener('click', function (e) { |
| 277 | treemenu.show(''); |
| 278 | treemenu.focus(); |
| 279 | }); |
| 280 | |
| 281 | this._element = info; |
| 282 | |
| 283 | return info; |
| 284 | }, |
| 285 | |
| 286 | |
| 287 | /** |
| 288 | * Get tree menu. |
| 289 | * There is only one menu rendered |
| 290 | * - no matter how many trees exist |
| 291 | */ |
| 292 | treeMenu : function (list) { |
| 293 | if (this._treeMenu !== undefined) |
| 294 | return this._treeMenu; |
| 295 | |
| 296 | return this._treeMenu = matchTreeMenuClass.create(this, list); |
| 297 | } |
| 298 | }; |
| 299 | }); |