From 7b44b652473b487e2d00a5b705a7f78ee66dec65 Mon Sep 17 00:00:00 2001 From: Shin'ya Ueoka Date: Thu, 23 Nov 2017 21:22:42 +0900 Subject: Add search form --- .../components/form/search-engine-form.jsx | 69 ++++++++++++++++++++++ .../components/form/search-engine-form.scss | 38 ++++++++++++ 2 files changed, 107 insertions(+) create mode 100644 src/settings/components/form/search-engine-form.jsx create mode 100644 src/settings/components/form/search-engine-form.scss (limited to 'src/settings/components/form') 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; + } + } + } +} -- cgit v1.2.3 From 2641183a5b244a9640d8fb7e92ba95dc15dadc58 Mon Sep 17 00:00:00 2001 From: Shin'ya Ueoka Date: Sat, 25 Nov 2017 12:31:24 +0900 Subject: keymaps form --- src/settings/components/form/keymaps-form.jsx | 95 +++++++++++++++++++++++++ src/settings/components/form/keymaps-form.scss | 9 +++ src/settings/components/index.jsx | 97 ++++---------------------- src/settings/components/site.scss | 10 --- 4 files changed, 116 insertions(+), 95 deletions(-) create mode 100644 src/settings/components/form/keymaps-form.jsx create mode 100644 src/settings/components/form/keymaps-form.scss (limited to 'src/settings/components/form') diff --git a/src/settings/components/form/keymaps-form.jsx b/src/settings/components/form/keymaps-form.jsx new file mode 100644 index 0000000..a112979 --- /dev/null +++ b/src/settings/components/form/keymaps-form.jsx @@ -0,0 +1,95 @@ +import './keymaps-form.scss'; +import { h, Component } from 'preact'; +import Input from '../ui/input'; + +const KeyMapFields = [ + [ + ['scroll.vertically?{count:-1}', 'Scroll down'], + ['scroll.vertically?{count:1}', 'Scroll up'], + ['scroll.horizonally?{count:-1}', 'Scroll left'], + ['scroll.horizonally?{count:1}', 'Scroll right'], + ['scroll.home', 'Scroll leftmost'], + ['scroll.end', 'Scroll last'], + ['scroll.pages?{count:-0.5}', 'Scroll up by half of screen'], + ['scroll.pages?{count:0.5}', 'Scroll up by half of screen'], + ['scroll.pages?{count:-1}', 'Scroll up by a screen'], + ['scroll.pages?{count:1}', 'Scroll up by a screen'], + ], [ + ['tabs.close', 'Close a tab'], + ['tabs.reopen', 'Reopen closed tab'], + ['tabs.next?{count:1}', 'Select next Tab'], + ['tabs.prev?{count:1}', 'Select prev Tab'], + ['tabs.first', 'Select first tab'], + ['tabs.last', 'Select last tab'], + ['tabs.reload?{cache:true}', 'Reload current tab'], + ['tabs.pin.toggle', 'Toggle pinned state'], + ['tabs.duplicate', 'Dupplicate a tab'], + ], [ + ['follow.start?{newTab:false}', 'Follow a link'], + ['follow.start?{newTab:true}', 'Follow a link in new tab'], + ['navigate.histories.prev', 'Go back in histories'], + ['navigate.histories.next', 'Go forward in histories'], + ['navigate.link.next', 'Open next link'], + ['navigate.link.prev', 'Open previous link'], + ['navigate.parent', 'Go to parent directory'], + ['navigate.root', 'Go to root directory'], + ], [ + ['find.start', 'Start find mode'], + ['find.next', 'Find next word'], + ['find.prev', 'Find previous word'], + ], [ + ['command.show', 'Open console'], + ['command.show.open?{alter:false}', 'Open URL'], + ['command.show.open?{alter:true}', 'Alter URL'], + ['command.show.tabopen?{alter:false}', 'Open URL in new Tab'], + ['command.show.tabopen?{alter:true}', 'Alter URL in new Tab'], + ['command.show.winopen?{alter:false}', 'Open URL in new window'], + ['command.show.winopen?{alter:true}', 'Alter URL in new window'], + ['command.show.buffer', 'Open buffer command'], + ], [ + ['addon.toggle.enabled', 'Enable or disable'], + ['urls.yank', 'Copy current URL'], + ['zoom.in', 'Zoom-in'], + ['zoom.out', 'Zoom-out'], + ['zoom.neutral', 'Reset zoom level'], + ] +]; + +class KeymapsForm extends Component { + + render() { + return
+ { + KeyMapFields.map((group, index) => { + return
+ { + group.map((field) => { + let name = field[0]; + let label = field[1]; + let value = this.props.value[name]; + return ; + }) + } +
; + }) + } +
; + } + + bindValue(e) { + if (!this.props.onChange) { + return; + } + + let next = Object.assign({}, this.props.value); + next[e.target.name] = e.target.value; + + this.props.onChange(next); + } +} + +export default KeymapsForm; diff --git a/src/settings/components/form/keymaps-form.scss b/src/settings/components/form/keymaps-form.scss new file mode 100644 index 0000000..8b86c80 --- /dev/null +++ b/src/settings/components/form/keymaps-form.scss @@ -0,0 +1,9 @@ +.form-keymaps-form { + column-count: 2; + .keymap-fields-group { + margin-top: 24px; + } + .keymap-fields-group:first-of-type { + margin-top: 0; + } +} diff --git a/src/settings/components/index.jsx b/src/settings/components/index.jsx index 8fe7d4d..e5b46ad 100644 --- a/src/settings/components/index.jsx +++ b/src/settings/components/index.jsx @@ -2,62 +2,10 @@ import './site.scss'; import { h, Component } from 'preact'; import Input from './ui/input'; import SearchEngineForm from './form/search-engine-form'; +import KeymapsForm from './form/keymaps-form'; import * as settingActions from 'settings/actions/setting'; import * as validator from 'shared/validators/setting'; -const KeyMapFields = [ - [ - ['scroll.vertically?{count:-1}', 'Scroll down'], - ['scroll.vertically?{count:1}', 'Scroll up'], - ['scroll.horizonally?{count:-1}', 'Scroll left'], - ['scroll.horizonally?{count:1}', 'Scroll right'], - ['scroll.home', 'Scroll leftmost'], - ['scroll.end', 'Scroll last'], - ['scroll.pages?{count:-0.5}', 'Scroll up by half of screen'], - ['scroll.pages?{count:0.5}', 'Scroll up by half of screen'], - ['scroll.pages?{count:-1}', 'Scroll up by a screen'], - ['scroll.pages?{count:1}', 'Scroll up by a screen'], - ], [ - ['tabs.close', 'Close a tab'], - ['tabs.reopen', 'Reopen closed tab'], - ['tabs.next?{count:1}', 'Select next Tab'], - ['tabs.prev?{count:1}', 'Select prev Tab'], - ['tabs.first', 'Select first tab'], - ['tabs.last', 'Select last tab'], - ['tabs.reload?{cache:true}', 'Reload current tab'], - ['tabs.pin.toggle', 'Toggle pinned state'], - ['tabs.duplicate', 'Dupplicate a tab'], - ], [ - ['follow.start?{newTab:false}', 'Follow a link'], - ['follow.start?{newTab:true}', 'Follow a link in new tab'], - ['navigate.histories.prev', 'Go back in histories'], - ['navigate.histories.next', 'Go forward in histories'], - ['navigate.link.next', 'Open next link'], - ['navigate.link.prev', 'Open previous link'], - ['navigate.parent', 'Go to parent directory'], - ['navigate.root', 'Go to root directory'], - ], [ - ['find.start', 'Start find mode'], - ['find.next', 'Find next word'], - ['find.prev', 'Find previous word'], - ], [ - ['command.show', 'Open console'], - ['command.show.open?{alter:false}', 'Open URL'], - ['command.show.open?{alter:true}', 'Alter URL'], - ['command.show.tabopen?{alter:false}', 'Open URL in new Tab'], - ['command.show.tabopen?{alter:true}', 'Alter URL in new Tab'], - ['command.show.winopen?{alter:false}', 'Open URL in new window'], - ['command.show.winopen?{alter:true}', 'Alter URL in new window'], - ['command.show.buffer', 'Open buffer command'], - ], [ - ['addon.toggle.enabled', 'Enable or disable'], - ['urls.yank', 'Copy current URL'], - ['zoom.in', 'Zoom-in'], - ['zoom.out', 'Zoom-out'], - ['zoom.neutral', 'Reset zoom level'], - ] -]; - class SettingsComponent extends Component { constructor(props, context) { super(props, context); @@ -89,33 +37,13 @@ class SettingsComponent extends Component { } renderFormFields() { - let keymapFields = KeyMapFields.map((group, index) => { - return
- { - group.map((field) => { - let name = field[0]; - let label = field[1]; - let value = this.state.settings.form.keymaps[name]; - return ; - }) - } -
; - }); - return
Keybindings -
- { keymapFields } -
+
Search Engines @@ -189,6 +117,13 @@ class SettingsComponent extends Component { this.context.store.dispatch(settingActions.save(next.settings)); } + bindKeymapsForm(value) { + let next = Object.assign({}, this.state); + next.settings.form.keymaps = value; + this.setState(next); + this.context.store.dispatch(settingActions.save(next.settings)); + } + bindValue(e) { let next = Object.assign({}, this.state); @@ -203,14 +138,6 @@ class SettingsComponent extends Component { this.setState(next); this.context.store.dispatch(settingActions.save(next.settings)); } - - bindFormKeymapsValue(e) { - let next = Object.assign({}, this.state); - - next.settings.form.keymaps[e.target.name] = e.target.value; - - this.context.store.dispatch(settingActions.save(next.settings)); - } } export default SettingsComponent; diff --git a/src/settings/components/site.scss b/src/settings/components/site.scss index dcc52ce..c8dd422 100644 --- a/src/settings/components/site.scss +++ b/src/settings/components/site.scss @@ -24,14 +24,4 @@ font-weight: bold; } } - - .keymap-fields{ - column-count: 2; - .keymap-fields-group { - margin-top: 24px; - } - .keymap-fields-group:first-of-type { - margin-top: 0; - } - } } -- cgit v1.2.3 From bbad1c6c6adf65de031111340f8bf5e46cc41ca6 Mon Sep 17 00:00:00 2001 From: Shin'ya Ueoka Date: Sat, 25 Nov 2017 13:58:25 +0900 Subject: delete button --- src/settings/components/form/search-engine-form.jsx | 6 +++--- src/settings/components/form/search-engine-form.scss | 12 ------------ src/settings/components/ui/delete-button.jsx | 12 ++++++++++++ src/settings/components/ui/delete-button.scss | 12 ++++++++++++ 4 files changed, 27 insertions(+), 15 deletions(-) create mode 100644 src/settings/components/ui/delete-button.jsx create mode 100644 src/settings/components/ui/delete-button.scss (limited to 'src/settings/components/form') diff --git a/src/settings/components/form/search-engine-form.jsx b/src/settings/components/form/search-engine-form.jsx index 77da304..c86522a 100644 --- a/src/settings/components/form/search-engine-form.jsx +++ b/src/settings/components/form/search-engine-form.jsx @@ -1,5 +1,6 @@ -import { h, Component } from 'preact'; import './search-engine-form.scss'; +import { h, Component } from 'preact'; +import DeleteButton from '../ui/delete-button'; class SearchEngineForm extends Component { @@ -33,8 +34,7 @@ class SearchEngineForm extends Component { -
; diff --git a/src/settings/components/form/search-engine-form.scss b/src/settings/components/form/search-engine-form.scss index 1ca43b7..0d33c23 100644 --- a/src/settings/components/form/search-engine-form.scss +++ b/src/settings/components/form/search-engine-form.scss @@ -22,17 +22,5 @@ &-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/ui/delete-button.jsx b/src/settings/components/ui/delete-button.jsx new file mode 100644 index 0000000..8077a76 --- /dev/null +++ b/src/settings/components/ui/delete-button.jsx @@ -0,0 +1,12 @@ +import './delete-button.scss'; +import { h, Component } from 'preact'; + +class DeleteButton extends Component { + render() { + return ; + } +} + +export default DeleteButton; diff --git a/src/settings/components/ui/delete-button.scss b/src/settings/components/ui/delete-button.scss new file mode 100644 index 0000000..7aa2f39 --- /dev/null +++ b/src/settings/components/ui/delete-button.scss @@ -0,0 +1,12 @@ + +.ui-delete-button { + border: none; + padding: 4; + display: inline; + background: none; + color: red; + + &:hover { + color: darkred; + } +} -- cgit v1.2.3 From df10208ed5dfbc823eb1979272903d74f02a898c Mon Sep 17 00:00:00 2001 From: Shin'ya Ueoka Date: Sat, 25 Nov 2017 14:59:03 +0900 Subject: blacklist form --- src/settings/components/form/blacklist-form.jsx | 47 ++++++++++++++++++++++++ src/settings/components/form/blacklist-form.scss | 9 +++++ src/settings/components/index.jsx | 29 +++++++++------ src/shared/default-settings.js | 3 +- 4 files changed, 75 insertions(+), 13 deletions(-) create mode 100644 src/settings/components/form/blacklist-form.jsx create mode 100644 src/settings/components/form/blacklist-form.scss (limited to 'src/settings/components/form') diff --git a/src/settings/components/form/blacklist-form.jsx b/src/settings/components/form/blacklist-form.jsx new file mode 100644 index 0000000..83b54da --- /dev/null +++ b/src/settings/components/form/blacklist-form.jsx @@ -0,0 +1,47 @@ +import './blacklist-form.scss'; +import DeleteButton from '../ui/delete-button'; +import { h, Component } from 'preact'; + +class BlacklistForm extends Component { + + render() { + let value = this.props.value; + if (!value) { + value = []; + } + + return
+ { + value.map((url, index) => { + return
+ + +
; + }) + } +
; + } + + bindValue(e) { + if (!this.props.onChange) { + return; + } + + let name = e.target.name; + let index = e.target.getAttribute('data-index'); + let next = this.props.value.slice(); + + if (name === 'url') { + next[index] = e.target.value; + } else if (name === 'delete') { + next.splice(index, 1); + } + + this.props.onChange(next); + } +} + +export default BlacklistForm; diff --git a/src/settings/components/form/blacklist-form.scss b/src/settings/components/form/blacklist-form.scss new file mode 100644 index 0000000..a230d0d --- /dev/null +++ b/src/settings/components/form/blacklist-form.scss @@ -0,0 +1,9 @@ +.form-blacklist-form { + &-row { + display: flex; + + .column-url { + flex: 1; + } + } +} diff --git a/src/settings/components/index.jsx b/src/settings/components/index.jsx index e5b46ad..fb25df6 100644 --- a/src/settings/components/index.jsx +++ b/src/settings/components/index.jsx @@ -3,6 +3,7 @@ import { h, Component } from 'preact'; import Input from './ui/input'; import SearchEngineForm from './form/search-engine-form'; import KeymapsForm from './form/keymaps-form'; +import BlacklistForm from './form/blacklist-form'; import * as settingActions from 'settings/actions/setting'; import * as validator from 'shared/validators/setting'; @@ -42,14 +43,21 @@ class SettingsComponent extends Component { Keybindings this.bindForm('keymaps', value)} />
Search Engines this.bindForm('search', value)} + /> +
+
+ Blacklist + this.bindForm('blacklist', value)} />
; @@ -110,16 +118,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)); - } - - bindKeymapsForm(value) { - let next = Object.assign({}, this.state); - next.settings.form.keymaps = value; + bindForm(name, value) { + let next = Object.assign({}, this.state, { + settings: Object.assign({}, this.state.settings, { + form: Object.assign({}, this.state.settings.form) + }) + }); + next.settings.form[name] = value; this.setState(next); this.context.store.dispatch(settingActions.save(next.settings)); } diff --git a/src/shared/default-settings.js b/src/shared/default-settings.js index 6d2013b..218390b 100644 --- a/src/shared/default-settings.js +++ b/src/shared/default-settings.js @@ -125,6 +125,7 @@ export default { ['twitter', 'https,//twitter.com/search?q={}'], ['wikipedia', 'https,//en.wikipedia.org/w/index.php?search={}'], ] - } + }, + 'blacklist': [], } }; -- cgit v1.2.3 From 507000619377f82ca63251c8c5db98af690a5ed2 Mon Sep 17 00:00:00 2001 From: Shin'ya Ueoka Date: Sat, 25 Nov 2017 15:08:41 +0900 Subject: add button --- src/settings/components/form/blacklist-form.jsx | 4 ++++ src/settings/components/form/search-engine-form.jsx | 4 ++++ src/settings/components/ui/add-button.jsx | 12 ++++++++++++ src/settings/components/ui/add-button.scss | 3 +++ 4 files changed, 23 insertions(+) create mode 100644 src/settings/components/ui/add-button.jsx create mode 100644 src/settings/components/ui/add-button.scss (limited to 'src/settings/components/form') diff --git a/src/settings/components/form/blacklist-form.jsx b/src/settings/components/form/blacklist-form.jsx index 83b54da..9cb547b 100644 --- a/src/settings/components/form/blacklist-form.jsx +++ b/src/settings/components/form/blacklist-form.jsx @@ -1,4 +1,5 @@ import './blacklist-form.scss'; +import AddButton from '../ui/add-button'; import DeleteButton from '../ui/delete-button'; import { h, Component } from 'preact'; @@ -22,6 +23,7 @@ class BlacklistForm extends Component { ; }) } + ; } @@ -36,6 +38,8 @@ class BlacklistForm extends Component { if (name === 'url') { next[index] = e.target.value; + } else if (name === 'add') { + next.push(''); } else if (name === 'delete') { next.splice(index, 1); } diff --git a/src/settings/components/form/search-engine-form.jsx b/src/settings/components/form/search-engine-form.jsx index c86522a..faa066f 100644 --- a/src/settings/components/form/search-engine-form.jsx +++ b/src/settings/components/form/search-engine-form.jsx @@ -1,5 +1,6 @@ import './search-engine-form.scss'; import { h, Component } from 'preact'; +import AddButton from '../ui/add-button'; import DeleteButton from '../ui/delete-button'; class SearchEngineForm extends Component { @@ -40,6 +41,7 @@ class SearchEngineForm extends Component { ; }) } + ; } @@ -58,6 +60,8 @@ class SearchEngineForm extends Component { next.engines[index][1] = e.target.value; } else if (name === 'default') { next.default = this.props.value.engines[index][0]; + } else if (name === 'add') { + next.engines.push(['', '']); } else if (name === 'delete') { next.engines.splice(index, 1); } diff --git a/src/settings/components/ui/add-button.jsx b/src/settings/components/ui/add-button.jsx new file mode 100644 index 0000000..c8d8856 --- /dev/null +++ b/src/settings/components/ui/add-button.jsx @@ -0,0 +1,12 @@ +import './add-button.scss'; +import { h, Component } from 'preact'; + +class AddButton extends Component { + render() { + return ; + } +} + +export default AddButton; diff --git a/src/settings/components/ui/add-button.scss b/src/settings/components/ui/add-button.scss new file mode 100644 index 0000000..1c893ae --- /dev/null +++ b/src/settings/components/ui/add-button.scss @@ -0,0 +1,3 @@ +.ui-add-button { + font-size: 80% +} -- cgit v1.2.3 From f27d21908a2b402e3274288d4411a48160f38e4c Mon Sep 17 00:00:00 2001 From: Shin'ya Ueoka Date: Sat, 25 Nov 2017 18:03:15 +0900 Subject: load settiongs from form --- src/settings/actions/setting.js | 12 ++- src/settings/components/form/keymaps-form.jsx | 38 ++++---- src/shared/default-settings.js | 131 -------------------------- src/shared/settings/default.js | 131 ++++++++++++++++++++++++++ src/shared/settings/values.js | 35 +++++++ 5 files changed, 195 insertions(+), 152 deletions(-) delete mode 100644 src/shared/default-settings.js create mode 100644 src/shared/settings/default.js create mode 100644 src/shared/settings/values.js (limited to 'src/settings/components/form') diff --git a/src/settings/actions/setting.js b/src/settings/actions/setting.js index fa158a3..1d4ef34 100644 --- a/src/settings/actions/setting.js +++ b/src/settings/actions/setting.js @@ -1,6 +1,7 @@ import actions from 'settings/actions'; import messages from 'shared/messages'; -import DefaultSettings from 'shared/default-settings'; +import DefaultSettings from 'shared/settings/default'; +import * as settingsValues from 'shared/settings/values'; const load = () => { return browser.storage.local.get('settings').then(({ settings }) => { @@ -24,12 +25,19 @@ const save = (settings) => { }; const set = (settings) => { + let value = JSON.parse(DefaultSettings.json); + if (settings.source === 'json') { + value = settingsValues.fromJson(settings.json); + } else if (settings.source === 'form') { + value = settingsValues.fromForm(settings.form); + } + return { type: actions.SETTING_SET_SETTINGS, source: settings.source, json: settings.json, form: settings.form, - value: JSON.parse(settings.json), + value, }; }; diff --git a/src/settings/components/form/keymaps-form.jsx b/src/settings/components/form/keymaps-form.jsx index a112979..a827e4e 100644 --- a/src/settings/components/form/keymaps-form.jsx +++ b/src/settings/components/form/keymaps-form.jsx @@ -4,29 +4,29 @@ import Input from '../ui/input'; const KeyMapFields = [ [ - ['scroll.vertically?{count:-1}', 'Scroll down'], - ['scroll.vertically?{count:1}', 'Scroll up'], - ['scroll.horizonally?{count:-1}', 'Scroll left'], - ['scroll.horizonally?{count:1}', 'Scroll right'], + ['scroll.vertically?{"count":1}', 'Scroll down'], + ['scroll.vertically?{"count":-1}', 'Scroll up'], + ['scroll.horizonally?{"count":-1}', 'Scroll left'], + ['scroll.horizonally?{"count":1}', 'Scroll right'], ['scroll.home', 'Scroll leftmost'], ['scroll.end', 'Scroll last'], - ['scroll.pages?{count:-0.5}', 'Scroll up by half of screen'], - ['scroll.pages?{count:0.5}', 'Scroll up by half of screen'], - ['scroll.pages?{count:-1}', 'Scroll up by a screen'], - ['scroll.pages?{count:1}', 'Scroll up by a screen'], + ['scroll.pages?{"count":-0.5}', 'Scroll up by half of screen'], + ['scroll.pages?{"count":0.5}', 'Scroll up by half of screen'], + ['scroll.pages?{"count":-1}', 'Scroll up by a screen'], + ['scroll.pages?{"count":1}', 'Scroll up by a screen'], ], [ ['tabs.close', 'Close a tab'], ['tabs.reopen', 'Reopen closed tab'], - ['tabs.next?{count:1}', 'Select next Tab'], - ['tabs.prev?{count:1}', 'Select prev Tab'], + ['tabs.next?{"count":1}', 'Select next Tab'], + ['tabs.prev?{"count":1}', 'Select prev Tab'], ['tabs.first', 'Select first tab'], ['tabs.last', 'Select last tab'], - ['tabs.reload?{cache:true}', 'Reload current tab'], + ['tabs.reload?{"cache":true}', 'Reload current tab'], ['tabs.pin.toggle', 'Toggle pinned state'], ['tabs.duplicate', 'Dupplicate a tab'], ], [ - ['follow.start?{newTab:false}', 'Follow a link'], - ['follow.start?{newTab:true}', 'Follow a link in new tab'], + ['follow.start?{"newTab":false}', 'Follow a link'], + ['follow.start?{"newTab":true}', 'Follow a link in new tab'], ['navigate.histories.prev', 'Go back in histories'], ['navigate.histories.next', 'Go forward in histories'], ['navigate.link.next', 'Open next link'], @@ -39,12 +39,12 @@ const KeyMapFields = [ ['find.prev', 'Find previous word'], ], [ ['command.show', 'Open console'], - ['command.show.open?{alter:false}', 'Open URL'], - ['command.show.open?{alter:true}', 'Alter URL'], - ['command.show.tabopen?{alter:false}', 'Open URL in new Tab'], - ['command.show.tabopen?{alter:true}', 'Alter URL in new Tab'], - ['command.show.winopen?{alter:false}', 'Open URL in new window'], - ['command.show.winopen?{alter:true}', 'Alter URL in new window'], + ['command.show.open?{"alter":false}', 'Open URL'], + ['command.show.open?{"alter":true}', 'Alter URL'], + ['command.show.tabopen?{"alter":false}', 'Open URL in new Tab'], + ['command.show.tabopen?{"alter":true}', 'Alter URL in new Tab'], + ['command.show.winopen?{"alter":false}', 'Open URL in new window'], + ['command.show.winopen?{"alter":true}', 'Alter URL in new window'], ['command.show.buffer', 'Open buffer command'], ], [ ['addon.toggle.enabled', 'Enable or disable'], diff --git a/src/shared/default-settings.js b/src/shared/default-settings.js deleted file mode 100644 index 218390b..0000000 --- a/src/shared/default-settings.js +++ /dev/null @@ -1,131 +0,0 @@ -export default { - source: 'json', - json: `{ - "keymaps": { - "0": { "type": "scroll.home" }, - ":": { "type": "command.show" }, - "o": { "type": "command.show.open", "alter": false }, - "O": { "type": "command.show.open", "alter": true }, - "t": { "type": "command.show.tabopen", "alter": false }, - "T": { "type": "command.show.tabopen", "alter": true }, - "w": { "type": "command.show.winopen", "alter": false }, - "W": { "type": "command.show.winopen", "alter": true }, - "b": { "type": "command.show.buffer" }, - "k": { "type": "scroll.vertically", "count": -1 }, - "j": { "type": "scroll.vertically", "count": 1 }, - "h": { "type": "scroll.horizonally", "count": -1 }, - "l": { "type": "scroll.horizonally", "count": 1 }, - "": { "type": "scroll.vertically", "count": -1 }, - "": { "type": "scroll.vertically", "count": 1 }, - "": { "type": "scroll.pages", "count": -0.5 }, - "": { "type": "scroll.pages", "count": 0.5 }, - "": { "type": "scroll.pages", "count": -1 }, - "": { "type": "scroll.pages", "count": 1 }, - "gg": { "type": "scroll.top" }, - "G": { "type": "scroll.bottom" }, - "$": { "type": "scroll.end" }, - "d": { "type": "tabs.close" }, - "u": { "type": "tabs.reopen" }, - "K": { "type": "tabs.prev", "count": 1 }, - "J": { "type": "tabs.next", "count": 1 }, - "g0": { "type": "tabs.first" }, - "g$": { "type": "tabs.last" }, - "r": { "type": "tabs.reload", "cache": false }, - "R": { "type": "tabs.reload", "cache": true }, - "zp": { "type": "tabs.pin.toggle" }, - "zd": { "type": "tabs.duplicate" }, - "zi": { "type": "zoom.in" }, - "zo": { "type": "zoom.out" }, - "zz": { "type": "zoom.neutral" }, - "f": { "type": "follow.start", "newTab": false }, - "F": { "type": "follow.start", "newTab": true }, - "H": { "type": "navigate.history.prev" }, - "L": { "type": "navigate.history.next" }, - "[[": { "type": "navigate.link.prev" }, - "]]": { "type": "navigate.link.next" }, - "gu": { "type": "navigate.parent" }, - "gU": { "type": "navigate.root" }, - "y": { "type": "urls.yank" }, - "/": { "type": "find.start" }, - "n": { "type": "find.next" }, - "N": { "type": "find.prev" }, - "": { "type": "addon.toggle.enabled" } - }, - "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={}" - } - } -}`, - - 'form': { - 'keymaps': { - 'scroll.vertically?{count:-1}': 'j', - 'scroll.vertically?{count:1}': 'k', - 'scroll.horizonally?{count:-1}': 'h', - 'scroll.horizonally?{count:1}': 'l', - 'scroll.home': '0', - 'scroll.end': '$', - 'scroll.pages?{count:-0.5}': '', - 'scroll.pages?{count:0.5}': '', - 'scroll.pages?{count:-1}': '', - 'scroll.pages?{count:1}': '', - - 'tabs.close': 'd', - 'tabs.reopen': 'u', - 'tabs.next?{count:1}': 'J', - 'tabs.prev?{count:1}': 'K', - 'tabs.first': 'g0', - 'tabs.last': 'g$', - 'tabs.reload?{cache:true}': 'r', - 'tabs.pin.toggle': 'zp', - 'tabs.duplicate': 'zd', - - 'follow.start?{newTab:false}': 'f', - 'follow.start?{newTab:true}': 'F', - 'navigate.histories.prev': 'H', - 'navigate.histories.next': 'L', - 'navigate.link.next': ']]', - 'navigate.link.prev': '[[', - 'navigate.parent': 'gu', - 'navigate.root': 'gU', - - 'find.start': '/', - 'find.next': 'n', - 'find.prev': 'N', - - 'command.show': ':', - 'command.show.open?{alter:false}': 'o', - 'command.show.open?{alter:true}': 'O', - 'command.show.tabopen?{alter:false}': 't', - 'command.show.tabopen?{alter:true}': 'T', - 'command.show.winopen?{alter:false}': 'w', - 'command.show.winopen?{alter:true}': 'W', - 'command.show.buffer': 'b', - - 'addon.toggle.enabled': '', - 'urls.yank': 'y', - 'zoom.in': 'zi', - 'zoom.out': 'zo', - 'zoom.neutral': 'zz', - }, - '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={}'], - ] - }, - 'blacklist': [], - } -}; diff --git a/src/shared/settings/default.js b/src/shared/settings/default.js new file mode 100644 index 0000000..fc259b8 --- /dev/null +++ b/src/shared/settings/default.js @@ -0,0 +1,131 @@ +export default { + source: 'json', + json: `{ + "keymaps": { + "0": { "type": "scroll.home" }, + ":": { "type": "command.show" }, + "o": { "type": "command.show.open", "alter": false }, + "O": { "type": "command.show.open", "alter": true }, + "t": { "type": "command.show.tabopen", "alter": false }, + "T": { "type": "command.show.tabopen", "alter": true }, + "w": { "type": "command.show.winopen", "alter": false }, + "W": { "type": "command.show.winopen", "alter": true }, + "b": { "type": "command.show.buffer" }, + "k": { "type": "scroll.vertically", "count": -1 }, + "j": { "type": "scroll.vertically", "count": 1 }, + "h": { "type": "scroll.horizonally", "count": -1 }, + "l": { "type": "scroll.horizonally", "count": 1 }, + "": { "type": "scroll.vertically", "count": -1 }, + "": { "type": "scroll.vertically", "count": 1 }, + "": { "type": "scroll.pages", "count": -0.5 }, + "": { "type": "scroll.pages", "count": 0.5 }, + "": { "type": "scroll.pages", "count": -1 }, + "": { "type": "scroll.pages", "count": 1 }, + "gg": { "type": "scroll.top" }, + "G": { "type": "scroll.bottom" }, + "$": { "type": "scroll.end" }, + "d": { "type": "tabs.close" }, + "u": { "type": "tabs.reopen" }, + "K": { "type": "tabs.prev", "count": 1 }, + "J": { "type": "tabs.next", "count": 1 }, + "g0": { "type": "tabs.first" }, + "g$": { "type": "tabs.last" }, + "r": { "type": "tabs.reload", "cache": false }, + "R": { "type": "tabs.reload", "cache": true }, + "zp": { "type": "tabs.pin.toggle" }, + "zd": { "type": "tabs.duplicate" }, + "zi": { "type": "zoom.in" }, + "zo": { "type": "zoom.out" }, + "zz": { "type": "zoom.neutral" }, + "f": { "type": "follow.start", "newTab": false }, + "F": { "type": "follow.start", "newTab": true }, + "H": { "type": "navigate.history.prev" }, + "L": { "type": "navigate.history.next" }, + "[[": { "type": "navigate.link.prev" }, + "]]": { "type": "navigate.link.next" }, + "gu": { "type": "navigate.parent" }, + "gU": { "type": "navigate.root" }, + "y": { "type": "urls.yank" }, + "/": { "type": "find.start" }, + "n": { "type": "find.next" }, + "N": { "type": "find.prev" }, + "": { "type": "addon.toggle.enabled" } + }, + "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={}" + } + } +}`, + + 'form': { + 'keymaps': { + 'scroll.vertically?{"count":1}': 'j', + 'scroll.vertically?{"count":-1}': 'k', + 'scroll.horizonally?{"count":-1}': 'h', + 'scroll.horizonally?{"count":1}': 'l', + 'scroll.home': '0', + 'scroll.end': '$', + 'scroll.pages?{"count":-0.5}': '', + 'scroll.pages?{"count":0.5}': '', + 'scroll.pages?{"count":-1}': '', + 'scroll.pages?{"count":1}': '', + + 'tabs.close': 'd', + 'tabs.reopen': 'u', + 'tabs.next?{"count":1}': 'J', + 'tabs.prev?{"count":1}': 'K', + 'tabs.first': 'g0', + 'tabs.last': 'g$', + 'tabs.reload?{"cache":true}': 'r', + 'tabs.pin.toggle': 'zp', + 'tabs.duplicate': 'zd', + + 'follow.start?{"newTab":false}': 'f', + 'follow.start?{"newTab":true}': 'F', + 'navigate.histories.prev': 'H', + 'navigate.histories.next': 'L', + 'navigate.link.next': ']]', + 'navigate.link.prev': '[[', + 'navigate.parent': 'gu', + 'navigate.root': 'gU', + + 'find.start': '/', + 'find.next': 'n', + 'find.prev': 'N', + + 'command.show': ':', + 'command.show.open?{"alter":false}': 'o', + 'command.show.open?{"alter":true}': 'O', + 'command.show.tabopen?{"alter":false}': 't', + 'command.show.tabopen?{"alter":true}': 'T', + 'command.show.winopen?{"alter":false}': 'w', + 'command.show.winopen?{"alter":true}': 'W', + 'command.show.buffer': 'b', + + 'addon.toggle.enabled': '', + 'urls.yank': 'y', + 'zoom.in': 'zi', + 'zoom.out': 'zo', + 'zoom.neutral': 'zz', + }, + '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={}'], + ] + }, + 'blacklist': [], + } +}; diff --git a/src/shared/settings/values.js b/src/shared/settings/values.js new file mode 100644 index 0000000..d86cfdc --- /dev/null +++ b/src/shared/settings/values.js @@ -0,0 +1,35 @@ +const operationFromName = (name) => { + let [type, argStr] = name.split('?'); + let args = {}; + if (argStr) { + args = JSON.parse(argStr); + } + return Object.assign({ type }, args); +}; + +const fromJson = (json) => { + return JSON.parse(json); +}; + +const fromForm = (form) => { + let keymaps = {}; + for (let name of Object.keys(form.keymaps)) { + let keys = form.keymaps[name]; + keymaps[keys] = operationFromName(name); + } + + let engines = {}; + for (let { name, url } of form.search.engines) { + engines[name] = url; + } + let search = { + default: form.search.default, + engines, + }; + + let blacklist = form.blacklist; + + return { keymaps, search, blacklist }; +}; + +export { fromJson, fromForm }; -- cgit v1.2.3 From 2c46e9d448142c84b802ef8e0e1af53524dc4759 Mon Sep 17 00:00:00 2001 From: Shin'ya Ueoka Date: Sat, 25 Nov 2017 22:58:10 +0900 Subject: fix keymap form --- src/settings/components/form/keymaps-form.jsx | 4 ++-- src/shared/settings/default.js | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) (limited to 'src/settings/components/form') diff --git a/src/settings/components/form/keymaps-form.jsx b/src/settings/components/form/keymaps-form.jsx index a827e4e..8e93c3f 100644 --- a/src/settings/components/form/keymaps-form.jsx +++ b/src/settings/components/form/keymaps-form.jsx @@ -27,8 +27,8 @@ const KeyMapFields = [ ], [ ['follow.start?{"newTab":false}', 'Follow a link'], ['follow.start?{"newTab":true}', 'Follow a link in new tab'], - ['navigate.histories.prev', 'Go back in histories'], - ['navigate.histories.next', 'Go forward in histories'], + ['navigate.history.prev', 'Go back in histories'], + ['navigate.history.next', 'Go forward in histories'], ['navigate.link.next', 'Open next link'], ['navigate.link.prev', 'Open previous link'], ['navigate.parent', 'Go to parent directory'], diff --git a/src/shared/settings/default.js b/src/shared/settings/default.js index fc259b8..69238e3 100644 --- a/src/shared/settings/default.js +++ b/src/shared/settings/default.js @@ -89,8 +89,8 @@ export default { 'follow.start?{"newTab":false}': 'f', 'follow.start?{"newTab":true}': 'F', - 'navigate.histories.prev': 'H', - 'navigate.histories.next': 'L', + 'navigate.history.prev': 'H', + 'navigate.history.next': 'L', 'navigate.link.next': ']]', 'navigate.link.prev': '[[', 'navigate.parent': 'gu', -- cgit v1.2.3 From 256e7372d4a96079b993115eabde8b33d400c7c8 Mon Sep 17 00:00:00 2001 From: Shin'ya Ueoka Date: Sun, 26 Nov 2017 08:25:23 +0900 Subject: settings migration between json and form --- src/settings/components/form/blacklist-form.jsx | 2 +- src/settings/components/index.jsx | 23 +++++++++++++++++++++-- 2 files changed, 22 insertions(+), 3 deletions(-) (limited to 'src/settings/components/form') diff --git a/src/settings/components/form/blacklist-form.jsx b/src/settings/components/form/blacklist-form.jsx index 9cb547b..4333929 100644 --- a/src/settings/components/form/blacklist-form.jsx +++ b/src/settings/components/form/blacklist-form.jsx @@ -34,7 +34,7 @@ class BlacklistForm extends Component { let name = e.target.name; let index = e.target.getAttribute('data-index'); - let next = this.props.value.slice(); + let next = this.props.value ? this.props.value.slice() : []; if (name === 'url') { next[index] = e.target.value; diff --git a/src/settings/components/index.jsx b/src/settings/components/index.jsx index fb25df6..ae7cd31 100644 --- a/src/settings/components/index.jsx +++ b/src/settings/components/index.jsx @@ -6,6 +6,7 @@ import KeymapsForm from './form/keymaps-form'; import BlacklistForm from './form/blacklist-form'; import * as settingActions from 'settings/actions/setting'; import * as validator from 'shared/validators/setting'; +import * as settingsValues from 'shared/settings/values'; class SettingsComponent extends Component { constructor(props, context) { @@ -95,7 +96,7 @@ class SettingsComponent extends Component { label='Use form' checked={this.state.settings.source === 'form'} value='form' - onChange={this.bindValue.bind(this)} /> + onChange={this.bindSource.bind(this)} /> + onChange={this.bindSource.bind(this)} /> { fields } @@ -143,6 +144,24 @@ class SettingsComponent extends Component { this.setState(next); this.context.store.dispatch(settingActions.save(next.settings)); } + + bindSource(e) { + let from = this.state.settings.source; + let to = e.target.value; + + let next = Object.assign({}, this.state); + if (from === 'form' && to === 'json') { + next.settings.json = + settingsValues.jsonFromForm(this.state.settings.form); + } else if (from === 'json' && to === 'form') { + next.settings.form = + settingsValues.formFromJson(this.state.settings.json); + } + next.settings.source = to; + + this.setState(next); + this.context.store.dispatch(settingActions.save(next.settings)); + } } export default SettingsComponent; -- cgit v1.2.3 From d195890eb957e5b6e40f7c01ce34d07e7ccf22b5 Mon Sep 17 00:00:00 2001 From: Shin'ya Ueoka Date: Sun, 26 Nov 2017 11:37:25 +0900 Subject: rename serach engine --- .../components/form/search-engine-form.jsx | 73 ---------------------- .../components/form/search-engine-form.scss | 26 -------- src/settings/components/form/search-form.jsx | 73 ++++++++++++++++++++++ src/settings/components/form/search-form.scss | 26 ++++++++ src/settings/components/index.jsx | 4 +- 5 files changed, 101 insertions(+), 101 deletions(-) delete mode 100644 src/settings/components/form/search-engine-form.jsx delete mode 100644 src/settings/components/form/search-engine-form.scss create mode 100644 src/settings/components/form/search-form.jsx create mode 100644 src/settings/components/form/search-form.scss (limited to 'src/settings/components/form') diff --git a/src/settings/components/form/search-engine-form.jsx b/src/settings/components/form/search-engine-form.jsx deleted file mode 100644 index faa066f..0000000 --- a/src/settings/components/form/search-engine-form.jsx +++ /dev/null @@ -1,73 +0,0 @@ -import './search-engine-form.scss'; -import { h, Component } from 'preact'; -import AddButton from '../ui/add-button'; -import DeleteButton from '../ui/delete-button'; - -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 === 'add') { - next.engines.push(['', '']); - } 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 deleted file mode 100644 index 0d33c23..0000000 --- a/src/settings/components/form/search-engine-form.scss +++ /dev/null @@ -1,26 +0,0 @@ -.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; - } -} diff --git a/src/settings/components/form/search-form.jsx b/src/settings/components/form/search-form.jsx new file mode 100644 index 0000000..9bafb8d --- /dev/null +++ b/src/settings/components/form/search-form.jsx @@ -0,0 +1,73 @@ +import './search-form.scss'; +import { h, Component } from 'preact'; +import AddButton from '../ui/add-button'; +import DeleteButton from '../ui/delete-button'; + +class SearchForm 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 === 'add') { + next.engines.push(['', '']); + } else if (name === 'delete') { + next.engines.splice(index, 1); + } + + this.props.onChange(next); + } +} + +export default SearchForm; diff --git a/src/settings/components/form/search-form.scss b/src/settings/components/form/search-form.scss new file mode 100644 index 0000000..8814ef5 --- /dev/null +++ b/src/settings/components/form/search-form.scss @@ -0,0 +1,26 @@ +.form-search-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; + } +} diff --git a/src/settings/components/index.jsx b/src/settings/components/index.jsx index ae7cd31..b7de259 100644 --- a/src/settings/components/index.jsx +++ b/src/settings/components/index.jsx @@ -1,7 +1,7 @@ import './site.scss'; import { h, Component } from 'preact'; import Input from './ui/input'; -import SearchEngineForm from './form/search-engine-form'; +import SearchForm from './form/search-form'; import KeymapsForm from './form/keymaps-form'; import BlacklistForm from './form/blacklist-form'; import * as settingActions from 'settings/actions/setting'; @@ -49,7 +49,7 @@ class SettingsComponent extends Component {
Search Engines - this.bindForm('search', value)} /> -- cgit v1.2.3 From 0967304ebe713bc24078b20ac3a710fd42f2f611 Mon Sep 17 00:00:00 2001 From: Shin'ya Ueoka Date: Sun, 26 Nov 2017 12:18:12 +0900 Subject: add SearchForm test --- src/settings/components/form/search-form.jsx | 18 ++-- .../components/form/search-engine-form.test.jsx | 104 +++++++++++++++++++++ 2 files changed, 115 insertions(+), 7 deletions(-) create mode 100644 test/settings/components/form/search-engine-form.test.jsx (limited to 'src/settings/components/form') diff --git a/src/settings/components/form/search-form.jsx b/src/settings/components/form/search-form.jsx index 9bafb8d..98b0655 100644 --- a/src/settings/components/form/search-form.jsx +++ b/src/settings/components/form/search-form.jsx @@ -10,10 +10,9 @@ class SearchForm extends Component { if (!value) { value = { default: '', engines: []}; } - let { - default: defaultEngine, - engines - } = value; + if (!value.engines) { + value.engines = []; + } return
@@ -22,7 +21,7 @@ class SearchForm extends Component {
Default
{ - engines.map((engine, index) => { + value.engines.map((engine, index) => { return
@@ -50,12 +49,17 @@ class SearchForm extends Component { return; } + let value = this.props.value; let name = e.target.name; let index = e.target.getAttribute('data-index'); - let next = Object.assign({}, this.props.value); + let next = Object.assign({}, { + default: value.default, + engines: value.engines ? value.engines.slice() : [], + }); if (name === 'name') { next.engines[index][0] = e.target.value; + next.default = this.props.value.engines[index][0]; } else if (name === 'url') { next.engines[index][1] = e.target.value; } else if (name === 'default') { diff --git a/test/settings/components/form/search-engine-form.test.jsx b/test/settings/components/form/search-engine-form.test.jsx new file mode 100644 index 0000000..9600cae --- /dev/null +++ b/test/settings/components/form/search-engine-form.test.jsx @@ -0,0 +1,104 @@ +import { expect } from 'chai'; +import { h, render } from 'preact'; +import SearchForm from 'settings/components/form/search-form' + +describe("settings/form/SearchForm", () => { + beforeEach(() => { + document.body.innerHTML = ''; + }); + + describe('render', () => { + it('renders SearchForm', () => { + render(, document.body); + + let names = document.querySelectorAll('input[name=name]'); + expect(names).to.have.lengthOf(2); + expect(names[0].value).to.equal('google'); + expect(names[1].value).to.equal('yahoo'); + + let urls = document.querySelectorAll('input[name=url]'); + expect(urls).to.have.lengthOf(2); + expect(urls[0].value).to.equal('google.com'); + expect(urls[1].value).to.equal('yahoo.com'); + }); + + it('renders blank value', () => { + render(, document.body); + + let names = document.querySelectorAll('input[name=name]'); + let urls = document.querySelectorAll('input[name=url]'); + expect(names).to.have.lengthOf(0); + expect(urls).to.have.lengthOf(0); + }); + + it('renders blank engines', () => { + render(, document.body); + + let names = document.querySelectorAll('input[name=name]'); + let urls = document.querySelectorAll('input[name=url]'); + expect(names).to.have.lengthOf(0); + expect(urls).to.have.lengthOf(0); + }); + }); + + describe('onChange event', () => { + it('invokes onChange event on edit', (done) => { + render( { + expect(value.default).to.equal('louvre'); + expect(value.engines).to.have.lengthOf(2) + .and.have.deep.members([['louvre', 'google.com'], ['yahoo', 'yahoo.com']]) + + done(); + }} />, document.body); + + let radio = document.querySelectorAll('input[type=radio]'); + radio.checked = true; + + let name = document.querySelector('input[name=name]'); + name.value = 'louvre'; + name.dispatchEvent(new Event('change')) + }); + + it('invokes onChange event on delete', (done) => { + render( { + expect(value.default).to.equal('yahoo'); + expect(value.engines).to.have.lengthOf(1) + .and.have.deep.members([['yahoo', 'yahoo.com']]) + + done(); + }} />, document.body); + + let button = document.querySelector('input[type=button]'); + button.click(); + }); + + it('invokes onChange event on add', (done) => { + render( { + expect(value.default).to.equal('yahoo'); + expect(value.engines).to.have.lengthOf(2) + .and.have.deep.members([['google', 'google.com'], ['', '']]) + + done(); + }} />, document.body); + + let button = document.querySelector('input[type=button].ui-add-button'); + button.click(); + }); + }); +}); -- cgit v1.2.3 From 705c47bc6379a8d1fea4f775a6af98c97d4eab81 Mon Sep 17 00:00:00 2001 From: Shin'ya Ueoka Date: Sun, 26 Nov 2017 12:34:49 +0900 Subject: add KeymapsForm test --- src/settings/components/form/keymaps-form.jsx | 6 ++- .../settings/components/form/keymaps-form.test.jsx | 53 ++++++++++++++++++++++ 2 files changed, 58 insertions(+), 1 deletion(-) create mode 100644 test/settings/components/form/keymaps-form.test.jsx (limited to 'src/settings/components/form') diff --git a/src/settings/components/form/keymaps-form.jsx b/src/settings/components/form/keymaps-form.jsx index 8e93c3f..f64320c 100644 --- a/src/settings/components/form/keymaps-form.jsx +++ b/src/settings/components/form/keymaps-form.jsx @@ -58,6 +58,10 @@ const KeyMapFields = [ class KeymapsForm extends Component { render() { + let values = this.props.value; + if (!values) { + values = {}; + } return
{ KeyMapFields.map((group, index) => { @@ -66,7 +70,7 @@ class KeymapsForm extends Component { group.map((field) => { let name = field[0]; let label = field[1]; - let value = this.props.value[name]; + let value = values[name]; return { + beforeEach(() => { + document.body.innerHTML = ''; + }); + + describe('render', () => { + it('renders KeymapsForm', () => { + render(, document.body); + + let inputj = document.getElementById('scroll.vertically?{"count":1}'); + let inputk = document.getElementById('scroll.vertically?{"count":-1}'); + + expect(inputj.value).to.equal('j'); + expect(inputk.value).to.equal('k'); + }); + + it('renders blank value', () => { + render(, document.body); + + let inputj = document.getElementById('scroll.vertically?{"count":1}'); + let inputk = document.getElementById('scroll.vertically?{"count":-1}'); + + expect(inputj.value).to.be.empty; + expect(inputk.value).to.be.empty; + }); + }); + + describe('onChange event', () => { + it('invokes onChange event on edit', (done) => { + render( { + expect(value['scroll.vertically?{"count":1}']).to.equal('jjj'); + + done(); + }} />, document.body); + + let input = document.getElementById('scroll.vertically?{"count":1}'); + input.value = 'jjj'; + input.dispatchEvent(new Event('change')) + }); + }); +}); -- cgit v1.2.3 From 26777d9e309dbc328b59581adb92f160c18f812c Mon Sep 17 00:00:00 2001 From: Shin'ya Ueoka Date: Sun, 26 Nov 2017 16:41:34 +0900 Subject: fix form css --- src/settings/components/form/blacklist-form.jsx | 3 ++- src/settings/components/form/keymaps-form.scss | 2 +- src/settings/components/form/search-form.jsx | 3 ++- src/settings/components/form/search-form.scss | 2 ++ src/settings/components/site.scss | 2 +- src/settings/components/ui/add-button.jsx | 2 +- src/settings/components/ui/add-button.scss | 12 +++++++++++- src/settings/components/ui/delete-button.scss | 1 + src/settings/components/ui/input.scss | 3 ++- 9 files changed, 23 insertions(+), 7 deletions(-) (limited to 'src/settings/components/form') diff --git a/src/settings/components/form/blacklist-form.jsx b/src/settings/components/form/blacklist-form.jsx index 4333929..7ae9652 100644 --- a/src/settings/components/form/blacklist-form.jsx +++ b/src/settings/components/form/blacklist-form.jsx @@ -23,7 +23,8 @@ class BlacklistForm extends Component {
; }) } - +
; } diff --git a/src/settings/components/form/keymaps-form.scss b/src/settings/components/form/keymaps-form.scss index 8b86c80..3a83910 100644 --- a/src/settings/components/form/keymaps-form.scss +++ b/src/settings/components/form/keymaps-form.scss @@ -1,5 +1,5 @@ .form-keymaps-form { - column-count: 2; + column-count: 3; .keymap-fields-group { margin-top: 24px; } diff --git a/src/settings/components/form/search-form.jsx b/src/settings/components/form/search-form.jsx index 98b0655..e85761f 100644 --- a/src/settings/components/form/search-form.jsx +++ b/src/settings/components/form/search-form.jsx @@ -40,7 +40,8 @@ class SearchForm extends Component {
; }) } - +
; } diff --git a/src/settings/components/form/search-form.scss b/src/settings/components/form/search-form.scss index 8814ef5..26b2f44 100644 --- a/src/settings/components/form/search-form.scss +++ b/src/settings/components/form/search-form.scss @@ -4,9 +4,11 @@ .column-name { flex: 1; + min-width: 0; } .column-url { flex: 5; + min-width: 0; } .column-option { text-align: right; diff --git a/src/settings/components/site.scss b/src/settings/components/site.scss index c8dd422..c0c4f9e 100644 --- a/src/settings/components/site.scss +++ b/src/settings/components/site.scss @@ -20,7 +20,7 @@ legend { font-size: 1.5rem; - line-height: 1.5rem; + padding: .5rem 0; font-weight: bold; } } diff --git a/src/settings/components/ui/add-button.jsx b/src/settings/components/ui/add-button.jsx index c8d8856..79292d8 100644 --- a/src/settings/components/ui/add-button.jsx +++ b/src/settings/components/ui/add-button.jsx @@ -4,7 +4,7 @@ import { h, Component } from 'preact'; class AddButton extends Component { render() { return ; } } diff --git a/src/settings/components/ui/add-button.scss b/src/settings/components/ui/add-button.scss index 1c893ae..beb5688 100644 --- a/src/settings/components/ui/add-button.scss +++ b/src/settings/components/ui/add-button.scss @@ -1,3 +1,13 @@ .ui-add-button { - font-size: 80% + border: none; + padding: 4; + display: inline; + background: none; + font-weight: bold; + color: green; + cursor: pointer; + + &:hover { + color: darkgreen; + } } diff --git a/src/settings/components/ui/delete-button.scss b/src/settings/components/ui/delete-button.scss index 7aa2f39..5932a72 100644 --- a/src/settings/components/ui/delete-button.scss +++ b/src/settings/components/ui/delete-button.scss @@ -5,6 +5,7 @@ display: inline; background: none; color: red; + cursor: pointer; &:hover { color: darkred; diff --git a/src/settings/components/ui/input.scss b/src/settings/components/ui/input.scss index 92df712..ad4daf8 100644 --- a/src/settings/components/ui/input.scss +++ b/src/settings/components/ui/input.scss @@ -11,8 +11,9 @@ display: inline-block; } - input { + input[type='text'] { padding: 4px; + width: 8rem; } input.input-crror, -- cgit v1.2.3