refactored drag-and-drop interface (IE Compatibility)
authorveltr
Wed, 03 Apr 2013 15:44:17 +0200
changeset 996 c472984db275
parent 995 37a4566bb7ee
child 997 1615c7e4ef9d
refactored drag-and-drop interface (IE Compatibility)
src/js/utils.js
src/widgets/Annotation.js
src/widgets/AnnotationsList.js
src/widgets/Polemic.js
src/widgets/Segments.js
--- a/src/js/utils.js	Wed Apr 03 15:40:58 2013 +0200
+++ b/src/js/utils.js	Wed Apr 03 15:44:17 2013 +0200
@@ -107,3 +107,18 @@
         console.log.apply(console, arguments);
     }
 }
+
+IriSP.attachDndData = function(jqSel, data) {
+	jqSel.attr("draggable", "true").on("dragstart", function(_event) {
+		var d = (typeof data === "function" ? data.call(this) : data);
+		try {
+			IriSP._(d).each(function(v, k) {
+				if (v) {
+					_event.originalEvent.dataTransfer.setData("text/x-iri-" + k, v);
+				}
+			});
+		} catch(err) {
+			_event.originalEvent.dataTransfer.setData("Text", JSON.stringify(d));
+		}
+	});
+}
--- a/src/widgets/Annotation.js	Wed Apr 03 15:40:58 2013 +0200
+++ b/src/widgets/Annotation.js	Wed Apr 03 15:44:17 2013 +0200
@@ -34,7 +34,7 @@
     + '<div class="Ldt-Annotation-Inner Ldt-Annotation-Empty{{#start_minimized}} Ldt-Annotation-Minimized{{/start_minimized}}">'
     + '<div class="Ldt-Annotation-HiddenWhenEmpty Ldt-Annotation-MaxMinButton"></div>'
     + '{{#show_social}}<div class="Ldt-Annotation-Social Ldt-Annotation-HiddenWhenMinimized Ldt-Annotation-HiddenWhenEmpty"></div>{{/show_social}}'
-    + '<h3 class="Ldt-Annotation-HiddenWhenEmpty" draggable="true">{{#show_annotation_type}}<span class="Ldt-Annotation-Type"></span> » {{/show_annotation_type}}<span class="Ldt-Annotation-Title"></span> <span class="Ldt-Annotation-Time Ldt-Annotation-HiddenWhenMinimized">'
+    + '<h3 class="Ldt-Annotation-HiddenWhenEmpty">{{#show_annotation_type}}<span class="Ldt-Annotation-Type"></span> » {{/show_annotation_type}}<span class="Ldt-Annotation-Title"></span> <span class="Ldt-Annotation-Time Ldt-Annotation-HiddenWhenMinimized">'
     + '(<span class="Ldt-Annotation-Begin"></span> - <span class="Ldt-Annotation-End"></span>)</span></h3>'
     + '<h3 class="Ldt-Annotation-MashupOrigin Ldt-Annotation-HiddenWhenEmpty">{{l10n.excerpt_from}} <span class="Ldt-Annotation-MashupMedia"></span> <span class="Ldt-Annotation-Time Ldt-Annotation-HiddenWhenMinimized">'
     + '(<span class="Ldt-Annotation-MashupBegin"></span> - <span class="Ldt-Annotation-MashupEnd"></span>)</span></h3>'
@@ -167,16 +167,15 @@
     this.source.getAnnotations().on("found", highlightTitleAndDescription);
     this.source.getAnnotations().on("not-found", highlightTitleAndDescription);
     this.source.getAnnotations().on("search-cleared", highlightTitleAndDescription);
