It turns out that as long as I have one instance of it running, it doesn't error. Unfortunately it will only update one instance of itself. So when I have 2 of them, only one works which is alright for my use case. And since I am only sticking it in my top menu all I have left to do is figure out how to style it. Which so far, I am at a loss because no matter what I try, I can't seem to change the font for some reason.
On Tue, Jan 7, 2014 at 2:11 PM, andrew harrison < [email protected]> wrote: > 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.
