From 8ab2adfbdd38f0a5389816c7ccea44327cbec35e Mon Sep 17 00:00:00 2001
From: Julien Banken <jbn@odoo.com>
Date: Mon, 19 Jul 2021 06:48:51 +0000
Subject: [PATCH] [FIX] slides: prevent the # anchors of the PDF controllers
 from triggering a scroll jump

PURPOSE

Currently, the PDF viewer is loaded from an iframe and the PDF controllers
contains empty anchor links. When the user clicks on one of these links,
the browsers based on Chromium will trigger a "scroll jump" and the iframe
will be placed at the top of the browser window.

When the PDF document is larger than the viewport, this behavior can be
quite annoying: The user will have to scroll the browser window to
see the controllers each time they click on a controller (-> link) as
(1) the controllers triggers a scroll jump and (2) the controllers are
below the document that does not fit entirely on screen. To avoid that,
the links of the PDF controllers will be replaced with spans. The
controllers will then no longer trigger a scroll jump.

SPECS

- Replace the links of the PDF controllers with spans.
- Add css rules to prevent user selection.

LINKS

Task id: 2500574

closes odoo/odoo#73937

Signed-off-by: Thibault Delavallee (tde) <tde@openerp.com>
---
 .../static/src/scss/website_slides.scss       |  7 ++++-
 .../website_slides_templates_lesson_embed.xml | 26 +++++++++----------
 2 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/addons/website_slides/static/src/scss/website_slides.scss b/addons/website_slides/static/src/scss/website_slides.scss
index 17ab57c7aa3..a46bab26ab7 100644
--- a/addons/website_slides/static/src/scss/website_slides.scss
+++ b/addons/website_slides/static/src/scss/website_slides.scss
@@ -574,7 +574,12 @@ $o-wslides-fs-side-width: 300px;
         background-image: linear-gradient(120deg, $o-wslides-color-dark1, $o-wslides-color-dark2);
     }
 
-    .oe_slides_panel_footer a, .oe_slides_share_bar a {
+    .oe_slides_panel_footer span[role="button"],
+    .oe_slides_panel_footer a,
+    .oe_slides_share_bar span[role="button"],
+    .oe_slides_share_bar a {
+        cursor: pointer;
+        user-select: none;
         @include o-hover-text-color(rgba(white, 0.7), white);
 
         &.disabled {
diff --git a/addons/website_slides/views/website_slides_templates_lesson_embed.xml b/addons/website_slides/views/website_slides_templates_lesson_embed.xml
index ee2071bfd95..bf990f632d6 100644
--- a/addons/website_slides/views/website_slides_templates_lesson_embed.xml
+++ b/addons/website_slides/views/website_slides_templates_lesson_embed.xml
@@ -104,28 +104,28 @@
                                                 <span class="input-group-text" id="page_count"/>
                                             </div>
                                         </div>
-                                        <a id="zoomout" href="#" class="text-decoration-none d-none d-sm-inline ml-2 mr-2" title="Zoom out" aria-label="Zoom out" role="button">
+                                        <span id="zoomout" class="d-none d-sm-inline ml-2 mr-2" title="Zoom out" aria-label="Zoom out" role="button">
                                             <i class="fa fa-search-minus" />
-                                        </a>
-                                        <a id="zoomin" href="#" class="text-decoration-none d-none d-sm-inline" title="Zoom in" aria-label="Zoom in" role="button">
+                                        </span>
+                                        <span id="zoomin" class="d-none d-sm-inline" title="Zoom in" aria-label="Zoom in" role="button">
                                             <i class="fa fa-search-plus" />
-                                        </a>
+                                        </span>
                                     </div>
                                     <div class="col text-center">
-                                        <a id="first" href="#" class="text-decoration-none mr-1 mr-sm-2" title="First slide" role="button" aria-label="First slide"> <i class="fa fa-step-backward"/> </a>
-                                        <a id="previous" href="#" class="text-decoration-none mx-1 mx-sm-2" title="Previous slide" aria-label="Previous slide" role="button"> <i class="fa fa-arrow-circle-left"/> </a>
-                                        <a id="next" href="#" class="text-decoration-none mx-1 mx-sm-2" title="Next slide" aria-label="Next slide" role="button"> <i class="fa fa-arrow-circle-right"/> </a>
-                                        <a id="last" href="#" class="text-decoration-none mx-1 mx-sm-2" title="Last slide" aria-label="Last slide" role="button"> <i class="fa fa-step-forward"/> </a>
+                                        <span id="first" class="mr-1 mr-sm-2" title="First slide" aria-label="First slide" role="button"><i class="fa fa-step-backward"/></span>
+                                        <span id="previous" class="mx-1 mx-sm-2" title="Previous slide" aria-label="Previous slide" role="button"><i class="fa fa-arrow-circle-left"/></span>
+                                        <span id="next" class="mx-1 mx-sm-2" title="Next slide" aria-label="Next slide" role="button"><i class="fa fa-arrow-circle-right"/></span>
+                                        <span id="last" class="mx-1 mx-sm-2" title="Last slide" aria-label="Last slide" role="button"><i class="fa fa-step-forward"/></span>
                                         <a t-if="slide.slide_resource_downloadable" id="download" t-attf-href="/web/content/slide.slide/#{slide.id}/datas?download=true"
-                                           class="text-decoration-none ml-1 ml-sm-2" title="Download Content" role="img" aria-label="Download">
+                                           class="ml-1 ml-sm-2" title="Download Content" aria-label="Download" role="button">
                                             <i class="fa fa-download" />
                                         </a>
-                                    </div>                                    
+                                    </div>
                                     <div class="col-3 text-right flex-grow-0">
-                                        <a id="fullscreen" href="#" class="text-decoration-none ml-1 ml-sm-2"
-                                           title="View fullscreen" role="img" aria-label="Fullscreen">
+                                        <span id="fullscreen" class="ml-1 ml-sm-2"
+                                           title="View fullscreen" aria-label="Fullscreen" role="button">
                                             <i class="fa fa-arrows-alt"/>
-                                        </a>
+                                        </span>
                                     </div>
                                 </div>
                             </div>