Skip to content
Snippets Groups Projects
website_slides_templates_lesson.xml 25.6 KiB
Newer Older

<!-- Slide: main template: detailed view -->
<template id="slide_main" name="Slide Detailed View">
    <t t-call="website.layout">
        <t t-set="main_object" t-value="slide"/>
        <div class="wrap o_wslides_wrap">
            <t t-call="website_slides.course_nav">
                <t t-set="channel" t-value="slide.channel_id"/>
            </t>
            <div class="o_wslides_lesson_header">
                <div class="container o_wslides_lesson_header_container pt-3 pb-3">
                    <div class="row align-items-end d-flex">
                        <div class="col-md-9 offset-md-3 col-xs-12">
                            <h3 class="font-weight-bold w-100">
                                <a t-att-href="'/slides/%s' % (slug(slide.channel_id))"
                                    class="text-white"
                                    t-field="slide.channel_id.name"/>
                            </h3>
                            <div t-if="not is_public_user" class="d-flex align-items-center">
                                <div class="progress w-50" style="height: 8px;">
                                    <div class="progress-bar rounded" role="progressbar"
                                        t-att-aria-valuenow="slide.channel_id.completion" aria-valuemin="0" aria-valuemax="100"
                                        t-attf-style="width: #{slide.channel_id.completion}%;">
                                        <span><t t-esc="slide.channel_id.completion"/> %</span>
                                    </div>
                                </div>
                                <i t-att-class="'fa fa-trophy m-0 ml-2 p-0 %s' % ('text-success' if slide.channel_id.completed else 'text-warning')"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="container o_wslides_lesson_main">
                <div class="row">
                    <div class="col-lg-3 o_wslides_lesson_aside">
                        <t t-if="slide.channel_id.channel_type == 'training'"
                            t-call="website_slides.slide_aside_training"/>
                        <t t-if="slide.channel_id.channel_type == 'documentation'"
                            t-call="website_slides.slide_aside_documentation"/>
                    </div>
                    <div class="col-lg-9 o_wslides_lesson_content">
                        <t t-call="website_slides.slide_content_detailed"/>
                    </div>
                </div>
            </div>
        </div>
    </t>
</template>

<!-- Slide: sidebar documentation mode -->
<template id="slide_aside_documentation" name="Slide: Sidebar in Documentation">
    <div class="o_wslides_lesson_aside_doc bg-white">
        <ul class="nav nav-tabs" role="tablist">
            <li class="nav-item"><a aria-controls="related" href="#related" class="nav-link active" data-toggle="tab">Related</a></li>
            <li class="nav-item"><a aria-controls="most_viewed" href="#most_viewed" class="nav-link" data-toggle="tab">Most Viewed</a></li>
        </ul>
        <div class="tab-content">
            <div role="tabpanel" id="related" class="tab-pane active">
                <ul class="list-unstyled card-body px-2 py-0">
                    <t t-set="related_slides_list" t-value="list(related_slides)"/>
                    <t t-if="not related_slides_list">
                        No presentation available.
                    <t t-else="" t-foreach="related_slides_list" t-as="aside_slide">
                        <t t-call="website_slides.slide_aside_card"/>
            <div role="tabpanel" id="most_viewed" class="tab-pane">
                <ul class="list-unstyled card-body px-2 py-0">
                    <t t-set="most_viewed_slides_list" t-value="list(most_viewed_slides)"/>
                    <t t-if="not list(most_viewed_slides_list)">
                        No presentation available.
                    <t t-else="" t-foreach="most_viewed_slides_list" t-as="aside_slide">
                        <t t-call="website_slides.slide_aside_card"/>
    </div>
</template>

<!-- Slide sub-template: display an item in a list of related slides (Related, Most Viewed, ...) -->
<template id="slide_aside_card" name="Related Slide">
    <li class="media mt-2 row">
        <t t-set="slide_image" t-value="'/web/image/slide.slide/%s/image_medium' % aside_slide.id"/>
        <a t-att-href="'/slides/slide/%s' % (slug(aside_slide))" t-att-title="aside_slide.name" class="col-4">
            <div class="img" t-attf-style="padding-top: 50%; background-image: url(#{slide_image}); background-size: cover; background-position:center"/>
        </a>
        <div class="media-body col-8 pl-0">
            <a t-att-href="'/slides/slide/%s' % (slug(aside_slide))">
                <h6 t-esc="aside_slide.name" class="mb-1"/>
            </a>
            <small class="text-muted">
                <t t-esc="aside_slide.total_views"/> Views &#8226; <timeago class="timeago" t-att-datetime="aside_slide.create_date"></timeago>
            </small>
    </li>
