Dismiss announcements with cookies that expire

This commit is contained in:
Robbie Antenesse 2019-06-07 23:03:24 -06:00
parent 2e16f5310e
commit 3e4db6cb3c
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 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 { setCookie, getCookie } from "./StackOverflow/cookie";
export function getDismissed() {
let dismissed = window.localStorage.getItem(DISMISSED_ANNOUNCEMENTS_KEY);
if (!dismissed) {
dismissed = [];
} else {
dismissed = JSON.parse(dismissed);
}
return dismissed;
export function isDismissed(announcementId) {
let dismissed = getCookie(announcementId);
return dismissed === 'dismissed';
}
export function dismiss(announcement) {
if (announcement.id) {
const dismissed = getDismissed();
dismissed.push(announcement.id);
window.localStorage.setItem(DISMISSED_ANNOUNCEMENTS_KEY, JSON.stringify(dismissed));
const expireDate = announcement.dataset.expires;
const now = new Date();
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)
}

View File

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

View File

@ -75,7 +75,7 @@ switch ($view) {
foreach ($announcements as $announcement) {
$expire = strtotime($announcement['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>
<h4>' . $announcement['header'] . '</h4>
' . $announcement['body'] . '