Merge pull request #1959 from ethereum/issue#1949-abstract_panel
Issue#1949 abstract panelpull/3094/head
yann300
6 years ago
committed by
GitHub
commit
18be51f96b
@ -0,0 +1,24 @@ |
||||
import { AbstractPanel } from './panel' |
||||
const yo = require('yo-yo') |
||||
const csjs = require('csjs-inject') |
||||
|
||||
const css = csjs` |
||||
.pluginsContainer { |
||||
height: 100%; |
||||
display: flex; |
||||
overflow-y: hidden; |
||||
} |
||||
` |
||||
|
||||
export class MainPanel extends AbstractPanel { |
||||
constructor (appStore, options) { |
||||
super('mainPanel', appStore, options) |
||||
} |
||||
|
||||
render () { |
||||
return yo` |
||||
<div class=${css.pluginsContainer}> |
||||
${this.view} |
||||
</div>` |
||||
} |
||||
} |
||||
@ -0,0 +1,111 @@ |
||||
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 |
||||
} |
||||
} |
||||
|
||||
@ -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; |
||||
} |
||||
` |
||||
@ -0,0 +1,84 @@ |
||||
import { AbstractPanel } from './panel' |
||||
const csjs = require('csjs-inject') |
||||
const yo = require('yo-yo') |
||||
|
||||
const css = csjs` |
||||
.panel { |
||||
height: 100%; |
||||
overflow-y: hidden;
|
||||
} |
||||
.swapitTitle { |
||||
text-transform: uppercase; |
||||
} |
||||
.swapitHeader { |
||||
height: 35px; |
||||
padding: 0 20px; |
||||
display: flex; |
||||
justify-content: space-between; |
||||
align-items: center; |
||||
} |
||||
.swapitHeader h6 { |
||||
margin: 0; |
||||
} |
||||
.icons i { |
||||
height: 80%; |
||||
cursor: pointer; |
||||
} |
||||
.pluginsContainer { |
||||
height: calc(100% - 35px); |
||||
overflow: auto; |
||||
} |
||||
` |
||||
|
||||
const options = { |
||||
default: true, |
||||
displayHeader: true |
||||
} |
||||
|
||||
export class SwapPanel extends AbstractPanel { |
||||
|
||||
constructor (appStore) { |
||||
super('swapPanel', appStore, options) |
||||
this.header = this.renderHeader() |
||||
this.store = appStore |
||||
} |
||||
|
||||
/** |
||||
* Display content and update the header |
||||
* @param {String} name The name of the plugin to display |
||||
*/ |
||||
showContent (name) { |
||||
super.showContent(name) |
||||
yo.update(this.header, this.renderHeader()) |
||||
} |
||||
|
||||
/** The header of the swap panel */ |
||||
renderHeader () { |
||||
let name = ' - ' |
||||
let hasSettings = false |
||||
if (this.active) { |
||||
const { profile } = this.store.getOne(this.active) |
||||
name = profile.displayName ? profile.displayName : profile.name |
||||
hasSettings = profile.settings || false |
||||
} |
||||
return yo` |
||||
<header class="${css.swapitHeader}"> |
||||
<h6 class="${css.swapitTitle}">${name}</h6> |
||||
<div class="${css.icons}"> |
||||
${hasSettings |
||||
? yo`<i class="fas fa-cog"></i>` |
||||
: yo`<i></i>`} |
||||
</div> |
||||
</header>` |
||||
} |
||||
|
||||
render () { |
||||
return yo` |
||||
<section class="${css.panel}"> |
||||
${this.header} |
||||
<div class="${css.pluginsContainer}"> |
||||
${this.view} |
||||
</div> |
||||
</section>` |
||||
} |
||||
} |
||||
@ -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