From 8cca2f028b0c1de081e93d74763767e20076db83 Mon Sep 17 00:00:00 2001
From: Dennis Collinson <dennis.collective@gmail.com>
Date: Tue, 24 Apr 2012 15:38:38 -0700
Subject: [PATCH] extract oembed view to seperate view

---
 .../javascripts/app/views/content_view.js     | 49 ++++++++++++-------
 .../app/views/stream_post_views.js            |  4 +-
 app/assets/templates/oembed.jst.hbs           | 10 ++++
 app/assets/templates/status-message.jst.hbs   | 17 ++-----
 .../javascripts/app/views/oembed_view_spec.js | 31 ++++++++++++
 .../javascripts/app/views/stream_post_spec.js | 11 +----
 6 files changed, 80 insertions(+), 42 deletions(-)
 create mode 100644 app/assets/templates/oembed.jst.hbs
 create mode 100644 spec/javascripts/app/views/oembed_view_spec.js

diff --git a/app/assets/javascripts/app/views/content_view.js b/app/assets/javascripts/app/views/content_view.js
index f40f607d9..3be2e958c 100644
--- a/app/assets/javascripts/app/views/content_view.js
+++ b/app/assets/javascripts/app/views/content_view.js
@@ -2,28 +2,17 @@
 app.views.Content = app.views.StreamObject.extend({
 
   events: {
-    "click .oembed .thumb": "showOembedContent",
     "click .expander": "expandPost"
   },
 
   presenter : function(){
     return _.extend(this.defaultPresenter(), {
       text : app.helpers.textFormatter(this.model.get("text"), this.model),
-      o_embed_html : this.embedHTML(),
       largePhoto : this.largePhoto(),
       smallPhotos : this.smallPhotos()
     });
   },
 
-  embedHTML: function(){
-    if(!this.model.get("o_embed_cache")) { return ""; }
-    var data = this.model.get("o_embed_cache").data;
-    if(data.type == "photo") {
-      return '<img src="'+data.url+'" width="'+data.width+'" height="'+data.height+'" />';
-    } else {
-      return data.html || ""
-    }
-  },
 
   largePhoto : function() {
     var photos = this.model.get("photos")
@@ -37,13 +26,6 @@ app.views.Content = app.views.StreamObject.extend({
     return photos.slice(1,8)
   },
 
-  showOembedContent: function() {
-    var oembed = $(this.el).find(".oembed");
-    var insertHTML = $( this.embedHTML() );
-    var paramSeparator = ( /\?/.test(insertHTML.attr("src")) ) ? "&" : "?";
-    insertHTML.attr("src", insertHTML.attr("src") + paramSeparator + "autoplay=1");
-    oembed.html( insertHTML );
-  },
 
   expandPost: function(evt) {
     var el = $(this.el).find('.collapsible');
@@ -95,3 +77,34 @@ app.views.ActivityStreams__Photo = app.views.Content.extend({
   templateName : "activity-streams-photo"
 });
 
+app.views.OEmbed = app.views.Base.extend({
+  templateName : "oembed",
+  events : {
+    "click .oembed .thumb": "showOembedContent"
+  },
+
+  presenter:function () {
+    return _.extend(this.defaultPresenter(), {
+      o_embed_html:this.embedHTML()
+    })
+  },
+
+  embedHTML:function () {
+    if (!this.model.get("o_embed_cache")) {
+      return "";
+    }
+    var data = this.model.get("o_embed_cache").data;
+    if (data.type == "photo") {
+      return '<img src="' + data.url + '" width="' + data.width + '" height="' + data.height + '" />';
+    } else {
+      return data.html || ""
+    }
+  },
+
+  showOembedContent:function () {
+    var insertHTML = $(this.embedHTML());
+    var paramSeparator = ( /\?/.test(insertHTML.attr("src")) ) ? "&" : "?";
+    insertHTML.attr("src", insertHTML.attr("src") + paramSeparator + "autoplay=1");
+    this.$el.html(insertHTML);
+  },
+})
\ No newline at end of file
diff --git a/app/assets/javascripts/app/views/stream_post_views.js b/app/assets/javascripts/app/views/stream_post_views.js
index 5d75c6a1e..599504911 100644
--- a/app/assets/javascripts/app/views/stream_post_views.js
+++ b/app/assets/javascripts/app/views/stream_post_views.js
@@ -6,7 +6,8 @@ app.views.StreamPost = app.views.Post.extend({
     ".feedback" : "feedbackView",
     ".likes" : "likesInfoView",
     ".comments" : "commentStreamView",
-    ".post-content" : "postContentView"
+    ".post-content" : "postContentView",
+    ".oembed" : "oEmbedView"
   },
 
   events: {
@@ -26,6 +27,7 @@ app.views.StreamPost = app.views.Post.extend({
 
     //subviews
     this.commentStreamView = new app.views.CommentStream({model : this.model});
+    this.oEmbedView = new app.views.OEmbed({model : this.model});
   },
 
 
diff --git a/app/assets/templates/oembed.jst.hbs b/app/assets/templates/oembed.jst.hbs
new file mode 100644
index 000000000..f2695f92a
--- /dev/null
+++ b/app/assets/templates/oembed.jst.hbs
@@ -0,0 +1,10 @@
+{{#if o_embed_cache}}
+    {{#if o_embed_cache.data.thumbnail_url}}
+        <div class="thumb">
+            <img src="{{o_embed_cache.data.thumbnail_url}}" />
+            <div class="video-overlay"/>
+        </div>
+    {{else}}
+        {{{o_embed_html}}}
+    {{/if}}
+{{/if}}
\ No newline at end of file
diff --git a/app/assets/templates/status-message.jst.hbs b/app/assets/templates/status-message.jst.hbs
index a20dfac00..3eb3cda82 100644
--- a/app/assets/templates/status-message.jst.hbs
+++ b/app/assets/templates/status-message.jst.hbs
@@ -1,6 +1,5 @@
 {{#if largePhoto}}
   <div class="photo_attachments">
-
     <a href="#" class="stream-photo-link">
       {{#with largePhoto}}
         <img src="{{sizes.large}}" class="stream-photo big_stream_photo" data-small-photo="{{sizes.small}}" data-full-photo="{{sizes.large}}" rel="lightbox">
@@ -12,20 +11,10 @@
         <img src="{{sizes.small}}" class="stream-photo thumb_small" data-small-photo="{{sizes.small}}" data-full-photo="{{sizes.large}}" rel="lightbox">
       </a>
     {{/each}}
+  </div>
 {{/if}}
 
 <div class="collapsible">
   {{{text}}}
-  {{#if o_embed_cache}}
-  <div class="oembed">
-    {{#if o_embed_cache.data.thumbnail_url}}
-    <div class="thumb">
-      <img src="{{o_embed_cache.data.thumbnail_url}}" />
-      <div class="video-overlay"></div>
-    </div>
-    {{else}}
-    {{{o_embed_html}}}
-    {{/if}}
-  </div>
-  {{/if}}
-</div>
+  <div class="oembed"></div>
+</div>
\ No newline at end of file
diff --git a/spec/javascripts/app/views/oembed_view_spec.js b/spec/javascripts/app/views/oembed_view_spec.js
new file mode 100644
index 000000000..047433fce
--- /dev/null
+++ b/spec/javascripts/app/views/oembed_view_spec.js
@@ -0,0 +1,31 @@
+describe("app.views.OEmbed", function(){
+  beforeEach(function(){
+    this.statusMessage = factory.statusMessage({
+      "o_embed_cache":{
+        "data":{
+          "html":"some html"
+        }
+      }
+    })
+
+    this.view = new app.views.OEmbed({model : this.statusMessage})
+  })
+
+  describe("rendering", function(){
+    it("provides oembed html from the model response", function(){
+      this.view.render()
+      expect(this.view.$el.html()).toContain("some html")
+    })
+  })
+
+  describe("presenter", function(){
+    it("provides oembed html from the model", function(){
+      expect(this.view.presenter().o_embed_html).toContain("some html")
+    })
+
+    it("does not provide oembed html from the model response if none is present", function(){
+      this.statusMessage.set({"o_embed_cache" : null})
+      expect(this.view.presenter().o_embed_html).toBe("");
+    })
+  })
+})
\ No newline at end of file
diff --git a/spec/javascripts/app/views/stream_post_spec.js b/spec/javascripts/app/views/stream_post_spec.js
index 7b0f545f6..803d58585 100644
--- a/spec/javascripts/app/views/stream_post_spec.js
+++ b/spec/javascripts/app/views/stream_post_spec.js
@@ -65,15 +65,8 @@ describe("app.views.StreamPost", function(){
           }
         }})
 
-        var view = new app.views.Content({model : this.statusMessage});
-        expect(view.presenter().o_embed_html).toContain("some html")
-      })
-
-      it("does not provide oembed html from the model response if none is present", function(){
-        this.statusMessage.set({"o_embed_cache" : null})
-
-        var view = new app.views.Content({model : this.statusMessage});
-        expect(view.presenter().o_embed_html).toBe("");
+        var view = new app.views.StreamPost({model : this.statusMessage}).render();
+        expect(view.$el.html()).toContain("some html")
       })
     })