@featurepeek/drawer.js - npm Package Compare versions

Comparing version 0.1.4 to 0.1.5

dist/netlify.js

@@ -1,1 +0,1 @@
-!function(){try{var a="https://dashboard.dev.featurepeek.com",d="featurepeek-drawerjs-frame",e=document,t=e.querySelector("script[data-repo][data-id]");if(!t)return;var i=e.location.hostname.split("--")[0].split("-")[2],o=t.dataset.id,r=t.dataset.repo;i&&o&&r&&((t=e.createElement("iframe")).allow="display-capture",t.id=d,t.src=a+"/netlify/"+r+"/"+i+"/"+o,t.style="display:block;border:0;position:fixed;left:0;bottom:0;width:56px;height:300px;z-index:9999999999",e.body.appendChild(t),window.addEventListener("message",function(e){if(e.origin===a){var t=e.data,e=document.getElementById(d);switch(t){case"FULL_VIEWPORT":e.style.height="100vh",e.style.width="100vw";break;case"TINY_VIEWPORT":e.style.height="300px",e.style.width="56px";break;case"DESIGN_MODE_ON":document.designMode="on";break;case"DESIGN_MODE_OFF":document.designMode="off"}}}))}catch(e){}}();
+function _slicedToArray(e,t){return _arrayWithHoles(e)||_iterableToArrayLimit(e,t)||_unsupportedIterableToArray(e,t)||_nonIterableRest()}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _iterableToArrayLimit(e,t){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(e)){var o=[],n=!0,r=!1,a=void 0;try{for(var i,c=e[Symbol.iterator]();!(n=(i=c.next()).done)&&(o.push(i.value),!t||o.length!==t);n=!0);}catch(e){r=!0,a=e}finally{try{n||null==c.return||c.return()}finally{if(r)throw a}}return o}}function _arrayWithHoles(e){if(Array.isArray(e))return e}function _toConsumableArray(e){return _arrayWithoutHoles(e)||_iterableToArray(e)||_unsupportedIterableToArray(e)||_nonIterableSpread()}function _nonIterableSpread(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function _unsupportedIterableToArray(e,t){if(e){if("string"==typeof e)return _arrayLikeToArray(e,t);var o=Object.prototype.toString.call(e).slice(8,-1);return"Object"===o&&e.constructor&&(o=e.constructor.name),"Map"===o||"Set"===o?Array.from(e):"Arguments"===o||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(o)?_arrayLikeToArray(e,t):void 0}}function _iterableToArray(e){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(e))return Array.from(e)}function _arrayWithoutHoles(e){if(Array.isArray(e))return _arrayLikeToArray(e)}function _arrayLikeToArray(e,t){(null==t||t>e.length)&&(t=e.length);for(var o=0,n=new Array(t);o<t;o++)n[o]=e[o];return n}!function(){function r(e,t){return o=t,e.x<o.x&&(t=t,(e=e).x+e.width<t.x);var o}function a(e,t){return o=t,e.y<o.y&&(t=t,(e=e).y+e.height<t.y);var o}function o(e,t){return e.width<=t.width?e:t}function n(e,t){return e.height<=t.height?e:t}function i(e,t){return e.y!==o(e,t).y?C(t,e):{x:e.x+e.width/2,y:e.y+e.height,height:t.y-(e.y+e.height)}}function c(e,t){return e.x!==n(e,t).x?j(t,e):{x:t.x+t.width,y:e.y+e.height/2,width:e.x-(t.x+t.width)}}function d(e,t){return e.x<=t.x&&e.y<=t.y&&e.x+e.width>=t.x+t.width&&e.y+e.height>=t.y+t.height}function s(e,t,o){var n=2<arguments.length&&void 0!==o?o:"red",r={blue:{hex:"#18a0fb",data:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAIAAADZrBkAAAAAPklEQVR4AWOQWPAbH5oPQpjiIG2EEC20/ScCDJi2+XTTNp9UbfPgts0hRdt8uLa55DlyHhnahkZ00z8HkIEAA7TgNxFIMYsAAAAASUVORK5CYII="},red:{hex:"#f24822",data:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAIAAADZrBkAAAAAHUlEQVR4AWP45KFEBhoobf+JALTXNqptVNuQyDgAD6SjH1sbDJwAAAAASUVORK5CYII="}};return["border: 1px solid","border-image: url(".concat(r[n].data,") 30 / 9px / 5px"),"box-shadow: 0 0 0 2px ".concat(r[n].hex),"display: flex","height: ".concat(Math.max(t.height-2,0),"px"),"justify-content: center","left: ".concat(e.pageXOffset+t.x,"px"),"pointer-events: none","position: absolute","top: ".concat(e.pageYOffset+t.y,"px"),"visibility: visible","width: ".concat(Math.max(t.width-2,0),"px"),"z-index: 99999999999999999"].join(";")}function l(e,t,o){var n=2<arguments.length&&void 0!==o?o:"red";if(i=e.document.getElementById(t))return i;var r=e.document.createElement("div"),a=e.document.createElement("code"),i=e.document.createElement("span");return r.id=t,a.style=["background: #ffffc2","font-size: 11px","left: 4px","line-height: 11px","margin: 0","max-width: calc(100% - 7px)","overflow: hidden","padding: 2px 4px","position: absolute","text-overflow: ellipsis","top: -18px","white-space: nowrap","word-wrap: normal"].join(";"),i.style=["background: ".concat("red"===n?"#fdeae6":"#e6f4ff"),"border-radius: 3px","bottom: -20px","color: ".concat("red"===n?"#f24822":"#18a0fb"),"font-family: -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', sans-serif","font-size: 11px","line-height: 11px","margin: 0","padding: 2px 4px","position: absolute","text-align: center","white-space: nowrap"].join(";"),r.appendChild(a),r.appendChild(i),e.document.body.appendChild(r),e.document.getElementById(t)}function h(e,t){var o=e.document.getElementById(t);return o||((o=e.document.createElement("div")).id=t,e.document.body.appendChild(o),e.document.getElementById(t))}function p(e){return['<span style="color:#88137f">'.concat(e.tagName.toLowerCase(),"</span>"),e.id&&'<span style="color:#1a1aa6">#'.concat(e.id,"</span>"),e.className&&'<span style="color:#9a4500">.'.concat(e.className.replace(/ /g,"."),"</span>")].filter(Boolean).join("")}function f(t){var o=["align-items: center","border-width: 1px","font-size: 11px","line-height: 11px","margin: 0","padding: 0","pointer-events: none","position: absolute","visibility: visible","z-index: 9999999999999"],n=["background: #fdeae6","border-radius: 3px","color: #f24822","font-family: -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', sans-serif","margin: 3px","padding: 2px 4px"];Object.keys(t).forEach(function(e){e=t[e];e.el.style=[].concat(o,_toConsumableArray(e.styles),["display: ".concat(1<e.distance?"flex":"none")]).join(";"),e.el.innerHTML='<span style="'.concat(n.join(";"),'">').concat(e.distance,"</span>")})}function y(e,t,o,n){var r=(s=o,i=n,Math.round(i.x>s.x+s.width?i.x-(s.x+s.width):s.x-(i.x+i.width))),a=(c=o,d=n,Math.round(d.y>c.y+c.height?d.y-(c.y+c.height):c.y-(d.y+d.height))),i=(l=n,{horz:{x:(s=o).x<l.x?s.x+s.width:l.x+l.width,y:s.y<l.y?s.y+s.height/2:l.y+l.height},vert:{x:s.x<l.x?s.x+s.width/2:s.x,y:s.y<l.y?s.y+s.height:l.y+l.height}}),c=e.pageXOffset+i.horz.x,d=e.pageYOffset+i.horz.y,s=a+o.height/2,l=e.pageXOffset+i.vert.x,e=e.pageYOffset+i.vert.y,i=o.width/2,i={horz:{el:t[0],distance:r,styles:["border-top-style: ".concat(o.y<n.y?"solid":"dashed"),"border-right-style: dashed","border-bottom-style: ".concat(o.y>n.y?"solid":"dashed"),"border-left-style: dashed","border-top-color: #f24822","border-right-color: ".concat(o.x<n.x?"#f24822":"transparent"),"border-bottom-color: #f24822","border-left-color: ".concat(o.x>n.x?"#f24822":"transparent"),"flex-direction: column","justify-content: flex-".concat(o.y<n.y?"start":"end"),"height: ".concat(s-2,"px"),"left: ".concat(c,"px"),"top: ".concat(d,"px"),"width: ".concat(r-2,"px")]},vert:{el:t[1],distance:a,styles:["border-top-style: dashed","border-right-style: solid","border-bottom-style: dashed","border-left-style: solid","border-top-color: ".concat(o.y>n.y?"#f24822":"transparent"),"border-right-color: ".concat(o.x>n.x?"#f24822":"transparent"),"border-bottom-color: ".concat(o.y<n.y?"#f24822":"transparent"),"border-left-color: ".concat(o.x<n.x?"#f24822":"transparent"),"justify-content: flex-".concat(o.x<n.x?"start":"end"),"height: ".concat(a-2,"px"),"left: ".concat(l,"px"),"top: ".concat(e,"px"),"width: ".concat(i-2,"px")]}};f(i)}function u(e,t,o,n){o={north:{el:t[0],distance:Math.round(n.y-o.y),styles:["border-left: 1px solid #f24822","height: ".concat(n.y-o.y,"px"),"left: ".concat(e.pageXOffset+n.x+n.width/2,"px"),"top: ".concat(e.pageYOffset+o.y-2,"px")]},south:{el:t[1],distance:Math.round(o.y+o.height-(n.y+n.height)),styles:["border-left: 1px solid #f24822","height: ".concat(o.y+o.height-(n.y+n.height),"px"),"left: ".concat(e.pageXOffset+n.x+n.width/2,"px"),"top: ".concat(e.pageYOffset+n.y+n.height+2,"px")]},east:{el:t[2],distance:Math.round(o.x+o.width-(n.x+n.width)),styles:["border-top: 1px solid #f24822","flex-direction: column","left: ".concat(e.pageXOffset+n.x+n.width+2,"px"),"top: ".concat(e.pageYOffset+n.y+n.height/2,"px"),"width: ".concat(o.x+o.width-(n.x+n.width),"px")]},west:{el:t[3],distance:Math.round(n.x-o.x),styles:["border-top: 1px solid #f24822","flex-direction: column","left: ".concat(e.pageXOffset+o.x,"px"),"top: ".concat(e.pageYOffset+n.y+n.height/2,"px"),"width: ".concat(n.x-o.x-2,"px")]}},f(o)}function x(e){e.forEach(function(e){e&&(e.style.visibility="hidden")})}function g(e){var t;e&&m&&(t=e.getBoundingClientRect(),m.style=s(window,t,"blue"),w.innerHTML=p(e),A.innerText="".concat(Math.round(t.width)," × ").concat(Math.round(t.height)),x([v,O,I,T,k]))}function b(e){var t,o,n;v&&(t=m.getBoundingClientRect(),o=e.getBoundingClientRect(),v.style=s(window,o,"red"),_.innerHTML=p(e),E.innerText="".concat(Math.round(o.width)," × ").concat(Math.round(o.height)),(r(n=t,e=o)||r(e,n))&&(a(n,e)||a(e,n))?(y(window,[O,I],t,o),x([T,k])):d(t,o)?u(window,[O,I,T,k],t,o):d(o,t)?u(window,[O,I,T,k],o,t):(L(t,o)?function(e,t,o,n){n=i(o,n),n={pos:{el:t,distance:Math.round(n.height),styles:["border-left: 1px solid #f24822","height: ".concat(n.height,"px"),"left: ".concat(e.pageXOffset+n.x,"px"),"top: ".concat(e.pageYOffset+n.y,"px")]}};f(n)}(window,O,t,o):a(o,t)?function(e,t,o,n){n=C(o,n),n={pos:{el:t,distance:Math.round(n.height),styles:["border-left: 1px solid #f24822","height: ".concat(n.height,"px"),"left: ".concat(e.pageXOffset+n.x,"px"),"top: ".concat(e.pageYOffset+n.y,"px")]}};f(n)}(window,O,t,o):r(o,t)?function(e,t,o,n){n=c(o,n),n={pos:{el:t,distance:Math.round(n.width),styles:["border-top: 1px solid #f24822","flex-direction: column","left: ".concat(e.pageXOffset+n.x,"px"),"top: ".concat(e.pageYOffset+n.y,"px"),"width: ".concat(n.width,"px")]}};f(n)}(window,O,t,o):N(t,o)&&function(e,t,o,n){n=j(o,n),n={pos:{el:t,distance:Math.round(n.width),styles:["border-top: 1px solid #f24822","flex-direction: column","left: ".concat(e.pageXOffset+n.x,"px"),"top: ".concat(e.pageYOffset+n.y,"px"),"width: ".concat(n.width,"px")]}};f(n)}(window,O,t,o),x([I,T,k])))}var m,w,A,v,_,E,O,I,T,k,S,M,B,L=a,N=r,C=function(e,t){return e.y!==o(e,t).y?i(t,e):{x:e.x+e.width/2,y:t.y+t.height,height:e.y-(t.y+t.height)}},j=function(e,t){return e.x!==n(e,t).x?c(t,e):{x:e.x+e.width,y:e.y+e.height/2,width:t.x-(e.x+e.width)}},R="_featurepeek_selection_box",Y="_featurepeek_comparison_box",H="_featurepeek_measure_1",D="_featurepeek_measure_2",X="_featurepeek_measure_3",U="_featurepeek_measure_4";try{var z="https://dashboard.dev.featurepeek.com",e=document,t=e.querySelector("script[data-repo][data-id]");if(!t)return;var V,W=e.location.hostname.split("--")[0].split("-")[2],P=t.dataset.id,t=t.dataset.repo;W&&P&&t&&((V=e.createElement("iframe")).allow="display-capture",V.src="".concat(z,"/netlify/").concat(t,"/").concat(W,"/").concat(P),V.style=["display:block","border:0","position:fixed","left:0","bottom:0","width:56px","height:300px","z-index:9999999999"].join(";"),e.body.appendChild(V),window.addEventListener("message",function(e){var t;if(e.origin===z)switch(e.data){case"FULL_VIEWPORT":V.style.height="100vh",V.style.width="100vw";break;case"TINY_VIEWPORT":V.style.height="300px",V.style.width="56px";break;case"DESIGN_MODE_ON":document.designMode="on";break;case"DESIGN_MODE_OFF":document.designMode="off";break;case"BEGIN_SELECTION":!function(){document.body.style.cursor="crosshair";var e=_slicedToArray((m=l(window,R,"blue")).getElementsByTagName("code"),1);w=e[0],e=_slicedToArray(m.getElementsByTagName("span"),1),A=e[0],e=_slicedToArray((v=l(window,Y,"red")).getElementsByTagName("code"),1),_=e[0],e=_slicedToArray(v.getElementsByTagName("span"),1),E=e[0],O=h(window,H),I=h(window,D),T=h(window,X),k=h(window,U),M=function(e){m?(S?b:g)(e.target):document.body.removeEventListener("mouseover",M)},(B=function(e){e?(e.preventDefault(),e.stopPropagation(),g(e.target),S=!0):(e=document.querySelectorAll(":hover"))&&(e=e[e.length-1],g(e))})(),document.body.addEventListener("click",B),document.body.addEventListener("mouseover",M)}();break;case"END_SELECTION":S=!1,document.body.style.cursor="default",t=window,[R,Y,H,D,X,U].forEach(function(e){e=t.document.getElementById(e);e&&e.parentNode.removeChild(e)}),document.body.removeEventListener("mouseover",M),document.body.removeEventListener("click",B)}}))}catch(e){}}();

package.json

 {
   "name": "@featurepeek/drawer.js",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "main": "dist/loader.js",
@@ -9,11 +9,37 @@ "repository": "https://github.com/featurepeek/drawer.js",
   "private": false,
+  "husky": {
+    "hooks": {
+      "post-merge": "yarn",
+      "pre-commit": "yarn lint-staged",
+      "pre-push": "yarn test"
+    }
+  },
+  "lint-staged": {
+    "src/*.js": [
+      "yarn test"
+    ]
+  },
   "scripts": {
     "build": "mkdir -p dist && yarn build:loader && yarn build:netlify",
-    "build:netlify": "uglifyjs src/netlify.js --compress --mangle --output dist/netlify.js",
-    "build:loader": "uglifyjs src/loader.js --compress --mangle --output dist/loader.js",
-    "prepublish": "yarn build"
+    "build:netlify": "babel src/netlify.js | uglifyjs --compress --mangle --output dist/netlify.js",
+    "build:loader": "babel src/loader.js | uglifyjs --compress --mangle --output dist/loader.js",
+    "lint": "eslint 'src/*.js' --cache",
+    "prepublish": "yarn build",
+    "prettier": "prettier --write src",
+    "test": "yarn lint && yarn prettier"
   },
   "devDependencies": {
+    "@babel/cli": "^7.12.1",
+    "@babel/core": "^7.12.3",
+    "@babel/preset-env": "^7.12.1",
+    "eslint": "^7.11.0",
+    "eslint-config-airbnb-base": "^14.2.0",
+    "eslint-config-prettier": "^6.14.0",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-jsx-a11y": "^6.3.1",
+    "husky": "^4.3.0",
+    "lint-staged": "^10.4.2",
+    "prettier": "^2.1.2",
     "uglify-js": "^3.11.3"
   }
 }

src/loader.js

@@ -1,4 +0,4 @@
-(function() {
+;(() => {
   if (/^deploy-preview-/.test(document.location.hostname)) {
-    var script = document.createElement('script')
+    const script = document.createElement('script')
     script.src = 'https://unpkg.com/@featurepeek/drawer.js/dist/netlify.js'
@@ -5,0 +5,0 @@ document.body.appendChild(script)

src/netlify.js

@@ -1,7 +0,602 @@
-(function() {
+;(() => {
+  // =============== utils/rect.js ===================
+
+  const xStartsBefore = (a, b) => a.x < b.x
+  const yStartsBefore = (a, b) => a.y < b.y
+  const xEndsBefore = (a, b) => a.x + a.width < b.x
+  const yEndsBefore = (a, b) => a.y + a.height < b.y
+
+  const xEntirelyBefore = (a, b) => xStartsBefore(a, b) && xEndsBefore(a, b)
+  const yEntirelyBefore = (a, b) => yStartsBefore(a, b) && yEndsBefore(a, b)
+
+  const isKittyCorner = (a, b) => {
+    return (xEntirelyBefore(a, b) || xEntirelyBefore(b, a)) && (yEntirelyBefore(a, b) || yEntirelyBefore(b, a))
+  }
+
+  const isNorthOf = (a, b) => yEntirelyBefore(a, b)
+  const isSouthOf = (a, b) => yEntirelyBefore(b, a)
+  const isEastOf = (a, b) => xEntirelyBefore(b, a)
+  const isWestOf = (a, b) => xEntirelyBefore(a, b)
+
+  const theNarrowerOfTheTwo = (a, b) => (a.width <= b.width ? a : b)
+  const theShorterOfTheTwo = (a, b) => (a.height <= b.height ? a : b)
+
+  const getNorthPosition = (a, b) => {
+    if (a.y !== theNarrowerOfTheTwo(a, b).y) {
+      // eslint-disable-next-line no-use-before-define
+      return getSouthPosition(b, a)
+    }
+    return {
+      x: a.x + a.width / 2,
+      y: a.y + a.height,
+      height: b.y - (a.y + a.height),
+    }
+  }
+  const getSouthPosition = (a, b) => {
+    if (a.y !== theNarrowerOfTheTwo(a, b).y) {
+      return getNorthPosition(b, a)
+    }
+    return {
+      x: a.x + a.width / 2,
+      y: b.y + b.height,
+      height: a.y - (b.y + b.height),
+    }
+  }
+  const getEastPosition = (a, b) => {
+    if (a.x !== theShorterOfTheTwo(a, b).x) {
+      // eslint-disable-next-line no-use-before-define
+      return getWestPosition(b, a)
+    }
+    return {
+      x: b.x + b.width,
+      y: a.y + a.height / 2,
+      width: a.x - (b.x + b.width),
+    }
+  }
+  const getWestPosition = (a, b) => {
+    if (a.x !== theShorterOfTheTwo(a, b).x) {
+      return getEastPosition(b, a)
+    }
+    return {
+      x: a.x + a.width,
+      y: a.y + a.height / 2,
+      width: b.x - (a.x + a.width),
+    }
+  }
+
+  const isContaining = (a, b) => {
+    return a.x <= b.x && a.y <= b.y && a.x + a.width >= b.x + b.width && a.y + a.height >= b.y + b.height
+  }
+  const isContainedBy = (a, b) => isContaining(b, a)
+
+  const xDistanceFn = (a, b) => Math.round(b.x > a.x + a.width ? b.x - (a.x + a.width) : a.x - (b.x + b.width))
+  const yDistanceFn = (a, b) => Math.round(b.y > a.y + a.height ? b.y - (a.y + a.height) : a.y - (b.y + b.height))
+
+  const getKittyCornerPosition = (a, b) => {
+    return {
+      horz: {
+        x: a.x < b.x ? a.x + a.width : b.x + b.width,
+        y: a.y < b.y ? a.y + a.height / 2 : b.y + b.height,
+      },
+      vert: {
+        x: a.x < b.x ? a.x + a.width / 2 : a.x,
+        y: a.y < b.y ? a.y + a.height : b.y + b.height,
+      },
+    }
+  }
+
+  // =============== utils/selection.js ===================
+
+  const getContainerStyle = (contentWindow, rect, color = 'red') => {
+    const colors = {
+      blue: {
+        hex: '#18a0fb',
+        data:
+          'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAIAAADZrBkAAAAAPklEQVR4AWOQWPAbH5oPQpjiIG2EEC20/ScCDJi2+XTTNp9UbfPgts0hRdt8uLa55DlyHhnahkZ00z8HkIEAA7TgNxFIMYsAAAAASUVORK5CYII=',
+      },
+      red: {
+        hex: '#f24822',
+        data:
+          'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAIAAADZrBkAAAAAHUlEQVR4AWP45KFEBhoobf+JALTXNqptVNuQyDgAD6SjH1sbDJwAAAAASUVORK5CYII=',
+      },
+    }
+    return [
+      `border: 1px solid`,
+      `border-image: url(${colors[color].data}) 30 / 9px / 5px`,
+      `box-shadow: 0 0 0 2px ${colors[color].hex}`,
+      `display: flex`,
+      `height: ${Math.max(rect.height - 2, 0)}px`,
+      `justify-content: center`,
+      `left: ${contentWindow.pageXOffset + rect.x}px`,
+      `pointer-events: none`,
+      `position: absolute`,
+      `top: ${contentWindow.pageYOffset + rect.y}px`,
+      `visibility: visible`,
+      `width: ${Math.max(rect.width - 2, 0)}px`,
+      `z-index: 99999999999999999`,
+    ].join(';')
+  }
+
+  const createSelectorAndDimensionsContainer = (contentWindow, id, color = 'red') => {
+    const existingDiv = contentWindow.document.getElementById(id)
+    if (existingDiv) {
+      return existingDiv
+    }
+
+    const div = contentWindow.document.createElement('div')
+    const code = contentWindow.document.createElement('code')
+    const span = contentWindow.document.createElement('span')
+    div.id = id
+
+    code.style = [
+      `background: #ffffc2`,
+      `font-size: 11px`,
+      `left: 4px`,
+      `line-height: 11px`,
+      `margin: 0`,
+      `max-width: calc(100% - 7px)`,
+      `overflow: hidden`,
+      `padding: 2px 4px`,
+      `position: absolute`,
+      `text-overflow: ellipsis`,
+      `top: -18px`,
+      `white-space: nowrap`,
+      `word-wrap: normal`,
+    ].join(';')
+
+    span.style = [
+      `background: ${color === 'red' ? '#fdeae6' : '#e6f4ff'}`,
+      `border-radius: 3px`,
+      `bottom: -20px`,
+      `color: ${color === 'red' ? '#f24822' : '#18a0fb'}`,
+      `font-family: -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', sans-serif`,
+      `font-size: 11px`,
+      `line-height: 11px`,
+      `margin: 0`,
+      `padding: 2px 4px`,
+      `position: absolute`,
+      `text-align: center`,
+      `white-space: nowrap`,
+    ].join(';')
+
+    div.appendChild(code)
+    div.appendChild(span)
+    contentWindow.document.body.appendChild(div)
+
+    return contentWindow.document.getElementById(id)
+  }
+
+  const createDivInContentWindowWithID = (contentWindow, id) => {
+    const existingDiv = contentWindow.document.getElementById(id)
+    if (existingDiv) {
+      return existingDiv
+    }
+
+    const newDiv = contentWindow.document.createElement('div')
+    newDiv.id = id
+
+    contentWindow.document.body.appendChild(newDiv)
+    return contentWindow.document.getElementById(id)
+  }
+
+  const genSelectorHTML = el => {
+    return [
+      `<span style="color:#88137f">${el.tagName.toLowerCase()}</span>`,
+      el.id && `<span style="color:#1a1aa6">#${el.id}</span>`,
+      el.className && `<span style="color:#9a4500">.${el.className.replace(/ /g, '.')}</span>`,
+    ]
+      .filter(Boolean)
+      .join('')
+  }
+
+  const setStylesAndInnerTextFromDirections = directions => {
+    const containerStyles = [
+      'align-items: center',
+      'border-width: 1px',
+      'font-size: 11px',
+      'line-height: 11px',
+      'margin: 0',
+      'padding: 0',
+      'pointer-events: none',
+      'position: absolute',
+      'visibility: visible',
+      'z-index: 9999999999999',
+    ]
+    const childStyles = [
+      `background: #fdeae6`,
+      `border-radius: 3px`,
+      `color: #f24822`,
+      `font-family: -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', sans-serif`,
+      `margin: 3px`,
+      `padding: 2px 4px`,
+    ]
+
+    Object.keys(directions).forEach(key => {
+      const direction = directions[key]
+
+      direction.el.style = [
+        ...containerStyles,
+        ...direction.styles,
+        `display: ${direction.distance > 1 ? 'flex' : 'none'}`,
+      ].join(';')
+
+      direction.el.innerHTML = `<span style="${childStyles.join(';')}">${direction.distance}</span>`
+    })
+  }
+
+  const drawKittyCornerLines = (contentWindow, boxes, a, b) => {
+    const xDistance = xDistanceFn(a, b)
+    const yDistance = yDistanceFn(a, b)
+    const pos = getKittyCornerPosition(a, b)
+
+    const horzX = contentWindow.pageXOffset + pos.horz.x
+    const horzY = contentWindow.pageYOffset + pos.horz.y
+    const horzH = yDistance + a.height / 2
+
+    const vertX = contentWindow.pageXOffset + pos.vert.x
+    const vertY = contentWindow.pageYOffset + pos.vert.y
+    const vertW = a.width / 2
+
+    const directions = {
+      horz: {
+        el: boxes[0],
+        distance: xDistance,
+        styles: [
+          `border-top-style: ${a.y < b.y ? 'solid' : 'dashed'}`,
+          `border-right-style: dashed`,
+          `border-bottom-style: ${a.y > b.y ? 'solid' : 'dashed'}`,
+          `border-left-style: dashed`,
+          `border-top-color: #f24822`,
+          `border-right-color: ${a.x < b.x ? '#f24822' : 'transparent'}`,
+          `border-bottom-color: #f24822`,
+          `border-left-color: ${a.x > b.x ? '#f24822' : 'transparent'}`,
+          `flex-direction: column`,
+          `justify-content: flex-${a.y < b.y ? 'start' : 'end'}`,
+          `height: ${horzH - 2}px`,
+          `left: ${horzX}px`,
+          `top: ${horzY}px`,
+          `width: ${xDistance - 2}px`,
+        ],
+      },
+      vert: {
+        el: boxes[1],
+        distance: yDistance,
+        styles: [
+          `border-top-style: dashed`,
+          `border-right-style: solid`,
+          `border-bottom-style: dashed`,
+          `border-left-style: solid`,
+          `border-top-color: ${a.y > b.y ? '#f24822' : 'transparent'}`,
+          `border-right-color: ${a.x > b.x ? '#f24822' : 'transparent'}`,
+          `border-bottom-color: ${a.y < b.y ? '#f24822' : 'transparent'}`,
+          `border-left-color: ${a.x < b.x ? '#f24822' : 'transparent'}`,
+          `justify-content: flex-${a.x < b.x ? 'start' : 'end'}`,
+          `height: ${yDistance - 2}px`,
+          `left: ${vertX}px`,
+          `top: ${vertY}px`,
+          `width: ${vertW - 2}px`,
+        ],
+      },
+    }
+
+    setStylesAndInnerTextFromDirections(directions)
+  }
+
+  const drawContainingLines = (contentWindow, legs, a, b) => {
+    const directions = {
+      north: {
+        el: legs[0],
+        distance: Math.round(b.y - a.y),
+        styles: [
+          `border-left: 1px solid #f24822`,
+          `height: ${b.y - a.y}px`,
+          `left: ${contentWindow.pageXOffset + b.x + b.width / 2}px`,
+          `top: ${contentWindow.pageYOffset + a.y - 2}px`,
+        ],
+      },
+      south: {
+        el: legs[1],
+        distance: Math.round(a.y + a.height - (b.y + b.height)),
+        styles: [
+          `border-left: 1px solid #f24822`,
+          `height: ${a.y + a.height - (b.y + b.height)}px`,
+          `left: ${contentWindow.pageXOffset + b.x + b.width / 2}px`,
+          `top: ${contentWindow.pageYOffset + b.y + b.height + 2}px`,
+        ],
+      },
+      east: {
+        el: legs[2],
+        distance: Math.round(a.x + a.width - (b.x + b.width)),
+        styles: [
+          `border-top: 1px solid #f24822`,
+          `flex-direction: column`,
+          `left: ${contentWindow.pageXOffset + b.x + b.width + 2}px`,
+          `top: ${contentWindow.pageYOffset + b.y + b.height / 2}px`,
+          `width: ${a.x + a.width - (b.x + b.width)}px`,
+        ],
+      },
+      west: {
+        el: legs[3],
+        distance: Math.round(b.x - a.x),
+        styles: [
+          `border-top: 1px solid #f24822`,
+          `flex-direction: column`,
+          `left: ${contentWindow.pageXOffset + a.x}px`,
+          `top: ${contentWindow.pageYOffset + b.y + b.height / 2}px`,
+          `width: ${b.x - a.x - 2}px`,
+        ],
+      },
+    }
+
+    setStylesAndInnerTextFromDirections(directions)
+  }
+
+  const drawNorthLine = (contentWindow, el, a, b) => {
+    const pos = getNorthPosition(a, b)
+    const directions = {
+      pos: {
+        el,
+        distance: Math.round(pos.height),
+        styles: [
+          `border-left: 1px solid #f24822`,
+          `height: ${pos.height}px`,
+          `left: ${contentWindow.pageXOffset + pos.x}px`,
+          `top: ${contentWindow.pageYOffset + pos.y}px`,
+        ],
+      },
+    }
+
+    setStylesAndInnerTextFromDirections(directions)
+  }
+
+  const drawSouthLine = (contentWindow, el, a, b) => {
+    const pos = getSouthPosition(a, b)
+    const directions = {
+      pos: {
+        el,
+        distance: Math.round(pos.height),
+        styles: [
+          `border-left: 1px solid #f24822`,
+          `height: ${pos.height}px`,
+          `left: ${contentWindow.pageXOffset + pos.x}px`,
+          `top: ${contentWindow.pageYOffset + pos.y}px`,
+        ],
+      },
+    }
+
+    setStylesAndInnerTextFromDirections(directions)
+  }
+
+  const drawEastLine = (contentWindow, el, a, b) => {
+    const pos = getEastPosition(a, b)
+    const directions = {
+      pos: {
+        el,
+        distance: Math.round(pos.width),
+        styles: [
+          `border-top: 1px solid #f24822`,
+          `flex-direction: column`,
+          `left: ${contentWindow.pageXOffset + pos.x}px`,
+          `top: ${contentWindow.pageYOffset + pos.y}px`,
+          `width: ${pos.width}px`,
+        ],
+      },
+    }
+
+    setStylesAndInnerTextFromDirections(directions)
+  }
+
+  const drawWestLine = (contentWindow, el, a, b) => {
+    const pos = getWestPosition(a, b)
+    const directions = {
+      pos: {
+        el,
+        distance: Math.round(pos.width),
+        styles: [
+          `border-top: 1px solid #f24822`,
+          `flex-direction: column`,
+          `left: ${contentWindow.pageXOffset + pos.x}px`,
+          `top: ${contentWindow.pageYOffset + pos.y}px`,
+          `width: ${pos.width}px`,
+        ],
+      },
+    }
+
+    setStylesAndInnerTextFromDirections(directions)
+  }
+
+  // hide red comparison lines if they exist
+  const hideElements = els => {
+    els.forEach(el => {
+      if (el) {
+        // eslint-disable-next-line no-param-reassign
+        el.style.visibility = 'hidden'
+      }
+    })
+  }
+
+  const removeElementsInContentWindowFromIDs = (contentWindow, ids) => {
+    ids.forEach(id => {
+      // remove element if it exists
+      const el = contentWindow.document.getElementById(id)
+      if (el) {
+        el.parentNode.removeChild(el)
+      }
+    })
+  }
+
+  // =============== commands/selection.js ===================
+
+  const SELECTION_BOX_ID = '_featurepeek_selection_box'
+  const COMPARISON_BOX_ID = '_featurepeek_comparison_box'
+  const MEASURE_DIV_1_ID = '_featurepeek_measure_1'
+  const MEASURE_DIV_2_ID = '_featurepeek_measure_2'
+  const MEASURE_DIV_3_ID = '_featurepeek_measure_3'
+  const MEASURE_DIV_4_ID = '_featurepeek_measure_4'
+
+  // let contentWindow
+  let selectionBox
+  let selectionBoxSelector
+  let selectionBoxDimensions
+  let comparisonBox
+  let comparisonBoxSelector
+  let comparisonBoxDimensions
+  let measureDiv1
+  let measureDiv2
+  let measureDiv3
+  let measureDiv4
+  let isComparing
+  let hover
+  let click
+
+  const selectBox = el => {
+    if (!el || !selectionBox) {
+      return
+    }
+
+    const rect = el.getBoundingClientRect()
+
+    selectionBox.style = getContainerStyle(window, rect, 'blue')
+    selectionBoxSelector.innerHTML = genSelectorHTML(el)
+    selectionBoxDimensions.innerText = `${Math.round(rect.width)} \u00D7 ${Math.round(rect.height)}`
+
+    // hide red comparison lines if they exist
+    const comparisonLines = [comparisonBox, measureDiv1, measureDiv2, measureDiv3, measureDiv4]
+    hideElements(comparisonLines)
+  }
+
+  const compareBox = el => {
+    if (!comparisonBox) {
+      return
+    }
+
+    const a = selectionBox.getBoundingClientRect() // selectionBox (primary selection)
+    const b = el.getBoundingClientRect() // comparisonBox (secondary selection)
+
+    comparisonBox.style = getContainerStyle(window, b, 'red')
+    comparisonBoxSelector.innerHTML = genSelectorHTML(el)
+    comparisonBoxDimensions.innerText = `${Math.round(b.width)} \u00D7 ${Math.round(b.height)}`
+
+    if (isKittyCorner(a, b)) {
+      // A is diagonal to B and vice versa
+      const boxes = [measureDiv1, measureDiv2]
+      drawKittyCornerLines(window, boxes, a, b)
+      hideElements([measureDiv3, measureDiv4])
+    } else if (isContaining(a, b)) {
+      // B is inside of A
+      const legs = [measureDiv1, measureDiv2, measureDiv3, measureDiv4]
+      drawContainingLines(window, legs, a, b)
+    } else if (isContainedBy(a, b)) {
+      // A is inside of B
+      const legs = [measureDiv1, measureDiv2, measureDiv3, measureDiv4]
+      drawContainingLines(window, legs, b, a)
+    } else {
+      // A and B overlap in a way that is not diagonal nor parent/child
+      if (isNorthOf(a, b)) {
+        drawNorthLine(window, measureDiv1, a, b)
+      } else if (isSouthOf(a, b)) {
+        drawSouthLine(window, measureDiv1, a, b)
+      } else if (isEastOf(a, b)) {
+        drawEastLine(window, measureDiv1, a, b)
+      } else if (isWestOf(a, b)) {
+        drawWestLine(window, measureDiv1, a, b)
+      }
+
+      // for now, hide elements, as this relationship is unsupported
+      hideElements([measureDiv2, measureDiv3, measureDiv4])
+    }
+  }
+
+  function beginSelection() {
+    // change cursor
+    document.body.style.cursor = 'crosshair'
+
+    // create element selection div if it doesn't exist already
+    selectionBox = createSelectorAndDimensionsContainer(window, SELECTION_BOX_ID, 'blue')
+    ;[selectionBoxSelector] = selectionBox.getElementsByTagName('code')
+    ;[selectionBoxDimensions] = selectionBox.getElementsByTagName('span')
+
+    // create element comparison div if it doesn't exist already
+    comparisonBox = createSelectorAndDimensionsContainer(window, COMPARISON_BOX_ID, 'red')
+    ;[comparisonBoxSelector] = comparisonBox.getElementsByTagName('code')
+    ;[comparisonBoxDimensions] = comparisonBox.getElementsByTagName('span')
+
+    // create measurement elements if they don't exist already
+    measureDiv1 = createDivInContentWindowWithID(window, MEASURE_DIV_1_ID)
+    measureDiv2 = createDivInContentWindowWithID(window, MEASURE_DIV_2_ID)
+    measureDiv3 = createDivInContentWindowWithID(window, MEASURE_DIV_3_ID)
+    measureDiv4 = createDivInContentWindowWithID(window, MEASURE_DIV_4_ID)
+
+    hover = e => {
+      if (!selectionBox) {
+        // remove mouseover event listener
+        document.body.removeEventListener('mouseover', hover)
+        return
+      }
+
+      if (isComparing) {
+        compareBox(e.target)
+      } else {
+        selectBox(e.target)
+      }
+    }
+
+    click = e => {
+      if (e) {
+        // if click was make by the user and not by our scripts
+        e.preventDefault()
+        e.stopPropagation()
+        selectBox(e.target)
+        isComparing = true
+      } else {
+        // 'click' occured programmatically, so show initial blue bounding box
+        const domTreeAtCursor = document.querySelectorAll(':hover')
+        if (domTreeAtCursor) {
+          const el = domTreeAtCursor[domTreeAtCursor.length - 1]
+          selectBox(el)
+        }
+      }
+    }
+
+    // trigger immediately to show blue bounding boxes as soon as the Option key is pressed
+    click()
+
+    // intercept click on document body
+    document.body.addEventListener('click', click)
+
+    // create mouseover event listener if it hasn't been added already
+    document.body.addEventListener('mouseover', hover)
+  }
+
+  function endSelection() {
+    isComparing = false
+
+    // change cursor back
+    document.body.style.cursor = 'default'
+
+    // clean up any remnant elements created by middleframe
+    const elementIDs = [
+      SELECTION_BOX_ID,
+      COMPARISON_BOX_ID,
+      MEASURE_DIV_1_ID,
+      MEASURE_DIV_2_ID,
+      MEASURE_DIV_3_ID,
+      MEASURE_DIV_4_ID,
+    ]
+    removeElementsInContentWindowFromIDs(window, elementIDs)
+
+    // remove mousemove event listener
+    // contentWindow.document.body.removeEventListener('mousemove', mousemove)
+    // remove mouseover event listener
+    document.body.removeEventListener('mouseover', hover)
+    // remove click event listener
+    document.body.removeEventListener('click', click)
+  }
+
+  // ============== netlify.js ===================
+
   try {
-    var URL = 'https://dashboard.dev.featurepeek.com'
-    var FRAME_ID = 'featurepeek-drawerjs-frame'
-    var d = document 
-    var scriptTag = d.querySelector('script[data-repo][data-id]')
+    const URL = 'https://dashboard.dev.featurepeek.com'
+    const d = document
+    const scriptTag = d.querySelector('script[data-repo][data-id]')
     if (!scriptTag) {
@@ -11,24 +606,30 @@ return
 
-    var hostname = d.location.hostname 
-    var branch = hostname.split('--')[0]
-    var pr = branch.split('-')[2] 
-    var uuid = scriptTag.dataset.id 
-    var repo = scriptTag.dataset.repo
+    const { hostname } = d.location
+    const branch = hostname.split('--')[0]
+    const pr = branch.split('-')[2]
+    const uuid = scriptTag.dataset.id
+    const { repo } = scriptTag.dataset
 
     if (pr && uuid && repo) {
-      var frame = d.createElement('iframe')
+      const frame = d.createElement('iframe')
       frame.allow = 'display-capture'
-      frame.id = FRAME_ID
-      frame.src = URL + '/netlify/' + repo + '/' + pr + '/' + uuid
-      frame.style = 'display:block;border:0;position:fixed;left:0;bottom:0;width:56px;height:300px;z-index:9999999999'
+      frame.src = `${URL}/netlify/${repo}/${pr}/${uuid}`
+      frame.style = [
+        'display:block',
+        'border:0',
+        'position:fixed',
+        'left:0',
+        'bottom:0',
+        'width:56px',
+        'height:300px',
+        'z-index:9999999999',
+      ].join(';')
       d.body.appendChild(frame)
 
-      window.addEventListener('message', function (event) {
+      window.addEventListener('message', event => {
         if (event.origin !== URL) {
           return
         }
-        var message = event.data
+        const message = event.data
 
-        var frame = document.getElementById(FRAME_ID)
-
         switch (message) {
@@ -49,6 +650,16 @@ case 'FULL_VIEWPORT':
             break
+          case 'BEGIN_SELECTION':
+            beginSelection()
+            break
+          case 'END_SELECTION':
+            endSelection()
+            break
+          default:
+            break
         }
-      });
+      })
     }
-  } catch(e) {}
+  } catch (e) {
+    // console.error(e)
+  }
 })()

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

53137

increased by1287.39%

Number of package files

11

increased by57.14%

Lines of code

1126

increased by1985.19%

Worsened metrics

Dev dependency count

12

increased by1100%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes