Created
September 26, 2014 09:18
-
-
Save zvictor/b676dd9b04e162546f92 to your computer and use it in GitHub Desktop.
FilterStyle: Display/hidden elements by js according to class selectors
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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