bugfix
This commit is contained in:
parent
f52edb8376
commit
4e4136eb72
@ -46,8 +46,17 @@ body {
|
|||||||
grid-gap: 1px;
|
grid-gap: 1px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.resizebox {
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
background-color: darkblue;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
cursor: se-resize; /* 改变鼠标指针样式 */
|
||||||
|
}
|
||||||
.popup {
|
.popup {
|
||||||
display:none;
|
display: none;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
box-sizing: border-box; /* 包括边框在内计算宽度和高度 */
|
box-sizing: border-box; /* 包括边框在内计算宽度和高度 */
|
||||||
color: #111111;
|
color: #111111;
|
||||||
@ -119,7 +128,7 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.scroll {
|
.scroll {
|
||||||
overflow:scroll;
|
overflow: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.vcontainer {
|
.vcontainer {
|
||||||
|
@ -215,6 +215,10 @@ bricks.DataViewer = class extends bricks.VBox {
|
|||||||
fs.push(this.fields[i]);
|
fs.push(this.fields[i]);
|
||||||
}
|
}
|
||||||
var f = new bricks.ModalForm({
|
var f = new bricks.ModalForm({
|
||||||
|
"widget":this,
|
||||||
|
"movable":true,
|
||||||
|
"resizable":true,
|
||||||
|
"archor":"cc",
|
||||||
"width":"90%",
|
"width":"90%",
|
||||||
"height":"70%",
|
"height":"70%",
|
||||||
"submit_url":this.editable.new_data_url,
|
"submit_url":this.editable.new_data_url,
|
||||||
@ -239,6 +243,10 @@ bricks.DataViewer = class extends bricks.VBox {
|
|||||||
fields.push(f);
|
fields.push(f);
|
||||||
}
|
}
|
||||||
var f = new bricks.ModalForm({
|
var f = new bricks.ModalForm({
|
||||||
|
"widget":this,
|
||||||
|
"movable":true,
|
||||||
|
"resizable":true,
|
||||||
|
"archor":"cc",
|
||||||
"width":"90%",
|
"width":"90%",
|
||||||
"height":"70%",
|
"height":"70%",
|
||||||
"submit_url":this.editable.update_data_url+'?id=' + record.id,
|
"submit_url":this.editable.update_data_url+'?id=' + record.id,
|
||||||
|
@ -33,7 +33,7 @@ bricks.Menu = class extends bricks.VBox {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
var w = await bricks.widgetBuild(desc, this);
|
var w = await bricks.widgetBuild(desc, this);
|
||||||
if (w){
|
if (w && ! w.parent){
|
||||||
t.clear_widgets();
|
t.clear_widgets();
|
||||||
t.add_widget(w);
|
t.add_widget(w);
|
||||||
} else {
|
} else {
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
var bricks = window.bricks || {};
|
var bricks = window.bricks || {};
|
||||||
|
|
||||||
bricks.Message = class extends bricks.Modal {
|
bricks.Message = class extends bricks.PopupWindow {
|
||||||
/*
|
/*
|
||||||
{
|
{
|
||||||
title:
|
title:
|
||||||
@ -43,23 +43,5 @@ bricks.show_message = function(opts){
|
|||||||
w.open();
|
w.open();
|
||||||
}
|
}
|
||||||
|
|
||||||
bricks.PopupForm = class extends bricks.VBox {
|
|
||||||
/*
|
|
||||||
{
|
|
||||||
form:{
|
|
||||||
}
|
|
||||||
}
|
|
||||||
*/
|
|
||||||
constructor(options){
|
|
||||||
super(options);
|
|
||||||
this.form = new bricks.Form(this.opts.form);
|
|
||||||
this.add_widget(this.form);
|
|
||||||
this.form.bind('submit', this.close_popup.bind(this));
|
|
||||||
this.form.bind('discard', this.close_popup.bind(this));
|
|
||||||
}
|
|
||||||
close_popup(e){
|
|
||||||
this.dismiss();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
bricks.Factory.register('Message', bricks.Message);
|
bricks.Factory.register('Message', bricks.Message);
|
||||||
bricks.Factory.register('Error', bricks.Error);
|
bricks.Factory.register('Error', bricks.Error);
|
||||||
|
@ -167,7 +167,7 @@ bricks.Modal = class extends bricks.BaseModal {
|
|||||||
*/
|
*/
|
||||||
}
|
}
|
||||||
|
|
||||||
bricks.ModalForm = class extends bricks.Modal {
|
bricks.ModalForm = class extends bricks.PopupWindow {
|
||||||
/*
|
/*
|
||||||
{
|
{
|
||||||
auto_open:
|
auto_open:
|
||||||
|
160
bricks/popup.js
160
bricks/popup.js
@ -4,12 +4,14 @@ bricks.Popup = class extends bricks.VBox {
|
|||||||
/*
|
/*
|
||||||
{
|
{
|
||||||
timeout:0
|
timeout:0
|
||||||
auto_open:
|
|
||||||
archor:one of ['tl', 'tc', 'tr', 'cl', 'cc', 'cr', 'bl','bc', 'br']
|
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;
|
widget:null for bricks.Body, string value for widget's id or a widget object;
|
||||||
auto_dismiss:
|
auto_open:boolean
|
||||||
auto_destroy:
|
auto_dismiss:boolean
|
||||||
movable:
|
auto_destroy:boolean
|
||||||
|
movable:boolean
|
||||||
|
resizable:boolean
|
||||||
|
modal:boolean
|
||||||
*/
|
*/
|
||||||
constructor(opts){
|
constructor(opts){
|
||||||
super(opts);
|
super(opts);
|
||||||
@ -24,12 +26,66 @@ bricks.Popup = class extends bricks.VBox {
|
|||||||
if (this.auto_dismiss){
|
if (this.auto_dismiss){
|
||||||
bricks.Body.bind('click', this.click_outside.bind(this));
|
bricks.Body.bind('click', this.click_outside.bind(this));
|
||||||
}
|
}
|
||||||
|
this.target_w = bricks.Body;
|
||||||
this.moving_status = false;
|
this.moving_status = false;
|
||||||
if (this.movable){
|
if (this.movable){
|
||||||
this.setup_movable();
|
this.setup_movable();
|
||||||
console.log('movable ...');
|
// console.log('movable ...');
|
||||||
}
|
}
|
||||||
|
if (this.resizable){
|
||||||
|
this.setup_resizable();
|
||||||
}
|
}
|
||||||
|
this.set_style('display', 'none');
|
||||||
|
bricks.Body.add_widget(this);
|
||||||
|
}
|
||||||
|
setup_resizable(){
|
||||||
|
this.resizable_w = new bricks.Icon({rate:1.5, url:bricks_resource('imgs/right-bottom-triangle.png')});
|
||||||
|
this.old_add_widget(this.resizable_w);
|
||||||
|
this.resizable_w.set_css('resizebox');
|
||||||
|
this.resizable_w.bind('mousedown', this.resize_start_pos.bind(this));
|
||||||
|
bricks.Body.bind('mousemove', this.resizing.bind(this));
|
||||||
|
bricks.Body.bind('mouseup', this.stop_resizing.bind(this));
|
||||||
|
}
|
||||||
|
resize_start_pos(e){
|
||||||
|
if (e.target != this.resizable_w.dom_element)
|
||||||
|
{
|
||||||
|
// console.log('not event target');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
var rect = this.showRectage();
|
||||||
|
this.resize_status = true;
|
||||||
|
this.s_offsetX = e.clientX;
|
||||||
|
this.s_offsetY = e.clientY;
|
||||||
|
this.s_width = rect.width;
|
||||||
|
this.s_height = rect.height;
|
||||||
|
e.preventDefault();
|
||||||
|
// console.log('resize_start_pos():', this.s_width, this.s_height, this.s_offsetX, this.s_offsetY);
|
||||||
|
}
|
||||||
|
resizing(e){
|
||||||
|
if (e.target != this.resizable_w.dom_element){
|
||||||
|
this.stop_resizing();
|
||||||
|
// console.log('resizing(): not event target');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (!this.resize_status){
|
||||||
|
// console.log('resizing(): not in resize status');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
var cx, cy;
|
||||||
|
cx = this.s_width + e.clientX - this.s_offsetX;
|
||||||
|
cy = this.s_height + e.clientY - this.s_offsetY;
|
||||||
|
this.set_style('width', cx + 'px');
|
||||||
|
this.set_style('height', cy + 'px');
|
||||||
|
// console.log('resizing():', this.resize_status, cx, cy);
|
||||||
|
e.preventDefault();
|
||||||
|
}
|
||||||
|
stop_resizing(e){
|
||||||
|
this.resize_status = false;
|
||||||
|
bricks.Body.unbind('mousemove', this.resizing.bind(this));
|
||||||
|
bricks.Body.unbind('mouseup', this.stop_resizing.bind(this));
|
||||||
|
// console.log('stop_resizing():', this.resize_status);
|
||||||
|
}
|
||||||
|
|
||||||
setup_movable(){
|
setup_movable(){
|
||||||
this.moving_w.bind('mousedown', this.rec_start_pos.bind(this));
|
this.moving_w.bind('mousedown', this.rec_start_pos.bind(this));
|
||||||
this.moving_w.bind('touchstart', this.rec_start_pos.bind(this));
|
this.moving_w.bind('touchstart', this.rec_start_pos.bind(this));
|
||||||
@ -37,7 +93,7 @@ bricks.Popup = class extends bricks.VBox {
|
|||||||
rec_start_pos(e){
|
rec_start_pos(e){
|
||||||
if (e.target != this.moving_w.dom_element)
|
if (e.target != this.moving_w.dom_element)
|
||||||
{
|
{
|
||||||
console.log('moving star failed', e.target, this.moving_w.dom_element, 'difference ...');
|
// console.log('moving star failed', e.target, this.moving_w.dom_element, 'difference ...');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
this.moving_status = true;
|
this.moving_status = true;
|
||||||
@ -48,15 +104,15 @@ bricks.Popup = class extends bricks.VBox {
|
|||||||
this.moving_w.bind('mousemove', this.moving.bind(this));
|
this.moving_w.bind('mousemove', this.moving.bind(this));
|
||||||
this.moving_w.bind('touchmove', this.moving.bind(this));
|
this.moving_w.bind('touchmove', this.moving.bind(this));
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
console.log('moving started ...');
|
// console.log('moving started ...');
|
||||||
}
|
}
|
||||||
moving(e){
|
moving(e){
|
||||||
if (e.target != this.moving_w.dom_element){
|
if (e.target != this.moving_w.dom_element){
|
||||||
console.log('moving failed', e.target, this.moving_w.dom_element, 'difference ...');
|
// console.log('moving failed', e.target, this.moving_w.dom_element, 'difference ...');
|
||||||
this.stop_moving();
|
this.stop_moving();
|
||||||
}
|
}
|
||||||
if (!this.moving_status){
|
if (!this.moving_status){
|
||||||
console.log('moving failed', 'not started ...');
|
// console.log('moving failed', 'not started ...');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
var cx, cy;
|
var cx, cy;
|
||||||
@ -66,7 +122,7 @@ bricks.Popup = class extends bricks.VBox {
|
|||||||
this.set_style('top', cy + 'px');
|
this.set_style('top', cy + 'px');
|
||||||
}
|
}
|
||||||
stop_moving(e){
|
stop_moving(e){
|
||||||
console.log('stop moving ....');
|
// console.log('stop moving ....');
|
||||||
this.moving_status = false;
|
this.moving_status = false;
|
||||||
this.moving_w.unbind('mousemove', this.moving.bind(this));
|
this.moving_w.unbind('mousemove', this.moving.bind(this));
|
||||||
this.moving_w.unbind('touchmove', this.moving.bind(this));
|
this.moving_w.unbind('touchmove', this.moving.bind(this));
|
||||||
@ -95,31 +151,34 @@ bricks.Popup = class extends bricks.VBox {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
open(){
|
open(){
|
||||||
var rect;
|
var rect, w, h;
|
||||||
if (this.opened) {
|
if (this.opened) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
this.opened = true;
|
this.opened = true;
|
||||||
if (this.widget instanceof bricks.JsWidget){
|
if (this.widget instanceof bricks.JsWidget){
|
||||||
rect = this.widget.showRectage()
|
this.target_w = this.widget;
|
||||||
this.issub = true;
|
this.issub = true;
|
||||||
} else {
|
} else {
|
||||||
var w = bricks.getWidgetById(this.widget, bricks.Body);
|
var w = bricks.getWidgetById(this.widget, bricks.Body);
|
||||||
if (w){
|
if (w){
|
||||||
this.issub = true
|
this.issub = true
|
||||||
rect = w.showRectage();
|
this.target_w = w;
|
||||||
} else {
|
|
||||||
rect = bricks.Body.showRectage();
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
rect = this.target_w.showRectage();
|
||||||
var lt = archor_at(this.archor);
|
var lt = archor_at(this.archor);
|
||||||
if (this.issub){
|
if (this.issub){
|
||||||
lt = this.transform2screen_at(rect, lt);
|
lt = this.transform2screen_at(rect, lt);
|
||||||
if (this.width && this.width.endsWith('%')){
|
if (typeof(this.width) == 'string' && this.width.endsWith('%')){
|
||||||
this.set_style('width', parseFloat(rect.width) * parseFloat(this.width) + 'px');
|
w = parseFloat(rect.width) * parseFloat(this.width) / 100;
|
||||||
|
this.set_style('width', w + 'px');
|
||||||
|
console.log('rect=', rect, 'w=', w);
|
||||||
}
|
}
|
||||||
if (this.height && this.height.endsWith('%')){
|
if (typeof(this.height) == 'string' && this.height.endsWith('%')){
|
||||||
this.set_style('height', parseFloat(rect.height) * parseFloat(this.height) + 'px');
|
h = parseFloat(rect.height) * parseFloat(this.height) / 100;
|
||||||
|
this.set_style('height', h + 'px');
|
||||||
|
console.log('rect=', rect, 'h=', h);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
this.set_style('top',lt.top);
|
this.set_style('top',lt.top);
|
||||||
@ -128,8 +187,14 @@ bricks.Popup = class extends bricks.VBox {
|
|||||||
if (this.timeout > 0){
|
if (this.timeout > 0){
|
||||||
this.auto_task = schedule_once(this.auto_dismiss.bind(this), this.timeout)
|
this.auto_task = schedule_once(this.auto_dismiss.bind(this), this.timeout)
|
||||||
}
|
}
|
||||||
|
if (this.opts.modal){
|
||||||
|
this.target_w.disabled(true);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
dismiss(){
|
dismiss(){
|
||||||
|
if (this.opts.modal){
|
||||||
|
this.target_w.disabled(false);
|
||||||
|
}
|
||||||
this.opened = false;
|
this.opened = false;
|
||||||
if (this.auto_task){
|
if (this.auto_task){
|
||||||
this.auto_task.cancel();
|
this.auto_task.cancel();
|
||||||
@ -141,6 +206,9 @@ bricks.Popup = class extends bricks.VBox {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
destroy(){
|
destroy(){
|
||||||
|
if (this.opened){
|
||||||
|
this.dismiss();
|
||||||
|
}
|
||||||
if (this.parent){
|
if (this.parent){
|
||||||
this.parent.remove_widget(this);
|
this.parent.remove_widget(this);
|
||||||
this.parent = null;
|
this.parent = null;
|
||||||
@ -149,19 +217,45 @@ bricks.Popup = class extends bricks.VBox {
|
|||||||
}
|
}
|
||||||
|
|
||||||
bricks.PopupWindow = class extends bricks.Popup {
|
bricks.PopupWindow = class extends bricks.Popup {
|
||||||
|
/*
|
||||||
|
{
|
||||||
|
title:
|
||||||
|
icon:
|
||||||
|
params:
|
||||||
|
url:
|
||||||
|
}
|
||||||
|
*/
|
||||||
constructor(opts){
|
constructor(opts){
|
||||||
super(opts);
|
super(opts);
|
||||||
this.title_bar = new bricks.HBox({cheight:1, width:'100%'});
|
this.title_bar = new bricks.HBox({cheight:1, width:'100%'});
|
||||||
this.title_bar.set_css('titlebar')
|
this.title_bar.set_css('titlebar')
|
||||||
this.content_w = new bricks.Filler({});
|
|
||||||
this.auto_destroy = false;
|
this.auto_destroy = false;
|
||||||
this.moving_w = this.title_bar;
|
this.moving_w = this.title_bar;
|
||||||
this.old_add_widget = bricks.Layout.prototype.add_widget.bind(this);
|
this.old_add_widget = bricks.Layout.prototype.add_widget.bind(this);
|
||||||
this.old_add_widget(this.title_bar);
|
this.old_add_widget(this.title_bar);
|
||||||
this.old_add_widget(this.content_w);
|
|
||||||
this.build_title_bar();
|
this.build_title_bar();
|
||||||
|
var filler = new bricks.Filler({});
|
||||||
|
this.old_add_widget(filler)
|
||||||
|
this.content_w = new bricks.VScrollPanel({width:"100%"});
|
||||||
|
filler.add_widget(this.content_w);
|
||||||
|
}
|
||||||
|
async load_content(){
|
||||||
|
var dic = {
|
||||||
|
"widgettype":"urlwidget",
|
||||||
|
"options":{
|
||||||
|
"params":this.params,
|
||||||
|
"url":this.url
|
||||||
|
}
|
||||||
|
}
|
||||||
|
var w = bricks.widgetBuild(dic, bricks.Body);
|
||||||
|
this.add_widget(w);
|
||||||
}
|
}
|
||||||
build_title_bar(){
|
build_title_bar(){
|
||||||
|
var icon = new bricks.Icon({
|
||||||
|
rate:this.opts.rate,
|
||||||
|
url:this.opts.icon || bricks_resource('imgs/app.png')
|
||||||
|
});
|
||||||
|
this.title_bar.add_widget(icon);
|
||||||
this.tb_w = new bricks.IconBar( {
|
this.tb_w = new bricks.IconBar( {
|
||||||
cheight:1,
|
cheight:1,
|
||||||
margin:'5px',
|
margin:'5px',
|
||||||
@ -191,6 +285,15 @@ bricks.PopupWindow = class extends bricks.Popup {
|
|||||||
this.tb_w.bind('delete', this.destroy.bind(this));
|
this.tb_w.bind('delete', this.destroy.bind(this));
|
||||||
this.tb_w.bind('minimax', this.dismiss.bind(this));
|
this.tb_w.bind('minimax', this.dismiss.bind(this));
|
||||||
this.tb_w.bind('fullscreen', this.enter_fullscreen.bind(this));
|
this.tb_w.bind('fullscreen', this.enter_fullscreen.bind(this));
|
||||||
|
if (this.title){
|
||||||
|
this.title_w = new bricks.Text({text:this.title});
|
||||||
|
this.title_bar.add_widget(this.title_w);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
set_title(txt){
|
||||||
|
if (this.title_w){
|
||||||
|
this.title_w.set_text(txt);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
add_widget(w, index){
|
add_widget(w, index){
|
||||||
this.content_w.add_widget(w, index);
|
this.content_w.add_widget(w, index);
|
||||||
@ -216,6 +319,21 @@ bricks.PopupWindow = class extends bricks.Popup {
|
|||||||
super.dismiss()
|
super.dismiss()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
bricks.Dock = class extends bricks.HBox {
|
||||||
|
constructor(opts){
|
||||||
|
opts.cheight = opts.cheight || 2;
|
||||||
|
opts.width = opts.width || "80%";
|
||||||
|
super(opts);
|
||||||
|
this.set_css('scroll');
|
||||||
|
this.pw = [];
|
||||||
|
}
|
||||||
|
add_popupwindow(pw){
|
||||||
|
var info = pw.get_window_info();
|
||||||
|
|
||||||
|
}
|
||||||
|
del_popupwindow(pw){
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
bricks.Factory.register('Popup', bricks.Popup);
|
bricks.Factory.register('Popup', bricks.Popup);
|
||||||
bricks.Factory.register('PopupWindow', bricks.PopupWindow);
|
bricks.Factory.register('PopupWindow', bricks.PopupWindow);
|
||||||
|
@ -65,8 +65,10 @@ bricks.JsWidget = class {
|
|||||||
disabled(flag){
|
disabled(flag){
|
||||||
if(flag){
|
if(flag){
|
||||||
this.dom_element.disabled = true;
|
this.dom_element.disabled = true;
|
||||||
|
this.set_style('pointerEvents', 'none');
|
||||||
} else {
|
} else {
|
||||||
this.dom_element.disabled = false;
|
this.dom_element.disabled = false;
|
||||||
|
this.set_style('pointerEvents', 'auto');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
opts_set_style(){
|
opts_set_style(){
|
||||||
|
Loading…
Reference in New Issue
Block a user