consul/nairobi
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Use details tag to show/hide a draft version TOC

Browse Source 
We were using JavaScript to show/hide the Table of Contents.

In my humble opinion, the <details> tag has a few shortcomings [1][2],
which means we should be careful about when to use it.

IMHO a Table of Contents is a good candidate for this tag because it's a
very common pattern to add a show/hide behavior for it, even if using it
means the "navigation" role (which we are *not* using anyway) wouldn't
be identified correctly.

I'm adding a <details> tag to the comments section as well for
consistency and in order to simplify the code. I'm not sure this is as
good an application of the <details> tag, though, but then again I'm not
sure about the interface we use to show/hide the comments (and this
feeling is increased by the fact that we use a different interface on
small screens). If we decide to change the interface in the future, we
might consider using the <details> tag for the Table of Contents but not
for the comments.

Since the <details> tag is not supported on Internet Explorer, I'm
only adding styles to this tag using the `:not([open])` option. On
Internet Explorer <details> will always be opened and so these styles
will be ignored.

[1] https://adrianroselli.com/2019/04/details-summary-are-not-insert-control-here.html
[2] https://daverupert.com/2019/12/why-details-is-not-an-accordion/
This commit is contained in:
Javi Martín
2020-11-14 12:50:30 +01:00
parent 220b1de01e
commit 41e5ddbcdf
5 changed files with 57 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
app/assets/javascripts/application.js
View File

@@ -139,7 +139,6 @@ var initialize_modules = function() {
App.MarkdownEditor.initialize();
App.HTMLEditor.initialize();
App.LegislationAdmin.initialize();
App.LegislationAllegations.initialize();
App.Legislation.initialize();
if ($(".legislation-annotatable").length) {
App.LegislationAnnotatable.initialize();

28
app/assets/javascripts/legislation_allegations.js
View File

@@ -1,36 +1,10 @@
(function() {
"use strict";
App.LegislationAllegations = {
toggle_comments: function() {
if (!App.LegislationAnnotatable.isMobile()) {
$(".draft-allegation").toggleClass("comments-on");
$("#comments-box").html("").hide();
}
},
show_comments: function() {
if (!App.LegislationAnnotatable.isMobile()) {
$(".draft-allegation").addClass("comments-on");
document.querySelector(".draft-allegation details.calc-comments").open = true;
}
},
initialize: function() {
$(".js-toggle-allegations .draft-panel").on({
click: function(e) {
e.preventDefault();
e.stopPropagation();
if (!App.LegislationAnnotatable.isMobile()) {
App.LegislationAllegations.toggle_comments();
}
}
});
$(".js-toggle-allegations").on({
click: function() {
if (!App.LegislationAnnotatable.isMobile()) {
if ($(this).find(".draft-panel .panel-title:visible").length === 0) {
App.LegislationAllegations.toggle_comments();
}
}
}
});
}
};
}).call(this);