result.size = function() { if(isVIEWPORT) { //获取窗口的宽高 return { width:lib.getViewWidth(), height:lib.getViewHeight() }; } else{ return { width:element.clientWidth, height:element.clientHeight }; } };
var resizeFun = u.debounce(function () { var winNewHeight = lib.getViewHeight(); var winNewWidth = lib.getViewWidth(); if (winNewHeight !== winHeight || winNewWidth !== winWidth) { u.each(Overlay.allOverlays, function (item, i) { if (!item || !item.get('visible')) { return; } item._setPosition(); }); } winWidth = winNewWidth; winHeight = winNewHeight; }, 200);
define(function (require) { var lib = require('winnie/lib'); var Widget = require('./Widget'); var Position = require('./Position'); var u = require('underscore'); var Overlay = Widget.extend({ type:'Overlay', options:{ width:'500px', height:'500px', visible:false, zIndex:99, align: { // element 的定位点,默认为左上角 selfXY: [0, 0], // 基准定位元素,默认为当前可视区域 baseElement: Position.VIEWPORT, // 基准定位元素的定位点,默认为左上角 baseXY: [0, 0] }, parentNode:document.body }, show:function() { if(!this.rendered) { this.render(); } this.set('visible', true); lib.show(this.element); //重新计算定位 this._setPosition(); return this; }, hide:function() { if(!this.rendered) { return this; } this.set('visible', false); lib.hide(this.element); return this; }, init:function(){ //用户计算window resize的定位计算 Overlay.allOverlays.push(this); this.after('render',function() { lib.setStyle(this.element,{ width:this.get('width'), height:this.get('height'), zIndex:this.get('zIndex') }); //首先将元素hide var position = lib.getStyle(this.element, 'position'); if(position === 'static' || position === 'relative') { lib.setStyle(this.element,{ position:'absolute', left:'-9999px', top:'-9999px' }); } }); this.after('show',function() { this._setPosition(); }); }, dispose:function() { lib.earse(this, Overlay.allOverlays); return Overlay.superclass.dispose.call(this); }, _setPosition:function(align) { if(!lib.isInDocument(this.element)){ return; } align || (align = this.get('align')); if(!align) { return; } //如果起先是隐藏的 var isHidden = lib.getStyle(this.element, 'display') === 'none'; if(isHidden) { //放入文档流中,但不可见 lib.setStyle(this.element,{ visibility:'hidden', display:'block' }); } //进行定位计算 Position.pin({ element: this.element, x:align.selfXY[0], y:align.selfXY[1] },{ element:align.baseElement, x:align.baseXY[0], y:align.baseXY[1] }); //重新可见 if(isHidden) { lib.setStyle(this.element, { visibility: 'visible' }); } //触发resize事件 this.fire('resize'); return this; }, /** * arr 元素数组,表示点击到这些元素上浮层不消失 * @param arr * @private */ _blurHide:function(arr) { arr.push(this.element); this._relativeElements = arr; Overlay.blurOverlays.push(this); } }); Overlay.blurOverlays = []; lib.on(document ,'click', function(e) { hideBlurOverlays(e); }); //window resize 重新计算浮层 var winHeight = lib.getViewHeight(); var winWidth = lib.getViewWidth(); Overlay.allOverlays = []; var resizeFun = u.debounce(function () { var winNewHeight = lib.getViewHeight(); var winNewWidth = lib.getViewWidth(); if (winNewHeight !== winHeight || winNewWidth !== winWidth) { u.each(Overlay.allOverlays, function (item, i) { if (!item || !item.get('visible')) { return; } item._setPosition(); }); } winWidth = winNewWidth; winHeight = winNewHeight; }, 200); lib.on(window,'resize',resizeFun); //helpers function hideBlurOverlays(e) { u.each(Overlay.blurOverlays,function(item,index) { // 当实例为空或隐藏时,不处理 if(!item || !item.get('visible')) { return; } // 遍历 _relativeElements ,当点击的元素落在这些元素上时,不处理,如关闭的按钮 for(var i=0; i<item._relativeElements.length; i++) { var el = item._relativeElements[i]; if (el === e.target || lib.contains(el, e.target)) { return; } } // 到这里,判断触发了元素的 blur 事件,隐藏元素 item.hide(); }); } return Overlay; });