decidim-elections 0.22.0 → 0.23.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c8ce79876fbac611d30571cad4cf2e451e774d757aef8db6ac626e1150cf7d1b
-  data.tar.gz: 4b323700709a0c42ca51269fefcb23bcfed7325075af7ea42ee7f7889ab19bc1
+  metadata.gz: 8aa245d79cc6f29e504c2da89b7b84fb2653013e777e8e5213b94e75a196deb8
+  data.tar.gz: 52ad70fec46cf00e6559908d2ad27249a8009d55aaf5248a24146702db986a71
 SHA512:
-  metadata.gz: 0f252f309ef75a273938ac811d9b1ec6493b272ee3b9916debadf7d41e0f5b0c03ce2250128b46f615046a24c868bb3286316b930390261b19970f470fe8e68c
-  data.tar.gz: 54db270fd7447ab0d6f0e541b84766d23fa89beb05c37eebfb403a4b480c0c55b66b905a2a5815187ce352df5c959850bb24b96a1b3edc9f3331cc90d51a1789
+  metadata.gz: 178582a83f6078448a5c64a6f4d2994c326d7f18d8ae0083e49fa8145ac0627d5c54d57a82f30e8027e3c8ea5bd9fc8f3ed4e5373d4248565997bf131ff1bfca
+  data.tar.gz: f7910f739ef98c6dce4ce117ea36830fc02f40dcbedb365ef3bb6927d02d05741b40697bd31fd158dcf2473d74a394bc2cc27457937988d151b7eca0a1bd3e00

data/app/assets/config/decidim_elections_manifest.js

@@ -0,0 +1,2 @@
+//= link decidim/elections/vote.js
+//= link_tree ../images/decidim

data/app/assets/javascripts/decidim/elections/vote.js.es6

