From 1dc739e5eb419bb12c27841bc834d64f6c292621 Mon Sep 17 00:00:00 2001 From: Stefano Ottolenghi Date: Wed, 20 Sep 2023 14:36:34 +0200 Subject: [PATCH 01/22] First stab --- src/css/feedback.css | 2 +- src/js/11-feedback.js | 125 ++++++++++++++++++++++++++++++-------- src/partials/article.hbs | 4 -- src/partials/feedback.hbs | 4 +- src/partials/nav.hbs | 1 + 5 files changed, 102 insertions(+), 34 deletions(-) diff --git a/src/css/feedback.css b/src/css/feedback.css index 8cfc1608..4629c17c 100644 --- a/src/css/feedback.css +++ b/src/css/feedback.css @@ -1,7 +1,7 @@ .feedback { position: fixed; bottom: 0; - right: 2rem; + left: 2rem; border-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem; background: var(--color-blue-100); diff --git a/src/js/11-feedback.js b/src/js/11-feedback.js index 5fb81ef8..b3f8d287 100644 --- a/src/js/11-feedback.js +++ b/src/js/11-feedback.js @@ -4,6 +4,15 @@ const { getCookie } = require('./modules/cookies') ;(function () { 'use strict' + let journey = JSON.parse(localStorage.getItem('userJourney')) + if (journey == null) journey = [] + journey.push({ + 'url': window.location.href, + 'title': document.title, + 'landTime': Math.round(Date.now()/1000), + }) + localStorage.setItem('userJourney', JSON.stringify(journey)) + var url = 'https://uglfznxroe.execute-api.us-east-1.amazonaws.com/dev/Feedback' var feedback = document.querySelector('.feedback') if (!feedback) return @@ -11,13 +20,13 @@ const { getCookie } = require('./modules/cookies') var original = feedback.innerHTML var edit = '' - var editLink = document.querySelector('.edit-this-page a') + /*var editLink = document.querySelector('.edit-this-page a') if (editLink) { edit = ' Edit this page' - } + }*/ - var sendFeedback = function (helpful, reason, moreInformation) { + var sendRequest = function (parameters) { const identity = getCookie('neo_identity') const gid = getCookie('_gid') const uetsid = getCookie('_uetsid') @@ -30,7 +39,6 @@ const { getCookie } = require('./modules/cookies') var body = 'project=' + encodeURIComponent(project) body += '&url=' + encodeURIComponent(window.location.href) - body += '&helpful=' + helpful.toString() if (identity) { body += '&identity=' + identity @@ -42,36 +50,77 @@ const { getCookie } = require('./modules/cookies') body += '&uetsid=' + uetsid } - if (!helpful) { - body += '&reason=' + encodeURIComponent(reason) - - if (moreInformation) { - body += '&moreInformation=' + encodeURIComponent(moreInformation) - } + for (const [paramKey, paramVal] of Object.entries(parameters)) { + body += '&' + paramKey + '=' + encodeURIComponent(paramVal) } - fetch(url, { + body += '&userJourney=' + encodeURIComponent(localStorage.getItem('userJourney').toString()) + + console.log(body) + /*fetch(url, { method: 'post', headers: { 'Content-Type': 'application/x-www-form-urlencoded', }, body: body, - }) + })*/ } var isHelpful = function () { - sendFeedback(true) - feedback.classList.add('positive') - feedback.innerHTML = '

Thank you for your feedback!

' + feedback.innerHTML = `
+
+

Would you like to share some feedback?

+ + + + +
+
+ + +
+
+ + +
+
+ ` + + feedback.querySelector('.cancel').addEventListener('click', function (e) { + e.preventDefault() + reset() + }) + + feedback.querySelector('.primary').addEventListener('click', function (e) { + e.preventDefault() + + var moreInformation = feedback.querySelector('textarea[name="more-information"]').value + + sendRequest({ + 'helpful': true, + 'moreInformation': moreInformation, + }) + localStorage.removeItem('userJourney') + feedback.innerHTML = '

Thank you for your feedback!

' + setTimeout(() => {fadeOut(feedback)}, 2000) + + if (window.mixpanel) { + window.mixpanel.track('DOCS_FEEDBACK_POSITIVE', { + pathname: window.location.origin + window.location.pathname, + search: window.location.search, + hash: window.location.hash, + }) + } + }) } var isUnhelpful = function () { feedback.classList.add('negative') feedback.innerHTML = `
-

We’re sorry to hear that. How could we improve this page?

+

How could we improve this page?

@@ -91,23 +140,22 @@ const { getCookie } = require('./modules/cookies')
-
-
+
` var thankyou = `
-

Thank you for your feedback!

-

We will take this information into account while updating our documentation.

+

Thank you!

+

We will consider your feedback while updating our documentation.

` - if (editLink) { + /*if (editLink) { thankyou += '

You can also help us by ' + edit.replace('Edit', 'editing') + '.

' - } + }*/ feedback.querySelector('.cancel').addEventListener('click', function (e) { e.preventDefault() @@ -132,8 +180,14 @@ const { getCookie } = require('./modules/cookies') var reason = feedback.querySelector('input[name="specific"]:checked').value var moreInformation = feedback.querySelector('textarea[name="more-information"]').value - sendFeedback(false, reason, moreInformation) + sendRequest({ + 'helpful': false, + 'reason': reason, + 'moreInformation': moreInformation, + }) feedback.innerHTML = thankyou + localStorage.removeItem('userJourney') + setTimeout(() => {fadeOut(feedback)}, 2000) if (window.mixpanel) { window.mixpanel.track('DOCS_FEEDBACK_POSITIVE', { @@ -144,13 +198,17 @@ const { getCookie } = require('./modules/cookies') } }) - feedback.querySelector('.secondary').addEventListener('click', function (e) { + /*feedback.querySelector('.secondary').addEventListener('click', function (e) { e.preventDefault() var reason = feedback.querySelector('input[name="specific"]:checked').value var moreInformation = feedback.querySelector('textarea[name="more-information"]').value - sendFeedback(false, reason, moreInformation) + sendRequest({ + 'helpful': false, + 'reason': reason, + 'moreInformation': moreInformation, + }) feedback.innerHTML = thankyou if (window.mixpanel) { @@ -160,7 +218,7 @@ const { getCookie } = require('./modules/cookies') hash: window.location.hash, }) } - }) + })*/ } var reset = function () { @@ -202,3 +260,16 @@ const { getCookie } = require('./modules/cookies') reset() })() + +function fadeOut(element) { + var op = 1; // initial opacity + var timer = setInterval(function () { + if (op <= 0.1){ + clearInterval(timer); + element.style.display = 'none'; + } + element.style.opacity = op; + element.style.filter = 'alpha(opacity=' + op * 100 + ")"; + op -= op * 0.1; + }, 50); +} diff --git a/src/partials/article.hbs b/src/partials/article.hbs index 31af1c62..56948f0c 100644 --- a/src/partials/article.hbs +++ b/src/partials/article.hbs @@ -97,9 +97,5 @@ If you typed the URL of this page manually, please double check that you entered {{> comments}} {{#if (eq page.layout 'training')}} {{> training-help}} -{{else}} - {{#unless page.attributes.disablefeedback}} - {{> feedback}} - {{/unless}} {{/if}} diff --git a/src/partials/feedback.hbs b/src/partials/feedback.hbs index e9c14201..9945fd6d 100644 --- a/src/partials/feedback.hbs +++ b/src/partials/feedback.hbs @@ -1,6 +1,6 @@
-

Was this page helpful?

+

Helpful?

--}} -
\ No newline at end of file +
diff --git a/src/partials/nav.hbs b/src/partials/nav.hbs index b827b3f4..6a0a8ce4 100644 --- a/src/partials/nav.hbs +++ b/src/partials/nav.hbs @@ -5,6 +5,7 @@ {{> nav-selectors}} {{> nav-menu}} + {{> feedback}} From 8fed75f7877dcc43e9be963924d0c67a9042258d Mon Sep 17 00:00:00 2001 From: Stefano Ottolenghi Date: Wed, 20 Sep 2023 14:36:51 +0200 Subject: [PATCH 02/22] . --- src/js/11-feedback.js | 38 +++++++++++++++++++------------------- 1 file changed, 19 insertions(+), 19 deletions(-) diff --git a/src/js/11-feedback.js b/src/js/11-feedback.js index b3f8d287..05fe12a0 100644 --- a/src/js/11-feedback.js +++ b/src/js/11-feedback.js @@ -7,9 +7,9 @@ const { getCookie } = require('./modules/cookies') let journey = JSON.parse(localStorage.getItem('userJourney')) if (journey == null) journey = [] journey.push({ - 'url': window.location.href, - 'title': document.title, - 'landTime': Math.round(Date.now()/1000), + url: window.location.href, + title: document.title, + landTime: Math.round(Date.now() / 1000), }) localStorage.setItem('userJourney', JSON.stringify(journey)) @@ -99,12 +99,12 @@ const { getCookie } = require('./modules/cookies') var moreInformation = feedback.querySelector('textarea[name="more-information"]').value sendRequest({ - 'helpful': true, - 'moreInformation': moreInformation, + helpful: true, + moreInformation: moreInformation, }) localStorage.removeItem('userJourney') feedback.innerHTML = '

Thank you for your feedback!

' - setTimeout(() => {fadeOut(feedback)}, 2000) + setTimeout(() => { fadeOut(feedback) }, 2000) if (window.mixpanel) { window.mixpanel.track('DOCS_FEEDBACK_POSITIVE', { @@ -181,13 +181,13 @@ const { getCookie } = require('./modules/cookies') var moreInformation = feedback.querySelector('textarea[name="more-information"]').value sendRequest({ - 'helpful': false, - 'reason': reason, - 'moreInformation': moreInformation, + helpful: false, + reason: reason, + moreInformation: moreInformation, }) feedback.innerHTML = thankyou localStorage.removeItem('userJourney') - setTimeout(() => {fadeOut(feedback)}, 2000) + setTimeout(() => { fadeOut(feedback) }, 2000) if (window.mixpanel) { window.mixpanel.track('DOCS_FEEDBACK_POSITIVE', { @@ -261,15 +261,15 @@ const { getCookie } = require('./modules/cookies') reset() })() -function fadeOut(element) { - var op = 1; // initial opacity +function fadeOut (element) { + var op = 1 // initial opacity var timer = setInterval(function () { - if (op <= 0.1){ - clearInterval(timer); - element.style.display = 'none'; + if (op <= 0.1) { + clearInterval(timer) + element.style.display = 'none' } - element.style.opacity = op; - element.style.filter = 'alpha(opacity=' + op * 100 + ")"; - op -= op * 0.1; - }, 50); + element.style.opacity = op + element.style.filter = 'alpha(opacity=' + op * 100 + ')' + op -= op * 0.1 + }, 50) } From aeca8872dc5d77c29d549f1db4a7983c723060f2 Mon Sep 17 00:00:00 2001 From: Stefano Ottolenghi Date: Fri, 6 Oct 2023 13:57:50 +0200 Subject: [PATCH 03/22] Move to left --- src/css/feedback.css | 7 ++++--- src/css/vars.css | 6 ++++-- src/partials/feedback.hbs | 2 +- 3 files changed, 9 insertions(+), 6 deletions(-) diff --git a/src/css/feedback.css b/src/css/feedback.css index 4629c17c..89fa9d70 100644 --- a/src/css/feedback.css +++ b/src/css/feedback.css @@ -1,16 +1,17 @@ .feedback { position: fixed; bottom: 0; - left: 2rem; + left: 1rem; border-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem; background: var(--color-blue-100); color: var(--color-blue-800); padding: 0.5rem 1rem; - width: 320px; + width: calc(var(--nav-width) - 2rem); font-size: 0.8rem; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); z-index: 1000; + height: var(--feedback-height); } .feedback.negative { @@ -159,7 +160,7 @@ max-width: var(--doc-max-width); min-width: 0; right: auto; - width: auto; + width: calc(var(--nav-width) - 2rem); box-shadow: none; margin-bottom: 2rem; } diff --git a/src/css/vars.css b/src/css/vars.css index 8dbb7d0d..546ed140 100644 --- a/src/css/vars.css +++ b/src/css/vars.css @@ -326,8 +326,9 @@ --nav-panel-height: calc(var(--nav-height) - var(--drawer-height)); --nav-panel-height--desktop: calc( - var(--nav-height--desktop) - var(--drawer-height) - ); + var(--nav-height--desktop) - var(--drawer-height) - var(--feedback-height) - 1rem + ); /* 1rem is feedback padding */ + --nav-width: 18rem; --toc-top: calc(var(--body-top) + var(--toolbar-height)); --kb-metadata-top: calc(var(--body-top) + var(--toolbar-height)); @@ -340,6 +341,7 @@ --doc-max-width: calc(720 / var(--rem-base) * 1rem); --doc-max-width--desktop: calc(980 / var(--rem-base) * 1rem); --cheat-sheet-max-width--desktop: calc(1100 / var(--rem-base) * 1rem); + --feedback-height: 2.5rem; /* stacking */ --z-index-nav: 1; diff --git a/src/partials/feedback.hbs b/src/partials/feedback.hbs index 9945fd6d..7868e000 100644 --- a/src/partials/feedback.hbs +++ b/src/partials/feedback.hbs @@ -1,6 +1,6 @@