Proyectos de Subversion Moodle

/* global ns CKEDITOR */

/**

 * Adds a html text field to the form.

 *

 * @param {type} parent

 * @param {type} field

 * @param {type} params

 * @param {type} setValue

 * @returns {undefined}

 */

ns.Html = function (parent, field, params, setValue) {

  this.parent = parent;

  this.field = field;

  this.value = params;

  this.setValue = setValue;

  this.tags = ns.$.merge(['br'], (this.field.tags || this.defaultTags));

};

ns.Html.first = true;

ns.Html.prototype.defaultTags = ['strong', 'em', 'del', 'h2', 'h3', 'a', 'ul', 'ol', 'table', 'hr'];

// This should probably be named "hasTag()" instead...

// And might be more efficient if this.tags.contains() were used?

ns.Html.prototype.inTags = function (value) {

  return (ns.$.inArray(value.toLowerCase(), this.tags) >= 0);

};

/**

 * Check if the provided button is enabled by config.

 *

 * @param {string} value

 * @return {boolean}

 */

ns.Html.prototype.inButtons = function (button) {

  return (H5PIntegration.editor !== undefined && H5PIntegration.editor.wysiwygButtons !== undefined && H5PIntegration.editor.wysiwygButtons.indexOf(button) !== -1);

};

