This commit is contained in:
yumoqing 2024-03-12 18:44:43 +08:00
parent dccda98cec
commit e5bb2082d8
2 changed files with 142 additions and 0 deletions

53
bricks/dynamiccolumn.js Normal file
View File

@ -0,0 +1,53 @@
var bricks = window.bricks || {};
bricks.DynamicColumn = class extends bricks.Layout {
/*
{
mobile_cols:
col_cwidth:
col_cgap:
col_width:
}
*/
constructor(opts){
if (! opts.col_cwidth){
if(! opts.col_width){
opts.col_cwidth = 20;
}
}
opts.col_cgap = opts.col_cgap || 0.5;
opts.mobile_cols = opts.mobile_cols|| 1;
super(opts);
this.set_style('display', 'grid');
this.set_column_width();
this.bind('resize', this.set_column_width.bind(this));
if (this.cwidth){
bricks.app.bind('charsize', this.set_column_width.bind(this));
}
}
set_column_width(){
bricks.debug('set_column_width() called ....');
var cw;
var cols;
var gap;
var width = this.get_width();
if (this.col_cwidth){
cw = bricks.app.charsize * this.col_cwidth;
} else {
cw = this.col_width;
}
gap = bricks.app.charsize * this.col_cgap;
if (width > 0){
if (bricks.is_mobile()){
if (width < this.get_height()){
cw = (width - (cols - 1) * gap) / this.mobile_cols;
alert('here: width=' + width + ' height=' + this.get_height())
}
}
cols = Math.floor(width/cw);
cw = (width - (cols - 1) * gap) / cols;
}
this.dom_element.style.gridTemplateColumns = "repeat(auto-fill, minmax(" + cw + "px, 1fr))";
this.set_style('gap', gap + 'px');
}
}

View File

@ -0,0 +1,89 @@
var bricks = window.bricks || {};
bricks.PageDataLoader = class {
/*
options:
{
"url":
"cache_pages":
"pagerows":
"method":
"params":
}
usage:
var p = new PageDataLoader({...});
p.loadData(); // return page(1) data
p.nextPage()
p.previousPage()
*/
constructor(options){
this.data_url = options.url;
this.base_params = options.params || {};
this.rows = options.pagerows || 80;
this.cache_pages = options.cache_pages || 5;
this.method = options.method || 'GET';
this.pages = [];
}
async loadData(params){
params = params || {};
this.pages = [];
var _params = bricks.extend({}, this.base_params);
this.params = bricks.extend(_params, params);
return await this.loadPage(1);
}
is_max_page(p){
return p == Math.max(...this.pages);
}
async loadNextPage(){
var page = Math.max(...this.pages) + 1;
if (page < this.lastPage){
var d = await this.loadPage(page);
var p = this.pages.length - 1;
d.pos_rate = p / this.pages.length;
return d;
}
}
async loadPreviousPage(){
var page = Math.min(...this.pages) - 1;
if (page > 0){
var d = await this.loadPage(page);
d.pos_rate = 1 / this.pages.length;
return d;
}
}
async loadPage(page) {
if (this.pages.indexOf(page) == -1) {
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.data_url,{params:params});
if (!d){
bricks.debug(this.data_url,{params:params}, 'error');
this.loading = false;
return;
}
this.lastPage = Math.ceil(d.total / this.rows);
d.last_page = this.lastPage;
this.pages.push(page);
d.add_page = page;
// 检查缓存是否已满
if (this.pages.length > this.cache_pages) {
// 删除当前页最远的一页
var max, min;
max = Math.max(...this.pages);
min = Math.min(...this.pages);
const farthestPage = page == max? min : max;
var idx = this.pages.indexOf(farthestPage);
this.pages.splice(idx, 1);
d.delete_page = farthestPage;
}
return d;
} else {
bricks.debug(page, 'already n buffer, do not thing');
}
return;
}
}