abernier · August 29, 2015 14:17
diff --git a/README.md b/README.md
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 <head>
 	<meta charset="utf-8">
 	<title></title>
 	<style>
 	#foo {
 	  transform-origin:center center;
 	}
 	</style>
 </head>
 <body>
 	<div id="foo"></div>

 <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone.js"></script>
 <script src="https://code.jquery.com/jquery-2.1.3.js"></script>
 <script src="watchcss.js"></script>
 <script>
 var el = document.getElementById('foo');

 var watchcss = new Watchcss(el, ['transform-origin', 'border-radius']);

 watchcss.on('change', function (changes) {
  console.log('transform-origin OR border-radius have changed!', changes);
 });

 setTimeout(function () {
  el.style.transformOrigin = 'left center';
 }, 1000)
 </script>
 </body>
 </html>
diff --git a/package.json b/package.json
 {
  "name": "watchcss",
  "version": "0.0.0",
  "description": "Watch a DOM element for `[style]` css properties changes",
  "main": "watchcss.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "https://gist.github.com/c3b9584d63bfd802e08f.git"
  },
  "author": "Antoine BERNIER (abernier)",
  "license": "ISC",
  "dependencies": {
    "underscore": "^1.7.0",
    "backbone": "^1.1.2",
    "jquery": "^2.1.3"
  }
 }
diff --git a/watchcss.js b/watchcss.js
 ;(function () {
  var _ = this._ || require('underscore');
  var $ = this.jQuery || require('jquery');
  var Backbone = this.Backbone || require('backbone');
  Backbone.$ = $;
  
  function Watchcss(el, props) {
    this.el = el;
    props || (props = []);

    this.props = props;

    var propsModel = new (Backbone.Model.extend())(_.object(props, [""]));

    var propschanges = [];
    propsModel.on('change', function (model) {
      _(model.changed).each(function (val, propName) {
        propschanges.push({
          propName: propName,
          oldValue: model._previousAttributes[propName],
          newValue: val
        });
      });
    });

    this.mo = new MutationObserver(function (muts) {
      var i = muts.length;
      while (i--) {
        if (muts[i].attributeName !== 'style') continue; // only style mutation

        propschanges = []; // empty

        var mut = muts[i];
        var j = this.props.length;
        while (j--) {
          var prop = this.props[j];
          propsModel.set(prop, mut.target.style[prop]);
        }

        // 'change' event
        if (propschanges.length) {
          this.trigger('change', propschanges);

          // 'change:<prop>' event
          var l = propschanges.length;
          while (l--) {
            var propchange = propschanges[l];
            this.trigger('change:'+propchange.propName, propchange);
          }
        }
      }
    }.bind(this));

    this.observe();
  }
  _.extend(Watchcss.prototype, Backbone.Events);
  Watchcss.prototype.observe = function () {
    this.mo.observe(this.el, {attributes: true});
    return this;
  };
  Watchcss.prototype.disconnect = function () {
    this.mo.disconnect();
    return this;
  };
  window.Watchcss = Watchcss;

  $.fn.watchcss = function (props) {
    props || (props = []);

    var $el = this;

    var instance = $el.data('watchcss');
    if (instance) {
      instance.props = _.uniq(instance.props.concat(props));
    } else {
      instance = new Watchcss($el[0], props);
      $el.data('watchcss', instance);
    }

    return instance;
  }
 }).call(this);
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title></title>
	<style>
	#foo {
	transform-origin:center center;
	}
	</style>
	</head>
	<body>
	<div id="foo"></div>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone.js"></script>
	<script src="https://code.jquery.com/jquery-2.1.3.js"></script>
	<script src="watchcss.js"></script>
	<script>
	var el = document.getElementById('foo');

	var watchcss = new Watchcss(el, ['transform-origin', 'border-radius']);

	watchcss.on('change', function (changes) {
	console.log('transform-origin OR border-radius have changed!', changes);
	});

	setTimeout(function () {
	el.style.transformOrigin = 'left center';
	}, 1000)
	</script>
	</body>
	</html>
	{
	"name": "watchcss",
	"version": "0.0.0",
	"description": "Watch a DOM element for `[style]` css properties changes",
	"main": "watchcss.js",
	"scripts": {
	"test": "echo \"Error: no test specified\" && exit 1"
	},
	"repository": {
	"type": "git",
	"url": "https://gist.github.com/c3b9584d63bfd802e08f.git"
	},
	"author": "Antoine BERNIER (abernier)",
	"license": "ISC",
	"dependencies": {
	"underscore": "^1.7.0",
	"backbone": "^1.1.2",
	"jquery": "^2.1.3"
	}
	}
	;(function () {
	var _ = this._ \|\| require('underscore');
	var $ = this.jQuery \|\| require('jquery');
	var Backbone = this.Backbone \|\| require('backbone');
	Backbone.$ = $;

	function Watchcss(el, props) {
	this.el = el;
	props \|\| (props = []);

	this.props = props;

	var propsModel = new (Backbone.Model.extend())(_.object(props, [""]));

	var propschanges = [];
	propsModel.on('change', function (model) {
	_(model.changed).each(function (val, propName) {
	propschanges.push({
	propName: propName,
	oldValue: model._previousAttributes[propName],
	newValue: val
	});
	});
	});

	this.mo = new MutationObserver(function (muts) {
	var i = muts.length;
	while (i--) {
	if (muts[i].attributeName !== 'style') continue; // only style mutation

	propschanges = []; // empty

	var mut = muts[i];
	var j = this.props.length;
	while (j--) {
	var prop = this.props[j];
	propsModel.set(prop, mut.target.style[prop]);
	}

	// 'change' event
	if (propschanges.length) {
	this.trigger('change', propschanges);

	// 'change:<prop>' event
	var l = propschanges.length;
	while (l--) {
	var propchange = propschanges[l];
	this.trigger('change:'+propchange.propName, propchange);
	}
	}
	}
	}.bind(this));

	this.observe();
	}
	_.extend(Watchcss.prototype, Backbone.Events);
	Watchcss.prototype.observe = function () {
	this.mo.observe(this.el, {attributes: true});
	return this;
	};
	Watchcss.prototype.disconnect = function () {
	this.mo.disconnect();
	return this;
	};
	window.Watchcss = Watchcss;

	$.fn.watchcss = function (props) {
	props \|\| (props = []);

	var $el = this;

	var instance = $el.data('watchcss');
	if (instance) {
	instance.props = _.uniq(instance.props.concat(props));
	} else {
	instance = new Watchcss($el[0], props);
	$el.data('watchcss', instance);
	}

	return instance;
	}
	}).call(this);