Markus Kahl
14 years ago
commit
6c5697edae
|
After Width: | Height: | Size: 67 B |
@ -0,0 +1,159 @@ |
||||
/* |
||||
* Copyright (c) 2009 Charles Cordingley (www.cordinc.com) |
||||
* |
||||
* Permission to use, copy, modify, and distribute this software for any |
||||
* purpose with or without fee is hereby granted, provided that the above |
||||
* copyright notice and this permission notice appear in all copies. |
||||
* |
||||
* THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES |
||||
* WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF |
||||
* MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR |
||||
* ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES |
||||
* WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN |
||||
* ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF |
||||
* OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE. |
||||
*/ |
||||
|
||||
/* |
||||
* cordinc_tooltip.js, v1.0.2 - 27 August 2008 |
||||
* For help see www.cordinc.com/projects/tooltips.html |
||||
*/ |
||||
var Tooltip = Class.create({ |
||||
initialize: function(target, tooltip) { |
||||
var options = Object.extend({ |
||||
start_effect: function(element) {}, |
||||
end_effect: function(element) {}, |
||||
zindex: 1000, |
||||
offset: {x:0, y:0}, |
||||
hook: {target:'topRight', tip:'bottomLeft'}, |
||||
trigger: false,
|
||||
DOM_location: false, |
||||
className: false, |
||||
delay: {} |
||||
}, arguments[2] || {}); |
||||
this.target = $(target); |
||||
this.show_at = (options.show_at_id !== undefined) ? $(options.show_at_id) : undefined |
||||
this.tooltip = $(tooltip); |
||||
this.options = options; |
||||
this.event_target = this.options.trigger?$(this.options.trigger):this.target; |
||||
|
||||
if (this.options.className) { |
||||
this.tooltip.addClassName(this.options.className); |
||||
} |
||||
this.tooltip.hide(); |
||||
this.display=false; |
||||
|
||||
this.mouse_over = this.displayTooltip.bindAsEventListener(this); |
||||
this.mouse_out = this.removeTooltip.bindAsEventListener(this); |
||||
this.event_target.observe("mouseover", this.mouse_over); |
||||
this.event_target.observe("mouseout", this.mouse_out); |
||||
}, |
||||
|
||||
displayTooltip: function(event){ |
||||
event.stop(); |
||||
|
||||
if (this.display) {return;} |
||||
if (this.options.delay.start) { |
||||
var self = this; |
||||
this.timer_id = setTimeout(function(){self.timer_id = false; self.showTooltip(event);}, this.options.delay.start*1000); |
||||
} else { |
||||
this.showTooltip(event); |
||||
} |
||||
}, |
||||
|
||||
showTooltip: function(event) { |
||||
var show_at = (this.show_at !== undefined) ? this.show_at : this.target |
||||
this.display=true; |
||||
position = this.positionTooltip(event); |
||||
|
||||
this.clone = this.tooltip.cloneNode(true); |
||||
parentId = this.options.DOM_location?$(this.options.DOM_location.parentId):show_at.parentNode; |
||||
successorId = this.options.DOM_location?$(this.options.DOM_location.successorId):show_at; |
||||
parentId.insertBefore(this.clone, successorId); |
||||
|
||||
this.clone.setStyle({ |
||||
position: 'absolute', |
||||
top: position.top + "px", |
||||
left: position.left + "px", |
||||
display: "inline", |
||||
zIndex:this.options.zindex, |
||||
/* fix for ur dashboard */ |
||||
visibility: 'visible', |
||||
width: "400px" |
||||
}); |
||||
|
||||
if (this.options.start_effect) { |
||||
this.options.start_effect(this.clone); |
||||
} |
||||
}, |
||||
|
||||
positionTooltip: function(event) { |
||||
target_position = this.target.cumulativeOffset(); |
||||
|
||||
tooltip_dimensions = this.tooltip.getDimensions(); |
||||
target_dimensions = this.target.getDimensions(); |
||||
|
||||
this.positionModify(target_position, target_dimensions, this.options.hook.target, 1); |
||||
this.positionModify(target_position, tooltip_dimensions, this.options.hook.tip, -1); |
||||
|
||||
target_position.top += this.options.offset.y; |
||||
target_position.left += this.options.offset.x; |
||||
|
||||
return target_position;
|
||||
}, |
||||
|
||||
positionModify: function(position, box, corner, neg) { |
||||
if (corner == 'topRight') { |
||||
position.left += box.width*neg; |
||||
} else if (corner == 'topLeft') { |
||||
} else if (corner == 'bottomLeft') { |
||||
position.top += box.height*neg; |
||||
} else if (corner == 'bottomRight') { |
||||
position.top += box.height*neg; |
||||
position.left += box.width*neg; |
||||
} else if (corner == 'topMid') { |
||||
position.left += (box.width/2)*neg; |
||||
} else if (corner == 'leftMid') { |
||||
position.top += (box.height/2)*neg; |
||||
} else if (corner == 'bottomMid') { |
||||
position.top += box.height*neg; |
||||
position.left += (box.width/2)*neg; |
||||
} else if (corner == 'rightMid') { |
||||
position.top += (box.height/2)*neg; |
||||
position.left += box.width*neg; |
||||
} |
||||
}, |
||||
|
||||
removeTooltip: function(event) { |
||||
if (this.timer_id) { |
||||
clearTimeout(this.timer_id); |
||||
this.timer_id = false; |
||||
return; |
||||
}
|
||||
|
||||
if (this.options.end_effect) { |
||||
this.options.end_effect(this.clone); |
||||
}
|
||||
|
||||
if (this.options.delay.end) { |
||||
var self = this; |
||||
setTimeout(function(){self.clearTooltip();}, this.options.delay.end*1000); |
||||
} else { |
||||
this.clearTooltip(); |
||||
} |
||||
}, |
||||
|
||||
clearTooltip: function() { |
||||
if (this.clone !== undefined && this.clone !== null) { |
||||
this.clone.remove(); |
||||
this.clone = null; |
||||
this.display=false; |
||||
} |
||||
}, |
||||
|
||||
destroy: function() { |
||||
this.event_target.stopObserving("mouseover", this.mouse_over); |
||||
this.event_target.stopObserving("mouseout", this.mouse_out); |
||||
this.clearTooltip(); |
||||
} |
||||
}) |
||||
@ -0,0 +1,55 @@ |
||||
.help { |
||||
margin-left: 5px; |
||||
margin-right: 5px; |
||||
} |
||||
|
||||
.tooltip { |
||||
position: absolute; |
||||
margin-top: 3px; |
||||
margin-bottom: 3px; |
||||
padding: 3px; |
||||
width: 400px; |
||||
z-index: 256; |
||||
color: #000000; |
||||
border: 1px solid #000000; |
||||
background: #FFFFCC; |
||||
font: 12px Verdana, sans-serif; |
||||
text-align: left; |
||||
padding: -50px; |
||||
line-height: 16px; |
||||
font-size: 11px; |
||||
} |
||||
|
||||
.filter-icon { |
||||
|
||||
} |
||||
|
||||
.filter-tip { |
||||
|
||||
} |
||||
|
||||
.group-by-icon { |
||||
float: right; |
||||
margin-right: 5px; |
||||
} |
||||
|
||||
.group-by-tip { |
||||
margin-top: -300px; |
||||
margin-left: -475px; |
||||
} |
||||
|
||||
.filter-legend-icon { |
||||
|
||||
} |
||||
|
||||
.filter-legend-tip { |
||||
margin-left: 10px; |
||||
} |
||||
|
||||
.group_by-legend-icon { |
||||
|
||||
} |
||||
|
||||
.group_by-legend-tip { |
||||
margin-left: 10px; |
||||
} |
||||
@ -1,5 +1,6 @@ |
||||
class Widget::Controls::Clear < Widget::Base |
||||
def render |
||||
link_to content_tag(:span, content_tag(:em, l(:"button_clear"), :class => "button-icon icon-clear")), '#', :id => 'query-link-clear', :class => 'button secondary' |
||||
html = link_to content_tag(:span, content_tag(:em, l(:"button_clear"), :class => "button-icon icon-clear")), '#', :id => 'query-link-clear', :class => 'button secondary' |
||||
maybe_with_help html |
||||
end |
||||
end |
||||
|
||||
@ -0,0 +1,55 @@ |
||||
## |
||||
# Usgae: render_widget Widget::Controls::Help, :text |
||||
# |
||||
# Where :text is a i18n key. |
||||
class Widget::Controls::Help < Widget::Base |
||||
def render |
||||
id = "tip:#{@query}" |
||||
options = {:icon => {}, :tooltip => {}} |
||||
options.merge!(yield) if block_given? |
||||
sai = options[:show_at_id] ? ", show_at_id: '#{options[:show_at_id]}'" : "" |
||||
|
||||
icon = tag :img, :src => '/images/icon_info_red.gif', :id => "target:#{@query}" |
||||
tip = content_tag_string :div, l(@query), tip_config(options[:tooltip]), false |
||||
script = content_tag :script, |
||||
"new Tooltip('target:#{@query}', 'tip:#{@query}', {className: 'tooltip'#{sai}});", |
||||
{:type => 'text/javascript'}, false |
||||
target = content_tag :a, icon + tip, icon_config(options[:icon]) |
||||
target + script |
||||
end |
||||
|
||||
def icon_config(options) |
||||
add_class = lambda do |cl| |
||||
if cl |
||||
"help #{cl}" |
||||
else |
||||
"help" |
||||
end |
||||
end |
||||
options.mega_merge! :href => '#', :class => add_class |
||||
end |
||||
|
||||
def tip_config(options) |
||||
add_class = lambda do |cl| |
||||
if cl |
||||
"#{cl} tooltip" |
||||
else |
||||
"tooltip" |
||||
end |
||||
end |
||||
options.mega_merge! :id => "tip:#{@query}", :class => add_class |
||||
end |
||||
end |
||||
|
||||
class Hash |
||||
def mega_merge!(hash) |
||||
hash.each do |key, value| |
||||
if value.kind_of?(Proc) |
||||
self[key] = value.call(self[key]) |
||||
else |
||||
self[key] = value |
||||
end |
||||
end |
||||
self |
||||
end |
||||
end |
||||
Loading…
Reference in new issue