Enable permanently dismissing announcements

src/constants.js

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

src/js/announcements.js

@@ -0,0 +1,21 @@
+import { DISMISSED_ANNOUNCEMENTS_KEY } from "../constants";
+import { fadeOutElement } from "./utilities";
+
+export function getDismissed() {
+  let dismissed = window.localStorage.getItem(DISMISSED_ANNOUNCEMENTS_KEY);
+  if (!dismissed) {
+    dismissed = [];
+  } else {
+    dismissed = JSON.parse(dismissed);
+  }
+  return dismissed;
+}
+
+export function dismiss(announcement) {
+  if (announcement.id) {
+    const dismissed = getDismissed();
+    dismissed.push(announcement.id);
+    window.localStorage.setItem(DISMISSED_ANNOUNCEMENTS_KEY, JSON.stringify(dismissed));
+  }
+  fadeOutElement(announcement)
+}

src/js/setupListeners.js

@@ -11,8 +11,11 @@ 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 { fadeOutElement } from './utilities';
 
 export default function setupListeners() {
+  setupAnnouncements();
   setupDetailsTabs();
   setupHeaderButtons();
   setupWordForm();
@@ -34,6 +37,18 @@ 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)) {
+      fadeOutElement(announcement);
+    } else {
+      announcement.querySelector('.close-button').addEventListener('click', () => dismiss(announcement));
+    }
+  });
+}
+
 function setupDetailsTabs() {
   const tabs = document.querySelectorAll('#detailsSection nav li');
   tabs.forEach(tab => {

src/php/announcements.json

@@ -2,6 +2,7 @@
   {
     "header": "Welcome to Lexiconga 2.0!",
     "body": "<p>Lexiconga has been rewritten from the ground up!</p><p>Check the <a href=\"https://github.com/Alamantus/Lexiconga/releases\" target=\"_blank\">Updates page</a> for all the new features, or click Help to get a refresher on how to use Lexiconga!</p>",
-    "expire": "January 1, 2020"
+    "expire": "January 1, 2020",
+    "dismissId": "welcome"
   }
 ]

src/php/router.php

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