/**
* @module managers/styles-manager
* @description This module builds hard-coded styles for use in module classes based on project JSON styles
* @requires common/view
*/
define([
"common/view"
],
function (view)
{
// ---------------------------------------------------------------
//
// PStyles Manager
//
// ---------------------------------------------------------------
var Styles = function ()
{
console.log(" * <styles>");
this.oView = view;
this.ui = {
};
this.def = {
ID_CUSTOM_STYLES: "custom_styles"
};
this.init();
};
Styles.prototype =
{
// ______________________________________________________________
// init
/**
* init
* @description Initializes class
* @fires assignListeners()
* @memberOf module:managers/styles-manager
* @instance
*/
init: function()
{
this.assignListeners();
},
// ______________________________________________________________
// assignListeners
/**
* assignListeners
* @description Assigns listeners to events used in this class.
* @listens EVENT_MODEL_READY
* @memberOf module:managers/styles-manager
* @instance
*/
assignListeners: function()
{
var self = this;
if (typeof window.oModel === "undefined" || window.oModel.jConfig === -1){
window.tEvent.addListener("EVENT_MODEL_READY", function(evt, data)
{
// clean up for new page
self.onJsonLoaded(window.oModel.jConfig);
});
} else {
self.onJsonLoaded(window.oModel.jConfig);
}
},
// --------------------------------------------------------------
// HELPERS
// --------------------------------------------------------------
// ______________________________________________________________
// outputStyleRules
/**
* outputStyleRules
* @description Returns to the console.log the styles created
* @fires console.log()
* @memberOf module:managers/styles-manager
* @instance
*/
outputStyleRules: function(styleSheet) {
console.log(" * <styles.outputStyleRules>", styleSheet);
for (var i = 0; i < styleSheet.cssRules.length; i++){
console.log(" - " + styleSheet.cssRules[i].cssText);
}
},
// ______________________________________________________________
// createStyleSheet
/**
* createStyleSheet
* @description Creates style tag and appends it to the document header
* @memberOf module:managers/styles-manager
* @instance
*/
createStyleSheet: function() {
// Create the <style> tag
var style = document.createElement("style");
style.setAttribute("id", this.def.ID_CUSTOM_STYLES);
// Add a media (and/or media query) here if you'd like!
// style.setAttribute("media", "screen")
// style.setAttribute("media", "only screen and (max-width : 1024px)")
// WebKit hack :(
style.appendChild(document.createTextNode(""));
// Add the <style> element to the page
document.head.appendChild(style);
return style.sheet;
},
// ______________________________________________________________
// buildCustomStyles
/**
* buildCustomStyles
* @description Builds classes for stylesheet. Each color get a class for text, border and fill
* @param {Object} classData - Style class object data from project JSON styles
* @memberOf module:managers/styles-manager
* @instance
*/
buildCustomStyles: function(classData) {
var self = this;
// create stylesheet
var styleSheet = this.createStyleSheet();
var clTarget,
st;
for (var clType in classData) {
clTarget = classData[clType];
if (clType === "font" && clTarget !== ""){
styleSheet.addRule("@font-face", "font-family: " + clTarget.split(".")[0] + ";" + "src: url('" + window.oModel.def.PATH_ASSETS + "css/fonts/"+ clTarget + "');");
styleSheet.addRule(".custom-font", "font-family: '" + clTarget.split(".")[0] + "'; san-sarif;" );
} else {
for (var cl in clTarget){
switch(clType){
case "colors":
this.def[cl] = clTarget[cl];
styleSheet.addRule("." + cl + "--text", "color: " + clTarget[cl] + ";");
styleSheet.addRule("." + cl + "--border", "border-color: " + clTarget[cl] + ";");
styleSheet.addRule("." + cl + "--fill", "background-color: " + clTarget[cl] + ";");
break;
case "moduleClasses":
for (var prop in clTarget[cl]){
if (prop !== "id"){
st += prop + ": " + this.def[clTarget[cl][prop]] + ";";
}
}
styleSheet.addRule("." + cl, st);
break;
}
}
}
}
var htmlStr = "";
for (var i = 0; i < styleSheet.cssRules.length; i++){
if (typeof styleSheet.cssRules[i] !== "undefined"){
htmlStr += styleSheet.cssRules[i].cssText;
}
}
$("#" + this.def.ID_CUSTOM_STYLES).html(htmlStr);
this.outputStyleRules(styleSheet);
},
// --------------------------------------------------------------
// EVENTS
// --------------------------------------------------------------
// ______________________________________________________________
// onJsonLoaded
/**
* onJsonLoaded
* @description When project JSON is loaded process styles
* @param {Object} jData - JSON data
* @fires buildCustomStyles()
* @memberOf module:managers/styles-manager
* @instance
*/
onJsonLoaded: function(jData) {
this.buildCustomStyles(jData.styles);
}
};
var oStyles = new Styles();
return (oStyles);
});