dom-inspector
Version:
dom inspect like chrom dev tools.
5 lines • 12.8 kB
JavaScript
/*
* DomInspector v1.2.4-beta.0
* (c) 2020 luoye <luoyefe@gmail.com>
*/
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):t.DomInspector=e()}(this,function(){"use strict";function t(t,e){var r=t;return Object.keys(e).forEach(function(t){({}).hasOwnProperty.call(e,t)&&(r[t]=e[t])}),r}function e(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:100,r=void 0,o=void 0,i=Date.now();return function(){function n(){i=Date.now(),r=null,t.apply(p,d)}for(var a=arguments.length,d=Array(a),h=0;h<a;h++)d[h]=arguments[h];var p=this;clearTimeout(r),o=Date.now()-i,o>e?n():r=setTimeout(n,e-o)}}function r(t){return"null"===Object.prototype.toString.call(t).replace(/\[object[\s]/,"").replace("]","").toLowerCase()}function o(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return"object"===(void 0===t?"undefined":l(t))&&1===t.nodeType&&"object"===l(t.style)&&"object"===l(t.ownerDocument)}function i(t,e){return e&&o(e)?e.querySelector(t):document.querySelector(t)}function n(t,e){Object.keys(e).forEach(function(r){t.style[r]=e[r]})}function a(t,e){for(var r=0;t;)t.nodeName.toLowerCase()===e&&(r+=1),t=t.previousElementSibling;return r}function d(t){for(var e=getComputedStyle(t),r=t.getBoundingClientRect().left-parseFloat(e["margin-left"]),o=t.getBoundingClientRect().top-parseFloat(e["margin-top"]),i=t.parent;i;)e=getComputedStyle(i),r+=i.frameElement.getBoundingClientRect().left-parseFloat(e["margin-left"]),o+=i.frameElement.getBoundingClientRect().top-parseFloat(e["margin-top"]),i=i.parent;return{top:o,left:r}}function h(e){var r={},o=["border-top-width","border-right-width","border-bottom-width","border-left-width","margin-top","margin-right","margin-bottom","margin-left","padding-top","padding-right","padding-bottom","padding-left","z-index"],i=getComputedStyle(e);return o.forEach(function(t){r[t]=parseFloat(i[t])||0}),t(r,{width:e.offsetWidth-r["border-left-width"]-r["border-right-width"]-r["padding-left"]-r["padding-right"],height:e.offsetHeight-r["border-top-width"]-r["border-bottom-width"]-r["padding-top"]-r["padding-bottom"]}),t(r,d(e)),r}function p(){return[].concat(u(document.querySelectorAll("*"))).reduce(function(t,e){return Math.max(t,+window.getComputedStyle(e).zIndex||0)},0)}function s(t,e){for(;void 0!==t&&null!==t&&"BODY"!==t.tagName.toUpperCase();){if(t==e)return!0;t=t.parentNode}return!1}!function(t,e){if("undefined"==typeof document)return e;t=t||"";var r=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css",o.styleSheet?o.styleSheet.cssText=t:o.appendChild(document.createTextNode(t)),r.appendChild(o)}(".dom-inspector {\n position: fixed;\n pointer-events: none;\n}\n\n.dom-inspector>div {\n\tposition: absolute;\n}\n\n.dom-inspector .tips {\n\tbackground-color: #333740;\n\tfont-size: 0;\n\tline-height: 18px;\n\tpadding: 3px 10px;\n\tposition: fixed;\n\tborder-radius: 4px;\n\tdisplay: none;\n}\n\n.dom-inspector .tips.reverse{\n\n}\n\n.dom-inspector .tips .triangle {\n\twidth: 0;\n\theight: 0;\n\tposition: absolute;\n\tborder-top: 8px solid #333740;\n\tborder-right: 8px solid transparent;\n\tborder-bottom: 8px solid transparent;\n\tborder-left: 8px solid transparent;\n\tleft: 10px;\n\ttop: 24px;\n}\n\n.dom-inspector .tips.reverse .triangle {\n\tborder-top: 8px solid transparent;\n\tborder-right: 8px solid transparent;\n\tborder-bottom: 8px solid #333740;\n\tborder-left: 8px solid transparent;\n\tleft: 10px;\n\ttop: -16px;\n}\n\n.dom-inspector .tips>div {\n\tdisplay: inline-block;\n\tvertical-align: middle;\n\tfont-size: 12px;\n\tfont-family: Consolas, Menlo, Monaco, Courier, monospace;\n\toverflow: auto;\n}\n\n.dom-inspector .tips .tag {\n\tcolor: #e776e0;\n}\n\n.dom-inspector .tips .id {\n\tcolor: #eba062;\n}\n\n.dom-inspector .tips .class {\n\tcolor: #8dd2fb;\n}\n\n.dom-inspector .tips .line {\n\tcolor: #fff;\n}\n\n.dom-inspector .tips .size {\n\tcolor: #fff;\n}\n\n.dom-inspector-theme-default {\n\n}\n\n.dom-inspector-theme-default .margin {\n\tbackground-color: rgba(255, 81, 81, 0.75);\n}\n\n.dom-inspector-theme-default .border {\n\tbackground-color: rgba(255, 241, 81, 0.75);\n}\n\n.dom-inspector-theme-default .padding {\n\tbackground-color: rgba(81, 255, 126, 0.75);\n}\n\n.dom-inspector-theme-default .content {\n\tbackground-color: rgba(81, 101, 255, 0.75);\n}\n",void 0);var l="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},g=function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")},c=function(){function t(t,e){for(var r=0;r<e.length;r++){var o=e[r];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}return function(e,r,o){return r&&t(e.prototype,r),o&&t(e,o),e}}(),u=function(t){if(Array.isArray(t)){for(var e=0,r=Array(t.length);e<t.length;e++)r[e]=t[e];return r}return Array.from(t)},m=["log","warn","error"],f={};return m.forEach(function(t){f[t]=function(){}}),function(){function t(){var n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};g(this,t),this._doc=window.document,this.root=n.root?o(n.root)?n.root:i(n.root):i("body"),r(this.root)&&(f.warn("Root element is null. Auto select body as root"),this.root=i("body")),this.theme=n.theme||"dom-inspector-theme-default",this.exclude=this._formatExcludeOption(n.exclude||[]),this.overlay={},this.overlayId="",this.target="",this.destroyed=!1,this.maxZIndex=n.maxZIndex||p()+1,this._cachedTarget="",this._throttleOnMove=e(this._onMove.bind(this),100),this._init()}return c(t,[{key:"enable",value:function(){if(this.destroyed)return f.warn("Inspector instance has been destroyed! Please redeclare it.");this.overlay.parent.style.display="block",this.root.addEventListener("mousemove",this._throttleOnMove)}},{key:"pause",value:function(){this.root.removeEventListener("mousemove",this._throttleOnMove)}},{key:"disable",value:function(){this.overlay.parent.style.display="none",this.overlay.parent.style.width=0,this.overlay.parent.style.height=0,this.target=null,this.root.removeEventListener("mousemove",this._throttleOnMove)}},{key:"destroy",value:function(){this.destroyed=!0,this.disable(),this.overlay={}}},{key:"getXPath",value:function(t){if(!o(t)&&!this.target)return f.warn("Target element is not found. Warning function name:%c getXPath","color: #ff5151");if(t||(t=this.target),t.hasAttribute("id"))return"//"+t.tagName.toLowerCase()+'[@id="'+t.id+'"]';if(t.hasAttribute("class"))return"//"+t.tagName.toLowerCase()+'[@class="'+t.getAttribute("class")+'"]';for(var e=[];t.nodeType===Node.ELEMENT_NODE;){var r=t.nodeName.toLowerCase(),i=a(t,r);e.push(t.tagName.toLowerCase()+(1===i?"":"["+i+"]")),t=t.parentNode}return"/"+e.reverse().join("/")}},{key:"getSelector",value:function(t){if(!o(t)&&!this.target)return f.warn("Target element is not found. Warning function name:%c getCssPath","color: #ff5151");t||(t=this.target);for(var e=[];t.nodeType===Node.ELEMENT_NODE;){var r=t.nodeName.toLowerCase();if(t.hasAttribute("id"))r+="#"+t.id;else if(t.hasAttribute("class"))r+="."+t.className.replace(/\s+/g," ").split(" ").join(".");else{var i=a(t,r);1!==i&&(r+=":nth-of-type("+i+")")}e.unshift(r),t=t.parentNode}return e.join(">")}},{key:"getElementInfo",value:function(t){return o(t)||this.target?h(t||this.target):f.warn("Target element is not found. Warning function name:%c getElementInfo","color: #ff5151")}},{key:"_init",value:function(){this.overlayId="dom-inspector-"+Date.now();var t=this._createElement("div",{id:this.overlayId,class:"dom-inspector "+this.theme,style:"z-index: "+this.maxZIndex});this.overlay={parent:t,content:this._createSurroundEle(t,"content"),paddingTop:this._createSurroundEle(t,"padding padding-top"),paddingRight:this._createSurroundEle(t,"padding padding-right"),paddingBottom:this._createSurroundEle(t,"padding padding-bottom"),paddingLeft:this._createSurroundEle(t,"padding padding-left"),borderTop:this._createSurroundEle(t,"border border-top"),borderRight:this._createSurroundEle(t,"border border-right"),borderBottom:this._createSurroundEle(t,"border border-bottom"),borderLeft:this._createSurroundEle(t,"border border-left"),marginTop:this._createSurroundEle(t,"margin margin-top"),marginRight:this._createSurroundEle(t,"margin margin-right"),marginBottom:this._createSurroundEle(t,"margin margin-bottom"),marginLeft:this._createSurroundEle(t,"margin margin-left"),tips:this._createSurroundEle(t,"tips",'<div class="tag"></div><div class="id"></div><div class="class"></div><div class="line"> | </div><div class="size"></div><div class="triangle"></div>')},this.root.appendChild(t)}},{key:"_createElement",value:function(t,e,r){var o=this._doc.createElement(t);return Object.keys(e).forEach(function(t){o.setAttribute(t,e[t])}),r&&(o.innerHTML=r),o}},{key:"_createSurroundEle",value:function(t,e,r){var o=this._createElement("div",{class:e},r);return t.appendChild(o),o}},{key:"_onMove",value:function(t){for(var e=0;e<this.exclude.length;e+=1){var r=this.exclude[e];if(r.isEqualNode(t.target)||s(t.target,r))return}if(this.target=t.target,this.target===this._cachedTarget)return null;this._cachedTarget=this.target;var o=h(t.target),a={width:o.width,height:o.height},d={width:o["padding-left"]+a.width+o["padding-right"],height:o["padding-top"]+a.height+o["padding-bottom"]},p={width:o["border-left-width"]+d.width+o["border-right-width"],height:o["border-top-width"]+d.height+o["border-bottom-width"]},l={width:o["margin-left"]+p.width+o["margin-right"],height:o["margin-top"]+p.height+o["margin-bottom"]};n(this.overlay.parent,{width:l.width+"px",height:l.height+"px",top:o.top+"px",left:o.left+"px"}),n(this.overlay.content,{width:a.width+"px",height:a.height+"px",top:o["margin-top"]+o["border-top-width"]+o["padding-top"]+"px",left:o["margin-left"]+o["border-left-width"]+o["padding-left"]+"px"}),n(this.overlay.paddingTop,{width:d.width+"px",height:o["padding-top"]+"px",top:o["margin-top"]+o["border-top-width"]+"px",left:o["margin-left"]+o["border-left-width"]+"px"}),n(this.overlay.paddingRight,{width:o["padding-right"]+"px",height:d.height-o["padding-top"]+"px",top:o["padding-top"]+o["margin-top"]+o["border-top-width"]+"px",right:o["margin-right"]+o["border-right-width"]+"px"}),n(this.overlay.paddingBottom,{width:d.width-o["padding-right"]+"px",height:o["padding-bottom"]+"px",bottom:o["margin-bottom"]+o["border-bottom-width"]+"px",right:o["padding-right"]+o["margin-right"]+o["border-right-width"]+"px"}),n(this.overlay.paddingLeft,{width:o["padding-left"]+"px",height:d.height-o["padding-top"]-o["padding-bottom"]+"px",top:o["padding-top"]+o["margin-top"]+o["border-top-width"]+"px",left:o["margin-left"]+o["border-left-width"]+"px"}),n(this.overlay.borderTop,{width:p.width+"px",height:o["border-top-width"]+"px",top:o["margin-top"]+"px",left:o["margin-left"]+"px"}),n(this.overlay.borderRight,{width:o["border-right-width"]+"px",height:p.height-o["border-top-width"]+"px",top:o["margin-top"]+o["border-top-width"]+"px",right:o["margin-right"]+"px"}),n(this.overlay.borderBottom,{width:p.width-o["border-right-width"]+"px",height:o["border-bottom-width"]+"px",bottom:o["margin-bottom"]+"px",right:o["margin-right"]+o["border-right-width"]+"px"}),n(this.overlay.borderLeft,{width:o["border-left-width"]+"px",height:p.height-o["border-top-width"]-o["border-bottom-width"]+"px",top:o["margin-top"]+o["border-top-width"]+"px",left:o["margin-left"]+"px"}),n(this.overlay.marginTop,{width:l.width+"px",height:o["margin-top"]+"px",top:0,left:0}),n(this.overlay.marginRight,{width:o["margin-right"]+"px",height:l.height-o["margin-top"]+"px",top:o["margin-top"]+"px",right:0}),n(this.overlay.marginBottom,{width:l.width-o["margin-right"]+"px",height:o["margin-bottom"]+"px",bottom:0,right:o["margin-right"]+"px"}),n(this.overlay.marginLeft,{width:o["margin-left"]+"px",height:l.height-o["margin-top"]-o["margin-bottom"]+"px",top:o["margin-top"]+"px",left:0}),i(".tag",this.overlay.tips).innerHTML=this.target.tagName.toLowerCase(),i(".id",this.overlay.tips).innerHTML=this.target.id?"#"+this.target.id:"",i(".class",this.overlay.tips).innerHTML=[].concat(u(this.target.classList)).map(function(t){return"."+t}).join(""),i(".size",this.overlay.tips).innerHTML=l.width+"x"+l.height;var g=0;o.top>=32?(this.overlay.tips.classList.remove("reverse"),g=o.top-24-8):(this.overlay.tips.classList.add("reverse"),g=l.height+o.top+8),n(this.overlay.tips,{top:g+"px",left:o.left+"px",display:"block"})}},{key:"_formatExcludeOption",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[],e=[];return t.forEach(function(t){return"string"==typeof t?e.push(i(t)):o(t)?e.push(t):void 0}),e}}]),t}()});