├── .gitignore
├── spec
    ├── jshintrc.json
    ├── jasmine.tap_reporter.js
    └── test.js
├── package.json
├── GruntFile.js
├── LICENSE
├── index.html
├── insQ.min.js
├── README.md
└── insQ.js


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | .grunt/
3 | _SpecRunner.html
4 | 


--------------------------------------------------------------------------------
/spec/jshintrc.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "camelcase": true,
 3 |     "curly": true,
 4 |     "eqeqeq":true,
 5 |     "forin":true,
 6 |     "immed":true,
 7 |     "indent":4,
 8 |     "latedef":true,
 9 |     "noarg":true,
10 |     "undef":true,
11 |     "unused":false,
12 |     "strict":true, 
13 |     "maxparams":10,
14 |     "maxdepth":10,
15 |     "maxstatements":20,
16 |     
17 |     "es5": true,
18 |     "eqnull":true,
19 |     "lastsemic":true,
20 |     "scripturl":true,
21 |     
22 |     "globals": {
23 |         "window": false,
24 |         "document": false,
25 |         "setTimeout": false,
26 |         "clearTimeout": false,
27 |         "module": false
28 |     }
29 | }


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "insertion-query",
 3 |   "version": "1.1.0",
 4 |   "description": "Non-dom-event way to catch DOM insertions. Works in IE10+ and filters by selectors.",
 5 |   "keywords": [
 6 |     "DOM",
 7 |     "dom insertion",
 8 |     "dom events",
 9 |     "mutation observer",
10 |     "browser"
11 |   ],
12 |   "repository": {
13 |     "type": "git",
14 |     "url": "https://github.com/naugtur/insertionQuery"
15 |   },
16 |   "author": "Zbyszek Tenerowicz <naugtur@gmail.com> (http://naugtur.pl/)",
17 |   "main": "insQ.js",
18 |   "license": "MIT",
19 |   "dependencies": {},
20 |   "devDependencies": {
21 |     "grunt": "^1.3.0",
22 |     "grunt-contrib-jasmine": "^2.2.0",
23 |     "grunt-contrib-jshint": "^2.1.0",
24 |     "grunt-contrib-uglify": "^4.0.1"
25 |   }
26 | }
27 | 


--------------------------------------------------------------------------------
/GruntFile.js:
--------------------------------------------------------------------------------
 1 | module.exports = function(grunt) {
 2 | 	grunt.initConfig({
 3 | 		conf: {
 4 | 			testPath: 'spec'
 5 | 		},
 6 | 		pkg: grunt.file.readJSON('package.json'),
 7 | 
 8 | 		uglify: {
 9 | 			options: {
10 | 				banner: 
11 |                 '// <%= pkg.name %> v<%= pkg.version %> (<%= grunt.template.today("yyyy-mm-dd") %>) \n'+
12 |                 '// license:<%= pkg.license %> \n'+
13 |                 '// <%= pkg.author %> \n'
14 | 			},
15 | 			dist: {
16 | 				src: 'insQ.js',
17 | 				dest: 'insQ.min.js'
18 | 			}
19 | 		},
20 | 
21 | 	
22 | 		jasmine: {
23 | 			src: 'insQ.js',
24 | 			options: {
25 | 				specs: '<%= conf.testPath %>/test.js'
26 | 			}
27 | 		},
28 | 		
29 | 		jshint: {
30 | 			code: {
31 | 				options: {
32 | 					jshintrc: '<%= conf.testPath %>/jshintrc.json'
33 | 				},
34 | 				src: [
35 | 					'insQ.js'
36 | 				]
37 | 			}
38 | 		},
39 | 
40 | 	
41 | 	});
42 | 	
43 | 	grunt.loadNpmTasks('grunt-contrib-jasmine');
44 | 	grunt.loadNpmTasks('grunt-contrib-jshint');
45 | 	grunt.loadNpmTasks('grunt-contrib-uglify');
46 | 
47 | 	grunt.registerTask('test', ['jshint', 'jasmine']);
48 | 	
49 | 	grunt.registerTask('dist', ['jshint', 'jasmine',  'uglify:dist']);
50 | 	
51 | 	grunt.registerTask('default', ['dist']);
52 | };


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License
 2 | 
 3 | Copyright (c) 2014-present Zbyszek Tenerowicz <naugtur@gmail.com>
 4 |               Eryk Napierała <eryk.piast@gmail.com>
 5 |               Askar Yusupov <devex.soft@gmail.com>
 6 |               Dan Dascalescu <ddascalescu+github@gmail.com>
 7 | 
 8 | Permission is hereby granted, free of charge, to any person obtaining a copy
 9 | of this software and associated documentation files (the "Software"), to deal
