bricks/bricks/input.js
2024-04-12 16:01:45 +08:00

820 lines
17 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 = opts.value || opts.defaultvalue||'';
}
getValue(){
var o = {}
o[this.name] = this.resultValue();
var d = this.getUserData();
if (d){
o = bricks.extend(o, d);
}
return o;
}
resultValue(){
return this.value;
}
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.UiAudioText = class extends bricks.UiType {
/*
{
"upload_url"
}
*/
static uitype = 'audiotext';
constructor(opts){
super(opts);
this.recorder = new bricks.AudioRecorder({
icon_rate:2,
upload_url:opts.upload_url
});
this.recorder.bind('record_started', this.clear_text.bind(this));
this.add_widget(this.recorder);
var opts1 = bricks.extend({}, opts);
opts1.width = "97%";
this.text_w = new bricks.UiText(opts1);
this.add_widget(this.text_w);
this.recorder.bind('uploaded', this.set_result_text.bind(this));
}
clear_text(){
this.text_w.setValue('');
}
getValue(){
return this.text_w.getValue();
}
setValue(v){
this.text_w.setValue(v);
}
set_result_text(event){
var txt = event.params.text;
this.text_w.setValue(txt);
}
}
bricks.UiHide = class extends bricks.UiType {
static uitype = 'hide';
constructor(opts){
super(opts);
this.set_style('display', 'none');
}
}
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.rate = this.opts.rate || 1;
this.dynsize = this.opts.dynsize || true;
this.cfontsize = this.opts.cfontsize || 1;
if (opts.readonly) {
this.set_readonly("Y");
} else {
this.set_readonly(false);
}
if (opts.width){
this.dom_element.style.width = opts.width;
}
this.charsize_sizing();
}
create(){
var el = this._create('input');
this.dom_element = el;
this.pattern = '.*';
el.type = 'text';
el.id = this.name = 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.setValue(this.opts.value);
if (this.opts.defaultVlaue)
el.defaultValue = this.opts.defaultValue;
this.reset()
if (this.opts.placeholder)
el.placeholder = bricks.app.i18n._(this.opts.placeholder);
el.addEventListener('focus', this.onfocus.bind(this));
el.addEventListener('onkeydown', this.onkeydown.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);
this.value = this.dom_element.value;
this.set_value_from_input(event);
}
onfocus(event){
this.dom_element.classList.add(this.actived_css);
}
onkeydown(event){
if(event.key == 'Enter'){
this.dispatch('blur', )
}
}
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 oldv = this.value;
var changed = false;
var e = event.target;
var v = e.value;
if (e.value!='' && e.type != 'file'){
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(){
this.value = this.dom_element.value;
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){
opts.dynsize = opts.dynsize || true;
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;
this.fileContents = [];
}
get_files(){
return this.dom_element.files;
}
resultValue(){
return this.get_files();
}
setValue(v){
return;
this.value = v;
}
}
bricks.UiCheck =class extends bricks.UiType {
static uitype = 'check';
constructor(opts){
super(opts);
bricks.extend(bricks.UiCheck.prototype, bricks.Layout.prototype);
this.add_widget = bricks.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;
var d = this.getUserData();
if (d){
o = bricks.extend(o, d);
}
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.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();
}
this.sizable_elements = [];
this.sizable_elements.push(this.el_legend);
this.charsize_sizing();
}
create(){
this.dom_element = this._create('fieldset');
}
build_checkboxs(){
var data = this.data;
this.input_boxs = [];
if (this.multicheck){
if (typeof this.value != typeof []){
this.value = [this.value];
}
}
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];
opts.value = false;
if (this.multicheck){
if (this.value.indexOf(value) >= 0){
opts.value = true;
}
}
else {
if (this.value == value){
opts.value = true
}
}
opts.name = value;
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.bricks_widget;
if (this.multicheck){
if (e.value){
this.value.push(e.name);
} else {
this.value.remove(e.name)
}
} else {
for (var i=0;i<this.input_boxs.length;i++){
var e1 = this.input_boxs[i];
if (e1 != e){
e1.setValue(false);
}
}
this.value = e.name;
console.log('this is singlecheck ....', this.value);
}
var o = {};
o[this.name] = this.value;
this.dispatch('changed', o);
}
resultValue(){
return this.value;
}
setValue(v){
var thisvalue = this.value;
if (Array.isArray(v)){
thisvalue = v;
} else {
thisvalue = [v];
}
for (var i=0; i<this.input_boxs.length; i++){
if (thisvalue.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){
opts.dynsize = opts.dynsize || true;
opts.cfontsize = opts.cfontsize || 1;
super(opts);
this.build();
this.charsize_sizing();
}
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.reset();
this.bind('input', this.set_value_from_input.bind(this))
}
set_value_from_input(event){
this.value = this.dom_element.value;
}
resultValue(){
var e = this.dom_element;
this.value = e.value;
return this.value;
}
setValue(v){
if (! v) v = '';
this.value = v;
this.dom_element.value = 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){
opts.cfontsize = opts.cfontsize||1;
opts.dynsize = opts.dynsize || true;
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){
bricks.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;
e.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 (!v && i == 0){
v = o.value;
e.value = o.value;
}
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.charsize_sizing();
}
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){
bricks.debug('Klass not defined', name);
return;
}
if (! Klass.uitype){
bricks.debug('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);
}
bricks.debug('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.AudioPlayer({
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('UiHide', bricks.UiHide);
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);
Input.register('UiAudioText', bricks.UiAudioText);