cec-nuxt-lib 0.3.2 → 0.3.4

package/dist/module.json

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

package/dist/runtime/components/cecCanvas.vue

@@ -0,0 +1,680 @@
+<script setup lang="ts">
+import { onMounted } from 'vue';
+import { useState } from '#app';
+
+import { createRenderer, text } from '@contensis/canvas-html';
+
+import type { Block } from '@contensis/canvas-html';
+
+const { sizeString } = useHelpers();
+const baseUrl = useState('baseUrl');
+const getCanvas = (data: Block[]) => renderer({ data });
+const listItems = useState('listItems');
+const questions = useState('questions', () => []);
+let canvasHtml;
+
+const props = defineProps({
+  canvas: {
+    type: Object,
+    required: true,
+  },
+});
+
+const { canvas } = props;
+
+const regex =
+  /^https:\/\/digital-core\.cheshireeast\.gov\.uk(?!.*(?:&pagePath|&pageTitle|login)).*$/;
+
+const abbr = (data) => {
+  return `<abbr title="${text(data.entryDescription)}">${text(data.entryTitle)}</abbr>`;
+};
+
+const accordionComponent = (props: any) => {
+  let id = props.block?.id;
+  let html = props.block?.value?.expandAll
+    ? `
+  <div class="text-end">
+    <button
+      id="${props.block?.id}"
+      class="expand-all btn btn-outline-success"
+      type="button"
+    >
+      Expand all
+    </button>
+  </div>
+  `
+    : '';
+  html += `
+  <p class="sr-only">
+    The following checkboxes are used for accordion drop-downs. When
+    selected, they show content that was visually hidden
+  </p>
+  <section class="access-acc-container">
+  `;
+  let acc = props.block?.value?.accordionSection;
+  acc.forEach((e, i) => {
+    let accId = `${id}_${i}`;
+    html += `
+  <input class="${id}"
+    id="${accId}"
+    type="checkbox"
+  />
+  <label for="${accId}">${e.title}</label>
+  <article>${e.content}</article>
+  `;
+  });
+  html += '</section>';
+  return html;
+};
+
+const anchor = (data) => {
+  return `<${data.tag} id="${data.id}">${data.text}</${data.tag}>`;
+};
+
+const carousel = (data, id) => {
+  // Create the indicators
+  let indicators = data.carouselComponent.reduce((acc, e, i) => {
+    return (
+      acc +
+      `<button type="button" data-bs-target="#${id}-indicators" data-bs-slide-to="${i}" class="${i ? '' : 'active'}" aria-current="${i ? '' : 'true'}" aria-label="Slide ${i}">${i + 1}</button>`
+    );
+  }, '');
+
+  // Create the slides
+  let slides = data.carouselComponent.reduce((acc, e, i) => {
+    return (
+      acc +
+      `<div class="carousel-item ${i ? '' : 'active'}">
+        ${e.link.target ? '<a class="innerLink" href="' + e.link.target + '"><span class="hidden">' + e.link.label + '</span></a>' : ''}
+        <img src="${e.image.asset.sys.uri}" class="d-block w-100" alt="${e.image.altText}">
+      <div class="carousel-caption d-none d-md-block">
+        ${e.content}
+      </div>
+    </div>`
+    );
+  }, '');
+  // Return the component
+  return `
+    <div id="${id}-indicators" class="carousel slide">
+      <div class="carousel-indicators ">
+    ${indicators}
+      </div>
+      <div class="carousel-inner">
+    ${slides}
+      </div>
+    <button  class="carousel-control-prev" type="button" data-bs-target="#${id}-indicators" data-bs-slide="prev">
+        <span class="icon-wrapper">
+          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+        </span>
+        <span class="visually-hidden">Previous</span>
+      </button>
+      <button class="carousel-control-next" type="button" data-bs-target="#${id}-indicators" data-bs-slide="next">
+        <span class="icon-wrapper">
+          <span class="carousel-control-next-icon" aria-hidden="true"></span>
+        </span>
+        <span class="visually-hidden">Next</span>
+      </button>
+    </div>`;
+};
+
+const cecButton = (props: any) => {
+  let item = props.block?.value;
+  let inner = item.text.length > 20 ? `<small>${item.text}</small>` : item.text;
+  let title = item.titleText?.length ? `title="${item.titleText}"` : '';
+  return `<a ${title} class="cec-button" href="${item.url}">${inner}</a>`;
+};
+
+const centralColumn = (props: any) => {
+  let item = props.block?.value;
+  if (item.column.length === 1) {
+    return `
+  <div class="row">
+    <div class="col-lg-8 col-md-12 mx-auto mt-3 mb-4">${item.column[0]}</div>
+  </div>
+  `;
+  } else if (item.column.length === 2) {
+    return `
+    <div class="row">
+      <div class="col-12 col-lg-6 mb-lg-4">
+        ${item.column[0]}
+      </div>
+      <div class="col-12 col-lg-6 mb-lg-4">
+        ${item.column[1]}
+      </div>
+    </div>
+  `;
+  } else {
+    return `
+    <div class="row pb-3">
+      <div class="col-12 col-lg-4 mb-4">
+          ${item.column[0]}
+      </div>
+      <div class="col-12 col-lg-4 mb-4">
+          ${item.column[1]}
+      </div>
+      <div class="col-12 col-lg-4 mb-4">
+          ${item.column[2]}
+      </div>
+    </div>
+  `;
+  }
+};
+
+const container = (data) => {
+  if (data.closeContainer) {
+    return `</div>${data.singleChoice === 'cec-main-column' ? '</div>' : ''}`;
+  }
+  if (data.singleChoice === 'full-width') {
+    return '<div class="container">';
+  }
+  return `<div class="container">
+  <div class="col-lg-8 cec-main-col-width">
+  `;
+};
+
+const promotionalFullWidthImageWithOverlay = (props: any) => {
+  let item = props.block?.value;
+  let overlay;
+  if (!item.overlayText) {
+    overlay = `
+  <div class="cec-cent-promo-txt-wrap top-50 end-0">
+      <div
+        class="cec-cent-promo-txt text-center bg-tog-for-chil-green col-lg-8 col-md-10 mx-auto my-md-4 mb-md-5 pb-2"
+      >
+        <img
+          class="px-4 mx-auto mt-2"
+          alt="${item.overlayImage.altText}"
+          src="${baseUrl.value}${item.overlayImage.asset.sys.uri}"
+        />
+    </div>
+  </div>`;
+  } else {
+    overlay = `
+  <div class="position-relative">
+    <div class="row g-0">
+      <img
+        class="img-fluid"
+        alt="${item.image.altText}"
+        src="${baseUrl.value}${item.image.asset.sys.uri}"
+      />
+      <div class="cec-cent-promo-txt-wrap top-50 end-0">
+        <div class="container-md">
+          <div
+            class="cec-cent-promo-txt bg-tog-for-chil-green col-lg-8 col-md-12 mx-auto my-md-4 mb-md-5 pb-2"
+          >
+            <div class="text-white text-center p-4">${item.overlayText}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  `;
+  }
+  return `
+  <div class="position-relative">
+    <div class="row g-0 mb-3">
+      <img
+        class="img-fluid"
+        alt="${item.image.altText}"
+        src="${baseUrl.value}${item.image.asset.sys.uri}"
+      />
+  ${overlay}
+    </div>
+  </div>
+  `;
+};
+
+const promotionalContrastRegion = (props: any) => {
+  let item = props.block?.value;
+  const bgClass = `bg-${item.colour.toLowerCase().replace(/\s/g, '-')}`;
+  let textCol = `
+    <div class="p-2 ps-lg-4 ms-lg-5 col">
+      <div class="cec-pull-column pe-md-5">${item.content}</div>
+    </div>`;
+  let imageCol = `
+    <div class="col">
+      <img
+        class="img-fluid"
+        alt="${item.image.altText}"
+        src="${baseUrl.value}${item.image.asset.sys.uri}"
+      />
+    </div>`;
+  return `
+    <div
+    class="${bgClass} cec-pull-container pe-md-0 d-flex flex-column flex-md-row justify-content-center ps-4 align-items-center py-5 mb-4"
+    >
+    ${item.alignment === 'left' ? imageCol + textCol : textCol + imageCol}
+    </div>
+`;
+};
+
+const promotionalFullWidthImageWithSideOverlay = (props: any) => {
+  let item = props.block?.value;
+  return `
+  <div class="position-relative side-overlay-section">
+    <div class="row g-0">
+      <img
+        class="img-fluid"
+        alt="${item.image.altText}"
+        src="${baseUrl.value}${item.image.asset.sys.uri}"
+      />
+      <div
+        style="position: absolute"
+        class="my-side-overlay col-lg-6 bg-cec-green ms-lg-5 mt-lg-5 p-2 top-0"
+      >
+        <h2 class="text-white promo-heading display-6">${item.heading}</h2>
+        <div class="text-white">${item.content}</div>
+      </div>
+    </div>
+  </div>
+  `;
+};
+
+const centralPromotionalSection = (props: any) => {
+  let item = props.block?.value;
+  return `
+<div class="row">
+  <div class="py-5 bg-cec-central-promo-section">
+    <div class="cec-meta-outer px-4">
+      <div class="cec-meta-content col-lg-8 col-md-12 px-3 py-4 px-md-5">
+        <div>${item.content}</div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+};
+
+const promotionalBannerWithText = (props: any) => {
+  let item = props.block?.value;
+  let overlay = `
+  <div class="cec-cent-promo-txt-wrap col-md-11 top-50 w-100 text-center">
+    <h1
+      class="mb-0 cec-cent-promo-txt d-md-inline-block px-3 pt-1 pb-3 promo-heading bg-cec-green text-white"
+    >
+      ${item.text}
+    </h1>
+  </div>
+  `;
+  let paras = item.html.replace(/<\/?p>/g, '').split('\n');
+  if (paras.length) {
+    overlay = `
+  <div
+    class="cec-cent-promo-txt-wrap col-lg-8 col-md-11  text-center top-50 w-100 "
+  >
+    <div id="overlay" class="bg-tog-for-chil-green d-md-inline-block py-3 px-4 ">
+      <h1
+        class="hp-promo-heading text-white d-md-inline-block display-md-5 text-center px-3 pt-1 pb-0"
+        style="font-family: myriad-pro, sans-serif"
+      >
+        ${paras[0]}
+      </h1>
+      <div class="d-flex justify-content-center mt-2 strapline text-white">
+        ${paras[1]}
+      </div>
+    </div>
+  </div>`;
+  }
+  return `
+  <div class="position-relative row g-0 mb-3">
+    <img
+      alt="${item.bannerImage.altText}"
+      src="${baseUrl.value}${item.bannerImage.asset.sys.uri}"
+    />
+    ${overlay}
+  </div>
+  `;
+};
+
+const processUri = (uri) => {
+  return uri.toLowerCase().replace(/%e2/g, '%E2');
+};
+
+const genericList = (props: any) => {
+  let item = props.block?.value;
+  let id = props.block.id;
+  return listItems.value[id]
+    ? `
+    <h2 class="fs-4 mt-3">${item.title}</h2>
+    <ul>
+      ${listItems.value[id].reduce((acc, e) => {
+        return e.sys.dataFormat === 'webpage'
+          ? `${acc}
+      <li><a href="${processUri(e.sys.uri)}">${e.title}</a></li>
+      `
+          : `${acc}
+      <li>
+        <a href="${processUri(e.sys.uri)}"
+          >${e.title[0].toUpperCase()}${e.title.slice(1)}
+          (${e.sys.contentTypeId.toUpperCase()},
+          ${sizeString(e.sys.properties.fileSize)})
+        </a>
+      </li>
+      `;
+      }, '')}
+    </ul>
+`
+    : '';
+};
+
+const heroUnit = (props: any) => {
+  let item = props.block?.value;
+  return `<div class="hero-unit my-4">${item.content}</div>`;
+};
+
+const horizontalTable = (props: any) => {
+  let data = props.block?.value;
+  let rows = data.tableRow.reduce((acc, r) => {
+    let cols = r.columns.reduce((acc, c) => {
+      return `<td>${c}</td>`;
+    }, '');
+    return `${acc}<tr><th scope="row">${r.headerCell}</th>${cols}</tr>`;
+  }, '');
+  return `
+  <div class="table-responsive">
+    <table class="usr_TableDefault">
+  <caption class="hidden">${data.caption}</caption>
+        <tbody>
+          ${rows}
+        </tbody>
+    </table>
+  </div>
+  `;
+};
+
+const htmlComponent = (props: any) => {
+  let item = props.block?.value;
+  return item.html;
+};
+
+const imageWithCSS = (props: any) => {
+  let data = props.block?.value;
+  let classes = data.alignment || '';
+  classes += data.otherCss ? ` ${data.otherCss}` : '';
+  return `
+  <img src="${data.image.asset.sys.uri}" alt="${data.image.altText}" class="${classes}" />
+`;
+};
+
+const linkEntry = (data) => {
+  return `<a title="${data.title || ''}" href="${data.target}">${data.text}</a>`;
+};
+
+const processTime = (str) => {
+  let suffix = 'am';
+  if (str === '00:00') {
+    return 'midnight';
+  }
+  if (str === '12:00') {
+    return 'midday';
+  }
+  if (!str) {
+    return 'Closed';
+  }
+  let time = str.split(':').reduce((acc, e) => {
+    return [...acc, parseInt(e)];
+  }, []);
+  if (time[0] > 12) {
+    suffix = 'pm';
+    time[0] -= 12;
+  }
+  let res = time[0].toString();
+  if (time[1]) {
+    res = `${res}:${time[1]}${suffix}`;
+  } else {
+    res += suffix;
+  }
+  return res;
+};
+
+const openingHours = (data) => {
+  let body = data.openingHours.reduce((acc, e) => {
+    let from = processTime(e.from);
+    let to = processTime(e.to);
+    let hours = '';
+    if (from === 'Closed') {
+      hours = 'Closed';
+    } else {
+      hours = `${from} to ${to}`;
+    }
+    return (
+      acc +
+      `<tr>
+        <td>${e.dayInformation}</td>
+        <td>${hours}</td>
+      </tr>`
+    );
+  }, '');
+  return `
+  <table class="usrTableDefault">
+    <caption class="hidden">
+      ${data.entryTitle} opening hours
+    </caption>
+    <thead>
+      <tr>
+        <th scope="col">Day</th>
+        <th scope="col">Opening times</th>
+      </tr>
+    </thead>
+    <tbody>
+      ${body}
+    </tbody>
+  </table>
+`;
+};
+
+const myInlineEntry = (props: any) => {
+  let data = props.block?.value;
+  let id = props.block?.id;
+  switch (props.block?.value.sys.contentTypeId) {
+    case 'abbreviation':
+      return abbr(data);
+    case 'anchor':
+      return anchor(data);
+    case 'carousel':
+      return carousel(data, id);
+    case 'container':
+      return container(data);
+    case 'linkEntry':
+      return linkEntry(data);
+    case 'openingHours':
+      return openingHours(data);
+    case 'questions':
+      return makeQuestions(data, id);
+    default:
+      return `<span> ${text(data.entrytitle)} </span>`;
+  }
+};
+
+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">
+        <button
+          type="button"
+          id="${id}_${j}_${i}"
+          class="cec-button question-btns"
+        >
+          ${r.buttonText}
+        </button>
+      </div>`
+      );
+    }, '');
+    questions.value.push({ id: id, question: data.question, stack: [0] });
+  });
+
+  let buttons = data.question[0].buttons;
+  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>
+      </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 renderer = createRenderer({
+  blocks: {
+    _inlineEntry: myInlineEntry,
+  },
+  components: {
+    accordionComponent: accordionComponent,
+    cecButton: cecButton,
+    centralColumn: centralColumn,
+    centralPromotionalSection: centralPromotionalSection,
+    promotionalFullWidthImageWithOverlay: promotionalFullWidthImageWithOverlay,
+    promotionalFullWidthImageWithSideOverlay:
+      promotionalFullWidthImageWithSideOverlay,
+    genericList: genericList,
+    heroUnit: heroUnit,
+    horizontalTable: horizontalTable,
+    htmlComponent: htmlComponent,
+    imageWithCSS: imageWithCSS,
+    promotionalBannerWithText: promotionalBannerWithText,
+    promotionalContrastRegion: promotionalContrastRegion,
+  },
+});
+
+// Process the canvas
+canvasHtml = getCanvas(canvas);
+canvasHtml = canvasHtml.replace(
+  /<img src="|<caption|<table|<\/table>|<th>/g,
+  (match) => {
+    switch (match) {
+      case '<img src="':
+        return `<img src="${baseUrl.value}`;
+      case '<caption':
+        return "<caption class='hidden'";
+      case '<table':
+        return "<div class='table-responsive'><table class='usr_TableDefault'";
+      case '</table>':
+        return '</table></div>';
+      case '<th>':
+        return '<th scope="col">';
+      default:
+        return match;
+    }
+  }
+);
+canvasHtml = canvasHtml.replace(
+  /(<a href="mailto:[^"]+">)([^<]+)(<\/a>)/g,
+  (_, p1, p2, p3) => {
+    return `${p1}${p2.replace(/([.@])/g, '<wbr />$1')}${p3}`;
+  }
+);
+
+onMounted(() => {
+  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 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);
+          }
+        }
+      }
+    });
+  };
+
+  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;
+    setUpListeners();
+  };
+
+  const display = (id, display) => {
+    document.getElementById(id + '_display').innerHTML = display;
+    document.getElementById(id + '_buttons').innerHTML = '&nbsp;';
+  };
+
+  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(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.3.2",
+  "version": "0.3.4",
   "name": "cec-nuxt-lib",
   "description": "Nuxt components and assets",
   "license": "MIT",