eacp_webapp/components/Frequency.js

let valueMatch = /^(-?\d+(.\d+)?)(g|m|k)?(hz)?$/i;
function TextToValue(text,min,max){
    let value = 0;
    if(valueMatch.test(text)){
        let result = valueMatch.exec(text);
        let [number,decimal,calcuate] = result.slice(1,4);
        if(calcuate){
            calcuate = calcuate.toLocaleLowerCase();
        }
        let n = parseFloat(number);
        let pow = 0;
        switch(calcuate){
            case "k":
                pow = 1;
                break;
            case "m":
                pow = 2;
                break;
            case "g":
                pow = 3;
                break;
        }
        value = n * Math.pow(1000,pow);
        if(!isNaN(max) && value > max)value = max;
        if(!isNaN(min) && value < min)value = min;

    }
    return value;
}
function ValueToText(value){
    if(value == 0)return 0;
    var pow = Math.floor(Math.log(Math.abs(value)) / Math.log(1000));
    var unit = "";
    switch(pow){
        case -1:
        case 0:
            unit = ""
            break;
        case 1:
            unit = "k";
            break;
        case 2:
            unit = "m";
            break;
        default:
            unit = "g";
            break;
    }
    if(pow > 3) pow = 3;
    if(pow > 0) value = value / Math.pow(1000,pow);
    return value + unit.toUpperCase();
}
class Input extends HTMLElement{
    constructor(){
        super();
        var shadow = this.attachShadow({ mode: 'open' });
        this.$attrs = new Proxy({},{
            get:(source,property)=>{
                return this.getAttribute(property)
            },
            set:(source,property,value)=>{
                this.setAttribute(property,value);
                return true;
            }
        },{})
        // Object.defineProperty(this,'value',{
        //     get(){},
        //     set(){}
        // })
        let $el = this.$el = document.createElement('input');
        Object.assign($el.style,this.$attrs.style);
        $el.addEventListener("change",(e)=>{
            let text = (e.target.value).toLowerCase();
            this.input = 1;
            this.value = TextToValue(text,this.min,this.max);
            e.target.value = ValueToText(this.value);
            this.change();
        });
        $el.innerHTML = this.innerHTML;
        if(this.$attrs.value){
            this.input = 0;
            this.value = parseInt(this.$attrs.value);
        }else if($el.value = this.$attrs.text){
            this.input = 0;
            this.value = TextToValue($el.value,this.min,this.max);
        }
        if(this.value != 0){
            this.$el.value = ValueToText( this.value);
        }

        this.textContent = "";
        var style = document.createElement('style');
        shadow.appendChild(style);
        shadow.appendChild($el);
    }
    change(){
        var event = new Event("change");
        event.value = this.value;
        if(this.input == 0){
            this.$el.value = ValueToText( this.value);
        }
        this.dispatchEvent(event);
    }
    updateStyle(el){
        var shadow = el.shadowRoot;
        shadow.querySelector("style").textContent = `
            :host{ display:block;box-sizing: border-box;}
            input {
                background-color:#021F40;
                color:#fff;
                width:100%;
                text-align: right;
                border: solid 1px #0D5E9B;
                outline: none;
                padding: 9px 16px;
                box-sizing: border-box;
            }
            input:focus{
                border: solid 1px #409eff;
            }
            input[readonly],input[disabled]{user-select: none;pointer-events: none;}
        `;
    }
    static get observedAttributes(){
        return ['class','style','title','size',"readonly","disabled","min","max","value"];
    }
    connectedCallback(){
        this.updateStyle(this);
    }
    disconnectedCallback(){
    }
    adoptedCallback(){
    }
    attributeChangedCallback(name,oldValue,newValue){
        switch(name){
            case "size":{
                this.$el.setAttribute('class',newValue);
                break;
            }
            case "value":{
                let text = (newValue).toLowerCase();
                this.input = 1;
                this.value = TextToValue(text);
                this.$el.value = ValueToText(this.value);
                this.change();
                break;
            }
            case "max":{
                this.max = parseFloat(newValue);
                break;
            }
            case "min":{
                this.min = parseFloat(newValue);
                break;
            }
            default:{
                this.$el.setAttribute(name,newValue);
            }
        }
    }
}
Input.prototype.CONSOLE = false;
customElements.define('ex-input',Input);
document.body.addEventListener("contextmenu",(e)=>{
    e.preventDefault();
  e.stopPropagation();
  })