[MERGE] [ADD] website_twitter: add twitter scroller snippet

bzr revid: odo@openerp.com-20140410174622-j2waid38nk3fqitt

9 files changed, 447 insertions, 0 deletions

diff --git a/addons/website_twitter/static/src/css/Makefile b/addons/website_twitter/static/src/css/Makefile
new file mode 100644
index 00000000000..21d0e6cdc39
--- /dev/null
+++ b/addons/website_twitter/static/src/css/Makefile
@@ -0,0 +1,3 @@
+sass:
+	sass -t expanded --compass --unix-newlines --watch website.twitter.sass:website.twitter.css
+	 
diff --git a/addons/website_twitter/static/src/css/website.twitter.css b/addons/website_twitter/static/src/css/website.twitter.css
new file mode 100644
index 00000000000..b44bf800bd7
--- /dev/null
+++ b/addons/website_twitter/static/src/css/website.twitter.css
@@ -0,0 +1,110 @@
+.wrap-row {
+  position: relative;
+  overflow: hidden;
+  height: 310px;
+}
+.wrap-row .twitter-row {
+  position: absolute;
+  width: 100%;
+  height: auto;
+}
+.wrap-row .twitter-row div.scrollWrapper {
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+}
+.wrap-row .twitter-row div.scrollableArea {
+  position: relative;
+  width: auto;
+  height: 100%;
+}
+.wrap-row .twitter-row div .tweet {
+  border: 1px solid #cccccc;
+  max-width: 500px;
+  width: 500px;
+  font-size: 0.8em;
+  padding-top: 12px;
+  padding-right: 10px;
+  padding-bottom: 12px;
+  padding-left: 10px;
+  float: left;
+  display: block;
+  margin: 6px;
+  max-height: 90px;
+  height: 90px;
+  opacity: 0.6;
+}
+.wrap-row .twitter-row div .tweet h4, .wrap-row .twitter-row div .tweet p {
+  padding: 0;
+  margin: 0;
+}
+.wrap-row .twitter-row div .tweet .left {
+  display: block;
+  float: left;
+  width: 80px;
+}
+.wrap-row .twitter-row div .tweet .left img {
+  width: 65px;
+  height: auto;
+  float: left;
+  display: block;
+  margin: 0px 5px 0px -5px;
+}
+.wrap-row .twitter-row div .tweet .right {
+  display: block;
+  float: left;
+  width: 470px;
+}
+.wrap-row .twitter-row div .tweet .right .top {
+  height: 20px;
+}
+.wrap-row .twitter-row div .tweet h4 {
+  font-size: 14px;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-weight: bold;
+  color: black;
+  float: left;
+  display: block;
+  position: relative;
+  margin-left: 70px;
+  margin-top: -65px;
+}
+.wrap-row .twitter-row div .tweet h4 span {
+  color: #cccccc;
+  font-weight: bold;
+  font-size: 14px;
+}
+.wrap-row .twitter-row div .tweet p {
+  line-height: 1.5em;
+  float: left;
+  position: relative;
+  display: block;
+}
+.wrap-row .twitter-row div .tweet .date {
+  float: right;
+  line-height: 0.5em;
+  margin-top: -60px;
+  margin-right: -10px;
+}
+.wrap-row .twitter-row div .tweet .right .bottom p {
+  margin-top: -65px;
+  margin-left: 70px;
+  font-size: 12px;
+  word-break: break-word;
+}
+.wrap-row .twitter-row div .tweet:hover {
+  -webkit-box-shadow: 0.5px 0.5px 0.5px 1px #428bca;
+  -moz-box-shadow: 0.5px 0.5px 0.5px 1px #428bca;
+  box-shadow: 0.5px 0.5px 0.5px 1px #428bca;
+  cursor: pointer;
+  opacity: 1;
+}
+
+@media screen and (max-width: 580px) {
+  .wrap-row {
+    position: relative;
+    overflow: hidden;
+    height: 100px;
+  }
+}
diff --git a/addons/website_twitter/static/src/css/website.twitter.sass b/addons/website_twitter/static/src/css/website.twitter.sass
new file mode 100644
index 00000000000..9eca59eb6ce
--- /dev/null
+++ b/addons/website_twitter/static/src/css/website.twitter.sass
@@ -0,0 +1,94 @@
+.wrap-row
+    position: relative
+    overflow: hidden
+    height: 310px
+    .twitter-row
+        position: absolute
+        width: 100%
+        height: auto
+        div
+            &.scrollWrapper
+                position: relative
+                overflow: hidden
+                width: 100%
+                height: 100%
+            &.scrollableArea
+                position: relative
+                width: auto
+                height: 100%
+            .tweet
+                border: 1px solid #ccc
+                max-width: 500px
+                width: 500px
+                font-size: 0.8em
+                padding-top: 12px
+                padding-right: 10px
+                padding-bottom: 12px
+                padding-left: 10px
+                float: left
+                display: block
+                margin: 6px
+                max-height: 90px
+                height: 90px
+                opacity: 0.6
+                h4, p
+                    padding: 0
+                    margin: 0
+                .left
+                    display: block
+                    float: left
+                    width: 80px
+                    img
+                        width: 65px
+                        height: auto
+                        float: left
+                        display: block
+                        margin: 0px 5px 0px -5px
+                .right
+                    display: block
+                    float: left
+                    width: 470px
+                    .top
+                        height: 20px
+                h4
+                    font-size: 14px
+                    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif
+                    font-weight: bold
+                    color: #000
+                    float: left
+                    display: block
+                    position: relative
+                    margin-left: 70px
+                    margin-top: -65px
+                    span
+                        color: #ccc
+                        font-weight: bold
+                        font-size: 14px
+                p
+                    line-height: 1.5em
+                    float: left
+                    position: relative
+                    display: block
+                    &.date
+                        float: right
+                        line-height: 0.5em
+                        margin-top: -60px
+                        margin-right: -10px
+                .right .bottom p
+                    margin-top: -65px
+                    margin-left: 70px
+                    font-size: 12px
+                    word-break: break-word
+                &:hover
+                    -webkit-box-shadow: 0.5px 0.5px 0.5px 1px #428BCA
+                    -moz-box-shadow: 0.5px 0.5px 0.5px 1px #428BCA
+                    box-shadow: 0.5px 0.5px 0.5px 1px #428BCA
+                    cursor: pointer
+                    opacity: 1
+
+
+@media screen and (max-width: 580px)
+    .wrap-row
+        position: relative
+        overflow: hidden
+        height: 100px
diff --git a/addons/website_twitter/static/src/img/api_key.png b/addons/website_twitter/static/src/img/api_key.png
new file mode 100644
index 00000000000..8f53f9649fa
--- /dev/null
+++ b/addons/website_twitter/static/src/img/api_key.png
diff --git a/addons/website_twitter/static/src/img/loadtweet.gif b/addons/website_twitter/static/src/img/loadtweet.gif
new file mode 100644
index 00000000000..f8a0a6179bd
--- /dev/null
+++ b/addons/website_twitter/static/src/img/loadtweet.gif
diff --git a/addons/website_twitter/static/src/img/twitter_scroll.png b/addons/website_twitter/static/src/img/twitter_scroll.png
new file mode 100644
index 00000000000..b8d602d519a
--- /dev/null
+++ b/addons/website_twitter/static/src/img/twitter_scroll.png
diff --git a/addons/website_twitter/static/src/js/website.twitter.animation.js b/addons/website_twitter/static/src/js/website.twitter.animation.js
new file mode 100644
index 00000000000..bb19fd5e66a
--- /dev/null
+++ b/addons/website_twitter/static/src/js/website.twitter.animation.js
@@ -0,0 +1,144 @@
+(function () {
+    'use strict';
+    var website = openerp.website,
+        qweb = openerp.qweb;
+ 
+    qweb.add_template('/website_twitter/static/src/xml/website.twitter.xml');
+    if (!website.snippet) website.snippet = {};
+    website.snippet.animationRegistry.twitter = website.snippet.Animation.extend({
+        selector: ".twitter",
+        start: function () {
+            var self = this;
+            var timeline = this.$target.find(".twitter_timeline");
+
+            this.$target.on('click', '.twitter_timeline .tweet', function($event) {
+                if ($event.target.tagName.toLowerCase() !== "a") {
+                    var url = $($event.currentTarget).data('url');
+                    if (url) {
+                        window.open(url, '_blank');
+                    }
+                    else {
+                        debugger;
+                    }
+                }
+            });
+            $("<center><div><img src='/website_twitter/static/src/img/loadtweet.gif'></div></center>").appendTo(timeline);
+            openerp.jsonRpc('/get_favorites','call', {}).then(function(data) {
+                self.$target.find(".twitter_timeline").empty();
+                if (data.error) {
+                    self.error(data);
+                }
+                else {
+                    self.render(data);
+                    self.setupMouseEvents();
+                }
+             });
+        },
+        stop: function() {
+            $(this).find('.scrollWrapper').each(function(index, el){
+                self.stop_scrolling($(el));
+            });
+            this.clearMouseEvents();
+        },
+        error: function(data){
+            var $error = $(qweb.render("website.Twitter.Error", {'data': data}));
+            $error.appendTo(this.$target.find(".twitter_timeline"));
+        },
+        parse_tweet: function (tweet) {
+            var create_link = function (url, text) {
+                var c = $("<a>", {
+                    text: text,
+                    href: url,
+                    target: "_blank"
+                });
+                return c.prop("outerHTML");
+            };
+            return tweet.text.replace(/[A-Za-z]+:\/\/[A-Za-z0-9-_]+\.[A-Za-z0-9-_:%&~\?\/.=]+/g,
+                                     function (url) { return create_link(url, url) })
+                             .replace(/[@]+[A-Za-z0-9_]+/g,
+                                     function (screen_name) { return create_link("http://twitter.com/" + screen_name.replace("@",""), screen_name); })
+                             .replace(/[#]+[A-Za-z0-9_]+/g,
+                                     function (hashtag) { return create_link("http://twitter.com/search?q="+hashtag.replace("#",""), hashtag); });
+        },
+        parse_date: function(tweet) {
+            var d = new Date(tweet.created_at);
+            return d.toDateString();
+        },
+        setupMouseEvents: function() {
+            var self = this;
+            this.$scroller.mouseenter(function() {
+                $(this).find('.scrollWrapper').each(function(index, el){
+                    self.stop_scrolling($(el));
+                });
+            }).mouseleave(function() {
+                 $(this).find('.scrollWrapper').each(function(index, el){
+                    self.start_scrolling($(el));
+                });
+            });
+        },
+        clearMouseEvents: function() {
+            if (this.$scroller) {
+                this.$scroller.off('mouseenter')
+                              .off('mouseleave');
+            }
+        },
+        render: function(data){
+            var self = this;
+            var timeline =  this.$target.find(".twitter_timeline");
+            var tweets = [];
+            $.each(data, function (e, tweet) {
+                tweet.created_at = self.parse_date(tweet);
+                tweet.text = self.parse_tweet(tweet);
+                tweets.push(qweb.render("website.Twitter.Tweet", {'tweet': tweet}));
+            });
+            
+            var f = Math.floor(tweets.length / 3);
+            var tweet_slice = [tweets.slice(0, f).join(" "), tweets.slice(f, f * 2).join(" "), tweets.slice(f * 2, tweets.length).join(" ")];
+            
+            this.$scroller = $(qweb.render("website.Twitter.Scroller"));
+            this.$scroller.appendTo(this.$target.find(".twitter_timeline"));
+            this.$scroller.find("div[id^='scroller']").each(function(index, element){
+                var scrollWrapper = $('<div class="scrollWrapper"></div>');
+                var scrollableArea = $('<div class="scrollableArea"></div>');
+                scrollWrapper.append(scrollableArea)
+                             .data('scrollableArea', scrollableArea);
+                scrollableArea.append(tweet_slice[index]);
+                $(element).append(scrollWrapper);
+                scrollableArea.width(self.get_wrapper_width(scrollableArea));
+                scrollWrapper.scrollLeft(index*180);
+                self.start_scrolling(scrollWrapper);
+            });
+        },
+        get_wrapper_width: function(wrapper){
+            var total_width = 0;
+            wrapper.children().each(function(){
+                total_width += $(this).outerWidth(true);
+            });
+            return total_width;
+        },
+        start_scrolling: function(wrapper){
+            var self = this;
+            wrapper.data("getNextElementWidth", true);
+            wrapper.data("autoScrollingInterval", setInterval(function () {
+                wrapper.scrollLeft(wrapper.scrollLeft() + 1);
+                self.swap_right(wrapper);
+            }, 20));
+        },
+        stop_scrolling: function(wrapper){
+            clearInterval(wrapper.data('autoScrollingInterval'));
+        },
+        swap_right: function(wrapper){
+            if (wrapper.data("getNextElementWidth")) {
+                wrapper.data("swapAt", wrapper.data("scrollableArea").children(":first").outerWidth(true));
+                wrapper.data("getNextElementWidth", false);
+            }
+            if (wrapper.data("swapAt") <= wrapper.scrollLeft()){
+                var swap_el = wrapper.data("scrollableArea").children(":first").detach();
+                wrapper.data("scrollableArea").append(swap_el);
+                wrapper.scrollLeft(wrapper.scrollLeft() - swap_el.outerWidth(true));
+                wrapper.data("getNextElementWidth", true);
+            }
+        },
+    });
+
+})();
diff --git a/addons/website_twitter/static/src/js/website.twitter.editor.js b/addons/website_twitter/static/src/js/website.twitter.editor.js
new file mode 100644
index 00000000000..69a1896695a
--- /dev/null
+++ b/addons/website_twitter/static/src/js/website.twitter.editor.js
@@ -0,0 +1,51 @@
+(function () {
+    'use strict';
+    var website = openerp.website,
+        qweb = openerp.qweb;
+
+    website.snippet.options["twitter"] = website.snippet.options.marginAndResize.extend({
+        start: function(){
+            this._super();
+            this.make_hover_config();
+            this.$target.find('.lnk_configure').click(function(e){
+                 window.location = e.target.href;
+            });
+            if (this.$target.data("snippet-view")) {
+                this.$target.data("snippet-view").stop();
+            }
+        },
+        twitter_reload: function(){
+            openerp.jsonRpc('/twitter_reload','call', {});
+        },
+        make_hover_config: function(){
+            var self = this;
+            var $configuration = $(qweb.render("website.Twitter.Reload")).hide().appendTo(document.body).click(function (e) {
+                e.preventDefault();
+                e.stopPropagation();
+                self.twitter_reload();
+            });
+            this.$target.on('mouseover', '', function () {
+                var $selected = $(this);
+                var position = $selected.offset();
+                $configuration.show().offset({
+                        top: $selected.outerHeight() / 2
+                                + position.top
+                                - $configuration.outerHeight() / 2,
+                        left: $selected.outerWidth() / 2
+                                + position.left
+                                - $configuration.outerWidth() / 2,
+                    })
+            }).on('mouseleave', '', function (e) {
+                var current = document.elementFromPoint(e.clientX, e.clientY);
+                if (current === $configuration[0]) {
+                    return;
+                }
+                $configuration.hide();
+            });
+        },
+        clean_for_save: function () {
+            this.$target.find(".twitter_timeline").empty();
+        },
+    });
+
+})();
diff --git a/addons/website_twitter/static/src/xml/website.twitter.xml b/addons/website_twitter/static/src/xml/website.twitter.xml
new file mode 100644
index 00000000000..25c6121e166
--- /dev/null
+++ b/addons/website_twitter/static/src/xml/website.twitter.xml
@@ -0,0 +1,45 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates id="template" xml:space="preserve">
+
+    <t t-name="website.Twitter.Tweet">
+        <div class="tweet" t-attf-data-url="http://twitter.com/#{tweet.user.screen_name}/status/#{tweet.id_str}" t-attf-data-tweet-id="#{tweet.id_str}">
+          <div class="left">
+              <img t-att-src="tweet.user.profile_image_url"/>
+          </div>
+          <div class="right">
+              <div class="top">
+                  <h4>
+                      <t t-esc="tweet.user.name"/>
+                      <span>
+                          <a t-att-href="'https://twitter.com/' + tweet.user.screen_name" target="_blank"><t t-esc="'@' + tweet.user.screen_name "/></a>
+                      </span>
+                  </h4>
+                  <a class="date" target="_blank" t-attf-href="http://twitter.com/#{tweet.user.screen_name}/status/#{tweet.id_str}"><t t-esc="tweet.created_at"/></a>
+              </div>
+              <div class="bottom"><p><t t-raw="tweet.text"/></p></div>
+          </div>
+        </div>
+    </t>
+    <t t-name="website.Twitter.Scroller">
+             <div class="wrap-row" contenteditable="false">
+                    <div class="twitter-row">
+                        <div class="twitter-scroller">
+                            <div id="scroller1" ></div>
+                            <div id="scroller2" ></div>
+                            <div id="scroller3" ></div>
+                        </div>
+                    </div>
+              </div>
+    </t>
+    <t t-name="website.Twitter.Reload">
+        <button type="button" contenteditable="false" class="btn btn-primary hover-edition-button">Reload</button>
+    </t>
+    <t t-name="website.Twitter.Error">
+        <div class="alert alert-info" contenteditable="false">
+            <t t-esc="data.error"/>
+                <i t-if='!data.nodata' class="fa fa-plus-circle">
+                    <a class="lnk_configure" href="/web#action=website.action_website_configuration">Twitter Configuration</a>
+                </i>
+        </div>
+    </t>
+</templates>