summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authoryoung hahn2010-01-08 20:48:22 (GMT)
committer young hahn2010-01-08 20:48:22 (GMT)
commitf807a349d1e976907d8e90a86652e0902dad69cf (patch)
tree8eba7c3a3f27ec655344f2c5434893c1dab50638
parentbf45c764d860d0ab081f358c3cbd9a00c6a9c143 (diff)
Using a generalized pageEditor jquery plugin to standardize start, end, init events of inline editing.
-rw-r--r--context_ui/context_ui.js101
-rw-r--r--context_ui/jquery.pageEditor.js39
-rw-r--r--context_ui/theme/theme.inc3
-rw-r--r--plugins/context_reaction_block.js35
4 files changed, 104 insertions, 74 deletions
diff --git a/context_ui/context_ui.js b/context_ui/context_ui.js
index 5ae876f..9164bdd 100644
--- a/context_ui/context_ui.js
+++ b/context_ui/context_ui.js
@@ -90,62 +90,6 @@ function DrupalContextPlugins(form) {
this.setState();
}
-/**
- * Context editor. AHAH editor for live context editing.
- */
-function DrupalContextEditor(editor) {
- this.context = '';
- this.editing = false;
- this.state = {};
-
- this.invoke = function(type) {
- var event = {
- 'caller': 'contextEditor',
- 'event': type,
- 'editor': editor,
- 'context': this.context
- };
- Drupal.attachBehaviors(event);
- };
-
- this.editStart = function(context) {
- if (!this.editing) {
- this.editing = true;
- this.context = context;
- $('#context-editable-'+context, editor).show();
- $(document.body).addClass('context-editing');
- this.invoke('editStart');
- }
- };
-
- this.editFinish = function() {
- if (this.editing) {
- this.editing = false;
- this.context = '';
- $(document.body).removeClass('context-editing');
- $('div.contexts div.context-editable', editor).hide();
- $('li.context-editable').removeClass('context-editing');
-
- // Indicate that edits have been made.
- $('form.context-editor').addClass('edited');
- this.invoke('editFinish');
- }
- };
-
- // Attach handlers to editable contexts.
- $('li.context-editable a.edit', editor).click(function() {
- var trigger = $(this).parents('li.context-editable').addClass('context-editing');
- var context = trigger.attr('id').split('context-editable-trigger-')[1];
- Drupal.contextEditor.editStart(context);
- return false;
- });
- $('li.context-editable a.done', editor).click(function() {
- Drupal.contextEditor.editFinish();
- return false;
- });
- this.invoke('init');
-}
-
Drupal.behaviors.context_ui = function(context) {
// Initialize context plugin form.
$('form div.context-plugins:not(.context-ui-processed)').each(function() {
@@ -154,8 +98,45 @@ Drupal.behaviors.context_ui = function(context) {
});
// Initialize context editor.
- $('form div.context-editor:not(.context-ui-processed)').each(function() {
- $(this).addClass('context-ui-processed');
- Drupal.contextEditor = new DrupalContextEditor($(this));
- });
+ if (jQuery().pageEditor) {
+ $('form.context-editor:not(.context-ui-processed)')
+ .addClass('context-ui-processed')
+ .pageEditor()
+ .each(function() {
+ var editor = $(this);
+ var defaultContext = $('li.context-editable', this).attr('id').split('context-editable-trigger-')[1];
+ $(this).data('defaultContext', defaultContext);
+
+ // Attach start/end handlers to editable contexts.
+ $('li.context-editable a.edit', editor).click(function() {
+ var trigger = $(this).parents('li.context-editable').addClass('context-editing');
+ var context = trigger.attr('id').split('context-editable-trigger-')[1];
+ editor.pageEditor('start', context);
+ return false;
+ });
+ $('li.context-editable a.done', editor).click(function() {
+ editor.pageEditor('end');
+ return false;
+ });
+
+ // Handler for start event.
+ editor.bind('start.pageEditor', function(event, context) {
+ // Fallback to first context if param is empty.
+ if (!context) {
+ context = $(this).data('defaultContext');
+ $('li#context-editable-trigger-'+context, this).addClass('context-editing');
+ }
+ $(document.body).addClass('context-editing');
+ $('#context-editable-'+context, this).show();
+ });
+
+ // Handler for end event.
+ editor.bind('end.pageEditor', function(event, context) {
+ $(document.body).removeClass('context-editing');
+ $('div.contexts div.context-editable', this).hide();
+ $('li.context-editable').removeClass('context-editing');
+ $('form.context-editor').addClass('edited');
+ });
+ });
+ }
};
diff --git a/context_ui/jquery.pageEditor.js b/context_ui/jquery.pageEditor.js
new file mode 100644
index 0000000..8f9bb3f
--- /dev/null
+++ b/context_ui/jquery.pageEditor.js
@@ -0,0 +1,39 @@
+// $Id$
+
+/**
+ * Generic pageEditor plugin. Allows an editor DOM object to trigger
+ * init, start, and end events. Implementors can check whether the
+ * editor is currently editing and bind handlers for the events triggered
+ * by the editor.
+ */
+(function($) {
+ $.fn.pageEditor = function(method, data) {
+ this.each(function() {
+ switch (method) {
+ case 'isEditing':
+ return this.editing;
+ case 'start':
+ if (!this.inited) {
+ this.inited = true;
+ $(this).trigger('init.pageEditor', data);
+ }
+ this.editing = true;
+ $(this).trigger('start.pageEditor', data);
+ break;
+ case 'end':
+ if (!this.inited) {
+ this.inited = true;
+ $(this).trigger('init.pageEditor', data);
+ }
+ this.editing = false;
+ $(this).trigger('end.pageEditor', data);
+ break;
+ default:
+ this.inited = false;
+ this.editing = false;
+ break;
+ }
+ });
+ return this;
+ };
+})(jQuery);
diff --git a/context_ui/theme/theme.inc b/context_ui/theme/theme.inc
index 7d1b0e3..5f8b3e5 100644
--- a/context_ui/theme/theme.inc
+++ b/context_ui/theme/theme.inc
@@ -6,6 +6,7 @@
function template_preprocess_context_ui_editor(&$vars) {
drupal_add_css(drupal_get_path('module', 'context_ui') . '/context_ui.css');
drupal_add_js(drupal_get_path('module', 'context_ui') . '/context_ui.js');
+ drupal_add_js(drupal_get_path('module', 'context_ui') . '/jquery.pageEditor.js');
$vars['contexts'] = $vars['form']['contexts'];
unset($vars['form']['contexts']);
@@ -20,6 +21,7 @@ function template_preprocess_context_ui_editor(&$vars) {
function template_preprocess_context_ui_plugins(&$vars) {
drupal_add_css(drupal_get_path("module", "context_ui") ."/context_ui.css");
drupal_add_js(drupal_get_path("module", "context_ui") ."/context_ui.js");
+ drupal_add_js(drupal_get_path('module', 'context_ui') . '/jquery.pageEditor.js');
// Provide title & desc.
$vars['title'] = check_plain($vars['form']['#title']);
@@ -46,6 +48,7 @@ function template_preprocess_context_ui_plugins(&$vars) {
function template_preprocess_context_ui_form(&$vars) {
drupal_add_css(drupal_get_path("module", "context_ui") ."/context_ui.css");
drupal_add_js(drupal_get_path("module", "context_ui") ."/context_ui.js");
+ drupal_add_js(drupal_get_path('module', 'context_ui') . '/jquery.pageEditor.js');
$vars['buttons'] = $vars['form']['buttons'];
unset($vars['form']['buttons']);
}
diff --git a/plugins/context_reaction_block.js b/plugins/context_reaction_block.js
index 2815cc3..fd286b2 100644
--- a/plugins/context_reaction_block.js
+++ b/plugins/context_reaction_block.js
@@ -1,21 +1,23 @@
// $Id$
Drupal.behaviors.contextReactionBlock = function(context) {
- // Context uses Drupal behaviors as an informal hook/events system.
- if (context.caller == 'contextEditor' && context.editor && context.event) {
- switch (context.event) {
- case 'init':
- Drupal.contextBlockEditor = new DrupalContextBlockEditor(context.editor);
- break;
- case 'editStart':
- Drupal.contextBlockEditor.editStart(context.editor, context.context);
- break;
- case 'editFinish':
+ $('form.context-editor:not(.context-block-processed)')
+ .addClass('context-block-processed')
+ .each(function() {
+ $(this).bind('init.pageEditor', function(event) {
+ Drupal.contextBlockEditor = new DrupalContextBlockEditor($(this));
+ });
+ $(this).bind('start.pageEditor', function(event, context) {
+ // Fallback to first context if param is empty.
+ if (!context) {
+ context = $(this).data('defaultContext');
+ }
+ Drupal.contextBlockEditor.editStart($(this), context);
+ });
+ $(this).bind('end.pageEditor', function(event) {
Drupal.contextBlockEditor.editFinish();
- break;
- }
- return;
- }
+ });
+ });
//
// Editor ===========================================================
@@ -232,6 +234,11 @@ function DrupalContextBlockEditor(editor) {
* Start editing. Attach handlers, begin draggable/sortables.
*/
this.editStart = function(editor, context) {
+ // This is redundant to the start handler found in context_ui.js.
+ // However it's necessary that we trigger this class addition before
+ // we call .sortable() as the empty regions need to be visible.
+ $(document.body).addClass('context-editing');
+
$('div.context-block-region > div.edit-'+context).addClass('draggable');
// First pass, enable sortables on all regions.