</template>

<!-- Slide: sidebar training mode -->
<template id="slide_aside_training" name="Slide: Sidebar in Training">
    <div class="o_wslides_lesson_aside_list bg-white">
        <h5 class="bg-100 text-600 pl-2 py-2 border-bottom">Course content</h5>
        <ul class="p-0 list-unstyled">
            <t t-set="i" t-value="0"/>
            <t t-if="uncategorized_slides" t-call="website_slides.slide_aside_training_category">
                <t t-set="category_slide_ids" t-value="uncategorized_slides"/>
            </t>
            <t t-foreach="slide.channel_id.category_ids" t-as="category">
                <t t-call="website_slides.slide_aside_training_category">
                    <t t-set="category_slide_ids" t-value="category.slide_ids"/>
                </t>
            </t>
        </ul>
    </div>
<template id="slide_aside_training_category" name="Category item for the slide detailed view list">
    <li class="mt-3">
        <a t-att-href="('#collapse-%s') % (category.id if category else 0)" data-toggle="collapse" role="button" aria-expanded="true"
            class="o_wslides_lesson_aside_list_link pl-2 text-600"
            t-att-aria-controls="('collapse-%s') % (category.id if category else 0)">
                <span t-field="category.name" class="text-uppercase"/>
                <span class="text-uppercase">Uncategorized</span>
        </a>
        <ul class="collapse show p-0 m-0 list-unstyled" t-att-id="('collapse-%s') % (category.id if category else 0)" >
            <t t-foreach="category_slide_ids" t-as="aside_slide">
                <li class="p-0">
                    <a t-att-href="'/slides/slide/%s' % (slug(aside_slide))"
                        t-att-class="'o_wslides_lesson_aside_list_link d-flex align-items-center pl-2 %s' % ('bg-200 border-left border-primary' if aside_slide == slide else '')">
                        <i t-att-id="'o_wslides_lesson_aside_slide_check_%s' % (aside_slide.id)"
                            t-att-class="'mr-2 fa %s' % ('text-success fa-check-circle' if channel_progress[aside_slide.id].get('completed') else 'text-600 fa-circle-o')">
                        </i>
                        <t t-call="website_slides.slide_icon">
                            <t t-set="icon_class" t-value="'mr-2 %s' % ('text-800' if aside_slide == slide else 'text-600')"/>
                            <t t-set="slide" t-value="aside_slide"/>
                        </t>
                        <span t-esc="aside_slide.name" t-att-class="'mr-2 %s' % ('text-800' if aside_slide == slide else 'text-600')"/>
                        <span t-if="aside_slide.question_ids"
                            t-att-class="'ml-auto badge badge-pill %s' % ('badge-success' if channel_progress[aside_slide.id].get('completed') else 'badge-light text-600')">
                            <t t-esc="channel_progress[aside_slide.id].get('quiz_karma_won') if channel_progress[aside_slide.id].get('completed') else channel_progress[aside_slide.id].get('quiz_karma_gain')"/> xp
                        </span>
                    </a>
                    <ul t-if="aside_slide.link_ids or aside_slide.question_ids" class="list-group ml-5 list-unstyled">
                        <t t-foreach="aside_slide.link_ids" t-as="resource">
                            <a t-attf-href="#{resource.link}" target="new">
                                <li><small><i class="fa fa-link mr-1"></i><span t-field="resource.name"/></small></li>
                            </a>
                        </t>
                        <a t-if="aside_slide.question_ids" t-att-href="'/slides/slide/%s#lessonQuiz' % (slug(aside_slide))"
                            class="o_wslides_lesson_aside_list_link text-600">
                            <li><small><i class="fa fa-flag-o text-warning"></i> Quiz</small></li>
                    </ul>
                </li>
            </t>
        </ul>
    </li>
</template>

