Read More... function

[Springer]

@session

is there a way to get a “read more” function? so a way to structure a tidder in an introduction /summery and the rest of a text?

I was imagining something like what we see in many interfaces for reviews, or Reddit, etc., where by default any tiddler (or any tiddler with a certain class or tag, say) initially shows only the first few lines, with a “More…” button. Maybe there’s even an alpha gradient fade at bottom, so viewer easily discerns that there’s more “below the fold”.

Honestly, I would like to rework/clone the fold bar so that it works more like that. (I almost never want to see only the title bar, but would love a “show only first 5em of height” toggle…) Not something I can build right now, but I bet it would be popular!

[jonnie45]

This is the first line of my text

<$details summary=“more”>

This is the rest of my text,
zjjjrjtjjtjtjt
rjjjrjjrjrjrj
ejjrjjtjtjjtjjt
and so on

</$details>

Edit a new tiddler and insert the above …Is that what you wanted?

[Springer]

@jonnie45

This is the first line of my text

<$details summary=“more”>

This is the rest of my text,
zjjjrjtjjtjtjt
rjjjrjjrjrjrj
ejjrjjtjtjjtjjt
and so on

</$details>

As written, this suggestion by @jonnie45 relies on telmiger’s details widget plugin. Which I do love, and used to use everywhere… but the simpler html version is more straightforward to recommend since it’s available “out of the box”:

<details><summary>Read more... </summary>
<div>

This is the rest of my text,
zjjjrjtjjtjtjt
rjjjrjjrjrjrj
ejjrjjtjtjjtjjt
and so on

</div>
</details>

(I always include an internal <div> in my stamp for html details, to put contents in block mode if needed.)

You can also add a custom css class, and other styling as needed…

Still, my sense was that the OP might have wanted — or maybe I’m just more interested in — a solution that can be imposed at the view-template level on a class of tiddlers.

[jonnie45]

Whoops sorry about that - so easy to forget when functionality depends on a plugin - My Bad

[etardiff]

@Springer

Honestly, I would like to rework/clone the fold bar so that it works more like that. (I almost never want to see only the title bar, but would love a “show only first 5em of height” toggle…)

This is a very clever idea! I thought I’d make a rough proof-of-concept in case anyone would like to adopt it and polish it up.

\function visibility() [{$:/config/ViewToolbarButtons/Visibility/$:/core/ui/Buttons/fold-bar}]

\procedure fold() <$action-sendmessage $message="tm-fold-tiddler" $param=<<currentTiddler>> foldedState=<<folded-state>>/>

\whitespace trim

<style>
.folded-preview {
	max-height: 10em;
	overflow: hidden;
}
.folded-fade {
	content: "";
	position: relative;
	margin-top: -10em;
	width: 100%;
	height: 10em;
	background: linear-gradient(<<color background>>00, <<color background>>), rgba(0,0,0,0);
}
</style>

<div class="tc-reveal">
<$list filter="[<visibility>match[show]]" variable="ignore">
<$reveal tag="div" type="nomatch" stateTitle=<<folded-state>> text="hide" default="show" retain="yes" animate="yes">
<$button
	actions=<<fold>>
	tooltip={{$:/language/Buttons/Fold/Hint}}
	aria-label={{$:/language/Buttons/Fold/Caption}}
	class="tc-fold-banner">
		{{$:/core/images/chevron-up}}
</$button>
</$reveal>
</$list>
<$list filter="[<visibility>match[show]] :else[<folded-state>get[text]match[hide]]" variable="ignore">
<$reveal tag="div" type="nomatch" stateTitle=<<folded-state>> text="show" default="show" retain="yes" animate="yes">
<div class="folded-preview">
	<$transclude tiddler={{{ [<currentTiddler>] :cascade[all[shadows+tiddlers]tag[$:/tags/ViewTemplateBodyFilter]!is[draft]get[text]] :and[!is[blank]else[$:/core/ui/ViewTemplate/body/default]] }}} />
</div>
<div class="folded-fade"/>
<$button
	actions=<<fold>>
	tooltip={{$:/language/Buttons/Unfold/Hint}}
	aria-label={{$:/language/Buttons/Unfold/Caption}}
	class="tc-unfold-banner">
		{{$:/core/images/chevron-down}}
</$button>
</$reveal>
</$list>
</div>

I edited $:/core/ui/ViewTemplate/unfold directly, and you can technically do the same, though a more sophisticated approach would involve creating a new tiddler and fitting it into the View Template Body cascade. It might also be nice to add a configuration setting in the Control Panel to make it easy to change the “preview” height without editing the CSS directly.

[Springer]

Took me a while to get back to this. I was having some trouble with getting this code to behave well across light and dark palettes.

But I think I got a simplified version. It doesn’t mess with colour macro at all, but just imposes an opacity gradient on the content:

Quick-demo TiddlyWiki

Still worth some tweaking… (it doesn’t yet play neatly with viewtemplate elements other than the body), but it’s very cool!

-Springer

Below, pasting the simplified style declarations that seem to be working for me (otherwise keeping everything from Proof-of-concept by @etardiff):

<style>
.folded-preview {
	max-height: 12em;
	overflow: hidden;
  -webkit-mask-image: -webkit-gradient(linear, left top, 
    left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));

}

</style>

[joshuafontany]

@Springer

Which I do love, and used to use everywhere… but the simpler html version is more straightforward to recommend since it’s available “out of the box”:

This looks like a great opportunity to use the new <% %> IF syntax and smart state tiddlers.