With enthusiastic jumping up and down screaming I did it, I got the clock
to work. Well, sort of. Using <$clock/> in a tiddler but I'm hacking here
and I know I'm doing it wrong. It works until I try to open the tiddler
that I put the <$clock/> into and then it throws an error: Unable to set
property 'innerHTML' of undefined or null reference. Sitting here with that
sinking feeling. Which I guess would make sense because if you take the
clock out of production, then the widget isn't able to set the property
because it isn't there anymore. I have no Idea how to gracefully get it to
stop if I want to edit it. Anyone?
/*\
title: $:/core/modules/widgets/clock.js
type: application/javascript
module-type: widget
A widget to display a clock
\*/
(function(){
/*jslint node: true, browser: true */
/*global $tw: false */
"use strict";
var Widget = require("$:/core/modules/widgets/widget.js").widget;
var ClockWidget = function(parseTreeNode,options) {
this.initialise(parseTreeNode,options);
};
/*
Inherit from the base widget class
*/
ClockWidget.prototype = new Widget();
/*
Render this widget into the DOM
*/
ClockWidget.prototype.render = function(parent,nextSibling) {
this.parentDomNode = parent;
this.computeAttributes();
this.execute();
var domNode = this.document.createElement('p');
domNode.setAttribute("id","tw-clockbutton");
parent.insertBefore(domNode,nextSibling);
this.renderChildren(domNode,null);
this.domNodes.push(domNode);
};
/*
Compute the internal state of the widget
*/
ClockWidget.prototype.execute = function() {
var myVar=setInterval(function(){
var d=new Date();
var t=d.toLocaleTimeString();
document.getElementById("tw-clockbutton").innerHTML=t;
},1000);
};
/*
Selectively refreshes the widget if needed. Returns true if the widget
or any of its children needed re-rendering
*/
ClockWidget.prototype.refresh = function(changedTiddlers) {
var changedAttributes = this.computeAttributes(),
hasChangedAttributes = $tw.utils.count(changedAttributes) > 0;
if(hasChangedAttributes) {
// Update our attributes
this.assignAttributes(this.domNodes[0]);
}
return this.refreshChildren(changedTiddlers) || hasChangedAttributes;
};
exports.clock = ClockWidget;
})();
On Tue, Jan 7, 2014 at 6:37 AM, Jeremy Ruston <[email protected]>wrote:
> Hi Andrew
>
> At least one problem is the line:
>
> var Widget = require("$:/core/modules/widgets/clock.js").widget;
>
> It should be:
>
> var Widget = require("$:/core/modules/widgets/widget.js").widget;
>
> There is also a deeper problem with the way that you're updating the DOM.
> In TW5 the DOM is only updated in response to changes in the state of
> tiddlers in the store that trigger a refresh cycle. Using DOM IDs in the
> way that you've done would fail if there were multiple instances of the
> widget on screen at once, for instance.
>
> An alternative way of thinking about your requirements might be to
> implement a plugin containing a browser-startup module that sets up a timer
> to update a system tiddler $:/CurrentTime with the current time every
> second. You can then transclude that tiddler whereever you need to display
> the current time.
>
> Best wishes
>
> Jeremy
>
>
>
>
>
> On Tue, Jan 7, 2014 at 6:48 AM, Stephan Hradek
> <[email protected]>wrote:
>
>>
>>
>> Am Dienstag, 7. Januar 2014 07:01:45 UTC+1 schrieb infernoape:
>>
>>> I am still trying to make my first widget, which is still a clock button
>>> for my top menu. So here is what I have so far. I put the following in a
>>> tiddler with title: $:/core/modules/widgets/clock.js, Type:
>>> application/javascript and added a filed module-type: widget. In another
>>> tiddler I put <$clock> but all still get Undefined widget 'clock'. What am
>>> I missing?
>>>
>>> I did not check your code, but:
>>
>> 1. Did you save and reload? Widgetcode can only be activated when the
>> wiki is loaded.
>> 2. Additionally you need to put <$clock*/*> or <$clock>*</$clock>*
>>
>> --
>> You received this message because you are subscribed to the Google Groups
>> "TiddlyWikiDev" 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/tiddlywikidev.
>> For more options, visit https://groups.google.com/groups/opt_out.
>>
>
>
>
> --
> Jeremy Ruston
> mailto:[email protected]
>
> --
> You received this message because you are subscribed to the Google Groups
> "TiddlyWikiDev" 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/tiddlywikidev.
> For more options, visit https://groups.google.com/groups/opt_out.
>
--
You received this message because you are subscribed to the Google Groups
"TiddlyWikiDev" 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/tiddlywikidev.
For more options, visit https://groups.google.com/groups/opt_out.
