Introduction

The Mee Module is the module transforming a standard textarea field into a scald enabled drag and droppable field. It also generates the resource manager located under the field.
This resource manager allows the user to order the dragged elements into primary and secondary resource. This can be useful to build a view showing which media are in which entities, or to use a cron to unpublish an entity when a primary resource is no more licenced.
We will look below into the code to demonstrate how it's built.

Php

Core hooks used

hook_field_info_alter() :
We add default values in the settings of instance :

$info['text_with_summary']['instance_settings']['dnd_enabled'] = 0;

hook_form_alter() :
We add three settings for the textarea field :
dnd_enabled > We enable the drag and drop capabilities
mee_enabled > add the resource manager below the field
context > Choose the scald representation to be used when a element will be dropped in the textarea

Hooks on behalf of the text module

hook_field_presave()
Before storing in the database the content of the field, we transform the content of the Scald atom to the SAS version
hook_field_insert()
We extract the Atom Id's used in the field and we store them in the mee_resource table :

db_insert('mee_resource')
      ->fields(array(
        'entity_type' => $entity_type,
        'entity_id' => $id,
        'revision_id' => $revision_id,
        'atom_sid' => $sid,
        'field' => $field['field_name'],
        'delta' => $delta,
         'weight' => $resource['weight'] - $separator,
         'required' => (int) $resource['required'],
         'copyright' => isset($copyrights[$sid]) ? $copyrights[$sid] : '',
       ))
       ->execute();

hook_field_update()
We update the mee_resource table with the new atom id's.

hook_field_delete()
We delete the id's from the database.

hook_field_formatter_prepare_view() :
Thats' the opposite of the storing we render the SAS version of the database to desired context HTML version for the atom.

        foreach ($items[$id] as $delta => &$item) {
          $item['value'] = scald_sas_to_rendered($item['value'], $instances[$id]['settings']['context']);
          $item['safe_value'] = scald_sas_to_rendered($item['safe_value'], $instances[$id]['settings']['context']);
        }

hook_field_widget_form_alter() :
This is an important part of the module as we do a lot of stuff here :

  • We pass thru scald_sas_to_rendered the field default_value
  • We add the necessary markup around the field to enable the drag and drop functionalities
  • We add the resource manager under the field as a custom form element

We add the element :

  $element['mee'] = array(
    '#prefix' => '<div class="mee-wrap-editor-library">',
    '#suffix' => '</div>',
    '#attached' => array(
      'css' => array(drupal_get_path('module', 'mee') . '/css/mee.css'),
      'js' => array(drupal_get_path('module', 'mee')  . '/mee.js'),
    ),
    '#element_validate' => array('mee_field_text_validate'),
    '#weight' => 0.5,
    'resource_manager' => array(
      '#theme' => 'mee_resource_manager',
    ),
  );

Scald hooks used

hook_scald_atom_delete() :
We delete all the links in the resource manager when an atom is deleted.

Wysiwyg hooks used

hook_wysiwyg_include_directory() :
Define a directory where is located a plugin for the wysiwyg. This is used for the SAS.

Javascript

The main file is mee.js.

We first declare a namespace in the drupal behaviors array. This helps us to check for any change in the textarea. This will be used to change the dropped atom from the drag and drop HTML to the scald editor context rendering.

Drupal.behaviors.mee = {
  attach: function(context, settings) {
    for (editor in settings.dndDropAreas) {
      $('#' + editor, context).each(function() {
        var $this = $(this);
        settings.mee.editors[$this.attr('id')] = '';
        setInterval(function() {
          Drupal.mee.update($this);
        }, 1000);
      });
    }
  }
}

the main function used to generate the rendering is Drupal.mee.update. the function handles two things :

  1. if a change is detected we render the atom, by changing the dropped value to the relevant one in the Drupal.dnd.Atoms array
  2. we update the resource manager to add the atom.

SAS plugin

The sas plugin is used to add a function when the wysiwyg is loaded :

  attach: function (content, settings, instanceId) {
    return Drupal.settings.mee.sas && Drupal.dnd ? Drupal.dnd.sas2html(content) : content;
  },

The sas2html takes the SAS version of the atom and replace it with the html editor one :

 text = text.replace(atom.sas, atom.editor);

Comments

amittarkar’s picture

where is the download link for this module?

valgibson’s picture

The mee module is part of the scald project (https://drupal.org/project/scald)

asiby’s picture

The explanation of how this module works or can be used is not at all clear to me. It looks like a fine peace of work, but knowing how you built is really not going to help anyone understand how to use it. Is there a documentation somewhere that can give more information about the Mee?

Live long ... and prosper!