Spark Edit module

This repository contains the version of Spark's inline editing module refactored to run on the Create.js stack.

Using the shared Create.js & VIE codebase makes it possible to share code between CMS projects, essentially making Spark development easier and the code more maintainable. These shared JavaScript libraries are used in various projects including TYPO3, Midgard, and Symfony CMF.

For some background on this approach, refer to Decoupling Content Management.

The work of porting existing Spark edit code to Create.js was initially undertaken by Wim Leers and Henri Bergius during DrupalCon Munich 2012.

How to install.

• Download the spark distribution (currently works with 7.x-1.0-alpha6) from the project page.
• Replace edit.module with edit-createjs.module (cd profiles/spark/modules/contrib ; rm -rf edit/ ; git clone https://github.com/wimleers/edit-createjs.git).
• Download Backbone and Underscore.
• Create directories sites/all/libraries/backbone/ and sites/all/libraries/underscore/. Move the minified files to the respective directories and make sure sites/all/libraries/backbone/backbone-min.js and sites/all/libraries/underscore/underscore-min.js subsequently exist.
• Install Spark (e.g. if you have drush installed $ cd {SPARK-DIRECTORY} ; drush si spark --db-url="mysql://{USER}:{PWD}@localhost/{DBNAME}").

How does this work?

Bootstrapping:

• The entry point to the system is the Drupal.edit.init call
• Initialization instantiates VIE, and prepares a Backbone model to keep Spark edit state
• Initialization also loads the Create.js storage widget to handle localStorage, restoring unsaved content etc.
• Once the dependencies have been prepared, all editable fields will be retrieved from DOM, and a VIE entity will be instantiated for each
• The DOM element and the VIE entity are given to a Backbone EditableFieldView instance
• The EditableFieldViews instantiate a Create.js editable widget for their editable contents

Switching to edit mode:

• The Backbone EditableFieldViews listen to Spark edit state changes
• When switching to editing stage, they decorate the editables with borders
• The views also subscribe to mouse movements and clicks
• When mouse is over a view, that view will display its label
• When a view is clicked, the editable widget is enabled, and it will load the appropriate editor (WYSIWYG, simple contentEditable, form, etc)

Switching to view mode:

• The EditableFieldViews again receive the state change from Spark edit
• The views disable their UI elements, returning the DOM to the undecorated and "passive" state

Status

Most of the code has now been ported to use VIE entities for the editable contents, Create.js editor widgets for the actual content editing, and Backbone views for rendering the UI.

There are still some lingering bugs from this port that will be resolved soon.

After that the main remaining bigger task is to move saving from direct form submissions in the views to a custom Backbone.sync implementation. This will make it easier to support both the forms-based Drupal 7 saving process, and the RESTful Drupal 8 API, as we can just swap the sync methods used.

Currently the DOM parsing depends on Spark's custom HTML5 data attributes. VIE and Create.js would support RDFa out-of-the-box, and so this would be the preferred annotation in the long run.