@@ -0,0 +1,170 @@
+/* eslint-disable require-jsdoc, prefer-template, func-style, id-length, no-use-before-define, init-declarations, no-invalid-this */
+/* eslint no-unused-vars: ["error", { "args": "none" }] */
+
+$(() => {
+  const $vote = $(".focus");
+  const $continueButton = $vote.find("a.focus__next");
+  const $confirmButton = $vote.find("a.focus__next.confirm");
+  const $continueSpan = $vote.find("span.disabled-continue");
+  let $answerCounter = 0;
+  let $currentStep,
+      $currentStepMaxSelection = "";
+  let $formData = $vote.find(".answer_input");
+
+  function initStep() {
+    setCurrentStep();
+    toggleContinueButton();
+    $($confirmButton).addClass("show").removeClass("hide");
+    $(".evote__counter-min").text($answerCounter);
+    answerCounter();
+    disableCheckbox();
+  }
+
+  initStep()
+
+  function setCurrentStep() {
+    $currentStep = $vote.find(".focus__step:visible")
+    setSelections();
+    onSelectionChange();
+  }
+
+  function setSelections() {
+    $currentStepMaxSelection = $currentStep.find(".evote__options").data("max-selection")
+  }
+
+  function onSelectionChange() {
+    let $voteOptions = $currentStep.find(".evote__options");
+    $voteOptions.on("change", (event) => {
+      toggleContinueButton();
+      toggleConfirmAnswers();
+      answerCounter();
+    });
+  }
+
+  // disable checkboxes if NOTA option is selected
+  function disableCheckbox() {
+    $("[data-disabled-by]").on("click", function(e) {
+      if ($(this).attr("aria-disabled") || $(this).hasClass("is-disabled")) {
+        e.preventDefault();
+      }
+    });
+
+    $("[data-disable-check]").on("change", function() {
+      let checkId = $(this).attr("id");
+      let checkStatus = this.checked;
+
+      $($currentStep).find("[data-disabled-by='#" + checkId + "']").each(function() {
+        if (checkStatus) {
+          $(this).addClass("is-disabled");
+          $(this).find("input[type=checkbox]").prop("checked", false);
+        } else {
+          $(this).removeClass("is-disabled");
+        }
+
+        $(this).find("input[type=checkbox]").attr("aria-disabled", checkStatus);
+      });
+    });
+  }
+
+  function toggleContinueButton() {
+    if (checkAnswers() === true) {
+      // next step enabled
+      $($continueButton).addClass("show").removeClass("hide")
+      $($continueSpan).addClass("hide").removeClass("show")
+    } else {
+      // next step disabled
+      $($continueButton).addClass("hide").removeClass("show")
+      $($continueSpan).addClass("show").removeClass("hide")
+    }
+  }
+
+  // check if answers are correctly checked
+  function checkAnswers() {
+    let currentAnswersChecked = $("#" + $currentStep.attr("id") + " .answer_input:checked").length
+    let notaAnswerChecked = $("#" + $currentStep.attr("id") + " .nota_input:checked").length
+
+    if ((currentAnswersChecked >= 1 || notaAnswerChecked > 0) && (currentAnswersChecked <= $currentStepMaxSelection)) {
+      return true;
+    }
+
+    return false;
+  }
+
+  // receive confirmed answers
+  function toggleConfirmAnswers() {
+    $(".answer_input:checked").each(function() {
+      let confirmedAnswer = $(".evote__confirm").find("#" + this.value);
+      $(confirmedAnswer).removeClass("hide")
+    })
+
+    $(".answer_input").not(":checked").each(function() {
+      let confirmedAnswer = $(".evote__confirm").find("#" + this.value);
+      $(confirmedAnswer).addClass("hide")
+    })
+
+    $(".nota_input:checked").each(function() {
+      let confirmedAnswer = $(".evote__confirm").find("." + this.value);
+      $(confirmedAnswer).removeClass("hide")
+    })
+
+    $(".nota_input").not(":checked").each(function() {
+      let confirmedAnswer = $(".evote__confirm").find("." + this.value);
+      $(confirmedAnswer).addClass("hide")
+    })
+  }
+
+  function answerCounter() {
+    let checked = $("#" + $currentStep.attr("id") + " .answer_input:checked").length
+    $(".evote__counter-min").text(checked);
+  }
+
+  // get form Data
+  function getFormData(formData) {
+    let unindexedArray = formData.serializeArray();
+    let indexedArray = {};
+    $.map(unindexedArray, function(n, i) {
+      indexedArray[n.name] = n.value;
+    });
+
+    return indexedArray;
+  }
+
+  // confirm vote
+  $(".button.confirm").on("click", (event) => {
+    const boothMode = $(event.currentTarget).data("booth-mode");
+    const formData = getFormData($formData);
+    castVote(boothMode, formData)
+  });
+
+  // cast vote
+  function castVote(boothMode, formData) {
+    // log form Data
+    console.log(`Your vote got encrypted successfully. The booth mode is ${boothMode}. Your vote content is:`, formData) // eslint-disable-line no-console
+
+    window.setTimeout(function() {
+      $($vote).find("#encrypting").addClass("hide")
+      $($vote).find("#confirmed_page").removeClass("hide")
+      window.confirmed = true;
+    }, 3000)
+  }
+
+  // exit message before confirming
+  const $form = $(".evote__options");
+  if ($form.length > 0) {
+
+    window.onbeforeunload = () => {
+      const voteCast = window.confirmed;
+
+      if (voteCast) {
+        return null;
+      }
+
+      return "";
+    }
+  }
+
+  $(document).on("on.zf.toggler", (event) => {
+    // continue and back btn
+    initStep()
+  });
+});

data/app/assets/stylesheets/decidim/elections/elections.scss

@@ -0,0 +1,10 @@
+@import "focus/*";
+
+li.card-data__item{
+  flex-direction: inherit;
+}
+
+.card__icondata ul li:not(:first-child) strong,
+.card__block ul li:not(:first-child) strong{
+  font-size: 100%;
+}

data/app/assets/stylesheets/decidim/elections/focus/_evote.scss

