short and detailed buttons in the wiki, html help wanted

Patrick · November 30, 2015, 12:06am

Example page (never mind the contents): https://www.klimafakten.de/behauptungen/behauptung-aber-am-suedpol-nimmt-die-eismasse-zu. Check the buttons “Kurz” (stands for short) and “Ausführlich” (stands for detailed).

Depending on which button is pressed, a different length, different detailed page is being load.

That’s something I very much would like to use for Whonix wiki. A short button for most visitors with easy, basic information. And an alternative detailed, more verbose view.

Does somehow know the required html code?

Yes, we can safely [admins only] using raw html code in Whonix wiki. (We are using mediawiki extension Widgets for that.) Example on how html is being used in Whonix wiki:

Ego · November 30, 2015, 4:30pm

Good day,

depends, do you want to keep the look and feel of Mediawiki or would you really like having such a script heavy solution? Because, this decision changes how accessible the wiki would be for NoScript users, as well as how hard it would be to implement.

A simple and ugly, yet alternative solution would be, to create separate sites on the wiki for “short” and “extensive” and let them select like it’s the case here: https://www.whonix.org/wiki/Verify_the_Whonix_images This would also be independent of scripts, however it’d look far less appealing, then what is on the page you’ve used as an example.

Have a nice day,

Ego

Patrick · November 30, 2015, 4:38pm

Two wiki pages on the same topic would create more confusion, I think.
Not great maintenance wise.

Isn’t there a solution that also works for noscript users? For example
CodeSelect just becomes a normal

tag when noscript is
enabled. And expand buttons are automatically expanded by default. (As
example, you can check out the https://www.whonix.org/wiki/Bridges page.)

Ego · November 30, 2015, 4:40pm

Good day,

Would have to look into that in more depth, will try to find some time for that. If someone else is maybe able to find some time and attempt this as well, it would be great though.

Have a nice day,

Ego

PX18030 · December 3, 2015, 3:22pm

This should be fairly doable in CSS3, with out the use of any JS.

Patrick · December 3, 2015, 3:29pm

PX18030:

This should be fairly doable in CSS3, with out the use of any JS.

Could you help with this please?

Ego · December 5, 2015, 6:27pm

Good day,

as far as I can tell, there is only one possible way to realise this without JS, which would be more a bulky solution then anything else. It would look like this:

Regardless of which setting is chosen, the text for both detailed and simple is always on the page, just made invisible and small (PT: 1, colour: white) according to the selection. If you PX18030 have a way of realising this without using JS at all, I’d like to hear it.

Have a nice day,

Ego

Ego · December 6, 2015, 12:26am

Good day,

just did some resarch and tried a few ideas, this would actually be possible with an iFrame, an example may be found here: http://www.littlewebhut.com/php/samples.php?page=xhtml_article_iframe#codetester You can simply choose which content (in this example pictures are used, though any html code is possible) is visible by clicking and the best part, it doesn’t require JavaScript! I’ll now try to get this working on the sandbox page in the wiki, will post once I’ve succeded and/or failed.

Have a nice day,

Ego

Edit: So, I’ve just build a small code example, which is meant to demonstrate how the whole thing would work. Still needs some polish though, but adding nice looking buttons is easily done after the fact anyway. Here you go:

http://jsfiddle.net/yvd7g0h5/2/embedded/result/

There are a few problems with this implementation though:

First, since I had to create this without any kind of script, I’m unable to make the size of the iframe dynamic according to the source, which is why the height and width are static. Furthermore, I don’t know how to add this to the wiki. The iframe widget by mediawiki doesn’t support the ability to select the content of the iframe and normal html code is turned of in the wiki, I’m presuming to prevent spam or hijacking… So, if someone could help me with the implementation, I’d be grateful.

Have a nice day,

Ego

PX18030 · December 6, 2015, 11:14am

Yes you’d have to load up both HTML for simple and advanced. I guess on large pages it could take a long time to load, but it would be simpler for maintenance as it can be all one wiki page broken down into two main sections.

Start with one or both of the elements hidden, then when a button is clicked hide and show the related elements.

A nice explanation of CSS3 hiding, can be found here with a demo.

iFrames, there is a security discussion about using them. Generally they are safe if you link to pages under your domain, but if a page under you domain contains an XSS, then all pages could include it, by pointing an iFrame to that page and including it on all pages.

They also decrease the search engine optimisation for the site, as you’d have one page URL, which serves up n iFrames.

Personally I’d disable iFrames with the header X-Frame-Options: DENY

Ego · December 8, 2015, 7:19pm

Good day,

honestly, wasn’t aware of the fact it could decrease SEO, will have to look into that more. Furthermore, there are only few options possible, if we want to continue making the wiki accessible without JavaScript. Those two were the only one I could really come up with and like you’ve pointed out, the first would also create a few problems…

Maybe I’ll have an idea on how to realise this better, though I doubt it…

Have a nice day,

Ego

Patrick · December 8, 2015, 8:26pm

I am not concerned about page load times because of the increased page size. The easy versions would be really short, so they should add only negligible weight.

Yes. Raw html has been disabled in the wiki for security reasons. But that should not be an issue, because we have mediawiki extension widgets installed. It allows admins to create widgets, that are just any html code, that can be imported by anyone from normal wiki pages.

One thing you may or may not have in mind yet may be a non-issue. We probably do not have to copy/paste the easy versions into the detailed version. A mediawiki template can be used to avoid this.

https://www.whonix.org/wiki/Template:Split

<!-- code -->

{{{easy}}}

<!-- code -->

{{{easy}}}
{{{detailed}}}

<!-- code -->

By calling on regular pages…


{{Split|
easy=easy text goes here
detailed=detailed text goes here
}}}

