friendica-addons/jappixmini/jappix/js/integratebox.js

341 lines
10 KiB
JavaScript
Raw Normal View History

2012-04-18 01:12:24 +02:00
/*
Jappix - An open social platform
These are the integratebox JS scripts for Jappix
-------------------------------------------------
License: AGPL
Author: Vanaryon
Last revision: 03/12/11
*/
// Opens the integratebox popup
function openIntegrateBox() {
// Popup HTML content
var html =
'<div class="top">' + _e("Media viewer") + '</div>' +
'<div class="content"></div>' +
'<div class="bottom">' +
'<div class="wait wait-medium"></div>' +
'<a href="#" class="finish close">' + _e("Close") + '</a>' +
'<a href="#" class="finish next disabled" title="' + _e("Next") + '">&gt;</a>' +
'<a href="#" class="finish previous disabled" title="' + _e("Previous") + '">&lt;</a>' +
'</div>';
// Create the popup
createPopup('integratebox', html);
// Associate the events
launchIntegratebox();
}
// Closes the integratebox popup
function closeIntegrateBox() {
// Destroy the popup
destroyPopup('integratebox');
return false;
}
// Generates the integratebox HTML code
function codeIntegrateBox(serv, url) {
var code = '';
// Protocol to use
var protocol = 'http';
if(isHTTPS())
protocol = 'https';
// Legacy browser
var legacy = false;
if((BrowserDetect.browser == 'Explorer') && (BrowserDetect.version < 9))
legacy = true;
// Switch to get the good DOM code
switch(serv) {
case 'youtube':
if(legacy)
code = '<object width="640" height="385"><param name="movie" value="http://www.youtube.com/v/' + url + '&amp;autoplay=1"></param><embed src="http://www.youtube.com/v/' + encodeQuotes(url) + '&amp;autoplay=1" type="application/x-shockwave-flash" width="640" height="385"></embed></object>';
else
code = '<object width="640" height="385" data="' + encodeQuotes(protocol) + '://www.youtube.com/embed/' + encodeQuotes(url) + '?autoplay=1" type="text/html"><a href="http://www.youtube.com/watch?v=' + encodeQuotes(url) + '" target="_blank">http://www.youtube.com/watch?v=' + encodeQuotes(url) + '</a></object>';
break;
case 'dailymotion':
code = '<object width="640" height="385"><param name="movie" value="http://www.dailymotion.com/swf/video/' + url + '&amp;autoplay=1"></param><param name="allowFullScreen" value="false"></param><embed type="application/x-shockwave-flash" src="http://www.dailymotion.com/swf/video/' + encodeQuotes(url) + '&amp;autoplay=1" width="640" height="385" allowfullscreen="true" allowscriptaccess="always"></embed></object>';
break;
case 'vimeo':
code = '<object width="640" height="385"><param name="allowfullscreen" value="true" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=' + encodeQuotes(url) + '&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1&amp;autoplay=1" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=' + encodeQuotes(url) + '&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1&amp;autoplay=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="640" height="385"></embed></object>';
break;
case 'theora':
case 'video':
code = '<video width="640" height="385" src="' + encodeQuotes(url) + '" controls autoplay><a href="' + encodeQuotes(url) + '" target="_blank">' + encodeQuotes(url) + '</a></video>';
break;
case 'vorbis':
case 'audio':
code = '<audio src="' + encodeQuotes(url) + '" controls autoplay><a href="' + encodeQuotes(url) + '" target="_blank">' + encodeQuotes(url) + '</a></audio>';
break;
case 'image':
code = '<a href="' + encodeQuotes(url) + '" target="_blank"><img alt="" src="' + encodeQuotes(url) + '" /></a>';
break;
}
return code;
}
// Applies a given integratebox element
function applyIntegrateBox(url, service, url_list, services_list, comments_e_list, comments_n_list, width_style) {
// Close the integratebox
closeIntegrateBox();
// Media integration not wanted?
if(getDB('options', 'integratemedias') == '0')
return true;
// Apply the HTML code
var dom_code = codeIntegrateBox(service, url);
// Any code: apply it!
if(dom_code) {
// We show the integratebox
openIntegrateBox();
// We add the code to the DOM
$('#integratebox .content').prepend('<div class="one-media">' + dom_code + '</div>');
// Image waiting icon
if(service == 'image') {
var waitItem = $('#integratebox .wait');
// Show it while it is loading
waitItem.show();
// Hide it when it is loaded
$('#integratebox img').load(function() {
waitItem.hide();
// Center the image vertically
$(this).oneTime(10, function() {
$(this).css('margin-top', (($('#integratebox .content').height() - $(this).height()) / 2));
});
});
}
// Large style?
var comments_id = genID();
if(width_style == 'large') {
// Make the popup large
$('#integratebox .popup').addClass('large');
// Add the right content
$('#integratebox .content').after(
'<div class="comments" data-id="' + encodeQuotes(comments_id) + '">' +
'<div class="comments-content">' +
'<div class="one-comment loading"><span class="icon talk-images"></span>' + _e("Loading comments...") + '</div>' +
'</div>' +
'</div>'
);
}
// Previous and next items?
var url_array = stringToArray(url_list);
var services_array = stringToArray(services_list);
var comments_e_array = stringToArray(comments_e_list);
var comments_n_array = stringToArray(comments_n_list);
var index = indexArrayValue(url_array, url);
// Any comments?
if(exists('#integratebox .comments')) {
if(comments_e_array[index] && comments_n_array[index])
getCommentsMicroblog(comments_e_array[index], comments_n_array[index], comments_id);
else
$('#integratebox .comments .comments-content').html('<div class="one-comment loading"><span class="icon talk-images"></span>' + _e("Comments locked!") + '</div>');
}
// Get the previous values
var previous_url = url_array[index - 1];
var previous_services = services_array[index - 1];
// Get the next values
var next_url = url_array[index + 1];
var next_services = services_array[index + 1];
// Enable/disable buttons
if(previous_url && previous_services)
$('#integratebox .bottom .finish.previous').removeClass('disabled');
else
$('#integratebox .bottom .finish.previous').addClass('disabled');
if(next_url && next_services)
$('#integratebox .bottom .finish.next').removeClass('disabled');
else
$('#integratebox .bottom .finish.next').addClass('disabled');
// Click events
$('#integratebox .bottom .finish.previous, #integratebox .bottom .finish.next').click(function() {
// Not acceptable?
if($(this).is('.disabled'))
return false;
// Apply the event!
if($(this).is('.previous'))
applyIntegrateBox(previous_url, previous_services, url_list, services_list, comments_e_list, comments_n_list, width_style);
else
applyIntegrateBox(next_url, next_services, url_list, services_list, comments_e_list, comments_n_list, width_style);
return false;
});
if(width_style == 'large')
$('#integratebox .content a:has(img)').click(function() {
if(next_url && next_services)
applyIntegrateBox(next_url, next_services, url_list, services_list, comments_e_list, comments_n_list, width_style);
return false;
});
return false;
}
// Nothing: return true to be able to open the URL in a new tab
return true;
}
// Checks whether the file ext can use integratebox or not
function canIntegrateBox(ext) {
// Can use?
if(ext && ((ext == 'jpg') || (ext == 'jpeg') || (ext == 'png') || (ext == 'gif') || (ext == 'ogg') || (ext == 'oga') || (ext == 'ogv')))
return true;
return false;
}
// Filters a string to apply the integratebox links
function filterIntegrateBox(data) {
// Encapsulates the string into two <div /> elements
var xml = $('<div><div>' + data + '</div></div>').contents();
// Loop the <a /> elements
$(xml).find('a').each(function() {
// Initialize this element
var href = $(this).attr('href');
var to, url, service, event;
// XMPP ID
if(href.match(/^xmpp:(.+)/i))
to = RegExp.$1;
// YouTube video box
else if(href.match(/(\w{3,5})(:)(\S+)((\.youtube\.com\/watch(\?v|\?\S+v|\#\!v|\#\!\S+v)\=)|(youtu\.be\/))([^& ]+)((&amp;\S)|(&\S)|\s|$)/gim)) {
url = RegExp.$8;
service = 'youtube';
}
// Dailymotion video box
else if(href.match(/(\w{3,5})(:)(\S+)\.dailymotion\.com\/video\/([\w\-]+)((\#[\w\-]+)|\s|$)/gim)) {
url = RegExp.$4;
service = 'dailymotion';
}
// Vimeo video box
else if(href.match(/((\w{3,5})(:)(\S+)(vimeo|www\.vimeo)\.com\/([\w\-]+))/gim)) {
url = RegExp.$1;
service = 'vimeo';
}
// Theora video box
else if(href.match(/((\w{3,5})(:)(\S+)(\.)(ogv|ogg))/gim)) {
url = RegExp.$1;
service = 'theora';
}
// Vorbis audio box
else if(href.match(/((\w{3,5})(:)(\S+)(\.oga))/gim)) {
url = RegExp.$1;
service = 'vorbis';
}
// Image box
else if(href.match(/((\w{3,5})(:)(\S+)(\.)(jpg|jpeg|png|gif|tif|bmp))/gim)) {
url = RegExp.$1;
service = 'image';
}
// Define the good event
if(to)
event = 'xmppLink(\'' + encodeOnclick(to) + '\')';
else if(url && service)
event = 'applyIntegrateBox(\'' + encodeOnclick(url) + '\', \'' + encodeOnclick(service) + '\')';
// Any click event to apply?
if(event) {
// Regenerate the link element (for onclick)
var new_a = '<a';
var element_a = (this);
// Attributes
$(element_a.attributes).each(function(index) {
// Read the current attribute
var current_attr = element_a.attributes[index];
// Apply the current attribute
new_a += ' ' + encodeQuotes(current_attr.name) + '="' + encodeQuotes(current_attr.value) + '"';
});
// Add onclick attribute
new_a += ' onclick="return ' + event + ';"';
// Value
new_a += '>' + $(this).text().htmlEnc() + '</a>';
// Replace it!
$(this).replaceWith(new_a);
}
});
// Regenerate the HTML code (include string into a div to be readable)
var string = $(xml).html();
return string;
}
// Addon launcher
2012-04-18 01:12:24 +02:00
function launchIntegratebox() {
// Click event
$('#integratebox .bottom .finish.close').click(closeIntegrateBox);
}
// Addon keyup event
2012-04-18 01:12:24 +02:00
$(document).keyup(function(e) {
// Previous item?
if((exists('#integratebox .bottom .finish.previous:not(.disabled)')) && (e.keyCode == 37)) {
$('#integratebox .bottom .finish.previous').click();
return false;
}
// Next item?
if((exists('#integratebox .bottom .finish.next:not(.disabled)')) && (e.keyCode == 39)) {
$('#integratebox .bottom .finish.next').click();
return false;
}
});