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
+
+
Name
+
URL
+
Default
+
+ { + engines.map((engine, index) => { + return
+ + +
+ + +
+
; + }) + } +
; + } + + 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 } +
+ Search Engines + +
; } @@ -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} /> ; @@ -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={}'], + ] } } };