Documentation

ember-cli-dom-observer

Implementation of MutationObserver / DOM Mutation Observers as an Ember component.

---

Properties

Property Name	Type	Description
childList	bool	Set to true if additions and removals of the target node's child elements (including text nodes) are to be observed.
attributes	bool	Set to true if mutations to target's attributes are to be observed.
characterData	bool	Set to true if mutations to target's data are to be observed.
subtree	bool	Set to true if mutations to target and target's descendants are to be observed.
attributeOldValue	bool	Set to true if attributes is set to true and target's attribute value before the mutation needs to be recorded.
characterDataOldValue	bool	Set to true if characterData is set to true and target's data before the mutation needs to be recorded.
attributeFilter	string JSON array	Set to an array of attribute local names (without namespace) if not all attribute mutations need to be observed.
targetId	string	Set to the id of the element that should be observed.

Methods

handleMutations(array mutationRecord[], MutationObserver observer)

Description: Action method acting as the callback function for observed elements.

Parameters:

mutationRecord - mutationRecord

MutationObserver - MutationObserver

Examples

Observe textarea Element Style Attribute

{{#mutation-observer
  handleMutations=(action "handleMutations")
  attributes=true
  childList=false
  characterData=false
  subtree=false
  attributeFilter='["style"]'
}}
  <textarea style="width: 200px;"></textarea>
{{/mutation-observer}}

<p>textarea <b>width:</b> {{width}}</p>
<p>textarea <b>style attribute</b>: {{styleAttribute}}</p>

import Component from '@ember/component';

export default Component.extend(
{

  width: null,
  styleAttribute: null,

  actions:
  {
    /**
     * MutationObserver callback handler
     * @param {MutationRecord[]} mutations
     * @param {MutationObserver} observer
     */
    handleMutations(mutations, observer)
    {
      let self = this;
      mutations.forEach(function (mutation) {
        // Is the change to the element a change in the observed attribute?
        if (mutation.type === 'attributes') {
          // Get the style attribute for the element
          let target = mutation.target;
          let styleAttribute = target.getAttribute('style');
          self.set('styleAttribute', styleAttribute);

          // Get the width from the style attribute
          let widthString = window.getComputedStyle(target).getPropertyValue('width');
          let width = parseFloat(widthString);
          self.set('width', width);

          // Is the width of the element less than 250px and the backgroundColor is blue?
          if (width <= 250 && target.style.backgroundColor === "blue") {
            target.style.backgroundColor = "";
            observer.takeRecords(); // Clear the observer record queue.
          }

          // Is the width of element more than 250px?
          if (width > 250 && target.style.backgroundColor !== "blue") {
              target.style.backgroundColor = "blue";
              
              // Clear the observer queued records. FireFox will hang from recursion if we don't.             
              observer.takeRecords();
          }

          // If the width of the element is more than 300 then prevent the user from increasing the width.
          if (width > 300) {
            target.style.width = "300px";

            observer.takeRecords(); // We changed the style attribute we are observing, so clear the queue.
          }
        }
      });
    }
  }
})