// NOTE: Make sure DOMPurify is loaded in your Custom HTML Header // (function() { 'use strict'; // --- HTML String Constants (NO INLINE STYLES HERE!) --- const feedbackButtonHTML = ` `; const popupContainerHTML = ` `; // Final corrected HTML string with no reset icon, only text const feedbackFormHTML = `

Updates

Suggestions

RESET

Use this tab for all changes to existing KB articles (update, correct, clarify, etc.).

KB Topic Location

Identify the topic that needs a change.

Choose a topic from the current article Enter the URL for any topic

Topic:

Check

Summary

Briefly sum up the needed update.

Check

Description

Explain what's inaccurate, incomplete, or unclear, and what it should be corrected to.

Check

Your email

Enable us to contact you if we need more information.

Check

Check indicated fields before submitting.

`; const moreFieldsHTML = `

Additional Information

Choose PM:

Check

Choose urgency:

Check

Additional resources:

Enter links to any existing info on this topic.

SMEs:

Who else at Kentik would be a good source of information for this content?

`; const moreFieldsAddSpecificHTML = `

Help draft?

Would you be able to outline or draft (rough) the new content?

No Yes

`; const pmListHTML = `

Chris O'Brien
Dave Cliffe
Dusan Pajin
Greg Dendy
Greg Villain
Jason Carrier
T.J. Boyd
Unknown

`; const dueListHTML = `

2 weeks
1 month
2 months
4+ months

`; const agentListHTML = `

kproxy
kprobe
ksynth
kappa
ktranslate
kbgp

