diff --git a/config/assets.yml b/config/assets.yml index 86ea18512..04e8e34fb 100644 --- a/config/assets.yml +++ b/config/assets.yml @@ -17,6 +17,7 @@ javascripts: - public/javascripts/vendor/Mustache.js - public/javascripts/view.js - public/javascripts/stream.js + - public/javascripts/embedder.js - public/javascripts/application.js - public/javascripts/diaspora.js - public/javascripts/widgets/alert.js diff --git a/public/javascripts/embedder.js b/public/javascripts/embedder.js new file mode 100644 index 000000000..31b2e681d --- /dev/null +++ b/public/javascripts/embedder.js @@ -0,0 +1,70 @@ +/** + * Created by . + * User: dan + * Date: Jan 22, 2011 + * Time: 10:37:19 PM + * To change this template use File | Settings | File Templates. + */ + + +var Embedder = { + services: {}, + register: function(service, template) { + Embedder.services[service] = template; + }, + render: function(service, views) { + var template = (typeof Embedder.services[service] === "string") + ? Embedder.services[service] + : Embedder.services.undefined; + + return $.mustache(template, views); + }, + embed: function($this) { + var service = $this.data("host"), + container = document.createElement("div"), + $container = $(container).attr("class", "video-container"), + $videoContainer = $this.parent().siblings("div.video-container"); + + if($videoContainer.length) { + $videoContainer.slideUp("fast", function() { $(this).detach(); }); + return; + } + + if ($("div.video-container").length) { + $("div.video-container").slideUp("fast", function() { $(this).detach(); }); + } + + $container.html(Embedder.render(service, $this.data())); + + $container.hide() + .insertAfter($this.parent()) + .slideDown('fast'); + + $this.click(function() { + $container.slideUp('fast', function() { + $(this).detach(); + }); + }); + }, + initialize: function() { + $(".stream").delegate("a.video-link", "click", Embedder.onVideoLinkClick); + }, + onVideoLinkClick: function(evt) { + evt.preventDefault(); + Embedder.embed($(this)); + } +}; + +Embedder.register("youtube.com", + 'Watch this video on Youtube
' + + ''); + +Embedder.register("vimeo.com", + 'Watch this video on Vimeo
' + + ''); + +Embedder.register("undefined", '

Unknown video type - {{host}}

'); + +$(document).ready(function() { + Embedder.initialize(); +}); \ No newline at end of file diff --git a/public/javascripts/stream.js b/public/javascripts/stream.js index f4a12a80d..aed024853 100644 --- a/public/javascripts/stream.js +++ b/public/javascripts/stream.js @@ -11,8 +11,6 @@ var Stream = { $("abbr.timeago").timeago(); $stream.not(".show").delegate("a.show_post_comments", "click", Stream.toggleComments); - /* In field labels */ - $("label").inFieldLabels(); // publisher textarea reset $publisher.find("textarea").bind("focus", function() { $(this).css('min-height','42px'); @@ -84,52 +82,6 @@ var Stream = { } }); - $stream.delegate("a.video-link", "click", function(evt) { - evt.preventDefault(); - - var $this = $(this), - container = document.createElement("div"), - $container = $(container).attr("class", "video-container"), - $videoContainer = $this.siblings("div.video-container"); - - if ($videoContainer.length > 0) { - $videoContainer.slideUp('fast', function() { - $videoContainer.detach(); - }); - return; - } - - if ($("div.video-container").length > 0) { - $("div.video-container").slideUp("fast", function() { - $(this).detach(); - }); - } - - if ($this.data("host") === "youtube.com") { - $container.html( - 'Watch this video on Youtube
' + - '' - ); - } else if($this.data("host") === "vimeo.com"){ - $container.html( - '

Watch this video on Vimeo

' + - '' - ); - } else { - $container.html('Invalid videotype ' + $this.data("host") + ' (ID: ' + $this.data("video-id") + ')'); - } - - $container.hide() - .insertAfter($this) - .slideDown('fast'); - - $this.click(function() { - $container.slideUp('fast', function() { - $(this).detach(); - }); - }); - }); - $(".new_status_message").live('ajax:loading', function(data, json, xhr) { $("#photodropzone").find('li').remove(); $("#publisher textarea").removeClass("with_attachments"); diff --git a/spec/javascripts/embedder-spec.js b/spec/javascripts/embedder-spec.js new file mode 100644 index 000000000..400dbc082 --- /dev/null +++ b/spec/javascripts/embedder-spec.js @@ -0,0 +1,49 @@ +/** + * Created by . + * User: dan + * Date: Jan 22, 2011 + * Time: 11:15:17 PM + * To change this template use File | Settings | File Templates. + */ +describe("Embedder", function() { + describe("services", function() { + it("is an object containing all the supported services", function() { + expect(typeof Embedder.services === "object").toBeTruthy(); + }); + }); + describe("register", function() { + it("adds a service and it's template to Embedder.services", function() { + expect(typeof Embedder.services["ohaibbq"] === "undefined").toBeTruthy(); + Embedder.register("ohaibbq", "sup guys"); + expect(typeof Embedder.services["ohaibbq"] === "undefined").toBeFalsy(); + }); + }); + describe("render", function() { + it("renders the specified mustache template", function() { + var template = Embedder.render("youtube.com", {"video-id": "asdf"}); + expect(template.length > 0).toBeTruthy(); + expect(typeof template === "string").toBeTruthy(); + }); + it("renders the 'undefined' template if the service is not found", function() { + var template = Embedder.render("yoimmafakeservice", {host: "yo"}); + expect(template).toEqual(Embedder.render("undefined", {host: "yo"})); + }); + }); + describe("embed", function() { + beforeEach(function() { + $("#jasmine_content").html( + '
' + + '' + + 'spec video' + + '' + + '
' + ); + }); + + it("delegates '.stream a.video-link'", function() { + spyOn($.fn, "delegate"); + Embedder.initialize(); + expect($.fn.delegate).toHaveBeenCalledWith("a.video-link", "click", Embedder.onVideoLinkClick); + }); + }); +}); \ No newline at end of file diff --git a/spec/javascripts/support/jasmine.yml b/spec/javascripts/support/jasmine.yml index ed55edf14..d4a518e1d 100644 --- a/spec/javascripts/support/jasmine.yml +++ b/spec/javascripts/support/jasmine.yml @@ -16,6 +16,7 @@ src_files: - public/javascripts/vendor/jquery.tipsy.js - public/javascripts/vendor/jquery.infieldlabel.js - public/javascripts/vendor/jquery.autoresize.min.js + - public/javascripts/vendor/Mustache.js - public/javascripts/vendor/timeago.js - public/javascripts/vendor/facebox.js - public/javascripts/diaspora.js @@ -24,6 +25,7 @@ src_files: - public/javascripts/aspect-edit.js - public/javascripts/aspect-contacts.js - public/javascripts/web-socket-receiver.js + - public/javascripts/embedder.js - public/javascripts/view.js - public/javascripts/stream.js - public/javascripts/validation.js