Fix issue new Smooth Scroll does not work in 3.1.7 #860

assets/vendor/astroid/scss/utilities/_utilities.scss

@@ -8,5 +8,4 @@
 @import "animations";
 @import "modal";
 @import "carousel";
-@import "lenis";
 @import "cursor";

css/lenis.css

@@ -0,0 +1,19 @@
+html.lenis, html.lenis body {
+    height: auto;
+}
+
+.lenis.lenis-smooth {
+    scroll-behavior: auto !important;
+}
+
+.lenis.lenis-smooth [data-lenis-prevent] {
+    overscroll-behavior: contain;
+}
+
+.lenis.lenis-stopped {
+    overflow: clip;
+}
+
+.lenis.lenis-smooth iframe {
+    pointer-events: none;
+}

framework/library/astroid/Component/Utility.php

@@ -220,26 +220,31 @@ public static function smoothScroll(): void
         $params = Framework::getTemplate()->getParams();
         $enable_smooth_scroll = $params->get('enable_smooth_scroll', '');
         if ($enable_smooth_scroll == '1') {
+            $options    =   [];
+            $options[]  =   'duration: '. (float)($params->get('smooth_scroll_speed', '1200')/1000);
+            $configs    =   implode(',', $options);
+            $wa         =   Factory::getApplication()->getDocument()->getWebAssetManager();
             $document   =   Framework::getDocument();
             $document->loadLenis();
-            $script = 'const initSmoothScrollingGSAP = () => {
-const lenis = new Lenis()
-lenis.on(\'scroll\', ScrollTrigger.update)
-gsap.ticker.add((time)=>{
-  lenis.raf(time * 1000)
-})
-gsap.ticker.lagSmoothing(0)
-};
-const initSmoothScrolling = () => {
-const lenis = new Lenis()
-function raf(time) {
-  lenis.raf(time)
-  requestAnimationFrame(raf)
-}
-requestAnimationFrame(raf)
-};
-if (typeof ScrollTrigger !== \'undefined\') {initSmoothScrollingGSAP()} else {initSmoothScrolling()}';
-            $document->addScriptDeclaration($script, 'body');
+            $script     =   'const initSmoothScrollingGSAP = () => {'
+                .'const lenis = new Lenis({' . $configs . '});'
+                .'lenis.on(\'scroll\', ScrollTrigger.update);'
+                .'gsap.ticker.add((time)=>{'
+                    .'lenis.raf(time * 1000)'
+                .'});'
+                .'gsap.ticker.lagSmoothing(0);'.
+                '};'
+                .'const initSmoothScrolling = () => {'
+                .'const lenis = new Lenis({' . $configs . '});'
+                .'function raf(time) {'
+                . 'lenis.raf(time);'
+                . 'requestAnimationFrame(raf);'
+                .'}'
+                .'requestAnimationFrame(raf);'
+                .'};'
+                .'if (typeof ScrollTrigger !== \'undefined\') {initSmoothScrollingGSAP()} else {initSmoothScrolling()}';
+            $wa->registerAndUseStyle('astroid.lenis', 'astroid/lenis.min.css');
+            $wa->addInlineScript($script);
         }
     }
 

framework/options/basic.xml

@@ -214,6 +214,7 @@
          <field astroidgroup="colormode" ngShow="[astroid_color_mode_enable]==1 AND [enable_color_mode_transform]==1" name="astroid_colormode_transform_offset" type="astroidrange" min="1" max="100" step="1" default="50" label="TPL_ASTROID_BASIC_COLOR_MODE_TRANSFORM_OFFSET_LABEL" description="TPL_ASTROID_BASIC_COLOR_MODE_TRANSFORM_OFFSET_DESC" postfix="%" />
 
          <field astroidgroup="smooth_scroll" description="TPL_SMOOTH_SCROLL_ENABLE_DESC" name="enable_smooth_scroll" type="astroidradio" astroid-switch="true" default="0" label="TPL_SMOOTH_SCROLL_ENABLE_LBL"/>
+         <field ngShow="[enable_smooth_scroll]=='1'" astroidgroup="smooth_scroll" name="smooth_scroll_speed" type="astroidrange" min="1" max="10000" step="1" default="1200" label="TPL_SMOOTH_SCROLL_SPEED_LBL" description="TPL_SMOOTH_SCROLL_SPEED_DESC" postfix="ms" />
          <field astroidgroup="cursor_options" name="enable_cursor_effect" type="astroidgetpro" label="ASTROID_CURSOR_EFFECT_ENABLE" description="ASTROID_CURSOR_EFFECT_ENABLE_DESC" />
       </fieldset>
    </fields>

language/en-GB/en-GB.astroid.ini

@@ -1143,7 +1143,7 @@ TPL_SMOOTH_SCROLL_TITLE="Smooth Scroll"
 TPL_SMOOTH_SCROLL_ENABLE_LBL="Enable Smooth Scroll"
 TPL_SMOOTH_SCROLL_ENABLE_DESC="Enabling will option load the necessary JS for smooth scroll."
 TPL_SMOOTH_SCROLL_SPEED_LBL="Scroll Speed"
-TPL_SMOOTH_SCROLL_SPEED_DESC="This a number representing the amount of time in milliseconds that it should take to scroll 1000px. Scroll distances shorter than that will take less time, and scroll distances longer than that will take more time. The default is 300ms."
+TPL_SMOOTH_SCROLL_SPEED_DESC="This a number representing the amount of time in milliseconds that it should take to scroll 1000px. Scroll distances shorter than that will take less time, and scroll distances longer than that will take more time. The default is 1200ms."
 
 ASTROID_JD_BUILDER="Builder"
 
@@ -1624,6 +1624,7 @@ ASTROID_WIDGET_MOUSE_SCROLL="Mouse Scroll"
 ASTROID_WIDGET_SHOW_CONTROLLERS="Show Controllers"
 ASTROID_WIDGET_MULTI_LOCATION_ITEMS="Multi-Location Items"
 ASTROID_WIDGET_GMAP_API="Google Map API"
+ASTROID_WIDGET_GMAP_API_DESC="To use advanced features of Google Map. You need Google Map API Key. To know how to get API Key please see <a href="https://developers.google.com/maps/documentation/javascript/get-api-key">here</a>"
 
 ; Form Builder
 ASTROID_WIDGET_FORMBUILDER_LABEL="Form Builder"