mirror of
https://gitee.com/ShopeX/OMS
synced 2026-04-03 22:25:46 +08:00
115 lines
3.4 KiB
JavaScript
115 lines
3.4 KiB
JavaScript
/**
|
|
* Shopex OMS
|
|
*
|
|
* Copyright (c) 2025 Shopex (http://www.shopex.cn)
|
|
* Licensed under Apache-2.0 with additional terms (See LICENSE file)
|
|
*/
|
|
|
|
var DropMenu=new Class({
|
|
Implements: [Events, Options,LazyLoad],
|
|
options: {
|
|
onLoad:$empty,
|
|
onShow:$empty,
|
|
onHide:$empty,
|
|
showMode:function(menu){menu.setStyle('display','block');},
|
|
hideMode:function(menu){menu.setStyle('display','none');},
|
|
dropClass:'droping',
|
|
eventType:'click',
|
|
relative:document.body,
|
|
stopEl:false,
|
|
stopState:false,
|
|
lazyEventType:'show',
|
|
delay:200,
|
|
offset:{x:0,y:20}
|
|
},
|
|
initialize:function(el,options){
|
|
this.element=$(el);
|
|
if(!this.element)return;
|
|
this.setOptions(options);
|
|
var menu=this.options.menu||this.element.get('dropmenu');
|
|
this.menu=$(menu)||$E('.'+menu,this.element.getParent());
|
|
if(!this.menu)return;
|
|
this.load().attach()._lazyloadInit(this.menu);
|
|
},
|
|
attach:function(){
|
|
var options=this.options,stopState=options.stopState,
|
|
dropClass=options.dropClass,eventType=options.eventType;
|
|
if(eventType!='mouse'){
|
|
this.element.addEvent('click',function(e){
|
|
if(this.showTimer)$clear(this.showTimer);
|
|
if(stopState)e.stop();
|
|
this.showTimer=this.show().outMenu.delay(this.options.delay,this);
|
|
}.bind(this));
|
|
}else{
|
|
$$(this.element,this.menu).addEvents({'mouseenter':function(e){
|
|
this.show();
|
|
if(this.timer)$clear(this.timer);
|
|
}.bind(this),'mouseleave':function(){
|
|
if(!this.status)return;
|
|
this.timer=this.hide.delay(this.options.delay,this);
|
|
}.bind(this)});
|
|
}
|
|
this.menu.addEvent('click',function(e){
|
|
if(true===options.stopEl)options.stopEl='stop';
|
|
if(options.stopEl)return e[options.stopEl]();
|
|
return this.hide();
|
|
}.bind(this));
|
|
return this;
|
|
},
|
|
load:function(){
|
|
return this.fireEvent('load',[this.element,this]);
|
|
},
|
|
show:function(){
|
|
this.fireEvent('initShow');
|
|
if(this.status)return this;
|
|
this.element.addClass(this.options.dropClass);
|
|
this.options.showMode.call(this,this.menu);
|
|
if(this.options.relative)
|
|
this.position({page: this.element.getPosition(this.options.relative)});
|
|
this.status=true;
|
|
return this.fireEvent('show',this.menu);
|
|
},
|
|
hide:function(){
|
|
this.options.hideMode.call(this,this.menu);
|
|
this.element.removeClass(this.options.dropClass);
|
|
this.status=false;
|
|
this.fireEvent('hide',this.menu);
|
|
},
|
|
position:function(event){
|
|
var options=this.options,relative=$(options.relative),
|
|
size = (relative||window).getSize(), scroll = (relative||window).getScroll();
|
|
var menu = {x: this.menu.offsetWidth, y: this.menu.offsetHeight};
|
|
|
|
if(options.temppos){
|
|
var l = event['page'].x+options.offset.x,t =event['page'].y+this.element.getSize().y+options.offset.y;
|
|
return this.menu.setStyles({'top':t,'left':l});
|
|
}
|
|
var props = {x: 'left', y: 'top'},obj={};
|
|
|
|
for (var z in props){
|
|
|
|
this.fireEvent('position',z);
|
|
obj[props[z]] = event.page[z] + this.options.offset[z];
|
|
|
|
if ((obj[props[z]] + menu[z] - scroll[z]) > size[z] ){
|
|
|
|
var n=this.options.size?this.element.getSize()[z]:0;
|
|
|
|
obj[props[z]] = event.page[z] + this.options.offset[z] - menu[z]+n;
|
|
}
|
|
}
|
|
this.menu.setStyles(obj);
|
|
return this;
|
|
},
|
|
outMenu:function(){
|
|
var _this=this;
|
|
document.body.addEvent('click',function(e){
|
|
if(_this.options.stopEl!=e.target&&_this.menu){
|
|
_this.hide.call(_this);
|
|
$clear(_this.showTimer);
|
|
this.removeEvent('click',arguments.callee);
|
|
}
|
|
});
|
|
}
|
|
});
|