diff options
-rw-r--r-- | src/console/components/completion.js | 65 | ||||
-rw-r--r-- | src/console/components/console.js | 175 | ||||
-rw-r--r-- | src/console/components/console.jsx | 129 | ||||
-rw-r--r-- | src/console/components/console.scss (renamed from src/console/site.scss) | 10 | ||||
-rw-r--r-- | src/console/components/console/completion.jsx | 56 | ||||
-rw-r--r-- | src/console/components/console/input.jsx | 32 | ||||
-rw-r--r-- | src/console/components/console/message.jsx | 18 | ||||
-rw-r--r-- | src/console/index.html | 12 | ||||
-rw-r--r-- | src/console/index.jsx (renamed from src/console/index.js) | 16 |
9 files changed, 247 insertions, 266 deletions
diff --git a/src/console/components/completion.js b/src/console/components/completion.js deleted file mode 100644 index a49a221..0000000 --- a/src/console/components/completion.js +++ /dev/null @@ -1,65 +0,0 @@ -export default class Completion { - constructor(wrapper, store) { - this.wrapper = wrapper; - this.store = store; - this.prevState = {}; - - store.subscribe(() => { - this.update(); - }); - } - - update() { - let state = this.store.getState(); - if (JSON.stringify(this.prevState) === JSON.stringify(state)) { - return; - } - - this.wrapper.innerHTML = ''; - - for (let i = 0; i < state.completions.length; ++i) { - let group = state.completions[i]; - let title = this.createCompletionTitle(group.name); - this.wrapper.append(title); - - for (let j = 0; j < group.items.length; ++j) { - let item = group.items[j]; - let li = this.createCompletionItem(item.icon, item.caption, item.url); - this.wrapper.append(li); - - if (i === state.groupSelection && j === state.itemSelection) { - li.classList.add('vimvixen-completion-selected'); - } - } - } - - this.prevState = state; - } - - createCompletionTitle(text) { - let doc = this.wrapper.ownerDocument; - let li = doc.createElement('li'); - li.className = 'vimvixen-console-completion-title'; - li.textContent = text; - return li; - } - - createCompletionItem(icon, caption, url) { - let doc = this.wrapper.ownerDocument; - - let captionEle = doc.createElement('span'); - captionEle.className = 'vimvixen-console-completion-item-caption'; - captionEle.textContent = caption; - - let urlEle = doc.createElement('span'); - urlEle.className = 'vimvixen-console-completion-item-url'; - urlEle.textContent = url; - - let li = doc.createElement('li'); - li.style.backgroundImage = 'url(' + icon + ')'; - li.className = 'vimvixen-console-completion-item'; - li.append(captionEle); - li.append(urlEle); - return li; - } -} diff --git a/src/console/components/console.js b/src/console/components/console.js deleted file mode 100644 index 4fc8a53..0000000 --- a/src/console/components/console.js +++ /dev/null @@ -1,175 +0,0 @@ -import * as consoleActions from 'console/actions/console'; - -const inputShownMode = (state) => { - return ['command', 'find'].includes(state.mode); -}; - -export default class ConsoleComponent { - constructor(wrapper, store) { - this.wrapper = wrapper; - this.store = store; - this.prevMode = ''; - - let doc = this.wrapper.ownerDocument; - let input = doc.querySelector('#vimvixen-console-command-input'); - - input.addEventListener('blur', this.onBlur.bind(this)); - input.addEventListener('keydown', this.onKeyDown.bind(this)); - input.addEventListener('input', this.onInput.bind(this)); - - store.subscribe(() => { - this.update(); - }); - this.update(); - } - - onBlur() { - let state = this.store.getState(); - if (state.mode === 'command' || state.mode === 'find') { - return this.store.dispatch(consoleActions.hideCommand()); - } - } - - doEnter(e) { - e.stopPropagation(); - e.preventDefault(); - - let state = this.store.getState(); - let value = e.target.value; - if (state.mode === 'command') { - return this.store.dispatch(consoleActions.enterCommand(value)); - } else if (state.mode === 'find') { - return this.store.dispatch(consoleActions.enterFind(value)); - } - } - - selectNext(e) { - this.store.dispatch(consoleActions.completionNext()); - e.stopPropagation(); - e.preventDefault(); - } - - selectPrev(e) { - this.store.dispatch(consoleActions.completionPrev()); - e.stopPropagation(); - e.preventDefault(); - } - - onKeyDown(e) { - if (e.keyCode === KeyboardEvent.DOM_VK_ESCAPE && e.ctrlKey) { - this.store.dispatch(consoleActions.hideCommand()); - } - switch (e.keyCode) { - case KeyboardEvent.DOM_VK_ESCAPE: - return this.store.dispatch(consoleActions.hideCommand()); - case KeyboardEvent.DOM_VK_RETURN: - return this.doEnter(e); - case KeyboardEvent.DOM_VK_TAB: - if (e.shiftKey) { - this.store.dispatch(consoleActions.completionPrev()); - } else { - this.store.dispatch(consoleActions.completionNext()); - } - e.stopPropagation(); - e.preventDefault(); - break; - case KeyboardEvent.DOM_VK_OPEN_BRACKET: - if (e.ctrlKey) { - return this.store.dispatch(consoleActions.hideCommand()); - } - break; - case KeyboardEvent.DOM_VK_M: - if (e.ctrlKey) { - return this.doEnter(e); - } - break; - case KeyboardEvent.DOM_VK_N: - if (e.ctrlKey) { - this.selectNext(e); - } - break; - case KeyboardEvent.DOM_VK_P: - if (e.ctrlKey) { - this.selectPrev(e); - } - break; - } - } - - onInput(e) { - let state = this.store.getState(); - let text = e.target.value; - this.store.dispatch(consoleActions.setConsoleText(text)); - if (state.mode === 'command') { - this.store.dispatch(consoleActions.getCompletions(text)); - } - } - - onInputShown(state) { - let doc = this.wrapper.ownerDocument; - let input = doc.querySelector('#vimvixen-console-command-input'); - - input.focus(); - window.focus(); - - if (state.mode === 'command') { - let text = state.consoleText; - input.value = text; - this.store.dispatch(consoleActions.getCompletions(text)); - } - } - - update() { - let state = this.store.getState(); - - this.updateMessage(state); - this.updateCommand(state); - this.updatePrompt(state); - - if (this.prevMode !== state.mode && inputShownMode(state)) { - this.onInputShown(state); - } - this.prevMode = state.mode; - } - - updateMessage(state) { - let doc = this.wrapper.ownerDocument; - let box = doc.querySelector('.vimvixen-console-message'); - let display = 'none'; - let classList = ['vimvixen-console-message']; - - if (state.mode === 'error' || state.mode === 'info') { - display = 'block'; - classList.push('vimvixen-console-' + state.mode); - } - - box.className = classList.join(' '); - box.style.display = display; - box.textContent = state.messageText; - } - - updateCommand(state) { - let doc = this.wrapper.ownerDocument; - let command = doc.querySelector('#vimvixen-console-command'); - let input = doc.querySelector('#vimvixen-console-command-input'); - - let display = 'none'; - if (inputShownMode(state)) { - display = 'block'; - } - - command.style.display = display; - input.value = state.consoleText; - } - - updatePrompt(state) { - let classList = ['vimvixen-console-command-prompt']; - if (inputShownMode(state)) { - classList.push('prompt-' + state.mode); - } - - let doc = this.wrapper.ownerDocument; - let ele = doc.querySelector('.vimvixen-console-command-prompt'); - ele.className = classList.join(' '); - } -} diff --git a/src/console/components/console.jsx b/src/console/components/console.jsx new file mode 100644 index 0000000..70cbb4e --- /dev/null +++ b/src/console/components/console.jsx @@ -0,0 +1,129 @@ +import './console.scss'; +import { connect } from 'preact-redux'; +import { Component, h } from 'preact'; +import Input from './console/input'; +import Completion from './console/completion'; +import Message from './console/message'; +import * as consoleActions from '../../console/actions/console'; + +class ConsoleComponent extends Component { + onBlur() { + if (this.props.mode === 'command' || this.props.mode === 'find') { + return this.context.store.dispatch(consoleActions.hideCommand()); + } + } + + doEnter(e) { + e.stopPropagation(); + e.preventDefault(); + + let value = e.target.value; + if (this.props.mode === 'command') { + return this.context.store.dispatch(consoleActions.enterCommand(value)); + } else if (this.props.mode === 'find') { + return this.context.store.dispatch(consoleActions.enterFind(value)); + } + } + + selectNext(e) { + this.context.store.dispatch(consoleActions.completionNext()); + e.stopPropagation(); + e.preventDefault(); + } + + selectPrev(e) { + this.context.store.dispatch(consoleActions.completionPrev()); + e.stopPropagation(); + e.preventDefault(); + } + + onKeyDown(e) { + if (e.keyCode === KeyboardEvent.DOM_VK_ESCAPE && e.ctrlKey) { + this.context.store.dispatch(consoleActions.hideCommand()); + } + switch (e.keyCode) { + case KeyboardEvent.DOM_VK_ESCAPE: + return this.context.store.dispatch(consoleActions.hideCommand()); + case KeyboardEvent.DOM_VK_RETURN: + return this.doEnter(e); + case KeyboardEvent.DOM_VK_TAB: + if (e.shiftKey) { + this.context.store.dispatch(consoleActions.completionPrev()); + } else { + this.context.store.dispatch(consoleActions.completionNext()); + } + e.stopPropagation(); + e.preventDefault(); + break; + case KeyboardEvent.DOM_VK_OPEN_BRACKET: + if (e.ctrlKey) { + return this.context.store.dispatch(consoleActions.hideCommand()); + } + break; + case KeyboardEvent.DOM_VK_M: + if (e.ctrlKey) { + return this.doEnter(e); + } + break; + case KeyboardEvent.DOM_VK_N: + if (e.ctrlKey) { + this.selectNext(e); + } + break; + case KeyboardEvent.DOM_VK_P: + if (e.ctrlKey) { + this.selectPrev(e); + } + break; + } + } + + onInput(e) { + let text = e.target.value; + this.context.store.dispatch(consoleActions.setConsoleText(text)); + if (this.props.mode === 'command') { + this.context.store.dispatch(consoleActions.getCompletions(text)); + } + } + + + componentDidUpdate(prevProps) { + if (!this.input) { + return; + } + if (prevProps.mode !== 'command' && this.props.mode === 'command') { + this.context.store.dispatch( + consoleActions.getCompletions(this.props.consoleText)); + this.input.focus(); + } else if (prevProps.mode !== 'find' && this.props.mode === 'find') { + this.input.focus(); + } + } + + + render() { + switch (this.props.mode) { + case 'command': + case 'find': + return <div className='vimvixen-console-command-wrapper'> + <Completion /> + <Input + ref={(c) => { this.input = c; }} + mode={this.props.mode} + onBlur={this.onBlur.bind(this)} + onKeyDown={this.onKeyDown.bind(this)} + onInput={this.onInput.bind(this)} + value={this.props.consoleText} + /> + </div>; + case 'info': + case 'error': + return <Message mode={ this.props.mode } > + { this.props.messageText } + </Message>; + } + } +} + +const mapStateToProps = state => state; +export default connect(mapStateToProps)(ConsoleComponent); diff --git a/src/console/site.scss b/src/console/components/console.scss index b9b1016..c0b9b12 100644 --- a/src/console/site.scss +++ b/src/console/components/console.scss @@ -89,18 +89,10 @@ body { background-color: white; display: flex; - &-prompt:before { + &-prompt { @include consoole-font; } - &-prompt.prompt-command:before { - content: ':'; - } - - &-prompt.prompt-find:before { - content: '/'; - } - &-input { border: none; flex-grow: 1; diff --git a/src/console/components/console/completion.jsx b/src/console/components/console/completion.jsx new file mode 100644 index 0000000..c60543b --- /dev/null +++ b/src/console/components/console/completion.jsx @@ -0,0 +1,56 @@ +import { Component, h } from 'preact'; +import { connect } from 'preact-redux'; + +const CompletionTitle = (props) => { + return <li className='vimvixen-console-completion-title' >{props.title}</li>; +}; + +const CompletionItem = (props) => { + let className = 'vimvixen-console-completion-item'; + if (props.highlight) { + className += ' vimvixen-completion-selected'; + } + return <li + className={className} + style={{ backgroundImage: 'url(' + props.icon + ')' }} + > + <span + className='vimvixen-console-completion-item-caption' + >{props.caption}</span> + <span + className='vimvixen-console-completion-item-url' + >{props.url}</span> + </li>; +}; + + +class CompletionComponent extends Component { + render() { + let eles = []; + for (let i = 0; i < this.props.completions.length; ++i) { + let group = this.props.completions[i]; + eles.push(<CompletionTitle title={ group.name }/>); + for (let j = 0; j < group.items.length; ++j) { + let item = group.items[j]; + let selected = + i === this.props.groupSelection && + j === this.props.itemSelection; + eles.push(<CompletionItem + icon={item.icon} + caption={item.caption} + url={item.url} + highlight={selected} + / >); + } + } + + return ( + <ul className='vimvixen-console-completion'> + { eles } + </ul> + ); + } +} + +const mapStateToProps = state => state; +export default connect(mapStateToProps)(CompletionComponent); diff --git a/src/console/components/console/input.jsx b/src/console/components/console/input.jsx new file mode 100644 index 0000000..d59e6e7 --- /dev/null +++ b/src/console/components/console/input.jsx @@ -0,0 +1,32 @@ +import { Component, h } from 'preact'; + +export default class InputComponent extends Component { + focus() { + this.input.focus(); + } + + render() { + let prompt = ''; + if (this.props.mode === 'command') { + prompt = ':'; + } else if (this.props.mode === 'find') { + prompt = '/'; + } + + return ( + <div className='vimvixen-console-command'> + <i className='vimvixen-console-command-prompt'> + { prompt } + </i> + <input + className='vimvixen-console-command-input' + ref={(c) => { this.input = c; }} + onBlur={this.props.onBlur} + onKeyDown={this.props.onKeyDown} + onInput={this.props.onInput} + value={this.props.value} + /> + </div> + ); + } +} diff --git a/src/console/components/console/message.jsx b/src/console/components/console/message.jsx new file mode 100644 index 0000000..126687e --- /dev/null +++ b/src/console/components/console/message.jsx @@ -0,0 +1,18 @@ +import { h } from 'preact'; + +export default function Message(props) { + switch (props.mode) { + case 'error': + return ( + <p className='vimvixen-console-message vimvixen-console-error'> + { props.text } + </p> + ); + case 'info': + return ( + <p className='vimvixen-console-message vimvixen-console-info'> + { props.children } + </p> + ); + } +} diff --git a/src/console/index.html b/src/console/index.html index e049b5e..5c1e99c 100644 --- a/src/console/index.html +++ b/src/console/index.html @@ -5,15 +5,5 @@ <title>VimVixen console</title> <script src='console.js'></script> </head> - <body class='vimvixen-console'> - <p class='vimvixen-console-message'></p> - <div id='vimvixen-console-command' class='vimvixen-console-command-wrapper'> - <ul id='vimvixen-console-completion' class='vimvixen-console-completion'></ul> - <div class='vimvixen-console-command'> - <i class='vimvixen-console-command-prompt'></i><input - id='vimvixen-console-command-input' - class='vimvixen-console-command-input'></input> - </div> - </div> - </body> + <body class='vimvixen-console'></body> </html> diff --git a/src/console/index.js b/src/console/index.jsx index 8724a44..c0d1807 100644 --- a/src/console/index.js +++ b/src/console/index.jsx @@ -1,21 +1,25 @@ -import './site.scss'; import messages from 'shared/messages'; -import CompletionComponent from 'console/components/completion'; -import ConsoleComponent from 'console/components/console'; import reducers from 'console/reducers'; import { createStore, applyMiddleware } from 'redux'; import promise from 'redux-promise'; import * as consoleActions from 'console/actions/console'; +import { Provider } from 'preact-redux'; +import Console from './components/console'; + +import { render, h } from 'preact'; + const store = createStore( reducers, applyMiddleware(promise), ); window.addEventListener('load', () => { - let wrapper = document.querySelector('#vimvixen-console-completion'); - new CompletionComponent(wrapper, store); // eslint-disable-line no-new - new ConsoleComponent(document.body, store); // eslint-disable-line no-new + render( + <Provider store={store} > + <Console></Console> + </Provider>, + document.body); }); const onMessage = (message) => { |