The conditionize from nk-o

conditionize's Introduction

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

conditionize's People

Contributors

Stargazers

Watchers

conditionize's Issues

radio buttons are not supported

Issue description:

Hi,
radio buttons are not supported on conditionize.
I just find a simple solution for this issue. Also add a function for enable/disable required fields on show/hide event.

Version used:

v1.0.4

Code to reproduce the issue (HTML blocks + JavaScript initialization)

function conditionize_update($item, show){
	if(show){
	    $item
	    .removeClass("d-none") // bootstrap's display:none class
	    .find("[data-required]")
	    .removeAttr("data-required")
   	    .attr("required",true);		
	}else{
	     $item
	     .addClass("d-none") // bootstrap's display:none class
	     .find("[required]")
	     .removeAttr("required")
	     .attr("data-required",true)
	}
}

function conditionize_radio($item, show){
	var conditions = $item.data("cond");
	if(conditions.indexOf("&&")>-1 || conditions.indexOf("||")>-1){
	    conditions = conditions.replace("&&", "--equal--").replace("||","--or--");
		conditions = conditions.split(/--equal--|--or--/g);
		for(var i=0;i<conditions.length;i++){
		    if(conditions[i].indexOf("==")>-1){
		    	var parts = conditions[i].split("==");
			    var field = parts[0].trim();
			    var value = parts[1].trim();
			    if($(field).attr("type") == "radio"){
		            if($(field+":checked").val() == value){
		                show = true;
		             }
		         }
		    }
		}
    }else{
	    if(conditions.indexOf("==")>-1){
		    var parts = conditions.split("==");
		    var field = parts[0].trim();
		    var value = parts[1].trim();
		    if($(field).attr("type") == "radio"){
	                if($(field+":checked").val() == value){
	                    show = true;
	                }
	             }
               }
	}
	return show;
}

$( document ).ready(function() {
            $('.form').each(function(){
			if($(this).find("[data-cond]").length>0){
			    $(this).conditionize({
				    selector: '[data-cond]',
				    onCheck: function( $item, show ) {
				    	show = condizione_radio($item, show);
				    	condizione_update($item,show);
			            },
				    customToggle: function( $item, show ) {
				    	show = conditionize_radio($item, show);
				    	conditionize_update($item,show);
				    }
				});
			}
		});
});