How to create a storyview (similar to classic)

, ,
1

Hello Talk Tiddlywiki, : )
I’m trying to create a storyview very similar to the classic one, but I couldn’t do it. I tried to copy and import the classic storyview and then edit it, but it didn’t work.

  • Why I’m trying to create a new storyview and what features I would like it to have:

    When I browse and search, I usually open many tabs in the background so as to know what I need to read next, but without interrupting the reading of the source.
    But when I’m on TiddlyWiki I’m not always on the browser and so I can’t open new tabs. (And even when I am, it’s not ideal, because the edit I could make on a different tab wouldn’t translate to the others) So for the moment I’m stuck having to scroll back to the tiddler I was initially reading.

    A new storyview could (I think) easly solve the problem. A storyview that is the same as the classic storyview, but one that doesn’t jump to the last open tiddler, but instead remains on the tiddler I’m currently reading, so I can scroll down to read the opened tiddlers after I’m done.
I think I could figure out how to do the change (this I should be able to do, although if someone has already done something similar an input would be appreciated) But what I don't understand it's how to start. I haven't found anywhere information on how to create a new storyview.

Tell me if I need to provide any other info, thanks in advance.

2

If you CTRL-click a link, it opens the tiddler, but doesn’t scroll to the position. This also works if you click the sidebar Table of content.

There are some layouts, that allow a multi column view, if your screen is big enough.
Search for “multi column layout”

3

This could be useful, not exactly what I’m looking for, (I’d like to have something that can also work on mobile or whitout having to use the keyboard) but I probably use this method some times. Didn’t know this, thank you.
As for the multi column layouts, sadly I never really enjoyed them. But it really could be a solution for other users

4

So you mean “open in background”, that would be helpful.

I think what CTRL-click do, can be wrapped into a view toolbar button.

5

Could you modify http://tw5breadcrumbs.tiddlyspot.com/ to meet your needs? it creates tabs of opened tiddlers but does navigate to last open in current form.

6

I think that’s a valid issue. I’ll create a GitHub issue for that one. [IDEA] TW on mobile should hava a function to mimik CTRL-click on links without a scroll action · Issue #7141 · TiddlyWiki/TiddlyWiki5 · GitHub

7

Returning to this topic I found out that I didn’t understand correctly your reply, now that I do, I must say that it could solve the problem if I manage to make what you suggested. I still have to find out how does Ctrl-click works in Tiddlywiki. Thank you

P.S. If by chance someone knows already where I could find how Ctrl-click works (e.g. what commands does it uses…) Please tell me, because for now i’m still searching. If you don’t already know, don’t bother, I don’t want to waste your time

8

I think this is a browser feature, try it on any links and it will open in a new tab.

You could use javascript to simulate a ctrl + click, here’s a proof of concept:

<iframe srcdoc="""
  <button onclick='simulateCtrlClickOnLink("https://www.example.com");'>Click me</button>
  <script>
function simulateCtrlClickOnLink(url) {
  var a = document.createElement('a');
  a.href = url;
  a.target = '_blank';
  a.rel = 'noopener noreferrer';
  document.body.appendChild(a);

  var event = new MouseEvent('click', {
    ctrlKey: true
  });
  a.dispatchEvent(event);

  document.body.removeChild(a);
}

  </script>
""">
</iframe>

And here’s what it does:

  1. Create a new a element using the document.createElement() function.
  2. Set the href attribute of the a element to the URL of the link you want to open.
  3. Set the target attribute of the a element to "_blank".
  4. Set the rel attribute of the a element to "noopener noreferrer".
  5. Append the a element to the document.body element.
  6. Use the dispatchEvent() method of the a element to dispatch a click event with the ctrlKey property set to true.
  7. Remove the a element from the document.body element.

https://demos.tiddlyhost.com/#Open%20a%20link%20in%20a%20new%20tab

I managed to create a macro/button that open the current tiddler in a new tab, check it out:

https://demos.tiddlyhost.com/#:openInNewTab%20[[open%20current%20tiddler%20in%20a%20new%20tab%20button]]

There are probably lots of ways to improve this but I’m not a JS expert so hopefully someone else can improve this code !

Javascript (in a tiddler with the field module-type set to macro):

exports.name = "openInNewTab";

exports.params = [
    {name: "url"}
];

exports.run = function(url) {
  var a = document.createElement('a');
  a.href = url;
  a.target = '_blank';
  a.rel = 'noopener noreferrer';

  a.dispatchEvent(new MouseEvent('click', {
    ctrlKey: true
  }));
};

