307 lines
4.3 KiB
JavaScript
307 lines
4.3 KiB
JavaScript
|
|
|
|
import document from '/unify/document.js';
|
|
|
|
import tools from '/unify/tools.js';
|
|
|
|
export default class textarea{
|
|
|
|
outline = "none";
|
|
|
|
margin = 12;
|
|
|
|
renderToDOM = true;
|
|
|
|
#ifdef MACOS
|
|
|
|
width = "70%";
|
|
|
|
#ifdef LIGHT
|
|
|
|
background = "rgb(0 0 0 / 3%)";
|
|
|
|
background = "rgb(0 0 0 / 3%)";
|
|
|
|
color = "black";
|
|
|
|
#endif
|
|
|
|
|
|
#ifdef DARK
|
|
|
|
background = "rgb(255 255 255 / 3%)";
|
|
|
|
background = "#3e3c3c!important";
|
|
|
|
color = "white";
|
|
|
|
#endif
|
|
|
|
padding = 6;
|
|
|
|
margin = 6;
|
|
|
|
marginRight = 20;
|
|
|
|
height = "fit-content";
|
|
|
|
borderRadius = 0;
|
|
|
|
fontWeight = "bold";
|
|
|
|
fontSize = 10;
|
|
|
|
border = "1px solid rgb(255 255 255 / 18%)";
|
|
|
|
#endif
|
|
|
|
|
|
#ifdef WINDOWS
|
|
|
|
|
|
margin = 12;
|
|
|
|
padding = 12;
|
|
|
|
|
|
borderWidth = 1;
|
|
|
|
borderRadius = 6;
|
|
|
|
|
|
borderColor = "#E5E5E5";
|
|
|
|
borderBottomColor = "#868686";
|
|
|
|
#ifdef LIGHT
|
|
|
|
background = "#F7FAFC";
|
|
|
|
border = "1px solid #E5E5E5";
|
|
|
|
|
|
#endif
|
|
|
|
|
|
#ifdef DARK
|
|
|
|
background = "#2D2D2D"
|
|
|
|
border = "1px solid #303030";
|
|
|
|
borderBottom = "2px solid #9A9A9A";
|
|
|
|
color = "WHITE";
|
|
|
|
#endif
|
|
|
|
#endif
|
|
|
|
|
|
|
|
#ifdef ANDROID
|
|
|
|
margin = 4
|
|
|
|
height = "auto"
|
|
#ifdef LIGHT
|
|
|
|
border = "1px solid #E5E5E5";
|
|
|
|
borderRadius = 20;
|
|
|
|
background = "white";
|
|
|
|
padding = 6;
|
|
|
|
#endif
|
|
|
|
#endif
|
|
|
|
|
|
|
|
focus() {
|
|
|
|
#ifdef WINDOWS
|
|
|
|
#ifdef LIGHT
|
|
|
|
this.borderBottom = "2px solid #0067C0";
|
|
|
|
this.background = "white";
|
|
|
|
#endif
|
|
|
|
#ifdef DARK
|
|
|
|
|
|
this.borderBottom = "2px solid #4CC2FF";
|
|
|
|
this.background = "#1F1F1F";
|
|
|
|
#endif
|
|
|
|
#endif WINDOWS
|
|
|
|
}
|
|
|
|
blur() {
|
|
|
|
|
|
#ifdef WINDOWS
|
|
|
|
#ifdef LIGHT
|
|
|
|
this.background = "#fbfbfb";
|
|
|
|
this.borderBottom = "2px solid #868686";
|
|
|
|
#endif
|
|
|
|
#ifdef DARK
|
|
|
|
|
|
this.background = "#2D2D2D"
|
|
|
|
this.borderBottom = "1px solid #9A9A9A";
|
|
|
|
#endif
|
|
|
|
#endif WINDOWS
|
|
|
|
}
|
|
|
|
|
|
value = "";
|
|
|
|
layers = 1;
|
|
|
|
|
|
customElement = document.createElement("textarea");
|
|
|
|
useCustomElement = true;
|
|
//border = "1px solid #d8d8d9";
|
|
|
|
scrollbarColor = "#98adc8 #eaeaea";
|
|
|
|
constructor() {
|
|
|
|
//super();
|
|
|
|
var that = this;
|
|
|
|
if( this.customElement.addEventListener ) {
|
|
|
|
this.customElement.addEventListener('keydown', function( e ) {
|
|
|
|
if( e.keyCode === 9 ) {
|
|
|
|
var start = this.selectionStart;
|
|
|
|
var end = this.selectionEnd;
|
|
|
|
var target = e.target;
|
|
|
|
var value = target.value;
|
|
|
|
// set textarea value to: text before caret + tab + text after caret
|
|
target.value = value.substring(0, start)
|
|
+ " "
|
|
+ value.substring(end);
|
|
|
|
// put caret at right position again (add one for the tab)
|
|
this.selectionStart = this.selectionEnd = start + 1;
|
|
|
|
// prevent the focus lose
|
|
e.preventDefault();
|
|
|
|
}
|
|
|
|
}, false );
|
|
|
|
}
|
|
|
|
}
|
|
|
|
async keyup( event ){
|
|
//console.log("event.target.value", event.target.value);
|
|
|
|
this.value = event.target.value;
|
|
|
|
}
|
|
|
|
setup() {
|
|
|
|
var that = this;
|
|
|
|
that._useCustomElement = this.useCustomElement;
|
|
|
|
this.__defineSetter__( "useCustomElement", function( value ) {
|
|
|
|
that._useCustomElement = value;
|
|
|
|
that.setupElement( value );
|
|
|
|
});
|
|
|
|
this.__defineGetter__( "useCustomElement", function( value ){
|
|
|
|
if( typeof that._useCustomElement == "undefined" ) {
|
|
|
|
that._useCustomElement = false;
|
|
|
|
return false;
|
|
|
|
} else {
|
|
|
|
return that._useCustomElement;
|
|
|
|
}
|
|
});
|
|
|
|
|
|
this.setupElement( this.useCustomElement );
|
|
|
|
}
|
|
|
|
setupElement( value ) {
|
|
|
|
this.customElement.setAttribute( "placeholder", this.placeholder );
|
|
|
|
|
|
if( this.element ) {
|
|
|
|
var parentNode = this.element.parentNode;
|
|
|
|
if( this.useCustomElement ) {
|
|
|
|
if( this.element.tagName != this.customElement.tagName ) {
|
|
|
|
parentNode.replaceChild( this.customElement, this.element );
|
|
|
|
this.element = this.customElement;
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
if( this.element.tagName != this.defaultElement.tagName ) {
|
|
|
|
parentNode.replaceChild( this.defaultElement, this.element );
|
|
|
|
this.element = this.defaultElement;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
this.updateElementContent();
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|