That should be doable.

The easy text would still be duplicated in the generated html code which may or may not be bad for seo. That could be a reason to rewrite the easy text so it differs from the detailed version.

Another option could be to have the detailed version just expand.

(Similar to the already existing expand buttons we are already using in the wiki. Here is an example: https://www.whonix.org/wiki/Bridges#scramblesuit Just the expand buttons are not that pretty.)

Patrick · July 3, 2016, 12:14am

During all the time that passed since I did not come across another website using short / detailed buttons.

My example from the original post does not let noscript users click the detailed button.

http://www.cssportal.com/css3-preview/demo/css-menu-ex1.html is better. It works in Firefox with noscript, but does not work great with chrome(ium). In chrome it is showing the detailed view by default with no way to only show simple. This is to be expected as per what the description http://www.cssportal.com/css3-preview/showing-and-hiding-content-with-pure-css3.php says.

Lobster · July 3, 2016, 7:21am

One thing I don’t like about http://www.cssportal.com/css3-preview/demo/css-menu-ex1.html is that it relies on the :focus pseudo-class, which means if you click on “hide” the content gets hidden as expected, but if you click anywhere else after that the element loses its focus and the hidden content appears again.

I assume the content of the short versions would be too long for TL;DR sections?

Patrick · July 3, 2016, 3:36pm

Asked in a forum.

Is the question clearly asked? Should there be no answers helping to implement this, I will consider reposting this in some other place.

Lobster · July 3, 2016, 12:42pm

I could help to implement something like that with JS and if JS is not available display both versions (and maybe a link to skip the short version and go directly to the longer one), I have just never worked with mediawiki.

Can I use jQuery (which seems to be provided by mediawiki) or would you prefer a standalone solution?

I just looked at existing widgets, is it possible to place the CSS in JS code in external files? Otherwise you’ll get a lot of duplicate code in your output.

Patrick · July 3, 2016, 1:08pm

Thank for the offer! Do you mind to put this on hold for a little longer? Perhaps work on https://phabricator.whonix.org/T420 first?

Let’s see if some forum / mailing list somewhere can suggest a javascript free solution. Unless you are reasonable certain, that this will be futile?

Can I use jQuery (which seems to be provided by mediawiki) or would you prefer a standalone solution?

I have no strong preference either way. Both sound good. Mediawiki jQuery produces less code but a standalone solution could also be used outside of mediawiki?

I don’t know. I guess it should be possible, otherwise the mediawiki widgets extension would be too limited. We can test this if you provide the necessary files for testing this.

Lobster · July 3, 2016, 2:30pm

Sure.

You can use jQuery outside of mediawiki, but using jQuery just for that somewhere else would be a bit overkill.

Edit:

I am pretty sure that you can’t implement a “click a button to show/hide” function just in css because that requires to store the information if the element is hidden or not and AFAIK that is not possible with just css alone.

Patrick · July 3, 2016, 4:44pm

Since both, @Ego and me probably spend a fair amount of time looking for this… You are probably right.

Please implement this.

Patrick · July 3, 2016, 4:45pm

Just one second. What about this answer…

Lobster · July 3, 2016, 4:55pm

That is basically the same as before (also uses focus):

Edit:
You can try it yourself: https://jsfiddle.net/nnodjtf2/1/ open the detailed version and try to select some of the text that appeared