parent
96562c8e40
commit
69d26737b3
@ -1,43 +0,0 @@ |
||||
import EventEmmitter from 'events' |
||||
|
||||
class SwapPanelApi { |
||||
constructor (swapPanelComponent, verticalIconsComponent) { |
||||
this.event = new EventEmmitter() |
||||
this.component = swapPanelComponent |
||||
this.currentContent |
||||
verticalIconsComponent.events.on('toggleContent', (moduleName) => { |
||||
if (!swapPanelComponent.contents[moduleName]) return |
||||
if (this.currentContent === moduleName) { |
||||
this.event.emit('toggle', moduleName) |
||||
return |
||||
} |
||||
this.showContent(moduleName) |
||||
this.event.emit('showing', moduleName) |
||||
}) |
||||
|
||||
verticalIconsComponent.events.on('showContent', (moduleName) => { |
||||
if (!swapPanelComponent.contents[moduleName]) return |
||||
this.showContent(moduleName) |
||||
this.event.emit('showing', moduleName) |
||||
}) |
||||
} |
||||
|
||||
showContent (moduleName) { |
||||
this.component.showContent(moduleName) |
||||
this.currentContent = moduleName |
||||
} |
||||
|
||||
/* |
||||
content: DOM element |
||||
by appManager |
||||
*/ |
||||
add (profile, content) { |
||||
return this.component.add(profile.name, content) |
||||
} |
||||
|
||||
remove (profile) { |
||||
return this.component.remove(profile.name) |
||||
} |
||||
} |
||||
|
||||
module.exports = SwapPanelApi |
@ -1,102 +0,0 @@ |
||||
var yo = require('yo-yo') |
||||
var csjs = require('csjs-inject') |
||||
|
||||
class SwapPanelComponent { |
||||
constructor (name, appStore, appManager, opt) { |
||||
this.name = name |
||||
this.opt = opt |
||||
this.store = appStore |
||||
// list of contents
|
||||
this.contents = {} |
||||
// name of the current displayed content
|
||||
this.currentNode |
||||
|
||||
this.store.event.on('activate', (name) => { |
||||
const api = this.store.getOne(name) |
||||
const profile = api.profile |
||||
if (((profile.location === this.name) || (!profile.location && opt.default)) && |
||||
profile.icon && api.render && typeof api.render === 'function') { |
||||
this.add(name, api.render()) |
||||
} |
||||
}) |
||||
|
||||
this.store.event.on('deactivate', (name) => { |
||||
if (this.contents[name]) this.remove(name) |
||||
}) |
||||
this.store.event.on('add', (api) => { }) |
||||
this.store.event.on('remove', (api) => { }) |
||||
} |
||||
|
||||
showContent (moduleName) { |
||||
// hiding the current view and display the `moduleName`
|
||||
if (this.contents[moduleName]) { |
||||
if (this.currentNode) { |
||||
this.contents[this.currentNode].style.display = 'none' |
||||
} |
||||
this.contents[moduleName].style.display = 'block' |
||||
this.currentNode = moduleName |
||||
var api = this.store.getOne(moduleName) |
||||
this.header.querySelector('h6').innerHTML = api.profile ? api.profile.displayName : ' - ' |
||||
return |
||||
} |
||||
} |
||||
|
||||
add (moduleName, content) { |
||||
content.style.height = '100%' |
||||
content.style.width = '100%' |
||||
content.style.border = '0' |
||||
this.contents[moduleName] = yo`<div class=${css.plugItIn} >${content}</div>` |
||||
this.view.appendChild(this.contents[moduleName]) |
||||
} |
||||
|
||||
remove (moduleName) { |
||||
let el = this.contents[moduleName] |
||||
if (el) el.parentElement.removeChild(el) |
||||
} |
||||
|
||||
render () { |
||||
this.view = yo` |
||||
<div id='plugins' class=${css.plugins}> |
||||
</div> |
||||
` |
||||
this.header = yo`<header class="${css.swapitHeader}"><h6 class="${css.swapitTitle}"></h6></header>` |
||||
if (!this.opt.displayHeader) this.header.style.display = 'none' |
||||
|
||||
return yo`<div class=${css.pluginsContainer}>
|
||||
${this.header} |
||||
${this.view} |
||||
</div>` |
||||
} |
||||
} |
||||
|
||||
module.exports = SwapPanelComponent |
||||
|
||||
const css = csjs` |
||||
.plugins { |
||||
height : 95%; |
||||
} |
||||
.plugItIn { |
||||
display : none; |
||||
height : 100%; |
||||
} |
||||
.plugItIn > div { |
||||
overflow-y : auto; |
||||
height : 100%; |
||||
width : 100%; |
||||
} |
||||
.plugItIn.active { |
||||
display : block; |
||||
} |
||||
.pluginsContainer { |
||||
height: 100%; |
||||
overflow-y: hidden; |
||||
} |
||||
.swapitTitle { |
||||
text-transform: uppercase; |
||||
} |
||||
.swapitHeader { |
||||
height: 35px; |
||||
padding-top: 10px; |
||||
padding-left: 27px; |
||||
} |
||||
` |
@ -1,20 +0,0 @@ |
||||
// API
|
||||
class VerticalIconsApi { |
||||
|
||||
constructor (verticalIconsComponent) { |
||||
this.component = verticalIconsComponent |
||||
} |
||||
|
||||
addIcon (mod) { |
||||
this.component.addIcon(mod) |
||||
} |
||||
|
||||
removeIcon (mod) { |
||||
this.component.removeIcon(mod) |
||||
} |
||||
|
||||
select (moduleName) { |
||||
this.component.select(moduleName) |
||||
} |
||||
} |
||||
module.exports = VerticalIconsApi |
Loading…
Reference in new issue