[TW5] Presenting the Details Widget

[Thomas Elmiger]

Hi all – here comes my first attempt to build a widget:

The details widget creates an HTML 5 <details> section including a <summary>. Users can click on the summary to open and close a block containing more details. The parameter open defines the initial state at load time.

See documentation here: http://tid.li/tw5/hacks.html#DetailsWidget

I just finished a first version and the documentation and I am very happy with it. BUT: I am not a javascript expert! So do yourself a favour and save a backup of your wiki first.

Let me know if it works for you!

All the best,
Thomas

[HansWobbe]

This really is quite nice and is an elegant solution to adding a "lede" ( wikipedia + ... ) style section to the beginning of a tiddler.

Thanks for sharing!

Regards,
Hans

[Jed Carty]

This is really neat. Just as a heads up I don't know if this would make it into the core since it doesn't have any non-dom state elements. The reason that state tiddlers are needed is that any (or all) dom element needs to be able to be rerendered at any time. This doesn't make this plugin any less useful, but since the state being independent of the dom is pretty important for some bits of tiddlywiki, I am not sure that this will make it into the core.

[Danielo Rodríguez]

Jed,why are you so worried about this getting into the core? This is just a plugin, there are dozens of them out there,why this should be different ?

[Jed Carty]

That was in response to a note on the demo site that said it would hopefully be in the core. 

[Danielo Rodríguez]

Thomas,that is an awesome piece of work.
I love how well it performs on mobile! Easy to tap,fast to render,no weird animation ... Great work.

Is it a widget or a plugin? I didn't read carefully,but if it is not a plugin,could you consider turning it into a plugin ? Regards

[Tobias Beer]

Hi Jed,

 

This is really neat. Just as a heads up I don't know if this would make it into the core since it doesn't have any non-dom state elements. The reason that state tiddlers are needed is that any (or all) dom element needs to be able to be rerendered at any time. This doesn't make this plugin any less useful, but since the state being independent of the dom is pretty important for some bits of tiddlywiki, I am not sure that this will make it into the core.

I'm inclined to challenge you to provide an actual situation that would be problematic.

Best wishes,

Tobias. 

[Thomas Elmiger]

Hi Danielo

I love how well it performs on mobile! Easy to tap,fast to render,no weird animation ... Great work.

Thank you! I just made a mini-update for mobile (nicer styling of summary indentation).
 

Is it a widget or a plugin? I didn't read carefully,but if it is not a plugin,could you consider turning it into a plugin ? Regards

At the moment it’s two tiddlers: one for the js (widget) and one for the CSS (styles).

Do you prefer one plugin to two tiddlers? IMHO it is not a big difference, wether you drag one or two links to your wiki …

Kind regards, Thomas

[Danielo Rodríguez]

 

At the moment it’s two tiddlers: one for the js (widget) and one for the CSS (styles).

Do you prefer one plugin to two tiddlers? IMHO it is not a big difference, wether you drag one or two links to your wiki …

My friend, I used to think the same exact thing when I started developing tiddlywiki, 3 years ago, now my mind has changed drastically.

Of course some of the benefits that I will list below are not immediate, but they are not possible without a plugin packaging:

• 1 single thing to import vs 2.
• It will remain as one single thing to import, no matter how many things you add to the mix
• Tiddlers contained on a plugin are protected from user editions. If the user breaks anything they just have to delete the overridden tiddler. Doesn't this deserve the effort ?
  
• There is a centralized place to see what things you have installed. Just navigate to the plugin manager and see the list. Importing individual tiddlers usually lends to bloated hard to maintain wikis
• You don't need to remember how many moving parts you have to uninstall, just uninstall ONE plugin, and you're done.
• There is no distribution mechanism for groups of tiddlers, but there is a plugin library. Sure you have to put your plugins on the library, but you have the possibility.
• You have a naive vision about how you install things on TW. Not everyone is able to drag things between windows, so if you have to go through the process of clicking the import button, navigating the file system and selecting the appropriate file, you will prefer to do it just once.

As you can see, it is not just ONE small difference, but a whole list of advantages.

Regards

[PMario]

Hi Thomas,

Nice piece of work!

There is a little problem I see here: http://caniuse.com/#search=details ... but that's not your fault :) .. Edge browser doesn't support it yet, but it's "under consideration".

Jet points out, that TW mostly uses persistent states, like the reveal widget. ... but the spec https://developer.mozilla.org/en/docs/Web/HTML/Element/details and https://html.spec.whatwg.org/multipage/forms.html#the-details-element only describes the open attribute for an initial load.

I personally think, for TW it should be possible to have a persistent state, since the details won't survive a redraw. ... as Jed points out.

just my 2 cents.
mario

[PMario]

