Skip to content

Commit 1fbfa50

Browse files
CrashilloCrashillo
committed
update the wizard steps form via js
1 parent 19e3133 commit 1fbfa50

10 files changed

Lines changed: 86 additions & 46 deletions

File tree

‎decidim-elections/app/cells/decidim/elections/voting_step_navigation_cell.rb‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ def previous_step_dom_id
3131
end
3232

3333
def next_step_dom_id
34-
last_step? ? "confirm" : "step-#{current_step_index + 1}"
34+
last_step? ? "step-confirm" : "step-#{current_step_index + 1}"
3535
end
3636

3737
def current_step_dom_id

‎decidim-elections/app/helpers/decidim/elections/votes_helper.rb‎

Lines changed: 0 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -18,23 +18,6 @@ def more_information?(answer)
1818
answer.proposals.any? ||
1919
answer.photos.any?
2020
end
21-
22-
def election_wizard_steps
23-
["register", "election", "confirm", "ballot_decision"]
24-
end
25-
26-
def wizard_steps(current_step)
27-
scope = "decidim.elections.votes.header"
28-
inactive_data = { data: { past: "" } }
29-
content_tag(:ol, id: "wizard-steps", class: "wizard-steps") do
30-
election_wizard_steps.map do |wizard_step|
31-
active = current_step == wizard_step
32-
inactive_data = {} if active
33-
attributes = active ? { "aria-current": "step", "aria-label": "#{t("current_step", scope:)}: #{t(wizard_step, scope:)}", data: { active: "" } } : inactive_data
34-
content_tag(:li, t(wizard_step, scope:), attributes)
35-
end.join.html_safe
36-
end
37-
end
3821
end
3922
end
4023
end

‎decidim-elections/app/packs/entrypoints/decidim_elections.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,12 @@ import "src/decidim/elections/trustee/key_ceremony";
33
import "src/decidim/elections/trustee/tally";
44
import "src/decidim/elections/trustee/trustee_zone";
55

6-
// both setup-vote and setup-preview MUST LOAD BEFORE new-vote
7-
// as they're imported from the window object
6+
// REDESIGN_PENDING: setup-vote and setup-preview MUST NOT LOAD at the same time
7+
// they should be loaded asynchronously depending "preview_mode?" rails variable
8+
// thourgh "async imports", see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import
89
import "src/decidim/elections/voter/setup-vote";
910
import "src/decidim/elections/voter/setup-preview";
11+
1012
import "src/decidim/elections/voter/casting-vote";
1113
import "src/decidim/elections/voter/new-vote";
1214
import "src/decidim/elections/voter/verify-vote";

