cec-nuxt-lib 0.6.2 → 0.6.4

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "cec-nuxt-lib",
   "configKey": "cec-nuxt-lib",
-  "version": "0.6.2"
+  "version": "0.6.4"
 }

package/dist/runtime/components/cecCanvas.vue

@@ -380,51 +380,66 @@ const makeAddressItem = (prop, text) => {
 const makeQuestions = (data, id) => {
   data.question.forEach((qu, j) => {
     qu.stack = [0];
-    qu.buttons = qu.responseForQuestionComponent.reduce((acc, r, i) => {
-      return (
-        acc +
-        `<div class="col w-auto ps-0 pe-3">
+    if (qu.responseForQuestionComponent.length < 4) {
+      qu.buttons = qu.responseForQuestionComponent.reduce((acc, r, i) => {
+        return (
+          acc +
+          `<div class="col w-auto ps-0 pe-3">
         <button
           type="button"
-          id="${id}_${j}_${i}"
+          id="${data.title}_${qu.question.replace('?', '').replace(/\W/g, '-')}_${r.buttonText.replace(/\W/g, '-')}_${id}_${j}_${i}"
           class="cec-button question-btns"
         >
           ${r.buttonText}
         </button>
       </div>`
+        );
+      }, '');
+    } else {
+      qu.select = qu.responseForQuestionComponent.reduce(
+        (acc, r) => {
+          return `${acc}<option value="${r.buttonText}">${r.buttonText}</option>`;
+        },
+        `<select class="question-select" name="${id}_${j}" id="${data.title.replace(/\W/g, '-')}_${qu.question.trim().replace('?', '').replace(/\W/g, '-')}_select_${id}_${j}"><option value="" disabled selected hidden>Choose an option</option>`
       );
-    }, '');
+      qu.select += '</select>';
+    }
     questions.value.push({ id: id, question: data.question, stack: [0] });
   });
 
-  let buttons = data.question[0].buttons;
+  let inner = data.question[0].select
+    ? `
+    <div id="${id}_buttons">${data.question[0].select}</div>
+    `
+    : `
+    <div class="row row-cols-auto btns-div" id="${id}_buttons">
+    ${data.question[0].buttons}
+    </div>`;
   return `
-  <div class="mt-3 questions">
-    <h2>Answer the questions:</h2>
-    <fieldset class="p-1 mb-3">
-      <legend>${data.entryTitle}</legend>
-      <div class="ps-2 align-items-end question row g-0">
-        <div id="${id}_display">${data.question[0].question}</div>
-        <div class="row row-cols-auto btns-div" id="${id}_buttons">
-          ${buttons}
+    <div class="mt-3 questions">
+      <fieldset class="p-1 mb-3">
+        <legend>${data.entryTitle}</legend>
+        <div class="ps-2 question align-items-middle row g-0">
+          <div class="mb-3" id="${id}_display">${data.question[0].question}
+</div>
+            ${inner}
         </div>
-      </div>
-      <button
-        type="button"
-        class="mt-4 btn btn-light previous"
-        id="${id}_prev"
-      >
-        Previous question
-      </button>
-      <button
-        type="button"
-        class="mt-4 btn btn-light reset"
-        id="${id}_reset"
-      >
-        Restart
-      </button>
-    </fieldset>
-  </div>`;
+        <button
+          type="button"
+          class="mt-4 btn btn-light previous"
+          id="${id}_prev"
+        >
+          Previous question
+        </button>
+        <button
+          type="button"
+          class="mt-4 btn btn-light reset"
+          id="${id}_reset"
+        >
+          Restart
+        </button>
+      </fieldset>
+    </div>`;
 };
 
 const processTime = (str) => {
@@ -744,6 +759,47 @@ canvasHtml = canvasHtml.replace(
 );
 
 onMounted(() => {
+  const getQuInfo = (b) => {
+    let temp = b.id.split('_');
+    let id = temp[3];
+    let q = questions.value.find((e) => e.id === id);
+    if (q) {
+      let myQ = q.question[parseInt(temp[4])];
+      if (temp.length === 6) {
+        let resp = myQ.responseForQuestionComponent[parseInt(temp[5])];
+        let content = resp.display;
+        let target = resp.id;
+        return { content, target, id };
+      } else {
+        return { q: myQ, id: b.id, divId: id };
+      }
+    }
+  };
+
+  const setSelectBehaviour = (e) => {
+    let { q, id, divId } = getQuInfo(e);
+    let value = document.getElementById(id).value;
+    let resp = q.responseForQuestionComponent.find(
+      (r) => r.buttonText === value
+    );
+    let content = resp.display;
+    let target = resp.id;
+    if (content) {
+      display(divId, content);
+    } else if (target) {
+      goto(divId, target);
+    }
+  };
+
+  const setOnClick = (b) => {
+    let { content, target, id } = getQuInfo(b);
+    if (content) {
+      b.onclick = () => display(id, content);
+    } else if (id) {
+      b.onclick = () => goto(id, target);
+    }
+  };
+
   // Expand all buttons
   const expandAll = (btn) => {
     btn.addEventListener('click', (e) => {
@@ -758,6 +814,7 @@ onMounted(() => {
     expandAll(b);
   });
 
+  // Forms title & path
   let forms = Array.from(document.querySelectorAll('a')).filter(
     (a) =>
       regex.test(a.href) &&
@@ -771,25 +828,17 @@ onMounted(() => {
   });
 
   const setUpListeners = () => {
+    let qSelects = Array.from(
+      document.getElementsByClassName('question-select')
+    );
+    qSelects.forEach((s) => {
+      s.onchange = function (e) {
+        setSelectBehaviour(e.target);
+      };
+    });
     let qBtns = Array.from(document.getElementsByClassName('question-btns'));
     qBtns.forEach((b) => {
-      let temp = b.id.split('_');
-      let id = temp[0];
-      let qInd = parseInt(temp[1]);
-      let rInd = parseInt(temp[2]);
-      let q = questions.value.find((e) => e.id === id);
-      if (q) {
-        let content =
-          q.question[qInd].responseForQuestionComponent[rInd].display;
-        let target = q.question[qInd].responseForQuestionComponent[rInd].id;
-        if (!b.onclick) {
-          if (content) {
-            b.onclick = () => display(id, content);
-          } else {
-            b.onclick = () => goto(id, target);
-          }
-        }
-      }
+      setOnClick(b);
     });
   };
 
@@ -800,13 +849,14 @@ onMounted(() => {
     }
     let q = qTop.question[index];
     document.getElementById(id + '_display').innerHTML = q.question;
-    document.getElementById(id + '_buttons').innerHTML = q.buttons;
+    document.getElementById(id + '_buttons').innerHTML = q.buttons || q.select;
     setUpListeners();
   };
 
   const display = (id, display) => {
+    console.log();
     document.getElementById(id + '_display').innerHTML = display;
-    document.getElementById(id + '_buttons').innerHTML = '&nbsp;';
+    document.getElementById(id + '_buttons').innerHTML = '';
   };
 
   const prev = (id) => {
@@ -838,7 +888,6 @@ onMounted(() => {
       pb.onclick = () => prev(id);
     }
   });
-
   setUpListeners();
 });
 </script>
@@ -847,5 +896,5 @@ onMounted(() => {
   <div v-html="canvasHtml"></div>
 </template>
 <style type="text/css" scoped>
-:deep(fieldset){border:1px solid #000}:deep(legend){float:none;font-size:1.5rem;margin-left:20px;width:auto}:deep(button.carousel-control-prev:focus,button.carousel-control-next:focus){border:4px solid #000!important}:deep(.icon-wrapper){background-color:#000;border-radius:10px;padding-top:.5rem;width:50px}:deep(.carousel-indicators){margin-bottom:.5rem}:deep(.carousel-indicators [data-bs-target].active){color:blue;font-weight:600}:deep(.carousel-indicators [data-bs-target]){background-clip:unset;background-color:#fff;border-radius:10px;cursor:pointer;height:unset;margin-bottom:0;margin-left:3px;margin-right:3px;opacity:.7;text-indent:unset;transition:opacity .6s ease;width:40px}@media (min-width:769px){:deep(#overlay){border-radius:10px!important}}@media (max-width:768px){:deep(#overlay){border-radius:none}}
+:deep(select){font-size:1.2rem;max-width:20rem}:deep(fieldset){border:1px solid #000}:deep(legend){float:none;font-size:1.5rem;margin-left:20px;width:auto}:deep(button.carousel-control-prev:focus,button.carousel-control-next:focus){border:4px solid #000!important}:deep(.icon-wrapper){background-color:#000;border-radius:10px;padding-top:.5rem;width:50px}:deep(.carousel-indicators){margin-bottom:.5rem}:deep(.carousel-indicators [data-bs-target].active){color:blue;font-weight:600}:deep(.carousel-indicators [data-bs-target]){background-clip:unset;background-color:#fff;border-radius:10px;cursor:pointer;height:unset;margin-bottom:0;margin-left:3px;margin-right:3px;opacity:.7;text-indent:unset;transition:opacity .6s ease;width:40px}@media (min-width:769px){:deep(#overlay){border-radius:10px!important}}@media (max-width:768px){:deep(#overlay){border-radius:none}}
 </style>

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.6.2",
+  "version": "0.6.4",
   "name": "cec-nuxt-lib",
   "description": "Nuxt components and assets",
   "license": "MIT",