On Sunday, January 22, 2017 at 11:41:19 PM UTC+1, Thomas Elmiger wrote:

Do you prefer one plugin to two tiddlers? ...

IMO plugin teritory.

-m

[David Gifford]

Very nice! I will definitely be using this. I agree with those who say it should eventually become a plugin where everything is bundled together.

Dave

[Jeremy Ruston]

Just to confirm that the summary/details approach is not compatible with TW5's refresh architecture. I haven't looked at the code, but I'm surprised that a JS widget is needed; why can't one just use the elements within a macro?

The summary/details approach is, however, exceptionally useful within static HTML renderings.

Best wishes

Jeremy

--

Jeremy Ruston

jer...@jermolene.com

http://jermolene.com

--
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 tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/3b352f8b-3d57-44c4-a3ff-8a27b87e4351%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Thomas Elmiger]

Hi all,

I am overwhelmed by the very qualyfied feedback i got here in no time. Thank you all!

I will respond later with more details. Here are some thoughts of the day:

I allready met an edge case where I missed re-rendering so I will reconsider implementig this in some way. Stay tuned! (And I might come back to ask for help).

I will publish the result as a plugin, but this might take some time. Tere is no hurry, we will see if I am faster than MS asopting it in Edge ;–)

Of course I considered writing a macro too. But when you have a lot of details to reveal and are used to the reveal widget … then it seems a bit clumsy to write everything inside a <<macro param="all the details and transclusionshere …? … …">>.

I even speculated about what wiki markup for such a thing could look like. But I have no idea about how to add this to TW5 and I struggled more than once with longer definitions in definition lists with the ; : syntax … (if I remember right you have to type <br> to simulate pargraphs there) so this seemed not to be the right way either.

This is allready much more than what I thought I would write today, now I’m off for floorball training.

Cheers, Thomas

[Thomas Elmiger]

Hi all,

A new version of the detais widget is online for you to test, if you are interested. Pending is some polish … but I think this is pretty close to what I can reach at the moment.

http://tid.li/tw5/hacks.html#DetailsWidget:DetailsWidget%20%5B%5BDetails%20Basic%20Examples%5D%5D%20%5B%5BDetails%20Advanced%20Examples%5D%5D

I have integrated as much of your feedback as possible, e.g. hints on (lack of) browser support and the handling of states.

Feedback still appreciated!

All the best,
Thomas

[Webcorerad Bot]

Thank you so much for all the effort you have put on this. I find it super useful.

The only minor, minor - really minor thing - that I think could be improved is the arrows behaviour. Currently seems the arrow changes its position slightly when clicked (instead of smoothly rotate over its center). Other than this, I don’t have enough knowledge (better say none actually) to comment on anything else other than how useful i think this is.

Thank you.

--

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 tiddlywiki+unsubscribe@googlegroups.com.

To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/f0f5ddba-e44f-4c06-98e2-e4350d812daf%40googlegroups.com.

[Riz]

Nicely done, @telmiger. Will make a good addition. Thumbs up.

[Thomas Elmiger]

Thank you for the feedback!

The only minor, minor - really minor thing - that I think could be improved is the arrows behaviour. Currently seems the arrow changes its position slightly when clicked (instead of smoothly rotate over its center).

The arrow styling is left to the browser. I don’t even know if you could style it. I know that it could be removed though. (You can delete my CSS tiddler and tiddlywiki standard styles will make it disappear.)

Cheers, Thomas

[Danielo Rodríguez]

Great improvements !

[Mat]

Wonderful! Thanks Thomas!!!

If I were to come also with a minor detail, I'd suggest a small animation to make the opening/closing transition smoother. There are many css examples for this.

Again, wonderful stuff, Thomas!!!

<:-)

[Thomas Elmiger]

Thank you Mat!
After reading some question-answer sites concernig details animation and playing with one of the examples, I decided to leave that option to the users and incorporated this sentence in my warning details:

”Other browsers [than Edge, whitch does not support details at all] might not support animation effects on opening or closing – at least not in early 2017.“

I will happily help with testing when you present a working solution ;–)

[Thomas Elmiger]

Hi all,

Just wanted to let you know, that the details plugin is finished.
You can get it from http://tid.li/tw5/plugins.html#Get%20More%20Plugins

Happy disclosing ;–)
Thomas

[Hao Xin]

Is it possible to click something or somehow to expand/collapse all blocks in a tiddler?

[Thomas Elmiger]

It is possible to add buttons to open/close several details sections at the same time. I made an example in the documentation at the top: http://tid.li/tw5/hacks.html#DetailsWidget where I use the ActionSetField widget to set the state value in the corresponding fields of the same tiddler.

It would also be possible to use the same state for all details that should be synchronised. This way they would always open and close together. But I think it is better to let users choose.

