Hi Saq,
many thanks for your gentle explanation.
Following your recipe I made what you can find below:
It does not crash the Wiki or show the red sign, which is already great
for a first approach;-) , but so far the button says that the widget is
not defined:
Can you give me another hint?
Best wishes
Jan
----------------------------------------------
Button:
<$button>scroll to top
<$action-scrolltotop/>
</$button>
----------------------------------------------
|/*\
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 ScrollToTopWidget = function(parseTreeNode,options) {
this.initialise(parseTreeNode,options);
};
/*
Inherit from the base widget class
*/
ScrollToTopWidget.prototype = new Widget();
/*
Render this widget into the DOM
*/
ScrollToTopWidget.prototype.render = function(parent,nextSibling) {
this.computeAttributes();
this.execute();
};
/*
Compute the internal state of the widget
*/
/*
Refresh the widget by ensuring our attributes are up to date
*/
ScrollToTopWidget.prototype.refresh = refreshSelf() {
return true;
}
return this.refreshChildren(changedTiddlers);
};
/*
Invoke the action associated with this widget
*/
ScrollToTopWidget.prototype.invokeAction = function(triggeringWidget,event) {
window.scrollTo({ top: 0, behavior: 'smooth' });
return true; // Action was invoked
};
exports["action-scrolltotop"] = ScrollToTopWidget;
})();|
----------------------------------------------------------------------------------------
Am 26.04.2020 um 10:32 schrieb Saq Imtiaz:
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] <javascript:>.
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/5EA603E0.1040603%40googlemail.com.
