From 212b112b74203be4a67e4ec06cfb1afdebada6e1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20Knezi=C4=87?= Date: Fri, 25 Nov 2016 10:40:40 +0100 Subject: [PATCH 1/2] Document drawer, search and fade plugins --- docs/plugins/index.hbs | 232 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 232 insertions(+) create mode 100644 docs/plugins/index.hbs diff --git a/docs/plugins/index.hbs b/docs/plugins/index.hbs new file mode 100644 index 00000000..980bf5b7 --- /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}} From 58dd7791221c11c67c42bc44f07dc49cf3339ea8 Mon Sep 17 00:00:00 2001 From: Gabriel Koch Date: Thu, 1 Dec 2016 17:49:20 +0100 Subject: [PATCH 2/2] Capitalize JS --- docs/plugins/index.hbs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/plugins/index.hbs b/docs/plugins/index.hbs index 980bf5b7..518dfae0 100644 --- a/docs/plugins/index.hbs +++ b/docs/plugins/index.hbs @@ -20,7 +20,7 @@ toc:

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.

+ having to use a fully fledged JS framework or library.

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