<!-- Slide: all its content, not fullscreen mode -->
<template id="slide_content_detailed" name="Slide: Detailed Content">
    <div class="row">
        <div class="col-12 d-flex mt-3">
            <div class="d-flex align-items-center">
                <h5 class="m-0 ml-2">
                    <t t-call="website_slides.slide_icon"/>
                    <span t-field="slide.name"/>
                </h5>
                <span t-if="slide.question_ids"
                    t-att-class="'ml-2 badge %s' % ('badge-success' if channel_progress[slide.id].get('completed') else 'badge-info')">
                    <span t-if="channel_progress[slide.id].get('completed')">
                        <i class="fa fa-check-circle"/>
                        <t t-esc="channel_progress[slide.id].get('quiz_karma_won', 0)"/>
                    </span>
                    <span t-else="" t-esc="channel_progress[slide.id].get('quiz_karma_gain', 0)"/>
                    <span>XP</span>
                </span>
            </div>
            <div class="ml-auto">
                <a t-att-class="'btn btn-light border %s' % ('disabled' if not previous_slide else '')"
                    role="button" t-att-aria-disabled="'disabled' if not previous_slide else None"
                    t-att-href="'/slides/slide/%s' % (slug(previous_slide)) if previous_slide else '#'">
                    <i class="fa fa-chevron-left mr-2"></i> Prev
                </a>
                <t t-set="allow_done_btn" t-value="slide.slide_type in ['infographic', 'presentation', 'document', 'webpage'] and not slide.question_ids and not channel_progress[slide.id].get('completed')"/>
                <a t-att-class="'btn btn-primary border text-white %s' % ('disabled' if not allow_done_btn else '')"
                    role="button" t-att-aria-disabled="'true' if not allow_done_btn else None"
                    t-att-href="'/slides/slide/%s/set_completed?%s' % (slide.id, 'next_slide_id=%s' % (next_slide.id) if next_slide else '') if allow_done_btn else '#'">
                <a t-att-class="'btn btn-light border %s' % ('disabled' if not next_slide else '')"
                    role="button" t-att-aria-disabled="'disabled' if not next_slide else None"
                    t-att-href="'/slides/slide/%s' % (slug(next_slide)) if next_slide else '#'">
                    Next <i class="fa fa-chevron-right ml-2"></i>
                </a>
                <a t-att-class="'btn btn-light border ml-2 %s' % ('disabled' if slide.channel_id.channel_type != 'training' else '')"
                    role="button" t-att-aria-disabled="'disabled' if slide.channel_id.channel_type != 'training' else None"
                    t-att-href="'/slides/slide/%s?fullscreen=1' % (slug(slide)) if slide.channel_id.channel_type == 'training' else '#'"><i class="fa fa-desktop mr-2"></i> Fullscreen</a>
            </div>
        </div>
        <div t-if="slide.tag_ids" class="col">
            <t t-foreach="slide.tag_ids" t-as="tag">
                <a t-att-href="'/slides/%s/tag/%s' % (slug(slide.channel_id), slug(tag))" class="badge badge-light" t-esc="tag.name"/>
            </t>
        </div>
    </div>
    <div class="row o_wslides_lesson_content_type">
        <img t-if="slide.slide_type == 'infographic'"
            t-attf-src="/web/image/slide.slide/#{slide.id}/image" class="img-fluid" style="width:100%" t-att-alt="slide.name"/>
        <div t-if="slide.slide_type in ('presentation', 'document')" class="embed-responsive embed-responsive-4by3 embed-responsive-item mb8" style="height: 600px;">
            <t t-raw="slide.embed_code"/>
        </div>
        <div t-if="slide.slide_type == 'video' and slide.document_id" class="embed-responsive embed-responsive-16by9 embed-responsive-item mb8">
            <t t-raw="slide.embed_code"/>
        </div>
        <div t-if="slide.slide_type == 'webpage'" class="bg-white">
            <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 d-flex align-items-start">
            <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>

            <t t-if="slide.channel_id.allow_comment and slide.channel_id.channel_type == 'documentation'">
                <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 class="row mb-5">
        <ul class="col-lg-12 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">
                    <i class="fa fa-home"></i> About
                </a>
            </li>
            <li t-if="slide.channel_id.allow_comment" class="nav-item">
                <a href="#discuss" aria-controls="discuss" class="nav-link" role="tab" data-toggle="tab">
                    <i class="fa fa-comments-o"></i> Comments
                </a>
            <li class="nav-item">
                <a href="#transcript" aria-controls="transcript" class="nav-link" role="tab" data-toggle="tab">
                    <i class="fa fa-align-justify"></i> Transcript
                </a>
            </li>
            <li class="nav-item">
                <a href="#statistic" aria-controls="statistic" class="nav-link" role="tab" data-toggle="tab">
                    <i class="fa fa-bar-chart"></i> Statistics
                </a>
            </li>
            <li class="nav-item">
                <a href="#share" aria-controls="share" class="nav-link" role="tab" data-toggle="tab">
                    <i class="fa fa-share-alt"></i> Share
                </a>
            </li>
        </ul>
        <div class="col tab-content mt-3">
            <div role="tabpanel" t-att-class="not comments and 'tab-pane fade in show active' or 'tab-pane fade'" id="about">
                <div t-field="slide.description"/>
            </div>
            <div role="tabpanel" t-att-class="comments and 'tab-pane fade in show active' or 'tab-pane fade'" id="discuss">
                <t t-call="portal.message_thread">
                    <t t-set="object" t-value="slide"/>
                    <t t-set="disable_composer" t-value="not (slide.channel_id.can_comment and slide.channel_id.allow_comment and slide.channel_id.channel_type == 'training')"/>
                    <t t-set="display_rating" t-value="False"/>
                </t>
            </div>
            <div role="tabpanel" class="tab-pane fade oe_slides_transcript" id="transcript">
                <t t-if="slide.index_content">
                    <t t-foreach="slide.index_content.split('\n')" t-as="line">
                        <p t-esc="line"></p>
                    </t>
                </t>
            </div>
            <div role="tabpanel" class="tab-pane fade" id="statistic" t-att-slide-url="slide.website_url">
                <div class="row">
                    <div class="col-lg-4 d-flex flex-column">
                        <span class="font-weight-bold mb-3 mt-3">Views</span>
                        <span class="d-flex pl-3">
                            <span class="badge badge-pill" t-esc="slide.total_views"/>
                            <span class="mr-5 ml-auto">Total Views</span>
                        </span>
                        <span class="d-flex pl-3">
                            <span class="badge badge-pill" t-esc="slide.slide_views"/>
                            <span class="mr-5 ml-auto">Members Views</span>
                        </span>
                        <span class="d-flex pl-3">
                            <span class="badge badge-pill" t-esc="slide.public_views"/>
                            <span class="mr-5 ml-auto">Public Views</span>
                        </span>
                    </div>
                    <div class="col-lg-4 d-flex flex-column">
                        <span class="font-weight-bold mb-3 mt-3">Actions</span>
                        <span class="d-flex pl-3">
                            <span class="badge badge-pill" t-esc="slide.likes"/>
                            <span class="mr-5 ml-auto">Likes</span>
                        </span>
                        <span class="d-flex pl-3">
                            <span class="badge badge-pill" t-esc="slide.dislikes"/>
                            <span class="mr-5 ml-auto">Dislikes</span>
                        </span>
                        <span class="d-flex pl-3">
                            <span class="badge badge-pill" t-esc="len(slide.website_message_ids)"/>
                            <span class="mr-5 ml-auto">Comments</span>
                        </span>
                    </div>
                    <div class="col-lg-4 d-flex flex-column">
                        <span class="font-weight-bold mb-3 mt-3">Share Count</span>
                        <span class="d-flex pl-3">
                            <span class="badge badge-pill" id="facebook-badge">0</span>
                            <span class="mr-5 ml-auto">Facebook</span>
                        </span>
                        <span class="d-flex pl-3">
                            <span class="badge badge-pill" id="twitter-badge">0</span>
                            <span class="mr-5 ml-auto">Twitter</span>
                        </span>
                        <span class="d-flex pl-3">
                            <span class="badge badge-pill" id="linkedin-badge">0</span>
                            <span class="mr-5 ml-auto">LinkedIn</span>
                        </span>
                    </div>
                </div>
            </div>
            <div role="tabpanel" class="tab-pane fade" t-if="slide.website_published" id="share">
                <h4 t-if="not slide.website_published"><i class="fa fa-info-circle"></i>
                    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>
                    <t t-call="website_slides.slide_social_email">
                        <t t-set="slide" t-value="slide"/>
                    </t>
                    <t t-if="not slide.document_id">
                        <t t-call="website_slides.slide_social_embed">
                            <t t-set="slide" t-value="slide"/>
                        </t>
                    </t>
                </t>
            </div>
        </div>
    </div>
