Is there a solution for triggering scrolling to to Top ( when you are not using the storyriver. )

[Jan]

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

[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 = "totop";
   exports.params = [
   ];
/*
Run the macro
*/
   exports.run = function() {
   var totopp = window.scrollTo({ top: 0, behavior: 'smooth' });
   totopp;
}
})();

[Birthe C]

Thomas Elmigers Linktotop

[Mat]

Maybe

trigger
...
<$set name=top filter="""[list[$:/StoryList]first[]]""" >
<$action-navigate $to=<<top>>/>
</$set>

<:-)

[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

The invokeAction method is where the logic goes for what happens when the widget is triggered.

[Jan]

Hi Birthe, hi  Mat,
my problem is, that the grid does not use storylist or storyriver, they are not even displayed. I could try the navigator widget...I am  not optimistic with that.
FIrst I will use Saq`s apporach.

Jan

--
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 tiddlywiki+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/d9fff9ba-caca-4cc5-8819-b504a30a09c1%40googlegroups.com.

[Jan]

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

--
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 tiddlywiki+...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/3e58e2ff-7a57-4efd-8f04-0ba6ed5431de%40googlegroups.com.

[Mat]

my problem is, that the grid does not use storylist or storyriver, they are not even displayed. I could try the navigator widget...I am  not optimistic with that.

But isn't it all in a tiddler, $:/Plugins/JJ/Grid/Gridlist  - ?

I think that this would work, which doesn't rely on a storylist:

<$action-navigate $to="$:/Plugins/JJ/Grid/Gridlist"/>

But, sure, since you know js then do that. I was just pointing to what I believe is a wikitext solution.

<:-)

[Mat]

But isn't it all in a tiddler, $:/Plugins/JJ/Grid/Gridlist  - ?

I think that this would work, which doesn't rely on a storylist:

<$action-navigate $to="$:/Plugins/JJ/Grid/Gridlist"/>

OK, I just tried adding it in a button to one of your tiddlers and you're right it does NOT work.

<:-)

[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

To unsubscribe from this group and stop receiving emails from it, send an email to tiddl...@googlegroups.com.

[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.

To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/e8e9ec93-295d-48a1-931b-d92ec0e096ca%40googlegroups.com.

[Jan]

Hi Mat,
gridlist uses some functions of TW like the list- , reveal- and buttonwidget but inserts the content into its own pagetemplate.
That is why all the storyriver-related functions do not work.
It would be great to be able to navigate to ids or classes.

Jan

--
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 tiddlywiki+...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/d8affd86-4198-48b0-82ec-ee69f6570097%40googlegroups.com.

[Jan]

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...

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/531AD09D-09A8-4169-8618-7DE463505BC0%40gmail.com.

[Julio Peña]

Hello Jan and all,

Maybe this can help or give you an idea? Take a look:

Cultures d'Avenir

Regards,

Julio

[Jan]

Salut Julio,
nice site, but it is not so easy to find the key to your backstage-area to see how it is done...
As I said things are a little complicated because I do use another storyview.

Best wishes Jan

--
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 tiddlywiki+...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/3f6e41f2-bae4-4eb3-989e-477dd04c55a8%40googlegroups.com.

[Julio Peña]

Hello Jan

Oh yes your storyview is different...

Let me see...oh yes forgot about that one...

I believe if you use the alt+s it should open up the sidebar.

I found that out by accident...I don't even know if they are maintaining that site any longer,

but found it interesting relating to your dilemma.

I hope it helps some.

Hopefully you can get something out of it.

On Sunday, April 26, 2020 at 2:09:51 PM UTC-4, Jan wrote:

Salut Julio,
nice site, but it is not so easy to find the key to your backstage-area to see how it is done...
As I said things are a little complicated because I do use another storyview.

Best wishes Jan


Am 26.04.2020 um 17:13 schrieb Julio Peña:

Hello Jan and all,

Maybe this can help or give you an idea? Take a look:

Cultures d'Avenir

Regards,

Julio

--
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 tiddl...@googlegroups.com.

[Birthe C]

Det er Thomas Elmigers Linktotop-standalone. Desuden anvendes her et Font Awesome icon

[Jan]

Hi Jeremy,
 think it would be a good idea to turn the grid-plugin into a storyview to be compatible with the mechanisms of TW.
But I still do not really understand the storyview mechanism... My container is called .gridpage (off course I could easily switch it to tc-page-view-grid). I fear the whole way grid-items are constructed differs too much from the tiddler-display in the storyriver. In fact they are just buttons generated by a list of tiddlers. The idea is that they enable you to  choose different storylists and switch to the classic-view.

So I am still wondering whether I can adapt all this.
Best wishes Jan

Am 26.04.2020 um 11:07 schrieb Jeremy Ruston:

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/531AD09D-09A8-4169-8618-7DE463505BC0%40gmail.com.

[TonyM]

Jan

The original thread refers to top of page. If you simply want to move to the top of the page surely there exists a simple html method like hidden anchor at the topand a link to that.

If on the other hand you are referring to tiddler navigation it is different.

Have you looked throught the page and view template process in tiddlywiki. It should be quite simple to display the existing story in the part of the page you choose. If I am on track let me know and I will present some research notes on this.

Regards
Tony

[Jan]

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;

})();

----------------------------------------------------------------------------------------

To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/e8e9ec93-295d-48a1-931b-d92ec0e096ca%40googlegroups.com.

[Jan]

Hi Tony,
you are on track (and I would be willing to take a short cut...) my
problem is, the navigation shall be invoked together with other actions
when clicking a button.
It would be very practical to a widget scrolling to a desired id or
class that can be included into a button.

thanks for your help,
Jan

[Saq Imtiaz]

Open the browser developer tools and the console. Do you see any error messages when loading your wiki? I would expect you to.

Your refresh method is not valid JavaScript. You can actually just remove it entirely. Remove the refresh method. It will inherit from the widget base class and that will be enough in this case. Make sure the tiddler has the correct type for JavaScript and module-type widget.

If it still doesn't work post your new code and the code for the button being used to trigger this. I'm currently not at a computer so that's the best I can do for now, hope that helps.

[TonyM]

Jan,

I am not sure if I have your requirment clear but...

If you designed the page layout you can place an anchor at the top and use a html <a href tag that jumps to that anchor. No need to use widgets even macros. 

I just did test this on tiddlywiki.com

Try this in a tiddler tagged $:/tags/AboveStory

<h2 id="top">Top of page!</h2>

And this in a tiddler tagged $:/tags/BelowStory

<a href="#top">Go to top</a>
or

<a href="#top">{{$:/core/images/chevron-up}}</a>

Or place them somewhere on your own page layout

On tiddlywiki.com Open a pile of tiddlers and scroll to the bottom and click Top of page!

I believe their may be a way you can make the top of page anchor not visible.

Regards

Tony 

[Jan]

Hallo Saq,
heureka, it works.
For anyone who wants to use it, you can find it here:
https://szenio.de/Grid/#Scrolltotop

Thanks a lot Saq!

PS.:
Encouraged by this success it would be great generalize the function
enabeling the widget to scroll to an id that is given as a param.
Perhaps we manage that also.

[Hubert]

Hello,

For anyone who wants to use it, you can find it here:

https://szenio.de/Grid/#Scrolltotop

It works great, thanks for sharing Jan!

It would be nice to have this action implemented on opening a tiddler in the zoomin story view and as part of any other single tiddler mode(s) that could be introduced in the future. But that's a discussion for a different thread.

Thanks again!

Hubert

[Peter Buyze]

Jan,

forgive my ignorance, but I dragged your plug-in to my wiki expecting to see that button somewhere, but I don't. What do I need to do?

--

Securely sent with Tutanota. Get your own encrypted, ad-free mailbox:

https://tutanota.com

28 Apr 2020, 11:15 by hube...@gmail.com:

--

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 tiddlywiki+...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/8a099897-c647-4868-9cb4-faad6a3574e9%40googlegroups.com.

[Jan]

Hi,
you need the $:/Plugins/JJ/Grid/scrolltotop.js,  a restart and a button invoking the widget like

<$button>scroll to top
<$action-scrolltotop/>
</$button>

Yours Jan

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/M6-AoNj--3-2%40tutamail.com.

[Jan]

Hello,
for this behaviour, you can use the normal action-navigate widget and action-setfield setting the storyview to zooming in one button.

cheers Jan

--
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 tiddlywiki+...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/8a099897-c647-4868-9cb4-faad6a3574e9%40googlegroups.com.