@ng1005/chrome-extension-common/src/dom/CssSelectorService.ts

chrome扩展通用库--消息与storage

import { EventBusDemo } from "../message/EventBusDemo";
import { SelectorCoverService } from "./SelectorCoverService";
const cover=new SelectorCoverService();
type Offset={
  top:number,
  left:number,
  bottom:number,
  right:number,
  width: number,
  height:number
}
/**
 * dom选择器
 */
export class CssSelectorService extends EventBusDemo{
  doc:Document|undefined
  _events:Map<string,Function|Array<Function>>;
  bindFlag:boolean;
  disable:boolean;
  $emitKey:string
  overlay:HTMLElement|undefined
  constructor (doc?:Document|undefined) {
    super()
    this._events = new Map(); // 存储事件／回调键值对
    this.bindFlag=false;//绑定document标示
    this.disable=false;//禁用
    this.doc=doc//window.document//document
    // this.overlay//用来显示的标签
    this.$emitKey='selector_helper_click'
  }

  /**
   * 验证是否可用
   */
  isValid(){
    return this.bindFlag&&!this.disable
  }

  /**
   * 设置不可用
   */
  disabled(){
    this.disable=true
    if(this.overlay){
      this.overlay.setAttribute('style','');
    }
  }
  /**
   * 设置可用
   */
  enabled(){
    this.disable=false
  }

  /**
   * 设置遮罩层位置偏移
   * @param {*} offset 
   */
  setOverlayOffset(offset:Offset){
    if(!offset||!this.overlay)return
    this.overlay.setAttribute('style', 'z-index: 999999;background-color: rgba(255, 165, 0, 0.3);border: 1px solid #c00;position: absolute;pointer-events: none;'
        +'top: '+(offset.top-2)+'px;'
          +'left:'+(offset.left-2)+'px;'
          +'width: '+(offset.width+5)+'px;'
          +'height: '+(offset.height+5)+'px;');
  }
  /**
   * 绑定
   * @param {*} window 
   * @param {*} overlay 
   */
  bind(overlay?:HTMLElement|undefined){
    if(this.bindFlag){
      return
    }
    this.doc=this.doc||window.document
    if(!overlay){
      overlay=this.doc.createElement('div');
      this.doc.body.appendChild(overlay);
    }
    this.overlay=overlay;
    
    //绑定事件
    let _this=this
    this.doc.addEventListener("mouseover",(evt)=>{
      if(!_this.doc)return;
      // console.log('document===',document,'this.document====',_this.doc,document.work);
      if(!_this.isValid())return;//不工作了
      let element=<HTMLElement>evt.target;
      if(!element)return;
      let rect = element.getBoundingClientRect();
      let left=element.offsetLeft;
      let top=element.offsetTop;
      let width=element.offsetWidth;
      let height=element.offsetHeight;
      var scrollTop = Math.max(_this.doc.documentElement.scrollTop, _this.doc.body.scrollTop); 
      var scrollLeft = Math.max(_this.doc.documentElement.scrollLeft, _this.doc.body.scrollLeft); 
      const offset:Offset={
        left: rect.left+scrollLeft,
        top: rect.top+scrollTop,
        right:rect.right,
        bottom:rect.bottom,
        width: width,
        height: height,
      };
      // console.log('ddd===');
      _this.setOverlayOffset(offset);
      // document.cssSelectorHelper.show(offset);
    });
    this.doc.addEventListener("mousedown",(evt)=>{
      if(!_this.isValid())return;//不工作了
      evt.preventDefault();
      evt.stopPropagation();
      _this.$emit(_this.$emitKey,evt.target)
      this.disabled()//设置成不可用
    });
    this.bindFlag=true;

  }

  /**
   * 设置提交的key
   * @param {*} key 
   */
  $setKey(key:string){
    this.$emitKey=key;
  }
  /**
   * 
   * @param key 
   * @returns 
   */
  getSelector(key?:string,isCover:boolean=false,coverSelector='A'){
    this.bind();
    let _this=this;
    this.enabled()
    key=key||'default_key'
    if(isCover){
      cover.show(coverSelector,{background:'rgba(999,999,99,0)'})
    }
    return new Promise<HTMLElement>((resolve,reject)=>{
      _this.$setKey(key)
      _this.$on(key,(target:HTMLElement)=>{
        _this.disabled()
        let el=null;
        if(isCover){//如果开启覆盖的话返回真实element
          cover.hide(coverSelector)
          let uid=target.getAttribute('cover-id')||''
          if(uid){
            el=document.querySelector(`[cover-uid='${uid}']`)
          }
        }
        resolve(el||target)
        return true;
      })
    })
  }
}
const $bus=new CssSelectorService()
export default $bus