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>
On Wednesday, October 7, 2015 at 12:57:20 PM UTC+1, Danielo Rodríguez wrote:
>
> 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
>
--
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 [email protected].
To post to this group, send email to [email protected].
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/c116970e-b031-4a46-b7b0-c958a7fefa29%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
