Create abstract panel

pull/1/head
Grandschtroumpf 6 years ago
parent a30d4dd73d
commit 8c4de2025b
  1. 112
      src/app/components/panel.js

@ -0,0 +1,112 @@
import { EventEmitter } from 'events'
const registry = require('../../global/registry')
const csjs = require('csjs-inject')
const yo = require('yo-yo')
const css = csjs`
.plugins {
height: 100%;
}
.plugItIn {
display : none;
height : 100%;
}
.plugItIn > div {
overflow-y : auto;
height : 100%;
width : 100%;
}
.plugItIn.active {
display : block;
}
.pluginsContainer {
height: 100%;
overflow-y: hidden;
}
`
// Events are : 'toggle' | 'showing'
/** Abstract class used for hosting the view of a plugin */
export class AbstractPanel {
constructor (panelName, appStore, opts) {
this.events = new EventEmitter()
this.contents = {}
this.active = undefined
// View where the plugin HTMLElement leaves
this.view = yo`<div id="plugins" class="${css.plugins}"></div>`
appStore.event.on('activate', (name) => {
const api = appStore.getOne(name)
const profile = api.profile
if (profile.location !== panelName) return
if (!profile.location && !opts.default) return
if (profile.icon && api.render && typeof api.render === 'function') {
this.add(name, api.render())
}
})
appStore.event.on('deactivate', (name) => {
if (this.contents[name]) this.remove(name)
})
const verticalIcon = registry.get('verticalicon').api
// Toggle content
verticalIcon.events.on('toggleContent', (name) => {
if (!this.contents[name]) return
if (this.active === name) {
this.events.emit('toggle', name)
}
this.showContent(name)
this.events.emit('showing', name)
})
// Force opening
verticalIcon.events.on('showContent', (name) => {
if (!this.contents[name]) return
this.showContent(name)
this.events.emit('showing', name)
})
}
/**
* Add the plugin to the panel
* @param {String} name the name of the plugin
* @param {HTMLElement} content the HTMLContent of the plugin
*/
add (name, content) {
if (!!this.contents[name]) throw new Error(`Plugin ${name} already rendered`)
content.style.height = '100%'
content.style.width = '100%'
content.style.border = '0'
this.contents[name] = yo`<div class="${css.plugItIn}" >${content}</div>`
this.view.appendChild(this.contents[name])
}
/**
* Remove a plugin from the panel
* @param {String} name The name of the plugin to remove
*/
remove (name) {
const el = this.contents[name]
delete this.contents[name]
if (el) el.parentElement.removeChild(el)
}
/**
* Display the content of this specific plugin
* @param {String} name The name of the plugin to display the content
*/
showContent (name) {
if (!this.contents[name]) throw new Error(`Plugin ${name} is not yet activated`)
// hiding the current view and display the `moduleName`
if (this.active) {
this.contents[this.active].style.display = 'none'
}
this.contents[name].style.display = 'block'
this.active = name
}
}
Loading…
Cancel
Save