jappixmini/jappix/js/integratebox.js

   1 /*
   2
   3 Jappix - An open social platform
   4 These are the integratebox JS scripts for Jappix
   5
   6 -------------------------------------------------
   7
   8 License: AGPL
   9 Author: Vanaryon
  10 Last revision: 03/12/11
  11
  12 */
  13
  14 // Opens the integratebox popup
  15 function openIntegrateBox() {
  16         // Popup HTML content
  17         var html =
  18         '<div class="top">' + _e("Media viewer") + '</div>' +
  19
  20         '<div class="content"></div>' +
  21
  22         '<div class="bottom">' +
  23                 '<div class="wait wait-medium"></div>' +
  24
  25                 '<a href="#" class="finish close">' + _e("Close") + '</a>' +
  26                 '<a href="#" class="finish next disabled" title="' + _e("Next") + '">&gt;</a>' +
  27                 '<a href="#" class="finish previous disabled" title="' + _e("Previous") + '">&lt;</a>' +
  28         '</div>';
  29
  30         // Create the popup
  31         createPopup('integratebox', html);
  32
  33         // Associate the events
  34         launchIntegratebox();
  35 }
  36
  37 // Closes the integratebox popup
  38 function closeIntegrateBox() {
  39         // Destroy the popup
  40         destroyPopup('integratebox');
  41
  42         return false;
  43 }
  44
  45 // Generates the integratebox HTML code
  46 function codeIntegrateBox(serv, url) {
  47         var code = '';
  48
  49         // Protocol to use
  50         var protocol = 'http';
  51
  52         if(isHTTPS())
  53                 protocol = 'https';
  54
  55         // Legacy browser
  56         var legacy = false;
  57
  58         if((BrowserDetect.browser == 'Explorer') && (BrowserDetect.version < 9))
  59                 legacy = true;
  60
  61         // Switch to get the good DOM code
  62         switch(serv) {
  63                 case 'youtube':
  64                         if(legacy)
  65                                 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>';
  66                         else
  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>';
  68
  69                         break;
  70
  71                 case 'dailymotion':
  72                         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>';
  73
  74                         break;
  75
  76                 case 'vimeo':
  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) + '&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>';
  78
  79                         break;
  80
  81                 case 'theora':
  82                 case 'video':
  83                         code = '<video width="640" height="385" src="' + encodeQuotes(url) + '" controls autoplay><a href="' + encodeQuotes(url) + '" target="_blank">' + encodeQuotes(url) + '</a></video>';
  84
  85                         break;
  86
  87                 case 'vorbis':
  88                 case 'audio':
  89                         code = '<audio src="' + encodeQuotes(url) + '" controls autoplay><a href="' + encodeQuotes(url) + '" target="_blank">' + encodeQuotes(url) + '</a></audio>';
  90
  91                         break;
  92
  93                 case 'image':
  94                         code = '<a href="' + encodeQuotes(url) + '" target="_blank"><img alt="" src="' + encodeQuotes(url) + '" /></a>';
  95
  96                         break;
  97         }
  98
  99         return code;
 100 }
 101
 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
 105         closeIntegrateBox();
 106
 107         // Media integration not wanted?
 108         if(getDB('options', 'integratemedias') == '0')
 109                 return true;
 110
 111         // Apply the HTML code
 112         var dom_code = codeIntegrateBox(service, url);
 113
 114         // Any code: apply it!
 115         if(dom_code) {
 116                 // We show the integratebox
 117                 openIntegrateBox();
 118
 119                 // We add the code to the DOM
 120                 $('#integratebox .content').prepend('<div class="one-media">' + dom_code + '</div>');
 121
 122                 // Image waiting icon
 123                 if(service == 'image') {
 124                         var waitItem = $('#integratebox .wait');
 125
 126                         // Show it while it is loading
 127                         waitItem.show();
 128
 129                         // Hide it when it is loaded
 130                         $('#integratebox img').load(function() {
 131                                 waitItem.hide();
 132
 133                                 // Center the image vertically
 134                                 $(this).oneTime(10, function() {
 135                                         $(this).css('margin-top', (($('#integratebox .content').height() - $(this).height()) / 2));
 136                                 });
 137                         });
 138                 }
 139
 140                 // Large style?
 141                 var comments_id = genID();
 142
 143                 if(width_style == 'large') {
 144                         // Make the popup large
 145                         $('#integratebox .popup').addClass('large');
 146
 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>' +
 152                                         '</div>' +
 153                                 '</div>'
 154                         );
 155                 }
 156
 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);
 163
 164                 // Any comments?
 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);
 168                         else
 169                                 $('#integratebox .comments .comments-content').html('<div class="one-comment loading"><span class="icon talk-images"></span>' + _e("Comments locked!") + '</div>');
 170                 }
 171
 172                 // Get the previous values
 173                 var previous_url = url_array[index - 1];
 174                 var previous_services = services_array[index - 1];
 175
 176                 // Get the next values
 177                 var next_url = url_array[index + 1];
 178                 var next_services = services_array[index + 1];
 179
 180                 // Enable/disable buttons
 181                 if(previous_url && previous_services)
 182                         $('#integratebox .bottom .finish.previous').removeClass('disabled');
 183                 else
 184                         $('#integratebox .bottom .finish.previous').addClass('disabled');
 185
 186                 if(next_url && next_services)
 187                         $('#integratebox .bottom .finish.next').removeClass('disabled');
 188                 else
 189                         $('#integratebox .bottom .finish.next').addClass('disabled');
 190
 191                 // Click events
 192                 $('#integratebox .bottom .finish.previous, #integratebox .bottom .finish.next').click(function() {
 193                         // Not acceptable?
 194                         if($(this).is('.disabled'))
 195                                 return false;
 196
 197                         // Apply the event!
 198                         if($(this).is('.previous'))
 199                                 applyIntegrateBox(previous_url, previous_services, url_list, services_list, comments_e_list, comments_n_list, width_style);
 200                         else
 201                                 applyIntegrateBox(next_url, next_services, url_list, services_list, comments_e_list, comments_n_list, width_style);
 202
 203                         return false;
 204                 });
 205
 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);
 210
 211                                 return false;
 212                         });
 213
 214                 return false;
 215         }
 216
 217         // Nothing: return true to be able to open the URL in a new tab
 218         return true;
 219 }
 220
 221 // Checks whether the file ext can use integratebox or not
 222 function canIntegrateBox(ext) {
 223         // Can use?
 224         if(ext && ((ext == 'jpg') || (ext == 'jpeg') || (ext == 'png') || (ext == 'gif') || (ext == 'ogg') || (ext == 'oga') || (ext == 'ogv')))
 225                 return true;
 226
 227         return false;
 228 }
 229
 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();
 234
 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;
 240
 241                 // XMPP ID
 242                 if(href.match(/^xmpp:(.+)/i))
 243                         to = RegExp.$1;
 244
 245                 // YouTube video box
 246                 else if(href.match(/(\w{3,5})(:)(\S+)((\.youtube\.com\/watch(\?v|\?\S+v|\#\!v|\#\!\S+v)\=)|(youtu\.be\/))([^& ]+)((&amp;\S)|(&\S)|\s|$)/gim)) {
 247                         url = RegExp.$8;
 248                         service = 'youtube';
 249                 }
 250
 251                 // Dailymotion video box
 252                 else if(href.match(/(\w{3,5})(:)(\S+)\.dailymotion\.com\/video\/([\w\-]+)((\#[\w\-]+)|\s|$)/gim)) {
 253                         url = RegExp.$4;
 254                         service = 'dailymotion';
 255                 }
 256
 257                 // Vimeo video box
 258                 else if(href.match(/((\w{3,5})(:)(\S+)(vimeo|www\.vimeo)\.com\/([\w\-]+))/gim)) {
 259                         url = RegExp.$1;
 260                         service = 'vimeo';
 261                 }
 262
 263                 // Theora video box
 264                 else if(href.match(/((\w{3,5})(:)(\S+)(\.)(ogv|ogg))/gim)) {
 265                         url = RegExp.$1;
 266                         service = 'theora';
 267                 }
 268
 269                 // Vorbis audio box
 270                 else if(href.match(/((\w{3,5})(:)(\S+)(\.oga))/gim)) {
 271                         url = RegExp.$1;
 272                         service = 'vorbis';
 273                 }
 274
 275                 // Image box
 276                 else if(href.match(/((\w{3,5})(:)(\S+)(\.)(jpg|jpeg|png|gif|tif|bmp))/gim)) {
 277                         url = RegExp.$1;
 278                         service = 'image';
 279                 }
 280
 281                 // Define the good event
 282                 if(to)
 283                         event = 'xmppLink(\'' + encodeOnclick(to) + '\')';
 284                 else if(url && service)
 285                         event = 'applyIntegrateBox(\'' + encodeOnclick(url) + '\', \'' + encodeOnclick(service) + '\')';
 286
 287                 // Any click event to apply?
 288                 if(event) {
 289                         // Regenerate the link element (for onclick)
 290                         var new_a = '<a';
 291                         var element_a = (this);
 292
 293                         // Attributes
 294                         $(element_a.attributes).each(function(index) {
 295                                 // Read the current attribute
 296                                 var current_attr = element_a.attributes[index];
 297
 298                                 // Apply the current attribute
 299                                 new_a += ' ' + encodeQuotes(current_attr.name) + '="' + encodeQuotes(current_attr.value) + '"';
 300                         });
 301
 302                         // Add onclick attribute
 303                         new_a += ' onclick="return ' + event + ';"';
 304
 305                         // Value
 306                         new_a += '>' + $(this).text().htmlEnc() + '</a>';
 307
 308                         // Replace it!
 309                         $(this).replaceWith(new_a);
 310                 }
 311         });
 312
 313         // Regenerate the HTML code (include string into a div to be readable)
 314         var string = $(xml).html();
 315
 316         return string;
 317 }
 318
 319 // Plugin launcher
 320 function launchIntegratebox() {
 321         // Click event
 322         $('#integratebox .bottom .finish.close').click(closeIntegrateBox);
 323 }
 324
 325 // Plugin keyup event
 326 $(document).keyup(function(e) {
 327         // Previous item?
 328         if((exists('#integratebox .bottom .finish.previous:not(.disabled)')) && (e.keyCode == 37)) {
 329                 $('#integratebox .bottom .finish.previous').click();
 330
 331                 return false;
 332         }
 333
 334         // Next item?
 335         if((exists('#integratebox .bottom .finish.next:not(.disabled)')) && (e.keyCode == 39)) {
 336                 $('#integratebox .bottom .finish.next').click();
 337
 338                 return false;
 339         }
 340 });