-    this.$.find("[draggable]").on("dragstart", function(e) {
-    	var url = (typeof currentAnnotation.url !== "undefined" 
-                ? currentAnnotation.url
-                : (document.location.href.replace(/#.*$/,'') + '#id='  + currentAnnotation.id));
-    	e.originalEvent.dataTransfer.setData("text/x-iri-title",currentAnnotation.title);
-    	e.originalEvent.dataTransfer.setData("text/x-iri-description",currentAnnotation.description);
-    	e.originalEvent.dataTransfer.setData("text/x-iri-uri",url);
-    	if (typeof currentAnnotation.thumbnail !== "undefined" && currentAnnotation.thumbnail) {
-    		e.originalEvent.dataTransfer.setData("text/x-iri-image",currentAnnotation.thumbnail);
-    	}
+    IriSP.attachDndData(this.$.find("h3"), function() {
+    	return {
+	    	title: currentAnnotation.title,
+	    	description: currentAnnotation.description,
+	    	image: currentAnnotation.thumbnail,
+	    	uri: (typeof currentAnnotation.url !== "undefined" 
+	            ? currentAnnotation.url
+	            : (document.location.href.replace(/#.*$/,'') + '#id='  + currentAnnotation.id))
+	    }
     });
 }
 
--- a/src/widgets/AnnotationsList.js	Wed Apr 03 15:40:58 2013 +0200
+++ b/src/widgets/AnnotationsList.js	Wed Apr 03 15:44:17 2013 +0200
@@ -230,14 +230,12 @@
                     _annotation.trigger("unselect");
                 })
                 .appendTo(_this.list_$);
-            _el.find("[draggable]").on("dragstart", function(e) {
-	        	e.originalEvent.dataTransfer.setData("text/x-iri-title",_title);
-	        	e.originalEvent.dataTransfer.setData("text/x-iri-description",_description);
-	        	e.originalEvent.dataTransfer.setData("text/x-iri-uri",_url);
-	        	if (typeof _annotation.thumbnail !== "undefined" && _annotation.thumbnail) {
-	        		e.originalEvent.dataTransfer.setData("text/x-iri-image",_annotation.thumbnail);
-	        	}
-	        });
+            IriSP.attachDndData(_el.find("[draggable]"), {
+            	title: _title,
+            	description: _description,
+            	uri: _url,
+            	image: _annotation.thumbnail
+            });
             _el.on("remove", function() {
                 _annotation.off("select", _onselect);
                 _annotation.off("unselect", _onunselect);
--- a/src/widgets/Polemic.js	Wed Apr 03 15:40:58 2013 +0200
+++ b/src/widgets/Polemic.js	Wed Apr 03 15:44:17 2013 +0200
@@ -113,7 +113,7 @@
             
             function displayAnnotation(_elx, _ely, _pol, _col, _annotation) {
                 var _html = Mustache.to_html(
-                    '<div class="Ldt-Polemic-TweetDiv Ldt-TraceMe" draggable="true" trace-info="annotation-id:{{id}}, media-id:{{media_id}}, polemic:{{polemic}}, time:{{time}}" polemic-color="{{color}}"'
+                    '<div class="Ldt-Polemic-TweetDiv Ldt-TraceMe" trace-info="annotation-id:{{id}}, media-id:{{media_id}}, polemic:{{polemic}}, time:{{time}}" polemic-color="{{color}}"'
                     + ' tweet-title="{{title}}" annotation-id="{{id}}" style="width: {{width}}px; height: {{height}}px; top: {{top}}px; left: {{left}}px; background: {{color}}"></div>',
                 {
                     id: _annotation.id,
@@ -134,17 +134,15 @@
                     _annotation.trigger("unselect");
                 }).click(function() {
                     _annotation.trigger("click");
-                }).on("dragstart", function(e) {
-			    	var url = (typeof _annotation.url !== "undefined" 
-			                ? _annotation.url
-			                : (document.location.href.replace(/#.*$/,'') + '#id='  + _annotation.id));
-			        	e.originalEvent.dataTransfer.setData("text/x-iri-title",_annotation.title);
-			        	e.originalEvent.dataTransfer.setData("text/x-iri-description",_annotation.description);
-			        	e.originalEvent.dataTransfer.setData("text/x-iri-uri",url);
-			        	if (typeof _annotation.thumbnail !== "undefined" && _annotation.thumbnail) {
-			        		e.originalEvent.dataTransfer.setData("text/x-iri-image",_annotation.thumbnail);
-			        	}
-			        });
+                });
+                IriSP.attachDndData(_el, {
+                	title: _annotation.title,
+                	description: _annotation.description,
+                	image: _annotation.thumbnail,
+                	uri: (typeof _annotation.url !== "undefined" 
+		                ? _annotation.url
+		                : (document.location.href.replace(/#.*$/,'') + '#id='  + _annotation.id))
+                });
                 _annotation.on("select", function() {
                     if (_this.tooltip) {
                         _this.tooltip.show(
--- a/src/widgets/Segments.js	Wed Apr 03 15:40:58 2013 +0200
+++ b/src/widgets/Segments.js	Wed Apr 03 15:44:17 2013 +0200
@@ -22,7 +22,7 @@
     + '<div class="Ldt-Segments-Tooltip"></div>';
 
 IriSP.Widgets.Segments.prototype.annotationTemplate =
-    '<div class="Ldt-Segments-Segment Ldt-TraceMe" draggable="true" trace-info="segment-id:{{id}}, media-id:{{media_id}}, from:{{from}}, to:{{to}}" segment-text="{{text}}"'
+    '<div class="Ldt-Segments-Segment Ldt-TraceMe" trace-info="segment-id:{{id}}, media-id:{{media_id}}, from:{{from}}, to:{{to}}" segment-text="{{text}}"'
     + 'style="top:{{top}}px; height:{{height}}px; left:{{left}}px; width:{{width}}px; background:{{medcolor}}" data-base-color="{{color}}" data-low-color="{{lowcolor}}" data-medium-color="{{medcolor}}"></div>'
 
 
@@ -98,18 +98,15 @@
             .click(function() {
                 _annotation.trigger("click");
             })
-            .on("dragstart", function(e) {
-	    	var url = (typeof _annotation.url !== "undefined" 
-	                ? _annotation.url
-	                : (document.location.href.replace(/#.*$/,'') + '#id='  + _annotation.id));
-	        	e.originalEvent.dataTransfer.setData("text/x-iri-title",_annotation.title);
-	        	e.originalEvent.dataTransfer.setData("text/x-iri-description",_annotation.description);
-	        	e.originalEvent.dataTransfer.setData("text/x-iri-uri",url);
-	        	if (typeof _annotation.thumbnail !== "undefined" && _annotation.thumbnail) {
-	        		e.originalEvent.dataTransfer.setData("text/x-iri-image",_annotation.thumbnail);
-	        	}
-	        })
-            .appendTo(list_$)
+            .appendTo(list_$);
+        IriSP.attachDndData(_el, {
+        	title: _annotation.title,
+        	description: _annotation.description,
+        	uri: (typeof _annotation.url !== "undefined" 
+                ? _annotation.url
+                : (document.location.href.replace(/#.*$/,'') + '#id='  + _annotation.id)),
+            image: _annotation.thumbnail
+        });
         _annotation.on("select", function() {
             _this.$segments.each(function() {
                 var _segment = IriSP.jQuery(this);