blueways-cash v1.1.1

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

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

Step object

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

Methods

Public functions callable

open

Opens the wizard lightbox

$.myWizard.open(0);

close

Close the window

$.myWizard.close();

toStep

Navigate to the given slide

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

addStep

Add a new slide to the wizard

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

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);

stopLoader

Stops loading animation

$.myWizard.stopLoader(false);

showNavigator

Shows the step navigator

$.myWizard.showNavigator();

hideNavigator

Hides the step navigator

$.myWizard.hideNavigator();

setWidth

Adjust the width of the Lightbox

$.myWizard.setWidth('medium');