Skip to content

Commit

Permalink
Merge pull request #28 from PierreDillard/feedback-enhance
Browse files Browse the repository at this point in the history 
Improve feedback widget UX by adding auto-hide behavior
  • Loading branch information
@nlsdvl
nlsdvl authored Nov 21, 2024
2 parents f04b70c + 7de5eca commit d1486c0
Show file tree
Hide file tree
Showing 6 changed files with 320 additions and 148 deletions.
95 changes: 45 additions & 50 deletions docs/javascripts/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -103,71 +103,66 @@ function handlePopState() {
}

// Feedback
function initializeFeedback(selector) {
try {
const feedback = document.querySelector(selector);
if (!feedback) return;

const buttons = feedback.querySelectorAll('.md-feedback__icon:not(.md-feedback__contribute)');
const note = getFeedbackNote(feedback);
// Feedback State Management
const FeedbackState = {
INITIAL: 'initial',
SUBMITTED: 'submitted'
};

buttons.forEach(button => {
button.addEventListener('click', () => handleFeedbackClick(button, buttons, note));
function initializeFeedback(selector) {
const feedback = document.querySelector(selector);
if (!feedback) return;

const buttons = feedback.querySelectorAll('.md-feedback__icon:not(.md-feedback__contribute)');
const feedbackContainer = feedback.querySelector('.md-feedback__inner');
const feedbackNote = feedback.querySelector('.md-feedback__note');
let currentState = FeedbackState.INITIAL;

buttons.forEach(button => {
button.addEventListener('click', () => {
handleFeedbackClick(button, buttons, feedbackContainer, feedbackNote);
initializeContributeIcon(feedback);
});
});

initializeContributeIcon(feedback);
} catch (error) {
console.error("Error in initializeFeedback:", error);
}
}

function getFeedbackNote(feedback) {
try {
let note = feedback.querySelector('.md-feedback__note');
if (!note) {
note = document.createElement('div');
note.className = 'md-feedback__note';
note.hidden = true;
feedback.querySelector('.md-feedback__inner').appendChild(note);
}
return note;
} catch (error) {
console.error("Error in getFeedbackNote:", error);
return null;
}
}

function handleFeedbackClick(button, allButtons, note) {
try {
function handleFeedbackClick(button, allButtons, container, note) {
const data = button.getAttribute('data-md-value');
const url = `/${window.location.pathname}`;
const title = document.querySelector('.md-content__inner h1')?.textContent || '';

console.log(`Feedback: ${data} for page ${url} (${title})`);

note.textContent = `Thank you for your feedback!`;
note.hidden = false;



// Disable all buttons
allButtons.forEach(btn => btn.disabled = true);
} catch (error) {
console.error("Error in handleFeedbackClick:", error);

// Show thank you message using existing note element
if (note) {
note.textContent = 'Thank you for your feedback!';
note.hidden = false;
}

// Fade out and hide feedback after delay
setTimeout(() => {
feedback.classList.add('md-feedback--fade-out');
setTimeout(() => {
feedback.style.display = 'none';
}, 100);
}, 1000);
}
}

function initializeContributeIcon(feedback) {
try {
const contributeIcon = feedback.querySelector('.md-feedback__contribute');
const contributeNote = feedback.querySelector('.md-feedback__contribute-note');
const contributeIcon = feedback.querySelector('.md-feedback__contribute');
const contributeNote = feedback.querySelector('.md-feedback__contribute-note');

if (contributeIcon && contributeNote) {
contributeIcon.addEventListener('mouseenter', () => contributeNote.hidden = false);
contributeIcon.addEventListener('mouseleave', () => contributeNote.hidden = true);
}
} catch (error) {
console.error("Error in initializeContributeIcon:", error);
if (contributeIcon && contributeNote) {
contributeIcon.addEventListener('mouseenter', () => contributeNote.hidden = false);
contributeIcon.addEventListener('mouseleave', () => contributeNote.hidden = true);
}
}




// Collapse
function handleSearchPageCollapse() {
try {
Expand Down
2 changes: 1 addition & 1 deletion docs/stylesheets/extra.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -115,7 +115,7 @@

.md-nav--secondary {
flex: 1;
margin-bottom: 5rem;
margin-bottom: 5.5rem;
}

.keywords-cloud-container {
Expand Down
43 changes: 34 additions & 9 deletions docs/stylesheets/feedback.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,24 +3,50 @@
}
.md-feedback,
.md-nav__feedback {
padding: 1rem;
margin-top: 1rem;
border-top: 1px solid var(--md-default-fg-color--lightest);
padding: 0.1rem;

}

.md-feedback p,
.md-nav__feedback p {
margin: 0 0 0.5rem;
margin: 0 0 0.1rem;
font-weight: 700;
font-size: 0.8rem;
font-size: 0.7rem;
color: var(--md-default-fg-color--light);
}

.md-feedback__inner,
.md-nav__feedback .md-feedback__inner {
display: flex;
flex-direction: column;
align-items: flex-start;
align-items: center;
}
.md-feedback__inner--fade-out {
opacity: 0;
transform: translateY(10px);
transition: opacity 0.2s ease, transform 0.2s ease;
}




.feedback-success {
color: #45a049;
}

.feedback-neutral {
color: #666;
}

.md-feedback--fade-out {
opacity: 0;
transform: translateY(-10px);
transition: opacity 0.3s ease, transform 0.3s ease;
}

.feedback-text {
font-size: 12px;
color: #666;
}

.md-feedback__list,
Expand All @@ -33,7 +59,6 @@
.md-feedback__icon,
.md-nav__feedback .md-feedback__icon {
margin-right: 0.5rem;
padding: 0.25rem;
background: none;
border: none;
cursor: pointer;
Expand Down Expand Up @@ -69,9 +94,9 @@
display: block;
position: fixed;
bottom: 4%;

background-color: var(--md-default-bg-color);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
0 4px 6px -2px rgba(0, 0, 0, 0.05);

border-radius: 0.2rem;
}

Expand Down
118 changes: 87 additions & 31 deletions overrides/base.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -206,40 +206,96 @@
{% if config.extra.analytics %}
{% set feedback = config.extra.analytics.feedback %}
{% if feedback %}
<div class="md-nav__feedback md-nav__feedback--desktop">
<p class="feedback-title">{{ feedback.title }}</p>
<div class="md-feedback__inner">
<div class="md-feedback__list">
{% for rating in feedback.ratings %}
<button class="md-feedback__icon md-icon" title="{{ rating.name }}" data-md-value="{{ rating.data }}">
{% include ".icons/" ~ rating.icon ~ ".svg" %}
</button>
{% endfor %}
<a href="https://github.com/gpac/wiki/issues" class="md-feedback__icon md-icon md-feedback__contribute" title="Contribute to this page" target="_blank">
{% include ".icons/material/plus-circle.svg" %}
</a>
<div class="md-nav__feedback md-nav__feedback--desktop">
<form class="md-feedback" name="feedback" hidden>
<fieldset>
<legend class="md-feedback__title">
{{ feedback.title }}
</legend>
<div class="md-feedback__inner">
<div class="md-feedback__list">
{% for rating in feedback.ratings %}
<button
class="md-feedback__icon md-icon"
type="submit"
title="{{ rating.name }}"
data-md-value="{{ rating.data }}"
>
{% include ".icons/" ~ rating.icon ~ ".svg" %}
</button>
{% endfor %}
<a href="https://github.com/gpac/wiki/issues"
class="md-feedback__icon md-icon md-feedback__contribute"
title="Contribute to this page"
target="_blank"
>
{% include ".icons/material/plus-circle.svg" %}
</a>
</div>
<div class="md-feedback__note">
{% for rating in feedback.ratings %}
<div data-md-value="{{ rating.data }}" hidden>
{{ rating.note }}
{% if not rating.note %}
Thanks for your feedback!
{% endif %}
</div>
{% endfor %}
<div class="md-feedback__contribute-note" hidden>
Contribute to improve this page
</div>
</div>
</div>
<div class="md-feedback__note" hidden></div>
</div>
</div>
<div class="md-feedback md-feedback--mobile">
<p>{{ feedback.title }}</p>
<div class="md-feedback__inner">
<div class="md-feedback__list">
{% for rating in feedback.ratings %}
<button class="md-feedback__icon md-icon" title="{{ rating.name }}" data-md-value="{{ rating.data }}">
{% include ".icons/" ~ rating.icon ~ ".svg" %}
</button>
{% endfor %}
<a href="https://github.com/gpac/wiki/issues" class="md-feedback__icon md-icon md-feedback__contribute" title="Contribute to this page" target="_blank">
{% include ".icons/material/plus-circle.svg" %}
</a>
</fieldset>
</form>
</div>

{# Mobile feedback section - same structure #}
<div class="md-feedback md-feedback--mobile">
<form class="md-feedback" name="feedback" hidden>
<fieldset>
<legend class="md-feedback__title">
{{ feedback.title }}
</legend>
<div class="md-feedback__inner">
<div class="md-feedback__list">
{% for rating in feedback.ratings %}
<button
class="md-feedback__icon md-icon"
type="submit"
title="{{ rating.name }}"
data-md-value="{{ rating.data }}"
>
{% include ".icons/" ~ rating.icon ~ ".svg" %}
</button>
{% endfor %}
<a href="https://github.com/gpac/wiki/issues"
class="md-feedback__icon md-icon md-feedback__contribute"
title="Contribute to this page"
target="_blank"
>
{% include ".icons/material/plus-circle.svg" %}
</a>
</div>
<div class="md-feedback__note">
{% for rating in feedback.ratings %}
<div data-md-value="{{ rating.data }}" hidden>
{{ rating.note }}
{% if not rating.note %}
Thanks for your feedback!
{% endif %}
</div>
{% endfor %}
<div class="md-feedback__contribute-note" hidden>
Contribute to improve this page
</div>
</div>
</div>
<div class="md-feedback__note" hidden></div>
</div>
</div>
{% endif %}
</fieldset>
</form>
</div>
{% endif %}
{% endif %}
</div>
{% endif %}
{% endblock %}
Expand Down
Loading

0 comments on commit d1486c0

Please sign in to comment.