Dismiss announcements with cookies that expire

This commit is contained in:
Robbie Antenesse 2019-06-07 23:03:24 -06:00 committed by Robbie Antenesse
parent 3a61d4ccc6
commit 352e6d3fc0
4 changed files with 14 additions and 17 deletions

View File

@ -66,4 +66,3 @@ export const DEFAULT_PAGE_SIZE = 50;
export const LOCAL_STORAGE_KEY = 'dictionary'; export const LOCAL_STORAGE_KEY = 'dictionary';
export const SETTINGS_KEY = 'settings'; export const SETTINGS_KEY = 'settings';
export const DISMISSED_ANNOUNCEMENTS_KEY = 'dismissedAnnouncements';

View File

@ -1,21 +1,20 @@
import { DISMISSED_ANNOUNCEMENTS_KEY } from "../constants";
import { fadeOutElement } from "./utilities"; import { fadeOutElement } from "./utilities";
import { setCookie, getCookie } from "./StackOverflow/cookie";
export function getDismissed() { export function isDismissed(announcementId) {
let dismissed = window.localStorage.getItem(DISMISSED_ANNOUNCEMENTS_KEY); let dismissed = getCookie(announcementId);
if (!dismissed) {
dismissed = []; return dismissed === 'dismissed';
} else {
dismissed = JSON.parse(dismissed);
}
return dismissed;
} }
export function dismiss(announcement) { export function dismiss(announcement) {
if (announcement.id) { if (announcement.id) {
const dismissed = getDismissed(); const expireDate = announcement.dataset.expires;
dismissed.push(announcement.id); const now = new Date();
window.localStorage.setItem(DISMISSED_ANNOUNCEMENTS_KEY, JSON.stringify(dismissed)); const expire = new Date(expireDate);
const timeDiff = Math.abs(now.getTime() - expire.getTime());
const dayDifference = Math.ceil(timeDiff / (1000 * 3600 * 24));
setCookie(announcement.id, 'dismissed', dayDifference + 1);
} }
fadeOutElement(announcement) fadeOutElement(announcement)
} }

View File

@ -11,7 +11,7 @@ import { showSearchModal, clearSearchText, checkAllPartsOfSpeechFilters, uncheck
import helpFile from '../markdown/help.md'; import helpFile from '../markdown/help.md';
import termsFile from '../markdown/terms.md'; import termsFile from '../markdown/terms.md';
import privacyFile from '../markdown/privacy.md'; import privacyFile from '../markdown/privacy.md';
import { dismiss, getDismissed } from './announcements'; import { dismiss, isDismissed } from './announcements';
import { fadeOutElement } from './utilities'; import { fadeOutElement } from './utilities';
export default function setupListeners() { export default function setupListeners() {
@ -39,9 +39,8 @@ export function setupHeaderButtons() {
function setupAnnouncements() { function setupAnnouncements() {
const announcements = document.querySelectorAll('.announcement'); const announcements = document.querySelectorAll('.announcement');
const dismissed = getDismissed();
Array.from(announcements).forEach(announcement => { Array.from(announcements).forEach(announcement => {
if (announcement.id && dismissed.includes(announcement.id)) { if (announcement.id && isDismissed(announcement.id)) {
fadeOutElement(announcement); fadeOutElement(announcement);
} else { } else {
announcement.querySelector('.close-button').addEventListener('click', () => dismiss(announcement)); announcement.querySelector('.close-button').addEventListener('click', () => dismiss(announcement));

View File

@ -75,7 +75,7 @@ switch ($view) {
foreach ($announcements as $announcement) { foreach ($announcements as $announcement) {
$expire = strtotime($announcement['expire']); $expire = strtotime($announcement['expire']);
if (time() < $expire) { if (time() < $expire) {
$announcements_html .= '<article class="announcement"' . (isset($announcement['dismissId']) ? ' id="announcement-' . $announcement['dismissId'] . '"' : '') . '> $announcements_html .= '<article class="announcement"' . (isset($announcement['dismissId']) ? ' id="announcement-' . $announcement['dismissId'] . '"' : '') . ' data-expires="' . $announcement['expire'] . '">
<a class="close-button" title="Dismiss Announcement">&times;&#xFE0E;</a> <a class="close-button" title="Dismiss Announcement">&times;&#xFE0E;</a>
<h4>' . $announcement['header'] . '</h4> <h4>' . $announcement['header'] . '</h4>
' . $announcement['body'] . ' ' . $announcement['body'] . '