Complete Hover Motion Gallery

templaza · Sep 21, 2024 · 06b535a · 06b535a
1 parent dc80e19
commit 06b535a
Show file tree

Hide file tree

Showing 8 changed files with 26 additions and 23 deletions.
diff --git a/assets/vendor/hover_motion/css/base.css b/assets/vendor/hover_motion/css/base.css
@@ -1,11 +1,5 @@
 :root {
-	--color-text: #292828;
-	--color-bg: #ddd;
-	--color-link: #000;
-	--color-link-hover: #000;
-	--page-padding: 1rem;
 	--angle: -15deg;
-	--trans-content: -30vh;
 }
 
 /* Page Loader */
@@ -21,7 +15,7 @@
 	left: 0;
 	width: 100%;
 	height: 100%;
-	background: var(--color-bg);
+	background: var(--bs-body-bg);
 }
 
 .as-hover-motion-gallery.loading::after {
@@ -32,7 +26,7 @@
 	margin: -30px 0 0 -30px;
 	border-radius: 50%;
 	opacity: 0.4;
-	background: var(--color-link);
+	background: var(--bs-body-color) !important;
 	animation: loaderAnim 0.7s linear infinite alternate forwards;
 }
 
@@ -61,8 +55,6 @@
 	left: 0;
 	width: 100%;
 	height: 100%;
-	background: url(../img/noise.png), radial-gradient(circle, #f9a13275 0%, transparent 100%);
-	background-size: 250px, 100%;
 	pointer-events: none;
 }
 
@@ -95,7 +87,6 @@
 	width: 100%;
 	height: 100%;
 	overflow: hidden;
-	border-radius: 10px;
 }
 .as-item-click {
 	cursor: pointer;

diff --git a/assets/vendor/hover_motion/css/base.min.css b/assets/vendor/hover_motion/css/base.min.css
diff --git a/assets/vendor/hover_motion/img/noise.png b/assets/vendor/hover_motion/img/noise.png
diff --git a/assets/vendor/hover_motion/js/index.js b/assets/vendor/hover_motion/js/index.js
@@ -200,12 +200,8 @@
         fullview.classList.add('as-hover-motion-gallery-fullview');
         document.body.appendChild(fullview);
         // Logic to animate the middle image to full view using gsap Flip
-        // element.querySelector('.as-hover-motion-row-item-image').classList.add('as-hover-motion-row-item-img-large');
         const flipstate = Flip.getState(element);
-        // return;
         fullview.prepend(element);
-        // Get the CSS variable value for the translation
-        // const transContent = getCSSVariableValue(content, '--trans-content');
 
         // Create a GSAP timeline for the Flip animation
         const tl = gsap.timeline();
@@ -219,7 +215,7 @@
         }))
         // Scale and move
         .to(element, {
-          scale: 1.2,
+          scale: 1.1,
           duration: 0.9,
           ease: 'sine'
         }, '<');

diff --git a/assets/vendor/hover_motion/js/index.min.js b/assets/vendor/hover_motion/js/index.min.js
diff --git a/framework/elements/hover_motion_gallery/hover_motion_gallery.php b/framework/elements/hover_motion_gallery/hover_motion_gallery.php
@@ -15,6 +15,7 @@
 
 use Astroid\Framework;
 use Astroid\Helper;
+use Astroid\Helper\Style;
 use Joomla\CMS\Factory;
 
 extract($displayData);
@@ -39,6 +40,8 @@
 $rounded_size       =   $params->get('rounded_size', '3');
 $border_radius      =   $params->get('border_radius', '');
 $height             =   $params->get('height', '80vh');
+$angle              =   $params->get('angle', '-5');
+$gap                =   $params->get('gap', '1');
 if ($border_radius == 'rounded') {
     $border_radius  = ' ' . $border_radius . '-' . $rounded_size;
 } else {
@@ -62,18 +65,23 @@
     if (($index + 1) % $columns === 0 || $index + 1 === count($images)) {
         echo '</div>';
     }
-
 }
 echo '</div>';
-
-//echo '<div class="as-hover-motion-gallery-fullview d-none"><div class="as-hover-motion-close position-absolute top-0 end-0 p-4"><i class="fa-solid fa-2xl fa-xmark"></i></div></div>';
 echo '</div>';
 
 $document->loadGSAP('Flip');
 $document->loadImagesLoaded();
 $wa = Factory::getApplication()->getDocument()->getWebAssetManager();
