Club Drupal

/**

 *  @file

 *  File with utilities to handle media in html editing.

 */

(function ($) {

  Drupal.media = Drupal.media || {};

  /**

   * Utility to deal with media tokens / placeholders.

   */

  Drupal.media.filter = {

    /**

     * Replaces media tokens with the placeholders for html editing.

     * @param content

     */

    replaceTokenWithPlaceholder: function(content) {

      Drupal.media.filter.ensure_tagmap();

      var matches = content.match(/\[\[.*?\]\]/g);

      if (matches) {

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

          var match = matches[i];

          if (match.indexOf('"type":"media"') == -1) {

            continue;

          }

          // Check if the macro exists in the tagmap. This ensures backwards

          // compatibility with existing media and is moderately more efficient

          // than re-building the element.

          var media = Drupal.settings.tagmap[match];

          var media_json = match.replace('[[', '').replace(']]', '');

          // Ensure that the media JSON is valid.

          try {

            var media_definition = JSON.parse(media_json);

          }

          catch (err) {

            // @todo: error logging.

            // Content should be returned to prevent an empty editor.

            return content;

          }

          // Re-build the media if the macro has changed from the tagmap.

          if (!media && media_definition.fid) {

            Drupal.media.filter.ensureSourceMap();

            var source = Drupal.settings.mediaSourceMap[media_definition.fid];

            media = document.createElement(source.tagName);

            media.src = source.src;

            media.innerHTML = source.innerHTML;

          }

          // Apply attributes.

          var element = Drupal.media.filter.create_element(media, media_definition);

          var markup  = Drupal.media.filter.outerHTML(element);

          // Use split and join to replace all instances of macro with markup.

          content = content.split(match).join(markup);

        }

      }

      return content;

    },

    /**

     * Returns alt and title field attribute data from the corresponding fields.

     *

     * Specifically looks for file_entity module's file_image_alt_text and

     * file_image_title_text fields as those are by default used to store

     * override values for image alt and title attributes.

     *

     * @param options (array)

     *   Options passed through a popup form submission.

     * @param includeFieldID (bool)

     *   If set, the returned object will have extra keys with the IDs of the

     *   found fields.

     *

     * If the alt or title fields were not found, their keys will be excluded

     * from the returned array.

     *

     * @return

     *   An object with the following keys:

     *   - alt: The value of the alt field.

     *   - altField: The id of the alt field.

     *   - title: The value of the title field.

     *   - titleField: The id of the title field.

     */

    parseAttributeFields: function(options, includeFieldID) {

      var attributes = {};

      for (var field in options) {

        // If the field is set to false, use an empty string for output.

        options[field] = options[field] === false ? '' : options[field];

        //if (field.match(/^field_file_image_alt_text/)) {

        if (field.match(new RegExp('^' + Drupal.settings.media.img_alt_field))) {

          attributes.alt = options[field];

          if (includeFieldID) {

            attributes.altField = field;

          }

        }

        //if (field.match(/^field_file_image_title_text/)) {

        if (field.match(new RegExp('^' + Drupal.settings.media.img_title_field))) {

          attributes.title = options[field];

          if (includeFieldID) {

            attributes.titleField = field;

          }

        }

      }

      return attributes;

    },

    /**

     * Ensures changes made to fielded attributes are done on the fields too.

     *

     * This should be called when creating a macro tag from a placeholder.

     *

     * Changed made to attributes represented by fields are synced back to the

     * corresponding fields, if they exist. The alt/title attribute

     * values encoded in the macro will override the alt/title field values (set

     * in the Media dialog) during rendering of both WYSIWYG placeholders and

     * the final file entity on the server. Syncing makes changes applied to a

     * placeholder's alt/title attribute using native WYSIWYG tools visible in

     * the fields shown in the Media dialog.

     *

     * The reverse should be done when creating a placeholder from a macro tag

     * so changes made in the Media dialog are reflected in the placeholder's

     * alt and title attributes or the values there become stale and the change

     * appears uneffective.

     *

     * @param file_info (object)

     *   A JSON decoded object of the file being inserted/updated.

     */

    syncAttributesToFields: function(file_info) {

      if (!file_info) {

        file_info = {};

      }

      if (!file_info.attributes) {

        file_info.attributes = {};

      }

      if (!file_info.fields) {

        file_info.fields = {};

      }

      var fields = Drupal.media.filter.parseAttributeFields(file_info.fields, true);

      // If the title attribute has changed, ensure the title field is updated.

      var titleAttr = file_info.attributes.title || false;

      if (fields.titleField && (titleAttr !== fields.title)) {

        file_info.fields[fields.titleField] = titleAttr;

      }

      // If the alt attribute has changed, ensure the alt field is updated.

      var altAttr = file_info.attributes.alt || false;

      if (fields.altField && (altAttr !== fields.alt)) {

        file_info.fields[fields.altField] = altAttr;

      }

      return file_info;

    },

    /**

     * Replaces media elements with tokens.

     *

     * @param content (string)

     *   The markup within the wysiwyg instance.

     */

    replacePlaceholderWithToken: function(content) {

      Drupal.media.filter.ensure_tagmap();

      // Replace all media placeholders with their JSON macro representations.

      //

      // There are issues with using jQuery to parse the WYSIWYG content (see

      // http://drupal.org/node/1280758), and parsing HTML with regular

      // expressions is a terrible idea (see http://stackoverflow.com/a/1732454/854985)

      //

      // WYSIWYG editors act wacky with complex placeholder markup anyway, so an

      // image is the most reliable and most usable anyway: images can be moved by

      // dragging and dropping, and can be resized using interactive handles.

      //

      // Media requests a WYSIWYG place holder rendering of the file by passing

      // the wysiwyg => 1 flag in the settings array when calling

      // media_get_file_without_label().

      //

      // Finds the media-element class.

      var classRegex = 'class=([\'"])[^\\1]*?media-element';

      // Image tag with the media-element class.

      var regex = '<img[^>]+' + classRegex + '[^>]*?>';

      // Or a span with the media-element class (used for documents).

      // \S\s catches any character, including a linebreak; JavaScript does not

      // have a dotall flag.

      regex += '|<span[^>]+' + classRegex + '[^>]*?>[\\S\\s]+?</span>';

      var matches = content.match(RegExp(regex, 'gi'));

      if (matches) {

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

          var markup = matches[i];

          var macro = Drupal.media.filter.create_macro($(markup));

          // If we have a truthy response, store the macro and perform the

          // replacement.

          if (macro) {

            Drupal.settings.tagmap[macro] = markup;

            content = content.replace(markup, macro);

          }

        }

      }

      return content;

    },

    /**

     * Serializes file information as a url-encoded JSON object and stores it

     * as a data attribute on the html element.

     *

     * @param html (string)

     *    A html element to be used to represent the inserted media element.

     * @param info (object)

     *    A object containing the media file information (fid, view_mode, etc).

     */

    create_element: function (html, info) {

      if ($('<div>').append(html).text().length === html.length) {

        // Element is not an html tag. Surround it in a span element so we can

        // pass the file attributes.

        html = '<span>' + html + '</span>';

      }

      var element = $(html);

      // Parse out link wrappers. They will be re-applied when the image is

      // rendered on the front-end.

      if (element.is('a')) {

        element = element.children();

      }

      // Extract attributes represented by fields and use those values to keep

      // them in sync, usually alt and title.

      info.fields = info.attributes;

      var attributes = Drupal.media.filter.parseAttributeFields(info.attributes);

      info.attributes = $.extend(info.attributes, attributes);

      // Move attributes from the file info array to the placeholder element.

      if (info.attributes) {

        $.each(Drupal.settings.media.wysiwyg_allowed_attributes, function(i, a) {

          if (info.attributes[a]) {

            element.attr(a, $('<textarea />').html(info.attributes[a]).text());

          }

        });

        delete(info.attributes);

        // Store information to rebuild the element later, if necessary.

        Drupal.media.filter.ensureSourceMap();

        Drupal.settings.mediaSourceMap[info.fid] = {

          tagName: element[0].tagName,

          src: element[0].src,

          innerHTML: element[0].innerHTML

        }

      }

      info.type = info.type || "media";

      // Store the data in the data map.

      Drupal.media.filter.ensureDataMap();

      Drupal.settings.mediaDataMap[info.fid] = info;

      // Store the fid in the DOM to retrieve the data from the info map.

      element.attr('data-fid', info.fid);

      // Add data-media-element attribute so we can find the markup element later.

      element.attr('data-media-element', '1')

      var classes = ['media-element'];

      if (info.view_mode) {

        // Remove any existing view mode classes.

        element.removeClass (function (index, css) {

          return (css.match (/\bfile-\S+/g) || []).join(' ');

        });

        classes.push('file-' + info.view_mode.replace(/_/g, '-'));

      }

      element.addClass(classes.join(' '));

      // Apply link_text if present.

      if (info.link_text) {

        $('a', element).html(info.link_text);

      }

      return element;

    },

    /**

     * Create a macro representation of the inserted media element.

     *

     * @param element (jQuery object)

     *    A media element with attached serialized file info.

     */

    create_macro: function (element) {

      var file_info = Drupal.media.filter.extract_file_info(element);

      if (file_info) {

        if (typeof file_info.link_text == 'string') {

          // Make sure the link_text-html-tags are properly escaped.

          file_info.link_text = file_info.link_text.replace(/</g, '&lt;').replace(/>/g, '&gt;');

        }

        return '[[' + JSON.stringify(file_info) + ']]';

      }

      return false;

    },

    /**

     * Extract the file info from a WYSIWYG placeholder element as JSON.

     *

     * @param element (jQuery object)

     *    A media element with associated file info via a file id (fid).

     */

    extract_file_info: function (element) {

      var fid, file_info, value;

      if (fid = element.data('fid')) {

        Drupal.media.filter.ensureDataMap();

        if (file_info = Drupal.settings.mediaDataMap[fid]) {

          file_info.attributes = {};

          $.each(Drupal.settings.media.wysiwyg_allowed_attributes, function(i, a) {

            if (value = element.attr(a)) {

              // Replace " by \" to avoid error with JSON format.

              if (typeof value == 'string') {

                value = value.replace('"', '\\"');

              }

              file_info.attributes[a] = value;

            }

          });

          // Extract the link text, if there is any.

          file_info.link_text = element.find('a').html();

        }

      }

      return Drupal.media.filter.syncAttributesToFields(file_info);

    },

    /**

     * Gets the HTML content of an element.

     *

     * @param element (jQuery object)

     */

    outerHTML: function (element) {

      return element[0].outerHTML || $('<div>').append(element.eq(0).clone()).html();

    },

    /**

     * Gets the wrapped HTML content of an element to insert into the wysiwyg.

     *

     * It also registers the element in the tag map so that the token

     * replacement works.

     *

     * @param element (jQuery object) The element to insert.

     *

     * @see Drupal.media.filter.replacePlaceholderWithToken()

     */

    getWysiwygHTML: function (element) {

      // Create the markup and the macro.

      var markup = Drupal.media.filter.outerHTML(element),

        macro = Drupal.media.filter.create_macro(element);

      // Store macro/markup in the tagmap.

      Drupal.media.filter.ensure_tagmap();

      Drupal.settings.tagmap[macro] = markup;

      // Return the html code to insert in an editor and use it with

      // replacePlaceholderWithToken()

      return markup;

    },

    /**

     * Ensures the src tracking has been initialized and returns it.

     */

    ensureSourceMap: function() {

      Drupal.settings.mediaSourceMap = Drupal.settings.mediaSourceMap || {};

      return Drupal.settings.mediaSourceMap;

    },

    /**

     * Ensures the data tracking has been initialized and returns it.

     */

    ensureDataMap: function() {

      Drupal.settings.mediaDataMap = Drupal.settings.mediaDataMap || {};

      return Drupal.settings.mediaDataMap;

    },

    /**

     * Ensures the tag map has been initialized and returns it.

     */

    ensure_tagmap: function () {

      Drupal.settings.tagmap = Drupal.settings.tagmap || {};

      return Drupal.settings.tagmap;

    }

  }

})(jQuery);