[pierrelep...@gmail.com]

Is it possible to have only one "detail" shown at a time, as in Tobias folding sections (fold macro) or in in this accordion menu ?

Thank you for your wonderful plugins.

Pedro

[Thomas Elmiger]

Hi Pedro

At the moment I can’t think of a possibility to close all but the last opened detail sections. So for this you will have to go with one of the other solutions.

Good luck!
Thomas

[Yan Yau CHENG]

Hi Thomas,

Thanks for making the widget!

I am currently trying to use the details widget to hide some LaTeXed math. However, the LaTeX does not seem to be rendering properly, is there a fix to this?

[Thomas Elmiger]

Hi Yan Yau Cheng

It seems you are the first to try combining LaTeX and the Details Widget. Do you have a demo somewhere to show the problem?

As I do not use LaTeX it might be difficult for me to locate the bug and we might have to consult some LaTeX experts too.

All the best,
Thomas

[Yan Yau CHENG]

Hi Thomas,

LaTeX is basically a language to format math equations. I am using the KaTeX plugin on tiddly wiki to typeset my LaTeX, the source code is here: https://github.com/Jermolene/TiddlyWiki5/tree/master/plugins/tiddlywiki/katex (I don't actually know anything about programming but I just found this)

Since the thing I am trying to put into the details widget is quite long, I'll just provide a shortened example:

For example, if I input this: http://imgur.com/07KtVHG

The output I get is this: hhttp://imgur.com/E2fB5Lp

As you can see, the LaTeX outside the details environment renders x squared properly, while the LaTeX inside the details doesn't.

[Stephen Wilson]

 Hi Yan, what are you attempting to do with this?  I'm also struggelingto get LaTeX palying nice with other widgets and macros.  see https://groups.google.com/forum/?pli=1#!topic/tiddlywiki/8-T2DQmYRJI
I would like to use it to genrate maths problems and then give feedback to the student automatiucally by comparing the answer to the correct answer.

Stephen

[Yan Yau CHENG]

Hi Stephen,

I am only using tiddlywiki personally, and I'm basically writing up my solutions/proofs to problems, but I want to hide them in the tiddler until I press reveal, so if I read the problem a few months later, I can attempt the problem again before reading the solution.

[Mark S.]

Am I the only one having trouble making this work in FF?  I can see what it's supposed to look like on Chrome, but on my FF the open and close doesn't work.

Thanks,
Mark

FF 47.0.2
Windows 7 Home Prem

[Thomas Elmiger]

Hi Mark

On my Mac it works in FF, but I can confirm that there is an issue with FF for Win7.

Not sure when I will find time for this.