<!-- Slide sub-tempalte: render a quiz serverside. Should be sync with JS qweb template "slide.slide.quiz" -->
<template id="lesson_content_quiz" name="Lesson: Quiz specific content">
    <div class="o_wslides_js_lesson_quiz col" id="lessonQuiz"
        t-att-data-id="slide.id"
        t-att-data-name="slide.name"
        t-att-data-slide-type="slide.slide_type"
        t-att-data-readonly="not channel_progress[slide.id]"
        t-att-data-completed="channel_progress[slide.id].get('completed')"
        t-att-data-quiz-attempts-count="quiz_attempts_count"
        t-att-data-quiz-karma-max="quiz_karma_max"
        t-att-data-quiz-karma-gain="quiz_karma_gain"
        t-att-data-quiz-karma-won="quiz_karma_won"
        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.question_ids" t-as="question"
            class="o_wslides_js_lesson_quiz_question mt-3" t-att-data-question-id="question.id" t-att-data-title="question.question">
            <div class="h3">
                <small class="text-muted"><span t-esc="question_index+1"/>. </small> <span t-esc="question.question"/>
            </div>
            <ul class="bg-white list-unstyled">
                <t t-foreach="question.answer_ids" t-as="answer">
                    <li t-att-data-answer-id="answer.id"
                        t-att-data-text="answer.text_value"
                        class="o_wslides_quiz_answer pt-2 pb-2 border-bottom rounded d-flex align-items-center">
                        <label class="mb-0 d-flex align-items-center justify-content-center mr-3 ml-3">
                            <input type="radio"
                                t-att-name="question.id"
                                t-att-value="answer.id"
                                class="d-none"/>
                            <i class="fa fa-circle text-muted"></i>
                            <i class="fa fa-times-circle text-danger d-none"></i>
                            <i class="fa fa-check-circle text-success d-none"></i>
                        </label>
                        <span t-esc="answer.text_value"/>
                    </li>
                </t>
            </ul>
        </div>
        <div class="alert alert-danger o_wslides_js_lesson_quiz_error d-none" role="alert">
            <span></span>
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&amp;times;</span>
            </button>
        </div>
        <div class="o_wslides_js_lesson_quiz_validation"/>
    </div>
