- Timestamp:
- 01/16/15 19:24:55 (9 years ago)
- File:
-
- 1 edited
Legend:
- Unmodified
- Added
- Removed
-
SRUAggregator/trunk/src/main/resources/assets/js/search.js
r5919 r5931 12 12 var HitNumber = window.MyAggregator.HitNumber; 13 13 var CorpusView = window.MyAggregator.CorpusView; 14 var Popover = window.MyReact.Popover; 14 15 var InfoPopover = window.MyReact.InfoPopover; 15 16 var Panel = window.MyReact.Panel; … … 165 166 }, 166 167 167 mixins: [React.addons.LinkedStateMixin],168 168 timeout: 0, 169 169 nohits: { … … 178 178 languageMap: {}, 179 179 language: this.anyLanguage, 180 languageFilter: 'byMeta', 180 181 searchLayerId: "text", 181 182 numberOfResults: 10, … … 260 261 }, 261 262 262 setLanguage: function(languageObj) { 263 this.state.corpora.setVisibility(this.state.searchLayerId, languageObj[0]); 264 this.setState({language: languageObj}); 263 setLanguageAndFilter: function(languageObj, languageFilter) { 264 this.state.corpora.setVisibility(this.state.searchLayerId, 265 languageFilter === 'byGuess' ? multipleLanguageCode : languageObj[0]); 266 this.setState({language: languageObj, languageFilter: languageFilter}); 265 267 this.state.corpora.update(); 266 268 }, … … 282 284 283 285 stop: function(e) { 286 e.preventDefault(); 287 e.stopPropagation(); 288 }, 289 290 filterResults: function() { 291 var langCode = this.state.language[0]; 292 return this.state.hits.results.map(function(corpusHit) { 293 return { 294 corpus: corpusHit.corpus, 295 startRecord: corpusHit.startRecord, 296 endRecord: corpusHit.endRecord, 297 exception: corpusHit.exception, 298 searchString: corpusHit.searchString, 299 kwics: corpusHit.kwics.filter(function(kwic){ 300 return kwic.language === langCode || langCode === multipleLanguageCode || langCode === null; 301 }), 302 }; 303 }); 304 }, 305 306 toggleLanguageSelection: function(e) { 307 $(this.refs.languageModal.getDOMNode()).modal(); 284 308 e.preventDefault(); 285 309 e.stopPropagation(); … … 323 347 React.createElement("div", {className: "input-group-btn"}, 324 348 React.createElement("button", {className: "form-control btn btn-default", 325 'aria-expanded': "false", 'data-toggle': "dropdown"},349 onClick: this.toggleLanguageSelection}, 326 350 this.state.language[1], " ", React.createElement("span", {className: "caret"}) 327 351 ), 328 React.createElement("ul", {ref: "languageDropdownMenu", className: "dropdown-menu"}, 329 React.createElement("li", {key: this.anyLanguage[0]}, " ", React.createElement("a", {tabIndex: "-1", href: "#", 330 onClick: this.setLanguage.bind(this, this.anyLanguage)}, 331 this.anyLanguage[1]) 332 ), 333 _.pairs(this.state.languageMap).sort(function(l1, l2){ 334 return l1[1].localeCompare(l2[1]); 335 }).map(function(l) { 336 var desc = l[1] + " [" + l[0] + "]"; 337 return React.createElement("li", {key: l[0]}, " ", React.createElement("a", {tabIndex: "-1", href: "#", 338 onClick: this.setLanguage.bind(this, l)}, desc)); 339 }.bind(this)) 340 341 ) 352 React.createElement("span", null) 342 353 ), 343 354 … … 360 371 React.createElement("div", {className: "input-group"}, 361 372 React.createElement("span", {className: "input-group-addon nobkg"}, "in"), 362 363 364 373 React.createElement("button", {type: "button", className: "btn btn-default", onClick: this.toggleCorpusSelection}, 374 this.state.corpora.getSelectedMessage(), " ", React.createElement("span", {className: "caret"}) 375 ) 365 376 ), 366 377 … … 383 394 ), 384 395 396 React.createElement(Modal, {ref: "languageModal", title: "Select Language"}, 397 React.createElement(LanguageSelector, {anyLanguage: this.anyLanguage, 398 languageMap: this.state.languageMap, 399 selectedLanguage: this.state.language, 400 languageFilter: this.state.languageFilter, 401 languageChangeHandler: this.setLanguageAndFilter}) 402 ), 403 385 404 React.createElement("div", {className: "top-gap"}, 386 React.createElement(Results, {requests: this.state.hits.requests, results: this.state.hits.results}) 405 React.createElement(Results, {requests: this.state.hits.requests, 406 results: this.filterResults(), 407 searchedLanguage: this.state.language}) 387 408 ) 388 409 ) … … 396 417 397 418 419 ///////////////////////////////// 420 421 var LanguageSelector = React.createClass({displayName: 'LanguageSelector', 422 propTypes: { 423 anyLanguage: PT.array.isRequired, 424 languageMap: PT.object.isRequired, 425 selectedLanguage: PT.array.isRequired, 426 languageFilter: PT.string.isRequired, 427 languageChangeHandler: PT.func.isRequired, 428 }, 429 mixins: [React.addons.LinkedStateMixin], 430 431 selectLang: function(language) { 432 this.props.languageChangeHandler(language, this.props.languageFilter); 433 }, 434 435 setFilter: function(filter) { 436 this.props.languageChangeHandler(this.props.selectedLanguage, filter); 437 }, 438 439 renderLanguageObject: function(lang) { 440 var desc = lang[1] + " [" + lang[0] + "]"; 441 var style = { 442 whiteSpace: "nowrap", 443 fontWeight: lang[0] === this.props.selectedLanguage[0] ? "bold":"normal", 444 }; 445 return React.createElement("div", {key: lang[0]}, 446 React.createElement("a", {tabIndex: "-1", href: "#", style: style, onClick: this.selectLang.bind(this, lang)}, desc) 447 ); 448 }, 449 450 renderRadio: function(option) { 451 return this.props.languageFilter === option ? 452 React.createElement("input", {type: "radio", name: "filterOpts", value: option, checked: true, onChange: this.setFilter.bind(this, option)}) 453 : React.createElement("input", {type: "radio", name: "filterOpts", value: option, onChange: this.setFilter.bind(this, option)}); 454 }, 455 456 render: function() { 457 var languages = _.pairs(this.props.languageMap) 458 .sort(function(l1, l2){return l1[1].localeCompare(l2[1]); }); 459 languages.unshift(this.props.anyLanguage); 460 languages = languages.map(this.renderLanguageObject); 461 var third = Math.round(languages.length/3); 462 var l1 = languages.slice(0, third); 463 var l2 = languages.slice(third, 2*third); 464 var l3 = languages.slice(2*third, languages.length); 465 466 return React.createElement("div", null, 467 React.createElement("div", {className: "row"}, 468 React.createElement("div", {className: "col-sm-4"}, l1), 469 React.createElement("div", {className: "col-sm-4"}, l2), 470 React.createElement("div", {className: "col-sm-4"}, l3), 471 React.createElement("div", {className: "col-sm-12", style: {marginTop:10, marginBottom:10, borderBottom:"1px solid #eee"}}) 472 ), 473 React.createElement("form", {className: "form", role: "form"}, 474 React.createElement("div", {className: "input-group"}, 475 React.createElement("div", null, 476 React.createElement("label", {style: {color:'black'}}, 477 this.renderRadio('byMeta'), " ", 478 "Use the collections", "'", " specified language to filter results" 479 ) 480 ), 481 React.createElement("div", null, 482 React.createElement("label", {style: {color:'black'}}, 483 this.renderRadio('byGuess'), " ", 484 "Filter results by using a language detector" 485 ) 486 ), 487 React.createElement("div", null, 488 React.createElement("label", {style: {color:'black'}}, 489 this.renderRadio('byMetaAndGuess'), " ", 490 "First use the collections", "'", " specified language then also use a language detector" 491 ) 492 ) 493 ) 494 ) 495 ); 496 } 497 }); 398 498 ///////////////////////////////// 399 499 … … 442 542 requests: PT.array.isRequired, 443 543 results: PT.array.isRequired, 544 searchedLanguage: PT.array.isRequired, 444 545 }, 445 546 446 547 getInitialState: function () { 447 return { displayKwic: false }; 548 return { 549 displayKwic: false, 550 }; 448 551 }, 449 552 … … 453 556 454 557 renderRowLanguage: function(hit) { 455 return React.createElement("span", {style: {fontFace:"Courier",color:"black"}}, hit.language );558 return React.createElement("span", {style: {fontFace:"Courier",color:"black"}}, hit.language, " ") ; 456 559 }, 457 560 … … 467 570 468 571 renderRowsAsKwic: function(hit,i) { 469 var sleft={textAlign:"left", verticalAlign:" middle", width:"50%"};470 var scenter={textAlign:"center", verticalAlign:" middle", maxWidth:"50%"};471 var sright={textAlign:"right", verticalAlign:" middle", maxWidth:"50%"};572 var sleft={textAlign:"left", verticalAlign:"top", width:"50%"}; 573 var scenter={textAlign:"center", verticalAlign:"top", maxWidth:"50%"}; 574 var sright={textAlign:"right", verticalAlign:"top", maxWidth:"50%"}; 472 575 return React.createElement("tr", {key: i, className: "hitrow"}, 473 576 React.createElement("td", null, this.renderRowLanguage(hit)), … … 565 668 566 669 renderKwicCheckbox: function() { 567 return React.createElement("div", {key: "-option-KWIC-", className: "row"}, 568 React.createElement("div", {className: "float-right", style: {marginRight:17}}, 569 React.createElement("div", {className: "btn-group", style: {display:"inline-block"}}, 570 React.createElement("label", {forHtml: "inputKwic", className: "btn-default"}, 571 this.state.displayKwic ? 572 React.createElement("input", {id: "inputKwic", type: "checkbox", value: "kwic", checked: true, onChange: this.toggleKwic}) : 573 React.createElement("input", {id: "inputKwic", type: "checkbox", value: "kwic", onChange: this.toggleKwic}), 574 575 "Â " + ' ' + 576 "Display as Key Word In Context" 577 ) 670 return React.createElement("div", {className: "float-right", style: {marginRight:17}}, 671 React.createElement("div", {className: "btn-group", style: {display:"inline-block"}}, 672 React.createElement("label", {forHtml: "inputKwic", className: "btn-default"}, 673 this.state.displayKwic ? 674 React.createElement("input", {id: "inputKwic", type: "checkbox", value: "kwic", checked: true, onChange: this.toggleKwic}) : 675 React.createElement("input", {id: "inputKwic", type: "checkbox", value: "kwic", onChange: this.toggleKwic}), 676 677 "Â " + ' ' + 678 "Display as Key Word In Context" 578 679 ) 579 680 ) … … 592 693 React.createElement("div", {key: "-found-message-", style: margintop}, this.renderFoundMessage(hits), " "), 593 694 React.createElement("div", {key: "-progress-", style: margintop}, this.renderProgressBar()), 594 hits > 0 ? this.renderKwicCheckbox() : false, 695 hits > 0 ? 696 React.createElement("div", {key: "-option-KWIC-", className: "row"}, 697 this.renderKwicCheckbox() 698 ) 699 : false, 595 700 this.props.results.map(this.renderResultPanels) 596 701 )
Note: See TracChangeset
for help on using the changeset viewer.
