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 @@ + + + + + +