From bb35811320ccf38690fe3f3a7a61608a1e00759c Mon Sep 17 00:00:00 2001
From: David Beguin <dbe@odoo.com>
Date: Mon, 22 Jul 2019 11:40:33 +0000
Subject: [PATCH] [REF] website_slides : refactor share_modal to use same
 template(s) in all case

This commit prepares the next one. It creates generic main and sub templates
for slide share modal.

In order to be usable for all cases, header and body sub template have been added.
Also and in the same purpose, as the website url can be another url
than the record to share (or if the record doesn't have website_url), this website_url
can be specified separately from the record. Otherwise, the standard behaviour is to
use the record.website_url.

Task ID: 1950396
PR #31776
---
 .../static/src/js/slides_share.js             |  7 ++-
 .../views/website_slides_templates_course.xml | 42 +++----------
 .../views/website_slides_templates_lesson.xml | 17 +++++-
 .../website_slides_templates_lesson_embed.xml |  5 +-
 .../views/website_slides_templates_utils.xml  | 61 +++++++++++++------
 5 files changed, 74 insertions(+), 58 deletions(-)

diff --git a/addons/website_slides/static/src/js/slides_share.js b/addons/website_slides/static/src/js/slides_share.js
index d23b48c5c9a..2148abc034d 100644
--- a/addons/website_slides/static/src/js/slides_share.js
+++ b/addons/website_slides/static/src/js/slides_share.js
@@ -77,12 +77,13 @@ publicWidget.registry.websiteSlidesShare = publicWidget.Widget.extend({
 
     _onShareLinkCopy: function (ev) {
         ev.preventDefault();
-        var $clipboardBtn = this.$('.o_clipboard_button');
+        var $clipboardBtn = $(ev.currentTarget);
         $clipboardBtn.tooltip({title: "Copied !", trigger: "manual", placement: "bottom"});
         var self = this;
-        var clipboard = new ClipboardJS('.o_clipboard_button', {
+        var clipboard = new ClipboardJS('#' + $clipboardBtn[0].id, {
             target: function () {
-                return self.$('.o_wslides_js_share_link')[0];
+                var share_link_el = self.$('#wslides_share_link_id_' + $clipboardBtn[0].id.split('id_')[1]);
+                return share_link_el[0];
             },
             container: this.el
         });
diff --git a/addons/website_slides/views/website_slides_templates_course.xml b/addons/website_slides/views/website_slides_templates_course.xml
index f1d60471896..72fdae25d42 100644
--- a/addons/website_slides/views/website_slides_templates_course.xml
+++ b/addons/website_slides/views/website_slides_templates_course.xml
@@ -131,7 +131,7 @@
                                 <div t-if="channel.channel_type == 'documentation'" class="my-1">
                                     <button role="button" class="btn text-white pl-0" title="Share Channel"
                                         aria-label="Share Channel"
-                                        data-toggle="modal" data-target="#slideChannelShareModal">
+                                        data-toggle="modal" t-att-data-target="'#slideChannelShareModal_%s' % channel.id">
                                         <i class="fa fa-share-square"></i> Share
                                     </button>
                                 </div>
@@ -158,6 +158,11 @@
                 </div>
             </div>
 
+            <!-- Share modal : here to avoid having text-white from o_wslides_course_header -->
+            <t t-call="website_slides.slide_share_modal" t-if="channel.channel_type == 'documentation'">
+                <t t-set="record" t-value="channel"/>
+            </t>
+
             <div class="o_wslides_course_main">
                 <!-- ========== TRAINING COURSE ========== -->
                 <div t-if="channel.channel_type == 'training'" class="container">
@@ -250,36 +255,9 @@
             </div>
         </div>
 
-        <div class="modal fade" id="slideChannelShareModal" tabindex="-1" role="dialog" aria-labelledby="slideChannelShareModalLabel" aria-hidden="true">
-            <div class="modal-dialog" role="document">
-                <div class="modal-content">
-                    <div class="modal-header">
-                        <h5 class="modal-title" id="slideChannelShareModalLabel">
-                            Share
-                        </h5>
-                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                            <span>&amp;times;</span>
-                        </button>
-                    </div>
-                    <div class="modal-body">
-                        <h5>Share on Social Networks</h5>
-                        <t t-call="website_slides.slides_share">
-                            <t t-set="record" t-value="channel"/>
-                        </t>
-                        <h5 class="mt16">Share Link</h5>
-                        <div class="input-group">
-                            <input type="text" class="form-control o_wslides_js_share_link" readonly="readonly" onclick="this.select();"
-                                t-att-value="channel.website_url"/>
-                            <div class="input-group-append">
-                                <button class="btn btn-sm btn-primary o_clipboard_button" >
-                                    <span class="fa fa-clipboard"> Copy Text</span>
-                                </button>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
+        <t t-call="website_slides.slide_share_modal">
+            <t t-set="record" t-value="channel"/>
+        </t>
     </t>
 </template>
 
@@ -339,7 +317,7 @@
             <div class="mt-3">
                 <button role="button" class="btn btn-link btn-block" title="Share Channel"
                     aria-label="Share Channel"
-                    data-toggle="modal" data-target="#slideChannelShareModal">
+                    data-toggle="modal" t-att-data-target="'#slideChannelShareModal_%s' % channel.id">
                     <i class="fa fa-share-square fa-fw"/> Share
                 </button>
             </div>
diff --git a/addons/website_slides/views/website_slides_templates_lesson.xml b/addons/website_slides/views/website_slides_templates_lesson.xml
index 3770c1dca49..bfe35524f19 100644
--- a/addons/website_slides/views/website_slides_templates_lesson.xml
+++ b/addons/website_slides/views/website_slides_templates_lesson.xml
@@ -337,9 +337,20 @@
                     The social sharing module will be unlocked when a moderator will allow your publication.
                 </h4>
                 <t t-if="slide.website_published">
-                    <t t-call="website_slides.slide_social_media">
-                        <t t-set="slide" t-value="slide"/>
-                    </t>
+                    <div class="row">
+                        <div class="col-12 col-lg-6">
+                            <h5 class="mt16">Share on Social Networks</h5>
+                            <t t-call="website_slides.slide_share_social">
+                                <t t-set="record" t-value="slide"/>
+                            </t>
+                        </div>
+                        <div class="col-12 col-lg-6">
+                            <t t-call="website_slides.slide_share_link">
+                                <t t-set="record" t-value="slide"/>
+                                <t t-set="website_url" t-value="slide.website_url"/>
+                            </t>
+                        </div>
+                    </div>
                     <div class="row">
                         <div t-attf-class="col-12 #{'col-lg-6' if slide.embed_code else ''}">
                             <t t-call="website_slides.slide_social_email">
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 6713bda120e..2103edd081c 100644
--- a/addons/website_slides/views/website_slides_templates_lesson_embed.xml
+++ b/addons/website_slides/views/website_slides_templates_lesson_embed.xml
@@ -43,7 +43,10 @@
                                 t-att-data-defaultpage="page">
                             <t t-if="is_embedded">
                                 <div id="slide_share" class="oe_slide_embed_option">
-                                    <t t-call="website_slides.slide_social_media"/>
+                                    <t t-call="website_slides.slide_share_modal">
+                                        <t t-set="record" t-value="slide"/>
+                                        <t t-set="website_url" t-value="slide.channel_id.website_url"/>
+                                    </t>
                                 </div>
                                 <div id="slide_email" class="oe_slide_embed_option">
                                     <t t-call="website_slides.slide_social_email"/>
diff --git a/addons/website_slides/views/website_slides_templates_utils.xml b/addons/website_slides/views/website_slides_templates_utils.xml
index 80368c76e09..a215367d788 100644
--- a/addons/website_slides/views/website_slides_templates_utils.xml
+++ b/addons/website_slides/views/website_slides_templates_utils.xml
@@ -2,7 +2,7 @@
 <odoo><data>
 
 <!-- Share on social networks -->
-<template id='slides_share' name="Slides Media Share">
+<template id='slide_share_social' name="Slides Media Share">
     <div class="btn-group" role="group">
         <a t-attf-href="https://www.facebook.com/sharer/sharer.php?u=#{record.website_url}" class="btn border bg-white o_wslides_js_social_share" social-key="facebook" aria-label="Share on Facebook" title="Share on Facebook"><i class="fa fa-facebook-square fa-fw"/></a>
         <a t-attf-href="https://twitter.com/intent/tweet?text=#{record.name}&amp;url=#{record.website_url}" class="btn border bg-white o_wslides_js_social_share"  social-key="twitter" aria-label="Share on Twitter" title="Share on Twitter"><i class="fa fa-twitter fa-fw"/></a>
@@ -11,25 +11,48 @@
 </template>
 
 <!-- Share: social media -->
-<template id='slide_social_media' name="Share on Social Networks">
-    <div class="row">
-        <div class="col-12 col-lg-6 mb-4">
-            <h5 class="mt-0 mb-2">Share on Social Networks</h5>
-            <t t-call="website_slides.slides_share">
-                <t t-set="record" t-value="slide"/>
-            </t>
-        </div>
-        <div class="col-12 col-lg-6">
-            <h5 class="mt-0 mb-2">Share Link</h5>
-            <div class="input-group">
-                <input type="text" class="form-control o_wslides_js_share_link" id="shareLink" t-att-value="slide.website_url" readonly="readonly" onClick="this.select();"/>
-                <div class="input-group-append">
-                    <button class="btn btn-sm btn-primary o_clipboard_button" data-clipboard-target="#shareLink">
-                        <span class="fa fa-clipboard"> Copy Text</span>
-                    </button>
-                </div>
+<template id='slide_share_modal'>
+    <t t-if="not website_url">
+        <t t-set="website_url" t-value="record.website_url"/>
+    </t>
+    <div class="modal fade" t-att-id="'slideChannelShareModal_%s' % record.id" tabindex="-1" role="dialog" aria-labelledby="slideChannelShareModalLabel" aria-hidden="true">
+        <div class="modal-dialog" role="document">
+            <div class="modal-content">
+                <t t-call="website_slides.slide_share_modal_header"/>
+                <t t-call="website_slides.slide_share_modal_body"/>
             </div>
-            <span class="form-text text-muted">Use permanent link to share in social media</span>
+        </div>
+    </div>
+</template>
+
+<template id="slide_share_modal_header">
+    <div class="modal-header">
+        <h5 class="modal-title" id="slideChannelShareModalLabel">
+            Share
+        </h5>
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+            <span>&amp;times;</span>
+        </button>
+    </div>
+</template>
+
+<template id="slide_share_modal_body">
+    <div class="modal-body">
+        <h5>Share on Social Networks</h5>
+        <t t-call="website_slides.slide_share_social"/>
+        <t t-call="website_slides.slide_share_link"/>
+    </div>
+</template>
+
+<template id="slide_share_link">
+    <h5 class="mt16">Share Link</h5>
+    <div class="input-group">
+        <input type="text" t-att-id="'wslides_share_link_id_%s' % record.id" class="form-control o_wslides_js_share_link" readonly="readonly" onclick="this.select();"
+            t-att-value="website_url"/>
+        <div class="input-group-append">
+            <button t-att-id="'share_link_clipboard_button_id_%s' % record.id" class="btn btn-sm btn-primary o_clipboard_button" >
+                <span class="fa fa-clipboard"> Copy Text</span>
+            </button>
         </div>
     </div>
 </template>