fix: ResourceBrowser tree_width method collides with option name (rename to get_tree_width)
This commit is contained in:
p
parent
8b4b9390a8
commit
71dae6ecfe
@ -13,7 +13,7 @@ SOURCES=" page_data_loader.js factory.js uitypesdef.js utils.js uitype.js \
|
|||||||
line.js pie.js bar.js gobang.js period.js iconbarpage.js \
|
line.js pie.js bar.js gobang.js period.js iconbarpage.js \
|
||||||
keypress.js asr.js webspeech.js countdown.js progressbar.js \
|
keypress.js asr.js webspeech.js countdown.js progressbar.js \
|
||||||
qaframe.js svg.js videoplayer.js scatter.js radar.js kline.js \
|
qaframe.js svg.js videoplayer.js scatter.js radar.js kline.js \
|
||||||
heatmap.js map.js qr.js textfiles.js agent_input.js agent.js api_doc.js flipcard.js carousel.js draggable.js "
|
heatmap.js map.js qr.js textfiles.js agent_input.js agent.js api_doc.js flipcard.js carousel.js draggable.js resourcebrowser.js "
|
||||||
echo ${SOURCES}
|
echo ${SOURCES}
|
||||||
cat ${SOURCES} > ../dist/bricks.js
|
cat ${SOURCES} > ../dist/bricks.js
|
||||||
# uglifyjs --compress --mangle -- ../dist/bricks.js > ../dist/bricks.min.js
|
# uglifyjs --compress --mangle -- ../dist/bricks.js > ../dist/bricks.min.js
|
||||||
|
|||||||
193
bricks/resourcebrowser.js
Normal file
193
bricks/resourcebrowser.js
Normal file
@ -0,0 +1,193 @@
|
|||||||
|
var bricks = window.bricks || {};
|
||||||
|
|
||||||
|
/*
|
||||||
|
* ResourceBrowser — a composite widget: tree (left) + browser (right).
|
||||||
|
*
|
||||||
|
* use case:
|
||||||
|
* {
|
||||||
|
* "widgettype": "ResourceBrowser",
|
||||||
|
* "options": {
|
||||||
|
* "title": "optional title",
|
||||||
|
* "description": "optional description",
|
||||||
|
* "tree_options": {
|
||||||
|
* "widgettype": "Tree",
|
||||||
|
* "options": { "idField": "id", "textField": "text", "dataurl": "..." },
|
||||||
|
* "tools": [ { "widgettype": "Button", "options": {...}, "binds": [...] } ] // optional
|
||||||
|
* },
|
||||||
|
* "browser_options": {
|
||||||
|
* "widgettype": "urlwidget",
|
||||||
|
* "options": { "url": "...", "method": "GET", "params": {...} },
|
||||||
|
* "tools": [ ... ] // optional
|
||||||
|
* },
|
||||||
|
* "tree_width": "280px" // optional, tree column width (default 280px)
|
||||||
|
* }
|
||||||
|
* }
|
||||||
|
*
|
||||||
|
* behaviour:
|
||||||
|
* - on create, calls browser render with id=null
|
||||||
|
* - tree node click only selects (never unselects); on selection change,
|
||||||
|
* calls browser render with the newly selected node's id
|
||||||
|
*
|
||||||
|
* layout:
|
||||||
|
* -------------------------
|
||||||
|
* | Title |
|
||||||
|
* | description |
|
||||||
|
* | tools | tools |
|
||||||
|
* | tree | browser |
|
||||||
|
* -------------------------
|
||||||
|
* both tree and browser are scrollable.
|
||||||
|
*/
|
||||||
|
bricks.ResourceBrowser = class extends bricks.VBox {
|
||||||
|
constructor(opts){
|
||||||
|
opts = opts || {};
|
||||||
|
opts.width = opts.width || '100%';
|
||||||
|
opts.height = opts.height || '100%';
|
||||||
|
super(opts);
|
||||||
|
this.tree_options = opts.tree_options || {};
|
||||||
|
this.browser_options = opts.browser_options || {};
|
||||||
|
this.current_id = undefined;
|
||||||
|
this.id_param_name = opts.id_param_name || 'id';
|
||||||
|
schedule_once(this.build_all.bind(this), 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
async build_all(){
|
||||||
|
// ensure column flex so the body can fill the remaining height
|
||||||
|
this.dom_element.style.display = 'flex';
|
||||||
|
this.dom_element.style.flexDirection = 'column';
|
||||||
|
|
||||||
|
this.build_title();
|
||||||
|
this.build_description();
|
||||||
|
this.build_tools_row();
|
||||||
|
await this.build_body();
|
||||||
|
|
||||||
|
// initial render with id=null
|
||||||
|
await this.render_browser(null);
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* The base Layout.build_title()/build_description() read this.title /
|
||||||
|
* this.description (copied from opts by opts_set_style). Keep the optional
|
||||||
|
* title/description rendering through them.
|
||||||
|
*/
|
||||||
|
|
||||||
|
/*
|
||||||
|
* tools row: "tools | tools" — one toolbar above the tree column and one
|
||||||
|
* above the browser column. tools are widget descriptors.
|
||||||
|
*/
|
||||||
|
build_tools_row(){
|
||||||
|
var tree_tools = this.tree_options.tools || [];
|
||||||
|
var browser_tools = this.browser_options.tools || [];
|
||||||
|
if (tree_tools.length == 0 && browser_tools.length == 0){
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
var row = new bricks.HBox({width:'100%', height:'auto'});
|
||||||
|
row.dom_element.style.flexShrink = '0';
|
||||||
|
this.add_widget(row);
|
||||||
|
|
||||||
|
var tree_toolbar = new bricks.HBox({width:this.get_tree_width(), height:'auto'});
|
||||||
|
tree_toolbar.dom_element.style.flexShrink = '0';
|
||||||
|
row.add_widget(tree_toolbar);
|
||||||
|
tree_tools.forEach(async (t) => {
|
||||||
|
var w = await bricks.widgetBuild(t, tree_toolbar);
|
||||||
|
if (w) tree_toolbar.add_widget(w);
|
||||||
|
});
|
||||||
|
|
||||||
|
var browser_toolbar = new bricks.HBox({width:'100%', height:'auto'});
|
||||||
|
browser_toolbar.dom_element.style.flex = '1';
|
||||||
|
row.add_widget(browser_toolbar);
|
||||||
|
browser_tools.forEach(async (t) => {
|
||||||
|
var w = await bricks.widgetBuild(t, browser_toolbar);
|
||||||
|
if (w) browser_toolbar.add_widget(w);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
get_tree_width(){
|
||||||
|
return this.opts.tree_width || '280px';
|
||||||
|
}
|
||||||
|
|
||||||
|
async build_body(){
|
||||||
|
var body = new bricks.HBox({width:'100%', height:'100%'});
|
||||||
|
body.dom_element.style.flex = '1';
|
||||||
|
body.dom_element.style.overflow = 'hidden';
|
||||||
|
body.dom_element.style.minHeight = '0';
|
||||||
|
this.add_widget(body);
|
||||||
|
|
||||||
|
// ── tree column (fixed width, scrollable) ──
|
||||||
|
var tree_col = new bricks.VBox({width:this.get_tree_width(), height:'100%'});
|
||||||
|
tree_col.dom_element.style.flexShrink = '0';
|
||||||
|
tree_col.dom_element.style.overflow = 'hidden';
|
||||||
|
tree_col.dom_element.style.minHeight = '0';
|
||||||
|
body.add_widget(tree_col);
|
||||||
|
|
||||||
|
var tree_desc = this.clone_descriptor(this.tree_options);
|
||||||
|
delete tree_desc.tools;
|
||||||
|
// select-only: clicking the same node must not unselect it
|
||||||
|
tree_desc.options = tree_desc.options || {};
|
||||||
|
tree_desc.options.select_only = true;
|
||||||
|
this.tree = await bricks.widgetBuild(tree_desc, tree_col);
|
||||||
|
if (this.tree){
|
||||||
|
tree_col.add_widget(this.tree);
|
||||||
|
this.tree.bind('node_selected', this.node_selected.bind(this));
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── browser column (fills remaining width, scrollable) ──
|
||||||
|
var browser_col = new bricks.VBox({width:'100%', height:'100%'});
|
||||||
|
browser_col.dom_element.style.flex = '1';
|
||||||
|
browser_col.dom_element.style.overflow = 'hidden';
|
||||||
|
browser_col.dom_element.style.minHeight = '0';
|
||||||
|
body.add_widget(browser_col);
|
||||||
|
|
||||||
|
this.browser_panel = new bricks.VScrollPanel({width:'100%', height:'100%'});
|
||||||
|
this.browser_panel.dom_element.style.flex = '1';
|
||||||
|
this.browser_panel.dom_element.style.minHeight = '0';
|
||||||
|
browser_col.add_widget(this.browser_panel);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* tree node selected → render browser with the new node id */
|
||||||
|
async node_selected(event){
|
||||||
|
var d = event.params || {};
|
||||||
|
var id_field = (this.tree && this.tree.idField) || 'id';
|
||||||
|
var id = d[id_field];
|
||||||
|
if (id === undefined){
|
||||||
|
id = d.id;
|
||||||
|
}
|
||||||
|
await this.render_browser(id);
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* render the browser for a given node id.
|
||||||
|
* deep-copies browser_options, injects the id param, re-builds content.
|
||||||
|
*/
|
||||||
|
async render_browser(id){
|
||||||
|
if (id === this.current_id){
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.current_id = id;
|
||||||
|
if (!this.browser_panel){
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var desc = this.clone_descriptor(this.browser_options);
|
||||||
|
delete desc.tools;
|
||||||
|
desc.options = desc.options || {};
|
||||||
|
desc.options.params = bricks.extend({}, desc.options.params || {});
|
||||||
|
if (id === null || id === undefined){
|
||||||
|
delete desc.options.params[this.id_param_name];
|
||||||
|
} else {
|
||||||
|
desc.options.params[this.id_param_name] = id;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.browser_panel.clear_widgets();
|
||||||
|
var w = await bricks.widgetBuild(desc, this.browser_panel);
|
||||||
|
if (w){
|
||||||
|
this.browser_panel.add_widget(w);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* deep copy a widget descriptor so we never mutate the caller's object */
|
||||||
|
clone_descriptor(desc){
|
||||||
|
return JSON.parse(JSON.stringify(desc));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
bricks.Factory.register('ResourceBrowser', bricks.ResourceBrowser);
|
||||||
Loading…
x
Reference in New Issue
Block a user