524 lines
11 KiB
JavaScript
Executable File
524 lines
11 KiB
JavaScript
Executable File
var bricks = window.bricks || {};
|
|
/*
|
|
We use ResizeObserver to implements dom object resize event
|
|
*/
|
|
bricks.resize_observer = new ResizeObserver(entries => {
|
|
for (let entry of entries){
|
|
const cr = entry.contentRect;
|
|
const ele = entry.target;
|
|
const w = ele.bricks_widget;
|
|
// console.log('size=', cr, 'element=', ele, w);
|
|
if (w){
|
|
w.dispatch('element_resize', cr);
|
|
}
|
|
}
|
|
});
|
|
|
|
bricks.JsWidget = class {
|
|
constructor(options){
|
|
if (!options){
|
|
options = {}
|
|
}
|
|
this.dom_element = null;
|
|
this.baseURI = options.baseURI;
|
|
this.opts = options;
|
|
this.create();
|
|
this.opts_set_style();
|
|
this._container = false;
|
|
this.parent = null;
|
|
this.sizable_elements = [];
|
|
if (options.css){
|
|
this.set_css(options.css);
|
|
}
|
|
if (options.csses){
|
|
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));
|
|
}
|
|
bricks.resize_observer.observe(this.dom_element);
|
|
}
|
|
showRectage(){
|
|
return this.dom_element.getBoundingClientRect();
|
|
}
|
|
is_in_dom(){
|
|
return document.contains(this.dom_element);
|
|
}
|
|
getUserData(){
|
|
return this.user_data || null;
|
|
}
|
|
setUserData(v){
|
|
this.user_data = v;
|
|
}
|
|
create(){
|
|
this.dom_element = this._create('div')
|
|
}
|
|
_create(tagname){
|
|
return document.createElement(tagname);
|
|
}
|
|
observable(name, value){
|
|
return new bricks.Observable(this, name, value);
|
|
}
|
|
disabled(flag){
|
|
if(flag){
|
|
this.dom_element.disabled = true;
|
|
this.set_style('pointerEvents', 'none');
|
|
} else {
|
|
this.dom_element.disabled = false;
|
|
this.set_style('pointerEvents', 'auto');
|
|
}
|
|
}
|
|
opts_set_style(){
|
|
var keys = [
|
|
"width",
|
|
"dynsize",
|
|
"x",
|
|
"y",
|
|
"height",
|
|
"cursor",
|
|
"margin",
|
|
"marginLeft",
|
|
"marginRight",
|
|
"marginTop",
|
|
"marginBottom",
|
|
"padding",
|
|
"align",
|
|
"textAlign",
|
|
"overflowY",
|
|
"overflowX",
|
|
"overflow",
|
|
"flexShrink",
|
|
"minWidth",
|
|
"maxWidth",
|
|
"minHeight",
|
|
"maxHeight",
|
|
"marginLeft",
|
|
"marginRight",
|
|
"marginTop",
|
|
"marginBottom",
|
|
"zIndex",
|
|
"overflowX",
|
|
"overflowY",
|
|
"color"
|
|
];
|
|
var mapping_keys = {
|
|
"bgcolor":"backgroundColor"
|
|
};
|
|
var mkeys = Object.keys(mapping_keys);
|
|
var style = {};
|
|
var okeys = Object.keys(this.opts);
|
|
for (var k=0; k<okeys.length; k++){
|
|
if (keys.find( i => i ==okeys[k])){
|
|
style[okeys[k]] = this.opts[okeys[k]];
|
|
}
|
|
if (mkeys.find( i => i ==okeys[k])){
|
|
var mk = mapping_keys[okeys[k]];
|
|
style[mk] = this.opts[okeys[k]];
|
|
}
|
|
this[okeys[k]] = this.opts[okeys[k]];
|
|
}
|
|
if (this.opts.cwidth){
|
|
this.width = bricks.app.charsize * this.opts.cwidth;
|
|
style.width = this.width + 'px';
|
|
}
|
|
if (this.opts.cheight){
|
|
this.height = bricks.app.charsize * this.opts.cheight;
|
|
style.height = this.height + 'px';
|
|
}
|
|
if (this.opts.dynsize){
|
|
bricks.app.bind('charsize', this.charsize_sizing.bind(this))
|
|
}
|
|
bricks.extend(this.dom_element.style, style);
|
|
if (this.opts.css){
|
|
this.set_css(this.opts.css);
|
|
}
|
|
}
|
|
charsize_sizing(){
|
|
var cs = bricks.app.charsize;
|
|
var r = this.rate || 1;
|
|
if (this.cwidth){
|
|
this.set_style('width', this.cwidth * cs * r + 'px');
|
|
}
|
|
if (this.cheight){
|
|
this.set_style('height', this.cheight * cs * r + 'px');
|
|
}
|
|
if (this.cfontsize){
|
|
this.dom_element.style.fontSize = this.cfontsize * cs * r + 'px';
|
|
if (this.sizable_elements){
|
|
for (var i=0;i<this.sizable_elements.length;i++){
|
|
var e = this.sizable_elements[i];
|
|
e.style.fontSize = this.cfontsize * cs * r + 'px';
|
|
}
|
|
}
|
|
}
|
|
}
|
|
enter_fullscreen(){
|
|
var e = this.dom_element;
|
|
// 获取要全屏显示的元素
|
|
// 检查浏览器是否支持Fullscreen API
|
|
if (e.requestFullscreen) {
|
|
e.requestFullscreen();
|
|
} else if (e.mozRequestFullScreen) { // Firefox
|
|
e.mozRequestFullScreen();
|
|
} else if (e.webkitRequestFullscreen) { // Chrome, Safari and Opera
|
|
e.webkitRequestFullscreen();
|
|
} else if (e.msRequestFullscreen) { // IE/Edge
|
|
e.msRequestFullscreen();
|
|
}
|
|
}
|
|
exit_fullscreen(){
|
|
document.exitFullscreen();
|
|
}
|
|
h_center(){
|
|
this.dom_element.style.marginLeft = 'auto';
|
|
this.dom_element.style.marginRight = 'auto';
|
|
}
|
|
h_left(){
|
|
this.dom_element.style.marginLeft = '0px';
|
|
this.dom_element.style.marginRight = 'auto';
|
|
}
|
|
h_right(){
|
|
this.dom_element.style.marginLeft = 'auto';
|
|
this.dom_element.style.marginRight = '0px';
|
|
}
|
|
ht_center(){
|
|
this.dom_element.style.textAlign = 'center';
|
|
}
|
|
ht_left(){
|
|
this.dom_element.style.textAlign = 'left';
|
|
}
|
|
ht_right(){
|
|
this.dom_element.style.textAlign = 'right';
|
|
}
|
|
set_width(width){
|
|
if (typeof(width) == 'number'){
|
|
width = width + 'px';
|
|
}
|
|
this.dom_element.style.width = width;
|
|
}
|
|
set_height(height){
|
|
if (typeof(height) == 'number'){
|
|
height = height + 'px';
|
|
}
|
|
this.dom_element.style.height = height;
|
|
}
|
|
set_style(k, v){
|
|
this.dom_element.style[k] = v;
|
|
}
|
|
set_csses(csses, remove_flg){
|
|
var arr = csses.split(' ');
|
|
arr.forEach(c =>{
|
|
this.set_css(c, remove_flg);
|
|
})
|
|
}
|
|
unset_css(css){
|
|
this.dom_element.classList.remove(css);
|
|
}
|
|
set_css(css, remove_flg){
|
|
if (!remove_flg){
|
|
this.dom_element.classList.add(css);
|
|
} else {
|
|
this.dom_element.classList.remove(css);
|
|
}
|
|
}
|
|
set_cssObject(cssobj){
|
|
bricks.extend(this.dom_element.style, cssobj);
|
|
}
|
|
is_container(){
|
|
return this._container;
|
|
}
|
|
set_id(id){
|
|
this.id = id;
|
|
this.dom_element.id = id;
|
|
}
|
|
set_baseURI(uri){
|
|
this.baseURI = uri;
|
|
if (!this._container){
|
|
return;
|
|
}
|
|
this.children.forEach(c =>{
|
|
if (!c.baseURI){
|
|
c.set_baseURI(uri);
|
|
}
|
|
});
|
|
}
|
|
show(){
|
|
this.dom_element.style.display = '';
|
|
}
|
|
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();
|
|
} else {
|
|
this.hide();
|
|
}
|
|
}
|
|
get_width(){
|
|
return this.dom_element.clientWidth;
|
|
}
|
|
get_height(){
|
|
return this.dom_element.clientHeight;
|
|
}
|
|
bind(eventname, handler){
|
|
this.dom_element.addEventListener(eventname, handler);
|
|
}
|
|
unbind(eventname, handler){
|
|
this.dom_element.removeEventListener(eventname, handler);
|
|
}
|
|
dispatch(eventname, params){
|
|
var e = new Event(eventname);
|
|
e.params = params;
|
|
this.dom_element.dispatchEvent(e);
|
|
}
|
|
set_attribute(attr, value){
|
|
this.dom_element.setAttribute(attr, value);
|
|
}
|
|
get_attribute(attr) {
|
|
this.dom_element.getAttribute(attr);
|
|
}
|
|
selected(flag){
|
|
if(flag){
|
|
this.set_css('selected');
|
|
} else {
|
|
this.set_css('selected', true);
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
bricks.TextBase = class extends bricks.JsWidget {
|
|
/* {
|
|
otext:
|
|
i18n:
|
|
rate:
|
|
halign:
|
|
valign:
|
|
color:
|
|
bgtcolor:
|
|
css
|
|
}
|
|
*/
|
|
constructor(options){
|
|
super(options);
|
|
this.opts = options;
|
|
this.rate = this.opts.rate || 1;
|
|
this.specified_fontsize = false;
|
|
this.set_attrs();
|
|
this.dom_element.style.fontWeight = 'normal';
|
|
if (self.i18n){
|
|
bricks.app.bind('lang', this.set_i18n_text.bind(this));
|
|
}
|
|
}
|
|
set_attrs(){
|
|
if (this.opts.hasOwnProperty('text')){
|
|
this.text = this.opts.text;
|
|
}
|
|
if (this.opts.hasOwnProperty('otext')){
|
|
this.otext = this.opts.otext;
|
|
}
|
|
if (this.opts.hasOwnProperty('i18n')){
|
|
this.i18n = this.opts.i18n;
|
|
}
|
|
this._i18n = new bricks.I18n();
|
|
this.set_style('flexShrink', '0');
|
|
if (this.i18n && this.otext) {
|
|
this.text = this._i18n._(this.otext);
|
|
}
|
|
this.dom_element.innerHTML = this.text;
|
|
}
|
|
set_otext(otxt){
|
|
var text;
|
|
this.otext = otxt;
|
|
if (this.i18n) {
|
|
text = this._i18n._(this.otext);
|
|
} else {
|
|
text = this.otext;
|
|
}
|
|
this.set_text(text);
|
|
}
|
|
set_i18n_text(){
|
|
if ( !this.otext){
|
|
return;
|
|
}
|
|
if (! this.i18n){
|
|
return;
|
|
}
|
|
this.set_text(this.otext);
|
|
}
|
|
set_text(text){
|
|
this.text = text;
|
|
this.dom_element.innerHTML = this.text;
|
|
}
|
|
|
|
}
|
|
|
|
bricks.Text = class extends bricks.TextBase {
|
|
constructor(opts){
|
|
super(opts);
|
|
this.cfontsize = 1;
|
|
this.charsize_sizing();
|
|
}
|
|
}
|
|
|
|
bricks.KeyinText = class extends bricks.Text {
|
|
constructor(opts){
|
|
super(opts);
|
|
if (! this.name) {
|
|
this.name = 'data';
|
|
}
|
|
bricks.app.bind('keydown', this.key_down_action.bind(this))
|
|
}
|
|
key_down_action(event){
|
|
if (! event.key) return;
|
|
switch (event.key) {
|
|
case 'Delete':
|
|
this.set_text('');
|
|
this.dispatch_changed();
|
|
break;
|
|
case 'Backspace':
|
|
var s = this.text.substring(0, this.text.length - 1);
|
|
this.set_text(s);
|
|
this.dispatch_changed();
|
|
break;
|
|
default:
|
|
if (event.key.length == 1){
|
|
var txt = this.text + event.key;
|
|
this.set_text(txt);
|
|
this.dispatch_changed();
|
|
}
|
|
break;
|
|
}
|
|
}
|
|
dispatch_changed(){
|
|
var d = {};
|
|
d[this.name] = this.text;
|
|
this.dispatch('changed', d);
|
|
}
|
|
}
|
|
|
|
bricks.Title1 = class extends bricks.TextBase {
|
|
constructor(options){
|
|
super(options);
|
|
this.ctype = 'title1';
|
|
this.dom_element.style.fontWeight = 'bold';
|
|
this.cfontsize = 1.96;
|
|
this.charsize_sizing();
|
|
}
|
|
}
|
|
|
|
bricks.Title2 = class extends bricks.TextBase {
|
|
constructor(options){
|
|
super(options);
|
|
this.ctype = 'title2';
|
|
this.dom_element.style.fontWeight = 'bold';
|
|
this.cfontsize = 1.80;
|
|
this.charsize_sizing();
|
|
}
|
|
}
|
|
|
|
bricks.Title3 = class extends bricks.TextBase {
|
|
constructor(options){
|
|
super(options);
|
|
this.ctype = 'title3';
|
|
this.dom_element.style.fontWeight = 'bold';
|
|
this.cfontsize = 1.64;
|
|
this.charsize_sizing();
|
|
}
|
|
}
|
|
|
|
bricks.Title4 = class extends bricks.TextBase {
|
|
constructor(options){
|
|
super(options);
|
|
this.ctype = 'title4';
|
|
this.dom_element.style.fontWeight = 'bold';
|
|
this.cfontsize = 1.48;
|
|
this.charsize_sizing();
|
|
}
|
|
}
|
|
|
|
bricks.Title5 = class extends bricks.TextBase {
|
|
constructor(options){
|
|
super(options);
|
|
this.ctype = 'title5';
|
|
this.dom_element.style.fontWeight = 'bold';
|
|
this.cfontsize = 1.32;
|
|
this.charsize_sizing();
|
|
}
|
|
}
|
|
|
|
bricks.Title6 = class extends bricks.TextBase {
|
|
constructor(options){
|
|
super(options);
|
|
this.ctype = 'title6';
|
|
this.dom_element.style.fontWeight = 'bold';
|
|
this.cfontsize = 1.16;
|
|
this.charsize_sizing();
|
|
}
|
|
}
|
|
|
|
bricks.Tooltip = class extends bricks.Text {
|
|
constructor(opts){
|
|
opts.rate = 0.8;
|
|
opts.tip = null;
|
|
super(opts);
|
|
this.set_css('modal');
|
|
this.set_style('minWidth', '90px');
|
|
this.auto_task = null;
|
|
}
|
|
show(otext, event){
|
|
this.set_otext(otext);
|
|
this.set_style('zIndex', 999999999);
|
|
this.set_style('display', 'block');
|
|
var ex,ey;
|
|
var x,y;
|
|
var xsize = bricks.Body.dom_element.clientWidth;
|
|
var ysize = bricks.Body.dom_element.clientHeight;
|
|
ex = event.clientX;
|
|
ey = event.clientY;
|
|
var mxs = this.dom_element.offsetWidth;
|
|
var mys = this.dom_element.offsetHeight;
|
|
if (ex < (xsize / 2)) {
|
|
x = ex + bricks.app.charsize;
|
|
} else {
|
|
x = ex - mxs - bricks.app.charsize;
|
|
}
|
|
if (ey < (ysize / 2)) {
|
|
y = ey + bricks.app.charsize;
|
|
} else {
|
|
y = ey - mys - bricks.app.charsize;
|
|
}
|
|
this.set_style('left', x + 'px');
|
|
this.set_style('top', y + 'px');
|
|
if (this.auto_task){
|
|
this.auto_task.cancel();
|
|
}
|
|
this.auto_task = schedule_once(this.hide.bind(this), 30);
|
|
}
|
|
hide(){
|
|
if (this.auto_task){
|
|
this.auto_task.cancel();
|
|
this.auto_task = null;
|
|
}
|
|
this.set_style('display', 'none');
|
|
}
|
|
}
|
|
|
|
bricks.Factory.register('Tooltip', bricks.Tooltip);
|
|
bricks.Factory.register('Text', bricks.Text);
|
|
bricks.Factory.register('KeyinText', bricks.KeyinText);
|
|
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);
|
|
|