Cash plugins

This repository contains JavaScript modules and helper based on cash (jQuery alternative).

Development

Source files are written in SASS and TypeScript. The build is done with gulp

Build

$ gulp build

Preview server

All modules can be tested inside a the preview files /src/index.html and src/js/index.js. There is a webpack server configured for easy development and preview. To start the server, run npm start.

Plugins

Media Query
Interchange
Menu Aim
Mobile navigation
Validator
Desktop navigation
Lightbox
Wizardbox

Media Query

Inspired by Foundation Media Queries component.

Requirements: custom.underscore.js

The plugin is initialized automatically.

Triggered Events

Event name	Parameter	Description
changed.bw.mediaquery	[newSize, oldSize]	Triggerd on window resize

Examples

// listening to breakpoint changes:
$(document).on('changed.bw.mediaquery', function(oldSize, newSize){
    console.log('Breakpoint changed from ' + oldSize + ' to ' + newSize);
});

// get current breakpoint
Bw.MediaQuery.current; // e.g. returns 'small' 

// check if breakpoint size is fulfilled
Bw.MediaQuery.atLeast('large'); // e.g. returns false

// check for current breakpoint name 
Bw.MediaQuery.is('small'); // e.g. returns true

// override default settings
const options = {
    breakpoints: ['small', 'medium', 'large', 'xlarge', 'xxlarge'],
    breakpointWidths: [0, 640, 1024, 1200, 1440],
};
Bw.MediaQuery = new MediaQuery(options);

Interchange

Inspired by Foundation Interchange plugin.

Requirements: cash.media-query.js

Init plugin with:

$.Interchange(options);

Options may contain:

const options = {
    selector: '[data-interchange]' // Selector for elements to observe 
};

Menu Aim

Cash implementation of jQuery-menu-aim.

Mobile navigation

Example pages: Studentenwerk Halle, SHK Dresden

Required: cash.media-query.js

Init plugin with:

$.MobileNav(options);

Options may contain:

const options = {
    showFor: ['small'],
    selectorHeader: 'header.topbar2',
    selectorMenuButton: '.menu-button',
    selectorMenuLinks: '.menu.level1 li a',
    isOpenClass: 'is-open' 
};

Validator

Validate form inputs and prevent form submission. Example Markup:

HTML

<form data-validate="true">
    
    <!-- Text input -->
    <label for="text-input">Text</label>
    <input required id="text-input" type="text" name="text" value="" />
    
    <!-- Email input -->
    <label for="email-input">Email</label>
    <input required id="email-input" type="email" name="email" value="" />
    
    <!-- Select input -->
    <label for="select-input">Selection</label>
    <select data-validator="option_selected" name="select" id="select-input" required>
        <option>Please choose</option>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
    </select>
    
    <!-- Checkbox input -->
    <label for="checkbox-input">Checkbox</label>
    <input type="checkbox" data-validator="is_checked" id="checkbox-input" />

    <button type="submit">Submit</button> 
</form>

JavaScript

$.myFormValidator = $.Validator({
    selector: {
        submitButton: 'form[data-validate="true"] button[type="submit"]'
    }
});

// manually check the form for validation errors 
$.myFormValidator.isValidForm(); // return true or false

Desktop navigation

Lightbox

Simple image and content lightbox.

Requirements: cash.lightbox.css

Initialization:

HTML

<a href="large-image1.jpg" class="lightbox" rel="gallery1">image1.jpg</a>
<a href="large-image2.jpg" class="lightbox" rel="gallery1">image2.jpg</a>

JavaScript

$.box = $.Lightbox(options);

// display html content
$.box.displayContent('<h1>Hello world!</h1>');

Default options

const options = {
    selector: 'a.lightbox',
    groupSelector: 'rel',
    lightboxSelector: '.bw-lightbox',
    markup: '...'
};

Wizardbox

Lightbox that can display HTML content and navigate between different steps.

Requirements: cash.wizardbox.css

Initialization

const myWizard = $.Wizardbox({
    steps: [
        {
            id: 0,
            content: '<h1>Hello World!</h1>',
            title: 'First'
        },
        {
            id: 1,
            content: '<h1>Hello from Step 2</h1>',
            title: 'Second'
        },
        {
            id: 'success',
            content: 'Success!',
            size: 'small'
        }
    ],
    isCloseable: false,
    showNavigator: false,
    size: 'large'
});

Options

Parameter	Type	Default	Description
steps	Array	-	Array of step objects
isCloseable	Boolean	true	Display close button and enable closing of wizard
showNavigator	Boolean	true	Display navigation
dynamicHeight	Boolean	false	Change the height between slide changes
fadeIn	Boolean	true	Adds a fading animation to the show up
size	String	medium	Default size of the lightbox
icons	object	{ check: '..' }	Custom icons can be added here

Step object

Key	Type	Required	Description
content	String/Object	yes	HTML markup of step content
id	String / Integer	yes	Unique identifier
size	String	no	Size of the step overrides default lightbox setting
title	String	no	Title for navigator
icon	String	no	Id of the icon, defaults to the number of offset

Navigation

You can link between slides via data attributes:

<a href="#" data-to-step="2">Animate to step with key 2</a>
<a href="#" data-to-step="success" data-animate="false">Show success slide without animation</a>
<a href="#" data-close>Close Wizard</a>

Events

Event name	Description	Parameter
bw.wizardbox.beforeInit	Fired before anything is done	-
bw.wizardbox.beforeCacheDom	Fired after markup was insert	-
bw.wizardbox.beforeSetup	Fired after DOM was cached	-
bw.wizardbox.beforeBindEvent	Fired after settings have been set	-
bw.wizardbox.afterInit	Fired at end of initialization	-
bw.wizardbox.closed	Fired when wizard gets closed	-
bw.wizardbox.beforeChangeStep	Fired before changing to a new step	stepName, animate, markSuccess
bw.wizardbox.afterChangeStep	Fired after changed to a new step	stepName, animate, markSuccess

Methods

Public functions callable

open

Opens the wizard lightbox

$.myWizard.open(0);

Parameter	Type	Default	Description
stepName	String or Integer	-	Name of the step the wizard should start wit

close

Close the window

$.myWizard.close();

toStep

Navigate to the given slide

$.myWizard.toStep('success', false, false);

Parameter	Type	Default	Description
stepId	String or Integer	-	Name of a step
animate	Boolean	true	Slide change can be animated (500ms)
markSuccess	Boolean	true	Mark current navigation item as successful

addStep

Add a new slide to the wizard

$.myWizard.addStep({id: 'new', content: 'New content', title: 'New step', size: 'medium', 'icon': 'custom'}, 3);

Parameter	Type	Default	Description
step	Object	-	Step object
position	int	-	Position of the new step (default at end)

makeClosable

Displays the close button and activates the "ESC" key + click outside of the wizard to close the window.

$.myWizard.makeClosable();

stopClosable

Removes the possibility of closing the wizard

$.myWizard.stopClosable();

startLoader

Starts loading animation

$.myWizard.startLoader(false);

Parameter	Type	Default	Description
scrollToTop	Boolean	true	Jumps to the top of the lightbox

stopLoader

Stops loading animation

$.myWizard.stopLoader(false);

Parameter	Type	Default	Description
animate	Boolean	true	Adds some delay to wait for step animation

showNavigator

Shows the step navigator

$.myWizard.showNavigator();

hideNavigator

Hides the step navigator

$.myWizard.hideNavigator();

setWidth

Adjust the width of the Lightbox

$.myWizard.setWidth('medium');

Parameter	Type	Default	Description
size	String	-	Change the size of the lightbox (small, medium or large)

blueways-cash