Login Register

theme (ie, class="tundra") but not on body

I've got an application that is using dijit Editors - I'm declaring these programmatically and setting class:'tundra' in my js build statement. While this styles the editor itself according to the tundra theme, it does not properly style any drop-down buttons (ie, the createLink plugin). looking at the generated HTML I see that the divs that contain the drop-down are appended to the bottom of the html page, outside of any containers but inside body. As such, only by setting can I get these divs (that define the drop-down buttons) styled according to the tundra theme. However, I cannot do this as my application has its own css class that needs to be applied to body (and the class is dynamically changed on different events when, for example, clicking a tab causes the background to change). One way I see around this is to copy all of the tundra css code I need (for styling dropdown buttons) and pasting it in as many body classes I have defined in my app's css - this seems like an absurd and incredibly inelegant and inefficient solution, though, and I'd really like to avoid having to do this. I can't have a container inside of body with class="tundra" as the drop-down gets appended outside of any container (but inside of body). One way I see to fix this would be to append the drop-down inside the editor itself, so whatever class is applied to the editor is applied to the drop-downs - this would work if you had body class="mytheme" as well if you had a container div just around the editor that was class="tundra" (or if the editor was defined programmatically as class:'whatever') but I'm assuming there is a reason it is currently appending the drop-down buttons to the bottom of the page? I'd appreciate any advice on how people worked around this - it seems absurd to have to apply dojo's theme class to the entire body of my html page when I am just using that class to style specific dijits - it has nothing to do with the general look and feel of the application as a whole. Thanks in advance.

not an answer

thanks for the link, but that isn't a fix. he suggests,

I placed a little script in the body of my page and the calendar works. I didn't have to modify the body tag in my page template and I don't see any problems with my look and feel. Here is my code.

var theme = 'tundra';
if(!dojo.hasClass(dojo.body(),theme))
{
        dojo.addClass(dojo.body(),theme);
}

all that does is programmatically set body class="whatever"; i need to have my body class="something" and cannot have it set equal to tundra or another theme. this fix simply resets my body class, which then destroys the look and feel of my site. Not sure if you meant something else with this link, but that is the only "fix" I saw, and it isn't a fix at all

I pointed it out...

...because it is a known issue with a bug ticket attached to it, and the question was brought up recently--not necessarily a fix but a definite answer to your question.

cool enough, figured something out

no worries, i looked at that thread again and saw the bug ticket related to it...

i managed to figure something out - although it doesn't solve the primary issue re the bug ticket (that the dialog won't be a child of the - for example - toolbar that creates it) it does solve the css theme issue.

add the following lines to the following files

dijit/Dialog.js:

...

onOpen: function(/*Object*/ pos){
	// summary: called when dialog is displayed
        // add the following:
        if (this.theme){
		var greatNode = this.containerNode.parentNode.parentNode.parentNode;
		greatNode.innerHTML = '
' + greatNode.innerHTML + '
'; } ...

dijit/_editor/Plugins/LinkDialog.js (or whatever plugin that uses a TooltipDialog)

...

constructor: function(){
	var _this = this;
	var messages = dojo.i18n.getLocalization("dijit._editor", "LinkDialog", this.lang);
	this.dropDown = new dijit.TooltipDialog({
		title: messages.title,
		execute: dojo.hitch(this, "setValue"),
		onOpen: function(){
			_this._onOpenDialog();
			this.theme = _this._getEditorTheme();  // ADD THIS
			dijit.TooltipDialog.prototype.onOpen.apply(this, arguments);
		},

...

_getEditorTheme: function(){
	return this.editor.class;	
			
},

...

Then so long as you define the editor with class="theme" (or programmatically with class: 'theme') any TooltipDialogs created by plugins will get wrapped in a <div class="theme"> ... </div> block. Again, this doesn't deal with the major issue in the bug ticket, but it is at least a fix for the css class problem arising in my app (or any app where the body needs to be a different class than the dojo theme).

thanks again for the link

update

realized that fix wasn't quite doing it - in changing innerHTML it'll destroy the editable functions of the buttons. instead, in Dialog.js don't change onOpen but add the following to orient:

if (this.theme){ this.containerNode.parentNode.parentNode.parentNode.parentNode.className = this.theme + ' ' + this.containerNode.parentNode.parentNode.parentNode.parentNode.className; }

and in LinkDialog or whatever plugin, instead of adding an internal function and calling it, you can actually just do:

this.theme = _this.editor.class;