10 | in the Software without restriction, including without limitation the rights
11 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
12 | copies of the Software, and to permit persons to whom the Software is
13 | furnished to do so, subject to the following conditions:
14 | 
15 | The above copyright notice and this permission notice shall be included in
16 | all copies or substantial portions of the Software.
17 | 
18 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
19 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
20 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
21 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
22 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
23 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
24 | THE SOFTWARE.
25 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | 
 4 | <head>
 5 |     <meta charset="utf-8">
 6 |     <title>demo</title>
 7 | 
 8 |     <script src="insQ.js"></script>
 9 |     <style>
10 |         .container span {
11 |             padding: 5px;
12 |             font-size: 0;
13 |             margin: 1px;
14 |             background: green;
15 |         }
16 | 
17 |         .container {
18 |             overflow: visible;
19 |         }
20 |     </style>
21 | </head>
22 | 
23 | <body>
24 | 
25 |     <div class="container">
26 |         <span></span>
27 |     </div>
28 | 
29 |     <p>Open the console and watch...</p>
30 |     <button class="js-add">add one</button>
31 |     <button class="js-spray">add multiple</button>
32 |     <button class="js-container">add container</button>
33 | 
34 |     <script>
35 |         insertionQ("span").summary(function(summary) {
36 |             console.log(summary)
37 |         })
38 | 
39 |         var container = document.querySelector(".container");
40 |         document.querySelector(".js-add").addEventListener("click", function() {
41 |             container.appendChild(document.createElement("span"))
42 |         })
43 | 
44 |         document.querySelector(".js-spray").addEventListener("click", function() {
45 |             for (var i = 0; i < 10; i++) {
46 |                 container.appendChild(document.createElement("span"))
47 |             }
48 |         })
49 | 
50 | 
51 |         document.querySelector(".js-container").addEventListener("click", function() {
52 |             var box = document.createElement("div")
53 |             box.appendChild(document.createElement("span"))
54 |             box.appendChild(document.createElement("span"))
55 |             container.appendChild(box)
56 |             container.appendChild(document.createElement("span"))
57 |         })
58 |     </script>
59 | </body>
60 | 
61 | </html>
62 | 


--------------------------------------------------------------------------------
/insQ.min.js:
--------------------------------------------------------------------------------
1 | // insertion-query v1.0.5 (2020-09-20) 
2 | // license:MIT 
3 | // Zbyszek Tenerowicz <naugtur@gmail.com> (http://naugtur.pl/)
4 | 
5 | var insertionQ=function(){"use strict";var m=100,t=!1,u="animationName",d="",n="Webkit Moz O ms Khtml".split(" "),e="",i=document.createElement("div"),s={strictlyNew:!0,timeout:20,addImportant:!1};if(i.style.animationName&&(t=!0),!1===t)for(var o=0;o<n.length;o++)if(void 0!==i.style[n[o]+"AnimationName"]){e=n[o],u=e+"AnimationName",d="-"+e.toLowerCase()+"-",t=!0;break}function c(t){return s.strictlyNew&&!0===t.QinsQ}function r(t,n){function e(t){t.animationName!==o&&t[u]!==o||c(t.target)||n(t.target)}var i,o="insQ_"+m++,r=s.addImportant?" !important":"";(i=document.createElement("style")).innerHTML="@"+d+"keyframes "+o+" {  from {  outline: 1px solid transparent  } to {  outline: 0px solid transparent }  }\n"+t+" { animation-duration: 0.001s"+r+"; animation-name: "+o+r+"; "+d+"animation-duration: 0.001s"+r+"; "+d+"animation-name: "+o+r+";  } ",document.head.appendChild(i);var a=setTimeout(function(){document.addEventListener("animationstart",e,!1),document.addEventListener("MSAnimationStart",e,!1),document.addEventListener("webkitAnimationStart",e,!1)},s.timeout);return{destroy:function(){clearTimeout(a),i&&(document.head.removeChild(i),i=null),document.removeEventListener("animationstart",e),document.removeEventListener("MSAnimationStart",e),document.removeEventListener("webkitAnimationStart",e)}}}function a(t){t.QinsQ=!0}function f(t){if(t)for(a(t),t=t.firstChild;t;t=t.nextSibling)void 0!==t&&1===t.nodeType&&f(t)}function l(t,n){var e,i=[],o=function(){clearTimeout(e),e=setTimeout(function(){i.forEach(f),n(i),i=[]},10)};return r(t,function(t){if(!c(t)){a(t);var n=function t(n){return c(n.parentNode)||"BODY"===n.nodeName?n:t(n.parentNode)}(t);i.indexOf(n)<0&&i.push(n),o()}})}function v(n){return!(!t||!n.match(/[^{}]/))&&(s.strictlyNew&&f(document.body),{every:function(t){return r(n,t)},summary:function(t){return l(n,t)}})}return v.config=function(t){for(var n in t)t.hasOwnProperty(n)&&(s[n]=t[n])},v}();"undefined"!=typeof module&&void 0!==module.exports&&(module.exports=insertionQ);


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | insertionQuery
 2 | ==============
 3 | 
 4 | Non-dom-event way to catch nodes showing up. And it uses selectors.
 5 | 
 6 | **It's not just for wider browser support, It can be better than DOMMutationObserver for certain things.**
 7 | 
 8 | ## Why?
 9 | 
