jquery.watch.js

/**
 * jQuery Watch Plugin
 *
 * @author Darcy Clarke
 *
 * Copyright (c) 2013 Darcy Clarke
 * Dual licensed under the MIT and GPL licenses.
 *
 * Usage:
 * $('div').watch('width height', function(){
 *   console.log(this.style.width, this.style.height);
 * });
 */

(function($){

  /**
   * Watch Method
   *
   * @param (String) the name of the properties to watch
   * @param (Object) options to overide defaults (only 'throttle' right now)
   * @param (Function) callback function to be executed when attributes change
   *
   * @return (jQuery Object) returns the jQuery object for chainability
   */
  $.fn.watch = function(props, options, callback){

    // Div element
    var div = document.createElement('div');

    // Check MutationObserver
    var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;

    // CustomEvent with fallback
    var CustomEvent = window.CustomEvent || function(){ return arguments || {}; };

    /**
     * Checks Support for Event
     *
     * @param (String) the name of the event
     * @param (Element Object) the element to test support against
     *
     * @return {Boolean} returns result of test (true/false)
     */
    var isEventSupported = function(eventName, el){
      eventName = 'on' + eventName;
      var supported = (eventName in el);
      if(!supported){
        el.setAttribute(eventName, 'return;');
        supported = typeof el[eventName] == 'function';
      }
      return supported;
    };

    // Type check options
    if(typeof(options) == 'function'){
      callback = options;
      options = {};
    }

    // Type check callback
    if(typeof(callback) != 'function')
      callback = function(){};

    // Map options over defaults
    options = $.extend({}, { throttle : 10 }, options);

    /**
     * Checks if properties have changed
     *
     * @param (Element Object) the element to watch
     */
    var check = function($el){

      var that = this;

      $.each(this.watching, function(){

        // Setup
        var data = this;
        var changed = false;
        var temp;

        // Loop through properties
        for(var i=0;i < data.props.length; i++){
          temp = $el[0].attributes[data.props[i]] || $el.css(data.props[i]);
          if(data.vals[i] != temp){
            data.vals[i] = temp;
            changed = true;
            break;
          }
        }

        // Run callback if property has changed
        if(changed && data.callback)
          data.callback.call(that, new CustomEvent('AttrChange'));

      });

    };

    // Iterate over each element
    return this.each(function(){

      var that = this;
      var $el = $(this);
      var data = {
        props: props.split(' '),
        vals: [],
        changed: [],
        callback: callback
      };

      // Grab each properties initial value
      $.each(data.props, function(i){
        data.vals[i] = $el[0].attributes[data.props[i]] || $el.css(data.props[i]);
        data.changed[i] = false;
      });

      // Set data
      if(!this.watching)
        this.watching = [];
      this.watching.push(data);

      // Choose method of watching and fallback
      if(MutationObserver){
        var observer = new MutationObserver(function(mutations){
          mutations.forEach(function(mutation){
            callback.call(that, mutation);
          });
        });
        observer.observe(this, { subtree: false, attributes: true });
      } else if(isEventSupported('DOMAttrModified', div)){
        $el.on('DOMAttrModified', callback);
      } else if(isEventSupported('propertychange', div)){
        $el.on('propertychange', callback);
      } else {
        setInterval(function(){ check.call(that, $el); }, options.throttle);
      }
    });
  };

})(jQuery);