Compare commits
2 Commits
77cdf81dcf
...
e2268a518d
Author | SHA1 | Date | |
---|---|---|---|
|
e2268a518d | ||
|
b1660dd24b |
BIN
bricks/.DS_Store
vendored
@ -2,25 +2,6 @@ var bricks = window.bricks || {};
|
|||||||
|
|
||||||
var tooltip = null;
|
var tooltip = null;
|
||||||
|
|
||||||
bricks.createTooltip = function(){
|
|
||||||
tooltip = document.createElement('div');
|
|
||||||
tooltip.className = 'tooltip';
|
|
||||||
tooltip.style.left = '50%';
|
|
||||||
tooltip.style.trabsform = 'translateX(-50%)';
|
|
||||||
var mouseoutHandler = (event) => {
|
|
||||||
event.target.removeChild(tooltip);
|
|
||||||
}
|
|
||||||
window.addEventListener('mouseover', event => {
|
|
||||||
if (!event.target.tooltop) return true;
|
|
||||||
tooltip.textContent = event.target.tooltip;
|
|
||||||
event.target.addEventListener(
|
|
||||||
'mouseout',
|
|
||||||
mouseoutHandler,
|
|
||||||
{once:true}
|
|
||||||
);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
bricks.app = null;
|
bricks.app = null;
|
||||||
/*
|
/*
|
||||||
all type of bind action's desc has the following attributes:
|
all type of bind action's desc has the following attributes:
|
||||||
@ -411,7 +392,8 @@ bricks.App = class extends bricks.Layout {
|
|||||||
this.textList = [];
|
this.textList = [];
|
||||||
this.i18n = new bricks.I18n(objget(opts, 'i18n', {}));
|
this.i18n = new bricks.I18n(objget(opts, 'i18n', {}));
|
||||||
this.session_id = null;
|
this.session_id = null;
|
||||||
bricks.createTooltip();
|
this.tooltip = new bricks.Tooltip({otext:'test',i18n:true, wrap:true});
|
||||||
|
this.add_widget(this.tooltip);
|
||||||
}
|
}
|
||||||
create(){
|
create(){
|
||||||
this.dom_element = document.getElementsByTagName('body')[0];
|
this.dom_element = document.getElementsByTagName('body')[0];
|
||||||
|
@ -5,6 +5,7 @@ SOURCES=" page_data_loader.js factory.js uitypesdef.js utils.js \
|
|||||||
input.js registerfunction.js button.js accordion.js \
|
input.js registerfunction.js button.js accordion.js \
|
||||||
tree.js multiple_state_image.js dynamiccolumn.js form.js message.js \
|
tree.js multiple_state_image.js dynamiccolumn.js form.js message.js \
|
||||||
paging.js datagrid.js dataviewer.js iframe.js \
|
paging.js datagrid.js dataviewer.js iframe.js \
|
||||||
|
floaticonbar.js \
|
||||||
miniform.js wterm.js dynamicaccordion.js "
|
miniform.js wterm.js dynamicaccordion.js "
|
||||||
echo ${SOURCES}
|
echo ${SOURCES}
|
||||||
cat ${SOURCES} > ../dist/bricks.js
|
cat ${SOURCES} > ../dist/bricks.js
|
||||||
|
@ -13,6 +13,8 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.modal {
|
.modal {
|
||||||
|
display:none;
|
||||||
|
position: absolute;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
color: #e8e8e8;
|
color: #e8e8e8;
|
||||||
background-color: rgba(0.3, 0.3, 0.3, 1);
|
background-color: rgba(0.3, 0.3, 0.3, 1);
|
||||||
|
@ -78,15 +78,21 @@ bricks.DynamicAccordion = class extends bricks.VScrollPanel {
|
|||||||
await this.render();
|
await this.render();
|
||||||
}
|
}
|
||||||
async build_header(){
|
async build_header(){
|
||||||
return await this.build_info();
|
await this.build_info(this);
|
||||||
}
|
}
|
||||||
|
|
||||||
async build_info(record){
|
async build_info(item, record){
|
||||||
if (! this.fields && !record){
|
if (! this.fields && !record){
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
var w;
|
var w;
|
||||||
const info = new bricks.AccordionInfo({});
|
var tb;
|
||||||
|
var info = new bricks.AccordionInfo({});
|
||||||
|
info.data = record;
|
||||||
|
item.add_widget(info);
|
||||||
|
if (this.editable){
|
||||||
|
tb = this.build_record_toolbar(info, record);
|
||||||
|
}
|
||||||
if (! record){
|
if (! record){
|
||||||
record = {};
|
record = {};
|
||||||
for (var i=0;i<this.fields.length;i++){
|
for (var i=0;i<this.fields.length;i++){
|
||||||
@ -94,17 +100,54 @@ bricks.DynamicAccordion = class extends bricks.VScrollPanel {
|
|||||||
record[f.name] = f.label || f.name;
|
record[f.name] = f.label || f.name;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
w = await bricks.widgetBuild(this.record_view, info, record);
|
w = await bricks.widgetBuild(this.record_view, info, record);
|
||||||
|
w.add_widget(tb, 0);
|
||||||
if (w){
|
if (w){
|
||||||
info.add_widget(w);
|
info.add_widget(w);
|
||||||
} else {
|
} else {
|
||||||
bricks.debug('bricks.widgetBuild(), tmpl=', this.record_view, 'record=', record);
|
bricks.debug('bricks.widgetBuild(), tmpl=', this.record_view, 'record=', record);
|
||||||
}
|
}
|
||||||
this.add_widget(info);
|
|
||||||
return info;
|
return info;
|
||||||
}
|
}
|
||||||
|
update_record(info, record){
|
||||||
|
console.log('update_record():info=', info)
|
||||||
|
var w = info.parent;
|
||||||
|
var hided;
|
||||||
|
var content = w.children[1];
|
||||||
|
var hided = content.is_hide();
|
||||||
|
var fields = [];
|
||||||
|
for (var i=0; i< this.fields.length; i++){
|
||||||
|
var f = bricks.extend({}, this.fields[i]);
|
||||||
|
f.value = record[f.name];
|
||||||
|
fields.push(f);
|
||||||
|
}
|
||||||
|
var f = new bricks.Form({
|
||||||
|
"cheight":this.editable.form_cheight||7,
|
||||||
|
"submit_url":this.editable.update_data_url+'?id=' + record.id,
|
||||||
|
"fields":fields
|
||||||
|
});
|
||||||
|
content.add_widget(f, 0);
|
||||||
|
if (hided){
|
||||||
|
content.show();
|
||||||
|
}
|
||||||
|
f.bind('submited', this.update_record_finish.bind(this, info, content, hided, f));
|
||||||
|
}
|
||||||
|
async update_record_finish(info, content, hided, form){
|
||||||
|
var d = form.getValue();
|
||||||
|
content.remove_widget(form);
|
||||||
|
if (hided){
|
||||||
|
content.hide();
|
||||||
|
}
|
||||||
|
var record = bricks.extend(info.data, d);
|
||||||
|
var w = info.children[0];
|
||||||
|
info.clear_widgets();
|
||||||
|
var rtb = w.children[0];
|
||||||
|
var w = await bricks.widgetBuild(this.record_view, info, record);
|
||||||
|
w.add_widget(rtb, 0);
|
||||||
|
info.add_widget(w);
|
||||||
|
}
|
||||||
|
delete_record(info, record){
|
||||||
|
}
|
||||||
async build_new_form(){
|
async build_new_form(){
|
||||||
var desc = {
|
var desc = {
|
||||||
"widgettype":"VBox",
|
"widgettype":"VBox",
|
||||||
@ -114,9 +157,15 @@ bricks.DynamicAccordion = class extends bricks.VScrollPanel {
|
|||||||
"subwidgets":[
|
"subwidgets":[
|
||||||
{
|
{
|
||||||
"id":"new",
|
"id":"new",
|
||||||
"widgettype":"Icon",
|
"widgettype":"IconBar",
|
||||||
"options":{
|
"options":{
|
||||||
"url":this.editable.add_icon || bricks_resource('imgs/add.png')
|
"tools":[
|
||||||
|
{
|
||||||
|
"name":"add",
|
||||||
|
"tip":"add a new record",
|
||||||
|
"icon":this.editable.add_icon || bricks_resource('imgs/add.png')
|
||||||
|
}
|
||||||
|
]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@ -131,7 +180,7 @@ bricks.DynamicAccordion = class extends bricks.VScrollPanel {
|
|||||||
};
|
};
|
||||||
var w = await bricks.widgetBuild(desc, this);
|
var w = await bricks.widgetBuild(desc, this);
|
||||||
w.children[1].hide();
|
w.children[1].hide();
|
||||||
w.children[0].bind('click',function(){ w.children[1].toggle_hide()})
|
w.children[0].bind('add',function(){ w.children[1].toggle_hide()})
|
||||||
this.new_form = w.children[1];
|
this.new_form = w.children[1];
|
||||||
this.new_form.bind('submited', this.render.bind(this));
|
this.new_form.bind('submited', this.render.bind(this));
|
||||||
this.add_widget(w);
|
this.add_widget(w);
|
||||||
@ -159,6 +208,33 @@ bricks.DynamicAccordion = class extends bricks.VScrollPanel {
|
|||||||
this.delete_page(d.delete_page);
|
this.delete_page(d.delete_page);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
build_record_toolbar(info, record){
|
||||||
|
var c = new bricks.Layout({cwidth:2.5, height:'auto'})
|
||||||
|
if (! record){
|
||||||
|
c.set_style('height', '20px');
|
||||||
|
return c;
|
||||||
|
}
|
||||||
|
var desc = {
|
||||||
|
cwidth:2.5,
|
||||||
|
tools:[
|
||||||
|
{
|
||||||
|
name:"update",
|
||||||
|
tip:"update record in this line",
|
||||||
|
icon:this.editable.update_icon || bricks_resource('imgs/update.png')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name:'delete',
|
||||||
|
tip:"delete record in this line",
|
||||||
|
icon:this.editable.delete_icon || bricks_resource('imgs/delete.png')
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
var w = new bricks.IconBar(desc);
|
||||||
|
w.bind('update', this.update_record.bind(this, info, record));
|
||||||
|
w.bind('delete', this.delete_record.bind(this, info, record));
|
||||||
|
c.add_widget(w);
|
||||||
|
return c;
|
||||||
|
}
|
||||||
async renderAccordionItems(data, page) {
|
async renderAccordionItems(data, page) {
|
||||||
var pos;
|
var pos;
|
||||||
for (var i=0;i<data.length;i++){
|
for (var i=0;i<data.length;i++){
|
||||||
@ -167,9 +243,10 @@ bricks.DynamicAccordion = class extends bricks.VScrollPanel {
|
|||||||
} else {
|
} else {
|
||||||
pos = i;
|
pos = i;
|
||||||
}
|
}
|
||||||
const record = data[i];
|
var record = data[i];
|
||||||
const item = new bricks.AccordionItem({});
|
var item = new bricks.AccordionItem({});
|
||||||
var info = await this.build_info(record);
|
var info = await this.build_info(item, record);
|
||||||
|
this.content_rely_value = this.content_rely_value || true;
|
||||||
var build_content = true;
|
var build_content = true;
|
||||||
if (this.content_rely_on){
|
if (this.content_rely_on){
|
||||||
var v = this.content_rely_value || true;
|
var v = this.content_rely_value || true;
|
||||||
@ -178,19 +255,16 @@ bricks.DynamicAccordion = class extends bricks.VScrollPanel {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
content = null;
|
content = null;
|
||||||
if (build_content){
|
var content = new bricks.VBox({
|
||||||
var content = new bricks.VBox({
|
height:'auto',
|
||||||
height:'auto',
|
display:'none'
|
||||||
display:'none'
|
});
|
||||||
});
|
content.set_css('accordion-item-content');
|
||||||
content.set_css('accordion-item-content');
|
content.hide();
|
||||||
content.hide();
|
if ( build_content ){
|
||||||
info.bind('click', this.toggle_content.bind(this, info, content, record));
|
info.bind('click', this.toggle_content.bind(this, info, content, record));
|
||||||
}
|
}
|
||||||
item.add_widget(info);
|
item.add_widget(content);
|
||||||
if(content){
|
|
||||||
item.add_widget(content);
|
|
||||||
}
|
|
||||||
item.set_attribute('data-page', page);
|
item.set_attribute('data-page', page);
|
||||||
this.container.add_widget(item, pos);
|
this.container.add_widget(item, pos);
|
||||||
};
|
};
|
||||||
@ -203,9 +277,6 @@ bricks.DynamicAccordion = class extends bricks.VScrollPanel {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
async toggle_content(info, content, record, event){
|
async toggle_content(info, content, record, event){
|
||||||
if (!this.content_view){
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
var h = this.container.dom_element.offsetHeight - 3 * info.dom_element.offsetHeight;
|
var h = this.container.dom_element.offsetHeight - 3 * info.dom_element.offsetHeight;
|
||||||
content.set_style('height', h + 'px');
|
content.set_style('height', h + 'px');
|
||||||
if (this.active_content){
|
if (this.active_content){
|
||||||
|
Before Width: | Height: | Size: 9.2 KiB After Width: | Height: | Size: 14 KiB |
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 13 KiB |
BIN
bricks/imgs/float-in.png
Normal file
After Width: | Height: | Size: 10 KiB |
BIN
bricks/imgs/float-out.png
Normal file
After Width: | Height: | Size: 8.2 KiB |
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 13 KiB |
@ -22,6 +22,11 @@ bricks.JsWidget = class {
|
|||||||
this.set_csses(options.csses);
|
this.set_csses(options.csses);
|
||||||
}
|
}
|
||||||
this.dom_element.bricks_widget = this;
|
this.dom_element.bricks_widget = this;
|
||||||
|
if (this.opts.tip){
|
||||||
|
var w = bricks.app.tooltip;
|
||||||
|
this.bind('mousemove', w.show.bind(w, this.opts.tip));
|
||||||
|
this.bind('mouseout', w.hide.bind(w));
|
||||||
|
}
|
||||||
}
|
}
|
||||||
create(){
|
create(){
|
||||||
this.dom_element = this._create('div')
|
this.dom_element = this._create('div')
|
||||||
@ -183,6 +188,9 @@ bricks.JsWidget = class {
|
|||||||
hide(){
|
hide(){
|
||||||
this.dom_element.style.display = 'none'
|
this.dom_element.style.display = 'none'
|
||||||
}
|
}
|
||||||
|
is_hide(){
|
||||||
|
return this.dom_element.style.display == 'none';
|
||||||
|
}
|
||||||
toggle_hide(){
|
toggle_hide(){
|
||||||
if (this.dom_element.style.display == 'none'){
|
if (this.dom_element.style.display == 'none'){
|
||||||
this.show();
|
this.show();
|
||||||
@ -255,6 +263,16 @@ bricks.TextBase = class extends bricks.JsWidget {
|
|||||||
}
|
}
|
||||||
this.dom_element.innerHTML = this.text;
|
this.dom_element.innerHTML = this.text;
|
||||||
}
|
}
|
||||||
|
set_otext(otxt){
|
||||||
|
var text;
|
||||||
|
this.otext = otxt;
|
||||||
|
if (this.i18n) {
|
||||||
|
text = this._i18n._(this.otext);
|
||||||
|
} else {
|
||||||
|
text = otext;
|
||||||
|
}
|
||||||
|
this.set_text(text);
|
||||||
|
}
|
||||||
set_i18n_text(){
|
set_i18n_text(){
|
||||||
if ( !this.otext){
|
if ( !this.otext){
|
||||||
return;
|
return;
|
||||||
@ -339,6 +357,29 @@ bricks.Title6 = class extends bricks.TextBase {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
bricks.Tooltip = class extends bricks.Text {
|
||||||
|
constructor(opts){
|
||||||
|
opts.rate = 0.8;
|
||||||
|
opts.tip = null;
|
||||||
|
super(opts);
|
||||||
|
this.set_css('modal');
|
||||||
|
}
|
||||||
|
show(otext, event){
|
||||||
|
this.set_otext(otext);
|
||||||
|
var x,y;
|
||||||
|
x = event.clientX;
|
||||||
|
y = event.clientY;
|
||||||
|
this.set_style('zIndex', 999999999);
|
||||||
|
this.set_style('display', 'block');
|
||||||
|
this.set_style('left', x + 'px');
|
||||||
|
this.set_style('top', y + 'px');
|
||||||
|
}
|
||||||
|
hide(){
|
||||||
|
this.set_style('display', 'none');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
bricks.Factory.register('Tooltip', bricks.Tooltip);
|
||||||
bricks.Factory.register('Text', bricks.Text);
|
bricks.Factory.register('Text', bricks.Text);
|
||||||
bricks.Factory.register('Title1', bricks.Title1);
|
bricks.Factory.register('Title1', bricks.Title1);
|
||||||
bricks.Factory.register('Title2', bricks.Title2);
|
bricks.Factory.register('Title2', bricks.Title2);
|
||||||
|