eventx-css-event

v0.1.1

Published

4 years ago

Allow programmer to listen for css style change event (You can also use JQuery to listen for css style change event).

Downloads

0High
0Medium
0Low

chomtana

eventx css css-change css-events style style-events style-change event jquery

EventX-css-event

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

Table of content

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

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