Some work about adaptive color scheme for Web UI (PR #19901)
http://[316:c51a:62a3:8b9::4]/d4708/qBittorrent/src/branch/adaptive-webui
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
161 lines
3.5 KiB
161 lines
3.5 KiB
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 }); |
|
|
|
//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; |
|
} |
|
|
|
}); |