Some TiddlyWiki CSS questions

[Scott_Sauyet]

@saqimtiaz

I would be inclined to let the state persist when the table is reopened within the same wiki session (without reloading the wiki).

I think that’s my own preference as well. But I’m not yet certain, probably because the current highlighting is so transient, that cross-tiddler loading behavior seems very far away.

@saqimtiaz

Partly this is because I dislike tying implementation details too strongly to the default TiddlyWiki UI. Imagine that you use a hook to reset/delete the temp tiddler holding the state when the tiddler holding the periodic table is closed from the story. Well, what if the periodic table was opened in a new window, or a modal, or in a custom layout without a story? All of a sudden the intended behaviour falls apart.

I don’t have enough experience with these modes of dealing with TW to understand the consequences. But thank you. I will look at this again when it comes time to code it. Of course if I don’t try to make the behavior too transient, I guess I can just take advantage of this.

But would using qualify to name this temporary tiddler alleviate some of those concerns?

@saqimtiaz

Note that where consistency in user experience is important, I avoid using the $:/state prefix quite often due the fact that these tiddlers are by default persisted in single file wikis but not in node.js wikis.

Ahh, I knew there were things that worked this way, but I didn’t know any details. $:/state prefixed? Got it. Thanks.

@saqimtiaz

As an aside, I can imagine a custom layout option for the periodic table being handy in some situations. The lowest hanging fruit is giving the periodic table tiddler the tag $:/tags/Layout and the fields name and description. If you use any global macros, you will need to import those as well.

I haven’t yet worked with custom layouts, but I’ve read the docs a few times. I figure I’ll get to this at some point, as the default layout makes this pretty tight on smaller screens. But that’s months down the road, I imagine.

@CodaCoder

For example, the following applies style only when your tiddler is present in the Sidebar:

.tc-sidebar-scrollable [data-tiddler-title=my-title] {
  ...
}

Oh, that’s a good point. I’ve been inspecting to find those classes for other reasons, but hadn’t thought about using them for this.

Of course if someone is trying to squeeze the periodic table into the sidebar, they make have other issues.

[CodaCoder]

@Scott_Sauyet

Of course if someone is trying to squeeze the periodic table into the sidebar, they make have other issues.

Periodic bedside table?

[Scott_Sauyet]

After saying this, I tried it and it works surprisingly well!

Proof: https://crosseye.github.io/TW5-demos/2023-03-26a. (Edit: oops – url fixed!)

[saqimtiaz]

@Scott_Sauyet

But would using qualify to name this temporary tiddler alleviate some of those concerns?

My concern is more so around having a reliable means to reset the periodic table each time it is displayed - if so desired - rather than having the state of multiple instances be independent. Considering that the table could be shown in many different contexts and by different means, finding a reliable means to reset the state when opening or closing the table would be difficult. For example, if you were to tie the reset of the state of the closing of the tiddler in the story, that wont work if the periodic table is shown outside of the story.

[Scott_Sauyet]

@saqimtiaz

My concern is more so around having a reliable means to reset the periodic table each time it is displayed - if so desired - rather than having the state of multiple instances be independent.

Ah, yes, a world I know nothing about. I haven’t even glanced at this part of it. I haven’t yet connected any activity on the closing of tiddlers to any behavior, nor have I looked to see how it’s done. I guess your response means that it’s more complex than I’d hoped. I guess that makes sense.

But I think I’ll simply take your advice here and not try to remove this state except as happens automatically on reload.

As always, thank you very much for your thoughtful advice!

[Yaisog]

I hope this is not too unrelated, but I didn’t want to open a new thread for it…

It may be noteworthy that the style refresh ignores refresh throttling (e.g. via the throttle.refresh field or for tiddlers in the $:/temp/volatile namespace). In wikis with long refresh times due to their size or the complexity of operations, this could be leveraged to keep a very responsive highlight / selection mechanism going: Using e.g. keyboard navigation in a list or mouse events one could set the value of a throttled tiddler whose contents is used in a stylesheet tiddler to style the so-selected tiddler (via e.g. the nth-of-type pseudo CSS class). Because the tiddler is throttled, the full refresh will not initiate until $:/config/Drafts/TypingTimeout has passed, but the CSS will update nearly instantaneous. So it would be possible to quickly navigate through a longer list, or have the selection follow the mouse via mouseenter events without significant delays, even if otherwise refresh may take a while.

To see what I mean, click here to open the share edition with some tiddlers.

“Tiddler 4” slows everything down by repeating a search a lot of times. But, you can still alternately press the “light” and “dark” buttons quickly to change the background color without “Tiddler 4” ever being refreshed. Only after not clicking for the length of the timeout (here set to one second), will you have to wait for its filter to be recalculated. The buttons set “$:/temp/Tiddler3” which also has the throttle.refresh field and which is used in the stylesheet tiddler “Tiddler 2”. You can see for yourself in the story view of “Tiddler 2” how long it takes to update the displayed color value after you stop clicking.

[saqimtiaz]

@Yaisog

It may be noteworthy that the style refresh ignores refresh throttling (e.g. via the throttle.refresh field or for tiddlers in the $:/temp/volatile namespace).

Note that this is currently a bug rather than by design and due to get patched. However, we may also be able to introduce a configurable filter that determines refresh throttling. Recommend that any further discussion about refresh throttling be in a dedicated topic or on the Github issue.

[Yaisog]

@saqimtiaz

Note that this is currently a bug rather than by design and due to get patched.

I guess I’ll chime in on GitHub, then.

[Mohammad]

@Scott_Sauyet

Does this work for you?

Yes, thank you!

@Scott_Sauyet

But when I try that, I don’t like the extra spacing it introduces between title and subtitle.

You are right! you can also change the site subtitle as below:

periodic table and related tools {{$:/plugins/ScottSauyet/Chemistry/Elements!!version}}

The same can be done with site title.

By the way your current design works for me and one can simply see what is the version of current Chemistry wiki.

[Scott_Sauyet]

@Mohammad

You are right! you can also change the site subtitle as below:

periodic table and related tools {{$:/plugins/ScottSauyet/Chemistry/Elements!!version}}

The same can be done with site title.

Yes, that’s what I tried, both with site title and subtitle (using {{About!!version}} instead, as one day soon I’ll stop versioning the plugin along with the main site.) But either way I did it introduced additional white space between the title and subtitle that I didn’t like. I didn’t spend much time investigating why, though, and perhaps a fix would be simple. I’d rather have it on the subtitle than where it is now.

[Alvaro]

@Scott_Sauyet

Question 1

Are rendered <style> tags are somehow scoped to only apply to the tiddler they’re in? If so, how is that done?

You can use data-tiddler-title attribute. For example, the following is a snippet you could use it in every tiddler that you want.

<style>
[data-tiddler-title="<<currentTiddler>>"] {
border-color: red;
}
</style>

You could use the variable currentTiddler or the literal title and combine with other selectors.

[data-tiddler-title="New Tiddler"] .myclass { ... }

[Springer]

Nice! I think the final “shipping” version of your PT has to include the jokes. Maybe even as easter eggs…

At any rate, if you offer a sidebar view of the PT, a plugin like resizable-sidebar might be super-helpful. Drag to resize dynamically…