weslleyaraujo/iffy.js

## iffy.js
(function (root, factory) {

  if (typeof define === 'function' && define.amd) {
    define(['jquery'], factory);
  } else if (typeof exports === 'object') {
    module.exports = factory(require('jquery'));
  } else {
    root.Iffy = factory(root.$);
  }

}(this, function ($) {

  var name = 'iffy';
  var extend = $.extend;
  var elements = ['input'];
  var config = extend({
    el: '[data-component="'+ name +'"]',
  }, elements.reduce(function (c, n) {
    c[n] = '[data-component-child="'+ name +'__' + n + '"]';
    return c;
  }, {}));

  function warn(msg) {
    var console = window.console;
    console && console.warn && console.warn(msg);
  }

  var Iffy = {
    init: function() {
      this.prepare();
      this.bind();
    },

    prepare: function() {
      this.elements = elements.reduce(function (c, n) {
        c['$' + n] = $(config[n]);
        return c;
      }, {});
    },

    bind: function() {
      this.elements.$input.on('change', $.proxy(this.onInputChange, this));
    },

    onInputChange: function(event) {
      this.elements.$input
        .filter('[data-iffy-options]')
        .toArray()
        .map(x => extend({
            el: x,
        },this.getOptions(x)))
        .forEach(x => this.check(x) ? this.addBehavior(x) : this.removeBehavior(x));
    },

    removeBehavior: function(options) {
      this.elements.$input
        .filter(options.el)
        .removeClass(options.behaviorClass);
    },

    addBehavior: function(options) {
      this.elements.$input
        .filter(options.el)
        .val('')
        .addClass(options.behaviorClass);
    },

    check: function(options) {
      return this.elements.$input
        .filter(options.mandatory)
        .toArray()
        .map(x => $(x).val())
        .map(x => /^[0-9]*$/g.test(x) ? parseInt(x) : x)
        .some(x => {
          return x === options.value;
        });
    },

    getOptions: function(element) {
      try {
        return JSON.parse($(element).data('iffy-options'));
      } catch(e) {
        warn('[iffy] There might be a syntax error in one of your iffy-options: ' + e.message);
      }
    },
  }

  return Iffy;

}));

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Experiment - inputs</title>
  <style>
    .is-hidden {
      display: none;
    }
  </style>
</head>
<body>
  <h1>Iffy</h1>
  <form data-component="iffy">
    <select
      name="foo"
      data-component-child="iffy__input">
      <option value=""></option>
      <option value="1">Lorem ipsum 1</option>
      <option value="2">Lorem ipsum 2</option>
      <option value="3">Lorem ipsum 2</option>
    </select>

    <select data-component-child="iffy__input"
      data-iffy-options='
        {
          "mandatory": "[name=foo]",
          "value": 1,
          "behaviorClass": "is-hidden"
        }
      '>
      <option value=""></option>
      <option value="1">Ipsum Lolis 1</option>
      <option value="2">Ipsum Lolis 2</option>
    </select>

  </form>
  <script src="./node_modules/jquery/dist/jquery.min.js"></script>
  <script src="./lib/index.js"></script>
  <script>
    Iffy.init();
  </script>
</body>
</html>
	(function (root, factory) {

	if (typeof define === 'function' && define.amd) {
	define(['jquery'], factory);
	} else if (typeof exports === 'object') {
	module.exports = factory(require('jquery'));
	} else {
	root.Iffy = factory(root.$);
	}

	}(this, function ($) {

	var name = 'iffy';
	var extend = $.extend;
	var elements = ['input'];
	var config = extend({
	el: '[data-component="'+ name +'"]',
	}, elements.reduce(function (c, n) {
	c[n] = '[data-component-child="'+ name +'__' + n + '"]';
	return c;
	}, {}));

	function warn(msg) {
	var console = window.console;
	console && console.warn && console.warn(msg);
	}

	var Iffy = {
	init: function() {
	this.prepare();
	this.bind();
	},

	prepare: function() {
	this.elements = elements.reduce(function (c, n) {
	c['$' + n] = $(config[n]);
	return c;
	}, {});
	},

	bind: function() {
	this.elements.$input.on('change', $.proxy(this.onInputChange, this));
	},

	onInputChange: function(event) {
	this.elements.$input
	.filter('[data-iffy-options]')
	.toArray()
	.map(x => extend({
	el: x,
	},this.getOptions(x)))
	.forEach(x => this.check(x) ? this.addBehavior(x) : this.removeBehavior(x));
	},

	removeBehavior: function(options) {
	this.elements.$input
	.filter(options.el)
	.removeClass(options.behaviorClass);
	},

	addBehavior: function(options) {
	this.elements.$input
	.filter(options.el)
	.val('')
	.addClass(options.behaviorClass);
	},

	check: function(options) {
	return this.elements.$input
	.filter(options.mandatory)
	.toArray()
	.map(x => $(x).val())
	.map(x => /^[0-9]*$/g.test(x) ? parseInt(x) : x)
	.some(x => {
	return x === options.value;
	});
	},

	getOptions: function(element) {
	try {
	return JSON.parse($(element).data('iffy-options'));
	} catch(e) {
	warn('[iffy] There might be a syntax error in one of your iffy-options: ' + e.message);
	}
	},
	}

	return Iffy;

	}));
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Experiment - inputs</title>
	<style>
	.is-hidden {
	display: none;
	}
	</style>
	</head>
	<body>
	<h1>Iffy</h1>
	<form data-component="iffy">
	<select
	name="foo"
	data-component-child="iffy__input">
	<option value=""></option>
	<option value="1">Lorem ipsum 1</option>
	<option value="2">Lorem ipsum 2</option>
	<option value="3">Lorem ipsum 2</option>
	</select>

	<select data-component-child="iffy__input"
	data-iffy-options='
	{
	"mandatory": "[name=foo]",
	"value": 1,
	"behaviorClass": "is-hidden"
	}
	'>
	<option value=""></option>
	<option value="1">Ipsum Lolis 1</option>
	<option value="2">Ipsum Lolis 2</option>
	</select>

	</form>
	<script src="./node_modules/jquery/dist/jquery.min.js"></script>
	<script src="./lib/index.js"></script>
	<script>
	Iffy.init();
	</script>
	</body>
	</html>