├── .bowerrc ├── .editorconfig ├── .ember-cli ├── .gitignore ├── .jshintrc ├── .npmignore ├── .travis.yml ├── .watchmanconfig ├── LICENSE.md ├── README.md ├── addon ├── .gitkeep ├── initializers │ └── mutation-observer.js └── mixins │ └── mutation-observer.js ├── app ├── .gitkeep ├── initializers │ └── mutation-observer.js └── mixins │ └── mutation-observer.js ├── bower.json ├── config ├── ember-try.js └── environment.js ├── ember-cli-build.js ├── index.js ├── package.json ├── showcase └── mutation-record.png ├── testem.js ├── testem.json ├── tests ├── .jshintrc ├── dummy │ ├── app │ │ ├── app.js │ │ ├── components │ │ │ ├── .gitkeep │ │ │ ├── dummy-list-item.js │ │ │ └── dummy-list.js │ │ ├── controllers │ │ │ ├── .gitkeep │ │ │ └── application.js │ │ ├── helpers │ │ │ └── .gitkeep │ │ ├── index.html │ │ ├── models │ │ │ └── .gitkeep │ │ ├── resolver.js │ │ ├── router.js │ │ ├── routes │ │ │ └── .gitkeep │ │ ├── styles │ │ │ └── app.css │ │ └── templates │ │ │ ├── application.hbs │ │ │ └── components │ │ │ ├── .gitkeep │ │ │ └── dummy-list-item.hbs │ ├── config │ │ └── environment.js │ └── public │ │ ├── crossdomain.xml │ │ └── robots.txt ├── helpers │ ├── destroy-app.js │ ├── module-for-acceptance.js │ ├── resolver.js │ └── start-app.js ├── index.html ├── test-helper.js └── unit │ ├── .gitkeep │ └── initializers │ └── mutation-observer-test.js └── vendor └── .gitkeep /.bowerrc: -------------------------------------------------------------------------------- 1 | { 2 | "directory": "bower_components", 3 | "analytics": false 4 | } 5 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig helps developers define and maintain consistent 2 | # coding styles between different editors and IDEs 3 | # editorconfig.org 4 | 5 | root = true 6 | 7 | 8 | [*] 9 | end_of_line = lf 10 | charset = utf-8 11 | trim_trailing_whitespace = true 12 | insert_final_newline = true 13 | indent_style = space 14 | indent_size = 2 15 | 16 | [*.hbs] 17 | insert_final_newline = false 18 | 19 | [*.{diff,md}] 20 | trim_trailing_whitespace = false 21 | -------------------------------------------------------------------------------- /.ember-cli: -------------------------------------------------------------------------------- 1 | { 2 | /** 3 | Ember CLI sends analytics information by default. The data is completely 4 | anonymous, but there are times when you might want to disable this behavior. 5 | 6 | Setting `disableAnalytics` to true will prevent any data from being sent. 7 | */ 8 | "disableAnalytics": false 9 | } 10 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # compiled output 4 | /dist 5 | /tmp 6 | 7 | # dependencies 8 | /node_modules 9 | /bower_components 10 | 11 | # misc 12 | /.sass-cache 13 | /connect.lock 14 | /coverage/* 15 | /libpeerconnection.log 16 | npm-debug.log 17 | testem.log 18 | -------------------------------------------------------------------------------- /.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "predef": [ 3 | "document", 4 | "window", 5 | "-Promise" 6 | ], 7 | "browser": true, 8 | "boss": true, 9 | "curly": true, 10 | "debug": false, 11 | "devel": true, 12 | "eqeqeq": true, 13 | "evil": true, 14 | "forin": false, 15 | "immed": false, 16 | "laxbreak": false, 17 | "newcap": true, 18 | "noarg": true, 19 | "noempty": false, 20 | "nonew": false, 21 | "nomen": false, 22 | "onevar": false, 23 | "plusplus": false, 24 | "regexp": false, 25 | "undef": true, 26 | "sub": true, 27 | "strict": false, 28 | "white": false, 29 | "eqnull": true, 30 | "esversion": 6, 31 | "unused": true 32 | } 33 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | /bower_components 2 | /config/ember-try.js 3 | /dist 4 | /tests 5 | /tmp 6 | **/.gitkeep 7 | .bowerrc 8 | .editorconfig 9 | .ember-cli 10 | .gitignore 11 | .jshintrc 12 | .watchmanconfig 13 | .travis.yml 14 | bower.json 15 | ember-cli-build.js 16 | testem.js 17 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | --- 2 | language: node_js 3 | node_js: 4 | - "4" 5 | 6 | sudo: false 7 | 8 | cache: 9 | directories: 10 | - node_modules 11 | 12 | env: 13 | - EMBER_TRY_SCENARIO=default 14 | - EMBER_TRY_SCENARIO=ember-1.13 15 | - EMBER_TRY_SCENARIO=ember-release 16 | - EMBER_TRY_SCENARIO=ember-beta 17 | - EMBER_TRY_SCENARIO=ember-canary 18 | 19 | matrix: 20 | fast_finish: true 21 | allow_failures: 22 | - env: EMBER_TRY_SCENARIO=ember-canary 23 | 24 | before_install: 25 | - npm config set spin false 26 | - npm install -g bower 27 | - bower --version 28 | - npm install phantomjs-prebuilt 29 | - node_modules/phantomjs-prebuilt/bin/phantomjs --version 30 | 31 | install: 32 | - npm install 33 | - bower install 34 | 35 | script: 36 | # Usually, it's ok to finish the test scenario without reverting 37 | # to the addon's original dependency state, skipping "cleanup". 38 | - ember try:one $EMBER_TRY_SCENARIO test --skip-cleanup 39 | -------------------------------------------------------------------------------- /.watchmanconfig: -------------------------------------------------------------------------------- 1 | { 2 | "ignore_dirs": ["tmp", "dist"] 3 | } 4 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 6 | 7 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 8 | 9 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 10 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | [](https://travis-ci.org/zzarcon/ember-cli-Mutation-Observer) 2 | [](http://emberobserver.com/addons/ember-cli-mutation-observer) 3 | [](https://badge.fury.io/js/ember-cli-mutation-observer) 4 | 5 | # ember-cli-Mutation-Observer 6 | 7 | > The easiest way to subscribe to Dom changes in your ember components 8 | 9 | A lightweight ember addon that provides a event based solution for react when the DOM of your components change. It uses [MutationObserver](https://developer.mozilla.org/en/docs/Web/API/MutationObserver) to make magic happen. [DEMO](http://zzarcon.github.io/ember-cli-Mutation-Observer) 10 | 11 | ## Installation 12 | 13 | Ember Cli Mutation Observer works in Ember **1.13.9+** or **2.0+**, including beta and canary, with no deprecations 14 | whatsoever. 15 | 16 | 17 | As any other ember-cli addon, run: 18 | ``` 19 | ember install ember-cli-mutation-observer 20 | ``` 21 | 22 | ## Using it as a Mixin 23 | 24 | **/app/components/dummy-list.js** 25 | 26 | ```javascript 27 | 28 | import Ember from 'ember'; 29 | import mutationObserver from '../mixins/mutation-observer'; 30 | 31 | export default Ember.Component.extend(mutationObserver, { 32 | 33 | onMutation(mutations, observer) { 34 | 35 | mutations.forEach(function(mutation) { 36 | console.log(mutation.type, mutation.oldValue); 37 | 38 | mutation.addedNodes.forEach(function(record) { 39 | console.log(record); 40 | }); 41 | }); 42 | 43 | //Access to observer methods 44 | observer.takeRecords(); 45 | } 46 | }); 47 | 48 | ``` 49 | 50 | You will see something like this for each mutation: 51 | 52 |  53 | 54 | You can also specify the mutation options you want: 55 | 56 | ```javascript 57 | export default Ember.Component.extend(mutationObserver, { 58 | mutationConfig: { 59 | attributes: true, 60 | childList: true, 61 | characterData: true 62 | } 63 | }) 64 | ``` 65 | 66 | 67 | ## Use it in all your components 68 | 69 | If you want to have the functionality available in all your components just set the `mutationObserverInjection` flag to `true` in your `environment`. 70 | 71 | Check [this environment example](https://github.com/zzarcon/ember-cli-Mutation-Observer/blob/master/tests/dummy/config/environment.js#L9) 72 | 73 | 74 | ## Browser support 75 | 76 | http://caniuse.com/#feat=mutationobserver 77 | -------------------------------------------------------------------------------- /addon/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zzarcon/ember-cli-Mutation-Observer/b0f22cc1e90f0215098c0f36d3dd7cbee48cb2ff/addon/.gitkeep -------------------------------------------------------------------------------- /addon/initializers/mutation-observer.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Simple initializer that implements the mutationObserverMixin 3 | * in all the Components. It uses a flag defined in the app 4 | * environment for it. 5 | */ 6 | 7 | import Ember from 'ember'; 8 | import mutationObserver from '../mixins/mutation-observer'; 9 | 10 | export function initialize(app) { 11 | let config; 12 | try { 13 | // Ember 2.15+ 14 | config = app.resolveRegistration('config:environment'); 15 | } catch (e) { 16 | // Older Ember approach 17 | config = app.lookupFactory ? 18 | app.lookupFactory('config:environment') : 19 | app.__container__.lookupFactory('config:environment'); 20 | } 21 | 22 | if (!config || !config.mutationObserverInjection) {return;} 23 | 24 | Ember.Component.reopen(mutationObserver); 25 | } 26 | 27 | export default { 28 | name: 'mutation-observer', 29 | initialize: initialize 30 | }; -------------------------------------------------------------------------------- /addon/mixins/mutation-observer.js: -------------------------------------------------------------------------------- 1 | /** 2 | * TODO: 3 | * -Add description 4 | */ 5 | 6 | import Ember from 'ember'; 7 | 8 | const Observer = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver; 9 | const hasMutationSupport = !!Observer; 10 | const defaultMutationConfig = { 11 | attributes: true, 12 | childList: true, 13 | characterData: true 14 | }; 15 | 16 | export default Ember.Mixin.create({ 17 | mutationInstance: null, 18 | onMutation: null, 19 | mutationConfig: null, 20 | 21 | setupObserver: Ember.on('didInsertElement', function() { 22 | var cb = this.get('onMutation'); 23 | 24 | if (!hasMutationSupport) { 25 | return console.warn("MutationObserverMixin: MutationObserver is not supported in this browser"); 26 | } 27 | 28 | if (Ember.typeOf(cb) !== 'function') { 29 | return console.warn("MutationObserverMixin: 'onMutation' callback it's undefined"); 30 | } 31 | 32 | var target = this.$()[0]; 33 | var observer = new Observer(cb); 34 | var config = Ember.merge(defaultMutationConfig, this.get('mutationConfig')); 35 | 36 | observer.observe(target, config); 37 | 38 | this.set('mutationInstance', observer); 39 | }), 40 | 41 | destroyObserver: Ember.on('willDestroyElement', function() { 42 | var observer = this.get('mutationInstance'); 43 | if (!observer) {return;} 44 | 45 | observer.disconnect(); 46 | }) 47 | }); -------------------------------------------------------------------------------- /app/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zzarcon/ember-cli-Mutation-Observer/b0f22cc1e90f0215098c0f36d3dd7cbee48cb2ff/app/.gitkeep -------------------------------------------------------------------------------- /app/initializers/mutation-observer.js: -------------------------------------------------------------------------------- 1 | export { default, initialize } from 'ember-cli-mutation-observer/initializers/mutation-observer'; 2 | -------------------------------------------------------------------------------- /app/mixins/mutation-observer.js: -------------------------------------------------------------------------------- 1 | import mutationObserver from 'ember-cli-mutation-observer/mixins/mutation-observer'; 2 | 3 | export default mutationObserver; -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ember-cli-mutation-observer", 3 | "dependencies": { 4 | "ember": "~2.8.0", 5 | "ember-cli-shims": "0.1.3" 6 | }, 7 | "resolutions": { 8 | "ember": "~2.8.0" 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /config/ember-try.js: -------------------------------------------------------------------------------- 1 | /*jshint node:true*/ 2 | module.exports = { 3 | scenarios: [ 4 | { 5 | name: 'default', 6 | bower: { 7 | dependencies: { } 8 | } 9 | }, 10 | { 11 | name: 'ember-1.13', 12 | bower: { 13 | dependencies: { 14 | 'ember': '~1.13.0' 15 | }, 16 | resolutions: { 17 | 'ember': '~1.13.0' 18 | } 19 | } 20 | }, 21 | { 22 | name: 'ember-release', 23 | bower: { 24 | dependencies: { 25 | 'ember': 'components/ember#release' 26 | }, 27 | resolutions: { 28 | 'ember': 'release' 29 | } 30 | } 31 | }, 32 | { 33 | name: 'ember-beta', 34 | bower: { 35 | dependencies: { 36 | 'ember': 'components/ember#beta' 37 | }, 38 | resolutions: { 39 | 'ember': 'beta' 40 | } 41 | } 42 | }, 43 | { 44 | name: 'ember-canary', 45 | bower: { 46 | dependencies: { 47 | 'ember': 'components/ember#canary' 48 | }, 49 | resolutions: { 50 | 'ember': 'canary' 51 | } 52 | } 53 | } 54 | ] 55 | }; 56 | -------------------------------------------------------------------------------- /config/environment.js: -------------------------------------------------------------------------------- 1 | /*jshint node:true*/ 2 | 'use strict'; 3 | 4 | module.exports = function(/* environment, appConfig */) { 5 | return { }; 6 | }; 7 | -------------------------------------------------------------------------------- /ember-cli-build.js: -------------------------------------------------------------------------------- 1 | /*jshint node:true*/ 2 | /* global require, module */ 3 | var EmberAddon = require('ember-cli/lib/broccoli/ember-addon'); 4 | 5 | module.exports = function(defaults) { 6 | var app = new EmberAddon(defaults, { 7 | // Add options here 8 | }); 9 | 10 | /* 11 | This build file specifies the options for the dummy test app of this 12 | addon, located in `/tests/dummy` 13 | This build file does *not* influence how the addon or the app using it 14 | behave. You most likely want to be modifying `./index.js` or app's build file 15 | */ 16 | 17 | return app.toTree(); 18 | }; 19 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | /* jshint node: true */ 2 | 'use strict'; 3 | 4 | module.exports = { 5 | name: 'ember-cli-mutation-observer', 6 | isDevelopingAddon: function() { 7 | return true; 8 | } 9 | }; -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ember-cli-mutation-observer", 3 | "version": "0.1.5", 4 | "description": "The default blueprint for ember-cli addons.", 5 | "directories": { 6 | "doc": "doc", 7 | "test": "tests" 8 | }, 9 | "scripts": { 10 | "build": "ember build", 11 | "start": "ember server", 12 | "test": "ember try:each", 13 | "amend": "git add . && git commit --amend --reuse-message=HEAD", 14 | "push": "git push --tags && git push", 15 | "release": "npm version patch --force && npm run amend && npm run push && npm publish", 16 | "demo_page": "ember github-pages:commit --message 'Update gh-pages'" 17 | }, 18 | "repository": { 19 | "type": "git", 20 | "url": "http://github.com/zzarcon/ember-cli-Mutation-Observer.git" 21 | }, 22 | "engines": { 23 | "node": ">= 0.10.0" 24 | }, 25 | "author": "", 26 | "license": "MIT", 27 | "devDependencies": { 28 | "broccoli-asset-rev": "^2.4.2", 29 | "ember-ajax": "^2.0.1", 30 | "ember-cli": "2.8.0", 31 | "ember-cli-app-version": "^1.0.0", 32 | "ember-cli-dependency-checker": "^1.2.0", 33 | "ember-cli-github-pages": "0.1.2", 34 | "ember-cli-htmlbars": "^1.0.3", 35 | "ember-cli-htmlbars-inline-precompile": "^0.3.1", 36 | "ember-cli-inject-live-reload": "^1.4.0", 37 | "ember-cli-jshint": "^1.0.0", 38 | "ember-cli-qunit": "^2.1.0", 39 | "ember-cli-release": "^0.2.9", 40 | "ember-cli-sri": "^2.1.0", 41 | "ember-cli-test-loader": "^1.1.0", 42 | "ember-cli-uglify": "^1.2.0", 43 | "ember-data": "^2.8.0", 44 | "ember-disable-prototype-extensions": "^1.1.0", 45 | "ember-export-application-global": "^1.0.5", 46 | "ember-load-initializers": "^0.5.1", 47 | "ember-resolver": "^2.0.3", 48 | "ember-sinon": "^1.0.1", 49 | "loader.js": "^4.0.1" 50 | }, 51 | "keywords": [ 52 | "ember-addon", 53 | "mutation-observer", 54 | "mutationObserver", 55 | "mutation", 56 | "observer" 57 | ], 58 | "dependencies": { 59 | "ember-cli-babel": "^5.1.6" 60 | }, 61 | "ember-addon": { 62 | "configPath": "tests/dummy/config" 63 | } 64 | } 65 | -------------------------------------------------------------------------------- /showcase/mutation-record.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zzarcon/ember-cli-Mutation-Observer/b0f22cc1e90f0215098c0f36d3dd7cbee48cb2ff/showcase/mutation-record.png -------------------------------------------------------------------------------- /testem.js: -------------------------------------------------------------------------------- 1 | /*jshint node:true*/ 2 | module.exports = { 3 | "framework": "qunit", 4 | "test_page": "tests/index.html?hidepassed", 5 | "disable_watching": true, 6 | "launch_in_ci": [ 7 | "PhantomJS" 8 | ], 9 | "launch_in_dev": [ 10 | "PhantomJS", 11 | "Chrome" 12 | ] 13 | }; 14 | -------------------------------------------------------------------------------- /testem.json: -------------------------------------------------------------------------------- 1 | { 2 | "framework": "qunit", 3 | "test_page": "tests/index.html?hidepassed", 4 | "disable_watching": true, 5 | "launch_in_ci": [ 6 | "PhantomJS" 7 | ], 8 | "launch_in_dev": [ 9 | "PhantomJS", 10 | "Chrome" 11 | ] 12 | } 13 | -------------------------------------------------------------------------------- /tests/.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "predef": [ 3 | "document", 4 | "window", 5 | "location", 6 | "setTimeout", 7 | "$", 8 | "-Promise", 9 | "define", 10 | "console", 11 | "visit", 12 | "exists", 13 | "fillIn", 14 | "click", 15 | "keyEvent", 16 | "triggerEvent", 17 | "find", 18 | "findWithAssert", 19 | "wait", 20 | "DS", 21 | "andThen", 22 | "currentURL", 23 | "currentPath", 24 | "currentRouteName" 25 | ], 26 | "node": false, 27 | "browser": false, 28 | "boss": true, 29 | "curly": true, 30 | "debug": false, 31 | "devel": false, 32 | "eqeqeq": true, 33 | "evil": true, 34 | "forin": false, 35 | "immed": false, 36 | "laxbreak": false, 37 | "newcap": true, 38 | "noarg": true, 39 | "noempty": false, 40 | "nonew": false, 41 | "nomen": false, 42 | "onevar": false, 43 | "plusplus": false, 44 | "regexp": false, 45 | "undef": true, 46 | "sub": true, 47 | "strict": false, 48 | "white": false, 49 | "eqnull": true, 50 | "esversion": 6, 51 | "unused": true 52 | } 53 | -------------------------------------------------------------------------------- /tests/dummy/app/app.js: -------------------------------------------------------------------------------- 1 | import Ember from 'ember'; 2 | import Resolver from './resolver'; 3 | import loadInitializers from 'ember-load-initializers'; 4 | import config from './config/environment'; 5 | 6 | let App; 7 | 8 | Ember.MODEL_FACTORY_INJECTIONS = true; 9 | 10 | App = Ember.Application.extend({ 11 | modulePrefix: config.modulePrefix, 12 | podModulePrefix: config.podModulePrefix, 13 | Resolver 14 | }); 15 | 16 | loadInitializers(App, config.modulePrefix); 17 | 18 | export default App; 19 | -------------------------------------------------------------------------------- /tests/dummy/app/components/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zzarcon/ember-cli-Mutation-Observer/b0f22cc1e90f0215098c0f36d3dd7cbee48cb2ff/tests/dummy/app/components/.gitkeep -------------------------------------------------------------------------------- /tests/dummy/app/components/dummy-list-item.js: -------------------------------------------------------------------------------- 1 | import Ember from 'ember'; 2 | 3 | export default Ember.Component.extend({ 4 | classNames: ['dummy-list-item'], 5 | item: null 6 | }); -------------------------------------------------------------------------------- /tests/dummy/app/components/dummy-list.js: -------------------------------------------------------------------------------- 1 | import Ember from 'ember'; 2 | import mutationObserver from 'ember-cli-mutation-observer/mixins/mutation-observer'; 3 | 4 | export default Ember.Component.extend(mutationObserver, { 5 | classNames: ['dummy-list'], 6 | 7 | onMutation(mutations) { 8 | mutations = mutations.map(function(mutation) { 9 | 10 | [].forEach.call(mutation.addedNodes, function(record) { 11 | console.log(record); 12 | }); 13 | 14 | return { 15 | type: mutation.type, 16 | oldValue: mutation.oldValue, 17 | recordsLength: mutation.addedNodes.length 18 | }; 19 | }); 20 | 21 | var mutationsString = JSON.stringify(mutations); 22 | 23 | $('#mutations').append(`
Mutations:
16 |