defr/drupal/scald/dnd: js/dnd.js comparison

comparison js/dnd.js @ 12:a5b2b9fa2a1a

Cross browser compatibility changes -- winnowing the scope of possible configurations.

author	David Eads <eads@chicagotech.org>
date	Fri, 27 Feb 2009 11:50:59 -0600
parents	99ba5941779c
children	ef7ad7b5baa4

comparison

equal deleted inserted replaced

-:99ba5941779c
+:a5b2b9fa2a1a
 /* jQuery Drag and Drop Library for Rich Editors
 *
-* This library exists to provide a jQuery plugin that manages dragging
+* A helper library which provides the ability to drag and drop images to Rich
-* and dropping of page assets into textareas and rich-text editors which use
+* Text Editors (RTEs) that use the embedded iframe + DesignMode method, and
-* the iframe + designMode method.
+* provides a simple "clicky" interface for inserting the same markup directly
-*
+* into a textarea.
-* This plugin has a rather elaborate set of considerations based on common
-* configurations of rich text editors and serious disparity in how browsers
-* handle dragging and dropping assets into an iframe.
-*
-* The plugin scans an iframe with an embedded document with designMode enabled
-* and tries to detect content that was injected by dragging and dropping
-* within the browser.  If it detects an injection of content, it attempts to
-* conjure up an "editor representation" of the content based on the markup
-* passed in.
-*
-* This works because links and images drop with their full HTML syntax in-tact
-* across most browsers and platforms.  This means we can set a timer on the
-* iframe that scans for the insertion of the markup and replace it with
-* another HTML snippet, as well as triggering actions inside the editor itself
-* (this will perhaps be handled by a set of editor-specific plugins).
-*
-* Because of the mechanism of operation, it is expected that the iframe
-* contain CSS which hides the markup dropped in to create the illusion of
-* seamlessly dropping in the "editor representation" of the dropped item.
-*
-* It is expected that the implementer will be parsing the input text for
-* the proper markup on the server side and making some decisions about how
-* to parse and handle that markup on load and save.
-*
-* Of special interest is graceful degradation.  There is no ideal graceful
-* degradation path at this time.  Every mainstream browser except IE 6 and
-* IE 7 drop links and images into textareas with their href and src URIs,
-* respectively, including querystrings.  That means that the image or link
-* url can be used for parsing, or a querystring included.  But it won't work
-* in Internet Explorer, and probably will require a server-side browser check
-* in full blown implementations of the library system.
 *
 * Basic usage:
 *
-* $('a.my-class').dnd({targets: $('#my-iframe')});
+* $('img.my-class').dnd({targets: $('#my-iframe')});
 *
 * Options:
 *
 * targets
 *   A jQuery object corresponding to the proper iframe(s) to enable dragging
 *   inside it.
 *
 * postprocessDrop:
 *   A callback that postprocesses the iframe.
 *
+* interval:
+*   How often to check the iframe for a drop, in milliseconds.
+*
+* Usage notes:
+*
+* This is a very tricky problem and to achieve cross browser (as of writing,
+* IE, Safari, and Firefox) support, severe limitations must be made on the
+* nature of DOM elements that are dropped.
+*
+* Droppable elements must be <img> tags.  Internet Explorer will not accept
+* anchors, and Safari strips attributes and additional markup from
+* dropped anchors, images, and snippets.
+*
+* While the idSelector option allows you to parse the dropped element for
+* any attribute that "comes along" with the element when it is dropped in a
+* designmode-enabled iframe, the only safe attribute to scan is the 'src'
+* attribute, and to avoid strange "relativization" of links, the src should
+* always be expressed as an absolute url with a fully qualified domain name.
+*
+* Implementation notes and todos:
+*
+* Currently, there is no garbage collection instituted for the many many
+* timers that are created, so memory usage could become as issue in scenarios
+* where the user does a lot of paging or otherwise winds up invoking
+* drag and drop on large numbers of elements.
 */
 (function($) {
 $.fn.dnd = function(opt) {
 opt = $.extend({}, {
 dropWrapper: '<p class="dnd-dropped"></p>',
-insertBefore: '',
+insertBefore: false,
-insertAfter: '',
+insertAfter: false,
 processedClass:  'dnd-processed',
-disableClick: true,
+interval: 100,
 processTargets: function(targets) {
 return targets.each(function() {
-$('head', $(this).contents()).append('<style type="text/css">.dnd-processed { display: none; }</style>');
+//$('head', $(this).contents()).append('<style type="text/css">.dnd-processed { display: none; }</style>');
+//@TODO use jQuery.rules()
 return this;
 });
 },
 // Must return a string
 idSelector: function(element) {
-if (!element.id) {
+if ($(element).is('img')) {
-// @TODO sanitize output here
+return $.url.setUrl(element.src).param('dnd_id');
-if ($(element).is('a')) {
-return element.href;
-}
-if ($(element).is('img')) {
-return element.src;
-}
 }
-return element.id;
 },
 // @TODO:  Target should be jQuery object
 targets: $('iframe, textarea'),
 return '<span id="dnd-' + representation_id +'-'+ count +'">' + representation_id + '</span>';
 },
 // Back out markup to render in place after parent container
 preprocessDrop: function(target, drop) {
+return drop;
 var old_parent = false;
 var element_id = '';
 var parents = drop.parents();
 for (var i=0; i < parents.length; i++) {
 }, opt);
 // Initialize plugin
 var targets = opt.processTargets(opt.targets);
-if (opt.disableClick) { this.click(function() { return false; }); }
 // Process!
 return this.each(function() {
+if ($(this).is('img')) {
 var element = this;
-var representation_id = opt.idSelector(element);
+// If we don't have a proper id, bail
-if (!element.id) {
+var representation_id = opt.idSelector(element);
-element.id = element.tagName.toLowerCase() + '-' + representation_id;
+if (!representation_id) {
+return this;
+};
+// Add some UI sugar and a special class
+$(element)
+.css('cursor', 'move')
+.addClass(opt.processedClass);
+// We need to differentiate behavior based on the targets... I guess.
+targets.each(function() {
+if ($(this).is('iframe')) {
+var target = this;
+var selector = 'img[src='+ element.src +']';
+// Watch the iframe for changes
+var t = setInterval(function() {
+var match = $(selector, $(target).contents());
+if (match.length > 0) {
+var drop = opt.preprocessDrop(target, match); // Must return a jquery object
+var representation = opt.renderRepresentation(target, drop, representation_id);
+if (representation) {
+if (opt.dropWrapper) {
+drop.wrap(opt.dropWrapper);
+}
+if (opt.insertBefore) {
+drop.before(opt.insertBefore);
+}
+if (opt.insertAfter) {
+drop.after(opt.insertAfter);
+}
+drop.replaceWith(representation);
+opt.postprocessDrop(target, drop, element);
+}
+}
+}, opt.interval);
+// @TODO track the timer with $.data() so we can clear it?
+} else if ($(this).is('textarea')) {
+//console.log('@TODO handle textareas via.... regexp?');
+}
+});
 }
-// Add some UI sugar and a special class
-$(element)
-.css('cursor', 'move')
-.addClass(opt.processedClass);
-// We need to differentiate behavior based on the targets... I guess.
-targets.each(function() {
-if ($(this).is('iframe')) {
-var target = this;
-// Watch the iframe for changes
-var t = setInterval(function() {
-var match = $('#' + element.id, $(target).contents());
-if (match.length > 0) {
-var drop = opt.preprocessDrop(target, match); // Must return a jquery object
-drop
-.before(opt.insertBefore)
-.after(opt.insertAfter)
-.wrap(opt.dropWrapper)
-.replaceWith(opt.renderRepresentation(target, drop, representation_id));
-opt.postprocessDrop(target, drop, element);
-}
-}, 100);
-// @TODO track the timer with $.data() so we can clear it?
-} else if ($(this).is('textarea')) {
-//console.log('@TODO handle textareas via.... regexp?');
-}
-});
 });
 };
 })(jQuery);