Release 0.249: banner edit fixes and thumbnail popup

admin/templates/banners/banner-edit.php

@@ -85,7 +85,7 @@ ob_start();
                                       'id'           => 'src_' . $lg['id'],
                                       'value'        => $this -> banner['languages'][ $lg['id'] ]['src'],
                                       'icon_content' => 'przeglądaj',
-                                      'icon_js'      => "window.open ( 'http://" . $_SERVER['SERVER_NAME'] . "/libraries/filemanager-9.14.2/dialog.php?type=1&popup=1&field_id=src_" . $lg['id'] . "&akey=" . $rfmAkeyJS . "', 'mywindow', 'location=1,status=1,scrollbars=1, width=1100,height=700');"
+                                      'icon_js'      => "window.open ( '/libraries/filemanager-9.14.2/dialog.php?type=1&popup=1&field_id=src_" . $lg['id'] . "&akey=" . $rfmAkeyJS . "', 'mywindow', 'location=1,status=1,scrollbars=1, width=1100,height=700');"
                               )
                 );
                 ?>
@@ -182,4 +182,4 @@ echo $grid -> draw();
 
   });
 </script>
-<script>CKEDITOR.dtd.$removeEmpty['span'] = false;</script>
+<script>CKEDITOR.dtd.$removeEmpty['span'] = false;</script>

admin/templates/banners/banners-list.php

@@ -1,5 +1,105 @@
 <?= \Tpl::view('components/table-list', ['list' => $this->viewModel]); ?>
 
+<style type="text/css">
+  .banner-thumb-wrap {
+    display: inline-block;
+  }
+
+  .banner-thumb-image {
+    width: 72px;
+    height: 42px;
+    object-fit: cover;
+    border-radius: 4px;
+    cursor: zoom-in;
+  }
+
+  .banner-thumb-popup {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: min(70vw, 760px);
+    max-height: 80vh;
+    padding: 6px;
+    border-radius: 6px;
+    background: #fff;
+    box-shadow: 0 14px 30px rgba(0, 0, 0, .35);
+    z-index: 3000;
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
+    transition: opacity .1s ease;
+  }
+
+  .banner-thumb-popup.is-visible {
+    opacity: 1;
+    visibility: visible;
+  }
+
+  .banner-thumb-popup img {
+    display: block;
+    width: 100%;
+    max-height: calc(80vh - 12px);
+    object-fit: contain;
+    border-radius: 4px;
+  }
+</style>
+
+<script type="text/javascript">
+  (function($) {
+    if (!$) {
+      return;
+    }
+
+    var $popup = $('<div class="banner-thumb-popup" aria-hidden="true"><img src="" alt=""></div>');
+    var $popupImage = $popup.find('img');
+    $('body').append($popup);
+
+    function positionPopup(event) {
+      var offset = 18;
+      var viewportWidth = $(window).width();
+      var viewportHeight = $(window).height();
+      var popupWidth = $popup.outerWidth();
+      var popupHeight = $popup.outerHeight();
+      var left = (event.clientX || 0) + offset;
+      var top = (event.clientY || 0) + offset;
+
+      if (left + popupWidth + 12 > viewportWidth) {
+        left = Math.max(12, (event.clientX || 0) - popupWidth - offset);
+      }
+
+      if (top + popupHeight + 12 > viewportHeight) {
+        top = Math.max(12, viewportHeight - popupHeight - 12);
+      }
+
+      $popup.css({ left: left + 'px', top: top + 'px' });
+    }
+
+    $(document).off('.bannerThumbPopup');
+
+    $(document).on('mouseenter.bannerThumbPopup', '.js-banner-thumb-preview', function(event) {
+      var src = $(this).data('previewSrc');
+      if (!src) {
+        return;
+      }
+
+      $popupImage.attr('src', String(src));
+      $popup.addClass('is-visible');
+      positionPopup(event);
+    });
+
+    $(document).on('mousemove.bannerThumbPopup', '.js-banner-thumb-preview', function(event) {
+      if ($popup.hasClass('is-visible')) {
+        positionPopup(event);
+      }
+    });
+
+    $(document).on('mouseleave.bannerThumbPopup', '.js-banner-thumb-preview', function() {
+      $popup.removeClass('is-visible');
+      $popupImage.attr('src', '');
+    });
+  })(window.jQuery);
+</script>
+
 <?php if (!empty($this->viewModel->customScriptView)): ?>
   <?= \Tpl::view($this->viewModel->customScriptView, ['list' => $this->viewModel]); ?>
 <?php endif; ?>