@@ -0,0 +1,279 @@
+.evote{
+  $checkfocus: 1px dotted rgba(black, .5);
+  $checkfocus-offset: .1em;
+
+  padding: 1rem;
+  margin-top: 1rem;
+
+  @include breakpoint(medium){
+    padding: 2rem;
+    margin-top: 2rem;
+  }
+
+  .row{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+  }
+
+  &__content{
+    margin: 1rem auto;
+
+    @include breakpoint(medium){
+      margin: 2rem auto;
+    }
+  }
+
+  &__options{
+    text-align: left;
+    margin: 1rem auto;
+    flex-grow: 1;
+
+    @include breakpoint(medium){
+      margin: 2rem auto;
+    }
+
+    &--boolean{
+      @include breakpoint(medium){
+        display: flex;
+        width: 100%;
+        justify-content: center;
+      }
+
+      > *{
+        flex-basis: 200px;
+        margin-left: 1rem;
+        margin-right: 1rem;
+      }
+    }
+  }
+
+  &__card{
+    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06);
+    padding: 1rem 2rem;
+    border-radius: .5rem;
+    background-color: $white;
+    margin-bottom: 1rem;
+
+    &.is-disabled{
+      background-color: $medium-gray;
+      cursor: not-allowed;
+
+      > *{
+        opacity: .5;
+      }
+    }
+  }
+
+  &__check{
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+
+    @include breakpoint(medium){
+      font-size: 1.2rem;
+    }
+
+    input[type="checkbox"],
+    input[type="radio"]{
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      padding: 0;
+      margin: -1px;
+      overflow: hidden;
+      clip: rect(0, 0, 0, 0);
+      border: 0;
+    }
+
+    [aria-disabled="true"]{
+      pointer-events: none;
+    }
+  }
+
+  &__check-label{
+    position: relative;
+    padding-left: 1em;
+    line-height: 1.4;
+
+    input[type="radio"] + &::before{
+      content: "";
+      width: 1em;
+      height: 1em;
+      border-radius: 50%;
+      border: 1px solid;
+      position: absolute;
+      left: -.7em;
+      top: .2em;
+      color: $secondary;
+    }
+
+    input[type="radio"]:focus + &::before{
+      outline: $checkfocus;
+      outline-offset: $checkfocus-offset;
+    }
+
+    input[type="radio"]:checked + &::after{
+      content: "";
+      width: .7em;
+      height: .7em;
+      border-radius: 50%;
+      background-color: $secondary;
+      position: absolute;
+      left: -.55em;
+      top: .35em;
+    }
+
+    input[type="checkbox"] + &::before{
+      content: "";
+      width: 1em;
+      height: 1em;
+      border: 1px solid;
+      position: absolute;
+      left: -.7em;
+      top: .2em;
+      color: $secondary;
+      border-radius: 3px;
+    }
+
+    input[type="checkbox"]:focus + &::before{
+      outline: $checkfocus;
+      outline-offset: $checkfocus-offset;
+    }
+
+    input[type="checkbox"]:checked + &::before{
+      background-color: $secondary;
+    }
+
+    input[type="checkbox"]:checked + &::after{
+      content: "";
+      width: .3em;
+      height: .6em;
+      position: absolute;
+      left: -.5em;
+      top: .15em;
+      border-width: 0 2px 2px 0;
+      border-style: solid;
+      border-color: $white;
+      transform-origin: bottom left;
+      transform: rotate(45deg);
+    }
+  }
+
+  &__check-extra{
+    display: block;
+    font-size: 60%;
+    text-transform: uppercase;
+    letter-spacing: .01em;
+    font-weight: 600;
+
+    button{
+      font-size: inherit;
+      text-transform: inherit;
+      font-family: inherit;
+    }
+  }
+
+  &__counter{
+    position: sticky;
+    bottom: 2rem;
+    right: 0;
+    margin-left: auto;
+    text-align: right;
+    line-height: 1.2;
+    background-color: $medium-gray;
+    padding: .3rem 1rem;
+    border-radius: $global-radius;
+  }
+
+  &__counter-num{
+    font-size: 1.2em;
+  }
+
+  &__confirm{
+    margin-top: 2rem;
+    max-width: 40em;
+    text-align: left;
+    line-height: 1.2;
+
+    dt{
+      font-weight: 600;
+    }
+
+    dd:not(:last-child){
+      margin-bottom: 2rem;
+    }
+  }
+
+  &__confirm-label{
+    font-size: 80%;
+    text-transform: uppercase;
+    letter-spacing: .01em;
+    color: $primary;
+  }
+
+  &__edit-answer{
+    text-transform: none;
+    letter-spacing: normal;
+  }
+
+  &__encrypting{
+    width: 200px;
+    height: 40px;
+    display: flex;
+    margin: 2rem auto;
+  }
+
+  &__dot{
+    width: 10px;
+    height: 10px;
+    margin: 10px auto;
+    border-radius: 50px;
+    background: $primary;
+
+    &:nth-child(odd){
+      animation: dotTop 1s infinite ease-in-out;
+    }
+
+    &:nth-child(even){
+      animation: dotBottom 1s infinite ease-in-out;
+    }
+
+    @media (prefers-reduced-motion){
+      animation: none !important;
+    }
+
+    @keyframes dotTop{
+      0%{
+        transform: translateY(-15px);
+      }
+
+      50%{
+        transform: translateY(15px);
+      }
+
+      100%{
+        transform: translateY(-15px);
+      }
+    }
+
+    @keyframes dotBottom{
+      0%{
+        transform: translateY(15px);
+      }
+
+      50%{
+        transform: translateY(-15px);
+      }
+
+      100%{
+        transform: translateY(15px);
+      }
+    }
+  }
+
+  &__poll-id{
+    overflow-wrap: anywhere;
+  }
+}