Page tree

Have questions? Stuck? Please check our FAQ for some common questions and answers.

Skip to end of metadata
Go to start of metadata

PanelService is an Angular Factory in the Layer module with the name panel.js. It allows you to create and control floating panels on the view. To use these functions, see the documentation on injecting Angular services.

An example of a panel is the details panel on Topology View.

NameSummary
initInitializes the PanelService.
createPanelCreates a panel with specified name and options.
destroyPanelDestroys panel with the given name.

Function Descriptions

init

Initializes the PanelService. You probably won't have to call this, since it is initialized when the UI starts.

Example UsageArgumentsReturn Value
ps.init();nonenone

createPanel

Creates a panel with specified name and options.

Example UsageArgumentsReturn Value
var panel = ps.createPanel(id, opts);

id - string with a unique ID to be used to identify the panel

opts - object with options for how the panel should be created (see below)

an object with an API that contains actions that can be performed on the panel
Returned API Example UsageArgumentsReturn Value
panel.show(cb);cb - (optional) a function reference to be executed after the panel is done animating into the shown position

none

The panel is now on the screen.

panel.hide(cb);cb - (optional) a function reference to be executed after the panel is done animating into the hidden position

none

The panel is now off screen. If hideMargin was specified (see below) the panel will be visible for that pixel amount.

panel.toggle(cb);cb - (optional) a function reference to be executed when the panel is done animating into the shown or hidden position

boolean of if the panel is currently showing

The panel will be on or off screen - the opposite of what it was before.

panel.empty();none

d3 selection of the panel element

The panel's contents are now empty.

panel.append(what);what - string of the element tag to append to the panel. An example would be 'div'.d3 selection of the panel element
panel.width(w);

w - (optional) Number value to set the panel's width to

This function is getter/setter.

if w is undefined, the panel's current width (as a number) is returned

if w is defined, no return value

panel.height(h);

h - (optional) Number value to set the panel's height to

This function is getter/setter.

if h is undefined, the panel's current height (as a number) is returned

if h is defined, no return value

panel.isVisible();noneboolean of if the panel currently showing
panel.classed(cls, bool);

cls - string of the class

bool - truthy value adds the class, falsy value removes the class

d3 selection of the panel element
panel.el();noned3 selection of the panel element

Options for Creating a Panel

These are the default settings that are used in creating a panel. You can overwrite them by providing an object for opts.

var settings = {
	edge: 'right',          // edge of the screen the panel shows and hides from - top, bottom, left, right
	width: 200,             // width of the panel in pixels
	margin: 20,             // distance (pixels) from 'edge' to side of panel (when shown)
	hideMargin: 20,         // distance (pixels) from 'edge' to side of panel (when hidden)
									// negative numbers show the panel when it's "offscreen"
	xtnTime: 750,           // animation time for the panel to transition from shown to hidden
	fade: true              // whether the panel fades on and off screen in transition
};
// height is a setting you can also provide (there is no default height)

destroyPanel

Destroys panel with the given name. You generally want to do this when the view changes.

Example UsageArgumentsReturn Value
ps.destroyPanel(id);id - string of the unique ID of the panel that you want to destroy

none

the panel has been destroyed

  • No labels