commit
13fb726332
12 changed files with 1373 additions and 50 deletions
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,2 @@ |
||||
export const OPEN = 'open'; |
||||
export const TABOPEN = 'tabopen'; |
@ -0,0 +1,46 @@ |
||||
.vimvixen-footerline { |
||||
border-top: 1px solid gray; |
||||
bottom: 0; |
||||
box-sizing: border-box; |
||||
font-family: monospace; |
||||
font-size: 12px; |
||||
left: 0; |
||||
margin: 0; |
||||
padding: 0; |
||||
position: fixed; |
||||
right: 0; |
||||
z-index: 10000; |
||||
} |
||||
|
||||
.vimvixen-footerline-title { |
||||
background-color: lightgray; |
||||
font-weight: bold; |
||||
margin: 0; |
||||
padding: 0; |
||||
} |
||||
|
||||
.vimvixen-footerline-container-outer { |
||||
background-color: white; |
||||
position: relative; |
||||
} |
||||
|
||||
.vimvixen-footerline-container-outer:before { |
||||
content: ':'; |
||||
background-color: white; |
||||
float: left; |
||||
text-align: right; |
||||
width: 12px; |
||||
} |
||||
|
||||
.vimvixen-footerline-container-inner { |
||||
position: absolute; |
||||
left: 12px; |
||||
right: 0; |
||||
} |
||||
|
||||
.vimvixen-footerline-input { |
||||
margin: 0; |
||||
padding: 0; |
||||
width: 100%; |
||||
border: none; |
||||
} |
@ -0,0 +1,78 @@ |
||||
import './footer-line.css'; |
||||
|
||||
export default class FooterLine { |
||||
constructor(doc, initial = '') { |
||||
this.initUi(doc); |
||||
|
||||
this.enteredCallback = () => {} |
||||
this.promptChangeCallback = () => {} |
||||
|
||||
this.input.addEventListener('blur', this.handleBlur.bind(this)); |
||||
this.input.addEventListener('keydown', this.handleKeydown.bind(this)); |
||||
this.input.addEventListener('keyup', this.handleKeyup.bind(this)); |
||||
this.input.value = initial; |
||||
} |
||||
|
||||
initUi(doc) { |
||||
this.title = doc.createElement('p'); |
||||
this.title.className = 'vimvixen-footerline-title'; |
||||
|
||||
let containerInner = doc.createElement('div'); |
||||
containerInner.className = 'vimvixen-footerline-container-inner'; |
||||
|
||||
let containerOuter = doc.createElement('div'); |
||||
containerOuter.className = 'vimvixen-footerline-container-outer'; |
||||
|
||||
this.input = doc.createElement('input'); |
||||
this.input.className = 'vimvixen-footerline-input'; |
||||
|
||||
this.wrapper = doc.createElement('div'); |
||||
this.wrapper.className = 'vimvixen-footerline'; |
||||
|
||||
containerOuter.append(containerInner); |
||||
containerInner.append(this.input); |
||||
this.wrapper.append(this.title); |
||||
this.wrapper.append(containerOuter); |
||||
doc.body.append(this.wrapper) |
||||
} |
||||
|
||||
focus() { |
||||
this.input.focus(); |
||||
} |
||||
|
||||
remove() { |
||||
this.wrapper.remove(); |
||||
} |
||||
|
||||
onPromptChange(callback) { |
||||
this.promptChangeCallback = callback; |
||||
} |
||||
|
||||
onEntered(callback) { |
||||
this.enteredCallback = callback; |
||||
} |
||||
|
||||
handleBlur() { |
||||
this.remove(); |
||||
} |
||||
|
||||
handleKeydown(e) { |
||||
this.prevValue = e.target.value; |
||||
switch(e.keyCode) { |
||||
case KeyboardEvent.DOM_VK_ESCAPE: |
||||
this.remove(); |
||||
break; |
||||
case KeyboardEvent.DOM_VK_RETURN: |
||||
this.enteredCallback(e); |
||||
break; |
||||
} |
||||
} |
||||
|
||||
handleKeyup(e) { |
||||
if (e.target.value === this.prevValue) { |
||||
return; |
||||
} |
||||
this.promptChangeCallback(e); |
||||
this.prevValue = e.target.value; |
||||
} |
||||
} |
Reference in new issue