[ADD] theme saas-10

snippet_latest_posts/static/description/index.html

@@ -0,0 +1,16 @@
+
+
+<div class="container">
+
+  <div class="row text-left" style="margin-top: 2em;">
+    <div class="col-sm-5">
+      <p>Present your blog posts in magazine-style layouts. <br/>
+      This snippet is great for highlighting blog content on your homepage.
+    </p>
+    </div>
+    <div class="col-sm-7">
+      <img src="screen_1.jpg" class="img-responsive" alt="">
+    </div>
+  </div>
+
+</div>

snippet_latest_posts/static/src/js/s_latest_posts_editor.js

@@ -0,0 +1,110 @@
+odoo.define('snippet_latest_posts.s_latest_posts_editor', function (require) {
+    'use strict';
+
+    var core = require('web.core');
+    var s_options = require('web_editor.snippets.options');
+    var s_animation = require('web_editor.snippets.animation');
+    var Model = require('web.Model');
+
+    var _t = core._t;
+
+    // js_get_posts
+    s_options.registry.js_get_posts = s_options.Class.extend({
+        drop_and_build_snippet: function () {
+            if (!this.$target.data('snippet-view')) {
+                this.$target.data("snippet-view", new s_animation.registry.js_get_posts(this.$target));
+            }
+        },
+
+        clean_for_save: function () {
+            this.$target.empty();
+        },
+    });
+
+    // js_get_posts limit
+    s_options.registry.js_get_posts_limit = s_options.Class.extend({
+        start: function () {
+            var self = this;
+            setTimeout(function () {
+                var ul = self.$overlay.find(".snippet-option-js_get_posts_limit > ul");
+                if (self.$target.attr("data-posts_limit")) {
+                    var limit = self.$target.attr("data-posts_limit");
+                    ul.find('li[data-posts_limit="' + limit + '"]').addClass("active");
+                } else {
+                    ul.find('li[data-posts_limit="3"]').addClass("active");
+                }
+            }, 100)
+        },
+
+        posts_limit: function (type, value, $li) {
+            var self = this;
+            if (type != "click") {return}
+            value = parseInt(value);
+            this.$target.attr("data-posts_limit",value)
+                                    .data("posts_limit",value)
+                                    .data('snippet-view').redrow(true);
+            setTimeout(function () {
+                $li.parent().find("li").removeClass("active");
+                $li.addClass("active");
+            }, 100);
+        },
+    });
+
+    // js_get_posts Select Blog
+    s_options.registry.js_get_posts_selectBlog = s_options.Class.extend({
+        start: function () {
+            this._super();
+            var self      = this;
+            var model     = new Model('blog.blog');
+            var blogsList = [];
+
+            model
+            .call('search_read',
+            [
+                [],
+                ['name','id']// attributes to get
+            ],
+            {} )
+            .then(function (blogs) {
+                self.createBlogsList(blogs)// start printing posts...
+            })
+            .fail(function (e) {
+                // No data
+                var title = _t("Oops, Huston we have a problem"),
+                    msg   = $("<div contenteditable='false' class='message error text-center'><h3>"+ title +"</h3><code>"+ e.data.message + "</code></div>" );
+                self.$target.append(msg)
+                return;
+            });
+        },
+
+        createBlogsList: function (blogs) {
+            var self = this;
+            var ul = null;
+
+            setTimeout(function () {
+                ul = self.$overlay.find(".snippet-option-js_get_posts_selectBlog > ul");
+                $(blogs).each(function () {
+                    var blog = $(this);
+                    var li = $('<li data-filter_by_blog_id="' + blog[0].id + '"><a>' + blog[0].name + '</a></li>');
+                    ul.append(li);
+                });
+                if (self.$target.attr("data-filter_by_blog_id")) {
+                    var id = self.$target.attr("data-filter_by_blog_id");
+                    ul.find("li[data-filter_by_blog_id=" + id  + "]").addClass("active");
+                }
+            },100)
+        },
+
+        filter_by_blog_id: function (type, value, $li) {
+            var self = this;
+            if (type == "click") {
+                $li.parent().find("li").removeClass("active");
+                $li.addClass("active");
+                value = parseInt(value);
+                self.$target.attr("data-filter_by_blog_id",value)
+                                        .data("filter_by_blog_id",value)
+                                        .data('snippet-view').redrow(true);
+            }
+        },
+    });
+});

