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:
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/5EA5F966.7020206%40googlemail.com.

Reply via email to