Gabriele
10 years ago
6 changed files with 792 additions and 728 deletions
@ -1,171 +1,182 @@
@@ -1,171 +1,182 @@
|
||||
var ContextMenu = new Class({ |
||||
|
||||
//implements
|
||||
Implements: [Options,Events], |
||||
|
||||
//options
|
||||
options: { |
||||
actions: {}, |
||||
menu: 'contextmenu', |
||||
stopEvent: true, |
||||
targets: 'body', |
||||
trigger: 'contextmenu', |
||||
offsets: { x:0, y:0 }, |
||||
onShow: $empty, |
||||
onHide: $empty, |
||||
onClick: $empty, |
||||
fadeSpeed: 200 |
||||
}, |
||||
|
||||
//initialization
|
||||
initialize: function(options) { |
||||
//set options
|
||||
this.setOptions(options) |
||||
|
||||
//option diffs menu
|
||||
this.menu = $(this.options.menu); |
||||
this.targets = $$(this.options.targets); |
||||
|
||||
//fx
|
||||
this.fx = new Fx.Tween(this.menu, { |
||||
property: 'opacity', |
||||
duration:this.options.fadeSpeed, |
||||
onComplete: function() { |
||||
if(this.getStyle('opacity')){ |
||||
this.setStyle('visibility','visible'); |
||||
}else{ |
||||
this.setStyle('visibility','hidden'); |
||||
} |
||||
}.bind(this.menu) |
||||
}); |
||||
|
||||
//hide and begin the listener
|
||||
this.hide().startListener(); |
||||
|
||||
//hide the menu
|
||||
this.menu.setStyles({ 'position':'absolute','top':'-900000px', 'display':'block' }); |
||||
}, |
||||
|
||||
addTarget: function(t) { |
||||
this.targets[this.targets.length] = t; |
||||
t.addEvent(this.options.trigger,function(e) { |
||||
//enabled?
|
||||
if(!this.options.disabled) { |
||||
//prevent default, if told to
|
||||
if(this.options.stopEvent) { e.stop(); } |
||||
//record this as the trigger
|
||||
this.options.element = $(t); |
||||
//position the menu
|
||||
this.menu.setStyles({ |
||||
top: (e.page.y + this.options.offsets.y), |
||||
left: (e.page.x + this.options.offsets.x), |
||||
position: 'absolute', |
||||
'z-index': '2000' |
||||
}); |
||||
//show the menu
|
||||
this.show(); |
||||
} |
||||
}.bind(this)); |
||||
t.addEvent('click',function(e) { |
||||
this.hide(); |
||||
}.bind(this)); |
||||
}, |
||||
|
||||
//get things started
|
||||
startListener: function() { |
||||
/* all elements */ |
||||
this.targets.each(function(el) { |
||||
/* show the menu */ |
||||
el.addEvent(this.options.trigger,function(e) { |
||||
//enabled?
|
||||
if(!this.options.disabled) { |
||||
//prevent default, if told to
|
||||
if(this.options.stopEvent) { e.stop(); } |
||||
//record this as the trigger
|
||||
this.options.element = $(el); |
||||
//position the menu
|
||||
this.menu.setStyles({ |
||||
top: (e.page.y + this.options.offsets.y), |
||||
left: (e.page.x + this.options.offsets.x), |
||||
position: 'absolute', |
||||
'z-index': '2000' |
||||
}); |
||||
//show the menu
|
||||
this.show(); |
||||
} |
||||
}.bind(this)); |
||||
el.addEvent('click',function(e) { |
||||
this.hide(); |
||||
}.bind(this)); |
||||
},this); |
||||
|
||||
/* menu items */ |
||||
this.menu.getElements('a').each(function(item) { |
||||
item.addEvent('click',function(e) { |
||||
if(!item.hasClass('disabled')) { |
||||
this.execute(item.get('href').split('#')[1],$(this.options.element)); |
||||
this.fireEvent('click',[item,e]); |
||||
} |
||||
}.bind(this)); |
||||
},this); |
||||
|
||||
//hide on body click
|
||||
$(document.body).addEvent('click', function() { |
||||
this.hide(); |
||||
}.bind(this)); |
||||
}, |
||||
|
||||
//show menu
|
||||
show: function(trigger) { |
||||
//this.menu.fade('in');
|
||||
this.fx.start(1); |
||||
this.fireEvent('show'); |
||||
this.shown = true; |
||||
return this; |
||||
}, |
||||
|
||||
//hide the menu
|
||||
hide: function(trigger) { |
||||
if(this.shown) |
||||
{ |
||||
this.fx.start(0); |
||||
//this.menu.fade('out');
|
||||
this.fireEvent('hide'); |
||||
this.shown = false; |
||||
} |
||||
return this; |
||||
}, |
||||
|
||||
//disable an item
|
||||
disableItem: function(item) { |
||||
this.menu.getElements('a[href$=' + item + ']').addClass('disabled'); |
||||
return this; |
||||
}, |
||||
|
||||
//enable an item
|
||||
enableItem: function(item) { |
||||
this.menu.getElements('a[href$=' + item + ']').removeClass('disabled'); |
||||
return this; |
||||
}, |
||||
|
||||
//diable the entire menu
|
||||
disable: function() { |
||||
this.options.disabled = true; |
||||
return this; |
||||
}, |
||||
|
||||
//enable the entire menu
|
||||
enable: function() { |
||||
this.options.disabled = false; |
||||
return this; |
||||
}, |
||||
|
||||
//execute an action
|
||||
execute: function(action,element) { |
||||
if(this.options.actions[action]) { |
||||
this.options.actions[action](element,this); |
||||
} |
||||
return this; |
||||
} |
||||
|
||||
}); |
||||
//implements
|
||||
Implements: [Options, Events], |
||||
|
||||
//options
|
||||
options: { |
||||
actions: {}, |
||||
menu: 'contextmenu', |
||||
stopEvent: true, |
||||
targets: 'body', |
||||
trigger: 'contextmenu', |
||||
offsets: { |
||||
x: 0, |
||||
y: 0 |
||||
}, |
||||
onShow: $empty, |
||||
onHide: $empty, |
||||
onClick: $empty, |
||||
fadeSpeed: 200 |
||||
}, |
||||
|
||||
//initialization
|
||||
initialize: function(options) { |
||||
//set options
|
||||
this.setOptions(options) |
||||
|
||||
//option diffs menu
|
||||
this.menu = $(this.options.menu); |
||||
this.targets = $$(this.options.targets); |
||||
|
||||
//fx
|
||||
this.fx = new Fx.Tween(this.menu, { |
||||
property: 'opacity', |
||||
duration: this.options.fadeSpeed, |
||||
onComplete: function() { |
||||
if (this.getStyle('opacity')) { |
||||
this.setStyle('visibility', 'visible'); |
||||
} |
||||
else { |
||||
this.setStyle('visibility', 'hidden'); |
||||
} |
||||
}.bind(this.menu) |
||||
}); |
||||
|
||||
//hide and begin the listener
|
||||
this.hide().startListener(); |
||||
|
||||
//hide the menu
|
||||
this.menu.setStyles({ |
||||
'position': 'absolute', |
||||
'top': '-900000px', |
||||
'display': 'block' |
||||
}); |
||||
}, |
||||
|
||||
addTarget: function(t) { |
||||
this.targets[this.targets.length] = t; |
||||
t.addEvent(this.options.trigger, function(e) { |
||||
//enabled?
|
||||
if (!this.options.disabled) { |
||||
//prevent default, if told to
|
||||
if (this.options.stopEvent) { |
||||
e.stop(); |
||||
} |
||||
//record this as the trigger
|
||||
this.options.element = $(t); |
||||
//position the menu
|
||||
this.menu.setStyles({ |
||||
top: (e.page.y + this.options.offsets.y), |
||||
left: (e.page.x + this.options.offsets.x), |
||||
position: 'absolute', |
||||
'z-index': '2000' |
||||
}); |
||||
//show the menu
|
||||
this.show(); |
||||
} |
||||
}.bind(this)); |
||||
t.addEvent('click', function(e) { |
||||
this.hide(); |
||||
}.bind(this)); |
||||
}, |
||||
|
||||
//get things started
|
||||
startListener: function() { |
||||
/* all elements */ |
||||
this.targets.each(function(el) { |
||||
/* show the menu */ |
||||
el.addEvent(this.options.trigger, function(e) { |
||||
//enabled?
|
||||
if (!this.options.disabled) { |
||||
//prevent default, if told to
|
||||
if (this.options.stopEvent) { |
||||
e.stop(); |
||||
} |
||||
//record this as the trigger
|
||||
this.options.element = $(el); |
||||
//position the menu
|
||||
this.menu.setStyles({ |
||||
top: (e.page.y + this.options.offsets.y), |
||||
left: (e.page.x + this.options.offsets.x), |
||||
position: 'absolute', |
||||
'z-index': '2000' |
||||
}); |
||||
//show the menu
|
||||
this.show(); |
||||
} |
||||
}.bind(this)); |
||||
el.addEvent('click', function(e) { |
||||
this.hide(); |
||||
}.bind(this)); |
||||
}, this); |
||||
|
||||
/* menu items */ |
||||
this.menu.getElements('a').each(function(item) { |
||||
item.addEvent('click', function(e) { |
||||
if (!item.hasClass('disabled')) { |
||||
this.execute(item.get('href').split('#')[1], $(this.options.element)); |
||||
this.fireEvent('click', [item, e]); |
||||
} |
||||
}.bind(this)); |
||||
}, this); |
||||
|
||||
//hide on body click
|
||||
$(document.body).addEvent('click', function() { |
||||
this.hide(); |
||||
}.bind(this)); |
||||
}, |
||||
|
||||
//show menu
|
||||
show: function(trigger) { |
||||
//this.menu.fade('in');
|
||||
this.fx.start(1); |
||||
this.fireEvent('show'); |
||||
this.shown = true; |
||||
return this; |
||||
}, |
||||
|
||||
//hide the menu
|
||||
hide: function(trigger) { |
||||
if (this.shown) { |
||||
this.fx.start(0); |
||||
//this.menu.fade('out');
|
||||
this.fireEvent('hide'); |
||||
this.shown = false; |
||||
} |
||||
return this; |
||||
}, |
||||
|
||||
//disable an item
|
||||
disableItem: function(item) { |
||||
this.menu.getElements('a[href$=' + item + ']').addClass('disabled'); |
||||
return this; |
||||
}, |
||||
|
||||
//enable an item
|
||||
enableItem: function(item) { |
||||
this.menu.getElements('a[href$=' + item + ']').removeClass('disabled'); |
||||
return this; |
||||
}, |
||||
|
||||
//diable the entire menu
|
||||
disable: function() { |
||||
this.options.disabled = true; |
||||
return this; |
||||
}, |
||||
|
||||
//enable the entire menu
|
||||
enable: function() { |
||||
this.options.disabled = false; |
||||
return this; |
||||
}, |
||||
|
||||
//execute an action
|
||||
execute: function(action, element) { |
||||
if (this.options.actions[action]) { |
||||
this.options.actions[action](element, this); |
||||
} |
||||
return this; |
||||
} |
||||
|
||||
}); |
||||
@ -1,96 +1,98 @@
@@ -1,96 +1,98 @@
|
||||
var ProgressBar=new Class({ |
||||
initialize:function(value,parameters){ |
||||
var vals={ |
||||
'id':'progressbar_'+(ProgressBars++), |
||||
'value':$pick(value,0), |
||||
'width':0, |
||||
'height':0, |
||||
'darkbg':'#006', |
||||
'darkfg':'#fff', |
||||
'lightbg':'#fff', |
||||
'lightfg':'#000' |
||||
var ProgressBar = new Class({ |
||||
initialize: function(value, parameters) { |
||||
var vals = { |
||||
'id': 'progressbar_' + (ProgressBars++), |
||||
'value': $pick(value, 0), |
||||
'width': 0, |
||||
'height': 0, |
||||
'darkbg': '#006', |
||||
'darkfg': '#fff', |
||||
'lightbg': '#fff', |
||||
'lightfg': '#000' |
||||
}; |
||||
if(parameters && $type(parameters)=='object')$extend(vals,parameters); |
||||
if(vals.height<12)vals.height=12; |
||||
var obj=new Element('div',{ |
||||
'id':vals.id, |
||||
'class':'progressbar_wrapper', |
||||
'styles':{ |
||||
'border':'1px solid #000', |
||||
'width':vals.width, |
||||
'height':vals.height, |
||||
'position':'relative' |
||||
if (parameters && $type(parameters) == 'object') $extend(vals, parameters); |
||||
if (vals.height < 12) vals.height = 12; |
||||
var obj = new Element('div', { |
||||
'id': vals.id, |
||||
'class': 'progressbar_wrapper', |
||||
'styles': { |
||||
'border': '1px solid #000', |
||||
'width': vals.width, |
||||
'height': vals.height, |
||||
'position': 'relative' |
||||
} |
||||
}); |
||||
obj.vals=vals; |
||||
obj.vals = vals; |
||||
obj.vals.value = $pick(value, 0); // Fix by Chris
|
||||
obj.vals.dark=new Element('div',{ |
||||
'id':vals.id+'_dark', |
||||
'class':'progressbar_dark', |
||||
'styles':{ |
||||
'width':vals.width, |
||||
'height':vals.height, |
||||
'background':vals.darkbg, |
||||
'color':vals.darkfg, |
||||
'position':'absolute', |
||||
'text-align':'center', |
||||
'left':0, |
||||
'top':0, |
||||
'line-height':vals.height-2 |
||||
obj.vals.dark = new Element('div', { |
||||
'id': vals.id + '_dark', |
||||
'class': 'progressbar_dark', |
||||
'styles': { |
||||
'width': vals.width, |
||||
'height': vals.height, |
||||
'background': vals.darkbg, |
||||
'color': vals.darkfg, |
||||
'position': 'absolute', |
||||
'text-align': 'center', |
||||
'left': 0, |
||||
'top': 0, |
||||
'line-height': vals.height - 2 |
||||
} |
||||
}); |
||||
obj.vals.light=new Element('div',{ |
||||
'id':vals.id+'_light', |
||||
'class':'progressbar_light', |
||||
'styles':{ |
||||
'width':vals.width, |
||||
'height':vals.height, |
||||
'background':vals.lightbg, |
||||
'color':vals.lightfg, |
||||
'position':'absolute', |
||||
'text-align':'center', |
||||
'left':0, |
||||
'top':0, |
||||
'line-height':vals.height-2 |
||||
obj.vals.light = new Element('div', { |
||||
'id': vals.id + '_light', |
||||
'class': 'progressbar_light', |
||||
'styles': { |
||||
'width': vals.width, |
||||
'height': vals.height, |
||||
'background': vals.lightbg, |
||||
'color': vals.lightfg, |
||||
'position': 'absolute', |
||||
'text-align': 'center', |
||||
'left': 0, |
||||
'top': 0, |
||||
'line-height': vals.height - 2 |
||||
} |
||||
}); |
||||
obj.appendChild(obj.vals.dark); |
||||
obj.appendChild(obj.vals.light); |
||||
obj.getValue=ProgressBar_getValue; |
||||
obj.setValue=ProgressBar_setValue; |
||||
if(vals.width)obj.setValue(vals.value); |
||||
else setTimeout('ProgressBar_checkForParent("'+obj.id+'")',1); |
||||
obj.getValue = ProgressBar_getValue; |
||||
obj.setValue = ProgressBar_setValue; |
||||
if (vals.width) obj.setValue(vals.value); |
||||
else setTimeout('ProgressBar_checkForParent("' + obj.id + '")', 1); |
||||
return obj; |
||||
} |
||||
}); |
||||
|
||||
function ProgressBar_getValue(){ |
||||
function ProgressBar_getValue() { |
||||
return this.vals.value; |
||||
} |
||||
|
||||
function ProgressBar_setValue(value){ |
||||
value=parseFloat(value); |
||||
if(isNaN(value))value=0; |
||||
if(value>100)value=100; |
||||
if(value<0)value=0; |
||||
this.vals.value=value; |
||||
function ProgressBar_setValue(value) { |
||||
value = parseFloat(value); |
||||
if (isNaN(value)) value = 0; |
||||
if (value > 100) value = 100; |
||||
if (value < 0) value = 0; |
||||
this.vals.value = value; |
||||
this.vals.dark.empty(); |
||||
this.vals.light.empty(); |
||||
this.vals.dark.appendText(value+'%'); |
||||
this.vals.light.appendText(value+'%'); |
||||
var r=parseInt(this.vals.width*(value/100)); |
||||
this.vals.dark.setStyle('clip','rect(0,'+r+'px,'+this.vals.height+'px,0)'); |
||||
this.vals.light.setStyle('clip','rect(0,'+this.vals.width+'px,'+this.vals.height+'px,'+r+'px)'); |
||||
this.vals.dark.appendText(value + '%'); |
||||
this.vals.light.appendText(value + '%'); |
||||
var r = parseInt(this.vals.width * (value / 100)); |
||||
this.vals.dark.setStyle('clip', 'rect(0,' + r + 'px,' + this.vals.height + 'px,0)'); |
||||
this.vals.light.setStyle('clip', 'rect(0,' + this.vals.width + 'px,' + this.vals.height + 'px,' + r + 'px)'); |
||||
} |
||||
function ProgressBar_checkForParent(id){ |
||||
var obj=$(id); |
||||
if(!obj)return; |
||||
if(!obj.parentNode)return setTimeout('ProgressBar_checkForParent("'+id+'")',1); |
||||
obj.setStyle('width','100%'); |
||||
var w=obj.offsetWidth; |
||||
obj.vals.dark.setStyle('width',w); |
||||
obj.vals.light.setStyle('width',w); |
||||
obj.vals.width=w; |
||||
|
||||
function ProgressBar_checkForParent(id) { |
||||
var obj = $(id); |
||||
if (!obj) return; |
||||
if (!obj.parentNode) return setTimeout('ProgressBar_checkForParent("' + id + '")', 1); |
||||
obj.setStyle('width', '100%'); |
||||
var w = obj.offsetWidth; |
||||
obj.vals.dark.setStyle('width', w); |
||||
obj.vals.light.setStyle('width', w); |
||||
obj.vals.width = w; |
||||
obj.setValue(obj.vals.value); |
||||
} |
||||
var ProgressBars=0; |
||||
|
||||
var ProgressBars = 0; |
||||
Loading…
Reference in new issue