almost done with toggle offset settings

Author: Kevin Olson

media/plg_system_autoscrollspy/css/default.css

@@ -131,7 +131,7 @@ ul.autoss-nav{
 
 }
 
-.autoss-float-toggle{
+.autoss-float-toggle.btn{
     position: fixed;
     padding: 5px;
     cursor: pointer;
@@ -154,6 +154,11 @@ ul.autoss-nav{
 
     }
 
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+
 
 }
 

media/plg_system_autoscrollspy/css/default.css.map

@@ -78,12 +78,8 @@ document.addEventListener("DOMContentLoaded", function(event) {
     if (floatContainer) {
 
         let floatToggler = document.querySelector('.autoss-float-toggle');
-        //calculate actual height of floatToggler from its top to its bottom
-        let floatTogglerHeight = floatToggler.offsetHeight + parseFloat(getComputedStyle(floatToggler).marginTop) + parseFloat(getComputedStyle(floatToggler).marginBottom);
 
-        console.log('floatTogglerHeight is ' + floatTogglerHeight);
-        //the top of floatToggler needs to be the top of the floatContainer minus the height of floatToggler
-        floatToggler.style.top = (floatContainer.offsetTop - floatTogglerHeight) + 'px';
+        floatToggler.style.top = floatPanelToggleOffsetTop;
 
         const autoCollapseWidth = nav.getAttribute('data-collapsewidth');
         //if it's 0px, we always collapse it

media/plg_system_autoscrollspy/css/default.scss

@@ -43,7 +43,7 @@ public function onContentBeforeDisplay($context, &$article, &$params, $limitstar
         $plugin_path = URI::base().'plugins/system/autoscrollspy';
         $wam->useStyle('plg_system_autoscrollspy.default');
         if($enable_scrollspy == 1){
-            $wam->useScript('plg_system_autoscrollspy.autoscrollspy');
+            $wam->useScript('plg_system_autoscrollspy.autoscrollspy', ['defer' => true]);
         }
 
         /* floatpanel props*/
@@ -54,11 +54,13 @@ public function onContentBeforeDisplay($context, &$article, &$params, $limitstar
         $floatpanel_autocollapse_width = $this->params->get('floatpanel_autocollapse_width', '768');
         $floatpanel_collapse_toggler_type = $this->params->get('floatpanel_collapse_toggler_type', 'fa-button');
         $toggletext = $this->params->get('floatpanel_collapse_toggler_text', '');
+        $floatpanel_toggle_offset_top = $this->params->get('floatpanel_toggle_offset_top', '200px');
 
         // handle offset of scroll to heading (pass to js)
         $scroll_offset_top = $this->params->get('scroll_offset_top', '0');
         $wam->addInlineScript('
             const scrollOffsetTop = '.$scroll_offset_top.';
+            const floatPanelToggleOffsetTop = "'.$floatpanel_toggle_offset_top.'";
         ', ['type' => 'text/javascript']);
 
 

media/plg_system_autoscrollspy/js/autoscrollspy.js

@@ -16,6 +16,7 @@
         <folder>js</folder>
         <folder>css</folder>
         <folder>images</folder>
+        <filename>joomla.asset.json</filename>
     </media>
 
 	<languages>
@@ -176,13 +177,22 @@
                 showon="render_location:floatpanel"
                 />
                 <field
+                name="floatpanel_toggle_offset_top"
+                type="text"
+                label="PLG_SYSTEM_AUTO_SCROLLSPY_FLOATPANEL_TOGGLE_OFFSET_TOP"
+                description="PLG_SYSTEM_AUTO_SCROLLSPY_FLOATPANEL_TOGGLE_OFFSET_TOP_DESC"
+                default="200px"
+                showon="render_location:floatpanel"
+                />
+                <field
                 name="floatpanel_offset_top"
                 type="text"
                 label="PLG_SYSTEM_AUTO_SCROLLSPY_FLOATPANEL_OFFSET_TOP"
                 description="PLG_SYSTEM_AUTO_SCROLLSPY_FLOATPANEL_OFFSET_TOP_DESC"
                 default="250px"
                 showon="render_location:floatpanel"
                 />
+
                 <field
                 name="floatpanel_paneltitle"
                 type="text"

plugins/system/autoscrollspy/autoscrollspy.php

@@ -24,7 +24,7 @@ PLG_SYSTEM_AUTO_SCROLLSPY_FLOATPANEL_POSITION_DESC = "Where to put the panel. De
 PLG_SYSTEM_AUTO_SCROLLSPY_FLOATPANEL_WIDTH = "Float Panel Width (px)"
 PLG_SYSTEM_AUTO_SCROLLSPY_FLOATPANEL_WIDTH_DESC = "The width of the panel. Default is 200px."
 PLG_SYSTEM_AUTO_SCROLLSPY_FLOATPANEL_OFFSET_TOP = "Float Panel Offset Top"
-PLG_SYSTEM_AUTO_SCROLLSPY_FLOATPANEL_OFFSET_TOP_DESC = "How far down on the page to put this, in pixels, %, or vh. So you MUST include the px, %, or vh unit after the number for this one."
+PLG_SYSTEM_AUTO_SCROLLSPY_FLOATPANEL_OFFSET_TOP_DESC = "How far down the page to put the open floating menu panel. Should be HIGHER than the toggle offset top. Default is 200px."
 PLG_SYSTEM_AUTO_SCROLLSPY_FLOATPANEL_PANELTITLE = "Float Panel Title"
 PLG_SYSTEM_AUTO_SCROLLSPY_FLOATPANEL_PANELTITLE_DESC = "The title to show above a floating panel. If blank, no title is shown."
 PLG_SYSTEM_AUTO_SCROLLSPY_FLOATPANEL_AUTOCOLLAPSE_WIDTH = "Float Panel Auto Collapse Width (px)"
@@ -47,3 +47,5 @@ PLG_SYSTEM_AUTO_SCROLLSPY_FLOATPANEL_COLLAPSE_TOGGLER_TEXT_DESC="The text to sho
 PLG_SYSTEM_AUTO_SCROLLSPY_FLOATPANEL_COLLAPSE_TOGGLER_TYPE_LOADED_SVG_ICON="Loaded Menu Icon"
 PLG_SYSTEM_AUTO_SCROLLSPY_FLOATPANEL_COLLAPSE_TOGGLER_TYPE_LOADED_SVG_ICON_WITH_TEXT="Loaded Menu Icon with Text"
 
+PLG_SYSTEM_AUTO_SCROLLSPY_FLOATPANEL_TOGGLE_OFFSET_TOP="Toggle Offset Top"
+PLG_SYSTEM_AUTO_SCROLLSPY_FLOATPANEL_TOGGLE_OFFSET_TOP_DESC="Offset from top of the page to put the toggle button. Should be LESS than the panel offset top itself. Default is 200px."