Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

conditionize

Package Overview
Dependencies
Maintainers
1
Versions
5
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

conditionize

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

  • 1.0.4
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
3
decreased by-62.5%
Maintainers
1
Weekly downloads
 
Created
Source

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

NameTypeDefaultDescription
selectorstring[data-cond]Condition blocks jQuery selector.
conditionAttrstringdata-condCondition atribute that will be checked.
checkDebounceint150Debounce timeout for better performance.

Events

Events used the same way as Options.

NameDescription
onInitCalled after init end.
onDestroyCalled after destroy.
onCheckCalled when check function ended work (available 2 arguments [ $item, show ]).
customToggleCustom 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

NameResultDescription
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

Keywords

FAQs

Package last updated on 21 Jan 2020

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc