[TW5] At which point does TW create the main container?

[Danielo Rodríguez]

Hello,

I want to know when TW creates the main div container. That with the class   tc-page-container-wrapper

I know it should be on certain core module, but I would like to know the exact involved modules and logic behind it. I can make a search for that class, but that does not ensures that I will find the full flow.

Many thanks.

[Danielo Rodríguez]

I just realized that I can access the page container wrapper through $tw.rootWidget.domNodes. Cool! I'm one step closer.

Regards

[Danielo Rodríguez]

At the end I'm using $tw.pageContainer

seems that all the Node creation stuff happens at render module of the core.

[Jeremy Ruston]

Hi Danielo

As you’ve discovered, it is indeed the startup module render.js that creates the page container node.

Best wishes

Jeremy

On 6 Oct 2015, at 12:44, Danielo Rodríguez <rdan...@gmail.com> wrote:

At the end I'm using $tw.pageContainer

seems that all the Node creation stuff happens at render module of the core.

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at http://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/bd355e56-fa8a-4c2f-bf13-7620a4e05fa8%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Tobias Beer]

Hi Danielo,

 

I want to know when TW creates the main div container. That with the class   tc-page-container-wrapper

This is all very interesting to understand ...at least, for me it is.
So, clearly, I have no wish to discourage discussion.

Nonetheless, I would invite you and others to use the TiddlyWikiDev group much more,

even if the (perceived) latency might be a bit higher (although I'm not sure it is).

I imagine all this tech-noise to seriously shy away those

who just want to use and learn more about how to use TiddlyWiki

and are overburdened by numerous dev threads on how it all works or how to extend it,

considering how leveraging the power of TiddlyWiki already can have quite a techy feel to it.

Sure, this will never be a mere "use the save-as button" discussion group,

but let's watch out for it to not sound too much like we're all using a console.

Thanks for considering,

— tb

[Danielo Rodríguez]

So, clearly, I have no wish to discourage discussion.

Nonetheless, I would invite you and others to use the TiddlyWikiDev group much more,

even if the (perceived) latency might be a bit higher (although I'm not sure it is).

I imagine all this tech-noise to seriously shy away those

who just want to use and learn more about how to use TiddlyWiki

and are overburdened by numerous dev threads on how it all works or how to extend it,

considering how leveraging the power of TiddlyWiki already can have quite a techy feel to it.

Sure, this will never be a mere "use the save-as button" discussion group,

but let's watch out for it to not sound too much like we're all using a console.

Thanks for considering,

Hello Tobias, you're right. 

But it is also hard for jeremy for checking on three different places, tw group, tw dev group and github. People not interested on a topic does not need to read it. Anyway, I understand what you say, and I agree with  you. 

But, I hope you don't mind if I make another question on this same thread.

Is there any tag similar to rawMarkup tag but placing the content outside the page container instead of the head section?

Regards

[Jeremy Ruston]

Hi Danielo

Hello Tobias, you're right. 

But it is also hard for jeremy for checking on three different places, tw group, tw dev group and github. People not interested on a topic does not need to read it. Anyway, I understand what you say, and I agree with  you. 

Posts to all three places come through to my inbox so I see them all.

Tobias is correct: development questions belong in the tiddlywikidev group, out of respect for newcomers who find them overwhelming. They also give a misleading impression that all TiddlyWiki users need to have developer skills.

But, I hope you don't mind if I make another question on this same thread.

Is there any tag similar to rawMarkup tag but placing the content outside the page container instead of the head section?

Not at the moment. Have a look at the template:

https://github.com/Jermolene/TiddlyWiki5/blob/master/core/templates/tiddlywiki5.html.tid

I’d consider extending it. In particular, it would be useful to have a decent mechanism for specifying meta tags.

Best wishes

Jeremy.

Regards

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at http://groups.google.com/group/tiddlywiki.

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/e445048a-19d7-47cf-ad89-2c48185f529f%40googlegroups.com.

[Danielo Rodríguez]

Posts to all three places come through to my inbox so I see them all.

Tobias is correct: development questions belong in the tiddlywikidev group, out of respect for newcomers who find them overwhelming. They also give a misleading impression that all TiddlyWiki users need to have developer skills.

Ok, both of you are right, :P

It is my fault because I am more or less lazy.

Then, Jeremy, If I place an element manually outside that template, and I trigger an event, Will it be cached by the root widget? I suppose the answer is yes, but I am not sure at all.

[Jeremy Ruston]

Hi Danielo

It is my fault because I am more or less lazy.

Then, Jeremy, If I place an element manually outside that template, and I trigger an event, Will it be cached by the root widget? I suppose the answer is yes, but I am not sure at all.

The root widget only catches widget messages, it doesn’t catch DOM events. If you create an element outside of the page container, and trigger an event from that DOM tree, then there’s nothing in the core that will catch that event.

Best wishes

Jeremy.

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at http://groups.google.com/group/tiddlywiki.

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/b2df0f40-2e85-43b4-9409-a73827ff76df%40googlegroups.com.

[Danielo Rodríguez]

The root widget only catches widget messages, it doesn’t catch DOM events.

That is the part that I knew

 

If you create an element outside of the page container, and trigger an event from that DOM tree, then there’s nothing in the core that will catch that event.

That is the answer I did not wanted to hear :P

What do you think that would be the best way to place a tiddler at the top of the page and hide all the rest of the elements? Including story river, sidebars and everything else.

Regards 

[Jeremy Ruston]

Hi Danielo

What do you think that would be the best way to place a tiddler at the top of the page and hide all the rest of the elements? Including story river, sidebars and everything else.

You can easily overlay the main page using a position: fixed div, just like the backdrop for the modals.

Best wishes

Jeremy

Regards 

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at http://groups.google.com/group/tiddlywiki.

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/5fc38cea-8ae0-4581-9f22-8f336e5b3e27%40googlegroups.com.

[Danielo Rodríguez]

Hello Jeremy

You can easily overlay the main page using a position: fixed div, just like the backdrop for the modals.

Now you mention the modals, that raised me an idea.

My first intention was to hide the whole  tc-page-container-wrapper div.

Then I realized that if I set it's css property display to none, then none of its children will be displayed. 

That is a problem for the UI elements that I want to "survive". Then I though about hiding all the children of the tc-dropzone div. 

That works well, but then I saw that the modals ( tc-modal-wrapper ) are positioned outside the dropzone div. And I am sure that they are able to send events both to the root widget and the navigator widget. Is that correct?

Maybe the best solution is to use the same approach as the modals does?

Regards

[Tobias Beer]

@Danielo,

I don't see why a widget should not be able to store a reference to its context somewhere, no matter where it resides. Can it not?

Best wishes,

— tb

[Danielo Rodríguez]

El martes, 6 de octubre de 2015, 21:53:12 (UTC+2), Tobias Beer escribió:

@Danielo,

I don't see why a widget should not be able to store a reference to its context somewhere, no matter where it resides. Can it not?

Yes, it is possible. The problem is that I don't know deep enough TW event mechanism (and JS event mechanism in general) to know  how to use it. So, even knowing how to store a reference to the root widget, I'm not sure about how to trigger an event.

Jeremy, I saw some very interesting functions on the core like $tw.utils.setStyle for managing animations. And the createTranscludewidget seems to be key in dom creation from wikitext.

Regards 

[BJ]

HI Danielo,
It is possible to write a widget that creates a dom element and attaches it outside of the page container - it can then listen for dom events - this is how tiddlyclip works:

var messageBox = doc.getElementById("tiddlyclip-message-box");
if(!messageBox) {
	messageBox = doc.createElement("div");
	messageBox.id = "tiddlyclip-message-box";
	messageBox.style.display = "none";
	doc.body.appendChild(messageBox);
}
// Attach the event handler to the message box
messageBox.addEventListener("tiddlyclip-save-file", onSaveFile,false);

and the onSaveFile() function generates messages.

Cheers
BJ

[Danielo Rodríguez]

El martes, 6 de octubre de 2015, 23:43:49 (UTC+2), BJ escribió:

HI Danielo,
It is possible to write a widget that creates a dom element and attaches it outside of the page container - it can then listen for dom events

Indeed. I know that I can listem for events the old normal way. But the problem is not only listening to events, but taking advantage of all the rendering capabilities that TW provides.

 

var messageBox = doc.getElementById("tiddlyclip-message-box");
if(!messageBox) {
	messageBox = doc.createElement("div");
	messageBox.id = "tiddlyclip-message-box";
	messageBox.style.display = "none";
	doc.body.appendChild(messageBox);
}
// Attach the event handler to the message box
messageBox.addEventListener("tiddlyclip-save-file", onSaveFile,false);

Your listener seems to be just a listener, without any DOM rendering. What I want is some interface that can be placed outside TW and survives hidding the whole TW container (tc-page-wrapper display none). This is not possible because all the widget tree will become "invisible"

But thank you very much for the detailed code, I'm sure I will make good use of it at some point.

 

 

and the onSaveFile() function generates messages.

What kind of messages exactly? Do you mean that it dispatch the messages to TW? 

[BJ]

On Wednesday, October 7, 2015 at 10:47:23 AM UTC+1, Danielo Rodríguez wrote:

El martes, 6 de octubre de 2015, 23:43:49 (UTC+2), BJ escribió:

HI Danielo,
It is possible to write a widget that creates a dom element and attaches it outside of the page container - it can then listen for dom events

Indeed. I know that I can listem for events the old normal way. But the problem is not only listening to events, but taking advantage of all the rendering capabilities that TW provides.

 

var messageBox = doc.getElementById("tiddlyclip-message-box");
if(!messageBox) {
	messageBox = doc.createElement("div");
	messageBox.id = "tiddlyclip-message-box";
	messageBox.style.display = "none";
	doc.body.appendChild(messageBox);
}
// Attach the event handler to the message box
messageBox.addEventListener("tiddlyclip-save-file", onSaveFile,false);

Your listener seems to be just a listener, without any DOM rendering. What I want is some interface that can be placed outside TW and survives hidding the whole TW container (tc-page-wrapper display none). This is not possible because all the widget tree will become "invisible"

The widget tree is not made invisible by setting display = none of the tc-page-wrapper, only its dom subtree is hidden.

To render child widgets outside  tc-page-wrapper you can use

this.renderChildren(messageBox,nextSibling);

[Danielo Rodríguez]

The widget tree is not made invisible by setting display = none of the tc-page-wrapper, only its dom subtree is hidden.

Can you expand a bit on that? I'm still trying to guess what the widget tree it's actually, and what does that implies in terms of rendering and DOM elements. In my tests, hiding the page wrapper hides everything.

 

To render child widgets outside  tc-page-wrapper you can use

That is very interesting! I never though about that!

 

this.renderChildren(messageBox,nextSibling);

That is of course inside a widget code right? So I have to write a plugin to be able to put stuff out of the page wrapper? 

Many thanks BJ

[BJ]

The Widget could be

/*\
title: $:/bj/modules/widgets/externalise.js
type: application/javascript
module-type: widget

externaliseWidget - 

\*/
(function(){

/*jslint node: true, browser: true */
/*global $tw: false */
"use strict";

var Widget = require("$:/core/modules/widgets/widget.js").widget;

var externaliseWidget = function(parseTreeNode,options) {
	this.initialise(parseTreeNode,options);
};

/*
Inherit from the base widget class
*/
externaliseWidget.prototype = new Widget();

/*
Render this widget into the DOM
*/
externaliseWidget.prototype.render = function(parent,nextSibling) {
		{
				var doc = document;
		// Inject the message box
		var outsidetree = doc.getElementById("tiddlyclip-message-box");
		if(!outsidetree) {
			outsidetree = doc.createElement("div");
			outsidetree.id = "tiddlyclip-message-box";
			outsidetree.style.display = "show";
			doc.body.insertBefore(outsidetree,doc.body.firstChild);
			//doc.body.appendChild(outsidetree);
		}
		// Attach the event handler to the message box
		//outsidetree.addEventListener("tiddlyclip-save-file", onSaveFile,false);
	};
	this.parentDomNode = parent;
	this.computeAttributes();
	this.execute();
	this.renderChildren(outsidetree,nextSibling);
};

/*
Compute the internal state of the widget
*/
externaliseWidget.prototype.execute = function() {
	// Get our parameters
    this.close=this.getAttribute("close");
    if (this.close) {
		this.addEventListeners([
			{type: this.close, handler: "handleEvent"}
		]);
	}
    this.open=this.getAttribute("open");
    if (this.open) {
		this.addEventListeners([
			{type: this.open, handler: "handleOpenEvent"}
		]);
	}
    // Construct the child widgets
	this.makeChildWidgets();
};

/*
Selectively refreshes the widget if needed. Returns true if the widget or any of its children needed re-rendering
*/
externaliseWidget.prototype.refresh = function(changedTiddlers) {
	var changedAttributes = this.computeAttributes();
	if(changedAttributes["close"] ) {
		this.refreshSelf();
		return true;
	}
	else {
		return this.refreshChildren(changedTiddlers);
	}
};

externaliseWidget.prototype.handleEvent = function(event) {
	$tw.pageContainer.setAttribute("hidden","true"); 
};

externaliseWidget.prototype.handleOpenEvent = function(event) {
	$tw.pageContainer.removeAttribute("hidden");
};
exports.externalise = externaliseWidget;

})();

use it like this

<$externalise close="bjm-closetree" open="bjm-opentree">
<$button>
<$action-sendmessage $message="bjm-closetree" $param=""/>
close tree!
</$button>
<$button>
<$action-sendmessage $message="bjm-opentree" $param=""/>
open tree!
</$button>
</$externalise>

[Danielo Rodríguez]

El miércoles, 7 de octubre de 2015, 15:06:41 (UTC+2), BJ escribió:

The Widget could be

That is absolutely awesome!!

Have you wrote that from scratch ??!! 

Some funny thing I have noticed is that it creates a new dom element each time the widget is displayed.

Seriously, man, you made my day. Thank you

[BJ]

Glad you like it.  I have written many widgets, so can cut and paste to create a new one very quickly - obviously this one needs some more work but it should get you started.


All the best BJ