Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- var yo = require('yo-yo')
- var csjs = require('csjs-inject')
- const styleguide = require('../ui/styles-guide/theme-chooser')
- const styles = styleguide.chooser()
- const EventEmitter = require('events')
- class PluginManagerComponent {
- constructor () {
- this.event = new EventEmitter()
- this.views = {
- root: null,
- items: {}
- }
- }
- profile () {
- return {
- name: 'plugin manager',
- methods: [],
- events: [],
- icon: 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB3aWR0aD0iMTc5MiIgaGVpZ2h0PSIxNzkyIiB2aWV3Qm94PSIwIDAgMTc5MiAxNzkyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0xNzU1IDQ1M3EzNyAzOCAzNyA5MC41dC0zNyA5MC41bC00MDEgNDAwIDE1MCAxNTAtMTYwIDE2MHEtMTYzIDE2My0zODkuNSAxODYuNXQtNDExLjUtMTAwLjVsLTM2MiAzNjJoLTE4MXYtMTgxbDM2Mi0zNjJxLTEyNC0xODUtMTAwLjUtNDExLjV0MTg2LjUtMzg5LjVsMTYwLTE2MCAxNTAgMTUwIDQwMC00MDFxMzgtMzcgOTEtMzd0OTAgMzcgMzcgOTAuNS0zNyA5MC41bC00MDAgNDAxIDIzNCAyMzQgNDAxLTQwMHEzOC0zNyA5MS0zN3Q5MCAzN3oiLz48L3N2Zz4=',
- description: 'start/stop services, modules and plugins'
- }
- }
- setApp (appManager) {
- this.appManager = appManager
- }
- setStore (store) {
- this.store = store
- this.store.event.on('activate', (name) => { this.reRender() })
- this.store.event.on('deactivate', (name) => { this.reRender() })
- this.store.event.on('add', (name) => { this.reRender() })
- this.store.event.on('remove', (name) => { this.reRender() })
- }
- render () {
- let activeMods = yo`
- <div id='activePlugs' class=${css.activePlugins}>
- <h3>Active Modules</h3>
- </div>
- `
- let inactiveMods = yo`
- <div class=${css.inactivePlugins}>
- <h3>Inactive Modules</h3>
- </div>
- `
- let searchbox = yo`
- <input id='filter_plugins' placeholder='Search'>
- `
- var rootView = yo`
- <div id='pluginManager' class=${css.plugins_settings} >
- <h2>Plugin Manager</h2>
- ${searchbox}
- ${activeMods}
- ${inactiveMods}
- </div>
- `
- searchbox.addEventListener('keyup', (event) => { this.filterPlugins(event) })
- var modulesActive = this.store.getActives()
- modulesActive.sort(function (a, b) {
- var textA = a.profile.name.toUpperCase()
- var textB = b.profile.name.toUpperCase()
- return (textA < textB) ? -1 : (textA > textB) ? 1 : 0
- })
- modulesActive.forEach((mod) => {
- activeMods.appendChild(this.renderItem(mod.profile.name))
- })
- var modulesAll = this.store.getAll()
- modulesAll.sort()
- modulesAll.forEach((mod) => {
- if (!modulesActive.includes(mod)) {
- inactiveMods.appendChild(this.renderItem(mod.profile.name))
- }
- })
- if (!this.views.root) {
- this.views.root = rootView
- }
- return rootView
- }
- renderItem (item) {
- let ctrBtns
- const mod = this.store.getOne(item)
- if (!mod) return
- let action = () => {
- if (this.store.isActive(item)) {
- this.appManager.deactivateOne(item)
- } else {
- this.appManager.activateOne(item)
- }
- }
- ctrBtns = yo`<div id='${item}Activation'>
- <button onclick=${(event) => { action(event) }} >${this.store.isActive(item) ? 'deactivate' : 'activate'}</button>
- </div>`
- return yo`
- <div id=${item} class=${css.plugin} >
- <h3>${mod.profile.name}</h3>
- ${mod.profile.description}
- ${ctrBtns}
- </div>
- `
- }
- reRender () {
- if (this.views.root) {
- yo.update(this.views.root, this.render())
- }
- }
- filterPlugins (event) {
- let filterOn = event.target.value.toUpperCase()
- var nodes = this.views.root.querySelectorAll(`.${css.plugin}`)
- nodes.forEach((node) => {
- let h = node.querySelector('h3')
- let txtValue = h.textContent || h.innerText
- if (txtValue.toLowerCase().indexOf(filterOn.toLowerCase()) !== -1) {
- node.style.display = 'block'
- } else {
- node.style.display = 'none'
- }
- })
- }
- }
- module.exports = PluginManagerComponent
- const css = csjs`
- .plugins_settings h2 {
- font-size: 1em;
- border-bottom: 1px ${styles.appProperties.solidBorderBox_BorderColor} solid;
- padding: 10px 20px;
- font-size: 10px;
- padding: 10px 20px;
- text-transform: uppercase;
- font-weight: normal;
- background-color: white;
- margin-bottom: 0;
- }
- .plugin {
- ${styles.rightPanel.compileTab.box_CompileContainer};
- margin: 0;
- margin-bottom: 2%;
- border-bottom: 1px ${styles.appProperties.solidBorderBox_BorderColor} solid;
- padding: 0px 20px 10px;
- }
- .plugin h3 {
- margin-bottom: 5px;
- font-size: 12px;
- margin-top: 9px;
- }
- .plugin button {
- ${styles.rightPanel.settingsTab.button_LoadPlugin};
- cursor: pointer;
- font-size: 10px;
- }
- .activePlugins {
- }
- .inactivePlugins {
- }
- .plugins_settings input {
- margin: 10px;
- }
- `
Add Comment
Please, Sign In to add comment