[FIX] website_slides: fix various issues to eLearning platform

Including

* change h4 to h1 on the slide page;
* add the rel='canonical' link header on the fullscreen view in order to
improve SEO and links;
* add space between quiz questions;
* remove social share statistics as they are broken and not really useful;
* moved tabs before the Quiz on the slide page;
* allow to modify slide in backend by removing some readonly attributes;

Linked to task ID 2010024
Related to PR #34176

Signed-off-by: Thibault Delavallee (tde) <tde@openerp.com>

5 files changed, 39 insertions, 96 deletions

diff --git a/addons/website_slides/models/slide_slide.py b/addons/website_slides/models/slide_slide.py
index 7b05ed91584..f3fc22784f5 100644
--- a/addons/website_slides/models/slide_slide.py
+++ b/addons/website_slides/models/slide_slide.py
@@ -135,7 +135,7 @@ class Slide(models.Model):
         ('video', 'Video'),
         ('quiz', "Quiz")],
         string='Type', required=True,
-        default='document', readonly=True,
+        default='document',
         help="The document type will be set automatically based on the document URL and properties (e.g. height and width for presentation and document).")
     index_content = fields.Text('Transcript')
     datas = fields.Binary('Content', attachment=True)
diff --git a/addons/website_slides/static/src/js/slides_share.js b/addons/website_slides/static/src/js/slides_share.js
index 423b84bda1b..3157604e34e 100644
--- a/addons/website_slides/static/src/js/slides_share.js
+++ b/addons/website_slides/static/src/js/slides_share.js
@@ -50,49 +50,13 @@ sAnimations.registry.websiteSlidesShare = sAnimations.Class.extend({
      * @param {Object} parent
      */
     start: function (parent) {
-        var self = this;
         var defs = [this._super.apply(this, arguments)];
         defs.push(new ShareMail(this).attachTo($('.oe_slide_js_share_email')));
 
-        if ($('div#statistic').length) {
-            this.slideURL = $('div#statistic').attr('slide-url');
-            this.socialURLs = {
-                linkedin: 'https://www.linkedin.com/countserv/count/share?url=',
-                twitter: 'https://cdn.api.twitter.com/1/urls/count.json?url=',
-                facebook: 'https://graph.facebook.com/?id=',
-            };
-        }
-
-            _.each(this.socialURLs, function (value, key) {
-                self._updateStatistics(key, self.slideURL);
-            });
-
         return $.when.apply($, defs);
     },
 
     //--------------------------------------------------------------------------
-    // Private
-    //--------------------------------------------------------------------------
-
-    /**
-     * @private
-     * @param {string} socialSite
-     * @param {string} slide_url
-     */
-    _updateStatistics: function (socialSite, slideURL) {
-        var self = this;
-        $.ajax({
-            url: self.socialURLs[socialSite] + slideURL,
-            dataType: 'jsonp',
-            success: function (data) {
-                var shareCount = (socialSite === 'facebook' ? data.shares : data.count) || 0;
-                $('#' + socialSite + '-badge').text(shareCount);
-                $('#total-share').text(parseInt($('#total-share').text()) + parseInt($('#' + socialSite + '-badge').text()));
-            },
-        });
-    },
-
-    //--------------------------------------------------------------------------
     // Handlers
     //--------------------------------------------------------------------------
 
@@ -101,14 +65,11 @@ sAnimations.registry.websiteSlidesShare = sAnimations.Class.extend({
      * @param {Object} ev
      */
     _onSlidesSocialShare: function (ev) {
-        var self = this;
         ev.preventDefault();
-        var key = $(ev.currentTarget).attr('social-key');
         var popUpURL = $(ev.currentTarget).attr('href');
         var popUp = window.open(popUpURL, 'Share Dialog', 'width=626,height=436');
         $(window).on('focus', function () {
             if (popUp.closed) {
-                self._updateStatistics(key, self.slide_url);
                 $(window).off('focus');
             }
         });
diff --git a/addons/website_slides/views/slide_slide_views.xml b/addons/website_slides/views/slide_slide_views.xml
index b2dd1585ff0..1bb07a32a6d 100644
--- a/addons/website_slides/views/slide_slide_views.xml
+++ b/addons/website_slides/views/slide_slide_views.xml
@@ -71,13 +71,13 @@
                             </page>
                             <page string="Document">
                                 <group>
-                                    <field name="slide_type" readonly="1"/>
+                                    <field name="slide_type"/>
                                     <field name="url"
-                                        attrs="{'required': [('slide_type', 'in', ('video'))], 'readonly': [('slide_type', 'in', ('document', 'video'))], 'invisible': [('slide_type', 'not in', ('document', 'presentation', 'video'))]}" />
+                                        attrs="{'required': [('slide_type', 'in', ('video'))], 'invisible': [('slide_type', 'not in', ('document', 'presentation', 'video'))]}" />
                                     <field name="document_id" readonly="1" attrs="{'invisible': [('document_id', '=', False)]}"/>
                                     <field name="mime_type" readonly="1"
                                         attrs="{'invisible': [('slide_type', 'not in', ('document', 'presentation', 'infographic', 'webpage'))]}"/>
-                                    <field name="datas" readonly="1"
+                                    <field name="datas"
                                         attrs="{'invisible': [('slide_type', 'not in', ('document', 'presentation', 'infographic', 'webpage'))]}"/>
                                 </group>
                             </page>
diff --git a/addons/website_slides/views/website_slides_templates_lesson.xml b/addons/website_slides/views/website_slides_templates_lesson.xml
index 0853c8dccb9..77e154b1ccc 100644
--- a/addons/website_slides/views/website_slides_templates_lesson.xml
+++ b/addons/website_slides/views/website_slides_templates_lesson.xml
@@ -185,7 +185,7 @@
     <div class="row align-items-center my-3">
         <div class="col-12 col-md order-2 order-md-1 d-flex">
             <div class="d-flex align-items-center">
-                <h1 class="h5 my-0">
+                <h1 class="h4 my-0">
                     <t t-call="website_slides.slide_icon">
                         <t t-set="icon_class">mr-1</t>
                     </t>
@@ -245,36 +245,7 @@
             <div t-field="slide.html_content"/>
         </div>
     </div>
-    <div class="row" t-if="slide.question_ids">
-        <t t-call="website_slides.lesson_content_quiz"/>
-    </div>
-    <div class="row mt-3 mb-3">
-        <div class="col-12 col-md d-flex align-items-start mb-4 mb-md-0" t-if="len(slide.link_ids)">
-            <span t-if="slide.link_ids" class="text-muted font-weight-bold mr-3">External sources</span>
-            <div class="text-muted mr-auto border-left pl-3">
-                <t t-foreach="slide.link_ids" t-as="link">
-                    <a t-att-href="link.link" t-esc="link.name"/><br />
-                </t>
-            </div>
-        </div>
-        <div t-if="slide.channel_id.allow_comment and slide.channel_id.channel_type == 'documentation'"
-             class="col-12 col-md d-flex align-items-start justify-content-md-end mb-2 mb-md-0">
-            <span class="text-muted font-weight-bold mr-3">Rating</span>
-            <div class="text-muted border-left pl-3">
-                <div class="o_wslides_js_slide_like mr-2">
-                    <span t-att-class="('o_wslides_js_slide_like_up %s') % ('disabled' if not slide.channel_id.can_vote else '')" tabindex="0" data-toggle="popover" t-att-data-slide-id="slide.id">
-                        <i class="fa fa-thumbs-up fa-1x" role="img" aria-label="Likes" title="Likes"></i>
-                        <span t-esc="slide.likes"/>
-                    </span>
-                    <span t-att-class="('o_wslides_js_slide_like_down ml-3 %s') % ('disabled' if not slide.channel_id.can_vote else '')" tabindex="0" data-toggle="popover" t-att-data-slide-id="slide.id">
-                        <i class="fa fa-thumbs-down fa-1x" role="img" aria-label="Dislikes" title="Dislikes"></i>
-                        <span t-esc="slide.dislikes"/>
-                    </span>
-                </div>
-            </div>
-        </div>
-    </div>
-    <div class="mb-5">
+    <div class="my-3">
         <ul class="nav nav-tabs o_wslides_lesson_nav" role="tablist">
             <li class="nav-item">
                 <a href="#about" aria-controls="about" class="nav-link active" role="tab" data-toggle="tab">
@@ -362,27 +333,6 @@
                             </tbody>
                         </table>
                     </div>
-                    <div class="col-12 col-md">
-                        <table class="table table-sm">
-                            <tbody>
-                                <tr>
-                                    <th colspan="2" class="border-top-0">Share count</th>
-                                </tr>
-                                <tr class="border-top-0">
-                                    <th class="border-top-0"><span id="facebook-badge">0</span></th>
-                                    <td class="border-top-0 w-100">Facebook</td>
-                                </tr>
-                                <tr>
-                                    <th><span id="twitter-badge">0</span></th>
-                                    <td>Twitter</td>
-                                </tr>
-                                <tr>
-                                    <th><span id="linkedin-badge"/></th>
-                                    <td>LinkedIn</td>
-                                </tr>
-                            </tbody>
-                        </table>
-                    </div>
                 </div>
             </div>
             <div role="tabpanel" class="tab-pane fade" t-if="slide.website_published" id="share">
@@ -409,6 +359,35 @@
             </div>
         </div>
     </div>
+    <div class="row" t-if="slide.question_ids">
+        <t t-call="website_slides.lesson_content_quiz"/>
+    </div>
+    <div class="row mt-3 mb-3">
+        <div class="col-12 col-md d-flex align-items-start mb-4 mb-md-0" t-if="len(slide.link_ids)">
+            <span t-if="slide.link_ids" class="text-muted font-weight-bold mr-3">External sources</span>
+            <div class="text-muted mr-auto border-left pl-3">
+                <t t-foreach="slide.link_ids" t-as="link">
+                    <a t-att-href="link.link" t-esc="link.name"/><br />
+                </t>
+            </div>
+        </div>
+        <div t-if="slide.channel_id.allow_comment and slide.channel_id.channel_type == 'documentation'"
+             class="col-12 col-md d-flex align-items-start justify-content-md-end mb-2 mb-md-0">
+            <span class="text-muted font-weight-bold mr-3">Rating</span>
+            <div class="text-muted border-left pl-3">
+                <div class="o_wslides_js_slide_like mr-2">
+                    <span t-att-class="('o_wslides_js_slide_like_up %s') % ('disabled' if not slide.channel_id.can_vote else '')" tabindex="0" data-toggle="popover" t-att-data-slide-id="slide.id">
+                        <i class="fa fa-thumbs-up fa-1x" role="img" aria-label="Likes" title="Likes"></i>
+                        <span t-esc="slide.likes"/>
+                    </span>
+                    <span t-att-class="('o_wslides_js_slide_like_down ml-3 %s') % ('disabled' if not slide.channel_id.can_vote else '')" tabindex="0" data-toggle="popover" t-att-data-slide-id="slide.id">
+                        <i class="fa fa-thumbs-down fa-1x" role="img" aria-label="Dislikes" title="Dislikes"></i>
+                        <span t-esc="slide.dislikes"/>
+                    </span>
+                </div>
+            </div>
+        </div>
+    </div>
 </template>
 
 <!-- Slide sub-tempalte: render a quiz serverside. Should be sync with JS qweb template "slide.slide.quiz" -->
@@ -427,7 +406,7 @@
         t-att-data-has-next="1 if next_slide else 0"
         t-att-data-next-slide-url="'/slides/slide/%s' % (slug(next_slide)) if next_slide else None">
         <div t-foreach="slide_questions" t-as="question"
-            t-att-class="'o_wslides_js_lesson_quiz_question mt-3 mb-4 %s' % ('completed-disabled' if slide_completed else ('disabled' if not slide.channel_id.is_member else ''))" t-att-data-question-id="question['id']" t-att-data-title="question['question']">
+            t-att-class="'o_wslides_js_lesson_quiz_question my-5 %s' % ('completed-disabled' if slide_completed else ('disabled' if not slide.channel_id.is_member else ''))" t-att-data-question-id="question['id']" t-att-data-title="question['question']">
             <div class="h4">
                 <small class="text-muted"><span t-esc="question_index+1"/>. </small> <span t-esc="question['question']"/>
             </div>
diff --git a/addons/website_slides/views/website_slides_templates_lesson_fullscreen.xml b/addons/website_slides/views/website_slides_templates_lesson_fullscreen.xml
index 5d92dfb32ae..7022de0df99 100644
--- a/addons/website_slides/views/website_slides_templates_lesson_fullscreen.xml
+++ b/addons/website_slides/views/website_slides_templates_lesson_fullscreen.xml
@@ -3,6 +3,9 @@
 
 <!-- Slide template for the fullscreen mode -->
 <template id="slide_fullscreen" name="Fullscreen">
+    <t t-set="head">
+        <link rel="canonical" t-att-href="slide.website_url" />
+    </t>
     <t t-call="website.layout">
         <div class="o_wslides_fs_main d-flex flex-column font-weight-light">