electrongui

Almost all the classes have a static is(x) method that check if x is an instance of that class. Use that instead of instanceof because it works on different scopes.

Basic Elements

ToggleElement

Extends EventEmitter.

Class that represent an html element that can be shown/hided and emit events accordingly.

All the ToggleElement instances are linked on creation to a HTML element. The element is accessible with this.element. If the element is not supplied on creation it will be created as an empty DIV element.

let body = document.getElementsByTagName('body')[0]
const {ToggleElement} = require('electrongui')
var el = document.createElelement('DIV')
var togEl = new ToggleElement(el, body)
togEl.element === el // true

Creation

new ToggleElement(element, parent)

Methods

appendTo(element)

Append this.element to element. Return this.

appendChild(element)

Append element as a child of this.element. Return this.

removeChild(element)

Remove element from the children of this.element. Return this.

remove()

Remove from the parent (if set with this.appendTo(parent)). Return this.

clear()

Remove all the children of this.element. Return this.

show()

Display the element, set this.element.style.display = ''. Return this.

hide()

Display the element, set this.element.style.display = 'none'. Return this.

toggle()

Display/hide the element. Return this.

isHidden()

return true if the element is hidden.

addToggleButton(options)

Add a toggle button to a preexistent buttonsContainer. Return the button.

removeToggleButton()

remove the previously added toggle button.

Events

show

Emitted when the element is shown.

hide

Emitted when the element is hided.

add

Emitted when the element is added to a parent element (using appendTo or appendChild ToggleElement methods).

remove

Emitted when the element is removed from a parent element (using remove or removeChild ToggleElement methods).

ButtonsContainer

extends ToggleElement

ButtonsContainer is a container for buttons that can be arranged in different groups (see Photon).

const {ButtonsContainer} = require('electrongui');

let btnContainer = new ButtonsContainer();

btnContainer.addButton({
  id: 'button1',
  className: 'btn-default',
  icon: 'fa fa-bars',
  groupId: 'group0',
  text: 'a',
  toggle: true,
  action: (btn)=>{
    console.log(btn.innerHTML);
    btn.innerHTML += 'a';
  });

Methods

addButton(options)

Return the button element.

removeButton(id, force)

addButtonGroup(options, buttons)

Return the button group element

removeButtonGroup(id, force)

extends ToggleElement

Create a Modal element.

const {Modal} = require('electrongui');

new Modal({
  title: 'I am a modal',
  body: 'drag me',
  draggable: true,
  oncancel: ()=>{
    console.log('exit');
  }
  }).show();

constructor

new Modal(options)

-options:

Methods

destroy()

Hide and destroy the modal.

addTitle(title)

addBody(body)

addFooter(footer)

-footer string or html element or toggle element. Return this.

ProgressBar

extends ToggleElement

constructor

new ProgressBar(parent)

Methods

setHeight(h)

setBar(value)

startWaiting()

make the progress bar start the waiting animation, moving cycling.

stopWaiting()

stop the waiting animation.

hideBar()

showBar()

setColor(color)

remove()

add()

ListGroup

Create and manage a List group as in Photon.

constructor

new ListGroup(id, parent)

Methods

addItem(options)

removeItem(id)

remove the given item

addSearch(options)

add a search field at the top of the list group, will use the keys tag to search in the items list, and display/hide the appropriate items that match the search.

setKey(id, newkey, append)

Add the new key to the given item’s search keys

removeKey(id, key)

Remove the key from the search keys of the item id

clean()

remove all items.

setTitle(id, newtitle)

set the new title in the given item.

showItem(id)

-id

show the given item.

hideItem(id)

-id

hide the given item.

activeItem(id)

Active (add css class ‘active’) to the given item.

deactiveItem(id)

Deactive (remove css class ‘active’) from the given item.

showAll()

show all items.

hideAll()

hide all items

activeAll()

active all items.

deactiveAll()

deactive all items.

hideDetails(id)

hide the details element of the given item.

showDetails(id)

hideAllDetails()

forEach(f)

apply a given function f to all the items.

Create and manage a Nav group as in Photon.

extends ToggleElement

constructor

new Sidebar(parent, options)

Methods

addList(arg)

addNav(arg)

addItem(options)

add one item to the ListGroup or NavGroup.

remove()

remove the sidebar.

Gui and Extensions

Gui

Properties

Methods

Examples

Add a button in the header

gui.header.actionsContainer.addButton({
  icon: 'fa fa-bar',
  action: ()=> console.log('click!')
  })

gui.footer.notify('message!!!!')

Add a progress bar

gui.footer.addProgressBar()
gui.footer.progressBar.setBar(20)

Create an alert

const {Alert} = require('electrongui')
gui.alerts.add('this is a warning','warning')
gui.alerts.add('this is a code error', 'error')
let customAlert = new Alert({
  body: 'custom alert',
  icon: 'fa fa-bell-o',
  status: 'warning',
  timeout: 40000 //after 40 sec the alert will be removed
  })
gui.alerts.add(customAlert)

GuiExtension

extends ToggleElement

Extend this class to create a new extension. When implementing default methods be sure to call the relative super method.

constructor(gui, config)

Methods

activate

Activate the extension

deactivate

Deactivate the extension

setMenuLabel(label)

addMenuItem(item)

removeMenuItem(item)

appendMenu()

removeMenu()

Events

activate

deactivate

ExtensionsManager

extends GuiExtension

Methods

install(name)

This method will attempt to call npm install name --force in app.getPath(userData) and then will try to load the extension.

download(name, cl)

load(extPath, cl)

hideExtensions()

Hide all the extensions.

add(extension)

remove(extension)

add

Emitted when an extension is added to the ExtensionsManager.

Return extension.

error

Emitted when there is an error.

Return error.

Workspace

extends Node’s EventEmitter

constructor(options)

Methods

addSpace(id, object, overwrite)

getSpace(id)

new(path, check)

save(path, cl, error)

load(path, check)

safequit()

Events

AlertManager

An instance of AlertManager is available as gui.alerts.

Methods

Alert

Methods

Events

TaskManager

Methods

Events

Task

Methods

Events

Utilities

util

Just a collection of utilities. const {util} = require('electrongui')

util.findKeyId(x, obj, tag)

suppose to have an object as

let a = {
  one: {
    id : 145
  },
  two: {
    id : 23
  },
  three: {
    id: 45
  }
}

And you want to find the sub-object with properties id equal to 23.

let target =util.findKeyId(23, a, 'id')
console.log(a[target]) // { id: 23}

util.nextKey(obj)

find the first numeric key that is available to assign a new property in the object.

util.parseTimeInterval(s)

return a human readable string of time from a millisecond value.

util.div(className, text)

create a div html element

util.setProgress(value)

set progress with electron progress bar.

util.stringify(object)

Stringify an object.

util.isNode()

return true if we are in Node.

util.isElectron()

util.sum(v)

Sum all values in the array v.

util.mean(v)

compute the mean of the array v.

util.clone(obj)

Clone an object.

util.notifyOS(text)

Emit a OS dependent notification with the given text.

util.readJSON(filename, callback, error)

async read a json file and call callback over the resulting object.

util.readJSONsync(filename,error)

sync read a json file and return the object.

util.empty(parent,child)

remove all the child of parent starting from child.

util.isIcon(icon)

Decide if an element is an icon.

util.icon(icon)

create and icon element starting from a string if able otherwise return an empty DIV.

input

const {input} = require('electrongui')

input.checkButton(options)

return the HTML element.

input.selectInput(options)

input.input(options)

This site is open source. Improve this page.