[FIX] website_slides: fix embedded PDF navigation buttons

Bug
===
When we show a PDF in e-learning, we have some navigation buttons
(next, previous, last, first) with some conditions for them to be
enabled or not (e.g. a documentation can have suggested slides, and
so the next button is visible even if we are on the last page).

Those conditions are broken (sometimes a button is disabled when it
shouldn't and vice versa), this commit aims to fix that issue.

Task-3751253

closes #156252

X-original-commit: 59f778e
Signed-off-by: Thibault Delavallee (tde) <tde@openerp.com>
Signed-off-by: Stéphane Debauche (std) <std@odoo.com>

addons/website_slides/static/src/js/slides_embed.js

@@ -20,6 +20,7 @@ $(function () {
             this.canvas = $viewer.find('canvas')[0];
 
             this.pdf_viewer = new PDFSlidesViewer(this.slide_url, this.canvas);
+            this.hasSuggestions = !!this.$(".oe_slides_suggestion_media").length;
             this.pdf_viewer.loadDocument().then(function () {
                 self.on_loaded_file();
             });
@@ -34,9 +35,6 @@ $(function () {
                 this.$('canvas').show();
                 this.$('#page_count').text(this.pdf_viewer.pdf_page_total);
                 this.$('#PDFViewerLoader').hide();
-                if (this.pdf_viewer.pdf_page_total > 1) {
-                    this.$('.o_slide_navigation_buttons').removeClass('hide');
-                }
                 // init first page to display
                 var initpage = this.defaultpage;
                 var pageNum = (initpage > 0 && initpage <= this.pdf_viewer.pdf_page_total) ? initpage : 1;
@@ -67,6 +65,13 @@ $(function () {
                 }
             },
             next: function () {
+                if (
+                    this.pdf_viewer.pdf_page_current >=
+                    this.pdf_viewer.pdf_page_total + this.hasSuggestions
+                ) {
+                    return;
+                }
+
                 var self = this;
                 this.pdf_viewer.nextPage().then(function (pageNum) {
                     if (pageNum) {
@@ -83,7 +88,10 @@ $(function () {
                 if (!slideSuggestOverlay.hasClass('d-none')) {
                     // Hide suggested slide overlay before changing page nb.
                     slideSuggestOverlay.addClass('d-none');
-                    this.$('#next, #last').removeClass('disabled');
+                    this.$("#next").removeClass("disabled");
+                    if (this.pdf_viewer.pdf_page_total <= 1) {
+                        this.$("#previous, #first").addClass("disabled");
+                    }
                     return;
                 }
                 var self = this;
@@ -121,11 +129,16 @@ $(function () {
                 }
             },
             navUpdate: function (pageNum) {
-                this.$('#first').toggleClass('disabled', pageNum < 3 );
-                this.$('#previous').toggleClass('disabled', pageNum < 2 );
-                this.$('#next, #last').removeClass('disabled');
-                this.$('#zoomout').toggleClass('disabled', this.pdf_viewer.pdf_zoom <= MIN_ZOOM);
-                this.$('#zoomin').toggleClass('disabled', this.pdf_viewer.pdf_zoom >= MAX_ZOOM);
+                const pagesCount = this.pdf_viewer.pdf_page_total + this.hasSuggestions;
+                this.$("#first").toggleClass("disabled", pagesCount < 2 || pageNum < 2);
+                this.$("#last").toggleClass(
+                    "disabled",
+                    pagesCount < 2 || pageNum >= this.pdf_viewer.pdf_page_total
+                );
+                this.$("#next").toggleClass("disabled", pageNum >= pagesCount);
+                this.$("#previous").toggleClass("disabled", pageNum <= 1);
+                this.$("#zoomout").toggleClass("disabled", this.pdf_viewer.pdf_zoom <= MIN_ZOOM);
+                this.$("#zoomin").toggleClass("disabled", this.pdf_viewer.pdf_zoom >= MAX_ZOOM);
             },
             // full screen mode
             fullscreen: function () {
@@ -138,8 +151,9 @@ $(function () {
             },
             // display suggestion displayed after last slide
             display_suggested_slides: function () {
-                this.$("#slide_suggest").removeClass('d-none');
-                this.$('#next, #last').addClass('disabled');
+                this.$("#slide_suggest").removeClass("d-none");
+                this.$("#next, #last").addClass("disabled");
+                this.$("#previous, #first").removeClass("disabled");
             },
         };
 

addons/website_slides/static/src/scss/website_slides.scss

@@ -727,6 +727,15 @@ $line-height-truncate: 1.25em;
     .oe_slide_embed_option {
         @include o-position-absolute(0,0,0,0);
     }
+
+    .disabled {
+        // remove JS events for disabled elements
+        pointer-events: none;
+    }
+
+    .o_slide_navigation_buttons {
+        user-select: none;
+    }
 }
 
 .oe_slides_share_bar{

addons/website_slides/views/website_slides_templates_lesson_embed.xml

@@ -102,7 +102,7 @@
                                             <i class="fa fa-search-plus" />
                                         </span>
                                     </div>
-                                    <div class="col text-center">
+                                    <div class="col text-center o_slide_navigation_buttons">
                                         <span id="first" class="me-1 me-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>