From 4d25155b5c832f6b73053f4f520a67dabed1bc64 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?"J.=20Rene=CC=81e=20Beach"?= Date: Fri, 12 Oct 2012 15:29:45 -0400 Subject: [PATCH] Issue #1808076 by frega, jessebeach: Merged in frega fork of the wimleers fork of the edit module that incorporates Create.js, VIE, Backbone and Underscore. MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit commit 8880684b71f6e2a3788912e7048b56839eb15a94 Author: J. Renée Beach Date: Fri Oct 12 15:27:15 2012 -0400 Issue #1808076 by jessebeach: Moved VIE, Backbone and Underscore to their own libraries. Signed-off-by: J. Renée Beach commit 75c6f5a763bc6c47ab74ed6da8191cd4c2de4afd Merge: 60a0d7e c668f4a Author: J. Renée Beach Date: Fri Oct 12 15:21:03 2012 -0400 Issue #1808076 by frega: Merge branch 'refs/heads/frega/7.x-1.x' into node/1808076-createjs Conflicts: edit.info edit.module js/ajax.js js/edit.js js/theme.js js/ui-editables.js Signed-off-by: J. Renée Beach commit c668f4a97feacadbf34c9e846ab6bad1427f5c44 Merge: 5bc0ef3 7fdfe85 Author: frega Date: Thu Oct 11 20:35:10 2012 +0200 Merge branch '7.x-1.x' of ssh://github.com/frega/edit-createjs into toolbar-views-refactor commit 5bc0ef3bca9248e4fd7cb6fefbadcc421ec83d95 Author: frega Date: Thu Oct 11 20:33:13 2012 +0200 =Initial stab at refactoring Drupal.edit.toolbar into Drupal.edit.ToolbarView instances. It does work, but not completed and requires a lot more refactoring/de-coupling commit 7fdfe852c06c282a5dafe21c324af0047476f0b5 Author: frega Date: Thu Oct 11 13:32:07 2012 +0200 =Fix a typo in README and fixed a lingering reference to in the EditableFieldView commit c0eb56c84d951994ec7e3b64be352f93b2626232 Author: frega Date: Thu Oct 11 13:24:17 2012 +0200 =Start refactoring views.js commit 2867a21081687f847aaeb78c46771b1f4a46c4c5 Author: frega Date: Wed Oct 10 15:33:38 2012 +0200 =Improve README.md by including a 'How to install'-section, fix order of steps. commit 67cb49b419745dcdfc508b66fc446eb6dca31b78 Merge: 6157b06 2d2c01d Author: frega Date: Wed Oct 10 15:32:25 2012 +0200 Merge branch '7.x-1.x' of ssh://github.com/wimleers/edit-createjs into 7.x-1.x commit 6157b06a7cbad1ca480c3737c4ad2bd84108c314 Author: frega Date: Wed Oct 10 15:32:05 2012 +0200 =Improve README.md by including a 'How to install'-section commit 2d2c01d2fa4a025884e372255c1f57f5b97afa1e Merge: cc913db 2bc56c7 Author: frega Date: Wed Oct 10 06:14:39 2012 -0700 Merge pull request #9 from frega/7.x-1.x 7.x 1.x - Fixes #8 commit 2bc56c75be31803883ae414e6c9427f6f7309bd0 Author: frega Date: Wed Oct 10 13:18:18 2012 +0200 =Fixes #8, rebases on latest version of spark (alpha6), complete cleanup, add semicolons. commit 25597453f7bd70483ad70744d731ec93c69cf28e Author: frega Date: Wed Oct 10 13:17:09 2012 +0200 =Fixes #8, rebases on latest version of spark (alpha6), complete cleanup commit 1d7a8a02d147914b31b205dc3d2ae08a937dfb76 Author: frega Date: Wed Oct 10 13:11:22 2012 +0200 =This rehashes the README.md, so removing this commit 2b7da27a26e60f919009d32926090c9181a6b2a1 Author: frega Date: Wed Oct 10 13:07:10 2012 +0200 =Fixes #8, rebases on latest version of spark (alpha6) commit 8ded6e6e645c2ab7909d35e498378ea94dd3a608 Merge: cc913db 0a9ca67 Author: frega Date: Wed Oct 10 10:28:54 2012 +0200 Merge branch '7.x-1.x' of ssh://github.com/frega/edit-createjs into 7.x-1.x commit 0a9ca676e2b0c2c07336b604c03a4935484f696b Author: frega Date: Sun Oct 7 22:17:56 2012 +0200 =Fixes #4; #edit_backstage (holding the
for direct editables) should not be removed on disabling the overlay as it gets added on page load not on overlay enabling. commit 265257a09b85e817a33b0882fa7cb738f1f16a67 Author: frega Date: Sun Oct 7 12:17:03 2012 +0200 =Initial stab at creating a document, covering the current code, execution flow commit cc913db4b61d9c1bf7f22e709a9a86b485d3d60d Merge: 3af8c94 a4a53dd Author: Wim Leers Date: Sat Oct 6 15:39:11 2012 -0700 Merge pull request #6 from frega/7.x-1.x =Rough initial work on addressing issue #5 - Abstract form AJAX handling commit a4a53dd90e7b88852bddf13f22fc7f44c99b4220 Author: frega Date: Sat Oct 6 19:20:57 2012 +0200 =Fixes #1 - Clicking cancel or clicking on other editables leaves (last active) editable in a state where they can't be re-enabled commit b08e146929d484785d68f25f4d4a1d6e466dea90 Author: frega Date: Sat Oct 6 17:58:30 2012 +0200 =Fixes #7 - Editables get repadded when switching view and edit state. commit 3ce3f8a610a8159b12eca4e521b545c765c952bd Author: frega Date: Mon Oct 1 13:28:15 2012 +0200 =Rough initial work on addressing issue #5 - Abstract form AJAX handling commit 3af8c94062d0d358745e32cf8064ae0782fad281 Author: Henri Bergius Date: Tue Sep 25 23:03:30 2012 +0200 Simpler click handling commit 270d96a5a6f957c1899d87f37543cffbbc2107fe Author: Henri Bergius Date: Tue Sep 25 22:50:04 2012 +0200 Read element labels from VIE's type system commit 43083e824ae4779049eb02146a8ec1f8fd9ee478 Author: Henri Bergius Date: Tue Sep 25 22:41:55 2012 +0200 Register types read from DOM to VIE's type system commit e3e727a0a0ccd7b0676697c14f793a0a56f06fc6 Author: Henri Bergius Date: Tue Sep 25 22:08:39 2012 +0200 Switch over to the VIE SparkEditService in most places commit 369912f1d26fb92a5ba065e3b1ababa1ef63deb5 Author: Henri Bergius Date: Tue Sep 25 19:33:54 2012 +0200 Stub for Spark Edit -specific VIE service commit e403031b4a18356c18ca148392b3c2431ba38705 Author: Henri Bergius Date: Tue Sep 25 19:21:38 2012 +0200 Move VIE and Create.js to a subdirectory as they're reusable libraries commit 88e5ba850f3a454799219af021ef0514e99f856e Author: scor Date: Mon Aug 27 13:10:00 2012 -0400 add RDFa markup to the title of the node commit dffa1cd051276dc85d9e3c6538c0cafd5b0c2257 Author: Henri Bergius Date: Sat Aug 25 17:02:20 2012 +0200 More fixes for saving commit 5cc83fe3dd35c6fcd29e593c0a293028c4adf761 Author: Henri Bergius Date: Sat Aug 25 16:42:44 2012 +0200 Correct values for editedEditable commit 058e2f3ca7c5afb9d8fe05264293335a3b911c57 Author: Henri Bergius Date: Sat Aug 25 15:45:20 2012 +0200 Some documentation commit b2ab04bbccebdbb204d90b36453190155fe2cb3b Author: Henri Bergius Date: Sat Aug 25 15:18:19 2012 +0200 Switch dependencies to minified versions. We can use custom builds with unnecessary parts removed later commit 720e0af72a42469484a7e71f8764567c1a8960da Author: Henri Bergius Date: Sat Aug 25 13:52:22 2012 +0200 Handle clicks to overlay commit dd1c1fb6f77cfb2da32585a82a4b02af0dcd71dd Author: Henri Bergius Date: Fri Aug 24 18:28:20 2012 +0200 Migrate pad and unpad to views commit 88065ad0b046723692bf58c531581ad7fe722c65 Author: Henri Bergius Date: Fri Aug 24 17:34:32 2012 +0200 Simplify init commit daa30e957846cf6b844684f5b919edcee3f273a3 Author: Henri Bergius Date: Fri Aug 24 15:48:16 2012 +0200 Move editing UI to views commit 7d0b2fb475c999af3531a40133540539ab984915 Author: Henri Bergius Date: Fri Aug 24 13:33:06 2012 +0200 Start implementing the FieldView commit 8900fce7e7ded4074ddbd7675e8579424cae6014 Author: Henri Bergius Date: Fri Aug 24 13:32:50 2012 +0200 Move label reading to util commit 6361ae45d2f3e5c47df68febbf1a39358ce6316e Author: Henri Bergius Date: Fri Aug 24 11:52:19 2012 +0200 Document EditableView commit c5622bdebfe2683d47f29cae80466cebb23ac6a8 Merge: 184187f f77beea Author: Henri Bergius Date: Fri Aug 24 11:41:00 2012 +0200 Merge branch '7.x-1.x' of github.com:wimleers/edit-createjs into 7.x-1.x commit 184187f8f8fc4b05cd4af8796a72de1e38559742 Author: Henri Bergius Date: Fri Aug 24 11:40:47 2012 +0200 Switch state to a Backbone model commit f77beea5000ee82a761b6d5201d0e218d4223192 Author: Wim Leers Date: Fri Aug 24 10:09:11 2012 +0200 Fix unpadding of editables, and actually fix the restoring of direct editables. commit 071d8428f529fce635054b8cc206616341afafae Author: Henri Bergius Date: Thu Aug 23 23:56:36 2012 +0200 Workaround for reading also the entity title correctly commit 868b41d19d37bf759e2d75df81cb79a23e3b9c61 Author: Henri Bergius Date: Thu Aug 23 23:49:02 2012 +0200 Use a view so that Create.js Storage can handle restoring etc. commit a475f9c9d1a56eb7cc6ef6fef3c221c806a5f0ac Author: Henri Bergius Date: Thu Aug 23 23:48:21 2012 +0200 Ugly hack to get jQuery UI widget factory in commit d2565d93610e2bebe0d027b46f1febc3a64b1b6c Author: Henri Bergius Date: Thu Aug 23 22:32:08 2012 +0200 Call 'stopEdit' when returning to View state commit 43c43ac9fa62cf6a879240e4ed6b984e0263f346 Author: Henri Bergius Date: Thu Aug 23 22:11:16 2012 +0200 Initialize Create.js storage widget to eventually get localStorage restore support commit 87b5c47d5f0bc7a2ad883adc5a41028cf0fc5595 Author: Henri Bergius Date: Thu Aug 23 21:56:40 2012 +0200 More refactoring for Create.js compatibility commit e76fed073cdb4b5d9332dc9cc534b7ebccfed4f0 Author: Henri Bergius Date: Thu Aug 23 21:56:15 2012 +0200 Add Create.js commit 9e2cdb38a97fdf071468d9f38899571314fd6c8d Author: Henri Bergius Date: Thu Aug 23 18:40:44 2012 +0200 Namespace change commit a57c79c4a6ca0c69e4535b8bcc0657b677b3c4bd Author: Henri Bergius Date: Thu Aug 23 17:28:22 2012 +0200 Move rest of DOM-parsing to util commit 170677d7c454c24e28244c021c1e1b103c47b744 Author: Henri Bergius Date: Thu Aug 23 17:13:01 2012 +0200 Initial Create.js editor widget for Drupal forms commit 3bfc9cbf77689f3cf8b0c1ec02c98af75ffa2cb7 Author: Henri Bergius Date: Thu Aug 23 17:12:18 2012 +0200 Make getID safer commit 425dcf7b89f333fc8cff5330a92fdc5ca65482dd Author: Henri Bergius Date: Thu Aug 23 16:13:30 2012 +0200 Move finder methods to util commit 9d62f2abf597428ebdb5042d5a7065a084525426 Author: Henri Bergius Date: Thu Aug 23 16:10:22 2012 +0200 Move getID to util commit 5eb8e7e59cd00185831db3166e7695ba19eb8e82 Author: Henri Bergius Date: Thu Aug 23 16:04:05 2012 +0200 Initial subclassing of Create.js editable widget for Spark commit 46d4cc3de327b30ceb7fdfb0ab8d4a16374efc24 Author: Henri Bergius Date: Thu Aug 23 16:01:34 2012 +0200 Start moving DOM parsing to util commit 7e0c807663939063ffca1621d668052611315168 Author: Henri Bergius Date: Thu Aug 23 14:44:37 2012 +0200 Spark still works, but now we have VIE entities that get updated as well commit 844697662246c7dd965fe9d89c183aba53c76f52 Merge: a8b2411 19e4ed7 Author: Henri Bergius Date: Thu Aug 23 14:40:23 2012 +0200 Merge branch '7.x-1.x' of github.com:wimleers/edit-createjs into 7.x-1.x commit a8b2411e971a50b948fd9058aceb53942e61cfeb Author: Henri Bergius Date: Thu Aug 23 14:40:10 2012 +0200 Refactoring starts commit 19e4ed78c03e8da3e2fc8a33d9ab1f29ef2edbd7 Merge: ecc0ab2 4dd96ad Author: Wim Leers Date: Thu Aug 23 13:18:33 2012 +0200 Merge branch '7.x-1.x' of github.com:wimleers/edit-createjs into 7.x-1.x * '7.x-1.x' of github.com:wimleers/edit-createjs: Use data attribs instead of unreliable RDFa for now commit ecc0ab29d38655bdf8449379df7929938649f330 Author: Wim Leers Date: Thu Aug 23 13:17:27 2012 +0200 Create.js deps. commit 4dd96ad9f7c77c28994277d522484b19e6442fec Author: Henri Bergius Date: Thu Aug 23 13:16:24 2012 +0200 Use data attribs instead of unreliable RDFa for now commit 748eb75bd8cbb5147f13387ef34947de079fff3f Author: Henri Bergius Date: Thu Aug 23 12:27:43 2012 +0200 Start using VIE for entity field finding Signed-off-by: J. Renée Beach --- README.md | 52 + edit.module | 59 +- js/SparkEditService.js | 199 ++ js/ajax.js | 103 +- js/edit.js | 711 +---- js/editable.js | 56 + js/formwidget.js | 56 + js/lib/backbone.js | 1431 ++++++++++ js/lib/create.js | 7 + js/lib/underscore.js | 5 + js/lib/vie.js | 6943 ++++++++++++++++++++++++++++++++++++++++++++++++ js/theme.js | 16 +- js/ui-editables.js | 245 +- js/util.js | 106 + js/views.js | 755 ++++++ 15 files changed, 9987 insertions(+), 757 deletions(-) create mode 100644 README.md create mode 100644 js/SparkEditService.js create mode 100644 js/editable.js create mode 100644 js/formwidget.js create mode 100644 js/lib/backbone.js create mode 100644 js/lib/create.js create mode 100644 js/lib/underscore.js create mode 100644 js/lib/vie.js create mode 100644 js/views.js diff --git a/README.md b/README.md new file mode 100644 index 0000000..e1335a2 --- /dev/null +++ b/README.md @@ -0,0 +1,52 @@ +Spark Edit module +================= + +This repository contains the version of [Spark's](http://drupal.org/project/spark) inline editing module refactored to run on the [Create.js](http://createjs.org/) stack. + +Using the shared Create.js & [VIE](http://viejs.org/) 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](http://decoupledcms.org/). + +The work of porting existing Spark edit code to Create.js was initially undertaken by [Wim Leers](http://wimleers.com/) and [Henri Bergius](http://bergie.iki.fi/) during [DrupalCon Munich 2012](http://munich2012.drupal.org/). + +## How to install. + +* Download the spark distribution (currently works with 7.x-1.0-alpha6) from the [project page](http://drupal.org/project/spark). +* 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](http://backbonejs.org/backbone-min.js) and [Underscore](http://documentcloud.github.com/underscore/underscore-min.js). +* 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](http://createjs.org/guide/#storage) 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 `EditableFieldView`s instantiate a Create.js [editable widget](http://createjs.org/guide/#editable) for their editable contents + +Switching to edit mode: + +* The Backbone `EditableFieldView`s 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. diff --git a/edit.module b/edit.module index c6f0704..aaf1466 100644 --- a/edit.module +++ b/edit.module @@ -120,6 +120,7 @@ function edit_library() { $wysiwyg_module = variable_get(EDIT_WYSIWYG_VARIABLE, EDIT_WYSIWYG_DEFAULT); $path = drupal_get_path('module', 'edit'); + $libraries['edit'] = array( 'title' => 'Edit: in-place editing', 'website' => 'http://drupal.org/project/edit', @@ -162,6 +163,59 @@ function edit_library() { array('system', 'jquery.form'), array('system', 'drupal.form'), array('system', 'drupal.ajax'), + array('edit', 'edit.createjs'), + ), + ); + + $libraries['edit.createjs'] = array( + 'title' => 'CreateJS and deps', + 'website' => 'http://createjs.org', + 'version' => NULL, + 'js' => array( + drupal_get_path('module', 'jquery_update') . '/replace/ui/ui/jquery.ui.widget.js' => array(), + $path . '/js/lib/create.js' => array('defer' => TRUE), + $path . '/js/SparkEditService.js' => array('defer' => TRUE), + $path . '/js/editable.js' => array('defer' => TRUE), + $path . '/js/formwidget.js' => array('defer' => TRUE), + $path . '/js/views.js' => array('defer' => TRUE), + ), + 'dependencies' => array( + array('edit', 'edit.vie'), + ), + ); + + $libraries['edit.vie'] = array( + 'title' => 'Vienna IKS Editables', + 'website' => 'http://wiki.iks-project.eu/index.php/VIE', + 'version' => '2.0', + 'js' => array( + $path . '/js/lib/vie.js' => array('defer' => TRUE), + ), + 'dependencies' => array( + array('edit', 'edit.backbone'), + ), + ); + + // Register underscore as a library. + $libraries['edit.underscore'] = array( + 'title' => 'Underscore.js', + 'website' => 'http://underscorejs.org', + 'version' => '1.4.2', + 'js' => array( + $path . '/js/lib/underscore.js' => array(), + ), + ); + + // Register backbone as a library. + $libraries['edit.backbone'] = array( + 'title' => 'Backbone.js', + 'website' => 'http://backbonejs.org', + 'version' => '0.9.2', + 'js' => array( + $path . '/js/lib/backbone.js' => array(), + ), + 'dependencies' => array( + array('edit', 'edit.underscore'), ), ); @@ -560,8 +614,9 @@ function edit_preprocess_field(&$variables) { $language = $variables['element']['#language']; $format_id = $field[$language][0]['format']; - // Let the WYSIWYG editor know the text format. - $variables['attributes_array']['data-edit-text-format'] = $format_id; + // Let the WYSIWYG editor know the allowed tags. + $allowed_tags = filter_get_allowed_tags_by_format($format_id); + $variables['attributes_array']['data-allowed-tags'] = ($allowed_tags === TRUE) ? '' : implode(',', $allowed_tags); // Ensure the WYSIWYG editor has the necessary text format related // metadata. diff --git a/js/SparkEditService.js b/js/SparkEditService.js new file mode 100644 index 0000000..eda9029 --- /dev/null +++ b/js/SparkEditService.js @@ -0,0 +1,199 @@ +// VIE DOM parsing service for Spark Edit +(function () { + + VIE.prototype.SparkEditService = function (options) { + var defaults = { + name: 'edit', + subjectSelector: '.edit-field.edit-allowed' + }; + this.options = _.extend({}, defaults, options); + + this.views = []; + this.vie = null; + this.name = this.options.name; + }; + + VIE.prototype.SparkEditService.prototype = { + load: function (loadable) { + var correct = loadable instanceof this.vie.Loadable; + if (!correct) { + throw new Error('Invalid Loadable passed'); + } + + var element; + if (!loadable.options.element) { + if (typeof document === 'undefined') { + return loadable.resolve([]); + } else { + element = Drupal.settings.edit.context; + } + } else { + element = loadable.options.element; + } + + var entities = this.readEntities(element); + loadable.resolve(entities); + }, + + // The edit-id data attribute contains the full identifier of + // each entity element in format `::`. + _getID: function (element) { + var id = jQuery(element).data('edit-id'); + if (!id) { + id = jQuery(element).closest('[data-edit-id]').data('edit-id'); + } + return id; + }, + + // Returns the "URI" of an entity of an element in format + // `:`. + getElementSubject: function (element) { + return this._getID(element).split(':').slice(0, 2).join(':'); + }, + + // Returns the field name for an element. + getElementPredicate: function (element) { + if (!this._getID(element)) { + debugger; + } + return this._getID(element).split(':').pop(); + }, + + getElementType: function (element) { + return this._getID(element).split(':').slice(0, 1); + }, + + // Reads all editable entities (_Fields_ in Spark Edit lingo) from DOM + // and returns the VIE enties it found. + readEntities: function (element) { + var service = this; + var entities = []; + var entityElements = jQuery(this.options.subjectSelector, element); + entityElements = entityElements.add(jQuery(element).filter(this.options.subjectSelector)); + entityElements.each(function () { + var entity = service._readEntity(jQuery(this)); + if (entity) { + entities.push(entity); + } + }); + return entities; + }, + + // Returns a filled VIE Entity instance for a DOM element. The Entity + // is also registered in the VIE entities collection. + _readEntity: function (element) { + var subject = this.getElementSubject(element); + var type = this.getElementType(element); + var entity = this._readEntityPredicates(subject, element, false); + if (jQuery.isEmptyObject(entity)) { + return null; + } + entity['@subject'] = subject; + if (type) { + entity['@type'] = this._registerType(type, element); + } + + // Register with VIE + return this._registerEntity(entity); + }, + + _registerEntity: function (entityData) { + var entityInstance = new this.vie.Entity(entityData); + return this.vie.entities.addOrUpdate(entityInstance, { + updateOptions: { + silent: true + } + }); + }, + + _registerType: function (typeId, element) { + typeId = ''; + var type = this.vie.types.get(typeId); + if (!type) { + this.vie.types.add(typeId, []); + type = this.vie.types.get(typeId); + } + + var predicate = this.getElementPredicate(element); + if (type.attributes.get(predicate)) { + return type; + } + + var label = element.data('edit-field-label'); + var range = 'Form'; + if (element.hasClass('edit-type-direct')) { + range = 'Direct'; + } + if (element.hasClass('edit-type-direct-with-wysiwyg')) { + range = 'Wysiwyg'; + } + type.attributes.add(predicate, [range], 0, 1, { + label: element.data('edit-field-label') + }); + + return type; + }, + + _readEntityPredicates: function (subject, element, emptyValues) { + var entityPredicates = {}; + var service = this; + this.findPredicateElements(subject, element, true).each(function () { + var predicateElement = jQuery(this); + var predicate = service.getElementPredicate(predicateElement); + if (!predicate) { + return; + } + var value = service._readElementValue(predicateElement); + if (value === null && !emptyValues) { + return; + } + + entityPredicates[predicate] = value; + }); + return entityPredicates; + }, + + _readElementValue: function (element) { + return jQuery.trim(element.html()); + }, + + // Subject elements are the DOM elements containing a single or multiple + // editable fields. In Spark Edit these elements are called _Fields_, + // and the actual DOM elements which are edited are called _Editables_. + findSubjectElements: function (element) { + if (!element) { + element = Drupal.settings.edit.context; + } + return jQuery(this.options.subjectSelector, element); + }, + + // Predicate Elements are the actual DOM elements that users will be able + // to edit. In regular Spark Edit they are called _Editables_. + // + // They are contained within Entity elements, which in Spark Edit are called + // _Fields_. + findPredicateElements: function (subject, element, allowNestedPredicates, stop) { + var predicates = jQuery(); + + // Form-type predicates + predicates = predicates.add(element.filter('.edit-type-form')); + + // Direct-type predicates + var direct = element.filter('.edit-type-direct'); + predicates = predicates.add(direct.find('.field-item')); + // Edge case: "title" pseudofield on pages with lists of nodes. + predicates = predicates.add(direct.filter('h2').find('a')); + // Edge case: "title" pseudofield on node pages. + predicates = predicates.add(direct.find('h1')); + + if (!predicates.length && !stop) { + var parentElement = element.parent(this.options.subjectSelector); + if (parentElement.length) { + return this.findPredicateElements(subject, parentElement, allowNestedPredicates, true); + } + } + + return predicates; + } + }; +})(); diff --git a/js/ajax.js b/js/ajax.js index f2bdd3b..611cf81 100644 --- a/js/ajax.js +++ b/js/ajax.js @@ -8,80 +8,16 @@ // Hide these in a ready to ensure that Drupal.ajax is set up first. $(function() { - Drupal.ajax.prototype.commands.edit_field_form = function(ajax, response, status) { - console.log('edit_field_form', ajax, response, status); - - // Only apply the form immediately if this form is currently being edited. - if (Drupal.edit.state.editedEditable == response.id && ajax.$field.hasClass('edit-type-form')) { - Drupal.ajax.prototype.commands.insert(ajax, { - data: response.data, - selector: '.edit-form-container .placeholder' - }); - - // Indicate in the 'info' toolgroup that the form has loaded, but only do - // it after half a second to prevent it from flashing, which is bad UX. - setTimeout(function() { - Drupal.edit.toolbar.removeClass(ajax.$editable, 'info', 'loading'); - }, 500); - - // Detect changes in this form. - Drupal.edit.form.get(ajax.$editable) - .delegate(':input', 'formUpdated.edit', function() { - ajax.$editable - .data('edit-content-changed', true) - .trigger('edit-content-changed.edit'); - }) - .delegate('input', 'keypress.edit', function(event) { - if (event.keyCode == 13) { - return false; - } - }); - - var $submit = Drupal.edit.form.get(ajax.$editable).find('.edit-form-submit'); - var element_settings = { - url : $submit.closest('form').attr('action'), - setClick : true, - event : 'click.edit', - progress : { type : 'throbber' }, - // IPE-specific settings. - $editable : ajax.$editable, - $field : ajax.$field - }; - var base = $submit.attr('id'); - Drupal.ajax[base] = new Drupal.ajax(base, $submit[0], element_settings); - - // Give focus to the first input in the form. - //$('.edit-form').find('form :input:visible:enabled:first').focus() - } - else if (Drupal.edit.state.editedEditable == response.id && ajax.$field.hasClass('edit-type-direct')) { - Drupal.edit.state.directEditableFormResponse = response; - $('#edit_backstage').append(response.data); - - var $submit = $('#edit_backstage form .edit-form-submit'); - var element_settings = { - url : $submit.closest('form').attr('action'), - setClick : true, - event : 'click.edit', - progress : { type : 'throbber' }, - // IPE-specific settings. - $editable : ajax.$editable, - $field : ajax.$field - }; - var base = $submit.attr('id'); - Drupal.ajax[base] = new Drupal.ajax(base, $submit[0], element_settings); - } - else { - console.log('queueing', response); - } - - // Animations. - Drupal.edit.toolbar.show(ajax.$editable, 'ops'); - ajax.$editable.trigger('edit-form-loaded.edit'); - }; + // these function should never be called as they are overridden by setting the + // respective Drupal.ajax[{base}].commands.edit_field_form|_saved methods in + // create/loadForm/saveForm in ui-editables. + Drupal.ajax.prototype.commands.edit_field_form = function(ajax, response, status) {}; + Drupal.ajax.prototype.commands.edit_field_form_saved = function(ajax, response, status) {}; + // @todo: refactor this in a similar fashion & figure out where this is + // needed - probably direct editables. Drupal.ajax.prototype.commands.edit_field_rendered_without_transformation_filters = function(ajax, response, status) { console.log('edit_field_rendered_without_transformation_filters', ajax, response, status); - - if (Drupal.edit.state.editedEditable == response.id + if (Drupal.edit.state.get('editedEditable') == response.id && ajax.$field.hasClass('edit-type-direct') && ajax.$field.hasClass('edit-text-with-transformation-filters') ) @@ -94,31 +30,10 @@ $(function() { // Update the HTML of the editable and enable WYSIWYG editing on it. ajax.$editable.html(response.data); + // @todo: this object doesn't exist anymore. Drupal.edit.editables._wysiwygify(ajax.$editable); } }; - Drupal.ajax.prototype.commands.edit_field_form_saved = function(ajax, response, status) { - console.log('edit_field_form_saved', ajax, response, status); - - // Stop the editing. - Drupal.edit.editables.stopEdit(ajax.$editable); - - // Response.data contains the updated rendering of the field, if any. - if (response.data) { - // Replace the old content with the new content. - var $field = $('.edit-field[data-edit-id="' + response.id + '"]'); - var $parent = $field.parent(); - if ($field.css('display') == 'inline') { - $parent.html(response.data); - } - else { - $field.replaceWith(response.data); - } - - // Make the freshly rendered field(s) in-place-editable again. - Drupal.edit.startEditableFields(Drupal.edit.findEditableFields($parent)); - } - }; }); })(jQuery); diff --git a/js/edit.js b/js/edit.js index 30c3f75..6af96de 100644 --- a/js/edit.js +++ b/js/edit.js @@ -10,11 +10,6 @@ Drupal.behaviors.edit = { attach: function(context) { $('#edit_view-edit-toggles').once('edit-init', Drupal.edit.init); $('#edit_view-edit-toggles').once('edit-toggle', Drupal.edit.toggle.render); - - // TODO: remove this; this is to make the current prototype somewhat usable. - $('a.edit_view-edit-toggle').click(function() { - $(this).trigger('click.edit'); - }); } }; @@ -22,29 +17,27 @@ Drupal.edit.const = {}; Drupal.edit.const.transitionEnd = "transitionEnd.edit webkitTransitionEnd.edit transitionend.edit msTransitionEnd.edit oTransitionEnd.edit"; Drupal.edit.init = function() { - Drupal.edit.state = {}; - // We always begin in view mode. - Drupal.edit.state.isViewing = true; - Drupal.edit.state.fieldBeingHighlighted = []; - Drupal.edit.state.fieldBeingEdited = []; - Drupal.edit.state.higlightedEditable = null; - Drupal.edit.state.editedEditable = null; - Drupal.edit.state.queues = {}; - Drupal.edit.state.wysiwygReady = false; - - // Build inventory. - var IDMapper = function() { return Drupal.edit.getID($(this)); }; - Drupal.edit.state.fields = Drupal.edit.findEditableFields().map(IDMapper); - console.log('Fields:', Drupal.edit.state.fields.length, ';', Drupal.edit.state.fields); - - // Form preloader. - Drupal.edit.state.queues.preload = Drupal.edit.findEditableFields().filter('.edit-type-form').map(IDMapper); - console.log('Fields with (server-generated) forms:', Drupal.edit.state.queues.preload); + // VIE instance for Editing + Drupal.edit.vie = new VIE(); + // Use our custom DOM parsing service until RDFa is available + Drupal.edit.vie.use(new Drupal.edit.vie.SparkEditService()); + Drupal.edit.domService = Drupal.edit.vie.service('edit'); + + Drupal.edit.state = Drupal.edit.prepareStateModel(); + Drupal.edit.state.set('queues', Drupal.edit.prepareQueues()); + + // Load the storage widget to get localStorage support + $('body').midgardStorage({ + vie: Drupal.edit.vie, + editableNs: 'createeditable' + }); + // TODO: Check localStorage for unsaved changes + // $('body').midgardStorage('checkRestore'); // Initialize WYSIWYG, if any. if (Drupal.settings.edit.wysiwyg) { $(document).bind('edit-wysiwyg-ready.edit', function() { - Drupal.edit.state.wysiwygReady = true; + Drupal.edit.state.set('wysiwygReady', true); console.log('edit: WYSIWYG ready'); }); Drupal.edit.wysiwyg[Drupal.settings.edit.wysiwyg].init(); @@ -53,634 +46,88 @@ Drupal.edit.init = function() { // Create a backstage area. $(Drupal.theme('editBackstage', {})).appendTo('body'); + // Instantiate FieldViews + Drupal.edit.domService.findSubjectElements().each(Drupal.edit.prepareFieldView); + + // Instantiate overlayview + var overlayView = new Drupal.edit.views.OverlayView({ + state: Drupal.edit.state + }); + // Transition between view/edit states. - $("a.edit_view-edit-toggle").bind('click.edit', function() { - var wasViewing = Drupal.edit.state.isViewing; - var isViewing = Drupal.edit.state.isViewing = $(this).hasClass('edit-view'); - // Swap active class among the two links. + $("a.edit_view-edit-toggle").bind('click.edit', function(event) { + event.preventDefault(); + + var isViewing = $(this).hasClass('edit-view'); + Drupal.edit.state.set('isViewing', isViewing); + + // swap active class among the two links. $('a.edit_view-edit-toggle').removeClass('active'); $('a.edit_view-edit-toggle').parent().removeClass('active'); $('a.edit_view-edit-toggle.edit-' + (isViewing ? 'view' : 'edit')).addClass('active'); $('a.edit_view-edit-toggle.edit-' + (isViewing ? 'view' : 'edit')).parent().addClass('active'); - - if (wasViewing && !isViewing) { - $(Drupal.theme('editOverlay', {})) - .appendTo('body') - .addClass('edit-animate-slow edit-animate-invisible') - .bind('click.edit', Drupal.edit.clickOverlay);; - - var $f = Drupal.edit.findEditableFields(); - Drupal.edit.startEditableFields($f); - - // TODO: preload forms. We could do one request per form, but that's more - // RTTs than needed. Instead, the server should support batch requests. - console.log('Preloading forms that we might need!', Drupal.edit.state.queues.preload); - - // Animations. Integrate with both navbar and toolbar. - $('#edit_overlay').css('top', $('#navbar, #toolbar').outerHeight()); - $('#edit_overlay').removeClass('edit-animate-invisible'); - - // Disable contextual links in edit mode. - $('.contextual-links-region') - .addClass('edit-contextual-links-region') - .removeClass('contextual-links-region'); - } - else if (!wasViewing && isViewing) { - // Animations. - $('#edit_overlay') - .addClass('edit-animate-invisible') - .bind(Drupal.edit.const.transitionEnd, function(e) { - $('#edit_overlay, .edit-form-container, .edit-toolbar-container, #edit_modal, #edit_backstage').remove(); - }); - - var $f = Drupal.edit.findEditableFields(); - Drupal.edit.stopEditableFields($f); - - // Re-enable contextual links in view mode. - $('.edit-contextual-links-region') - .addClass('contextual-links-region') - .removeClass('edit-contextual-links-region'); - } - else { - // No state change. - } - return false; }); }; -Drupal.edit.findEditableFields = function(context) { - return $('.edit-field.edit-allowed', context || Drupal.settings.edit.context); -}; - -/* - * findEditableFields() just looks for fields that are editable, i.e. for the - * field *wrappers*. Depending on the field, however, either the whole field wrapper - * will be marked as editable (in this case, an inline form will be used for editing), - * *or* a specific (field-specific even!) DOM element within that field wrapper will be - * marked as editable. - * This function is for finding the *editables* themselves, given the *editable fields*. - */ -Drupal.edit.findEditablesForFields = function($fields) { - var $editables = $(); - - // type = form - $editables = $editables.add($fields.filter('.edit-type-form')); - - // type = direct - var $direct = $fields.filter('.edit-type-direct'); - $editables = $editables.add($direct.find('.field-item')); - // Edge case: "title" pseudofield on pages with lists of nodes. - $editables = $editables.add($direct.filter('h2').find('a')); - // Edge case: "title" pseudofield on node pages. - $editables = $editables.add($direct.find('h1')); - - return $editables; -}; - -Drupal.edit.getID = function($field) { - return $field.data('edit-id'); -}; - -Drupal.edit.findFieldForID = function(id, context) { - return $('[data-edit-id="' + id + '"]', context || $('#content')); -}; - -Drupal.edit.findFieldForEditable = function($editable) { - return $editable.filter('.edit-type-form').length ? $editable : $editable.closest('.edit-type-direct'); -}; - -Drupal.edit.startEditableFields = function($fields) { - var $fields = $fields.once('edit'); - // Ignore fields that need a WYSIWYG editor if no WYSIWYG editor is present - if (!Drupal.settings.edit.wysiwyg) { - $fields = $fields.filter(':not(.edit-type-direct-with-wysiwyg)'); - } - var $editables = Drupal.edit.findEditablesForFields($fields); - - $editables - .addClass('edit-animate-fast') - .addClass('edit-candidate edit-editable') - .bind('mouseenter.edit', function(e) { - var $editable = $(this); - Drupal.edit.util.ignoreHoveringVia(e, '.edit-toolbar-container', function() { - console.log('field:mouseenter'); - if (!$editable.hasClass('edit-editing')) { - Drupal.edit.editables.startHighlight($editable); - } - }); - }) - .bind('mouseleave.edit', function(e) { - var $editable = $(this); - Drupal.edit.util.ignoreHoveringVia(e, '.edit-toolbar-container', function() { - console.log('field:mouseleave'); - if (!$editable.hasClass('edit-editing')) { - Drupal.edit.editables.stopHighlight($editable); - } - }); - }) - .bind('click.edit', function() { - Drupal.edit.editables.startEdit($(this)); return false; - }) - // Some transformations are editable-specific. - .map(function() { - $(this).data('edit-background-color', Drupal.edit.util.getBgColor($(this))); +Drupal.edit.prepareStateModel = function () { + // The state of Spark Edit is handled in a Backbone model + Drupal.edit.StateModel = Backbone.Model.extend({ + defaults: { + isViewing: true, + entityBeingHighlighted: [], + fieldBeingHighlighted: [], + fieldBeingEdited: [], + highlightedEditable: null, + editedEditable: null, + editedFieldView: null, + queues: {}, + wysiwygReady: false + } }); -}; - -Drupal.edit.stopEditableFields = function($fields) { - var $editables = Drupal.edit.findEditablesForFields($fields); - - $fields - .removeClass('edit-processed'); - - $editables - .removeClass('edit-candidate edit-editable edit-highlighted edit-editing edit-belowoverlay') - .unbind('mouseenter.edit mouseleave.edit click.edit edit-content-changed.edit') - .removeAttr('contenteditable') - .removeData(['edit-content-original', 'edit-content-changed']); -}; - -Drupal.edit.clickOverlay = function(e) { - console.log('clicked overlay'); - if (Drupal.edit.modal.get().length == 0) { - Drupal.edit.toolbar.get(Drupal.edit.state.fieldBeingEdited) - .find('a.close').trigger('click.edit'); - } + // We always begin in view mode. + return new Drupal.edit.StateModel(); }; -/* -2. Each field MAY (if it is editable by the user) contain exactly one Editable, - in which the editing itself occurs, this can be either: - a. type=direct, here some child element of the Field element is marked as editable - b. type=form, here the field itself is marked as editable, upon edit, a form is used - */ - -// Field editables. -Drupal.edit.editables = { - startHighlight: function($editable) { - console.log('editables.startHighlight'); - if (Drupal.edit.toolbar.create($editable)) { - var label = $editable.filter('.edit-type-form').data('edit-field-label') - || $editable.closest('.edit-type-direct').data('edit-field-label'); - - Drupal.edit.toolbar.get($editable) - .find('.edit-toolbar:not(:has(.edit-toolgroup.info))') - .append(Drupal.theme('editToolgroup', { - classes: 'info', - buttons: [ - { url: '#', label: label, classes: 'blank-button label', hasButtonRole: false }, - ] - })) - .delegate('a.label', 'click.edit', function(e) { - // Clicking the label equals clicking the editable itself. - $editable.trigger('click.edit'); - return false; - }); - } - - // Animations. - setTimeout(function() { - $editable.addClass('edit-highlighted'); - Drupal.edit.toolbar.show($editable, 'info'); - }, 0); - - Drupal.edit.state.fieldBeingHighlighted = $editable; - Drupal.edit.state.higlightedEditable = Drupal.edit.getID(Drupal.edit.findFieldForEditable($editable)); - }, - - stopHighlight: function($editable) { - console.log('editables.stopHighlight'); - if ($editable.length == 0) { - return; - } - - // Animations. - Drupal.edit.toolbar.remove($editable); - $editable.removeClass('edit-highlighted'); - - Drupal.edit.state.fieldBeingHighlighted = []; - Drupal.edit.state.highlightedEditable = null; - }, - - startEdit: function($editable) { - if ($editable.hasClass('edit-editing')) { - return; - } - - console.log('editables.startEdit: ', $editable); - var self = this; - var $field = Drupal.edit.findFieldForEditable($editable); - - // Highlight if not already highlighted. - if (Drupal.edit.state.fieldBeingHighlighted[0] != $editable[0]) { - Drupal.edit.editables.startHighlight($editable); - } - - $editable - .addClass('edit-editing') - .bind('edit-content-changed.edit', function(e) { - self._buttonFieldSaveToBlue(e, $editable, $field); - }) - // Some transformations are editable-specific. - .map(function() { - $(this).css('background-color', $(this).data('edit-background-color')); - }); - - // While editing, don't show *any* other field as editable. - $('.edit-candidate').not('.edit-editing').removeClass('edit-editable'); +Drupal.edit.prepareQueues = function () { + // Form preloader. - // Toolbar (already created in the highlight). - Drupal.edit.toolbar.get($editable) - .addClass('edit-editing') - .find('.edit-toolbar:not(:has(.edit-toolgroup.ops))') - .append(Drupal.theme('editToolgroup', { - classes: 'ops', - buttons: [ - { url: '#', label: Drupal.t('Save'), classes: 'field-save save gray-button' }, - { url: '#', label: '', classes: 'field-close close gray-button' } - ] - })) - .delegate('a.field-save', 'click.edit', function(e) { - return self._buttonFieldSaveClicked(e, $editable, $field); + var queues = { + preload: Drupal.edit.domService.findSubjectElements().filter('.edit-type-form').map(function () { + return Drupal.edit.util.getID($(this)); }) - .delegate('a.field-close', 'click.edit', function(e) { - return self._buttonFieldCloseClicked(e, $editable, $field); - }); - - // Changes to $editable based on the type. - var callback = ($field.hasClass('edit-type-direct')) - ? self._updateDirectEditable - : self._updateFormEditable; - callback($editable); - - // Regardless of the type, load the form for this field. We always use forms - // to submit the changes. - self._loadForm($editable, $field); + }; + console.log('Fields with (server-generated) forms:', queues.preload); + return queues; +}; - Drupal.edit.state.fieldBeingEdited = $editable; - Drupal.edit.state.editedEditable = Drupal.edit.getID($field); - }, +Drupal.edit.prepareFieldView = function () { + var element = jQuery(this); + var fieldViewType = Drupal.edit.views.EditableFieldView; + if (!element.hasClass('edit-type-direct')) { + fieldViewType = Drupal.edit.views.FormEditableFieldView; + } - stopEdit: function($editable) { - console.log('editables.stopEdit: ', $editable); - var self = this; - var $field = Drupal.edit.findFieldForEditable($editable); - if ($editable.length == 0) { + Drupal.edit.vie.load({ + element: element + }).using('edit').execute().done(function (entities) { + var subject = Drupal.edit.domService.getElementSubject(element); + var predicate = Drupal.edit.domService.getElementPredicate(element); + var entity = entities[0]; + if (!entity) { return; } - $editable - .removeClass('edit-highlighted edit-editing edit-belowoverlay') - // Some transformations are editable-specific. - .map(function() { - $(this).css('background-color', ''); + var fieldView = new fieldViewType({ + state: Drupal.edit.state, + el: element, + model: entity, + predicate: predicate, + vie: Drupal.edit.vie }); - - // Make the other fields and entities editable again. - $('.edit-candidate').addClass('edit-editable'); - - // Changes to $editable based on the type. - var callback = ($field.hasClass('edit-type-direct')) - ? self._restoreDirectEditable - : self._restoreFormEditable; - callback($editable); - - Drupal.edit.toolbar.remove($editable); - Drupal.edit.form.remove($editable); - - Drupal.edit.state.fieldBeingEdited = []; - Drupal.edit.state.editedEditable = null; - }, - - _loadRerenderedProcessedText: function($editable, $field) { - // Indicate in the 'info' toolgroup that the form is loading. - Drupal.edit.toolbar.addClass($editable, 'info', 'loading'); - - var edit_id = Drupal.edit.getID($field); - var element_settings = { - url : Drupal.edit.util.calcRerenderProcessedTextURL(edit_id), - event : 'edit-internal-load-rerender.edit', - $field : $field, - $editable: $editable, - submit : { nocssjs : true }, - progress : { type : null }, // No progress indicator. - }; - if (Drupal.ajax.hasOwnProperty(edit_id)) { - delete Drupal.ajax[edit_id]; - $editable.unbind('edit-internal-load-rerender.edit'); - } - Drupal.ajax[edit_id] = new Drupal.ajax(edit_id, $editable, element_settings); - $editable.trigger('edit-internal-load-rerender.edit'); - }, - - // Attach, activate and show the WYSIWYG editor. - _wysiwygify: function($editable) { - var $field = Drupal.edit.findFieldForEditable($editable); - $editable.addClass('edit-wysiwyg-attached'); - var formatID = $field.attr('data-edit-text-format'); - var format = Drupal.settings.aloha.formats[formatID]; - Drupal.edit.wysiwyg[Drupal.settings.edit.wysiwyg].attach($editable, format); - Drupal.edit.wysiwyg[Drupal.settings.edit.wysiwyg].activate($editable); - Drupal.edit.toolbar.show($editable, 'wysiwyg-tabs'); - Drupal.edit.toolbar.show($editable, 'wysiwyg'); - }, - - _updateDirectEditable: function($editable) { - var $field = Drupal.edit.findFieldForEditable($editable); - - Drupal.edit.editables._padEditable($editable, $field); - - if ($field.hasClass('edit-type-direct-with-wysiwyg')) { - Drupal.edit.toolbar.get($editable) - .find('.edit-toolbar:not(:has(.edit-toolgroup.wysiwyg-tabs))') - .append(Drupal.theme('editToolgroup', { - classes: 'wysiwyg-tabs', - buttons: [] - })) - .end() - .find('.edit-toolbar:not(:has(.edit-toolgroup.wysiwyg))') - .append(Drupal.theme('editToolgroup', { - classes: 'wysiwyg', - buttons: [] - })); - - // When transformation filters have been been applied to the processed - // text of this field, then we'll need to load a re-rendered version of - // it without the transformation filters. - if ($field.hasClass('edit-text-with-transformation-filters')) { - Drupal.edit.editables._loadRerenderedProcessedText($editable, $field); - // Also store the "real" original content, i.e. the transformed one. - $editable.data('edit-content-original-transformed', $editable.html()) - } - // When no transformation filters have been applied: start WYSIWYG editing - // immediately! - else { - setTimeout(function() { - Drupal.edit.editables._wysiwygify($editable); - }, 0); - } - } - else { - $editable.attr('contenteditable', true); - } - - $editable - .data('edit-content-original', $editable.html()) - .data('edit-content-changed', false); - - // Detect content changes ourselves only when not using a WYSIWYG editor. - var markContentChanged = function() { - $editable.data('edit-content-changed', true); - $editable.trigger('edit-content-changed.edit'); - }; - if (!$field.hasClass('edit-type-direct-with-wysiwyg')) { - // We cannot use Drupal.behaviors.formUpdated here because we're not dealing - // with a form! - $editable - .bind('blur.edit keyup.edit paste.edit', function() { - if ($editable.html() != $editable.data('edit-content-original')) { - markContentChanged(); - } - }) - // Disallow return/enter key when editing titles. - .bind('keypress.edit', function(event) { - if (event.keyCode == 13) { - return false; - } - }); - } - else { - $editable.bind('edit-wysiwyg-content-changed.edit', function() { - markContentChanged(); - }); - } - }, - - _restoreDirectEditable: function($editable) { - var $field = Drupal.edit.findFieldForEditable($editable); - - Drupal.edit.editables._padEditable($editable, $field); - - if ($field.hasClass('edit-type-direct-with-wysiwyg') && $editable.hasClass('edit-wysiwyg-attached')) { - $editable.removeClass('edit-wysiwyg-attached'); - Drupal.edit.wysiwyg[Drupal.settings.edit.wysiwyg].detach($editable); - - // Work-around for major AE bug. See: - // - http://drupal.org/node/1725032 - // - https://github.com/alohaeditor/Aloha-Editor/issues/693. - // Also unbind to make sure this doesn't break anything when using - // this version of edit.js with a fixed version of Aloha Editor. - $editable - .unbind('click.edit') - .bind('click.edit', function() { - Drupal.edit.editables.startEdit($(this)); return false; - }); - } - else { - $editable - .removeAttr('contenteditable') - .unbind('keypress.edit'); - } - - Drupal.edit.editables._unpadEditable($editable, $field); - - $editable - .removeData(['edit-content-original', 'edit-content-changed', 'edit-content-original-transformed']) - .unbind('blur.edit keyup.edit paste.edit edit-content-changed.edit'); - - // Not only clean up the changes to $editable, but also clean up the - // backstage area, where we hid the form that we used to send the changes. - $('#edit_backstage form').remove(); - }, - - _padEditable: function($editable, $field) { - // Add 5px padding for readability. This means we'll freeze the current - // width and *then* add 5px padding, hence ensuring the padding is added "on - // the outside". - // 1) Freeze the width (if it's not already set); don't use animations. - if ($editable[0].style.width === "") { - $editable - .data('edit-width-empty', true) - .addClass('edit-animate-disable-width') - .css('width', $editable.width()); - } - // 2) Add padding; use animations. - var posProp = Drupal.edit.util.getPositionProperties($editable); - var $toolbar = Drupal.edit.toolbar.get($editable); - setTimeout(function() { - // Re-enable width animations (padding changes affect width too!). - $editable.removeClass('edit-animate-disable-width'); - - // The toolbar must move to the top and the left. - var $hf = $toolbar.find('.edit-toolbar-heightfaker'); - $hf.css({ bottom: '6px', left: '-5px' }); - // When using a WYSIWYG editor, the width of the toolbar must match the - // width of the editable. - if ($field.hasClass('edit-type-direct-with-wysiwyg')) { - $hf.css({ width: $editable.width() + 10 }); - } - - // Pad the editable. - $editable - .css({ - 'position': 'relative', - 'top': posProp['top'] - 5 + 'px', - 'left': posProp['left'] - 5 + 'px', - 'padding-top' : posProp['padding-top'] + 5 + 'px', - 'padding-left' : posProp['padding-left'] + 5 + 'px', - 'padding-right' : posProp['padding-right'] + 5 + 'px', - 'padding-bottom': posProp['padding-bottom'] + 5 + 'px', - 'margin-bottom': posProp['margin-bottom'] - 10 + 'px', - }); - }, 0); - }, - - _unpadEditable: function($editable, $field) { - // 1) Set the empty width again. - if ($editable.data('edit-width-empty') === true) { - console.log('restoring width'); - $editable - .addClass('edit-animate-disable-width') - .css('width', ''); - } - // 2) Remove padding; use animations (these will run simultaneously with) - // the fading out of the toolbar as its gets removed). - var posProp = Drupal.edit.util.getPositionProperties($editable); - var $toolbar = Drupal.edit.toolbar.get($editable); - setTimeout(function() { - // Re-enable width animations (padding changes affect width too!). - $editable.removeClass('edit-animate-disable-width'); - - // Move the toolbar back to its original position. - var $hf = $toolbar.find('.edit-toolbar-heightfaker'); - $hf.css({ bottom: '1px', left: '' }); - // When using a WYSIWYG editor, restore the width of the toolbar. - if ($field.hasClass('edit-type-direct-with-wysiwyg')) { - $hf.css({ width: '' }); - } - - // Unpad the editable. - $editable - .css({ - 'position': 'relative', - 'top': posProp['top'] + 5 + 'px', - 'left': posProp['left'] + 5 + 'px', - 'padding-top' : posProp['padding-top'] - 5 + 'px', - 'padding-left' : posProp['padding-left'] - 5 + 'px', - 'padding-right' : posProp['padding-right'] - 5 + 'px', - 'padding-bottom': posProp['padding-bottom'] - 5 + 'px', - 'margin-bottom': posProp['margin-bottom'] + 10 + 'px' - }); - }, 0); - }, - - // Creates a form container; when the $editable is inline, it will inherit CSS - // properties from the toolbar container, so the toolbar must already exist. - _updateFormEditable: function($editable) { - if (Drupal.edit.form.create($editable)) { - $editable - .addClass('edit-belowoverlay') - .removeClass('edit-highlighted edit-editable'); - - Drupal.edit.form.get($editable) - .find('.edit-form') - .addClass('edit-editable edit-highlighted edit-editing') - .css('background-color', $editable.data('edit-background-color')); - } - }, - - _restoreFormEditable: function($editable) { - // No need to do anything here; all of the field HTML will be overwritten - // with the freshly rendered version from the server anyway! - }, - - _loadForm: function($editable, $field) { - var edit_id = Drupal.edit.getID($field); - var element_settings = { - url : Drupal.edit.util.calcFormURLForField(edit_id), - event : 'edit-internal.edit', - $field : $field, - $editable: $editable, - submit : { nocssjs : ($field.hasClass('edit-type-direct')) }, - progress : { type : null }, // No progress indicator. - }; - if (Drupal.ajax.hasOwnProperty(edit_id)) { - delete Drupal.ajax[edit_id]; - $editable.unbind('edit-internal.edit'); - } - Drupal.ajax[edit_id] = new Drupal.ajax(edit_id, $editable, element_settings); - $editable.trigger('edit-internal.edit'); - }, - - _buttonFieldSaveToBlue: function(e, $editable, $field) { - Drupal.edit.toolbar.get($editable) - .find('a.save').addClass('blue-button').removeClass('gray-button'); - }, - - _buttonFieldSaveClicked: function(e, $editable, $field) { - // type = form - if ($field.hasClass('edit-type-form')) { - Drupal.edit.form.get($field).find('form') - .find('.edit-form-submit').trigger('click.edit').end(); - } - // type = direct - else if ($field.hasClass('edit-type-direct')) { - $editable.blur(); - - var wysiwyg = $field.hasClass('edit-type-direct-with-wysiwyg') - && $editable.hasClass('edit-wysiwyg-attached'); - - // When using WYSIWYG editing, first detach the WYSIWYG editor to ensure - // the content has been cleaned up before saving it. (Otherwise, - // annotations and infrastructure created by the WYSIWYG editor could also - // get saved). - if (wysiwyg) { - $editable.removeClass('edit-wysiwyg-attached'); - Drupal.edit.wysiwyg[Drupal.settings.edit.wysiwyg].detach($editable); - } - - // We trim the title because otherwise whitespace in the raw HTML ends - // up in the title as well. - // TRICKY: Drupal core does not trim the title, so in theory this is - // out of line with Drupal core's behavior. - var value = (wysiwyg) - ? $.trim($editable.html()) - : $.trim($editable.text()); - $('#edit_backstage form') - .find(':input[type!="hidden"][type!="submit"]').val(value).end() - .find('.edit-form-submit').trigger('click.edit'); - } - return false; - }, - - _buttonFieldCloseClicked: function(e, $editable, $field) { - // Content not changed: stop editing field. - if (!$editable.data('edit-content-changed')) { - // Restore to original content. When dealing with processed text, it's - // possible that one or more transformation filters are used. Then, the - // "real" original content (i.e. the transformed one) is stored separately - // from the "original content" that we use to detect changes. - if (typeof $editable.data('edit-content-original-transformed') !== 'undefined') { - $editable.html($editable.data('edit-content-original-transformed')); - } - - Drupal.edit.editables.stopEdit($editable); - } - // Content changed: show modal. - else { - Drupal.edit.modal.create( - Drupal.t('You have unsaved changes'), - Drupal.theme('editButtons', { 'buttons' : [ - { url: '#', classes: 'gray-button discard', label: Drupal.t('Discard changes') }, - { url: '#', classes: 'blue-button save', label: Drupal.t('Save') } - ]}), - $editable - ); - setTimeout(Drupal.edit.modal.show, 0); - }; - return false; - } + }); }; })(jQuery); + +$ = jQuery; diff --git a/js/editable.js b/js/editable.js new file mode 100644 index 0000000..daa4198 --- /dev/null +++ b/js/editable.js @@ -0,0 +1,56 @@ +(function (jQuery, undefined) { + // # Create.js editing widget for Spark + // + // This widget inherits from the Create.js editable widget to accommodate + // for the fact that Spark is using custom data attributes and not RDFa + // to communicate editable fields. + jQuery.widget('Drupal.createEditable', jQuery.Midgard.midgardEditable, { + _create: function () { + this.vie = this.options.vie; + + this.options.domService = 'edit'; + this.options.predicateSelector = '*'; //'.edit-field.edit-allowed'; + + this.options.editors.direct = { + widget: 'editWidget', + options: {} + }; + this.options.editors.directWysiwyg = { + widget: 'alohaWidget', + options: {} + }; + this.options.editors.form = { + widget: 'drupalFormWidget', + options: {} + }; + + jQuery.Midgard.midgardEditable.prototype._create.call(this); + }, + + /* + findEditableElements: function (callback) { + jQuery.Midgard.midgardEditable.prototype.findEditableElements.call(this, function (elements) { + console.log(elements); + callback(elements); + }); + var model = this.options.model; + var fields = Drupal.edit.util.findEditableFields(this.element).andSelf().filter(function () { + return Drupal.edit.util.getElementSubject(jQuery(this)) == model.getSubjectUri(); + }); + Drupal.edit.util.findEditablesForFields(fields).each(callback); + }, + getElementPredicate: function (element) { + return Drupal.edit.util.getElementPredicate(jQuery(element)); + },*/ + + _editorName: function (data) { + if (Drupal.settings.edit.wysiwyg && jQuery(this.element).hasClass('edit-type-direct')) { + if (jQuery(this.element).hasClass('edit-type-direct-with-wysiwyg')) { + return 'directWysiwyg'; + } + return 'direct'; + } + return 'form'; + } + }); +})(jQuery); diff --git a/js/formwidget.js b/js/formwidget.js new file mode 100644 index 0000000..b1fbbe8 --- /dev/null +++ b/js/formwidget.js @@ -0,0 +1,56 @@ +(function ($, undefined) { + // # Drupal form-based editing widget for Create.js + $.widget('Drupal.drupalFormWidget', $.Create.editWidget, { + options: { + editorOptions: {}, + disabled: true + }, + // @todo: add a callback to do this in an proper async fashion. + enable: function () { + console.log('Drupal.drupalFormWidget.enable'); + this.options.disabled = false; + this.loadForm(); + }, + + loadForm: function () { + // Create the form asynchronously. + // @todo: use a different "factory" depending on editable type. + Drupal.edit.form.create(this.element, function($editable, $field) { + $editable + .addClass('edit-belowoverlay') + .removeClass('edit-highlighted edit-editable'); + + Drupal.edit.form.get($editable) + .find('.edit-form') + .addClass('edit-editable edit-highlighted edit-editing') + .css('background-color', $editable.data('edit-background-color')); + }); + }, + + disable: function () { + console.log('Drupal.drupalFormWidget.disable'); + this.options.disabled = true; + // @todo: handle this better on the basis of the editable type. + // Currently we stuff forms into two places ... + Drupal.edit.form.get(this.element).remove(); + $('#edit_backstage form').remove(); + + // Revert the changes to classes applied in the the enable/loadForm + // methods above. + this.element + .removeClass('edit-belowoverlay') + .addClass('edit-highlighted edit-editable'); + }, + + _initialize: function () { + var self = this; + $(this.element).bind('focus', function (event) { + self.options.activated(); + }); + + $(this.element).bind('blur', function (event) { + self.options.deactivated(); + }); + } + }); +})(jQuery); diff --git a/js/lib/backbone.js b/js/lib/backbone.js new file mode 100644 index 0000000..3373c95 --- /dev/null +++ b/js/lib/backbone.js @@ -0,0 +1,1431 @@ +// Backbone.js 0.9.2 + +// (c) 2010-2012 Jeremy Ashkenas, DocumentCloud Inc. +// Backbone may be freely distributed under the MIT license. +// For all details and documentation: +// http://backbonejs.org + +(function(){ + + // Initial Setup + // ------------- + + // Save a reference to the global object (`window` in the browser, `global` + // on the server). + var root = this; + + // Save the previous value of the `Backbone` variable, so that it can be + // restored later on, if `noConflict` is used. + var previousBackbone = root.Backbone; + + // Create a local reference to slice/splice. + var slice = Array.prototype.slice; + var splice = Array.prototype.splice; + + // The top-level namespace. All public Backbone classes and modules will + // be attached to this. Exported for both CommonJS and the browser. + var Backbone; + if (typeof exports !== 'undefined') { + Backbone = exports; + } else { + Backbone = root.Backbone = {}; + } + + // Current version of the library. Keep in sync with `package.json`. + Backbone.VERSION = '0.9.2'; + + // Require Underscore, if we're on the server, and it's not already present. + var _ = root._; + if (!_ && (typeof require !== 'undefined')) _ = require('underscore'); + + // For Backbone's purposes, jQuery, Zepto, or Ender owns the `$` variable. + var $ = root.jQuery || root.Zepto || root.ender; + + // Set the JavaScript library that will be used for DOM manipulation and + // Ajax calls (a.k.a. the `$` variable). By default Backbone will use: jQuery, + // Zepto, or Ender; but the `setDomLibrary()` method lets you inject an + // alternate JavaScript library (or a mock library for testing your views + // outside of a browser). + Backbone.setDomLibrary = function(lib) { + $ = lib; + }; + + // Runs Backbone.js in *noConflict* mode, returning the `Backbone` variable + // to its previous owner. Returns a reference to this Backbone object. + Backbone.noConflict = function() { + root.Backbone = previousBackbone; + return this; + }; + + // Turn on `emulateHTTP` to support legacy HTTP servers. Setting this option + // will fake `"PUT"` and `"DELETE"` requests via the `_method` parameter and + // set a `X-Http-Method-Override` header. + Backbone.emulateHTTP = false; + + // Turn on `emulateJSON` to support legacy servers that can't deal with direct + // `application/json` requests ... will encode the body as + // `application/x-www-form-urlencoded` instead and will send the model in a + // form param named `model`. + Backbone.emulateJSON = false; + + // Backbone.Events + // ----------------- + + // Regular expression used to split event strings + var eventSplitter = /\s+/; + + // A module that can be mixed in to *any object* in order to provide it with + // custom events. You may bind with `on` or remove with `off` callback functions + // to an event; trigger`-ing an event fires all callbacks in succession. + // + // var object = {}; + // _.extend(object, Backbone.Events); + // object.on('expand', function(){ alert('expanded'); }); + // object.trigger('expand'); + // + var Events = Backbone.Events = { + + // Bind one or more space separated events, `events`, to a `callback` + // function. Passing `"all"` will bind the callback to all events fired. + on: function(events, callback, context) { + + var calls, event, node, tail, list; + if (!callback) return this; + events = events.split(eventSplitter); + calls = this._callbacks || (this._callbacks = {}); + + // Create an immutable callback list, allowing traversal during + // modification. The tail is an empty object that will always be used + // as the next node. + while (event = events.shift()) { + list = calls[event]; + node = list ? list.tail : {}; + node.next = tail = {}; + node.context = context; + node.callback = callback; + calls[event] = {tail: tail, next: list ? list.next : node}; + } + + return this; + }, + + // Remove one or many callbacks. If `context` is null, removes all callbacks + // with that function. If `callback` is null, removes all callbacks for the + // event. If `events` is null, removes all bound callbacks for all events. + off: function(events, callback, context) { + var event, calls, node, tail, cb, ctx; + + // No events, or removing *all* events. + if (!(calls = this._callbacks)) return; + if (!(events || callback || context)) { + delete this._callbacks; + return this; + } + + // Loop through the listed events and contexts, splicing them out of the + // linked list of callbacks if appropriate. + events = events ? events.split(eventSplitter) : _.keys(calls); + while (event = events.shift()) { + node = calls[event]; + delete calls[event]; + if (!node || !(callback || context)) continue; + // Create a new list, omitting the indicated callbacks. + tail = node.tail; + while ((node = node.next) !== tail) { + cb = node.callback; + ctx = node.context; + if ((callback && cb !== callback) || (context && ctx !== context)) { + this.on(event, cb, ctx); + } + } + } + + return this; + }, + + // Trigger one or many events, firing all bound callbacks. Callbacks are + // passed the same arguments as `trigger` is, apart from the event name + // (unless you're listening on `"all"`, which will cause your callback to + // receive the true name of the event as the first argument). + trigger: function(events) { + var event, node, calls, tail, args, all, rest; + if (!(calls = this._callbacks)) return this; + all = calls.all; + events = events.split(eventSplitter); + rest = slice.call(arguments, 1); + + // For each event, walk through the linked list of callbacks twice, + // first to trigger the event, then to trigger any `"all"` callbacks. + while (event = events.shift()) { + if (node = calls[event]) { + tail = node.tail; + while ((node = node.next) !== tail) { + node.callback.apply(node.context || this, rest); + } + } + if (node = all) { + tail = node.tail; + args = [event].concat(rest); + while ((node = node.next) !== tail) { + node.callback.apply(node.context || this, args); + } + } + } + + return this; + } + + }; + + // Aliases for backwards compatibility. + Events.bind = Events.on; + Events.unbind = Events.off; + + // Backbone.Model + // -------------- + + // Create a new model, with defined attributes. A client id (`cid`) + // is automatically generated and assigned for you. + var Model = Backbone.Model = function(attributes, options) { + var defaults; + attributes || (attributes = {}); + if (options && options.parse) attributes = this.parse(attributes); + if (defaults = getValue(this, 'defaults')) { + attributes = _.extend({}, defaults, attributes); + } + if (options && options.collection) this.collection = options.collection; + this.attributes = {}; + this._escapedAttributes = {}; + this.cid = _.uniqueId('c'); + this.changed = {}; + this._silent = {}; + this._pending = {}; + this.set(attributes, {silent: true}); + // Reset change tracking. + this.changed = {}; + this._silent = {}; + this._pending = {}; + this._previousAttributes = _.clone(this.attributes); + this.initialize.apply(this, arguments); + }; + + // Attach all inheritable methods to the Model prototype. + _.extend(Model.prototype, Events, { + + // A hash of attributes whose current and previous value differ. + changed: null, + + // A hash of attributes that have silently changed since the last time + // `change` was called. Will become pending attributes on the next call. + _silent: null, + + // A hash of attributes that have changed since the last `'change'` event + // began. + _pending: null, + + // The default name for the JSON `id` attribute is `"id"`. MongoDB and + // CouchDB users may want to set this to `"_id"`. + idAttribute: 'id', + + // Initialize is an empty function by default. Override it with your own + // initialization logic. + initialize: function(){}, + + // Return a copy of the model's `attributes` object. + toJSON: function(options) { + return _.clone(this.attributes); + }, + + // Get the value of an attribute. + get: function(attr) { + return this.attributes[attr]; + }, + + // Get the HTML-escaped value of an attribute. + escape: function(attr) { + var html; + if (html = this._escapedAttributes[attr]) return html; + var val = this.get(attr); + return this._escapedAttributes[attr] = _.escape(val == null ? '' : '' + val); + }, + + // Returns `true` if the attribute contains a value that is not null + // or undefined. + has: function(attr) { + return this.get(attr) != null; + }, + + // Set a hash of model attributes on the object, firing `"change"` unless + // you choose to silence it. + set: function(key, value, options) { + var attrs, attr, val; + + // Handle both `"key", value` and `{key: value}` -style arguments. + if (_.isObject(key) || key == null) { + attrs = key; + options = value; + } else { + attrs = {}; + attrs[key] = value; + } + + // Extract attributes and options. + options || (options = {}); + if (!attrs) return this; + if (attrs instanceof Model) attrs = attrs.attributes; + if (options.unset) for (attr in attrs) attrs[attr] = void 0; + + // Run validation. + if (!this._validate(attrs, options)) return false; + + // Check for changes of `id`. + if (this.idAttribute in attrs) this.id = attrs[this.idAttribute]; + + var changes = options.changes = {}; + var now = this.attributes; + var escaped = this._escapedAttributes; + var prev = this._previousAttributes || {}; + + // For each `set` attribute... + for (attr in attrs) { + val = attrs[attr]; + + // If the new and current value differ, record the change. + if (!_.isEqual(now[attr], val) || (options.unset && _.has(now, attr))) { + delete escaped[attr]; + (options.silent ? this._silent : changes)[attr] = true; + } + + // Update or delete the current value. + options.unset ? delete now[attr] : now[attr] = val; + + // If the new and previous value differ, record the change. If not, + // then remove changes for this attribute. + if (!_.isEqual(prev[attr], val) || (_.has(now, attr) != _.has(prev, attr))) { + this.changed[attr] = val; + if (!options.silent) this._pending[attr] = true; + } else { + delete this.changed[attr]; + delete this._pending[attr]; + } + } + + // Fire the `"change"` events. + if (!options.silent) this.change(options); + return this; + }, + + // Remove an attribute from the model, firing `"change"` unless you choose + // to silence it. `unset` is a noop if the attribute doesn't exist. + unset: function(attr, options) { + (options || (options = {})).unset = true; + return this.set(attr, null, options); + }, + + // Clear all attributes on the model, firing `"change"` unless you choose + // to silence it. + clear: function(options) { + (options || (options = {})).unset = true; + return this.set(_.clone(this.attributes), options); + }, + + // Fetch the model from the server. If the server's representation of the + // model differs from its current attributes, they will be overriden, + // triggering a `"change"` event. + fetch: function(options) { + options = options ? _.clone(options) : {}; + var model = this; + var success = options.success; + options.success = function(resp, status, xhr) { + if (!model.set(model.parse(resp, xhr), options)) return false; + if (success) success(model, resp); + }; + options.error = Backbone.wrapError(options.error, model, options); + return (this.sync || Backbone.sync).call(this, 'read', this, options); + }, + + // Set a hash of model attributes, and sync the model to the server. + // If the server returns an attributes hash that differs, the model's + // state will be `set` again. + save: function(key, value, options) { + var attrs, current; + + // Handle both `("key", value)` and `({key: value})` -style calls. + if (_.isObject(key) || key == null) { + attrs = key; + options = value; + } else { + attrs = {}; + attrs[key] = value; + } + options = options ? _.clone(options) : {}; + + // If we're "wait"-ing to set changed attributes, validate early. + if (options.wait) { + if (!this._validate(attrs, options)) return false; + current = _.clone(this.attributes); + } + + // Regular saves `set` attributes before persisting to the server. + var silentOptions = _.extend({}, options, {silent: true}); + if (attrs && !this.set(attrs, options.wait ? silentOptions : options)) { + return false; + } + + // After a successful server-side save, the client is (optionally) + // updated with the server-side state. + var model = this; + var success = options.success; + options.success = function(resp, status, xhr) { + var serverAttrs = model.parse(resp, xhr); + if (options.wait) { + delete options.wait; + serverAttrs = _.extend(attrs || {}, serverAttrs); + } + if (!model.set(serverAttrs, options)) return false; + if (success) { + success(model, resp); + } else { + model.trigger('sync', model, resp, options); + } + }; + + // Finish configuring and sending the Ajax request. + options.error = Backbone.wrapError(options.error, model, options); + var method = this.isNew() ? 'create' : 'update'; + var xhr = (this.sync || Backbone.sync).call(this, method, this, options); + if (options.wait) this.set(current, silentOptions); + return xhr; + }, + + // Destroy this model on the server if it was already persisted. + // Optimistically removes the model from its collection, if it has one. + // If `wait: true` is passed, waits for the server to respond before removal. + destroy: function(options) { + options = options ? _.clone(options) : {}; + var model = this; + var success = options.success; + + var triggerDestroy = function() { + model.trigger('destroy', model, model.collection, options); + }; + + if (this.isNew()) { + triggerDestroy(); + return false; + } + + options.success = function(resp) { + if (options.wait) triggerDestroy(); + if (success) { + success(model, resp); + } else { + model.trigger('sync', model, resp, options); + } + }; + + options.error = Backbone.wrapError(options.error, model, options); + var xhr = (this.sync || Backbone.sync).call(this, 'delete', this, options); + if (!options.wait) triggerDestroy(); + return xhr; + }, + + // Default URL for the model's representation on the server -- if you're + // using Backbone's restful methods, override this to change the endpoint + // that will be called. + url: function() { + var base = getValue(this, 'urlRoot') || getValue(this.collection, 'url') || urlError(); + if (this.isNew()) return base; + return base + (base.charAt(base.length - 1) == '/' ? '' : '/') + encodeURIComponent(this.id); + }, + + // **parse** converts a response into the hash of attributes to be `set` on + // the model. The default implementation is just to pass the response along. + parse: function(resp, xhr) { + return resp; + }, + + // Create a new model with identical attributes to this one. + clone: function() { + return new this.constructor(this.attributes); + }, + + // A model is new if it has never been saved to the server, and lacks an id. + isNew: function() { + return this.id == null; + }, + + // Call this method to manually fire a `"change"` event for this model and + // a `"change:attribute"` event for each changed attribute. + // Calling this will cause all objects observing the model to update. + change: function(options) { + options || (options = {}); + var changing = this._changing; + this._changing = true; + + // Silent changes become pending changes. + for (var attr in this._silent) this._pending[attr] = true; + + // Silent changes are triggered. + var changes = _.extend({}, options.changes, this._silent); + this._silent = {}; + for (var attr in changes) { + this.trigger('change:' + attr, this, this.get(attr), options); + } + if (changing) return this; + + // Continue firing `"change"` events while there are pending changes. + while (!_.isEmpty(this._pending)) { + this._pending = {}; + this.trigger('change', this, options); + // Pending and silent changes still remain. + for (var attr in this.changed) { + if (this._pending[attr] || this._silent[attr]) continue; + delete this.changed[attr]; + } + this._previousAttributes = _.clone(this.attributes); + } + + this._changing = false; + return this; + }, + + // Determine if the model has changed since the last `"change"` event. + // If you specify an attribute name, determine if that attribute has changed. + hasChanged: function(attr) { + if (!arguments.length) return !_.isEmpty(this.changed); + return _.has(this.changed, attr); + }, + + // Return an object containing all the attributes that have changed, or + // false if there are no changed attributes. Useful for determining what + // parts of a view need to be updated and/or what attributes need to be + // persisted to the server. Unset attributes will be set to undefined. + // You can also pass an attributes object to diff against the model, + // determining if there *would be* a change. + changedAttributes: function(diff) { + if (!diff) return this.hasChanged() ? _.clone(this.changed) : false; + var val, changed = false, old = this._previousAttributes; + for (var attr in diff) { + if (_.isEqual(old[attr], (val = diff[attr]))) continue; + (changed || (changed = {}))[attr] = val; + } + return changed; + }, + + // Get the previous value of an attribute, recorded at the time the last + // `"change"` event was fired. + previous: function(attr) { + if (!arguments.length || !this._previousAttributes) return null; + return this._previousAttributes[attr]; + }, + + // Get all of the attributes of the model at the time of the previous + // `"change"` event. + previousAttributes: function() { + return _.clone(this._previousAttributes); + }, + + // Check if the model is currently in a valid state. It's only possible to + // get into an *invalid* state if you're using silent changes. + isValid: function() { + return !this.validate(this.attributes); + }, + + // Run validation against the next complete set of model attributes, + // returning `true` if all is well. If a specific `error` callback has + // been passed, call that instead of firing the general `"error"` event. + _validate: function(attrs, options) { + if (options.silent || !this.validate) return true; + attrs = _.extend({}, this.attributes, attrs); + var error = this.validate(attrs, options); + if (!error) return true; + if (options && options.error) { + options.error(this, error, options); + } else { + this.trigger('error', this, error, options); + } + return false; + } + + }); + + // Backbone.Collection + // ------------------- + + // Provides a standard collection class for our sets of models, ordered + // or unordered. If a `comparator` is specified, the Collection will maintain + // its models in sort order, as they're added and removed. + var Collection = Backbone.Collection = function(models, options) { + options || (options = {}); + if (options.model) this.model = options.model; + if (options.comparator) this.comparator = options.comparator; + this._reset(); + this.initialize.apply(this, arguments); + if (models) this.reset(models, {silent: true, parse: options.parse}); + }; + + // Define the Collection's inheritable methods. + _.extend(Collection.prototype, Events, { + + // The default model for a collection is just a **Backbone.Model**. + // This should be overridden in most cases. + model: Model, + + // Initialize is an empty function by default. Override it with your own + // initialization logic. + initialize: function(){}, + + // The JSON representation of a Collection is an array of the + // models' attributes. + toJSON: function(options) { + return this.map(function(model){ return model.toJSON(options); }); + }, + + // Add a model, or list of models to the set. Pass **silent** to avoid + // firing the `add` event for every new model. + add: function(models, options) { + var i, index, length, model, cid, id, cids = {}, ids = {}, dups = []; + options || (options = {}); + models = _.isArray(models) ? models.slice() : [models]; + + // Begin by turning bare objects into model references, and preventing + // invalid models or duplicate models from being added. + for (i = 0, length = models.length; i < length; i++) { + if (!(model = models[i] = this._prepareModel(models[i], options))) { + throw new Error("Can't add an invalid model to a collection"); + } + cid = model.cid; + id = model.id; + if (cids[cid] || this._byCid[cid] || ((id != null) && (ids[id] || this._byId[id]))) { + dups.push(i); + continue; + } + cids[cid] = ids[id] = model; + } + + // Remove duplicates. + i = dups.length; + while (i--) { + models.splice(dups[i], 1); + } + + // Listen to added models' events, and index models for lookup by + // `id` and by `cid`. + for (i = 0, length = models.length; i < length; i++) { + (model = models[i]).on('all', this._onModelEvent, this); + this._byCid[model.cid] = model; + if (model.id != null) this._byId[model.id] = model; + } + + // Insert models into the collection, re-sorting if needed, and triggering + // `add` events unless silenced. + this.length += length; + index = options.at != null ? options.at : this.models.length; + splice.apply(this.models, [index, 0].concat(models)); + if (this.comparator) this.sort({silent: true}); + if (options.silent) return this; + for (i = 0, length = this.models.length; i < length; i++) { + if (!cids[(model = this.models[i]).cid]) continue; + options.index = i; + model.trigger('add', model, this, options); + } + return this; + }, + + // Remove a model, or a list of models from the set. Pass silent to avoid + // firing the `remove` event for every model removed. + remove: function(models, options) { + var i, l, index, model; + options || (options = {}); + models = _.isArray(models) ? models.slice() : [models]; + for (i = 0, l = models.length; i < l; i++) { + model = this.getByCid(models[i]) || this.get(models[i]); + if (!model) continue; + delete this._byId[model.id]; + delete this._byCid[model.cid]; + index = this.indexOf(model); + this.models.splice(index, 1); + this.length--; + if (!options.silent) { + options.index = index; + model.trigger('remove', model, this, options); + } + this._removeReference(model); + } + return this; + }, + + // Add a model to the end of the collection. + push: function(model, options) { + model = this._prepareModel(model, options); + this.add(model, options); + return model; + }, + + // Remove a model from the end of the collection. + pop: function(options) { + var model = this.at(this.length - 1); + this.remove(model, options); + return model; + }, + + // Add a model to the beginning of the collection. + unshift: function(model, options) { + model = this._prepareModel(model, options); + this.add(model, _.extend({at: 0}, options)); + return model; + }, + + // Remove a model from the beginning of the collection. + shift: function(options) { + var model = this.at(0); + this.remove(model, options); + return model; + }, + + // Get a model from the set by id. + get: function(id) { + if (id == null) return void 0; + return this._byId[id.id != null ? id.id : id]; + }, + + // Get a model from the set by client id. + getByCid: function(cid) { + return cid && this._byCid[cid.cid || cid]; + }, + + // Get the model at the given index. + at: function(index) { + return this.models[index]; + }, + + // Return models with matching attributes. Useful for simple cases of `filter`. + where: function(attrs) { + if (_.isEmpty(attrs)) return []; + return this.filter(function(model) { + for (var key in attrs) { + if (attrs[key] !== model.get(key)) return false; + } + return true; + }); + }, + + // Force the collection to re-sort itself. You don't need to call this under + // normal circumstances, as the set will maintain sort order as each item + // is added. + sort: function(options) { + options || (options = {}); + if (!this.comparator) throw new Error('Cannot sort a set without a comparator'); + var boundComparator = _.bind(this.comparator, this); + if (this.comparator.length == 1) { + this.models = this.sortBy(boundComparator); + } else { + this.models.sort(boundComparator); + } + if (!options.silent) this.trigger('reset', this, options); + return this; + }, + + // Pluck an attribute from each model in the collection. + pluck: function(attr) { + return _.map(this.models, function(model){ return model.get(attr); }); + }, + + // When you have more items than you want to add or remove individually, + // you can reset the entire set with a new list of models, without firing + // any `add` or `remove` events. Fires `reset` when finished. + reset: function(models, options) { + models || (models = []); + options || (options = {}); + for (var i = 0, l = this.models.length; i < l; i++) { + this._removeReference(this.models[i]); + } + this._reset(); + this.add(models, _.extend({silent: true}, options)); + if (!options.silent) this.trigger('reset', this, options); + return this; + }, + + // Fetch the default set of models for this collection, resetting the + // collection when they arrive. If `add: true` is passed, appends the + // models to the collection instead of resetting. + fetch: function(options) { + options = options ? _.clone(options) : {}; + if (options.parse === undefined) options.parse = true; + var collection = this; + var success = options.success; + options.success = function(resp, status, xhr) { + collection[options.add ? 'add' : 'reset'](collection.parse(resp, xhr), options); + if (success) success(collection, resp); + }; + options.error = Backbone.wrapError(options.error, collection, options); + return (this.sync || Backbone.sync).call(this, 'read', this, options); + }, + + // Create a new instance of a model in this collection. Add the model to the + // collection immediately, unless `wait: true` is passed, in which case we + // wait for the server to agree. + create: function(model, options) { + var coll = this; + options = options ? _.clone(options) : {}; + model = this._prepareModel(model, options); + if (!model) return false; + if (!options.wait) coll.add(model, options); + var success = options.success; + options.success = function(nextModel, resp, xhr) { + if (options.wait) coll.add(nextModel, options); + if (success) { + success(nextModel, resp); + } else { + nextModel.trigger('sync', model, resp, options); + } + }; + model.save(null, options); + return model; + }, + + // **parse** converts a response into a list of models to be added to the + // collection. The default implementation is just to pass it through. + parse: function(resp, xhr) { + return resp; + }, + + // Proxy to _'s chain. Can't be proxied the same way the rest of the + // underscore methods are proxied because it relies on the underscore + // constructor. + chain: function () { + return _(this.models).chain(); + }, + + // Reset all internal state. Called when the collection is reset. + _reset: function(options) { + this.length = 0; + this.models = []; + this._byId = {}; + this._byCid = {}; + }, + + // Prepare a model or hash of attributes to be added to this collection. + _prepareModel: function(model, options) { + options || (options = {}); + if (!(model instanceof Model)) { + var attrs = model; + options.collection = this; + model = new this.model(attrs, options); + if (!model._validate(model.attributes, options)) model = false; + } else if (!model.collection) { + model.collection = this; + } + return model; + }, + + // Internal method to remove a model's ties to a collection. + _removeReference: function(model) { + if (this == model.collection) { + delete model.collection; + } + model.off('all', this._onModelEvent, this); + }, + + // Internal method called every time a model in the set fires an event. + // Sets need to update their indexes when models change ids. All other + // events simply proxy through. "add" and "remove" events that originate + // in other collections are ignored. + _onModelEvent: function(event, model, collection, options) { + if ((event == 'add' || event == 'remove') && collection != this) return; + if (event == 'destroy') { + this.remove(model, options); + } + if (model && event === 'change:' + model.idAttribute) { + delete this._byId[model.previous(model.idAttribute)]; + this._byId[model.id] = model; + } + this.trigger.apply(this, arguments); + } + + }); + + // Underscore methods that we want to implement on the Collection. + var methods = ['forEach', 'each', 'map', 'reduce', 'reduceRight', 'find', + 'detect', 'filter', 'select', 'reject', 'every', 'all', 'some', 'any', + 'include', 'contains', 'invoke', 'max', 'min', 'sortBy', 'sortedIndex', + 'toArray', 'size', 'first', 'initial', 'rest', 'last', 'without', 'indexOf', + 'shuffle', 'lastIndexOf', 'isEmpty', 'groupBy']; + + // Mix in each Underscore method as a proxy to `Collection#models`. + _.each(methods, function(method) { + Collection.prototype[method] = function() { + return _[method].apply(_, [this.models].concat(_.toArray(arguments))); + }; + }); + + // Backbone.Router + // ------------------- + + // Routers map faux-URLs to actions, and fire events when routes are + // matched. Creating a new one sets its `routes` hash, if not set statically. + var Router = Backbone.Router = function(options) { + options || (options = {}); + if (options.routes) this.routes = options.routes; + this._bindRoutes(); + this.initialize.apply(this, arguments); + }; + + // Cached regular expressions for matching named param parts and splatted + // parts of route strings. + var namedParam = /:\w+/g; + var splatParam = /\*\w+/g; + var escapeRegExp = /[-[\]{}()+?.,\\^$|#\s]/g; + + // Set up all inheritable **Backbone.Router** properties and methods. + _.extend(Router.prototype, Events, { + + // Initialize is an empty function by default. Override it with your own + // initialization logic. + initialize: function(){}, + + // Manually bind a single named route to a callback. For example: + // + // this.route('search/:query/p:num', 'search', function(query, num) { + // ... + // }); + // + route: function(route, name, callback) { + Backbone.history || (Backbone.history = new History); + if (!_.isRegExp(route)) route = this._routeToRegExp(route); + if (!callback) callback = this[name]; + Backbone.history.route(route, _.bind(function(fragment) { + var args = this._extractParameters(route, fragment); + callback && callback.apply(this, args); + this.trigger.apply(this, ['route:' + name].concat(args)); + Backbone.history.trigger('route', this, name, args); + }, this)); + return this; + }, + + // Simple proxy to `Backbone.history` to save a fragment into the history. + navigate: function(fragment, options) { + Backbone.history.navigate(fragment, options); + }, + + // Bind all defined routes to `Backbone.history`. We have to reverse the + // order of the routes here to support behavior where the most general + // routes can be defined at the bottom of the route map. + _bindRoutes: function() { + if (!this.routes) return; + var routes = []; + for (var route in this.routes) { + routes.unshift([route, this.routes[route]]); + } + for (var i = 0, l = routes.length; i < l; i++) { + this.route(routes[i][0], routes[i][1], this[routes[i][1]]); + } + }, + + // Convert a route string into a regular expression, suitable for matching + // against the current location hash. + _routeToRegExp: function(route) { + route = route.replace(escapeRegExp, '\\$&') + .replace(namedParam, '([^\/]+)') + .replace(splatParam, '(.*?)'); + return new RegExp('^' + route + '$'); + }, + + // Given a route, and a URL fragment that it matches, return the array of + // extracted parameters. + _extractParameters: function(route, fragment) { + return route.exec(fragment).slice(1); + } + + }); + + // Backbone.History + // ---------------- + + // Handles cross-browser history management, based on URL fragments. If the + // browser does not support `onhashchange`, falls back to polling. + var History = Backbone.History = function() { + this.handlers = []; + _.bindAll(this, 'checkUrl'); + }; + + // Cached regex for cleaning leading hashes and slashes . + var routeStripper = /^[#\/]/; + + // Cached regex for detecting MSIE. + var isExplorer = /msie [\w.]+/; + + // Has the history handling already been started? + History.started = false; + + // Set up all inheritable **Backbone.History** properties and methods. + _.extend(History.prototype, Events, { + + // The default interval to poll for hash changes, if necessary, is + // twenty times a second. + interval: 50, + + // Gets the true hash value. Cannot use location.hash directly due to bug + // in Firefox where location.hash will always be decoded. + getHash: function(windowOverride) { + var loc = windowOverride ? windowOverride.location : window.location; + var match = loc.href.match(/#(.*)$/); + return match ? match[1] : ''; + }, + + // Get the cross-browser normalized URL fragment, either from the URL, + // the hash, or the override. + getFragment: function(fragment, forcePushState) { + if (fragment == null) { + if (this._hasPushState || forcePushState) { + fragment = window.location.pathname; + var search = window.location.search; + if (search) fragment += search; + } else { + fragment = this.getHash(); + } + } + if (!fragment.indexOf(this.options.root)) fragment = fragment.substr(this.options.root.length); + return fragment.replace(routeStripper, ''); + }, + + // Start the hash change handling, returning `true` if the current URL matches + // an existing route, and `false` otherwise. + start: function(options) { + if (History.started) throw new Error("Backbone.history has already been started"); + History.started = true; + + // Figure out the initial configuration. Do we need an iframe? + // Is pushState desired ... is it available? + this.options = _.extend({}, {root: '/'}, this.options, options); + this._wantsHashChange = this.options.hashChange !== false; + this._wantsPushState = !!this.options.pushState; + this._hasPushState = !!(this.options.pushState && window.history && window.history.pushState); + var fragment = this.getFragment(); + var docMode = document.documentMode; + var oldIE = (isExplorer.exec(navigator.userAgent.toLowerCase()) && (!docMode || docMode <= 7)); + + if (oldIE) { + this.iframe = $('