From 2ca0074aaf5336a27ba4f3e5cd5f1b5caadaa5de Mon Sep 17 00:00:00 2001
From: Benoit Alessandroni <benoit@happy-dev.fr>
Date: Sat, 12 Sep 2020 19:54:47 +0200
Subject: [PATCH] bugfix: Fixing the JS associated with the css fixe
---
css/main.css | 6 +-
js/main.js | 232 ++++++++++++++++------------------
js/{polls-math.js => math.js} | 70 +++++-----
sib-polls.js | 31 +++--
4 files changed, 164 insertions(+), 175 deletions(-)
rename js/{polls-math.js => math.js} (79%)
diff --git a/css/main.css b/css/main.css
index 9b9b367..30554fe 100644
--- a/css/main.css
+++ b/css/main.css
@@ -564,7 +564,7 @@ vote side
}
-.pollPage solid-display#poll-votes-values div{
+.pollPage solid-display.poll-votes-values div{
flex-direction: column;
}
@@ -585,14 +585,14 @@ vote side
/*save my vote*/
-.pollPage #poll-votes-form input[type="submit"]{
+.pollPage .poll-votes-form input[type="submit"]{
font-weight: bold;
text-transform: uppercase;
font-size: 13px;
padding: var(--buttons-padding);
}
/*customise disabled button*/
-.pollPage #poll-votes-form input[type="submit"]:disabled{
+.pollPage .poll-votes-form input[type="submit"]:disabled{
opacity: 0.8;
cursor: auto;
}
diff --git a/js/main.js b/js/main.js
index 99628be..a34929a 100644
--- a/js/main.js
+++ b/js/main.js
@@ -4,55 +4,67 @@
the polls-math.js file
==========================*/
-firstLoad()
-
-function firstLoad(){
- let firstElement = document.querySelector("solid-display");
- //console.log("Main.js : elements loaded are",firstElement);
+export function mainFirstLoad(idPrefix) {
+ const baseElement = document.getElementById(idPrefix + "-pollPage");
+ if (!baseElement){
+ console.log("no elements yet");
+ setTimeout(() => {
+ mainFirstLoad(idPrefix);
+ }, 500);
+ } else {
+ console.log(baseElement, idPrefix + "-pollPage")
+ let firstElement = baseElement.querySelector("solid-display");
+ //console.log("Main.js : elements loaded are",firstElement);
- if (!firstElement) throw "no elements yet";
+ if (!firstElement) throw "no elements yet";
- //listeners for all forms
- const allForms = document.querySelectorAll("solid-form[id]");
- allForms.forEach(form => {
- form.addEventListener("populate",()=> {
- //console.log("form loaded",form);
- globalFormSumbitListener();
+ //listeners for all forms
+ const allForms = baseElement.querySelectorAll("solid-form[id]");
+ allForms.forEach(form => {
+ form.addEventListener("populate",()=> {
+ //console.log("form loaded",form);
+ globalFormSubmitListener();
+ });
});
- });
- //Listener for voting form
- document.querySelector("solid-form#poll-votes-form").addEventListener("populate",()=> {
- //console.log("Vote form is populating");
- disableVotes();
- });
+ // const formBaseElement = document.getElementById(idPrefix + "-pollPage");
- function globalFormSumbitListener(){
- //event listener on all forms
- let submitButtons = document.querySelectorAll("input[type=submit]");
- submitButtons.forEach(button => {
- //listen on click & not submit to be able to check the data in the form
- button.addEventListener("click",()=>{
- let clickedFormId = button.parentElement.parentElement.id;
- //console.log("form id of click is :",clickedFormId);
- checkFormValidity(clickedFormId);
+ //Listener for voting form
+ baseElement.querySelectorAll("solid-form.poll-votes-form")[0].addEventListener("populate",()=> {
+ //console.log("Vote form is populating");
+ setTimeout( function() {
+ disableVotes(baseElement);
});
});
+
+ function globalFormSubmitListener(){
+ //event listener on all forms
+ let submitButtons = baseElement.querySelectorAll("input[type=submit]");
+ submitButtons.forEach(button => {
+ //listen on click & not submit to be able to check the data in the form
+ button.addEventListener("click",()=>{
+ let clickedFormId = button.parentElement.parentElement.id;
+ //console.log("form id of click is :",clickedFormId);
+ checkFormValidity(clickedFormId);
+ });
+ });
+ }
}
};
/* ===================
JS For Tabs
================== */
-function showHideBlocks(activeCTAClass,inactiveCTAClass,diplayBlockClass,hideBlockClass,styleWanted){
+function showHideBlocks(baseElementName, activeCTAClass,inactiveCTAClass,diplayBlockClass,hideBlockClass,styleWanted){
+ const baseElement = document.getElementById(baseElementName);
//get all blocks
- activeCTAClass = document.querySelectorAll(activeCTAClass);
- inactiveCTAClass = document.querySelectorAll(inactiveCTAClass);
- targetBlockToDiplay = document.querySelectorAll(diplayBlockClass);
- hideBlockClass = document.querySelectorAll(hideBlockClass);
+ activeCTAClass = baseElement.querySelectorAll(activeCTAClass);
+ inactiveCTAClass = baseElement.querySelectorAll(inactiveCTAClass);
+ targetBlockToDiplay = baseElement.querySelectorAll(diplayBlockClass);
+ hideBlockClass = baseElement.querySelectorAll(hideBlockClass);
//show wanted blocks
- for (i = 0; i < targetBlockToDiplay.length; i++) {
+ for (let i = 0; i < targetBlockToDiplay.length; i++) {
if (targetBlockToDiplay[i].style.display == 'none' || targetBlockToDiplay[i].style.display == '' ) {
targetBlockToDiplay[i].style.display = styleWanted;
}
@@ -89,7 +101,7 @@ function newOptionContent(){
//get options section
let options = document.querySelectorAll("solid-multiple-form[name=pollOptions]");
//console.log("options : ",options);
- for(i = 0; i < options.length; i++) {
+ for(let i = 0; i < options.length; i++) {
let button = options[i].querySelectorAll("button");
//console.log("button : ",options[i].querySelectorAll("button").textContent);
@@ -113,7 +125,7 @@ function newOptionContent(){
***********/
function checkFormValidity(clickedFormId){
let formId = clickedFormId;
- let form = document.querySelector("solid-form[id="+formId+"]");
+ let form = document.querySelectorAll("solid-form[class="+formId+"]")[0];
//console.log("current form id is : ",formId);
var currenErrors = [];
//console.log("errors are", currenErrors);
@@ -142,41 +154,6 @@ function newOptionContent(){
&& !emailPlaceholder.includes(electedText)
================================*/
- /***********
- check email format
- ***********/
- function CheckEmailFormat(){
- var emailRegEx = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
-
- allFields = form.querySelectorAll("input");
- for (i = 0; i < allFields.length; i++) {
-
- emailPlaceholder = (allFields[i].placeholder).toLowerCase();
- emailText = "email";
- electedText = "élu";
-
- emailValue = allFields[i].value;
- if (emailPlaceholder.includes(emailText)) {
-
- if (emailPlaceholder.includes(electedText)) {
- //console.log("elected field");
- }
-
- //if elected official field, pass by
-
- //if email feild && not empty, check value
- else if (emailRegEx.test(emailValue) == false && emailValue.length != 0 && !(emailPlaceholder.includes(electedText)) ) {
- currenErrors.push("Le format de votre adresse email contient une erreur");
- event.preventDefault();
- }
-
- else{
- //console.log("not an elected official form");
- }
- }
- }
- }
-
/***********
check the mandatory fields
***********/
@@ -264,71 +241,74 @@ function newOptionContent(){
/***********
disable voting if the startdate hasn't arrived or if the enddate has passed
***********/
-function disableVotes(){
- let errorMessage = document.querySelector("#unavailablePoll");
- if(!errorMessage == "" ) throw "Not displaying message as it exists";
+function disableVotes(baseElement){
+ let errorMessage = baseElement.querySelectorAll("div.unavailablePoll")[0];
+ console.log('Error Message', baseElement, errorMessage);
+ if (errorMessage) return;
//get start date & end date
- let currentPoll = document.querySelector("[id=pollPage]");
- //console.log("current poll is :", currentPoll);
- //console.log("startdate block is :", currentPoll.querySelector("solid-display-date[name=startDate]"));
- let dateSeparator = "/";
- let displayStartDate = currentPoll.querySelector("solid-display-date[name=startDate]").textContent;
- startDate = displayStartDate.split("/");
- let displayEndDate = currentPoll.querySelector("solid-display-date[name=endDate]").textContent;
- let cleanEndDate = displayEndDate.split("/");
-
- cleanStartDate = startDate[1] +dateSeparator + startDate[0] +dateSeparator + startDate[2];
- cleanEndDate = cleanEndDate[1] +dateSeparator + cleanEndDate[0] +dateSeparator + cleanEndDate[2];
+ // let currentPoll = baseElement.querySelector("[id=pollPage]");
+ console.log("current poll is :", baseElement);
+ setTimeout(function() {
+ let dateSeparator = "/";
+ let displayStartDate = baseElement.querySelector("solid-display-date[name=startDate]").textContent;
+ let startDate = displayStartDate.split("/");
+ let displayEndDate = baseElement.querySelector("solid-display-date[name=endDate]").textContent;
+ let endDate = displayEndDate.split("/");
+
+ let cleanStartDate = startDate[1] + dateSeparator + startDate[0] + dateSeparator + startDate[2];
+ let cleanEndDate = endDate[1] + dateSeparator + endDate[0] + dateSeparator + endDate[2];
- let comparisonStartDate = Date.parse(cleanStartDate);
- let comparisonEndDate = Date.parse(cleanEndDate);
+ let comparisonStartDate = Date.parse(cleanStartDate);
+ let comparisonEndDate = Date.parse(cleanEndDate);
- //set current date
- let today = new Date();
- let date = (today.getMonth()+1)+'/'+today.getDate()+'/'+today.getFullYear();
- date = Date.parse(date);
-
- console.log("startdate is",comparisonStartDate,'endate is',comparisonEndDate, "dateis",date);
-
- //get the submit button
- let votingSection = document.querySelector("#poll-votes-form");
- let submitButton = votingSection.querySelector("input[type=submit]");
-
- if (comparisonStartDate > date) {
- let errorMessage = "This poll hasn't started yet, you can start voting on :" + displayStartDate+".";
- deactivateButton(errorMessage);
- } else if(comparisonEndDate < date) {
- let errorMessage = "This poll is closed since : " + displayEndDate+".";
- deactivateButton(errorMessage);
- }
- else if(comparisonEndDate = date) {
- let errorMessage = "Today is the last day to vote!";
- activateButton();
- }
- else{
- activateButton();
- }
- //add deactivate attribute if needed
- function deactivateButton(errorMessage){
- submitButton.setAttribute("disabled",true);
- submitButton.insertAdjacentHTML('afterend', '<div id="unavailablePoll">'+errorMessage+'</div>');
- //console.log(submitButton);
- }
- //activate button & remove message
- function activateButton(){
- submitButton.setAttribute("enabled",true);
- if (submitButton.nextElementSibling) {
- submitButton.nextElementSibling.remove();
- }
- }
+ //set current date
+ let today = new Date();
+ let date = (today.getMonth()+1)+'/'+today.getDate()+'/'+today.getFullYear();
+ date = Date.parse(date);
+
+ console.log("startdate is",comparisonStartDate,'endate is',comparisonEndDate, "dateis",date);
+
+ //get the submit button
+ let votingSection = baseElement.querySelectorAll(".poll-votes-form")[0];
+ let submitButton = votingSection.querySelector("input[type=submit]");
+
+ if (comparisonStartDate > date) {
+ let errorMessage = "This poll hasn't started yet, you can start voting on :" + displayStartDate+".";
+ deactivateButton(errorMessage);
+ } else if(comparisonEndDate < date) {
+ let errorMessage = "This poll is closed since : " + displayEndDate+".";
+ deactivateButton(errorMessage);
+ }
+ else if(comparisonEndDate = date) {
+ let errorMessage = "Today is the last day to vote!";
+ activateButton();
+ }
+ else{
+ activateButton();
+ }
+ //add deactivate attribute if needed
+ function deactivateButton(errorMessage){
+ submitButton.setAttribute("disabled",true);
+ submitButton.insertAdjacentHTML('afterend', '<div class="unavailablePoll">'+errorMessage+'</div>');
+ //console.log(submitButton);
+ }
+ //activate button & remove message
+ function activateButton(){
+ submitButton.setAttribute("enabled",true);
+ if (submitButton.nextElementSibling) {
+ submitButton.nextElementSibling.remove();
+ }
+ }
+ });
}
/*
SHARE POLL BY EMAIL
*/
-function sharePollEmail(){
- let shareEmails = document.querySelector("#share-emails").value;
+function sharePollEmail(baseElementName){
+ const baseElement = document.getElementById(baseElementName);
+ let shareEmails = baseElement.querySelectorAll(".share-emails")[0].value;
let emailTitle = document.querySelector("h1").innerText;
let emailSubject = "Donnez votre avis sur " + emailTitle;
let pollURL = window.location.href;
diff --git a/js/polls-math.js b/js/math.js
similarity index 79%
rename from js/polls-math.js
rename to js/math.js
index 004083e..f721583 100644
--- a/js/polls-math.js
+++ b/js/math.js
@@ -10,63 +10,67 @@
* Update on navigate
*********/
-firstLoad();
+export function mathFirstLoad(baseElementId){
+ const baseElement = document.getElementById(baseElementId);
-function firstLoad(){
- let elementsLoaded = document.querySelector("solid-poll,solid-display");
- //console.log("elements loaded are",elementsLoaded);
-
- if (!elementsLoaded){
- console.log("no elements yet");
+ if (!baseElement){
+ console.log("no elements yet", baseElementId);
setTimeout(() => {
- firstLoad();
+ mathFirstLoad(baseElementId);
}, 500);
}
else{
+ console.log("baseElementId", baseElementId);
+ let elementsLoaded = baseElement.querySelectorAll("solid-display")[0];
+ console.log("elements loaded are",elementsLoaded);
+
const dataSourceURI = elementsLoaded.dataset.src;
const urlComponents = new URL(dataSourceURI);
const dataSourceDomain = urlComponents.origin;
- //console.log("the data domain is",dataSourceDomain);
- //console.log("elements are there, updating id's");
+ console.log("the data domain is",dataSourceDomain);
+ console.log("elements are there, updating id's");
- document.querySelector("div#polls solid-display").addEventListener("populate",()=> {
+ baseElement.querySelector("div#polls solid-display").addEventListener("populate",()=> {
//when populate of a poll
//console.log("poll page");
- getPollTotalInfo(dataSourceDomain);
+ getPollTotalInfo(baseElement, dataSourceDomain);
});
-
- document.querySelector("solid-form[name=addPoll]").addEventListener("populate",()=> {
+ console.log("baseElement", baseElement);
+ baseElement.parentElement.querySelector("solid-form[name=addPoll]").addEventListener("populate",()=> {
//console.log("populating add form");
- newOptionContent();
+ // setTimeout(function() {
+ newOptionContent(baseElement.parentElement);
+ // });
});
/*****
Updates on navigate
*/
- document.querySelector("solid-router").addEventListener("navigate",()=> {
+ baseElement.parentElement.querySelector("solid-router").addEventListener("navigate",()=> {
//console.log("navigating");
- getPollTotalInfo(dataSourceDomain);
+ getPollTotalInfo(baseElement, dataSourceDomain);
updateFormSource();
});
//refresh display of total votes on a poll
- document.querySelector("#poll-votes-values").addEventListener("populate",() => {
+ baseElement.parentElement.querySelectorAll(".poll-votes-values")[0].addEventListener("populate",() => {
//console.log("populating");
refreshTotalVotes();
});
//refresh total votes when user votes
- document.querySelector("solid-form#poll-votes-form").addEventListener("save",()=> {
- refreshVoteDataSrc();
+ baseElement.parentElement.querySelectorAll("solid-form.poll-votes-form")[0].addEventListener("save",()=> {
+ refreshVoteDataSrc(baseElement);
});
/*********
* Get info on the current poll
*********/
- function getPollTotalInfo(dataSourceDomain){
+ function getPollTotalInfo(baseElement, dataSourceDomain){
//get value of data-scr linked to poll page
- const pollPage = document.querySelector("#pollPage");
- const pageTitle = pollPage.querySelectorAll("solid-display[id=title]");
+ console.log("baseElement", baseElement);
+ const pollPage = baseElement.parentElement.querySelectorAll(".pollPage")[0];
+ const pageTitle = pollPage.querySelectorAll("solid-display[class=title]")[0];
////console.log("page title is",pageTitle);
//console.log("getting total poll info for the domaine",dataSourceDomain);
@@ -114,12 +118,12 @@ function firstLoad(){
function setCurrentPollOptions(dataSourceDomain,currentPage,currentId){
//add the poll option number within the URL of the options
//get the form block
- const formContent = currentPage.querySelector("[id=poll-votes-form]");
+ const formContent = currentPage.querySelectorAll("[class=poll-votes-form]")[0];
console.log("form is",formContent);
- if(formContent == null){
+ if (formContent == null) {
throw "there's no formContent with the id poll-votes-form";
}
- else{
+ else {
//get the range for option choices
const newOptionRange = dataSourceDomain+"/polls/"+currentId+"/pollOptions/";
//push new
@@ -196,13 +200,13 @@ function firstLoad(){
Refresh vote results when someone submits a vote
***********************/
- function refreshVoteDataSrc(){
+ function refreshVoteDataSrc(baseElement){
let pollTotalVotes = document.querySelector("solid-display#poll-votes-values");
pollTotalVotes.dataset.src = pollTotalVotes.dataset.src+"?"+Date.now();
//math.random() to break sib cache and actually get now values
////console.log("after the string is",pollTotalVotes.dataset.src);
- getPollTotalInfo(dataSourceDomain);
- refreshTotalVotes();
+ getPollTotalInfo(baseElement, dataSourceDomain);
+ refreshTotalVotes(baseElement);
}
}
}
@@ -257,11 +261,11 @@ function displayTotalVotes(poll,totalCount){
* Open by default 2 options
================== */
//change content of button
-function newOptionContent(){
+function newOptionContent(baseElement){
//get options section
- let options = document.querySelectorAll("solid-multiple-form[name=pollOptions]");
- //console.log("options : ",options);
- for(i = 0; i < options.length; i++) {
+ let options = baseElement.querySelectorAll("solid-multiple-form[name=pollOptions]")[0];
+ console.log("options : ",options);
+ for(let i = 0; i < options.length; i++) {
let button = options[i].querySelectorAll("button");
//console.log("button : ",options[i].querySelectorAll("button").textContent);
diff --git a/sib-polls.js b/sib-polls.js
index ca27174..bdf2fb6 100644
--- a/sib-polls.js
+++ b/sib-polls.js
@@ -1,5 +1,8 @@
import { SolidTemplateElement, Helpers } from 'https://unpkg.com/@startinblox/core@0.10';
import { SIBConversation } from "https://unpkg.com/@startinblox/component-conversation@0.5";
+import { mathFirstLoad } from './js/math.js';
+import { mainFirstLoad } from './js/main.js';
+
/*
WORKAROUT NOTE :
*All data-src or range URL's hard coded in the component with a 127.0.0.1 :
@@ -14,11 +17,6 @@ Helpers.importCSS("https://cdn.materialdesignicons.com/3.6.95/css/materialdesign
Helpers.importCSS(`${base_url}/css/main.css`);
Helpers.importJS('https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js');
-document.addEventListener("DOMContentLoaded", ()=> {
- Helpers.importJS(`${base_url}/js/main.js`);
- Helpers.importJS(`${base_url}/js/polls-math.js`);
-});
-
export class SolidPoll extends SolidTemplateElement {
constructor() {
super();
@@ -72,8 +70,15 @@ export class SolidPoll extends SolidTemplateElement {
if (!dataSrc) return '';
if (!idPrefix) idPrefix = "default"
let sourceUrl = dataSrc + (nestedField ? nestedField + '/' : '');
+
+ document.addEventListener("DOMContentLoaded", ()=> {
+ Helpers.importJS(`${base_url}/js/main.js`);
+ Helpers.importJS(`${base_url}/js/math.js`);
+ mainFirstLoad(idPrefix);
+ mathFirstLoad(idPrefix + '-pollListing');
+ });
+
return `
-
<solid-router use-hash default-route="${idPrefix}-pollListing">
<solid-route class="d-none" name="${idPrefix}-pollListing" active=""></solid-route>
<solid-route use-id name="${idPrefix}-pollPage"></solid-route>
@@ -128,11 +133,11 @@ export class SolidPoll extends SolidTemplateElement {
<div id="${idPrefix}-pollPage" class="pollPage">
<!--Title-->
<solid-display
- id="title"
- bind-resources
- fields="title"
- related-field=""
- widget-title="solid-display-h1"
+ class="title"
+ bind-resources
+ fields="title"
+ related-field=""
+ widget-title="solid-display-h1"
>
</solid-display>
@@ -198,8 +203,8 @@ export class SolidPoll extends SolidTemplateElement {
<div class="voteCounter">
<h3 id="totalVotesDisplay"></h3>
</div>
- <solid-display
- id="poll-votes-values"
+ <solid-display
+ class="poll-votes-values"
data-src="${sourceUrl}total_votes/1/"
fields="row1(choiceValue,name), total_votes,progressBar"
--
GitLab