Skip to content

Overlay widget toolkit for BSD Online educational content

Notifications You must be signed in to change notification settings

bsdeducation/bsd-overlay

Repository files navigation

BSD Overlay

This is a helper library for BSD Online content creators to easily add UI widgets as overlays to content such as interactive steps, code steps, sandboxes.

For example:

$BSD.overlay.button({
  position: { top: '20px', right: '20px' },
  icon: 'arrow-left',
  onClick: () => console.log('clicked 1'),
});

will create a button that is permanently fixed at the specified position, using the 'arrow-left' font-awesome icon.

The goals of this library are:

  • ease of use - it's available by default in all interactive steps; no need to modify your HTML to include any dependencies
  • simplicity - to speed up content creation
  • consistency - to provide a level of consistency across content
  • not flexibility - it's not supposed to be a general purpose toolkit

This library is supposed to make it easier to define UI controls as an overlay above the primary content of the interactive step. The overlay controls are not supposed to be the primary content so they should not be highly configurable, attempting to solve all possible use cases.

All controls in this library can have their properties modified after construction e.g.

const b = $BSD.overlay.button({
  position: { top: '20px', right: '20px' },
  text: 'click me',
  onClick: () => b.text = 'thank you',
});

More documentation

Please visit here for the full documentation.

About

Overlay widget toolkit for BSD Online educational content

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published