8398c9048d
code was modified slightly, so the code differs from the original downloadable 1.9.5 version
343 lines
No EOL
9.9 KiB
JavaScript
Executable file
343 lines
No EOL
9.9 KiB
JavaScript
Executable file
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<ss._indicies.length;i++){
|
|
if(selector+" "+declaration == ss._indicies[i]){
|
|
index = i;
|
|
break;
|
|
}
|
|
}
|
|
if(index>-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<sheets.length;i++){
|
|
if(sheets[i].disabled == false){
|
|
return sheets[i];
|
|
}
|
|
}
|
|
}
|
|
return true; //StyleSheet or Boolean - FIXME - doesn't make a lot of sense
|
|
}
|
|
|
|
dojox.html.getPreferredStyleSheet = function(){
|
|
// summary
|
|
// Returns the style sheet that was initially enabled
|
|
// on document launch.
|
|
|
|
//TODO
|
|
}
|
|
|
|
|
|
|
|
|
|
dojox.html.getToggledStyleSheets = function(){
|
|
// summary:
|
|
// Searches HTML for style sheets that are "toggle-able" -
|
|
// can be enabled and disabled. These would include sheets
|
|
// with the title attribute, as well as the REL attribute.
|
|
// returns:
|
|
// An array of all toggle-able style sheets
|
|
// TODO: Sets of style sheets could be grouped according to
|
|
// an ID and used in sets, much like different
|
|
// groups of radio buttons. It would not however be
|
|
// according to W3C spec
|
|
//
|
|
if(!titledSheets.length){
|
|
var sObjects = dojox.html.getStyleSheets();
|
|
for(var nm in sObjects){
|
|
|
|
if(sObjects[nm].title){
|
|
//console.log("TITLE:", sObjects[nm].title, sObjects[nm])
|
|
titledSheets.push(sObjects[nm]);
|
|
}
|
|
}
|
|
}
|
|
return titledSheets; //Array
|
|
}
|
|
|
|
|
|
dojox.html.getStyleSheets = function(){
|
|
// summary:
|
|
// Collects all the style sheets referenced in the HTML page,
|
|
// including any incuded via @import.
|
|
//
|
|
// returns:
|
|
// An hash map of all the style sheets.
|
|
//
|
|
// TODO: Does not recursively search for @imports, so it will
|
|
// only go one level deep.
|
|
//
|
|
if(pageStyleSheets.collected) {return pageStyleSheets;}
|
|
|
|
var sheets = dojo.doc.styleSheets;
|
|
//console.log("styleSheets:", sheets);
|
|
dojo.forEach(sheets, function(n){
|
|
var s = (n.sheet) ? n.sheet : n;
|
|
var name = s.title || s.href;
|
|
if(dojo.isIE){
|
|
// IE attaches a style sheet for VML - do not include this
|
|
if(s.cssText.indexOf("#default#VML")==-1){
|
|
|
|
|
|
if(s.href){
|
|
// linked
|
|
pageStyleSheets[name] = s;
|
|
|
|
}else if(s.imports.length){
|
|
// Imported via @import
|
|
dojo.forEach(s.imports, function(si){
|
|
pageStyleSheets[si.title || si.href] = si;
|
|
});
|
|
|
|
}else{
|
|
//embedded within page
|
|
pageStyleSheets[name] = s;
|
|
}
|
|
}
|
|
|
|
}else{
|
|
//linked or embedded
|
|
pageStyleSheets[name] = s;
|
|
pageStyleSheets[name].id = s.ownerNode.id;
|
|
dojo.forEach(s.cssRules, function(r){
|
|
if(r.href){
|
|
// imported
|
|
pageStyleSheets[r.href] = r.styleSheet;
|
|
pageStyleSheets[r.href].id = s.ownerNode.id;
|
|
}
|
|
});
|
|
|
|
}
|
|
|
|
});
|
|
|
|
//console.log("pageStyleSheets:", pageStyleSheets);
|
|
|
|
|
|
pageStyleSheets.collected = true;
|
|
return pageStyleSheets; //Object
|
|
}
|
|
|
|
|
|
})(); |