initial commit 2

4 files changed, 817 insertions, 0 deletions

diff --git a/addons/website_blog/static/src/snippets/s_latest_posts/000.js b/addons/website_blog/static/src/snippets/s_latest_posts/000.js
new file mode 100644
index 00000000..3ef418c8
--- /dev/null
+++ b/addons/website_blog/static/src/snippets/s_latest_posts/000.js
@@ -0,0 +1,135 @@
+odoo.define('website_blog.s_latest_posts_frontend', function (require) {
+'use strict';
+
+var core = require('web.core');
+var wUtils = require('website.utils');
+var publicWidget = require('web.public.widget');
+
+var _t = core._t;
+
+publicWidget.registry.js_get_posts = publicWidget.Widget.extend({
+    selector: '.js_get_posts',
+    disabledInEditableMode: false,
+
+    /**
+     * @override
+     */
+    start: function () {
+        var self = this;
+        const data = self.$target[0].dataset;
+        const limit = parseInt(data.postsLimit) || 4;
+        const blogID = parseInt(data.filterByBlogId);
+        // Compatibility with old template xml id
+        if (data.template && data.template.endsWith('.s_latest_posts_big_orizontal_template')) {
+            data.template = 'website_blog.s_latest_posts_horizontal_template';
+        }
+        const template = data.template || 'website_blog.s_latest_posts_list_template';
+        const loading = data.loading === 'true';
+        const order = data.order || 'published_date desc';
+
+        this.$target.empty(); // Compatibility with db that saved content inside by mistake
+        this.$target.attr('contenteditable', 'False'); // Prevent user edition
+
+        var domain = [];
+        if (blogID) {
+            domain.push(['blog_id', '=', blogID]);
+        }
+        if (order.includes('visits')) {
+            domain.push(['visits', '!=', false]);
+        }
+
+        var prom = new Promise(function (resolve) {
+            self._rpc({
+                route: '/blog/render_latest_posts',
+                params: {
+                    template: template,
+                    domain: domain,
+                    limit: limit,
+                    order: order,
+                },
+            }).then(function (posts) {
+                var $posts = $(posts).filter('.s_latest_posts_post');
+                if (!$posts.length) {
+                    self.$target.append($('<div/>', {class: 'col-md-6 offset-md-3'})
+                    .append($('<div/>', {
+                        class: 'alert alert-warning alert-dismissible text-center',
+                        text: _t("No blog post was found. Make sure your posts are published."),
+                    })));
+                    resolve();
+                }
+
+                if (loading) {
+                    // Perform an intro animation
+                    self._showLoading($posts);
+                } else {
+                    self.$target.html($posts);
+                }
+                resolve();
+            }).guardedCatch(function () {
+                if (self.editableMode) {
+                    self.$target.append($('<p/>', {
+                        class: 'text-danger',
+                        text: _t("An error occured with this latest posts block. If the problem persists, please consider deleting it and adding a new one"),
+                    }));
+                }
+                resolve();
+            });
+        });
+        return Promise.all([this._super.apply(this, arguments), prom]);
+    },
+    /**
+     * @override
+     */
+    destroy: function () {
+        this.$target.empty();
+        this._super.apply(this, arguments);
+    },
+
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
+    /**
+     * @private
+     */
+    _showLoading: function ($posts) {
+        var self = this;
+
+        _.each($posts, function (post, i) {
+            var $post = $(post);
+            var $progress = $post.find('.s_latest_posts_loader');
+            var bgUrl = $post.find('.o_record_cover_image').css('background-image').replace('url(','').replace(')','').replace(/\"/gi, "") || 'none';
+
+            // Append $post to the snippet, regardless by the loading state.
+            $post.appendTo(self.$target);
+
+            // No cover-image found. Add a 'flag' class and exit.
+            if (bgUrl === 'none') {
+                $post.addClass('s_latest_posts_loader_no_cover');
+                $progress.remove();
+                return;
+            }
+
+            // Cover image found. Show the spinning icon.
+            $progress.find('> div').removeClass('d-none').css('animation-delay', i * 200 + 'ms');
+            var $dummyImg = $('<img/>', {src: bgUrl});
+
+            // If the image is not loaded in 10 sec, remove loader and provide a fallback bg-color to the container.
+            // Hopefully one day the image will load, covering the bg-color...
+            var timer = setTimeout(function () {
+                $post.find('.o_record_cover_image').addClass('bg-200');
+                $progress.remove();
+            }, 10000);
+
+            wUtils.onceAllImagesLoaded($dummyImg).then(function () {
+                $progress.fadeOut(500, function () {
+                    $progress.removeClass('d-flex');
+                });
+
+                $dummyImg.remove();
+                clearTimeout(timer);
+            });
+        });
+    },
+});
+});
diff --git a/addons/website_blog/static/src/snippets/s_latest_posts/000.scss b/addons/website_blog/static/src/snippets/s_latest_posts/000.scss
new file mode 100644
index 00000000..b43eddec
--- /dev/null
+++ b/addons/website_blog/static/src/snippets/s_latest_posts/000.scss
@@ -0,0 +1,335 @@
+.s_latest_posts:not([data-vcss]), .s_latest_posts_big_picture:not([data-vcss]) {
+    .s_latest_posts_loader {
+        @include o-position-absolute(0, 0, 0, 0);
+        transform: translateZ(1px);
+
+        > div {
+            animation: o-wblog-loader 2.4s cubic-bezier(0, 0.2, 0.8, 1) infinite;
+            max: {width: 30px; height: 30px;}
+        }
+    }
+
+    .s_latest_posts_post_title  {
+        font-weight: $headings-font-weight;
+        // Tweek line-height to help fit multi-line titles.
+        line-height: 1;
+    }
+
+    .s_latest_posts_post_subtitle {
+        font-size: 1em;
+    }
+}
+
+.s_latest_posts:not([data-vcss]) {
+    // Set sizes relative to the container font-size.
+    // (handle parents with, for example, '.small' or '.h1' classes)
+    .s_latest_posts_post_cover {
+        @include size(3.5em);
+        max: {width: 85px; height: 85px}
+    }
+
+    .s_latest_posts_post_title  {
+        font-size: 1.25em;
+    }
+}
+
+.s_latest_posts_big_picture {
+    .s_latest_posts_post {
+        min-height: 150px;
+
+        figcaption {
+            position: relative;
+            justify-content: center;
+        }
+
+        .s_latest_posts_post_cover {
+            min-height: 100%;
+
+            .o_record_cover_container {
+                top: 0;
+            }
+        }
+
+        .s_latest_posts_post_title  {
+            @include font-size($h3-font-size);
+            margin-bottom: 0.5em;
+            word-spacing: -0.15em;
+        }
+    }
+
+    .js_get_posts {
+        .s_latest_posts_post > div:not(.o_record_cover_container):not(.js-loading) p {
+            margin: 0;
+        }
+
+        &.effect-dexter .s_latest_posts_post {
+            &::before {
+                content: "";
+                @include o-position-absolute(0, $grid-gutter-width/2, 0, $grid-gutter-width/2);
+                background: linear-gradient(to bottom, darken(theme-color('secondary'), 10%) 0%,darken(theme-color('secondary'), 30%) 100%);
+            }
+            .thumb {
+                transition: opacity 0.35s;
+            }
+            > div:not(.o_record_cover_container):not(.js-loading) {
+                padding: 3em;
+                text-align: left;
+                &:after {
+                    @include o-position-absolute(auto, 2em, 2em, 2em);
+                    height: calc(50% - 2em);
+                    border: 2px solid #fff;
+                    content: "";
+                    transition: transform 0.35s;
+                    transform: translate3d(0, -100%, 0);
+                }
+            }
+            p {
+                @include o-position-absolute(auto, 60px, 60px, 60px);
+                opacity: 0;
+                transition: e(  "opacity 0.35s linear 0s, transform 0.35s linear 0s");
+                -webkit-transform: translate3d(0,-100px,0);
+                transform: translate3d(0,-100px,0);
+            }
+            &:hover {
+                .thumb {
+                    opacity: 0.4!important;
+                }
+                > div:not(.o_record_cover_container):not(.js-loading)::after {
+                    transform: translate3d(0, 0, 0);
+                }
+                p {
+                    opacity: 1;
+                    transform: translate3d(0, 0, 0);
+                }
+            }
+        }
+        &.effect-chico {
+            .o_record_cover_image {
+                transition: opacity 0.35s, transform 0.35s;
+                transform: scale(1.12);
+            }
+            .s_latest_posts_post > div:not(.o_record_cover_container):not(.js-loading) {
+                padding: 3em;
+                &::before {
+                    @include o-position-absolute(7%, 7%, 7%, 7%);
+                    border: 1px solid #fff;
+                    content: "";
+                    transform: scale(1.1);
+                    opacity: 0;
+                    transition: opacity 0.35s, transform 0.35s;
+                }
+            }
+            p {
+                opacity: 0;
+                transition: opacity 0.35s, transform 0.35s;
+                margin: 10% auto 0 !important;
+                max-width: 200px;
+                transform: scale(1.5);
+            }
+            h2 {
+                padding: 0;
+            }
+            .s_latest_posts_post:hover {
+                .o_record_cover_image {
+                    transform: scale(1);
+                }
+                > div:not(.o_record_cover_container):not(.js-loading)::before, p {
+                    opacity: 1;
+                    transform: scale(1);
+                }
+            }
+        }
+        &.effect-marley {
+            .s_latest_posts_post > div:not(.o_record_cover_container):not(.js-loading) {
+                text-align: right;
+                h2, p {
+                    @include o-position-absolute(auto, 30px, auto, 30px);
+                    padding: 10px 0;
+                }
+                p {
+                    bottom: 30px;
+                    line-height: 1.5;
+                    -webkit-transform: translate3d(0,100%,0);
+                    transform: translate3d(0,100%,0);
+                    opacity: 0;
+                    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
+                    transition: opacity 0.35s, transform 0.35s;
+                }
+                h2 {
+                    top: 30px;
+                    -webkit-transition: -webkit-transform 0.35s;
+                    transition: transform 0.35s;
+                    -webkit-transform: translate3d(0,20px,0);
+                    transform: translate3d(0,20px,0);
+                    &:after {
+                        @include o-position-absolute(100%, auto, auto, 0);
+                        width: 100%;
+                        height: 4px;
+                        background: #fff;
+                        content: "";
+                        -webkit-transform: translate3d(0,40px,0);
+                        transform: translate3d(0,40px,0);
+                        opacity: 0;
+                        -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
+                        transition: opacity 0.35s, transform 0.35s;
+                    }
+                }
+            }
+            .s_latest_posts_post:hover > div:not(.o_record_cover_container):not(.js-loading) {
+                h2 {
+                    -webkit-transform: translate3d(0,0,0);
+                    transform: translate3d(0,0,0);
+                }
+                h2::after, p {
+                    opacity: 1;
+                    -webkit-transform: translate3d(0,0,0);
+                    transform: translate3d(0,0,0);
+                }
+            }
+        }
+        &.effect-steve .s_latest_posts_post {
+            z-index: auto;
+            &::before {
+                content: "";
+                @include o-position-absolute(0, $grid-gutter-width/2, 0, $grid-gutter-width/2);
+                background: #000;
+            }
+            > div:not(.o_record_cover_container):not(.js-loading) {
+                z-index: 1;
+            }
+            .thumb {
+                opacity: 1;
+                transition: transform 0.35s;
+                transform: perspective(1000px) translate3d(0,0,0);
+            }
+            h2, p {
+                background: #fff;
+                color: #2d434e;
+            }
+            h2 {
+                position: relative;
+                margin-top: 0.1em;
+                padding: 0.25em;
+                &:before {
+                    box-shadow: 0 1px 10px rgba(0,0,0,0.5);
+                }
+            }
+            p {
+                margin-top: 1em !important;
+                padding: 0.5em;
+                font-weight: 800;
+                opacity: 0;
+                transition: opacity 0.35s, transform 0.35s;
+                transform: scale3d(0.9,0.9,1);
+            }
+            &:hover {
+                h2:before {
+                    opacity: 0;
+                }
+                .thumb {
+                    transform: perspective(1000px) translate3d(0,0,21px);
+                }
+                p {
+                    opacity: 1;
+                    transform: scale3d(1,1,1);
+                }
+            }
+        }
+
+        &.first_is_big .s_latest_posts_post:first-child {
+            flex: 0 0 100%;
+            max-width: 100%;
+        }
+    }
+}
+
+.s_latest_posts_big_orizontal {
+    .o_record_cover_container {
+        width: auto;
+        height: auto;
+        padding: 0;
+    }
+
+    .js_get_posts {
+        position: relative;
+        width: 100%;
+        display: flex;
+        padding: 0;
+        margin: 0;
+        overflow: visible;
+        text-align: left;
+        .s_latest_posts_post {
+            //display: table-cell;
+            flex-grow: 1;
+            position: relative;
+            figcaption:after {
+                position: relative;
+                width: 100%;
+                height: 150px;
+                content: "";
+                display: block;
+            }
+            h4 {
+                position: relative;
+                text-align: left;
+                padding-right: 5%;
+                &:before {
+                    content: "";
+                    z-index: 0;
+                    display: inline;
+                    float: left;
+                    width: 20%;
+                    position: absolute;
+                    top: 49%;
+                    left: 0;
+                    border-bottom: 1px solid $body-color;
+                }
+                a {
+                    z-index: 1;
+                    display: block;
+                    line-height: 1;
+                    padding-left: 25%;
+                    position: relative;
+                }
+            }
+            h5 {
+                padding-left: 24%;
+            }
+            > a {
+                bottom: 0;
+                display: block;
+                background: theme-color('primary');
+                width: 100%;
+                height: 150px;
+                position: absolute;
+                overflow: hidden;
+                > div {
+                    height: 100%;
+                    width: 100%;
+                    background-size: cover;
+                    background-position: center;
+                    opacity: 1;
+                    transform: scale(1);
+                    transform-origin: 50%;
+                    transition: all 400ms;
+                    backface-visibility: hidden;
+                    &:hover {
+                        opacity: 0.8;
+                        transform: scale(1.1);
+                    }
+                }
+            }
+            @include media-breakpoint-down(sm) {
+                display: inline-block;
+                margin-bottom: 2em;
+                width: 50%;
+            }
+            @media only screen and (max-width : 480px) { // FIXME
+                width: 100%;
+            }
+        }
+        @include media-breakpoint-down(sm) {
+            display: block;
+        }
+    }
+}
diff --git a/addons/website_blog/static/src/snippets/s_latest_posts/001.scss b/addons/website_blog/static/src/snippets/s_latest_posts/001.scss
new file mode 100644
index 00000000..d36d12f3
--- /dev/null
+++ b/addons/website_blog/static/src/snippets/s_latest_posts/001.scss
@@ -0,0 +1,315 @@
+.s_latest_posts[data-vcss='001'] {
+    .s_latest_posts_loader {
+        @include o-position-absolute(0, 0, 0, 0);
+        transform: translateZ(1px);
+
+        > div {
+            animation: o-wblog-loader 2.4s cubic-bezier(0, 0.2, 0.8, 1) infinite;
+            max: {width: 30px; height: 30px;}
+        }
+    }
+
+    .s_latest_posts_post_title  {
+        font-weight: $headings-font-weight;
+        // Tweek line-height to help fit multi-line titles.
+        line-height: 1;
+    }
+
+    .s_latest_posts_post_subtitle {
+        font-size: 1em;
+    }
+
+    // The two following rules prevent having an empty spot on medium breakpoint
+    // for non-list layouts (lg:3x1, md:2x2, sm: 1x3) list is always 1x3.
+    .s_latest_posts_post:nth-child(4) {
+        display: none !important;
+    }
+    @include media-breakpoint-only(md) {
+        :not(.s_latest_posts_list) > .s_latest_posts_post:nth-child(4) {
+            display: block !important;
+        }
+    }
+
+    .s_latest_posts_list {
+        // Set sizes relative to the container font-size.
+        // (handle parents with, for example, '.small' or '.h1' classes)
+        .s_latest_posts_post_cover {
+            @include size(3.5em);
+            max: {width: 85px; height: 85px}
+        }
+
+        .s_latest_posts_post_title  {
+            font-size: 1.25em;
+        }
+    }
+
+    .s_latest_posts_big_picture {
+        .s_latest_posts_post {
+            min-height: 150px;
+
+            figcaption {
+                position: relative;
+                justify-content: center;
+            }
+
+            .s_latest_posts_post_cover {
+                min-height: 100%;
+
+                .o_record_cover_container {
+                    top: 0;
+                }
+            }
+
+            .s_latest_posts_post_title  {
+                @include font-size($h3-font-size);
+                margin-bottom: 0.5em;
+                word-spacing: -0.15em;
+            }
+        }
+
+        &.js_get_posts {
+            .s_latest_posts_post_subtitle {
+                margin: 0;
+            }
+
+            &.s_latest_posts_effect_marley {
+                figcaption {
+                    text-align: right;
+                    .s_latest_posts_post_title, .s_latest_posts_post_subtitle {
+                        padding: 10px 0;
+                    }
+                    .s_latest_posts_post_subtitle {
+                        bottom: 30px;
+                        line-height: 1.5;
+                        transform: translate3d(0,100%,0);
+                        opacity: 0;
+                        transition: opacity 0.35s, transform 0.35s;
+                    }
+                    .s_latest_posts_post_title {
+                        top: 30px;
+                        transition: transform 0.35s;
+                        transform: translate3d(0,20px,0);
+                        &:after {
+                            @include o-position-absolute(100%, auto, auto, 0);
+                            width: 100%;
+                            height: 2px;
+                            background: #fff;
+                            content: "";
+                            transform: translate3d(0,40px,0);
+                            opacity: 0;
+                            transition: opacity 0.35s, transform 0.35s;
+                        }
+                    }
+                }
+                .s_latest_posts_post:hover figcaption {
+                    .s_latest_posts_post_title {
+                        transform: translate3d(0,0,0);
+                    }
+                    .s_latest_posts_post_title::after, .s_latest_posts_post_subtitle {
+                        opacity: 1;
+                        transform: translate3d(0,0,0);
+                    }
+                }
+            }
+            &.s_latest_posts_effect_dexter .s_latest_posts_post {
+                .o_record_cover_container {
+                    transition: opacity 0.35s;
+                }
+                figcaption {
+                    &::before {
+                        content: "";
+                        @include o-position-absolute(0, 0, 0, 0);
+                        background: linear-gradient(to bottom, darken(theme-color('secondary'), 10%) 0%, darken(theme-color('secondary'), 30%) 100%);
+                        z-index: -1;
+                    }
+                    padding: 3em;
+                    text-align: left;
+                    &:after {
+                        @include o-position-absolute(10px, 10px, 10px, 10px);
+                        border: 2px solid #fff;
+                        border-top-width: 4px;
+                        border-bottom-width: 4px;
+                        content: "";
+                        transition: transform-origin 0.35s;
+                        transform: scaleY(0.5);
+                        transform-origin: top;
+                    }
+                }
+                .s_latest_posts_post_subtitle {
+                    @include o-position-absolute(auto, 20px, 20px, 20px);
+                    opacity: 0;
+                    transition: opacity 0.35s linear, transform 0.35s;
+                    transform: translate3d(0,-100px,0);
+                }
+                .s_latest_posts_post_title {
+                    @include o-position-absolute(20px, 20px, auto, 20px);
+                }
+                &:hover {
+                    .o_record_cover_container {
+                        opacity: 0.4 !important;
+                    }
+                    figcaption::after {
+                        transform-origin: bottom;
+                    }
+                    .s_latest_posts_post_subtitle {
+                        opacity: 1;
+                        transform: translate3d(0, 0, 0);
+                    }
+                }
+            }
+            &.s_latest_posts_effect_chico {
+                .o_record_cover_image {
+                    transition: opacity 0.35s, transform 0.35s;
+                    transform: scale(1.12);
+                }
+                .s_latest_posts_post figcaption {
+                    &::before {
+                        @include o-position-absolute(15px,15px,15px,15px);
+                        border: 1px solid #fff;
+                        content: "";
+                        transform: scale(1.1);
+                        opacity: 0;
+                        transition: opacity 0.35s, transform 0.35s;
+                    }
+                }
+                .s_latest_posts_post_subtitle {
+                    opacity: 0;
+                    transition: opacity 0.35s, transform 0.35s;
+                    margin-left: auto;
+                    margin-right: auto;
+                    max-width: 200px;
+                    transform: scale(1.5);
+                }
+                .s_latest_posts_post_title {
+                    padding: 0;
+                }
+                .s_latest_posts_post:hover {
+                    .o_record_cover_image {
+                        transform: scale(1);
+                    }
+                    figcaption::before, .s_latest_posts_post_subtitle {
+                        opacity: 1;
+                        transform: scale(1);
+                    }
+                }
+            }
+        }
+    }
+
+    .s_latest_posts_horizontal {
+        .o_record_cover_container {
+            width: auto;
+            height: auto;
+            padding: 0;
+        }
+
+        &.js_get_posts {
+            position: relative;
+            overflow: visible;
+            text-align: left;
+            .s_latest_posts_post {
+                position: relative;
+                figcaption:after {
+                    position: relative;
+                    width: 100%;
+                    height: 150px;
+                    content: "";
+                    display: block;
+                }
+                h4 {
+                    position: relative;
+                    text-align: left;
+                    padding-right: 5%;
+                    &:before {
+                        content: "";
+                        z-index: 0;
+                        display: inline;
+                        float: left;
+                        width: 20%;
+                        position: absolute;
+                        top: 49%;
+                        left: 0;
+                        border-bottom: 1px solid $body-color;
+                    }
+                    a {
+                        z-index: 1;
+                        display: block;
+                        line-height: 1;
+                        padding-left: 25%;
+                        position: relative;
+                    }
+                }
+                h5 {
+                    padding-left: 24%;
+                }
+                > a {
+                    position: absolute;
+                    bottom: 0;
+                    left: 0;
+                    display: block;
+                    background: theme-color('primary');
+                    width: 100%;
+                    height: 150px;
+                    overflow: hidden;
+                    > div {
+                        height: 100%;
+                        width: 100%;
+                        background-size: cover;
+                        background-position: center;
+                        opacity: 1;
+                        transform-origin: 50%;
+                        transition: all 400ms;
+                        backface-visibility: hidden;
+                        &:hover {
+                            opacity: 0.8;
+                            transform: scale(1.1);
+                        }
+                    }
+                }
+                @media only screen and (max-width : 480px) { // FIXME
+                    width: 100%;
+                }
+            }
+            @include media-breakpoint-down(sm) {
+                display: block;
+            }
+        }
+    }
+
+    .s_latest_posts_card {
+        .card {
+            height: 100%;
+            box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.17);
+
+            .s_latest_posts_post_cover {
+                height: 170px;
+
+                .o_record_cover_container {
+                    background-color: transparent !important;
+
+                    .o_record_cover_image {
+                        @extend .card-img-top;
+                    }
+                }
+            }
+
+            a:hover {
+                text-decoration: none;
+            }
+
+            h4 {
+                font-size: 19px;
+                font-weight: 600;
+            }
+
+            .card-footer {
+                background-color: transparent;
+                border-top: 2px solid rgba(0, 0, 0, 0.06);
+
+                .text-muted {
+                    color: rgba(52, 58, 64, 0.4) !important;
+                }
+            }
+        }
+    }
+}
diff --git a/addons/website_blog/static/src/snippets/s_latest_posts/options.js b/addons/website_blog/static/src/snippets/s_latest_posts/options.js
new file mode 100644
index 00000000..e70c4041
--- /dev/null
+++ b/addons/website_blog/static/src/snippets/s_latest_posts/options.js
@@ -0,0 +1,32 @@
+odoo.define('website_blog.s_latest_posts_editor', function (require) {
+'use strict';
+
+var sOptions = require('web_editor.snippets.options');
+var wUtils = require('website.utils');
+
+sOptions.registry.js_get_posts_selectBlog = sOptions.Class.extend({
+
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
+    /**
+     * @override
+     */
+    _renderCustomXML: function (uiFragment) {
+        return this._rpc({
+            model: 'blog.blog',
+            method: 'search_read',
+            args: [wUtils.websiteDomain(this), ['name']],
+        }).then(blogs => {
+            const menuEl = uiFragment.querySelector('[name="blog_selection"]');
+            for (const blog of blogs) {
+                const el = document.createElement('we-button');
+                el.dataset.selectDataAttribute = blog.id;
+                el.textContent = blog.name;
+                menuEl.appendChild(el);
+            }
+        });
+    },
+});
+});