burdiuz/JQuery-custom-valhooks.js

## readme.md

      
    Raw
  

              readme.md
            
          
    jQuery Custom .val() hook Plugin

It adds possibility to specify val() accessors and mutators for custom elements and selectors.
$.setValHook('div', '.my-number-control',
        function($el) {
          return $el.data('value');
        },
        function($el, value) {
          $el.data('value', parseInt(value));
		  $el.trigger('change');
        }
    );
After setting hook you can use .val() on DIV elements with class my-number-control.
$(function(){
	$('.my-number-control').on('change', function() {
	  console.log($(this).val() % 2);
	});
});
For example look into example.html.
Install

via npm
npm install gist:859f8c06fa90b6de8e5d3cce08031028 --save

via git
git clone https://gist.github.com/burdiuz/859f8c06fa90b6de8e5d3cce08031028 JQuery-custom-valhooks


## example.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery Custom ValHook Example</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
        integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
  <script type="text/javascript" src="../bower_components/jquery/dist/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
          integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS"
          crossorigin="anonymous"></script>
  <script type="text/javascript" src="JQuery-custom-valhooks-plugin.js"></script>
  <script type="text/javascript">

// --- SETUP .val() hooks

$.setValHook('div', '.value-one');

$.setValHook('span', '#anything2',
  function($el) {
    return parseInt($el.data('value'));
  }
);

$.setValHook('custom-element', null, undefined,
  function($el, value) {
    $el.data('value', value.toUpperCase());
  }
);

$.setValHook('div', '.my-number-control',
  function($el) {
    return $el.data('value');
  },
  function($el, value) {
    $el.data('value', parseInt(value));
    $el.trigger('change');
  }
);

// --- USE .val() hooks

$(function() {
  // ----------------- First
  $('.get1').on('click', function() {
    $('#val1').val($('.value-one').val());
  });
  $('.set1').on('click', function() {
    var value = $('#val1').val();
    $('.value-one').val(value);
    $('#val1').val('');
  });
  $('.value-one').val('DIV.value-one default value');

  // ----------------- Second
  $('.get2').on('click', function() {
    $('#val2').val($('#anything2').val());
  });
  $('.set2').on('click', function() {
    var value = $('#val2').val();
    $('#anything2').val(value);
    $('#val2').val('');
  });
  $('#anything2').val('1234567');

  // ----------------- Third
  $('.get3').on('click', function() {
    $('#val3').val($('custom-element').val());
  });
  $('.set3').on('click', function() {
    var value = $('#val3').val();
    $('custom-element').val(value);
    $('#val3').val('');
  });
  $('custom-element').val('CUSTOM-ELEMENT default value');

  //----------------- Fourth
  $(function() {
    $('.set4').on('click', function() {
      var value = $('#val4').val();
      $('div.my-number-control').val(value);
      $('#val4').val('');
    });
    $('.my-number-control').on('change', function() {
      console.log($(this).val() % 5);
      $('#text4').text($(this).val() + ' % 5 = ' + ($(this).val() % 5));
    });
  });
});
  </script>
