yumoqing/bricks
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

bugfix

Browse Source
This commit is contained in:
yumoqing 2024-03-03 21:07:57 +08:00
parent a93a350e74
commit 8bb5c667b4
11 changed files with 105 additions and 182 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
bricks/bricks.js
View File

@ -96,7 +96,7 @@ bricks.widgetBuild = async function(desc, widget){
if (desc.id){ if (desc.id){
w.set_id(desc.id); w.set_id(desc.id);
} }
if (w.hasSubwidgets && desc.subwidgets){ if (w.is_container() && desc.subwidgets){
for (let i=0; i<desc.subwidgets.length; i++){ for (let i=0; i<desc.subwidgets.length; i++){
let sdesc = desc.subwidgets[i]; let sdesc = desc.subwidgets[i];
let sw = await (bricks.widgetBuild(sdesc, w)); let sw = await (bricks.widgetBuild(sdesc, w));
@ -396,12 +396,14 @@ bricks.App = class extends bricks.Layout {
bricks.Body = this; bricks.Body = this;
this.login_url = opts.login_url; this.login_url = opts.login_url;
this.charsize = this.opts.charsize || 20; this.charsize = this.opts.charsize || 20;
this.char_size = this.observable('charsize', this.charsize);
if (this.opts.language){ if (this.opts.language){
this.lang = this.opts.language; this.lang = this.opts.language;
} }
else { else {
this.lang = navigator.language; this.lang = navigator.language;
} }
this.lang_x = this.observable('lang', this.lang);
this.textList = []; this.textList = [];
this.i18n = new bricks.I18n(objget(opts, 'i18n', {})); this.i18n = new bricks.I18n(objget(opts, 'i18n', {}));
this.session_id = null; this.session_id = null;
@ -417,31 +419,6 @@ bricks.App = class extends bricks.Layout {
get_session(){ get_session(){
return this.session_id; return this.session_id;
} }
get_textsize(ctype){
var tsize = this.charsize;
var stimes = {
"text":1.0,
"title1":1.96,
"title2":1.80,
"title3":1.64,
"title4":1.48,
"title5":1.32,
"title6":1.16
}
tsize = parseInt(stimes[ctype] * tsize);
return tsize + 'px';
}
text_ref(textWidget){
this.textList.push(new WeakRef(textWidget));
}
text_remove_dead(){
var tList = this.textList;
for (var i=0;i<tList.length;i++){
if (! tList[i].deref()){
this.textList.remove(tList[i]);
}
}
}
async setup_i18n(){ async setup_i18n(){
let params = {'lang':this.lang}; let params = {'lang':this.lang};
var jcall = bricks.jcall; var jcall = bricks.jcall;
@ -469,11 +446,11 @@ bricks.App = class extends bricks.Layout {
} }
textsize_bigger(){ textsize_bigger(){
this.charsize = this.charsize * 1.05; this.charsize = this.charsize * 1.05;
this.text_resize(); this.char_size.set(this.charsize);
} }
textsize_smaller(){ textsize_smaller(){
this.charsize = this.charsize * 0.95; this.charsize = this.charsize * 0.95;
this.text_resize(); this.char_size.set(this.charsize);
} }
text_resize = function(){ text_resize = function(){
for (var i=0;i<this.textList.length;i++){ for (var i=0;i<this.textList.length;i++){
@ -487,13 +464,6 @@ bricks.App = class extends bricks.Layout {
change_language = async function(lang){ change_language = async function(lang){
this.lang = lang; this.lang = lang;
await (this.i18n.change_lang(lang)); await (this.i18n.change_lang(lang));
for (var i=0;i<this.textList.length;i++){ this.lang_x.set(this.lang);
if(this.textList[i].deref()){
var w = this.textList[i].deref();
if (w.opts.i18n) {
w.set_i18n_text();
}
}
}
} }
} }

0
bricks/bricksNS.js
View File

1
bricks/bricksend.js
View File

@ -1 +0,0 @@
}

0
bricks/collapseaccordion.js
View File

51
bricks/datagridaccordion.js
View File

@ -1,51 +0,0 @@
var bricks = window.bricks || {};
bricks.DataGridAccordion = class extends bricks.VBox {
/*
options:{
data_url:
title:
description:
footer:
header:
record:
detail_url:
}
*/
constructor(opts):
super(opts);
if (self.opts.title){
var t = new bricks.Title3(
otext=self.opts.title,
i18n=true
);
this.add_widget(t);
}
if (self.opts.description){
var d = new bricks.Text(
otext=self.opts.description,
i18n=true,
wrap=true,
halign='left'
);
this.add_widget(d);
}
if (this.opts.header){
var h = await bricks.widgetBuild(this.opts.header, this);
if (h){
this.add_widgettype(h);
}
}
var filler = new bricks.Filler();
var this.accordion = await this.buildAccordion();
filler.add_widget(this.accordion)
this.add_widget(filler);
if (this.opts.footer){
var f = await bricks.widgetBuild(this.opts.footer, this);
this.add_widget(f);
}
}
async buildAccordion(){
var p = bricks.VScrollPanel();
}
}

48
bricks/image.js
View File

@ -42,25 +42,10 @@ bricks.Icon = class oops extends bricks.Image {
opts.height = siz; opts.height = siz;
super(opts); super(opts);
this.rate = rate; this.rate = rate;
this.ctype = 'text'; this.cwidth = this.opts.cwidth || 1;
this.sizable(); this.cheight = this.opts.cheight || 1;
this.set_fontsize(); this.dynsize = this.opts.dynsize || true;
} this.charsize_sizing();
change_fontsize(ts){
var siz = bricks.app.charsize * this.rate + 'px';
this.set_width(siz);
this.set_height(siz);
}
set_fontsize(){
var siz = bricks.app.charsize * this.rate + 'px';
this.set_width(siz);
this.set_height(siz);
}
set_width(siz){
this.dom_element.width = siz;
}
set_height(siz){
this.dom_element.height = siz;
} }
} }
@ -68,27 +53,10 @@ bricks.BlankIcon = class oops extends bricks.JsWidget {
constructor(opts){ constructor(opts){
super(opts); super(opts);
this.rate = opts.rate || 1; this.rate = opts.rate || 1;
this.ctype = 'text'; this.cwidth = this.opts.cwidth || 1;
this.sizable(); this.cheight = this.opts.cheight || 1;
this.set_fontsize(); this.dynsize = this.opts.dynsize || true;
} this.charsize_sizing();
change_fontsize(ts){
var siz = bricks.app.charsize * this.rate + 'px';
this.set_width(siz);
this.set_height(siz);
}
set_fontsize(){
var siz = bricks.app.charsize * this.rate + 'px';
this.set_width(siz);
this.set_height(siz);
}
set_width(siz){
this.dom_element.width = siz;
this.dom_element.style.width = siz;
}
set_height(siz){
this.dom_element.height = siz;
this.dom_element.style.height = siz;
} }
} }

21
bricks/input.js
View File

@ -57,8 +57,9 @@ bricks.UiStr =class extends bricks.UiType {
*/ */
constructor(opts){ constructor(opts){
super(opts); super(opts);
this.sizable(); this.rate = this.opts.rate || 1;
this.set_fontsize(); this.dynsize = this.opts.dynsize || true;
this.cfontsize = this.opts.cfontsize || 1;
if (opts.readonly) { if (opts.readonly) {
this.set_readonly("Y"); this.set_readonly("Y");
} else { } else {
@ -67,6 +68,7 @@ bricks.UiStr =class extends bricks.UiType {
if (opts.width){ if (opts.width){
this.dom_element.style.width = opts.width; this.dom_element.style.width = opts.width;
} }
this.charsize_sizing();
} }
create(){ create(){
@ -364,7 +366,6 @@ bricks.UiCheckBox =class extends bricks.UiType {
if (! Array.isArray(this.value)){ if (! Array.isArray(this.value)){
this.value = [ this.value ]; this.value = [ this.value ];
} }
this.set_fontsize();
this.el_legend = this._create('legend'); this.el_legend = this._create('legend');
var label = this.opts.label||this.opts.name; var label = this.opts.label||this.opts.name;
this.el_legend.innerText = bricks.app.i18n._(label); this.el_legend.innerText = bricks.app.i18n._(label);
@ -374,6 +375,9 @@ bricks.UiCheckBox =class extends bricks.UiType {
this.data = opts.data; this.data = opts.data;
this.build_checkboxs(); this.build_checkboxs();
} }
this.sizable_elements = [];
this.sizable_elements.push(this.el_legend);
this.charsize_sizing();
} }
create(){ create(){
this.dom_element = this._create('fieldset'); this.dom_element = this._create('fieldset');
@ -480,10 +484,11 @@ bricks.UiText =class extends bricks.UiType {
} }
*/ */
constructor(opts){ constructor(opts){
opts.dynsize = opts.dynsize || true;
opts.cfontsize = opts.cfontsize || 1;
super(opts); super(opts);
this.build(); this.build();
this.sizable(); this.charsize_sizing();
this.set_fontsize();
} }
create(){ create(){
this.dom_element = this._create('textarea'); this.dom_element = this._create('textarea');
@ -493,7 +498,6 @@ bricks.UiText =class extends bricks.UiType {
e.id = e.name = this.opts.name; e.id = e.name = this.opts.name;
e.rows = this.opts.rows || 5; e.rows = this.opts.rows || 5;
e.cols = this.opts.cols || 40; e.cols = this.opts.cols || 40;
// this.setValue(this.opts.value || this.opts.defaultvalue || '');
this.reset(); this.reset();
this.bind('input', this.set_value_from_input.bind(this)) this.bind('input', this.set_value_from_input.bind(this))
} }
@ -537,6 +541,8 @@ bricks.UiCode =class extends bricks.UiType {
*/ */
static uitype='code'; static uitype='code';
constructor(opts){ constructor(opts){
opts.cfontsize = opts.cfontsize||1;
opts.dynsize = opts.dynsize || true;
super(opts); super(opts);
this.data = this.opts.data; this.data = this.opts.data;
this.build(); this.build();
@ -590,8 +596,7 @@ bricks.UiCode =class extends bricks.UiType {
this.sizable_elements.push(o); this.sizable_elements.push(o);
} }
this.bind('input', this.set_value_from_input.bind(this)) this.bind('input', this.set_value_from_input.bind(this))
this.sizable(); this.charsize_sizing();
this.set_fontsize();
} }
set_value_from_input(event){ set_value_from_input(event){
this.value = this.dom_element.value; this.value = this.dom_element.value;

1
bricks/layout.js
View File

@ -2,7 +2,6 @@ var bricks = window.bricks || {};
bricks.Layout = class extends bricks.JsWidget { bricks.Layout = class extends bricks.JsWidget {
constructor(options){ constructor(options){
super(options); super(options);
this.hasSubwidgets = true;
this._container = true; this._container = true;
this.children = []; this.children = [];
} }

17
bricks/utils.js
View File

@ -322,3 +322,20 @@ bricks.widgetBuildWithData = async function(desc_tmpl, from_widget, data){
w.row_data = data; w.row_data = data;
return w; return w;
} }
bricks.Observable = class {
constructor(owner, name, v){
this.owner = owner;
this.name = name;
this.value = v;
}
set(v){
if (this.value != v){
this.owner.dispatch(this.name, v);
}
this.value = v;
}
get(){
return this.v;
}
}

99
bricks/widget.js
View File

@ -5,7 +5,6 @@ bricks.JsWidget = class {
if (!options){ if (!options){
options = {} options = {}
} }
this.hasSubwidgets = false;
this.baseURI = options.baseURI; this.baseURI = options.baseURI;
this.opts = options; this.opts = options;
this.create(); this.create();
@ -25,7 +24,13 @@ bricks.JsWidget = class {
} }
} }
create(){ create(){
this.dom_element = document.createElement('div'); this.dom_element = this._create('div')
}
_create(tagname){
return document.createElement(tagname);
}
observable(name, value){
return new bricks.Observable(this, name, value);
} }
disabled(flag){ disabled(flag){
if(flag){ if(flag){
@ -37,6 +42,7 @@ bricks.JsWidget = class {
opts_set_style(){ opts_set_style(){
var keys = [ var keys = [
"width", "width",
"dynsize",
"x", "x",
"y", "y",
"height", "height",
@ -48,7 +54,7 @@ bricks.JsWidget = class {
"overflowX", "overflowX",
"overflow", "overflow",
"color" "color"
] ];
var mapping_keys = { var mapping_keys = {
"z-index":"zIndex", "z-index":"zIndex",
"overflow-x":"overflowX", "overflow-x":"overflowX",
@ -68,44 +74,41 @@ bricks.JsWidget = class {
} }
this[okeys[k]] = this.opts[okeys[k]]; this[okeys[k]] = this.opts[okeys[k]];
} }
if (this.opts.cwidth){
this.width = bricks.app.charsize * this.opts.cwidth;
style.width = this.width;
}
if (this.opts.cheight){
this.height = bricks.app.charsize * this.opts.cheight;
style.height = this.height;
}
if (this.opts.dynsize){
bricks.app.bind('charsize', this.charsize_sizing.bind(this))
}
bricks.extend(this.dom_element.style, style); bricks.extend(this.dom_element.style, style);
if (this.opts.css){ if (this.opts.css){
this.set_css(this.opts.css); this.set_css(this.opts.css);
} }
} }
sizable(){ charsize_sizing(){
bricks.app.text_ref(this); var cs = bricks.app.charsize;
} var r = this.rate || 1;
change_fontsize(ts){ if (this.cwidth){
ts = convert2int(ts); this.set_style('width', this.cwidth * cs * r + 'px');
if (! this.specified_fontsize){ }
var rate = this.rate || 1; if (this.cheight){
ts = ts * rate; this.set_style('height', this.cheight * cs * r + 'px');
ts = ts + 'px'; }
this.dom_element.style.fontSize = ts; if (this.cfontsize){
for(var i=0;i<this.sizable_elements.length;i++){ this.dom_element.style.fontSize = this.cfontsize * cs * r + 'px';
this.sizable_elements[i].style.fontSize = ts; if (this.sizable_elements){
for (var i=0;i<this.sizable_elements.length;i++){
var e = this.sizable_elements[i];
e.style.fontSize = this.cfontsize * cs * r + 'px';
}
} }
} }
} }
set_fontsize(){
var fontsize;
if (this.opts.fontsize){
this.specified_fontsize = true;
fontsize = this.opts.fontsize;
} else {
fontsize = bricks.app.get_textsize(this.ctype);
}
fontsize = convert2int(fontsize);
var rate = this.rate || 1;
fontsize = rate * fontsize;
fontsize = fontsize + 'px';
this.dom_element.style.fontSize = fontsize;
for(var i=0;i<this.sizable_elements.length;i++){
this.sizable_elements[i].style.fontSize = fontsize;
}
}
h_center(){ h_center(){
this.dom_element.style.marginLeft = 'auto'; this.dom_element.style.marginLeft = 'auto';
this.dom_element.style.marginRight = 'auto'; this.dom_element.style.marginRight = 'auto';
@ -161,10 +164,8 @@ bricks.JsWidget = class {
is_container(){ is_container(){
return this._container; return this._container;
} }
_create(tagname){
return document.createElement(tagname);
}
set_id(id){ set_id(id){
this.id = id;
this.dom_element.id = id; this.dom_element.id = id;
} }
set_baseURI(url){ set_baseURI(url){
@ -222,7 +223,9 @@ bricks.TextBase = class extends bricks.JsWidget {
this.specified_fontsize = false; this.specified_fontsize = false;
this.set_attrs(); this.set_attrs();
this.dom_element.style.fontWeight = 'normal'; this.dom_element.style.fontWeight = 'normal';
this.sizable(); if (self.i18n){
bricks.app.bind('lang', this.set_i18n_text.bind(this));
}
} }
set_attrs(){ set_attrs(){
if (this.opts.hasOwnProperty('text')){ if (this.opts.hasOwnProperty('text')){
@ -259,8 +262,8 @@ bricks.TextBase = class extends bricks.JsWidget {
bricks.Text = class extends bricks.TextBase { bricks.Text = class extends bricks.TextBase {
constructor(opts){ constructor(opts){
super(opts); super(opts);
this.ctype = 'text'; this.cfontsize = 1;
this.set_fontsize(); this.charsize_sizing();
} }
} }
@ -268,8 +271,9 @@ bricks.Title1 = class extends bricks.TextBase {
constructor(options){ constructor(options){
super(options); super(options);
this.ctype = 'title1'; this.ctype = 'title1';
this.set_fontsize();
this.dom_element.style.fontWeight = 'bold'; this.dom_element.style.fontWeight = 'bold';
this.cfontsize = 1.96;
this.charsize_sizing();
} }
} }
@ -277,8 +281,9 @@ bricks.Title2 = class extends bricks.TextBase {
constructor(options){ constructor(options){
super(options); super(options);
this.ctype = 'title2'; this.ctype = 'title2';
this.set_fontsize();
this.dom_element.style.fontWeight = 'bold'; this.dom_element.style.fontWeight = 'bold';
this.cfontsize = 1.80;
this.charsize_sizing();
} }
} }
@ -286,8 +291,9 @@ bricks.Title3 = class extends bricks.TextBase {
constructor(options){ constructor(options){
super(options); super(options);
this.ctype = 'title3'; this.ctype = 'title3';
this.set_fontsize();
this.dom_element.style.fontWeight = 'bold'; this.dom_element.style.fontWeight = 'bold';
this.cfontsize = 1.64;
this.charsize_sizing();
} }
} }
@ -295,8 +301,9 @@ bricks.Title4 = class extends bricks.TextBase {
constructor(options){ constructor(options){
super(options); super(options);
this.ctype = 'title4'; this.ctype = 'title4';
this.set_fontsize();
this.dom_element.style.fontWeight = 'bold'; this.dom_element.style.fontWeight = 'bold';
this.cfontsize = 1.48;
this.charsize_sizing();
} }
} }
@ -304,8 +311,9 @@ bricks.Title5 = class extends bricks.TextBase {
constructor(options){ constructor(options){
super(options); super(options);
this.ctype = 'title5'; this.ctype = 'title5';
this.set_fontsize();
this.dom_element.style.fontWeight = 'bold'; this.dom_element.style.fontWeight = 'bold';
this.cfontsize = 1.32;
this.charsize_sizing();
} }
} }
@ -313,8 +321,9 @@ bricks.Title6 = class extends bricks.TextBase {
constructor(options){ constructor(options){
super(options); super(options);
this.ctype = 'title6'; this.ctype = 'title6';
this.set_fontsize();
this.dom_element.style.fontWeight = 'bold'; this.dom_element.style.fontWeight = 'bold';
this.cfontsize = 1.16;
this.charsize_sizing();
} }
} }

7
examples/text.ui
View File

@ -8,6 +8,7 @@
"widgettype":"Title1", "widgettype":"Title1",
"options":{ "options":{
"text":"Pic Viewer", "text":"Pic Viewer",
"dynsize":true,
"i18n":true "i18n":true
} }
}, },
@ -15,6 +16,7 @@
"widgettype":"Title2", "widgettype":"Title2",
"options":{ "options":{
"text":"Pic Viewer", "text":"Pic Viewer",
"dynsize":true,
"i18n":true "i18n":true
} }
}, },
@ -22,6 +24,7 @@
"widgettype":"Title3", "widgettype":"Title3",
"options":{ "options":{
"text":"Pic Viewer", "text":"Pic Viewer",
"dynsize":true,
"i18n":true "i18n":true
} }
}, },
@ -29,6 +32,7 @@
"widgettype":"Title4", "widgettype":"Title4",
"options":{ "options":{
"text":"Pic Viewer", "text":"Pic Viewer",
"dynsize":true,
"i18n":true "i18n":true
} }
}, },
@ -36,6 +40,7 @@
"widgettype":"Title5", "widgettype":"Title5",
"options":{ "options":{
"text":"Pic Viewer", "text":"Pic Viewer",
"dynsize":true,
"i18n":true "i18n":true
} }
}, },
@ -43,6 +48,7 @@
"widgettype":"Title6", "widgettype":"Title6",
"options":{ "options":{
"text":"Pic Viewer", "text":"Pic Viewer",
"dynsize":true,
"i18n":true "i18n":true
} }
}, },
@ -50,6 +56,7 @@
"widgettype":"Text", "widgettype":"Text",
"options":{ "options":{
"text":"Pic Viewer", "text":"Pic Viewer",
"dynsize":true,
"i18n":true "i18n":true
} }
}, },