bugfix

2024-02-01 16:40:31 +08:00 · 2024-02-01 16:40:31 +08:00 · a028ba94dc
commit a028ba94dc
parent c76c36e57f
28 changed files with 294 additions and 260 deletions
--- a/bricks/accordion.js
+++ b/bricks/accordion.js
@ -1,4 +1,5 @@
-class Accordion extends VBox {
+var bricks = window.bricks || {};
+bricks.Accordion = class oops extends bricks.VBox {
 	/* 
 	{
 		item_size:
@ -69,4 +70,4 @@ class Accordion extends VBox {
 	}
 }

-Factory.register('Accordion', Accordion);
+bricks.Factory.register('Accordion', bricks.Accordion);
--- a/bricks/aggrid.js
+++ b/bricks/aggrid.js
@ -1,5 +1,5 @@
-
-class AG_Grid extends JsWidget {
+var bricks = window.bricks || {};
+bricks.AG_Grid = class oops extends bricks.JsWidget {
 	/*
 		{
 			dataurl:
--- a/bricks/audio.js
+++ b/bricks/audio.js
@ -1,3 +1,4 @@
+var bricks = window.bricks || {};

 var formatMs=function(ms,all){
 	var ss=ms%1000;ms=(ms-ss)/1000;
@ -11,7 +12,7 @@ var formatMs=function(ms,all){
 	return t;
 };

-class AudioPlayer extends JsWidget {
+bricks.AudioPlayer = class oops extends bricks.JsWidget {
 	/*
 	{
 		url:
@ -35,7 +36,7 @@ class AudioPlayer extends JsWidget {
 	}
 	set_source(url){
 		this.audio.src = url;
-		console.log(this.source.src,' new src seted');
+		console.log(this.audio.src,' new src seted');
 	}
 	toggle_play(){
 		if (this.audio.paused){
@ -47,45 +48,65 @@ class AudioPlayer extends JsWidget {
 }


-		this.player.source.src = url;
-//webkitURL is deprecated but nevertheless
-var URL = window.URL || window.webkitURL;
-var AudioContext = window.AudioContext || window.webkitAudioContext;
-
-class AudioRecorder extends HBox {
+bricks.AudioRecorder = class oops extends bricks.HBox {
+	/*
+	events:
+		record_started
+		record_finished wavdata
+	*/
 	constructor(opts){
 		super(opts);
 		this.start_icon = opts.start_icon || bricks_resource('imgs/start_recording.png');
 		this.stop_icon = opts.stop_icon || bricks_resource('imgs/stop_recording.png');
+		this.rec_btn = new bricks.Icon({url:this.start_icon });
+		this.player = new bricks.AudioPlayer({url:"",width:'40px'});
+		this.rec_time = new bricks.Text({text:"", i18n:false, width:'120px'});
+		this.rec_btn.bind('click', this.rec_btn_pressed.bind(this))
+		this.URL = window.URL||webkitURL;
 		this.rec = null;
 		this.wave = null;
-		this.recBlob = null;
-		this.recOpen();
+		this.mic_opened = false;
+		this.add_widget(this.rec_btn);
+		this.add_widget(this.rec_time);
+		this.add_widget(this.player);
+		this.recordData = null;
+	}
+	rec_btn_pressed(){
+		console.log(this.rec_btn.url, ':url:', this.start_icon, this.stop_icon);
+		if(this.rec_btn.url == this.start_icon){
+			this.rec_btn.set_url(this.stop_icon);
+			this.start_recording();
+		} else {
+			this.rec_btn.set_url(this.start_icon);
+			this.stop_recording();
+		}
 	}
 	on_process(buffers,powerLevel,
 						bufferDuration,bufferSampleRate,
 						newBufferIdx,asyncEnd){
 		//录音实时回调，大约1秒调用12次本回调
-		document.querySelector(".recpowerx").style.width=powerLevel+"%";
-		document.querySelector(".recpowert").innerText=formatMs(bufferDuration,1)+" / "+powerLevel;
-		
+		// document.querySelector(".recpowerx").style.width=powerLevel+"%";
 		//可视化图形绘制
-		wave.input(buffers[buffers.length-1],powerLevel,bufferSampleRate);
+		// wave.input(buffers[buffers.length-1],powerLevel,bufferSampleRate);
+		this.rec_time.otext = formatMs(bufferDuration,1);
+		console.log(this.rec_time.otext);
+		
 	}
 	recOpen(){
 		this.rec=null;
 		this.wave=null;
-		this.recBlob=null;
-		var newRec=Recorder({
+		var newRec = Recorder({
 			type:"wav",sampleRate:16000,bitRate:16
 			,onProcess:this.on_process.bind(this)
-			}
 		});

 		newRec.open(function(){//打开麦克风授权获得相关资源
+			this.mic_opened = true;
 			this.rec=newRec;
+			this.rec.start();
+			this.dispatch('record_started');
 			//此处创建这些音频可视化图形绘制浏览器支持妥妥的
-			this.wave=Recorder.FrequencyHistogramView({elem:".recwave"});
+			//this.wave=Recorder.FrequencyHistogramView({elem:".recwave"});
 		}.bind(this),function(msg,isUserNotAllow){//用户拒绝未授权或不支持
 			console.log('open recorder failed');
 		});
@ -97,13 +118,19 @@ class AudioRecorder extends HBox {
 			console.log('close recorder error');
 		};
 	}
+	recoding(){
+		this.n
+	}
 	start_recording(){
-		if(this.rec&&Recorder.IsOpen()){
-			this.recBlob=null;
+		this.recordData = null;
+		if( this.recordData ){
+			this.URL.revokeObjectURL(this.recordData.url);
+		}
+		if (this.mic_opened){
 			this.rec.start();
-		}else{
-			console.log("ajKR::未打开录音");
-		};
+			this.dispatch('record_started');
+		}
+		this.recOpen();
 	}
 	pause_recording(){
 		if(this.rec&&Recorder.IsOpen()){
@ -125,63 +152,48 @@ class AudioRecorder extends HBox {
 			return;
 		};
 		this.rec.stop(function(blob,duration){
-			console.log(blob,(window.URL||webkitURL).createObjectURL(blob),Html_xT(Html_$T("gOix::时长:{1}ms",0,duration)));
-			
-			this.recBlob=blob;
-			console.log("0LHf::已录制mp3：{1}ms {2}字节，可以点击播放、上传、本地下载了",0,formatMs(duration),blob.size);
+			var localURL = this.URL.createObjectURL(blob);
+			var d = {
+				data:blob,
+				url:localURL,
+				duration:duration
+			}
+			this.recordData = d;
+			this.player.set_source(this.recordData.url);
+			this.dispatch('record_finished', d);
+
 		}.bind(this),function(msg){
 			console.log("kGZO::录音失败:");
 		});
 	}
-	play_record(){
-		if(!this.recBlob){
-			console.log("tIke::请先录音，然后停止后再播放");
-			return;
-		};
-		var cls=("a"+Math.random()).replace(".","");
-		var audio=document.createElement("audio");
-		audio.controls=true;
-		document.querySelector("."+cls).appendChild(audio);
-		//简单利用URL生成播放地址，注意不用了时需要revokeObjectURL，否则霸占内存
-		audio.src=(window.URL||webkitURL).createObjectURL(recBlob);
-		audio.play();
-		
-		setTimeout(function(){
-			(window.URL||webkitURL).revokeObjectURL(audio.src);
-		},5000);
-	}
-	upload(){
-		var blob=this.recBlob;
-		if(!blob){
+	async upload(){
+		if(!this.recordData){
 			console.log("DUTn::请先录音，然后停止后再上传");
 			return;
 		};
+		var blob=this.recordData.blob;
 		var form=new FormData();
 		form.append("audiofile",blob,"recorder.wav");
-		const data = new URLSearchParams();
-		for (const pair of form)) {
-			data.append(pair[0], pair[1]);
-		}
-		hj = HttpJson()
-		ret = await hj.post(this.upload_url,{
-			params:data
+		var hj = HttpJson()
+		var ret = await hj.post(this.upload_url,{
+			params:form
 		});
 		console.log('ret=', ret);
 		this.dispatch('updated', ret)
 	}
 	download(){
-		if(!this.recBlob){
+		if(!this.recordData){
 			console.log('recorder not opened');
 			return;
 		};
 		var fileName="recorder-"+Date.now()+".wav";
 		var downA=document.createElement("A");
-		downA.innerHTML="下载")+fileName;
-		downA.href=(window.URL||webkitURL).createObjectURL(this.recBlob);
+		downA.innerHTML="下载"+fileName;
+		downA.href=this.recordData.url;
 		downA.download=fileName;
-		# document.querySelector("."+cls).appendChild(downA);
+		// document.querySelector("."+cls).appendChild(downA);
 		if(/mobile/i.test(navigator.userAgent)){
-			;
+			console.log('mobile device');
 		}
 		downA.click();
 		//不用了时需要revokeObjectURL，否则霸占内存
@ -189,5 +201,5 @@ class AudioRecorder extends HBox {
 	}
 }

-Factory.register('AudioPlayer', AudioPlayer);
-Factory.register('AudioRecorder', AudioRecorder);
+bricks.Factory.register('AudioPlayer', bricks.AudioPlayer);
+bricks.Factory.register('AudioRecorder', bricks.AudioRecorder);
--- a/bricks/bricks.js
+++ b/bricks/bricks.js
@ -1,6 +1,8 @@
+var bricks = window.bricks || {};
+
 var tooltip = null;

-createTooltip = function(){
+bricks.createTooltip = function(){
 	tooltip = document.createElement('div');
 	tooltip.className = 'tooltip';
 	tooltip.style.left = '50%';
@ -19,7 +21,7 @@ createTooltip = function(){
 	});
 }
 	
-let bricks_app = null;
+bricks.app = null;
 /*
 all type of bind action's desc has the following attributes:
 	actiontype:'bricks',
@ -67,9 +69,9 @@ dispatch_event:
 params:
 */

-var widgetBuild = async function(desc, widget){
+bricks.widgetBuild = async function(desc, widget){
 	if (! widget){
-		widget = Body;
+		widget = bricks.Body;
 	}
 	const klassname = desc.widgettype;
 	var base_url = null;
@ -82,9 +84,9 @@ var widgetBuild = async function(desc, widget){
 	} else {
 		base_url = widget.baseURI;
 	}
-	let klass = Factory.get(desc.widgettype);
+	let klass = bricks.Factory.get(desc.widgettype);
 	if (! klass){
-		console.log('widgetBuild():',desc.widgettype, 'not registered', Factory.widgets_kw);
+		console.log('widgetBuild():',desc.widgettype, 'not registered', bricks.Factory.widgets_kw);
 		return null;
 	}
 	desc.options.baseURI = base_url;
@ -95,7 +97,7 @@ var widgetBuild = async function(desc, widget){
 	if (desc.hasOwnProperty('subwidgets')){
 		for (let i=0; i<desc.subwidgets.length; i++){
 			let sdesc = desc.subwidgets[i];
-			let sw = await widgetBuild(sdesc, w);
+			let sw = await (bricks.widgetBuild(sdesc, w));
 			if ( sw ){
 				w.add_widget(sw);
 			} else {
@ -105,14 +107,14 @@ var widgetBuild = async function(desc, widget){
 	}
 	if (desc.hasOwnProperty('binds')){
 		for (var i=0;i<desc.binds.length; i++){
-			buildBind(w, desc.binds[i]);
+			bricks.buildBind(w, desc.binds[i]);
 		}
 	}
 	return w;
 }

-var buildBind = function(w, desc){
-	var widget = getWidgetById(desc.wid, w);
+bricks.buildBind = function(w, desc){
+	var widget = bricks.getWidgetById(desc.wid, w);
 	if (!widget){
 		cnsole.log('desc wid not find', desc);
 		return;
@ -121,10 +123,10 @@ var buildBind = function(w, desc){
 	buildEventBind(w, widget, event, desc);
 }

-var buildEventBind = function(from_widget, widget, event, desc){
-	var handler = universal_handler.bind(null,from_widget, widget, desc);
+bricks.buildEventBind = function(from_widget, widget, event, desc){
+	var handler = bricks.universal_handler.bind(null,from_widget, widget, desc);
 	if (desc.conform){
-		var conform_widget = widgetBuild(desc.conform, widget);
+		var conform_widget = await (bricks.widgetBuild(desc.conform, widget));
 		conform_widget.bind('on_conform', handler);
 		handler = conform_widget.open.bind(conform_widget);
 	}
@ -132,13 +134,13 @@ var buildEventBind = function(from_widget, widget, event, desc){
 	
 }

-var universal_handler = function(from_widget, widget, desc, event){
+bricks.universal_handler = function(from_widget, widget, desc, event){
 	debug('universal_handler() info', 'from_widget=', 
 						from_widget,
 						'widget=', widget, 
 						'desc=', desc,
 						event);
-	var f = buildEventHandler(from_widget, desc);
+	var f = bricks.buildEventHandler(from_widget, desc);
 	if (f){
 		return f(event);
 	}
@ -148,8 +150,8 @@ var universal_handler = function(from_widget, widget, desc, event){
 						'desc=', desc,
 						event);
 }
-var buildEventHandler = function(w, desc){
-	var target = getWidgetById(desc.target, w);
+bricks.buildEventHandler = function(w, desc){
+	var target = bricks.getWidgetById(desc.target, w);
 	if (! target){
 		console.log('target miss desc=', desc, 'w=', w);
 		return null
@ -163,35 +165,35 @@ var buildEventHandler = function(w, desc){
 			params:desc.dataparams,
 			script:desc.datascript
 		}
-		rtdata = getRealtimeData(w, data_desc);
+		rtdata = bricks.getRealtimeData(w, data_desc);
 	}
 	switch (desc.actiontype){
 		case 'urlwidget':
-			return buildUrlwidgetHandler(w, target, rtdata, desc);
+			return bricks.buildUrlwidgetHandler(w, target, rtdata, desc);
 			break;
 		case 'bricks':
-			return buildBricksHandler(w, target, rtdata, desc);
+			return bricks.buildBricksHandler(w, target, rtdata, desc);
 			break;
 		case 'registerfunction':
-			return buildRegisterFunction(w, target, rtdata, desc);
+			return bricks.buildRegisterFunction(w, target, rtdata, desc);
 			break;
 		case 'method':
-			return buildMethodHandler(w, target, rtdata, desc);
+			return bricks.buildMethodHandler(w, target, rtdata, desc);
 			break;
 		case 'script':
-			var f = buildScriptHandler(w, target, rtdata, desc);
+			var f = bricks.buildScriptHandler(w, target, rtdata, desc);
 			return f;
 			break;
 		case 'event':
-			return buildDispatchEventHandler(w, target, rtdata, desc);
+			return bricks.buildDispatchEventHandler(w, target, rtdata, desc);
 			break;
 		default:
 			console.log('invalid actiontype', target, desc);
 			break;
 	}
 }
-var getRealtimeData = function(w, desc){
-	var target = getWidgetById(desc.widget, w);
+bricks.getRealtimeData = function(w, desc){
+	var target = bricks.getWidgetById(desc.widget, w);
 	var f;
 	if (! target){
 		console.log('target miss', desc);
@ -209,10 +211,10 @@ var getRealtimeData = function(w, desc){
 	return null;
 }

-var buildUrlwidgetHandler = function(w, target, rtdata, desc){
+bricks.buildUrlwidgetHandler = function(w, target, rtdata, desc){
 	var f = async function(target, mode, options){
 		console.log('target=', target, 'mode=', mode, 'options=', options);
-		var w = await widgetBuild(options, w);
+		var w = await (bricks.widgetBuild(options, w));
 		if (!w){
 			console.log('options=', options, 'widgetBuild() failed');
 			return;
@ -230,10 +232,10 @@ var buildUrlwidgetHandler = function(w, target, rtdata, desc){
 	}
 	return f.bind(target, target, desc.mode || 'replace', opts);
 }
-var buildBricksHandler = function(w, target, rtdata, desc){
+bricks.buildBricksHandler = function(w, target, rtdata, desc){
 	var f = async function(target, mode, options){
 		console.log('target=', target, 'mode=', mode, 'options=', options);
-		var w = await widgetBuild(options, w);
+		var w = await (bricks.widgetBuild(options, wa));
 		if (!w){
 			console.log('options=', options, 'widgetBuild() failed');
 			return;
@ -247,7 +249,7 @@ var buildBricksHandler = function(w, target, rtdata, desc){
 	extend(options.options, rtdata);
 	return f.bind(target, target, desc.mode || 'replace', options);
 }
-var buildRegisterFunctionHandler = function(w, target, rtdata, desc){
+bricks.buildRegisterFunctionHandler = function(w, target, rtdata, desc){
 	var f = objget(registerfunctions, desc.rfname);
 	if( ! f){
 		console.log('rfname:', desc.rfname, 'not registed', desc);
@ -262,7 +264,7 @@ var buildRegisterFunctionHandler = function(w, target, rtdata, desc){
 	}
 	return f.bind(target, params);
 }
-var buildMethodHandler = function(w, target, rtdata, desc){
+bricks.buildMethodHandler = function(w, target, rtdata, desc){
 	var f = target[desc.method];
 	if (! f){
 		console.log('method:', desc.method, 'not exists in', target, 'w=', w);
@ -273,7 +275,7 @@ var buildMethodHandler = function(w, target, rtdata, desc){
 	extend(params, rtdata);
 	return f.bind(target, params);
 }
-var buildScriptHandler = function(w, target, rtdata, desc){
+bricks.buildScriptHandler = function(w, target, rtdata, desc){
 	var params = {};
 	extend(params, desc.params)
 	extend(params, rtdata);
@ -281,7 +283,7 @@ var buildScriptHandler = function(w, target, rtdata, desc){
 	console.log('params=', params, 'buildScriptHandler() ..........');
 	return f.bind(target, target, params);
 }
-var buildDispatchEventHandler = function(w, target, rtdata, desc){
+bricks.buildDispatchEventHandler = function(w, target, rtdata, desc){
 	var params = {};
 	extend(params, desc.params)
 	extend(params, rtdata);
@ -291,7 +293,7 @@ var buildDispatchEventHandler = function(w, target, rtdata, desc){
 	return f.bind(target, params);
 }

-var getWidgetById = function(id, from_widget){
+bricks.getWidgetById = function(id, from_widget){
 	if (! id){
 		return from_widget;
 	}
@ -307,14 +309,14 @@ var getWidgetById = function(id, from_widget){
 				continue;
 			}
 			if (ids[i]=='root'){
-				el = bricks_app.root.dom_element;
+				el = bricks.app.root.dom_element;
 				continue;
 			}
 			if (ids[i]=='app'){
-				return bricks_app;
+				return bricks.app;
 			}
 			if (ids[i] == 'window'){
-				el = Body.dom_element;
+				el = bricks.Body.dom_element;
 				continue;
 			}
 		}
@ -344,7 +346,7 @@ var getWidgetById = function(id, from_widget){
 	return el;
 }

-class BricksApp {
+bricks.App = class {
 	constructor(opts){
 		/*
 		opts = {
@ -363,7 +365,7 @@ class BricksApp {
 		}
 		*/
 		this.opts = opts;
-		bricks_app = this;
+		bricks.app = this;
 		this.login_url = opts.login_url;
 		this.charsize = this.opts.charsize || 20;
 		if (this.opts.language){
@ -375,7 +377,7 @@ class BricksApp {
 		this.textList = [];
 		this.i18n = new I18n(objget(opts, 'i18n', {}));
 		this.session_id = null;
-		createTooltip();
+		bricks.createTooltip();
 	}
 	save_session(session){
 		this.session_id = session;
@ -416,22 +418,21 @@ class BricksApp {
 	}
 	async build(){
 		var opts = structuredClone(this.opts.widget);
-		var w = await widgetBuild(opts, Body);
+		var w = await (bricks.widgetBuild(opts, bricks.Body));
 		if (!w){
-			console.log('build() end', this.opts.widget, w, 'body=', Body);
-			console.log('w=', w, 'Body=', Body, Wterm, 'Factory=', Factory)
+			console.log('w=', w, 'Body=', bricks.Body, 'Factory=', bricks.Factory)
 		}
 		return w;
 	}
 	async run(){
-		await this.change_language(this);
-		var w = await this.build();
+		await (this.change_language(this));
+		var w = await (this.build());
 		this.root = w;
 		if (!w){
-			console.log('w=', w, 'Body=', Body, Wterm, 'Factory=', Factory)
+			console.log('w=', w, 'Body=', bricks.Body, 'Factory=', bricks.Factory)
 			return null;
 		}
-		Body.add_widget(w);
+		bricks.Body.add_widget(w);
 	}
 	textsize_bigger(){
 		this.charsize = this.charsize * 1.05;
@ -452,7 +453,7 @@ class BricksApp {
 	}
 	change_language = async function(lang){
 		this.lang = lang;
-		await this.i18n.change_lang(lang);
+		await (this.i18n.change_lang(lang));
 		for (var i=0;i<this.textList.length;i++){
 			if(this.textList[i].deref()){
 				var w = this.textList[i].deref();
--- a/bricks/build.sh
+++ b/bricks/build.sh
@ -1,5 +1,5 @@
-SOURCES="uitypesdef.js utils.js i18n.js factory.js widget.js \
-	bricks.js image.js recorder.js \
+SOURCES=" factory.js uitypesdef.js utils.js i18n.js widget.js \
+	bricks.js image.js \
 	jsoncall.js myoperator.js layout.js menu.js modal.js \
 	markdown_viewer.js video.js audio.js toolbar.js tab.js \
 	input.js registerfunction.js button.js accordion.js \
--- a/bricks/button.js
+++ b/bricks/button.js
@ -1,4 +1,4 @@
-class Button extends Layout {
+bricks.Button = class extends bricks.Layout {
 	/*
 		orientation:
 		height:100%,
@ -56,7 +56,7 @@ class Button extends Layout {
 		this.dom_element = document.createElement('button');
 	}
 	opts_setup(){
-		var item_size = this.opts.item_size || bricks_app.charsize;
+		var item_size = this.opts.item_size || bricks.app.charsize;
 		if (this.opts.icon){
 			var icon = new Icon({
 				rate:this.item_rate,
@ -89,4 +89,4 @@ class Button extends Layout {
 	}
 }

-Factory.register('Button', Button);
+bricks.Factory.register('Button', bricks.Button);
--- a/bricks/datagrid.js
+++ b/bricks/datagrid.js
@ -1,4 +1,5 @@
-class Row {
+bricks = window.bricks || {};
+bricks.Row = class {
 	constructor(dg, rec) {
 		this.dg = dg;
 		this.data = objcopy(rec);
@ -89,7 +90,7 @@ class Row {
 	}
 }

-class DataGrid extends VBox {
+bricks.DataGrid = class extends bricks.VBox {
 	/*
 	{
 		data:
@ -231,7 +232,7 @@ class DataGrid extends VBox {
 		}
 	}
 	add_row(data, index) {
-		var row = new Row(this, data);
+		var row = new bricks.Row(this, data);
 		if (this.freeze_body)
 			this.freeze_body.add_widget(row.freeze_row, index);
 		if (this.normal_body)
@ -381,4 +382,4 @@ class DataGrid extends VBox {
 	}
 }

-Factory.register('DataGrid', DataGrid);
+bricks.Factory.register('DataGrid', bricks.DataGrid);
--- a/bricks/dataviewer.js
+++ b/bricks/dataviewer.js
@ -1,5 +1,6 @@
+bricks = window.bricks || {};

-class DataViewer extends VScrollPanel {
+bricks.DataViewer = class extends bricks.VScrollPanel {
 	/*
 	opts={
 		dataurl:
@ -67,4 +68,4 @@ class DataViewer extends VScrollPanel {
 		this.add_widget(w, index);
 	}
 }
-Factory.register('DataViewer', DataViewer);
+bricks.Factory.register('DataViewer', bricks.DataViewer);
--- a/bricks/factory.js
+++ b/bricks/factory.js
@ -1,3 +1,4 @@
+bricks = window.bricks || {};
 class Factory_ {
 	constructor(){
 		this.widgets_kv = new Object();
@ -13,5 +14,5 @@ class Factory_ {
 		return null;
 	}
 }
-const Factory = new Factory_();
+bricks.Factory = new Factory_();

--- a/bricks/footer.tmpl
+++ b/bricks/footer.tmpl
@ -1,5 +1,5 @@
 	};
-	const app = new BricksApp(opts);
+	const app = new bricks.App(opts);
 	app.run();
 </script>
 </body>
--- a/bricks/form.js
+++ b/bricks/form.js
@ -1,5 +1,6 @@
+bricks = window.bricks || {};

-class FormBody extends VBox {
+bricks.FormBody = class extends bricks.VBox {
 	/*
 	{
 		title:
@ -102,7 +103,7 @@ class FormBody extends VBox {
 		}
 	}
 }
-class Form extends VBox {
+bricks.Form = class extends bricks.VBox {
 	/*
 	{
 		title:
@ -175,7 +176,7 @@ class Form extends VBox {

 }

-class TabForm extends Form {
+bricks.TabForm = class extends bricks.Form {
 	/*
 	options
 	{
@ -209,5 +210,5 @@ class TabForm extends Form {
 	}
 }

-Factory.register('Form', Form);
+bricks.Factory.register('Form', bricks.Form);
 // Factory.register('TabForm', TabForm);
--- a/bricks/image.js
+++ b/bricks/image.js
@ -1,4 +1,5 @@
-class Image extends JsWidget {
+var bricks = window.bricks || {};
+bricks.Image = class oops extends bricks.JsWidget {
 	/* 
 	{
 		url:
@ -33,22 +34,22 @@ class Image extends JsWidget {
 	}
 }

-class Icon extends Image {
+bricks.Icon = class oops extends bricks.Image {
 	constructor(opts){
 		super(opts);
-		this.opts.width = bricks_app.charsize;
-		this.opts.height = bricks_app.charsize;
+		this.opts.width = bricks.app.charsize;
+		this.opts.height = bricks.app.charsize;
 		this.ctype = 'text';
 		this.sizable();
 		this.set_fontsize();
 	}
 	change_fontsize(ts){
-		var siz = bricks_app.charsize;
+		var siz = bricks.app.charsize;
 		this.set_width(siz);
 		this.set_height(siz);
 	}
 	set_fontsize(){
-		var siz = bricks_app.charsize;
+		var siz = bricks.app.charsize;
 		this.set_width(siz);
 		this.set_height(siz);
 	}
@ -60,22 +61,22 @@ class Icon extends Image {
 	}
 }

-class BlankIcon extends JsWidget {
+bricks.BlankIcon = class oops extends bricks.JsWidget {
 	constructor(opts){
-		opts.width = bricks_app.charsize;
-		opts.height = bricks_app.charsize;
+		opts.width = bricks.app.charsize;
+		opts.height = bricks.app.charsize;
 		super(opts);
 		this.ctype = 'text';
 		this.sizable();
 		this.set_fontsize();
 	}
 	change_fontsize(ts){
-		var siz = bricks_app.charsize + 'px';
+		var siz = bricks.app.charsize + 'px';
 		this.set_width(siz);
 		this.set_height(siz);
 	}
 	set_fontsize(){
-		var siz = bricks_app.charsize + 'px';
+		var siz = bricks.app.charsize + 'px';
 		this.set_width(siz);
 		this.set_height(siz);
 	}
@ -89,6 +90,6 @@ class BlankIcon extends JsWidget {
 	}
 }

-Factory.register('Image', Image);
-Factory.register('Icon', Icon);
-Factory.register('BlankIcon', BlankIcon);
+bricks.Factory.register('Image', bricks.Image);
+bricks.Factory.register('Icon', bricks.Icon);
+bricks.Factory.register('BlankIcon', bricks.BlankIcon);
--- a/bricks/input.js
+++ b/bricks/input.js
@ -1,4 +1,5 @@
-class UiType extends Layout {
+bricks = window.bricks || {};
+bricks.UiType =class extends bricks.Layout {
 	constructor(opts){
 		super(opts);
 		this.name = this.opts.name;
@ -38,7 +39,7 @@ class UiType extends Layout {
 	}
 }

-class UiStr extends UiType {
+bricks.UiStr =class extends bricks.UiType {
 	static uitype='str';
 	/*
 	{
@ -94,7 +95,7 @@ class UiStr extends UiType {
 			el.defaultValue = this.opts.defaultValue;
 		this.reset()
 		if (this.opts.tip)
-			el.placeholder = bricks_app.i18n._(this.opts.tip);
+			el.placeholder = bricks.app.i18n._(this.opts.tip);
 		el.addEventListener('focus', this.onfocus.bind(this));
 		el.addEventListener('blur', this.onblur.bind(this));
 		el.addEventListener('input', this.set_value_from_input.bind(this))
@ -143,7 +144,7 @@ class UiStr extends UiType {
 	}
 }

-class UiPassword extends UiStr {
+bricks.UiPassword =class extends bricks.UiStr {
 	static uitype='password';
 	/*
 	{
@ -163,7 +164,7 @@ class UiPassword extends UiStr {
 		this.dom_element.type = 'password';
 	}
 }
-class UiInt extends UiStr {
+bricks.UiInt =class extends bricks.UiStr {
 	static uitype='int';
 	/* 
 	{
@ -187,7 +188,7 @@ class UiInt extends UiStr {
 	}

 }
-class UiFloat  extends UiInt {
+bricks.UiFloat  =class extends bricks.UiInt {
 	static uitype='float';
 	/* 
 	{
@ -213,7 +214,7 @@ class UiFloat  extends UiInt {
 		this.dom_element.value = '' + v;
 	}
 }
-class UiTel extends UiStr {
+bricks.UiTel =class extends bricks.UiStr {
 	static uitype='tel';
 	/*
 	{
@ -230,7 +231,7 @@ class UiTel extends UiStr {
 	}
 }

-class UiEmail extends UiStr {
+bricks.UiEmail =class extends bricks.UiStr {
 	static uitype='email';
 	/*
 	{
@ -246,7 +247,7 @@ class UiEmail extends UiStr {
 	}
 }

-class UiFile extends UiStr {
+bricks.UiFile =class extends bricks.UiStr {
 	static uitype='file';
 	/*
 	{
@ -272,7 +273,7 @@ class UiFile extends UiStr {

 }

-class UiCheck extends UiType {
+bricks.UiCheck =class extends bricks.UiType {
 	static uitype = 'check';
 	constructor(opts){
 		super(opts);
@ -319,7 +320,7 @@ class UiCheck extends UiType {
 	}
 }

-class UiCheckBox extends UiType {
+bricks.UiCheckBox =class extends bricks.UiType {
 	static uitype='checkbox';
 	/*
 	{
@ -353,7 +354,7 @@ class UiCheckBox extends UiType {
 		this.set_fontsize();
 		this.el_legend = this._create('legend');
 		var label = this.opts.label||this.opts.name;
-		this.el_legend.innerText = bricks_app.i18n._(label);
+		this.el_legend.innerText = bricks.app.i18n._(label);
 		if (this.opts.dataurl){
 			schedule_once(this.load_data_onfly.bind(this), 0.01);
 		} else {
@ -426,7 +427,7 @@ class UiCheckBox extends UiType {
 	}
 }

-class UiDate extends UiStr {
+bricks.UiDate =class extends bricks.UiStr {
 	static uitype='date';
 	/* 
 	{
@ -450,7 +451,7 @@ class UiDate extends UiStr {
 	}
 }

-class UiText extends UiType {
+bricks.UiText =class extends bricks.UiType {
 	static uitype='text';
 	/*
 	{
@ -501,7 +502,7 @@ class UiText extends UiType {
 	}
 }

-class UiCode extends UiType {
+bricks.UiCode =class extends bricks.UiType {
 	/*
 	{
 		name:
@ -557,7 +558,7 @@ class UiCode extends UiType {
 		for (var i=0; i<data.length; i++){
 			var o = document.createElement('option');
 			o.value = data[i][this.opts.valueField||'value'];
-			o.innerText = bricks_app.i18n._(data[i][this.opts.textField||'text']);
+			o.innerText = bricks.app.i18n._(data[i][this.opts.textField||'text']);
 			this.option_widgets[o.value] = o;
 			if (o.value == v){
 				o.selected = true;
@ -592,7 +593,7 @@ class UiCode extends UiType {
 	}
 }

-class _Input {
+bricks._Input = class {
 	constructor(){
 		this.uitypes = [];
 	}
@ -607,7 +608,7 @@ class _Input {
 			return;
 		
 		}
-		Factory.register(name, Klass);
+		bricks.Factory.register(name, Klass);
 		this.uitypes[Klass.uitype] = Klass;
 	}
 	factory(options){
@ -620,7 +621,7 @@ class _Input {
 	}
 }

-class UiAudio extends UiStr {
+bricks.UiAudio =class extends bricks.UiStr {
 	static uitype = 'audio';
 	constructor(opts){
 		super(opts);
@ -655,7 +656,7 @@ class UiAudio extends UiStr {
 		this.btn.dispatch('click');
 	}
 }
-class UiVideo extends UiStr {
+bricks.UiVideo =class extends bricks.UiStr {
 	static uitype = 'video';
 	constructor(opts){
 		super(opts);
@ -690,18 +691,18 @@ class UiVideo extends UiStr {
 		this.btn.dispatch('click');
 	}
 }
-var Input = new _Input();
-Input.register('UiStr', UiStr);
-Input.register('UiTel', UiTel);
-Input.register('UiDate', UiDate);
-Input.register('UiInt', UiInt);
-Input.register('UiFloat', UiFloat);
-Input.register('UiCheck', UiCheck);
-Input.register('UiCheckBox', UiCheckBox);
-Input.register('UiEmail', UiEmail);
-Input.register('UiFile', UiFile);
-Input.register('UiCode', UiCode);
-Input.register('UiText', UiText);
-Input.register('UiPassword', UiPassword);
-Input.register('UiAudio', UiAudio);
-Input.register('UiVideo', UiVideo);
+var Input = new bricks._Input();
+Input.register('UiStr', bricks.UiStr);
+Input.register('UiTel', bricks.UiTel);
+Input.register('UiDate', bricks.UiDate);
+Input.register('UiInt', bricks.UiInt);
+Input.register('UiFloat', bricks.UiFloat);
+Input.register('UiCheck', bricks.UiCheck);
+Input.register('UiCheckBox', bricks.UiCheckBox);
+Input.register('UiEmail', bricks.UiEmail);
+Input.register('UiFile', bricks.UiFile);
+Input.register('UiCode', bricks.UiCode);
+Input.register('UiText', bricks.UiText);
+Input.register('UiPassword', bricks.UiPassword);
+Input.register('UiAudio', bricks.UiAudio);
+Input.register('UiVideo', bricks.UiVideo);
--- a/bricks/jsoncall.js
+++ b/bricks/jsoncall.js
@ -40,7 +40,7 @@ class HttpText {
 	add_own_params(params){
 		if (! params) 
 			params = {};
-		var session =  bricks_app.get_session();
+		var session =  bricks.app.get_session();
 		if (params instanceof FormData){
 			for ( const [key, value] of Object.entries(this.params)){
 				params.append(key, value);
@ -87,11 +87,11 @@ class HttpText {
 			var ck =  objget(fetchResult.headers, 'Set-Cookie');
 			if (ck){
 				var session = ck.split(';')[0];
-				bricks_app.save_session(session);
+				bricks.app.save_session(session);
 			}
 			return result;
 		}
-		if (fetchResult.status == 401 && bricks_app.login_url){
+		if (fetchResult.status == 401 && bricks.app.login_url){
 			return await this.withLoginInfo(url, _params);
 		}
 		const resp_error = {
@ -113,7 +113,7 @@ class HttpText {
 			"id":"login_form",
 			"widgettype":"urlwidget",
 			"options":{
-				"url":bricks_app.login_url
+				"url":bricks.app.login_url
 			}
 		});
 		var login_info = await new Promise((resolve, reject, w) => {
@ -150,7 +150,7 @@ class HttpText {
 	}	
 	set_authorization_header(params, lgin_info){
 		var auth = 'password' + '::' + login_info.user + '::' + login_info.password;
-		var rsa = bricks_app.rsa;
+		var rsa = bricks.app.rsa;
 		var code = rsa.encrypt(auth);
 		self.header.authorization = btoa(code)
 	}
--- a/bricks/layout.js
+++ b/bricks/layout.js
@ -1,4 +1,5 @@
-class Layout extends JsWidget {
+var bricks = window.bricks || {};
+bricks.Layout = class  extends bricks.JsWidget {
 	constructor(options){
 		super(options);
 		this._container = true;
@ -51,7 +52,7 @@ class Layout extends JsWidget {
 	}
 }

-class _Body extends Layout {
+bricks._Body = class extends bricks.Layout {
 	constructor(options){
 		super(options);
 	}
@ -61,38 +62,38 @@ class _Body extends Layout {
 	}
 }

-Body = new _Body();
+bricks.Body = new bricks._Body();

-class VBox extends Layout {
+bricks.VBox = class extends bricks.Layout {
 	constructor(options){
 		super(options);
 		this.set_css('vcontainer');
 	}
 }

-class VFiller extends Layout {
+bricks.VFiller = class extends bricks.Layout {
 	constructor(options){
 		super(options);
 		this.set_css('vfiller');
 	}
 }

-class HBox extends Layout {
+bricks.HBox = class extends bricks.Layout {
 	constructor(options){
 		super(options);
 		this.set_css('hcontainer');
 	}
 }

-class HFiller extends Layout {
+bricks.HFiller = class extends bricks.Layout {
 	constructor(options){
 		super(options);
 		this.set_css('hfiller');
 	}
 }

-Factory.register('HBox', HBox);
-Factory.register('VBox', VBox);
-Factory.register('HFiller', HFiller);
-Factory.register('VFiller', VFiller);
+bricks.Factory.register('HBox', bricks.HBox);
+bricks.Factory.register('VBox', bricks.VBox);
+bricks.Factory.register('HFiller', bricks.HFiller);
+bricks.Factory.register('VFiller', bricks.VFiller);

--- a/bricks/markdown_viewer.js
+++ b/bricks/markdown_viewer.js
@ -1,10 +1,11 @@
+bricks = window.bricks || {};
 /* 
 reply on "https://github.com/markedjs/marked"
 add following lines before 'bricks.js'
 <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
 */

-class MdText extends JsWidget {
+bricks.MdText = class extends bricks.JsWidget {
 	/* options
 	{
 		"md_url":
@ -41,7 +42,7 @@ class MdText extends JsWidget {
 		this.dispatch('loaded', {'url':md_url});
 	}
 }
-class MarkdownViewer extends VBox {
+bricks.MarkdownViewer = class extends bricks.VBox {
 	/* options 
 	{
 		navigator:true
@ -125,4 +126,4 @@ class MarkdownViewer extends VBox {
 	}
 }

-Factory.register('MarkdownViewer', MarkdownViewer);
+bricks.Factory.register('MarkdownViewer', bricks.MarkdownViewer);
--- a/bricks/menu.js
+++ b/bricks/menu.js
@ -1,6 +1,7 @@
+bricks = window.bricks || {};
 /*
 */
-class Menu extends VBox {
+bricks.Menu = class extends bricks.VBox {
 	/*
 	{
 		"items":
@ -49,7 +50,7 @@ class Menu extends VBox {
 		}
 	}
 	create_menuitem(item){
-		let i18n = bricks_app.i18n;
+		let i18n = bricks.app.i18n;
 		console.log('i18n=', i18n);
 		let e = document.createElement('div');
 		e.textContent = i18n._(item.label || item.name);
@ -59,4 +60,4 @@ class Menu extends VBox {
 	}
 }

-Factory.register('Menu', Menu);
+bricks.Factory.register('Menu', bricks.Menu);
--- a/bricks/message.js
+++ b/bricks/message.js
@ -1,4 +1,5 @@
-class BPopup extends VBox {
+bricks = window.bricks || {};
+bricks.BPopup = class extends bricks.VBox {
 	/* 
 	{
 		holder:
@ -59,7 +60,7 @@ class BPopup extends VBox {
 	}
 }

-class BMessage extends BPopup {
+bricks.BMessage = class extends bricks.BPopup {
 	/* 
 	{
 		title:
@ -79,14 +80,14 @@ class BMessage extends BPopup {
 	}
 }

-class BError extends BMessage {
+bricks.BError = class extends bricks.BMessage {
 	constructor(opts){
 		super(opts);
 		this.set_css('error');
 	}
 }

-class PopupForm extends BPopup {
+bricks.PopupForm = class extends bricks.BPopup {
 	/* 
 	{
 		form:{
@ -104,6 +105,6 @@ class PopupForm extends BPopup {
 		this.dismiss();
 	}
 }
-Factory.register('BMessage', BMessage);
-Factory.register('BError', BError);
-Factory.register('PopupForm', PopupForm);
+bricks.Factory.register('BMessage', bricks.BMessage);
+bricks.Factory.register('BError', bricks.BError);
+bricks.Factory.register('PopupForm', bricks.PopupForm);
--- a/bricks/miniform.js
+++ b/bricks/miniform.js
@ -1,4 +1,5 @@
-class MiniForm extends HBox {
+bricks = window.bricks || {};
+bricks.MiniForm = class extends bricks.HBox {
 	/*
 	{
 		defaultname:
@ -80,4 +81,4 @@ class MiniForm extends HBox {
 	}
 }

-Factory.register('MiniForm', MiniForm);
+bricks.Factory.register('MiniForm', bricks.MiniForm);
--- a/bricks/modal.js
+++ b/bricks/modal.js
@ -1,4 +1,5 @@
-class Modal extends Layout {
+bricks = window.bricks || {};
+bricks.Modal = class extends bricks.Layout {
 	constructor(options){
 		/*
 		{
@ -81,7 +82,7 @@ class Modal extends Layout {
 	}
 }

-class ModalForm extends Modal {
+bricks.ModalForm = class extends bricks.Modal {
 	/*
 	{
 		auto_open:
@ -116,6 +117,6 @@ class ModalForm extends Modal {
 		this.form.bind('submit', this.dismiss.bind(this));
 	}
 }
-Factory.register('Modal', Modal);
-Factory.register('ModalForm', ModalForm);
+bricks.Factory.register('Modal', bricks.Modal);
+bricks.Factory.register('ModalForm', bricks.ModalForm);
 	
--- a/bricks/multiple_state_image.js
+++ b/bricks/multiple_state_image.js
@ -1,4 +1,5 @@
-class MultipleStateImage extends Layout {
+bricks = window.bricks || {};
+bricks.MultipleStateImage = class extends bricks.Layout {
 	/* 
 	{
 		state:
@ -44,7 +45,7 @@ class MultipleStateImage extends Layout {
 	}
 }

-class MultipleStateIcon extends Icon {
+bricks.MultipleStateIcon = class extends bricks.Icon {
 	constructor(opts){
 		opts.url = opts.urls[opts.state];
 		super(opts);
@ -71,5 +72,6 @@ class MultipleStateIcon extends Icon {
 	}

 }
-Factory.register('MultipleStateImage', MultipleStateImage);
+bricks.Factory.register('MultipleStateImage', bricks.MultipleStateImage);
+bricks.Factory.register('MultipleStateIcon', bricks.MultipleStateIcon);

--- a/bricks/scroll.js
+++ b/bricks/scroll.js
@ -1,3 +1,4 @@
+bricks = window.bricks || {};

 var low_handle = function(widget, dim, last_pos, cur_pos, maxlen, winsize){
 	var dir = cur_pos - last_pos;
@ -15,7 +16,7 @@ var low_handle = function(widget, dim, last_pos, cur_pos, maxlen, winsize){
 	}
 }

-class HScrollPanel extends HFiller {
+bricks.HScrollPanel = class extends bricks.HFiller {
 	/*
 	{
 		min_threshold:
@ -49,7 +50,7 @@ class HScrollPanel extends HFiller {
 	}
 }

-class VScrollPanel extends VFiller {
+bricks.VScrollPanel = class extends bricks.VFiller {
 	/*
 	{
 		min_threshold:
@ -81,6 +82,6 @@ class VScrollPanel extends VFiller {
 	}
 }

-Factory.register('VScrollPanel', VScrollPanel);
-Factory.register('HScrollPanel', HScrollPanel);
+bricks.Factory.register('VScrollPanel', bricks.VScrollPanel);
+bricks.Factory.register('HScrollPanel', bricks.HScrollPanel);

--- a/bricks/tab.js
+++ b/bricks/tab.js
@ -1,4 +1,5 @@
-class TabPanel extends Layout {
+bricks = window.bricks || {};
+bricks.TabPanel = class extends bricks.Layout {
 	/*
 	options
 	{
@ -122,4 +123,4 @@ class TabPanel extends Layout {
 	}
 }

-Factory.register('TabPanel', TabPanel);
+bricks.Factory.register('TabPanel', bricks.TabPanel);
--- a/bricks/toolbar.js
+++ b/bricks/toolbar.js
@ -1,4 +1,5 @@
-class Toolbar extends Layout {
+bricks = window.bricks || {};
+bricks.Toolbar = class extends bricks.Layout {
 	/* toolbar options
 	{
 		orientation:
@ -127,4 +128,4 @@ class Toolbar extends Layout {
 	}
 }

-Factory.register('Toolbar', Toolbar);
+bricks.Factory.register('Toolbar', bricks.Toolbar);
--- a/bricks/tree.js
+++ b/bricks/tree.js
@ -1,4 +1,5 @@
-class TreeNode extends VBox {
+bricks = window.bricks || {};
+bricks. TreeNode = class extends bricks.VBox {
 	constructor(tree, parent, data){
 		var opts = {
 			width:'100%',
@ -20,7 +21,7 @@ class TreeNode extends VBox {
 				overflow:'hidden',
 				width:'100%'
 		})
-		n.dom_element.style.margin = bricks_app.charsize * 0.2;
+		n.dom_element.style.margin = bricks.app.charsize * 0.2;
 		this.add_widget(n);
 		n.bind('click', this.tree.node_click_handle.bind(this.tree, this));
 		this.node_widget = n;
@ -28,7 +29,7 @@ class TreeNode extends VBox {
 		if (! this.data.is_leaf) {
 			this.container = new VBox({height:'auto', overflow:'hidden'});
 			this.add_widget(this.container);
-			this.container.dom_element.style.marginLeft = bricks_app.charsize + 'px';
+			this.container.dom_element.style.marginLeft = bricks.app.charsize + 'px';
 			if (this.data.children){
 				this.tree.create_node_children(this, this.data.children);
 			}
@ -66,7 +67,7 @@ class TreeNode extends VBox {
 		this.container.hide();
 	}
 	create_node_content(widget){
-		var img_size = bricks_app.charsize;
+		var img_size = bricks.app.charsize;
 		if (this.is_leaf){
 			widget.add_widget(new BlankIcon({}));
 		} else {
@ -121,7 +122,7 @@ class TreeNode extends VBox {
 	}
 }

-class Tree extends VBox {
+bricks. Tree = class extends bricks.VBox {
 	/*
 	{
 		row_height:
@ -192,7 +193,7 @@ class Tree extends VBox {
 	}
 }

-class EditableTree extends Tree {
+bricks. EditableTree = class extends bricks.Tree {
 	/*
 	{
 		...
@ -330,7 +331,7 @@ class EditableTree extends Tree {
 		this.selected_node.move_botton();
 	}
 }
-class  PolymorphyTree extends Tree {
+bricks.  PolymorphyTree = class extends bricks.Tree {
 	/*
 	{
 		root:[t1],
@ -352,5 +353,5 @@ class  PolymorphyTree extends Tree {
 		super(opts);
 	}
 }
-Factory.register('Tree', Tree);
-Factory.register('EditableTree', EditableTree);
+bricks.Factory.register('Tree', bricks.Tree);
+bricks.Factory.register('EditableTree', bricks.EditableTree);
--- a/bricks/video.js
+++ b/bricks/video.js
@ -1,8 +1,9 @@
+bricks = window.bricks || {};
 /*
 we use videojs for video play
 https://videojs.com
 */
-class Video extends JsWidget {
+bricks.Video = class extends bricks.JsWidget {
 	/*
 	{
 		vtype:
@ -39,7 +40,7 @@ class Video extends JsWidget {
 	}
 }

-class VideoPlayer extends VBox {
+bricks.VideoPlayer = class extends bricks.VBox {
 	/* 
 	we use [indigo-player](https://github.com/matvp91/indigo-player) as a base.
 	inside body, need to add following line before bricks.js
@ -68,5 +69,5 @@ class VideoPlayer extends VBox {
 	}
 		
 }
-Factory.register('VideoPlayer', VideoPlayer);
-Factory.register('Video', Video);
+bricks.Factory.register('VideoPlayer', bricks.VideoPlayer);
+bricks.Factory.register('Video', bricks.Video);
--- a/bricks/widget.js
+++ b/bricks/widget.js
@ -1,5 +1,5 @@
-
-class JsWidget {
+bricks = window.bricks || {};
+bricks.JsWidget = class {
 	dom_element = null;
 	constructor(options){
 		if (!options){
@ -74,7 +74,7 @@ class JsWidget {
 		
 	}
 	sizable(){
-		bricks_app.text_ref(this);
+		bricks.app.text_ref(this);
 	}
 	change_fontsize(ts){
 		ts = convert2int(ts);
@ -94,7 +94,7 @@ class JsWidget {
 			this.specified_fontsize = true;
 			fontsize = this.opts.fontsize;
 		} else {
-			fontsize = bricks_app.get_textsize(this.ctype);
+			fontsize = bricks.app.get_textsize(this.ctype);
 		}
 		fontsize = convert2int(fontsize);
 		var rate = this.rate || 1;
@ -195,7 +195,7 @@ class JsWidget {
 }


-class TextBase extends JsWidget {
+bricks.TextBase = class extends bricks.JsWidget {
 	/* {
 		otext:
 		i18n:
@ -245,7 +245,7 @@ class TextBase extends JsWidget {
 		
 }

-class Text extends TextBase {
+bricks.Text = class extends bricks.TextBase {
 	constructor(opts){
 		super(opts);
 		this.ctype = 'text';
@ -253,7 +253,7 @@ class Text extends TextBase {
 	}
 }

-class Title1 extends TextBase {
+bricks.Title1 = class extends bricks.TextBase {
 	constructor(options){
 		super(options);
 		this.ctype = 'title1';
@ -262,7 +262,7 @@ class Title1 extends TextBase {
 	}
 }

-class Title2 extends TextBase {
+bricks.Title2 = class extends bricks.TextBase {
 	constructor(options){
 		super(options);
 		this.ctype = 'title2';
@ -271,7 +271,7 @@ class Title2 extends TextBase {
 	}
 }

-class Title3 extends TextBase {
+bricks.Title3 = class extends bricks.TextBase {
 	constructor(options){
 		super(options);
 		this.ctype = 'title3';
@ -280,7 +280,7 @@ class Title3 extends TextBase {
 	}
 }

-class Title4 extends TextBase {
+bricks.Title4 = class extends bricks.TextBase {
 	constructor(options){
 		super(options);
 		this.ctype = 'title4';
@ -289,7 +289,7 @@ class Title4 extends TextBase {
 	}
 }

-class Title5 extends TextBase {
+bricks.Title5 = class extends bricks.TextBase {
 	constructor(options){
 		super(options);
 		this.ctype = 'title5';
@ -298,7 +298,7 @@ class Title5 extends TextBase {
 	}
 }

-class Title6 extends TextBase {
+bricks.Title6 = class extends bricks.TextBase {
 	constructor(options){
 		super(options);
 		this.ctype = 'title6';
@ -307,11 +307,11 @@ class Title6 extends TextBase {
 	}
 }

-Factory.register('Text', Text);
-Factory.register('Title1', Title1);
-Factory.register('Title2', Title2);
-Factory.register('Title3', Title3);
-Factory.register('Title4', Title4);
-Factory.register('Title5', Title5);
-Factory.register('Title6', Title6);
+bricks.Factory.register('Text', bricks.Text);
+bricks.Factory.register('Title1', bricks.Title1);
+bricks.Factory.register('Title2', bricks.Title2);
+bricks.Factory.register('Title3', bricks.Title3);
+bricks.Factory.register('Title4', bricks.Title4);
+bricks.Factory.register('Title5', bricks.Title5);
+bricks.Factory.register('Title6', bricks.Title6);

--- a/bricks/wterm.js
+++ b/bricks/wterm.js
@ -1,7 +1,8 @@
+bricks = window.bricks || {};
 /*
 dependent on xterm.js
 */
-class Wterm extends JsWidget {
+bricks.Wterm = class extends bricks.JsWidget {
 	/*
 	{
 		ws_url:
@ -48,5 +49,5 @@ class Wterm extends JsWidget {
 	}
 }

-Factory.register('Wterm', Wterm);
+bricks.Factory.register('Wterm', bricks.Wterm);