[IMP]: inline discussion

bzr revid: aja@tinyerp.com-20140219093103-c8p6gixi6ry89w8v

addons/website_blog/controllers/main.py

@@ -27,6 +27,7 @@ from openerp import SUPERUSER_ID
 import werkzeug
 import random
 import json
+from openerp.tools import html2plaintext
 
 
 class WebsiteBlog(http.Controller):
@@ -279,7 +280,7 @@ class WebsiteBlog(http.Controller):
         values = {
             "author_name": post.author_id.name,
             "date": post.date,
-            "body": post.body,
+            "body": html2plaintext(post.body),
             "author_image": "data:image/png;base64,%s" % post.author_id.image,
             }
         return values
@@ -320,7 +321,7 @@ class WebsiteBlog(http.Controller):
                 values.append({
                     "author_name": post.author_id.name,
                     "date": post.date,
-                    'body': post.body,
+                    'body': html2plaintext(post.body),
                     'author_image': "data:image/png;base64,%s" % post.author_id.image,
                 })
         return values

addons/website_blog/static/lib/inlineDisqussions/inlineDisqussions.css

@@ -1,83 +0,0 @@
-.disqussion {
-  padding: 5px 10px 10px;
-  position: absolute;
-  top: 0;
-  left: 0;
-  line-height: 16px;
-  font-size: 13px;
-  font-weight: bold;
-  font-family: sans-serif;
-  text-align: center;
-  z-index: 7;
-}
-.disqussion>a {
-  opacity: 0;
-  display: block;
-  overflow: hidden;
-  width: 20px;
-  height: 17px;
-  color: white;
-  text-decoration: none;
-  cursor: pointer;
-  background: #bbbbbb;
-  -webkit-border-radius: 2px;
-  -moz-border-radius: 2px;
-  -ms-border-radius: 2px;
-  -o-border-radius: 2px;
-  border-radius: 2px;
-  -webkit-transition: all 0.5s;
-  -moz-transition: all 0.5s;
-  -o-transition: all 0.5s;
-  transition: all 0.5s;
-}
-.disqussion>a.has-comments {
-  opacity: .6;
-}
-.disqussion-contain:hover .disqussion>a {
-  opacity: 1;
-}
-.disqussion>a:after {
-  border-left: 7px solid transparent;
-  border-top: 7px solid #bbbbbb;
-  left: 19px;
-  top: 22px;
-  height: 0;
-  width: 0;
-  display: block;
-  content: " ";
-  position: absolute;
-  -webkit-transition: all 0.5s;
-  -moz-transition: all 0.5s;
-  -o-transition: all 0.5s;
-  transition: all 0.5s;
-}
-.disqussion:hover>a, .disqussion.hovered>a {
-  opacity: 1;
-  background: #57AD68;
-}
-.disqussion:hover>a:after, .disqussion.hovered>a:after {
-  border-top-color: #57AD68;
-}
-
-#disqussions_wrapper {
-  position: absolute;
-  top: 0;
-  left: 0;
-}
-
-#disqussions_overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.5);
-  z-index: 8;
-  display: none;
-}
-
-.disqussion .popover-content {
-    max-height: 250px;
-    width: 250px;
-    overflow: auto;
-}

addons/website_blog/static/lib/inlineDisqussions/inlineDisqussions.js

