|
| 1 | +// Copyright (c) 2024, the Dart project authors. Please see the AUTHORS file |
| 2 | +// for details. All rights reserved. Use of this source code is governed by a |
| 3 | +// BSD-style license that can be found in the LICENSE file. |
| 4 | + |
| 5 | +import 'dart:js_interop'; |
| 6 | + |
| 7 | +import 'package:collection/collection.dart'; |
| 8 | +import 'package:web/web.dart'; |
| 9 | + |
| 10 | +import '../../web_util.dart'; |
| 11 | + |
| 12 | +/// Forget dismissed messages that are more than 2 years old |
| 13 | +late final _deadline = DateTime.now().subtract(Duration(days: 365 * 2)); |
| 14 | + |
| 15 | +/// Don't save more than 50 entries |
| 16 | +const _maxMissedMessages = 50; |
| 17 | + |
| 18 | +/// Create a dismiss widget on [element]. |
| 19 | +/// |
| 20 | +/// A `data-dismiss-target` is required, this must be a CSS selector for the |
| 21 | +/// element(s) that are to be dismissed when this widget is clicked. |
| 22 | +/// |
| 23 | +/// A `data-dismiss-message-id` is required, this must be a string identifying |
| 24 | +/// the message being dismissed. Once dismissed this identifier will be stored |
| 25 | +/// in `localStorage`. And next time this widget is instantiated with the same |
| 26 | +/// `data-dismiss-message-id` it'll be removed immediately. |
| 27 | +/// |
| 28 | +/// When in a dismissed state the `data-dismiss-target` elements will have a |
| 29 | +/// `dismissed` class added to them. If they have this class initially, it will |
| 30 | +/// be removed unless, the message has already been dismissed previously. |
| 31 | +/// |
| 32 | +/// Identifiers of dismissed messages will be stored for up to 2 years. |
| 33 | +/// No more than 50 dismissed messages are retained in `localStorage`. |
| 34 | +void create(HTMLElement element, Map<String, String> options) { |
| 35 | + final target = options['target']; |
| 36 | + if (target == null) { |
| 37 | + throw UnsupportedError('data-dismissible-target required'); |
| 38 | + } |
| 39 | + final messageId = options['message-id']; |
| 40 | + if (messageId == null) { |
| 41 | + throw UnsupportedError('data-dismissible-message-id required'); |
| 42 | + } |
| 43 | + |
| 44 | + void applyDismissed(bool enabled) { |
| 45 | + for (final e in document.querySelectorAll(target).toList()) { |
| 46 | + if (e.isA<HTMLElement>()) { |
| 47 | + final element = e as HTMLHtmlElement; |
| 48 | + if (enabled) { |
| 49 | + element.classList.add('dismissed'); |
| 50 | + } else { |
| 51 | + element.classList.remove('dismissed'); |
| 52 | + } |
| 53 | + } |
| 54 | + } |
| 55 | + } |
| 56 | + |
| 57 | + if (_dismissed.any((e) => e.id == messageId)) { |
| 58 | + applyDismissed(true); |
| 59 | + return; |
| 60 | + } else { |
| 61 | + applyDismissed(false); |
| 62 | + } |
| 63 | + |
| 64 | + void dismiss(Event e) { |
| 65 | + e.preventDefault(); |
| 66 | + |
| 67 | + applyDismissed(true); |
| 68 | + _dismissed.add(( |
| 69 | + id: messageId, |
| 70 | + date: DateTime.now(), |
| 71 | + )); |
| 72 | + _saveDismissed(); |
| 73 | + } |
| 74 | + |
| 75 | + element.addEventListener('click', dismiss.toJS); |
| 76 | +} |
| 77 | + |
| 78 | +/// LocalStorage key where we store the hashes of messages that have been |
| 79 | +/// dismissed. |
| 80 | +/// |
| 81 | +/// Data is stored on the format: `<hash>@<date>;<hash>@<date>;...` |
| 82 | +const _dismissedMessageslocalStorageKey = 'dismissed-messages'; |
| 83 | + |
| 84 | +late final _dismissed = [ |
| 85 | + ...?window.localStorage |
| 86 | + .getItem(_dismissedMessageslocalStorageKey) |
| 87 | + ?.split(';') |
| 88 | + .where((e) => e.contains('@')) |
| 89 | + .map((entry) { |
| 90 | + final [id, date, ...] = entry.split('@'); |
| 91 | + return ( |
| 92 | + id: id, |
| 93 | + date: DateTime.tryParse(date) ?? DateTime.fromMicrosecondsSinceEpoch(0), |
| 94 | + ); |
| 95 | + }).where((entry) => entry.date.isAfter(_deadline)), |
| 96 | +]; |
| 97 | + |
| 98 | +void _saveDismissed() { |
| 99 | + window.localStorage.setItem( |
| 100 | + _dismissedMessageslocalStorageKey, |
| 101 | + _dismissed |
| 102 | + .sortedBy((e) => e.date) // Sort by date |
| 103 | + .reversed // Reverse ordering to prefer newest dates |
| 104 | + .take(_maxMissedMessages) // Limit how many entries we save |
| 105 | + .map((e) => e.id + '@' + e.date.toIso8601String().split('T').first) |
| 106 | + .join(';'), |
| 107 | + ); |
| 108 | +} |
0 commit comments