</head>
<body>
<form>
  <div class="container">
    <div class="row">
      <div class="col-xs-12">
        <h4>jQuery Custom ValHook Example</h4>
      </div>
    </div>

    <div class="row">
      <h6 class="col-xs-8">
        <pre>$.setValHook('div', '.value-one');</pre>
      </h6>
    </div>
    <div class="row">
      <div class="col-xs-8 form-group">
        <input type="text" class="form-control" id="val1">
      </div>
    </div>
    <div class="row">
      <div class="col-xs-2 form-group">
        <input type="button" value="Get Value" class="btn get1 btn-primary"></input>
      </div>
      <div class="col-xs-2 form-group">
        <input type="button" value="Set Value" class="btn set1 btn-primary"></input>
      </div>
      <div class="col-xs-4">
        <div class="value-one"></div>
      </div>
    </div>

    <div class="row">
      <h6 class="col-xs-8">
        <pre>$.setValHook('span', '#anything2',
        function($el){
          return parseInt($el.data('value'));
        }
    );</pre>
      </h6>
    </div>
    <div class="row">
      <div class="col-xs-8 form-group">
        <input type="text" class="form-control" id="val2">
      </div>
    </div>
    <div class="row">
      <div class="col-xs-2 form-group">
        <input type="button" value="Get Value" class="btn get2 btn-primary"></input>
      </div>
      <div class="col-xs-2 form-group">
        <input type="button" value="Set Value" class="btn set2 btn-primary"></input>
      </div>
      <div class="col-xs-4">
        <span id="anything2"></span>
      </div>
    </div>

    <div class="row">
      <h6 class="col-xs-8">
        <pre>$.setValHook('custom-element', null, undefined,
        function($el, value) {
          $el.data('value', value.toUpperCase());
        }
    );</pre>
      </h6>
    </div>
    <div class="row">
      <div class="col-xs-8 form-group">
        <input type="text" class="form-control" id="val3">
      </div>
    </div>
    <div class="row">
      <div class="col-xs-2 form-group">
        <input type="button" value="Get Value" class="btn get3 btn-primary"></input>
      </div>
      <div class="col-xs-2 form-group">
        <input type="button" value="Set Value" class="btn set3 btn-primary"></input>
      </div>
      <div class="col-xs-4">
        <custom-element></custom-element>
      </div>
    </div>

    <div class="row">
      <h6 class="col-xs-8">
        <pre>$.setValHook('div', '.my-number-control',
          function($el) {
            return $el.data('value');
          },
          function($el, value) {
            $el.data('value', parseInt(value));
            $el.trigger('change');
          }
      );</pre>
      </h6>
    </div>
    <div class="row">
      <div class="col-xs-8 form-group">
        <input type="text" class="form-control" id="val4">
      </div>
    </div>
    <div class="row">
      <div class="col-xs-2 form-group">
        <input type="button" value="Save Value" class="btn set4 btn-primary"></input>
      </div>
      <div class="col-xs-6">
        <div class="my-number-control"></div>
        <span id="text4"></span>
      </div>
    </div>

  </div>
</form>
</body>
</html>

## JQuery-custom-valhooks.js
// Uses Node, AMD or browser globals to create a module.
(function(root, factory) {
  if (typeof define === 'function' && define.amd) {
    // AMD. Register as an anonymous module.
    define(['jquery'], factory);
  } else if (typeof module === 'object' && module.exports) {
    // Node. Does not work with strict CommonJS, but
    // only CommonJS-like environments that support module.exports,
    // like Node.
    module.exports = factory(require('jquery'));
  } else {
    // Browser globals (root is window)
    factory(root.jQuery);
  }
}(this, function($) {
  var tags = {};

  function setValHook(tagName, selector, getValueHandler, setValueHandler) {
    tagName = tagName.toLowerCase();
    if (!$.valHooks.hasOwnProperty(tagName)) {
      $.valHooks[tagName] = {
        get: getValue,
        set: setValue
      };
    }
    var tag = tags[tagName] || (tags[tagName] = {});
    tag[selector || '*'] = {
      get: getValueHandler !== undefined ? getValueHandler : defaultGetValue,
      set: setValueHandler !== undefined ? setValueHandler : defaultSetValue
    };
  }

  function findHooks($el) {
    var hooks;
    var tag = tags[$el.prop('tagName').toLowerCase()];
    if (tag) {
      for (var selector in tag) {
        if (tag.hasOwnProperty(selector) && $el.is(selector)) {
          hooks = tag[selector];
          break;
        }
      }
    }
    return hooks;
  }

  function getValue(node) {
    var result;
    var $el = $(node);
    var hooks = findHooks($el);
    if (hooks && hooks.hasOwnProperty('get')) {
      result = hooks.get($el);
    }
    return result;
  }

  function setValue(node, value) {
    var $el = $(node);
    var hooks = findHooks($el);
    if (hooks && hooks.hasOwnProperty('set')) {
      hooks.set($el, value);
    }
  }

  function defaultGetValue($el) {
    return $el.data('value');
  }

  function defaultSetValue($el, value) {
    $el.data('value', value);
  }

  $.setValHook = setValHook;
}));

