|
|
@ -4,8 +4,14 @@ |
|
|
|
* @extends BI.Widget |
|
|
|
* @extends BI.Widget |
|
|
|
*/ |
|
|
|
*/ |
|
|
|
BI.Drawer = BI.inherit(BI.Widget, { |
|
|
|
BI.Drawer = BI.inherit(BI.Widget, { |
|
|
|
|
|
|
|
SIZE: { |
|
|
|
|
|
|
|
SMALL: "small", |
|
|
|
|
|
|
|
NORMAL: "normal", |
|
|
|
|
|
|
|
BIG: "big" |
|
|
|
|
|
|
|
}, |
|
|
|
props: { |
|
|
|
props: { |
|
|
|
baseCls: "bi-drawer bi-card", |
|
|
|
baseCls: "bi-drawer bi-card", |
|
|
|
|
|
|
|
size: "normal", |
|
|
|
placement: "right", // top/bottom/left/right
|
|
|
|
placement: "right", // top/bottom/left/right
|
|
|
|
header: null, |
|
|
|
header: null, |
|
|
|
headerHeight: 40, |
|
|
|
headerHeight: 40, |
|
|
@ -74,10 +80,37 @@ BI.Drawer = BI.inherit(BI.Widget, { |
|
|
|
bgap: o.bodyBgap |
|
|
|
bgap: o.bodyBgap |
|
|
|
}]; |
|
|
|
}]; |
|
|
|
|
|
|
|
|
|
|
|
return { |
|
|
|
return BI.extend({ |
|
|
|
type: "bi.vtape", |
|
|
|
type: "bi.vtape", |
|
|
|
items: items |
|
|
|
items: items |
|
|
|
|
|
|
|
}, this._getSuitableSize()); |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
_getSuitableSize: function () { |
|
|
|
|
|
|
|
var o = this.options; |
|
|
|
|
|
|
|
var size = 0; |
|
|
|
|
|
|
|
switch (o.size) { |
|
|
|
|
|
|
|
case "big": |
|
|
|
|
|
|
|
size = 736; |
|
|
|
|
|
|
|
break; |
|
|
|
|
|
|
|
case "small": |
|
|
|
|
|
|
|
size = 200; |
|
|
|
|
|
|
|
break; |
|
|
|
|
|
|
|
case "normal": |
|
|
|
|
|
|
|
default: |
|
|
|
|
|
|
|
size = 378; |
|
|
|
|
|
|
|
break; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
if (o.placement === "top" || o.placement === "bottom") { |
|
|
|
|
|
|
|
return { |
|
|
|
|
|
|
|
height: o.height || size |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
if (o.placement === "left" || o.placement === "right") { |
|
|
|
|
|
|
|
return { |
|
|
|
|
|
|
|
width: o.width || size |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
} |
|
|
|
}, |
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
mounted: function () { |
|
|
|
mounted: function () { |
|
|
@ -117,25 +150,26 @@ BI.Drawer = BI.inherit(BI.Widget, { |
|
|
|
show: function (callback) { |
|
|
|
show: function (callback) { |
|
|
|
var self = this, o = this.options; |
|
|
|
var self = this, o = this.options; |
|
|
|
requestAnimationFrame(function () { |
|
|
|
requestAnimationFrame(function () { |
|
|
|
|
|
|
|
var size = self._getSuitableSize(); |
|
|
|
switch (o.placement) { |
|
|
|
switch (o.placement) { |
|
|
|
case "right": |
|
|
|
case "right": |
|
|
|
self.element.css({ |
|
|
|
self.element.css({ |
|
|
|
transform: "translateX(-" + self.getWidth() + "px)" |
|
|
|
transform: "translateX(-" + size.width + "px)" |
|
|
|
}); |
|
|
|
}); |
|
|
|
break; |
|
|
|
break; |
|
|
|
case "left": |
|
|
|
case "left": |
|
|
|
self.element.css({ |
|
|
|
self.element.css({ |
|
|
|
transform: "translateX(" + self.getWidth() + "px)" |
|
|
|
transform: "translateX(" + size.width + "px)" |
|
|
|
}); |
|
|
|
}); |
|
|
|
break; |
|
|
|
break; |
|
|
|
case "top": |
|
|
|
case "top": |
|
|
|
self.element.css({ |
|
|
|
self.element.css({ |
|
|
|
transform: "translateY(" + self.getHeight() + "px)" |
|
|
|
transform: "translateY(" + size.height + "px)" |
|
|
|
}); |
|
|
|
}); |
|
|
|
break; |
|
|
|
break; |
|
|
|
case "bottom": |
|
|
|
case "bottom": |
|
|
|
self.element.css({ |
|
|
|
self.element.css({ |
|
|
|
transform: "translateY(-" + self.getHeight() + "px)" |
|
|
|
transform: "translateY(-" + size.height + "px)" |
|
|
|
}); |
|
|
|
}); |
|
|
|
break; |
|
|
|
break; |
|
|
|
} |
|
|
|
} |
|
|
@ -160,7 +194,7 @@ BI.Drawer = BI.inherit(BI.Widget, { |
|
|
|
}); |
|
|
|
}); |
|
|
|
break; |
|
|
|
break; |
|
|
|
} |
|
|
|
} |
|
|
|
setTimeout(callback, 300) |
|
|
|
setTimeout(callback, 300); |
|
|
|
}); |
|
|
|
}); |
|
|
|
}, |
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|