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