cec-nuxt-lib 0.6.5 → 0.6.7

package/dist/module.json

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

package/dist/runtime/components/cecCanvas.vue

@@ -377,9 +377,9 @@ const makeAddressItem = (prop, text) => {
   return `<p class="mb-0" itemprop="${prop}">${text}</p>`;
 };
 
-cont formatId = (str) => {
-return str.replace('?', '').replace(/\W/g, '-');
-}
+const formatId = (str) => {
+  return str.replace('?', '').replace(/\W/g, '-');
+};
 
 const makeQuestions = (data, id) => {
   data.question.forEach((qu, j) => {
@@ -761,144 +761,8 @@ canvasHtml = canvasHtml.replace(
     return `${p1}${p2.replace(/([.@])/g, '<wbr />$1')}${p3}`;
   }
 );
-
-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) => {
-      const op = btn.innerText;
-      btn.innerText = op === 'Expand all' ? 'Close all' : 'Expand all';
-      Array.from(document.getElementsByClassName(btn.id)).forEach(
-        (e) => (e.checked = op === 'Expand all')
-      );
-    });
-  };
-  Array.from(document.getElementsByClassName('expand-all')).forEach((b) => {
-    expandAll(b);
-  });
-
-  // Forms title & path
-  let forms = Array.from(document.querySelectorAll('a')).filter(
-    (a) =>
-      regex.test(a.href) &&
-      a.href !== 'https://digital-core.cheshireeast.gov.uk/w/webpage/register'
-  );
-
-  forms.forEach((link) => {
-    link.href = `${link.href}&pageTitle=${encodeURIComponent(
-      title.value
-    )}&pagePath=${baseUrl.value}${encodeURIComponent(path.value)}`;
-  });
-
-  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) => {
-      setOnClick(b);
-    });
-  };
-
-  const goto = (id, index, addToStack = true) => {
-    let qTop = questions.value.find((e) => e.id === id);
-    if (addToStack) {
-      qTop.stack.push(index);
-    }
-    let q = qTop.question[index];
-    document.getElementById(id + '_display').innerHTML = q.question;
-    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 = '';
-  };
-
-  const prev = (id) => {
-    let qTop = questions.value.find((e) => e.id === id);
-    let ind = qTop.stack.pop();
-    goto(id, ind, !qTop.stack.length);
-  };
-
-  const reset = (id) => {
-    let qTop = questions.value.find((e) => e.id === id);
-    if (qTop.stack.length) {
-      qTop.stack = [];
-      goto(id, 0);
-    }
-  };
-
-  let resetBtns = Array.from(document.getElementsByClassName('reset'));
-  resetBtns.forEach((rb) => {
-    let id = rb.id.split('_')[0];
-    if (!rb.onclick) {
-      rb.onclick = () => reset(id);
-    }
-  });
-
-  let prevBtns = Array.from(document.getElementsByClassName('previous'));
-  prevBtns.forEach((pb) => {
-    let id = pb.id.split('_')[0];
-    if (!pb.onclick) {
-      pb.onclick = () => prev(id);
-    }
-  });
-  setUpListeners();
-});
 </script>
 
 <template>
   <div v-html="canvasHtml"></div>
 </template>
-<style type="text/css" scoped>
-: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/dist/runtime/components/cecHeader.vue

@@ -117,10 +117,170 @@ onMounted(() => {
     console.log('No reachdeck.');
   }
 });