</template>

<!-- Slide sub-template: share: send by email -->
<template id='slide_social_email' name="Share by Email">
    <h4 class="mt-3">Share with a friend</h4>
    <t t-if="not is_public_user">
        <form class="form-group oe_slide_js_share_email" role="form">
            <div class="input-group col-lg-6">
                <input type="email" class="form-control" placeholder="your-friend@domain.com"/>
                <span class="input-group-append">
                    <button class="btn btn-primary" type="button"
                        data-loading-text="Sending..."
                        t-attf-data-slide-id="#{slide.id}"
                        style="border-top-right-radius: 4px;border-bottom-right-radius: 4px;">
                        <i class="fa fa-envelope-o"/> Send Email
qsm-odoo's avatar
qsm-odoo committed
            <span class="form-text">Send presentation through email</span>
        </form>
    </t>
    <t t-if="is_public_user">
        <p>Please <a t-attf-href="/web?redirect=#{request.httprequest.url}"> login </a> to send this <t t-esc="slide.slide_type"/> by email!</p>
    </t>
</template>

<!-- Slide sub-template: share: embed in your website -->
<template id="slide_social_embed" name="Share on Your Website">
    <div class="oe_slide_js_embed_code_widget">
        <h4 class="mt0">Embed in your website</h4>
        <div class="form-group">
            <textarea class="form-control slide_embed_code" readonly="readonly" onClick="this.select();"><t t-esc="slide.embed_code"/></textarea>
        </div>
        <div class="form-group" t-if="slide.slide_type in ('presentation', 'document')">
qsm-odoo's avatar
qsm-odoo committed
            <div class="form-text col-xl-3 col-lg-3 col-md-6 col-6">Select page to start with</div>
            <div class="input-group col-xl-3 col-lg-3 col-md-6 col-6">
                <input type="number" value="1" class="form-control"/>
            </div>
        </div>
    </div>
</template>