mirror of
https://github.com/YunoHost-Apps/jappix_ynh.git
synced 2024-09-03 19:26:19 +02:00
469 lines
No EOL
17 KiB
JavaScript
469 lines
No EOL
17 KiB
JavaScript
/*
|
|
|
|
Jappix - An open social platform
|
|
These are the integratebox JS scripts for Jappix
|
|
|
|
-------------------------------------------------
|
|
|
|
License: AGPL
|
|
Author: Valérian Saliou
|
|
|
|
*/
|
|
|
|
// Bundle
|
|
var IntegrateBox = (function () {
|
|
|
|
/**
|
|
* Alias of this
|
|
* @private
|
|
*/
|
|
var self = {};
|
|
|
|
|
|
/**
|
|
* Opens the integratebox popup
|
|
* @public
|
|
* @return {undefined}
|
|
*/
|
|
self.open = function() {
|
|
|
|
try {
|
|
// Popup HTML content
|
|
var html =
|
|
'<div class="top">' + Common._e("Media viewer") + '</div>' +
|
|
|
|
'<div class="content"></div>' +
|
|
|
|
'<div class="bottom">' +
|
|
'<div class="wait wait-medium"></div>' +
|
|
|
|
'<a href="#" class="finish close">' + Common._e("Close") + '</a>' +
|
|
'<a href="#" class="finish next disabled" title="' + Common._e("Next") + '">></a>' +
|
|
'<a href="#" class="finish previous disabled" title="' + Common._e("Previous") + '"><</a>' +
|
|
'</div>';
|
|
|
|
// Create the popup
|
|
Popup.create('integratebox', html);
|
|
|
|
// Associate the events
|
|
self.instance();
|
|
} catch(e) {
|
|
Console.error('IntegrateBox.open', e);
|
|
}
|
|
|
|
};
|
|
|
|
|
|
/**
|
|
* Closes the integratebox popup
|
|
* @public
|
|
* @return {boolean}
|
|
*/
|
|
self.close = function() {
|
|
|
|
try {
|
|
// Destroy the popup
|
|
Popup.destroy('integratebox');
|
|
} catch(e) {
|
|
Console.error('IntegrateBox.close', e);
|
|
} finally {
|
|
return false;
|
|
}
|
|
|
|
};
|
|
|
|
|
|
/**
|
|
* Generates the integratebox HTML code
|
|
* @public
|
|
* @param {string} serv
|
|
* @param {string} url
|
|
* @return {string}
|
|
*/
|
|
self.code = function(serv, url) {
|
|
|
|
try {
|
|
var code = '';
|
|
|
|
// Protocol to use
|
|
var protocol = Utils.isHTTPS() ? 'https' : 'http';
|
|
|
|
// 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 + '&autoplay=1"></param><embed src="http://www.youtube.com/v/' + Common.encodeQuotes(url) + '&autoplay=1" type="application/x-shockwave-flash" width="640" height="385"></embed></object>';
|
|
} else {
|
|
code = '<object width="640" height="385" data="' + Common.encodeQuotes(protocol) + '://www.youtube.com/embed/' + Common.encodeQuotes(url) + '?autoplay=1" type="text/html"><a href="http://www.youtube.com/watch?v=' + Common.encodeQuotes(url) + '" target="_blank">http://www.youtube.com/watch?v=' + Common.encodeQuotes(url) + '</a></object>';
|
|
}
|
|
|
|
break;
|
|
|
|
case 'dailymotion':
|
|
code = '<object width="640" height="385"><param name="movie" value="http://www.dailymotion.com/swf/video/' + url + '&autoplay=1"></param><param name="allowFullScreen" value="false"></param><embed type="application/x-shockwave-flash" src="http://www.dailymotion.com/swf/video/' + Common.encodeQuotes(url) + '&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=' + Common.encodeQuotes(url) + '&server=vimeo.com&show_title=1&show_byline=1&show_portrait=0&color=&fullscreen=1&autoplay=1" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=' + Common.encodeQuotes(url) + '&server=vimeo.com&show_title=1&show_byline=1&show_portrait=0&color=&fullscreen=1&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="' + Common.encodeQuotes(url) + '" controls autoplay><a href="' + Common.encodeQuotes(url) + '" target="_blank">' + Common.encodeQuotes(url) + '</a></video>';
|
|
|
|
break;
|
|
|
|
case 'vorbis':
|
|
case 'audio':
|
|
code = '<audio src="' + Common.encodeQuotes(url) + '" controls autoplay><a href="' + Common.encodeQuotes(url) + '" target="_blank">' + Common.encodeQuotes(url) + '</a></audio>';
|
|
|
|
break;
|
|
|
|
case 'image':
|
|
code = '<a href="' + Common.encodeQuotes(url) + '" target="_blank"><img alt="" src="' + Common.encodeQuotes(url) + '" /></a>';
|
|
|
|
break;
|
|
}
|
|
|
|
return code;
|
|
} catch(e) {
|
|
Console.error('IntegrateBox.code', e);
|
|
}
|
|
|
|
};
|
|
|
|
|
|
/**
|
|
* Applies a given integratebox element
|
|
* @public
|
|
* @param {string} url
|
|
* @param {string} service
|
|
* @param {string} url_list
|
|
* @param {string} services_list
|
|
* @param {string} comments_e_list
|
|
* @param {string} comments_n_list
|
|
* @param {string} width_style
|
|
* @return {boolean}
|
|
*/
|
|
self.apply = function(url, service, url_list, services_list, comments_e_list, comments_n_list, width_style) {
|
|
|
|
try {
|
|
// Close the integratebox
|
|
self.close();
|
|
|
|
// Media integration not wanted?
|
|
if(DataStore.getDB(Connection.desktop_hash, 'options', 'integratemedias') == '0')
|
|
return true;
|
|
|
|
// Apply the HTML code
|
|
var dom_code = self.code(service, url);
|
|
|
|
// Any code: apply it!
|
|
if(dom_code) {
|
|
// We show the integratebox
|
|
self.open();
|
|
|
|
// 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="' + Common.encodeQuotes(comments_id) + '">' +
|
|
'<div class="comments-content">' +
|
|
'<div class="one-comment loading"><span class="icon talk-images"></span>' + Common._e("Loading comments...") + '</div>' +
|
|
'</div>' +
|
|
'</div>'
|
|
);
|
|
}
|
|
|
|
// Previous and next items?
|
|
var url_array = Utils.stringToArray(url_list);
|
|
var services_array = Utils.stringToArray(services_list);
|
|
var comments_e_array = Utils.stringToArray(comments_e_list);
|
|
var comments_n_array = Utils.stringToArray(comments_n_list);
|
|
var index = Utils.indexArrayValue(url_array, url);
|
|
|
|
// Any comments?
|
|
if(Common.exists('#integratebox .comments')) {
|
|
if(comments_e_array[index] && comments_n_array[index]) {
|
|
Microblog.getComments(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>' + Common._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')) {
|
|
self.apply(previous_url, previous_services, url_list, services_list, comments_e_list, comments_n_list, width_style);
|
|
} else {
|
|
self.apply(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) {
|
|
self.apply(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;
|
|
} catch(e) {
|
|
Console.error('IntegrateBox.apply', e);
|
|
}
|
|
|
|
};
|
|
|
|
|
|
/**
|
|
* Checks whether the file ext can use integratebox or not
|
|
* @public
|
|
* @param {string} ext
|
|
* @return {boolean}
|
|
*/
|
|
self.can = function(ext) {
|
|
|
|
can_use = false;
|
|
|
|
try {
|
|
// Can use?
|
|
if(ext && ((ext == 'jpg') || (ext == 'jpeg') || (ext == 'png') || (ext == 'gif') || (ext == 'ogg') || (ext == 'oga') || (ext == 'ogv'))) {
|
|
can_use = true;
|
|
}
|
|
} catch(e) {
|
|
Console.error('IntegrateBox.can', e);
|
|
} finally {
|
|
return can_use;
|
|
}
|
|
|
|
};
|
|
|
|
|
|
/**
|
|
* Filters a string to apply the integratebox links
|
|
* @public
|
|
* @param {string} data
|
|
* @return {string}
|
|
*/
|
|
self.filter = function(data) {
|
|
|
|
try {
|
|
// 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\/))([^& ]+)((&\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.$6;
|
|
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 = 'XMPPLinks.go(\'' + Utils.encodeOnclick(to) + '\')';
|
|
} else if(url && service) {
|
|
event = 'IntegrateBox.apply(\'' + Utils.encodeOnclick(url) + '\', \'' + Utils.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 += ' ' + Common.encodeQuotes(current_attr.name) + '="' + Common.encodeQuotes(current_attr.value) + '"';
|
|
});
|
|
|
|
// Add onclick attribute
|
|
new_a += ' onclick="return ' + event + ';"';
|
|
|
|
// Value
|
|
new_a += '>' + $(this).html() + '</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;
|
|
} catch(e) {
|
|
Console.error('IntegrateBox.filter', e);
|
|
}
|
|
|
|
};
|
|
|
|
|
|
/**
|
|
* Instance launcher
|
|
* @public
|
|
* @return {undefined}
|
|
*/
|
|
self.instance = function() {
|
|
|
|
try {
|
|
// Click event
|
|
$('#integratebox .bottom .finish.close').click(self.close);
|
|
} catch(e) {
|
|
Console.error('IntegrateBox.instance', e);
|
|
}
|
|
|
|
};
|
|
|
|
|
|
/**
|
|
* Plugin launcher
|
|
* @public
|
|
* @return {undefined}
|
|
*/
|
|
self.launch = function() {
|
|
|
|
try {
|
|
$(document).keyup(function(e) {
|
|
// Previous item?
|
|
if((Common.exists('#integratebox .bottom .finish.previous:not(.disabled)')) && (e.keyCode == 37)) {
|
|
$('#integratebox .bottom .finish.previous').click();
|
|
|
|
return false;
|
|
}
|
|
|
|
// Next item?
|
|
if((Common.exists('#integratebox .bottom .finish.next:not(.disabled)')) && (e.keyCode == 39)) {
|
|
$('#integratebox .bottom .finish.next').click();
|
|
|
|
return false;
|
|
}
|
|
});
|
|
} catch(e) {
|
|
Console.error('IntegrateBox.launch', e);
|
|
}
|
|
|
|
};
|
|
|
|
|
|
/**
|
|
* Return class scope
|
|
*/
|
|
return self;
|
|
|
|
})();
|
|
|
|
IntegrateBox.launch(); |