+
+// Make accordions spring open if there is a hash (looks for an H3)
+let hash = window.location.hash;
+if (hash) {
+  hash = hash.toLowerCase().replace(/^#/, '').replace(/_/g, ' ');
+  Array.from(document.getElementsByTagName('H3'))
+    .filter((e) => e.innerHTML.toLowerCase().includes(hash))
+    .forEach((h3, i) => {
+      let parent = h3.parentNode;
+      if (parent.tagName === 'ARTICLE') {
+        let el = parent.previousElementSibling;
+        let input =
+          el.tagName === 'LABEL'
+            ? el.control
+            : el.tagName === 'INPUT'
+              ? el
+              : undefined;
+        if (input) {
+          input.checked = true;
+          if (!i) {
+            el.scrollIntoView();
+          }
+        }
+      }
+    });
+}
+
+// Canvas stuff
+  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) => {
+      const op = btn.innerText;
+      btn.innerText = op === 'Expand all' ? 'Close all' : 'Expand all';
+      Array.from(document.getElementsByClassName(btn.id)).forEach(
+        (e) => (e.checked = op === 'Expand all')
+      );
+    });
+  };
+  Array.from(document.getElementsByClassName('expand-all')).forEach((b) => {
+    expandAll(b);
+  });
+
+  // Forms title & path
+  let forms = Array.from(document.querySelectorAll('a')).filter(
+    (a) =>
+      regex.test(a.href) &&
+      a.href !== 'https://digital-core.cheshireeast.gov.uk/w/webpage/register'
+  );
+
+  forms.forEach((link) => {
+    link.href = `${link.href}&pageTitle=${encodeURIComponent(
+      title.value
+    )}&pagePath=${baseUrl.value}${encodeURIComponent(path.value)}`;
+  });
+
+  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) => {
+      setOnClick(b);
+    });
+  };
+
+  const goto = (id, index, addToStack = true) => {
+    let qTop = questions.value.find((e) => e.id === id);
+    if (addToStack) {
+      qTop.stack.push(index);
+    }
+    let q = qTop.question[index];
+    document.getElementById(id + '_display').innerHTML = q.question;
+    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 = '';
+  };
+
+  const prev = (id) => {
+    let qTop = questions.value.find((e) => e.id === id);
+    let ind = qTop.stack.pop();
+    goto(id, ind, !qTop.stack.length);
+  };
+
+  const reset = (id) => {
+    let qTop = questions.value.find((e) => e.id === id);
+    if (qTop.stack.length) {
+      qTop.stack = [];
+      goto(id, 0);
+    }
+  };
+
+  let resetBtns = Array.from(document.getElementsByClassName('reset'));
+  resetBtns.forEach((rb) => {
+    let id = rb.id.split('_')[0];
+    if (!rb.onclick) {
+      rb.onclick = () => reset(id);
+    }
+  });
+
+  let prevBtns = Array.from(document.getElementsByClassName('previous'));
+  prevBtns.forEach((pb) => {
+    let id = pb.id.split('_')[0];
+    if (!pb.onclick) {
+      pb.onclick = () => prev(id);
+    }
+  });
+  setUpListeners();
+});
 </script>
 
 <template>
   <div>
+    <CecMeta />
     <div class="visually-hidden-focusable overflow-hidden">
       <div class="d-print-none">
         <a
@@ -256,5 +416,5 @@ onMounted(() => {
 </template>
 
 <style scoped>
-#SearchQueryControl_SearchButton,#SearchQueryControl_SearchButton:active,#SearchQueryControl_SearchButton:visited{background-color:#206c49;border-color:#206c49;border-radius:.25rem;color:#fff;cursor:pointer;font-size:1rem;font-weight:700;margin-left:.5rem!important;padding:.375rem .75rem;text-align:center;text-decoration:none;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;vertical-align:middle;width:100px}#SearchQueryControl_SearchButton:hover{background-color:#1c5e41;border-color:#1c5e41}
+#SearchQueryControl_SearchButton,#SearchQueryControl_SearchButton:active,#SearchQueryControl_SearchButton:visited{background-color:#206c49;border-color:#206c49;border-radius:.25rem;color:#fff;cursor:pointer;font-size:1rem;font-weight:700;margin-left:.5rem!important;padding:.375rem .75rem;text-align:center;text-decoration:none;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;vertical-align:middle;width:100px}#SearchQueryControl_SearchButton:hover{background-color:#1c5e41;border-color:#1c5e41}: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.5",
+  "version": "0.6.7",
   "name": "cec-nuxt-lib",
   "description": "Nuxt components and assets",
   "license": "MIT",