diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/settings/components/form/search-engine-form.jsx | 69 | ||||
| -rw-r--r-- | src/settings/components/form/search-engine-form.scss | 38 | ||||
| -rw-r--r-- | src/settings/components/index.jsx | 27 | ||||
| -rw-r--r-- | src/shared/default-settings.js | 16 |
4 files changed, 131 insertions, 19 deletions
diff --git a/src/settings/components/form/search-engine-form.jsx b/src/settings/components/form/search-engine-form.jsx new file mode 100644 index 0000000..77da304 --- /dev/null +++ b/src/settings/components/form/search-engine-form.jsx @@ -0,0 +1,69 @@ +import { h, Component } from 'preact'; +import './search-engine-form.scss'; + +class SearchEngineForm extends Component { + + render() { + let value = this.props.value; + if (!value) { + value = { default: '', engines: []}; + } + let { + default: defaultEngine, + engines + } = value; + + return <div className='form-search-engine-form'> + <div className='form-search-engine-form-header'> + <div className='column-name'>Name</div> + <div className='column-url'>URL</div> + <div className='column-option'>Default</div> + </div> + { + engines.map((engine, index) => { + return <div key={index} className='form-search-engine-form-row'> + <input data-index={index} type='text' name='name' + className='column-name' value={engine[0]} + onChange={this.bindValue.bind(this)} /> + <input data-index={index} type='text' name='url' + placeholder='http://example.com/?q={}' + className='column-url' value={engine[1]} + onChange={this.bindValue.bind(this)} /> + <div className='column-option'> + <input data-index={index} type='radio' name='default' + checked={defaultEngine === engine[0]} + onChange={this.bindValue.bind(this)} /> + <input data-index={index} type='button' name='delete' + value='✖' + onClick={this.bindValue.bind(this)} /> + </div> + </div>; + }) + } + </div>; + } + + bindValue(e) { + if (!this.props.onChange) { + return; + } + + let name = e.target.name; + let index = e.target.getAttribute('data-index'); + let next = Object.assign({}, this.props.value); + + if (name === 'name') { + next.engines[index][0] = e.target.value; + } else if (name === 'url') { + next.engines[index][1] = e.target.value; + } else if (name === 'default') { + next.default = this.props.value.engines[index][0]; + } else if (name === 'delete') { + next.engines.splice(index, 1); + } + + this.props.onChange(next); + } +} + +export default SearchEngineForm; diff --git a/src/settings/components/form/search-engine-form.scss b/src/settings/components/form/search-engine-form.scss new file mode 100644 index 0000000..1ca43b7 --- /dev/null +++ b/src/settings/components/form/search-engine-form.scss @@ -0,0 +1,38 @@ +.form-search-engine-form { + @mixin row-base { + display: flex; + + .column-name { + flex: 1; + } + .column-url { + flex: 5; + } + .column-option { + text-align: right; + flex-basis: 5rem; + } + } + + &-header { + @include row-base; + + font-weight: bold; + } + + &-row { + @include row-base; + + .column-option input[type='button'] { + border: none; + padding: 4; + display: inline; + background: none; + color: red; + + &:hover { + color: darkred; + } + } + } +} diff --git a/src/settings/components/index.jsx b/src/settings/components/index.jsx index 11411bd..8fe7d4d 100644 --- a/src/settings/components/index.jsx +++ b/src/settings/components/index.jsx @@ -1,6 +1,7 @@ import './site.scss'; import { h, Component } from 'preact'; import Input from './ui/input'; +import SearchEngineForm from './form/search-engine-form'; import * as settingActions from 'settings/actions/setting'; import * as validator from 'shared/validators/setting'; @@ -116,6 +117,13 @@ class SettingsComponent extends Component { { keymapFields } </div> </fieldset> + <fieldset> + <legend>Search Engines</legend> + <SearchEngineForm + value={this.state.settings.form.search} + onChange={this.bindSearchForm.bind(this)} + /> + </fieldset> </div>; } @@ -128,7 +136,6 @@ class SettingsComponent extends Component { spellCheck='false' error={this.state.errors.json} onChange={this.bindValue.bind(this)} - onBlur={this.save.bind(this)} value={this.state.settings.json} /> </div>; @@ -175,6 +182,13 @@ class SettingsComponent extends Component { } } + bindSearchForm(value) { + let next = Object.assign({}, this.state); + next.settings.form.search = value; + this.setState(next); + this.context.store.dispatch(settingActions.save(next.settings)); + } + bindValue(e) { let next = Object.assign({}, this.state); @@ -187,6 +201,7 @@ class SettingsComponent extends Component { next.settings[e.target.name] = e.target.value; this.setState(next); + this.context.store.dispatch(settingActions.save(next.settings)); } bindFormKeymapsValue(e) { @@ -196,16 +211,6 @@ class SettingsComponent extends Component { this.context.store.dispatch(settingActions.save(next.settings)); } - - save() { - try { - let json = this.state.settings.json; - validator.validate(JSON.parse(json)); - this.context.store.dispatch(settingActions.save(this.state.settings)); - } catch (err) { - // error already shown - } - } } export default SettingsComponent; diff --git a/src/shared/default-settings.js b/src/shared/default-settings.js index c1402b7..6d2013b 100644 --- a/src/shared/default-settings.js +++ b/src/shared/default-settings.js @@ -117,14 +117,14 @@ export default { }, 'search': { 'default': 'google', - 'engines': { - 'google': 'https://google.com/search?q={}', - 'yahoo': 'https://search.yahoo.com/search?p={}', - 'bing': 'https://www.bing.com/search?q={}', - 'duckduckgo': 'https://duckduckgo.com/?q={}', - 'twitter': 'https://twitter.com/search?q={}', - 'wikipedia': 'https://en.wikipedia.org/w/index.php?search={}' - } + 'engines': [ + ['google', 'https,//google.com/search?q={}'], + ['yahoo', 'https,//search.yahoo.com/search?p={}'], + ['bing', 'https,//www.bing.com/search?q={}'], + ['duckduckgo', 'https,//duckduckgo.com/?q={}'], + ['twitter', 'https,//twitter.com/search?q={}'], + ['wikipedia', 'https,//en.wikipedia.org/w/index.php?search={}'], + ] } } }; |