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.createToolbar = function () {

  var basicstyles = [];

  var paragraph = [];

  var formats = [];

  var inserts = [];

  var toolbar = [];

  // Basic styles

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

    basicstyles.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")) {

    basicstyles.push('Italic');

    // Might make "em" duplicated in the tag lists. Which again

    // doesn't really matter. Note: CKeditor will only make ems.

    this.tags.push("em");

  }

  if (this.inTags("u")) basicstyles.push('Underline');

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

    basicstyles.push('Strike');

    // 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");

  if (this.inTags("sup")) basicstyles.push("Superscript");

  if (basicstyles.length > 0) {

    basicstyles.push("-");

    basicstyles.push("RemoveFormat");

    toolbar.push({

      name: 'basicstyles',

      items: basicstyles

    });

  }

  // Alignment is added to all wysiwygs

  toolbar.push({

    name: "justify",

    items: ["JustifyLeft", "JustifyCenter", "JustifyRight"]

  });

  // Paragraph styles

  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");

  if (paragraph.length > 0) {

    toolbar.push(paragraph);

  }

  // Links.

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

    var items = ["Link", "Unlink"];

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

      items.push("Anchor");

    }

    toolbar.push({

      name: "links",

      items: items

    });

  }

  // Inserts

  if (this.inTags("img")) inserts.push("Image");

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

    inserts.push("Table");

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

  }

  if (this.inTags("hr")) inserts.push("HorizontalRule");

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

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

      inserts.push('Code');

    }

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

      inserts.push('CodeSnippet');

    }

  }

  if (inserts.length > 0) {

    toolbar.push({

      name: "insert",

      items: inserts

    });

  }

  // Create wrapper for text styling options

  var styles = {

    name: "styles",

    items: []

  };

  var colors = {

    name: "colors",

    items: []

  };

  // Add format group if formatters in tags (h1, h2, etc). Formats use their

  // own format_tags to filter available formats.

  if (this.inTags("h1")) formats.push("h1");

  if (this.inTags("h2")) formats.push("h2");

  if (this.inTags("h3")) formats.push("h3");

  if (this.inTags("h4")) formats.push("h4");

  if (this.inTags("h5")) formats.push("h5");

  if (this.inTags("h6")) formats.push("h6");

  if (this.inTags("address")) formats.push("address");

  if (this.inTags("pre")) formats.push("pre");

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

    formats.push("p");   // If the formats are shown, always have a paragraph..

    this.tags.push("p");

    styles.items.push('Format');

  }

  var ret = {

    toolbar: toolbar

  };

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

    this.tags.push('span');

    /**

     * Help set specified values for property.

     *

     * @private

     * @param {Array} values list

     * @param {string} prop Property

     * @param {string} [defProp] Default property name

     */

    var setValues = function (values, prop, defProp) {

      ret[prop] = '';

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

        var val = values[i];

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

          // Add label and CSS

          ret[prop] += val.label + '/' + val.css + ';';

          // Check if default value

          if (defProp && val.default) {

            ret[defProp] = val.label;

          }

        }

      }

    };

    /**

     * @private

     * @param {Array} values

     * @returns {string}

     */

    var getColors = function (values) {

      var colors = '';

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

        var val = values[i];

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

          var css = val.css.match(/^#?([a-f0-9]{3}[a-f0-9]{3}?)$/i);

          if (!css) {

            continue;

          }

          // Add label and CSS

          if (colors) {

            colors += ',';

          }

          colors += val.label + '/' + css[1];

        }

      }

      return colors;

    };

    if (this.field.font.family) {

      // Font family chooser

      styles.items.push('Font');

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

        // Use specified families

        setValues(this.field.font.family, 'font_names', 'font_defaultLabel');

      }

    }

    if (this.field.font.size) {

      // Font size chooser

      styles.items.push('FontSize');

      ret.fontSize_sizes = '';

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

        // Use specified sizes

        setValues(this.field.font.size, 'fontSize_sizes', 'fontSize_defaultLabel');

      }

      else {

        ret.fontSize_defaultLabel = '100%';

        // Standard font sizes that is available.

        var defaultAvailable = [8, 9, 10, 11, 12, 14, 16, 18, 20, 22, 24, 26, 28, 36, 48, 72];

        for (var i = 0; i < defaultAvailable.length; i++) {

          // Calculate percentage of standard font size. This enables scaling

          // in content types without rounding errors across browsers.

          var em = defaultAvailable[i] / 16;

          ret.fontSize_sizes += (em * 100) + '%/' + em + 'em;';

        }

      }

    }

    if (this.field.font.color) {

      // Text color chooser

      colors.items.push('TextColor');

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

        ret.colorButton_colors = getColors(this.field.font.color);

        ret.colorButton_enableMore = false;

      }

    }

    if (this.field.font.background) {

      // Text background color chooser

      colors.items.push('BGColor');

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

        ret.colorButton_colors = getColors(this.field.font.color);

        ret.colorButton_enableMore = false;

      }

    }

  }

  // Add the text styling options

  if (styles.items.length) {

    toolbar.push(styles);

  }

  if (colors.items.length) {

    toolbar.push(colors);

  }

  // Set format_tags if not empty. CKeditor does not like empty format_tags.

  if (formats.length) {

    ret.format_tags = formats.join(';');

  }

  // Enable selection of enterMode in module semantics.

  if (this.field.enterMode === 'p' || formats.length > 0) {

    this.tags.push('p');

    ret.enterMode = CKEDITOR.ENTER_P;

  }

  else {

    // Default to DIV, not allowing BR at all.

    this.tags.push('div');

    ret.enterMode = CKEDITOR.ENTER_DIV;

  }

  return ret;

};

