diff --git a/cards/card_component.js b/cards/card_component.js index 78a1a01b0..5d51e91e7 100644 --- a/cards/card_component.js +++ b/cards/card_component.js @@ -26,6 +26,8 @@ BaseCard["{{componentName}}"] = class extends ANSWERS.Component { }) ); } + + this.addFeedbackListeners(); const rtfElement = this._container.querySelector('.js-yxt-rtfValue'); if (rtfElement) { @@ -34,6 +36,36 @@ BaseCard["{{componentName}}"] = class extends ANSWERS.Component { } } + addFeedbackListeners() { + const feedbackFormSelector = '.js-HitchhikerCard-feedbackForm'; + let feedbackFormEl = this._container.querySelector(feedbackFormSelector); + if (feedbackFormEl) { + // For WCAG compliance, the feedback should be a submittable form + feedbackFormEl.addEventListener('submit', (e) => { + const formTargetEl = e.target; + const isGood = formTargetEl.querySelector('input:checked').value === 'true'; + + this.reportQuality(isGood); + this.updateState({ + feedbackSubmitted: true + }); + }); + + let thumbSelectorEls = this._container.querySelectorAll('.js-HitchhikerCard-thumbInput'); + if (thumbSelectorEls) { + thumbSelectorEls.forEach(el => { + el.addEventListener('click', (e) => { + let input = el.querySelector('input'); + if (input) { + input.checked = true; + } + HitchhikerJS.DOM.triggerCustomEvent(this._container, feedbackFormSelector, 'submit'); + }); + }); + } + } + } + setState(data) { const { _raw, ...derivedFields } = this.result; const profile = { ..._raw }; @@ -48,7 +80,7 @@ BaseCard["{{componentName}}"] = class extends ANSWERS.Component { cardData.titleEventOptions = updatedEventOptions; } - let { details, showMoreDetails } = cardData; + const { details, showMoreDetails } = cardData; const cardDetails = details || ''; const cardShowMoreConfig = showMoreDetails || {}; @@ -58,7 +90,7 @@ BaseCard["{{componentName}}"] = class extends ANSWERS.Component { // The card's details must extend past this limit as well for the toggling to be enabled. const showExcessDetailsToggle = showMoreLimit && cardDetails.length > showMoreLimit; - let truncatedDetails = showExcessDetailsToggle + const truncatedDetails = showExcessDetailsToggle ? `${cardDetails.substring(0, showMoreLimit)}...` : ''; @@ -80,6 +112,42 @@ BaseCard["{{componentName}}"] = class extends ANSWERS.Component { } } + /** + * reportQuality will send the quality feedback to analytics + * @param {boolean} isGood true if the answer is what you were looking for + */ + reportQuality(isGood) { + /** + * EventTypes are explicit strings defined + * for what the server expects for analytics. + * + * @enum + */ + const EventTypes = { + THUMBS_UP: 'THUMBS_UP', + THUMBS_DOWN: 'THUMBS_DOWN' + }; + const eventType = isGood === true ? EventTypes.THUMBS_UP : EventTypes.THUMBS_DOWN; + const event = new ANSWERS.AnalyticsEvent(eventType) + .addOptions({ + directAnswer: false, + verticalKey: this.verticalKey, + searcher: this._config.isUniversal ? 'UNIVERSAL' : 'VERTICAL', + entityId: this.result.id + }); + + this.analyticsReporter.report(event); + } + + /** + * updateState enables for partial updates (the delta between the old and new) + * @type {object} The new state to apply to the old + */ + updateState (state = {}) { + const newState = Object.assign({}, this.getState(), state); + this.setState(newState); + } + addDefaultEventOptions(eventOptions = {}) { return Object.assign({}, { verticalKey: this.verticalKey, diff --git a/cards/common-partials/thumbsfeedback.hbs b/cards/common-partials/thumbsfeedback.hbs index 0d29f674f..ea905ed3d 100644 --- a/cards/common-partials/thumbsfeedback.hbs +++ b/cards/common-partials/thumbsfeedback.hbs @@ -1,5 +1,5 @@
-
+
{{#if feedbackSubmitted}}
{{feedbackTextOnSubmission}} @@ -11,7 +11,13 @@
{{/if}}
-
+
diff --git a/cards/event-standard/template.hbs b/cards/event-standard/template.hbs index edf7bf258..3f3eba419 100644 --- a/cards/event-standard/template.hbs +++ b/cards/event-standard/template.hbs @@ -52,7 +52,7 @@
{{/if}} {{#if card.feedback}} - {{> thumbsfeedback card cardType="HitchhikerEventStandard"}} + {{> thumbsfeedback card cardType="HitchhikerEventStandard" feedbackSubmitted=feedbackSubmitted}} {{/if}}
diff --git a/cards/faq-accordion/template.hbs b/cards/faq-accordion/template.hbs index 04e3379f5..fa39cef8a 100644 --- a/cards/faq-accordion/template.hbs +++ b/cards/faq-accordion/template.hbs @@ -39,7 +39,7 @@ {{/if}} {{#if card.feedback}} - {{> thumbsfeedback card cardType="HitchhikerFaqAccordion"}} + {{> thumbsfeedback card cardType="HitchhikerFaqAccordion" feedbackSubmitted=feedbackSubmitted}} {{/if}} diff --git a/cards/financial-professional-location/template.hbs b/cards/financial-professional-location/template.hbs index 93587173b..f8bd379a9 100644 --- a/cards/financial-professional-location/template.hbs +++ b/cards/financial-professional-location/template.hbs @@ -22,7 +22,7 @@
{{> ctas }} {{#if card.feedback}} - {{> thumbsfeedback card cardType="HitchhikerFinancialProfessionalLocation"}} + {{> thumbsfeedback card cardType="HitchhikerFinancialProfessionalLocation" feedbackSubmitted=feedbackSubmitted}} {{/if}}
diff --git a/cards/job-standard/template.hbs b/cards/job-standard/template.hbs index ffb79575e..7ed89f090 100644 --- a/cards/job-standard/template.hbs +++ b/cards/job-standard/template.hbs @@ -10,7 +10,7 @@
{{> ctas }} {{#if card.feedback}} - {{> thumbsfeedback card cardType="HitchhikerJobStandard"}} + {{> thumbsfeedback card cardType="HitchhikerJobStandard" feedbackSubmitted=feedbackSubmitted}} {{/if}}
diff --git a/cards/link-standard/template.hbs b/cards/link-standard/template.hbs index c761335be..4a3cfd914 100644 --- a/cards/link-standard/template.hbs +++ b/cards/link-standard/template.hbs @@ -6,7 +6,7 @@ {{> details }}
{{#if card.feedback}} - {{> thumbsfeedback card cardType="HitchhikerLinkStandard"}} + {{> thumbsfeedback card cardType="HitchhikerLinkStandard" feedbackSubmitted=feedbackSubmitted}} {{/if}}
diff --git a/cards/location-standard/template.hbs b/cards/location-standard/template.hbs index 3cb536b75..38e04fc8d 100644 --- a/cards/location-standard/template.hbs +++ b/cards/location-standard/template.hbs @@ -27,7 +27,7 @@
{{> ctas }} {{#if card.feedback}} - {{> thumbsfeedback card cardType="HitchhikerLocationStandard"}} + {{> thumbsfeedback card cardType="HitchhikerLocationStandard" feedbackSubmitted=feedbackSubmitted}} {{/if}}
diff --git a/cards/menuitem-standard/template.hbs b/cards/menuitem-standard/template.hbs index e2bf64b84..a8adb267d 100644 --- a/cards/menuitem-standard/template.hbs +++ b/cards/menuitem-standard/template.hbs @@ -20,7 +20,7 @@ {{/if}} {{#if card.feedback}} - {{> thumbsfeedback card cardType="HitchhikerMenuItemStandard"}} + {{> thumbsfeedback card cardType="HitchhikerMenuItemStandard" feedbackSubmitted=feedbackSubmitted}} {{/if}} diff --git a/cards/multilang-event-standard/template.hbs b/cards/multilang-event-standard/template.hbs index 510bfd103..f18dffcf4 100644 --- a/cards/multilang-event-standard/template.hbs +++ b/cards/multilang-event-standard/template.hbs @@ -52,7 +52,7 @@ {{/if}} {{#if card.feedback}} - {{> thumbsfeedback card cardType="HitchhikerEventStandard"}} + {{> thumbsfeedback card cardType="HitchhikerEventStandard" feedbackSubmitted=feedbackSubmitted}} {{/if}} diff --git a/cards/multilang-faq-accordion/template.hbs b/cards/multilang-faq-accordion/template.hbs index 04e3379f5..fa39cef8a 100644 --- a/cards/multilang-faq-accordion/template.hbs +++ b/cards/multilang-faq-accordion/template.hbs @@ -39,7 +39,7 @@ {{/if}} {{#if card.feedback}} - {{> thumbsfeedback card cardType="HitchhikerFaqAccordion"}} + {{> thumbsfeedback card cardType="HitchhikerFaqAccordion" feedbackSubmitted=feedbackSubmitted}} {{/if}} diff --git a/cards/multilang-financial-professional-location/template.hbs b/cards/multilang-financial-professional-location/template.hbs index 4f0f91644..3e0ae750f 100644 --- a/cards/multilang-financial-professional-location/template.hbs +++ b/cards/multilang-financial-professional-location/template.hbs @@ -22,7 +22,7 @@
{{> ctas }} {{#if card.feedback}} - {{> thumbsfeedback card cardType="HitchhikerFinancialProfessionalLocation"}} + {{> thumbsfeedback card cardType="HitchhikerFinancialProfessionalLocation" feedbackSubmitted=feedbackSubmitted}} {{/if}}
diff --git a/cards/multilang-job-standard/template.hbs b/cards/multilang-job-standard/template.hbs index ffb79575e..7ed89f090 100644 --- a/cards/multilang-job-standard/template.hbs +++ b/cards/multilang-job-standard/template.hbs @@ -10,7 +10,7 @@
{{> ctas }} {{#if card.feedback}} - {{> thumbsfeedback card cardType="HitchhikerJobStandard"}} + {{> thumbsfeedback card cardType="HitchhikerJobStandard" feedbackSubmitted=feedbackSubmitted}} {{/if}}
diff --git a/cards/multilang-link-standard/template.hbs b/cards/multilang-link-standard/template.hbs index c761335be..4a3cfd914 100644 --- a/cards/multilang-link-standard/template.hbs +++ b/cards/multilang-link-standard/template.hbs @@ -6,7 +6,7 @@ {{> details }}
{{#if card.feedback}} - {{> thumbsfeedback card cardType="HitchhikerLinkStandard"}} + {{> thumbsfeedback card cardType="HitchhikerLinkStandard" feedbackSubmitted=feedbackSubmitted}} {{/if}}
diff --git a/cards/multilang-location-standard/template.hbs b/cards/multilang-location-standard/template.hbs index 28292d542..2fb09d193 100644 --- a/cards/multilang-location-standard/template.hbs +++ b/cards/multilang-location-standard/template.hbs @@ -27,7 +27,7 @@
{{> ctas }} {{#if card.feedback}} - {{> thumbsfeedback card cardType="HitchhikerLocationStandard"}} + {{> thumbsfeedback card cardType="HitchhikerLocationStandard" feedbackSubmitted=feedbackSubmitted}} {{/if}}
diff --git a/cards/multilang-menuitem-standard/template.hbs b/cards/multilang-menuitem-standard/template.hbs index de293dfa6..7d395f265 100644 --- a/cards/multilang-menuitem-standard/template.hbs +++ b/cards/multilang-menuitem-standard/template.hbs @@ -20,7 +20,7 @@ {{/if}} {{#if card.feedback}} - {{> thumbsfeedback card cardType="HitchhikerMenuItemStandard"}} + {{> thumbsfeedback card cardType="HitchhikerMenuItemStandard" feedbackSubmitted=feedbackSubmitted}} {{/if}} diff --git a/cards/multilang-product-prominentimage-clickable/template.hbs b/cards/multilang-product-prominentimage-clickable/template.hbs index 1cd6c9954..a92dc854d 100644 --- a/cards/multilang-product-prominentimage-clickable/template.hbs +++ b/cards/multilang-product-prominentimage-clickable/template.hbs @@ -15,7 +15,7 @@ {{> details }}
{{#if card.feedback}} - {{> thumbsfeedback card cardType="HitchhikerProductProminentImage"}} + {{> thumbsfeedback card cardType="HitchhikerProductProminentImage" feedbackSubmitted=feedbackSubmitted}} {{/if}}
diff --git a/cards/multilang-product-prominentimage/template.hbs b/cards/multilang-product-prominentimage/template.hbs index 1769650f0..2989163d8 100644 --- a/cards/multilang-product-prominentimage/template.hbs +++ b/cards/multilang-product-prominentimage/template.hbs @@ -8,7 +8,7 @@
{{> ctas }} {{#if card.feedback}} - {{> thumbsfeedback card cardType="HitchhikerProductProminentImage"}} + {{> thumbsfeedback card cardType="HitchhikerProductProminentImage" feedbackSubmitted=feedbackSubmitted}} {{/if}}
diff --git a/cards/multilang-product-prominentvideo/template.hbs b/cards/multilang-product-prominentvideo/template.hbs index ae13da210..0141d25ee 100644 --- a/cards/multilang-product-prominentvideo/template.hbs +++ b/cards/multilang-product-prominentvideo/template.hbs @@ -7,7 +7,7 @@ {{> content }}
{{#if card.feedback}} - {{> thumbsfeedback card cardType="HitchhikerProductProminentVideo"}} + {{> thumbsfeedback card cardType="HitchhikerProductProminentVideo" feedbackSubmitted=feedbackSubmitted}} {{/if}}
diff --git a/cards/multilang-product-standard/template.hbs b/cards/multilang-product-standard/template.hbs index cde2ccab7..fed2297ee 100644 --- a/cards/multilang-product-standard/template.hbs +++ b/cards/multilang-product-standard/template.hbs @@ -17,7 +17,7 @@ {{/if}} {{#if card.feedback}} - {{> thumbsfeedback card cardType="HitchhikerProductStandard"}} + {{> thumbsfeedback card cardType="HitchhikerProductStandard" feedbackSubmitted=feedbackSubmitted}} {{/if}} diff --git a/cards/multilang-professional-location/template.hbs b/cards/multilang-professional-location/template.hbs index 43b3fcdd3..f1249b6d5 100644 --- a/cards/multilang-professional-location/template.hbs +++ b/cards/multilang-professional-location/template.hbs @@ -22,7 +22,7 @@
{{> ctas }} {{#if card.feedback}} - {{> thumbsfeedback card cardType="HitchhikerProfessionalLocation"}} + {{> thumbsfeedback card cardType="HitchhikerProfessionalLocation" feedbackSubmitted=feedbackSubmitted}} {{/if}}
diff --git a/cards/multilang-professional-standard/template.hbs b/cards/multilang-professional-standard/template.hbs index 296e3e9f7..9e4761878 100644 --- a/cards/multilang-professional-standard/template.hbs +++ b/cards/multilang-professional-standard/template.hbs @@ -12,7 +12,7 @@
{{> ctas }} {{#if card.feedback}} - {{> thumbsfeedback card cardType="HitchhikerProfessionalStandard"}} + {{> thumbsfeedback card cardType="HitchhikerProfessionalStandard" feedbackSubmitted=feedbackSubmitted}} {{/if}}
diff --git a/cards/multilang-standard/template.hbs b/cards/multilang-standard/template.hbs index 366ec5fa1..74bdd1164 100644 --- a/cards/multilang-standard/template.hbs +++ b/cards/multilang-standard/template.hbs @@ -10,7 +10,7 @@
{{> ctas }} {{#if card.feedback}} - {{> thumbsfeedback card cardType="HitchhikerStandard"}} + {{> thumbsfeedback card cardType="HitchhikerStandard" feedbackSubmitted=feedbackSubmitted}} {{/if}}
diff --git a/cards/product-prominentimage-clickable/template.hbs b/cards/product-prominentimage-clickable/template.hbs index a3d447239..943decce8 100644 --- a/cards/product-prominentimage-clickable/template.hbs +++ b/cards/product-prominentimage-clickable/template.hbs @@ -15,7 +15,7 @@ {{> details }}
{{#if card.feedback}} - {{> thumbsfeedback card cardType="HitchhikerProductProminentImageClickable"}} + {{> thumbsfeedback card cardType="HitchhikerProductProminentImageClickable" feedbackSubmitted=feedbackSubmitted}} {{/if}}
diff --git a/cards/product-prominentimage/template.hbs b/cards/product-prominentimage/template.hbs index 596cfb040..94d25fe5d 100644 --- a/cards/product-prominentimage/template.hbs +++ b/cards/product-prominentimage/template.hbs @@ -8,7 +8,7 @@
{{> ctas }} {{#if card.feedback}} - {{> thumbsfeedback card cardType="HitchhikerProductProminentImage"}} + {{> thumbsfeedback card cardType="HitchhikerProductProminentImage" feedbackSubmitted=feedbackSubmitted}} {{/if}}
diff --git a/cards/product-prominentvideo/template.hbs b/cards/product-prominentvideo/template.hbs index 7760541c7..fd03ed714 100644 --- a/cards/product-prominentvideo/template.hbs +++ b/cards/product-prominentvideo/template.hbs @@ -8,7 +8,7 @@
{{> ctas }} {{#if card.feedback}} - {{> thumbsfeedback card cardType="HitchhikerProductProminentVideo"}} + {{> thumbsfeedback card cardType="HitchhikerProductProminentVideo" feedbackSubmitted=feedbackSubmitted}} {{/if}}
diff --git a/cards/product-standard/template.hbs b/cards/product-standard/template.hbs index cde2ccab7..fed2297ee 100644 --- a/cards/product-standard/template.hbs +++ b/cards/product-standard/template.hbs @@ -17,7 +17,7 @@ {{/if}} {{#if card.feedback}} - {{> thumbsfeedback card cardType="HitchhikerProductStandard"}} + {{> thumbsfeedback card cardType="HitchhikerProductStandard" feedbackSubmitted=feedbackSubmitted}} {{/if}} diff --git a/cards/professional-location/template.hbs b/cards/professional-location/template.hbs index 734346a8e..5282ca995 100644 --- a/cards/professional-location/template.hbs +++ b/cards/professional-location/template.hbs @@ -22,7 +22,7 @@
{{> ctas }} {{#if card.feedback}} - {{> thumbsfeedback card cardType="HitchhikerProfessionalLocation"}} + {{> thumbsfeedback card cardType="HitchhikerProfessionalLocation" feedbackSubmitted=feedbackSubmitted}} {{/if}}
diff --git a/cards/professional-standard/template.hbs b/cards/professional-standard/template.hbs index 296e3e9f7..9e4761878 100644 --- a/cards/professional-standard/template.hbs +++ b/cards/professional-standard/template.hbs @@ -12,7 +12,7 @@
{{> ctas }} {{#if card.feedback}} - {{> thumbsfeedback card cardType="HitchhikerProfessionalStandard"}} + {{> thumbsfeedback card cardType="HitchhikerProfessionalStandard" feedbackSubmitted=feedbackSubmitted}} {{/if}}
diff --git a/cards/standard/template.hbs b/cards/standard/template.hbs index 366ec5fa1..74bdd1164 100644 --- a/cards/standard/template.hbs +++ b/cards/standard/template.hbs @@ -10,7 +10,7 @@
{{> ctas }} {{#if card.feedback}} - {{> thumbsfeedback card cardType="HitchhikerStandard"}} + {{> thumbsfeedback card cardType="HitchhikerStandard" feedbackSubmitted=feedbackSubmitted}} {{/if}}
diff --git a/directanswercards/allfields-standard/template.hbs b/directanswercards/allfields-standard/template.hbs index 6adeafdb9..5789306ad 100644 --- a/directanswercards/allfields-standard/template.hbs +++ b/directanswercards/allfields-standard/template.hbs @@ -14,7 +14,7 @@ {{> cta CTA linkTarget=linkTarget}} {{/if}} - {{> thumbsfeedback cardType="HitchhikerAllFieldsStandard"}} + {{> thumbsfeedback cardType="HitchhikerAllFieldsStandard" directAnswer=true}} {{#*inline 'icon'}} diff --git a/directanswercards/card_component.js b/directanswercards/card_component.js index 851d27e95..18c4f026e 100644 --- a/directanswercards/card_component.js +++ b/directanswercards/card_component.js @@ -5,7 +5,7 @@ BaseDirectAnswerCard = typeof (BaseDirectAnswerCard) !== 'undefined' ? BaseDirectAnswerCard["{{componentName}}"] = class extends ANSWERS.Component { constructor(config = {}, systemConfig = {}) { super(config, systemConfig); - let data = config.data || {}; + const data = config.data || {}; this.type = data.type || ''; this.answer = data.answer || {}; this.snippet = this.answer.snippet || {}; @@ -40,17 +40,24 @@ BaseDirectAnswerCard["{{componentName}}"] = class extends ANSWERS.Component { } onMount() { - let feedbackFormSelector = '.js-HitchhikerDirectAnswerCard-feedbackForm'; + this.addFeedbackListeners(); + + const rtfElement = this._container.querySelector('.js-yxt-rtfValue'); + rtfElement && rtfElement.addEventListener('click', e => this._handleRtfClickAnalytics(e)); + } + + addFeedbackListeners() { + const feedbackFormSelector = '.js-HitchhikerDirectAnswerCard-feedbackForm'; let feedbackFormEl = this._container.querySelector(feedbackFormSelector); if (feedbackFormEl) { // For WCAG compliance, the feedback should be a submittable form feedbackFormEl.addEventListener('submit', (e) => { - let formTargetEl = e.target; - let checkedValue = formTargetEl.querySelector('input:checked').value === 'true'; + const formTargetEl = e.target; + const isGood = formTargetEl.querySelector('input:checked').value === 'true'; - this.reportQuality(checkedValue); + this.reportQuality(isGood); this.updateState({ - 'feedbackSubmitted': true + feedbackSubmitted: true }); }); @@ -62,42 +69,11 @@ BaseDirectAnswerCard["{{componentName}}"] = class extends ANSWERS.Component { if (input) { input.checked = true; } - this._triggerCustomEvent(feedbackFormSelector, 'submit'); + HitchhikerJS.DOM.triggerCustomEvent(this._container, feedbackFormSelector, 'submit'); }); }); } } - - const rtfElement = this._container.querySelector('.js-yxt-rtfValue'); - rtfElement && rtfElement.addEventListener('click', e => this._handleRtfClickAnalytics(e)); - } - - /** - * Triggers the event passed in dispatched from the given selector - * @param {string} selector selector to dispatch event from - * @param {string} event event to fire - * @param {Object} settings additional settings - */ - _triggerCustomEvent(selector, event, settings) { - let e = this._customEvent(event, settings); - this._container.querySelector(selector).dispatchEvent(e); - } - - /** - * _customEvent is an event constructor polyfill - * @param {string} event event to fire - * @param {Object} settings additional settings - */ - _customEvent(event, settings) { - const _settings = { - bubbles: true, - cancelable: true, - detail: null, - ...settings - }; - const evt = document.createEvent('CustomEvent'); - evt.initCustomEvent(event, _settings.bubbles, _settings.cancelable, _settings.detail); - return evt; } /** @@ -118,7 +94,10 @@ BaseDirectAnswerCard["{{componentName}}"] = class extends ANSWERS.Component { const eventType = isGood === true ? EventTypes.THUMBS_UP : EventTypes.THUMBS_DOWN; const event = new ANSWERS.AnalyticsEvent(eventType) .addOptions({ - 'directAnswer': true + directAnswer: true, + verticalKey: this.verticalConfigId, + searcher: 'UNIVERSAL', + entityId: this.associatedEntityId }); this.analyticsReporter.report(event); diff --git a/directanswercards/documentsearch-standard/template.hbs b/directanswercards/documentsearch-standard/template.hbs index a80399571..b1e2db18f 100644 --- a/directanswercards/documentsearch-standard/template.hbs +++ b/directanswercards/documentsearch-standard/template.hbs @@ -9,7 +9,7 @@ {{> cta CTA linkTarget=linkTarget}} - {{> thumbsfeedback cardType="HitchhikerDocumentSearchStandard"}} + {{> thumbsfeedback cardType="HitchhikerDocumentSearchStandard" directAnswer=true}} {{#*inline 'title'}} diff --git a/directanswercards/multilang-allfields-standard/template.hbs b/directanswercards/multilang-allfields-standard/template.hbs index 07b87d36b..ff5cf86ea 100644 --- a/directanswercards/multilang-allfields-standard/template.hbs +++ b/directanswercards/multilang-allfields-standard/template.hbs @@ -14,7 +14,7 @@ {{> cta CTA linkTarget=linkTarget}} {{/if}} - {{> thumbsfeedback cardType="HitchhikerAllFieldsStandard"}} + {{> thumbsfeedback cardType="HitchhikerAllFieldsStandard" directAnswer=true}} {{#*inline 'icon'}} diff --git a/static/js/HitchhikerJS.js b/static/js/HitchhikerJS.js index 65554705d..df27c3791 100644 --- a/static/js/HitchhikerJS.js +++ b/static/js/HitchhikerJS.js @@ -41,3 +41,6 @@ import AnswersExperience from './answers-experience'; window.AnswersExperience = new AnswersExperience(runtimeConfig); export * from './video-apis'; + +import DOM from './dom'; +export { DOM }; \ No newline at end of file diff --git a/static/js/dom.js b/static/js/dom.js new file mode 100644 index 000000000..168e4d32b --- /dev/null +++ b/static/js/dom.js @@ -0,0 +1,30 @@ +export default class DOM { + /** + * Triggers the event passed in dispatched from the given selector + * @param {HTMLElement} container container to select from + * @param {string} selector selector to dispatch event from + * @param {string} event event to fire + * @param {Object} settings additional settings + */ + static triggerCustomEvent(container, selector, event, settings) { + const e = this.customEvent(event, settings); + container.querySelector(selector).dispatchEvent(e); + } + + /** + * _customEvent is an event constructor polyfill + * @param {string} event event to fire + * @param {Object} settings additional settings + */ + static customEvent(event, settings) { + const _settings = { + bubbles: true, + cancelable: true, + detail: null, + ...settings + }; + const evt = document.createEvent('CustomEvent'); + evt.initCustomEvent(event, _settings.bubbles, _settings.cancelable, _settings.detail); + return evt; + } +} \ No newline at end of file diff --git a/static/scss/answers/directanswercards/allfields-standard.scss b/static/scss/answers/directanswercards/allfields-standard.scss index 5d9bef815..00e6448d2 100644 --- a/static/scss/answers/directanswercards/allfields-standard.scss +++ b/static/scss/answers/directanswercards/allfields-standard.scss @@ -97,12 +97,14 @@ } - &-feedbackWrapper + &-feedbackWrapper, + &-footerWrapper { background-color: var(--yxt-direct-answer-footer-background-color); } - &-feedback + &-feedbackContent, + &-footer { display: flex; justify-content: flex-end; @@ -113,7 +115,8 @@ padding-bottom: 8px; } - &-feedbackText + &-feedbackText, + &-footerText { display: inline; margin-right: 8px; @@ -130,6 +133,46 @@ display: flex; } + &-thumbs + { + display: flex; + margin: 0; + } + + &-thumbUpIcon + { + transform: rotate(180deg); + } + + &-thumbUpIcon, + &-thumbDownIcon + { + display: inline-flex; + color: var(--yxt-color-text-secondary); + } + + &-thumb + { + display: inline; + flex-shrink: 0; + cursor: pointer; + font-size: 18px; + + & + & + { + margin-left: 8px; + } + } + + &-fieldset + { + display: inline; + margin-inline-start: 2px; + margin-inline-end: 2px; + line-height: 0; + min-inline-size: min-content; + } + &-fieldValueLink { @include Link; @@ -163,6 +206,15 @@ list-style-position: inside; } + &-feedback + { + @include Text( + $color: var(--yxt-color-text-neutral), + ); + background-color: var(--yxt-color-background-highlight); + display: none; + } + &-viewMore { @include Text( diff --git a/static/scss/answers/directanswercards/documentsearch-standard.scss b/static/scss/answers/directanswercards/documentsearch-standard.scss index 406a7a801..665821450 100644 --- a/static/scss/answers/directanswercards/documentsearch-standard.scss +++ b/static/scss/answers/directanswercards/documentsearch-standard.scss @@ -91,7 +91,8 @@ background-color: var(--yxt-direct-answer-footer-background-color); } - &-feedback + &-feedbackContent, + &-footer { display: flex; justify-content: flex-end; @@ -102,7 +103,8 @@ padding-bottom: 8px; } - &-feedbackText + &-feedbackText, + &-footerText { display: inline; margin-right: 8px; @@ -119,6 +121,55 @@ display: flex; } + &-thumbs + { + display: flex; + margin: 0; + } + + &-thumbUpIcon + { + transform: rotate(180deg); + } + + &-thumbUpIcon, + &-thumbDownIcon + { + display: inline-flex; + color: var(--yxt-color-text-secondary); + } + + &-thumb + { + display: inline; + flex-shrink: 0; + cursor: pointer; + font-size: 18px; + + & + & + { + margin-left: 8px; + } + } + + &-fieldset + { + display: inline; + margin-inline-start: 2px; + margin-inline-end: 2px; + line-height: 0; + min-inline-size: min-content; + } + + &-feedback + { + @include Text( + $color: var(--yxt-color-text-neutral), + ); + background-color: var(--yxt-color-background-highlight); + display: none; + } + &-viewMore { @include Text(