@inploi/plugin-collaborate 0.0.13 → 0.0.15
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cdn/index.js +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +1 -1
- package/dist/index.mjs.map +1 -1
- package/package.json +2 -2
package/cdn/index.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
// This is an inploi sdk script. Learn more at https://inploi.com
|
|
2
2
|
|
|
3
|
-
"use strict";(()=>{var
|
|
3
|
+
"use strict";(()=>{var v=Object.defineProperty;var m=Object.getOwnPropertySymbols;var _=Object.prototype.hasOwnProperty,O=Object.prototype.propertyIsEnumerable;var h=(e,t,n)=>t in e?v(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n,E=(e,t)=>{for(var n in t||(t={}))_.call(t,n)&&h(e,n,t[n]);if(m)for(var n of m(t))O.call(t,n)&&h(e,n,t[n]);return e};var f=e=>e;var x="isdk_session";var k=new RegExp(`${x}=([^;]+)`);var w={outBrackets:[":","/"],inBrackets:["(",")",".",",","_","%","+"]},y=e=>{let t=!1,n="";for(let r of e)r==="["?(t=!0,n+=`\\${r}`):r==="]"?(t=!1,n+=`\\${r}`):t===!0&&w.inBrackets.includes(r)?n+=`\\${r}`:t===!1&&w.outBrackets.includes(r)?n+=`\\${r}`:n+=r;return n},R=e=>{var r,u,l,a,d,o,s,p;if(((r=e.element)==null?void 0:r.getAttribute("id"))!==null&&!((u=e.id)!=null&&u.length))return e.id=`#${(l=e.element)==null?void 0:l.getAttribute("id")}`,e;if(e.element&&e.element.className.length>0&&!((a=e.classes)!=null&&a.length))return e.classes=`.${y(e.element.className).split(" ").join(".")}`,e;let t=[e.classes,e.id].filter(Boolean).join("")||((d=e.element)==null?void 0:d.tagName),n=(o=e.element)==null?void 0:o.parentElement;if(n){let i=Array.from(n.children).findIndex(P=>P===e.element);return{element:(s=e.element)==null?void 0:s.parentElement,children:[`${t}:nth-child(${i+1})`,...(p=e.children)!=null?p:[]]}}throw new Error("Unable to uniquely identify selector: not unique enough")},b=(e,t,n)=>{let r=u=>{var d;let l=R(u),a=[[l.classes,l.id].filter(Boolean).join(""),...(d=l.children)!=null?d:[]].filter(Boolean).join(">");try{let o=t.querySelectorAll(a);return o.length>1&&o.length<100?r(l):o.length===1?a:null}catch(o){if(o instanceof DOMException)return n==null||n.warn("Invalid selector",a),null;throw o}};return r({element:e,children:[]})};var c=e=>{window.parent.postMessage(E({source:"inploi-collaborate"},e),"*")};var C=e=>e.data.source==="inploi-collaborate";var g=e=>{let t=e.getBoundingClientRect();return{_brand:"pin",x:window.scrollX+t.x,y:window.scrollY+t.y,width:t.width,height:t.height}},I=e=>{let t={};for(let n of e){let r=document.querySelector(y(n));t[n]=r?g(r):null}return t};function T(e,t){let n;return(...r)=>{clearTimeout(n),n=setTimeout(()=>e(...r),t)}}var N=({logger:e,signal:t})=>{let n=[],r;c({type:"READY"}),e.info("Collaborate bridge: Ready");let u=T(()=>{c({type:"SELECTOR_RECTS",selectorRects:I(n)})},50),l=()=>{r&&c({type:"HOVER_ELEMENT",rect:g(r)})},a=d=>{if(C(d)===!1)return;let o=d.data;switch(o.type){case"WATCH_SELECTORS":{n=o.selectors,u();break}case"MOUSE_POSITION":{let s=document.elementsFromPoint(o.x,o.y)[0];if(s===r)return;r=s,l();break}case"DROP_PIN":{let s=document.elementsFromPoint(o.x,o.y)[0];if(!s)return;let p=b(s,document.body);if(!p)return;let i=s.getBoundingClientRect();c({type:"PIN_POSITION",pin:{rect:g(s),selector:p,xPercent:(o.x-i.x)/i.width,yPercent:(o.y-i.y)/i.height}});break}case"SETUP_EVENT_HANDLERS":{e.info("Collaborate bridge: Setting up event handlers"),window.addEventListener("beforeunload",()=>{c({type:"DISPOSE"})}),c({type:"RESIZE",scrollHeight:document.body.scrollHeight}),window.addEventListener("resize",()=>{u(),c({type:"RESIZE",scrollHeight:document.body.scrollHeight})},{signal:t}),document.body.addEventListener("click",s=>{if(s.preventDefault(),s.stopPropagation(),!r)return;let p=b(r,document.body);if(!p)return;let i=r.getBoundingClientRect();l(),c({type:"PIN_POSITION",pin:{rect:g(r),selector:p,xPercent:(s.clientX-i.x)/i.width,yPercent:(s.clientY-i.y)/i.height}})},{signal:t}),e.info("Collaborate bridge: Event handlers set up");break}case"SCROLL":window.scrollTo({left:o.scrollX,top:o.scrollY,behavior:"instant"}),u();break;default:}};window.addEventListener("message",a,{signal:t}),t==null||t.addEventListener("abort",()=>{e.info("Collaborate bridge: disposing"),c({type:"DISPOSE"}),window.removeEventListener("message",a)})},S=()=>f(({logger:e})=>({setupBridge:t=>N({logger:e,signal:t==null?void 0:t.signal})}));if(!window.inploi)throw new Error("Please insert the SDK script tag above the plugins.");window.inploi.collaboratePlugin=S;})();
|
package/dist/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var E=Object.defineProperty;var O=Object.getOwnPropertyDescriptor;var
|
|
1
|
+
"use strict";var E=Object.defineProperty;var O=Object.getOwnPropertyDescriptor;var w=Object.getOwnPropertyNames,S=Object.getOwnPropertySymbols;var P=Object.prototype.hasOwnProperty,I=Object.prototype.propertyIsEnumerable;var h=(e,t,n)=>t in e?E(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n,g=(e,t)=>{for(var n in t||(t={}))P.call(t,n)&&h(e,n,t[n]);if(S)for(var n of S(t))I.call(t,n)&&h(e,n,t[n]);return e};var x=(e,t)=>{for(var n in t)E(e,n,{get:t[n],enumerable:!0})},C=(e,t,n,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of w(t))!P.call(e,s)&&s!==n&&E(e,s,{get:()=>t[s],enumerable:!(r=O(t,s))||r.enumerable});return e};var T=e=>C(E({},"__esModule",{value:!0}),e);var k={};x(k,{collaboratePlugin:()=>H,createInboundEventSender:()=>N,isCollaborateOutboundEvent:()=>B});module.exports=T(k);var v=require("@inploi/sdk");var R={outBrackets:[":","/"],inBrackets:["(",")",".",",","_","%","+"]},y=e=>{let t=!1,n="";for(let r of e)r==="["?(t=!0,n+=`\\${r}`):r==="]"?(t=!1,n+=`\\${r}`):t===!0&&R.inBrackets.includes(r)?n+=`\\${r}`:t===!1&&R.outBrackets.includes(r)?n+=`\\${r}`:n+=r;return n},L=e=>{var r,s,c,a,d,o,l,p;if(((r=e.element)==null?void 0:r.getAttribute("id"))!==null&&!((s=e.id)!=null&&s.length))return e.id=`#${(c=e.element)==null?void 0:c.getAttribute("id")}`,e;if(e.element&&e.element.className.length>0&&!((a=e.classes)!=null&&a.length))return e.classes=`.${y(e.element.className).split(" ").join(".")}`,e;let t=[e.classes,e.id].filter(Boolean).join("")||((d=e.element)==null?void 0:d.tagName),n=(o=e.element)==null?void 0:o.parentElement;if(n){let i=Array.from(n.children).findIndex(f=>f===e.element);return{element:(l=e.element)==null?void 0:l.parentElement,children:[`${t}:nth-child(${i+1})`,...(p=e.children)!=null?p:[]]}}throw new Error("Unable to uniquely identify selector: not unique enough")},m=(e,t,n)=>{let r=s=>{var d;let c=L(s),a=[[c.classes,c.id].filter(Boolean).join(""),...(d=c.children)!=null?d:[]].filter(Boolean).join(">");try{let o=t.querySelectorAll(a);return o.length>1&&o.length<100?r(c):o.length===1?a:null}catch(o){if(o instanceof DOMException)return n==null||n.warn("Invalid selector",a),null;throw o}};return r({element:e,children:[]})};var u=e=>{window.parent.postMessage(g({source:"inploi-collaborate"},e),"*")},N=e=>({sendInboundEvent:t=>{var n;return(n=e.source)==null?void 0:n.postMessage(g({source:"inploi-collaborate"},t),{targetOrigin:e.origin})}}),_=e=>e.data.source==="inploi-collaborate",B=e=>e.data.source==="inploi-collaborate",b=e=>{let t=e.getBoundingClientRect();return{_brand:"pin",x:window.scrollX+t.x,y:window.scrollY+t.y,width:t.width,height:t.height}},D=e=>{let t={};for(let n of e){let r=document.querySelector(y(n));t[n]=r?b(r):null}return t};function M(e,t){let n;return(...r)=>{clearTimeout(n),n=setTimeout(()=>e(...r),t)}}var A=({logger:e,signal:t})=>{let n=[],r;u({type:"READY"}),e.info("Collaborate bridge: Ready");let s=M(()=>{u({type:"SELECTOR_RECTS",selectorRects:D(n)})},50),c=()=>{r&&u({type:"HOVER_ELEMENT",rect:b(r)})},a=d=>{if(_(d)===!1)return;let o=d.data;switch(o.type){case"WATCH_SELECTORS":{n=o.selectors,s();break}case"MOUSE_POSITION":{let l=document.elementsFromPoint(o.x,o.y)[0];if(l===r)return;r=l,c();break}case"DROP_PIN":{let l=document.elementsFromPoint(o.x,o.y)[0];if(!l)return;let p=m(l,document.body);if(!p)return;let i=l.getBoundingClientRect();u({type:"PIN_POSITION",pin:{rect:b(l),selector:p,xPercent:(o.x-i.x)/i.width,yPercent:(o.y-i.y)/i.height}});break}case"SETUP_EVENT_HANDLERS":{e.info("Collaborate bridge: Setting up event handlers"),window.addEventListener("beforeunload",()=>{u({type:"DISPOSE"})}),u({type:"RESIZE",scrollHeight:document.body.scrollHeight}),window.addEventListener("resize",()=>{s(),u({type:"RESIZE",scrollHeight:document.body.scrollHeight})},{signal:t}),document.body.addEventListener("click",l=>{if(l.preventDefault(),l.stopPropagation(),!r)return;let p=m(r,document.body);if(!p)return;let i=r.getBoundingClientRect();c(),u({type:"PIN_POSITION",pin:{rect:b(r),selector:p,xPercent:(l.clientX-i.x)/i.width,yPercent:(l.clientY-i.y)/i.height}})},{signal:t}),e.info("Collaborate bridge: Event handlers set up");break}case"SCROLL":window.scrollTo({left:o.scrollX,top:o.scrollY,behavior:"instant"}),s();break;default:}};window.addEventListener("message",a,{signal:t}),t==null||t.addEventListener("abort",()=>{e.info("Collaborate bridge: disposing"),u({type:"DISPOSE"}),window.removeEventListener("message",a)})},H=()=>(0,v.createPlugin)(({logger:e})=>({setupBridge:t=>A({logger:e,signal:t==null?void 0:t.signal})}));0&&(module.exports={collaboratePlugin,createInboundEventSender,isCollaborateOutboundEvent});
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts","../src/collaborate.ts","../src/collaborate.selector.ts"],"sourcesContent":["export * from './collaborate';\n","import { Logger, createPlugin } from '@inploi/sdk';\n\nimport { escapeClassName, getElementUniqueSelector } from './collaborate.selector';\n\nexport type CollaborateInboundEvent =\n\t| {\n\t\t\ttype: 'SETUP_EVENT_HANDLERS';\n\t }\n\t| { type: 'WATCH_SELECTORS'; selectors: string[] }\n\t| { type: 'SCROLL'; scrollY: number; scrollX: number }\n\t| { type: 'MOUSE_POSITION'; x: number; y: number }\n\t| { type: 'DROP_PIN'; x: number; y: number };\n\nexport type CollaborateOutboundEvent =\n\t| { type: 'READY' }\n\t| {\n\t\t\ttype: 'RESIZE';\n\t\t\tscrollHeight: number;\n\t }\n\t| {\n\t\t\ttype: 'HOVER_ELEMENT';\n\t\t\trect: PinRect | null;\n\t }\n\t| {\n\t\t\ttype: 'PIN_POSITION';\n\t\t\tpin: DroppedPin;\n\t }\n\t| {\n\t\t\ttype: 'DISPOSE';\n\t }\n\t| {\n\t\t\ttype: 'SELECTOR_RECTS';\n\t\t\tselectorRects: SelectorRects;\n\t };\n\nexport type DroppedPin = { selector: string; xPercent: number; yPercent: number; rect: PinRect };\n\nconst sendOutboundEvent = (data: CollaborateOutboundEvent) => {\n\twindow.parent.postMessage({ source: 'inploi-collaborate', ...data }, '*');\n};\n\nexport const createInboundEventSender = (e: MessageEvent) => {\n\treturn {\n\t\tsendInboundEvent: (data: CollaborateInboundEvent) =>\n\t\t\te.source?.postMessage({ source: 'inploi-collaborate', ...data }, { targetOrigin: e.origin }),\n\t};\n};\n\nconst isCollaborateInboundEvent = (event: MessageEvent): event is MessageEvent<CollaborateInboundEvent> => {\n\treturn event.data.source === 'inploi-collaborate';\n};\n\nexport const isCollaborateOutboundEvent = (event: MessageEvent): event is MessageEvent<CollaborateOutboundEvent> => {\n\treturn event.data.source === 'inploi-collaborate';\n};\n\nexport type PinRect = {\n\t_brand: 'pin';\n\tx: number;\n\ty: number;\n\twidth: number;\n\theight: number;\n};\n\nconst getElementPinRect = (element: Element): PinRect => {\n\tconst boundingBox = element.getBoundingClientRect();\n\treturn {\n\t\t_brand: 'pin',\n\t\tx: window.scrollX + boundingBox.x,\n\t\ty: window.scrollY + boundingBox.y,\n\t\twidth: boundingBox.width,\n\t\theight: boundingBox.height,\n\t};\n};\n\nexport type SelectorRects = { [selector: string]: PinRect | null };\n\nconst getSelectorRects = (selectors: string[]) => {\n\tconst selectorRects: SelectorRects = {};\n\tfor (const selector of selectors) {\n\t\tconst element = document.querySelector(escapeClassName(selector));\n\t\tselectorRects[selector] = element ? getElementPinRect(element) : null;\n\t}\n\treturn selectorRects;\n};\n\nfunction debounce<F extends (...args: Parameters<F>) => ReturnType<F>>(\n\tfunc: F,\n\twaitFor: number,\n): (...args: Parameters<F>) => void {\n\tlet timeout: ReturnType<typeof setTimeout>;\n\n\treturn (...args: Parameters<F>): void => {\n\t\tclearTimeout(timeout);\n\t\ttimeout = setTimeout(() => func(...args), waitFor);\n\t};\n}\n\n/** Sets up the bridge for Collaborate to be able to communicate with the host page */\nconst setupBridge = ({ logger, signal }: { signal?: AbortSignal; logger: Logger }) => {\n\tlet watchedSelectors: string[] = [];\n\tlet hoveredElement: Element | undefined;\n\tsendOutboundEvent({ type: 'READY' });\n\tlogger.info('Collaborate bridge: Ready');\n\n\tconst broadcastSelectors = debounce(() => {\n\t\tsendOutboundEvent({ type: 'SELECTOR_RECTS', selectorRects: getSelectorRects(watchedSelectors) });\n\t}, 50);\n\n\tconst broadcastHoveredElement = () => {\n\t\tif (!hoveredElement) return;\n\t\tsendOutboundEvent({\n\t\t\ttype: 'HOVER_ELEMENT',\n\t\t\trect: getElementPinRect(hoveredElement),\n\t\t});\n\t};\n\n\tconst handleEvent = (messageEvent: MessageEvent) => {\n\t\tif (isCollaborateInboundEvent(messageEvent) === false) return;\n\t\tconst collaborateEvent = messageEvent.data;\n\t\tswitch (collaborateEvent.type) {\n\t\t\tcase 'WATCH_SELECTORS': {\n\t\t\t\twatchedSelectors = collaborateEvent.selectors;\n\t\t\t\tbroadcastSelectors();\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'MOUSE_POSITION': {\n\t\t\t\tconst newElement = document.elementsFromPoint(collaborateEvent.x, collaborateEvent.y)[0];\n\t\t\t\tif (newElement === hoveredElement) return;\n\t\t\t\thoveredElement = newElement;\n\t\t\t\tbroadcastHoveredElement();\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'DROP_PIN': {\n\t\t\t\tconst element = document.elementsFromPoint(collaborateEvent.x, collaborateEvent.y)[0];\n\t\t\t\tif (!element) return;\n\t\t\t\tconst selector = getElementUniqueSelector(element, document.body);\n\t\t\t\tif (!selector) return;\n\t\t\t\tconst rect = element.getBoundingClientRect();\n\t\t\t\tsendOutboundEvent({\n\t\t\t\t\ttype: 'PIN_POSITION',\n\t\t\t\t\tpin: {\n\t\t\t\t\t\trect: getElementPinRect(element),\n\t\t\t\t\t\tselector,\n\t\t\t\t\t\txPercent: (collaborateEvent.x - rect.x) / rect.width,\n\t\t\t\t\t\tyPercent: (collaborateEvent.y - rect.y) / rect.height,\n\t\t\t\t\t},\n\t\t\t\t});\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'SETUP_EVENT_HANDLERS': {\n\t\t\t\tlogger.info('Collaborate bridge: Setting up event handlers');\n\t\t\t\twindow.addEventListener('beforeunload', () => {\n\t\t\t\t\tsendOutboundEvent({ type: 'DISPOSE' });\n\t\t\t\t});\n\t\t\t\tsendOutboundEvent({ type: 'RESIZE', scrollHeight: document.body.scrollHeight });\n\t\t\t\twindow.addEventListener(\n\t\t\t\t\t'resize',\n\t\t\t\t\t() => {\n\t\t\t\t\t\tbroadcastSelectors();\n\t\t\t\t\t\tsendOutboundEvent({ type: 'RESIZE', scrollHeight: document.body.scrollHeight });\n\t\t\t\t\t},\n\t\t\t\t\t{ signal },\n\t\t\t\t);\n\n\t\t\t\tdocument.body.addEventListener(\n\t\t\t\t\t'click',\n\t\t\t\t\tevent => {\n\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\t\tif (!hoveredElement) return;\n\t\t\t\t\t\tconst selector = getElementUniqueSelector(hoveredElement, document.body);\n\t\t\t\t\t\tif (!selector) return;\n\t\t\t\t\t\tconst rect = hoveredElement.getBoundingClientRect();\n\t\t\t\t\t\tbroadcastHoveredElement();\n\t\t\t\t\t\tsendOutboundEvent({\n\t\t\t\t\t\t\ttype: 'PIN_POSITION',\n\t\t\t\t\t\t\tpin: {\n\t\t\t\t\t\t\t\trect: getElementPinRect(hoveredElement),\n\t\t\t\t\t\t\t\tselector,\n\t\t\t\t\t\t\t\txPercent: (event.clientX - rect.x) / rect.width,\n\t\t\t\t\t\t\t\tyPercent: (event.clientY - rect.y) / rect.height,\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t});\n\t\t\t\t\t},\n\t\t\t\t\t{ signal },\n\t\t\t\t);\n\t\t\t\tlogger.info('Collaborate bridge: Event handlers set up');\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'SCROLL':\n\t\t\t\twindow.scrollTo({ left: collaborateEvent.scrollX, top: collaborateEvent.scrollY, behavior: 'instant' });\n\t\t\t\tbroadcastSelectors();\n\t\t\t\tbreak;\n\t\t\tdefault:\n\t\t\t\tcollaborateEvent satisfies never;\n\t\t}\n\t};\n\n\twindow.addEventListener('message', handleEvent, { signal });\n\tsignal?.addEventListener('abort', () => {\n\t\tlogger.info('Collaborate bridge: disposing');\n\t\tsendOutboundEvent({ type: 'DISPOSE' });\n\t\twindow.removeEventListener('message', handleEvent);\n\t});\n};\n\nexport const collaboratePlugin = () =>\n\tcreatePlugin(({ logger }) => ({\n\t\tsetupBridge: (params?: { signal?: AbortSignal }) =>\n\t\t\tsetupBridge({\n\t\t\t\tlogger,\n\t\t\t\tsignal: params?.signal,\n\t\t\t}),\n\t}));\n","type SelectorProperties = {\n\telement: Element | null | undefined;\n\tid?: string;\n\tclasses?: string;\n\tchildren?: string[];\n};\n\nconst escapeParensInBrackets = (input: string) => {\n\tlet inBrackets = false;\n\tlet result = '';\n\n\tfor (const char of input) {\n\t\tif (char === '[') {\n\t\t\tinBrackets = true;\n\t\t\tresult += char;\n\t\t} else if (char === ']') {\n\t\t\tinBrackets = false;\n\t\t\tresult += char;\n\t\t} else if (inBrackets && (char === '(' || char === ')')) {\n\t\t\tresult += '\\\\' + char;\n\t\t} else {\n\t\t\tresult += char;\n\t\t}\n\t}\n\n\treturn result;\n};\n\nexport const escapeClassName = (input: string) => {\n\treturn escapeParensInBrackets(input.replace(/(?<!\\\\)[:[\\]/%_+]/g, '\\\\$&'));\n};\n\nconst getSelectorProperties = (from: SelectorProperties): SelectorProperties => {\n\tif (from.element?.getAttribute('id') !== null && !from.id?.length) {\n\t\tfrom.id = `#${from.element?.getAttribute('id')}`;\n\t\treturn from;\n\t}\n\n\tif (from.element && from.element.className.length > 0 && !from.classes?.length) {\n\t\tfrom.classes = `.${escapeClassName(from.element.className).split(' ').join('.')}`;\n\t\treturn from;\n\t}\n\n\tconst newSelector = [from.classes, from.id].filter(Boolean).join('') || from.element?.tagName;\n\n\tconst parent = from.element?.parentElement;\n\tif (parent) {\n\t\tconst childIndex = Array.from(parent.children).findIndex(child => child === from.element);\n\t\treturn {\n\t\t\telement: from.element?.parentElement,\n\t\t\tchildren: [`${newSelector}:nth-child(${childIndex + 1})`, ...(from.children ?? [])],\n\t\t};\n\t}\n\tthrow new Error('Unable to uniquely identify selector: not unique enough');\n};\n\nexport const getElementUniqueSelector = (element: Element, context: Element) => {\n\tconst getSelector = (prefilled: SelectorProperties): string | null => {\n\t\tconst properties = getSelectorProperties(prefilled);\n\n\t\tconst newSelector = [[properties.classes, properties.id].filter(Boolean).join(''), ...(properties.children ?? [])]\n\t\t\t.filter(Boolean)\n\t\t\t.join('>');\n\n\t\tconst matchingSelectors = context.querySelectorAll(newSelector);\n\n\t\tif (matchingSelectors.length > 1 && matchingSelectors.length < 100) return getSelector(properties);\n\t\tif (matchingSelectors.length === 1) return newSelector;\n\n\t\treturn null;\n\t};\n\n\treturn getSelector({ element, children: [] });\n};\n"],"mappings":"4rBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,uBAAAE,EAAA,6BAAAC,EAAA,+BAAAC,IAAA,eAAAC,EAAAL,GCAA,IAAAM,EAAqC,uBCOrC,IAAMC,EAA0BC,GAAkB,CACjD,IAAIC,EAAa,GACbC,EAAS,GAEb,QAAWC,KAAQH,EACdG,IAAS,KACZF,EAAa,GACbC,GAAUC,GACAA,IAAS,KACnBF,EAAa,GACbC,GAAUC,GACAF,IAAeE,IAAS,KAAOA,IAAS,KAClDD,GAAU,KAAOC,EAEjBD,GAAUC,EAIZ,OAAOD,CACR,EAEaE,EAAmBJ,GACxBD,EAAuBC,EAAM,QAAQ,WAAC,uBAAkB,GAAC,EAAE,MAAM,CAAC,EAGpEK,EAAyBC,GAAiD,CAhChF,IAAAC,EAAAC,EAAAC,EAAAC,EAAAC,EAAAC,EAAAC,EAAAC,EAiCC,KAAIP,EAAAD,EAAK,UAAL,YAAAC,EAAc,aAAa,SAAU,MAAQ,GAACC,EAAAF,EAAK,KAAL,MAAAE,EAAS,QAC1D,OAAAF,EAAK,GAAK,KAAIG,EAAAH,EAAK,UAAL,YAAAG,EAAc,aAAa,KAAK,GACvCH,EAGR,GAAIA,EAAK,SAAWA,EAAK,QAAQ,UAAU,OAAS,GAAK,GAACI,EAAAJ,EAAK,UAAL,MAAAI,EAAc,QACvE,OAAAJ,EAAK,QAAU,IAAIF,EAAgBE,EAAK,QAAQ,SAAS,EAAE,MAAM,GAAG,EAAE,KAAK,GAAG,CAAC,GACxEA,EAGR,IAAMS,EAAc,CAACT,EAAK,QAASA,EAAK,EAAE,EAAE,OAAO,OAAO,EAAE,KAAK,EAAE,KAAKK,EAAAL,EAAK,UAAL,YAAAK,EAAc,SAEhFK,GAASJ,EAAAN,EAAK,UAAL,YAAAM,EAAc,cAC7B,GAAII,EAAQ,CACX,IAAMC,EAAa,MAAM,KAAKD,EAAO,QAAQ,EAAE,UAAUE,GAASA,IAAUZ,EAAK,OAAO,EACxF,MAAO,CACN,SAASO,EAAAP,EAAK,UAAL,YAAAO,EAAc,cACvB,SAAU,CAAC,GAAGE,CAAW,cAAcE,EAAa,CAAC,IAAK,IAAIH,EAAAR,EAAK,WAAL,KAAAQ,EAAiB,CAAC,CAAE,CACnF,CACD,CACA,MAAM,IAAI,MAAM,yDAAyD,CAC1E,EAEaK,EAA2B,CAACC,EAAkBC,IAAqB,CAC/E,IAAMC,EAAeC,GAAiD,CAzDvE,IAAAhB,EA0DE,IAAMiB,EAAanB,EAAsBkB,CAAS,EAE5CR,EAAc,CAAC,CAACS,EAAW,QAASA,EAAW,EAAE,EAAE,OAAO,OAAO,EAAE,KAAK,EAAE,EAAG,IAAIjB,EAAAiB,EAAW,WAAX,KAAAjB,EAAuB,CAAC,CAAE,EAC/G,OAAO,OAAO,EACd,KAAK,GAAG,EAEJkB,EAAoBJ,EAAQ,iBAAiBN,CAAW,EAE9D,OAAIU,EAAkB,OAAS,GAAKA,EAAkB,OAAS,IAAYH,EAAYE,CAAU,EAC7FC,EAAkB,SAAW,EAAUV,EAEpC,IACR,EAEA,OAAOO,EAAY,CAAE,QAAAF,EAAS,SAAU,CAAC,CAAE,CAAC,CAC7C,EDpCA,IAAMM,EAAqBC,GAAmC,CAC7D,OAAO,OAAO,YAAYC,EAAA,CAAE,OAAQ,sBAAyBD,GAAQ,GAAG,CACzE,EAEaE,EAA4B,IACjC,CACN,iBAAmBF,GAA+B,CA3CpD,IAAAG,EA4CG,OAAAA,EAAA,EAAE,SAAF,YAAAA,EAAU,YAAYF,EAAA,CAAE,OAAQ,sBAAyBD,GAAQ,CAAE,aAAc,EAAE,MAAO,GAC5F,GAGKI,EAA6BC,GAC3BA,EAAM,KAAK,SAAW,qBAGjBC,EAA8BD,GACnCA,EAAM,KAAK,SAAW,qBAWxBE,EAAqBC,GAA8B,CACxD,IAAMC,EAAcD,EAAQ,sBAAsB,EAClD,MAAO,CACN,OAAQ,MACR,EAAG,OAAO,QAAUC,EAAY,EAChC,EAAG,OAAO,QAAUA,EAAY,EAChC,MAAOA,EAAY,MACnB,OAAQA,EAAY,MACrB,CACD,EAIMC,EAAoBC,GAAwB,CACjD,IAAMC,EAA+B,CAAC,EACtC,QAAWC,KAAYF,EAAW,CACjC,IAAMH,EAAU,SAAS,cAAcM,EAAgBD,CAAQ,CAAC,EAChED,EAAcC,CAAQ,EAAIL,EAAUD,EAAkBC,CAAO,EAAI,IAClE,CACA,OAAOI,CACR,EAEA,SAASG,EACRC,EACAC,EACmC,CACnC,IAAIC,EAEJ,MAAO,IAAIC,IAA8B,CACxC,aAAaD,CAAO,EACpBA,EAAU,WAAW,IAAMF,EAAK,GAAGG,CAAI,EAAGF,CAAO,CAClD,CACD,CAGA,IAAMG,EAAc,CAAC,CAAE,OAAAC,EAAQ,OAAAC,CAAO,IAAgD,CACrF,IAAIC,EAA6B,CAAC,EAC9BC,EACJzB,EAAkB,CAAE,KAAM,OAAQ,CAAC,EACnCsB,EAAO,KAAK,2BAA2B,EAEvC,IAAMI,EAAqBV,EAAS,IAAM,CACzChB,EAAkB,CAAE,KAAM,iBAAkB,cAAeW,EAAiBa,CAAgB,CAAE,CAAC,CAChG,EAAG,EAAE,EAECG,EAA0B,IAAM,CAChCF,GACLzB,EAAkB,CACjB,KAAM,gBACN,KAAMQ,EAAkBiB,CAAc,CACvC,CAAC,CACF,EAEMG,EAAeC,GAA+B,CACnD,GAAIxB,EAA0BwB,CAAY,IAAM,GAAO,OACvD,IAAMC,EAAmBD,EAAa,KACtC,OAAQC,EAAiB,KAAM,CAC9B,IAAK,kBAAmB,CACvBN,EAAmBM,EAAiB,UACpCJ,EAAmB,EACnB,KACD,CACA,IAAK,iBAAkB,CACtB,IAAMK,EAAa,SAAS,kBAAkBD,EAAiB,EAAGA,EAAiB,CAAC,EAAE,CAAC,EACvF,GAAIC,IAAeN,EAAgB,OACnCA,EAAiBM,EACjBJ,EAAwB,EACxB,KACD,CACA,IAAK,WAAY,CAChB,IAAMlB,EAAU,SAAS,kBAAkBqB,EAAiB,EAAGA,EAAiB,CAAC,EAAE,CAAC,EACpF,GAAI,CAACrB,EAAS,OACd,IAAMK,EAAWkB,EAAyBvB,EAAS,SAAS,IAAI,EAChE,GAAI,CAACK,EAAU,OACf,IAAMmB,EAAOxB,EAAQ,sBAAsB,EAC3CT,EAAkB,CACjB,KAAM,eACN,IAAK,CACJ,KAAMQ,EAAkBC,CAAO,EAC/B,SAAAK,EACA,UAAWgB,EAAiB,EAAIG,EAAK,GAAKA,EAAK,MAC/C,UAAWH,EAAiB,EAAIG,EAAK,GAAKA,EAAK,MAChD,CACD,CAAC,EACD,KACD,CACA,IAAK,uBAAwB,CAC5BX,EAAO,KAAK,+CAA+C,EAC3D,OAAO,iBAAiB,eAAgB,IAAM,CAC7CtB,EAAkB,CAAE,KAAM,SAAU,CAAC,CACtC,CAAC,EACDA,EAAkB,CAAE,KAAM,SAAU,aAAc,SAAS,KAAK,YAAa,CAAC,EAC9E,OAAO,iBACN,SACA,IAAM,CACL0B,EAAmB,EACnB1B,EAAkB,CAAE,KAAM,SAAU,aAAc,SAAS,KAAK,YAAa,CAAC,CAC/E,EACA,CAAE,OAAAuB,CAAO,CACV,EAEA,SAAS,KAAK,iBACb,QACAjB,GAAS,CAGR,GAFAA,EAAM,eAAe,EACrBA,EAAM,gBAAgB,EAClB,CAACmB,EAAgB,OACrB,IAAMX,EAAWkB,EAAyBP,EAAgB,SAAS,IAAI,EACvE,GAAI,CAACX,EAAU,OACf,IAAMmB,EAAOR,EAAe,sBAAsB,EAClDE,EAAwB,EACxB3B,EAAkB,CACjB,KAAM,eACN,IAAK,CACJ,KAAMQ,EAAkBiB,CAAc,EACtC,SAAAX,EACA,UAAWR,EAAM,QAAU2B,EAAK,GAAKA,EAAK,MAC1C,UAAW3B,EAAM,QAAU2B,EAAK,GAAKA,EAAK,MAC3C,CACD,CAAC,CACF,EACA,CAAE,OAAAV,CAAO,CACV,EACAD,EAAO,KAAK,2CAA2C,EACvD,KACD,CACA,IAAK,SACJ,OAAO,SAAS,CAAE,KAAMQ,EAAiB,QAAS,IAAKA,EAAiB,QAAS,SAAU,SAAU,CAAC,EACtGJ,EAAmB,EACnB,MACD,QAED,CACD,EAEA,OAAO,iBAAiB,UAAWE,EAAa,CAAE,OAAAL,CAAO,CAAC,EAC1DA,GAAA,MAAAA,EAAQ,iBAAiB,QAAS,IAAM,CACvCD,EAAO,KAAK,+BAA+B,EAC3CtB,EAAkB,CAAE,KAAM,SAAU,CAAC,EACrC,OAAO,oBAAoB,UAAW4B,CAAW,CAClD,EACD,EAEaM,EAAoB,OAChC,gBAAa,CAAC,CAAE,OAAAZ,CAAO,KAAO,CAC7B,YAAca,GACbd,EAAY,CACX,OAAAC,EACA,OAAQa,GAAA,YAAAA,EAAQ,MACjB,CAAC,CACH,EAAE","names":["src_exports","__export","collaboratePlugin","createInboundEventSender","isCollaborateOutboundEvent","__toCommonJS","import_sdk","escapeParensInBrackets","input","inBrackets","result","char","escapeClassName","getSelectorProperties","from","_a","_b","_c","_d","_e","_f","_g","_h","newSelector","parent","childIndex","child","getElementUniqueSelector","element","context","getSelector","prefilled","properties","matchingSelectors","sendOutboundEvent","data","__spreadValues","createInboundEventSender","_a","isCollaborateInboundEvent","event","isCollaborateOutboundEvent","getElementPinRect","element","boundingBox","getSelectorRects","selectors","selectorRects","selector","escapeClassName","debounce","func","waitFor","timeout","args","setupBridge","logger","signal","watchedSelectors","hoveredElement","broadcastSelectors","broadcastHoveredElement","handleEvent","messageEvent","collaborateEvent","newElement","getElementUniqueSelector","rect","collaboratePlugin","params"]}
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/collaborate.ts","../src/collaborate.selector.ts"],"sourcesContent":["export * from './collaborate';\n","import { Logger, createPlugin } from '@inploi/sdk';\n\nimport { escapeClassName, getElementUniqueSelector } from './collaborate.selector';\n\nexport type CollaborateInboundEvent =\n\t| {\n\t\t\ttype: 'SETUP_EVENT_HANDLERS';\n\t }\n\t| { type: 'WATCH_SELECTORS'; selectors: string[] }\n\t| { type: 'SCROLL'; scrollY: number; scrollX: number }\n\t| { type: 'MOUSE_POSITION'; x: number; y: number }\n\t| { type: 'DROP_PIN'; x: number; y: number };\n\nexport type CollaborateOutboundEvent =\n\t| { type: 'READY' }\n\t| {\n\t\t\ttype: 'RESIZE';\n\t\t\tscrollHeight: number;\n\t }\n\t| {\n\t\t\ttype: 'HOVER_ELEMENT';\n\t\t\trect: PinRect | null;\n\t }\n\t| {\n\t\t\ttype: 'PIN_POSITION';\n\t\t\tpin: DroppedPin;\n\t }\n\t| {\n\t\t\ttype: 'DISPOSE';\n\t }\n\t| {\n\t\t\ttype: 'SELECTOR_RECTS';\n\t\t\tselectorRects: SelectorRects;\n\t };\n\nexport type DroppedPin = { selector: string; xPercent: number; yPercent: number; rect: PinRect };\n\nconst sendOutboundEvent = (data: CollaborateOutboundEvent) => {\n\twindow.parent.postMessage({ source: 'inploi-collaborate', ...data }, '*');\n};\n\nexport const createInboundEventSender = (e: MessageEvent) => {\n\treturn {\n\t\tsendInboundEvent: (data: CollaborateInboundEvent) =>\n\t\t\te.source?.postMessage({ source: 'inploi-collaborate', ...data }, { targetOrigin: e.origin }),\n\t};\n};\n\nconst isCollaborateInboundEvent = (event: MessageEvent): event is MessageEvent<CollaborateInboundEvent> => {\n\treturn event.data.source === 'inploi-collaborate';\n};\n\nexport const isCollaborateOutboundEvent = (event: MessageEvent): event is MessageEvent<CollaborateOutboundEvent> => {\n\treturn event.data.source === 'inploi-collaborate';\n};\n\nexport type PinRect = {\n\t_brand: 'pin';\n\tx: number;\n\ty: number;\n\twidth: number;\n\theight: number;\n};\n\nconst getElementPinRect = (element: Element): PinRect => {\n\tconst boundingBox = element.getBoundingClientRect();\n\treturn {\n\t\t_brand: 'pin',\n\t\tx: window.scrollX + boundingBox.x,\n\t\ty: window.scrollY + boundingBox.y,\n\t\twidth: boundingBox.width,\n\t\theight: boundingBox.height,\n\t};\n};\n\nexport type SelectorRects = { [selector: string]: PinRect | null };\n\nconst getSelectorRects = (selectors: string[]) => {\n\tconst selectorRects: SelectorRects = {};\n\tfor (const selector of selectors) {\n\t\tconst element = document.querySelector(escapeClassName(selector));\n\t\tselectorRects[selector] = element ? getElementPinRect(element) : null;\n\t}\n\treturn selectorRects;\n};\n\nfunction debounce<F extends (...args: Parameters<F>) => ReturnType<F>>(\n\tfunc: F,\n\twaitFor: number,\n): (...args: Parameters<F>) => void {\n\tlet timeout: ReturnType<typeof setTimeout>;\n\n\treturn (...args: Parameters<F>): void => {\n\t\tclearTimeout(timeout);\n\t\ttimeout = setTimeout(() => func(...args), waitFor);\n\t};\n}\n\n/** Sets up the bridge for Collaborate to be able to communicate with the host page */\nconst setupBridge = ({ logger, signal }: { signal?: AbortSignal; logger: Logger }) => {\n\tlet watchedSelectors: string[] = [];\n\tlet hoveredElement: Element | undefined;\n\tsendOutboundEvent({ type: 'READY' });\n\tlogger.info('Collaborate bridge: Ready');\n\n\tconst broadcastSelectors = debounce(() => {\n\t\tsendOutboundEvent({ type: 'SELECTOR_RECTS', selectorRects: getSelectorRects(watchedSelectors) });\n\t}, 50);\n\n\tconst broadcastHoveredElement = () => {\n\t\tif (!hoveredElement) return;\n\t\tsendOutboundEvent({\n\t\t\ttype: 'HOVER_ELEMENT',\n\t\t\trect: getElementPinRect(hoveredElement),\n\t\t});\n\t};\n\n\tconst handleEvent = (messageEvent: MessageEvent) => {\n\t\tif (isCollaborateInboundEvent(messageEvent) === false) return;\n\t\tconst collaborateEvent = messageEvent.data;\n\t\tswitch (collaborateEvent.type) {\n\t\t\tcase 'WATCH_SELECTORS': {\n\t\t\t\twatchedSelectors = collaborateEvent.selectors;\n\t\t\t\tbroadcastSelectors();\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'MOUSE_POSITION': {\n\t\t\t\tconst newElement = document.elementsFromPoint(collaborateEvent.x, collaborateEvent.y)[0];\n\t\t\t\tif (newElement === hoveredElement) return;\n\t\t\t\thoveredElement = newElement;\n\t\t\t\tbroadcastHoveredElement();\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'DROP_PIN': {\n\t\t\t\tconst element = document.elementsFromPoint(collaborateEvent.x, collaborateEvent.y)[0];\n\t\t\t\tif (!element) return;\n\t\t\t\tconst selector = getElementUniqueSelector(element, document.body);\n\t\t\t\tif (!selector) return;\n\t\t\t\tconst rect = element.getBoundingClientRect();\n\t\t\t\tsendOutboundEvent({\n\t\t\t\t\ttype: 'PIN_POSITION',\n\t\t\t\t\tpin: {\n\t\t\t\t\t\trect: getElementPinRect(element),\n\t\t\t\t\t\tselector,\n\t\t\t\t\t\txPercent: (collaborateEvent.x - rect.x) / rect.width,\n\t\t\t\t\t\tyPercent: (collaborateEvent.y - rect.y) / rect.height,\n\t\t\t\t\t},\n\t\t\t\t});\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'SETUP_EVENT_HANDLERS': {\n\t\t\t\tlogger.info('Collaborate bridge: Setting up event handlers');\n\t\t\t\twindow.addEventListener('beforeunload', () => {\n\t\t\t\t\tsendOutboundEvent({ type: 'DISPOSE' });\n\t\t\t\t});\n\t\t\t\tsendOutboundEvent({ type: 'RESIZE', scrollHeight: document.body.scrollHeight });\n\t\t\t\twindow.addEventListener(\n\t\t\t\t\t'resize',\n\t\t\t\t\t() => {\n\t\t\t\t\t\tbroadcastSelectors();\n\t\t\t\t\t\tsendOutboundEvent({ type: 'RESIZE', scrollHeight: document.body.scrollHeight });\n\t\t\t\t\t},\n\t\t\t\t\t{ signal },\n\t\t\t\t);\n\n\t\t\t\tdocument.body.addEventListener(\n\t\t\t\t\t'click',\n\t\t\t\t\tevent => {\n\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\t\tif (!hoveredElement) return;\n\t\t\t\t\t\tconst selector = getElementUniqueSelector(hoveredElement, document.body);\n\t\t\t\t\t\tif (!selector) return;\n\t\t\t\t\t\tconst rect = hoveredElement.getBoundingClientRect();\n\t\t\t\t\t\tbroadcastHoveredElement();\n\t\t\t\t\t\tsendOutboundEvent({\n\t\t\t\t\t\t\ttype: 'PIN_POSITION',\n\t\t\t\t\t\t\tpin: {\n\t\t\t\t\t\t\t\trect: getElementPinRect(hoveredElement),\n\t\t\t\t\t\t\t\tselector,\n\t\t\t\t\t\t\t\txPercent: (event.clientX - rect.x) / rect.width,\n\t\t\t\t\t\t\t\tyPercent: (event.clientY - rect.y) / rect.height,\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t});\n\t\t\t\t\t},\n\t\t\t\t\t{ signal },\n\t\t\t\t);\n\t\t\t\tlogger.info('Collaborate bridge: Event handlers set up');\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'SCROLL':\n\t\t\t\twindow.scrollTo({ left: collaborateEvent.scrollX, top: collaborateEvent.scrollY, behavior: 'instant' });\n\t\t\t\tbroadcastSelectors();\n\t\t\t\tbreak;\n\t\t\tdefault:\n\t\t\t\tcollaborateEvent satisfies never;\n\t\t}\n\t};\n\n\twindow.addEventListener('message', handleEvent, { signal });\n\tsignal?.addEventListener('abort', () => {\n\t\tlogger.info('Collaborate bridge: disposing');\n\t\tsendOutboundEvent({ type: 'DISPOSE' });\n\t\twindow.removeEventListener('message', handleEvent);\n\t});\n};\n\nexport const collaboratePlugin = () =>\n\tcreatePlugin(({ logger }) => ({\n\t\tsetupBridge: (params?: { signal?: AbortSignal }) =>\n\t\t\tsetupBridge({\n\t\t\t\tlogger,\n\t\t\t\tsignal: params?.signal,\n\t\t\t}),\n\t}));\n","import { Logger } from '@inploi/sdk';\n\ntype SelectorProperties = {\n\telement: Element | null | undefined;\n\tid?: string;\n\tclasses?: string;\n\tchildren?: string[];\n};\n\nconst escapedChars = { outBrackets: [':', '/'], inBrackets: ['(', ')', '.', ',', '_', '%', '+'] };\nexport const escapeClassName = (input: string) => {\n\tlet inBrackets = false;\n\tlet result = '';\n\tfor (const char of input) {\n\t\tif (char === '[') {\n\t\t\tinBrackets = true;\n\t\t\tresult += `\\\\${char}`;\n\t\t} else if (char === ']') {\n\t\t\tinBrackets = false;\n\t\t\tresult += `\\\\${char}`;\n\t\t} else if (inBrackets === true && escapedChars.inBrackets.includes(char)) {\n\t\t\tresult += `\\\\${char}`;\n\t\t} else if (inBrackets === false && escapedChars.outBrackets.includes(char)) {\n\t\t\tresult += `\\\\${char}`;\n\t\t} else {\n\t\t\tresult += char;\n\t\t}\n\t}\n\treturn result;\n};\n\nconst getSelectorProperties = (from: SelectorProperties): SelectorProperties => {\n\tif (from.element?.getAttribute('id') !== null && !from.id?.length) {\n\t\tfrom.id = `#${from.element?.getAttribute('id')}`;\n\t\treturn from;\n\t}\n\n\tif (from.element && from.element.className.length > 0 && !from.classes?.length) {\n\t\tfrom.classes = `.${escapeClassName(from.element.className).split(' ').join('.')}`;\n\t\treturn from;\n\t}\n\n\tconst newSelector = [from.classes, from.id].filter(Boolean).join('') || from.element?.tagName;\n\n\tconst parent = from.element?.parentElement;\n\tif (parent) {\n\t\tconst childIndex = Array.from(parent.children).findIndex(child => child === from.element);\n\t\treturn {\n\t\t\telement: from.element?.parentElement,\n\t\t\tchildren: [`${newSelector}:nth-child(${childIndex + 1})`, ...(from.children ?? [])],\n\t\t};\n\t}\n\tthrow new Error('Unable to uniquely identify selector: not unique enough');\n};\n\nexport const getElementUniqueSelector = (element: Element, context: Element, logger?: Logger) => {\n\tconst getSelector = (prefilled: SelectorProperties): string | null => {\n\t\tconst properties = getSelectorProperties(prefilled);\n\n\t\tconst newSelector = [[properties.classes, properties.id].filter(Boolean).join(''), ...(properties.children ?? [])]\n\t\t\t.filter(Boolean)\n\t\t\t.join('>');\n\n\t\ttry {\n\t\t\tconst matchingSelectors = context.querySelectorAll(newSelector);\n\n\t\t\tif (matchingSelectors.length > 1 && matchingSelectors.length < 100) return getSelector(properties);\n\t\t\tif (matchingSelectors.length === 1) return newSelector;\n\n\t\t\treturn null;\n\t\t} catch (e) {\n\t\t\tif (e instanceof DOMException) {\n\t\t\t\tlogger?.warn('Invalid selector', newSelector);\n\t\t\t\treturn null;\n\t\t\t}\n\t\t\tthrow e;\n\t\t}\n\t};\n\n\treturn getSelector({ element, children: [] });\n};\n"],"mappings":"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","names":["src_exports","__export","collaboratePlugin","createInboundEventSender","isCollaborateOutboundEvent","__toCommonJS","import_sdk","escapedChars","escapeClassName","input","inBrackets","result","char","getSelectorProperties","from","_a","_b","_c","_d","_e","_f","_g","_h","newSelector","parent","childIndex","child","getElementUniqueSelector","element","context","logger","getSelector","prefilled","properties","matchingSelectors","e","sendOutboundEvent","data","__spreadValues","createInboundEventSender","_a","isCollaborateInboundEvent","event","isCollaborateOutboundEvent","getElementPinRect","element","boundingBox","getSelectorRects","selectors","selectorRects","selector","escapeClassName","debounce","func","waitFor","timeout","args","setupBridge","logger","signal","watchedSelectors","hoveredElement","broadcastSelectors","broadcastHoveredElement","handleEvent","messageEvent","collaborateEvent","newElement","getElementUniqueSelector","rect","collaboratePlugin","params"]}
|
package/dist/index.mjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
var
|
|
1
|
+
var R=Object.defineProperty;var m=Object.getOwnPropertySymbols;var v=Object.prototype.hasOwnProperty,f=Object.prototype.propertyIsEnumerable;var S=(e,t,n)=>t in e?R(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n,b=(e,t)=>{for(var n in t||(t={}))v.call(t,n)&&S(e,n,t[n]);if(m)for(var n of m(t))f.call(t,n)&&S(e,n,t[n]);return e};import{createPlugin as w}from"@inploi/sdk";var h={outBrackets:[":","/"],inBrackets:["(",")",".",",","_","%","+"]},g=e=>{let t=!1,n="";for(let r of e)r==="["?(t=!0,n+=`\\${r}`):r==="]"?(t=!1,n+=`\\${r}`):t===!0&&h.inBrackets.includes(r)?n+=`\\${r}`:t===!1&&h.outBrackets.includes(r)?n+=`\\${r}`:n+=r;return n},O=e=>{var r,u,i,c,d,o,l,p;if(((r=e.element)==null?void 0:r.getAttribute("id"))!==null&&!((u=e.id)!=null&&u.length))return e.id=`#${(i=e.element)==null?void 0:i.getAttribute("id")}`,e;if(e.element&&e.element.className.length>0&&!((c=e.classes)!=null&&c.length))return e.classes=`.${g(e.element.className).split(" ").join(".")}`,e;let t=[e.classes,e.id].filter(Boolean).join("")||((d=e.element)==null?void 0:d.tagName),n=(o=e.element)==null?void 0:o.parentElement;if(n){let s=Array.from(n.children).findIndex(P=>P===e.element);return{element:(l=e.element)==null?void 0:l.parentElement,children:[`${t}:nth-child(${s+1})`,...(p=e.children)!=null?p:[]]}}throw new Error("Unable to uniquely identify selector: not unique enough")},y=(e,t,n)=>{let r=u=>{var d;let i=O(u),c=[[i.classes,i.id].filter(Boolean).join(""),...(d=i.children)!=null?d:[]].filter(Boolean).join(">");try{let o=t.querySelectorAll(c);return o.length>1&&o.length<100?r(i):o.length===1?c:null}catch(o){if(o instanceof DOMException)return n==null||n.warn("Invalid selector",c),null;throw o}};return r({element:e,children:[]})};var a=e=>{window.parent.postMessage(b({source:"inploi-collaborate"},e),"*")},M=e=>({sendInboundEvent:t=>{var n;return(n=e.source)==null?void 0:n.postMessage(b({source:"inploi-collaborate"},t),{targetOrigin:e.origin})}}),I=e=>e.data.source==="inploi-collaborate",A=e=>e.data.source==="inploi-collaborate",E=e=>{let t=e.getBoundingClientRect();return{_brand:"pin",x:window.scrollX+t.x,y:window.scrollY+t.y,width:t.width,height:t.height}},x=e=>{let t={};for(let n of e){let r=document.querySelector(g(n));t[n]=r?E(r):null}return t};function C(e,t){let n;return(...r)=>{clearTimeout(n),n=setTimeout(()=>e(...r),t)}}var T=({logger:e,signal:t})=>{let n=[],r;a({type:"READY"}),e.info("Collaborate bridge: Ready");let u=C(()=>{a({type:"SELECTOR_RECTS",selectorRects:x(n)})},50),i=()=>{r&&a({type:"HOVER_ELEMENT",rect:E(r)})},c=d=>{if(I(d)===!1)return;let o=d.data;switch(o.type){case"WATCH_SELECTORS":{n=o.selectors,u();break}case"MOUSE_POSITION":{let l=document.elementsFromPoint(o.x,o.y)[0];if(l===r)return;r=l,i();break}case"DROP_PIN":{let l=document.elementsFromPoint(o.x,o.y)[0];if(!l)return;let p=y(l,document.body);if(!p)return;let s=l.getBoundingClientRect();a({type:"PIN_POSITION",pin:{rect:E(l),selector:p,xPercent:(o.x-s.x)/s.width,yPercent:(o.y-s.y)/s.height}});break}case"SETUP_EVENT_HANDLERS":{e.info("Collaborate bridge: Setting up event handlers"),window.addEventListener("beforeunload",()=>{a({type:"DISPOSE"})}),a({type:"RESIZE",scrollHeight:document.body.scrollHeight}),window.addEventListener("resize",()=>{u(),a({type:"RESIZE",scrollHeight:document.body.scrollHeight})},{signal:t}),document.body.addEventListener("click",l=>{if(l.preventDefault(),l.stopPropagation(),!r)return;let p=y(r,document.body);if(!p)return;let s=r.getBoundingClientRect();i(),a({type:"PIN_POSITION",pin:{rect:E(r),selector:p,xPercent:(l.clientX-s.x)/s.width,yPercent:(l.clientY-s.y)/s.height}})},{signal:t}),e.info("Collaborate bridge: Event handlers set up");break}case"SCROLL":window.scrollTo({left:o.scrollX,top:o.scrollY,behavior:"instant"}),u();break;default:}};window.addEventListener("message",c,{signal:t}),t==null||t.addEventListener("abort",()=>{e.info("Collaborate bridge: disposing"),a({type:"DISPOSE"}),window.removeEventListener("message",c)})},H=()=>w(({logger:e})=>({setupBridge:t=>T({logger:e,signal:t==null?void 0:t.signal})}));export{H as collaboratePlugin,M as createInboundEventSender,A as isCollaborateOutboundEvent};
|
|
2
2
|
//# sourceMappingURL=index.mjs.map
|
package/dist/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/collaborate.ts","../src/collaborate.selector.ts"],"sourcesContent":["import { Logger, createPlugin } from '@inploi/sdk';\n\nimport { escapeClassName, getElementUniqueSelector } from './collaborate.selector';\n\nexport type CollaborateInboundEvent =\n\t| {\n\t\t\ttype: 'SETUP_EVENT_HANDLERS';\n\t }\n\t| { type: 'WATCH_SELECTORS'; selectors: string[] }\n\t| { type: 'SCROLL'; scrollY: number; scrollX: number }\n\t| { type: 'MOUSE_POSITION'; x: number; y: number }\n\t| { type: 'DROP_PIN'; x: number; y: number };\n\nexport type CollaborateOutboundEvent =\n\t| { type: 'READY' }\n\t| {\n\t\t\ttype: 'RESIZE';\n\t\t\tscrollHeight: number;\n\t }\n\t| {\n\t\t\ttype: 'HOVER_ELEMENT';\n\t\t\trect: PinRect | null;\n\t }\n\t| {\n\t\t\ttype: 'PIN_POSITION';\n\t\t\tpin: DroppedPin;\n\t }\n\t| {\n\t\t\ttype: 'DISPOSE';\n\t }\n\t| {\n\t\t\ttype: 'SELECTOR_RECTS';\n\t\t\tselectorRects: SelectorRects;\n\t };\n\nexport type DroppedPin = { selector: string; xPercent: number; yPercent: number; rect: PinRect };\n\nconst sendOutboundEvent = (data: CollaborateOutboundEvent) => {\n\twindow.parent.postMessage({ source: 'inploi-collaborate', ...data }, '*');\n};\n\nexport const createInboundEventSender = (e: MessageEvent) => {\n\treturn {\n\t\tsendInboundEvent: (data: CollaborateInboundEvent) =>\n\t\t\te.source?.postMessage({ source: 'inploi-collaborate', ...data }, { targetOrigin: e.origin }),\n\t};\n};\n\nconst isCollaborateInboundEvent = (event: MessageEvent): event is MessageEvent<CollaborateInboundEvent> => {\n\treturn event.data.source === 'inploi-collaborate';\n};\n\nexport const isCollaborateOutboundEvent = (event: MessageEvent): event is MessageEvent<CollaborateOutboundEvent> => {\n\treturn event.data.source === 'inploi-collaborate';\n};\n\nexport type PinRect = {\n\t_brand: 'pin';\n\tx: number;\n\ty: number;\n\twidth: number;\n\theight: number;\n};\n\nconst getElementPinRect = (element: Element): PinRect => {\n\tconst boundingBox = element.getBoundingClientRect();\n\treturn {\n\t\t_brand: 'pin',\n\t\tx: window.scrollX + boundingBox.x,\n\t\ty: window.scrollY + boundingBox.y,\n\t\twidth: boundingBox.width,\n\t\theight: boundingBox.height,\n\t};\n};\n\nexport type SelectorRects = { [selector: string]: PinRect | null };\n\nconst getSelectorRects = (selectors: string[]) => {\n\tconst selectorRects: SelectorRects = {};\n\tfor (const selector of selectors) {\n\t\tconst element = document.querySelector(escapeClassName(selector));\n\t\tselectorRects[selector] = element ? getElementPinRect(element) : null;\n\t}\n\treturn selectorRects;\n};\n\nfunction debounce<F extends (...args: Parameters<F>) => ReturnType<F>>(\n\tfunc: F,\n\twaitFor: number,\n): (...args: Parameters<F>) => void {\n\tlet timeout: ReturnType<typeof setTimeout>;\n\n\treturn (...args: Parameters<F>): void => {\n\t\tclearTimeout(timeout);\n\t\ttimeout = setTimeout(() => func(...args), waitFor);\n\t};\n}\n\n/** Sets up the bridge for Collaborate to be able to communicate with the host page */\nconst setupBridge = ({ logger, signal }: { signal?: AbortSignal; logger: Logger }) => {\n\tlet watchedSelectors: string[] = [];\n\tlet hoveredElement: Element | undefined;\n\tsendOutboundEvent({ type: 'READY' });\n\tlogger.info('Collaborate bridge: Ready');\n\n\tconst broadcastSelectors = debounce(() => {\n\t\tsendOutboundEvent({ type: 'SELECTOR_RECTS', selectorRects: getSelectorRects(watchedSelectors) });\n\t}, 50);\n\n\tconst broadcastHoveredElement = () => {\n\t\tif (!hoveredElement) return;\n\t\tsendOutboundEvent({\n\t\t\ttype: 'HOVER_ELEMENT',\n\t\t\trect: getElementPinRect(hoveredElement),\n\t\t});\n\t};\n\n\tconst handleEvent = (messageEvent: MessageEvent) => {\n\t\tif (isCollaborateInboundEvent(messageEvent) === false) return;\n\t\tconst collaborateEvent = messageEvent.data;\n\t\tswitch (collaborateEvent.type) {\n\t\t\tcase 'WATCH_SELECTORS': {\n\t\t\t\twatchedSelectors = collaborateEvent.selectors;\n\t\t\t\tbroadcastSelectors();\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'MOUSE_POSITION': {\n\t\t\t\tconst newElement = document.elementsFromPoint(collaborateEvent.x, collaborateEvent.y)[0];\n\t\t\t\tif (newElement === hoveredElement) return;\n\t\t\t\thoveredElement = newElement;\n\t\t\t\tbroadcastHoveredElement();\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'DROP_PIN': {\n\t\t\t\tconst element = document.elementsFromPoint(collaborateEvent.x, collaborateEvent.y)[0];\n\t\t\t\tif (!element) return;\n\t\t\t\tconst selector = getElementUniqueSelector(element, document.body);\n\t\t\t\tif (!selector) return;\n\t\t\t\tconst rect = element.getBoundingClientRect();\n\t\t\t\tsendOutboundEvent({\n\t\t\t\t\ttype: 'PIN_POSITION',\n\t\t\t\t\tpin: {\n\t\t\t\t\t\trect: getElementPinRect(element),\n\t\t\t\t\t\tselector,\n\t\t\t\t\t\txPercent: (collaborateEvent.x - rect.x) / rect.width,\n\t\t\t\t\t\tyPercent: (collaborateEvent.y - rect.y) / rect.height,\n\t\t\t\t\t},\n\t\t\t\t});\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'SETUP_EVENT_HANDLERS': {\n\t\t\t\tlogger.info('Collaborate bridge: Setting up event handlers');\n\t\t\t\twindow.addEventListener('beforeunload', () => {\n\t\t\t\t\tsendOutboundEvent({ type: 'DISPOSE' });\n\t\t\t\t});\n\t\t\t\tsendOutboundEvent({ type: 'RESIZE', scrollHeight: document.body.scrollHeight });\n\t\t\t\twindow.addEventListener(\n\t\t\t\t\t'resize',\n\t\t\t\t\t() => {\n\t\t\t\t\t\tbroadcastSelectors();\n\t\t\t\t\t\tsendOutboundEvent({ type: 'RESIZE', scrollHeight: document.body.scrollHeight });\n\t\t\t\t\t},\n\t\t\t\t\t{ signal },\n\t\t\t\t);\n\n\t\t\t\tdocument.body.addEventListener(\n\t\t\t\t\t'click',\n\t\t\t\t\tevent => {\n\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\t\tif (!hoveredElement) return;\n\t\t\t\t\t\tconst selector = getElementUniqueSelector(hoveredElement, document.body);\n\t\t\t\t\t\tif (!selector) return;\n\t\t\t\t\t\tconst rect = hoveredElement.getBoundingClientRect();\n\t\t\t\t\t\tbroadcastHoveredElement();\n\t\t\t\t\t\tsendOutboundEvent({\n\t\t\t\t\t\t\ttype: 'PIN_POSITION',\n\t\t\t\t\t\t\tpin: {\n\t\t\t\t\t\t\t\trect: getElementPinRect(hoveredElement),\n\t\t\t\t\t\t\t\tselector,\n\t\t\t\t\t\t\t\txPercent: (event.clientX - rect.x) / rect.width,\n\t\t\t\t\t\t\t\tyPercent: (event.clientY - rect.y) / rect.height,\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t});\n\t\t\t\t\t},\n\t\t\t\t\t{ signal },\n\t\t\t\t);\n\t\t\t\tlogger.info('Collaborate bridge: Event handlers set up');\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'SCROLL':\n\t\t\t\twindow.scrollTo({ left: collaborateEvent.scrollX, top: collaborateEvent.scrollY, behavior: 'instant' });\n\t\t\t\tbroadcastSelectors();\n\t\t\t\tbreak;\n\t\t\tdefault:\n\t\t\t\tcollaborateEvent satisfies never;\n\t\t}\n\t};\n\n\twindow.addEventListener('message', handleEvent, { signal });\n\tsignal?.addEventListener('abort', () => {\n\t\tlogger.info('Collaborate bridge: disposing');\n\t\tsendOutboundEvent({ type: 'DISPOSE' });\n\t\twindow.removeEventListener('message', handleEvent);\n\t});\n};\n\nexport const collaboratePlugin = () =>\n\tcreatePlugin(({ logger }) => ({\n\t\tsetupBridge: (params?: { signal?: AbortSignal }) =>\n\t\t\tsetupBridge({\n\t\t\t\tlogger,\n\t\t\t\tsignal: params?.signal,\n\t\t\t}),\n\t}));\n","type SelectorProperties = {\n\telement: Element | null | undefined;\n\tid?: string;\n\tclasses?: string;\n\tchildren?: string[];\n};\n\nconst escapeParensInBrackets = (input: string) => {\n\tlet inBrackets = false;\n\tlet result = '';\n\n\tfor (const char of input) {\n\t\tif (char === '[') {\n\t\t\tinBrackets = true;\n\t\t\tresult += char;\n\t\t} else if (char === ']') {\n\t\t\tinBrackets = false;\n\t\t\tresult += char;\n\t\t} else if (inBrackets && (char === '(' || char === ')')) {\n\t\t\tresult += '\\\\' + char;\n\t\t} else {\n\t\t\tresult += char;\n\t\t}\n\t}\n\n\treturn result;\n};\n\nexport const escapeClassName = (input: string) => {\n\treturn escapeParensInBrackets(input.replace(/(?<!\\\\)[:[\\]/%_+]/g, '\\\\$&'));\n};\n\nconst getSelectorProperties = (from: SelectorProperties): SelectorProperties => {\n\tif (from.element?.getAttribute('id') !== null && !from.id?.length) {\n\t\tfrom.id = `#${from.element?.getAttribute('id')}`;\n\t\treturn from;\n\t}\n\n\tif (from.element && from.element.className.length > 0 && !from.classes?.length) {\n\t\tfrom.classes = `.${escapeClassName(from.element.className).split(' ').join('.')}`;\n\t\treturn from;\n\t}\n\n\tconst newSelector = [from.classes, from.id].filter(Boolean).join('') || from.element?.tagName;\n\n\tconst parent = from.element?.parentElement;\n\tif (parent) {\n\t\tconst childIndex = Array.from(parent.children).findIndex(child => child === from.element);\n\t\treturn {\n\t\t\telement: from.element?.parentElement,\n\t\t\tchildren: [`${newSelector}:nth-child(${childIndex + 1})`, ...(from.children ?? [])],\n\t\t};\n\t}\n\tthrow new Error('Unable to uniquely identify selector: not unique enough');\n};\n\nexport const getElementUniqueSelector = (element: Element, context: Element) => {\n\tconst getSelector = (prefilled: SelectorProperties): string | null => {\n\t\tconst properties = getSelectorProperties(prefilled);\n\n\t\tconst newSelector = [[properties.classes, properties.id].filter(Boolean).join(''), ...(properties.children ?? [])]\n\t\t\t.filter(Boolean)\n\t\t\t.join('>');\n\n\t\tconst matchingSelectors = context.querySelectorAll(newSelector);\n\n\t\tif (matchingSelectors.length > 1 && matchingSelectors.length < 100) return getSelector(properties);\n\t\tif (matchingSelectors.length === 1) return newSelector;\n\n\t\treturn null;\n\t};\n\n\treturn getSelector({ element, children: [] });\n};\n"],"mappings":"yVAAA,OAAiB,gBAAAA,MAAoB,cCOrC,IAAMC,EAA0BC,GAAkB,CACjD,IAAIC,EAAa,GACbC,EAAS,GAEb,QAAWC,KAAQH,EACdG,IAAS,KACZF,EAAa,GACbC,GAAUC,GACAA,IAAS,KACnBF,EAAa,GACbC,GAAUC,GACAF,IAAeE,IAAS,KAAOA,IAAS,KAClDD,GAAU,KAAOC,EAEjBD,GAAUC,EAIZ,OAAOD,CACR,EAEaE,EAAmBJ,GACxBD,EAAuBC,EAAM,QAAQ,WAAC,uBAAkB,GAAC,EAAE,MAAM,CAAC,EAGpEK,EAAyBC,GAAiD,CAhChF,IAAAC,EAAAC,EAAAC,EAAAC,EAAAC,EAAAC,EAAAC,EAAAC,EAiCC,KAAIP,EAAAD,EAAK,UAAL,YAAAC,EAAc,aAAa,SAAU,MAAQ,GAACC,EAAAF,EAAK,KAAL,MAAAE,EAAS,QAC1D,OAAAF,EAAK,GAAK,KAAIG,EAAAH,EAAK,UAAL,YAAAG,EAAc,aAAa,KAAK,GACvCH,EAGR,GAAIA,EAAK,SAAWA,EAAK,QAAQ,UAAU,OAAS,GAAK,GAACI,EAAAJ,EAAK,UAAL,MAAAI,EAAc,QACvE,OAAAJ,EAAK,QAAU,IAAIF,EAAgBE,EAAK,QAAQ,SAAS,EAAE,MAAM,GAAG,EAAE,KAAK,GAAG,CAAC,GACxEA,EAGR,IAAMS,EAAc,CAACT,EAAK,QAASA,EAAK,EAAE,EAAE,OAAO,OAAO,EAAE,KAAK,EAAE,KAAKK,EAAAL,EAAK,UAAL,YAAAK,EAAc,SAEhFK,GAASJ,EAAAN,EAAK,UAAL,YAAAM,EAAc,cAC7B,GAAII,EAAQ,CACX,IAAMC,EAAa,MAAM,KAAKD,EAAO,QAAQ,EAAE,UAAUE,GAASA,IAAUZ,EAAK,OAAO,EACxF,MAAO,CACN,SAASO,EAAAP,EAAK,UAAL,YAAAO,EAAc,cACvB,SAAU,CAAC,GAAGE,CAAW,cAAcE,EAAa,CAAC,IAAK,IAAIH,EAAAR,EAAK,WAAL,KAAAQ,EAAiB,CAAC,CAAE,CACnF,CACD,CACA,MAAM,IAAI,MAAM,yDAAyD,CAC1E,EAEaK,EAA2B,CAACC,EAAkBC,IAAqB,CAC/E,IAAMC,EAAeC,GAAiD,CAzDvE,IAAAhB,EA0DE,IAAMiB,EAAanB,EAAsBkB,CAAS,EAE5CR,EAAc,CAAC,CAACS,EAAW,QAASA,EAAW,EAAE,EAAE,OAAO,OAAO,EAAE,KAAK,EAAE,EAAG,IAAIjB,EAAAiB,EAAW,WAAX,KAAAjB,EAAuB,CAAC,CAAE,EAC/G,OAAO,OAAO,EACd,KAAK,GAAG,EAEJkB,EAAoBJ,EAAQ,iBAAiBN,CAAW,EAE9D,OAAIU,EAAkB,OAAS,GAAKA,EAAkB,OAAS,IAAYH,EAAYE,CAAU,EAC7FC,EAAkB,SAAW,EAAUV,EAEpC,IACR,EAEA,OAAOO,EAAY,CAAE,QAAAF,EAAS,SAAU,CAAC,CAAE,CAAC,CAC7C,EDpCA,IAAMM,EAAqBC,GAAmC,CAC7D,OAAO,OAAO,YAAYC,EAAA,CAAE,OAAQ,sBAAyBD,GAAQ,GAAG,CACzE,EAEaE,EAA4B,IACjC,CACN,iBAAmBF,GAA+B,CA3CpD,IAAAG,EA4CG,OAAAA,EAAA,EAAE,SAAF,YAAAA,EAAU,YAAYF,EAAA,CAAE,OAAQ,sBAAyBD,GAAQ,CAAE,aAAc,EAAE,MAAO,GAC5F,GAGKI,EAA6BC,GAC3BA,EAAM,KAAK,SAAW,qBAGjBC,EAA8BD,GACnCA,EAAM,KAAK,SAAW,qBAWxBE,EAAqBC,GAA8B,CACxD,IAAMC,EAAcD,EAAQ,sBAAsB,EAClD,MAAO,CACN,OAAQ,MACR,EAAG,OAAO,QAAUC,EAAY,EAChC,EAAG,OAAO,QAAUA,EAAY,EAChC,MAAOA,EAAY,MACnB,OAAQA,EAAY,MACrB,CACD,EAIMC,EAAoBC,GAAwB,CACjD,IAAMC,EAA+B,CAAC,EACtC,QAAWC,KAAYF,EAAW,CACjC,IAAMH,EAAU,SAAS,cAAcM,EAAgBD,CAAQ,CAAC,EAChED,EAAcC,CAAQ,EAAIL,EAAUD,EAAkBC,CAAO,EAAI,IAClE,CACA,OAAOI,CACR,EAEA,SAASG,EACRC,EACAC,EACmC,CACnC,IAAIC,EAEJ,MAAO,IAAIC,IAA8B,CACxC,aAAaD,CAAO,EACpBA,EAAU,WAAW,IAAMF,EAAK,GAAGG,CAAI,EAAGF,CAAO,CAClD,CACD,CAGA,IAAMG,EAAc,CAAC,CAAE,OAAAC,EAAQ,OAAAC,CAAO,IAAgD,CACrF,IAAIC,EAA6B,CAAC,EAC9BC,EACJzB,EAAkB,CAAE,KAAM,OAAQ,CAAC,EACnCsB,EAAO,KAAK,2BAA2B,EAEvC,IAAMI,EAAqBV,EAAS,IAAM,CACzChB,EAAkB,CAAE,KAAM,iBAAkB,cAAeW,EAAiBa,CAAgB,CAAE,CAAC,CAChG,EAAG,EAAE,EAECG,EAA0B,IAAM,CAChCF,GACLzB,EAAkB,CACjB,KAAM,gBACN,KAAMQ,EAAkBiB,CAAc,CACvC,CAAC,CACF,EAEMG,EAAeC,GAA+B,CACnD,GAAIxB,EAA0BwB,CAAY,IAAM,GAAO,OACvD,IAAMC,EAAmBD,EAAa,KACtC,OAAQC,EAAiB,KAAM,CAC9B,IAAK,kBAAmB,CACvBN,EAAmBM,EAAiB,UACpCJ,EAAmB,EACnB,KACD,CACA,IAAK,iBAAkB,CACtB,IAAMK,EAAa,SAAS,kBAAkBD,EAAiB,EAAGA,EAAiB,CAAC,EAAE,CAAC,EACvF,GAAIC,IAAeN,EAAgB,OACnCA,EAAiBM,EACjBJ,EAAwB,EACxB,KACD,CACA,IAAK,WAAY,CAChB,IAAMlB,EAAU,SAAS,kBAAkBqB,EAAiB,EAAGA,EAAiB,CAAC,EAAE,CAAC,EACpF,GAAI,CAACrB,EAAS,OACd,IAAMK,EAAWkB,EAAyBvB,EAAS,SAAS,IAAI,EAChE,GAAI,CAACK,EAAU,OACf,IAAMmB,EAAOxB,EAAQ,sBAAsB,EAC3CT,EAAkB,CACjB,KAAM,eACN,IAAK,CACJ,KAAMQ,EAAkBC,CAAO,EAC/B,SAAAK,EACA,UAAWgB,EAAiB,EAAIG,EAAK,GAAKA,EAAK,MAC/C,UAAWH,EAAiB,EAAIG,EAAK,GAAKA,EAAK,MAChD,CACD,CAAC,EACD,KACD,CACA,IAAK,uBAAwB,CAC5BX,EAAO,KAAK,+CAA+C,EAC3D,OAAO,iBAAiB,eAAgB,IAAM,CAC7CtB,EAAkB,CAAE,KAAM,SAAU,CAAC,CACtC,CAAC,EACDA,EAAkB,CAAE,KAAM,SAAU,aAAc,SAAS,KAAK,YAAa,CAAC,EAC9E,OAAO,iBACN,SACA,IAAM,CACL0B,EAAmB,EACnB1B,EAAkB,CAAE,KAAM,SAAU,aAAc,SAAS,KAAK,YAAa,CAAC,CAC/E,EACA,CAAE,OAAAuB,CAAO,CACV,EAEA,SAAS,KAAK,iBACb,QACAjB,GAAS,CAGR,GAFAA,EAAM,eAAe,EACrBA,EAAM,gBAAgB,EAClB,CAACmB,EAAgB,OACrB,IAAMX,EAAWkB,EAAyBP,EAAgB,SAAS,IAAI,EACvE,GAAI,CAACX,EAAU,OACf,IAAMmB,EAAOR,EAAe,sBAAsB,EAClDE,EAAwB,EACxB3B,EAAkB,CACjB,KAAM,eACN,IAAK,CACJ,KAAMQ,EAAkBiB,CAAc,EACtC,SAAAX,EACA,UAAWR,EAAM,QAAU2B,EAAK,GAAKA,EAAK,MAC1C,UAAW3B,EAAM,QAAU2B,EAAK,GAAKA,EAAK,MAC3C,CACD,CAAC,CACF,EACA,CAAE,OAAAV,CAAO,CACV,EACAD,EAAO,KAAK,2CAA2C,EACvD,KACD,CACA,IAAK,SACJ,OAAO,SAAS,CAAE,KAAMQ,EAAiB,QAAS,IAAKA,EAAiB,QAAS,SAAU,SAAU,CAAC,EACtGJ,EAAmB,EACnB,MACD,QAED,CACD,EAEA,OAAO,iBAAiB,UAAWE,EAAa,CAAE,OAAAL,CAAO,CAAC,EAC1DA,GAAA,MAAAA,EAAQ,iBAAiB,QAAS,IAAM,CACvCD,EAAO,KAAK,+BAA+B,EAC3CtB,EAAkB,CAAE,KAAM,SAAU,CAAC,EACrC,OAAO,oBAAoB,UAAW4B,CAAW,CAClD,EACD,EAEaM,EAAoB,IAChCC,EAAa,CAAC,CAAE,OAAAb,CAAO,KAAO,CAC7B,YAAcc,GACbf,EAAY,CACX,OAAAC,EACA,OAAQc,GAAA,YAAAA,EAAQ,MACjB,CAAC,CACH,EAAE","names":["createPlugin","escapeParensInBrackets","input","inBrackets","result","char","escapeClassName","getSelectorProperties","from","_a","_b","_c","_d","_e","_f","_g","_h","newSelector","parent","childIndex","child","getElementUniqueSelector","element","context","getSelector","prefilled","properties","matchingSelectors","sendOutboundEvent","data","__spreadValues","createInboundEventSender","_a","isCollaborateInboundEvent","event","isCollaborateOutboundEvent","getElementPinRect","element","boundingBox","getSelectorRects","selectors","selectorRects","selector","escapeClassName","debounce","func","waitFor","timeout","args","setupBridge","logger","signal","watchedSelectors","hoveredElement","broadcastSelectors","broadcastHoveredElement","handleEvent","messageEvent","collaborateEvent","newElement","getElementUniqueSelector","rect","collaboratePlugin","createPlugin","params"]}
|
|
1
|
+
{"version":3,"sources":["../src/collaborate.ts","../src/collaborate.selector.ts"],"sourcesContent":["import { Logger, createPlugin } from '@inploi/sdk';\n\nimport { escapeClassName, getElementUniqueSelector } from './collaborate.selector';\n\nexport type CollaborateInboundEvent =\n\t| {\n\t\t\ttype: 'SETUP_EVENT_HANDLERS';\n\t }\n\t| { type: 'WATCH_SELECTORS'; selectors: string[] }\n\t| { type: 'SCROLL'; scrollY: number; scrollX: number }\n\t| { type: 'MOUSE_POSITION'; x: number; y: number }\n\t| { type: 'DROP_PIN'; x: number; y: number };\n\nexport type CollaborateOutboundEvent =\n\t| { type: 'READY' }\n\t| {\n\t\t\ttype: 'RESIZE';\n\t\t\tscrollHeight: number;\n\t }\n\t| {\n\t\t\ttype: 'HOVER_ELEMENT';\n\t\t\trect: PinRect | null;\n\t }\n\t| {\n\t\t\ttype: 'PIN_POSITION';\n\t\t\tpin: DroppedPin;\n\t }\n\t| {\n\t\t\ttype: 'DISPOSE';\n\t }\n\t| {\n\t\t\ttype: 'SELECTOR_RECTS';\n\t\t\tselectorRects: SelectorRects;\n\t };\n\nexport type DroppedPin = { selector: string; xPercent: number; yPercent: number; rect: PinRect };\n\nconst sendOutboundEvent = (data: CollaborateOutboundEvent) => {\n\twindow.parent.postMessage({ source: 'inploi-collaborate', ...data }, '*');\n};\n\nexport const createInboundEventSender = (e: MessageEvent) => {\n\treturn {\n\t\tsendInboundEvent: (data: CollaborateInboundEvent) =>\n\t\t\te.source?.postMessage({ source: 'inploi-collaborate', ...data }, { targetOrigin: e.origin }),\n\t};\n};\n\nconst isCollaborateInboundEvent = (event: MessageEvent): event is MessageEvent<CollaborateInboundEvent> => {\n\treturn event.data.source === 'inploi-collaborate';\n};\n\nexport const isCollaborateOutboundEvent = (event: MessageEvent): event is MessageEvent<CollaborateOutboundEvent> => {\n\treturn event.data.source === 'inploi-collaborate';\n};\n\nexport type PinRect = {\n\t_brand: 'pin';\n\tx: number;\n\ty: number;\n\twidth: number;\n\theight: number;\n};\n\nconst getElementPinRect = (element: Element): PinRect => {\n\tconst boundingBox = element.getBoundingClientRect();\n\treturn {\n\t\t_brand: 'pin',\n\t\tx: window.scrollX + boundingBox.x,\n\t\ty: window.scrollY + boundingBox.y,\n\t\twidth: boundingBox.width,\n\t\theight: boundingBox.height,\n\t};\n};\n\nexport type SelectorRects = { [selector: string]: PinRect | null };\n\nconst getSelectorRects = (selectors: string[]) => {\n\tconst selectorRects: SelectorRects = {};\n\tfor (const selector of selectors) {\n\t\tconst element = document.querySelector(escapeClassName(selector));\n\t\tselectorRects[selector] = element ? getElementPinRect(element) : null;\n\t}\n\treturn selectorRects;\n};\n\nfunction debounce<F extends (...args: Parameters<F>) => ReturnType<F>>(\n\tfunc: F,\n\twaitFor: number,\n): (...args: Parameters<F>) => void {\n\tlet timeout: ReturnType<typeof setTimeout>;\n\n\treturn (...args: Parameters<F>): void => {\n\t\tclearTimeout(timeout);\n\t\ttimeout = setTimeout(() => func(...args), waitFor);\n\t};\n}\n\n/** Sets up the bridge for Collaborate to be able to communicate with the host page */\nconst setupBridge = ({ logger, signal }: { signal?: AbortSignal; logger: Logger }) => {\n\tlet watchedSelectors: string[] = [];\n\tlet hoveredElement: Element | undefined;\n\tsendOutboundEvent({ type: 'READY' });\n\tlogger.info('Collaborate bridge: Ready');\n\n\tconst broadcastSelectors = debounce(() => {\n\t\tsendOutboundEvent({ type: 'SELECTOR_RECTS', selectorRects: getSelectorRects(watchedSelectors) });\n\t}, 50);\n\n\tconst broadcastHoveredElement = () => {\n\t\tif (!hoveredElement) return;\n\t\tsendOutboundEvent({\n\t\t\ttype: 'HOVER_ELEMENT',\n\t\t\trect: getElementPinRect(hoveredElement),\n\t\t});\n\t};\n\n\tconst handleEvent = (messageEvent: MessageEvent) => {\n\t\tif (isCollaborateInboundEvent(messageEvent) === false) return;\n\t\tconst collaborateEvent = messageEvent.data;\n\t\tswitch (collaborateEvent.type) {\n\t\t\tcase 'WATCH_SELECTORS': {\n\t\t\t\twatchedSelectors = collaborateEvent.selectors;\n\t\t\t\tbroadcastSelectors();\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'MOUSE_POSITION': {\n\t\t\t\tconst newElement = document.elementsFromPoint(collaborateEvent.x, collaborateEvent.y)[0];\n\t\t\t\tif (newElement === hoveredElement) return;\n\t\t\t\thoveredElement = newElement;\n\t\t\t\tbroadcastHoveredElement();\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'DROP_PIN': {\n\t\t\t\tconst element = document.elementsFromPoint(collaborateEvent.x, collaborateEvent.y)[0];\n\t\t\t\tif (!element) return;\n\t\t\t\tconst selector = getElementUniqueSelector(element, document.body);\n\t\t\t\tif (!selector) return;\n\t\t\t\tconst rect = element.getBoundingClientRect();\n\t\t\t\tsendOutboundEvent({\n\t\t\t\t\ttype: 'PIN_POSITION',\n\t\t\t\t\tpin: {\n\t\t\t\t\t\trect: getElementPinRect(element),\n\t\t\t\t\t\tselector,\n\t\t\t\t\t\txPercent: (collaborateEvent.x - rect.x) / rect.width,\n\t\t\t\t\t\tyPercent: (collaborateEvent.y - rect.y) / rect.height,\n\t\t\t\t\t},\n\t\t\t\t});\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'SETUP_EVENT_HANDLERS': {\n\t\t\t\tlogger.info('Collaborate bridge: Setting up event handlers');\n\t\t\t\twindow.addEventListener('beforeunload', () => {\n\t\t\t\t\tsendOutboundEvent({ type: 'DISPOSE' });\n\t\t\t\t});\n\t\t\t\tsendOutboundEvent({ type: 'RESIZE', scrollHeight: document.body.scrollHeight });\n\t\t\t\twindow.addEventListener(\n\t\t\t\t\t'resize',\n\t\t\t\t\t() => {\n\t\t\t\t\t\tbroadcastSelectors();\n\t\t\t\t\t\tsendOutboundEvent({ type: 'RESIZE', scrollHeight: document.body.scrollHeight });\n\t\t\t\t\t},\n\t\t\t\t\t{ signal },\n\t\t\t\t);\n\n\t\t\t\tdocument.body.addEventListener(\n\t\t\t\t\t'click',\n\t\t\t\t\tevent => {\n\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\t\tif (!hoveredElement) return;\n\t\t\t\t\t\tconst selector = getElementUniqueSelector(hoveredElement, document.body);\n\t\t\t\t\t\tif (!selector) return;\n\t\t\t\t\t\tconst rect = hoveredElement.getBoundingClientRect();\n\t\t\t\t\t\tbroadcastHoveredElement();\n\t\t\t\t\t\tsendOutboundEvent({\n\t\t\t\t\t\t\ttype: 'PIN_POSITION',\n\t\t\t\t\t\t\tpin: {\n\t\t\t\t\t\t\t\trect: getElementPinRect(hoveredElement),\n\t\t\t\t\t\t\t\tselector,\n\t\t\t\t\t\t\t\txPercent: (event.clientX - rect.x) / rect.width,\n\t\t\t\t\t\t\t\tyPercent: (event.clientY - rect.y) / rect.height,\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t});\n\t\t\t\t\t},\n\t\t\t\t\t{ signal },\n\t\t\t\t);\n\t\t\t\tlogger.info('Collaborate bridge: Event handlers set up');\n\t\t\t\tbreak;\n\t\t\t}\n\t\t\tcase 'SCROLL':\n\t\t\t\twindow.scrollTo({ left: collaborateEvent.scrollX, top: collaborateEvent.scrollY, behavior: 'instant' });\n\t\t\t\tbroadcastSelectors();\n\t\t\t\tbreak;\n\t\t\tdefault:\n\t\t\t\tcollaborateEvent satisfies never;\n\t\t}\n\t};\n\n\twindow.addEventListener('message', handleEvent, { signal });\n\tsignal?.addEventListener('abort', () => {\n\t\tlogger.info('Collaborate bridge: disposing');\n\t\tsendOutboundEvent({ type: 'DISPOSE' });\n\t\twindow.removeEventListener('message', handleEvent);\n\t});\n};\n\nexport const collaboratePlugin = () =>\n\tcreatePlugin(({ logger }) => ({\n\t\tsetupBridge: (params?: { signal?: AbortSignal }) =>\n\t\t\tsetupBridge({\n\t\t\t\tlogger,\n\t\t\t\tsignal: params?.signal,\n\t\t\t}),\n\t}));\n","import { Logger } from '@inploi/sdk';\n\ntype SelectorProperties = {\n\telement: Element | null | undefined;\n\tid?: string;\n\tclasses?: string;\n\tchildren?: string[];\n};\n\nconst escapedChars = { outBrackets: [':', '/'], inBrackets: ['(', ')', '.', ',', '_', '%', '+'] };\nexport const escapeClassName = (input: string) => {\n\tlet inBrackets = false;\n\tlet result = '';\n\tfor (const char of input) {\n\t\tif (char === '[') {\n\t\t\tinBrackets = true;\n\t\t\tresult += `\\\\${char}`;\n\t\t} else if (char === ']') {\n\t\t\tinBrackets = false;\n\t\t\tresult += `\\\\${char}`;\n\t\t} else if (inBrackets === true && escapedChars.inBrackets.includes(char)) {\n\t\t\tresult += `\\\\${char}`;\n\t\t} else if (inBrackets === false && escapedChars.outBrackets.includes(char)) {\n\t\t\tresult += `\\\\${char}`;\n\t\t} else {\n\t\t\tresult += char;\n\t\t}\n\t}\n\treturn result;\n};\n\nconst getSelectorProperties = (from: SelectorProperties): SelectorProperties => {\n\tif (from.element?.getAttribute('id') !== null && !from.id?.length) {\n\t\tfrom.id = `#${from.element?.getAttribute('id')}`;\n\t\treturn from;\n\t}\n\n\tif (from.element && from.element.className.length > 0 && !from.classes?.length) {\n\t\tfrom.classes = `.${escapeClassName(from.element.className).split(' ').join('.')}`;\n\t\treturn from;\n\t}\n\n\tconst newSelector = [from.classes, from.id].filter(Boolean).join('') || from.element?.tagName;\n\n\tconst parent = from.element?.parentElement;\n\tif (parent) {\n\t\tconst childIndex = Array.from(parent.children).findIndex(child => child === from.element);\n\t\treturn {\n\t\t\telement: from.element?.parentElement,\n\t\t\tchildren: [`${newSelector}:nth-child(${childIndex + 1})`, ...(from.children ?? [])],\n\t\t};\n\t}\n\tthrow new Error('Unable to uniquely identify selector: not unique enough');\n};\n\nexport const getElementUniqueSelector = (element: Element, context: Element, logger?: Logger) => {\n\tconst getSelector = (prefilled: SelectorProperties): string | null => {\n\t\tconst properties = getSelectorProperties(prefilled);\n\n\t\tconst newSelector = [[properties.classes, properties.id].filter(Boolean).join(''), ...(properties.children ?? [])]\n\t\t\t.filter(Boolean)\n\t\t\t.join('>');\n\n\t\ttry {\n\t\t\tconst matchingSelectors = context.querySelectorAll(newSelector);\n\n\t\t\tif (matchingSelectors.length > 1 && matchingSelectors.length < 100) return getSelector(properties);\n\t\t\tif (matchingSelectors.length === 1) return newSelector;\n\n\t\t\treturn null;\n\t\t} catch (e) {\n\t\t\tif (e instanceof DOMException) {\n\t\t\t\tlogger?.warn('Invalid selector', newSelector);\n\t\t\t\treturn null;\n\t\t\t}\n\t\t\tthrow e;\n\t\t}\n\t};\n\n\treturn getSelector({ element, children: [] });\n};\n"],"mappings":"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","names":["createPlugin","escapedChars","escapeClassName","input","inBrackets","result","char","getSelectorProperties","from","_a","_b","_c","_d","_e","_f","_g","_h","newSelector","parent","childIndex","child","getElementUniqueSelector","element","context","logger","getSelector","prefilled","properties","matchingSelectors","e","sendOutboundEvent","data","__spreadValues","createInboundEventSender","_a","isCollaborateInboundEvent","event","isCollaborateOutboundEvent","getElementPinRect","element","boundingBox","getSelectorRects","selectors","selectorRects","selector","escapeClassName","debounce","func","waitFor","timeout","args","setupBridge","logger","signal","watchedSelectors","hoveredElement","broadcastSelectors","broadcastHoveredElement","handleEvent","messageEvent","collaborateEvent","newElement","getElementUniqueSelector","rect","collaboratePlugin","createPlugin","params"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@inploi/plugin-collaborate",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.15",
|
|
4
4
|
"main": "dist/index.js",
|
|
5
5
|
"types": "dist/index.d.ts",
|
|
6
6
|
"license": "MIT",
|
|
@@ -25,8 +25,8 @@
|
|
|
25
25
|
"eslint": "^7.32.0",
|
|
26
26
|
"happy-dom": "^12.6.0",
|
|
27
27
|
"tsup": "^7.2.0",
|
|
28
|
-
"tsconfig": "0.1.0",
|
|
29
28
|
"eslint-config-custom": "0.1.0",
|
|
29
|
+
"tsconfig": "0.1.0",
|
|
30
30
|
"@inploi/sdk": "1.14.4",
|
|
31
31
|
"@inploi/core": "1.14.2"
|
|
32
32
|
},
|