PHRAS-965 - fix preview tooltip positionning in answers grid

resources/www/common/js/jquery.tooltip.js

@@ -244,258 +244,230 @@
         if (settings($this).outside) {
             var width = 'auto';
             var height = 'auto';
-            var ratio = 1;
+            var tooltipId = settings($.tooltip.current).id;
-            var resizeImgTips = resizeVideoTips = false;
-            var $imgTips = $('#' + settings($.tooltip.current).id + ' .imgTips');
-            var $videoTips = $('#' + settings($.tooltip.current).id + ' .videoTips');
 
-            if ($imgTips[0] && $('#' + settings($.tooltip.current).id + ' .noToolTipResize').length === 0) {
+
-                resizeImgTips = true;
+            var $audioTips = $('#' + tooltipId + ' .audioTips');
-                width = parseInt($imgTips[0].style.width);
+            var $imgTips = $('#' + tooltipId + ' .imgTips');
-                height = parseInt($imgTips[0].style.height);
+            var $videoTips = $('#' + tooltipId + ' .videoTips');
-                ratio = width / height;
+            var $documentTips = $('#' + tooltipId + ' .documentTips');
-                $imgTips.css({top: '0px', left: '0px'});
+            var shouldResize = $('#' + tooltipId + ' .noToolTipResize').length === 0 ? true : false;
+
+            // get image or video original dimensions
+            var recordWidth = 240;
+            var recordHeight = 240;
+            var tooltipVerticalOffset = 75;
+            var tooltipHorizontalOffset = 35;
+            var maxWidthAllowed = 1024;
+            var maxHeightAllowed = 768;
+            var tooltipWidth = 0;
+            var tooltipHeight = 0;
+
+            var $selector = $imgTips;
+
+            if ($imgTips[0] && shouldResize) {
+                recordWidth = parseInt($imgTips[0].style.width);
+                recordHeight = parseInt($imgTips[0].style.height);
+                $imgTips.css({display: 'block', margin: '0 auto'});
             }
 
-            if ($videoTips[0] && $('#' + settings($.tooltip.current).id + ' .noToolTipResize').length === 0) {
+            if ($documentTips[0] && shouldResize) {
-                resizeVideoTips = true;
+                recordWidth = $documentTips.data('original-width');
-                width = parseInt($videoTips.attr('width'));
+                recordHeight = $documentTips.data('original-height');
-                height = parseInt($videoTips.attr('height'));
+                $documentTips.css({display: 'block', margin: '0 auto'});
-                ratio = width / height;
+                $selector = $documentTips;
-                $videoTips.css({top: '0px', left: '0px'});
             }
 
-            var v = viewport(),
+            if ($audioTips[0] && shouldResize) {
-                h = helper.parent;
+                $audioTips.css({display: 'block', margin: '0 auto'});
-            helper.parent.css({
+                $selector = $audioTips;
-                width: width,
-                top: 0,
-                left: 0,
-                visibility: 'hidden',
-                //			visibility:'visible',
-                display: 'block',
-                height: height
-            });
-
-            $(h).width($(h).width());
-            width = ($(h).width() > (v.x - 40)) ? (v.x - 40) : $(h).width();
-            height = ($(h).height() > (v.y - 40)) ? (v.y - 40) : $(h).height();
-
-//      $('#' + settings($.tooltip.current).id + ' .thumb_wrapper').width('auto').height('auto');
-
-            if ($('#' + settings($.tooltip.current).id + ' .audioTips').length > 0) {
-                height = height < 26 ? 26 : height;
             }
 
-            $(h).css({
+            if ($videoTips[0] && shouldResize) {
-                width: width,
+                recordWidth = $videoTips.data('original-width');
-                height: height
+                recordHeight = $videoTips.data('original-height');
-            });
+                // limit video to maxWidth:
+                /*if( recordWidth > 720 ) {
+                 var limitRatio = recordWidth/recordHeight;
+                 recordWidth = 720;
+                 recordHeight = recordWidth / limitRatio;
+                 }*/
+                $videoTips.css({display: 'block', margin: '0 auto'});
+                $selector = $videoTips;
+            }
+
+            tooltipWidth = recordWidth + tooltipHorizontalOffset;
+            tooltipHeight = recordHeight + tooltipVerticalOffset;
+
+            var rescale = function (containerWidth, containerHeight, resourceWidth, resourceHeight, maxWidthAllowed, maxHeightAllowed, $selector) {
+                var resourceRatio = resourceHeight / resourceWidth;
+                var resizeW = resourceWidth;
+                var resizeH = resourceHeight;
+
+                if (resourceWidth > resourceHeight) {
+                    // if width still too large:
+                    if (resizeW > containerWidth) {
+                        resizeW = containerWidth;
+                        resizeH = containerWidth * resourceRatio;
+                    }
+
+                    if (resizeH > containerHeight) {
+                        resizeW = containerHeight / resourceRatio;
+                        resizeH = containerHeight;
+                    }
+                } else {
+                    if (resizeH > containerHeight) {
+                        resizeW = containerHeight / resourceRatio;
+                        resizeH = containerHeight;
+                    }
+                }
+
+                if (maxWidthAllowed !== undefined && maxHeightAllowed !== undefined) {
+                    if (resizeW > maxWidthAllowed || resizeH > maxHeightAllowed) {
+                        return rescale(maxWidthAllowed, maxHeightAllowed, resourceWidth, resourceHeight)
+                    }
+                }
+
+                if( $selector !== undefined) {
+                    $selector.css({width: Math.floor(resizeW), height: Math.floor(resizeH)});
+                }
+
+                return {width: Math.floor(resizeW), height: Math.floor(resizeH)};
+            };
+
 
             if (event) {
+
+                var viewportDimensions = viewport();
+                var left = 0;
+                var top = 0;
+                var topOffset = 0;
+                var leftOffset = 0;
+                var rightOffset = 0;
+                var bottomOffset = -15;
                 var $origEventTarget = $(event.target);
 
                 // since event target can have different positionning, try to get common closest parent:
-                var $eventTarget = $origEventTarget.closest('.diapo'),
+                var $eventTarget = $origEventTarget.closest('.diapo');
-                    topOffset = 20,
-                    leftOffset = 20;
 
-                if( $eventTarget.length > 0 ) {
+                if ($eventTarget.length > 0) {
                     // change offsets:
-                    topOffset = -8;
+                    topOffset = 14;
-                    leftOffset = -8;
+                    leftOffset = 1;
+                    rightOffset = 2;
                 } else {
                     // fallback on original target if nothing found:
                     $eventTarget = $origEventTarget;
                 }
 
+                var recordPosition = $eventTarget.offset();
+                var recordWidthOffset = 148; // remove size
+                var recordHeightOffset = 195;
+                var totalViewportWidth = viewportDimensions.x;
+                var totalViewportHeight = viewportDimensions.y;
 
+                var leftAvailableSpace = recordPosition.left + leftOffset;
+                var topAvailableSpace = recordPosition.top + topOffset;
+                var rightAvailableSpace = (totalViewportWidth - leftAvailableSpace - recordWidthOffset) - rightOffset;
+                var bottomAvailableSpace = (totalViewportHeight - topAvailableSpace - recordHeightOffset);
 
-                var vert, vertS, hor, horS, top, left, ratioH, ratioV;
+                var shouldBeOnTop = false;
-                //			ratio = $(h).width()/$(h).height();
+                var availableHeight = bottomAvailableSpace;
-                var ratioSurfaceH;
+                var tooltipSize = {width: tooltipWidth, height: tooltipHeight};
-                var ratioSurfaceV, wiH, wiV, heH, heV;
+                var position = 'top';
-                var ratioImage = $(h).width() / $(h).height();
 
-                //position de l'image
+                if (topAvailableSpace > bottomAvailableSpace) {
-
+                    shouldBeOnTop = true;
-                if ($eventTarget.offset().left > (v.x - $eventTarget.offset().left - $eventTarget.width())) {
+                    availableHeight = topAvailableSpace;
-                    hor = 'gauche';
-                    wiH = $eventTarget.offset().left;
-
-                    horS = wiH * v.y;
-                    ratioSurfaceH = wiH / v.y;
-                }
-                else {
-                    hor = 'droite';
-                    wiH = (v.x - $eventTarget.offset().left - $eventTarget.width());
-                    horS = wiH * v.y;
-                    ratioSurfaceH = wiH / v.y;
-
-                }
-                if ($eventTarget.offset().top > (v.y - $eventTarget.offset().top - $eventTarget.height())) {
-                    vert = 'haut';
-                    heV = $eventTarget.offset().top;
-                    vertS = heV * v.x;
-                    ratioSurfaceV = v.x / heV;
-                }
-                else {
-                    vert = 'bas';
-                    heV = (v.y - $eventTarget.offset().top - $eventTarget.height());
-                    vertS = heV * v.x;
-                    ratioSurfaceV = v.x / heV;
                 }
 
-
+                if (leftAvailableSpace > rightAvailableSpace) {
-                //correction par ratio
+                    position = 'left';
-                if (resizeImgTips && $imgTips.get(0)) {
+                } else {
-
+                    position = 'right';
-                    if (ratioSurfaceH > ratioImage) {
-                        horS = v.y * ratioImage * v.y;
-                    }
-                    else {
-                        horS = wiH * wiH / ratioImage;
-                    }
-                    if (ratioSurfaceV > ratioImage) {
-                        vertS = heV * ratioImage * heV;
-                    }
-                    else {
-                        vertS = v.x * v.x / ratioImage;
-                    }
                 }
 
-                var zH;
+                if (shouldBeOnTop && availableHeight > leftAvailableSpace && availableHeight > rightAvailableSpace) {
-
+                    position = 'top';
-                if ((Math.abs(ratioSurfaceV - ratioImage) < Math.abs(ratioSurfaceH - ratioImage))) {
+                }
-                    var zL = event.pageX;
+                else if (bottomAvailableSpace > leftAvailableSpace && bottomAvailableSpace > rightAvailableSpace) {
-                    var zW = $(h).width();
+                    position = 'bottom';
-                    zH = $(h).height();
+                }
-                    var ETOT = $eventTarget.offset().top;
+                switch (position) {
-                    var ETH = $eventTarget.height();
+                    case 'top':
-                    left = (zL - zW / 2) < 20 ? 20 : (((zL + zW / 2 + 20) > v.x) ? (v.x - zW - 20) : (zL - zW / 2));
+                        tooltipSize = rescale(totalViewportWidth, topAvailableSpace, tooltipWidth, tooltipHeight, maxWidthAllowed, maxHeightAllowed);
-
+                        tooltipWidth = tooltipSize.width;
-                    switch (vert) {
+                        tooltipHeight = tooltipSize.height;
-                        case 'haut':
+                        left = leftAvailableSpace - (tooltipSize.width / 2) + (recordWidthOffset / 2);
-                            height = (zH > (ETOT - 40)) ? (ETOT - 40) : zH;
+                        top = topAvailableSpace - tooltipSize.height;
-                            top = ETOT - height - topOffset;
                         break;
-                        case 'bas':
+                    case 'bottom':
-                            height = ((v.y - ETH - ETOT - 40) > zH) ? zH : (v.y - ETH - ETOT - 40);
+                        tooltipSize = rescale(totalViewportWidth, bottomAvailableSpace, tooltipWidth, tooltipHeight, maxWidthAllowed, maxHeightAllowed);
-                            top = ETOT + ETH + topOffset;
+                        tooltipWidth = tooltipSize.width;
+                        tooltipHeight = tooltipSize.height;
+                        left = leftAvailableSpace - (tooltipSize.width / 2) + (recordWidthOffset / 2);
+                        top = totalViewportHeight - bottomAvailableSpace + bottomOffset;
                         break;
-                        default:
+                    case 'left':
-                            break;
+                        tooltipSize = rescale(leftAvailableSpace, totalViewportHeight, tooltipWidth, tooltipHeight, maxWidthAllowed, maxHeightAllowed);
-                    }
+
-                }
+                        tooltipWidth = tooltipSize.width;
-                else {
+                        tooltipHeight = tooltipSize.height;
-                    //				height = ($(h).height()>(v.y-40))?(v.y-40):$(h).height();
+                        left = leftAvailableSpace - tooltipSize.width;
-                    zH = $(h).height();
-                    var zT = event.pageY;
-                    var EOTL = $eventTarget.offset().left;
-                    var ETW = $eventTarget.width();
-                    var zw = $(h).width();
-                    top = (zT - zH / 2) < 20 ? 20 : (((zT + zH / 2 + 20) > v.y) ? (v.y - zH - 20) : (zT - zH / 2));
-                    switch (hor) {
-                        case 'gauche':
-                            width = (zw > (EOTL - 40)) ? (EOTL - 40) : zw;
-                            left = EOTL - width - leftOffset;
-                            break;
-                        case 'droite':
-                            width = ((v.x - ETW - EOTL - 40) > zw) ? zw : (v.x - ETW - EOTL - 40);
-                            left = EOTL + ETW + leftOffset;
-                            break;
-                        default:
                         break;
+                    case 'right':
+                        tooltipSize = rescale(rightAvailableSpace, totalViewportHeight, tooltipWidth, tooltipHeight, maxWidthAllowed, maxHeightAllowed);
+                        tooltipWidth = tooltipSize.width;
+                        tooltipHeight = tooltipSize.height;
+                        left = leftAvailableSpace + recordWidthOffset + rightOffset;
+                        break;
+
+                }
+
+                // try to vertical center, relative to source:
+                if (position === 'left' || position === 'right') {
+                    var verticalSpace = topAvailableSpace + (recordHeightOffset / 2) + (tooltipHeight / 2)
+                    if (verticalSpace < totalViewportHeight) {
+                        // tooltip can be aligned vertically
+                        top = topAvailableSpace + (recordHeightOffset / 2) - (tooltipHeight / 2);
+                    } else {
+                        top = totalViewportHeight - tooltipHeight;
+                    }
+                    top = top < 0 ? 0 : top;
+                }
+
+                // try to horizontal center, relative to source:
+                if (position === 'top' || position === 'bottom') {
+                    // push to left
+                    // push to right
+                    var takeLeftSpace = (tooltipSize.width / 2) + leftAvailableSpace;
+                    var takeRightSpace = (tooltipSize.width / 2) + rightAvailableSpace;
+                    // if centering on top or bottom and tooltip is offcanvas
+                    if (takeLeftSpace > totalViewportWidth || takeRightSpace > totalViewportWidth) {
+
+                        if (leftAvailableSpace > (totalViewportWidth / 2)) {
+                            // push at left
+                            left = 0;
+                        } else {
+
+                            // push at right
+                            left = totalViewportWidth - tooltipSize.width;
+                        }
+                    } else {
+                        // center
+                        left = leftAvailableSpace - (tooltipSize.width / 2) + (recordWidthOffset / 2);
                     }
                 }
 
+                rescale(tooltipWidth - tooltipHorizontalOffset, tooltipHeight - tooltipVerticalOffset, recordWidth, recordHeight, maxWidthAllowed, maxHeightAllowed, $selector);
+
                 helper.parent.css({
-                    width: width,
+                    width: Math.round(tooltipWidth),
-                    height: height,
+                    height: Math.round(tooltipHeight),
                     left: left,
                     top: top
                 });
-
-                //si ya une image on re-ajuste au ratio
-                if (resizeImgTips && $imgTips.get(0)) {
-                    if (width == 'auto')
-                        width = $imgTips.get(0).width();
-                    if (height == 'auto')
-                        height = $imgTips.get(0).height();
-                    if (ratio > 1) {
-                        var nh = width / ratio;
-                        if (nh > height) {
-                            width = ratio * height;
-                            nh = width / ratio;
             }
-                        height = nh;
-                    }
-                    else {
-                        var nw = ratio * height;
-                        if (nw > width) {
-                            height = width / ratio;
-                            nw = height * ratio;
-                        }
-                        width = nw;
-                    }
-                }
-                else if (resizeVideoTips && $videoTips.get(0)) {
-                    width = $videoTips.data('original-width');
-                    height = $videoTips.data('original-height');
-                    // limit video to maxWidth:
-                    if( width > 720 ) {
-                        var limitRatio = width/height;
-                        width = 720;
-                        height = width / limitRatio;
-                    }
-                    console.log('video first scaled to ', width, height)
-                }
-                else {
-                    if (vertS < horS) {
-                        height = 'auto';
-                    }
-                }
-
-                if (resizeImgTips) {
-                    var factor = Math.min((width - 45) / width, (height - 75) / height);
-                    if (factor > 1) {
-                        factor = 1;
-                    }
-                    var imgWidth = Math.round(width * factor);
-                    var imgHeight = Math.round(height * factor);
-
-                    width = imgWidth + 45;
-                    height = imgHeight + 85;
-
-                    $imgTips.css({
-                        maxWidth: imgWidth,
-                        maxHeight: imgHeight
-                    });
-                }
-
-                if (resizeVideoTips) {
-                    var factor = Math.min((width - 45) / width, (height - 75) / height);
-                    var imgWidth = Math.round(width * factor);
-                    var imgHeight = Math.round(height * factor);
-
-                    width = imgWidth + 45;
-                    height = imgHeight + 75;
-                    console.log('video scaled to ', width, height)
-                    $videoTips.css({
-                        width: Math.round(imgWidth),
-                        height: Math.round(imgHeight)
-                    });
-                }
-
-                helper.parent.css({
-                    width: Math.round(width),
-                    height: Math.round(height),
-                    left: left,
-                    top: top
-                });
-
-            }
-
         }
         handle.apply($this, arguments);
         return;

resources/www/prod/styles/main.scss

@@ -26,6 +26,8 @@
 .caption-tooltip-container .popover-inner .popover-content {
   overflow: auto;
   overflow-x: hidden;
+  width: 100%;
+  box-sizing: border-box;
 }
 
 .popover-inner .popover-content dl.dl-horizontal  {

templates/web/common/thumbnail.html.twig

@@ -10,27 +10,31 @@
     {% endif %}
 
     {% if record_type == 'VIDEO_MP4' or record_type == 'VIDEO_FLV' %}
-        <div  class="videoTips" data-original-width="{{original_w}}" data-original-height="{{original_h}}">
+        <div  class="videoTips" data-original-width="{{original_w}}" data-original-height="{{original_h}}" data-kind="video">
 
         <iframe width="100%" height="100%"
                 src="{{ url('alchemy_embed_view', {url: url|trim, autoplay: autoplay|default('false') }) }}"
                 frameborder="0" allowfullscreen></iframe>
         </div>
     {% elseif record_type == 'FLEXPAPER' %}
+        <div class="documentTips" data-original-width="{{original_w}}" data-original-height="{{original_h}}" data-kind="document">
         <iframe width="100%" height="100%"
                 src="{{ url('alchemy_embed_view', {url: url|trim, autoplay: autoplay|default('false') }) }}"
                 frameborder="0" allowfullscreen></iframe>
+        </div>
     {% elseif record_type == 'AUDIO_MP3' %}
+        <div class="audioTips" data-original-width="{{original_w}}" data-original-height="{{original_h}}" data-kind="audio">
         <iframe width="100%" height="100%"
                 src="{{ url('alchemy_embed_view', {url: url|trim, autoplay: autoplay|default('false') }) }}"
                 frameborder="0" allowfullscreen></iframe>
+        </div>
     {% else %}
         {% set fit_size = fitIn(
         {"width":original_w, "height":original_h},
         {"width":box_w, "height":box_h}
         )%}
 
-        <img class="{% if lazyload %}lazyload{% endif %} record record_image imgTips zoomable thumb" oncontextMenu="return(false);"
+        <img class="{% if lazyload %}lazyload{% endif %} record record_image imgTips zoomable thumb" data-kind="image" oncontextMenu="return(false);"
              style="width:{{fit_size.width}}px;height:{{fit_size.height}}px;top:{{fit_size.top}}px;"
              src="{% if lazyload %}/assets/common/images/grey.gif{% else %}{{ url|trim }}{% endif %}" data-original="{{ url|trim }}" ondragstart="return false;">
         <input type="hidden" name="width" value="{{original_w}}"/>