UI Library

The Highcharts Editor is built on a custom UI library.

The library includes the following generic components/widgets:

Color Picker
Dimmer
Font Picker
Horizontal Splitter
Inspector Field
List
Overlay Modal
Push Button
Snackbar
Tab Control
Toolbar
Tooltip
Tree
Wizard Stepper

highed.showDimmer(fn, autohide, transparent, zIndex) - function

Show a dimmer backdrop

Used to catch input when showing modals, context menues etc.

Examples

highed.showDimmer(function() {
    alert("You clicked the dimmer!");
});

Arguments

fn - function: the function to call when the dimmer is clicked
autohide - bool: set to true to hide the dimmer when it's clicked
transparent - bool: set to true for the dimmer to be transparent
zIndex - number: the z index *offset

Return

function - A function that can be called to hide the dimmer

Definition

./src/core-ui/highed.dimmer.js:45:
highed.showDimmer = function (fn, autohide, transparent, zIndex) {

highed.OverlayModal(contents, attributes) - constructor

Turn a DOM node into an overlay "popup"

Examples

highed.OverlayModal(highed.dom.cr("h1", "", "Hello World!"));

Arguments

contents - domnode: the DOM node to wrap.
attributes - object: properties for the modal
- width (number) - the width of the modal
- height (number) - the height of the modal
- minWidth (number) - the minimum width of the modal
- minHeight (number) - the minimum height of the modal
- showOnInit (boolean) - if true, the modal will be shown after creation
- zIndex (number) - the Z-Index to use for the modal

Methods

on(event, callback): Listen for event - returns function: Can be called to unbind the listener
- event: string, The event to listen for
- callback: function, Function to call when the event is emitted
show(): Show the modal
hide(supress): Hide the modal
- supress: boolean, supress the hide event emitting

Emitted Events

Show: when the overlay is shown
Hide: when the overlay is hidden

Members

body - data: The container DOM node

Return

object - A new instance of OverlayModal

Definition

./src/core-ui/highed.overlaymodal.js:51:
highed.OverlayModal = function (contents, attributes) {

highed.HSplitter(parent, attributes) - constructor

Horizontal splitter

Splits a view into two horizontal cells

Examples

var splitter = highed.HSplitter(document.body);

highed.dom.ap(splitter.left, highed.dom.cr("div", "", "Left!"));

highed.dom.ap(splitter.right, highed.dom.cr("div", "", "Right!"));

Arguments

parent - domnode: the parant to attach to
attributes - object: the settings for the splitter
- leftWidth (number) - the width in percent of the left cell
- noOverflow (bool) - wether or not overflowing is allowed
- leftClasses (string) - additional css classes to use for the left body
- rightClasses (string) - additional css classes to use for the right body
- allowResize (boolean) - set to true to enable user-resizing
- leftMax (number) - the max width of the left panel
- rightMax (number) - the max width of the right panel

Methods

resize(w, h): Force a resize of the splitter
- w: number, the width of the splitter (will use parent if null)
- h: number, the height of the splitter (will use parent if null)

Members

left - domnode: The dom node for the left cell
right - domnode: The dom node for the right cell

Definition

./src/core-ui/highed.hsplitter.js:49:
highed.HSplitter = function (parent, attributes) {

highed.VSplitter(parent, attributes) - constructor

Vertical splitter

Splits a view into two vertical cells

Examples

var splitter = highed.VSplitter(document.body);

highed.dom.ap(splitter.top, highed.dom.cr("div", "", "Top!"));

highed.dom.ap(splitter.bottom, highed.dom.cr("div", "", "Bottom!"));

Arguments

parent - domnode: the parant to attach to
attributes - object: the settings for the splitter
- topHeight (number) - the height in percent of the left cell. Alternatively, use '123px' to set a capped size.
- noOverflow (bool) - wether or not overflowing is allowed

Methods

resize(w, h): Force a resize of the splitter
- w: number, the width of the splitter (will use parent if null)
- h: number, the height of the splitter (will use parent if null)

Members

top - domnode: The dom node for the top cell
bottom - domnode: The dom node for the bottom cell

Definition

./src/core-ui/highed.vsplitter.js:42:
highed.VSplitter = function (parent, attributes) {

highed.TabControl(parent, noOverflow, extraPadding) - constructor

Standard tabcontrol compopnent

Examples

var tabs = highed.TabControl(document.body), tab1 = tabs.createTab({
    title: "Tab 1"
}), tab2 = tabs.createTab({
    title: "Tab 2"
});

Arguments

parent - domnode: the node to attach to
noOverflow - boolean: set to true to disable scrollbars
extraPadding - boolean: set to true to have extra padding in bodies

Methods

on(event, callback): Listen for event - returns function: Can be called to unbind the listener
- event: string, The event to listen for
- callback: function, Function to call when the event is emitted
resize(w, h): Force a resize of the tab control
- w: number, the width, uses parent width if null
- h: number, the height, uses parent width if null
selectFirst(): Select the first tab
barSize(): Get the size of the title bar - returns object:

Emitted Events

Focus: when a new tab gets focus.

Definition

./src/core-ui/highed.tabcontrol.js:43:
highed.TabControl = function (parent, noOverflow, extraPadding) {

highed.InspectorField(type, value, properties, fn, nohint, fieldID) - function

An editable field

Creates a table row with thre columns:

label
widget
help icon

Examples

highed.dom.ap(document.body, highed.dom.ap(highed.dom.cr("table"), highed.InspectorField("color", "#FFF", {
    title: "Set the color!"
}, function(newValue) {
    highed.dom.style(document.body, {
        backgroundColor: newValue
    });
})));

Arguments

type - enum: the type of widget to use
- string (false) -
- number (false) -
- range (false) -
- boolean (false) -
- color (false) -
- font (false) -
- options (false) -
- object (false) -
value - anything: the current value of the field
properties - object: the properties for the widget
fn - function: the function to call when the field is changed
- {anything} (anything) - the changed value
nohint - boolean: if true, the help icon will be skipped
fieldID - anything: the id of the field

Return

domnode - a DOM node containing the field + label wrapped in a tr

Todo

This needs a proper cleaning now that the requirements are set.

Definition

./src/core-ui/highed.inspector.field.js:66:
highed.InspectorField = function (type, value, properties, fn, nohint, fieldID) {

highed.List(parent, responsive) - constructor

A list component

Creates a list with selectable items

Examples

var list = highed.List(document.body).addItem({
    title: "My Item",
    click: function() {
        alert("You clicked the item!");
    }
});

Arguments

parent - domnode: the node to attach the list to
responsive - boolean: set to true to get JS-based responsive functionality

Methods

addItem(item): Add an item to the list - returns object: an interface to interact with the item
- item: object, the item meta for the item to add
  - title (string) - the title as displayed in the list
  - id (anything) - the id of the item: used for highed.List.on('Select')
  - click (function) - function to call when clicking the item
addItems(items): Add a set of items to the list
- items: array<object>, an array of items to add
clear(): Clear all the items in the list
resize(): Force resize of the list
show(): Show the list
hide(): Hide the list
selectFirst(): Select the first item
select(which): Select an item
- which: string, the id of the item to select
reselect(): Reselect the current item
countItems(): Count the number of items currently in the list
selected(): Get the selected item - returns object: the selected item

Definition

./src/core-ui/highed.list.js:45:
highed.List = function (parent, responsive) {

highed.pickColor(x, y, current, fn) - function

Color picker

Component to pick colors from the google material design color palette. User input is also possible. The color palette is defined in meta/highed.meta.colors.js, and is divided into groups of 14 hues per. color.

Examples

highed.pickColor(10, 10, "#fff", function(color) {
    alert("You selected " + color + ", great choice!");
});

Arguments

x - number: the x position to display the picker at
y - number: the y position to display the picker at
current - string: the current color
fn - function: the function to call when the color changes
- newColor (string) - the color selected by the user

Definition

./src/core-ui/highed.colorpicker.js:66:
highed.pickColor = function (x, y, current, fn) {

highed.Toolbar(parent, attributes) - constructor

A standard toolbar.

Examples

var toolbar = highed.Toolbar("my-node", {
    additionalCSS: [ "cool-toolbar" ]
});

Arguments

parent - domnode: the node to attach the toolbar to
attributes - object: toolbar settings
- additionalCSS (array) - array of additional css classes to add to the toolbar

Methods

addIcon(icon): Add an icon to the toolbar
- icon: object, an object containing the icon settings.
  - css (array) - the additional css class(s) to use
  - click (function) - the function to call when the icon is clicked

Members

container - domnode: The toolbar container
left - domnode: The left part of the toolbar
center - domnode: The center part of the toolbar
right - domnode: The right part of the toolbar

Definition

./src/core-ui/highed.toolbar.js:40:
highed.Toolbar = function (parent, attributes) {

highed.FontPicker(fn, style) - function

Font picker

Creates a small font picking widget editing of:

bold
font family
font size
color Note that this must be attached to the document manually by appending the returned container to something.

Examples

var picker = highed.FontPicker(function(newStyle) {
    highed.dom.style(document.body, newStyle);
});

highed.dom.ap(document.body, picker.container);

Arguments

fn - function: the function to call when things change
style - object: the current style object
- fontFamily (string) - the font family
- color (string) - the font color
- fontWeight (string) - the current font weight
- fontStyle (string) - the current font style

Methods

set(options): Set the current options
- options: object, the options to set

Return

object - an interface to the picker

Definition

./src/core-ui/highed.fontpicker.js:58:
highed.FontPicker = function (fn, style) {

highed.WizardStepper(bodyParent, indicatorParent, attributes) - constructor

A wizard-type stepper

This is sort of like a tab control, but with a logical x -> y flow.

Arguments

bodyParent - domnode: the node to attach the body to
indicatorParent - domnode: the node to attach the indicators to
attributes - object: the settings for the stepper
- indicatorPos (enum) - the indicator alignment
  - top (false) -
  - bottom (false) -

Methods

on(event, callback): Listen for event - returns function: Can be called to unbind the listener
- event: string, The event to listen for
- callback: function, Function to call when the event is emitted
addStep(step): Add a new step - returns object: interface to manipulate the step
- step: object, an object describing the step
  - title (string) - the step title
next(): Go to the next step
previous(): Go to the previous step
resize(w, h): Force a resize of the splitter
- w: number, the width of the stepper (will use parent if null)
- h: number, the height of the stepper (will use parent if null)
selectFirst(): Select the first step

Emitted Events

Step: when going back/forth
AddStep: when a new step is added

Members

body - domnode: The main body

Definition

./src/core-ui/highed.wizstepper.js:42:
highed.WizardStepper = function(bodyParent, indicatorParent, attributes) {

highed.Tooltip(x, y, tip, blowup) - function

Show a tooltip

Arguments

x - number: the x position of the tooltip
y - number: the y position of the tooltip
tip - string: the title
blowup - boolean: blow the tooltip up

Definition

./src/core-ui/highed.tooltip.js:49:
highed.Tooltip = function (x, y, tip, blowup) {

highed.PushButton(parent, icon, state) - constructor

A simple toggle button component

Examples

highed.PushButton(document.body, "gear", false).on("Toggle", function(state) {
    alert("Push button is now " + state);
});

Arguments

parent - domnode: the parent to attach the button to
icon - string: the button icon
state - boolean: the innitial state of the button

Methods

on(event, callback): Listen for event - returns function: Can be called to unbind the listener
- event: string, The event to listen for
- callback: function, Function to call when the event is emitted
set(flag): Set the current state
- flag: boolean, the new state

Emitted Events

Toggle: when the state changes

Members

button - domnode: The button

Definition

./src/core-ui/highed.pushbutton.js:45:
highed.PushButton = function (parent, icon, state) {

highed.Tree(parent) - constructor

Tree component

For an example of formatting, build the editor with gulp with-advanced, and look in src/meta/highed.options.advanced.js.

Examples

var tree = highed.Tree(document.body).build({});

Arguments

parent - domnode: the node to attach the tree to

Methods

on(event, callback): Listen for event - returns function: Can be called to unbind the listener
- event: string, The event to listen for
- callback: function, Function to call when the event is emitted
expandTo(id): Expand to show a given ID
- id: string, the ID of the element to expand
build(tree, pnode, instancedData, dataIndex): Build the tree
- tree: object, the tree to display
  - children (object) - the children of the node
  - entries (array) - array of orphan children
- pnode: domnode, the parent node
- instancedData: object, the actual tree data
- dataIndex: number, the path to data in arrays
reselect(): Reselect the currently selected node

Emitted Events

Select: when a node is selected

Definition

./src/core-ui/highed.tree.js:41:
highed.Tree = function (parent) {

highed.snackBar(stitle, saction, fn) - function

Show a snackbar

A snack bar is those info rectangles showing up on the bottom left.

Examples

highed.snackBar("Hello world!");

Arguments

stitle - string: the snackbar title
saction - string: the snackbar action text
fn - function: the function to call when clicking the action

Definition

./src/core-ui/highed.snackbar.js:74:
highed.snackBar = function (stitle, saction, fn) {

highed.DropDown(parent) - constructor

A stylable dropdown

Arguments

parent - domnode: the node to attach the dropdown to

Methods

on(event, callback): Listen for event - returns function: Can be called to unbind the listener
- event: string, The event to listen for
- callback: function, Function to call when the event is emitted
addItem(item): Add an item to the dropdown
- item: object, the item to add
  - title (string) - the title of the item
  - id (anyting) - the id of the item
  - select (function) - function to call when the item is selected
clear(): Clear the dropdown
addItems(itemsToAdd): Add several items to the dropdown
- itemsToAdd: array, array of items to add
selectById(id): Set the current selection by id
- id: anything, the id to select
selectByIndex(index): Set the current selection by index
- index: number, the index to select in range [0..item.length]

Emitted Events

Change: when the selection changes
Open: when the dropdown is opened
Close: when the dropdown is closed

Definition

./src/core-ui/highed.dropdown.js:43:
highed.DropDown = function (parent) {

highed.ContextMenu(stuff) - constructor

A context menu component

Does a typicall right-click menu. Note that each instance get their own DOM node in the document body.

Examples

var ctx = highed.ContextMenu([ {
    title: "Hello World",
    click: function(e) {
        alert("hello world!");
    }
} ]);

Arguments

stuff - object: things to add (optional)
- title (string) - the title of the entry
- click (function) - function to call when selecting the item

Methods

addEntry(entry): Add an entry to the menu
- entry: object, the definition of the entry to add
  - title (string) - the title of the entry
  - click (function) - the function to call when clicking the item
show(x, y): Show the menu
- x: number, the x position
- y: number, the y position
hide(): Hide the menu
build(def): Build a menu
- def: array<object>, an array of entries

Definition

./src/core-ui/highed.contextmenu.js:47:
highed.ContextMenu = function (stuff) {

Latest Releases

Overview

Introduction

Stand-alone Usage

Advanced

Integrating

API Reference

Chart