diff --git a/docs/plugins/index.hbs b/docs/plugins/index.hbs new file mode 100644 index 00000000..518dfae0 --- /dev/null +++ b/docs/plugins/index.hbs @@ -0,0 +1,232 @@ +--- +title: Plugins +description: An API reference of all plugins provided by the AXA Web Toolkit. +nav: side/plugins +order: 5 +lunr: true +toc: + - title: Drawer + slug: drawer + - title: Search + slug: search + - title: Fade + slug: fade +--- + +{{#> page}} + {{#*inline "content"}} + +

{{title}}

+ +

The Web Toolkit comes with a set of helpful + jQuery plugins, that add interactivity to your web app without + having to use a fully fledged JS framework or library.

+ + {{> table-of-contents data=toc}} + +

Drawer

+ +

The drawer plugin introduces one simple binary state to your + app: either it's open or closed. + That state is then toggled by your burger and mask elements, + or using JavaScript. To make things appear or disappear depending + on that state, there's the fade plugin which you + can then initialize with data-fade="drawer".

+ +

Usage via data attributes

+ +

Initialize the plugin by adding the attribute + data-make="drawer" to <body>.

+ + {{#code-snippet "html"}} + + + + {{/code-snippet}} + +

Usage via JavaScript

+ +

Initialize the plugin by calling the .drawer() + method on the <body> element.

+ + {{#code-snippet "js"}} + $('body').drawer() + {{/code-snippet}} + +

Methods

+ +

$().drawer()

+ +

With this method call and an empty argument list, + the drawer gets initialized with the the state + closed.

+ + {{#code-snippet "js"}} + $('body').drawer() + {{/code-snippet}} + +

.drawer('toggle')

+ +

This methods toggles the drawer's state depending on + the previous state.

+ + {{#code-snippet "js"}} + $('body').drawer('toggle') + {{/code-snippet}} + +

.drawer('open')

+ +

This methods opens the drawer.

+ + {{#code-snippet "js"}} + $('body').drawer('open') + {{/code-snippet}} + +

.drawer('close')

+ +

This methods closes the drawer.

+ + {{#code-snippet "js"}} + $('body').drawer('close') + {{/code-snippet}} + +

Options

+ + Name, Type, Default, Description + offset, number, 10, Pixels to offset from top when calculating position of scroll. + +

Events

+ +
+ + + + + + + + + + + + + + + + + + +
Event TypeDescription
open.axa.drawerThis event fires before the drawer opens.
close.axa.drawerThis event fires before the drawer closes.
+
+ + {{#code-snippet "js"}} + $('body').on('open.axa.drawer', function (event) { + // do something + }) + {{/code-snippet}} + + +

Fade

+ +

The fade plugin can make elements fade in or out depending + on the state of a drawer or a search component.

+ +

Usage via data attributes

+ +

Since the plugin can listen to the state changes of different + components, it has to be specified which kind it is while + initializing. If the plugin should listen to drawer state, set the + data-fade="drawer" attribute to the toggling element. + For search, it's data-fade="search".

+ + {{#code-snippet "html"}} +
+ +
+ {{/code-snippet}} + +

Usage via JavaScript

+ +

When using the fade plugin programmatically, you have to take + care of listening to state changes by yourself.

+ + {{#code-snippet "js"}} + $('.drawer').fade() + {{/code-snippet}} + +

Methods

+ +

$().drawer()

+ +

With this method call and an empty argument list, + the drawer gets initialized with the the state + closed.

+ + {{#code-snippet "js"}} + $('body').drawer() + {{/code-snippet}} + +

.drawer('toggle')

+ +

This methods toggles the drawer's state depending on + the previous state.

+ + {{#code-snippet "js"}} + $('body').drawer('toggle') + {{/code-snippet}} + +

.drawer('open')

+ +

This methods opens the drawer.

+ + {{#code-snippet "js"}} + $('body').drawer('open') + {{/code-snippet}} + +

.drawer('close')

+ +

This methods closes the drawer.

+ + {{#code-snippet "js"}} + $('body').drawer('close') + {{/code-snippet}} + +

Options

+ + Name, Type, Default, Description + offset, number, 10, Pixels to offset from top when calculating position of scroll. + +

Events

+ +
+ + + + + + + + + + + + + + + + + + +
Event TypeDescription
open.axa.drawerThis event fires before the drawer opens.
close.axa.drawerThis event fires before the drawer closes.
+
+ + {{#code-snippet "js"}} + $('body').on('open.axa.drawer', function (event) { + // do something + }) + {{/code-snippet}} + + + + {{/inline}} +{{/page}}