## package.json
{
  "name": "JQuery-custom-valhooks",
  "description": "jQuery Custom .val() hook plugin adds possibility to specify .val() accessors and mutators for custom elements and selectors.",
  "version": "0.0.1",
  "main": "JQuery-custom-valhooks.js",
  "dependencies": {
    "jquery": ">=1.7.0"
  }
}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>jQuery Custom ValHook Example</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
	integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
	<script type="text/javascript" src="../bower_components/jquery/dist/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
	integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS"
	crossorigin="anonymous"></script>
	<script type="text/javascript" src="JQuery-custom-valhooks-plugin.js"></script>
	<script type="text/javascript">

	// --- SETUP .val() hooks

	$.setValHook('div', '.value-one');

	$.setValHook('span', '#anything2',
	function($el) {
	return parseInt($el.data('value'));
	}
	);

	$.setValHook('custom-element', null, undefined,
	function($el, value) {
	$el.data('value', value.toUpperCase());
	}
	);

	$.setValHook('div', '.my-number-control',
	function($el) {
	return $el.data('value');
	},
	function($el, value) {
	$el.data('value', parseInt(value));
	$el.trigger('change');
	}
	);

	// --- USE .val() hooks

	$(function() {
	// ----------------- First
	$('.get1').on('click', function() {
	$('#val1').val($('.value-one').val());
	});
	$('.set1').on('click', function() {
	var value = $('#val1').val();
	$('.value-one').val(value);
	$('#val1').val('');
	});
	$('.value-one').val('DIV.value-one default value');

	// ----------------- Second
	$('.get2').on('click', function() {
	$('#val2').val($('#anything2').val());
	});
	$('.set2').on('click', function() {
	var value = $('#val2').val();
	$('#anything2').val(value);
	$('#val2').val('');
	});
	$('#anything2').val('1234567');

	// ----------------- Third
	$('.get3').on('click', function() {
	$('#val3').val($('custom-element').val());
	});
	$('.set3').on('click', function() {
	var value = $('#val3').val();
	$('custom-element').val(value);
	$('#val3').val('');
	});
	$('custom-element').val('CUSTOM-ELEMENT default value');

	//----------------- Fourth
	$(function() {
	$('.set4').on('click', function() {
	var value = $('#val4').val();
	$('div.my-number-control').val(value);
	$('#val4').val('');
	});
	$('.my-number-control').on('change', function() {
	console.log($(this).val() % 5);
	$('#text4').text($(this).val() + ' % 5 = ' + ($(this).val() % 5));
	});
	});
	});
	</script>
	</head>
	<body>
	<form>
	<div class="container">
	<div class="row">
	<div class="col-xs-12">
	<h4>jQuery Custom ValHook Example</h4>
	</div>
	</div>

	<div class="row">
	<h6 class="col-xs-8">
	<pre>$.setValHook('div', '.value-one');</pre>
	</h6>
	</div>
	<div class="row">
	<div class="col-xs-8 form-group">
	<input type="text" class="form-control" id="val1">
	</div>
	</div>
	<div class="row">
	<div class="col-xs-2 form-group">
	<input type="button" value="Get Value" class="btn get1 btn-primary"></input>
	</div>
	<div class="col-xs-2 form-group">
	<input type="button" value="Set Value" class="btn set1 btn-primary"></input>
	</div>
	<div class="col-xs-4">
	<div class="value-one"></div>
	</div>
	</div>

	<div class="row">
	<h6 class="col-xs-8">
	<pre>$.setValHook('span', '#anything2',
	function($el){
	return parseInt($el.data('value'));
	}
	);</pre>
	</h6>
	</div>
	<div class="row">
	<div class="col-xs-8 form-group">
	<input type="text" class="form-control" id="val2">
	</div>
	</div>
	<div class="row">
	<div class="col-xs-2 form-group">
	<input type="button" value="Get Value" class="btn get2 btn-primary"></input>
	</div>
	<div class="col-xs-2 form-group">
	<input type="button" value="Set Value" class="btn set2 btn-primary"></input>
	</div>
	<div class="col-xs-4">
	<span id="anything2"></span>
	</div>
	</div>

	<div class="row">
	<h6 class="col-xs-8">
	<pre>$.setValHook('custom-element', null, undefined,
	function($el, value) {
	$el.data('value', value.toUpperCase());
	}
	);</pre>
	</h6>
	</div>
	<div class="row">
	<div class="col-xs-8 form-group">
	<input type="text" class="form-control" id="val3">
	</div>
	</div>
	<div class="row">
	<div class="col-xs-2 form-group">
	<input type="button" value="Get Value" class="btn get3 btn-primary"></input>
	</div>
	<div class="col-xs-2 form-group">
	<input type="button" value="Set Value" class="btn set3 btn-primary"></input>
	</div>
	<div class="col-xs-4">
	<custom-element></custom-element>
	</div>
	</div>

	<div class="row">
	<h6 class="col-xs-8">
	<pre>$.setValHook('div', '.my-number-control',
	function($el) {
	return $el.data('value');
	},
	function($el, value) {
	$el.data('value', parseInt(value));
	$el.trigger('change');
	}
	);</pre>
	</h6>
	</div>
	<div class="row">
	<div class="col-xs-8 form-group">
	<input type="text" class="form-control" id="val4">
	</div>
	</div>
	<div class="row">
	<div class="col-xs-2 form-group">
	<input type="button" value="Save Value" class="btn set4 btn-primary"></input>
	</div>
	<div class="col-xs-6">
	<div class="my-number-control"></div>
	<span id="text4"></span>
	</div>
	</div>

	</div>
	</form>
	</body>
	</html>
	// Uses Node, AMD or browser globals to create a module.
	(function(root, factory) {
	if (typeof define === 'function' && define.amd) {
	// AMD. Register as an anonymous module.
	define(['jquery'], factory);
	} else if (typeof module === 'object' && module.exports) {
	// Node. Does not work with strict CommonJS, but
	// only CommonJS-like environments that support module.exports,
	// like Node.
	module.exports = factory(require('jquery'));
	} else {
	// Browser globals (root is window)
	factory(root.jQuery);
	}
	}(this, function($) {
	var tags = {};

	function setValHook(tagName, selector, getValueHandler, setValueHandler) {
	tagName = tagName.toLowerCase();
	if (!$.valHooks.hasOwnProperty(tagName)) {
	$.valHooks[tagName] = {
	get: getValue,
	set: setValue
	};
	}
	var tag = tags[tagName] \|\| (tags[tagName] = {});
	tag[selector \|\| '*'] = {
	get: getValueHandler !== undefined ? getValueHandler : defaultGetValue,
	set: setValueHandler !== undefined ? setValueHandler : defaultSetValue
	};
	}

	function findHooks($el) {
	var hooks;
	var tag = tags[$el.prop('tagName').toLowerCase()];
	if (tag) {
	for (var selector in tag) {
	if (tag.hasOwnProperty(selector) && $el.is(selector)) {
	hooks = tag[selector];
	break;
	}
	}
	}
	return hooks;
	}

	function getValue(node) {
	var result;
	var $el = $(node);
	var hooks = findHooks($el);
	if (hooks && hooks.hasOwnProperty('get')) {
	result = hooks.get($el);
	}
	return result;
	}

	function setValue(node, value) {
	var $el = $(node);
	var hooks = findHooks($el);
	if (hooks && hooks.hasOwnProperty('set')) {
	hooks.set($el, value);
	}
	}

	function defaultGetValue($el) {
	return $el.data('value');
	}

	function defaultSetValue($el, value) {
	$el.data('value', value);
	}

	$.setValHook = setValHook;
	}));
	{
	"name": "JQuery-custom-valhooks",
	"description": "jQuery Custom .val() hook plugin adds possibility to specify .val() accessors and mutators for custom elements and selectors.",
	"version": "0.0.1",
	"main": "JQuery-custom-valhooks.js",
	"dependencies": {
	"jquery": ">=1.7.0"
	}
	}