jappixmini/jappix/js/tooltip.js

   1 /*
   2
   3 Jappix - An open social platform
   4 These are the tooltip JS scripts for Jappix
   5
   6 -------------------------------------------------
   7
   8 License: AGPL
   9 Author: Vanaryon
  10 Last revision: 27/08/11
  11
  12 */
  13
  14 // Creates a tooltip code
  15 function createTooltip(xid, hash, type) {
  16         // Path to the element
  17         var path = '#' + hash;
  18         var path_tooltip = path + ' .chat-tools-' + type;
  19         var path_bubble = path_tooltip + ' .bubble-' + type;
  20
  21         // Yet exists?
  22         if(exists(path_bubble))
  23                 return false;
  24
  25         // Generates special tooltip HTML code
  26         var title = '';
  27         var content = '';
  28
  29         switch(type) {
  30                 // Smileys
  31                 case 'smileys':
  32                         title = _e("Smiley insertion");
  33                         content = smileyLinks(hash);
  34
  35                         break;
  36
  37                 // Style
  38                 case 'style':
  39                         title = _e("Change style");
  40                         content =
  41                                 '<label class="bold"><input type="checkbox" class="bold" />' + _e("Text in bold") + '</label>' +
  42                                 '<label class="italic"><input type="checkbox" class="italic" />' + _e("Text in italic") + '</label>' +
  43                                 '<label class="underline"><input type="checkbox" class="underline" />' + _e("Underlined text") + '</label>' +
  44                                 '<a href="#" class="color" style="background-color: #b10808; clear: both;" data-color="b10808"></a>' +
  45                                 '<a href="#" class="color" style="background-color: #e5860c;" data-color="e5860c"></a>' +
  46                                 '<a href="#" class="color" style="background-color: #f0f30e;" data-color="f0f30e"></a>' +
  47                                 '<a href="#" class="color" style="background-color: #009a04;" data-color="009a04"></a>' +
  48                                 '<a href="#" class="color" style="background-color: #0ba9a0;" data-color="0ba9a0"></a>' +
  49                                 '<a href="#" class="color" style="background-color: #04228f;" data-color="04228f"></a>' +
  50                                 '<a href="#" class="color" style="background-color: #9d0ab7;" data-color="9d0ab7"></a>' +
  51                                 '<a href="#" class="color" style="background-color: #8a8a8a;" data-color="8a8a8a"></a>';
  52
  53                         break;
  54
  55                 // File send
  56                 case 'file':
  57                         title = _e("Send a file");
  58                         content = '<p style="margin-bottom: 8px;">' + _e("Once uploaded, your friend will be prompted to download the file you sent.") + '</p>';
  59                         content += '<form id="oob-upload" action="./php/send.php" method="post" enctype="multipart/form-data">' + generateFileShare() + '</form>';
  60
  61                         break;
  62
  63                 // Chat log
  64                 case 'save':
  65                         title = _e("Save chat");
  66                         content = '<p style="margin-bottom: 8px;">' + _e("Click on the following link to get the chat log, and wait. Then click again to get the file.") + '</p>';
  67
  68                         // Possible to generate any log?
  69                         if($(path + ' .one-line').size())
  70                                 content += '<a href="#" class="tooltip-actionlog">' + _e("Generate file!") + '</a>';
  71                         else
  72                                 content += '<span class="tooltip-nolog">' + _e("This chat is empty!") + '</span>';
  73
  74                         break;
  75         }
  76
  77         // Generates general tooltip HTML code
  78         var html =
  79                 '<div class="tooltip bubble-' + type + '">' +
  80                         '<div class="tooltip-subitem">' +
  81                                 '<p class="tooltip-top">' + title + '</p>' +
  82                                 content +
  83                         '</div>' +
  84
  85                         '<div class="tooltip-subarrow talk-images"></div>' +
  86                 '</div>';
  87
  88         // Append the HTML code
  89         $(path_tooltip).append(html);
  90
  91         // Special events
  92         switch(type) {
  93                 // Smileys
  94                 case 'smileys':
  95                         // Apply click event on smiley links
  96                         $(path_tooltip + ' a.emoticon').click(function() {
  97                                 return insertSmiley($(this).attr('data-smiley'), hash);
  98                         });
  99
 100                         break;
 101
 102                 // Style
 103                 case 'style':
 104                         // Paths to items
 105                         var message_area = path + ' .message-area';
 106                         var bubble_style = path_tooltip + ' .bubble-style ';
 107                         var style = bubble_style + 'input:checkbox';
 108                         var colors = bubble_style + 'a.color';
 109
 110                         // Click event on color picker
 111                         $(colors).click(function() {
 112                                 // The clicked color is yet selected
 113                                 if($(this).hasClass('selected')) {
 114                                         $(message_area).removeAttr('data-color');
 115                                         $(this).removeClass('selected');
 116                                 }
 117
 118                                 else {
 119                                         $(message_area).attr('data-color', $(this).attr('data-color'));
 120                                         $(colors).removeClass('selected');
 121                                         $(this).addClass('selected');
 122                                 }
 123
 124                                 return false;
 125                         });
 126
 127                         // Change event on text style checkboxes
 128                         $(style).change(function() {
 129                                 // Get current type
 130                                 var style_data = 'data-' + $(this).attr('class');
 131
 132                                 // Checked checkbox?
 133                                 if($(this).filter(':checked').size())
 134                                         $(message_area).attr(style_data, true);
 135                                 else
 136                                         $(message_area).removeAttr(style_data);
 137                         });
 138
 139                         // Update the textarea style when it is changed
 140                         $(style + ', ' + colors).click(function() {
 141                                 var style = generateStyle(hash);
 142
 143                                 // Any style to apply?
 144                                 if(style)
 145                                         $(message_area).attr('style', style);
 146                                 else
 147                                         $(message_area).removeAttr('style');
 148
 149                                 // Focus again on the message textarea
 150                                 $(document).oneTime(10, function() {
 151                                         $(message_area).focus();
 152                                 });
 153                         });
 154
 155                         // Load current style
 156                         loadStyleSelector(hash);
 157
 158                         break;
 159
 160                 // File send
 161                 case 'file':
 162                         // File upload vars
 163                         var oob_upload_options = {
 164                                 dataType:       'xml',
 165                                 beforeSubmit:   waitUploadOOB,
 166                                 success:        handleUploadOOB
 167                         };
 168
 169                         // Upload form submit event
 170                         $(path_tooltip + ' #oob-upload').submit(function() {
 171                                 if($(path_tooltip + ' #oob-upload input[type=file]').val())
 172                                         $(this).ajaxSubmit(oob_upload_options);
 173
 174                                 return false;
 175                         });
 176
 177                         // Upload input change event
 178                         $(path_tooltip + ' #oob-upload input[type=file]').change(function() {
 179                                 if($(this).val())
 180                                         $(path_tooltip + ' #oob-upload').ajaxSubmit(oob_upload_options);
 181
 182                                 return false;
 183                         });
 184
 185                         // Input click event
 186                         $(path_tooltip + ' #oob-upload input[type=file], ' + path_tooltip + ' #oob-upload input[type=submit]').click(function() {
 187                                 if(exists(path_tooltip + ' #oob-upload input[type=reset]'))
 188                                         return;
 189
 190                                 // Lock the bubble
 191                                 $(path_bubble).addClass('locked');
 192
 193                                 // Add a cancel button
 194                                 $(this).after('<input type="reset" value="' + _e("Cancel") + '" />');
 195
 196                                 // Cancel button click event
 197                                 $(path_tooltip + ' #oob-upload input[type=reset]').click(function() {
 198                                         // Remove the bubble
 199                                         $(path_bubble).removeClass('locked');
 200                                         destroyTooltip(hash, 'file');
 201                                 });
 202                         });
 203
 204                         break;
 205
 206                 // Chat log
 207                 case 'save':
 208                         // Chat log generation click event
 209                         $(path_tooltip + ' .tooltip-actionlog').click(function() {
 210                                 // Replace it with a waiting notice
 211                                 $(this).replaceWith('<span class="tooltip-waitlog">' + _e("Please wait...") + '</span>');
 212
 213                                 generateChatLog(xid, hash);
 214
 215                                 return false;
 216                         });
 217
 218                         break;
 219         }
 220
 221         return true;
 222 }
 223
 224 // Destroys a tooltip code
 225 function destroyTooltip(hash, type) {
 226         $('#' + hash + ' .chat-tools-content:not(.mini) .bubble-' + type + ':not(.locked)').remove();
 227 }
 228
 229 // Applies the page-engine tooltips hover event
 230 function hoverTooltip(xid, hash, type) {
 231         $('#' + hash + ' .chat-tools-' + type).hover(function() {
 232                 createTooltip(xid, hash, type);
 233         }, function() {
 234                 destroyTooltip(hash, type)
 235         });
 236 }
 237
 238 // Applies the hoverTooltip function to the needed things
 239 function tooltipIcons(xid, hash) {
 240         // Hover events
 241         hoverTooltip(xid, hash, 'smileys');
 242         hoverTooltip(xid, hash, 'style');
 243         hoverTooltip(xid, hash, 'file');
 244         hoverTooltip(xid, hash, 'save');
 245
 246         // Click events
 247         $('#' + hash + ' a.chat-tools-content, #' + hash + ' .chat-tools-content a').click(function() {
 248                 return false;
 249         });
 250 }
 251
 252 // Loads the style selector options
 253 function loadStyleSelector(hash) {
 254         // Define the vars
 255         var path = '#' + hash;
 256         var message_area = $(path + ' .message-area');
 257         var bubble_style = path + ' .bubble-style';
 258
 259         // Apply the options to the style selector
 260         $(bubble_style + ' input[type=checkbox]').each(function() {
 261                 // Current input enabled?
 262                 if(message_area.attr('data-' + $(this).attr('class')))
 263                         $(this).attr('checked', true);
 264         });
 265
 266         // Apply message color
 267         $(bubble_style + ' a.color[data-color=' + message_area.attr('data-color') + ']').addClass('selected');
 268 }