Commit 5cbf66f4 authored by David Johnson's avatar David Johnson

Adds a nice way to visualize what resources are in use by what consumers,

particularly useful for nodetypes and experiments.  Still needs more
tweaks to be really useful, but done for now.
parent 650ad730
This diff is collapsed.
//MooTools More, <http://mootools.net/more>. Copyright (c) 2006-2008 Valerio Proietti, <http://mad4milk.net>, MIT Style License.
/*
Script: Tips.js
Class for creating nice tips that follow the mouse cursor when hovering an element.
License:
MIT-style license.
*/
var Tips = new Class({
Implements: [Events, Options],
options: {
onShow: function(tip){
tip.setStyle('visibility', 'visible');
},
onHide: function(tip){
tip.setStyle('visibility', 'hidden');
},
showDelay: 100,
hideDelay: 100,
className: null,
offsets: {x: 16, y: 16},
fixed: false
},
initialize: function(){
var params = Array.link(arguments, {options: Object.type, elements: $defined});
this.setOptions(params.options || null);
this.tip = new Element('div').inject(document.body);
if (this.options.className) this.tip.addClass(this.options.className);
var top = new Element('div', {'class': 'tip-top'}).inject(this.tip);
this.container = new Element('div', {'class': 'tip'}).inject(this.tip);
var bottom = new Element('div', {'class': 'tip-bottom'}).inject(this.tip);
this.tip.setStyles({position: 'absolute', top: 0, left: 0, visibility: 'hidden'});
if (params.elements) this.attach(params.elements);
},
attach: function(elements){
$$(elements).each(function(element){
var title = element.retrieve('tip:title', element.get('title'));
var text = element.retrieve('tip:text', element.get('rel') || element.get('href'));
var enter = element.retrieve('tip:enter', this.elementEnter.bindWithEvent(this, element));
var leave = element.retrieve('tip:leave', this.elementLeave.bindWithEvent(this, element));
element.addEvents({mouseenter: enter, mouseleave: leave});
if (!this.options.fixed){
var move = element.retrieve('tip:move', this.elementMove.bindWithEvent(this, element));
element.addEvent('mousemove', move);
}
element.store('tip:native', element.get('title'));
element.erase('title');
}, this);
return this;
},
detach: function(elements){
$$(elements).each(function(element){
element.removeEvent('mouseenter', element.retrieve('tip:enter') || $empty);
element.removeEvent('mouseleave', element.retrieve('tip:leave') || $empty);
element.removeEvent('mousemove', element.retrieve('tip:move') || $empty);
element.eliminate('tip:enter').eliminate('tip:leave').eliminate('tip:move');
var original = element.retrieve('tip:native');
if (original) element.set('title', original);
});
return this;
},
elementEnter: function(event, element){
$A(this.container.childNodes).each(Element.dispose);
var title = element.retrieve('tip:title');
if (title){
this.titleElement = new Element('div', {'class': 'tip-title'}).inject(this.container);
this.fill(this.titleElement, title);
}
var text = element.retrieve('tip:text');
if (text){
this.textElement = new Element('div', {'class': 'tip-text'}).inject(this.container);
this.fill(this.textElement, text);
}
this.timer = $clear(this.timer);
this.timer = this.show.delay(this.options.showDelay, this);
this.position((!this.options.fixed) ? event : {page: element.getPosition()});
},
elementLeave: function(event){
$clear(this.timer);
this.timer = this.hide.delay(this.options.hideDelay, this);
},
elementMove: function(event){
this.position(event);
},
position: function(event){
var size = window.getSize(), scroll = window.getScroll();
var tip = {x: this.tip.offsetWidth, y: this.tip.offsetHeight};
var props = {x: 'left', y: 'top'};
for (var z in props){
var pos = event.page[z] + this.options.offsets[z];
if ((pos + tip[z] - scroll[z]) > size[z]) pos = event.page[z] - this.options.offsets[z] - tip[z];
this.tip.setStyle(props[z], pos);
}
},
fill: function(element, contents){
(typeof contents == 'string') ? element.set('html', contents) : element.adopt(contents);
},
show: function(){
this.fireEvent('show', this.tip);
},
hide: function(){
this.fireEvent('hide', this.tip);
}
});
\ No newline at end of file
This diff is collapsed.
#rviz {
background-color:#222;
overflow:hidden;
font-size:10px;
font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
position:relative;
width:900px;
height:500px;
margin:auto;
background-color:#1D1D20;
}
#rviz td { background-color: transparent }
#rviz tr { background-color: transparent }
#rviz table { background-color: transparent }
#rviz div {
position:absolute;
overflow:hidden;
}
#rviz .content {
background-color:#333;
border:0px solid #111;
}
#rviz .head {
height:18px;
color:white;
background-color:#444;
}
#rviz .head.in-path {
background-color:#655;
}
#rviz .body {
background-color:black;
}
#rviz .leaf {
color:white;
background-color:#111;
display:table-cell;
vertical-align:middle;
}
#rviz .over-leaf {
border:0px solid #9FD4FF;
}
#rviz .over-content {
background-color: #9FD4FF;
}
#rviz .over-head { /* boy i'm funny! */
background-color:#A4D9FF;
color:white;
}
/*TOOLTIPS*/
.tool-tip {
color: #fff;
width: 139px;
z-index: 13000;
background-color: black;
opacity:0.9;
filter:alpha(opacity=90);
}
.tool-title {
font-weight: bold;
font-size: 11px;
margin: 0;
color: #9FD4FF;
padding: 8px 8px 4px;
background-color: black;
}
.tool-text {
font-size: 11px;
padding: 4px 8px 8px;
background-color: black;
}
.album {
width:100px;
margin:3px;
}
.text {
margin:5px 0;
}
input {
font-size:10px;
font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
}
This diff is collapsed.
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment