Make query parser mode select in the base HTML (#1009)
This commit is contained in:
toasted-nutbread
GitHub
parent
8dc961a61f
commit
6081e3bef0
@ -29,7 +29,8 @@ class QueryParser extends EventDispatcher {
|
||||
this._documentUtil = documentUtil;
|
||||
this._parseResults = [];
|
||||
this._queryParser = document.querySelector('#query-parser-content');
|
||||
this._queryParserSelect = document.querySelector('#query-parser-select-container');
|
||||
this._queryParserModeContainer = document.querySelector('#query-parser-mode-container');
|
||||
this._queryParserModeSelect = document.querySelector('#query-parser-mode-select');
|
||||
this._textScanner = new TextScanner({
|
||||
node: this._queryParser,
|
||||
ignoreElements: () => [],
|
||||
@ -45,6 +46,7 @@ class QueryParser extends EventDispatcher {
|
||||
prepare() {
|
||||
this._textScanner.prepare();
|
||||
this._textScanner.on('searched', this._onSearched.bind(this));
|
||||
this._queryParserModeSelect.addEventListener('change', this._onParserChange.bind(this), false);
|
||||
}
|
||||
|
||||
setOptions({selectedParser, termSpacing, scanning}) {
|
||||
@ -94,7 +96,7 @@ class QueryParser extends EventDispatcher {
|
||||
}
|
||||
|
||||
_onParserChange(e) {
|
||||
const value = e.target.value;
|
||||
const value = e.currentTarget.value;
|
||||
this._setSelectedParser(value);
|
||||
}
|
||||
|
||||
@ -128,13 +130,11 @@ class QueryParser extends EventDispatcher {
|
||||
}
|
||||
|
||||
_renderParserSelect() {
|
||||
this._queryParserSelect.textContent = '';
|
||||
if (this._parseResults.length > 1) {
|
||||
const selectedParser = this._selectedParser;
|
||||
const select = this._createParserSelect(this._parseResults, selectedParser);
|
||||
select.addEventListener('change', this._onParserChange.bind(this));
|
||||
this._queryParserSelect.appendChild(select);
|
||||
const visible = (this._parseResults.length > 1);
|
||||
if (visible) {
|
||||
this._updateParserModeSelect(this._queryParserModeSelect, this._parseResults, this._selectedParser);
|
||||
}
|
||||
this._queryParserModeContainer.hidden = !visible;
|
||||
}
|
||||
|
||||
_renderParseResult() {
|
||||
@ -144,12 +144,13 @@ class QueryParser extends EventDispatcher {
|
||||
this._queryParser.appendChild(this._createParseResult(parseResult.content, false));
|
||||
}
|
||||
|
||||
_createParserSelect(parseResults, selectedParser) {
|
||||
const select = document.createElement('select');
|
||||
select.className = 'query-parser-select form-control';
|
||||
_updateParserModeSelect(select, parseResults, selectedParser) {
|
||||
const fragment = document.createDocumentFragment();
|
||||
|
||||
let index = 0;
|
||||
let selectedIndex = -1;
|
||||
for (const parseResult of parseResults) {
|
||||
const option = document.createElement('option');
|
||||
option.className = 'query-parser-select-option';
|
||||
option.value = parseResult.id;
|
||||
switch (parseResult.source) {
|
||||
case 'scanning-parser':
|
||||
@ -159,13 +160,21 @@ class QueryParser extends EventDispatcher {
|
||||
option.textContent = `MeCab: ${parseResult.dictionary}`;
|
||||
break;
|
||||
default:
|
||||
option.textContent = 'Unrecognized dictionary';
|
||||
option.textContent = `Unknown source: ${parseResult.source}`;
|
||||
break;
|
||||
}
|
||||
option.defaultSelected = selectedParser === parseResult.id;
|
||||
select.appendChild(option);
|
||||
fragment.appendChild(option);
|
||||
|
||||
if (selectedParser === parseResult.id) {
|
||||
selectedIndex = index;
|
||||
}
|
||||
++index;
|
||||
}
|
||||
return select;
|
||||
|
||||
select.textContent = '';
|
||||
select.appendChild(fragment);
|
||||
select.selectedIndex = selectedIndex;
|
||||
}
|
||||
|
||||
_createParseResult(terms, preview) {
|
||||
|
||||
@ -32,6 +32,10 @@
|
||||
<label class="toggle"><input type="checkbox" id="clipboard-monitor-enable"><span class="toggle-body"><span class="toggle-track"></span><span class="toggle-knob"></span></span></label>
|
||||
<span class="search-option-label">Clipboard monitor</span>
|
||||
</label>
|
||||
<div class="search-option" id="query-parser-mode-container" hidden>
|
||||
<span class="search-option-pre-label">Parser:</span>
|
||||
<select id="query-parser-mode-select"></select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="search-textbox-container">
|
||||
<textarea id="search-textbox" placeholder="Input a term, expression, sentence, or block of text" autocomplete="false" autofocus></textarea>
|
||||
@ -42,7 +46,6 @@
|
||||
<div id="spinner" hidden><img src="/mixed/img/spinner.gif"></div>
|
||||
|
||||
<div class="scan-disable" id="query-parser-container">
|
||||
<div id="query-parser-select-container"></div>
|
||||
<div id="query-parser-content"></div>
|
||||
</div>
|
||||
|
||||
|
||||
@ -23,7 +23,9 @@
|
||||
</div></div><div class="navigation-header-spacer"></div>
|
||||
|
||||
<div class="scan-disable" id="query-parser-container" hidden>
|
||||
<div id="query-parser-select-container" class="input-group"></div>
|
||||
<div class="search-option" id="query-parser-mode-container" hidden>
|
||||
<select id="query-parser-mode-select"></select>
|
||||
</div>
|
||||
<div id="query-parser-content"></div>
|
||||
</div>
|
||||
|
||||
|
||||
@ -17,6 +17,7 @@
|
||||
|
||||
/* Variables */
|
||||
:root {
|
||||
--padding: 10px;
|
||||
--main-content-size: 700px;
|
||||
--main-content-padding: 10px;
|
||||
--shadow-color: rgba(0, 0, 0, 0.185);
|
||||
@ -33,6 +34,11 @@
|
||||
--animation-duration: 0s;
|
||||
--animation-duration2: calc(var(--animation-duration) * 2);
|
||||
|
||||
--material-arrow-dimension1: 5px;
|
||||
--material-arrow-dimension2: 10px;
|
||||
--input-height: 32px;
|
||||
--input-width-large: 200px;
|
||||
|
||||
--text-color-default: #222222;
|
||||
--background-color: #ffffff;
|
||||
--background-color-light: #ffffff;
|
||||
@ -95,6 +101,30 @@ h1 {
|
||||
border-bottom: var(--thin-border-size) solid var(--separator-color1);
|
||||
}
|
||||
|
||||
/* Material design select */
|
||||
select {
|
||||
width: var(--input-width-large);
|
||||
height: var(--input-height);
|
||||
line-height: var(--input-height);
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
box-sizing: border-box;
|
||||
padding: 0 0.5em;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
background-image: url(/mixed/img/material-down-arrow.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-position: right var(--padding) center;
|
||||
background-color: var(--input-background-color);
|
||||
background-size: var(--material-arrow-dimension2) var(--material-arrow-dimension1);
|
||||
cursor: pointer;
|
||||
outline: 0;
|
||||
}
|
||||
select::-ms-expand {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Material design toggle switch */
|
||||
label.toggle {
|
||||
cursor: default;
|
||||
@ -302,15 +332,31 @@ label.toggle {
|
||||
align-items: center;
|
||||
}
|
||||
.search-option {
|
||||
display: flex;
|
||||
flex: 0 1 auto;
|
||||
margin: 0.5em 1em;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
.search-option:not([hidden]) {
|
||||
display: flex;
|
||||
}
|
||||
.search-option-label {
|
||||
padding-left: 0.5em;
|
||||
}
|
||||
.search-option-pre-label {
|
||||
padding-right: 0.5em;
|
||||
}
|
||||
#query-parser-mode-container {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
#query-parser-mode-container:not([hidden]) {
|
||||
display: flex;
|
||||
}
|
||||
#query-parser-mode-select {
|
||||
flex: 1 1 auto;
|
||||
max-width: 220px;
|
||||
min-width: 100px;
|
||||
}
|
||||
|
||||
/* Search styles */
|
||||
#intro {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user