@cxco/ui-faq/lib/plugins/htmlAnswers.js

FAQ Module using @cxco default packages

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _marked = _interopRequireDefault(require("marked"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

_marked.default.setOptions({
  gfm: true,
  tables: true,
  smartLists: true,
  headerPrefix: 'cxco'
});

var _default = {
  install: function install(core) {
    core.before('answer', processAnswer);
  }
};
/**
 * Turn markdown answer to html answer
 *
 * Mutates the answerPayload by reference
 *
 * @param {object} answerPayload
 */

exports.default = _default;

function processAnswer(answerPayload) {
  if (answerPayload.data && answerPayload.data.answer) {
    answerPayload.data.answer = unescapeMarkdown(answerPayload.data.answer);
    answerPayload.data.answer = (0, _marked.default)(answerPayload.data.answer);
    replaceMedia(answerPayload.data, answerPayload.metadata);
    replaceHyperlinks(answerPayload.data, answerPayload.metadata);
  }
}
/**
 * Unescapes markdown
 * @param {String} answer
 */


function unescapeMarkdown(answer) {
  return answer.replace(/^\\#/gm, '#').replace(/^\\>/gm, '>');
}
/**
 * Generates a FAQ compatible hyperlink.
 * @param {Object} link
 */


function getHref(_ref) {
  var url = _ref.url,
      target = _ref.target,
      id = _ref.id,
      interactionId = _ref.interactionId,
      innerHTML = _ref.innerHTML,
      isImageHref = _ref.isImageHref;
  return "<a href=\"".concat(url, "\" target=\"").concat(target, "\" data-url=\"").concat(url, "\" data-id=\"").concat(id, "\" data-interactionid=\"").concat(interactionId, "\" data-img=").concat(isImageHref, " data-dcx-link>").concat(innerHTML, "</a>");
}

function replaceHyperlinks(data, metadata) {
  var answer = data.answer;

  if (Array.isArray(data.links) && data.links.length > 0) {
    data.links.forEach(function (h) {
      var pattern = new RegExp('%\\{Link\\(' + h.id + '\\)\\}', 'gi');
      var a = getHref(_objectSpread(_objectSpread({}, h), {}, {
        interactionId: metadata.interactionId,
        innerHTML: h.text
      }));
      answer = answer.replace(pattern, a);
    });
  }

  data.answer = answer;
}
/**
 * Replaces Images and Videos
 * @param {Object} data
 * @param {Object} metadata
 */


function replaceMedia(data, metadata) {
  replaceImages(data, metadata);
  replaceVideos(data);
}
/**
 * Replaces images in answers
 * @param {Object} engineResult
 */


function replaceImages(data, metadata) {
  if (Array.isArray(data.images)) {
    data.images.forEach(function (img) {
      var additionalData = img.additionalData || {}; // get the factor the image should be sized to

      var sizeFactor = additionalData.imageWidth ? parseFloat(img.additionalData.imageWidth) : 1; // get the alignment class (left/center/right)

      var alignment = additionalData.imageAlign ? img.additionalData.imageAlign : 'left';
      var isImageHref = false;
      var link; // if image has linkId is a link to another page.

      if (img.linkId) {
        isImageHref = true;
        link = data.links.find(function (l) {
          return l.id === img.linkId;
        });
      } // convert it to a percentage


      var imageWidth = sizeFactor * 100;
      var url = img.name; // replace the image tags in the content

      var pattern = new RegExp('%\\{Image\\(' + img.id + '\\)\\}', 'gi');
      var imgHtml = "<img src=\"".concat(url, "\"\n                        data-src=\"").concat(url, "\"\n                        title=\"").concat(img.title || '', "\"\n                        alt=\"").concat(img.title || '', "\"\n                        class=\"cxco-c-image  ").concat(isImageHref ? '' : 'cxco-lightbox', " ").concat(alignment, "\"\n                        width=\"").concat(imageWidth, "%\" />");

      if (isImageHref) {
        imgHtml = getHref(_objectSpread(_objectSpread({}, link), {}, {
          interactionId: metadata.interactionId,
          innerHTML: imgHtml,
          isImageHref: isImageHref
        }));
      }

      data.answer = data.answer.replace(pattern, imgHtml);
    });
  }
}
/**
 * Replaces the video placeholder by the actual video
 * @param {Object} data
 */


function replaceVideos(data) {
  // default dimensions of a video
  var defaultHeight = 250;

  if (Array.isArray(data.videos)) {
    data.videos.forEach(function (video) {
      var additionalData = video.additionalData || {}; // get the alignment class (left/center/right)

      var alignment = additionalData.videoAlign ? video.additionalData.videoAlign : 'left'; // get the videoId

      var videoId = additionalData.videoId ? video.additionalData.videoId : ''; // set the proper embed url based on the source

      var url = '';

      if (video.source.toLowerCase() === 'youtube') {
        url = 'https://www.youtube.com/embed/' + videoId;
      } else if (video.source.toLowerCase() === 'youtubenocookie') {
        url = 'https://www.youtube-nocookie.com/embed/' + videoId;
      } else if (video.source.toLowerCase() === 'vimeo') {
        url = 'https://player.vimeo.com/video/' + videoId;
      } // replace the video tags in the content


      var pattern = new RegExp('%\\{Video\\(' + video.id + '\\)\\}', 'gi');
      var videoHtml = "<iframe src=\"".concat(url, "\"\n                                class=\"").concat(alignment, "\"\n                                style=\"height:").concat(defaultHeight, "px;width:").concat(Number(additionalData.videoWidth) * 100, "%;\"\n                                frameborder=\"0\"\n                                allowfullscreen=\"allowfullscreen\"\n                                mozallowfullscreen=\"mozallowfullscreen\" \n                                msallowfullscreen=\"msallowfullscreen\" \n                                oallowfullscreen=\"oallowfullscreen\" \n                                webkitallowfullscreen=\"webkitallowfullscreen\"></iframe>");
      data.answer = data.answer.replace(pattern, videoHtml);
    });
  }
}