711 lines
14 KiB
JavaScript
Executable File
711 lines
14 KiB
JavaScript
Executable File
var bricks = window.bricks || {};
|
|
bricks.UiType =class extends bricks.Layout {
|
|
constructor(opts){
|
|
super(opts);
|
|
this.name = this.opts.name;
|
|
this.required = opts.required || false;
|
|
this.ctype = 'text';
|
|
this.value = '';
|
|
}
|
|
|
|
getValue(){
|
|
var o = {}
|
|
o[this.name] = this.resultValue();
|
|
return o;
|
|
}
|
|
focus(){
|
|
this.dom_element.focus();
|
|
}
|
|
reset(){
|
|
var v = this.opts.value||this.opts.defaultvalue|| '';
|
|
this.setValue(v);
|
|
}
|
|
|
|
setValue(v){
|
|
if (! v)
|
|
v = '';
|
|
this.vlaue = v;
|
|
this.dom_element.value = v;
|
|
}
|
|
set_disabled(f){
|
|
this.dom_element.disabled = f;
|
|
}
|
|
set_readonly(f){
|
|
this.dom_element.readOnly = f;
|
|
}
|
|
set_required(f){
|
|
this.dom_element.required = f;
|
|
this.required = f;
|
|
}
|
|
}
|
|
|
|
bricks.UiStr =class extends bricks.UiType {
|
|
static uitype='str';
|
|
/*
|
|
{
|
|
name:
|
|
value:
|
|
defaultValue:
|
|
align:"left", "center", "right"
|
|
length:
|
|
minlength:
|
|
tip:
|
|
width:
|
|
readonly:
|
|
required:
|
|
}
|
|
*/
|
|
constructor(opts){
|
|
super(opts);
|
|
this.sizable();
|
|
this.set_fontsize();
|
|
if (opts.readonly) {
|
|
this.set_readonly("Y");
|
|
} else {
|
|
this.set_readonly(false);
|
|
}
|
|
if (opts.width){
|
|
this.dom_element.style.width = opts.width;
|
|
}
|
|
|
|
}
|
|
create(){
|
|
var el = this._create('input');
|
|
this.dom_element = el;
|
|
this.pattern = '.*';
|
|
el.type = 'text';
|
|
el.id = el.name = this.opts.name;
|
|
if (this.opts.required)
|
|
el.required = true;
|
|
if (this.opts.css){
|
|
el.classList.add(this.opts.css);
|
|
this.actived_css = this.opts.css + '-actived';
|
|
} else {
|
|
el.classList.add('input');
|
|
this.actived_css = 'input_actived';
|
|
}
|
|
el.style.textAlign = this.opts.align || 'left';
|
|
if (this.opts.hasOwnProperty('length'))
|
|
el.maxlength = this.opts.length;
|
|
if (this.opts.hasOwnProperty('minlength'))
|
|
el.minlength = this.opts.minlength;
|
|
if (this.opts.hasOwnProperty('value'))
|
|
this.value = this.opts.value;
|
|
if (this.opts.defaultVlaue)
|
|
el.defaultValue = this.opts.defaultValue;
|
|
this.reset()
|
|
if (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))
|
|
}
|
|
onblur(event){
|
|
this.dom_element.classList.remove(this.actived_css);
|
|
}
|
|
onfocus(event){
|
|
this.dom_element.classList.add(this.actived_css);
|
|
}
|
|
check_pattern(value){
|
|
var r = new RegExp(this.pattern);
|
|
var v = value.match(r);
|
|
if (! v || v[0] == ''){
|
|
return null;
|
|
}
|
|
return v[0];
|
|
}
|
|
set_value_from_input(event){
|
|
var e = event.target;
|
|
if (e.value == ''){
|
|
this.value = '';
|
|
return
|
|
}
|
|
if (e.type == 'file'){
|
|
this.value = e.value;
|
|
return;
|
|
}
|
|
var v = this.check_pattern(e.value);
|
|
if (v == null){
|
|
e.value = this.value;
|
|
return
|
|
}
|
|
this.value = v;
|
|
var o = this.getValue();
|
|
this.dispatch('changed', o);
|
|
}
|
|
resultValue(){
|
|
return this.value;
|
|
}
|
|
setValue(v){
|
|
if (! v)
|
|
v = '';
|
|
this.value = v;
|
|
this.dom_element.value = '' + this.value;
|
|
}
|
|
}
|
|
|
|
bricks.UiPassword =class extends bricks.UiStr {
|
|
static uitype='password';
|
|
/*
|
|
{
|
|
name:
|
|
value:
|
|
defaultValue:
|
|
align:"left", "center", "right"
|
|
length:
|
|
minlength:
|
|
tip:
|
|
readonly:
|
|
required:
|
|
}
|
|
*/
|
|
constructor(opts){
|
|
super(opts);
|
|
this.dom_element.type = 'password';
|
|
}
|
|
}
|
|
bricks.UiInt =class extends bricks.UiStr {
|
|
static uitype='int';
|
|
/*
|
|
{
|
|
length:
|
|
}
|
|
*/
|
|
constructor(options){
|
|
super(options);
|
|
this.dom_element.style.textAlign = 'right';
|
|
this.dom_element.type = 'number';
|
|
this.pattern = '\\d*';
|
|
}
|
|
resultValue(){
|
|
return parseInt(this.value);
|
|
}
|
|
setValue(v){
|
|
if (! v)
|
|
v = '';
|
|
this.value = '' + v;
|
|
this.dom_element.value = '' + v;
|
|
}
|
|
|
|
}
|
|
bricks.UiFloat =class extends bricks.UiInt {
|
|
static uitype='float';
|
|
/*
|
|
{
|
|
dec_len:
|
|
}
|
|
*/
|
|
constructor(options){
|
|
super(options);
|
|
this.pattern = '\\d*\\.?\\d+';
|
|
var dec_len = this.opts.dec_len || 2;
|
|
var step = 1;
|
|
for (var i=0; i<dec_len; i++)
|
|
step = step / 10;
|
|
this.dom_element.step = step;
|
|
}
|
|
resultValue(){
|
|
return parseFloat(this.value);
|
|
}
|
|
setValue(v){
|
|
if (! v)
|
|
v = '';
|
|
this.value = '' + v;
|
|
this.dom_element.value = '' + v;
|
|
}
|
|
}
|
|
bricks.UiTel =class extends bricks.UiStr {
|
|
static uitype='tel';
|
|
/*
|
|
{
|
|
|
|
pattern:
|
|
}
|
|
*/
|
|
constructor(opts){
|
|
super(opts);
|
|
this.dom_element.type = 'tel';
|
|
if (this.opts.pattern)
|
|
this.dom_element.pattern = this.opts.pattern;
|
|
this.pattern = '[+]?\\d+';
|
|
}
|
|
}
|
|
|
|
bricks.UiEmail =class extends bricks.UiStr {
|
|
static uitype='email';
|
|
/*
|
|
{
|
|
}
|
|
*/
|
|
constructor(opts){
|
|
super(opts);
|
|
this.dom_element.type = 'email';
|
|
if (this.opts.pattern)
|
|
this.dom_element.pattern = this.opts.pattern;
|
|
if (this.opts.pattern)
|
|
this.dom_element.pattern = this.opts.pattern;
|
|
}
|
|
}
|
|
|
|
bricks.UiFile =class extends bricks.UiStr {
|
|
static uitype='file';
|
|
/*
|
|
{
|
|
accept:
|
|
capture:"user" or "environment"
|
|
multiple:
|
|
}
|
|
*/
|
|
constructor(opts){
|
|
super(opts);
|
|
this.dom_element.type = 'file';
|
|
if (this.opts.accept)
|
|
this.dom_element.accept = this.opts.accept;
|
|
if (this.opts.capture)
|
|
this.dom_element.capture = this.opts.capture;
|
|
if (this.opts.multiple)
|
|
this.dom_element.multiple = true;
|
|
}
|
|
setValue(v){
|
|
return;
|
|
this.value = v;
|
|
}
|
|
|
|
}
|
|
|
|
bricks.UiCheck =class extends bricks.UiType {
|
|
static uitype = 'check';
|
|
constructor(opts){
|
|
super(opts);
|
|
extend(UiCheck.prototype, Layout.prototype);
|
|
this.add_widget = Layout.prototype.add_widget.bind(this);
|
|
this.dom_element.style.width = 'auto';
|
|
this.dom_element.style.height = 'auto';
|
|
var state = 'unchecked';
|
|
if (opts.value){
|
|
state = 'checked';
|
|
}
|
|
this.ms_icon = new bricks.MultipleStateIcon({
|
|
state:state,
|
|
urls:{
|
|
checked:bricks_resource('imgs/checkbox-checked.png'),
|
|
unchecked:bricks_resource('imgs/checkbox-unchecked.png')
|
|
}
|
|
});
|
|
|
|
this.add_widget(this.ms_icon)
|
|
this.ms_icon.bind('state_changed', this.set_value_from_input.bind(this));
|
|
|
|
}
|
|
set_value_from_input(e){
|
|
var v;
|
|
if (this.ms_icon.state=='checked')
|
|
v = true;
|
|
else
|
|
v = false;
|
|
this.value = v;
|
|
var o = {};
|
|
o[this.name] = this.value;
|
|
this.dispatch('changed', o);
|
|
}
|
|
setValue(v){
|
|
this.value = v;
|
|
if (v)
|
|
this.ms_icon.set_state('checked');
|
|
else
|
|
this.ms_icon.set_state('unchecked');
|
|
}
|
|
resultValue(){
|
|
return this.value;
|
|
}
|
|
}
|
|
|
|
bricks.UiCheckBox =class extends bricks.UiType {
|
|
static uitype='checkbox';
|
|
/*
|
|
{
|
|
name:
|
|
label:
|
|
value:
|
|
textField:'gg',
|
|
valueField:'hh',
|
|
otherField:'b',
|
|
data:[
|
|
{
|
|
'gg':
|
|
'hh':
|
|
'b':
|
|
}
|
|
]
|
|
or:
|
|
dataurl:
|
|
params:{},
|
|
method:
|
|
}
|
|
*/
|
|
constructor(opts){
|
|
super(opts);
|
|
this.valueField = opts.valueField || 'value';
|
|
this.textField = opts.textField || 'text';
|
|
this.value = this.opts.value || this.opts.defaultValue||[];
|
|
if (! Array.isArray(this.value)){
|
|
this.value = [ this.value ];
|
|
}
|
|
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);
|
|
if (this.opts.dataurl){
|
|
schedule_once(this.load_data_onfly.bind(this), 0.01);
|
|
} else {
|
|
this.data = opts.data;
|
|
this.build_checkboxs();
|
|
}
|
|
}
|
|
create(){
|
|
this.dom_element = this._create('fieldset');
|
|
}
|
|
build_checkboxs(){
|
|
var data = this.data;
|
|
this.input_boxs = [];
|
|
for (var i=0; i<data.length;i++){
|
|
var hbox = new bricks.HBox({height:"auto",width:"100%"});
|
|
var opts = {}
|
|
var value = data[i][this.valueField];
|
|
if (this.value == value){
|
|
opts.value = true;
|
|
}
|
|
var check = new bricks.UiCheck(opts);
|
|
var otext = data[i][this.textField];
|
|
var txt = new bricks.Text({
|
|
otext:otext,
|
|
align:'left',
|
|
i18n:true});
|
|
txt.ht_left();
|
|
check.bind('changed', this.set_value_from_input.bind(this));
|
|
hbox.add_widget(check);
|
|
hbox.add_widget(txt);
|
|
this.add_widget(hbox);
|
|
this.input_boxs.push(check);
|
|
}
|
|
}
|
|
async load_data_onfly(){
|
|
var jcall = bricks.jcall;
|
|
var data = await jcall(this.opts.dataurl, {
|
|
"method":this.opts.method||'GET',
|
|
"params":this.opts.params});
|
|
this.data = data;
|
|
this.build_checkboxs();
|
|
}
|
|
set_value_from_input(event){
|
|
event.stopPropagation();
|
|
var e = event.target;
|
|
if (e.state=='checked'){
|
|
this.value.push(e.value);
|
|
} else {
|
|
this.value.remove(e.value)
|
|
}
|
|
var o = {};
|
|
o[this.name] = this.value;
|
|
this.dispatch('changed', o);
|
|
}
|
|
resultValue(){
|
|
return this.value;
|
|
}
|
|
setValue(v){
|
|
if (Array.isArray(v)){
|
|
this.value = v;
|
|
} else {
|
|
this.value = [v];
|
|
}
|
|
for (var i=0; i<this.input_boxs.length; i++){
|
|
if (this.value.includes(this.data[i][this.valueField])){
|
|
this.input_boxs[i].setValue(true);
|
|
} else {
|
|
this.input_boxs[i].setValue(false);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
bricks.UiDate =class extends bricks.UiStr {
|
|
static uitype='date';
|
|
/*
|
|
{
|
|
max_date:
|
|
min_date:
|
|
|
|
*/
|
|
constructor(options){
|
|
super(options);
|
|
this.opts_setup();
|
|
}
|
|
opts_setup(){
|
|
var e = this.dom_element;
|
|
e.type = 'date';
|
|
if (this.opts.max_date){
|
|
e.max = this.opts.max_date;
|
|
}
|
|
if (this.opts.min_date){
|
|
e.min = this.opts.min_date;
|
|
}
|
|
}
|
|
}
|
|
|
|
bricks.UiText =class extends bricks.UiType {
|
|
static uitype='text';
|
|
/*
|
|
{
|
|
name:
|
|
value:
|
|
defaultValue:
|
|
tip:
|
|
rows:
|
|
cols:
|
|
readonly:
|
|
required:
|
|
}
|
|
*/
|
|
constructor(opts){
|
|
super(opts);
|
|
this.build();
|
|
this.sizable();
|
|
this.set_fontsize();
|
|
}
|
|
create(){
|
|
this.dom_element = this._create('textarea');
|
|
}
|
|
build(){
|
|
var e = this.dom_element;
|
|
e.id = e.name = this.opts.name;
|
|
e.rows = this.opts.rows || 5;
|
|
e.cols = this.opts.cols || 40;
|
|
// this.setValue(this.opts.value || this.opts.defaultvalue || '');
|
|
this.reset();
|
|
this.bind('input', this.set_value_from_input.bind(this))
|
|
}
|
|
set_value_from_input(event){
|
|
this.value = this.dom_element.innerText;
|
|
}
|
|
resultValue(){
|
|
return this.value;
|
|
}
|
|
setValue(v){
|
|
if (! v) v = '';
|
|
this.value = v;
|
|
this.dom_element.innerText = '';
|
|
this.dom_element.innerText = v;
|
|
debug('UiText: v=', v);
|
|
}
|
|
reset(){
|
|
var v = this.opts.value || this.opts.defaultvalue||'';
|
|
this.setValue(v);
|
|
}
|
|
}
|
|
|
|
bricks.UiCode =class extends bricks.UiType {
|
|
/*
|
|
{
|
|
name:
|
|
value:
|
|
valueField:
|
|
textField:
|
|
defaultValue:
|
|
readonly:
|
|
required:
|
|
data:
|
|
dataurl:
|
|
params:
|
|
method:
|
|
}
|
|
*/
|
|
static uitype='code';
|
|
constructor(opts){
|
|
super(opts);
|
|
this.data = this.opts.data;
|
|
this.build();
|
|
}
|
|
create(){
|
|
this.dom_element = this._create('select');
|
|
}
|
|
build(){
|
|
this.dom_element.id = this.opts.name;
|
|
this.dom_element.name = this.opts.name;
|
|
if (this.opts.dataurl){
|
|
schedule_once(this.get_data.bind(this), 0.01);
|
|
return;
|
|
}
|
|
this.build_options(this.opts.data);
|
|
}
|
|
async get_data(event){
|
|
var params = this.opts.params;
|
|
if(event){
|
|
extend(params, event.params);
|
|
}
|
|
var jcall = bricks.jcall;
|
|
var d = await jcall(this.opts.dataurl,
|
|
{
|
|
method:this.opts.method || 'GET',
|
|
params : params
|
|
});
|
|
this.data = d;
|
|
this.build_options(d);
|
|
}
|
|
build_options(data){
|
|
var e = this.dom_element;
|
|
e.replaceChildren();
|
|
var v = this.opts.value || this.opts.defaultvalue;
|
|
this.value = v;
|
|
this.option_widgets = {};
|
|
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']);
|
|
this.option_widgets[o.value] = o;
|
|
if (o.value == v){
|
|
o.selected = true;
|
|
}
|
|
e.appendChild(o);
|
|
this.sizable_elements.push(o);
|
|
}
|
|
this.bind('input', this.set_value_from_input.bind(this))
|
|
this.sizable();
|
|
this.set_fontsize();
|
|
}
|
|
set_value_from_input(event){
|
|
this.value = this.dom_element.value;
|
|
this.dispatch('changed', this.getValue());
|
|
}
|
|
resultValue(){
|
|
return this.value;
|
|
}
|
|
setValue(v){
|
|
this.value = v;
|
|
for (var i=0; i<this.option_widgets.length; i++){
|
|
if (this.value == this.option_widgets[i].value){
|
|
this.option_widgets[i].checked = true
|
|
} else {
|
|
this.option_widgets[i].checked = true
|
|
}
|
|
}
|
|
}
|
|
reset(){
|
|
var v = this.opts.value||this.opts.defaultvalue||'';
|
|
this.setValue(v);
|
|
}
|
|
}
|
|
|
|
bricks._Input = class {
|
|
constructor(){
|
|
this.uitypes = [];
|
|
}
|
|
|
|
register(name, Klass){
|
|
if (! Klass){
|
|
console.log('Klass not defined', name);
|
|
return;
|
|
}
|
|
if (! Klass.uitype){
|
|
console.log('uitype of Klass not defined', name);
|
|
return;
|
|
|
|
}
|
|
bricks.Factory.register(name, Klass);
|
|
this.uitypes[Klass.uitype] = Klass;
|
|
}
|
|
factory(options){
|
|
var klass = objget(this.uitypes, options.uitype);
|
|
if (klass){
|
|
return new klass(options);
|
|
}
|
|
console.log('create input for:', options.uitype, 'failed');
|
|
return null;
|
|
}
|
|
}
|
|
|
|
bricks.UiAudio =class extends bricks.UiStr {
|
|
static uitype = 'audio';
|
|
constructor(opts){
|
|
super(opts);
|
|
this.autoplay = opts.autoplay;
|
|
this.readonly = opts.readonly;
|
|
this.icon = new bricks.Icon({
|
|
url: bricks_resource('imgs/right_arrow.png')});
|
|
this.add_widget(this.icon);
|
|
this.icon.bind('click', this.play_audio.bind(this));
|
|
this.player = new bricks.Audio({
|
|
url:this.value
|
|
});
|
|
if (this.autoplay){
|
|
schedule_once(this.autoplay_audio.bind(this), 1);
|
|
}
|
|
|
|
}
|
|
autoplay_audio(){
|
|
this.icon.dispatch('click');
|
|
}
|
|
play_audio(){
|
|
this.player.toggle_play();
|
|
}
|
|
play_audio(){
|
|
if(this.value!=this.player.src){
|
|
this.player.stop();
|
|
this.player.set_source(this.value);
|
|
this.player.play();
|
|
return
|
|
}
|
|
this.player.toggle_play();
|
|
this.btn.dispatch('click');
|
|
}
|
|
}
|
|
bricks.UiVideo =class extends bricks.UiStr {
|
|
static uitype = 'video';
|
|
constructor(opts){
|
|
super(opts);
|
|
this.autoplay = opts.autoplay;
|
|
this.readonly = opts.readonly;
|
|
this.icon = new bricks.Icon({
|
|
url: bricks_resource('imgs/right_arrow.png')});
|
|
this.add_widget(this.icon);
|
|
this.icon.bind('click', this.play_audio.bind(this));
|
|
this.player = new bricks.VideoPlayer({
|
|
url:this.value
|
|
});
|
|
if (this.autoplay){
|
|
schedule_once(this.autoplay_audio.bind(this), 1);
|
|
}
|
|
|
|
}
|
|
autoplay_audio(){
|
|
this.icon.dispatch('click');
|
|
}
|
|
play_audio(){
|
|
this.player.toggle_play();
|
|
}
|
|
play_audio(){
|
|
if(this.value!=this.player.src){
|
|
this.player.stop();
|
|
this.player.set_source(this.value);
|
|
this.player.play();
|
|
return
|
|
}
|
|
this.player.toggle_play();
|
|
this.btn.dispatch('click');
|
|
}
|
|
}
|
|
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);
|