3 Jappix - An open social platform
4 These are the integratebox JS scripts for Jappix
6 -------------------------------------------------
10 Last revision: 03/12/11
14 // Opens the integratebox popup
15 function openIntegrateBox() {
18 '<div class="top">' + _e("Media viewer") + '</div>' +
20 '<div class="content"></div>' +
22 '<div class="bottom">' +
23 '<div class="wait wait-medium"></div>' +
25 '<a href="#" class="finish close">' + _e("Close") + '</a>' +
26 '<a href="#" class="finish next disabled" title="' + _e("Next") + '">></a>' +
27 '<a href="#" class="finish previous disabled" title="' + _e("Previous") + '"><</a>' +
31 createPopup('integratebox', html);
33 // Associate the events
37 // Closes the integratebox popup
38 function closeIntegrateBox() {
40 destroyPopup('integratebox');
45 // Generates the integratebox HTML code
46 function codeIntegrateBox(serv, url) {
50 var protocol = 'http';
58 if((BrowserDetect.browser == 'Explorer') && (BrowserDetect.version < 9))
61 // Switch to get the good DOM code
65 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/' + encodeQuotes(url) + '&autoplay=1" type="application/x-shockwave-flash" width="640" height="385"></embed></object>';
67 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>';
72 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/' + encodeQuotes(url) + '&autoplay=1" width="640" height="385" allowfullscreen="true" allowscriptaccess="always"></embed></object>';
77 code = '<object width="640" height="385"><param name="allowfullscreen" value="true" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=' + 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=' + 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>';
83 code = '<video width="640" height="385" src="' + encodeQuotes(url) + '" controls autoplay><a href="' + encodeQuotes(url) + '" target="_blank">' + encodeQuotes(url) + '</a></video>';
89 code = '<audio src="' + encodeQuotes(url) + '" controls autoplay><a href="' + encodeQuotes(url) + '" target="_blank">' + encodeQuotes(url) + '</a></audio>';
94 code = '<a href="' + encodeQuotes(url) + '" target="_blank"><img alt="" src="' + encodeQuotes(url) + '" /></a>';
102 // Applies a given integratebox element
103 function applyIntegrateBox(url, service, url_list, services_list, comments_e_list, comments_n_list, width_style) {
104 // Close the integratebox
107 // Media integration not wanted?
108 if(getDB('options', 'integratemedias') == '0')
111 // Apply the HTML code
112 var dom_code = codeIntegrateBox(service, url);
114 // Any code: apply it!
116 // We show the integratebox
119 // We add the code to the DOM
120 $('#integratebox .content').prepend('<div class="one-media">' + dom_code + '</div>');
122 // Image waiting icon
123 if(service == 'image') {
124 var waitItem = $('#integratebox .wait');
126 // Show it while it is loading
129 // Hide it when it is loaded
130 $('#integratebox img').load(function() {
133 // Center the image vertically
134 $(this).oneTime(10, function() {
135 $(this).css('margin-top', (($('#integratebox .content').height() - $(this).height()) / 2));
141 var comments_id = genID();
143 if(width_style == 'large') {
144 // Make the popup large
145 $('#integratebox .popup').addClass('large');
147 // Add the right content
148 $('#integratebox .content').after(
149 '<div class="comments" data-id="' + encodeQuotes(comments_id) + '">' +
150 '<div class="comments-content">' +
151 '<div class="one-comment loading"><span class="icon talk-images"></span>' + _e("Loading comments...") + '</div>' +
157 // Previous and next items?
158 var url_array = stringToArray(url_list);
159 var services_array = stringToArray(services_list);
160 var comments_e_array = stringToArray(comments_e_list);
161 var comments_n_array = stringToArray(comments_n_list);
162 var index = indexArrayValue(url_array, url);
165 if(exists('#integratebox .comments')) {
166 if(comments_e_array[index] && comments_n_array[index])
167 getCommentsMicroblog(comments_e_array[index], comments_n_array[index], comments_id);
169 $('#integratebox .comments .comments-content').html('<div class="one-comment loading"><span class="icon talk-images"></span>' + _e("Comments locked!") + '</div>');
172 // Get the previous values
173 var previous_url = url_array[index - 1];
174 var previous_services = services_array[index - 1];
176 // Get the next values
177 var next_url = url_array[index + 1];
178 var next_services = services_array[index + 1];
180 // Enable/disable buttons
181 if(previous_url && previous_services)
182 $('#integratebox .bottom .finish.previous').removeClass('disabled');
184 $('#integratebox .bottom .finish.previous').addClass('disabled');
186 if(next_url && next_services)
187 $('#integratebox .bottom .finish.next').removeClass('disabled');
189 $('#integratebox .bottom .finish.next').addClass('disabled');
192 $('#integratebox .bottom .finish.previous, #integratebox .bottom .finish.next').click(function() {
194 if($(this).is('.disabled'))
198 if($(this).is('.previous'))
199 applyIntegrateBox(previous_url, previous_services, url_list, services_list, comments_e_list, comments_n_list, width_style);
201 applyIntegrateBox(next_url, next_services, url_list, services_list, comments_e_list, comments_n_list, width_style);
206 if(width_style == 'large')
207 $('#integratebox .content a:has(img)').click(function() {
208 if(next_url && next_services)
209 applyIntegrateBox(next_url, next_services, url_list, services_list, comments_e_list, comments_n_list, width_style);
217 // Nothing: return true to be able to open the URL in a new tab
221 // Checks whether the file ext can use integratebox or not
222 function canIntegrateBox(ext) {
224 if(ext && ((ext == 'jpg') || (ext == 'jpeg') || (ext == 'png') || (ext == 'gif') || (ext == 'ogg') || (ext == 'oga') || (ext == 'ogv')))
230 // Filters a string to apply the integratebox links
231 function filterIntegrateBox(data) {
232 // Encapsulates the string into two <div /> elements
233 var xml = $('<div><div>' + data + '</div></div>').contents();
235 // Loop the <a /> elements
236 $(xml).find('a').each(function() {
237 // Initialize this element
238 var href = $(this).attr('href');
239 var to, url, service, event;
242 if(href.match(/^xmpp:(.+)/i))
246 else if(href.match(/(\w{3,5})(:)(\S+)((\.youtube\.com\/watch(\?v|\?\S+v|\#\!v|\#\!\S+v)\=)|(youtu\.be\/))([^& ]+)((&\S)|(&\S)|\s|$)/gim)) {
251 // Dailymotion video box
252 else if(href.match(/(\w{3,5})(:)(\S+)\.dailymotion\.com\/video\/([\w\-]+)((\#[\w\-]+)|\s|$)/gim)) {
254 service = 'dailymotion';
258 else if(href.match(/((\w{3,5})(:)(\S+)(vimeo|www\.vimeo)\.com\/([\w\-]+))/gim)) {
264 else if(href.match(/((\w{3,5})(:)(\S+)(\.)(ogv|ogg))/gim)) {
270 else if(href.match(/((\w{3,5})(:)(\S+)(\.oga))/gim)) {
276 else if(href.match(/((\w{3,5})(:)(\S+)(\.)(jpg|jpeg|png|gif|tif|bmp))/gim)) {
281 // Define the good event
283 event = 'xmppLink(\'' + encodeOnclick(to) + '\')';
284 else if(url && service)
285 event = 'applyIntegrateBox(\'' + encodeOnclick(url) + '\', \'' + encodeOnclick(service) + '\')';
287 // Any click event to apply?
289 // Regenerate the link element (for onclick)
291 var element_a = (this);
294 $(element_a.attributes).each(function(index) {
295 // Read the current attribute
296 var current_attr = element_a.attributes[index];
298 // Apply the current attribute
299 new_a += ' ' + encodeQuotes(current_attr.name) + '="' + encodeQuotes(current_attr.value) + '"';
302 // Add onclick attribute
303 new_a += ' onclick="return ' + event + ';"';
306 new_a += '>' + $(this).text().htmlEnc() + '</a>';
309 $(this).replaceWith(new_a);
313 // Regenerate the HTML code (include string into a div to be readable)
314 var string = $(xml).html();
320 function launchIntegratebox() {
322 $('#integratebox .bottom .finish.close').click(closeIntegrateBox);
325 // Plugin keyup event
326 $(document).keyup(function(e) {
328 if((exists('#integratebox .bottom .finish.previous:not(.disabled)')) && (e.keyCode == 37)) {
329 $('#integratebox .bottom .finish.previous').click();
335 if((exists('#integratebox .bottom .finish.next:not(.disabled)')) && (e.keyCode == 39)) {
336 $('#integratebox .bottom .finish.next').click();