Hi Saq, Hi Jeremy,
thank you two for this valuable help.
Saq, your explanationon the difference between macros and widgets is
very helpfull. And Jeremy, I guess it is most usefull to turn the grid
into a storyview. I realize that a lot of things I did in TW are
workarounds for this because I did not understand that concept.
I guess I will have to do some learning.
best wishes Jan
PS: Sorry if this takes some time, my coding is squeezed between work
and parental duties...
Am 26.04.2020 um 11:07 schrieb Jeremy Ruston:
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/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]
<mailto:[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/
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]
<mailto:[email protected]>.
To view this discussion on the web visit
https://groups.google.com/d/msgid/tiddlywiki/531AD09D-09A8-4169-8618-7DE463505BC0%40gmail.com
<https://groups.google.com/d/msgid/tiddlywiki/531AD09D-09A8-4169-8618-7DE463505BC0%40gmail.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/5EA56854.4090101%40googlemail.com.
