Added drag-and-drop behaviour in mdp for Renkan interoperability
authorveltr
Wed, 27 Feb 2013 19:18:04 +0100
changeset 1120 d3a125e619d9
parent 1119 f1e48630fc59
child 1127 90d0a9d14c68
Added drag-and-drop behaviour in mdp for Renkan interoperability
.project
src/ldt/ldt/static/ldt/metadataplayer/Annotation.js
src/ldt/ldt/static/ldt/metadataplayer/AnnotationsList.js
src/ldt/ldt/static/ldt/metadataplayer/Polemic.js
src/ldt/ldt/static/ldt/metadataplayer/Segments.js
src/ldt/ldt/static/ldt/metadataplayer/Social.js
--- a/.project	Wed Feb 27 00:13:08 2013 +0100
+++ b/.project	Wed Feb 27 19:18:04 2013 +0100
@@ -1,23 +1,12 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<projectDescription>
-	<name>platform_group</name>
-	<comment></comment>
-	<projects>
-	</projects>
-	<buildSpec>
-		<buildCommand>
-			<name>org.python.pydev.PyDevBuilder</name>
-			<arguments>
-			</arguments>
-		</buildCommand>
-		<buildCommand>
-			<name>com.aptana.ide.core.unifiedBuilder</name>
-			<arguments>
-			</arguments>
-		</buildCommand>
-	</buildSpec>
-	<natures>
-		<nature>com.aptana.projects.webnature</nature>
-		<nature>org.python.pydev.pythonNature</nature>
-	</natures>
-</projectDescription>
+<?xml version="1.0" encoding="UTF-8"?>
+<projectDescription>
+	<name>platform_group</name>
+	<comment></comment>
+	<projects>
+	</projects>
+	<buildSpec>
+	</buildSpec>
+	<natures>
+		<nature>com.aptana.projects.webnature</nature>
+	</natures>
+</projectDescription>
--- a/src/ldt/ldt/static/ldt/metadataplayer/Annotation.js	Wed Feb 27 00:13:08 2013 +0100
+++ b/src/ldt/ldt/static/ldt/metadataplayer/Annotation.js	Wed Feb 27 19:18:04 2013 +0100
@@ -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">{{#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" 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">'
     + '(<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,6 +167,14 @@
     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);
+    });
 }
 
 IriSP.Widgets.Annotation.prototype.sendBounds = function() {
--- a/src/ldt/ldt/static/ldt/metadataplayer/AnnotationsList.js	Wed Feb 27 00:13:08 2013 +0100
+++ b/src/ldt/ldt/static/ldt/metadataplayer/AnnotationsList.js	Wed Feb 27 19:18:04 2013 +0100
@@ -65,15 +65,15 @@
 IriSP.Widgets.AnnotationsList.prototype.annotationTemplate = 
     '<li class="Ldt-AnnotationsList-li Ldt-TraceMe" trace-info="annotation-id:{{id}}, media-id:{{media_id}}" style="{{specific_style}}">'
     + '<div class="Ldt-AnnotationsList-ThumbContainer">'
-    + '<a href="{{url}}">'
+    + '<a href="{{url}}" draggable="true">'
     + '<img class="Ldt-AnnotationsList-Thumbnail" src="{{thumbnail}}" />'
     + '</a>'
     + '</div>'
     + '<div class="Ldt-AnnotationsList-Duration">{{begin}} - {{end}}</div>'
-    + '<h3 class="Ldt-AnnotationsList-Title">'
-    + '<a href="{{url}}">{{{title}}}</a>'
+    + '<h3 class="Ldt-AnnotationsList-Title" draggable="true">'
+    + '<a href="{{url}}">{{{htitle}}}</a>'
     + '</h3>'
-    + '<p class="Ldt-AnnotationsList-Description">{{{description}}}</p>'
+    + '<p class="Ldt-AnnotationsList-Description">{{{hdescription}}}</p>'
     + '{{#tags.length}}'
     + '<ul class="Ldt-AnnotationsList-Tags">'
     + '{{#tags}}'
@@ -180,11 +180,12 @@
                             annotationType : _annotation.annotationType.id
                         }
                     )
-                    : '#id=' + _annotation.id
+                    : document.location.href.replace(/#.*$/,'') + '#id=' + _annotation.id
                     )
             );
             var _title = (_annotation.title || "").replace(_annotation.description,''),
-                _description = _annotation.description;
+                _description = _annotation.description,
+                _thumbnail = (typeof _annotation.thumbnail !== "undefined" && _annotation.thumbnail ? _annotation.thumbnail : _this.default_thumbnail);
             if (!_annotation.title) {
                 _title = _annotation.creator;
             }
