parent
a30d4dd73d
commit
8c4de2025b
@ -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…
Reference in new issue