From deaad34a64e987f6bf9433d75224a7396e301b8b Mon Sep 17 00:00:00 2001 From: Kevin Olson Date: Sun, 14 Apr 2024 18:31:10 -0400 Subject: [PATCH] almost done with toggle offset settings --- media/plg_system_autoscrollspy/css/default.css | 17 ++++++----------- .../css/default.css.map | 2 +- media/plg_system_autoscrollspy/css/default.scss | 7 ++++++- .../js/autoscrollspy.js | 6 +----- plugins/system/autoscrollspy/autoscrollspy.php | 4 +++- plugins/system/autoscrollspy/autoscrollspy.xml | 10 ++++++++++ .../language/en-GB/plg_system_autoscrollspy.ini | 4 +++- 7 files changed, 30 insertions(+), 20 deletions(-) diff --git a/media/plg_system_autoscrollspy/css/default.css b/media/plg_system_autoscrollspy/css/default.css index 1c81d06..ba62ab1 100644 --- a/media/plg_system_autoscrollspy/css/default.css +++ b/media/plg_system_autoscrollspy/css/default.css @@ -80,8 +80,6 @@ ul.autoss-nav ul li a { box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.23); } - - .autoss-float-toggle.asscolors-dark { background: #333; color: white; @@ -115,28 +113,25 @@ ul.autoss-nav ul li a { display: none; } -.autoss-float-toggle { +.autoss-float-toggle.btn { position: fixed; padding: 5px; cursor: pointer; z-index: 1001; transition: all 0.3s ease; - -} -.autoss-float-toggle.btn{ display: flex; align-items: center; + justify-content: center; } - -.autoss-float-toggle.asscolors-dark.as-float-left { +.autoss-float-toggle.btn.asscolors-dark.as-float-left { border-radius: 0 10px 10px 0; } -.autoss-float-toggle.asscolors-dark.as-float-right { +.autoss-float-toggle.btn.asscolors-dark.as-float-right { border-radius: 10px 0 10px 0; } -.autoss-float-toggle i { +.autoss-float-toggle.btn i { font-size: 2em; - padding: 10px; + padding: 5px; } .autoss-togglehidden { diff --git a/media/plg_system_autoscrollspy/css/default.css.map b/media/plg_system_autoscrollspy/css/default.css.map index bc1a831..02a450b 100644 --- a/media/plg_system_autoscrollspy/css/default.css.map +++ b/media/plg_system_autoscrollspy/css/default.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["default.scss"],"names":[],"mappings":"AAAA;EACI;EACA;EACA;;AACA;EACI;EACA;;AACA;EACI;EACA;EACA;EACA;;AAOR;EACI;EACA;EACA;;AACA;EACI;EACA;;AACA;EACI;EACA;EACA;EACA;;;AAMhB;EACI;EACA;EACA;;AACA;EACI;;;AAKR;EACI;;AACA;EACI;;AAEJ;EACI;EACA;;AAGJ;EACI;EAEA;EACA;;;AAKR;EACI;;AACA;EACI;;AAEJ;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;;;AAMJ;EACI;EACA;;;AAIR;EAEI;;;AAGJ;EACI;EACA;;AACA;EACI;;;AAIR;EACI;EACA;;AACA;EACI;;;AAIR;EACI;EACA;;;AAKJ;EACI;;;AAGJ;EACI;;;AAIJ;EAEQ;;;AAIR;EACI;EACA;EACA;EACA;EACA;;AAEI;EACI;;AAGJ;EACI;;AAKR;EACI;EACA;;;AAQR;EACI","file":"default.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["default.scss"],"names":[],"mappings":"AAAA;EACI;EACA;EACA;;AACA;EACI;EACA;;AACA;EACI;EACA;EACA;EACA;;AAOR;EACI;EACA;EACA;;AACA;EACI;EACA;;AACA;EACI;EACA;EACA;EACA;;;AAMhB;EACI;EACA;EACA;;AACA;EACI;;;AAKR;EACI;;AACA;EACI;;AAEJ;EACI;EACA;;AAGJ;EACI;EAEA;EACA;;;AAKR;EACI;;AACA;EACI;;AAEJ;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;;;AAMJ;EACI;EACA;;;AAIR;EAEI;;;AAGJ;EACI;EACA;;AACA;EACI;;;AAIR;EACI;EACA;;AACA;EACI;;;AAIR;EACI;EACA;;;AAKJ;EACI;;;AAGJ;EACI;;;AAIJ;EAEQ;;;AAIR;EACI;EACA;EACA;EACA;EACA;EAkBA;EACA;EACA;;AAlBI;EACI;;AAGJ;EACI;;AAKR;EACI;EACA;;;AAaR;EACI","file":"default.css"} \ No newline at end of file diff --git a/media/plg_system_autoscrollspy/css/default.scss b/media/plg_system_autoscrollspy/css/default.scss index a465c7f..da6c9c2 100644 --- a/media/plg_system_autoscrollspy/css/default.scss +++ b/media/plg_system_autoscrollspy/css/default.scss @@ -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; + + } diff --git a/media/plg_system_autoscrollspy/js/autoscrollspy.js b/media/plg_system_autoscrollspy/js/autoscrollspy.js index b194942..9723eaa 100644 --- a/media/plg_system_autoscrollspy/js/autoscrollspy.js +++ b/media/plg_system_autoscrollspy/js/autoscrollspy.js @@ -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 diff --git a/plugins/system/autoscrollspy/autoscrollspy.php b/plugins/system/autoscrollspy/autoscrollspy.php index 9d82186..4af9e24 100644 --- a/plugins/system/autoscrollspy/autoscrollspy.php +++ b/plugins/system/autoscrollspy/autoscrollspy.php @@ -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']); diff --git a/plugins/system/autoscrollspy/autoscrollspy.xml b/plugins/system/autoscrollspy/autoscrollspy.xml index c318ca2..5053178 100644 --- a/plugins/system/autoscrollspy/autoscrollspy.xml +++ b/plugins/system/autoscrollspy/autoscrollspy.xml @@ -16,6 +16,7 @@ js css images + joomla.asset.json @@ -176,6 +177,14 @@ showon="render_location:floatpanel" /> + +