Hi Jan Things like your grid view are intended to be implemented as custom storyviews. The storyview object is responsible for inserting and removing tiddlers from the story river, and for animating navigations to new tiddlers.
There are several examples of storyviews in the core repo: https://github.com/Jermolene/TiddlyWiki5/tree/master/core/modules/storyviews <https://github.com/Jermolene/TiddlyWiki5/tree/master/core/modules/storyviews> https://github.com/Jermolene/TiddlyWiki5/tree/master/plugins/tiddlywiki/stacked-view <https://github.com/Jermolene/TiddlyWiki5/tree/master/plugins/tiddlywiki/stacked-view> In your case, you’d need some custom CSS to switch the story river to using your grid layout. You can scope that CSS by the way that the div.tc-page-container is given a class like tc-page-view-classic or tc-page-view-zoomin. Look at the classic storyview for an example of a navigation animation. Best wishes Jeremy. > On 26 Apr 2020, at 09:32, Saq Imtiaz <[email protected]> wrote: > > In simple terms: > > macros -> text substitution or defining a variable > widgets -> everything else > > So you need a widget. And widgets that cause an action, rather than display > something, need to be triggered, typically by a button, checkbox, select etc. > These are called action widgets and the method that contains the logic for > what happens when a widget is triggered is invokeAction. > > Use this widget as a starting point: > > /*\ > type: application/javascript > module-type: widget > > > \*/ > (function(){ > > /*jslint node: true, browser: true */ > /*global $tw: false */ > "use strict"; > > var Widget = require("$:/core/modules/widgets/widget.js").widget; > > var AddToHistoryWidget = function(parseTreeNode,options) { > this.initialise(parseTreeNode,options); > }; > > /* > Inherit from the base widget class > */ > AddToHistoryWidget.prototype = new Widget(); > > /* > Render this widget into the DOM > */ > AddToHistoryWidget.prototype.render = function(parent,nextSibling) { > this.computeAttributes(); > this.execute(); > }; > > /* > Compute the internal state of the widget > */ > AddToHistoryWidget.prototype.execute = function() { > this.historyTitle = > this.getAttribute("$history",this.getVariable("tv-history-title")); > this.newTitle = this.getAttribute("$title"); > }; > > /* > Refresh the widget by ensuring our attributes are up to date > */ > AddToHistoryWidget.prototype.refresh = function(changedTiddlers) { > var changedAttributes = this.computeAttributes(); > if(changedAttributes["$historyTitle"] || changedAttributes["$title"]) { > this.refreshSelf(); > return true; > } > return this.refreshChildren(changedTiddlers); > }; > > /* > Invoke the action associated with this widget > */ > AddToHistoryWidget.prototype.invokeAction = function(triggeringWidget,event) { > this.wiki.addToHistory(this.newTitle,{},this.historyTitle); > return true; // Action was invoked > }; > > exports["action-addtohistory"] = AddToHistoryWidget; > > })(); > > - execute() sets up the attributes via the parameters given to the widget, I > suspect you don't need any. > - refresh() handles refreshing when the parameters have changed, probably > also not needed. Jus call refreshSelf() and return true > - tweak invokeAction to perform the scroll. > > Hope this helps. > Saq > > On Sunday, April 26, 2020 at 10:05:13 AM UTC+2, Jan wrote: > Hi Saq, > I think you got me...I do not really know what the difference is. > I think all the js I did so far was macros. > I finally should learn some of the basic concepts of programming js in TW ;-) > Thanks for giving me a hint to start. > > Do I need a widget or can I perform that action with a macro. > > Jan > > > Am 26.04.2020 um 01:31 schrieb Saq Imtiaz: >> You have written a macro, not a widget. >> >> Look at one of the action widgets and write an action-totop widget, e.g: >> https://github.com/Jermolene/TiddlyWiki5/blob/master/core/modules/widgets/action-deletetiddler.js >> >> <https://github.com/Jermolene/TiddlyWiki5/blob/master/core/modules/widgets/action-deletetiddler.js> >> >> The invokeAction method is where the logic goes for what happens when the >> widget is triggered. >> >> >> >> On Saturday, April 25, 2020 at 8:40:56 PM UTC+2, Jan wrote: >>> Hi, >>> I made a Landing-Page which uses its own Pagetemplate and hides the >>> storyriver: https://szen.io/Grid/ <https://szen.io/Grid/> >>> The grid can be restructured by setting a tag to filter content. >>> When a user triggers this action, it would be great to scroll to the top of >>> the Webpage automatically. >>> How can I do this? >>> >>> Best wishes Jan >>> >> Hi, >> >> I tried to build a widget, but so far it wont work. >> >> >> /*\ >> title: $:/core/modules/macros/totop.js >> type: application/javascript >> module-type: macro >> Macro that scrolls to the top >> \*/ >> >> (function(){ >> /*jslint node: true, browser: true */ >> /*global $tw: false */ >> "use strict"; >> >> /* >> Information about this macro >> */ >> exports.name <http://exports.name/> = "totop"; >> exports.params = [ >> ]; >> /* >> Run the macro >> */ >> exports.run = function() { >> var totopp = window.scrollTo({ top: 0, behavior: 'smooth' }); >> totopp; >> } >> })(); >> >> -- >> 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 view this discussion on the web visit >> https://groups.google.com/d/msgid/tiddlywiki/3e58e2ff-7a57-4efd-8f04-0ba6ed5431de%40googlegroups.com >> >> <https://groups.google.com/d/msgid/tiddlywiki/3e58e2ff-7a57-4efd-8f04-0ba6ed5431de%40googlegroups.com?utm_medium=email&utm_source=footer>. > > > -- > 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] > <mailto:[email protected]>. > To view this discussion on the web visit > https://groups.google.com/d/msgid/tiddlywiki/e8e9ec93-295d-48a1-931b-d92ec0e096ca%40googlegroups.com > > <https://groups.google.com/d/msgid/tiddlywiki/e8e9ec93-295d-48a1-931b-d92ec0e096ca%40googlegroups.com?utm_medium=email&utm_source=footer>. -- 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 view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/531AD09D-09A8-4169-8618-7DE463505BC0%40gmail.com.
