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 Edited MutationRecord object
• this = target element (Warning: not working if you use arrow function)
• For more information about Edited MutationRecord run console.log(e) in event handler or read here

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

Edited MutationRecord

Property Name	Type	Description
target	HTMLElement	Target element which style has been changed
styleName	String	Name of style that has been changed
oldStyleValue	String	Value of that style before changed
newStyleValue	String	Value of that style after changed
changetype	String	"inline" if inline change or "media" if media change

License

Released under the MIT License Copyright © 2018 Chomtana