10 | - Because DOM Events slow down the browser and insertionQuery doesn't
11 | - Because DOM Mutation Observer has less browser support than insertionQuery
12 | - Because with insertionQuery you can filter DOM changes using selectors without performance overhead!
13 | 
14 | ## Widespread support!
15 | 
16 | IE10+ and mostly anything else (including mobile)
17 | 
18 | Details: http://caniuse.com/#feat=css-animation
19 | 
20 | ## Installation
21 | 
22 |     npm install insertion-query
23 | 
24 | or just download the `insQ.min.js` file.
25 | 
26 | ## Basic usage
27 | 
28 | 	insertionQ('selector').every(function(element){
29 | 		//callback
30 | 	});
31 | 
32 | Runs the callback whenever an element matching the selector is created in the document. This means it handles DOM insertions of new nodes.
33 | 
34 | Changing an existing element to match the selector won't run the callback. Showing an element that was not displayed before won't run the callback. You can disable preventing those situations with configuration option `insertionQ.config({ strictlyNew:false })`, but it's not recommended.
35 | 
36 | ## Insertion summary
37 | 
38 |     insertionQ('selector').summary(function(arrayOfInsertedNodes){
39 | 		//callback
40 | 	});
41 | 
42 | Runs the callback with an array of newly inserted nodes that contain element(s) matching the selector. For multiple nodes matching the selector, if they were inserted in a wrapper, the wrapper will be returned in the array. The array will contain the smallest set of nodes containing all the changes that happened to document's body.
43 | 
44 | ## Config options
45 | 
46 | You can change insertionQuery options by calling the config method:
47 | 
48 |     insertionQ.config({
49 |         strictlyNew : true,
50 |         timeout : 20,
51 |         addImportant: false
52 |     });
53 | 
54 | - `strictlyNew` Keep track of nodes that existed at the moment of defining a new insertionQuery. Defaults to `true`.
55 | - `timeout` Time in miliseconds to wait before insertionQuery starts listening to events. If DOM already contained elements matching the selector, animation events will be triggered and there's some latency. Defaults to `20`. 20ms was safe in testing, you can change it to 0 if you know what you're doing. (or if you don't mind getting events from existing nodes matching the selector)
56 | - `addImportant` - Specifies whether to add !important to animation declarations. Defaults to `false`.
57 | 
58 | ## Technical notes:
59 | 
60 |  - run after DOM is ready or you'll get all the callbacks from HTML elements there. (thank you capt. Obvious)
61 |  - the implementation is based on **CSS animations NOT DOM events**. So no consequences for performance.
62 |  - because it's done with CSS you get the selectors for free, no javascript work is done matching that, not even a `querySelector` call
63 |  - to make sure you won't get calls from elements that are there, the callbacks start working some miliseconds after you call insertionQ, so if you add elements in the same function call that you initiated insertionQuery, you won't get callbacks. This can be changed in config.
64 |  - it actually takes a few miliseconds before the callback runs after element is added (I measured upto 30ms in Firefox)
65 | 


--------------------------------------------------------------------------------
/spec/jasmine.tap_reporter.js:
--------------------------------------------------------------------------------
 1 | (function() {
 2 |     if (! jasmine) {
 3 |         throw new Exception("jasmine library does not exist in global namespace!");
 4 |     }
 5 | 
 6 |     /**
 7 |      * TAP (http://en.wikipedia.org/wiki/Test_Anything_Protocol) reporter.
 8 |      * outputs spec results to the console.
 9 |      *
10 |      * Heavily inspired by ConsoleReporter found at:
11 |      * https://github.com/larrymyers/jasmine-reporters/
12 |      *
13 |      * Usage:
14 |      *
15 |      * jasmine.getEnv().addReporter(new jasmine.TapReporter());
16 |      * jasmine.getEnv().execute();
17 |      */
18 |     var TapReporter = function() {
19 |         this.started = false;
20 |         this.finished = false;
21 |     };
22 | 
23 |     TapReporter.prototype = {
24 | 
25 |         reportRunnerStarting: function(runner) {
26 |             this.started = true;
27 |             this.start_time = (new Date()).getTime();
28 |             this.executed_specs = 0;
29 |             this.passed_specs = 0;
30 |             this.executed_asserts = 0;
31 |             this.passed_asserts = 0;
32 |             // should have at least 1 spec, otherwise it's considered a failure
33 |             this.log('1..'+ Math.max(runner.specs().length, 1));
34 |         },
35 | 
36 |         reportSpecStarting: function(spec) {
37 |             this.executed_specs++;
38 |         },
39 | 
40 |         reportSpecResults: function(spec) {
41 |             var resultText = "not ok";
42 |             var errorMessage = '';
43 | 
44 |             var results = spec.results();
45 |             if (results.skipped) {
46 |                 return;
47 |             }
48 |             var passed = results.passed();
49 | 
50 |             this.passed_asserts += results.passedCount;
51 |             this.executed_asserts += results.totalCount;
52 | 
53 |             if (passed) {
54 |                 this.passed_specs++;
55 |                 resultText = "ok";
56 |             } else {
57 |                 var items = results.getItems();
58 |                 var i = 0;
59 |                 var expectationResult, stackMessage;
60 |                 while (expectationResult = items[i++]) {
61 |                     if (expectationResult.trace) {
62 |                         stackMessage = expectationResult.trace.stack? expectationResult.trace.stack : expectationResult.message;
63 |                         errorMessage += '\n  '+ stackMessage;
64 |                     }
65 |                 }
66 |             }
67 | 
68 |             this.log(resultText +" "+ (spec.id + 1) +" - "+ spec.suite.description +" : "+ spec.description + errorMessage);
69 |         },
70 | 
71 |         reportRunnerResults: function(runner) {
72 |             var dur = (new Date()).getTime() - this.start_time;
73 |             var failed = this.executed_specs - this.passed_specs;
74 |             var spec_str = this.executed_specs + (this.executed_specs === 1 ? " spec, " : " specs, ");
75 |             var fail_str = failed + (failed === 1 ? " failure in " : " failures in ");
76 |             var assert_str = this.executed_asserts + (this.executed_asserts === 1 ? " assertion, " : " assertions, ");
77 | 
78 |             if (this.executed_asserts) {
79 |                 this.log("# "+ spec_str + assert_str + fail_str + (dur/1000) + "s.");
80 |             } else {
81 |                 this.log('not ok 1 - no asserts run.');
82 |             }
83 |             this.finished = true;
84 |         },
85 | 
86 |         log: function(str) {
87 |             var console = jasmine.getGlobal().console;
88 |             if (console && console.log) {
89 |                 console.log(str);
90 |             }
91 |         }
92 |     };
93 | 
94 |     // export public
95 |     jasmine.TapReporter = TapReporter;
96 | })();
97 | 


--------------------------------------------------------------------------------
/spec/test.js:
--------------------------------------------------------------------------------
  1 | function waits(time) {
  2 |     return new Promise((resolve) => setTimeout(resolve, time))
  3 | }
  4 | 
  5 | describe("Insertion Query lib", function () {
  6 | 
  7 | 
  8 |     it('should react to an insertion', async function () {
  9 |         insertionQ.config({
 10 |             strictlyNew: true
 11 |         });
 12 |         var callback = jasmine.createSpy('callback');
 13 |         insertionQ('blockquote').every(callback);
 14 |         await waits(200);
 15 |         document.body.appendChild(document.createElement('blockquote'));
 16 |         await waits(200); //just to be sure
 17 |         console.log(callback)
 18 |         expect(callback.calls.count()).toEqual(1);
 19 | 
 20 |     });
 21 | 
 22 | 
 23 |     it('should call the callbacks for two selectors accordingly', async function () {
 24 |         var callback1 = jasmine.createSpy('callback'),
 25 |             callback2 = jasmine.createSpy('callback');
 26 |         insertionQ('#a').every(callback1);
 27 |             insertionQ('#b').every(callback2);
 28 |         await waits(200);
 29 |         var el = document.createElement('q');
 30 |             el.id = "a";
 31 |             document.body.appendChild(el);
 32 |             el = document.createElement('q');
 33 |             el.id = "b";
 34 |             document.body.appendChild(el);
 35 |         await waits(200); //just to be sure
 36 |         expect(callback1.calls.count()).toEqual(1);
 37 |             expect(callback2.calls.count()).toEqual(1);
 38 | 
 39 |     });
 40 | 
 41 |     it('should react to a change that causes the element to match the selector', async function () {
 42 |         var callback = jasmine.createSpy('callback'),
 43 |             el;
 44 |         insertionQ('q.someFunnyClass').every(callback);
 45 |         await waits(200);
 46 |         el = document.createElement('q');
 47 |             document.body.appendChild(el);
 48 |         await waits(100);
 49 |         el.setAttribute('class', 'someFunnyClass');
 50 |         await waits(200);
 51 |         expect(callback.calls.count()).toEqual(1);
 52 | 
 53 |     });
 54 | 
 55 |     it('should not react to old elements', async function () {
 56 |         var callback = jasmine.createSpy('callback');
 57 |         document.body.appendChild(document.createElement('q'));
 58 |         await waits(200);
 59 |         insertionQ('q').every(callback);
 60 |         await waits(200);
 61 |         document.body.appendChild(document.createElement('q'));
 62 |         await waits(200);
 63 |         expect(callback.calls.count()).toEqual(1);
 64 | 
 65 |     });
 66 |     it('should NOT react to old elements getting displayed just now (happened in webkit)', async function () {
 67 |         var callback = jasmine.createSpy('callback'),
 68 |             el = document.createElement('q');
 69 |         el.style.display = 'none';
 70 |             document.body.appendChild(el);
 71 |         await waits(200);
 72 |         insertionQ('q').every(function () {
 73 |                 console.log('call');
 74 |                 callback();
 75 |             });
 76 |         await waits(200);
 77 |         el.style.display = 'inline';
 78 |         await waits(200);
 79 |         expect(callback.calls.count()).toEqual(0);
 80 | 
 81 |     });
 82 | 
 83 |     it('should pass the newly added node to the callback function', async function () {
 84 |         var el = document.createElement('q'),
 85 |             resultNode;
 86 |         insertionQ('q').every(function (node) {
 87 |                 resultNode = node;
 88 |             });
 89 |         await waits(200);
 90 |         document.body.appendChild(el);
 91 |         await waits(200);
 92 |         expect(resultNode).toBe(el);
 93 | 
 94 |     });
 95 | 
 96 | 
 97 |     it('should call one summary callback for two nodes with common parent', async function () {
 98 |         var nodeArray,
 99 |             callback1 = jasmine.createSpy('callback1');
100 |         insertionQ('q').summary(function (a) {
101 |                 nodeArray = a;
102 |                 callback1();
103 |             });
104 |         await waits(200);
105 |         var wrap = document.createElement('div'),
106 |                 el = document.createElement('q');
107 |             el.id = "z";
108 |             wrap.appendChild(el);
109 |             el = document.createElement('q');
110 |             el.id = "x";
111 |             wrap.appendChild(el);
112 |             document.body.appendChild(wrap);
113 |         await waits(500); //just to be sure
114 |         expect(callback1.calls.count()).toEqual(1);
115 |             expect(nodeArray.length).toEqual(1);
116 |             expect(nodeArray[0].nodeName).toBe('DIV');
117 | 
118 |     });
119 | 
120 | 
121 |     it('should unbind everything when destroyed', async function () {
122 |         var callback = jasmine.createSpy('callback');
123 |         insertionQ('q').every(callback).destroy();
124 |         await waits(20);
125 |         document.body.appendChild(document.createElement('q'));
126 |         await waits(200);
127 |         expect(callback).not.toHaveBeenCalled();
128 |     });
129 | 
130 |     it('should react to a disabled input insertion', async function () {
131 |         var callback = jasmine.createSpy('callback');
132 |         insertionQ('input[type="checkbox"]').every(callback);
133 |         await waits(20);
134 |         var el = document.createElement('input');
135 |             el.type = 'checkbox';
136 |             el.disabled = true;
137 |             document.body.appendChild(el);
138 |         await waits(200);
139 |         expect(callback).toHaveBeenCalled();
140 |     });
141 | 
142 |     it('should work with strictlyNew set to false', async function () {
143 |         var asyncErrorCaught;
144 |         var onErrorBackup = window.onerror;
145 |         window.onerror = function (err) {
146 |             asyncErrorCaught = err
147 |         }
148 |         insertionQ.config({
149 |             strictlyNew: false
150 |         });
151 |         var callback = jasmine.createSpy('callback');
152 |         document.body.appendChild(document.createElement('q'));
153 |             insertionQ('q').summary(callback);
154 |         await waits(200);
155 |         insertionQ.config({
156 |                 strictlyNew: true
157 |             });
158 |         window.onerror = onErrorBackup
159 |             if (asyncErrorCaught) {
160 |                 throw asyncErrorCaught
161 |             }
162 |     });
163 | 
164 | 
165 | });
166 | 


--------------------------------------------------------------------------------
/insQ.js:
--------------------------------------------------------------------------------
  1 | var insertionQ = (function () {
  2 |     "use strict";
  3 | 
  4 |     var sequence = 100,
  5 |         isAnimationSupported = false,
  6 |         animationstring = 'animationName',
  7 |         keyframeprefix = '',
  8 |         domPrefixes = 'Webkit Moz O ms Khtml'.split(' '),
  9 |         pfx = '',
 10 |         elm = document.createElement('div'),
 11 |         options = {
 12 |             strictlyNew: true,
 13 |             timeout: 20,
 14 |             addImportant: false
 15 |         };
 16 | 
 17 |     if (elm.style.animationName) {
 18 |         isAnimationSupported = true;
 19 |     }
 20 | 
 21 |     if (isAnimationSupported === false) {
 22 |         for (var i = 0; i < domPrefixes.length; i++) {
 23 |             if (elm.style[domPrefixes[i] + 'AnimationName'] !== undefined) {
 24 |                 pfx = domPrefixes[i];
 25 |                 animationstring = pfx + 'AnimationName';
 26 |                 keyframeprefix = '-' + pfx.toLowerCase() + '-';
 27 |                 isAnimationSupported = true;
 28 |                 break;
 29 |             }
 30 |         }
 31 |     }
 32 | 
 33 |     function isTagged(el) {
 34 |         return (options.strictlyNew && (el.QinsQ === true));
 35 |     }
 36 | 
 37 |     function listen(selector, callback) {
 38 |         var styleAnimation,
 39 |             animationName = 'insQ_' + (sequence++),
 40 |             importantRule = options.addImportant ? " !important" : "";
 41 | 
 42 |         var eventHandler = function (event) {
 43 |             if (event.animationName === animationName || event[animationstring] === animationName) {
 44 |                 if (!isTagged(event.target)) {
 45 |                     callback(event.target);
 46 |                 }
 47 |             }
 48 |         };
 49 | 
 50 |         styleAnimation = document.createElement('style');
 51 |         styleAnimation.innerHTML = '@' + keyframeprefix + 'keyframes ' + animationName + ' {  from {  outline: 1px solid transparent  } to {  outline: 0px solid transparent }  }' +
 52 |             "\n" + selector + ' { animation-duration: 0.001s' + importantRule + '; animation-name: ' + animationName + importantRule + '; ' +
 53 |             keyframeprefix + 'animation-duration: 0.001s' + importantRule + '; ' + keyframeprefix + 'animation-name: ' + animationName + importantRule + '; ' +
 54 |             ' } ';
 55 | 
 56 |         document.head.appendChild(styleAnimation);
 57 | 
 58 |         var bindAnimationLater = setTimeout(function () {
 59 |             document.addEventListener('animationstart', eventHandler, false);
 60 |             document.addEventListener('MSAnimationStart', eventHandler, false);
 61 |             document.addEventListener('webkitAnimationStart', eventHandler, false);
 62 |             //event support is not consistent with DOM prefixes
 63 |         }, options.timeout); //starts listening later to skip elements found on startup. this might need tweaking
 64 | 
 65 |         return {
 66 |             destroy: function () {
 67 |                 clearTimeout(bindAnimationLater);
 68 |                 if (styleAnimation) {
 69 |                     document.head.removeChild(styleAnimation);
 70 |                     styleAnimation = null;
 71 |                 }
 72 |                 document.removeEventListener('animationstart', eventHandler);
 73 |                 document.removeEventListener('MSAnimationStart', eventHandler);
 74 |                 document.removeEventListener('webkitAnimationStart', eventHandler);
 75 |             }
 76 |         };
 77 |     }
 78 | 
 79 | 
 80 |     function tag(el) {
 81 |         el.QinsQ = true; //bug in V8 causes memory leaks when weird characters are used as field names. I don't want to risk leaking DOM trees so the key is not '-+-' anymore
 82 |     }
 83 | 
 84 |     function topmostUntaggedParent(el) {
 85 |         if (isTagged(el.parentNode) || el.nodeName === 'BODY') {
 86 |             return el;
 87 |         } else {
 88 |             return topmostUntaggedParent(el.parentNode);
 89 |         }
 90 |     }
 91 | 
 92 |     function tagAll(e) {
 93 |         if (!e) { return; }
 94 |         tag(e);
 95 |         e = e.firstChild;
 96 |         for (; e; e = e.nextSibling) {
 97 |             if (e !== undefined && e.nodeType === 1) {
 98 |                 tagAll(e);
 99 |             }
100 |         }
101 |     }
102 | 
103 |     //aggregates multiple insertion events into a common parent
104 |     function catchInsertions(selector, callback) {
105 |         var insertions = [];
106 |         //throttle summary
107 |         var sumUp = (function () {
108 |             var to;
109 |             return function () {
110 |                 clearTimeout(to);
111 |                 to = setTimeout(function () {
112 |                     insertions.forEach(tagAll);
113 |                     callback(insertions);
114 |                     insertions = [];
115 |                 }, 10);
116 |             };
117 |         })();
118 | 
119 |         return listen(selector, function (el) {
120 |             if (isTagged(el)) {
121 |                 return;
122 |             }
123 |             tag(el);
124 |             var myparent = topmostUntaggedParent(el);
125 |             if (insertions.indexOf(myparent) < 0) {
126 |                 insertions.push(myparent);
127 |             }
128 |             sumUp();
129 |         });
130 |     }
131 | 
132 |     //insQ function
133 |     var exports = function (selector) {
134 |         if (isAnimationSupported && selector.match(/[^{}]/)) {
135 | 
136 |             if (options.strictlyNew) {
137 |                 tagAll(document.body); //prevents from catching things on show
138 |             }
139 |             return {
140 |                 every: function (callback) {
141 |                     return listen(selector, callback);
142 |                 },
143 |                 summary: function (callback) {
144 |                     return catchInsertions(selector, callback);
145 |                 }
146 |             };
147 |         } else {
148 |             return false;
149 |         }
150 |     };
151 | 
152 |     //allows overriding defaults
153 |     exports.config = function (opt) {
154 |         for (var o in opt) {
155 |             if (opt.hasOwnProperty(o)) {
156 |                 options[o] = opt[o];
157 |             }
158 |         }
159 |     };
160 | 
161 |     return exports;
162 | })();
163 | 
164 | if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {
165 |     module.exports = insertionQ;
166 | }
167 | 


--------------------------------------------------------------------------------