‎decidim-elections/app/packs/src/decidim/elections/voter/new-vote.js‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -15,18 +15,20 @@ $(async () => {
1515
// Use the questions component
1616
const questionsComponent = new VoteQuestionsComponent($voteWrapper);
1717
questionsComponent.init();
18-
// $(document).on("on.zf.toggler", () => {
19-
// // continue and back btn
20-
// questionsComponent.init();
21-
// });
18+
19+
// Activates the events associated to the forms after show a new step
20+
$(document).on("on:toggle", () => questionsComponent.init());
2221

2322
// Get the vote component and bind it to all UI events
2423
const voteComponent = setupVoteComponent($voteWrapper);
24+
2525
await voteComponent.bindEvents({
2626
onBindEncryptButton(onEventTriggered) {
2727
$(".button.confirm").on("click", onEventTriggered);
2828
},
29-
onStart() {},
29+
onStart() {
30+
console.log("start");
31+
},
3032
onVoteEncryption(validVoteFn) {
3133
const getFormData = (formData) => {
3234
return formData.serializeArray().reduce((acc, { name, value }) => {
@@ -41,9 +43,9 @@ $(async () => {
4143
validVoteFn(formData, ballotStyleId);
4244
},
4345
castOrAuditBallot({ encryptedData, encryptedDataHash }) {
44-
$voteWrapper.find("#encrypting").attr("hidden", true);
46+
$voteWrapper.find("#step-encrypting").attr("hidden", true);
4547
$ballotHash.text(encryptedDataHash);
46-
$voteWrapper.find("#ballot_decision").attr("hidden", false);
48+
$voteWrapper.find("#step-ballot_decision").attr("hidden", false);
4749

4850
const $form = $("form.new_vote");
4951
$("#vote_encrypted_data", $form).val(encryptedData);

‎decidim-elections/app/packs/src/decidim/elections/voter/vote_questions.component.js‎

Lines changed: 49 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -29,11 +29,18 @@ export default class VoteQuestionsComponent {
2929
setCurrentStep() {
3030
this.$currentStep = this.$voteWrapper.find('[id^="step"]:not([hidden])')
3131
this.$confirmButton = this.$currentStep.find('[id^="next"]');
32+
3233
this.setSelections();
3334
this.onSelectionChange();
35+
this.updateWizardSteps(this.$currentStep.attr("id"));
3436
}
3537

3638
toggleContinueButton() {
39+
// ignore the button if the step is not a question
40+
if (!this.isQuestion(this.$currentStep.attr("id"))) {
41+
return
42+
}
43+
3744
if (this.checkAnswers()) {
3845
// next step enabled
3946
this.$confirmButton.attr("disabled", false)
@@ -68,14 +75,16 @@ export default class VoteQuestionsComponent {
6875
let checkId = $(event.target).attr("id");
6976
let checkStatus = event.target.checked;
7077

71-
this.$currentStep.find(`[data-disabled-by='#${checkId}']`).each((_index, element) => {
78+
this.$currentStep.find(`[data-disabled-by='${checkId}']`).each((_index, element) => {
79+
const $checkbox = $(element).find("input[type=checkbox]")
80+
7281
if (checkStatus) {
73-
$(element).addClass("is-disabled");
74-
$(element).find("input[type=checkbox]").prop("checked", false);
75-
$(element).find("input[type=checkbox]").attr("aria-disabled", "");
82+
$checkbox.prop("disabled", true);
83+
$checkbox.prop("checked", false);
84+
$(element).attr("aria-disabled", true);
7685
} else {
77-
$(element).removeClass("is-disabled");
78-
$(element).find("input[type=checkbox]").removeAttr("aria-disabled");
86+
$checkbox.prop("disabled", false);
87+
$(element).removeAttr("aria-disabled");
7988
}
8089
});
8190
});
@@ -94,6 +103,40 @@ export default class VoteQuestionsComponent {
94103
});
95104
}
96105

106+
updateWizardSteps(id) {
107+
const wizard = document.getElementById("wizard-steps")
108+
109+
// this step has no heading 🤷‍♀️
110+
if (id === "step-encrypting") {
111+
document.getElementById("heading").hidden = true
112+
113+
return
114+
}
115+
116+
document.getElementById("heading").hidden = false
117+
118+
if (wizard) {
119+
let selector = id
120+
121+
if (this.isQuestion(id)) {
122+
selector = "step-election"
123+
}
124+
125+
wizard.querySelectorAll("[data-step]").forEach((element) => {
126+
if (element.dataset.step === selector) {
127+
element.setAttribute("aria-current", "step")
128+
} else {
129+
element.removeAttribute("aria-current")
130+
}
131+
})
132+
}
133+
}
134+
135+
// the question ids always end with a number
136+
isQuestion(id) {
137+
return (/[0-9]+$/).test(id);
138+
}
139+
97140
// receive confirmed answers
98141
toggleConfirmAnswers() {
99142
$(".answer_input:checked").each((_index, element) => {

‎decidim-elections/app/packs/stylesheets/decidim/elections/elections.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,10 @@
8282
.election-question{
8383
@apply block rounded p-4 border-4 border-background flex items-center text-lg text-gray-2 hover:border-tertiary focus:border-tertiary cursor-pointer;
8484

85+
&[aria-disabled="true"]{
86+
@apply text-gray cursor-not-allowed hover:border-background focus:border-background;
87+
}
88+
8589
&__counter{
8690
@apply font-semibold text-black text-lg bg-tertiary inline-block;
8791
}

‎decidim-elections/app/views/decidim/elections/trustee_zone/trustees/show.html.erb‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<%= stylesheet_pack_tag "decidim_elections_trustee_zone", media: "all" %>
1+
<%= stylesheet_pack_tag "decidim_elections", media: "all" %>
22

33
<div id="not_supported_browser" class="callout alert">
44
<p><strong><%= t(".not_supported_browser_title") %></strong></p>

‎decidim-elections/app/views/decidim/elections/votes/_new_confirm_step.html.erb‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@
4747
class: "button button__sm md:button__lg button__transparent-secondary",
4848
id: "back-step-#{questions_count - 1}",
4949
data: {
50-
toggle: ["step-#{questions_count - 1}", "confirm"].join(" ")
50+
toggle: ["step-#{questions_count - 1}", "step-confirm"].join(" ")
5151
}
5252
) %>
5353

@@ -56,7 +56,7 @@
5656
type: "button",
5757
id: "next-encrypting",
5858
data: {
59-
toggle: ["encrypting", "confirm"].join(" ")
59+
toggle: ["step-encrypting", "step-confirm"].join(" ")
6060
},
6161
) do %>
6262
<span><%= t("decidim.elections.votes.confirm.confirm") %></span>

‎decidim-elections/app/views/decidim/elections/votes/_new_question.html.erb‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<div id="<%= dom_id(question) %>" class="election-question__container" data-max-selection="<%= question.max_selections %>" data-min-selection="<%= question.min_selections %>">
22
<% ordered_answers(question).each do |answer| %>
3-
<%= label_tag nil, data: { "disabled-by": "#check-nota" }, class: "election-question" do %>
3+
<%= label_tag nil, data: { "disabled-by": "check-nota" }, class: "election-question" do %>
44
<% if question.max_selections == 1 %>
55
<%= radio_button_tag question.slug, answer.slug, false, class: "answer_input" %>
66
<% else %>

‎decidim-elections/app/views/decidim/elections/votes/new.html.erb‎

Lines changed: 15 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -18,13 +18,19 @@
1818
data-ballot-style-id="<%== ballot_style_id %>"
1919
<% end %>>
2020

21-
<div class="flex justify-center">
22-
<h1 class="h1 decorator my-12">
23-
<%= t("vote_for", scope: "decidim.elections.votes.header", title: translated_attribute(election.title) ) %>
24-
</h1>
25-
</div>
21+
<div id="heading">
22+
<div class="flex justify-center">
23+
<h1 class="h1 decorator my-12">
24+
<%= t("vote_for", scope: "decidim.elections.votes.header", title: translated_attribute(election.title) ) %>
25+
</h1>
26+
</div>
2627

27-
<%= wizard_steps(@step) %>
28+
<ol id="wizard-steps" class="wizard-steps">
29+
<% ["register", "election", "confirm", "ballot_decision"].each_with_index do |wizard_step, i| %>
30+
<li data-step="step-<%= wizard_step %>" <%= "aria-current=step" if i.zero? %>><%= t(wizard_step, scope: "decidim.elections.votes.header") %></li>
31+
<% end %>
32+
</ol>
33+
</div>
2834

2935
<% questions.each_with_index do |step_question, step_index| %>
3036
<div id="step-<%= step_index %>" <%= "hidden" unless step_index.zero? %>>
@@ -65,18 +71,18 @@
6571
</div>
6672
<% end %>
6773

68-
<div id="confirm" hidden>
74+
<div id="step-confirm" hidden>
6975
<%= render(
7076
"new_confirm_step",
7177
questions: questions
7278
) %>
7379
</div>
7480

75-
<div id="encrypting" hidden>
81+
<div id="step-encrypting" hidden>
7682
<%= render("new_encrypting_step") %>
7783
</div>
7884

79-
<div id="ballot_decision" hidden>
85+
<div id="step-ballot_decision" hidden>
8086
<%= render("new_ballot_decision_step") %>
8187
</div>
8288
</div>

0 commit comments

Comments
 (0)