From 81a82f46df3f3d9a349fe2bd43c40bfcec8556b4 Mon Sep 17 00:00:00 2001 From: yumoqing Date: Mon, 26 Feb 2024 18:22:18 +0800 Subject: [PATCH] bugfix --- bricks/bricksNS.js | 0 bricks/bricksend.js | 1 + bricks/build.sh | 2 +- bricks/collapseaccordion.js | 0 bricks/css/bricks.css | 2 - bricks/datagridaccordion.js | 51 ++ bricks/dynamicaccordion.js | 239 +++++ bricks/form.js | 16 +- bricks/header.tmpl | 6 + bricks/iframe.js | 12 + bricks/image.js | 18 +- bricks/layout.js | 6 +- bricks/scroll.js | 4 +- bricks/video.js | 36 +- examples/.channels.ui.swp | Bin 0 -> 12288 bytes examples/channels.dspy | 10 + examples/channels.ui | 64 ++ examples/dynamicaccordion.ui | 40 + examples/footer.ui | 6 + examples/iframe.ui | 8 + examples/scroll.json | 1599 +++++++++++++++++++++++++++++++++- examples/scroll.ui | 28 +- examples/t.ui | 33 + examples/tree_t.ui | 35 + examples/video.ui | 4 +- 25 files changed, 2180 insertions(+), 40 deletions(-) create mode 100644 bricks/bricksNS.js create mode 100644 bricks/bricksend.js create mode 100644 bricks/collapseaccordion.js create mode 100644 bricks/datagridaccordion.js create mode 100644 bricks/dynamicaccordion.js create mode 100644 bricks/iframe.js create mode 100644 examples/.channels.ui.swp create mode 100644 examples/channels.dspy create mode 100644 examples/channels.ui create mode 100644 examples/dynamicaccordion.ui create mode 100644 examples/footer.ui create mode 100644 examples/iframe.ui create mode 100644 examples/t.ui create mode 100644 examples/tree_t.ui diff --git a/bricks/bricksNS.js b/bricks/bricksNS.js new file mode 100644 index 0000000..e69de29 diff --git a/bricks/bricksend.js b/bricks/bricksend.js new file mode 100644 index 0000000..5c34318 --- /dev/null +++ b/bricks/bricksend.js @@ -0,0 +1 @@ +} diff --git a/bricks/build.sh b/bricks/build.sh index 657aa20..8077192 100755 --- a/bricks/build.sh +++ b/bricks/build.sh @@ -4,7 +4,7 @@ SOURCES=" factory.js uitypesdef.js utils.js i18n.js widget.js \ markdown_viewer.js video.js audio.js toolbar.js tab.js \ input.js registerfunction.js button.js accordion.js \ tree.js multiple_state_image.js form.js message.js \ - paging.js datagrid.js dataviewer.js \ + paging.js datagrid.js dataviewer.js iframe.js \ miniform.js wterm.js dynamicaccordion.js " echo ${SOURCES} cat ${SOURCES} > ../dist/bricks.js diff --git a/bricks/collapseaccordion.js b/bricks/collapseaccordion.js new file mode 100644 index 0000000..e69de29 diff --git a/bricks/css/bricks.css b/bricks/css/bricks.css index ad0dce2..c0f9c2f 100755 --- a/bricks/css/bricks.css +++ b/bricks/css/bricks.css @@ -68,7 +68,6 @@ body { .vcontainer { display: flex; flex-direction: column; - // overflow:auto; } .vbox { @@ -79,7 +78,6 @@ body { .hcontainer { display: flex; flex-direction: row; - // overflow:auto; } .hbox { diff --git a/bricks/datagridaccordion.js b/bricks/datagridaccordion.js new file mode 100644 index 0000000..4da8082 --- /dev/null +++ b/bricks/datagridaccordion.js @@ -0,0 +1,51 @@ +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(); + + } +} diff --git a/bricks/dynamicaccordion.js b/bricks/dynamicaccordion.js new file mode 100644 index 0000000..b09de7a --- /dev/null +++ b/bricks/dynamicaccordion.js @@ -0,0 +1,239 @@ +var bricks = window.bricks || {}; +bricks.PageContent = class extends bricks.Layout { + constructor(opts){ + super(opts); + } +} + +bricks.AccordionItem = class extends bricks.Layout { + constructor(opts){ + super(opts); + this.set_css('accordion-item'); + } +} + +bricks.AccordionHeader = class extends bricks.Layout { + constructor(opts){ + super(opts); + this.set_css('accordion-item-header'); + } +} + +bricks.DynamicAccordion = class extends bricks.VScrollPanel { + /* + { + "title": + "description", + "data_url", + "content_url" + "content_view" + "cache_limit", + "page_rows", + "header": + "record_view" + "record_show_field": + } + */ + constructor(opts){ + super(opts); + this.set_css("accordion"); + this.element = this.dom_element; + this.dataUrl = this.opts.data_url; + this.base_params = opts.params || {}; + this.rows = parseInt(this.opts.page_rows); + this.lastPage = null; + this.contentUrl = this.opts.content_url; + this.pages = new Map(); // 用于存储已加载的页面数据 + this.pageContents = new Map(); // 用于存储已加载的页面内容 + this.active_content = null; + this.loading = false; + this.cacheLimit = this.opts.cache_limit; + if (this.opts.content_view){ + this.content_view_tmpl = JSON.stringify(this.opts.content_view); + } + if (this.opts.record_view){ + this.record_view_tmpl = JSON.stringify(this.opts.record_view); + } + this.bind('min_threshold', this.load_previous_page.bind(this)); + this.bind('max_threshold', this.load_next_page.bind(this)); + this.render(); + } + + render(params) { + this.clear_widgets(); + this.pages = new Map(); // 用于存储已加载的页面数据 + this.pageContents = new Map(); // 用于存储已加载的页面内容 + params = params || {}; + this.params = bricks.extend(this.base_params, params); + this.loadPage(1); + } + + async loadPage(page) { + if (this.loading){ + return; + } + this.loading = true; + // 检查页面是否在缓存中 + if (! this.pages.has(page)) { + var jc = new bricks.HttpJson(); + var params = bricks.extend({}, this.params); + params = bricks.extend(params,{ + page:page, + rows:this.rows + }); + var d = await jc.get(this.dataUrl,{params:params}); + if (!d){ + console.log(this.dataUrl,{params:params}, 'error'); + this.loading = false; + return; + } + var data = d.rows; + this.lastPage = Math.ceil(d.total / this.rows); + this.pages.set(page, data); // 将数据缓存起来 + await this.renderAccordionItems(data, page); + // 检查缓存是否已满 + if (this.pages.size > this.cacheLimit) { + // 删除当前页最远的一页 + var max, min; + var pages = Array.from(this.pages.keys()); + max = Math.max(...pages); + min = Math.min(...pages); + const farthestPage = page == max? min : max; + var w = this.pageContents.get(farthestPage); + this.remove_widget(w); + this.pages.delete(farthestPage); + this.pageContents.delete(farthestPage); + } + var pages = Array.from(this.pages.keys()); + if (page == Math.min(pages)){ + this.scrollY = 1 / pages.length; + if (this.scrollY == 1){ + this.scrollY = 0; + } + } else { + this.scrollY = (pages.length - 1) / pages.length; + } + } + this.loading = false; + return; + } + async renderAccordionItems(data, page) { + + const pageContent = new bricks.PageContent({height:"auto"}); + pageContent.page = page; + + for (var i=0;i 0){ + await this.loadPage(page); + console.log('page loaded, page=', page); + } else { + var pages = Array.from(this.pages.keys()); + console.log('page NOT loaded, page=', page, + 'lastPage=', this.lastPage, + 'rows=', this.rows, + 'cacheLimit=', this.cacheLimit, + 'buffered page=', pages.length); + } + } + async load_next_page(){ + var pages = Array.from(this.pages.keys()); + var page = this.get_load_page('down'); + if (page <= this.lastPage){ + await this.loadPage(page); + console.log('page Loaded, page=', page); + } else { + console.log('page=', page, + 'lastPage=', this.lastPage, + 'rows=', this.rows, + 'cacheLimit=', this.cacheLimit, + 'buffered page=', pages); + } + } +} +bricks.Factory.register('DynamicAccordion', bricks.DynamicAccordion); diff --git a/bricks/form.js b/bricks/form.js index e919f6d..dcbf307 100644 --- a/bricks/form.js +++ b/bricks/form.js @@ -21,9 +21,9 @@ bricks.FormBody = class extends bricks.VBox { opts.width = '100%'; opts.scrollY = 'scroll'; super(opts); - console.log('dxcygvuhbijnokmpl,;lmknjbhvgcfx'); this.name_inputs = {}; this.form_body = new bricks.Layout({width:'100%', + height:"100%", overflow:'auto' }); this.add_widget(this.form_body); @@ -129,13 +129,6 @@ bricks.Form = class extends bricks.VBox { */ constructor(opts){ super(opts); - if (this.opts.title){ - var t = new bricks.Title3({ - otext:this.opts.title, - height:'auto', - i18n:true}); - this.add_widget(t); - } if (this.opts.description){ var d = new bricks.Text({ otext:this.opts.description, @@ -147,6 +140,13 @@ bricks.Form = class extends bricks.VBox { this.add_widget(this.body); if (! opts.notoolbar) this.build_toolbar(this); + if (this.opts.title){ + var t = new bricks.Title3({ + otext:this.opts.title, + height:'auto', + i18n:true}); + this.add_widget(t, 0); + } } build_toolbar(widget){ var box = new bricks.HBox({height:'auto', width:'100%'}); diff --git a/bricks/header.tmpl b/bricks/header.tmpl index 5675137..a6717ae 100644 --- a/bricks/header.tmpl +++ b/bricks/header.tmpl @@ -5,12 +5,18 @@ + + + + + +