friendica-addons/jappixmini/jappix/js/tooltip.js

/*

Jappix - An open social platform
These are the tooltip JS scripts for Jappix

-------------------------------------------------

License: AGPL
Author: Vanaryon
Last revision: 27/08/11

*/

// Creates a tooltip code
function createTooltip(xid, hash, type) {
	// Path to the element
	var path = '#' + hash;
	var path_tooltip = path + ' .chat-tools-' + type;
	var path_bubble = path_tooltip + ' .bubble-' + type;
	
	// Yet exists?
	if(exists(path_bubble))
		return false;
	
	// Generates special tooltip HTML code
	var title = '';
	var content = '';
	
	switch(type) {
		// Smileys
		case 'smileys':
			title = _e("Smiley insertion");
			content = smileyLinks(hash);
			
			break;
		
		// Style
		case 'style':
			title = _e("Change style");
			content = 
				'<label class="bold"><input type="checkbox" class="bold" />' + _e("Text in bold") + '</label>' + 
				'<label class="italic"><input type="checkbox" class="italic" />' + _e("Text in italic") + '</label>' + 
				'<label class="underline"><input type="checkbox" class="underline" />' + _e("Underlined text") + '</label>' + 
				'<a href="#" class="color" style="background-color: #b10808; clear: both;" data-color="b10808"></a>' + 
				'<a href="#" class="color" style="background-color: #e5860c;" data-color="e5860c"></a>' + 
				'<a href="#" class="color" style="background-color: #f0f30e;" data-color="f0f30e"></a>' + 
				'<a href="#" class="color" style="background-color: #009a04;" data-color="009a04"></a>' + 
				'<a href="#" class="color" style="background-color: #0ba9a0;" data-color="0ba9a0"></a>' + 
				'<a href="#" class="color" style="background-color: #04228f;" data-color="04228f"></a>' + 
				'<a href="#" class="color" style="background-color: #9d0ab7;" data-color="9d0ab7"></a>' + 
				'<a href="#" class="color" style="background-color: #8a8a8a;" data-color="8a8a8a"></a>';
			
			break;
		
		// File send
		case 'file':
			title = _e("Send a file");
			content = '<p style="margin-bottom: 8px;">' + _e("Once uploaded, your friend will be prompted to download the file you sent.") + '</p>';
			content += '<form id="oob-upload" action="./php/send.php" method="post" enctype="multipart/form-data">' + generateFileShare() + '</form>';
			
			break;
		
		// Chat log
		case 'save':
			title = _e("Save chat");
			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>';
			
			// Possible to generate any log?
			if($(path + ' .one-line').size())
				content += '<a href="#" class="tooltip-actionlog">' + _e("Generate file!") + '</a>';
			else
				content += '<span class="tooltip-nolog">' + _e("This chat is empty!") + '</span>';
			
			break;
	}
	
	// Generates general tooltip HTML code
	var html = 
		'<div class="tooltip bubble-' + type + '">' + 
			'<div class="tooltip-subitem">' + 
				'<p class="tooltip-top">' + title + '</p>' + 
				content + 
			'</div>' + 
			
			'<div class="tooltip-subarrow talk-images"></div>' + 
		'</div>';
	
	// 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 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';
			
			// Click event on color picker
			$(colors).click(function() {
				// The clicked color is yet selected
				if($(this).hasClass('selected')) {
					$(message_area).removeAttr('data-color');
					$(this).removeClass('selected');
				}
				
				else {
					$(message_area).attr('data-color', $(this).attr('data-color'));
					$(colors).removeClass('selected');
					$(this).addClass('selected');
				}
				
				return false;
			});
			
			// Change event on text style checkboxes
			$(style).change(function() {
				// Get current type
				var style_data = 'data-' + $(this).attr('class');
				
				// Checked checkbox?
				if($(this).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).click(function() {
				var style = 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
			loadStyleSelector(hash);
			
			break;
		
		// File send
		case 'file':
			// File upload vars
			var oob_upload_options = {
				dataType:	'xml',
				beforeSubmit:	waitUploadOOB,
				success:	handleUploadOOB
			};
			
			// Upload form submit event
			$(path_tooltip + ' #oob-upload').submit(function() {
				if($(path_tooltip + ' #oob-upload input[type=file]').val())
					$(this).ajaxSubmit(oob_upload_options);
				
				return false;
			});
			
			// Upload input change event
			$(path_tooltip + ' #oob-upload input[type=file]').change(function() {
				if($(this).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(exists(path_tooltip + ' #oob-upload input[type=reset]'))
					return;
				
				// Lock the bubble
				$(path_bubble).addClass('locked');
				
				// Add a cancel button
				$(this).after('<input type="reset" value="' + _e("Cancel") + '" />');
				
				// Cancel button click event
				$(path_tooltip + ' #oob-upload input[type=reset]').click(function() {
					// Remove the bubble
					$(path_bubble).removeClass('locked');
					destroyTooltip(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('<span class="tooltip-waitlog">' + _e("Please wait...") + '</span>');
				
				generateChatLog(xid, hash);
				
				return false;
			});
			
			break;
	}
	
	return true;
}

// Destroys a tooltip code
function destroyTooltip(hash, type) {
	$('#' + hash + ' .chat-tools-content:not(.mini) .bubble-' + type + ':not(.locked)').remove();
}

// Applies the page-engine tooltips hover event
function hoverTooltip(xid, hash, type) {
	$('#' + hash + ' .chat-tools-' + type).hover(function() {
		createTooltip(xid, hash, type);
	}, function() {
		destroyTooltip(hash, type)
	});
}

// Applies the hoverTooltip function to the needed things
function tooltipIcons(xid, hash) {
	// Hover events
	hoverTooltip(xid, hash, 'smileys');
	hoverTooltip(xid, hash, 'style');
	hoverTooltip(xid, hash, 'file');
	hoverTooltip(xid, hash, 'save');
	
	// Click events
	$('#' + hash + ' a.chat-tools-content, #' + hash + ' .chat-tools-content a').click(function() {
		return false;
	});
}

// Loads the style selector options
function loadStyleSelector(hash) {
	// Define the vars
	var path = '#' + hash;
	var message_area = $(path + ' .message-area');
	var bubble_style = path + ' .bubble-style';
	
	// Apply the options to the style selector
	$(bubble_style + ' input[type=checkbox]').each(function() {
		// Current input enabled?
		if(message_area.attr('data-' + $(this).attr('class')))
			$(this).attr('checked', true);
	});
	
	// Apply message color
	$(bubble_style + ' a.color[data-color=' + message_area.attr('data-color') + ']').addClass('selected');
}