Video links now use data attributes and render in an iframe
This commit is contained in:
parent
20cc5ac1f9
commit
e78a86897a
3 changed files with 46 additions and 26 deletions
|
|
@ -158,7 +158,7 @@ module ApplicationHelper
|
|||
if options[:youtube]
|
||||
while youtube = message.match(/youtube\.com::([A-Za-z0-9_\\]+)/)
|
||||
videoid = youtube[1]
|
||||
message.gsub!('youtube.com::'+videoid, '<a onclick="openVideo(\'youtube.com\', \'' + videoid + '\', this)" href="#video">Youtube: ' + youtube_title(videoid) + '</a>')
|
||||
message.gsub!('youtube.com::'+videoid, '<a class="video-link" data-host="youtube.com" data-video-id="' + videoid + '" href="#video">Youtube: ' + youtube_title(videoid) + '</a>')
|
||||
end
|
||||
end
|
||||
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ $(document).ready(function(){
|
|||
var $stream = $(".stream");
|
||||
var $publisher = $("#publisher");
|
||||
// expand all comments on page load
|
||||
$(".stream:not('.show')").find('.comments').each(function(index) {
|
||||
$stream.not('.show').find('.comments').each(function(index) {
|
||||
var comments = $(this);
|
||||
if(comments.children("li").length > 1) {
|
||||
var show_comments_toggle = comments.closest("li").find(".show_post_comments");
|
||||
|
|
@ -33,7 +33,7 @@ $(document).ready(function(){
|
|||
.closest("form").find(".comment_submit").fadeIn(200);
|
||||
});
|
||||
|
||||
$(".stream").delegate("textarea.comment_box", "blur", function(evt){
|
||||
$stream.delegate("textarea.comment_box", "blur", function(evt){
|
||||
var commentBox = $(this);
|
||||
if( !commentBox.val() ) {
|
||||
commentBox.attr("rows", 1)
|
||||
|
|
@ -51,6 +51,49 @@ $(document).ready(function(){
|
|||
box.toggle();
|
||||
}
|
||||
});
|
||||
|
||||
$stream.delegate("a.video-link", "click", function(evt) {
|
||||
evt.preventDefault();
|
||||
|
||||
var $this = $(this),
|
||||
container = document.createElement('div'),
|
||||
$container = $(container).attr("class", "video-container");
|
||||
|
||||
var $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(
|
||||
'<a href="//www.youtube.com/watch?v=' + $this.data("video-id") + '" target="_blank">Watch this video on Youtube</a><br />' +
|
||||
'<iframe class="youtube-player" type="text/html" src="http://www.youtube.com/embed/' + $this.data("video-id")+ '"></iframe>'
|
||||
);
|
||||
} else {
|
||||
$container.html('Invalid videotype <i>'+$this.data("host")+'</i> (ID: '+$this.data("video-id")+')');
|
||||
}
|
||||
|
||||
|
||||
|
||||
$container.hide();
|
||||
this.parentNode.insertBefore(container, this.nextSibling);
|
||||
$container.slideDown('fast');
|
||||
|
||||
$this.click(function() {
|
||||
$container.slideToggle('fast', function () {
|
||||
$(this).detach();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
$(".new_status_message").bind('ajax:success', function(data, json, xhr){
|
||||
json = $.parseJSON(json);
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@
|
|||
* the COPYRIGHT file.
|
||||
*/
|
||||
|
||||
|
||||
$(document).ready(function(){
|
||||
$('#debug_info').click(function() {
|
||||
$('#debug_more').toggle('fast');
|
||||
|
|
@ -115,28 +114,6 @@ $.fn.clearForm = function() {
|
|||
});
|
||||
};
|
||||
|
||||
var video_active_container = null;
|
||||
|
||||
|
||||
function openVideo(type, videoid, link) {
|
||||
var container = document.createElement('div'),
|
||||
$container = $(container);
|
||||
if(type == 'youtube.com') {
|
||||
$container.html('<a href="//www.youtube.com/watch?v='+videoid+'" target="_blank">Watch this video on Youtube</a><br><object width="640" height="385"><param name="movie" value="http://www.youtube.com/v/'+videoid+'?fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/'+videoid+'?fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="385"></embed></object>');
|
||||
} else {
|
||||
$container.html('Invalid videotype <i>'+type+'</i> (ID: '+videoid+')');
|
||||
}
|
||||
if(video_active_container != null) {
|
||||
video_active_container.parentNode.removeChild(video_active_container);
|
||||
}
|
||||
video_active_container = container;
|
||||
$container.hide();
|
||||
link.parentNode.insertBefore(container, this.nextSibling);
|
||||
$container.slideDown('fast', function() { });
|
||||
link.onclick = function() { $container.slideToggle('fast', function() { } ); }
|
||||
|
||||
|
||||
}
|
||||
|
||||
$(".make_profile_photo").live("click", function(evt){
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue