devx-web-widget 1.1.0 → 1.1.1
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/dist/index.min.js +1 -1
- package/package.json +1 -1
package/dist/index.min.js
CHANGED
|
@@ -3,4 +3,4 @@
|
|
|
3
3
|
* Class-based, configurable widget with style isolation via Shadow DOM
|
|
4
4
|
* Supports multiple widget types (default, chatbot) and positioning (left, right)
|
|
5
5
|
*/
|
|
6
|
-
const DEFAULT_CONFIG={buttonLabel:"Feedback",backgroundColor:"#111827",textColor:"#ffffff",accentColor:"#2F6FED",font:'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',position:"right",widgetType:"default"};class FeedbackWidget{config;host;root;elements;state;showItemInForm;selectedSelector;selectedEl;hoverRafId;hostId;apiKey;endPoint;constructor(e=null,t={}){this.config={...DEFAULT_CONFIG,...t},this.hostId=`feedback-widget-host-${Math.random().toString(36).substr(2,9)}`,this.state="idle",this.showItemInForm=!0,this.selectedSelector=null,this.selectedEl=null,this.hoverRafId=null,this.apiKey=e||"",this.endPoint="http://127.0.0.1:8000/v1/widget/ingest",this.initialize()}initialize(){this.createHostAndShadow(),this.injectStyles(),this.createMarkup(),this.cacheElements(),this.attachEventListeners()}createHostAndShadow(){this.host=document.createElement("div"),this.host.id=this.hostId,document.documentElement.appendChild(this.host),this.root=this.host.attachShadow({mode:"open"})}injectStyles(){const e=this.generateCSS(),t=document.createElement("style");t.textContent=e,this.root.appendChild(t)}generateCSS(){const{backgroundColor:e,textColor:t,accentColor:n,font:i,position:o}=this.config;return`\n :host { all: initial; }\n * { box-sizing: border-box; font-family: ${i}; }\n \n .fbw-tab {\n position: fixed;\n top: 50%;\n ${"right"===o?"right":"left"}: 0;\n transform: ${"right"===o?"translateY(-50%) rotate(180deg)":"translateY(-50%)"};\n background: ${e};\n color: ${t};\n writing-mode: vertical-rl;\n text-orientation: mixed;\n padding: 14px 9px;\n border-radius: ${"right"===o?"8px 0 0 8px":"0 8px 8px 0"};\n cursor: pointer;\n font-size: 13px;\n font-weight: 600;\n letter-spacing: 0.03em;\n box-shadow: ${"right"===o?"-2px":"2px"} 0 10px rgba(0,0,0,0.18);\n z-index: 2147483000;\n border: none;\n user-select: none;\n transition: padding 0.12s ease, background 0.12s ease;\n }\n \n .fbw-tab:hover { padding-right: 13px; background: #1f2937; }\n .fbw-tab:focus-visible { outline: 2px solid ${n}; outline-offset: 2px; }\n \n .fbw-menu {\n position: fixed;\n top: 50%;\n right: ${"right"===o?"46px":"auto"};\n left: ${"left"===o?"46px":"auto"};\n transform: translateY(-50%);\n background: #fff;\n border-radius: 10px;\n box-shadow: 0 8px 30px rgba(0,0,0,0.22);\n padding: 6px;\n min-width: 220px;\n z-index: 2147483001;\n display: none;\n border: 1px solid #e5e7eb;\n }\n \n .fbw-menu.fbw-open { display: block; }\n \n .fbw-menu button {\n display: block;\n width: 100%;\n text-align: left;\n background: none;\n border: none;\n padding: 10px 12px;\n font-size: 13.5px;\n color: #111827;\n border-radius: 6px;\n cursor: pointer;\n }\n \n .fbw-menu button:hover { background: #f3f4f6; }\n .fbw-menu button small { display: block; color: #6b7280; font-weight: 400; margin-top: 2px; font-size: 11.5px; }\n \n .fbw-banner {\n position: fixed;\n top: 18px;\n left: 50%;\n transform: translateX(-50%);\n background: ${e};\n color: ${t};\n padding: 10px 10px 10px 16px;\n border-radius: 999px;\n font-size: 13px;\n display: none;\n align-items: center;\n gap: 10px;\n z-index: 2147483002;\n box-shadow: 0 8px 24px rgba(0,0,0,0.25);\n }\n \n .fbw-banner.fbw-open { display: flex; }\n \n .fbw-banner button {\n background: rgba(255,255,255,0.12);\n color: ${t};\n border: none;\n padding: 6px 12px;\n border-radius: 999px;\n font-size: 12px;\n cursor: pointer;\n }\n \n .fbw-banner button:hover { background: rgba(255,255,255,0.22); }\n \n .fbw-highlight {\n position: fixed;\n pointer-events: none;\n border: 2px solid ${n};\n box-shadow: 0 0 0 4px ${this.hexToRgba(n,.22)};\n border-radius: 4px;\n z-index: 2147483000;\n display: none;\n transition: top 0.06s ease, left 0.06s ease, width 0.06s ease, height 0.06s ease;\n }\n \n .fbw-overlay {\n position: fixed;\n inset: 0;\n background: rgba(17,24,39,0.5);\n display: none;\n align-items: center;\n justify-content: center;\n z-index: 2147483003;\n }\n \n .fbw-overlay.fbw-open { display: flex; }\n \n .fbw-modal {\n background: #fff;\n border-radius: 14px;\n width: 420px;\n max-width: 92vw;\n max-height: 88vh;\n overflow-y: auto;\n padding: 22px;\n box-shadow: 0 20px 60px rgba(0,0,0,0.35);\n }\n \n .fbw-modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }\n .fbw-modal-head h2 { font-size: 16px; margin: 0; color: #111827; font-weight: 700; }\n .fbw-close { background: none; border: none; font-size: 18px; color: #6b7280; cursor: pointer; line-height: 1; padding: 4px; }\n .fbw-close:hover { color: #111827; }\n \n .fbw-field { margin-bottom: 14px; }\n .fbw-field label { display: block; font-size: 12.5px; font-weight: 600; color: #374151; margin-bottom: 5px; }\n \n .fbw-item-box {\n font-family: ui-monospace, SFMono-Regular, Menlo, monospace;\n font-size: 11.5px;\n color: #1f2937;\n background: #f3f4f6;\n border: 1px solid #e5e7eb;\n border-radius: 6px;\n padding: 8px 10px;\n word-break: break-all;\n max-height: 60px;\n overflow-y: auto;\n }\n \n .fbw-field textarea, .fbw-field input[type="email"], .fbw-field input[type="text"] {\n width: 100%;\n border: 1px solid #d1d5db;\n border-radius: 8px;\n padding: 9px 10px;\n font-size: 13.5px;\n color: #111827;\n resize: vertical;\n }\n \n .fbw-field textarea:focus, .fbw-field input:focus {\n outline: none;\n border-color: ${n};\n box-shadow: 0 0 0 3px ${this.hexToRgba(n,.15)};\n }\n \n .fbw-error { color: #dc2626; font-size: 12px; margin: -6px 0 12px; display: none; }\n .fbw-error.fbw-show { display: block; }\n \n .fbw-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }\n \n .fbw-btn {\n border: none;\n border-radius: 8px;\n padding: 9px 16px;\n font-size: 13.5px;\n font-weight: 600;\n cursor: pointer;\n }\n \n .fbw-btn-primary { background: ${n}; color: #fff; }\n .fbw-btn-primary:hover { filter: brightness(1.08); }\n .fbw-btn-ghost { background: none; color: #4b5563; }\n .fbw-btn-ghost:hover { background: #f3f4f6; }\n \n .fbw-toast {\n position: fixed;\n bottom: 22px;\n right: 22px;\n background: ${e};\n color: ${t};\n padding: 11px 16px;\n border-radius: 10px;\n font-size: 13px;\n z-index: 2147483004;\n box-shadow: 0 8px 24px rgba(0,0,0,0.3);\n opacity: 0;\n transform: translateY(6px);\n transition: opacity 0.18s ease, transform 0.18s ease;\n pointer-events: none;\n }\n \n .fbw-toast.fbw-show { opacity: 1; transform: translateY(0); }\n .fbw-hidden { display: none !important; }\n `}hexToRgba(e,t){const n=e.replace("#",""),i=3===n.length?n.split("").map(e=>e+e).join(""):n;return`rgba(${parseInt(i.substring(0,2),16)},${parseInt(i.substring(2,4),16)},${parseInt(i.substring(4,6),16)},${t})`}createMarkup(){const e=document.createElement("div");e.innerHTML=this.getMarkup(),this.root.appendChild(e)}getMarkup(){const{buttonLabel:e,widgetType:t}=this.config;return"chatbot"===t?this.getChatbotMarkup(e):this.getDefaultMarkup(e)}getDefaultMarkup(e){return`\n <button class="fbw-tab" type="button" aria-haspopup="true" aria-expanded="false">${this.escapeHtml(e)}</button>\n <div class="fbw-menu" role="menu">\n <button type="button" data-action="pick-visible" role="menuitem">\n Feedback on this page<small>Select any element you have feedback on</small>\n </button>\n <button type="button" data-action="pick-hidden" role="menuitem">\n Quick feedback<small>General feedback on us</small>\n </button>\n </div>\n <div class="fbw-banner">\n <span>Click an element to select it · Esc to cancel</span>\n <button type="button" data-action="cancel-pick">Cancel</button>\n </div>\n <div class="fbw-highlight"></div>\n <div class="fbw-overlay">\n <div class="fbw-modal" role="dialog" aria-modal="true" aria-labelledby="fbw-modal-title">\n <div class="fbw-modal-head">\n <h2 id="fbw-modal-title">Share feedback</h2>\n <button class="fbw-close" type="button" data-action="close-modal" aria-label="Close">×</button>\n </div>\n <form data-role="form">\n <div class="fbw-field" data-role="item-field">\n <label>Selected element</label>\n <div class="fbw-item-box" data-role="item-box"></div>\n </div>\n <div class="fbw-field">\n <label for="fbw-title">Title</label>\n <input id="fbw-title" data-role="title" type="text" placeholder="Brief summary of your feedback" required />\n </div>\n <div class="fbw-field">\n <label for="fbw-feedback">What's going on?</label>\n <textarea id="fbw-feedback" data-role="feedback" rows="4" placeholder="Tell us what you noticed..."></textarea>\n </div>\n <div class="fbw-field">\n <label for="fbw-email">Email</label>\n <input id="fbw-email" data-role="email" type="email" placeholder="you@example.com" required />\n </div>\n <div class="fbw-error" data-role="error"></div>\n <div class="fbw-actions">\n <button type="button" class="fbw-btn fbw-btn-ghost" data-action="close-modal">Cancel</button>\n <button type="submit" class="fbw-btn fbw-btn-primary">Submit</button>\n </div>\n </form>\n </div>\n </div>\n <div class="fbw-toast" data-role="toast"></div>\n `}getChatbotMarkup(e){return`\n <button class="fbw-tab" type="button" aria-haspopup="true" aria-expanded="false">${this.escapeHtml(e)}</button>\n <div class="fbw-menu" role="menu">\n <button type="button" data-action="pick-visible" role="menuitem">\n Feedback on this page<small>Select any element you have feedback on</small>\n </button>\n <button type="button" data-action="pick-hidden" role="menuitem">\n Quick feedback<small>General feedback on us</small>\n </button>\n </div>\n <div class="fbw-banner">\n <span>Click an element to select it · Esc to cancel</span>\n <button type="button" data-action="cancel-pick">Cancel</button>\n </div>\n <div class="fbw-highlight"></div>\n <div class="fbw-overlay">\n <div class="fbw-modal" role="dialog" aria-modal="true" aria-labelledby="fbw-modal-title">\n <div class="fbw-modal-head">\n <h2 id="fbw-modal-title">Share feedback</h2>\n <button class="fbw-close" type="button" data-action="close-modal" aria-label="Close">×</button>\n </div>\n <form data-role="form">\n <div class="fbw-field" data-role="item-field">\n <label>Selected element</label>\n <div class="fbw-item-box" data-role="item-box"></div>\n </div>\n <div class="fbw-field">\n <label for="fbw-title">Title</label>\n <input id="fbw-title" data-role="title" type="text" placeholder="Brief summary of your feedback" required />\n </div>\n <div class="fbw-field">\n <label for="fbw-feedback">What's going on?</label>\n <textarea id="fbw-feedback" data-role="feedback" rows="4" placeholder="Tell us what you noticed..."></textarea>\n </div>\n <div class="fbw-field">\n <label for="fbw-email">Email</label>\n <input id="fbw-email" data-role="email" type="email" placeholder="you@example.com" required />\n </div>\n <div class="fbw-error" data-role="error"></div>\n <div class="fbw-actions">\n <button type="button" class="fbw-btn fbw-btn-ghost" data-action="close-modal">Cancel</button>\n <button type="submit" class="fbw-btn fbw-btn-primary">Submit</button>\n </div>\n </form>\n </div>\n </div>\n <div class="fbw-toast" data-role="toast"></div>\n `}escapeHtml(e){const t=document.createElement("div");return t.textContent=e,t.innerHTML}cacheElements(){this.elements={tab:this.root.querySelector(".fbw-tab"),menu:this.root.querySelector(".fbw-menu"),banner:this.root.querySelector(".fbw-banner"),highlight:this.root.querySelector(".fbw-highlight"),overlay:this.root.querySelector(".fbw-overlay"),modal:this.root.querySelector(".fbw-modal"),form:this.root.querySelector('[data-role="form"]'),itemField:this.root.querySelector('[data-role="item-field"]'),itemBox:this.root.querySelector('[data-role="item-box"]'),title:this.root.querySelector('[data-role="title"]'),feedback:this.root.querySelector('[data-role="feedback"]'),email:this.root.querySelector('[data-role="email"]'),error:this.root.querySelector('[data-role="error"]'),toast:this.root.querySelector('[data-role="toast"]')}}attachEventListeners(){this.elements.tab.addEventListener("click",()=>this.onTabClick()),this.elements.menu.addEventListener("click",e=>this.onMenuClick(e)),this.elements.banner.addEventListener("click",e=>this.onBannerClick(e)),this.elements.overlay.addEventListener("click",e=>this.onOverlayClick(e)),this.elements.form.addEventListener("submit",e=>this.onSubmit(e))}onTabClick(){"menu"===this.state?this.closeMenu():this.openMenu()}openMenu(){this.state="menu",this.elements.menu.classList.add("fbw-open"),this.elements.tab.setAttribute("aria-expanded","true"),document.addEventListener("click",this.onOutsideMenuClick,!0)}closeMenu(){"menu"===this.state&&(this.state="idle"),this.elements.menu.classList.remove("fbw-open"),this.elements.tab.setAttribute("aria-expanded","false"),document.removeEventListener("click",this.onOutsideMenuClick,!0)}onOutsideMenuClick=e=>{this.isInsideWidget(e.target)||this.closeMenu()};onMenuClick(e){const t=e.target.closest("button[data-action]");if(!t)return;const n=t.getAttribute("data-action");"pick-visible"===n&&this.startPicking(!0),"pick-hidden"===n&&(this.showItemInForm=!1,this.closeMenu(),this.openModal())}startPicking(e){this.showItemInForm=e,this.closeMenu(),this.state="picking",this.elements.banner.classList.add("fbw-open"),document.addEventListener("mousemove",this.onHoverMove,!0),document.addEventListener("click",this.onDocumentClickCapture,!0),document.addEventListener("keydown",this.onKeyDownCapture,!0),document.addEventListener("scroll",this.onScrollOrResize,!0),window.addEventListener("resize",this.onScrollOrResize,!0)}stopPicking(){this.elements.banner.classList.remove("fbw-open"),document.removeEventListener("mousemove",this.onHoverMove,!0),document.removeEventListener("scroll",this.onScrollOrResize,!0),window.removeEventListener("resize",this.onScrollOrResize,!0)}onBannerClick(e){e.target.closest('[data-action="cancel-pick"]')&&this.cancelAll()}onHoverMove=e=>{this.isInsideWidget(e.target)||(this.hoverRafId&&cancelAnimationFrame(this.hoverRafId),this.hoverRafId=requestAnimationFrame(()=>{this.positionHighlight(e.target)}))};positionHighlight(e){const t=e.getBoundingClientRect();this.elements.highlight.style.display="block",this.elements.highlight.style.top=`${t.top}px`,this.elements.highlight.style.left=`${t.left}px`,this.elements.highlight.style.width=`${t.width}px`,this.elements.highlight.style.height=`${t.height}px`}onScrollOrResize=()=>{this.selectedEl&&"review"===this.state&&this.positionHighlight(this.selectedEl)};onDocumentClickCapture=e=>{this.isInsideWidget(e.target)||(e.preventDefault(),e.stopPropagation(),"function"==typeof e.stopImmediatePropagation&&e.stopImmediatePropagation(),"picking"===this.state&&this.finalizeSelection(e.target))};onKeyDownCapture=e=>{"Escape"===e.key&&(e.preventDefault(),this.cancelAll())};finalizeSelection(e){this.selectedEl=e,this.selectedSelector=this.getUniqueSelector(e),this.stopPicking(),this.positionHighlight(e),this.openModal()}getUniqueSelector(e){if(!(e instanceof Element))return null;if(e.id){const t=`#${this.cssEscape(e.id)}`;if(1===this.safeQueryCount(t))return t}const t=[];let n=e;for(;n&&1===n.nodeType&&n!==document.documentElement;){let e=n.tagName.toLowerCase();if(n.id){e=`#${this.cssEscape(n.id)}`,t.unshift(e);break}const i=Array.from(n.classList).filter(e=>!!e);i.length&&(e+="."+i.map(this.cssEscape).join("."));const o=n.parentElement;if(o){const t=Array.from(o.children).filter(e=>e.tagName===n.tagName);if(t.length>1){e+=`:nth-of-type(${t.indexOf(n)+1})`}}t.unshift(e);const s=t.join(" > ");if(1===this.safeQueryCount(s))return s;n=o||null}return t.join(" > ")}cssEscape(e){return window.CSS&&window.CSS.escape?window.CSS.escape(e):String(e).replace(/([ #.;?%&,.+*~':"!^$[\]()=>|/])/g,"\\$1")}safeQueryCount(e){try{return document.querySelectorAll(e).length}catch(e){return-1}}openModal(){this.state="review",this.elements.error.classList.remove("fbw-show"),this.elements.form.reset(),this.showItemInForm?(this.elements.itemField.classList.remove("fbw-hidden"),this.elements.itemBox.textContent=this.selectedSelector||"(none)"):this.elements.itemField.classList.add("fbw-hidden"),this.elements.overlay.classList.add("fbw-open"),setTimeout(()=>this.elements.feedback.focus(),30)}closeModal(){this.elements.overlay.classList.remove("fbw-open")}cancelAll(){this.stopPicking(),this.closeModal(),this.elements.highlight.style.display="none",document.removeEventListener("click",this.onDocumentClickCapture,!0),document.removeEventListener("keydown",this.onKeyDownCapture,!0),this.selectedEl=null,this.selectedSelector=null,this.state="idle"}onOverlayClick(e){e.target.closest('[data-action="close-modal"]')&&this.cancelAll()}onSubmit(e){e.preventDefault();const t=this.elements.title.value.trim(),n=this.elements.feedback.value.trim(),i=this.elements.email.value.trim(),o=/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(i);if(!t||!o)return this.elements.error.textContent=t?"Please enter a valid email address.":"Please add a title before submitting.",void this.elements.error.classList.add("fbw-show");const s={optionType:this.showItemInForm?"page_item_visible":"page_item_hidden",elementSelector:this.selectedSelector,pageUrl:window.location.href,pageTitle:document.title,title:t,feedback:n,email:i,submittedAt:(new Date).toISOString()};this.submitFeedback(s)}prepareMessageBody(e){const t=e.email;return{title:e.title,body:`${e.feedback||"(No additional details provided)"}\n\nPage: ${e.pageTitle}\nURL: ${e.pageUrl}\nSelector: ${e.elementSelector}\nOption: ${e.optionType}\nSubmitted: ${e.submittedAt}`,user_handle:t}}submitFeedback(e){if(window.dispatchEvent(new CustomEvent("feedbackwidget:submit",{detail:e})),this.apiKey){const t=this.prepareMessageBody(e);fetch(this.endPoint,{method:"POST",headers:{"Content-Type":"application/json",Authorization:`Bearer ${this.apiKey}`},body:JSON.stringify(t)}).catch(()=>{})}this.cancelAll(),this.showToast("Thanks for the feedback!")}showToast(e){this.elements.toast.textContent=e,this.elements.toast.classList.add("fbw-show"),setTimeout(()=>this.elements.toast.classList.remove("fbw-show"),2400)}isInsideWidget(e){return e===this.host||this.host.contains(e)}open(e="visible"){this.startPicking("visible"===e)}close(){this.cancelAll()}destroy(){this.cancelAll(),this.host.remove()}}export{FeedbackWidget};
|
|
6
|
+
const DEFAULT_CONFIG={buttonLabel:"Feedback",backgroundColor:"#111827",textColor:"#ffffff",accentColor:"#2F6FED",font:'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',position:"right",widgetType:"default"};class FeedbackWidget{config;host;root;elements;state;showItemInForm;selectedSelector;selectedEl;hoverRafId;hostId;apiKey;endPoint;constructor(e=null,t={}){this.config={...DEFAULT_CONFIG,...t},this.hostId=`feedback-widget-host-${Math.random().toString(36).substr(2,9)}`,this.state="idle",this.showItemInForm=!0,this.selectedSelector=null,this.selectedEl=null,this.hoverRafId=null,this.apiKey=e||"",this.endPoint="https://devx.today/v1/widget/ingest",this.initialize()}initialize(){this.createHostAndShadow(),this.injectStyles(),this.createMarkup(),this.cacheElements(),this.attachEventListeners()}createHostAndShadow(){this.host=document.createElement("div"),this.host.id=this.hostId,document.documentElement.appendChild(this.host),this.root=this.host.attachShadow({mode:"open"})}injectStyles(){const e=this.generateCSS(),t=document.createElement("style");t.textContent=e,this.root.appendChild(t)}generateCSS(){const{backgroundColor:e,textColor:t,accentColor:n,font:i,position:o}=this.config;return`\n :host { all: initial; }\n * { box-sizing: border-box; font-family: ${i}; }\n \n .fbw-tab {\n position: fixed;\n top: 50%;\n ${"right"===o?"right":"left"}: 0;\n transform: ${"right"===o?"translateY(-50%) rotate(180deg)":"translateY(-50%)"};\n background: ${e};\n color: ${t};\n writing-mode: vertical-rl;\n text-orientation: mixed;\n padding: 14px 9px;\n border-radius: ${"right"===o?"8px 0 0 8px":"0 8px 8px 0"};\n cursor: pointer;\n font-size: 13px;\n font-weight: 600;\n letter-spacing: 0.03em;\n box-shadow: ${"right"===o?"-2px":"2px"} 0 10px rgba(0,0,0,0.18);\n z-index: 2147483000;\n border: none;\n user-select: none;\n transition: padding 0.12s ease, background 0.12s ease;\n }\n \n .fbw-tab:hover { padding-right: 13px; background: #1f2937; }\n .fbw-tab:focus-visible { outline: 2px solid ${n}; outline-offset: 2px; }\n \n .fbw-menu {\n position: fixed;\n top: 50%;\n right: ${"right"===o?"46px":"auto"};\n left: ${"left"===o?"46px":"auto"};\n transform: translateY(-50%);\n background: #fff;\n border-radius: 10px;\n box-shadow: 0 8px 30px rgba(0,0,0,0.22);\n padding: 6px;\n min-width: 220px;\n z-index: 2147483001;\n display: none;\n border: 1px solid #e5e7eb;\n }\n \n .fbw-menu.fbw-open { display: block; }\n \n .fbw-menu button {\n display: block;\n width: 100%;\n text-align: left;\n background: none;\n border: none;\n padding: 10px 12px;\n font-size: 13.5px;\n color: #111827;\n border-radius: 6px;\n cursor: pointer;\n }\n \n .fbw-menu button:hover { background: #f3f4f6; }\n .fbw-menu button small { display: block; color: #6b7280; font-weight: 400; margin-top: 2px; font-size: 11.5px; }\n \n .fbw-banner {\n position: fixed;\n top: 18px;\n left: 50%;\n transform: translateX(-50%);\n background: ${e};\n color: ${t};\n padding: 10px 10px 10px 16px;\n border-radius: 999px;\n font-size: 13px;\n display: none;\n align-items: center;\n gap: 10px;\n z-index: 2147483002;\n box-shadow: 0 8px 24px rgba(0,0,0,0.25);\n }\n \n .fbw-banner.fbw-open { display: flex; }\n \n .fbw-banner button {\n background: rgba(255,255,255,0.12);\n color: ${t};\n border: none;\n padding: 6px 12px;\n border-radius: 999px;\n font-size: 12px;\n cursor: pointer;\n }\n \n .fbw-banner button:hover { background: rgba(255,255,255,0.22); }\n \n .fbw-highlight {\n position: fixed;\n pointer-events: none;\n border: 2px solid ${n};\n box-shadow: 0 0 0 4px ${this.hexToRgba(n,.22)};\n border-radius: 4px;\n z-index: 2147483000;\n display: none;\n transition: top 0.06s ease, left 0.06s ease, width 0.06s ease, height 0.06s ease;\n }\n \n .fbw-overlay {\n position: fixed;\n inset: 0;\n background: rgba(17,24,39,0.5);\n display: none;\n align-items: center;\n justify-content: center;\n z-index: 2147483003;\n }\n \n .fbw-overlay.fbw-open { display: flex; }\n \n .fbw-modal {\n background: #fff;\n border-radius: 14px;\n width: 420px;\n max-width: 92vw;\n max-height: 88vh;\n overflow-y: auto;\n padding: 22px;\n box-shadow: 0 20px 60px rgba(0,0,0,0.35);\n }\n \n .fbw-modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }\n .fbw-modal-head h2 { font-size: 16px; margin: 0; color: #111827; font-weight: 700; }\n .fbw-close { background: none; border: none; font-size: 18px; color: #6b7280; cursor: pointer; line-height: 1; padding: 4px; }\n .fbw-close:hover { color: #111827; }\n \n .fbw-field { margin-bottom: 14px; }\n .fbw-field label { display: block; font-size: 12.5px; font-weight: 600; color: #374151; margin-bottom: 5px; }\n \n .fbw-item-box {\n font-family: ui-monospace, SFMono-Regular, Menlo, monospace;\n font-size: 11.5px;\n color: #1f2937;\n background: #f3f4f6;\n border: 1px solid #e5e7eb;\n border-radius: 6px;\n padding: 8px 10px;\n word-break: break-all;\n max-height: 60px;\n overflow-y: auto;\n }\n \n .fbw-field textarea, .fbw-field input[type="email"], .fbw-field input[type="text"] {\n width: 100%;\n border: 1px solid #d1d5db;\n border-radius: 8px;\n padding: 9px 10px;\n font-size: 13.5px;\n color: #111827;\n resize: vertical;\n }\n \n .fbw-field textarea:focus, .fbw-field input:focus {\n outline: none;\n border-color: ${n};\n box-shadow: 0 0 0 3px ${this.hexToRgba(n,.15)};\n }\n \n .fbw-error { color: #dc2626; font-size: 12px; margin: -6px 0 12px; display: none; }\n .fbw-error.fbw-show { display: block; }\n \n .fbw-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }\n \n .fbw-btn {\n border: none;\n border-radius: 8px;\n padding: 9px 16px;\n font-size: 13.5px;\n font-weight: 600;\n cursor: pointer;\n }\n \n .fbw-btn-primary { background: ${n}; color: #fff; }\n .fbw-btn-primary:hover { filter: brightness(1.08); }\n .fbw-btn-ghost { background: none; color: #4b5563; }\n .fbw-btn-ghost:hover { background: #f3f4f6; }\n \n .fbw-toast {\n position: fixed;\n bottom: 22px;\n right: 22px;\n background: ${e};\n color: ${t};\n padding: 11px 16px;\n border-radius: 10px;\n font-size: 13px;\n z-index: 2147483004;\n box-shadow: 0 8px 24px rgba(0,0,0,0.3);\n opacity: 0;\n transform: translateY(6px);\n transition: opacity 0.18s ease, transform 0.18s ease;\n pointer-events: none;\n }\n \n .fbw-toast.fbw-show { opacity: 1; transform: translateY(0); }\n .fbw-hidden { display: none !important; }\n `}hexToRgba(e,t){const n=e.replace("#",""),i=3===n.length?n.split("").map(e=>e+e).join(""):n;return`rgba(${parseInt(i.substring(0,2),16)},${parseInt(i.substring(2,4),16)},${parseInt(i.substring(4,6),16)},${t})`}createMarkup(){const e=document.createElement("div");e.innerHTML=this.getMarkup(),this.root.appendChild(e)}getMarkup(){const{buttonLabel:e,widgetType:t}=this.config;return"chatbot"===t?this.getChatbotMarkup(e):this.getDefaultMarkup(e)}getDefaultMarkup(e){return`\n <button class="fbw-tab" type="button" aria-haspopup="true" aria-expanded="false">${this.escapeHtml(e)}</button>\n <div class="fbw-menu" role="menu">\n <button type="button" data-action="pick-visible" role="menuitem">\n Feedback on this page<small>Select any element you have feedback on</small>\n </button>\n <button type="button" data-action="pick-hidden" role="menuitem">\n Quick feedback<small>General feedback on us</small>\n </button>\n </div>\n <div class="fbw-banner">\n <span>Click an element to select it · Esc to cancel</span>\n <button type="button" data-action="cancel-pick">Cancel</button>\n </div>\n <div class="fbw-highlight"></div>\n <div class="fbw-overlay">\n <div class="fbw-modal" role="dialog" aria-modal="true" aria-labelledby="fbw-modal-title">\n <div class="fbw-modal-head">\n <h2 id="fbw-modal-title">Share feedback</h2>\n <button class="fbw-close" type="button" data-action="close-modal" aria-label="Close">×</button>\n </div>\n <form data-role="form">\n <div class="fbw-field" data-role="item-field">\n <label>Selected element</label>\n <div class="fbw-item-box" data-role="item-box"></div>\n </div>\n <div class="fbw-field">\n <label for="fbw-title">Title</label>\n <input id="fbw-title" data-role="title" type="text" placeholder="Brief summary of your feedback" required />\n </div>\n <div class="fbw-field">\n <label for="fbw-feedback">What's going on?</label>\n <textarea id="fbw-feedback" data-role="feedback" rows="4" placeholder="Tell us what you noticed..."></textarea>\n </div>\n <div class="fbw-field">\n <label for="fbw-email">Email</label>\n <input id="fbw-email" data-role="email" type="email" placeholder="you@example.com" required />\n </div>\n <div class="fbw-error" data-role="error"></div>\n <div class="fbw-actions">\n <button type="button" class="fbw-btn fbw-btn-ghost" data-action="close-modal">Cancel</button>\n <button type="submit" class="fbw-btn fbw-btn-primary">Submit</button>\n </div>\n </form>\n </div>\n </div>\n <div class="fbw-toast" data-role="toast"></div>\n `}getChatbotMarkup(e){return`\n <button class="fbw-tab" type="button" aria-haspopup="true" aria-expanded="false">${this.escapeHtml(e)}</button>\n <div class="fbw-menu" role="menu">\n <button type="button" data-action="pick-visible" role="menuitem">\n Feedback on this page<small>Select any element you have feedback on</small>\n </button>\n <button type="button" data-action="pick-hidden" role="menuitem">\n Quick feedback<small>General feedback on us</small>\n </button>\n </div>\n <div class="fbw-banner">\n <span>Click an element to select it · Esc to cancel</span>\n <button type="button" data-action="cancel-pick">Cancel</button>\n </div>\n <div class="fbw-highlight"></div>\n <div class="fbw-overlay">\n <div class="fbw-modal" role="dialog" aria-modal="true" aria-labelledby="fbw-modal-title">\n <div class="fbw-modal-head">\n <h2 id="fbw-modal-title">Share feedback</h2>\n <button class="fbw-close" type="button" data-action="close-modal" aria-label="Close">×</button>\n </div>\n <form data-role="form">\n <div class="fbw-field" data-role="item-field">\n <label>Selected element</label>\n <div class="fbw-item-box" data-role="item-box"></div>\n </div>\n <div class="fbw-field">\n <label for="fbw-title">Title</label>\n <input id="fbw-title" data-role="title" type="text" placeholder="Brief summary of your feedback" required />\n </div>\n <div class="fbw-field">\n <label for="fbw-feedback">What's going on?</label>\n <textarea id="fbw-feedback" data-role="feedback" rows="4" placeholder="Tell us what you noticed..."></textarea>\n </div>\n <div class="fbw-field">\n <label for="fbw-email">Email</label>\n <input id="fbw-email" data-role="email" type="email" placeholder="you@example.com" required />\n </div>\n <div class="fbw-error" data-role="error"></div>\n <div class="fbw-actions">\n <button type="button" class="fbw-btn fbw-btn-ghost" data-action="close-modal">Cancel</button>\n <button type="submit" class="fbw-btn fbw-btn-primary">Submit</button>\n </div>\n </form>\n </div>\n </div>\n <div class="fbw-toast" data-role="toast"></div>\n `}escapeHtml(e){const t=document.createElement("div");return t.textContent=e,t.innerHTML}cacheElements(){this.elements={tab:this.root.querySelector(".fbw-tab"),menu:this.root.querySelector(".fbw-menu"),banner:this.root.querySelector(".fbw-banner"),highlight:this.root.querySelector(".fbw-highlight"),overlay:this.root.querySelector(".fbw-overlay"),modal:this.root.querySelector(".fbw-modal"),form:this.root.querySelector('[data-role="form"]'),itemField:this.root.querySelector('[data-role="item-field"]'),itemBox:this.root.querySelector('[data-role="item-box"]'),title:this.root.querySelector('[data-role="title"]'),feedback:this.root.querySelector('[data-role="feedback"]'),email:this.root.querySelector('[data-role="email"]'),error:this.root.querySelector('[data-role="error"]'),toast:this.root.querySelector('[data-role="toast"]')}}attachEventListeners(){this.elements.tab.addEventListener("click",()=>this.onTabClick()),this.elements.menu.addEventListener("click",e=>this.onMenuClick(e)),this.elements.banner.addEventListener("click",e=>this.onBannerClick(e)),this.elements.overlay.addEventListener("click",e=>this.onOverlayClick(e)),this.elements.form.addEventListener("submit",e=>this.onSubmit(e))}onTabClick(){"menu"===this.state?this.closeMenu():this.openMenu()}openMenu(){this.state="menu",this.elements.menu.classList.add("fbw-open"),this.elements.tab.setAttribute("aria-expanded","true"),document.addEventListener("click",this.onOutsideMenuClick,!0)}closeMenu(){"menu"===this.state&&(this.state="idle"),this.elements.menu.classList.remove("fbw-open"),this.elements.tab.setAttribute("aria-expanded","false"),document.removeEventListener("click",this.onOutsideMenuClick,!0)}onOutsideMenuClick=e=>{this.isInsideWidget(e.target)||this.closeMenu()};onMenuClick(e){const t=e.target.closest("button[data-action]");if(!t)return;const n=t.getAttribute("data-action");"pick-visible"===n&&this.startPicking(!0),"pick-hidden"===n&&(this.showItemInForm=!1,this.closeMenu(),this.openModal())}startPicking(e){this.showItemInForm=e,this.closeMenu(),this.state="picking",this.elements.banner.classList.add("fbw-open"),document.addEventListener("mousemove",this.onHoverMove,!0),document.addEventListener("click",this.onDocumentClickCapture,!0),document.addEventListener("keydown",this.onKeyDownCapture,!0),document.addEventListener("scroll",this.onScrollOrResize,!0),window.addEventListener("resize",this.onScrollOrResize,!0)}stopPicking(){this.elements.banner.classList.remove("fbw-open"),document.removeEventListener("mousemove",this.onHoverMove,!0),document.removeEventListener("scroll",this.onScrollOrResize,!0),window.removeEventListener("resize",this.onScrollOrResize,!0)}onBannerClick(e){e.target.closest('[data-action="cancel-pick"]')&&this.cancelAll()}onHoverMove=e=>{this.isInsideWidget(e.target)||(this.hoverRafId&&cancelAnimationFrame(this.hoverRafId),this.hoverRafId=requestAnimationFrame(()=>{this.positionHighlight(e.target)}))};positionHighlight(e){const t=e.getBoundingClientRect();this.elements.highlight.style.display="block",this.elements.highlight.style.top=`${t.top}px`,this.elements.highlight.style.left=`${t.left}px`,this.elements.highlight.style.width=`${t.width}px`,this.elements.highlight.style.height=`${t.height}px`}onScrollOrResize=()=>{this.selectedEl&&"review"===this.state&&this.positionHighlight(this.selectedEl)};onDocumentClickCapture=e=>{this.isInsideWidget(e.target)||(e.preventDefault(),e.stopPropagation(),"function"==typeof e.stopImmediatePropagation&&e.stopImmediatePropagation(),"picking"===this.state&&this.finalizeSelection(e.target))};onKeyDownCapture=e=>{"Escape"===e.key&&(e.preventDefault(),this.cancelAll())};finalizeSelection(e){this.selectedEl=e,this.selectedSelector=this.getUniqueSelector(e),this.stopPicking(),this.positionHighlight(e),this.openModal()}getUniqueSelector(e){if(!(e instanceof Element))return null;if(e.id){const t=`#${this.cssEscape(e.id)}`;if(1===this.safeQueryCount(t))return t}const t=[];let n=e;for(;n&&1===n.nodeType&&n!==document.documentElement;){let e=n.tagName.toLowerCase();if(n.id){e=`#${this.cssEscape(n.id)}`,t.unshift(e);break}const i=Array.from(n.classList).filter(e=>!!e);i.length&&(e+="."+i.map(this.cssEscape).join("."));const o=n.parentElement;if(o){const t=Array.from(o.children).filter(e=>e.tagName===n.tagName);if(t.length>1){e+=`:nth-of-type(${t.indexOf(n)+1})`}}t.unshift(e);const s=t.join(" > ");if(1===this.safeQueryCount(s))return s;n=o||null}return t.join(" > ")}cssEscape(e){return window.CSS&&window.CSS.escape?window.CSS.escape(e):String(e).replace(/([ #.;?%&,.+*~':"!^$[\]()=>|/])/g,"\\$1")}safeQueryCount(e){try{return document.querySelectorAll(e).length}catch(e){return-1}}openModal(){this.state="review",this.elements.error.classList.remove("fbw-show"),this.elements.form.reset(),this.showItemInForm?(this.elements.itemField.classList.remove("fbw-hidden"),this.elements.itemBox.textContent=this.selectedSelector||"(none)"):this.elements.itemField.classList.add("fbw-hidden"),this.elements.overlay.classList.add("fbw-open"),setTimeout(()=>this.elements.feedback.focus(),30)}closeModal(){this.elements.overlay.classList.remove("fbw-open")}cancelAll(){this.stopPicking(),this.closeModal(),this.elements.highlight.style.display="none",document.removeEventListener("click",this.onDocumentClickCapture,!0),document.removeEventListener("keydown",this.onKeyDownCapture,!0),this.selectedEl=null,this.selectedSelector=null,this.state="idle"}onOverlayClick(e){e.target.closest('[data-action="close-modal"]')&&this.cancelAll()}onSubmit(e){e.preventDefault();const t=this.elements.title.value.trim(),n=this.elements.feedback.value.trim(),i=this.elements.email.value.trim(),o=/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(i);if(!t||!o)return this.elements.error.textContent=t?"Please enter a valid email address.":"Please add a title before submitting.",void this.elements.error.classList.add("fbw-show");const s={optionType:this.showItemInForm?"page_item_visible":"page_item_hidden",elementSelector:this.selectedSelector,pageUrl:window.location.href,pageTitle:document.title,title:t,feedback:n,email:i,submittedAt:(new Date).toISOString()};this.submitFeedback(s)}prepareMessageBody(e){const t=e.email;return{title:e.title,body:`${e.feedback||"(No additional details provided)"}\n\nPage: ${e.pageTitle}\nURL: ${e.pageUrl}\nSelector: ${e.elementSelector}\nOption: ${e.optionType}\nSubmitted: ${e.submittedAt}`,user_handle:t}}submitFeedback(e){if(window.dispatchEvent(new CustomEvent("feedbackwidget:submit",{detail:e})),this.apiKey){const t=this.prepareMessageBody(e);fetch(this.endPoint,{method:"POST",headers:{"Content-Type":"application/json",Authorization:`Bearer ${this.apiKey}`},body:JSON.stringify(t)}).catch(()=>{})}this.cancelAll(),this.showToast("Thanks for the feedback!")}showToast(e){this.elements.toast.textContent=e,this.elements.toast.classList.add("fbw-show"),setTimeout(()=>this.elements.toast.classList.remove("fbw-show"),2400)}isInsideWidget(e){return e===this.host||this.host.contains(e)}open(e="visible"){this.startPicking("visible"===e)}close(){this.cancelAll()}destroy(){this.cancelAll(),this.host.remove()}}export{FeedbackWidget};
|