mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-02-05 10:53:28 -05:00
Truncate previews of email messages to ~3 lines
Emails can get very long. When you’re trying to do other things on the page this results in a lot of scrolling. This commit truncates email messages to about 3 lines, and adds a JS toggle which reveal the full contents of the email.
This commit is contained in:
41
app/assets/javascripts/expandCollapse.js
Normal file
41
app/assets/javascripts/expandCollapse.js
Normal file
@@ -0,0 +1,41 @@
|
||||
(function(Modules) {
|
||||
"use strict";
|
||||
|
||||
Modules.ExpandCollapse = function() {
|
||||
|
||||
this.start = function(component) {
|
||||
|
||||
this.$component = $(component)
|
||||
.append(`
|
||||
<div class='toggle' tabindex='0'>...<span class='visually-hidden'>show full email</span></div>
|
||||
`)
|
||||
.addClass('collapsed');
|
||||
|
||||
this.$toggle = this.$component.find('.toggle');
|
||||
|
||||
this.$toggle
|
||||
.on(
|
||||
"click",
|
||||
".toggle",
|
||||
this.change
|
||||
)
|
||||
.on("keydown", this.filterKeyPresses([32, 13], this.change));
|
||||
|
||||
};
|
||||
|
||||
this.filterKeyPresses = (keys, callback) => function(event) {
|
||||
|
||||
if (keys.indexOf(event.keyCode)) return;
|
||||
|
||||
event.preventDefault();
|
||||
callback();
|
||||
|
||||
};
|
||||
|
||||
this.change = () => this.toggleCollapsed() && this.$toggle.remove();
|
||||
|
||||
this.toggleCollapsed = () => this.$component.toggleClass('collapsed');
|
||||
|
||||
};
|
||||
|
||||
})(window.GOVUK.Modules);
|
||||
Reference in New Issue
Block a user