wikitext:

\define clickactions(url) <<openInNewTab "$(url)$">>

<$let url={{{ #:[{!!title}format:titlelist[]]+[join[]] }}}>
<$button actions=<<clickactions>>>Open</$button>
</$let>

Backup your wiki before trying, I’m not sure if it’s totally safe to use or not

EDIT: sadly this doesnt work on chrome :confused:

9

I thank you for the reply, it’s well done and the explanation is good too. But sadly this is not what i’m looking for. What i’m trying to achive is something that works in only one tab. Basically when I want to open a link, I want it to be opened in the storyview, but not brought into focus. But I think the code you wrote could be useful in some cases, if you want you could make a new topic so what you wrote it is not wasted here

10

Sobriety,

What platform (and maybe also what browser) are you using? Ctrl-click is windows-speak (maybe other platforms too, not sure).

I’m on a mac, and the “open link without scrolling to it” shortcut is cmd-click, not ctrl-click.

-Springer

11

I’m on Windows, usually on firefox or TiddlyDesktop, but what I’d want is something that could work on mobile or without keyboard combinations. It’s not Ctrl-click per se that i’m looking for but rather the command it uses to open a link without scrolling/focusing on the new tiddler. (If there is one, but it’s not something i can’t live without, if you don’t know already, don’t bother)

12

Other discussions have occurred looking at mobile interfaces and an alternative to ctrl-click, but this looks like it deserves a new topic.

  • The Quickest and easiest solution would be to provide a button designed to open but not navigate to the tiddler for use on mobile.
13

The discussion seems to keep veering off from the question. If I may be so bold as to restate what Sobriety is looking for, I believe what’s being requested is a technique to write a replacement story river that on click of a tiddler link opens the tiddler but does not scroll to it.

Is that correct?

I’m too inexperienced to offer an actual answer. I looked around a bit, though, and found navigateSuppressNavigation. You might find the answer by an advanced (shadows) search for that term. But this might be entirely off the mark. Good luck!

14

Basically when I want to open a link, I want it to be opened in the storyview, but not brought into focus

You can do this with this code :

<$button tag="a" class="tc-tiddlylink tc-tiddlylink-resolves" actions="""
<$action-navigate $to="Your tiddler" $scroll="no"/>
""">
Open the tiddler but do not scroll
</$button>
15

Is there a way to make it so all links – from the story river or the sidebar – act this way?

16

Yes, you will need to create a new viewtemplate and use the EventCatcherWidget to intercept the scroll message emitted from the links

EDIT: Message catcher, not event catcher

17

The core navigation will need to be changed, but it may be quicker and easier to modify each list used to navigate such as the open, recent tabs.

As @telumire said event catcher and possibly message catcher widget allow you to trap clicking on links, however since the ctrl-click opens the tiddler without navigating (Also in Recent tab etc…) perhaps its a matter of changing the short cut, or the default response.

18

As I understand the original question, the idea is to make a version such that the default behavior for clicking is to open the new Tiddler somewhere below the current one (at the very bottom, or just below current, @Sobriety?) but not to scroll to it. I probably shouldn’t have mentioned the sidebar, since @Sobriety didn’t discuss it, and there are several possibilities for desired behavior here.

19
  • There is no location mentioned for the links except inside the current tiddler.
  • But if we are only talking about links in tiddlers to other tiddlers I believe we can change it.

Since tabs have being mentioned, Browser tabs at least perhaps BJ’s Story tabs is the answer to make tiddlywiki internal tabs for all open in the story, when Using the Zoomin Story view you only see one at a time but all the opened ones are across the top as tabs. This does not match @Sobriety’s request but may be much of the way there from a usability perspective.

  • @Sobriety if you try this suggestion and still to want links to open, let me know and I will try and solve it.
20

I’m new to TalkTiddlyWiki, should I create a new topic?

I wanted to change the topic title to better reflect what I was looking for (instead of the current one, namely what I initially thought could have been an easy fix i.e. a new storyview) But I think I can’t change the title anymore.

Yes you understood correctly. It doesn’t matter if the new tiddler is open at the bottom or not (even if I had to choose I’d say at the bottom, but little changes) What matters is that there is no scroll to focus

it’s totally fine. On the contrary, I don’t want to monopolize the issue, if interesting ideas arise from the initial question, I can only welcome them.

I think the solution is here, and it’s close, now I’ll do some tests. I’ll update this topic if I find a solution