wbox

Installation

Install with npm:

npm install wbox --save

Example

Step one is to setup the wbox in your html. The only requirement for the <div> is the class="wbox" & the dimentions w-*.

Here is an example (the additional attributes we'll get to):

<div id="ElementID" class="wbox wbox-theme-flat" w-height="300px" w-width="400px" w-max-width="100%">
    Your HTML code here 
</div>

Step two is pointing wbox to the div and telling wbox what to do with it.

// All wbox calls will begin like:
var modal = new WBox('ElementID')

// Full example to show the defined wbox.
// Wbox functions are stringed together.
modal.show()

WBox usage

If loading through browser <script> tag: access via new wbox.WBox() or new wbox.IBox()

// JS
const { WBox, IBox } from 'wbox';
// TS
import { WBox, IBox } from 'wbox';

new WBox()

Initialize the wbow, example

var modal = new WBox('ElementID')

Overrides

new WBox(el: string)
new WBox(el: Element)
new WBox(el: string, config: Properties)
new WBox(el: Element, config: Properties)

.show(WBox.Properties)

• style Object StyleProperties
  • [key: string]: string | any
• overlay Object OverlayProperties
  • show: boolean default = true
  • backgroundColor?: string

Iniates the display process of the defined element id.

Example

<WBox>.show()

.close()

Closes the wbox.

Example

<WBox>.close()

.resize(WBox.ResizeProperties)

• options Object
  • height string
  • width string

Note: .show()'s sizing will occur before .resize({options})

Example

<WBox>.resize({
  // Any size format can be passed.
  height: '20%',
  width: '400px'
})

IBox usage

new IBox()

Initialize the ibox, example

var modal = new IBox('ElementID')

Overrides

new IBox(images: string)
new IBox(images: string | Array<string>)
new IBox(images?: string | Array<string>, config?: IBoxProperties)

.image(imageIndex)

• imageIndex Number

Example

<IBox>.image(2)

Themes

By default the following themes are included:

• wbox-theme-default
• wbox-theme-flat
• wbox-theme-material
• wbox-theme-simple
• wbox-theme-x

Pre-configured elements

These are wbox child elements preconfigured to the specified theme.

Example

<div class="wbox">
  <div class="wbox-title">
    Child element
  </div>
</div>

Title

Sets a fixed position title and repositions the wbox-content accordingly.

Example

<div class="wbox-title">
  Place title here
</div>

Content

Dynamically positioned (will consume title section if no title is defined).

Example

<div class="wbox-content">
  Place any content here..
</div>

Building

While developing

This will allow continuous development and auto building to test. Use the test/test.html to manually test your changes.

npm run gulp:live

For production

Build is configured to minify on output for production usage.

npm run gulp:build