[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>
This commit is contained in:
committed by
Thibault Delavallée
parent
800a55c06f
commit
f0ec2a8fc8
@@ -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)
|
||||
|
||||
@@ -50,48 +50,12 @@ 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');
|
||||
}
|
||||
});
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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">
|
||||
|
||||
|
||||
Reference in New Issue
Block a user