ns.Html.prototype.getCKEditorConfig = function () {

  const config = {

    updateSourceElementOnDestroy: true,

    plugins: ['Essentials', 'Paragraph'],

    alignment: { options: ["left", "center", "right"] },

    toolbar: [],

  };

  // Basic styles

  const basicstyles = [];

  const basicstylesPlugins = [];

  if (this.inTags("strong") || this.inTags("b")) {

    basicstyles.push('bold');

    basicstylesPlugins.push('Bold');

    // Might make "strong" duplicated in the tag lists. Which doesn't really

    // matter. Note: CKeditor will only make strongs.

    this.tags.push("strong");

  }

  if (this.inTags("em") || this.inTags("i")) {

    // Use <em> elements for italic text instead of CKE's default <i>

    // Has to be a plugin to work

    const ItalicAsEmPlugin = function (editor) {

      editor.conversion.for('downcast').attributeToElement({

        model: 'italic',

        view: 'em',

        converterPriority: 'high',

      });

    }

    basicstyles.push('italic');

    basicstylesPlugins.push('Italic', ItalicAsEmPlugin);

    this.tags.push("i");

  }

  if (this.inTags("u")) {

    basicstyles.push('underline');

    basicstylesPlugins.push('Underline');

    this.tags.push("u");

  }

  if (this.inTags("strike") || this.inTags("del") || this.inTags("s")) {

    basicstyles.push('strikethrough');

    basicstylesPlugins.push('Strikethrough');

    // Might make "strike" or "del" or both duplicated in the tag lists. Which

    // again doesn't really matter.

    this.tags.push("strike");

    this.tags.push("del");

    this.tags.push("s");

  }

  if (this.inTags("sub")) {

    basicstyles.push("subscript");

    basicstylesPlugins.push('Subscript');

  }

  if (this.inTags("sup")) {

    basicstyles.push("superscript");

    basicstylesPlugins.push('Superscript');

  }

  if (basicstyles.length > 0) {

    basicstyles.push('|', 'removeFormat');

    basicstylesPlugins.push('RemoveFormat');

    config.plugins.push(...basicstylesPlugins);

    config.toolbar.push(...basicstyles);

  }

  // Alignment is added to all wysiwygs

  config.plugins.push('Alignment');

  config.toolbar.push('|', 'alignment');

  // Paragraph styles

  const paragraph = [];

  const paragraphPlugins = [];

  if (this.inTags("ul") || this.inTags("ol")) {

    paragraphPlugins.push('List');

  }

  if (this.inTags("ul")) {

    paragraph.push("bulletedList");

    this.tags.push("li");

  }

  if (this.inTags("ol")) {

    paragraph.push("numberedList");

    this.tags.push("li");

  }

  if (this.inTags("blockquote")) {

    paragraph.push("blockquote");

    paragraphPlugins.push('BlockQuote');

  }

  if (this.inButtons('language')) {

    this.tags.push('span');

    paragraph.push('textPartLanguage');

    paragraphPlugins.push('TextPartLanguage');

  }

  if (paragraph.length > 0) {

    config.plugins.push(...paragraphPlugins);

    config.toolbar.push(...paragraph);

  }

  // Links.

  if (this.inTags("a")) {

    const items = ["link"];

    config.plugins.push('Link', 'AutoLink');

    config.toolbar.push("|", ...items);

    config.link = {

      // Automatically add target="_blank" and rel="noopener noreferrer" to all external links.

      addTargetToExternalLinks: true,

      // Automatically add protocol if not present

      defaultProtocol: 'http://',

    }

  }

  // Inserts

  const inserts = [];

  const insertsPlugins = [];

  if (this.inTags('img')) {

    // TODO: Include toolbar functionality to insert and edit images

    // For now, we just include the plugin to prevent data loss

    insertsPlugins.push('Image');

  }

  if (this.inTags("hr")) {

    inserts.push("horizontalLine");

    insertsPlugins.push('HorizontalLine');

  }

  if (this.inTags('code')) {

    if (this.inButtons('inlineCode')) {

      inserts.push('code');

      insertsPlugins.push('Code');

    }

    if (this.inTags('pre') && this.inButtons('codeSnippet')) {

      inserts.push('codeBlock');

      insertsPlugins.push('CodeBlock');

    }

  }

  if (inserts.length > 0) {

    config.toolbar.push("|", ...inserts);

  }

  if (insertsPlugins.length > 0) {

    config.plugins.push(...insertsPlugins);

  }

  if (this.inTags("table")) {

    config.toolbar.push("insertTable");

    config.plugins.push(

      'Table',

      'TableToolbar',

      'TableProperties',

      'TableCellProperties',

      'TableColumnResize',

      'TableCaption'

    );

    config.table = {

      contentToolbar: [

        'toggleTableCaption',

        'tableColumn',

        'tableRow',

        'mergeTableCells',

        'tableProperties',

        'tableCellProperties'

      ],

      tableProperties: {

        defaultProperties: {

          borderStyle: 'underline',

          borderWidth: '0.083em',

          borderColor: '#494949',

          padding: '0',

          alignment: 'left'

        }

      },

      tableCellProperties: {

        defaultProperties: {

          borderStyle: 'underline',

          borderWidth: '0.083em',

          borderColor: '#494949',

          padding: '1px'

        }

      }

    }

    ns.$.merge(this.tags, ["tr", "td", "th", "colgroup", "col", "thead", "tbody", "tfoot", "figure", "figcaption"]);

  }

  // Add dropdown to toolbar if formatters in tags (h1, h2, etc).

  const formats = [];

  for (let index = 1; index < 7; index++) {

    if (this.inTags('h' + index)) {

      formats.push({ model: 'heading' + index, view: 'h' + index, title: 'Heading ' + index, class: 'ck-heading_heading' + index });

    }

  }

  if (this.inTags('pre')) {

    formats.push({ model: 'formatted', view: 'pre', title: 'Formatted', class: 'ck-heading_formatted' });

  }

  // if (this.inTags("address")) formats.push("address"); // TODO: potential data loss

  if (formats.length > 0 || this.inTags('p') || this.inTags('div')) {

    // If the formats are shown, always have a paragraph

    formats.push({ model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' });

    this.tags.push("p");

    this.field.enterMode = "p";

    config.heading = {options: formats};

    config.plugins.push('Heading');

    config.toolbar.push('heading');

  }

  if (this.field.font !== undefined) {

    // Create wrapper for text styling options

    var styles = [];

    var colors = [];

    this.tags.push('span');

    /**

     * Help set specified values for property.

     *

     * @private

     * @param {Array} values list

     * @param {string} prop Property name

     */

    const setValues = function (values, prop) {

      options = [];

      for (let i = 0; i < values.length; i++) {

        options.push(values[i]);

      }

      config[prop] = { options: options };

    };

    // Font family chooser

    if (this.field.font.family) {

      styles.push('fontFamily');

      config.plugins.push('FontFamily');

      let fontFamilies = [

        'default',

        'Arial, Helvetica, sans-serif',

        'Comic Sans MS, Cursive, sans-serif',

        'Courier New, Courier, monospace',

        'Georgia, serif',

        'Lucida Sans Unicode, Lucida Grande, sans-serif',

        'Tahoma, Geneva, sans-serif',

        'Times New Roman, Times, serif',

        'Trebuchet MS, Helvetica, sans-serif',

        'Verdana, Geneva, sans-serif'

      ]

      // If custom fonts are set, use those

      if (this.field.font.family instanceof Array) {

        fontFamilies = ['default', ...this.field.font.family.map(font => (

          font.label + ', ' + font.css

        ))];

      }

      setValues(fontFamilies, 'fontFamily');

      config.fontFamily.supportAllValues = true;

    }

    // Font size chooser

    if (this.field.font.size) {

      styles.push('fontSize');

      config.plugins.push('FontSize');

      let fontSizes = [];

      const convertToEm = (percent) => parseFloat(percent) / 100 + 'em';

      if (this.field.font.size instanceof Array) {

        // Use specified sizes

        fontSizes = this.field.font.size.map(size => ({

          title: size.label,

          model: convertToEm(size.css)

        }));

      } else {

        // Standard font sizes that are available

        fontSizes = [

          'Default', '50%', '56.25%', '62.5%', '68.75%', '75%', '87.5%',

          '100%', '112.5%', '125%', '137.5%', '150%', '162.5%', '175%',

          '225%', '300%', '450%'

        ].map(percent => ({

          title: percent,

          model: percent === 'Default' ? '1em' : convertToEm(percent)

        }));

      }

      setValues(fontSizes, 'fontSize');

    }

    /**

     * Format an array of color objects for ckeditor

     * @param {Array} values

     * @returns {string}

     */

    const getColors = function (values) {

      const colors = [];

      for (let i = 0; i < values.length; i++) {

        const val = values[i];

        if (val.label && val.css) {

          // Check if valid color format

          const css = val.css.match(/^(#[a-f0-9]{3}[a-f0-9]{3}?|rgba?\([0-9, ]+\)|hsla?\([0-9,.% ]+\)) *;?$/i);

          // If invalid, skip

          if (!css) {

            continue;

          }

          colors.push({color: css[0], label: val.label});

        }

      }

      return colors;

    };

    // Text color chooser

    if (this.field.font.color) {

      colors.push('fontColor');

      config.plugins.push('FontColor');

      if (this.field.font.color instanceof Array) {

        config.fontColor = { colors: getColors(this.field.font.color) };

      }

    }

    // Text background color chooser

    if (this.field.font.background) {

      colors.push('fontBackgroundColor');

      config.plugins.push('FontBackgroundColor');

      if (this.field.font.background instanceof Array) {

        config.fontBackgroundColor = { colors: getColors(this.field.font.color) };

      }

    }

    // Add the text styling options

    if (styles.length) {

      config.toolbar.push(...styles);

    }

    if (colors.length) {

      config.toolbar.push(...colors);

    }

  }

  if (this.field.enterMode === 'p') {

    this.tags.push('p');

  }

  else {

    this.tags.push('div');

    // Without this, empty divs get deleted on init of cke

    config.plugins.push('GeneralHtmlSupport');

    config.htmlSupport = {

      allow: [{

        name: 'div',

        attributes: true,

        classes: true,

        styles: true

      }]

    };

  }

  return config;

};

/**

 * Append field to wrapper.

 *

 * @param {type} $wrapper

 * @returns {undefined}

 */

ns.Html.prototype.appendTo = function ($wrapper) {

  var that = this;

  this.$item = ns.$(this.createHtml()).appendTo($wrapper);

  this.$input = this.$item.children('.ckeditor');

  this.$errors = this.$item.children('.h5p-errors');

  ns.bindImportantDescriptionEvents(this, this.field.name, this.parent);

  this.ckEditorConfig = this.getCKEditorConfig();

  this.$input.focus(function () {

    // Blur is not fired on destroy. Therefore we need to keep track of it!

    var blurFired = false;

    // Remove placeholder

    that.$placeholder = that.$item.find('.h5peditor-ckeditor-placeholder').detach();

    if (ns.Html.first) {

      ClassicEditor.basePath = ns.basePath + '/ckeditor/';

      ns.Html.first = false;

    }

    if (ns.Html.current === that) {

      return;

    }

    // Remove existing CK instance.

    ns.Html.removeWysiwyg();

    that.inputWidth = that.$input[0].getBoundingClientRect().width;

    ns.Html.current = that;

    ClassicEditor

      .create(this, that.ckEditorConfig)

      .then(editor => {

        const getEditorHeight = () => {

          // Use the dimensions of the H5P iframe, not the editor iframe

          const { innerHeight, innerWidth } = window.parent;

          let ratio = 0.5;

          switch (true) {

            case innerHeight < 560:

              ratio = 0.2

              break;

            case innerHeight < 768 && innerWidth < 576:

              ratio = 0.25

              break;

            case innerHeight < 768:

              ratio = 0.3

              break;

            case innerHeight < 1024 && innerWidth < 576:

              ratio = 0.3;

              break;

            case innerHeight < 1024:

              ratio = 0.45;

              break;

            default:

              break;

          }

          return (ratio * innerHeight * 0.85) + 'px';

        }

        that.ckeditor = editor;

        const editable = editor.ui.view.editable;

        editorElement = editable.element;

        editor.ui.view.element.style.maxWidth = that.inputWidth + 'px';

        editorElement.style.maxHeight = getEditorHeight();

        // Readjust toolbar's grouped item dropdown panel,

        // since it can overflow the parent iframe element by using default positioning

        const dropdownPanel = editor.ui.view.toolbar._behavior.groupedItemsDropdown;

        dropdownPanel.panelPosition = 'auto';

        // Disable sticky toolbar, since it has problem within iframes

        editor.ui.view.stickyPanel.unbind('isActive');

        editor.ui.view.stickyPanel.isActive = false;

        // Remove overflow protection on startup

        let initialData = editor.getData();

        if (initialData.includes('table-overflow-protection')) {

          initialData = initialData.replace(/<div class=\"table-overflow-protection\">.*<\/div>/, '');

          editor.setData(initialData);

        }

        // Mimic old enter_mode behaviour if not specifically set to 'p'

        if (that.field.enterMode !== 'p') {

          // Use <div> elements instead of <p>

          editor.conversion.for('downcast').elementToElement({

            model: 'paragraph',

            view: 'div',

            converterPriority: 'high'

          });

        }

        editor.ui.on('update', () => {

          editorElement.style.maxHeight = getEditorHeight();

        });

        editor.editing.view.focus();

        editor.on('focus', function () {

          blurFired = false;

          editorElement.style.maxHeight = getEditorHeight();

        });

        editor.once('destroy', function () {

          // In some cases, the blur event is not fired. Need to be sure it is, so that

          // validation and saving is done

          if (!blurFired) {

            blur();

          }

          // Display placeholder if:

          // -- The value held by the field is empty AND

          // -- The value shown in the UI is empty AND

          // -- A placeholder is defined

          const value = editor.getData();

          if (that.$placeholder.length !== 0 && (value === undefined || value.length === 0) && (that.value === undefined || that.value.length === 0)) {

            that.$placeholder.appendTo(that.$item.find('.ckeditor'));

          }

          // Since validate() is not always run,

          // make sure tabe overflow protection is added always when editor is destroyed

          if (value.includes('table') && !value.includes('table-overflow-protection')) {

            that.value = value + '<div class="table-overflow-protection"></div>';

            that.setValue(that.field, that.value);

            that.$input.html(that.value).change();

          }

        });

        var blur = function () {

          blurFired = true;

          // Do not validate if the field has been hidden.

          if (that.$item.is(':visible')) {

            that.validate();

          }

        };

        editor.on('blur', blur);

      })

      .catch(error => {

        throw new Error('Error loading CKEditor: ' + error);

      });

    });

  // Always preload the first CKEditor field to avoid focus problems when the

  // editor is opened inside an iframe and focus has to be set by a human made

  // event (Safari).

  // if (this.$item.is(':visible') && !ns.Html.firstLoad) {

  //   handleFocus();

  //   ns.Html.firstLoad = true;

  // }

};

/**

 * Create HTML for the HTML field.

 */

ns.Html.prototype.createHtml = function () {

  const id = ns.getNextFieldId(this.field);

  var input = '<div id="' + id + '"';

  if (this.field.description !== undefined) {

    input += ' aria-describedby="' + ns.getDescriptionId(id) + '"';

  }

  input += ' class="ckeditor" tabindex="0" contenteditable="true">';

  if (this.value !== undefined) {

    input += this.value;

  }

  else if (this.field.placeholder !== undefined) {

    input += '<span class="h5peditor-ckeditor-placeholder">' + this.field.placeholder + '</span>';

  }

  // Add overflow protection if table

  if (this.field.tags.includes('table') && !input.includes('table-overflow-protection')) {

    input += '<div class="table-overflow-protection"></div>';

  }

  input += '</div>';

  return ns.createFieldMarkup(this.field, ns.createImportantDescription(this.field.important) + input, id);

};

/**

 * Validate the current text field.

 */

ns.Html.prototype.validate = function () {

  var that = this;

  if (that.$errors.children().length) {

    that.$errors.empty();

    this.$input.addClass('error');

  }

  // Get contents from editor

  // If there are more than one ckeditor, getData() might be undefined when ckeditor is not

  let value = ((this.ckeditor !== undefined && this.ckeditor.getData() !== undefined)

    ? this.ckeditor.getData()

    : this.$input.html());

  value = value

    // Remove placeholder text if any:

    .replace(/<span class="h5peditor-ckeditor-placeholder">.*<\/span>/, '')

    // Workaround for Microsoft browsers that otherwise can produce non-emtpy fields causing trouble

    .replace(/^<br>$/, '');

  var $value = ns.$('<div>' + value + '</div>');

  var textValue = $value.text();

  // Check if we have any text at all.

  if (!this.field.optional && !textValue.length) {

    // We can accept empty text, if there's an image instead.

    if (!(this.inTags("img") && $value.find('img').length > 0)) {

      this.$errors.append(ns.createError(ns.t('core', 'requiredProperty', { ':property': ns.t('core', 'textField') })));

    }

  }

  // Verify HTML tags.  Removes tags not in allowed tags.  Will replace with

  // the tag's content.  So if we get an unallowed container, the contents

  // will remain, without the container.

  $value.find('*').each(function () {

    if (!that.inTags(this.tagName)) {

      ns.$(this).replaceWith(ns.$(this).contents());

    }

  });

  // Add overflow protection if chance of aligned tables

  if(that.inTags('table') && !value.includes('table-overflow-protection')) {

    this.$input.append('<div class="table-overflow-protection"></div>');

    $value.append('<div class="table-overflow-protection"></div>');

  }

  value = $value.html();

  // Display errors and bail if set.

  if (that.$errors.children().length) {

    return false;

  }

  else {

    this.$input.removeClass('error');

  }

  this.value = value;

  this.setValue(this.field, value);

  this.$input.change(); // Trigger change event.

  return value;

};

/**

 * Destroy H5PEditor existing CK instance. If it exists.

 */

ns.Html.removeWysiwyg = function () {

  if (ns.Html.current !== undefined) {

    try {

      ns.Html.current.ckeditor.destroy();

    }

    catch (e) {

      // No-op, just stop error from propagating. This usually occurs if

      // the CKEditor DOM has been removed together with other DOM data.

    }

    ns.Html.current = undefined;

  }

};

/**

 * Remove this item.

 */

ns.Html.prototype.remove = function () {

  this.$item.remove();

};

/**

 * When someone from the outside wants to set a value.

 *

 * @param {string} value

 */

ns.Html.prototype.forceValue = function (value) {

  if (this.ckeditor === undefined) {

    this.$input.html(value);

  }

  else {

    this.ckeditor.setData(value);

  }

  this.validate();

};

ns.widgets.html = ns.Html;