- commit
- d19892fc36bfb12f989caf3c53f61898e9f2db55
- parent
- e5295892bc5f08cddcc45dd4e57b2e86f6967295
- Author
- Tobias Bengfort <tobias.bengfort@posteo.de>
- Date
- 2023-09-06 03:35
assign button events directly
Diffstat
| M | content/js/message.js | 62 | +++++++++++++++++++++++++++---------------------------------- |
1 files changed, 27 insertions, 35 deletions
diff --git a/content/js/message.js b/content/js/message.js
@@ -28,7 +28,7 @@ var autoMarkAsRead = function(e, msg) {
28 28 }, 100);
29 29
30 30 var onAction = function(event) {
31 -1 if (event.target.closest('[data-action]')) {
-1 31 if (event.target.closest('button')) {
32 32 actions.markAsRead(msg, true);
33 33 clear();
34 34 }
@@ -41,23 +41,31 @@ var autoMarkAsRead = function(e, msg) {
41 41 };
42 42 };
43 43
-1 44 var toggleDropdown = function(msg, button) {
-1 45 event.preventDefault();
-1 46 var dropdown = button.parentElement.querySelector('.dropdown');
-1 47 dropdown.classList.toggle('is-expanded');
-1 48 };
-1 49
44 50 export default function(msg, expanded) {
45 51 var h = util.h;
46 52 var _ = browser.i18n.getMessage;
47 53
48 54 var canReplyAll = msg.recipients.length + msg.ccList.length + msg.bccList.length > 1;
49 55
50 -1 var createButton = function(attrs, icon, label, labelVisible) {
51 -1 if (labelVisible) {
52 -1 return h('button', Object.assign({'type': 'button'}, attrs), [util.createIcon(icon), ' ', label]);
53 -1 } else {
54 -1 return h('button', Object.assign({'type': 'button'}, attrs), [util.createIcon(icon, label)]);
55 -1 }
-1 56 var createButton = function(attrs, action, icon, label, labelVisible) {
-1 57 var content = labelVisible ? [util.createIcon(icon), ' ', label] : [util.createIcon(icon, label)];
-1 58 var button = h('button', Object.assign({'type': 'button'}, attrs), content);
-1 59 button.addEventListener('click', event => {
-1 60 event.preventDefault();
-1 61 action(msg, button);
-1 62 });
-1 63 return button;
56 64 };
57 65
58 66 var e = h('article', {'class': expanded ? 'message is-expanded' : 'message', 'id': `msg-${msg.id}`, 'tabindex': -1}, [
59 67 h('header', {'class': 'message__header'}, [
60 -1 createButton({'class': 'star', 'aria-pressed': msg.flagged, 'data-action': 'toggleFlagged'}, 'star', _('star')),
-1 68 createButton({'class': 'star', 'aria-pressed': msg.flagged}, actions.toggleFlagged, 'star', _('star')),
61 69 ...util.parseContacts([msg.author]).map(author => h('a', {
62 70 'class': 'message__author',
63 71 'href': `mailto:${author.email}`,
@@ -76,19 +84,19 @@ export default function(msg, expanded) {
76 84 util.createDate(msg.date),
77 85 h('span', {'class': 'message__actions'}, [
78 86 canReplyAll
79 -1 ? createButton({'class': 'button', 'data-action': 'replyAll'}, 'reply_all', _('replyAll'))
-1 87 ? createButton({'class': 'button'}, actions.replyAll, 'reply_all', _('replyAll'))
80 88 : msg.canReplyToList
81 -1 ? createButton({'class': 'button', 'data-action': 'replyToList'}, 'list', _('replyList'))
82 -1 : createButton({'class': 'button', 'data-action': 'replyToSender'}, 'reply', _('reply')),
83 -1 createButton({'class': 'button dropdownToggle'}, 'menu', _('more')),
-1 89 ? createButton({'class': 'button'}, actions.replyToList, 'list', _('replyList'))
-1 90 : createButton({'class': 'button'}, actions.replyToSender, 'reply', _('reply')),
-1 91 createButton({'class': 'button'}, toggleDropdown, 'menu', _('more')),
84 92 h('div', {'class': 'dropdown'}, [
85 -1 createButton({'class': 'dropdown-item', 'data-action': 'replyToSender'}, 'reply', _('reply'), true),
86 -1 canReplyAll ? createButton({'class': 'dropdown-item', 'data-action': 'replyAll'}, 'reply_all', _('replyAll'), true) : null,
87 -1 msg.canReplyToList ? createButton({'class': 'dropdown-item', 'data-action': 'replyToList'}, 'list', _('replyList'), true) : null,
88 -1 createButton({'class': 'dropdown-item', 'data-action': 'forward'}, 'forward', _('forward'), true),
89 -1 createButton({'class': 'dropdown-item', 'data-action': 'editAsNew'}, 'create', _('edit'), true),
90 -1 createButton({'class': 'dropdown-item', 'data-action': 'viewClassic'}, 'open_in_new', _('viewClassic'), true),
91 -1 createButton({'class': 'dropdown-item', 'data-action': 'viewSource'}, 'code', _('viewSource'), true),
-1 93 createButton({'class': 'dropdown-item'}, actions.replyToSender, 'reply', _('reply'), true),
-1 94 canReplyAll ? createButton({'class': 'dropdown-item'}, actions.replyAll, 'reply_all', _('replyAll'), true) : null,
-1 95 msg.canReplyToList ? createButton({'class': 'dropdown-item'}, actions.replyToList, 'list', _('replyList'), true) : null,
-1 96 createButton({'class': 'dropdown-item'}, actions.forward, 'forward', _('forward'), true),
-1 97 createButton({'class': 'dropdown-item'}, actions.editAsNew, 'create', _('edit'), true),
-1 98 createButton({'class': 'dropdown-item'}, actions.viewClassic, 'open_in_new', _('viewClassic'), true),
-1 99 createButton({'class': 'dropdown-item'}, actions.viewSource, 'code', _('viewSource'), true),
92 100 ]),
93 101 ]),
94 102 ]),
@@ -115,29 +123,13 @@ export default function(msg, expanded) {
115 123 });
116 124
117 125 // dropdown events
118 -1 var dropdownToggle = e.querySelector('.dropdownToggle');
119 126 var dropdown = e.querySelector('.dropdown');
120 -1 dropdownToggle.addEventListener('click', function(event) {
121 -1 event.preventDefault();
122 -1 dropdown.classList.toggle('is-expanded');
123 -1 });
124 127 document.addEventListener('focusout', function(event) {
125 128 if (!event.relatedTarget || !dropdown.contains(event.relatedTarget)) {
126 129 dropdown.classList.remove('is-expanded');
127 130 }
128 131 });
129 132
130 -1 // action events
131 -1 var buttons = e.querySelectorAll('[data-action]');
132 -1 for (let i = 0; i < buttons.length; i++) {
133 -1 const button = buttons[i];
134 -1 const fn = actions[button.dataset.action];
135 -1 button.addEventListener('click', function(event) {
136 -1 event.preventDefault();
137 -1 fn(msg, event.currentTarget);
138 -1 });
139 -1 }
140 -1
141 133 // body
142 134 var footer = e.querySelector('.message__footer');
143 135 var details = e.querySelector('.message__details');