@@ -1,163 +0,0 @@
-//global vars.
-var disqus_identifier;
-
-(function($) {
-    var settings = {};
-    $.fn.extend({
-        inlineDisqussions: function(options) {
-        // Set up defaults
-            var defaults = {
-                identifier: 'name',
-                position: 'right',
-                post_id: $('#blog_post_name').attr('data-oe-id'),
-                document_user : false,
-            };
-
-            // Overwrite default options with user provided ones.
-            settings = $.extend({}, defaults, options);
-
-            // Append #disqus_thread to body if it doesn't exist yet.
-            if ($('#disqussions_wrapper').length === 0) {
-                $('<div id="disqussions_wrapper"></div>').appendTo($('#blog_content'));
-            }
-
-            // Attach a discussion to each paragraph.
-            $(this).each(function(i) {
-                disqussionNotesHandler(i, $(this));
-            });
-
-            // Hide the discussion.
-            $('html').click(function(event) {
-                if($(event.target).parents('#disqussions_wrapper, .main-disqussion-link-wrp').length === 0) {
-                    hideDisqussion();
-                    }
-            });
-        }
-    });
-
-    var disqussionNotesHandler = function(i, node) {
-
-        var identifier;
-        // You can force a specific identifier by adding an attribute to the paragraph.
-        if (node.attr('data-disqus-identifier')) {
-            identifier = node.attr('data-disqus-identifier');
-        }
-        else {
-            while ($('[data-disqus-identifier="' + settings.identifier + '-' + i + '"]').length > 0) {
-                i++;
-            }
-            identifier = settings.identifier + '-' + i;
-        }
-        openerp.jsonRpc("/blogpost/get_discussion/", 'call', {
-            'post_id': settings.post_id,
-            'discussion':identifier,
-        }).then(function(data){
-            prepareDisquseLink(data,identifier,node);
-        });
-    };
-
-    var prepareDisquseLink = function(data,identifier,node) {
-
-        var cls = data.length > 0 ? 'disqussion-link has-comments' : 'disqussion-link';
-        var a = $('<a class="'+ cls +'" />')
-            .attr('data-disqus-identifier', identifier)
-            .attr('data-disqus-position', settings.position)
-            .text(data.length > 0 ? data.length : '+')
-            .attr('data-contentwrapper','.mycontent')
-            .wrap('<div class="disqussion" />')
-            .parent()
-            .appendTo('#disqussions_wrapper');
-            a.css({
-                'top': node.offset().top,
-                'left': settings.position == 'right' ? node.offset().left + node.outerWidth() : node.offset().left - a.outerWidth()
-            });
-
-        node.attr('data-disqus-identifier', identifier).mouseover(function() {
-            a.addClass("hovered");
-        }).mouseout(function() {
-            a.removeClass("hovered");
-        });
-
-        a.delegate('a.disqussion-link', "click", function(e) {
-            e.preventDefault();
-            if ($(this).is('.active')) {
-                e.stopPropagation();
-                hideDisqussion();
-            }
-            else {
-                loadDisqus(data, $(this), function(source) {});
-            }
-        });
-    };
-
-    var disqussionPostHandler = function() {
-        openerp.jsonRpc("/blogpost/post_discussion", 'call', {
-            'blog_post_id': settings.post_id,
-            'discussion': disqus_identifier,
-            'comment': $(".popover #comment").val(),
-        }).then(function(res){
-            $(".popover ul.media-list").prepend(comments(res))
-            $(".popover #comment").val('')
-            ele = $('a[data-disqus-identifier="'+disqus_identifier+'"]');
-            ele.text(_.isNaN(parseInt(ele.text())) ? 1 : parseInt(ele.text())+1)
-        });
-    };
-
-    var comments = function(res){
-        return '<li class="media">\
-                    <div class="media-body">\
-                        <img class="media-object pull-left img-circle" src="'+ res.author_image + '" style="width: 30px; margin-right: 5px;"/>\
-                        <div class="media-body">\
-                            <h5 class="media-heading">\
-                                <small><span>'+res.author_name+'</span> on <span>'+res.date+'</span></small>\
-                            </h5>\
-                        </div>\
-                    </div>\
-                </li><li><h6>'+res.body+'</h6></li><hr class="mb0 mt0"/>' 
-    }
-
-    var loadDisqus = function(data, source, callback) {
-        var identifier = source.attr('data-disqus-identifier');
-        $('a[data-disqus-identifier="'+disqus_identifier+'"]').popover('destroy')
-        disqus_identifier = identifier;
-        var elt = $('a[data-disqus-identifier="'+identifier+'"]');
-        var cls = settings.document_user ? '' : 'hidden';
-        var login_cls = settings.document_user ? 'hidden' : '';
-        elt.append('\
-            <div class="mycontent hidden">\
-                    <input name="discussion" value="'+ identifier +'" type="hidden"/>\
-                    <input name="blog_post_id" value="'+ settings.post_id +'" type="hidden"/>\
-                    <textarea class="mb8 form-control '+ cls +'" rows="2" id="comment" placeholder="Write a comment..."/>\
-                    <button id="comment_post" class="btn btn-primary btn-xs mb8 mt4 '+cls+'">Post</button>\
-                <div class="discussion_history"/>\
-                <a class="btn btn-block btn-success '+login_cls+'" href="/web/login">Sign In</a>\
-            </div>')
-        var comment = '';
-        _.each(data, function(res){
-            comment += comments(res)
-        });
-        $('.discussion_history').html('<ul class="media-list">'+comment+'</ul>');
-        createPopOver(elt);
-
-        // Add 'active' class.
-        $('a.disqussion-link, a.main-disqussion-link').removeClass('active').filter(source).addClass('active');
-        elt.popover('hide').filter(source).popover('show');
-        callback(source);
-    };
-
-    var createPopOver = function (elt) {
-        elt.popover({
-            placement:'right', 
-            trigger:'manual',
-            html:true, content:function(){
-                return $($(this).data('contentwrapper')).html();
-            }
-        }).parent().delegate('button#comment_post').on('click',disqussionPostHandler);
-    };
-
-    var hideDisqussion = function() {
-        $('a[data-disqus-identifier="'+disqus_identifier+'"]').popover('destroy');
-        $('a.disqussion-link').removeClass('active');
-    };
-  
-})(jQuery);