@@ -202,11 +203,11 @@
             var _data = {
                 id : _annotation.id,
                 media_id : _annotation.getMedia().id,
-                title : IriSP.textFieldHtml(_title),
-                description : IriSP.textFieldHtml(_description),
+                htitle : IriSP.textFieldHtml(_title),
+                hdescription : IriSP.textFieldHtml(_description),
                 begin : _annotation.begin.toString(),
                 end : _annotation.end.toString(),
-                thumbnail : typeof _annotation.thumbnail !== "undefined" && _annotation.thumbnail ? _annotation.thumbnail : _this.default_thumbnail,
+                thumbnail : _thumbnail,
                 url : _url,
                 tags : _annotation.getTagTexts(),
                 specific_style : (typeof _bgcolor !== "undefined" ? "background-color: " + _bgcolor : ""),
@@ -229,6 +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);
+	        	e.originalEvent.dataTransfer.setData("text/x-iri-image",_thumbnail);
+	        });
             _el.on("remove", function() {
                 _annotation.off("select", _onselect);
                 _annotation.off("unselect", _onunselect);
--- a/src/ldt/ldt/static/ldt/metadataplayer/Polemic.js	Wed Feb 27 00:13:08 2013 +0100
+++ b/src/ldt/ldt/static/ldt/metadataplayer/Polemic.js	Wed Feb 27 19:18:04 2013 +0100
@@ -113,7 +113,7 @@
             
             function displayAnnotation(_elx, _ely, _pol, _col, _annotation) {
                 var _html = Mustache.to_html(
-                    '<div class="Ldt-Polemic-TweetDiv Ldt-TraceMe" trace-info="annotation-id:{{id}}, media-id:{{media_id}}, polemic:{{polemic}}, time:{{time}}" polemic-color="{{color}}"'
+                    '<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}}"'
                     + ' 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,7 +134,14 @@
                     _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);
+			        });
                 _annotation.on("select", function() {
                     if (_this.tooltip) {
                         _this.tooltip.show(
--- a/src/ldt/ldt/static/ldt/metadataplayer/Segments.js	Wed Feb 27 00:13:08 2013 +0100
+++ b/src/ldt/ldt/static/ldt/metadataplayer/Segments.js	Wed Feb 27 19:18:04 2013 +0100
@@ -22,7 +22,7 @@
     + '<div class="Ldt-Segments-Tooltip"></div>';
 
 IriSP.Widgets.Segments.prototype.annotationTemplate =
-    '<div class="Ldt-Segments-Segment Ldt-TraceMe" trace-info="segment-id:{{id}}, media-id:{{media_id}}, from:{{from}}, to:{{to}}" segment-text="{{text}}"'
+    '<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}}"'
     + '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,6 +98,14 @@
             .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);
+	        })
             .appendTo(list_$)
         _annotation.on("select", function() {
             _this.$segments.each(function() {
--- a/src/ldt/ldt/static/ldt/metadataplayer/Social.js	Wed Feb 27 00:13:08 2013 +0100
+++ b/src/ldt/ldt/static/ldt/metadataplayer/Social.js	Wed Feb 27 19:18:04 2013 +0100
@@ -18,7 +18,7 @@
 }
 
 IriSP.Widgets.Social.prototype.template =
-    '<span class="Ldt-Social">{{#show_url}}<div class="Ldt-Social-Url-Container"><a href="#" target="_blank" class="Ldt-Social-Square Ldt-Social-Url Ldt-TraceMe" title="{{l10n.share_link}}">'
+    '<span class="Ldt-Social">{{#show_url}}<div class="Ldt-Social-Url-Container"><a href="#" draggable="true" target="_blank" class="Ldt-Social-Square Ldt-Social-Url Ldt-TraceMe" title="{{l10n.share_link}}">'
     + '</a><div class="Ldt-Social-UrlPop"><input class="Ldt-Social-Input"/><div class="Ldt-Social-CopyBtn">{{l10n.copy}}</div></div></div>{{/show_url}}'
     + '{{#show_fb}}<a href="#" target="_blank" class="Ldt-Social-Fb Ldt-Social-Ext Ldt-TraceMe" title="{{l10n.share_on}} Facebook"></a>{{/show_fb}}'
     + '{{#show_twitter}}<a href="#" target="_blank" class="Ldt-Social-Twitter Ldt-Social-Ext Ldt-TraceMe" title="{{l10n.share_on}} Twitter"></a>{{/show_twitter}}'
@@ -48,6 +48,9 @@
     this.$.find(".Ldt-Social-Url").click(function() {
         _this.toggleCopy();
         return false;
+    }).on("dragstart", function(e) {
+    	e.originalEvent.dataTransfer.setData("text/x-iri-title",_this.text);
+    	e.originalEvent.dataTransfer.setData("text/x-iri-uri",_this.url);
     });
     this.$.find(".Ldt-Social-Input").focus(function() {
         this.select();