diff --git a/src/constants.js b/src/constants.js index 4ab6656..644516e 100644 --- a/src/constants.js +++ b/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'; diff --git a/src/js/announcements.js b/src/js/announcements.js new file mode 100644 index 0000000..281ec50 --- /dev/null +++ b/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) +} diff --git a/src/js/setupListeners.js b/src/js/setupListeners.js index 31be8dc..0bdc10f 100644 --- a/src/js/setupListeners.js +++ b/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 => { diff --git a/src/php/announcements.json b/src/php/announcements.json index 6aa1260..8ebb96c 100644 --- a/src/php/announcements.json +++ b/src/php/announcements.json @@ -2,6 +2,7 @@ { "header": "Welcome to Lexiconga 2.0!", "body": "

Lexiconga has been rewritten from the ground up!

Check the Updates page for all the new features, or click Help to get a refresher on how to use Lexiconga!

", - "expire": "January 1, 2020" + "expire": "January 1, 2020", + "dismissId": "welcome" } ] \ No newline at end of file diff --git a/src/php/router.php b/src/php/router.php index 404dc70..ec73357 100644 --- a/src/php/router.php +++ b/src/php/router.php @@ -75,8 +75,8 @@ switch ($view) { foreach ($announcements as $announcement) { $expire = strtotime($announcement['expire']); if (time() < $expire) { - $announcements_html .= '
- ×︎ + $announcements_html .= '
+ ×︎

' . $announcement['header'] . '

' . $announcement['body'] . '
';