dojo.provide("dojox.html.styles"); // summary: // Methods for creating and minipulating dynamic CSS Styles and Style Sheets // // example: // | dojox.html.createStyle("#myDiv input", "font-size:24px"); // Creates Style #myDiv input, which can now be applied to myDiv, and // the inner input will be targeted // | dojox.html.createStyle(".myStyle", "color:#FF0000"); // Now the class myStyle can be assigned to a node's className (function(){ var dynamicStyleMap = {}; var pageStyleSheets = {}; var titledSheets = []; var styleIndicies = []; dojox.html.insertCssRule = function(/*String*/selector, /*String*/declaration, /*String*/styleSheetName){ // summary: // Creates a style and attaches it to a dynamically created stylesheet // arguments: // selector: // A fully qualified class name, as it would appear in // a CSS dojo.doc. Start classes with periods, target // nodes with '#'. Large selectors can also be created // like: // | "#myDiv.myClass span input" // declaration: // A single string that would make up a style block, not // including the curly braces. Include semi-colons between // statements. Do not use JavaScript style declarations // in camel case, use as you would in a CSS dojo.doc: // | "color:#ffoooo;font-size:12px;margin-left:5px;" // styleSheetName: ( optional ) // Name of the dynamic style sheet this rule should be // inserted into. If is not found by that name, it is // created. If no name is passed, the name "default" is // used. // var ss = dojox.html.getDynamicStyleSheet(styleSheetName); var styleText = selector + " {" + declaration + "}"; console.log("insertRule:", styleText) if(dojo.isIE){ // Note: check for if(ss.cssText) does not work ss.cssText+=styleText; console.log("ss.cssText:", ss.cssText) }else if(ss.sheet){ ss.sheet.insertRule(styleText, ss._indicies.length); }else{ ss.appendChild(dojo.doc.createTextNode(styleText)); } ss._indicies.push(selector+" "+declaration); return selector; // String } dojox.html.removeCssRule = function(/*String*/selector, /*String*/declaration, /*String*/styleSheetName){ // summary: // Removes a cssRule base on the selector and declaration passed // The declaration is needed for cases of dupe selectors // description: Only removes DYNAMICALLY created cssRules. If you // created it with dojox.html.insertCssRule, it can be removed. // var ss; var index=-1; for(var nm in dynamicStyleMap){ if(styleSheetName && styleSheetName!=nm) {continue;} ss = dynamicStyleMap[nm]; for(var i=0;i-1) { break; } } if(!ss){ console.log("No dynamic style sheet has been created from which to remove a rule."); return false; } if(index==-1){ console.log("The css rule was not found and could not be removed."); return false; } ss._indicies.splice(index, 1); if(dojo.isIE){ // Note: check for if(ss.removeRule) does not work ss.removeRule(index); }else if(ss.sheet){ ss.sheet.deleteRule(index); }else if(document.styleSheets[0]){ console.log("what browser hath useth thith?") // } return true; //Boolean } /* TODO dojox.html.modifyCssRule = function(selector, declaration, styleSheetName){ Not implemented - it seems to have some merit for changing some complex selectors. It's not much use for changing simple ones like "span". For now, simply write a new rule which will cascade over the first. // summary // Modfies an existing cssRule } */ dojox.html.getStyleSheet = function(/*String*/styleSheetName){ // summary: // Returns a style sheet based on the argument. // Searches dynamic style sheets first. If no matches, // searches document style sheets. // // argument: (optional) // A title or an href to a style sheet. Title can be // an attribute in a tag, or a dynamic style sheet // reference. Href can be the name of the file. // If no argument, the assumed created dynamic style // sheet is used. // try dynamic sheets first if(dynamicStyleMap[styleSheetName || "default"]){ return dynamicStyleMap[styleSheetName || "default"]; } if(!styleSheetName){ // no arg is nly good for the default style sheet // and it has not been created yet. return false; } var allSheets = dojox.html.getStyleSheets(); // now try document style sheets by name if(allSheets[styleSheetName]){ return dojox.html.getStyleSheets()[styleSheetName]; } // check for partial matches in hrefs (so that a fully //qualified name does not have to be passed) for ( var nm in allSheets){ if( allSheets[nm].href && allSheets[nm].href.indexOf(styleSheetName)>-1){ return allSheets[nm]; } } return false; //StyleSheet or false } dojox.html.getDynamicStyleSheet = function(/*String*/styleSheetName){ // summary: // Creates and returns a dynamically created style sheet // used for dynamic styles // // argument: // styleSheetName /* optional String */ // The name given the style sheet so that multiple // style sheets can be created and referenced. If // no argument is given, the name "default" is used. // if(!styleSheetName){ styleSheetName="default"; } if(!dynamicStyleMap[styleSheetName]){ if(dojo.doc.createStyleSheet){ //IE dynamicStyleMap[styleSheetName] = dojo.doc.createStyleSheet(); dynamicStyleMap[styleSheetName].title = styleSheetName; }else{ dynamicStyleMap[styleSheetName] = dojo.doc.createElement("style"); dynamicStyleMap[styleSheetName].setAttribute("type", "text/css"); dojo.doc.getElementsByTagName("head")[0].appendChild(dynamicStyleMap[styleSheetName]); console.log(styleSheetName, " ss created: ", dynamicStyleMap[styleSheetName].sheet); } dynamicStyleMap[styleSheetName]._indicies = []; } return dynamicStyleMap[styleSheetName]; //StyleSheet } dojox.html.enableStyleSheet = function(/*String*/styleSheetName){ // summary: // Enables the style sheet with the name passed in the // argument. Deafults to the default style sheet. // var ss = dojox.html.getStyleSheet(styleSheetName); if(ss){ if(ss.sheet){ ss.sheet.disabled = false; }else{ ss.disabled = false; } } } dojox.html.disableStyleSheet = function(styleSheetName){ // summary: // Disables the dynamic style sheet with the name passed in the // argument. If no arg is passed, defaults to the default style sheet. // var ss = dojox.html.getStyleSheet(styleSheetName); if(ss){ if(ss.sheet){ ss.sheet.disabled = true; }else{ ss.disabled = true; } } } dojox.html.activeStyleSheet = function(/*?String*/title){ // summary: // Getter/Setter // description: // If passed a title, enables a that style sheet. All other // toggle-able style sheets are disabled. // If no argument is passed, returns currently enabled // style sheet. // var sheets = dojox.html.getToggledStyleSheets(); if(arguments.length == 1){ //console.log("sheets:", sheets); dojo.forEach(sheets, function(s){ s.disabled = (s.title == title) ? false : true; //console.log("SWITCHED:", s.title, s.disabled, s.id); }); }else{ for(var i=0; i