addons/website_blog/static/src/css/website_blog.css

@@ -53,3 +53,91 @@ p.post-meta {
 .cover_title {
   padding-top: 20vh;
 }
+
+/*Inline Discussion */
+.discussion {
+  padding: 5px 10px 10px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  line-height: 16px;
+  font-size: 13px;
+  font-weight: bold;
+  font-family: sans-serif;
+  text-align: center;
+  z-index: 7;
+}
+.discussion > a {
+  opacity: 0;
+  display: block;
+  overflow: hidden;
+  width: 20px;
+  height: 17px;
+  color: white;
+  text-decoration: none;
+  cursor: pointer;
+  background: #bbbbbb;
+  -webkit-border-radius: 2px;
+  -moz-border-radius: 2px;
+  -ms-border-radius: 2px;
+  -o-border-radius: 2px;
+  border-radius: 2px;
+  -webkit-transition: all 0.5s;
+  -moz-transition: all 0.5s;
+  -o-transition: all 0.5s;
+  transition: all 0.5s;
+}
+.discussion > a.has-comments {
+  opacity: 0.6;
+}
+
+.discussion-contain:hover .discussion > a {
+  opacity: 1;
+}
+
+.discussion > a:after {
+  border-left: 7px solid transparent;
+  border-top: 7px solid #bbbbbb;
+  left: 19px;
+  top: 22px;
+  height: 0;
+  width: 0;
+  display: block;
+  content: " ";
+  position: absolute;
+  -webkit-transition: all 0.5s;
+  -moz-transition: all 0.5s;
+  -o-transition: all 0.5s;
+  transition: all 0.5s;
+}
+.discussion:hover > a, .discussion.hovered > a {
+  opacity: 1;
+  background: #57ad68;
+}
+.discussion:hover > a:after, .discussion.hovered > a:after {
+  border-top-color: #57ad68;
+}
+
+#discussions_wrapper {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+#discussions_overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 8;
+  display: none;
+}
+
+.discussion .popover-content {
+  max-height: 250px;
+  width: 250px;
+  overflow: auto;
+  font-weight: normal;
+}

addons/website_blog/static/src/css/website_blog.sass

@@ -49,3 +49,83 @@ p.post-meta
 
 .cover_title
     padding-top : 20vh