`; // --- Core Application Object --- const d360FeedbackApp = { // --- State --- kentikian: 0, // --- Helper Functions --- getEl: function(id) { return document.getElementById('d360' + id); }, escapeHtml: function(text) { if (typeof text !== 'string') { return text; } var map = { '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' }; return text.replace(/[&<>"']/g, function(m) { return map[m]; }); }, getCurrentPageBaseUrl: function() { let url = window.location.href; const hashIndex = url.indexOf('#'); if (hashIndex > -1) { url = url.substring(0, hashIndex); } const queryIndex = url.indexOf('?'); if (queryIndex > -1) { url = url.substring(0, queryIndex); } return url; }, // --- Popup Control Functions --- showPopup: function() { const popupContainer = this.getEl('FeedbackPopupContainer'); if (popupContainer) { popupContainer.style.display = 'flex'; this.initializeFeedbackForm(); } else { console.error('D360 Feedback Script: Popup container not found on showPopup().'); } }, hidePopup: function() { const popupContainer = this.getEl('FeedbackPopupContainer'); if (popupContainer) { popupContainer.style.display = 'none'; } }, // --- Form Initialization and Logic --- initializeFeedbackForm: function() { console.log('Initializing Feedback Form'); const popBody = this.getEl('PopBody'); if (popBody) { popBody.innerHTML = feedbackFormHTML; } else { console.error('D360 Feedback Script: d360PopBody not found!'); return; } const popHeading = this.getEl('PopHeading'); if (popHeading) { popHeading.textContent = 'Send Feedback'; } this.getEl('FixBody').style.display = 'block'; this.getEl('AddBody').style.display = 'none'; this.getEl('FixHead').classList.add('d360-tab-cur'); this.getEl('AddHead').classList.remove('d360-tab-cur'); this.initializeCurrentTabFields(); this.setupFormListeners(); }, initializeCurrentTabFields: function() { console.log('Initializing current tab fields (Updates tab)'); const currentPageUrl = this.getCurrentPageBaseUrl(); const urlFixInput = this.getEl('UrlFix'); if(urlFixInput) urlFixInput.value = currentPageUrl + window.location.hash; const hasHeadings = document.querySelectorAll('h1, h2, h3, h4, h5, h6').length > 0; this.resetAndHideAlerts('Fix'); const topicNameInput = this.getEl('TopicName'); const topicChooserDiv = this.getEl('TopicChooser'); const urlBlockFixDiv = this.getEl('UrlBlock_fix'); const currentRadio = this.getEl('Current'); const differentRadio = this.getEl('Different'); const topicRadioSpan = this.getEl('TopicRadio'); if (hasHeadings) { if(topicNameInput) { topicNameInput.value = 'Click to choose...'; topicNameInput.style.fontStyle = 'italic'; } if(topicChooserDiv) topicChooserDiv.style.display = 'table-cell'; if(urlBlockFixDiv) urlBlockFixDiv.style.display = 'none'; if(currentRadio) currentRadio.checked = true; if(differentRadio) differentRadio.checked = false; this.toggleFixFieldLock('Current'); } else { if (topicRadioSpan) topicRadioSpan.style.display = 'none'; if(currentRadio) currentRadio.checked = false; if(differentRadio) differentRadio.checked = true; this.toggleFixFieldLock('Different'); } const moreFieldsFixDiv = this.getEl('MoreFieldsFix'); if(moreFieldsFixDiv) moreFieldsFixDiv.innerHTML = moreFieldsHTML; this.initializeKentikSpecificFields('Fix'); }, initializeSuggestionTabFields: function() { console.log('Initializing Suggestions tab fields'); const addBody = this.getEl('AddBody'); if(addBody) addBody.style.display = 'block'; const portalRadio = this.getEl('d360Portal'); if(portalRadio) portalRadio.checked = true; this.toggleAddFieldsLock('Portal'); this.resetAndHideAlerts('Add'); const moreFieldsAddDiv = this.getEl('MoreFieldsAdd'); if(moreFieldsAddDiv) moreFieldsAddDiv.innerHTML = moreFieldsHTML + moreFieldsAddSpecificHTML; this.initializeKentikSpecificFields('Add'); }, resetAndHideAlerts: function(tabPrefix) { const summaryField = this.getEl(`Summary${tabPrefix}`); if (summaryField) summaryField.value = ''; const detailsField = this.getEl(`Details${tabPrefix}`); if (detailsField) detailsField.value = ''; const emailField = this.getEl(`Email${tabPrefix}`); if (emailField) emailField.value = ''; const urlAlert = this.getEl(`URLAlert_${tabPrefix}`); if (urlAlert) urlAlert.style.display = 'none'; const summaryAlert = this.getEl(`SummaryAlert_${tabPrefix}`); if (summaryAlert) summaryAlert.style.display = 'none'; const detailsAlert = this.getEl(`DetailsAlert_${tabPrefix}`); if (detailsAlert) detailsAlert.style.display = 'none'; const emailAlert = this.getEl(`EmailAlert_${tabPrefix}`); if (emailAlert) emailAlert.style.display = 'none'; const allAlert = this.getEl(`AllAlert_${tabPrefix}`); if (allAlert) allAlert.style.display = 'none'; const pmName = this.getEl('PMName'); if (pmName) { pmName.value = ''; pmName.removeAttribute('data-label'); } const dueName = this.getEl('DueName'); if (dueName) { dueName.value = ''; dueName.removeAttribute('data-label'); } const existingInfo = this.getEl('ExistingInfo'); if (existingInfo) existingInfo.value = ''; const sme = this.getEl('SME'); if (sme) sme.value = ''; const alertPm = this.getEl('Alert_pm'); if (alertPm) alertPm.style.display = 'none'; const alertDue = this.getEl('Alert_due'); if (alertDue) alertDue.style.display = 'none'; const moreFieldsDiv = this.getEl(`MoreFields${tabPrefix}`); if (moreFieldsDiv) moreFieldsDiv.style.display = 'none'; this.kentikian = 0; }, initializeKentikSpecificFields: function(tabPrefix) { const moreFieldsContainer = this.getEl(`MoreFields${tabPrefix}`); if (!moreFieldsContainer) return; const pmNameInput = this.getEl('PMName'); if (pmNameInput) pmNameInput.placeholder = 'Click to choose...'; const dueNameInput = this.getEl('DueName'); if (dueNameInput) dueNameInput.placeholder = 'Click to choose...'; const selectorWrapPm = this.getEl('SelectorWrap_pm'); if (selectorWrapPm) selectorWrapPm.innerHTML = pmListHTML; const selectorWrapDue = this.getEl('SelectorWrap_due'); if (selectorWrapDue) selectorWrapDue.innerHTML = dueListHTML; }, toggleFixFieldLock: function(id) { const urlFix = this.getEl('UrlFix'); const fieldLabelFix = this.getEl('FieldLabel_fix'); const topicChooser = this.getEl('TopicChooser'); const urlBlockFix = this.getEl('UrlBlock_fix'); const urlAlertFix = this.getEl('URLAlert_fix'); if (id === 'Current') { if (urlFix) { urlFix.disabled = true; urlFix.style.color = 'rgb(118,129,142)'; } if (fieldLabelFix) fieldLabelFix.textContent = 'Topic:'; if (topicChooser) topicChooser.style.display = 'table-cell'; if (urlBlockFix) urlBlockFix.style.display = 'none'; if (urlAlertFix) urlAlertFix.style.display = 'none'; } else if (id === 'Different') { if (urlFix) { urlFix.disabled = false; urlFix.style.color = 'rgb(56,57,69)'; urlFix.focus(); } if (fieldLabelFix) fieldLabelFix.textContent = 'URL:'; if (topicChooser) topicChooser.style.display = 'none'; if (urlBlockFix) urlBlockFix.style.display = 'table-cell'; if (urlAlertFix) urlAlertFix.style.display = 'none'; } }, toggleAddFieldsLock: function(id) { const urlAdd = this.getEl('UrlAdd'); const fieldLabelAdd = this.getEl('FieldLabel_add'); const agentChooser = this.getEl('AgentChooser'); const urlBlockAdd = this.getEl('UrlBlock_add'); const urlAlertAdd = this.getEl('URLAlert_add'); if (id === 'Portal') { if (urlAdd) { urlAdd.disabled = false; urlAdd.style.color = 'rgb(56,57,69)'; urlAdd.placeholder = 'Paste the URL of the relevant module/page in the portal...'; urlAdd.focus(); } if (fieldLabelAdd) fieldLabelAdd.textContent = 'URL:'; if (agentChooser) agentChooser.style.display = 'none'; if (urlAlertAdd) urlAlertAdd.style.display = 'none'; if (urlBlockAdd) urlBlockAdd.style.display = 'block'; } else if (id === 'APIs') { if (urlAdd) { urlAdd.disabled = false; urlAdd.style.color = 'rgb(56,57,69)'; urlAdd.placeholder = 'Enter name of API in GitHub repo (e.g. "bgp_monitoring").'; urlAdd.focus(); } if (fieldLabelAdd) fieldLabelAdd.textContent = 'Name:'; if (agentChooser) agentChooser.style.display = 'none'; if (urlAlertAdd) urlAlertAdd.style.display = 'none'; if (urlBlockAdd) urlBlockAdd.style.display = 'block'; } else if (id === 'Agents') { if (urlAdd) { urlAdd.disabled = true; urlAdd.style.color = 'rgb(118,129,142)'; urlAdd.placeholder = 'Choose the agent.'; urlAdd.value = 'N.A.'; } if (fieldLabelAdd) fieldLabelAdd.textContent = 'Name:'; if (agentChooser) agentChooser.style.display = 'table-cell'; if (urlAlertAdd) urlAlertAdd.style.display = 'none'; if (urlBlockAdd) urlBlockAdd.style.display = 'none'; } else if (id === 'Other') { if (urlAdd) { urlAdd.disabled = true; urlAdd.style.color = 'rgb(118,129,142)'; urlAdd.placeholder = 'N.A.'; urlAdd.value = 'N.A.'; } if (fieldLabelAdd) fieldLabelAdd.textContent = ''; if (agentChooser) agentChooser.style.display = 'none'; if (urlAlertAdd) urlAlertAdd.style.display = 'none'; if (urlBlockAdd) urlBlockAdd.style.display = 'block'; } }, prepTopicList: function() { let dynamicTopicList = ''; const hTags = document.querySelectorAll('h1, h2, h3, h4, h5, h6'); if (hTags.length > 0) { dynamicTopicList += '

${articleTitle} (Article)
${topicText}

'; } else { dynamicTopicList = '

No specific topics found on this page.

'; } return dynamicTopicList; }, selectTopic: function(itemEl) { this.getEl('UrlFix').value = this.getCurrentPageBaseUrl() + itemEl.getAttribute('data-toploc'); this.getEl('SelectorWrap_fix').style.display = 'none'; this.getEl('TopicName').value = itemEl.textContent; this.getEl('TopicName').style.fontStyle = 'normal'; this.getEl('DropArrow_fix').style.display = 'inline-block'; this.getEl('URLAlert_fix').style.display = 'none'; this.checkAllValidations(); }, selectAgent: function(itemEl) { this.getEl('SelectorWrap_add').style.display = 'none'; this.getEl('AgentName').value = itemEl.textContent; this.getEl('AgentName').style.fontStyle = 'normal'; this.getEl('DropArrow_add').style.display = 'inline-block'; this.getEl('URLAlert_add').style.display = 'none'; this.checkAllValidations(); }, selectPM: function(itemEl) { this.getEl('SelectorWrap_pm').style.display = 'none'; this.getEl('PMName').value = itemEl.textContent; this.getEl('PMName').style.fontStyle = 'normal'; this.getEl('DropArrow_pm').style.display = 'inline-block'; this.getEl('Alert_pm').style.display = 'none'; this.getEl('PMName').setAttribute("data-label", itemEl.getAttribute("data-label")); this.checkAllValidations(); }, selectDue: function(itemEl) { this.getEl('SelectorWrap_due').style.display = 'none'; this.getEl('DueName').value = itemEl.textContent; this.getEl('DueName').style.fontStyle = 'normal'; this.getEl('DropArrow_due').style.display = 'inline-block'; this.getEl('Alert_due').style.display = 'none'; this.getEl('DueName').setAttribute("data-label", itemEl.getAttribute("data-label")); this.checkAllValidations(); }, validateEmail: function(email) { return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email); }, validateField: function(fieldEl, alertEl, minLength, customCondition = null) { if (!fieldEl || !alertEl) return true; const value = fieldEl.value.trim(); let isValid = true; if (customCondition !== null) { isValid = customCondition(value); } else if (minLength !== undefined) { isValid = value.length >= minLength; } alertEl.style.display = isValid ? 'none' : 'inline-block'; return isValid; }, checkAllValidations: function() { let isValid = true; const isFixTab = this.getEl('FixBody') && this.getEl('FixBody').style.display === 'block'; const formPrefix = isFixTab ? 'Fix' : 'Add'; const urlField = isFixTab ? this.getEl('UrlFix') : (this.getEl('d360Portal') && this.getEl('d360Portal').checked || this.getEl('d360APIs') && this.getEl('d360APIs').checked ? this.getEl('UrlAdd') : this.getEl('AgentName')); const urlAlert = this.getEl(`URLAlert_${formPrefix}`); let urlCondition; if (isFixTab) { urlCondition = (value) => value.indexOf('.htm') > -1 && (value.includes('/v0/') || value.includes('/v4/') || value.includes('/v3/') || value.includes('document360.io/docs/')); if (this.getEl('d360Current') && this.getEl('d360Current').checked && this.getEl('TopicName') && this.getEl('TopicName').value === 'Click to choose...') { urlCondition = () => false; } } else { if (this.getEl('d360Portal') && this.getEl('d360Portal').checked) { urlCondition = (value) => value.includes('document360.io/docs/'); } else if (this.getEl('d360APIs') && this.getEl('d360APIs').checked) { urlCondition = (value) => value.length > 3; } else if (this.getEl('d360Agents') && this.getEl('d360Agents').checked) { urlCondition = (value) => value.length > 3 && value !== 'N.A.'; } else { urlCondition = () => true; } } isValid = this.validateField(urlField, urlAlert, undefined, urlCondition) && isValid; isValid = this.validateField(this.getEl(`Summary${formPrefix}`), this.getEl(`SummaryAlert_${formPrefix}`), 4) && isValid; isValid = this.validateField(this.getEl(`Details${formPrefix}`), this.getEl(`DetailsAlert_${formPrefix}`), 4) && isValid; isValid = this.validateField(this.getEl(`Email${formPrefix}`), this.getEl(`EmailAlert_${formPrefix}`), undefined, this.validateEmail) && isValid; if (this.kentikian === 1) { isValid = this.validateField(this.getEl('PMName'), this.getEl('Alert_pm'), 4) && isValid; isValid = this.validateField(this.getEl('DueName'), this.getEl('Alert_due'), 4) && isValid; } const allAlert = this.getEl(`AllAlert_${formPrefix}`); if (allAlert) { allAlert.style.display = isValid ? 'none' : 'inline-block'; } return isValid; }, showKentikFields: function(emailFieldEl) { if (!emailFieldEl) return; if (window.DOMPurify) { emailFieldEl.value = DOMPurify.sanitize(emailFieldEl.value); } const isFixTab = this.getEl('FixBody') && this.getEl('FixBody').style.display === 'block'; const moreFieldsDiv = this.getEl(`MoreFields${isFixTab ? 'Fix' : 'Add'}`); const emailAlert = this.getEl(`EmailAlert_${isFixTab ? 'Fix' : 'Add'}`); if (this.validateEmail(emailFieldEl.value)) { if (emailAlert) emailAlert.style.display = 'none'; if (emailFieldEl.value.endsWith('@kentik.com')) { this.kentikian = 1; if (moreFieldsDiv) moreFieldsDiv.style.display = 'block'; } else { this.kentikian = 0; if (moreFieldsDiv) moreFieldsDiv.style.display = 'none'; } } else { this.kentikian = 0; if (emailAlert) emailAlert.style.display = 'inline-block'; if (moreFieldsDiv) moreFieldsDiv.style.display = 'none'; } this.checkAllValidations(); }, prepFixSubmission: function() { console.log('Preparing Fix Submission'); if (!this.checkAllValidations()) { console.warn('Fix Submission: Validations failed.'); return; } const currentPageUrl = this.getCurrentPageBaseUrl(); const urlFix = this.getEl('UrlFix') ? this.getEl('UrlFix').value : ''; const summary = this.getEl('SummaryFix') ? this.getEl('SummaryFix').value : ''; const details = this.getEl('DetailsFix') ? this.getEl('DetailsFix').value : ''; const email = this.getEl('EmailFix') ? this.getEl('EmailFix').value : ''; let issuePrefix = ''; let articleTag = 'd360-unknown'; let fieldTitle = ''; let urlForBody = urlFix; if (this.getEl('d360Current') && this.getEl('d360Current').checked) { const topicName = this.getEl('TopicName') ? this.getEl('TopicName').value : ''; issuePrefix = topicName; fieldTitle = 'Topic'; const match = urlFix.match(/\/docs\/([^/#?]+)/); if (match && match[1]) { articleTag = `d360-${match[1]}`; } else { const pageTitle = document.querySelector('h1.article-title') || document.querySelector('title'); articleTag = `d360-${pageTitle ? pageTitle.textContent.trim().substring(0, 20).replace(/\s+/g, '-') : 'Current-Article'}`; } } else { issuePrefix = urlFix; fieldTitle = 'URL'; const match = urlFix.match(/\/docs\/([^/#?]+)/); if (match && match[1]) { articleTag = `d360-${match[1]}`; } else { articleTag = `d360-External-Link`; } } const titleString = `[${articleTag}]-${issuePrefix}: ${summary}`; let bodyString = this.buildGithubBody('### KB Location\n\n', fieldTitle, urlForBody, summary, details, email); if (this.kentikian === 1) { bodyString += this.getKentikSpecificFields('Fix'); } const labelArray = this.buildGithubLabels('Update'); this.submitGithubIssue(titleString, bodyString, labelArray, 'Fix', email); }, prepAddSubmission: function() { console.log('Preparing Add Submission'); if (!this.checkAllValidations()) { console.warn('Add Submission: Validations failed.'); return; } const summary = this.getEl('SummaryAdd') ? this.getEl('SummaryAdd').value : ''; const details = this.getEl('DetailsAdd') ? this.getEl('DetailsAdd').value : ''; const email = this.getEl('EmailAdd') ? this.getEl('EmailAdd').value : ''; const checkedAreaEl = document.querySelector('input[name="area"]:checked'); const checkedArea = checkedAreaEl ? checkedAreaEl.value : ''; let issuePrefix = checkedArea; let fieldTitle = ''; let urlForBody = ''; if (checkedArea === 'Portal') { fieldTitle = 'Portal URL'; urlForBody = this.getEl('UrlAdd') ? this.getEl('UrlAdd').value : ''; } else if (checkedArea === 'APIs') { fieldTitle = 'API Name'; urlForBody = this.getEl('UrlAdd') ? this.getEl('UrlAdd').value : ''; } else if (checkedArea === 'Agents') { fieldTitle = 'Agent Name'; urlForBody = this.getEl('AgentName') ? this.getEl('AgentName').value : ''; } else { fieldTitle = 'N/A'; } const titleString = `[New Content: ${issuePrefix}] - ${summary}`; let bodyString = this.buildGithubBody('### Product Area\n\n', fieldTitle, urlForBody, summary, details, email); if (this.kentikian === 1) { bodyString += this.getKentikSpecificFields('Add'); const helpYes = this.getEl('d360HelpYes'); const draftAnswer = helpYes && helpYes.checked ? 'Yes' : 'No'; bodyString += `**Willing to outline or draft?** ${draftAnswer}\n`; } const labelArray = this.buildGithubLabels('Add', checkedArea); this.submitGithubIssue(titleString, bodyString, labelArray, 'Add', email); }, getKentikSpecificFields: function(tabPrefix) { const pmNameEl = this.getEl('PMName'); const dueNameEl = this.getEl('DueName'); const existingInfoEl = this.getEl('ExistingInfo'); const smeEl = this.getEl('SME'); const pmLabel = pmNameEl && pmNameEl.getAttribute("data-label") ? pmNameEl.getAttribute("data-label") : 'PM-Unknown'; const urgVal = dueNameEl && dueNameEl.getAttribute("data-label") ? dueNameEl.getAttribute("data-label") : 'Unknown'; const dueLabel = this.calcDueLabel(urgVal); const priorityLabel = this.calcPriorityLabel(Number(urgVal)); const existingInfo = existingInfoEl ? existingInfoEl.value : ''; const sme = smeEl ? smeEl.value : ''; let kentikString = `\n\n### Additional Information\n\n`; kentikString += `**Product Manager:** ${pmLabel.replace('PM-', '')}\n`; kentikString += `**Urgency:** ${dueLabel}\n`; kentikString += `**Priority:** ${priorityLabel}\n`; kentikString += `**Links to existing information:**\n${existingInfo || 'None'}\n`; return kentikString; }, buildGithubBody: function(sectionLabel, fieldTitle, urlString, summary, details, email) { let body = `${sectionLabel}`; if (fieldTitle && urlString && urlString !== 'N.A.') { body += `**${fieldTitle}:** ${urlString}\n\n`; } else if (fieldTitle && !urlString && urlString !== 'N.A.') { body += `**Product Area:** ${fieldTitle}\n\n`; } else if (fieldTitle && urlString === 'N.A.') { body += `**${fieldTitle}:** N/A\n\n`; } body += `**Summary:** ${summary}\n\n`; body += `**Description:**\n${details}\n\n`; body += `**Submitted by Email:** ${email}\n\n`; return body; }, buildGithubLabels: function(issueType, productArea = '', secTag = '', modTag = '', pmLabel = '', dueLabel = '', priorityLabel = '') { const labelArray = [issueType]; if (productArea) { labelArray.push(`Area: ${productArea}`); } if (pmLabel) { labelArray.push(pmLabel); } if (dueLabel) { labelArray.push(dueLabel); } if (priorityLabel) { labelArray.push(priorityLabel); } const currentUrl = window.location.pathname; const match = currentUrl.match(/\/docs\/([^/]+)\/?([^/]*)/); if (match) { const categorySlug = match[1]; const articleSlug = match[2]; if (categorySlug) { labelArray.push(`D360 Category: ${categorySlug}`); } if (articleSlug) { labelArray.push(`D360 Article: ${articleSlug}`); } } else { labelArray.push('D360-General'); } return labelArray; }, calcDueLabel: function(offsetDays) { if (offsetDays === 'Unknown') return 'Due: Unknown'; const dueDate = new Date(); dueDate.setDate(dueDate.getDate() + Number(offsetDays)); const month = (dueDate.getMonth() + 1).toString().padStart(2, '0'); const year = dueDate.getFullYear().toString().slice(2); const halfMonth = dueDate.getDate() > 15 ? 'b' : 'a'; return `Due: ${year}-${month}-${halfMonth}`; }, calcPriorityLabel: function(urgVal) { if (isNaN(urgVal)) return 'P: Unknown'; if (urgVal <= 15) return 'P: P0'; if (urgVal <= 30) return 'P: P1'; if (urgVal <= 60) return 'P: P2'; return 'P: P3'; }, submitGithubIssue: function(titleString, bodyString, labelArray, formType, email) { console.log('SubmitGithubIssue: Attempting to send data.'); const submitButton = this.getEl(`Submit${formType}`); if (submitButton) { submitButton.disabled = true; submitButton.textContent = 'Submitting...'; submitButton.classList.add('d360-btn-disabled'); } try { const response = fetch('/api/github', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ title: titleString, body: bodyString, labels: labelArray }) }).then(resp => { if (!resp.ok) { return resp.json().then(errorData => { throw new Error(errorData.message || `Server responded with status ${resp.status}`); }); } return resp.json(); }).then(respData => { console.log('GitHub submission confirmed.'); const confirmationDiv = this.getEl('Confirmation'); if (confirmationDiv) { let responseMessage = 'Thank you for your feedback.'; if (email.endsWith('@kentik.com')) { responseMessage += `
Submitted as issue #${respData.number} in the GitHub repo "kb-feedback."
You can use this issue to add screenshots and additional information.`; } confirmationDiv.innerHTML = responseMessage; confirmationDiv.style.display = 'block'; } const feedBodyEl = this.getEl('d360FeedBody'); if (feedBodyEl) { feedBodyEl.style.display = 'none'; } }).catch(error => { console.error("Error submitting GitHub issue:", error); const confirmationDiv = this.getEl('Confirmation'); if (confirmationDiv) { confirmationDiv.innerHTML = `

