Embedder is now a widget, show videos before comments
This commit is contained in:
Dan Hansen
parent
8150cd4317
commit
d03119f7e9
5 changed files with 120 additions and 105 deletions
|
|
@ -17,10 +17,10 @@ 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
|
||||
- public/javascripts/widgets/embedder.js
|
||||
|
||||
mobile:
|
||||
- public/javascripts/vendor/jquery144.min.js
|
||||
|
|
|
|||
|
|
@ -1,65 +0,0 @@
|
|||
/* Copyright (c) 2010, Diaspora Inc. This file is
|
||||
* licensed under the Affero General Public License version 3 or later. See
|
||||
* the COPYRIGHT file.
|
||||
*/
|
||||
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",
|
||||
'<a href="//www.youtube.com/watch?v={{video-id}}" target="_blank">Watch this video on Youtube</a><br />' +
|
||||
'<iframe class="youtube-player" type="text/html" src="http://www.youtube.com/embed/{{video-id}}"></iframe>');
|
||||
|
||||
Embedder.register("vimeo.com",
|
||||
'<a href="http://vimeo.com/{{video-id}}">Watch this video on Vimeo</a><br />' +
|
||||
'<iframe class="vimeo-player" src="http://player.vimeo.com/video/{{video-id}}"></iframe>');
|
||||
|
||||
Embedder.register("undefined", '<p>Unknown video type - {{host}}</p>');
|
||||
|
||||
$(document).ready(function() {
|
||||
Embedder.initialize();
|
||||
});
|
||||
76
public/javascripts/widgets/embedder.js
Normal file
76
public/javascripts/widgets/embedder.js
Normal file
|
|
@ -0,0 +1,76 @@
|
|||
/* Copyright (c) 2010, Diaspora Inc. This file is
|
||||
* licensed under the Affero General Public License version 3 or later. See
|
||||
* the COPYRIGHT file.
|
||||
*/
|
||||
|
||||
|
||||
(function() {
|
||||
var Embedder = function() { };
|
||||
Embedder.prototype.services = {};
|
||||
Embedder.prototype.register = function(service, template) {
|
||||
this.services[service] = template;
|
||||
};
|
||||
|
||||
Embedder.prototype.render = function(service, views) {
|
||||
var template = (typeof this.services[service] === "string")
|
||||
? this.services[service]
|
||||
: this.services.undefined;
|
||||
|
||||
return $.mustache(template, views);
|
||||
};
|
||||
|
||||
|
||||
Embedder.prototype.embed = function($this) {
|
||||
var service = $this.data("host"),
|
||||
container = document.createElement("div"),
|
||||
$container = $(container).attr("class", "video-container"),
|
||||
$videoContainer = $this.siblings(".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(
|
||||
this.render(service, $this.data())
|
||||
);
|
||||
|
||||
$container.hide()
|
||||
.insertBefore($this.siblings(".info"))
|
||||
.slideDown('fast');
|
||||
|
||||
$this.click(function() {
|
||||
$container.slideUp('fast', function() {
|
||||
$(this).detach();
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
Embedder.prototype.start = function() {
|
||||
$(".stream").delegate("a.video-link", "click", this.onVideoLinkClicked);
|
||||
this.registerServices();
|
||||
};
|
||||
|
||||
Embedder.prototype.registerServices = function() {
|
||||
this.register("youtube.com",
|
||||
'<a href="//www.youtube.com/watch?v={{video-id}}" target="_blank">Watch this video on Youtube</a><br />' +
|
||||
'<iframe class="youtube-player" type="text/html" src="http://www.youtube.com/embed/{{video-id}}"></iframe>');
|
||||
|
||||
this.register("vimeo.com",
|
||||
'<a href="http://vimeo.com/{{video-id}}">Watch this video on Vimeo</a><br />' +
|
||||
'<iframe class="vimeo-player" src="http://player.vimeo.com/video/{{video-id}}"></iframe>');
|
||||
|
||||
this.register("undefined", '<p>Unknown video type - {{host}}</p>');
|
||||
};
|
||||
|
||||
Embedder.prototype.onVideoLinkClicked = function(evt) {
|
||||
evt.preventDefault();
|
||||
Diaspora.widgets.embedder.embed($(this));
|
||||
};
|
||||
|
||||
Diaspora.widgets.add("embedder", Embedder);
|
||||
})();
|
||||
|
|
@ -2,45 +2,49 @@
|
|||
* licensed under the Affero General Public License version 3 or later. See
|
||||
* the COPYRIGHT file.
|
||||
*/
|
||||
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(
|
||||
'<div class="stream">' +
|
||||
'<a href="#video" class="video-link" data-host="youtube.com" data-video-id="asdf">' +
|
||||
'spec video' +
|
||||
'</a>' +
|
||||
'</div>'
|
||||
);
|
||||
});
|
||||
describe("Diaspora", function() {
|
||||
describe("widgets", function() {
|
||||
describe("embedder", function() {
|
||||
describe("services", function() {
|
||||
it("is an object containing all the supported services", function() {
|
||||
expect(typeof Diaspora.widgets.embedder.services === "object").toBeTruthy();
|
||||
});
|
||||
});
|
||||
describe("register", function() {
|
||||
it("adds a service and it's template to Diaspora.widgets.embedder.services", function() {
|
||||
expect(typeof Diaspora.widgets.embedder.services["ohaibbq"] === "undefined").toBeTruthy();
|
||||
Diaspora.widgets.embedder.register("ohaibbq", "sup guys");
|
||||
expect(typeof Diaspora.widgets.embedder.services["ohaibbq"] === "undefined").toBeFalsy();
|
||||
});
|
||||
});
|
||||
describe("render", function() {
|
||||
it("renders the specified mustache template", function() {
|
||||
var template = Diaspora.widgets.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 = Diaspora.widgets.embedder.render("yoimmafakeservice", {host: "yo"});
|
||||
expect(template).toEqual(Diaspora.widgets.embedder.render("undefined", {host: "yo"}));
|
||||
});
|
||||
});
|
||||
describe("embed", function() {
|
||||
beforeEach(function() {
|
||||
$("#jasmine_content").html(
|
||||
'<div class="stream">' +
|
||||
'<a href="#video" class="video-link" data-host="youtube.com" data-video-id="asdf">' +
|
||||
'spec video' +
|
||||
'</a>' +
|
||||
'</div>'
|
||||
);
|
||||
});
|
||||
|
||||
it("delegates '.stream a.video-link'", function() {
|
||||
spyOn($.fn, "delegate");
|
||||
Embedder.initialize();
|
||||
expect($.fn.delegate).toHaveBeenCalledWith("a.video-link", "click", Embedder.onVideoLinkClick);
|
||||
it("delegates '.stream a.video-link'", function() {
|
||||
spyOn($.fn, "delegate");
|
||||
Diaspora.widgets.embedder.start();
|
||||
expect($.fn.delegate).toHaveBeenCalledWith("a.video-link", "click", Diaspora.widgets.embedder.onVideoLinkClicked);
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
@ -21,11 +21,11 @@ src_files:
|
|||
- public/javascripts/vendor/facebox.js
|
||||
- public/javascripts/diaspora.js
|
||||
- public/javascripts/widgets/alert.js
|
||||
- public/javascripts/widgets/embedder.js
|
||||
- public/javascripts/mobile.js
|
||||
- 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
|
||||
|
|
|
|||
Loading…
Reference in a new issue