+
+/*Inline Discussion
+
+.discussion
+    padding: 5px 10px 10px
+    position: absolute
+    top: 0
+    left: 0
+    line-height: 16px
+    font-size: 13px
+    font-weight: bold
+    font-family: sans-serif
+    text-align: center
+    z-index: 7
+    > a
+        opacity: 0
+        display: block
+        overflow: hidden
+        width: 20px
+        height: 17px
+        color: white
+        text-decoration: none
+        cursor: pointer
+        background: #bbbbbb
+        -webkit-border-radius: 2px
+        -moz-border-radius: 2px
+        -ms-border-radius: 2px
+        -o-border-radius: 2px
+        border-radius: 2px
+        -webkit-transition: all 0.5s
+        -moz-transition: all 0.5s
+        -o-transition: all 0.5s
+        transition: all 0.5s
+        &.has-comments
+            opacity: .6
+
+.discussion-contain:hover .discussion > a
+    opacity: 1
+
+.discussion
+    > a:after
+        border-left: 7px solid transparent
+        border-top: 7px solid #bbbbbb
+        left: 19px
+        top: 22px
+        height: 0
+        width: 0
+        display: block
+        content: " "
+        position: absolute
+        -webkit-transition: all 0.5s
+        -moz-transition: all 0.5s
+        -o-transition: all 0.5s
+        transition: all 0.5s
+    &:hover > a, &.hovered > a
+        opacity: 1
+        background: #57AD68
+    &:hover > a:after, &.hovered > a:after
+        border-top-color: #57AD68
+
+#discussions_wrapper
+    position: absolute
+    top: 0
+    left: 0
+
+#discussions_overlay
+    position: fixed
+    top: 0
+    left: 0
+    right: 0
+    bottom: 0
+    background: rgba(0, 0, 0, 0.5)
+    z-index: 8
+    display: none
+
+.discussion .popover-content
+    max-height: 250px
+    width: 250px
+    overflow: auto
+    font-weight: normal

addons/website_blog/static/src/js/website_blog.inline.discussion.js

@@ -0,0 +1,155 @@
+// Inspired from https://github.com/tsi/inlinediscussions
+(function () {
+    
+    'use strict';
+    
+    var website = openerp.website,
+    qweb = openerp.qweb;
+    website.add_template_file('/website_blog/static/src/xml/website_blog.inline.discussion.xml');
+    website.blog_discussion = openerp.Class.extend({
+        init: function(options) {
+            var self = this ;
+            self.discus_identifier;
+            var defaults = {
+                identifier: 'name',
+                position: 'right',
+                post_id: $('#blog_post_name').attr('data-oe-id'),
+                document_user : false,
+                content : false,
+            };
+            self.settings = $.extend({}, defaults, options);
+            self.do_render(self);
+        },
+        do_render: function(data) {
+            var self = this;
+            console.log($('#discussions_wrapper').length)
+            if ($('#discussions_wrapper').length === 0) {
+                $('<div id="discussions_wrapper"></div>').appendTo($('#blog_content'));
+            }
+            // Attach a discussion to each paragraph.
+            $(self.settings.content).each(function(i) {
+                self.discussion_handler(i, $(this));
+            });
+            // Hide the discussion.
+            $('html').click(function(event) {
+                if($(event.target).parents('#discussions_wrapper, .main-discussion-link-wrp').length === 0) {
+                    self.hide_discussion();
+                }
+            });
+        },
+        prepare_data : function(identifier) {
+            var self = this;
+            return openerp.jsonRpc("/blogpost/get_discussion/", 'call', {
+                'post_id': self.settings.post_id,
+                'discussion':identifier,
+            })
+        },
+        discussion_handler : function(i, node) {
+            var self = this;
+            var identifier;
+            // You can force a specific identifier by adding an attribute to the paragraph.
+            if (node.attr('data-discus-identifier')) {
+                identifier = node.attr('data-discus-identifier');
+            }
+            else {
+                while ($('[data-discus-identifier="' + self.settings.identifier + '-' + i + '"]').length > 0) {
+                    i++;
+                }
+                identifier = self.settings.identifier + '-' + i;
+            }
+            self.prepare_data(identifier).then(function(data){
+                self.prepare_discuss_link(data,identifier,node)
+            });
+        },
+        prepare_discuss_link :  function(data, identifier, node) {
+            var self = this;
+            var cls = data.length > 0 ? 'discussion-link has-comments' : 'discussion-link';
+            var a = $('<a class="'+ cls +'" />')
+                .attr('data-discus-identifier', identifier)
+                .attr('data-discus-position', self.settings.position)
+                .text(data.length > 0 ? data.length : '+')
+                .attr('data-contentwrapper','.mycontent')
+                .wrap('<div class="discussion" />')
+                .parent()
+                .appendTo('#discussions_wrapper');
+            a.css({
+                'top': node.offset().top,
+                'left': self.settings.position == 'right' ? node.outerWidth() - 150: node.offset().left - a.outerWidth()
+            });
+            node.attr('data-discus-identifier', identifier).mouseover(function() {
+                a.addClass("hovered");
+            }).mouseout(function() {
+                a.removeClass("hovered");
+            });
+
+            a.delegate('a.discussion-link', "click", function(e) {
+                e.preventDefault();
+                if ($(this).is('.active')) {
+                    e.stopPropagation();
+                    self.hide_discussion();
+                }
+                else {
+                    self.get_discussion($(this), function(source) {});
+                }
+            });
+        },
+        get_discussion : function(source, callback) {
+            var self = this;
+            var identifier = source.attr('data-discus-identifier');
+            self.hide_discussion();
+            self.discus_identifier = identifier;
+            var elt = $('a[data-discus-identifier="'+identifier+'"]');
+            elt.append(qweb.render("website.blog_discussion.popover", {'identifier': identifier , 'options': self.settings}));
+            var comment = '';
+            self.prepare_data(identifier).then(function(data){
+                console.log(identifier, data);
+                _.each(data, function(res){
+                    comment += qweb.render("website.blog_discussion.comment", {'res': res});
+                });
+                $('.discussion_history').html('<ul class="media-list">'+comment+'</ul>');
+                self.create_popover(elt, identifier); 
+                // Add 'active' class.
+                $('a.discussion-link, a.main-discussion-link').removeClass('active').filter(source).addClass('active');
+                elt.popover('hide').filter(source).popover('show');
+                callback(source);
+            });
+        },
+        create_popover : function(elt, identifier) {
+            var self = this;
+            elt.popover({
+                placement:'left',
+                trigger:'manual',
+                html:true, content:function(){
+                    return $($(this).data('contentwrapper')).html();
+                }
+            }).parent().delegate(self).on('click','button#comment_post',function(e) {
+                e.stopImmediatePropagation();
+                self.post_discussion(identifier);
+            });
+        },
+        post_discussion : function(identifier) {
+            var self = this;
+            var val = $(".popover #comment").val()
+            if(val){
+                $(".popover #comment").removeClass('danger');
+                openerp.jsonRpc("/blogpost/post_discussion", 'call', {
+                    'blog_post_id': self.settings.post_id,
+                    'discussion': self.discus_identifier,
+                    'comment': val,
+                }).then(function(res){
+                    $(".popover ul.media-list").prepend(qweb.render("website.blog_discussion.comment", {'res': res}))
+                    $(".popover #comment").val('')
+                    var ele = $('a[data-discus-identifier="'+ self.discus_identifier +'"]');
+                    ele.text(_.isNaN(parseInt(ele.text())) ? 1 : parseInt(ele.text())+1)
+                });
+            }
+        },
+        hide_discussion : function() {
+            var self =  this;
+            $('a[data-discus-identifier="'+ self.discus_identifier+'"]').popover('destroy');
+            $('a.discussion-link').removeClass('active');
+        }
+        
+    });
+
+})();

addons/website_blog/static/src/js/website_blog.js

@@ -1,5 +1,7 @@
 $(document).ready(function() {
-    $("#blog_content p").inlineDisqussions({'document_user': $('#is_document_user').length}); //Allow inline comments on blog post
+    var content = $("#blog_content p");
+    if(content.length)
+        new openerp.website.blog_discussion({'document_user': $('#is_document_user').length, 'content' : content});
     $('.cover_footer').on('click',page_transist);
     $('a[href^="#blog_content"]').on('click', animate);
     $("p").share();
@@ -12,8 +14,8 @@ $(document).ready(function() {
     }
 
     function animate(event) {
-       event.stopImmediatePropagation()
-        var target = this.hash,
+        event.stopImmediatePropagation();
+        var target = this.hash;
         $target = $(target);
         $('html, body').stop().animate({
             'scrollTop': $target.offset().top
@@ -21,23 +23,29 @@ $(document).ready(function() {
             window.location.hash = target;
         });
     }
-
+    
+    
     function newpage() {
         $.ajax({
           url: newLocation,
         }).done(function(data) {
-           $('main').append($(data).find('main').html());
-           $("html").stop().animate({ scrollTop: $("#wrap:last-child").offset().top }, 1000,function(e){
-               $("#wrap:first").remove();
-               $(document).scrollTop($("#wrap:last-child").offset().top);
-           });
-           if (newLocation != window.location) {
+            $('main').html($(data).find('main').html());
+            var target = '#wrap';
+            $target = $(target);
+            $('html, body').stop().animate({
+                'scrollTop': $target.offset().top
+                }, 1000, 'linear', function () {
+                window.location.hash = target;
+            });
+            if (newLocation != window.location) {
                 history.pushState(null, null, newLocation);
             }
             //bind again it takes control from now on, until page relaod.
             $(document).find('.cover_footer').on('click',page_transist);
             $(document).find('a[href^="#blog_content"]').on('click', animate);
-            $(document).find("#blog_content p").inlineDisqussions({'document_user': $('#is_document_user').length});
+            var content = $(document).find("#blog_content p");
+            if (content)
+                new openerp.website.blog_discussion({'document_user': $('#is_document_user').length, 'content' : content});
             $("p").share();
         });
     }

addons/website_blog/static/src/xml/website_blog.inline.discussion.xml

@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates id="template" xml:space="preserve">
+    <t t-name="website.blog_discussion.comment">
+        <li class="media">
+            <div class="media-body">
+                <img class="media-object pull-left img-circle" t-att-src="res.author_image" style="width: 30px; margin-right: 5px;"/>
+                <div class="media-body">
+                    <h5 class="media-heading">
+                        <small><span t-esc='res.author_name'/> on <span t-esc='res.date'/></small>
+                    </h5>
+                </div>
+            </div>
+        </li>
+        <li>
+            <h6 t-esc='res.body'/>
+        </li>
+        <hr class="mb0 mt0"/>
+    </t>
+    <t t-name="website.blog_discussion.popover">
+        <div class="mycontent hidden">
+            <input name="discussion" t-att-value="identifier" type="hidden"/>
+            <input name="blog_post_id" t-att-value="options.post_id" type="hidden"/>
+            <textarea t-att-class="options.document_user ? 'mb8 form-control' : 'mb8 form-control hidden'" rows="2" id="comment" placeholder="Write a comment..."/>
+            <button id='comment_post' t-att-class="options.document_user ? 'btn btn-primary btn-xs mb8 mt4' : 'btn btn-primary btn-xs mb8 mt4 hidden'">Post</button>
+            <div class="discussion_history"/>
+            <a t-att-class="options.document_user ? 'btn btn-block btn-success hidden' : 'btn btn-block btn-success'" href="/web/login">Sign In</a>
+        </div>
+    </t>
+</templates>

addons/website_blog/views/website_blog_templates.xml

@@ -380,8 +380,7 @@
     <t t-call="website.layout">
         <t t-set="head">
             <link rel='stylesheet' href='/website_blog/static/src/css/website_blog.css'/>
-            <link rel='stylesheet' href='/website_blog/static/lib/inlineDisqussions/inlineDisqussions.css'/>
-            <script type="text/javascript" src="/website_blog/static/lib/inlineDisqussions/inlineDisqussions.js"></script>
+            <script type="text/javascript" src="/website_blog/static/src/js/website_blog.inline.discussion.js"></script>
             <script type="text/javascript" src="/website_blog/static/src/js/website_blog.js"/>
             <script type="text/javascript" src="/website_blog/static/lib/contentshare.js"/>
         </t>