max width and height in slideshow
authorcavaliet
Fri, 07 Jun 2013 17:37:13 +0200
changeset 100 2979ff5a8c25
parent 99 b701cc8df736
child 103 1c163781996b
max width and height in slideshow
src/metadatacomposer/static/metadatacomposer/js/player.js
--- a/src/metadatacomposer/static/metadatacomposer/js/player.js	Fri Jun 07 17:00:48 2013 +0200
+++ b/src/metadatacomposer/static/metadatacomposer/js/player.js	Fri Jun 07 17:37:13 2013 +0200
@@ -1,6 +1,8 @@
+IriSP.player = function(url) {
+
 var myDir = new IriSP.Model.Directory(),
     myProject = myDir.remoteSource({
-            url: project_url,
+            url: url,
             serializer: IriSP.serializers.ldt
         });
 
@@ -51,10 +53,10 @@
     $(".tags-list").html(tags.map(tagTemplate).join(""));
     
     $(".tags-title").mouseenter(function() {
-        $(".tags-list").slideDown();
+        $(".tags-list").stop().slideDown();
     });
     $(".tags").mouseleave(function() {
-        $(".tags-list").slideUp();
+        $(".tags-list").stop().slideUp();
     });
     
     $("body").click(function() {
@@ -270,15 +272,10 @@
         annotationDiv.find(".annotation-title").text(annotationinfo.annotation.title);
         
                 
-        var positionDiv = function(anim) {
-            var css = {
+        var positionDiv = function() {
+            annotationDiv.css({
                 top: Math.floor(($(".main-video").height() - annotationDiv.height())/2)+"px"
-            };
-            if (anim) {
-                annotationDiv.animate(css, 800);
-            } else {
-                annotationDiv.css(css);
-            }
+            });
         }
         
         switch (annotationinfo.type) {
@@ -291,36 +288,30 @@
                     loaded = false,
                     slides = annotationinfo.annotation.content.images;
                 
-                var resizeImage = function() {
-                    var imgel = annotationDiv.find(".slideshow-image");
-                    imgel.css("margin-top","");
-                    var w = imgel.width(),
-                        h = imgel.height();
-                    annotationDiv.find(".annotation-main").css("height","");
-                    annotationDiv.find(".slideshow-description").css("margin-left",w);
-                    var h2 = annotationDiv.find(".annotation-main").height();
-                    if (h < h2) {
-                        imgel.css("margin-top",Math.floor((h2-h)/2)+"px");
-                    }
-                    if (+imgel.css("opacity") !== 1) {
-                        imgel.fadeTo(400, 1);
-                    }
-                }
-                
                 var showCurrentImage = function() {
-                    var slide = slides[currentslide];
-                    annotationDiv.find(".slideshow-image").attr({
-                        src: slide.image.src,
+                    $(".slideshow-image").remove();
+                    var slide = slides[currentslide],
+                        srcimg = slide.image,
+                        imgel = $("<img>");
+                    imgel.addClass("slideshow-image");
+                    imgel.attr({
+                        src: srcimg.src,
                         title: slide.title,
                         alt: slide.title
                     });
+                    var wcont = 650, hcont = 452, wsrc = srcimg.width, hsrc = srcimg.height, scale = Math.min(1, Math.min(wcont/wsrc, hcont/hsrc)), h = hsrc * scale;
+                    imgel.css({
+                        opacity: 0,
+                        "margin-top": (h < hcont ? Math.floor((hcont-h)/2)+"px": 0)
+                    });
+                    annotationDiv.find(".slideshow-frame").prepend(imgel);
                     annotationDiv.find(".slideshow-title").text(slide.title);
                     annotationDiv.find(".slideshow-description").html(
                         slide.description.split(/\n/gm).map(function(l) {
                             return '<p>' + _.escape(l) + '</p>';
                         }).join("")
                     );
-                    resizeImage();
+                    imgel.fadeTo(400, 1);
                 }
                 
                 var nextImage = function() {
@@ -346,7 +337,7 @@
                         return;
                     }
                     loaded = slides.reduce(function(mem, slide) {
-                        return (mem && !!slide.image && !!slide.image.width);
+                        return (mem && !!slide.image && !!slide.image.height);
                     }, true);
                     if (loaded) {
                         showCurrentImage();
@@ -359,7 +350,7 @@
                 slides.forEach(function(slide) {
                     slide.image = new Image();
                     slide.image.onload = checkloaded;
-                    slide.image.src = slide.url;
+                    slide.image.src = slide.url + "?maxwidth=650&maxheight=452";
                 });
                 
                 checkloaded();
@@ -436,7 +427,7 @@
                         },
                         success: function(data) {
                             annotationDiv.find(".media-frame").html(data.html);
-                            positionDiv(true);
+                            positionDiv();
                         }
                     });
                     return;
@@ -454,7 +445,7 @@
                         },
                         success: function(data) {
                             annotationDiv.find(".media-frame").html(data.html);
-                            positionDiv(true);
+                            positionDiv();
                         }
                     });
                     return;
@@ -474,7 +465,7 @@
                         },
                         success: function(data) {
                             annotationDiv.find(".media-frame").html(data.html);
-                            positionDiv(true);
+                            positionDiv();
                         }
                     });
                     return;
@@ -498,7 +489,7 @@
                 }));
                 
                 media.on("loadedmetadata", function() {
-                    positionDiv(true);
+                    positionDiv();
                 });
                 
                 annotationDiv.find(".media-frame").html(media);
@@ -513,6 +504,26 @@
                 switch (annotationinfo.annotation.content.markup) {
                     case "html":
                         annotationDiv.find(".text-contents").html(text);
+/*
+                        var ps = annotationDiv.find(".text-contents>p"),
+                            groups = [],
+                            last, group;
+                        ps.each(function(i, e) {
+                            if (last && group && last.nextElementSibling === e) {
+                                group.contents.push(e);
+                            } else {
+                                group = {
+                                    master: e,
+                                    contents: [e.cloneNode(true)]
+                                }
+                                groups.push(group);
+                            }
+                            last = e;
+                        });
+                        groups.forEach(function(g) {
+                            $(g.master).replaceWith($('<div class="column-group">').append(g.contents));
+                        });
+*/
                     break;
                     default:
                         annotationDiv.find(".text-contents").html(
@@ -562,6 +573,7 @@
             myMedia.play();
         }
         return false;
-    }
-   
+    }   
 });
+
+};
\ No newline at end of file