/**

 * 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);

  var ckConfig = {

    extraPlugins: "",

    startupFocus: true,

    enterMode: CKEDITOR.ENTER_DIV,

    allowedContent: true, // Disables the ckeditor content filter, might consider using it later... Must make sure it doesn't remove math...

    protectedSource: [],

    contentsCss: ns.basePath + 'styles/css/cke-contents.css', // We want to customize the CSS inside the editor

    codeSnippet_codeClass: 'h5p-hl'

  };

  ns.$.extend(ckConfig, this.createToolbar());

  // Look for additions in HtmlAddons

  if (ns.HtmlAddons) {

    for (var tag in ns.HtmlAddons) {

      if (that.inTags(tag)) {

        for (var provider in ns.HtmlAddons[tag]) {

          ns.HtmlAddons[tag][provider](ckConfig, that.tags);

        }

      }

    }

  }

  this.$item.children('.ckeditor').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) {

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

    }

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

      return;

    }

    // Remove existing CK instance.

    ns.Html.removeWysiwyg();

    CKEDITOR.document.getBody = function () {

      // Have to attach to an element that does not get hidden or removed, since an internal "calculator" element

      // inside CKeditor relies on this element to always exist and not be hidden.

      return new CKEDITOR.dom.element(window.document.body);

    };

    // Override convertToPx to make sure the calculator is always visible so it can make the measurements and is

    // removed after the measurements are done, adapted from:

    // https://github.com/ckeditor/ckeditor4/blob/cae20318d46745cc46c811da4e7d68b38ca32449/core/tools.js#L899-L929

    CKEDITOR.tools.convertToPx = function (cssLength) {

        const calculator = CKEDITOR.dom.element.createFromHtml( '<div style="position:absolute;left:-9999px;' +

          'top:-9999px;margin:0px;padding:0px;border:0px;"' +

          '></div>', CKEDITOR.document );

        CKEDITOR.document.getBody().append(calculator);

        if ( !( /%$/ ).test( cssLength ) ) {

          var isNegative = parseFloat( cssLength ) < 0,

            ret;

          if ( isNegative ) {

            cssLength = cssLength.replace( '-', '' );

          }

          calculator.setStyle( 'width', cssLength );

          ret = calculator.$.clientWidth;

          if (calculator.$ && calculator.$.parentNode) {

            calculator.$.parentNode.removeChild(calculator.$);

          }

          if ( isNegative ) {

            return -ret;

          }

          return ret;

        }

        if (calculator.$ && calculator.$.parentNode) {

          calculator.$.parentNode.removeChild(calculator.$);

        }

        return cssLength;

    };

    ns.Html.current = that;

    ckConfig.width = this.offsetWidth - 8; // Avoid miscalculations

    that.ckeditor = CKEDITOR.replace(this, ckConfig);

    that.ckeditor.on('focus', function () {

      blurFired = false;

    });

    that.ckeditor.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

      var value = that.ckeditor !== undefined ? that.ckeditor.getData() : that.$input.html();

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

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

      }

    });

    var blur = function () {

      blurFired = true;

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

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

        that.validate();

      }

    };

    that.ckeditor.on('blur', blur);

    // Add events to ckeditor. It is beeing done here since we know it exists

    // at this point... Use case from commit message: "Make the default

    // linkTargetType blank for ckeditor" - STGW

    if (ns.Html.first) {

      CKEDITOR.on('dialogDefinition', function (e) {

        // Take the dialog name and its definition from the event data.

        var dialogName = e.data.name;

        var dialogDefinition = e.data.definition;

        // Check if the definition is from the dialog window you are interested in (the "Link" dialog window).

        if (dialogName === 'link') {

          // Get a reference to the "Link Info" tab.

          var targetTab = dialogDefinition.getContents('target');

          // Set the default value for the URL field.

          var urlField = targetTab.get('linkTargetType');

          urlField['default'] = '_blank';

        }

        // Override show event handler

        var onShow = dialogDefinition.onShow;

        dialogDefinition.onShow = function () {

          if (onShow !== undefined) {

            onShow.apply(this, arguments);

          }

          // Grab current item

          var $item = ns.Html.current.$item;

          // Position dialog above text field

          var itemPos = $item[0].getBoundingClientRect();

          var dialogSize = this.getSize();

          var x = itemPos.x + (itemPos.width / 2) - (dialogSize.width / 2);

          var y = itemPos.y + (itemPos.height / 2) - (dialogSize.height / 2);

          this.move(x, y, true);

        };

      });

      ns.Html.first = false;

    }

  });

};

/**

 * 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>';

  }

  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

  var value = this.ckeditor !== 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());

    }

  });

  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;