Failed to submit feedback. Please try again later.
Error: ${this.escapeHtml(error.message || 'Unknown error')}

`; confirmationDiv.style.display = 'block'; } const feedBodyEl = this.getEl('d360FeedBody'); if (feedBodyEl) { feedBodyEl.style.display = 'none'; } if (submitButton) { submitButton.disabled = false; submitButton.textContent = 'Submit'; submitButton.classList.remove('d360-btn-disabled'); } } }, // --- Event Listener Setup --- setupFormListeners: function() { console.log('Setting up form event listeners.'); // Use a local constant to capture 'this' to avoid binding issues const self = this; // General reset button for the form const resetWrap = self.getEl('ResetWrap'); if (resetWrap) { resetWrap.addEventListener('click', self.initializeFeedbackForm.bind(self)); } // Tab switching const fixHead = self.getEl('FixHead'); const addHead = self.getEl('AddHead'); if (fixHead) { fixHead.addEventListener('click', (e) => { self.getEl('FixBody').style.display = 'block'; self.getEl('AddBody').style.display = 'none'; self.getEl('FixHead').classList.add('d360-tab-cur'); self.getEl('AddHead').classList.remove('d360-tab-cur'); self.initializeCurrentTabFields(); self.checkAllValidations(); }); } if (addHead) { addHead.addEventListener('click', (e) => { self.getEl('FixBody').style.display = 'none'; self.getEl('AddBody').style.display = 'block'; self.getEl('FixHead').classList.remove('d360-tab-cur'); self.getEl('AddHead').classList.add('d360-tab-cur'); self.initializeSuggestionTabFields(); self.checkAllValidations(); }); } const popCloser = self.getEl('PopCloser'); if (popCloser) popCloser.addEventListener('click', self.hidePopup.bind(self)); const formFix = self.getEl('Form_Fix'); if (formFix) { formFix.addEventListener('input', self.checkAllValidations.bind(self)); const emailFix = self.getEl('EmailFix'); if (emailFix) emailFix.addEventListener('change', self.showKentikFields.bind(self)); const submitFix = self.getEl('SubmitFix'); if (submitFix) submitFix.addEventListener('click', self.prepFixSubmission.bind(self)); const cancelFixBtn = formFix.querySelector('.d360-btn-cancel'); if (cancelFixBtn) cancelFixBtn.addEventListener('click', self.hidePopup.bind(self)); const currentRadio = self.getEl('Current'); const differentRadio = self.getEl('Different'); if (currentRadio) currentRadio.addEventListener('change', self.toggleFixFieldLock.bind(self, 'Current')); if (differentRadio) differentRadio.addEventListener('change', self.toggleFixFieldLock.bind(self, 'Different')); const topicNameInput = self.getEl('TopicName'); const dropArrowFix = self.getEl('DropArrow_fix'); const selectorWrapFix = self.getEl('SelectorWrap_fix'); if (topicNameInput && dropArrowFix) { topicNameInput.addEventListener('focus', () => { if(selectorWrapFix) { selectorWrapFix.innerHTML = self.prepTopicList(); selectorWrapFix.style.display = 'block'; } dropArrowFix.style.display = 'none'; }); dropArrowFix.addEventListener('click', () => { if(selectorWrapFix) { selectorWrapFix.innerHTML = self.prepTopicList(); selectorWrapFix.style.display = 'block'; } dropArrowFix.style.display = 'none'; }); } if (selectorWrapFix) { selectorWrapFix.addEventListener('click', (e) => { if (e.target.classList.contains('d360-selector-item')) { self.selectTopic(e.target); } }); } } const formAdd = self.getEl('Form_Add'); if (formAdd) { formAdd.addEventListener('input', self.checkAllValidations.bind(self)); const emailAdd = self.getEl('EmailAdd'); if (emailAdd) emailAdd.addEventListener('change', self.showKentikFields.bind(self)); const submitAdd = self.getEl('SubmitAdd'); if (submitAdd) submitAdd.addEventListener('click', self.prepAddSubmission.bind(self)); const cancelAddBtn = formAdd.querySelector('.d360-btn-cancel'); if (cancelAddBtn) cancelAddBtn.addEventListener('click', self.hidePopup.bind(self)); const portalRadio = self.getEl('d360Portal'); const apisRadio = self.getEl('d360APIs'); const agentsRadio = self.getEl('d360Agents'); const otherRadio = self.getEl('d360Other'); if (portalRadio) portalRadio.addEventListener('change', self.toggleAddFieldsLock.bind(self, 'Portal')); if (apisRadio) apisRadio.addEventListener('change', self.toggleAddFieldsLock.bind(self, 'APIs')); if (agentsRadio) agentsRadio.addEventListener('change', self.toggleAddFieldsLock.bind(self, 'Agents')); if (otherRadio) otherRadio.addEventListener('change', self.toggleAddFieldsLock.bind(self, 'Other')); const agentNameInput = self.getEl('AgentName'); const dropArrowAdd = self.getEl('DropArrow_add'); const selectorWrapAdd = self.getEl('SelectorWrap_add'); if (agentNameInput && dropArrowAdd) { agentNameInput.addEventListener('focus', () => { if(selectorWrapAdd) { selectorWrapAdd.innerHTML = agentListHTML; selectorWrapAdd.style.display = 'block'; } dropArrowAdd.style.display = 'none'; }); dropArrowAdd.addEventListener('click', () => { if(selectorWrapAdd) { selectorWrapAdd.innerHTML = agentListHTML; selectorWrapAdd.style.display = 'block'; } dropArrowAdd.style.display = 'none'; }); } if (selectorWrapAdd) { selectorWrapAdd.addEventListener('click', (e) => { if (e.target.classList.contains('d360-selector-item')) { self.selectAgent(e.target); } }); } } const pmNameInput = self.getEl('PMName'); const dropArrowPm = self.getEl('DropArrow_pm'); const selectorWrapPm = self.getEl('SelectorWrap_pm'); if (pmNameInput && dropArrowPm) { pmNameInput.addEventListener('focus', () => { if(selectorWrapPm) { selectorWrapPm.innerHTML = pmListHTML; selectorWrapPm.style.display = 'block'; } dropArrowPm.style.display = 'none'; }); dropArrowPm.addEventListener('click', () => { if(selectorWrapPm) { selectorWrapPm.innerHTML = pmListHTML; selectorWrapPm.style.display = 'block'; } dropArrowPm.style.display = 'none'; }); } if (selectorWrapPm) { selectorWrapPm.addEventListener('click', (e) => { if (e.target.classList.contains('d360-selector-item')) { self.selectPM(e.target); } }); } const dueNameInput = self.getEl('DueName'); const dropArrowDue = self.getEl('DropArrow_due'); const selectorWrapDue = self.getEl('SelectorWrap_due'); if (dueNameInput && dropArrowDue) { dueNameInput.addEventListener('focus', () => { if(selectorWrapDue) { selectorWrapDue.innerHTML = dueListHTML; selectorWrapDue.style.display = 'block'; } dropArrowDue.style.display = 'none'; }); dropArrowDue.addEventListener('click', () => { if(selectorWrapDue) { selectorWrapDue.innerHTML = dueListHTML; selectorWrapDue.style.display = 'block'; } dropArrowDue.style.display = 'none'; }); } if (selectorWrapDue) { selectorWrapDue.addEventListener('click', (e) => { if (e.target.classList.contains('d360-selector-item')) { self.selectDue(e.target); } }); } document.addEventListener('click', (e) => { const dropdownSelectors = [ self.getEl('SelectorWrap_fix'), self.getEl('SelectorWrap_add'), self.getEl('SelectorWrap_pm'), self.getEl('SelectorWrap_due') ]; const dropdownInputs = [ self.getEl('TopicName'), self.getEl('AgentName'), self.getEl('PMName'), self.getEl('DueName') ]; const dropdownArrows = [ self.getEl('DropArrow_fix'), self.getEl('DropArrow_add'), self.getEl('DropArrow_pm'), self.getEl('DropArrow_due') ]; dropdownSelectors.forEach((selector, index) => { if (selector && selector.style.display === 'block') { const input = dropdownInputs[index]; const arrow = dropdownArrows[index]; if (!selector.contains(e.target) && (!input || !input.contains(e.target)) && (!arrow || !arrow.contains(e.target))) { selector.style.display = 'none'; if (arrow) arrow.style.display = 'inline-block'; } } }); }); }, // --- MAIN SCRIPT INITIALIZATION --- initScript: function() { console.log('D360 Feedback Script: Initializing...'); // Dynamically create the button and popup container on every run const body = document.body; if (!this.getEl('FeedbackButton')) { // Check if it already exists to prevent duplicates const buttonContainer = document.createElement('div'); buttonContainer.innerHTML = feedbackButtonHTML; body.appendChild(buttonContainer.firstChild); } if (!this.getEl('FeedbackPopupContainer')) { const popupContainer = document.createElement('div'); popupContainer.innerHTML = popupContainerHTML; body.appendChild(popupContainer.firstChild); } const buttonEl = this.getEl('FeedbackButton'); if (!buttonEl) { console.error('D360 Feedback Script: Dynamic button creation failed.'); return; } console.log('D360 Feedback Script: Button and popup container found. Attaching listener.'); buttonEl.removeEventListener('click', this.showPopup.bind(this)); buttonEl.addEventListener('click', this.showPopup.bind(this)); }, }; // --- Global Event Listeners --- // Listen for Document360's specific 'articleLoad' event window.addEventListener('articleLoad', () => { console.log('D360 Feedback Script: Custom "articleLoad" event detected. Re-initializing script.'); d360FeedbackApp.initScript(); }); // Run on initial page load (with a slight delay for custom HTML to render) document.addEventListener('DOMContentLoaded', () => { setTimeout(() => { console.log('D360 Feedback Script: DOMContentLoaded event fired. Running initial setup with delay.'); d360FeedbackApp.initScript(); }, 200); }); // MutationObserver as a fallback for SPA navigation if 'articleLoad' is inconsistent let lastUrl = location.href; new MutationObserver(() => { const url = location.href; if (url !== lastUrl) { lastUrl = url; console.log('D360 Feedback Script: URL change detected (SPA navigation fallback). Re-initializing.'); setTimeout(() => d360FeedbackApp.initScript(), 50); } }).observe(document.body, { childList: true, subtree: true }); })();