/*
Jappix - An open social platform
These are the tooltip JS scripts for Jappix
-------------------------------------------------
License: AGPL
Author: Valérian Saliou
*/
// Bundle
var Tooltip = (function () {
/**
* Alias of this
* @private
*/
var self = {};
/**
* Creates a tooltip code
* @public
* @param {string} xid
* @param {string} hash
* @param {string} type
* @return {boolean}
*/
self.create = function(xid, hash, type) {
try {
// Path to the element
var path = '#' + hash;
var path_tooltip = path + ' .chat-tools-' + type;
var path_bubble = path_tooltip + ' .bubble-' + type;
// Yet exists?
if(Common.exists(path_bubble)) {
return false;
}
// Generates special tooltip HTML code
var title = '';
var content = '';
switch(type) {
// Smileys
case 'smileys':
title = Common._e("Smiley insertion");
content = Smileys.links(hash);
break;
// Style
case 'style':
title = Common._e("Change style");
// Generate fonts list
var fonts = {
'arial': 'Arial, Helvetica, sans-serif',
'arial-black': '\'Arial Black\', Gadget, sans-serif',
'bookman-old-style': '\'Bookman Old Style\', serif',
'comic-sans-ms': '\'Comic Sans MS\', cursive',
'courier': 'Courier, monospace',
'courier-new': '\'Courier New\', Courier, monospace',
'garamond': 'Garamond, serif',
'georgia': 'Georgia, serif',
'impact': 'Impact, Charcoal, sans-serif',
'lucida-console': '\'Lucida Console\', Monaco, monospace',
'lucida-sans-unicode': '\'Lucida Sans Unicode\', \'Lucida Grande\', sans-serif',
'ms-sans-serif': '\'MS Sans Serif\', Geneva, sans-serif',
'ms-serif': '\'MS Serif\', \'New York\', sans-serif',
'palatino-linotype': '\'Palatino Linotype\', \'Book Antiqua\', Palatino, serif',
'symbol': 'Symbol, sans-serif',
'tahoma': 'Tahoma, Geneva, sans-serif',
'times-new-roman': '\'Times New Roman\', Times, serif',
'trebuchet-ms': '\'Trebuchet MS\', Helvetica, sans-serif',
'verdana': 'Verdana, Geneva, sans-serif',
'webdings': 'Webdings, sans-serif',
'wingdings': 'Wingdings, \'Zapf Dingbats\', sans-serif'
};
var fonts_html = '';
// No fonts
fonts_html += '
' + Common._e("None") + '';
// Available fonts
$.each(fonts, function(id_name, full_name) {
// Generate short name
var short_name = full_name;
if(short_name.match(/,/)) {
var name_split = short_name.split(',');
short_name = $.trim(name_split[0]);
}
short_name = short_name.replace(/([^a-z0-9\s]+)/gi, '');
// Add this to the HTML
fonts_html += '
' + short_name.htmlEnc() + '';
});
fonts_html += '
' +
'
' +
'
' +
'#' +
'' +
'
' +
'
' + Common._e("Once uploaded, your friend will be prompted to download the file you sent.") + '
';
content += '';
break;
// Chat log
case 'save':
title = Common._e("Save chat");
content = '' + Common._e("Click on the following link to get the chat log, and wait. Then click again to get the file.") + '
';
// Possible to generate any log?
if($(path + ' .one-line').size())
content += '' + Common._e("Generate file!") + '';
else
content += '' + Common._e("This chat is empty!") + '';
break;
}
// Generates general tooltip HTML code
var html =
'';
// Append the HTML code
$(path_tooltip).append(html);
// Special events
switch(type) {
// Smileys
case 'smileys':
// Apply click event on smiley links
$(path_tooltip + ' a.emoticon').click(function() {
return Interface.insertSmiley($(this).attr('data-smiley'), hash);
});
break;
// Style
case 'style':
// Paths to items
var message_area = path + ' .message-area';
var bubble_style = path_tooltip + ' .bubble-style';
var style = bubble_style + ' input:checkbox';
var colors = bubble_style + ' a.color';
var font_current = bubble_style + ' a.font-current';
var font_list = bubble_style + ' div.font-list';
var font_select = font_list + ' a';
var fontsize_current = bubble_style + ' a.fontsize-current';
var fontsize_list = bubble_style + ' div.fontsize-list';
var fontsize_select = fontsize_list + ' a';
var color = bubble_style + ' div.color-picker';
var color_more = color + ' a.color-more';
var color_hex = color + ' div.color-hex';
// Click event on style bubble
$(bubble_style).click(function() {
// Hide font selector if opened
if($(font_list).is(':visible')) {
$(font_current).click();
}
// Hide font-size selector if opened
if($(fontsize_list).is(':visible')) {
$(fontsize_current).click();
}
// Hide color selector if opened
if($(color_hex).is(':visible')) {
$(color_more).click();
}
});
// Click event on font picker
$(font_current).click(function() {
var this_sel = $(this);
// The clicked color is yet selected
if($(font_list).is(':visible')) {
this_sel.parent().removeClass('listed');
} else {
this_sel.parent().addClass('listed');
}
return false;
});
// Click event on a new font in the picker
$(font_select).click(function() {
var this_sel = $(this);
// No font selected
if(!this_sel.attr('data-value')) {
$(font_current).removeAttr('data-font')
.removeAttr('data-value')
.text(Common._e("None"));
$(message_area).removeAttr('data-font');
} else {
$(font_current).attr('data-font', this_sel.attr('data-font'))
.attr('data-value', this_sel.attr('data-value'))
.text($(font_list).find('a[data-value="' + this_sel.attr('data-value') + '"]').text());
$(message_area).attr('data-font', this_sel.attr('data-value'));
}
return false;
});
// Click event on font-size picker
$(fontsize_current).click(function() {
var this_sel = $(this);
// The clicked color is yet selected
if($(fontsize_list).is(':visible')) {
this_sel.parent().removeClass('listed');
} else {
this_sel.parent().addClass('listed');
}
return false;
});
// Click event on a new font-size in the picker
$(fontsize_select).click(function() {
var this_sel = $(this);
// No font-size selected
if(!this_sel.attr('data-value')) {
$(fontsize_current).removeAttr('data-value').text(Common._e("16"));
$(message_area).removeAttr('data-fontsize');
}
// A font-size is defined
else {
$(fontsize_current).attr('data-value', this_sel.attr('data-value'))
.text(this_sel.attr('data-value'));
$(message_area).attr('data-fontsize', this_sel.attr('data-value'));
}
return false;
});
// Click event on color picker
$(colors).click(function() {
var this_sel = $(this);
// Reset the manual picker
$(color_hex).find('input').val('');
// The clicked color is yet selected
if(this_sel.hasClass('selected')) {
$(message_area).removeAttr('data-color');
this_sel.removeClass('selected');
}
else {
$(message_area).attr('data-color', this_sel.attr('data-color'));
$(colors).removeClass('selected');
this_sel.addClass('selected');
}
return false;
});
// Click event on color picker
$(color_more).click(function() {
var this_sel = $(this);
// The clicked color is yet selected
if($(color_hex).is(':visible')) {
this_sel.parent().removeClass('opened');
} else {
this_sel.parent().addClass('opened');
// Focus
$(document).oneTime(10, function() {
$(color_hex).find('input').focus();
});
}
return false;
});
// Click event on color hex
$(color_hex).click(function() {
return false;
});
// Keyup event on color picker
$(color_hex).find('input').keyup(function(e) {
var this_sel = $(this);
// Submit
if(e.keyCode == 13) {
if($(color_hex).is(':visible')) {
$(color_more).click();
// Focus again on the message textarea
$(document).oneTime(10, function() {
$(message_area).focus();
});
}
return false;
}
// Reset current color
$(message_area).removeAttr('data-color');
$(colors).removeClass('selected');
// Change value
var new_value = this_sel.val().replace(/([^a-z0-9]+)/gi, '');
this_sel.val(new_value);
if(new_value) {
$(message_area).attr('data-color', new_value);
}
// Regenerate style
var style = Message.generateStyle(hash);
// Any style to apply?
if(style) {
$(message_area).attr('style', style);
} else {
$(message_area).removeAttr('style');
}
}).placeholder();
// Change event on text style checkboxes
$(style).change(function() {
var this_sel = $(this);
// Get current type
var style_data = 'data-' + this_sel.attr('class');
// Checked checkbox?
if(this_sel.filter(':checked').size()) {
$(message_area).attr(style_data, true);
} else {
$(message_area).removeAttr(style_data);
}
});
// Update the textarea style when it is changed
$(style + ', ' + colors + ', ' + font_select + ', ' + fontsize_select).click(function() {
var style = Message.generateStyle(hash);
// Any style to apply?
if(style) {
$(message_area).attr('style', style);
} else {
$(message_area).removeAttr('style');
}
// Focus again on the message textarea
$(document).oneTime(10, function() {
$(message_area).focus();
});
});
// Load current style
self.loadStyleSelector(hash);
break;
// File send
case 'file':
// File upload vars
var oob_upload_options = {
dataType: 'xml',
beforeSubmit: OOB.waitUpload,
success: OOB.handleUpload
};
// Upload form submit event
$(path_tooltip + ' #oob-upload').submit(function() {
var this_sel = $(this);
if($(path_tooltip + ' #oob-upload input[type="file"]').val()) {
this_sel.ajaxSubmit(oob_upload_options);
}
return false;
});
// Upload input change event
$(path_tooltip + ' #oob-upload input[type="file"]').change(function() {
var this_sel = $(this);
if(this_sel.val()) {
$(path_tooltip + ' #oob-upload').ajaxSubmit(oob_upload_options);
}
return false;
});
// Input click event
$(path_tooltip + ' #oob-upload input[type="file"], ' + path_tooltip + ' #oob-upload input[type="submit"]').click(function() {
if(Common.exists(path_tooltip + ' #oob-upload input[type="reset"]')) {
return;
}
// Lock the bubble
$(path_bubble).addClass('locked');
// Add a cancel button
$(this).after('');
// Cancel button click event
$(path_tooltip + ' #oob-upload input[type="reset"]').click(function() {
// Remove the bubble
$(path_bubble).removeClass('locked');
self.destroy(hash, 'file');
});
});
break;
// Chat log
case 'save':
// Chat log generation click event
$(path_tooltip + ' .tooltip-actionlog').click(function() {
// Replace it with a waiting notice
$(this).replaceWith('' + Common._e("Please wait...") + '');
Interface.generateChatLog(xid, hash);
return false;
});
break;
}
return true;
} catch(e) {
Console.error('Tooltip.create', e);
}
};
/**
* Destroys a tooltip code
* @public
* @param {string} hash
* @param {string} type
* @return {undefined}
*/
self.destroy = function(hash, type) {
try {
$('#' + hash + ' .chat-tools-content:not(.mini) .bubble-' + type + ':not(.locked)').remove();
} catch(e) {
Console.error('Tooltip.destroy', e);
}
};
/**
* Applies the page-engine tooltips hover event
* @public
* @param {string} xid
* @param {string} hash
* @param {string} type
* @return {undefined}
*/
self.hover = function(xid, hash, type) {
try {
$('#' + hash + ' .chat-tools-' + type).hover(function() {
self.create(xid, hash, type);
}, function() {
self.destroy(hash, type);
});
} catch(e) {
Console.error('Tooltip.hover', e);
}
};
/**
* Applies the hover function to the needed things
* @public
* @param {string} xid
* @param {string} hash
* @return {undefined}
*/
self.icons = function(xid, hash) {
try {
// Hover events
self.hover(xid, hash, 'smileys');
self.hover(xid, hash, 'style');
self.hover(xid, hash, 'file');
self.hover(xid, hash, 'save');
// Click events
$('#' + hash + ' a.chat-tools-content, #' + hash + ' .chat-tools-content a').click(function() {
return false;
});
} catch(e) {
Console.error('Tooltip.icons', e);
}
};
/**
* Loads the style selector options
* @public
* @param {string} hash
* @return {undefined}
*/
self.loadStyleSelector = function(hash) {
try {
// Define the vars
var path = '#' + hash;
var message_area = $(path + ' .message-area');
var bubble_style = path + ' .bubble-style';
var font = message_area.attr('data-font');
var font_select = $(bubble_style + ' div.font-list').find('a[data-value="' + font + '"]');
var fontsize = message_area.attr('data-fontsize');
var color = message_area.attr('data-color');
// Apply message font
if(font) {
$(bubble_style + ' a.font-current').attr('data-value', font)
.attr('data-font', font_select.attr('data-font'))
.text(font_select.text());
}
// Apply message font-size
if(fontsize) {
$(bubble_style + ' a.fontsize-current').attr('data-value', fontsize)
.text(fontsize);
}
// Apply the options to the style selector
$(bubble_style + ' input[type="checkbox"]').each(function() {
var this_sel = $(this);
// Current input enabled?
if(message_area.attr('data-' + this_sel.attr('class'))) {
this_sel.attr('checked', true);
}
});
// Apply message color
if(color) {
if($(bubble_style + ' a.color[data-color="' + color + '"]').size()) {
$(bubble_style + ' a.color[data-color="' + color + '"]').addClass('selected');
} else {
$(bubble_style + ' div.color-hex input.hex-value').val(color);
}
}
} catch(e) {
Console.error('Tooltip.loadStyleSelector', e);
}
};
/**
* Return class scope
*/
return self;
})();