2016-04-11 15:16:41 +01:00
|
|
|
(function(Modules) {
|
|
|
|
|
"use strict";
|
|
|
|
|
|
|
|
|
|
Modules.ExpandCollapse = function() {
|
|
|
|
|
|
|
|
|
|
this.start = function(component) {
|
|
|
|
|
|
2016-04-12 20:58:30 +01:00
|
|
|
this.$component = $(component);
|
|
|
|
|
|
2016-04-12 16:21:41 +01:00
|
|
|
this.$toggle = this.$component.find('.toggle')
|
2016-04-11 15:16:41 +01:00
|
|
|
.on(
|
|
|
|
|
"click",
|
|
|
|
|
this.change
|
|
|
|
|
)
|
|
|
|
|
.on("keydown", this.filterKeyPresses([32, 13], this.change));
|
|
|
|
|
|
2016-06-14 15:19:31 +01:00
|
|
|
if (this.getNativeHeight() < this.$component.data('max-height')) {
|
|
|
|
|
this.change();
|
|
|
|
|
}
|
|
|
|
|
|
2016-04-11 15:16:41 +01:00
|
|
|
};
|
|
|
|
|
|
|
|
|
|
this.filterKeyPresses = (keys, callback) => function(event) {
|
|
|
|
|
|
|
|
|
|
if (keys.indexOf(event.keyCode)) return;
|
|
|
|
|
|
|
|
|
|
event.preventDefault();
|
|
|
|
|
callback();
|
|
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
2016-06-14 15:19:31 +01:00
|
|
|
this.getNativeHeight = function() {
|
|
|
|
|
|
|
|
|
|
var $copy = this.$component.clone().css({
|
|
|
|
|
'position': 'absolute',
|
|
|
|
|
'left': '9999px',
|
|
|
|
|
'width': this.$component.width(),
|
|
|
|
|
'font-size': this.$component.css('font-size'),
|
|
|
|
|
'line-height': this.$component.css('line-height')
|
|
|
|
|
}).addClass('expanded');
|
|
|
|
|
|
|
|
|
|
$('body').append($copy);
|
|
|
|
|
|
|
|
|
|
var nativeHeight = $copy.height();
|
|
|
|
|
|
|
|
|
|
$copy.remove();
|
|
|
|
|
|
|
|
|
|
return nativeHeight;
|
|
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
2016-04-11 15:16:41 +01:00
|
|
|
this.change = () => this.toggleCollapsed() && this.$toggle.remove();
|
|
|
|
|
|
2016-06-14 15:19:31 +01:00
|
|
|
this.toggleCollapsed = () => this.$component.addClass('expanded');
|
2016-04-11 15:16:41 +01:00
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
})(window.GOVUK.Modules);
|