152 lines
6.8 KiB
JavaScript
152 lines
6.8 KiB
JavaScript
/*!
|
|
* FireHint plugin for jQuery
|
|
* https://github.com/nikolay-zakharov/jquery-fireHint
|
|
*
|
|
* Copyright 2012, Nikolay Zakharov <nickolay.zakharov@gmail.com>
|
|
* Date: Thu June 28 21:44:17 2012 +0400
|
|
*/
|
|
|
|
(function($) {
|
|
$.fn.fireHint = function(custom_config) {
|
|
|
|
// Default configuration
|
|
var default_config = {
|
|
elements: {
|
|
header: [],// DOM elements list that will be placed inside `strong.firehint-header` element of the hint
|
|
body: []// DOM elements list that will be placed inside `div.firehint-content-body` element of the hint
|
|
},
|
|
timeouts: {
|
|
hide: 5000,// Hint will disapper after (ms)
|
|
slide: 300,// Hint will get animation for (ms)
|
|
fade: 70// Hint will disappear during (ms) /starts animation is finished/
|
|
},
|
|
rows: {
|
|
count: 2,
|
|
position: 'bl',// `tr` means Top-Right. Also available: `tl` (top-left), `br` (bottom-right), `bl` (bottom-left)
|
|
minTop: 20,// Vertical limits of set of hints
|
|
maxTop: 20// Vertical limits of set of hints
|
|
},
|
|
cells: {
|
|
margins: {// Gap between hints
|
|
vertical: 30,// ...vertical
|
|
horizontal: 20// ,.,horizontal
|
|
},
|
|
width: 352
|
|
},
|
|
additionalClasses: {
|
|
'.firehint-msg-box': [],// You can assign custom css classes for messagebox
|
|
'.firehint-header': [],// ...or just header
|
|
'.firehint-content-body': []// ...or just content body
|
|
},
|
|
bindings: {// Here you can configure custom events. Object mask as a Key and object as a Value.
|
|
// This object (Value) has event name as a Key and `function(Event){...}` as a Value.
|
|
// You are able to bind any behaviour to any DOM Object inside main message-box (`.firehint-msg-box`) or to its own
|
|
'.firehint-msg-box': {
|
|
selectstart: function(evt){ evt.preventDefault(); },
|
|
mouseenter: function(evt){ $(evt.target).animate(config.css_states.hover, config.timeouts.fade); },
|
|
mouseleave: function(evt){ $(evt.target).animate(config.css_states.general, config.timeouts.fade); }
|
|
},
|
|
'.firehint-infadable': {
|
|
mouseenter: function(evt){ $(evt.target).parents('.firehint-msg-box:first').trigger('mouseleave'); },
|
|
mouseleave: function(evt){ $(evt.target).parents('.firehint-msg-box:first').trigger('mouseenter'); }
|
|
}
|
|
},
|
|
css_states: {
|
|
general: { opacity: 0.85 },
|
|
hover: { opacity: 1 }
|
|
}
|
|
};
|
|
var config = $.extend(true, null, default_config, custom_config);
|
|
|
|
// Running plugin
|
|
return this.each(function(ind, msg_box_blank_element){
|
|
var msg_box_unique_id = (new Date()).getTime()+'_'+(Math.round(Math.random()*8999-(-1000)));
|
|
var msg_box_element = $(msg_box_blank_element).clone().appendTo(document.body).data('uid', msg_box_unique_id);
|
|
|
|
// Setting timeout for message box to hide
|
|
var current_box_interval = window.setTimeout(function(){
|
|
var current_message_box_height = $(msg_box_element).height();
|
|
|
|
// Tells about freed space
|
|
document.fireHint.rows[row_ind].free -= -(config.cells.margins.vertical - (- current_message_box_height));
|
|
document.fireHint.rows[row_ind].occupied -= (current_message_box_height - (- config.cells.margins.vertical));
|
|
document.fireHint.rows[$(msg_box_element).data('row_index')].message_boxes[msg_box_unique_id] = undefined;
|
|
|
|
// Slide top (or bottom) other message boxes inside current row
|
|
if(typeof config.timeouts.slide == 'number' && config.timeouts.slide > 0){
|
|
for(var uid in document.fireHint.rows[$(msg_box_element).data('row_index')].message_boxes){
|
|
var some_message_box = document.fireHint.rows[$(msg_box_element).data('row_index')].message_boxes[uid];
|
|
if(typeof some_message_box != 'undefined'){
|
|
some_message_box.animate({
|
|
top: $(some_message_box).position().top + (config.cells.margins.vertical - (- current_message_box_height))
|
|
}, config.timeouts.slide);
|
|
}
|
|
}
|
|
}
|
|
|
|
$(msg_box_element).fadeOut().remove();
|
|
}, config.timeouts.hide);
|
|
|
|
// Technical data, being used by timeout callback function
|
|
if(typeof document.fireHint == 'undefined'){ document.fireHint = { active_timeouts: {}, rows: {} }; }
|
|
if(typeof document.fireHint.active_timeouts[msg_box_unique_id] != 'undefined'){
|
|
window.clearTimeout(document.fireHint.active_timeouts[msg_box_unique_id]);
|
|
document.fireHint.active_timeouts[msg_box_unique_id] = undefined;
|
|
}
|
|
document.fireHint.active_timeouts[msg_box_unique_id] = current_box_interval;
|
|
|
|
// Technical data, being used on looking for place for a message boxes
|
|
for(var row_ind=1; row_ind<=config.rows.count; row_ind++){
|
|
if(typeof document.fireHint.rows[row_ind] == 'undefined'){
|
|
document.fireHint.rows[row_ind] = {
|
|
free: $(window).height() - config.rows.minTop,
|
|
occupied: 0,
|
|
message_boxes: {}
|
|
};
|
|
}
|
|
}
|
|
|
|
// Applies additional classes and appends header and body elements
|
|
$.each(config.elements.header, function(header_ind, header_item){ $('.firehint-header', msg_box_element).append(header_item); });
|
|
$.each(config.elements.body, function(body_ind, body_item){ $('.firehint-content-body', msg_box_element).append(body_item); });
|
|
$.each(config.additionalClasses, function(element_mask, classes_list){
|
|
$(msg_box_element)
|
|
.filter(element_mask).addClass( classes_list.join(' ')).end()
|
|
.find(element_mask).addClass( classes_list.join(' ') );
|
|
});
|
|
|
|
// Applying general style for a message box
|
|
$(msg_box_element).css(config.css_states.general)
|
|
|
|
// Binding callbacks
|
|
$.each(config.bindings, function(element_mask, bindings_list){
|
|
$.each(bindings_list, function(event_name, callback_func){
|
|
$(msg_box_element)
|
|
.filter(element_mask).bind(event_name, callback_func).end()
|
|
.find(element_mask).bind(event_name, callback_func);
|
|
});
|
|
});
|
|
|
|
// Looking for a place for current message box
|
|
var current_message_box_height = $(msg_box_element).height();
|
|
for(var row_ind=1; row_ind<=config.rows.count; row_ind++){
|
|
if(document.fireHint.rows[row_ind].free >= current_message_box_height - (- config.cells.margins.vertical)){
|
|
$(msg_box_element).data('row_index', row_ind);
|
|
|
|
$(msg_box_element).css({
|
|
//top: ($(window).height() - config.cells.margins.vertical - current_message_box_height - 30 - document.fireHint.rows[row_ind].occupied) +'px',
|
|
top: ($(window).height() - config.cells.margins.vertical - current_message_box_height - 30 - document.fireHint.rows[row_ind].occupied) +'px',
|
|
left: ((row_ind)*config.cells.width - config.cells.width + 10) +'px'
|
|
}).show();
|
|
document.fireHint.rows[row_ind].free -= current_message_box_height - (- config.cells.margins.vertical);
|
|
document.fireHint.rows[row_ind].occupied -= - config.cells.margins.vertical - current_message_box_height;
|
|
document.fireHint.rows[row_ind].message_boxes[msg_box_unique_id] = msg_box_element;
|
|
break;
|
|
}
|
|
}
|
|
if($(msg_box_element).filter(':visible').length == 0){
|
|
console.log('NO_SPACE_FOR_A_MESSAGE_BOX')
|
|
}
|
|
});
|
|
}
|
|
})(jQuery); |