-$wa->registerAndUseStyle('astroid.hovermotion', 'media/astroid/assets/vendor/hover_motion/css/base.css');
-$wa->registerAndUseScript('astroid.hovermotion', 'media/astroid/assets/vendor/hover_motion/js/index.js', ['relative' => true, 'version' => 'auto'], [], ['jquery']);
+$wa->registerAndUseStyle('astroid.hovermotion', 'media/astroid/assets/vendor/hover_motion/css/base.min.css');
+$wa->registerAndUseScript('astroid.hovermotion', 'media/astroid/assets/vendor/hover_motion/js/index.min.js', ['relative' => true, 'version' => 'auto'], [], ['jquery']);
 $element->style->child('.as-hover-motion-gallery')->addCss('height', $height);
 $element->style->child('.as-hover-motion-gallery-inner')->addCss('grid-template-rows', 'repeat(' . $rows . ',1fr)');
-$element->style->child('.as-hover-motion-row')->addCss('grid-template-columns', 'repeat(' . $columns . ',1fr)');
+$element->style->child('.as-hover-motion-row')->addCss('grid-template-columns', 'repeat(' . $columns . ',1fr)');
+if (!empty($angle)) {
+    $element->style->child('.as-hover-motion-gallery-inner')->addCss('--angle', $angle . 'deg');
+}
+$element->style->child('.as-hover-motion-gallery::after')->addCss('background-image', Style::getGradientValue($params->get('gallery_overlay_gradient', '')));
+if (!empty($gap)) {
+    $element->style->child('.as-hover-motion-gallery-inner')->addCss('gap', $gap . 'rem');
+    $element->style->child('.as-hover-motion-row')->addCss('gap', $gap . 'rem');
+}
diff --git a/framework/elements/hover_motion_gallery/hover_motion_gallery.xml b/framework/elements/hover_motion_gallery/hover_motion_gallery.xml
@@ -21,6 +21,9 @@
                 </field>
                 <field astroidgroup="widget_styles" name="rows" type="astroidrange" min="2" max="10" step="1" postfix="rows" default="5" label="ASTROID_WIDGET_ROWS_LABEL" description="ASTROID_WIDGET_HOVER_MOTION_GALLERY_ROWS_DESC" />
                 <field astroidgroup="widget_styles" type="astroidtext" class="form-control" label="JFIELD_MEDIA_HEIGHT_LABEL" name="height" hint="80vh"/>
+                <field astroidgroup="widget_styles" name="angle" type="astroidrange" min="-60" max="60" step="1" postfix="deg" default="-5" label="ASTROID_WIDGET_ANGLE_LABEL" description="ASTROID_WIDGET_IMAGE_ANGLE_DESC" />
+                <field astroidgroup="widget_styles" name="gap" type="astroidrange" min="0" max="10" step="0.1" postfix="rem" default="1" label="ASTROID_WIDGET_GUTTER_LABEL" description="ASTROID_WIDGET_IMAGE_GUTTER_DESC" />
+                <field astroidgroup="widget_styles" description="ASTROID_SELECT_BACKGROUND_COLOR_DESC" name="gallery_overlay_gradient" type="astroidgradient" label="TPL_ASTROID_BG_GREDIENT_LABEL"/>
                 <field astroidgroup="widget_styles" name="view_detail" type="astroidradio" astroid-switch="true" default="1" label="ASTROID_WIDGET_VIEW_DETAIL"/>
 
                 <field astroidgroup="widget_styles" name="border_radius" type="astroidlist" label="ASTROID_WIDGET_BORDER_RADIUS_LABEL" default="">

diff --git a/language/en-GB/en-GB.astroid.ini b/language/en-GB/en-GB.astroid.ini
@@ -1228,6 +1228,7 @@ ASTROID_BREAKPOINT_XL="X-Large (Large Screens)"
 ASTROID_BREAKPOINT_XXL="2X-Large (Big Screens)"
 ASTROID_WIDGET_GLOBAL_SIZE_LABEL="Size"
 ASTROID_WIDGET_GUTTER_LABEL="Gutter"
+ASTROID_WIDGET_IMAGE_GUTTER_DESC="Gutter between Images"
 ASTROID_WIDGET_ROW_GUTTER_LABEL="Row Gutter"
 ASTROID_WIDGET_ROW_GUTTER_XXL_LABEL="XXL Row Gutter"
 ASTROID_WIDGET_ROW_GUTTER_XL_LABEL="XL Row Gutter"
@@ -1657,4 +1658,6 @@ ASTROID_WIDGET_ACCORDION_ALWAYS_OPEN_LABEL="Always Open?"
 ASTROID_WIDGET_HOVER_MOTION_GALLERY_LABEL="Hover Motion Gallery"
 ASTROID_WIDGET_ROWS_LABEL="Rows"
 ASTROID_WIDGET_HOVER_MOTION_GALLERY_ROWS_DESC="Determine the number of image rows on the Library"
-ASTROID_WIDGET_VIEW_DETAIL="View Detail"
+ASTROID_WIDGET_VIEW_DETAIL="View Detail"
+ASTROID_WIDGET_ANGLE_LABEL="Angle"
+ASTROID_WIDGET_IMAGE_ANGLE_DESC="Customize the tilt angle of the photos"