insight-plugin-verifier/js/dialog.ts

Insight-verifier

/**
 * 公用弹窗插件
 * 
 * date:2019年1月24日
 * author: ZC_阮
 */

interface dialogOption {
  el:string;
  width:number;
  height:number;
  opacity:number;
  touchClose:boolean;
  closeBtn:boolean;
  closeEle:string;
}

export class Dialog implements dialogOption{
  el:string;
  width:number;
  height:number;
  opacity:number;
  touchClose:boolean;
  closeBtn:boolean;
  closeEle:string;
  constructor(option) {
    option=option?option:{}; 
    this.el = option.el || 'dialog';  //弹窗元素id;  默认：dialog;
    this.width = option.width || 500; //元素宽度;  默认：5rem;
    this.height = option.height || 500;  //元素高度;  默认：5rem;
    this.opacity = option.opacity || 1;  //蒙层透明度;  默认：1;
    this.touchClose = option.touchClose || false;  //点击蒙层关闭弹窗;  默认：false;
    this.closeBtn = option.closeBtn || false;  //开启关闭按钮;  默认：false;
    this.closeEle = option.closeEle || "dialog-close-btn";  //关闭按钮类名;  默认：dialog-close-btn; 
  }
  //生成蒙层
  private createWrap(){
    let window_x = document.body.clientWidth;
    let window_h = document.body.clientHeight;
    let layer = document.createElement('div');
    layer.setAttribute("id","cover-layer");
    layer.style.width = `${window_x}px`;
    layer.style.height = `${window_h}px`;
    layer.style.backgroundColor = `rgb(0,0,0,${this.opacity})`;
    layer.style.position = 'absolute';
    layer.style.left = '0';
    layer.style.top = '0';
    layer.style.zIndex = '998';
    document.body.appendChild(layer);
    let _this = this;
    if(this.touchClose == true){
      document.getElementById('cover-layer').onclick = function(){
        _this.hideDialog()
      }
    }
  }
  //生成弹窗内容
  private createEle(){
    let element = document.getElementById(this.el);
    let myEnv = this.checkMachine();
    try {
      element.style.width = "0";
    } catch (error) {
      console.error("请先在html中定义el弹窗元素");
      return;
    }
    if(myEnv == "pc"){
      element.style.width = `${this.width}px`;
      element.style.height = `${this.height}px`;
    }else{
      const TRANS_WIDTH = this.width/100;
      const TRANS_HEIGHT = this.height/100;
      element.style.width = `${TRANS_WIDTH}rem`;
      element.style.height = `${TRANS_HEIGHT}rem`;
    }
    element.style.position = 'absolute';
    element.style.left = '0';
    element.style.top = '0';
    element.style.bottom = '0';
    element.style.right = '0';
    element.style.margin = 'auto';
    element.style.zIndex = '999';
    element.style.display = 'block';
    if(this.closeBtn == true){
      let _this = this;
      let closeBtn = document.createElement('div');
      closeBtn.setAttribute("class",this.closeEle);
      element.appendChild(closeBtn);
      closeBtn.onclick = function(){
        _this.hideDialog()
      }
    }

  }
  private checkMachine(){
    if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) { //判断iPhone|iPad|iPod|iOS
      var envirment = "ios";
    } else if (/(Android)/i.test(navigator.userAgent)) {  //判断Android
      var envirment = "android";
    } else { //pc
      var envirment = "pc"
    };
    return envirment;
  }
  //打开弹窗
  public showDialog(){
    this.createWrap();
    this.createEle();
    
  }
  //关闭弹窗
  public hideDialog(){
    let element = document.getElementById(this.el);
    try {
      element.style.display = 'none';
    } catch (error) {
      console.error("请先在html中定义el弹窗元素")
      return;
    }
    let layer = document.getElementById('cover-layer');
    document.body.removeChild(layer);
  }

}