3 Jappix - An open social platform
4 These are the tooltip JS scripts for Jappix
6 -------------------------------------------------
10 Last revision: 27/08/11
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;
22 if(exists(path_bubble))
25 // Generates special tooltip HTML code
32 title = _e("Smiley insertion");
33 content = smileyLinks(hash);
39 title = _e("Change style");
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>';
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>';
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>';
68 // Possible to generate any log?
69 if($(path + ' .one-line').size())
70 content += '<a href="#" class="tooltip-actionlog">' + _e("Generate file!") + '</a>';
72 content += '<span class="tooltip-nolog">' + _e("This chat is empty!") + '</span>';
77 // Generates general tooltip HTML code
79 '<div class="tooltip bubble-' + type + '">' +
80 '<div class="tooltip-subitem">' +
81 '<p class="tooltip-top">' + title + '</p>' +
85 '<div class="tooltip-subarrow talk-images"></div>' +
88 // Append the HTML code
89 $(path_tooltip).append(html);
95 // Apply click event on smiley links
96 $(path_tooltip + ' a.emoticon').click(function() {
97 return insertSmiley($(this).attr('data-smiley'), hash);
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';
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');
119 $(message_area).attr('data-color', $(this).attr('data-color'));
120 $(colors).removeClass('selected');
121 $(this).addClass('selected');
127 // Change event on text style checkboxes
128 $(style).change(function() {
130 var style_data = 'data-' + $(this).attr('class');
133 if($(this).filter(':checked').size())
134 $(message_area).attr(style_data, true);
136 $(message_area).removeAttr(style_data);
139 // Update the textarea style when it is changed
140 $(style + ', ' + colors).click(function() {
141 var style = generateStyle(hash);
143 // Any style to apply?
145 $(message_area).attr('style', style);
147 $(message_area).removeAttr('style');
149 // Focus again on the message textarea
150 $(document).oneTime(10, function() {
151 $(message_area).focus();
155 // Load current style
156 loadStyleSelector(hash);
163 var oob_upload_options = {
165 beforeSubmit: waitUploadOOB,
166 success: handleUploadOOB
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);
177 // Upload input change event
178 $(path_tooltip + ' #oob-upload input[type=file]').change(function() {
180 $(path_tooltip + ' #oob-upload').ajaxSubmit(oob_upload_options);
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]'))
191 $(path_bubble).addClass('locked');
193 // Add a cancel button
194 $(this).after('<input type="reset" value="' + _e("Cancel") + '" />');
196 // Cancel button click event
197 $(path_tooltip + ' #oob-upload input[type=reset]').click(function() {
199 $(path_bubble).removeClass('locked');
200 destroyTooltip(hash, 'file');
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>');
213 generateChatLog(xid, hash);
224 // Destroys a tooltip code
225 function destroyTooltip(hash, type) {
226 $('#' + hash + ' .chat-tools-content:not(.mini) .bubble-' + type + ':not(.locked)').remove();
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);
234 destroyTooltip(hash, type)
238 // Applies the hoverTooltip function to the needed things
239 function tooltipIcons(xid, hash) {
241 hoverTooltip(xid, hash, 'smileys');
242 hoverTooltip(xid, hash, 'style');
243 hoverTooltip(xid, hash, 'file');
244 hoverTooltip(xid, hash, 'save');
247 $('#' + hash + ' a.chat-tools-content, #' + hash + ' .chat-tools-content a').click(function() {
252 // Loads the style selector options
253 function loadStyleSelector(hash) {
255 var path = '#' + hash;
256 var message_area = $(path + ' .message-area');
257 var bubble_style = path + ' .bubble-style';
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);
266 // Apply message color
267 $(bubble_style + ' a.color[data-color=' + message_area.attr('data-color') + ']').addClass('selected');