bugfix

bricks/bricks.js

@@ -2,25 +2,6 @@ var bricks = window.bricks || {};
 
 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;
 /*
 all type of bind action's desc has the following attributes:
@@ -411,7 +392,8 @@ bricks.App = class extends bricks.Layout {
 		this.textList = [];
 		this.i18n = new bricks.I18n(objget(opts, 'i18n', {}));
 		this.session_id = null;
-		bricks.createTooltip();
+		this.tooltip = new bricks.Tooltip({otext:'test',i18n:true, wrap:true});
+		this.add_widget(this.tooltip);
 	}
 	create(){
 		this.dom_element = document.getElementsByTagName('body')[0];

bricks/build.sh

@@ -5,6 +5,7 @@ SOURCES=" page_data_loader.js factory.js uitypesdef.js utils.js \
 	input.js registerfunction.js button.js accordion.js \
 	tree.js multiple_state_image.js dynamiccolumn.js form.js message.js \
 	paging.js datagrid.js dataviewer.js iframe.js \
+	floaticonbar.js \
 	miniform.js wterm.js dynamicaccordion.js "
 echo ${SOURCES}
 cat ${SOURCES} > ../dist/bricks.js

bricks/css/bricks.css

@@ -13,6 +13,8 @@ body {
 }
 
 .modal {
+	display:none;
+	position: absolute;
 	padding: 10px;
 	color: #e8e8e8;
 	background-color: rgba(0.3, 0.3, 0.3, 1);

bricks/dynamicaccordion.js

@@ -78,15 +78,21 @@ bricks.DynamicAccordion = class extends bricks.VScrollPanel {
 		await this.render();
 	}
 	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){
 			return;
 		}
 		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){
 			record = {};
 			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;
 			}
 		}
-
 		w = await bricks.widgetBuild(this.record_view, info, record);
+		w.add_widget(tb, 0);
 		if (w){
 			info.add_widget(w);
 		} else {
 			bricks.debug('bricks.widgetBuild(), tmpl=', this.record_view, 'record=', record);
 		}       
-		this.add_widget(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(){
 		var desc = {
 			"widgettype":"VBox",
@@ -114,9 +157,15 @@ bricks.DynamicAccordion = class extends bricks.VScrollPanel {
 			"subwidgets":[
 				{
 					"id":"new",
-					"widgettype":"Icon",
+					"widgettype":"IconBar",
 					"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);
 		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.bind('submited', this.render.bind(this));
 		this.add_widget(w);
@@ -159,6 +208,33 @@ bricks.DynamicAccordion = class extends bricks.VScrollPanel {
 			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) {
 		var pos;
 		for (var i=0;i<data.length;i++){
@@ -167,9 +243,10 @@ bricks.DynamicAccordion = class extends bricks.VScrollPanel {
 			} else {
 				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;
 			if (this.content_rely_on){
 				var v = this.content_rely_value || true;
@@ -178,19 +255,16 @@ bricks.DynamicAccordion = class extends bricks.VScrollPanel {
 				}
 			}
 			content = null;
-			if (build_content){
 			var content = new bricks.VBox({
 				height:'auto',
 				display:'none'
 			});
 			content.set_css('accordion-item-content');
 			content.hide();
+			if ( build_content ){
 				info.bind('click', this.toggle_content.bind(this, info, content, record));
 			}
-			item.add_widget(info);
-			if(content){
 			item.add_widget(content);
-			}
 			item.set_attribute('data-page', page);
 			this.container.add_widget(item, pos);
 		};
@@ -203,9 +277,6 @@ bricks.DynamicAccordion = class extends bricks.VScrollPanel {
 		}
 	}
 	async toggle_content(info, content, record, event){
-		if (!this.content_view){
-			return;
-		}
 		var h = this.container.dom_element.offsetHeight  - 3 * info.dom_element.offsetHeight;
 		content.set_style('height', h + 'px');
 		if (this.active_content){

bricks/widget.js

@@ -22,6 +22,11 @@ bricks.JsWidget = class {
 			this.set_csses(options.csses);
 		}
 		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(){
 		this.dom_element = this._create('div')
@@ -183,6 +188,9 @@ bricks.JsWidget = class {
 	hide(){
 		this.dom_element.style.display = 'none'
 	}
+	is_hide(){
+		return this.dom_element.style.display == 'none';
+	}
 	toggle_hide(){
 		if (this.dom_element.style.display == 'none'){
 			this.show();
@@ -255,6 +263,16 @@ bricks.TextBase = class extends bricks.JsWidget {
 		}
 		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(){
 		if ( !this.otext){
 			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('Title1', bricks.Title1);
 bricks.Factory.register('Title2', bricks.Title2);