bugfix

bricks/popup.js

@@ -53,7 +53,34 @@ bricks.Popup = class extends bricks.VBox {
 		this.set_css('toppopup');
 		bricks.app.toppopup = this;
 	}
-
+	popup_from_widget(from_w){
+		var myrect = this.showRectage();
+		var rect = from_w.showRectage();
+		var x,y;
+		var ox, oy;
+		ox = (rect.right - rect.left) / 2 + rect.left;
+		oy = (rect.bottom - rect.top) / 2 + rect.top;
+		if (ox < bricks.app.screenWidth() / 2) {
+			x = rect.right + 3;
+			if (x + (myrect.right - myrect.left) > bricks.app.screenWidth()){
+				x = bricks.app.screenWidth() -  (myrect.right - myrect.left);
+			}
+		} else {
+			x = rect.left - (myrect.right - myrect.left) - 3
+			if (x < 0) x = 0;
+		}
+		if (oy < bricks.app.screenHeight() / 2){
+			y = rect.bottom + 3;
+			if (y + (myrect.bottom - myrect.top) > bricks.app.screenHeight()){
+				y = bricks.app.screenHeight() -  (myrect.bottom - myrect.top);
+			}
+		} else {
+			y = rect.bottom - (myrect.bottom - myrect.top) - 3
+			if (y < 0) y = 0;
+		}
+		this.set_style('top', y + 'px');
+		this.set_style('left', x + 'px');
+	}
 	setup_resizable(){
 		this.resizable_w = new bricks.Icon({rate:1.5, url:bricks_resource('imgs/right-bottom-triangle.png')});
 		super.add_widget(this.resizable_w);
@@ -230,6 +257,12 @@ bricks.Popup = class extends bricks.VBox {
 			// console.log('auto_open is ', this.auto_open, ' so not auto open it', this.opts, w);
 		}
 	}
+	remove_widget(w){
+		this.content_box.remove_widget(w);
+	}
+	clear_widgets(){
+		this.content_box.clear_widgets();
+	}
 	open(){
 		var rect, w, h;
 		if (this.opened) {
@@ -261,6 +294,7 @@ bricks.Popup = class extends bricks.VBox {
 		this.content_box.disabled(false);
 	}
 	dismiss(){
+		if (! this.opened) return;
 		if (this.opts.modal){
 			this.target_w.disabled(false);
 		}

bricks/widget.js

@@ -15,6 +15,13 @@ bricks.resize_observer = new ResizeObserver(entries => {
 });
 
 bricks.JsWidget = class {
+	/*
+	popup:{
+		popup_event:
+		popup_desc:
+		popupwindow:false or true
+	}
+	*/
 	constructor(options){
 		if (!options){
 			options = {}
@@ -38,9 +45,36 @@ bricks.JsWidget = class {
 			var w = bricks.app.tooltip;
 			this.bind('mousemove', w.show.bind(w, this.opts.tip));
 			this.bind('mouseout', w.hide.bind(w));
+			this.bind('click', w.hide.bind(w));
+		}
+		if (this.popup){
+			this.bind(this.popup.popup_event, this.popup_action.bind(this));
 		}
 		bricks.resize_observer.observe(this.dom_element);
 	}
+	destroy_popup(){
+		this.popup_widget.destroy();
+		this.popup_widget = null;
+	}
+	async popup_action(){
+		if (this.popup_widget){
+			this.popup_widget.destroy();
+			this.popup_widget = null;
+		} else {
+			if (this.popup.popupwindow){
+				this.popup_widget = new bricks.PopupWindow(this.popup.optiosn);
+			} else {
+				this.popup_widget = new bricks.Popup(this.popup.options);
+			}
+			this.popup_widget.bind('dismissed', this.destroy_popup.bind(this));
+			var w = await bricks.widgetBuild(this.popup.popup_desc, this, this.user_data);
+			if (w){
+				this.popup_widget.add_widget(w);
+				this.popup_widget.open();
+				this.popup_widget.popup_from_widget(this);
+			}
+		}
+	}
 	showRectage(){
 		return this.dom_element.getBoundingClientRect();
 	}
@@ -500,7 +534,7 @@ bricks.Tooltip = class extends bricks.Text {
 		if (this.auto_task){
 			this.auto_task.cancel();
 		}
-		this.auto_task = schedule_once(this.hide.bind(this), 30);
+		this.auto_task = schedule_once(this.hide.bind(this), 6);
 	}
 	hide(){
 		if (this.auto_task){