https://www.lamare.at/static/js/components/attrchange.js

1/*
2A simple jQuery function that can add listeners on attribute change.
3http://meetselva.github.io/attrchange/
4
5About License:
6Copyright (C) 2013 Selvakumar Arumugam
7You may use attrchange plugin under the terms of the MIT Licese.
8https://github.com/meetselva/attrchange/blob/master/MIT-License.txt
9*/
10(function($) {
11   function isDOMAttrModifiedSupported() {
12		var p = document.createElement('p');
13		var flag = false;
14		
15		if (p.addEventListener) p.addEventListener('DOMAttrModified', function() {
16			flag = true
17		}, false);
18		else if (p.attachEvent) p.attachEvent('onDOMAttrModified', function() {
19			flag = true
20		});
21		else return false;
22		
23		p.setAttribute('id', 'target');
24		
25		return flag;
26   }
27   
28   function checkAttributes(chkAttr, e) {
29		if (chkAttr) {
30			var attributes = this.data('attr-old-value');
31			
32			if (e.attributeName.indexOf('style') >= 0) {
33				if (!attributes['style']) attributes['style'] = {}; //initialize
34				var keys = e.attributeName.split('.');
35				e.attributeName = keys[0];
36				e.oldValue = attributes['style'][keys[1]]; //old value
37				e.newValue = keys[1] + ':' + this.prop("style")[$.camelCase(keys[1])]; //new value
38				attributes['style'][keys[1]] = e.newValue;
39			} else {
40				e.oldValue = attributes[e.attributeName];
41				e.newValue = this.attr(e.attributeName);
42				attributes[e.attributeName] = e.newValue; 
43			}
44			
45			this.data('attr-old-value', attributes); //update the old value object
46		}	   
47   }
48
49   //initialize Mutation Observer
50   var MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
51
52   $.fn.attrchange = function(o) {
53	   
54		var cfg = {
55			trackValues: false,
56			callback: $.noop
57		};
58		
59		//for backward compatibility
60		if (typeof o === "function" ) { 
61			cfg.callback = o; 
62		} else { 
63			$.extend(cfg, o); 
64		}
65
66	    if (cfg.trackValues) { //get attributes old value
67	    	$(this).each(function (i, el) {
68	    		var attributes = {};
69	    		for (var attr, i=0, attrs=el.attributes, l=attrs.length; i<l; i++){
70	    		    attr = attrs.item(i);
71	    		    attributes[attr.nodeName] = attr.value;
72	    		}
73	    		
74	    		$(this).data('attr-old-value', attributes);
75	    	});
76	    }
77	   
78		if (MutationObserver) { //Modern Browsers supporting MutationObserver
79			/*
80			   Mutation Observer is still new and not supported by all browsers. 
81			   http://lists.w3.org/Archives/Public/public-webapps/2011JulSep/1622.html
82			*/
83			var mOptions = {
84				subtree: false,
85				attributes: true,
86				attributeOldValue: cfg.trackValues
87			};
88	
89			var observer = new MutationObserver(function(mutations) {
90				mutations.forEach(function(e) {
91					var _this = e.target;
92					
93					//get new value if trackValues is true
94					if (cfg.trackValues) {
95						/**
96						 * @KNOWN_ISSUE: The new value is buggy for STYLE attribute as we don't have 
97						 * any additional information on which style is getting updated. 
98						 * */
99						e.newValue = $(_this).attr(e.attributeName);
100					}
101					
102					cfg.callback.call(_this, e);
103				});
104			});
105	
106			return this.each(function() {
107				observer.observe(this, mOptions);
108			});
109		} else if (isDOMAttrModifiedSupported()) { //Opera
110			//Good old Mutation Events but the performance is no good
111			//http://hacks.mozilla.org/2012/05/dom-mutationobserver-reacting-to-dom-changes-without-killing-browser-performance/
112			return this.on('DOMAttrModified', function(event) {
113				if (event.originalEvent) event = event.originalEvent; //jQuery normalization is not required for us 
114				event.attributeName = event.attrName; //property names to be consistent with MutationObserver
115				event.oldValue = event.prevValue; //property names to be consistent with MutationObserver 
116				cfg.callback.call(this, event);
117			});
118		} else if ('onpropertychange' in document.body) { //works only in IE		
119			return this.on('propertychange', function(e) {
120				e.attributeName = window.event.propertyName;
121				//to set the attr old value
122				checkAttributes.call($(this), cfg.trackValues , e);
123				cfg.callback.call(this, e);
124			});
125		}
126
127		return this;
128    }
129})(jQuery);