fix autocomplete

pull/1/head
yann300 6 years ago
parent 8eaab4fc7a
commit affd719960
  1. 4
      src/app/panels/terminal.js
  2. 42
      src/app/ui/auto-complete-popup.js
  3. 3
      src/app/ui/styles/auto-complete-popup-styles.js

@ -168,8 +168,8 @@ class Terminal extends BaseApi {
` `
self._view.term = yo` self._view.term = yo`
<div class="${css.terminal_container}" onscroll=${throttle(reattach, 10)} onclick=${focusinput}> <div class="${css.terminal_container}" onscroll=${throttle(reattach, 10)} onclick=${focusinput}>
<div style=" ${self._components.autoCompletePopup.render()}
background-color: grey; <div class="bg-secondary" style="
position: absolute; position: absolute;
height: 100%; height: 100%;
width: 100%; width: 100%;

@ -3,8 +3,6 @@ var remixLib = require('remix-lib')
var EventManager = remixLib.EventManager var EventManager = remixLib.EventManager
var Commands = require('../constants/commands') var Commands = require('../constants/commands')
var modal = require('./modaldialog.js')
// -------------- styling ---------------------- // -------------- styling ----------------------
var css = require('./styles/auto-complete-popup-styles') var css = require('./styles/auto-complete-popup-styles')
@ -27,26 +25,23 @@ class AutoCompletePopup {
self.data = { self.data = {
_options: [] _options: []
} }
self._components = { self._components = {}
modal: null self._view
}
self._view = {}
self._startingElement = 0 self._startingElement = 0
self._elementsToShow = 4 self._elementsToShow = 4
self._selectedElement = 0 self._selectedElement = 0
this.extraCommands = [] this.extraCommands = []
this.render()
this.extendAutocompletion() this.extendAutocompletion()
} }
render () { render () {
var self = this var self = this
self._view.autoComplete = yo` let autoComplete = yo`
<div class="${css.popup}"> <div class="${css.popup} alert alert-secondary">
<div> <div>
${self.data._options.map((item, index) => { ${self.data._options.map((item, index) => {
return yo` return yo`
<div class="${css.autoCompleteItem} ${css.listHandlerHide} item ${self._selectedElement === index ? 'bg-secondary' : ''}"> <div class="${css.autoCompleteItem} ${css.listHandlerHide} item ${self._selectedElement === index ? 'border border-primary' : ''}">
<div value=${index} onclick=${(event) => { self.handleSelect(event.srcElement.innerText) }}> <div value=${index} onclick=${(event) => { self.handleSelect(event.srcElement.innerText) }}>
${getKeyOf(item)} ${getKeyOf(item)}
</div> </div>
@ -62,22 +57,19 @@ class AutoCompletePopup {
</div> </div>
</div> </div>
` `
function setUpPopUp () { function setUpPopUp (autoComplete) {
handleOpenPopup() handleOpenPopup(autoComplete)
handleListSize() handleListSize(autoComplete)
} }
function handleOpenPopup () { function handleOpenPopup (autoComplete) {
if (self.data._options.length > 0) { autoComplete.style.display = self.data._options.length > 0 ? 'block' : 'none'
self._view.autoComplete.style.display = 'block'
self._components.modal = modal('', self._view.autoComplete, {label: null}, {label: null}, null, { class: css.modalContent, hideClose: true })
}
} }
function handleListSize () { function handleListSize (autoComplete) {
if (self.data._options.length >= self._startingElement) { if (self.data._options.length >= self._startingElement) {
for (let i = self._startingElement; i < (self._elementsToShow + self._startingElement); i++) { for (let i = self._startingElement; i < (self._elementsToShow + self._startingElement); i++) {
let el = self._view.autoComplete.querySelectorAll('.item')[i] let el = autoComplete.querySelectorAll('.item')[i]
if (el) { if (el) {
el.classList.remove(css.listHandlerHide) el.classList.remove(css.listHandlerHide)
el.classList.add(css.listHandlerShow) el.classList.add(css.listHandlerShow)
@ -85,10 +77,9 @@ class AutoCompletePopup {
} }
} }
} }
setUpPopUp(autoComplete)
setUpPopUp() if (!this._view) this._view = autoComplete
return autoComplete
return self._view
} }
handleSelect (text) { handleSelect (text) {
@ -189,8 +180,7 @@ class AutoCompletePopup {
removeAutoComplete () { removeAutoComplete () {
if (!this.isOpen) return if (!this.isOpen) return
this._view.autoComplete.style.display = 'none' this._view.style.display = 'none'
if (this._components.modal) this._components.modal.cancelListener()
this.isOpen = false this.isOpen = false
this.data._options = [] this.data._options = []
this._startingElement = 0 this._startingElement = 0

@ -2,6 +2,7 @@ var csjs = require('csjs-inject')
var css = csjs` var css = csjs`
.popup { .popup {
position : absolute;
text-align : left; text-align : left;
display : none; display : none;
width : 100%; width : 100%;
@ -9,6 +10,8 @@ var css = csjs`
font-size : 10px; font-size : 10px;
overflow : auto; overflow : auto;
padding-bottom : 13px; padding-bottom : 13px;
z-index : 2;
bottom : 1.7em;
} }
.autoCompleteItem { .autoCompleteItem {

Loading…
Cancel
Save