Add animation at modal resizing

hfittipaldi · Oct 27, 2017 · 86767fe · 86767fe
1 parent 979c25c
commit 86767fe
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 24 deletions.
diff --git a/css/b3_gallery.css b/css/b3_gallery.css
@@ -10,42 +10,50 @@
     padding: 20px 15px;
     text-shadow: 0 1px 2px rgba(0,0,0,.2);
 }
-.b3Gallery .caption {
-    padding-right: 100px;
-    text-align: left;
-}
 @media (min-width: 768px) {
     .b3Gallery .carousel-caption {
         color: #313131;
         background-color: rgba(255,255,255,.7);
     }
 }
+.b3Gallery .caption {
+    padding-right: 100px;
+    text-align: left;
+}
+.b3Gallery .modal-body {
+    background: url('../images/load.gif') center center no-repeat;
+}
 .b3Gallery .carousel-inner .item {
     margin: 0;
     max-width: 100%;
 }
 .b3Gallery .carousel-fade .carousel-control {
     z-index: 2;
 }
-.b3Gallery .carousel-fade .carousel-inner .item {
-    -webkit-transition-property: opacity;
-            transition-property: opacity;
-}
 .b3Gallery .carousel-fade .carousel-inner .item,
 .b3Gallery .carousel-fade .carousel-inner .active.left,
 .b3Gallery .carousel-fade .carousel-inner .active.right {
     opacity: 0;
+    visibility: hidden;
+    -webkit-transition-property: visibility, opacity;
+            transition-property: visibility, opacity;
+    -webkit-transition-delay: 1000ms;
+            transition-delay: 1000ms;
 }
 .b3Gallery .carousel-fade .carousel-inner .active,
 .b3Gallery .carousel-fade .carousel-inner .next.left,
 .b3Gallery .carousel-fade .carousel-inner .prev.right {
     opacity: 1;
+    visibility: visible;
 }
 .b3Gallery .carousel-fade .carousel-inner .next,
 .b3Gallery .carousel-fade .carousel-inner .prev,
 .b3Gallery .carousel-fade .carousel-inner .active.left,
 .b3Gallery .carousel-fade .carousel-inner .active.right {
     left: 0;
-    -webkit-transform: translate3d(0, 0, 0);
-            transform: translate3d(0, 0, 0);
+    -webkit-transform: translate(0, 0);
+            transform: translate(0, 0);
+}
+.b3Gallery .carousel-fade .carousel-inner .item img {
+    margin: auto;
 }
diff --git a/images/index.html b/images/index.html
@@ -0,0 +1 @@
+<!doctype html><html></html>
diff --git a/images/load.gif b/images/load.gif
diff --git a/js/b3_gallery.js b/js/b3_gallery.js
@@ -1,5 +1,5 @@
 /*jslint browser: true*/
-/*global $, jQuery*/
+/*global jQuery, window, document*/
 function viewport() {
     'use strict';
     var e = window,
@@ -11,26 +11,40 @@ function viewport() {
     return { width: e[a + 'Width'], height: e[a + 'Height'] };
 }
 
-function resizeModal(id, tam) {
+function resizeModal(id, tam, first) {
     'use strict';
-    var win_size = viewport(),
-        view = win_size.width,
-        size = tam + 32 + 'px';
+    var win_size   = viewport(),
+        view       = win_size.width,
+        modal      = jQuery('#galleryModal-' + id),
+        modal_body = modal.find('.modal-body'),
+        pad_top    = parseInt(modal_body.css('padding-top'), 0),
+        pad_right  = parseInt(modal_body.css('padding-right'), 0),
+        pad_bottom = parseInt(modal_body.css('padding-bottom'), 0),
+        pad_left   = parseInt(modal_body.css('padding-left'), 0),
+        nWidth     = tam[0] + pad_left + pad_right + 2 + 'px',
+        nHeight    = tam[1] + pad_top + pad_bottom + 'px';
+
     if (view > 767) {
-        jQuery('#galleryModal-' + id).find('.modal-dialog').css({
-            width: size
-        });
+        if (first === true) {
+            modal.find('.modal-dialog').css({width: nWidth});
+            modal_body.css({height: nHeight});
+        } else {
+            modal.find('.modal-dialog').animate({width: nWidth}, 400);
+            modal_body.animate({height: nHeight}, 400);
+        }
     }
 }
 
-function getItemIndex(id, imgs_width, subtitles) {
+function getItemIndex(index, id, imgs_dimensions, subtitles) {
     'use strict';
     var carousel = jQuery('#carousel-' + id);
-    resizeModal(id, imgs_width[0]);
+
+    resizeModal(id, imgs_dimensions[index], true);
+
     carousel.on('slid.bs.carousel', function () {
         var index = jQuery(carousel).find('figure.active').index(),
             currentIndex = index + 1,
-            tam = imgs_width[index];
+            tam = imgs_dimensions[index];
 
         jQuery('#counter-' + id).text(currentIndex);
         jQuery('#caption-' + id).text(subtitles[index]);

diff --git a/mod_b3_gallery.xml b/mod_b3_gallery.xml
@@ -6,7 +6,7 @@
     <copyright>Copyright (C) 2017 Hugo Fittipaldi. All rights reserved.</copyright>
     <license>GNU General Public License version 2 or later</license>
     <authorEmail>[email protected]</authorEmail>
-    <version>2.0.0-rc</version>
+    <version>2.0.0</version>
     <description>Place a Bootstrap 3 gallery in a module position.</description>
     <scriptfile>script.php</scriptfile>
 
@@ -22,6 +22,7 @@
     <media destination="mod_b3_gallery" folder="media">
         <file>index.html</file>
         <folder>css</folder>
+        <folder>images</folder>
         <folder>js</folder>
     </media>
 

diff --git a/tmpl/default.php b/tmpl/default.php
@@ -54,7 +54,7 @@
                             foreach ($gallery as $image) :
                                 $file = $image->image;
                                 list($width, $height) = getimagesize($file);
-                                $imgs_width[] = $width;
+                                $imgs_dimensions[$k] = '[' . $width . ', ' . $height . ']';
                             ?>
                             <figure class="item-<?php echo $module_id . '-' . $k;?> item<?php echo $k==0 ? ' active' : ''; ?>">
                                 <img src="<?php echo $file; ?>" alt="<?php echo $image->caption; ?>" />
@@ -96,7 +96,7 @@
 
     <script>
         jQuery('.b3Gallery-item').find('a').on('click', function() {
-            getItemIndex( <?php echo $module_id; ?>, [ <?php echo implode(', ', $imgs_width); ?> ], [ '<?php echo implode("', '", $captions); ?>' ] );
+            getItemIndex( jQuery(this).parent().attr('data-slide-to'), <?php echo $module_id; ?>, [ <?php echo implode(', ', $imgs_dimensions); ?> ], [ '<?php echo implode("', '", $captions); ?>' ] );
         });
     </script>