abec716308
Defining a behavior on hover means making it different for people using a keyboard or a touchscreen (most of the population, nowadays). In this case, we had an accessibility issue where the message wouldn't disappear once it appeared. That meant that, after tabbing through all the links and buttons in, for instance, the debates index, the page would be filled with "participation not allowed" messages, and in order to see the information about how many people have voted, reloading the page was required. For touchscreen users the behavior was similar to what we get on hover, although we've found some inconsistencies when trying to support several elements on the same page. We think in proposals it makes sense to hide the "support" button when users click on it, and the same applies to the buttonsto support and vote investment projects. However, we aren't hiding the buttons to agree/disagree with a debate in order to keep the information about the current number of people agreeing and disagreeing visible. Note we're removing some support spec methods because after these changes the duplication isn't as obvious as it was in the past.
30 lines
875 B
JavaScript
30 lines
875 B
JavaScript
(function() {
|
|
"use strict";
|
|
|
|
App.ParticipationNotAllowed = {
|
|
not_allowed: function(votes_selector) {
|
|
var buttons_selector = votes_selector + " [type='submit']";
|
|
|
|
$("body").on("click", buttons_selector, function(event) {
|
|
var votes = $(event.target).closest(votes_selector);
|
|
var not_allowed = $("div.participation-not-allowed", votes);
|
|
|
|
if (not_allowed.length > 0) {
|
|
event.preventDefault();
|
|
not_allowed.show().focus();
|
|
|
|
if (votes_selector === "div.votes") {
|
|
$("button", votes).prop("disabled", true);
|
|
} else {
|
|
$(event.target).closest("form").remove();
|
|
}
|
|
}
|
|
});
|
|
},
|
|
initialize: function() {
|
|
App.ParticipationNotAllowed.not_allowed("div.votes");
|
|
App.ParticipationNotAllowed.not_allowed("div.supports");
|
|
}
|
|
};
|
|
}).call(this);
|