bugfix

bricks/bricks.js

@@ -460,6 +460,7 @@ bricks.App = class extends bricks.Layout {
 		*/
 		super(opts);
 		bricks.app = this;
+		this.docks = [];
 		bricks.bug = opts.debug || false;
 		bricks.Body = this;
 		this.deviceid = bricks.deviceid(opts.appname || 'appname');

bricks/css/bricks.css

@@ -46,6 +46,17 @@ body {
 	grid-gap: 1px;
 }
 
+.popup {
+	display:none;
+	position: absolute;
+	box-sizing: border-box; /* 包括边框在内计算宽度和高度 */
+	color: #111111;
+	background-color: #f1f1f1;
+	border: 1px solid #c1c1c1;
+	border-radius: 5px;
+	padding: 4px;
+}
+
 .modal {
 	display:none;
 	position: absolute;
@@ -210,18 +221,10 @@ body {
 
 .multicolumns {
 	column-width: 340px;
-	colomn-gap: 10px';
+	colomn-gap: 10px;
 	overflow-x: none;
 }
 
-.popup {
-	display: none;
-	position: absolution;
-	box-sizing: border-box; /* 包括边框在内计算宽度和高度 */
-	background-color: #f1f1f1;
-	border: 1px solid #c1c1c1;
-}
-
 .selected_record {
 	border-radius: 8px;
 	border: 1px solid #f00;

bricks/menu.js

@@ -24,11 +24,6 @@ bricks.Menu = class extends bricks.VBox {
 		console.log(event);
 		let e = event.target;
 		let opts = event.params;
-		if (! opts.url){
-			console.log('itme.url is null');
-			this.dispatch('command', opts);
-			return;
-		}
 		var t = bricks.getWidgetById(this.target);
 		if (t){
 			var desc = {
@@ -47,6 +42,7 @@ bricks.Menu = class extends bricks.VBox {
 		} else {
 			console.log('menu_clicked():', this.target, 'not found')
 		}
+		this.dispatch('command', opts);
 	}
 	create_children(w, items){
 		for (let i=0;i<items.length;i++){

bricks/popup.js

@@ -8,17 +8,52 @@ bricks.Popup = class extends bricks.VBox {
 		archor:one of ['tl', 'tc', 'tr', 'cl', 'cc', 'cr', 'bl','bc', 'br']
 		widget:null for bricks.Body, string value for widget's id or a widget object;
 		auto_dismiss:
+		auto_destroy:
+		movable:
 	*/
 	constructor(opts){
 		super(opts);
 		this.auto_task = null;
 		this.issub = false;
-		this.set_css('modal');
+		this.opened = false;
+		this.set_css('popup');
 		const zindex = bricks.app.new_zindex();
 		this.set_style('zIndex', zindex);
+		this.moving_w = this;
 		if (this.auto_dismiss){
 			bricks.Body.bind('click', this.click_outside.bind(this));
 		}
+		if (this.movable){
+			this.setup_movable();
+		}
+	}
+	setup_movable(){
+		this.moving_w.bind('mousedown', this.rec_start_pos.bind(this));
+	}
+	rec_start_pos(e){
+		if (e.tsarget != this.moving_w.dom_element) 
+		{
+			return;
+		}
+		this.offsetX = e.clientX - this.showRectage().left;
+		this.offsetY = e.clientY - this.showRectage().top;
+		this.moving_w.bind('mouseup', this.stop_moving.bind(this));
+		this.moving_w.bind('mousemove', this.moving.bind(this));
+		e.preventDefault();
+	}
+	moving(e){
+		if (e.target != this.moving_w.dom_element){
+			this.stop_moving();
+		}
+		var cx, cy;
+		cx = e.clientX - this.offsetX;
+		cy = e.clientY - this.offsetY;
+		this.set_style('left', cx + 'px');
+		this.set_style('top',  cy + 'px');
+	}
+	stop_moving(e){
+		this.moving_w.unbind('mousemove', this.moving.bind(this));
+		this.moving_w.unbind('mouseup', this.stop_moving.bind(this));
 	}
 	click_outside(event){
 		if (event.target != this.dom_element){
@@ -33,31 +68,33 @@ bricks.Popup = class extends bricks.VBox {
 	}
 	transform2screen_at(rect, lt){
 		var screen_rect = bricks.Body.showRectage();
-		top = rect.top + parseInt(lt.y) / 100 * rect.height;
+		var t, l;
-		left = rect.left + parseInt(lt.x) / 100 * rect.width;
+		t = rect.top + parseInt(lt.y) / 100 * (rect.bottom - rect.top);
+		l = rect.left + parseInt(lt.x) / 100 * (rect.right - rect.left);
 		return {
-			top:top + 'px',
+			top:t + 'px',
-			left:left + 'px'
+			left:l + 'px'
 		}
 	}
-	convert_width(){
+	var _add_widget = super.add_widget;
-		
-	}
 	open(){
 		var rect;
-
+		if (this.opened) {
+			return;
+		}
+		this.opened = true;
 		if (this.widget instanceof bricks.JsWidget){
 			rect = this.widget.showRectage()
 			this.issub = true;
-		} else if (this.widget instanceof String){
+		} else {
 			var w = bricks.getWidgetById(this.widget, bricks.Body);
-			if (!w){
+			if (w){
-				ithis.issub = true
+				this.issub = true
-				rect = bricks.Body.showRectage();
+				rect = w.showRectage();
-			}
 			} else {
 				rect = bricks.Body.showRectage();
 			}
+		}
 		var lt = archor_at(this.archor);
 		if (this.issub){
 			lt = this.transform2screen_at(rect, lt);
@@ -76,12 +113,90 @@ bricks.Popup = class extends bricks.VBox {
 		}
 	}
 	dismiss(){
+		this.opened = false;
 		if (this.auto_task){
 			this.auto_task.cancel();
 			this.auto_task = null;
 		}
 		this.set_style('display','none');
+		if (this.auto_destroy){
+			this.destroy();
+		}
+	}
+	destroy(){
+		if (this.parent){
+			this.parent.remove_widget(this);
+			this.parent = null;
+		}
+	}
+}
+
+bricks.PopupWindow = class extends bricks.Popup {
+	constructor(opts){
+		super(opts);
+		this.title_bar = new bricks.HBox({cheight:1.5, width:100%});
+		this.title_bar.set_css('titlebar')
+		this.content_w = new bricks.Filler({});
+		this.auto_destroy = false;
+		this.moving_w = this.title_bar;
+		super._add_widget(this.title_bar);
+		super._add_widget(this.content_w);
+		this.build_title_bar();
+	}
+	build_title_bar(){
+		this.tb_w = new bricks.IconBar( {
+			margin:'5px',
+			rate:1
+			tools:[
+				{
+					name:'delete',
+					icon:bricks_resource('imgs/app_delete.png'),
+					dynsize:true,
+					tip:'Destroy this window'
+				},
+				{
+					name:'minimax',
+					icon:bricks_resource('imgs/app_minimax.png'),
+					dynsize:true,
+					tip:'minimax this window'
+				},
+				{
+					name:'fullscreen',
+					icon:bricks_resource('imgs/app_fullscreen.png'),
+					dynsize:true,
+					tip:'fullscreen this window'
+				}
+			]
+		});
+		this.title_bar_w.add_widget(this.tb_w);
+		this.tb_w.bind('delete', this.destroy.bind(this));
+		this.tb_w.bind('minimax', this.dismiss.bind(this));
+		this.tb_w.bind('fullscreen', this.enter_fullscreen.bind(this));
+	}
+	add_widget(w, index){
+		this.content_w.add_widget(w, index);
+		if (this.auto_open){
+			this.open();
+		}
+	}
+	open(){
+		var f = bricks.app.docks.find(o => {
+			if (o == this){
+			}
+		});
+		if (! f){
+			bricks.app.docks.push(this);
+		}
+		super.open();
+	}
+	dismiss(){
+		var f = bricks.app.docks.find(o=> o===this);
+		if (!f){
+			bricks.app.docks.push(this);
+		}
+		super.dismiss()
 	}
 }
 
 bricks.Factory.register('Popup', bricks.Popup);
+bricks.Factory.register('PopupWindow', bricks.PopupWindow);

bricks/widget.js

@@ -153,6 +153,23 @@ bricks.JsWidget = class {
 			}
 		}
 	}
+	enter_fullscreen(){
+		var e = this.dom_element;
+		// 获取要全屏显示的元素
+		// 检查浏览器是否支持Fullscreen API
+		if (e.requestFullscreen) {
+			e.requestFullscreen();
+		} else if (e.mozRequestFullScreen) { // Firefox
+			e.mozRequestFullScreen();
+		} else if (e.webkitRequestFullscreen) { // Chrome, Safari and Opera
+			e.webkitRequestFullscreen();
+		} else if (e.msRequestFullscreen) { // IE/Edge
+			e.msRequestFullscreen();
+		}
+	}
+	exit_fullscreen(){
+		document.exitFullscreen();
+	}
 	h_center(){
 		this.dom_element.style.marginLeft = 'auto';
 		this.dom_element.style.marginRight = 'auto';