changeset 24:4f58fa0a9a6d

Cleaned up some library behavior, changed editor representation cache to track a title and a body for representations, to allow a little more dynamic composition.
author David Eads <eads@chicagotech.org>
date Wed, 11 Mar 2009 01:47:57 -0500
parents a72403cfa9a8
children e71df38143d1
files dnd_test/dnd_test.module js/dnd-library.js js/jquery.draganddrop.js
diffstat 3 files changed, 53 insertions(+), 21 deletions(-) [+]
line wrap: on
line diff
--- a/dnd_test/dnd_test.module	Tue Mar 10 13:55:27 2009 -0500
+++ b/dnd_test/dnd_test.module	Wed Mar 11 01:47:57 2009 -0500
@@ -62,7 +62,7 @@
 }
 
 /**
- * Page call back that returns some JSON
+ * Page callback that returns some JSON
  */
 function dnd_test_library() {
   $page = ($_GET['page']) ? $_GET['page'] : 1;
@@ -79,7 +79,7 @@
 /**
  * Create contrived output
  */
-function dnd_test_generate_library($page = 1, $limit = 12) {
+function dnd_test_generate_library($page = 1, $limit = 8) {
   $start = ($page * $limit) - ($limit); 
   $end   = $page * $limit;
 
@@ -106,7 +106,10 @@
 function dnd_editor_items($i) {
   $item = array();
   foreach(array(t('S'), t('M'), t('L')) as $size) {
-    $item[$i .'-'. $size] = theme('dnd_editor_item', $i, $size);
+    $item[$i .'-'. $size] = array(
+      'body' => theme('dnd_editor_item', $i, $size),
+      'title' => 'Item '. $i .'-S',
+    );
   }
   return $item;
 }
--- a/js/dnd-library.js	Tue Mar 10 13:55:27 2009 -0500
+++ b/js/dnd-library.js	Wed Mar 11 01:47:57 2009 -0500
@@ -32,13 +32,8 @@
     // This is a bad hack to lop off '-dnd-library' from the id to get the editor name
     var $editor = $('#' + this.id.slice(0, -12)); 
 
-    // Bind Drag and Drop plugin invocation to events emanating from Wysiwyg
-    $editor.bind('wysiwygAttach', Drupal.behaviors.dndLibrary.attach_library);
-    $editor.bind('wysiwygDetach', Drupal.behaviors.dndLibrary.detach_library);
-
-    // Add preview behavior to editor items (thanks, BeautyTips!)
-    $('.editor-item', context).each(function () {
-      $(this).bt(Drupal.settings.dndLibraryPreviews[this.id], {
+    var settings = Drupal.settings.dndEnabledLibraries[$editor.get(0).id];
+    var bt_settings = $.extend({
         'trigger': 'none',
         'width': 375,
         'spikeLength': 7,
@@ -47,8 +42,16 @@
         'strokeWidth': 1,
         'fill': '#ffd',
         'strokeStyle': '#555'
-      });
-      $(this).hoverIntent({
+    }, settings.bt_settings); 
+
+    // Bind Drag and Drop plugin invocation to events emanating from Wysiwyg
+    $editor.bind('wysiwygAttach', Drupal.behaviors.dndLibrary.attach_library);
+    $editor.bind('wysiwygDetach', Drupal.behaviors.dndLibrary.detach_library);
+
+    // Add preview behavior to editor items (thanks, BeautyTips!)
+    $('.editor-item', context).each(function () {
+      $(this).bt(Drupal.settings.dndLibraryPreviews[this.id], bt_settings);
+      var hover_opts = $.extend({
         'interval': 500,
         'timeout' : 0,
         'over': function() {
@@ -63,7 +66,8 @@
           });
         }, 
         'out': function() { this.btOff(); }
-      });
+      }, settings.libraryHoverIntentOpts);
+      $(this).hoverIntent(hover_opts);
     });
 
     // Simple AJAX pager
@@ -91,7 +95,7 @@
     var cached = $.data($editor, 'dnd_preload') || {};
     for (editor_id in Drupal.settings.dndEditorRepresentations) {
       if (!cached[editor_id]) {
-        $representation = $(Drupal.settings.dndEditorRepresentations[editor_id]);
+        $representation = $(Drupal.settings.dndEditorRepresentations[editor_id].body);
         if ($representation.is('img') && $representation.get(0).src) { 
           $representation.attr('src', $representation.get(0).src);
         } else {
@@ -150,7 +154,7 @@
   settings = $.extend({
     targets: $('#'+ data.field),
     processTextAreaClick: function(target, clicked, representation_id, e, data) {
-      var snippet = '<p class="dnd-dropped-wrapper">' + Drupal.settings.dndEditorRepresentations[representation_id] + '</p>';
+      var snippet = '<p class="dnd-dropped-wrapper">' + Drupal.settings.dndEditorRepresentations[representation_id].body + '</p>';
       $(target).replaceSelection(snippet, true);
     }
   }, settings);
@@ -170,6 +174,7 @@
       var tiny_instance = tinyMCE.getInstanceById(data.field);
       if (tiny_instance) {
         Drupal.behaviors.dndLibrary._attach_tinymce(data, settings, tiny_instance);
+        $('#'+ data.field +'-wrapper').trigger('dnd_attach_library');
         clearInterval(t);
       }
     }, 100);
@@ -191,9 +196,21 @@
     targets: $('#'+ data.field +'-wrapper iframe'),
     processIframeDrop: function(drop, id_selector) {
       var representation_id = id_selector.call(this, drop);
-      var representation = Drupal.settings.dndEditorRepresentations[representation_id];
+      var representation = Drupal.settings.dndEditorRepresentations[representation_id].body;
       var target = this, $target = $(target), $drop = $(drop), block;
 
+      // Keep a counter
+      var counter = $target.data('representation_counter');      
+      if (!counter) {
+        counter = {}
+        counter[representation_id] = 1;
+      } else if (counter && !counter[representation_id]) {
+        counter[representation_id] = 1;
+      } else {
+        counter[representation_id] = counter[representation_id] + 1;
+      }
+      $target.data('representation_counter', counter);
+
       // Search through block level parents
       $drop.parents().each(function() {
         var $this = $(this);
--- a/js/jquery.draganddrop.js	Tue Mar 10 13:55:27 2009 -0500
+++ b/js/jquery.draganddrop.js	Wed Mar 11 01:47:57 2009 -0500
@@ -44,9 +44,14 @@
  * textareaTargetClass:
  *   A class to add to a draggable item if it can be dragged to a textarea.
  *
- * processClass:
+ * processedClass:
  *   A class to add to draggable items processed by DnD.
  *
+ * droppedClass:
+ *   A class to add to images that are dropped (by default, this is used to
+ *   ensure that a successful drop manifests the editor representation only
+ *   once.)
+ *
  * interval:
  *   How often to check the iframe for a drop, in milliseconds.
  *
@@ -100,7 +105,7 @@
       }, 
       processIframeDrop: function(drop, id_selector) {
         var representation_id = opt.idSelector(drop);
-        $(drop).replaceWith(representation_id).wrap('<p class="dnd-dropped"></p>');
+        $(drop).replaceWith(representation_id).wrap('<p class="'+ opt.droppedClass +'"></p>');
       },
       processTextAreaClick: function(target, clicked, representation_id) {
         var snippet = '<div><img src="'+ representation_id +'" /></div>';
@@ -111,7 +116,8 @@
 
       iframeTargetClass: 'dnd-iframe-target',
       textareaTargetClass: 'dnd-textarea-target',
-      processedClass: 'dnd-processed'
+      processedClass: 'dnd-processed',
+      droppedClass: 'dnd-dropped'
 
     }, opt);
 
@@ -122,8 +128,15 @@
     $(targets).filter('iframe').each(function() {
       var target = this; 
       var t = setInterval(function() {              
-        $('img:not(.dnd-dropped)', $(target).contents()).each(function() {
+        $('img:not(.'+ opt.droppedClass +')', $(target).contents()).each(function() {
           opt.processIframeDrop.call(target, this, opt.idSelector);
+          var data = {'drop': this, 'representation_id': opt.idSelector(this)};
+
+          // Trigger event in container window
+          $(target).trigger('dnd_drop', data);
+
+          // Trigger event in iframe
+          $(this).trigger('dnd_drop', data);
         });
       }, opt.interval);
 
@@ -140,7 +153,6 @@
     return this.each(function() {
       if ($(this).is('img')) {
         var element = this, $element = $(element);
-
         var representation_id = opt.idSelector(element);
 
         if (!representation_id) {