$Util

Static Functions

$Util provides two static functions

jQuerify

This powerful function is at the heart of the Template library, but can be used elsewhere. When an object is passed to $Util.jQuerify, it will add all jQuery functions to that object, but each function call will be applied to the $wrapper property of that object. In that way, an object may "inhert" jQuery while still being able to chain its own native functions with the inherited ones.

Example

class Foo {

   constructor(){
       this.$wrapper = $('<div></div>');
       $Util.jQuerify(this);
       return this;
   }

   doSomething(){
       console.log("I am useful");
       return this;
    }
}

var foo = new Foo();
foo.appendTo('body').doSomething().fadeOut();

Opts

$Util.opts is a convenience function to make providing class defaults that can be overwritten by options easy. It is simply a wrapper for jQuery's extend and always uses deep cloning.

Example

class Foo { 
   
   constructor(options){
      var defaults = {
          name : "Foo"
      }
      // this.settings = $.extend(true, defaults, options);
      this.settings = $Util.opts(defaults, options);
   }
}

jQuery Extensions

$Util provides a handful of jQuery extensions used throughout the Template library.

Populate All The Things

$.fn.populate appropriately populates every common HTML element that has a name or data-name attribute (you should use data-name when name is improper syntax).

Example

<input type="text" name="userName"/>

$('input[name="userName"]').populate("Kyle");

You can go ahead and extend or override $.fn.populate's rules, too.

// you can override default api behaviour
// such as how <select>s are populated
$Util.populate.select = function(data){
   $(this).val(data)
          .prop('disabled', false)
          .addClass('green');	    
};
// or add new behaviours, to <strong> for example
$Util.populate.strong = function(data){
   $(this).html(data)
          .addClass('blink');
};
// or to elements with a data-tag="hidden" attribute
$Util.populate.hidden = function(data){
   $(this).html(data)
          .fadeIn();
};

---

$.fn.populateChildren can take an object of data and find each HTML child element to populate automatically. It will match the data object's keys with name or data-name attributes, and populate those elements with the data object's values.

Example

<div id="user">
   <input type="hidden" name="name"/>
   <div data-name="status"></div>
   <button type="button" name="active">ACTIVATE</button>
</div>

// each object property must match a 
// [name] or [data-name] attribute 
var data = {
   name : 'Jimmy',
   status : 'Released',
   active : 0
}
$('#user').populateChildren(data);

Select Functions

$.fn.addToSelect adds an option to a <select> element

Example

// you can use an object
var data = {
   NWT : 2
   Quebec : 3
}
$('select').addToSelect(data);
// as well as a string and a value
$('select').addToSelect("Ontario", 4);

---

$.fn.toggleOption toggles (enables or disables) an option or a set of options

Example

// disable all options
$('select').toggleOption(false);
/// disable an array of options (or just one)
var options = [2,3,4]; // "value" attribute of the options
$('select').toggleOption(options, false)

Other

• $.fn.slideToggleState - will run slideUp or slideDown based on a bool passed to the function call.
• $.fn.hasAttr - returns true if an element has an attribute