Pull request #2285: 无JIRA任务 新增Drawer组件

Merge in VISUAL/fineui from ~GUY/fineui:master to master

* commit '8ef6fa18546630c2368a78065a9e8d2afb6fc781':
  新增Drawer组件

src/base/0.base.js

@@ -5,6 +5,7 @@ BI.prepares.push(function () {
     BI.Bubbles = new BI.BubblesController();
     BI.Tooltips = new BI.TooltipsController();
     BI.Popovers = new BI.PopoverController();
+    BI.Drawers = new BI.DrawerController();
     BI.Broadcasts = new BI.BroadcastController();
     BI.StyleLoaders = new BI.StyleLoaderManager();
 });

src/base/layer/layer.drawer.js

@@ -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";

src/core/controller/controller.drawer.js

@@ -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;
+    }
+});

src/less/base/view/drawer.less

@@ -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));
+}