EventX-css-event

• Allow programmer to listen for css style change event.
• JQuery css style event.

Table of content

• Installation
• Events
• Why we need this ???
• Examples
  • stylechange event
  • stylechange:<...> event
  • inlinestylechange event
  • inlinestylechange:<...> event
• Features
  • On
  • Off
  • Rename Event (Solve event name conflict)

Install

Browser

<script src="https://cdn.rawgit.com/Chomtana/EventX-css-event/f96312db/dist/eventx-css.js"></script>

NPM

npm install eventx-css-event

Events

Name	Description	Example
stylechange	Listen to inline and media screen style change	Click
stylechange:<...>	Listen to inline and media screen style change (Only style <...>)	Click
inlinestylechange	Listen to inline style change	Click
inlinestylechange:<...>	Listen to inline style change (Only style <...>)	Click
mediastylechange	Listen to media style change
mediastylechange:<...>	Listen to media style change (Only style <...>)

Why we need this library ???

Problem statement

I want to alert "Style ... changed from ... to ..." when some css style of #ex is changed, alert "Style ... added with value ..." when some css style of #ex is added and alert "Style ... removed with old value ..." when some css style of #ex is removed (only consider inline style).

Before using this library

const target = $("#ex");

const ob = new MutationObserver(mutationsList => {
  for (var mutation of mutationsList) {
    if (mutation.target == target[0]) {
      var curr = mutation.target.style;
      var currattr = mutation.target.getAttribute("style").replace(/\/\*(.|\n)*?\*\//g, "").split(';');
      var old = mutation.oldValue ? mutation.oldValue.replace(/\/\*(.|\n)*?\*\//g, "").split(';') : [];
      var styleName = null;
      var oldStyleValue = null;
      var newStyleValue = null;
      if (old.length > 0 && old[old.length - 1].trim() == "") old.pop();
      if (currattr.length > 0 && currattr[currattr.length - 1].trim() == "") currattr.pop();

      if (old.length == currattr.length) {
        // style change
        for (var _style of old) {
          var style = _style.split(':');
          style[0] = style[0].trim();
          style[1] = style[1].trim();
          if (curr[style[0]] != style[1]) {
            styleName = style[0];
            oldStyleValue = style[1];
            newStyleValue = curr[style[0]];
            break;
          }
        }
      } else if (old.length < currattr.length) {
        // add
        var _old = {};
        for (var _style of old) {
          var style = _style.split(':');
          style[0] = style[0].trim();
          style[1] = style[1].trim();

          _old[style[0]] = style[1];
        }

        for (var _style of currattr) {
          var style = _style.split(':');
          style[0] = style[0].trim();
          style[1] = style[1].trim();
          if (!_old[style[0]]) {
            styleName = style[0];
            oldStyleValue = "";
            newStyleValue = curr[style[0]];
            break;
          }
        }
      } else {
        // remove
        var _curr = {};
        for (var _style of currattr) {
          var style = _style.split(':');
          style[0] = style[0].trim();
          style[1] = style[1].trim();

          _curr[style[0]] = style[1];
        }

        for (var _style of old) {
          var style = _style.split(':');
          style[0] = style[0].trim();
          style[1] = style[1].trim();
          if (!_curr[style[0]]) {
            styleName = style[0];
            oldStyleValue = style[1];
            newStyleValue = "";
            break;
          }
        }
      }

      if (styleName) {
        if (oldStyleValue && newStyleValue) alert("Style "+styleName+" changed from "+oldStyleValue+" to "+newStyleValue);
        else if (!oldStyleValue && newStyleValue) alert("Style "+styleName+" added with value "+newStyleValue);
        else if (oldStyleValue && !newStyleValue) alert("Style "+styleName+" removed with old value "+oldStyleValue);
      }

    }
  }
});

var config = { attributes: true, attributeOldValue: true, attributeFilter: ["style"]};
ob.observe(target[0],config);

Note: Above example require JQuery

View and play in JSFiddle

After using this library

$("#ex").on("inlinestylechange",function(e) {

  if (e.oldStyleValue && e.newStyleValue) alert("Style "+e.styleName+" changed from "+e.oldStyleValue+" to "+e.newStyleValue);
  else if (!e.oldStyleValue && e.newStyleValue) alert("Style "+e.styleName+" added with value "+e.newStyleValue);
  else if (e.oldStyleValue && !e.newStyleValue) alert("Style "+e.styleName+" removed with old value "+e.oldStyleValue);

});

Note: Above example require JQuery

View and play in JSFiddle

Difference

• First and final block obviously shorter.
• Closer to english language.
• Remember easier.

Without JQuery

evx.on(document.getElementById("ex"),"inlinestylechange",function(e) {

  if (e.oldStyleValue && e.newStyleValue) alert("Style "+e.styleName+" changed from "+e.oldStyleValue+" to "+e.newStyleValue);
  else if (!e.oldStyleValue && e.newStyleValue) alert("Style "+e.styleName+" added with value "+e.newStyleValue);
  else if (e.oldStyleValue && !e.newStyleValue) alert("Style "+e.styleName+" removed with old value "+e.oldStyleValue);

});

Yeah, still simple and easy.

Examples

• stylechange event
• stylechange:<...> event
• inlinestylechange event
• inlinestylechange:<...> event

Features

You can find list of event name here

On

$("#ex").on("<event name>",function(e) { console.log(e,this); ... });

evx.on(<target HTMLElement>,"<event name>",function(e) { console.log(e,this); ... });

• View all JQuery coding style at http://api.jquery.com/on/
• e is a ResizeObserverEntry object
• this = target element (Warning: not working if you use arrow function)
• For more information about ResizeObserverEntry run console.log(e) in event handler or read document

Off

$("#ex").off("<event name>");

evx.off(<target HTMLElement>,"<event name>",[handler (Optional)])

• View all JQuery coding style at http://api.jquery.com/off/

Rename Event (Solve event name conflict)

evx.renameEvent("<event name>","<newname>")

Create new event type

Read at EventX-core

Remove event type

Read at EventX-core