Have ideas to improve npm?Join in the discussion! »

eventx-css-event

0.1.1 • Public • Published

EventX-css-event

Build Status

  • 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)])

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

Install

npm i eventx-css-event

DownloadsWeekly Downloads

6

Version

0.1.1

License

MIT

Unpacked Size

191 kB

Total Files

17

Last publish

Collaborators

  • avatar