snippet_latest_posts/static/src/js/s_latest_posts_frontend.js

@@ -0,0 +1,129 @@
+odoo.define('snippet_latest_posts.s_latest_posts_frontend', function (require) {
+    'use strict';
+
+    var ajax = require('web.ajax');
+    var s_animation = require('web_editor.snippets.animation');
+
+    s_animation.registry.js_get_posts = s_animation.Class.extend({
+        selector : ".js_get_posts",
+
+        start: function () {
+            this.redrow();
+        },
+
+        stop: function () {
+            this.clean();
+        },
+
+        redrow: function (debug) {
+            this.clean(debug);
+            this.build(debug);
+        },
+
+        clean: function (debug) {
+            this.$target.empty();
+        },
+
+        build: function (debug) {
+            var self     = this,
+                limit    = self.$target.data("posts_limit"),
+                blog_id  = self.$target.data("filter_by_blog_id"),
+                template = self.$target.data("template"),
+                loading  = self.$target.data("loading");
+
+            // prevent user's editing
+            self.$target.attr("contenteditable","False");
+
+            // if no data, then use defaults values
+            if (!limit) limit = 3;
+            if (!template) template = 'snippet_latest_posts.media_list_template';
+
+            // create the domain
+            var domain = [['website_published', '=', true]]
+            if (blog_id) {domain.push(['blog_id', '=', parseInt(blog_id)]); }
+
+            // call posts
+            ajax.jsonRpc('/snippet_latest_posts/render', 'call', {
+                'template': template,
+                'domain': domain,
+                'limit': limit,
+            }).then(function (posts) {
+                if (loading && loading == true) {
+                    // perfrorm an intro animation
+                    self.loading(posts, debug);
+                } else {
+                    // just print the posts
+                    $(posts).appendTo(self.$target);
+                }
+            }).fail(function (e) {
+                // debug in js console
+                return;
+            });
+        },
+
+        loading: function (posts, debug) {
+            var self = this,
+                $posts = $(posts);
+
+            if (!$posts.first().find(".loading_container") && !$posts.first().is(".loading_container")) {
+                console.log("loading_container dont exist??")
+                if (debug) {
+                    console.info("No '.loading_container' defined \n Please, add a 'loading_container' class to the element that must be filled by the loading bar");
+                }
+            } else if (!$posts.first().is(".thumb") && !$posts.first().find(".thumb")) {
+                console.log("thumb dont exist??")
+                if (debug) {
+                    console.info("No '.thumb' defined \n Please, add a 'thumb' class to your thumbnail div");
+                }
+            } else {
+                $posts.each(function () {
+                    var $post     = $(this),
+                        $load_c   = $post.find(".loading_container"),
+                        $thumb    = $post.find(".thumb"),
+                        $progress = $('<div class="progress js-loading"><div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width:0;" /></div>')
+
+                    // prevent precessing empty post
+                    if ($post.html() == undefined) {return;}
+
+                    // if can't find loading container or thumb inside the post, then they are the post itself
+                    if ($load_c.length == 0) { $load_c = $post }
+                    if ($thumb.length == 0)  { $thumb  = $post }
+
+                    $post.addClass("js-loading");
+                    $progress.appendTo($load_c);
+                    $post.appendTo(self.$target);
+
+                    var bg = $thumb.css('background-image').replace('url("','').replace('")',''),
+                        loaded = false;
+
+                    $progress.find(".progress-bar").css("width","50%").attr("aria-valuenow","50");
+
+                    var dummyImg = $('<img/>').attr('src', bg)
+                        .load(function () {
+                            // The post's background image is loaded, let's perform a gracefull intro animation
+                            $progress.find(".progress-bar").find(".progress-bar").css("width","100%").attr("aria-valuenow","100");
+                            setTimeout(function () {
+                                self.showPost($post, $progress);
+                            }, 500);
+                            $(this).remove();
+                            loaded = true;
+                        });
+
+                    // Show the post after 5sec without wait for thumb loading
+                    setTimeout(function () {
+                        if (loaded == false) {
+                            dummyImg.remove();
+                            self.showPost($post, $progress)
+                        }
+                    }, 5000);
+
+                })
+            }
+        },
+
+        showPost: function ($post, $progress) {
+            $post.removeClass("js-loading");
+            $progress.fadeOut(500);
+        },
+    });
+});

