[IMP] : display a random next blog

-> blog cover with full screen
-> animation on click next page

bzr revid: aja@tinyerp.com-20140206093823-gs4asrkpwr1e0uf6

diff --git a/addons/website_blog/controllers/main.py b/addons/website_blog/controllers/main.py
index a18505f..33aa8fe 100644 (file)
--- a/addons/website_blog/controllers/main.py
+++ b/addons/website_blog/controllers/main.py
@@ -25,6 +25,7 @@ from openerp.tools.translate import _
 from openerp import SUPERUSER_ID
 
 import werkzeug
+import random
 
 
 
@@ -205,7 +206,9 @@ class WebsiteBlog(http.Controller):
         MONTHS = [None, _('January'), _('February'), _('March'), _('April'),
             _('May'), _('June'), _('July'), _('August'), _('September'),
             _('October'), _('November'), _('December')]
-
+        post_ids = blog_post_obj.search(cr, uid, [], context=context)
+        random_post_list = list(set(post_ids)-set([blog_post.id]))
+        next_blog_id = random_post_list[random.randint(0, len(blog_ids))]
         values = {
             'blog': blog_post.blog_id,
             'blogs': blogs,
@@ -217,7 +220,8 @@ class WebsiteBlog(http.Controller):
             'nav_list': self.nav_list(),
             'enable_editor': enable_editor,
             'date': date,
-            'date_name': date and "%s %s" % (MONTHS[int(date.split("-")[1])], date.split("-")[0]) or None
+            'date_name': date and "%s %s" % (MONTHS[int(date.split("-")[1])], date.split("-")[0]) or None,
+            'next_post' : request.registry['blog.post'].browse(cr, uid, next_blog_id, context=context)
         }
         return request.website.render("website_blog.blog_post_complete", values)
 

diff --git a/addons/website_blog/static/src/css/website_blog.css b/addons/website_blog/static/src/css/website_blog.css
index 0379184..9047d0d 100644 (file)
--- a/addons/website_blog/static/src/css/website_blog.css
+++ b/addons/website_blog/static/src/css/website_blog.css
@@ -1,5 +1,4 @@
-@charset "utf-8";
-@import url(compass/css3.css);
+@charset "UTF-8";
 .css_website_mail .has-error {
   border-color: red;
 }
@@ -28,8 +27,44 @@ p.post-meta {
   -o-background-size: cover;
   background-size: cover;
   background-position: center;
+  background-repeat: no-repeat;
+  background-color: rgba(0, 0, 0, 0.3);
   height: 100vh;
   color: white;
   padding-top: 20%;
   margin-bottom: 8px;
 }
+
+.cover_footer {
+  -webkit-background-size: cover;
+  -moz-background-size: cover;
+  -o-background-size: cover;
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-color: rgba(0, 0, 0, 0.3);
+  height: 50vh;
+  color: white;
+  padding-top: 10%;
+  margin-bottom: 8px;
+}
+
+.page_fadeup_out {
+  opacity: 0;
+  -webkit-transform: scale(0.8) translate3d(0, -10%, 0);
+  -moz-transform: scale(0.8) translate3d(0, -10%, 0);
+  -ms-transform: scale(0.8) translate3d(0, -10%, 0);
+  -o-transform: scale(0.8) translate3d(0, -10%, 0);
+  transform: scale(0.8) translate3d(0, -10%, 0);
+  -webkit-transition: all 450ms cubic-bezier(0.165, 0.84, 0.44, 1);
+  -moz-transition: all 450ms cubic-bezier(0.165, 0.84, 0.44, 1);
+  -o-transition: all 450ms cubic-bezier(0.165, 0.84, 0.44, 1);
+  transition: all 450ms cubic-bezier(0.165, 0.84, 0.44, 1);
+}
+
+.page_upward {
+  -webkit-transition: all 450ms cubic-bezier(0.165, 0.84, 0.44, 1);
+  -moz-transition: all 450ms cubic-bezier(0.165, 0.84, 0.44, 1);
+  -o-transition: all 450ms cubic-bezier(0.165, 0.84, 0.44, 1);
+  transition: all 450ms cubic-bezier(0.165, 0.84, 0.44, 1);
+}

diff --git a/addons/website_blog/static/src/css/website_blog.sass b/addons/website_blog/static/src/css/website_blog.sass
index fa35001..6aa7f37 100644 (file)
--- a/addons/website_blog/static/src/css/website_blog.sass
+++ b/addons/website_blog/static/src/css/website_blog.sass
@@ -26,7 +26,40 @@ p.post-meta
     -o-background-size: cover
     background-size: cover
     background-position: center
+    background-repeat: no-repeat
+    background-color: rgba(0, 0, 0, 0.3)
     height: 100vh
     color: white
     padding-top: 20%
     margin-bottom: 8px
