Slider: close via shortcut (#4394)

* change close-slider behind slider

* open/close slider via anchor

* use shortcuts globaly

* deleted debugging console.log()

8 files changed, 19 insertions, 24 deletions

diff --git a/app/views/extension/index.phtml b/app/views/extension/index.phtml
index 4c9a58494..6d4a1ba6d 100644
--- a/app/views/extension/index.phtml
+++ b/app/views/extension/index.phtml
@@ -80,9 +80,6 @@
 </main>
 
 <?php $class = isset($this->extension) ? ' active' : ''; ?>
-<a href="#" id="close-slider" class="<?= $class ?>">
-	<?= _i('close') ?>
-</a>
 <aside id="slider" class="scrollbar-thin<?= $class ?>">
 	<?php
 		if (isset($this->extension)) {
@@ -90,3 +87,6 @@
 		}
 	?>
 </aside>
+<a href="#" id="close-slider" class="<?= $class ?>">
+	<?= _i('close') ?>
+</a>
diff --git a/app/views/index/normal.phtml b/app/views/index/normal.phtml
index 562a1ef00..da2388e8f 100644
--- a/app/views/index/normal.phtml
+++ b/app/views/index/normal.phtml
@@ -135,10 +135,10 @@ $today = @strtotime('today');
 <?php endif; ?>
 
 <?php $class = $this->displaySlider ? ' active' : ''; ?>
+<aside id="slider" class="scrollbar-thin<?= $class ?>">
+</aside>
 <a href="#" id="close-slider" class="<?= $class ?>">
 	<?= _i('close') ?>
 </a>
-<aside id="slider" class="scrollbar-thin<?= $class ?>">
-</aside>
 
 <?php if ($nbEntries > 0 && FreshRSS_Context::$user_conf->show_nav_buttons) $this->partial('nav_entries'); ?>
diff --git a/app/views/stats/idle.phtml b/app/views/stats/idle.phtml
index 3dc3ab700..0fa490372 100644
--- a/app/views/stats/idle.phtml
+++ b/app/views/stats/idle.phtml
@@ -51,9 +51,6 @@
 </main>
 
 <?php $class = $this->displaySlider ? ' active' : ''; ?>
-<a href="#" id="close-slider" class="<?= $class ?>">
-	<?= _i('close') ?>
-</a>
 <aside id="slider" class="scrollbar-thin<?= $class ?>">
 	<?php
 		if (isset($this->feed)) {
@@ -61,3 +58,6 @@
 		}
 	?>
 </aside>
+<a href="#" id="close-slider" class="<?= $class ?>">
+	<?= _i('close') ?>
+</a>
diff --git a/app/views/subscription/index.phtml b/app/views/subscription/index.phtml
index ae842f990..139bb2de0 100644
--- a/app/views/subscription/index.phtml
+++ b/app/views/subscription/index.phtml
@@ -76,9 +76,6 @@
 </main>
 
 <?php $class = $this->displaySlider ? ' active' : ''; ?>
-<a href="#" id="close-slider" class="<?= $class ?>">
-	<?= _i('close') ?>
-</a>
 <aside id="slider" class="scrollbar-thin<?= $class ?>">
 	<?php
 		if (isset($this->feed)) {
@@ -88,3 +85,6 @@
 		}
 	?>
 </aside>
+<a href="#" id="close-slider" class="<?= $class ?>">
+	<?= _i('close') ?>
+</a>
diff --git a/p/scripts/extra.js b/p/scripts/extra.js
index a95eb620d..39f9d049a 100644
--- a/p/scripts/extra.js
+++ b/p/scripts/extra.js
@@ -148,7 +148,7 @@ function open_slider_listener(ev) {
 	const a = ev.target.closest('.open-slider');
 	if (a) {
 		if (!context.ajax_loading) {
-			location.href = '#'; // close menu/dropdown
+			location.href = '#slider'; // close menu/dropdown
 			context.ajax_loading = true;
 
 			const req = new XMLHttpRequest();
@@ -156,11 +156,8 @@ function open_slider_listener(ev) {
 			req.responseType = 'document';
 			req.onload = function (e) {
 				const slider = document.getElementById('slider');
-				const closer = document.getElementById('close-slider');
 				slider.scrollTop = 0;
 				slider.innerHTML = this.response.body.innerHTML;
-				slider.classList.add('active');
-				closer.classList.add('active');
 				context.ajax_loading = false;
 				slider.dispatchEvent(freshrssSliderLoadEvent);
 			};
@@ -177,8 +174,6 @@ function init_slider(slider) {
 	closer.addEventListener('click', function (ev) {
 		if (data_leave_validation(slider) || confirm(context.i18n.confirmation_default)) {
 			slider.querySelectorAll('form').forEach(function (f) { f.reset(); });
-			closer.classList.remove('active');
-			slider.classList.remove('active');
 			return true;
 		} else {
 			return false;
diff --git a/p/scripts/main.js b/p/scripts/main.js
index 035b66c53..1eb8a1ff8 100644
--- a/p/scripts/main.js
+++ b/p/scripts/main.js
@@ -1721,7 +1721,6 @@ function init_normal() {
 	}
 	init_column_categories();
 	init_stream(stream);
-	init_shortcuts();
 	init_actualize();
 	faviconNbUnread();
 
@@ -1738,6 +1737,7 @@ function init_normal() {
 
 function init_main_beforeDOM() {
 	document.scrollingElement.scrollTop = 0;
+	init_shortcuts();
 	if (['normal', 'reader', 'global'].indexOf(context.current_view) >= 0) {
 		init_normal();
 	}
diff --git a/p/themes/base-theme/template.css b/p/themes/base-theme/template.css
index 2b904defb..6dc2ef2d8 100644
--- a/p/themes/base-theme/template.css
+++ b/p/themes/base-theme/template.css
@@ -1444,7 +1444,7 @@ br {
 	z-index: 100;
 }
 
-#slider.active {
+#slider:target {
 	width: 750px;
 }
 
@@ -1455,7 +1455,7 @@ br {
 	cursor: pointer;
 }
 
-#close-slider.active {
+#slider:target + #close-slider {
 	background: rgba(0, 0, 0, 0.2);
 	font-size: 0;
 	left: 0;
@@ -1466,7 +1466,7 @@ br {
 	display: none;
 }
 
-#close-slider.active img {
+#slider:target + #close-slider img {
 	padding: 0.5rem;
 	display: inline-block;
 	position: absolute;
diff --git a/p/themes/base-theme/template.rtl.css b/p/themes/base-theme/template.rtl.css
index 3bc36ff49..4e48dd43a 100644
--- a/p/themes/base-theme/template.rtl.css
+++ b/p/themes/base-theme/template.rtl.css
@@ -1444,7 +1444,7 @@ br {
 	z-index: 100;
 }
 
-#slider.active {
+#slider:target {
 	width: 750px;
 }
 
@@ -1455,7 +1455,7 @@ br {
 	cursor: pointer;
 }
 
-#close-slider.active {
+#slider:target + #close-slider {
 	background: rgba(0, 0, 0, 0.2);
 	font-size: 0;
 	right: 0;
@@ -1466,7 +1466,7 @@ br {
 	display: none;
 }
 
-#close-slider.active img {
+#slider:target + #close-slider img {
 	padding: 0.5rem;
 	display: inline-block;
 	position: absolute;