snippet_latest_posts/static/src/less/js_get_posts.less

@@ -0,0 +1,25 @@
+.js_get_posts{
+    position: relative;
+    min-height: 100px;
+    overflow: auto;
+}
+
+.progress.js-loading{
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 0;
+
+  .progress-bar{
+    margin: 0;
+    left: 10%;
+    width: 80%;
+    top: 45%;
+    height: 10px;
+    position: absolute;
+    background: #DBDBDB;
+    box-shadow: none;
+  }
+}

snippet_latest_posts/static/src/less/s_latest_posts.less

@@ -0,0 +1,30 @@
+
+// Default Style ================================
+// ==============================================
+
+.s_latest_posts {
+  .media.media_list_template{
+    .pull-left {
+      height : 200px;
+      width  : 100%;
+      a, .media-object {
+        height : 100%;
+        width  : 100%;
+        position: relative;
+        background-size: cover;
+        background-position: center;
+      }
+      @media (min-width: 768px) {
+        height : 100px;
+        width  : 100px;
+      }
+    }
+    .media, .media-body {
+      overflow: visible;
+      @media (min-width: 768px) {
+        overflow: hidden;
+      }
+    }
+  }
+}
+

snippet_latest_posts/static/src/less/s_latest_posts_big_picture.less

@@ -0,0 +1,107 @@
+
+// =============================
+// s_latest_posts_big_picture
+// =============================
+
+@s_latest_posts_big_picture-figure_bg: @brand-primary;
+
+//  ====== hooks(hook) =====================================
+//  ===========================================================
+//  Use them to inject NEW rules or overwrite the old ones.
+//  This method is more maintenable than classic css overwrite
+//  'couse it works also if the snippet's structure will change.
+
+//  How to:
+//  in your theme, just call the backdoor like a normal
+//  CSS class adding parethesis at the end ".backdoor-name()"
+//  (this will prevent the creation of a standard CSS class).
+//  Add your rules inside. Your style will take the priority.
+//  Done.
+
+//  .s_latest_posts-figure() {
+//    background: red;
+//    min-height: 200px;
+//  }
+
+.s_latest_posts-js_get_posts-hook() {};
+.s_latest_posts-figure-hook() {};
+
+.s_latest_posts_big_picture {
+  .container-fluid();
+
+  > div {
+    .row();
+
+    .content {
+      opacity:1;
+      position: relative;
+      height: 100%;
+      overflow: hidden;
+      background: @s_latest_posts_big_picture-figure_bg;
+    }
+
+    figure {
+      @media (max-width: @screen-xs-max) {
+        width: 100%;
+      }
+
+      position: relative;
+      overflow: hidden;
+      margin: 10px 0;
+      height: 250px;
+      text-align: center;
+      cursor: pointer;
+      .transition(all 300ms);
+
+      &.js-loading{
+        background: #E7E7E7!important;
+      }
+
+      .thumb {
+        position: relative;
+        display: block;
+        height: auto;
+        width: 100%;
+        height: 100%;
+        background-size: cover!important;
+        background-position: 50%;
+        opacity: 0.8;
+      }
+      figcaption, figcaption > a {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        padding: 2em;
+        color: #fff;
+        text-transform: uppercase;
+        font-size: 1.25em;
+        .backface-visibility(hidden);
+        &:after, &:before{ pointer-events: none;}
+
+        > a{
+          z-index: 1000;
+          text-indent: 200%;
+          white-space: nowrap;
+          font-size: 0;
+          opacity: 0;
+        }
+        h2 {
+          margin: 0;
+          font-size: 1.5em;
+          font-weight: 300;
+          span {font-weight: 800}
+        }
+        p{
+          margin: 0;
+          margin-top: 1em;
+          letter-spacing: 1px;
+          font-size: 68.5%;
+        }
+      }
+      .s_latest_posts-figure-hook;
+    } // global figure
+    .s_latest_posts-js_get_posts-hook;
+  }
+}