bugfix
This commit is contained in:
yumoqing
parent
f52edb8376
commit
4e4136eb72
@ -46,8 +46,17 @@ body {
|
||||
grid-gap: 1px;
|
||||
}
|
||||
|
||||
.resizebox {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: darkblue;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
cursor: se-resize; /* 改变鼠标指针样式 */
|
||||
}
|
||||
.popup {
|
||||
display:none;
|
||||
display: none;
|
||||
position: absolute;
|
||||
box-sizing: border-box; /* 包括边框在内计算宽度和高度 */
|
||||
color: #111111;
|
||||
@ -119,7 +128,7 @@ body {
|
||||
}
|
||||
|
||||
.scroll {
|
||||
overflow:scroll;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.vcontainer {
|
||||
|
||||
@ -215,6 +215,10 @@ bricks.DataViewer = class extends bricks.VBox {
|
||||
fs.push(this.fields[i]);
|
||||
}
|
||||
var f = new bricks.ModalForm({
|
||||
"widget":this,
|
||||
"movable":true,
|
||||
"resizable":true,
|
||||
"archor":"cc",
|
||||
"width":"90%",
|
||||
"height":"70%",
|
||||
"submit_url":this.editable.new_data_url,
|
||||
@ -239,6 +243,10 @@ bricks.DataViewer = class extends bricks.VBox {
|
||||
fields.push(f);
|
||||
}
|
||||
var f = new bricks.ModalForm({
|
||||
"widget":this,
|
||||
"movable":true,
|
||||
"resizable":true,
|
||||
"archor":"cc",
|
||||
"width":"90%",
|
||||
"height":"70%",
|
||||
"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);
|
||||
if (w){
|
||||
if (w && ! w.parent){
|
||||
t.clear_widgets();
|
||||
t.add_widget(w);
|
||||
} else {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
var bricks = window.bricks || {};
|
||||
|
||||
bricks.Message = class extends bricks.Modal {
|
||||
bricks.Message = class extends bricks.PopupWindow {
|
||||
/*
|
||||
{
|
||||
title:
|
||||
@ -43,23 +43,5 @@ bricks.show_message = function(opts){
|
||||
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('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:
|
||||
|
||||
160
bricks/popup.js
160
bricks/popup.js
@ -4,12 +4,14 @@ bricks.Popup = class extends bricks.VBox {
|
||||
/*
|
||||
{
|
||||
timeout:0
|
||||
auto_open:
|
||||
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:
|
||||
auto_open:boolean
|
||||
auto_dismiss:boolean
|
||||
auto_destroy:boolean
|
||||
movable:boolean
|
||||
resizable:boolean
|
||||
modal:boolean
|
||||
*/
|
||||
constructor(opts){
|
||||
super(opts);
|
||||
@ -24,12 +26,66 @@ bricks.Popup = class extends bricks.VBox {
|
||||
if (this.auto_dismiss){
|
||||
bricks.Body.bind('click', this.click_outside.bind(this));
|
||||
}
|
||||
this.target_w = bricks.Body;
|
||||
this.moving_status = false;
|
||||
if (this.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(){
|
||||
this.moving_w.bind('mousedown', 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){
|
||||
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;
|
||||
}
|
||||
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('touchmove', this.moving.bind(this));
|
||||
e.preventDefault();
|
||||
console.log('moving started ...');
|
||||
// console.log('moving started ...');
|
||||
}
|
||||
moving(e){
|
||||
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();
|
||||
}
|
||||
if (!this.moving_status){
|
||||
console.log('moving failed', 'not started ...');
|
||||
// console.log('moving failed', 'not started ...');
|
||||
return;
|
||||
}
|
||||
var cx, cy;
|
||||
@ -66,7 +122,7 @@ bricks.Popup = class extends bricks.VBox {
|
||||
this.set_style('top', cy + 'px');
|
||||
}
|
||||
stop_moving(e){
|
||||
console.log('stop moving ....');
|
||||
// console.log('stop moving ....');
|
||||
this.moving_status = false;
|
||||
this.moving_w.unbind('mousemove', this.moving.bind(this));
|
||||
this.moving_w.unbind('touchmove', this.moving.bind(this));
|
||||
@ -95,31 +151,34 @@ bricks.Popup = class extends bricks.VBox {
|
||||
}
|
||||
}
|
||||
open(){
|
||||
var rect;
|
||||
var rect, w, h;
|
||||
if (this.opened) {
|
||||
return;
|
||||
}
|
||||
this.opened = true;
|
||||
if (this.widget instanceof bricks.JsWidget){
|
||||
rect = this.widget.showRectage()
|
||||
this.target_w = this.widget;
|
||||
this.issub = true;
|
||||
} else {
|
||||
var w = bricks.getWidgetById(this.widget, bricks.Body);
|
||||
if (w){
|
||||
this.issub = true
|
||||
rect = w.showRectage();
|
||||
} else {
|
||||
rect = bricks.Body.showRectage();
|
||||
this.target_w = w;
|
||||
}
|
||||
}
|
||||
rect = this.target_w.showRectage();
|
||||
var lt = archor_at(this.archor);
|
||||
if (this.issub){
|
||||
lt = this.transform2screen_at(rect, lt);
|
||||
if (this.width && this.width.endsWith('%')){
|
||||
this.set_style('width', parseFloat(rect.width) * parseFloat(this.width) + 'px');
|
||||
if (typeof(this.width) == 'string' && this.width.endsWith('%')){
|
||||
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('%')){
|
||||
this.set_style('height', parseFloat(rect.height) * parseFloat(this.height) + 'px');
|
||||
if (typeof(this.height) == 'string' && this.height.endsWith('%')){
|
||||
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);
|
||||
@ -128,8 +187,14 @@ bricks.Popup = class extends bricks.VBox {
|
||||
if (this.timeout > 0){
|
||||
this.auto_task = schedule_once(this.auto_dismiss.bind(this), this.timeout)
|
||||
}
|
||||
if (this.opts.modal){
|
||||
this.target_w.disabled(true);
|
||||
}
|
||||
}
|
||||
dismiss(){
|
||||
if (this.opts.modal){
|
||||
this.target_w.disabled(false);
|
||||
}
|
||||
this.opened = false;
|
||||
if (this.auto_task){
|
||||
this.auto_task.cancel();
|
||||
@ -141,6 +206,9 @@ bricks.Popup = class extends bricks.VBox {
|
||||
}
|
||||
}
|
||||
destroy(){
|
||||
if (this.opened){
|
||||
this.dismiss();
|
||||
}
|
||||
if (this.parent){
|
||||
this.parent.remove_widget(this);
|
||||
this.parent = null;
|
||||
@ -149,19 +217,45 @@ bricks.Popup = class extends bricks.VBox {
|
||||
}
|
||||
|
||||
bricks.PopupWindow = class extends bricks.Popup {
|
||||
/*
|
||||
{
|
||||
title:
|
||||
icon:
|
||||
params:
|
||||
url:
|
||||
}
|
||||
*/
|
||||
constructor(opts){
|
||||
super(opts);
|
||||
this.title_bar = new bricks.HBox({cheight:1, width:'100%'});
|
||||
this.title_bar.set_css('titlebar')
|
||||
this.content_w = new bricks.Filler({});
|
||||
this.auto_destroy = false;
|
||||
this.moving_w = this.title_bar;
|
||||
this.old_add_widget = bricks.Layout.prototype.add_widget.bind(this);
|
||||
this.old_add_widget(this.title_bar);
|
||||
this.old_add_widget(this.content_w);
|
||||
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(){
|
||||
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( {
|
||||
cheight:1,
|
||||
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('minimax', this.dismiss.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){
|
||||
this.content_w.add_widget(w, index);
|
||||
@ -216,6 +319,21 @@ bricks.PopupWindow = class extends bricks.Popup {
|
||||
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('PopupWindow', bricks.PopupWindow);
|
||||
|
||||
@ -65,8 +65,10 @@ bricks.JsWidget = class {
|
||||
disabled(flag){
|
||||
if(flag){
|
||||
this.dom_element.disabled = true;
|
||||
this.set_style('pointerEvents', 'none');
|
||||
} else {
|
||||
this.dom_element.disabled = false;
|
||||
this.set_style('pointerEvents', 'auto');
|
||||
}
|
||||
}
|
||||
opts_set_style(){
|
||||
|
||||
Loading…
Reference in New Issue
Block a user