Christophe Dumez
15 years ago
15 changed files with 278 additions and 335 deletions
|
After Width: | Height: | Size: 1.5 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 1.5 KiB |
@ -1,92 +0,0 @@ |
|||||||
/* |
|
||||||
* MIT License |
|
||||||
* Copyright (c) 2008 Christophe Dumez <chris@qbittorrent.org> |
|
||||||
* |
|
||||||
* Permission is hereby granted, free of charge, to any person obtaining a copy |
|
||||||
* of this software and associated documentation files (the "Software"), to deal |
|
||||||
* in the Software without restriction, including without limitation the rights |
|
||||||
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell |
|
||||||
* copies of the Software, and to permit persons to whom the Software is |
|
||||||
* furnished to do so, subject to the following conditions: |
|
||||||
* |
|
||||||
* The above copyright notice and this permission notice shall be included in |
|
||||||
* all copies or substantial portions of the Software. |
|
||||||
* |
|
||||||
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR |
|
||||||
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, |
|
||||||
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE |
|
||||||
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER |
|
||||||
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, |
|
||||||
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN |
|
||||||
* THE SOFTWARE. |
|
||||||
*/ |
|
||||||
|
|
||||||
/* |
|
||||||
* Original code from http://www.silverscripting.com/mootabs/ |
|
||||||
* Edited by Christophe Dumez |
|
||||||
*/ |
|
||||||
|
|
||||||
.toolbarTabs { |
|
||||||
padding: 0 5px 2px 2px; |
|
||||||
background: url(../images/skin/tabs.gif) repeat-x; |
|
||||||
background-position: left -70px; |
|
||||||
overflow: visible; |
|
||||||
} |
|
||||||
|
|
||||||
.mootabs_title { |
|
||||||
padding-top: 1px; |
|
||||||
list-style: none; |
|
||||||
margin: 0; |
|
||||||
padding: 0; |
|
||||||
line-height: 16px; |
|
||||||
font-size: 11px; |
|
||||||
} |
|
||||||
|
|
||||||
.mootabs_title li { |
|
||||||
display: block; |
|
||||||
float: left; |
|
||||||
margin: 0 0 5px 0; |
|
||||||
cursor: pointer; |
|
||||||
background: url(../images/skin/tabs.gif) repeat-x; |
|
||||||
background-position: left -35px; |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
.mootabs_title li.active { |
|
||||||
background: url(../images/skin/tabs.gif) repeat-x; |
|
||||||
background-position: left 0; |
|
||||||
} |
|
||||||
|
|
||||||
.mootabs_title li a { |
|
||||||
display: block; |
|
||||||
margin-left: 8px; |
|
||||||
padding: 6px 16px 5px 10px; |
|
||||||
text-align: center; |
|
||||||
font-weight: normal; |
|
||||||
color: #141414; |
|
||||||
background: url(../images/skin/tabs.gif) repeat-x; |
|
||||||
background-position: right -35px; |
|
||||||
} |
|
||||||
|
|
||||||
.mootabs_title li.active a { |
|
||||||
color: #141414; |
|
||||||
font-weight: bold; |
|
||||||
background: url(../images/skin/tabs.gif) repeat-x; |
|
||||||
background-position: right 0; |
|
||||||
} |
|
||||||
|
|
||||||
.mootabs_panel { |
|
||||||
display: none; |
|
||||||
background-color: #ddd; |
|
||||||
position: relative; |
|
||||||
width: 100%; |
|
||||||
top: -1px; |
|
||||||
clear: both; |
|
||||||
overflow: auto; |
|
||||||
|
|
||||||
} |
|
||||||
|
|
||||||
.mootabs_panel.active { |
|
||||||
background-color: #e6e6e6; |
|
||||||
display: block; |
|
||||||
} |
|
||||||
@ -0,0 +1,155 @@ |
|||||||
|
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)); |
||||||
|
}, |
||||||
|
|
||||||
|
//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)); |
||||||
|
},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,223 +0,0 @@ |
|||||||
/* |
|
||||||
* MIT License |
|
||||||
* Copyright (c) 2008 Christophe Dumez <chris@qbittorrent.org> |
|
||||||
* |
|
||||||
* Permission is hereby granted, free of charge, to any person obtaining a copy |
|
||||||
* of this software and associated documentation files (the "Software"), to deal |
|
||||||
* in the Software without restriction, including without limitation the rights |
|
||||||
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell |
|
||||||
* copies of the Software, and to permit persons to whom the Software is |
|
||||||
* furnished to do so, subject to the following conditions: |
|
||||||
* |
|
||||||
* The above copyright notice and this permission notice shall be included in |
|
||||||
* all copies or substantial portions of the Software. |
|
||||||
* |
|
||||||
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR |
|
||||||
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, |
|
||||||
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE |
|
||||||
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER |
|
||||||
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, |
|
||||||
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN |
|
||||||
* THE SOFTWARE. |
|
||||||
*/ |
|
||||||
|
|
||||||
/* |
|
||||||
* Original code from http://www.silverscripting.com/mootabs/
|
|
||||||
* Ported to Mootools 1.2 by Christophe Dumez |
|
||||||
*/ |
|
||||||
|
|
||||||
var mootabs = new Class({ |
|
||||||
|
|
||||||
Implements: [Options], |
|
||||||
|
|
||||||
options: { |
|
||||||
width: '300px', |
|
||||||
height: '200px', |
|
||||||
changeTransition: Fx.Transitions.Bounce.easeOut, |
|
||||||
duration: 1000, |
|
||||||
mouseOverClass: 'over', |
|
||||||
activateOnLoad: 'first', |
|
||||||
useAjax: false, |
|
||||||
ajaxUrl: '', |
|
||||||
ajaxOptions: {method:'get', evalScripts: true}, |
|
||||||
ajaxLoadingText: 'Loading...' |
|
||||||
}, |
|
||||||
|
|
||||||
initialize: function(element, options) { |
|
||||||
|
|
||||||
if(options) this.setOptions(options); |
|
||||||
|
|
||||||
this.el = $(element); |
|
||||||
this.elid = element; |
|
||||||
|
|
||||||
this.el.setStyles({ |
|
||||||
height: this.options.height, |
|
||||||
width: this.options.width |
|
||||||
}); |
|
||||||
|
|
||||||
this.titles = $$('#' + this.elid + ' ul li'); |
|
||||||
this.panelHeight = this.el.getSize().y - (this.titles[0].getSize().y + 4); |
|
||||||
this.panels = $$('#' + this.elid + ' .mootabs_panel'); |
|
||||||
|
|
||||||
|
|
||||||
this.panels.setStyle('height', this.panelHeight); |
|
||||||
|
|
||||||
this.titles.each(function(item) { |
|
||||||
item.addEvent('click', function(){ |
|
||||||
if(item != this.activeTitle) |
|
||||||
{ |
|
||||||
item.removeClass(this.options.mouseOverClass); |
|
||||||
this.activate(item); |
|
||||||
} |
|
||||||
|
|
||||||
}.bind(this)); |
|
||||||
|
|
||||||
item.addEvent('mouseover', function() { |
|
||||||
if(item != this.activeTitle) |
|
||||||
{ |
|
||||||
item.addClass(this.options.mouseOverClass); |
|
||||||
} |
|
||||||
}.bind(this)); |
|
||||||
|
|
||||||
item.addEvent('mouseout', function() { |
|
||||||
if(item != this.activeTitle) |
|
||||||
{ |
|
||||||
item.removeClass(this.options.mouseOverClass); |
|
||||||
} |
|
||||||
}.bind(this)); |
|
||||||
}.bind(this)); |
|
||||||
|
|
||||||
|
|
||||||
if(this.options.activateOnLoad != 'none') |
|
||||||
{ |
|
||||||
if(this.options.activateOnLoad == 'first') |
|
||||||
{ |
|
||||||
this.activate(this.titles[0], true); |
|
||||||
} |
|
||||||
else |
|
||||||
{ |
|
||||||
this.activate(this.options.activateOnLoad, true); |
|
||||||
} |
|
||||||
} |
|
||||||
}, |
|
||||||
|
|
||||||
activate: function(tab, skipAnim){ |
|
||||||
if(! $defined(skipAnim)) |
|
||||||
{ |
|
||||||
skipAnim = false; |
|
||||||
} |
|
||||||
if($type(tab) == 'string') |
|
||||||
{ |
|
||||||
myTab = $$('#' + this.elid + ' ul li').filter('[title=' + tab + ']')[0]; |
|
||||||
tab = myTab; |
|
||||||
} |
|
||||||
|
|
||||||
if($type(tab) == 'element') |
|
||||||
{ |
|
||||||
var newTab = tab.getProperty('title'); |
|
||||||
|
|
||||||
this.panels.removeClass('active'); |
|
||||||
|
|
||||||
this.activePanel = this.panels.filter('#' + newTab)[0]; |
|
||||||
|
|
||||||
this.activePanel.addClass('active'); |
|
||||||
|
|
||||||
if(this.options.changeTransition != 'none' && skipAnim==false) |
|
||||||
{ |
|
||||||
this.panels.filter('#' + newTab).setStyle('height', 0); |
|
||||||
var changeEffect = new Fx.Elements(this.panels.filter('#' + newTab), {duration: this.options.duration, transition: this.options.changeTransition}); |
|
||||||
changeEffect.start({ |
|
||||||
'0': { |
|
||||||
'height': [0, this.panelHeight] |
|
||||||
} |
|
||||||
}); |
|
||||||
} |
|
||||||
|
|
||||||
this.titles.removeClass('active'); |
|
||||||
|
|
||||||
tab.addClass('active'); |
|
||||||
|
|
||||||
this.activeTitle = tab; |
|
||||||
|
|
||||||
if(this.options.useAjax) |
|
||||||
{ |
|
||||||
this._getContent(); |
|
||||||
} |
|
||||||
} |
|
||||||
}, |
|
||||||
|
|
||||||
_getContent: function(){ |
|
||||||
this.activePanel.setHTML(this.options.ajaxLoadingText); |
|
||||||
var newOptions = { |
|
||||||
url: this.options.ajaxUrl + '?tab=' + this.activeTitle.getProperty('title'), |
|
||||||
update: this.activePanel.getProperty('id') |
|
||||||
}; |
|
||||||
this.options.ajaxOptions = $merge(this.options.ajaxOptions, newOptions); |
|
||||||
var tabRequest = new Request.HTML(this.options.ajaxOptions); |
|
||||||
tabRequest.send(); |
|
||||||
}, |
|
||||||
|
|
||||||
addTab: function(title, label, content){ |
|
||||||
//the new title
|
|
||||||
var newTitle = new Element('li', { |
|
||||||
'title': title |
|
||||||
}); |
|
||||||
newTitle.appendText(label); |
|
||||||
this.titles.include(newTitle); |
|
||||||
$$('#' + this.elid + ' ul').adopt(newTitle); |
|
||||||
newTitle.addEvent('click', function() { |
|
||||||
this.activate(newTitle); |
|
||||||
}.bind(this)); |
|
||||||
|
|
||||||
newTitle.addEvent('mouseover', function() { |
|
||||||
if(newTitle != this.activeTitle) |
|
||||||
{ |
|
||||||
newTitle.addClass(this.options.mouseOverClass); |
|
||||||
} |
|
||||||
}.bind(this)); |
|
||||||
newTitle.addEvent('mouseout', function() { |
|
||||||
if(newTitle != this.activeTitle) |
|
||||||
{ |
|
||||||
newTitle.removeClass(this.options.mouseOverClass); |
|
||||||
} |
|
||||||
}.bind(this)); |
|
||||||
//the new panel
|
|
||||||
var newPanel = new Element('div', { |
|
||||||
'style': {'height': this.options.panelHeight}, |
|
||||||
'id': title, |
|
||||||
'class': 'mootabs_panel' |
|
||||||
}); |
|
||||||
if(!this.options.useAjax) |
|
||||||
{ |
|
||||||
newPanel.setHTML(content); |
|
||||||
} |
|
||||||
this.panels.include(newPanel); |
|
||||||
this.el.adopt(newPanel); |
|
||||||
}, |
|
||||||
|
|
||||||
removeTab: function(title){ |
|
||||||
if(this.activeTitle.title == title) |
|
||||||
{ |
|
||||||
this.activate(this.titles[0]); |
|
||||||
} |
|
||||||
$$('#' + this.elid + ' ul li').filter('[title=' + title + ']')[0].remove(); |
|
||||||
|
|
||||||
$$('#' + this.elid + ' .mootabs_panel').filter('#' + title)[0].remove(); |
|
||||||
}, |
|
||||||
|
|
||||||
next: function(){ |
|
||||||
var nextTab = this.activeTitle.getNext(); |
|
||||||
if(!nextTab) { |
|
||||||
nextTab = this.titles[0]; |
|
||||||
} |
|
||||||
this.activate(nextTab); |
|
||||||
}, |
|
||||||
|
|
||||||
previous: function(){ |
|
||||||
var previousTab = this.activeTitle.getPrevious(); |
|
||||||
if(!previousTab) { |
|
||||||
previousTab = this.titles[this.titles.length - 1]; |
|
||||||
} |
|
||||||
this.activate(previousTab); |
|
||||||
} |
|
||||||
}); |
|
||||||
Loading…
Reference in new issue