simple-speak/src/embed-dialog.js

Quickly add text-to-speech widgets to HTML, using the Web Speech API.

/**
 * 'Copy-paste embed code' dialog | © Nick Freear.
 *
 * @function embedDialog
 * @memberof simple-speak:exports
 * @param {Object} config - The configuration object.
 * @return {void}
 * @protected
 */
module.exports.embedDialog = function (ssConfig) {
  'use strict';

  var scriptUrl = 'https://unpkg.com/simple-speak@%s#._.js'.replace(/%s/, ssConfig.version);
  var jqueryUrl = 'https://unpkg.com/jquery@3.2.1/dist/jquery.min.js'; // ssConfig.$('script[ src *= jquery ]').attr('src');
  var embedCode = '<div id="id-simple-speak">Hello</div>\n\n<script src="%jq"></script>\n<script src="%s"></script>';
  var embedDialog = '<div role="alertdialog"><label>Copy & paste the embed code <textarea readonly >%e</textarea></label></div>';
  var $form = ssConfig.$form;

  $form.append('<button class="em" title="Get the embed code">&lt;/></button>');

  var $embedButton = $form.find('.em');

  $embedButton.on('click', function (ev) {
    var $dialog = $form.find('[ role = alertdialog ]');

    if ($dialog.length) {
      $dialog.toggle();
    } else {
      $form.append(embedDialog.replace(/%e/, embedCode).replace(/%s/, scriptUrl).replace(/%jq/, jqueryUrl));
    }

    console.warn('simplespeak: embed dialog');

    ev.preventDefault();
  });
};