:(

Thomas

--
You received this message because you are subscribed to a topic in the Google Groups "TiddlyWiki" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/tiddlywiki/sRUVnlIaT3E/unsubscribe.
To unsubscribe from this group and all its topics, send an email to tiddlywiki+unsubscribe@googlegroups.com.

To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/a015ff42-be28-4a6a-87f3-0e3a235765c2%40googlegroups.com.

[codacoder...@outlook.com]

Demo works fine here

FF 53.0.3

Win7

On Wednesday, June 14, 2017 at 1:19:40 PM UTC-5, Thomas Elmiger wrote:

Hi Mark

On my Mac it works in FF, but I can confirm that there is an issue with FF for Win7.

Not sure when I will find time for this.

:(

Thomas

2017-06-14 18:00 GMT+02:00 'Mark S.' via TiddlyWiki <tiddl...@googlegroups.com>:

Am I the only one having trouble making this work in FF?  I can see what it's supposed to look like on Chrome, but on my FF the open and close doesn't work.

Thanks,
Mark

FF 47.0.2
Windows 7 Home Prem

On Sunday, January 22, 2017 at 8:45:18 AM UTC-8, Thomas Elmiger wrote:

Hi all – here comes my first attempt to build a widget:

The details widget creates an HTML 5 <details> section including a <summary>. Users can click on the summary to open and close a block containing more details. The parameter open defines the initial state at load time.

See documentation here: http://tid.li/tw5/hacks.html#DetailsWidget

I just finished a first version and the documentation and I am very happy with it. BUT: I am not a javascript expert! So do yourself a favour and save a backup of your wiki first.

Let me know if it works for you!

All the best,
Thomas

--
You received this message because you are subscribed to a topic in the Google Groups "TiddlyWiki" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/tiddlywiki/sRUVnlIaT3E/unsubscribe.

To unsubscribe from this group and all its topics, send an email to tiddlywiki+...@googlegroups.com.

To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.

[@TiddlyTweeter]

IF you mean this:

TE: The details widget creates an HTML 5 <details> section including a <summary>. Users can click on the summary to open and close a block containing more details.

I have had no problems on Windows 7.

[Mark S.]

Turns out the the details element is not supported in FF until vsn 49. According to w3c schools, it is not supported at all by Internet explorer.

Thanks,
Mark
 

[Thomas Elmiger]

Thank you Mark, there is a hint in the docs about IE, I will consider adding one for old FF versions too.

[@TiddlyTweeter]

Your concern for old people is remarkable :-) J, x

[Thomas Elmiger]

Hi Yan Yau CHENG

Thank you for the detailed instructions – I have been able to reproduce and fix this. The fault was in my CSS targeting all the <span>s inside the details element instead of just my own surrounding the content …

Demo: https://tid.li/tw5/test/LaTeX.html

You can update the details.js and details.css files from there too: https://tid.li/tw5/test/LaTeX.html#%24%3A%2FAdvancedSearch (or from the original source).

All the best and thank you for reporting the bug!
Thomas

[Yan Yau CHENG]

Hi Thomas, 

Just downloaded it and tried it out and it works! Thanks so much!

[si]

Hi Thomas, thank you for making this plugin.

I've just been playing with it (this version), and I noticed that the widget won't display links in the summary section. E.g. <$details summary="[[Tiddler title]]"> will just display the brackets as plain text, rather than giving you a clickable link. I don't know if you are still updating this plugin, but I wondered if there is any way to get links to show in the summary section?

[Charlie Veniot]

I can't see that happening.  The entire bar is meant to be clicked on to toggle opening/closing the details widget.  Having nested "clicky" areas would be a bad idea, I think.

It isn't about the widget being unable to do that.  It is about the HTML foundation of the widget.  A somewhat related good read:  https://www.w3schools.com/tags/tag_details.asp

I kind of do what you are asking for in a different way.  See "How Charlie Uses DetailsWidget with Transclusions."  There may be some stuff in there you can reuse for your purposes?

[si]

>>> I can't see that happening.  The entire bar is meant to be clicked on to toggle opening/closing the details widget.  Having nested "clicky" areas would be a bad idea, I think

I don't really see the problem? It works fine with the HTML tag. Go to tiddlywiki.com and try this:

<details>
<summary>[[TiddlerLinks]]</summary>
Blah
</details>

Clicking anywhere other than the link opens the text. This is what I have been using, but with the vanilla HTML element there is no way to record the state, hence my interest in the details widget.

[Charlie Veniot]

Dang, that is some good sleuthing.

Although I still think nested clicky areas is a bad idea (instant cognitive glitching over here, maybe a little GUI OCPD action going on), it definitely is worth asking for if it solves something for you.

Maybe I'm thinking passing a [[tiddler link]] as a parameter isn't something easy to do because I can't remember seeing anything like that anywhere ?  I could be overthinking it.

[si]

I agree that having a link in the summary is probably not useful in most contexts, however in my case I use the details tag to display backlinks. I have a link to jump to the relevant tiddler, but also a dropdown to display the textual context.

[Charlie Veniot]

Hey, dollars to donuts: any one thing that might be useful to one person for however many purposes, it will be useful to a bunch of other folk too for same or other interesting purposes.

I'm all for anything that helps reduce mouse-clicky-induced tendinitis of the finger knuckle.

[Thomas Elmiger]

Hi folks, nice to see that my widget is in use!

I know it isn’t perfect, but I have no intention to make any changes soon – you are more than welcome to take it and adapt it to any purpose you want.

The summary variable takes only text as input and produces only text as output. It is not wikified and not HTML-ified either. This is not according to any standards and the reason is lack of development skills on my side. I did my best at the time ... So that would be an improvement I would like to see myself. At the moment it is impossible to get a nice display for something like this:

<$details summary="CO₂ equivalent">
Details about CO,,2,, conversion
</$details>

So good luck to anyone willing to invest time into this, while I try to increase the production and use of renewable energy in my neighbourhood.

Cheers,

Thomas

[Charlie Veniot]

You may not think of it as perfect, but know this:  the DetailsWidget, as-is, is to my cognitive disability like manna from heaven.

To me, you applied the sweet spot of coding skill to it.  Products that are small/simple/light/lean (minimalism rocks!) always tug at my heartstrings something silly.

Might explain why when something is working just right for me, I may have a "please don't mess with it" knee-jerk reaction.

If anybody does update it, might I suggest: add a "tiddler-link" (yes/no) parameter, defaulting to "no".  When set to "yes", then have the processing treat the simple text in the "summary" parameter as a tiddler title, and let the widget take care of using that text as a tiddler link. 

So instead of <$details summary="[[Tiddler title]]"> , one would have:  <$details summary="Tiddler title" tiddler-link="yes">

Something like that.

[si]

Thanks Thomas, that's good to know.