On the current prerelease TW is a super cool thing that Jeremy has coded. When you close the “Hire the founder of TiddlyWiki” tiddler it turns up in the sidebar and then, when you click on the link it disapears and then the tiddler opens again! magic
How is this done? Is it standard TW coding or some Jeremy magic?
Alex
Thanks Birthe,
How did you find this
Alex
I found the same tiddlers just by searching for “Hire” on the main search and the AdvancedSearch > System tab. I didn’t respond because I didn’t have time to read them carefully to see if there is something else required.
Note that this is not a plugin that is just configured with a particular tiddler. It might be interesting to to extract a plugin from it, though.
Thanks Scott,
What I still can’t understand in how when the tiddler in the river is closed a link to it is created in the sidebar
Alex
I also thought this was a clever bit of code, so I looked into it. Here’s how it works:
Hire Jeremy Sidebar Segment, which is tagged with $:/tags/SideBarSegment. This means this segment is always present in the sidebar. However…Hire Jeremy Sidebar Segment, we can see that all the content is wrapped in a div: <div class="yellow-note-sidebar-wrapper">
$:/HireJeremy/styles:.yellow-note-sidebar-wrapper {
overflow-y: hidden;
max-height: {{{ [[$:/StoryList]contains[Hire the founder of TiddlyWiki]then[0em]else[15em]] }}};
transition: max-height 600ms ease-in-out;
}
The max-height is the important element here: when “Hire the founder of TiddlyWiki” is present in the story river (as determined by $:/StoryList), the height of the wrapper <div> is set to 0, hiding its contents. Conversely, when you close the tiddler, the max-height of the sidebar element returns to 15em. And the transition rule is responsible for animating the transition.
So the sidebar sticky note is always present from an HTML perspective — it’s just set to zero-height when the paired tiddler is open.
Thank you Emily… and thank you Jermey!
Wow!
So what we have here us filters working in CSS!
I’ve been away for a while … this is quite mindblowing to me
Alex
Yes, wikitext like filters, variables, transclusions, and widgets work in stylesheets unless they have the static stylesheet type: text/css. You can see these techniques in use in the core stylesheets, too: try the filter search [all[shadows+tiddlers]tag[$:/tags/Stylesheet]search:text[<$]] to see all the stylesheets in your wiki or on TW-com that contain at least one widget!
Jack reads the tiddler title
Are animated gifs still cool these days?
Alex
I abstracted this into a reusable component that lets you chose one tiddler for this behavior. When that tiddler is in the story river, it looks like a large pinned sticky note. When it gets closed, a smaller pinned sticky note appears in the sidebar, containing just its title. When that’s clicked, the tiddler is launched back into the story river.
With Jeremy’s blessing, I’m sharing it here.
If you want to test it on tiddlywiki.com and Jeremy’s version is running, you’ll need to first delete two tiddler that would conflict:
Then download the following, drag it to your wiki, and choose to Import:
pincard.json (992.9 KB)
You should see the demo sticky card in the sidebar. That’s just throwaway for demo purposes. But if you click on it, the sidebar segment will collapse, as @etardiff described, and the main tiddler will open in the story river. And closing that, the sidebar segment will expand again.
To choose your own tiddler for display, edit the tiddler $:/_/pincard/config/title and set the text to the name of your tiddler. That’s it. That’s the only configuration for this version. It’s easy to imagine much more.
Besides the Demo tiddler, this consists of
$:/_/pincard/config/title. This was mentioned above’ it’s used to decide which (single) tiddler gets this treatment.
$:/_/pincard/content/sidebar-segment. This is the renamed version of Hire Jeremy Sidebar Segment, and has the same behavior Emily described above. The only changes were to remove the hard-coded link to the appropriate tiddler and use a dynamic reference, based on $:/_/pincard/config/title, and to replace the hard-coded text with that title.
$:/_/pincard/screenshot. This is in there just to give the Demo Tiddler something hefty. Then I changed my mind and buried it under a <details> element. It’s not important to the functioning of this tool, and I’ll remove it if I continue to build this out.
$:/_/pincard/styles. This is where the bulk of the work is happening, and Emily described it well above. There is a tiddler title, whose name is checked in the the wikitext conditions determining which parts of the CSS are active. My only change was to make that tiddler name dynamic, using the value from $:/_/pincard/config/title.
$:/_/pincard/tempates/top-pin. In the original version, the markup that was used for the little pin itself was in the tiddler we’re displaying. But that makes no sense in a more general setting. So here, instead, we put it in a standalone ViewTemplate to appear above the body. It is guarded by a check of whether we are the in tiddler indicated by $:/_/pincard/config/title. If we were to redo Jeremy’s initial version, we would need only remove that (now unnecessary) line from the top of the sidebar, and restore some CSS I removed that was specific to his tiddler.
There is one bug that I don’t know how to squash. In Jeremy’s version, the tiddler in the story river has a small animation on hover: the card loses its small tilt and grows slightly. This one doesn’t have the smooth animation, but just jumps. The transition styles are all there, but it seems as though the classic storyview after performing its animation into the story river, sets the tiddler view’s style to include transition: none. Because this is an element style, it’s overriding the value in the stylesheet. I haven’t been able to determine how Jeremy overcame it. (Any hints, @jeremyruston?)
Jeremy suggested that it might be worthwhile to write a tutorial showing how this works, to be included in the main site. I’ve long been a proponent of adding Tutorial and Explanation documentation to complement the Reference and How-to documentation that already exists. (See https://diataxis.fr/ for more about that breakdown.) So I’ve agreed to look into doing so. That’s a much longer-term project, though, as we don’t really have any tutorial examples to start from.
This UI is quite intrusive, intentionally so. While I might well finish this up, and create a simple plugin out of it, I would suggest that its usage should be extremely rare.
I’m inclined to see this as a core bug. The same problem can be induced on tiddlywiki.com. The animation works when the “Hire Jeremy” tiddler is listed in $:/DefaultTiddlers because transition: none is not applied at startup, only when a new tiddler is inserted into the story river. Therefore, closing the “Hire Jeremy” tiddler and then re-opening it via the sidebar banner will result in the animation being broken in exactly the way you describe.
I remember running into this problem before. I think we may be able to fix it by having the classic story view apply a CSS class with the property transition: none instead of directly applying it. That should make it possible to override that CSS class with the desired transition properties.
Thank you. That was driving me nuts!
I’ve only glanced at that animation code; I don’t really understand how it works. But I’m surprised to see the combination of JS animation techniques with CSS ones. That is, I don’t ever recall setting the transition property with JS. Doing so seems odd. At some point, I’ll try to read this more closely to understand. But quickly, could we simply remove style.transition rather than setting it to “none”?
Yes, this minimal fix seems to solve it:
--- a/core/modules/storyviews/classic.js
+++ b/core/modules/storyviews/classic.js
@@ -47,16 +47,16 @@ ClassicStoryView.prototype.insert = function(widget) {
// Reset the margin once the transition is over
setTimeout(function() {
$tw.utils.setStyle(targetElement,[
- {transition: "none"},
{marginBottom: ""}
]);
+ targetElement.style.removeProperty('transition');
},duration);
// Set up the initial position of the element
$tw.utils.setStyle(targetElement,[
- {transition: "none"},
{marginBottom: (-currHeight) + "px"},
{opacity: "0.0"}
]);
+ targetElement.style.removeProperty('transition');
$tw.utils.forceLayout(targetElement);
// Transition to the final position
$tw.utils.setStyle(targetElement,[
I will try to create a PR this weekend. I’ll have to look to see where else this change should be applied. (Hints welcome!)
One question: do we stick with this direct DOM method or do we want to have a $tw.utils function for this, which might be called like:
+ $tw.utils.removeStyle(targetElement, 'transition');
Or possibly removeStyles, which takes an array of style property names?
The following files are probably worth taking a look at in term of replacing setting a property as none or 0, with removeProperty:
You may also need to implement removeProperty in TW_Style in the fake DOM implementation:
Addendum: this has area has surfaced as problematic in the past as well: [IDEA] Animate the story river when opening/closing the sidebar · Issue #4765 · TiddlyWiki/TiddlyWiki5 · GitHub
Thank you. I had assumed that I’d have to check the other storyviews, but hadn’t thought of the others. That’s a great start. I’ll dig more deeply as well.
This is not surprising. Overwriting CSS with JS strikes me as likely to cause problems when used in conjunction with pure CSS solutions.
I’d like to also look at Jeremy’s suggestion:
but I think it might be fairly difficult to do well when dealing with all the different specificities we would have to consider.