Guyi
3 years ago
13 changed files with 414 additions and 8 deletions
@ -0,0 +1,192 @@
|
||||
/** |
||||
* Popover弹出层， |
||||
* @class BI.Popover |
||||
* @extends BI.Widget |
||||
*/ |
||||
BI.Drawer = BI.inherit(BI.Widget, { |
||||
props: { |
||||
baseCls: "bi-drawer bi-card", |
||||
placement: "right", // top/bottom/left/right
|
||||
header: null, |
||||
headerHeight: 40, |
||||
body: null, |
||||
closable: true, // BI-40839 是否显示右上角的关闭按钮
|
||||
bodyHgap: 20, |
||||
bodyTgap: 10, |
||||
bodyBgap: 10 |
||||
}, |
||||
|
||||
render: function () { |
||||
var self = this; |
||||
var o = this.options; |
||||
var items = [{ |
||||
el: { |
||||
type: "bi.htape", |
||||
cls: "bi-message-title bi-header-background", |
||||
items: [{ |
||||
type: "bi.absolute", |
||||
items: [{ |
||||
el: BI.isPlainObject(o.header) ? BI.extend({}, o.header, { |
||||
extraCls: "bi-font-bold" |
||||
}) : { |
||||
type: "bi.label", |
||||
cls: "bi-font-bold", |
||||
height: o.headerHeight, |
||||
text: o.header, |
||||
title: o.header, |
||||
textAlign: "left" |
||||
}, |
||||
left: 20, |
||||
top: 0, |
||||
right: 0, |
||||
bottom: 0 |
||||
}] |
||||
}, { |
||||
el: o.closable ? { |
||||
type: "bi.icon_button", |
||||
cls: "bi-message-close close-font", |
||||
height: o.headerHeight, |
||||
handler: function () { |
||||
self.close(); |
||||
} |
||||
} : { |
||||
type: "bi.layout" |
||||
}, |
||||
width: 56 |
||||
}], |
||||
height: o.headerHeight |
||||
}, |
||||
height: o.headerHeight |
||||
}, { |
||||
el: { |
||||
type: "bi.vertical", |
||||
scrolly: true, |
||||
cls: "drawer-body", |
||||
ref: function () { |
||||
self.body = this; |
||||
}, |
||||
items: [{ |
||||
el: o.body |
||||
}] |
||||
}, |
||||
hgap: o.bodyHgap, |
||||
tgap: o.bodyTgap, |
||||
bgap: o.bodyBgap |
||||
}]; |
||||
|
||||
return { |
||||
type: "bi.vtape", |
||||
items: items |
||||
}; |
||||
}, |
||||
|
||||
mounted: function () { |
||||
var self = this, o = this.options; |
||||
switch (o.placement) { |
||||
case "right": |
||||
self.element.css({ |
||||
top: 0, |
||||
left: "100%", |
||||
bottom: 0 |
||||
}); |
||||
break; |
||||
case "left": |
||||
self.element.css({ |
||||
top: 0, |
||||
right: "100%", |
||||
bottom: 0 |
||||
}); |
||||
break; |
||||
case "top": |
||||
self.element.css({ |
||||
left: 0, |
||||
right: 0, |
||||
bottom: "100%" |
||||
}); |
||||
break; |
||||
case "bottom": |
||||
self.element.css({ |
||||
left: 0, |
||||
right: 0, |
||||
top: "100%" |
||||
}); |
||||
break; |
||||
} |
||||
}, |
||||
|
||||
show: function (callback) { |
||||
var self = this, o = this.options; |
||||
requestAnimationFrame(function () { |
||||
switch (o.placement) { |
||||
case "right": |
||||
self.element.css({ |
||||
transform: "translateX(-" + self.getWidth() + "px)" |
||||
}); |
||||
break; |
||||
case "left": |
||||
self.element.css({ |
||||
transform: "translateX(" + self.getWidth() + "px)" |
||||
}); |
||||
break; |
||||
case "top": |
||||
self.element.css({ |
||||
transform: "translateY(" + self.getHeight() + "px)" |
||||
}); |
||||
break; |
||||
case "bottom": |
||||
self.element.css({ |
||||
transform: "translateY(-" + self.getHeight() + "px)" |
||||
}); |
||||
break; |
||||
} |
||||
callback && callback(); |
||||
}); |
||||
}, |
||||
|
||||
hide: function (callback) { |
||||
var self = this, o = this.options; |
||||
requestAnimationFrame(function () { |
||||
switch (o.placement) { |
||||
case "right": |
||||
case "left": |
||||
self.element.css({ |
||||
transform: "translateX(0px)" |
||||
}); |
||||
break; |
||||
case "top": |
||||
case "bottom": |
||||
self.element.css({ |
||||
transform: "translateY(0px)" |
||||
}); |
||||
break; |
||||
} |
||||
setTimeout(callback, 300) |
||||
}); |
||||
}, |
||||
|
||||
open: function () { |
||||
var self = this; |
||||
this.show(function () { |
||||
self.fireEvent(BI.Drawer.EVENT_OPEN); |
||||
}); |
||||
}, |
||||
|
||||
close: function () { |
||||
var self = this; |
||||
this.hide(function () { |
||||
self.fireEvent(BI.Drawer.EVENT_CLOSE); |
||||
}); |
||||
}, |
||||
|
||||
setZindex: function (zindex) { |
||||
this.element.css({"z-index": zindex}); |
||||
}, |
||||
|
||||
destroyed: function () { |
||||
} |
||||
}); |
||||
|
||||
BI.shortcut("bi.drawer", BI.Drawer); |
||||
|
||||
BI.Drawer.EVENT_CLOSE = "EVENT_CLOSE"; |
||||
BI.Drawer.EVENT_OPEN = "EVENT_OPEN"; |
||||
@ -0,0 +1,161 @@
|
||||
/** |
||||
* guy |
||||
* popover弹出层控制器, z-index在100w层级 |
||||
* @class BI.popoverController |
||||
* @extends BI.Controller |
||||
*/ |
||||
BI.DrawerController = BI.inherit(BI.Controller, { |
||||
props: function () { |
||||
return { |
||||
modal: true, // 模态窗口
|
||||
render: "body" |
||||
}; |
||||
}, |
||||
|
||||
init: function () { |
||||
this.modal = this.options.modal; |
||||
this.floatManager = {}; |
||||
this.floatLayer = {}; |
||||
this.floatContainer = {}; |
||||
this.floatOpened = {}; |
||||
this.zindex = BI.zIndex_popover; |
||||
this.zindexMap = {}; |
||||
}, |
||||
|
||||
create: function (name, options, context) { |
||||
if (this.has(name)) { |
||||
return this; |
||||
} |
||||
var popover = BI.createWidget(options || {}, { |
||||
type: "bi.drawer" |
||||
}, context); |
||||
this.add(name, popover, options, context); |
||||
return this; |
||||
}, |
||||
|
||||
open: function (name) { |
||||
var self = this, o = this.options; |
||||
if (!this.has(name)) { |
||||
return this; |
||||
} |
||||
if (!this.floatOpened[name]) { |
||||
this.floatOpened[name] = true; |
||||
var container = this.floatContainer[name]; |
||||
container.element.css("zIndex", this.zindex++); |
||||
this.modal && container.element.__hasZIndexMask__(this.zindexMap[name]) && container.element.__releaseZIndexMask__(this.zindexMap[name]); |
||||
this.zindexMap[name] = this.zindex; |
||||
if (this.modal) { |
||||
var mask = container.element.__buildZIndexMask__(this.zindex++); |
||||
mask.click(function () { |
||||
mask.destroy(); |
||||
self.get(name).close(); |
||||
}); |
||||
} |
||||
this.get(name).setZindex(this.zindex++); |
||||
this.floatContainer[name].visible(); |
||||
var popover = this.get(name); |
||||
popover.show && popover.show(); |
||||
} |
||||
return this; |
||||
}, |
||||
|
||||
close: function (name) { |
||||
if (!this.has(name)) { |
||||
return this; |
||||
} |
||||
if (this.floatOpened[name]) { |
||||
delete this.floatOpened[name]; |
||||
this.floatContainer[name].invisible(); |
||||
this.modal && this.floatContainer[name].element.__releaseZIndexMask__(this.zindexMap[name]); |
||||
} |
||||
return this; |
||||
}, |
||||
|
||||
show: function (name) { |
||||
return this.open(name); |
||||
}, |
||||
|
||||
hide: function (name) { |
||||
return this.close(name); |
||||
}, |
||||
|
||||
isVisible: function (name) { |
||||
return this.has(name) && this.floatOpened[name] === true; |
||||
}, |
||||
|
||||
add: function (name, popover, options, context) { |
||||
var self = this; |
||||
options || (options = {}); |
||||
if (this.has(name)) { |
||||
return this; |
||||
} |
||||
this.floatContainer[name] = BI.createWidget({ |
||||
type: "bi.absolute", |
||||
cls: "bi-popup-view", |
||||
items: [{ |
||||
el: (this.floatLayer[name] = BI.createWidget({ |
||||
type: "bi.absolute", |
||||
items: [popover] |
||||
}, context)), |
||||
left: 0, |
||||
right: 0, |
||||
top: 0, |
||||
bottom: 0 |
||||
}] |
||||
}); |
||||
this.floatManager[name] = popover; |
||||
(function (key) { |
||||
popover.on(BI.Drawer.EVENT_CLOSE, function () { |
||||
self.close(key); |
||||
}); |
||||
})(name); |
||||
BI.createWidget({ |
||||
type: "bi.absolute", |
||||
element: options.container || this.options.render, |
||||
items: [{ |
||||
el: this.floatContainer[name], |
||||
left: 0, |
||||
right: 0, |
||||
top: 0, |
||||
bottom: 0 |
||||
}] |
||||
}); |
||||
return this; |
||||
}, |
||||
|
||||
get: function (name) { |
||||
return this.floatManager[name]; |
||||
}, |
||||
|
||||
has: function (name) { |
||||
return BI.isNotNull(this.floatManager[name]); |
||||
}, |
||||
|
||||
remove: function (name) { |
||||
if (!this.has(name)) { |
||||
return this; |
||||
} |
||||
this.floatContainer[name].destroy(); |
||||
this.modal && this.floatContainer[name].element.__releaseZIndexMask__(this.zindexMap[name]); |
||||
delete this.floatManager[name]; |
||||
delete this.floatLayer[name]; |
||||
delete this.zindexMap[name]; |
||||
delete this.floatContainer[name]; |
||||
delete this.floatOpened[name]; |
||||
return this; |
||||
}, |
||||
|
||||
removeAll: function () { |
||||
var self = this; |
||||
BI.each(this.floatContainer, function (name, container) { |
||||
container.destroy(); |
||||
self.modal && self.floatContainer[name].element.__releaseZIndexMask__(self.zindexMap[name]); |
||||
}); |
||||
this.floatManager = {}; |
||||
this.floatLayer = {}; |
||||
this.floatContainer = {}; |
||||
this.floatOpened = {}; |
||||
this.zindexMap = {}; |
||||
return this; |
||||
} |
||||
}); |
||||
@ -0,0 +1,6 @@
|
||||
@import "../../index"; |
||||
|
||||
.bi-drawer { |
||||
.box-shadow(-6px 0 16px -8px #00000014, -9px 0 28px #0000000d, -12px 0 48px 16px #00000008); |
||||
.transition(transform .3s cubic-bezier(.23, 1, .32, 1), box-shadow .3s cubic-bezier(.23, 1, .32, 1)); |
||||
} |
||||
@ -0,0 +1,15 @@
|
||||
(function () { |
||||
if (typeof window.CustomEvent === "function") return false; // If not IE
|
||||
|
||||
function CustomEvent (event, params) { |
||||
params = params || { bubbles: false, cancelable: false, detail: undefined }; |
||||
var evt = document.createEvent("CustomEvent"); |
||||
evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail); |
||||
|
||||
return evt; |
||||
} |
||||
|
||||
CustomEvent.prototype = window.Event.prototype; |
||||
|
||||
window.CustomEvent = CustomEvent; |
||||
}()); |
||||
Loading…
Reference in new issue