From 48cce58cd997c6b308089e353e3f1abf4460e579 Mon Sep 17 00:00:00 2001 From: Young Date: Tue, 13 Mar 2018 09:18:22 +0800 Subject: [PATCH] =?UTF-8?q?BI-16736=20popover=E4=BC=98=E5=8C=96=E2=80=94?= =?UTF-8?q?=E2=80=94=E5=8A=A0=E5=85=A5size=E5=B1=9E=E6=80=A7&fineui=20demo?= =?UTF-8?q?=E4=B8=AD=E5=8A=A0=E5=85=A5=E7=AE=80=E5=8D=95=E7=9A=84=E6=90=9C?= =?UTF-8?q?=E7=B4=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- demo/js/core/popup/demo.popover.js | 68 ++++++++++++++++-- demo/js/west.js | 41 ++++++++++- dist/base.js | 48 ++++++++++--- dist/bundle.js | 50 ++++++++++--- dist/core.js | 2 +- dist/demo.js | 109 +++++++++++++++++++++++++++-- src/base/layer/layer.popover.js | 48 ++++++++++--- utils/utils.js | 2 +- 8 files changed, 327 insertions(+), 41 deletions(-) diff --git a/demo/js/core/popup/demo.popover.js b/demo/js/core/popup/demo.popover.js index 24f1fc539..f6b18435c 100644 --- a/demo/js/core/popup/demo.popover.js +++ b/demo/js/core/popup/demo.popover.js @@ -12,12 +12,13 @@ Demo.Func = BI.inherit(BI.Widget, { vgap: 10, items: [{ type: "bi.text_button", - text: "点击弹出Popover", + text: "点击弹出Popover(normal size)", height: 30, handler: function () { BI.Popovers.remove(id); BI.Popovers.create(id, { type: "bi.bar_popover", + size: "big", header: { type: "bi.label", text: "这个是header" @@ -26,10 +27,67 @@ Demo.Func = BI.inherit(BI.Widget, { type: "bi.label", text: "这个是body" } - // footer: { - // type: "bi.label", - // text: "这个是footer" - // } + }).open(id); + } + }, { + type: "bi.text_button", + text: "点击弹出Popover(small size)", + height: 30, + handler: function () { + BI.Popovers.remove(id); + BI.Popovers.create(id, { + type: "bi.bar_popover", + size: "small", + header: { + type: "bi.label", + text: "这个是header" + }, + body: { + type: "bi.label", + text: "这个是body" + } + }).open(id); + } + }, { + type: "bi.text_button", + text: "点击弹出Popover(big size)", + height: 30, + handler: function () { + BI.Popovers.remove(id); + BI.Popovers.create(id, { + type: "bi.bar_popover", + size: "big", + header: { + type: "bi.label", + text: "这个是header" + }, + body: { + type: "bi.label", + text: "这个是body" + } + }).open(id); + } + }, { + type: "bi.text_button", + text: "点击弹出Popover(custom)", + height: 30, + handler: function () { + BI.Popovers.remove(id); + BI.Popovers.create(id, { + width: 400, + height: 300, + header: { + type: "bi.label", + text: "这个是header" + }, + body: { + type: "bi.label", + text: "这个是body" + }, + footer: { + type: "bi.label", + text: "这个是footer" + } }).open(id); } }] diff --git a/demo/js/west.js b/demo/js/west.js index a73a93fec..e8c711190 100644 --- a/demo/js/west.js +++ b/demo/js/west.js @@ -2,11 +2,45 @@ Demo.West = BI.inherit(BI.Widget, { props: { baseCls: "demo-west bi-border-right bi-card" }, + mounted: function () { + this.searcher.setAdapter(this.tree); + }, render: function () { var self = this; return { - type: "bi.vertical", + type: "bi.vtape", items: [{ + type: "bi.center_adapt", + items: [{ + type: "bi.searcher", + el: { + type: "bi.search_editor", + watermark: "简单搜索" + }, + width: 200, + isAutoSearch: false, + isAutoSync: false, + ref: function (ref) { + self.searcher = ref; + }, + popup: { + type: "bi.multilayer_single_level_tree", + cls: "bi-card", + listeners: [{ + eventName: BI.MultiLayerSingleLevelTree.EVENT_CHANGE, + action: function (v) { + self.fireEvent(Demo.West.EVENT_VALUE_CHANGE, v); + } + }] + }, + onSearch: function (op, callback) { + var result = BI.Func.getSearchResult(Demo.CONFIG, op.keyword, "text"); + var items = result.match.concat(result.find); + callback(items); + } + }], + height: 40 + }, { type: "bi.multilayer_single_level_tree", listeners: [{ eventName: BI.MultiLayerSingleLevelTree.EVENT_CHANGE, @@ -14,7 +48,10 @@ Demo.West = BI.inherit(BI.Widget, { self.fireEvent(Demo.West.EVENT_VALUE_CHANGE, v); } }], - items: Demo.CONFIG + items: Demo.CONFIG, + ref: function (ref) { + self.tree = ref; + } }] }; } diff --git a/dist/base.js b/dist/base.js index 0da04ec55..dd4c35283 100644 --- a/dist/base.js +++ b/dist/base.js @@ -15307,11 +15307,20 @@ BI.shortcut("bi.grid_view", BI.GridView);/** * @extends BI.Widget */ BI.Popover = BI.inherit(BI.Widget, { + _constant: { + SIZE: { + SMALL: "small", + NORMAL: "normal", + BIG: "big" + } + }, + _defaultConfig: function () { return BI.extend(BI.Popover.superclass._defaultConfig.apply(this, arguments), { baseCls: "bi-popover bi-card", - width: 600, - height: 500, + // width: 600, + // height: 500, + size: "normal", // small, normal, big header: null, body: null, footer: null @@ -15401,15 +15410,38 @@ BI.Popover = BI.inherit(BI.Widget, { }; } - BI.createWidget({ + var size = this._calculateSize(); + + return { type: "bi.border", - element: this, - items: items - }); + items: items, + width: size.width, + height: size.height + }; }, - show: function () { - + _calculateSize: function () { + var o = this.options; + var size = {}; + if (BI.isNotNull(o.size)) { + switch (o.size) { + case this._constant.SIZE.SMALL: + size.width = 450; + size.height = 220; + break; + case this._constant.SIZE.BIG: + size.width = 900; + size.height = 500; + break; + default: + size.width = 550; + size.height = 500; + } + } + return { + width: o.width || size.width, + height: o.height || size.height + }; }, hide: function () { diff --git a/dist/bundle.js b/dist/bundle.js index 2d77652d1..b1a40154f 100644 --- a/dist/bundle.js +++ b/dist/bundle.js @@ -19488,7 +19488,7 @@ if (!window.BI) { }); // 集合相关方法 - _.each(["where", "findWhere", "contains", "invoke", "pluck", "shuffle", "sample", "toArray", "size"], function (name) { + _.each(["where", "findWhere", "invoke", "pluck", "shuffle", "sample", "toArray", "size"], function (name) { BI[name] = _apply(name); }); _.each(["get", "each", "map", "reduce", "reduceRight", "find", "filter", "reject", "every", "all", "some", "any", "max", "min", @@ -49134,11 +49134,20 @@ BI.shortcut("bi.grid_view", BI.GridView);/** * @extends BI.Widget */ BI.Popover = BI.inherit(BI.Widget, { + _constant: { + SIZE: { + SMALL: "small", + NORMAL: "normal", + BIG: "big" + } + }, + _defaultConfig: function () { return BI.extend(BI.Popover.superclass._defaultConfig.apply(this, arguments), { baseCls: "bi-popover bi-card", - width: 600, - height: 500, + // width: 600, + // height: 500, + size: "normal", // small, normal, big header: null, body: null, footer: null @@ -49228,15 +49237,38 @@ BI.Popover = BI.inherit(BI.Widget, { }; } - BI.createWidget({ + var size = this._calculateSize(); + + return { type: "bi.border", - element: this, - items: items - }); + items: items, + width: size.width, + height: size.height + }; }, - show: function () { - + _calculateSize: function () { + var o = this.options; + var size = {}; + if (BI.isNotNull(o.size)) { + switch (o.size) { + case this._constant.SIZE.SMALL: + size.width = 450; + size.height = 220; + break; + case this._constant.SIZE.BIG: + size.width = 900; + size.height = 500; + break; + default: + size.width = 550; + size.height = 500; + } + } + return { + width: o.width || size.width, + height: o.height || size.height + }; }, hide: function () { diff --git a/dist/core.js b/dist/core.js index 8e5ff5a69..bdb4863bc 100644 --- a/dist/core.js +++ b/dist/core.js @@ -19488,7 +19488,7 @@ if (!window.BI) { }); // 集合相关方法 - _.each(["where", "findWhere", "contains", "invoke", "pluck", "shuffle", "sample", "toArray", "size"], function (name) { + _.each(["where", "findWhere", "invoke", "pluck", "shuffle", "sample", "toArray", "size"], function (name) { BI[name] = _apply(name); }); _.each(["get", "each", "map", "reduce", "reduceRight", "find", "filter", "reject", "every", "all", "some", "any", "max", "min", diff --git a/dist/demo.js b/dist/demo.js index 1d83b0cf3..ddad27c6a 100644 --- a/dist/demo.js +++ b/dist/demo.js @@ -8543,12 +8543,13 @@ Demo.Func = BI.inherit(BI.Widget, { vgap: 10, items: [{ type: "bi.text_button", - text: "点击弹出Popover", + text: "点击弹出Popover(normal size)", height: 30, handler: function () { BI.Popovers.remove(id); BI.Popovers.create(id, { type: "bi.bar_popover", + size: "big", header: { type: "bi.label", text: "这个是header" @@ -8557,10 +8558,67 @@ Demo.Func = BI.inherit(BI.Widget, { type: "bi.label", text: "这个是body" } - // footer: { - // type: "bi.label", - // text: "这个是footer" - // } + }).open(id); + } + }, { + type: "bi.text_button", + text: "点击弹出Popover(small size)", + height: 30, + handler: function () { + BI.Popovers.remove(id); + BI.Popovers.create(id, { + type: "bi.bar_popover", + size: "small", + header: { + type: "bi.label", + text: "这个是header" + }, + body: { + type: "bi.label", + text: "这个是body" + } + }).open(id); + } + }, { + type: "bi.text_button", + text: "点击弹出Popover(big size)", + height: 30, + handler: function () { + BI.Popovers.remove(id); + BI.Popovers.create(id, { + type: "bi.bar_popover", + size: "big", + header: { + type: "bi.label", + text: "这个是header" + }, + body: { + type: "bi.label", + text: "这个是body" + } + }).open(id); + } + }, { + type: "bi.text_button", + text: "点击弹出Popover(custom)", + height: 30, + handler: function () { + BI.Popovers.remove(id); + BI.Popovers.create(id, { + width: 400, + height: 300, + header: { + type: "bi.label", + text: "这个是header" + }, + body: { + type: "bi.label", + text: "这个是body" + }, + footer: { + type: "bi.label", + text: "这个是footer" + } }).open(id); } }] @@ -11605,11 +11663,45 @@ BI.shortcut("demo.preview", Demo.Preview);Demo.West = BI.inherit(BI.Widget, { props: { baseCls: "demo-west bi-border-right bi-card" }, + mounted: function () { + this.searcher.setAdapter(this.tree); + }, render: function () { var self = this; return { - type: "bi.vertical", + type: "bi.vtape", items: [{ + type: "bi.center_adapt", + items: [{ + type: "bi.searcher", + el: { + type: "bi.search_editor", + watermark: "简单搜索" + }, + width: 200, + isAutoSearch: false, + isAutoSync: false, + ref: function (ref) { + self.searcher = ref; + }, + popup: { + type: "bi.multilayer_single_level_tree", + cls: "bi-card", + listeners: [{ + eventName: BI.MultiLayerSingleLevelTree.EVENT_CHANGE, + action: function (v) { + self.fireEvent(Demo.West.EVENT_VALUE_CHANGE, v); + } + }] + }, + onSearch: function (op, callback) { + var result = BI.Func.getSearchResult(Demo.CONFIG, op.keyword, "text"); + var items = result.match.concat(result.find); + callback(items); + } + }], + height: 40 + }, { type: "bi.multilayer_single_level_tree", listeners: [{ eventName: BI.MultiLayerSingleLevelTree.EVENT_CHANGE, @@ -11617,7 +11709,10 @@ BI.shortcut("demo.preview", Demo.Preview);Demo.West = BI.inherit(BI.Widget, { self.fireEvent(Demo.West.EVENT_VALUE_CHANGE, v); } }], - items: Demo.CONFIG + items: Demo.CONFIG, + ref: function (ref) { + self.tree = ref; + } }] }; } diff --git a/src/base/layer/layer.popover.js b/src/base/layer/layer.popover.js index fd24bcad2..25e2bd779 100644 --- a/src/base/layer/layer.popover.js +++ b/src/base/layer/layer.popover.js @@ -4,11 +4,20 @@ * @extends BI.Widget */ BI.Popover = BI.inherit(BI.Widget, { + _constant: { + SIZE: { + SMALL: "small", + NORMAL: "normal", + BIG: "big" + } + }, + _defaultConfig: function () { return BI.extend(BI.Popover.superclass._defaultConfig.apply(this, arguments), { baseCls: "bi-popover bi-card", - width: 600, - height: 500, + // width: 600, + // height: 500, + size: "normal", // small, normal, big header: null, body: null, footer: null @@ -98,15 +107,38 @@ BI.Popover = BI.inherit(BI.Widget, { }; } - BI.createWidget({ + var size = this._calculateSize(); + + return { type: "bi.border", - element: this, - items: items - }); + items: items, + width: size.width, + height: size.height + }; }, - show: function () { - + _calculateSize: function () { + var o = this.options; + var size = {}; + if (BI.isNotNull(o.size)) { + switch (o.size) { + case this._constant.SIZE.SMALL: + size.width = 450; + size.height = 220; + break; + case this._constant.SIZE.BIG: + size.width = 900; + size.height = 500; + break; + default: + size.width = 550; + size.height = 500; + } + } + return { + width: o.width || size.width, + height: o.height || size.height + }; }, hide: function () { diff --git a/utils/utils.js b/utils/utils.js index 809f612f6..099e67164 100644 --- a/utils/utils.js +++ b/utils/utils.js @@ -10696,7 +10696,7 @@ if (!window.BI) { }); // 集合相关方法 - _.each(["where", "findWhere", "contains", "invoke", "pluck", "shuffle", "sample", "toArray", "size"], function (name) { + _.each(["where", "findWhere", "invoke", "pluck", "shuffle", "sample", "toArray", "size"], function (name) { BI[name] = _apply(name); }); _.each(["get", "each", "map", "reduce", "reduceRight", "find", "filter", "reject", "every", "all", "some", "any", "max", "min",