0.1.1 • Published 6 years ago
eventx-css-event v0.1.1
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
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
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
Remove event type
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