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-11 15:22:03 +08:00
parent 278a520138
commit c1220be5bd
3 changed files with 279 additions and 161 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
bricks/build.sh
View File

@ -1,5 +1,5 @@
SOURCES=" factory.js uitypesdef.js utils.js i18n.js widget.js \
layout.js bricks.js image.js \
SOURCES=" page_data_loader.js factory.js uitypesdef.js utils.js \
i18n.js widget.js layout.js bricks.js image.js \
jsoncall.js myoperator.js scroll.js menu.js modal.js \
markdown_viewer.js video.js audio.js toolbar.js tab.js \
input.js registerfunction.js button.js accordion.js \

291
bricks/dataviewer.js
View File

@ -2,70 +2,257 @@ var bricks = window.bricks || {};
bricks.DataViewer = class extends bricks.VScrollPanel {
/*
opts={
dataurl:
pagerows:
params:
buffer_page:
viewer_url: or
viewer_tmpl:
}
{
"title":
"description",
"data_url",
"mobile_cols":
"content_view"
"has_content",
"content_toggle_field"
"cache_page_limit",
"page_rows",
"header":
"record_view"
}
*/
constructor(opts){
opts.width = '100%';
super(opts);
this.loader = new bricks.BufferedDataLoader(this, {
pagerows: opts.pagerows || 80,
buffer_pages: opts.buffer_pages || 5,
url: opts.dataurl,
method: opts.method || 'GET',
params: opts.params
});
this.set_css('multicolumns');
this.bind('min_threshold',
this.loader.previousPage.bind(this.loader))
this.bind('max_threshold',
this.loader.nextPage.bind(this.loader))
if (opts.viewer_tmpl){
this.viewer_tmpl = opts.viewer_tmpl;
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.cachePageLimit = this.opts.cache_page_limit;
if (this.opts.content_view){
this.content_view_tmpl = JSON.stringify(this.opts.content_view);
}
if (opts.viewer_url){
this.get_tmpl_string();
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.oldscrollY = null;
this.render();
}
loadData(params){
this.loader.loadData(params)
create_container(){
this.container = new Filler();
}
get_tmpl_string(){
fetch(this.opts.viewer_url)
.then(response => response.text())
.then(data => {
bricks.debug('viewer_tmpl=', data);
this.viewer_tmpl = data
schedule_once(this.loader.loadData.bind(this.loader), 0.01);
});
}
clear_data(){
render(params) {
bricks.debug('params=', params, 'render() called');
this.clear_widgets();
this.pages = new Map(); // 用于存储已加载的页面数据
this.pageContents = new Map(); // 用于存储已加载的页面内容
params = params || {};
this.params = bricks.extend(this.base_params, params);
this.loadPage(1);
this.dom_element.scrollTop = 0;
}
add_rows = async function(rows, direction){
for (var i=0;i<rows.length;i++){
await this.add_row(rows[i], direction);
async loadPage(page) {
// 检查页面是否在缓存中
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){
bricks.debug(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.cachePageLimit) {
// 删除当前页最远的一页
var max, min;
var pages = Array.from(this.pages.keys());
max = Math.max(...pages);
min = Math.min(...pages);
const farthestPage = page == max? min : max;
this.delete_page(farthestPage);
this.pages.delete(farthestPage);
}
} else {
bricks.debug(page, 'already n buffer, do not thing');
}
return;
}
is_max_page(page){
const pages = Array.from(this.pages.keys());
return page == Math.max(...pages);
}
is_min_page(page){
const pages = Array.from(this.pages.keys());
return page == Math.min(...pages);
}
async renderRecords(data, page) {
var pos;
for (var i=0;i<data.length;i++){
if (this.is_max_page(page)){
pos = -1;
} else {
pos = i;
}
const record = data[i];
const item = new bricks.AccordionItem({});
const header = new bricks.AccordionHeader({});
if (this.opts.record_view){
var w;
w = await bricks.widgetBuildWithData(this.record_view_tmpl,
header, record);
if (w){
header.add_widget(w);
} else {
bricks.debug('bricks.widgetBuildWithData(), tmpl=', this.record_view_tmpl, 'record=', record);
}
}
header.textContent = record.title; // 使用数据记录的标题字段
var content = new bricks.VBox({
height:'auto',
display:'none'
});
content.set_css('accordion-item-content');
content.hide();
header.bind('click', this.toggle_content.bind(this, header, content, record));
item.add_widget(header);
item.add_widget(content);
item.set_attribute('data-page', page);
this.add_widget(item, pos);
if (pos >= 0){
this.dom_element.scrollTop += item.get_height();
} else {
this.dom_element.scrollTop -= item.get_height();
}
};
}
delete_page(page){
var items = this.dom_element.querySelectorAll('[data-page="' + page + '"]');
for (var i=0;i<items.length;i++) {
var w = items[i].bricks_widget;
this.remove_widget(w);
}
}
add_row = async function(row, direction){
var s = bricks.obj_fmtstr(row, this.viewer_tmpl);
var desc = JSON.parse(s);
var w = await bricks.widgetBuild(desc, this);
if (! w){
bricks.debug(desc, 'widgetBuild() failed...........');
async toggle_content(header, content, record, event){
var h = this.dom_element.offsetHeight - 3 * header.dom_element.offsetHeight;
content.set_style('height', h + 'px');
if (this.active_content){
if (this.active_content != content){
this.active_content.clear_widgets();
this.active_content.hide();
this.active_content = null;
}
}
content.toggle_hide();
if (content.dom_element.style.display == 'none'){
bricks.debug('content just collapsed');
content.clear_widgets();
this.active_content = null;
return;
}
w.row_data = row;
var index = null;
if (direction == 'down') index = 0;
bricks.debug('w=', w, 'this=', this);
this.add_widget(w, index);
var jc = new bricks.HttpJson();
var w;
if (this.content_view_tmpl){
w = await bricks.widgetBuildWithData(this.content_view_tmpl,
content, record);
} else if (this.contentUrl){
var url = this.contentUrl;
var params = {
'id':record.id
}
var desc = await jc.get(url, {params:params});
w = await bricks.widgetBuild(desc, content);
}
if (w){
content.add_widget(w);
this.active_content = content;
} else {
this.active_content = null;
content.hide();
}
}
get_load_page(dir){
var pages = Array.from(this.pages.keys());
if (pages.length == 0){
return 1;
}
if (dir=='up'){
var page = Math.min(...pages);
bricks.debug('page=', page, pages, 'dir=', dir);
return page - 1;
} else {
var page = Math.max(...pages);
bricks.debug('page=', page, pages, 'dir=', dir);
return page + 1;
}
}
async load_previous_page(){
if (this.loading){
bricks.debug('this.loading is set, do not thing');
return;
}
this.loading = true;
try {
var page = this.get_load_page('up');
if (page > 0){
await this.loadPage(page);
var pages = Array.from(this.pages.keys());
bricks.debug('load_previous_page():page loaded, page=', page, pages);
} else {
var pages = Array.from(this.pages.keys());
bricks.debug('page NOT loaded, page=', page,
'lastPage=', this.lastPage,
'rows=', this.rows,
'cachePageLimit=', this.cachePageLimit,
'buffered page=', pages.length);
}
} catch(e){
bricks.debug('error happened', e);
}
this.loading = false;
}
async load_next_page(){
if (this.loading){
bricks.debug('this.loading is set, do not thing');
return;
}
this.loading = true;
try {
var page = this.get_load_page('down');
if (page <= this.lastPage){
await this.loadPage(page);
var pages = Array.from(this.pages.keys());
bricks.debug('load_next_page():page Loaded, page=', page, pages);
} else {
var pages = Array.from(this.pages.keys());
bricks.debug('page=', page,
'lastPage=', this.lastPage,
'rows=', this.rows,
'cachePageLimit=', this.cachePageLimit,
'buffered page=', pages);
}
} catch (e){
bricks.debug('error happened', e);
}
this.loading = false;
bricks.debug('load_next_page() finished');
}
}
bricks.Factory.register('DataViewer', bricks.DataViewer);
bricks.Factory.register('DynamicAccordion', bricks.DynamicAccordion);

145
bricks/dynamicaccordion.js
View File

@ -25,6 +25,7 @@ bricks.DynamicAccordion = class extends bricks.VScrollPanel {
"title":
"description",
"data_url",
"data_method",
"content_url"
"content_view"
"cache_limit",
@ -38,16 +39,16 @@ bricks.DynamicAccordion = class extends bricks.VScrollPanel {
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.loader = new bricks.PageDataLoader({
url:this.opts.data_url,
params:this.opts.data_params,
pagerows:this.opts.page_rows,
method:this.opts.data_method,
cache_pages:this.opts.cache_limit
});
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);
}
@ -56,70 +57,32 @@ bricks.DynamicAccordion = class extends bricks.VScrollPanel {
}
this.bind('min_threshold', this.load_previous_page.bind(this));
this.bind('max_threshold', this.load_next_page.bind(this));
this.oldscrollY = null;
this.render();
schedule_once(this.render.bind(this), 0.1);
}
render(params) {
bricks.debug('params=', params, 'render() called');
this.clear_widgets();
this.pages = new Map(); // 用于存储已加载的页面数据
this.pageContents = new Map(); // 用于存储已加载的页面内容
async render(params) {
params = params || {};
this.params = bricks.extend(this.base_params, params);
this.loadPage(1);
this.dom_element.scrollTop = 0;
}
async loadPage(page) {
// 检查页面是否在缓存中
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){
bricks.debug(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;
this.delete_page(farthestPage);
this.pages.delete(farthestPage);
}
bricks.debug('params=', params, 'render() called');
var d = await this.loader.loadData(params);
if (d){
this.clear_widgets();
await this.dataHandle(d);
} else {
bricks.debug(page, 'already n buffer, do not thing');
bricks.debug(params, 'load data return null');
}
return;
}
is_max_page(page){
const pages = Array.from(this.pages.keys());
return page == Math.max(...pages);
}
is_min_page(page){
const pages = Array.from(this.pages.keys());
return page == Math.min(...pages);
async dataHandle(d){
var data = d.rows;
var page = d.add_page;
await this.renderAccordionItems(data, page);
if (d.delete_page){
this.delete_page(d.delete_page);
}
}
async renderAccordionItems(data, page) {
var pos;
for (var i=0;i<data.length;i++){
if (this.is_max_page(page)){
if (this.loader.is_max_page(page)){
pos = -1;
} else {
pos = i;
@ -137,7 +100,6 @@ bricks.DynamicAccordion = class extends bricks.VScrollPanel {
bricks.debug('bricks.widgetBuildWithData(), tmpl=', this.record_view_tmpl, 'record=', record);
}
}
header.textContent = record.title; // 使用数据记录的标题字段
var content = new bricks.VBox({
height:'auto',
display:'none'
@ -149,11 +111,6 @@ bricks.DynamicAccordion = class extends bricks.VScrollPanel {
item.add_widget(content);
item.set_attribute('data-page', page);
this.add_widget(item, pos);
if (pos >= 0){
this.dom_element.scrollTop += item.get_height();
} else {
this.dom_element.scrollTop -= item.get_height();
}
};
}
delete_page(page){
@ -163,7 +120,6 @@ bricks.DynamicAccordion = class extends bricks.VScrollPanel {
this.remove_widget(w);
}
}
async toggle_content(header, content, record, event){
var h = this.dom_element.offsetHeight - 3 * header.dom_element.offsetHeight;
content.set_style('height', h + 'px');
@ -203,21 +159,6 @@ bricks.DynamicAccordion = class extends bricks.VScrollPanel {
content.hide();
}
}
get_load_page(dir){
var pages = Array.from(this.pages.keys());
if (pages.length == 0){
return 1;
}
if (dir=='up'){
var page = Math.min(...pages);
bricks.debug('page=', page, pages, 'dir=', dir);
return page - 1;
} else {
var page = Math.max(...pages);
bricks.debug('page=', page, pages, 'dir=', dir);
return page + 1;
}
}
async load_previous_page(){
if (this.loading){
bricks.debug('this.loading is set, do not thing');
@ -225,21 +166,16 @@ bricks.DynamicAccordion = class extends bricks.VScrollPanel {
}
this.loading = true;
try {
var page = this.get_load_page('up');
if (page > 0){
await this.loadPage(page);
var pages = Array.from(this.pages.keys());
bricks.debug('load_previous_page():page loaded, page=', page, pages);
var d = await this.loader.loadPreviousPage();
if (d){
this.dataHandle(d);
var total = this.dom_element.scrollHeight - this.dom_element.clientHeight;
this.dom_element.scrollTop = d.pos_rate * total;
} else {
var pages = Array.from(this.pages.keys());
bricks.debug('page NOT loaded, page=', page,
'lastPage=', this.lastPage,
'rows=', this.rows,
'cacheLimit=', this.cacheLimit,
'buffered page=', pages.length);
bricks.debug(this.loader, 'load previous page error');
}
} catch(e){
bricks.debug('error happened', e);
} catch (e) {
bricks.debug('e=', e);
}
this.loading = false;
}
@ -250,18 +186,13 @@ bricks.DynamicAccordion = class extends bricks.VScrollPanel {
}
this.loading = true;
try {
var page = this.get_load_page('down');
if (page <= this.lastPage){
await this.loadPage(page);
var pages = Array.from(this.pages.keys());
bricks.debug('load_next_page():page Loaded, page=', page, pages);
var d = await this.loader.loadNextPage();
if (d){
this.dataHandle(d);
var total = this.dom_element.scrollHeight - this.dom_element.clientHeight;
this.dom_element.scrollTop = d.pos_rate * total;
} else {
var pages = Array.from(this.pages.keys());
bricks.debug('page=', page,
'lastPage=', this.lastPage,
'rows=', this.rows,
'cacheLimit=', this.cacheLimit,
'buffered page=', pages);
bricks.debug(this.loader, 'load next page error');
}
} catch (e){
bricks.debug('error happened', e);