Replace all the javascript with html+css. #4

KOLANICH · 2019-12-17T07:14:19Z

https://github.com/you-dont-need/You-Dont-Need-JavaScript

dblanchette · 2020-01-27T14:56:11Z

This is very cool! It actually started out without Javascript, but we ended up using bootstrap as a time saving measure. If I find the time for it, I'll see what I can do to remove Javascript.

dblanchette · 2020-04-23T13:57:33Z

I spent some time investigating the effort needed to remove all javascript and I realized it is a lot. There are a lot of accordion examples without JS, but not really when there are sections within another.

I was thinking of creating another template without the collapsible sections (everything expanded). It would also make it easier to search using the browser search function, and to add anchor links, something I have been wanting to do for a while.

Users that don't want the Bootstrap/jQuery overhead could use that template instead.

Thoughts?

gabor-varga · 2020-04-24T09:33:16Z

I was thinking of creating another template without the collapsible sections (everything expanded). It would also make it easier to search using the browser search function, and to add anchor links, something I have been wanting to do for a while.

Users that don't want the Bootstrap/jQuery overhead could use that template instead.

Thoughts?

I think this alternative would be useful. Still, at least a "collapse/expand all" button could still be useful, if easily possible with CSS. Including the HTML in-line in a documentation would benefit from this simple overview.

KOLANICH · 2020-06-14T22:30:03Z

but not really when there are sections within another.

a

b

c

d

details tag is a built-in accordeon widget

dblanchette · 2020-07-18T02:23:08Z

@KOLANICH Thanks for the tip! I am more a Python developer than a Web developer, so please excuse my ignorance :)

I started working on a "flat" version without JS, it's not very beautiful, but it generates and renders very quickly!

It's in this branch: https://github.com/coveooss/json-schema-for-humans/tree/feature/flat-version. Just pass --template-name flat. Comments more than welcome :)

kratsg · 2020-07-25T01:13:46Z

I have an attempt at it with the release on pypi: scikit-hep/pyhf@b615ea6

Just doing some modifications to the html. One could probably use beautifulsoup to pull out all the relevant pieces, but it would be much easier for all involved to put all the needed css/javascript at the bottom of the body, and then we can just extract the body into the html file as a post-processing step of sorts.. or just have a config for it.

It's not perfect (missing some pieces) but the render does look nice-ish: https://pyhf.readthedocs.io/en/docs-jsonschema/schema.html

KOLANICH · 2020-07-26T20:11:26Z

@dblanchette, thank you. Sorry for the delay, I have planned to test it and answer after the test, but was busy enough to forget to test.

It seems like in its current state the tool doesn't use details tag.

dblanchette · 2020-07-27T18:59:16Z

@KOLANICH Do you know a way to make anchor links and the "expand" and "collapse" buttons work with details tag without javascript? The current implementation uses Javascript to iterate through the page and expand sections that need to be. I did not find any equivalent way without using some Javascript.

@kratsg Thanks! I'll look into making an option as soon as I can get a schema that works. Right now, allOf, anyOf, etc. (tabbed sections) do not work. I plan on putting some time into this next weekend.

KOLANICH · 2020-08-03T11:42:27Z

Unfortunately, if we want to expand by a link we have to fall-back to CSS solution.

Here is one adapted from https://cdpn.io/cristina-silva/fullpage/pyXQrj and modified by me to expand by an URI fragment.

<html>
<head></head>
<body>
  
<style>

.toggle-label {
  cursor: pointer;
}

.toggle-label:before {
  content: "+";
  float: left;
}

.toggle-input:checked ~ .toggle-label:before {
  content: "-";
}

.toggle-input:not(checked):target ~ .toggle-label {
  display: none;
}

.close-href {
  display: none;
}

.toggle-input:not(checked):target ~ .close-href {
  display: inline;
}

.toggle-input {
  display: none;
}

.toggle-input:not(checked) ~ .toggle-content {
  display: none;
}

.toggle-input:checked ~ .toggle-content {
  display: block;
}

.toggle-input:target ~ .toggle-content {
  display: block;
}

</style>

<div class="toggle">  
	<!-- Checkbox toggle -->
	<input type="checkbox" id="expand_aaaa" class="toggle-input"></input>
	<a href="#" class="close-href">-aaaaa</a>
	<label for="expand_aaaa" class="toggle-label">aaaaa</label>

	<!-- Content to toggle -->
	<div class="toggle-content">
		bbbb
	</div>
</div>


<a href="#expand_aaaa"> Expand aaaa </a>

</body>
</html>

dblanchette · 2020-11-09T23:21:16Z

I have released the flat template with version 0.24.

Just generate with --config template_name=flat (or any other way you provide the config).

The template uses no Javascript. It still uses Bootstrap for the CSS at the moment. There are no collapsible sections or tabbed sections, everything is rendered one after the other. I had to do it this way since I could not find a way to make anchor links work when a section is collapsed without using Javascript.

This is far from perfect, but I figured it was better to release something rather than letting this nearly one year old issue pending while I try to find time and motivation to make something better :)

I added a section in the README about how to add your own templates if this one does not suit you, it could be a way to have what you need. Contributions to the new flat templates would be very appreciated if you can improve its style without adding back Javascript of course!

dblanchette · 2021-07-09T19:36:12Z

Closed for inactivity and because a solution was implemented (even if not as good as I would wish). Feel free to build a better template if you still need this!

dblanchette added the enhancement New feature or request label Feb 20, 2020

gabor-varga mentioned this issue Apr 23, 2020

Add option to emit separate files for <head> and <body> #14

Closed

KOLANICH mentioned this issue Jul 1, 2020

Add KSY syntax diagram generated by Docson kaitai-io/kaitai_struct_doc#37

Merged

ltalirz mentioned this issue Oct 26, 2020

Docs: json schema for archive format aiidateam/aiida-core#4515

Closed

dblanchette closed this as completed Jul 9, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Replace all the javascript with html+css. #4

Replace all the javascript with html+css. #4

KOLANICH commented Dec 17, 2019

dblanchette commented Jan 27, 2020

dblanchette commented Apr 23, 2020

gabor-varga commented Apr 24, 2020

KOLANICH commented Jun 14, 2020 •

edited

Loading

dblanchette commented Jul 18, 2020 •

edited

Loading

kratsg commented Jul 25, 2020 •

edited

Loading

KOLANICH commented Jul 26, 2020

dblanchette commented Jul 27, 2020

KOLANICH commented Aug 3, 2020 •

edited

Loading

dblanchette commented Nov 9, 2020

dblanchette commented Jul 9, 2021

Replace all the javascript with html+css. #4

Replace all the javascript with html+css. #4

Comments

KOLANICH commented Dec 17, 2019

dblanchette commented Jan 27, 2020

dblanchette commented Apr 23, 2020

gabor-varga commented Apr 24, 2020

KOLANICH commented Jun 14, 2020 • edited Loading

dblanchette commented Jul 18, 2020 • edited Loading

kratsg commented Jul 25, 2020 • edited Loading

KOLANICH commented Jul 26, 2020

dblanchette commented Jul 27, 2020

KOLANICH commented Aug 3, 2020 • edited Loading

dblanchette commented Nov 9, 2020

dblanchette commented Jul 9, 2021

KOLANICH commented Jun 14, 2020 •

edited

Loading

dblanchette commented Jul 18, 2020 •

edited

Loading

kratsg commented Jul 25, 2020 •

edited

Loading

KOLANICH commented Aug 3, 2020 •

edited

Loading