conditionize

Conditionize

jQuery plugin for forms conditions to show/hide controls depending on its values.

Demo

Getting Started

<script src="conditionize/dist/conditionize.min.js"></script>

CDN

Link directly from unpkg

<script src="https://unpkg.com/conditionize@1/dist/conditionize.min.js"></script>

ES6 import

To use with a bundler like browserify or webpack

import 'conditionize';

Set up your HTML

<form class="my-form" action="#">
  <h1>Conditionize</h1>
 
  <input type="text" name="text-control" placeholder="Type 'magic'">
 
  <div data-cond="[name=text-control] == magic">Magically show when text control contains 'magic' word.</div>
 
  <select name="select-control">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three. Wow, you will see the new control below...</option>
  </select>
 
  <label data-cond="[name=select-control] == 3">
    <input type="checkbox" name="checkbox-control">
    Is checked?
    <span data-cond="[name=checkbox-control] != true">Nope</span>
    <span data-cond="[name=checkbox-control]">Yep</span>
  </label>
 
  <div>
    <a href="https://github.com/nk-o/conditionize" data-cond="[name=select-control] == 3 && [name=checkbox-control] == true">GitHub</a>
  </div>
</form>

Call the plugin

$('.my-form').conditionize({
    selector: '[data-cond]'
});

Options

Name	Type	Default	Description
selector	string	[data-cond]	Condition blocks jQuery selector.
conditionAttr	string	data-cond	Condition atribute that will be checked.
checkDebounce	int	150	Debounce timeout for better performance.

Events

Events used the same way as Options.

Name	Description
onInit	Called after init end.
onDestroy	Called after destroy.
onCheck	Called when check function ended work (available 2 arguments [ $item, show ]).
customToggle	Custom toggle for conditional blocks. You can define your own function to show/hide blocks.

Example of customToggle function:

{
    customToggle: function( $item, show ) {
        if ( show ) {
            $item.show();
        } else {
            $item.hide();
        }
    }
}

Methods

Name	Result	Description
destroy	-	Destroy Conditionize and set block as it was before plugin init.

Call methods example

$('.my-cond-form').conditionize('destroy');

No conflict

If you already have jQuery.fn.conditionize, you can rename the plugin.

jQuery.fn.newConditionize = jQuery.fn.conditionize.noConflict();

For Developers

Installation

• Run npm install in the command line. Or if you need to update some dependencies, run npm update

Building

• npm run build to run build

Linting

• npm run js-lint to show eslint errors
• npm run js-lint-fix to automatically fix some of the eslint errors