Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Announcements: allow user to close feature announcements #377

Merged
merged 2 commits into from
Jun 12, 2024
Merged

Announcements: allow user to close feature announcements #377

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9d934de
Announcements: allow user to close feature announcements
humitos Jun 11, 2024
0dbffb7
Add the hide button logic to all the announcements
humitos Jun 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion readthedocsext/theme/static/readthedocsext/theme/js/site.js
View file
Open in desktop

Large diffs are not rendered by default.

31 changes: 17 additions & 14 deletions readthedocsext/theme/templates/projects/partials/dashboard/traffic-analytics.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,24 @@
{% load i18n %}

{% with "https://docs.readthedocs.io/page/analytics.html" as url %}
<div class="ui card">
<div class="content">
<a class="header" target="_blank" href="{{ url }}">{% trans "Prioritize your most-read pages" %}</a>
<div class="description">
{% blocktrans %}
Use <strong>traffic analytics</strong> to know <em>which</em> documents your users are reading.
This allows you to understand how your documentation is being used and learn more about your audience.
Then you can prioritize your efforts on expanding and updating pages people are reading most.
{% endblocktrans %}
<div data-bind="using: new ProjectAnnouncementView('traffic-analytics')">
<div class="ui card" data-bind="visible: !closed()">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think what you have here might be prone to flashing content to the user -- the content will start visible and hide once the JS loads (and technically display again if the user hasn't dismissed?). I might be wrong here though, you can test by slowing down your network connection in Firefox.

There is a helper class that you can use for these sorts of cases. It just applies display: none, but avoids flashing the content to the user on load, before the JS hides the element. It uses some inverted logic of sort though, which would look like: remove the hidden class if the notification should be visible.

There are some examples of this in the templates, but I think it is something like this:

    <div class="ui card ko hidden" data-bind="css: {hidden: closed}">

Copy link
Member Author

@humitos humitos Jun 11, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes. Actually, I have this exact issue and I commented on Slack about this. It works better with your suggestion 👍🏼

<div class="content">
<i class="fa-solid fa-xmark right floated close icon" data-bind="click: close_announcement"></i>
<a class="header" target="_blank" href="{{ url }}">{% trans "Prioritize your most-read pages" %}</a>
<div class="description">
{% blocktrans %}
Use <strong>traffic analytics</strong> to know <em>which</em> documents your users are reading.
This allows you to understand how your documentation is being used and learn more about your audience.
Then you can prioritize your efforts on expanding and updating pages people are reading most.
{% endblocktrans %}
</div>
</div>
<div class="ui extra content">
<a class="ui small primary fluid basic button" target="_blank" href="{{ url }}">
{% trans "Enable analytics" %}
</a>
</div>
</div>
<div class="ui extra content">
<a class="ui small primary fluid basic button" target="_blank" href="{{ url }}">
{% trans "Enable analytics" %}
</a>
</div>
</div>
{% endwith %}
23 changes: 23 additions & 0 deletions src/js/project/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -237,3 +237,26 @@ export class VersionListItemView extends APIListItemView {
}
}
Registry.add_view(VersionListItemView);

export class ProjectAnnouncementView {
static view_name = "ProjectAnnouncementView";

constructor(cache_key) {
this.cache_key = cache_key;
this.prefix_key = "announcements";
this.storage_key = `${this.prefix_key}.${this.cache_key}`;
this.closed = ko.observable();
const cached_value = localStorage.getItem(this.storage_key);
if (cached_value) {
this.closed(true);
} else {
this.closed(false);
}
}

close_announcement() {
this.closed(true);
localStorage.setItem(this.storage_key, true);
}
}
Registry.add_view(ProjectAnnouncementView);