+
+.cover_footer
+    -webkit-background-size: cover
+    -moz-background-size: cover
+    -o-background-size: cover
+    background-size: cover
+    background-position: center
+    background-repeat: no-repeat
+    background-color: rgba(0, 0, 0, 0.3)
+    height: 50vh
+    color: white
+    padding-top: 10%
+    margin-bottom: 8px
+
+.page_fadeup_out
+    opacity: 0
+    -webkit-transform: scale(0.8) translate3d(0, -10%, 0)
+    -moz-transform: scale(0.8) translate3d(0, -10%, 0)
+    -ms-transform: scale(0.8) translate3d(0, -10%, 0)
+    -o-transform: scale(0.8) translate3d(0, -10%, 0)
+    transform: scale(0.8) translate3d(0, -10%, 0)
+    -webkit-transition: all 450ms cubic-bezier(0.165, 0.84, 0.44, 1)
+    -moz-transition: all 450ms cubic-bezier(0.165, 0.84, 0.44, 1)
+    -o-transition: all 450ms cubic-bezier(0.165, 0.84, 0.44, 1)
+    transition: all 450ms cubic-bezier(0.165, 0.84, 0.44, 1)
+
+.page_upward
+    -webkit-transition: all 450ms cubic-bezier(0.165, 0.84, 0.44, 1)
+    -moz-transition: all 450ms cubic-bezier(0.165, 0.84, 0.44, 1)
+    -o-transition: all 450ms cubic-bezier(0.165, 0.84, 0.44, 1)
+    transition: all 450ms cubic-bezier(0.165, 0.84, 0.44, 1)

diff --git a/addons/website_blog/static/src/js/website_blog.js b/addons/website_blog/static/src/js/website_blog.js
new file mode 100644 (file)
index 0000000..41b3010
--- /dev/null
+++ b/addons/website_blog/static/src/js/website_blog.js
@@ -0,0 +1,23 @@
+$(document).ready(function() {
+    $('.js_next').click(function(event) {
+        event.preventDefault();
+        var translationValue  = $('.cover_footer').get(0).getBoundingClientRect().top;
+        newLocation = this.href;
+        $('.blog_cover').addClass('page_fadeup_out');
+      
+      $('.cover_footer')
+        .addClass('page_upward')
+        .css({ "transform": "translate3d(0, -"+ translationValue +"px, 0)" })
+        .fadeIn(10000, newpage);
+    });
+    function newpage() {
+        $.ajax({
+          url: newLocation,
+        }).done(function(data) {
+           document.getElementsByTagName('html')[0].innerHTML = data;
+           if (newLocation != window.location) {
+                history.pushState(null, null, newLocation);
+            }
+        });
+    }
+});

diff --git a/addons/website_blog/views/website_blog_templates.xml b/addons/website_blog/views/website_blog_templates.xml
index 5a251b3..bb265af 100644 (file)
--- a/addons/website_blog/views/website_blog_templates.xml
+++ b/addons/website_blog/views/website_blog_templates.xml
@@ -7,6 +7,7 @@
         <script type="text/javascript" src="/website_blog/static/src/js/website_blog.editor.js"></script>
         <script type="text/javascript" src="/website_blog/static/src/js/website.tour.blog.js"></script>
         <script type="text/javascript" src="/website_blog/static/lib/contentshare.js"></script>
+        <script type="text/javascript" src="/website_blog/static/src/js/website_blog.js"/>
     </xpath>
 </template>
 
@@ -231,18 +232,27 @@
         inherit_option_id="website_blog.blog_post_complete">
     <xpath expr="//div[@id='title']" position="attributes">
         <attribute name="class">blog_cover</attribute>
-        <attribute t-if="blog_post.content_image" name="t-attf-style">background : url('data:image/png;base64,#{blog_post.content_image}') center center no-repeat;</attribute>
-        <attribute t-if="not blog_post.content_image" name="style">background : #34495E;</attribute>
+        <attribute name="t-attf-style">background-image : url(data:image/jpg;base64,#{blog_post.content_image})</attribute>
     </xpath>
     <xpath expr="//div[@id='title']" position="inside">
         <div class="text-center blog_item">
-            <img class="img-circle" t-att-src="'/website/image?model=res.partner&amp;field=image_small&amp;id='+str(blog_post.create_uid.id)" style="width: 50px; margin-right: 10px;"/>
+            <img class="img-circle" t-att-src="'/website/image?model=res.partner&amp;field=image_small&amp;id='+str(blog_post.create_uid.partner_id.id)" style="width: 30px; margin-right: 10px;"/>
             <small class="text-muted" id="blog_author" t-field="blog_post.create_uid.name"/>
         </div>
         <div class="text-center mt64">
             <a href="#blog_content"><span class="fa fa-angle-down fa-2x fa-inverse"/></a>
         </div>
     </xpath>
+    <xpath expr="//section[@id='comments']" position="after">
+        <div class="cover_footer" t-attf-style="background-image: url(data:image/jpg;base64,#{next_post.content_image})">
+            <a class="js_next " t-attf-href="/blogpost/#{ slug(next_post) }"><p class="text-center">Read Next</p></a>
+            <h1 class="text-center" t-field="next_post.name"/>
+            <div class="text-center blog_item">
+                <img class="img-circle" t-att-src="'/website/image?model=res.partner&amp;field=image_small&amp;id='+str(next_post.create_uid.partner_id.id)" style="width: 30px; margin-right: 10px;"/>
+                <small class="text-muted" id="blog_author" t-field="next_post.create_uid.name"/>
+            </div>
+        </div>
+    </xpath>
 </template>
 
 <template id="blog_footer" name="Blog Footer"