Skip to content

Instantly share code, notes, and snippets.

@zvictor
Created September 26, 2014 09:18
Show Gist options
  • Save zvictor/b676dd9b04e162546f92 to your computer and use it in GitHub Desktop.
Save zvictor/b676dd9b04e162546f92 to your computer and use it in GitHub Desktop.
FilterStyle: Display/hidden elements by js according to class selectors
function FilterStyle(name, show) {
"use strict";
// @see http://stackoverflow.com/a/8630641/599991
// @see http://www.happycode.info/create-css-classes-with-javascript/
this.name = name;
this.show = show;
if(show !== undefined)
this.update();
}
FilterStyle.prototype.update = function (show) {
"use strict";
if(show !== undefined)
this.show = show;
var declaration = 'display: '+((this.show) ? 'initial !important' : 'none' );
if(this.rule)
this.rule.style.cssText = declaration;
else
this.rule = this.createRule(this.name, declaration);
};
FilterStyle.prototype.findStyleSheet = function () {
"use strict";
if (!document.styleSheets || document.getElementsByTagName("head").length === 0)
return;
if (document.styleSheets.length > 0)
for (var i = 0; i < document.styleSheets.length; i++) {
if (document.styleSheets[i].disabled)
continue;
var media = document.styleSheets[i].media;
var mediaType = typeof media;
if (mediaType === "string" && (media === "" || (media.indexOf("screen") !== -1)))
return document.styleSheets[i];
else if (mediaType === "object" && (media.mediaText === "" || (media.mediaText.indexOf("screen") !== -1)))
return document.styleSheets[i];
}
};
FilterStyle.prototype.createStyleSheet = function (){
"use strict";
var styleSheetElement = document.createElement("style");
styleSheetElement.type = "text/css";
document.getElementsByTagName("head")[0].appendChild(styleSheetElement);
return this.findStyleSheet();
};
FilterStyle.prototype.createRule = function (selector, style) {
"use strict";
var styleSheet = this.findStyleSheet();
if (styleSheet === undefined)
styleSheet = this.createStyleSheet();
var media = styleSheet.media;
var mediaType = typeof media;
if (mediaType === "string") {
for (var i = 0; i < styleSheet.rules.length; i++)
if (styleSheet.rules[i].selectorText.toLowerCase() === selector.toLowerCase()) {
styleSheet.rules[i].style.cssText = style;
return styleSheet.rules[i];
}
styleSheet.addRule(selector, style);
return undefined;
} else if (mediaType === "object") {
for (var i = 0; i < styleSheet.cssRules.length; i++) {
var rule = styleSheet.cssRules[i];
if (rule.selectorText && rule.selectorText.toLowerCase() === selector.toLowerCase()) {
rule.style.cssText = style;
return rule;
}
}
var index = styleSheet.insertRule(selector + " { " + style + " }", styleSheet.cssRules.length);
return styleSheet.cssRules.item(index);
}
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment