diff --git a/bricks/audio.js b/bricks/audio.js index 6661ae6..db050f5 100755 --- a/bricks/audio.js +++ b/bricks/audio.js @@ -1,6 +1,6 @@ var bricks = window.bricks || {}; -var formatMs=function(ms,all){ +bricks.formatMs=function(ms,all){ var ss=ms%1000;ms=(ms-ss)/1000; var s=ms%60;ms=(ms-s)/60; var m=ms%60;ms=(ms-m)/60; @@ -103,7 +103,7 @@ bricks.AudioRecorder = class extends bricks.HBox { // document.querySelector(".recpowerx").style.width=powerLevel+"%"; //可视化图形绘制 // wave.input(buffers[buffers.length-1],powerLevel,bufferSampleRate); - this.rec_time.set_text(' ' + formatMs(bufferDuration,1)); + this.rec_time.set_text(' ' + bricks.formatMs(bufferDuration,1)); } recOpen(){ @@ -180,6 +180,7 @@ bricks.AudioRecorder = class extends bricks.HBox { this.recClose(); } upload = async function(){ + var running = new bricks.Running({target:this}); if(!this.recordData){ bricks.debug("DUTn::请先录音,然后停止后再上传"); return; @@ -197,6 +198,7 @@ bricks.AudioRecorder = class extends bricks.HBox { }); bricks.debug('ret=', ret); this.dispatch('uploaded', ret) + running.dismiss(); } download(){ if(!this.recordData){ diff --git a/bricks/build.sh b/bricks/build.sh index d3e12a5..d60b8bb 100755 --- a/bricks/build.sh +++ b/bricks/build.sh @@ -1,6 +1,6 @@ SOURCES=" page_data_loader.js factory.js uitypesdef.js utils.js \ i18n.js widget.js layout.js bricks.js image.js \ - jsoncall.js myoperator.js scroll.js menu.js modal.js \ + jsoncall.js myoperator.js scroll.js menu.js modal.js running.js \ markdown_viewer.js video.js audio.js toolbar.js tab.js \ input.js registerfunction.js button.js accordion.js \ tree.js multiple_state_image.js dynamiccolumn.js form.js message.js conform.js \ diff --git a/bricks/dynamicaccordion.js b/bricks/dynamicaccordion.js index 20ebe96..22ab266 100644 --- a/bricks/dynamicaccordion.js +++ b/bricks/dynamicaccordion.js @@ -1,5 +1,5 @@ var bricks = window.bricks || {}; -bricks.AccordionItem = class extends bricks.FHBox { +bricks.AccordionItem = class extends bricks.FVBox { constructor(opts){ super(opts); this.set_css('accordion-item'); diff --git a/bricks/modal.js b/bricks/modal.js index 8352699..1025c0b 100755 --- a/bricks/modal.js +++ b/bricks/modal.js @@ -1,6 +1,6 @@ var bricks = window.bricks || {}; -bricks.Modal = class extends bricks.Layout { +bricks.BaseModal = class extends bricks.Layout { min_zindex = 5000; last_zindex = 5000; constructor(options){ @@ -26,13 +26,10 @@ bricks.Modal = class extends bricks.Layout { this.panel = new bricks.VBox({}); this.ancestor_add_widget(this.panel); this.panel.set_width(this.opts.width); - this.panel.dom_element.style.backgroundColor = this.opts.bgcolor|| '#e8e8e8'; this.panel.set_height(this.opts.height); + this.panel.dom_element.style.backgroundColor = this.opts.bgcolor|| '#e8e8e8'; this.panel.set_css('modal'); archorize(this.panel.dom_element, objget(this.opts, 'archor', 'cc')); - this.create_title(); - this.content = new bricks.Filler({width:'100%'}); - this.panel.add_widget(this.content); this.target_w = null; if (this.target){ if (typeof this.target === typeof ''){ @@ -46,24 +43,6 @@ bricks.Modal = class extends bricks.Layout { } this.target_w.add_widget(this); } - create_title(){ - this.title_box = new bricks.HBox({width:'100%', height:'auto'}); - this.title_box.set_css('title'); - this.panel.add_widget(this.title_box); - this.title_w = new bricks.Filler({height:'100%'}); - var icon = new bricks.Icon({url:bricks_resource('imgs/delete.png')}); - icon.bind('click', this.dismiss.bind(this)); - this.title_box.add_widget(this.title_w); - this.title_box.add_widget(icon); - if (this.title){ - var w = new bricks.Text({ - otext:this.title, - i18n:true, - dynsize:true - }); - this.title_w.add_widget(w); - } - } get_zindex(){ var idx = bricks.last_zindex; bricks.last_zindex += 1; @@ -82,6 +61,60 @@ bricks.Modal = class extends bricks.Layout { e.style.backgroundColor = 'rgba(0,0,0,0.4)'; /* Fallback color */ this.dom_element = e; } + add_widget(w, index){ + this.panel.add_widget(w, index); + if (this.opts.auto_open){ + this.open(); + } + } + open(){ + this.dom_element.style.display = ""; + } + dismiss(){ + this.dom_element.style.display = "none"; + this.target_w.remove_widget(this); + } +} +bricks.Modal = class extends bricks.BaseModal { + constructor(options){ + /* + { + target: string or Layout + auto_open: + auto_close: + org_index: + width: + height: + bgcolor: + title: + archor: cc ( tl, tc, tr + cl, cc, cr + bl, bc, br ) + } + */ + super(options); + this.create_title(); + this.content = new bricks.Filler({width:'100%'}); + this.panel.add_widget(this.content); + } + create_title(){ + this.title_box = new bricks.HBox({width:'100%', height:'auto'}); + this.title_box.set_css('title'); + this.panel.add_widget(this.title_box); + this.title_w = new bricks.Filler({height:'100%'}); + var icon = new bricks.Icon({url:bricks_resource('imgs/delete.png')}); + icon.bind('click', this.dismiss.bind(this)); + this.title_box.add_widget(this.title_w); + this.title_box.add_widget(icon); + if (this.title){ + var w = new bricks.Text({ + otext:this.title, + i18n:true, + dynsize:true + }); + this.title_w.add_widget(w); + } + } add_widget(w, index){ this.content.add_widget(w, index); @@ -101,13 +134,13 @@ bricks.Modal = class extends bricks.Layout { var f = this.click_handler.bind(this); this.bind('click', f); } - this.dom_element.style.display = ""; + bricks.BaseModal.prototype.open.bind(this)(); } dismiss(){ - this.dom_element.style.display = "none"; if (this.opts.auto_close){ this.unbind('click', this.click_handler.bind(this)); } + bricks.BaseModal.prototype.dismiss.bind(this)(); } } diff --git a/examples/recorder.ui b/examples/recorder.ui index d1c0614..6abadd4 100644 --- a/examples/recorder.ui +++ b/examples/recorder.ui @@ -3,15 +3,14 @@ "widgettype":"AudioRecorder", "options":{ "height":"40px", - "upload_url":"{{entire_url('stt.dspy')}}", - "start_icon":"/bricks/imgs/start_recording.png" + "upload_url":"{{entire_url('stt.dspy')}}" }, "binds":[ { "wid":"self", "event":"uploaded", "actiontype":"script", - "script":"alert('kwargs', kwargs, args)" + "script":"alert(event.params)" } ] }