Commit deeab8b2 authored by Robert Knight's avatar Robert Knight

Update the truncated state of the annotation when the feature flag changes

If the enabled state of the annotation changes after the view
loaded, the truncation state did not update.

With the current feature flag implementation this typically happens
if the feature flags load after the session data has been received.
In future the intention is to make feature flags part of the session
data payload so this won't happen.
parent 8839b89a
......@@ -304,7 +304,7 @@ function AnnotationController(
/** Determines whether controls to expand/collapse the annotation body
* are displayed adjacent to the tags field.
*/
vm.canCollapseBody = true;
vm.canCollapseBody = false;
/** Determines whether the annotation body should be collapsed. */
vm.collapseBody = true;
......
......@@ -48,11 +48,20 @@ function excerpt($timeout) {
controller: ExcerptController,
controllerAs: 'vm',
link: function (scope, elem, attrs, ctrl) {
if (!ctrl.enabled()) {
return;
var contentElem;
function checkForOverflowChange() {
scope.$digest();
}
function updateContentMaxHeight() {
if (ctrl.collapse) {
contentElem.style.maxHeight = toPx(ctrl.collapsedHeight);
} else {
contentElem.style.maxHeight = toPx(contentElem.scrollHeight);
}
}
var contentElem;
ctrl.overflowing = function overflowing() {
if (!contentElem) {
return false;
......@@ -61,15 +70,30 @@ function excerpt($timeout) {
};
scope.$evalAsync(function () {
contentElem = elem[0].querySelector('.excerpt');
scope.$watch('vm.enabled()', function (isEnabled) {
if (isEnabled) {
contentElem = elem[0].querySelector('.excerpt');
// trigger a recalculation of ctrl.overflowing() and properties
// which depend upon it when embedded media loads.
//
// In future we might wish to trigger checking for other events
// outside of Angular's knowledge as well, eg. loading of embedded
// media
contentElem.addEventListener('load', checkForOverflowChange,
true /* capture. 'load' events do not bubble */);
updateContentMaxHeight();
} else {
contentElem = undefined;
}
});
// update max height
scope.$watch('vm.collapse', function (isCollapsed) {
if (isCollapsed) {
contentElem.style.maxHeight = toPx(ctrl.collapsedHeight);
} else {
contentElem.style.maxHeight = toPx(contentElem.scrollHeight);
if (!contentElem) {
return;
}
updateContentMaxHeight();
});
scope.$watch('vm.overflowing()', function () {
......@@ -77,19 +101,6 @@ function excerpt($timeout) {
ctrl.onCollapsibleChanged({collapsible: ctrl.overflowing()});
}
});
function checkForOverflowChange() {
scope.$digest();
}
// trigger a recalculation of ctrl.overflowing() and properties
// which depend upon it when embedded media loads.
//
// In future we might wish to trigger checking for other events
// outside of Angular's knowledge as well, eg. loading of embedded
// media
contentElem.addEventListener('load', checkForOverflowChange,
true /* capture. 'load' events do not bubble */);
});
},
scope: {
......@@ -107,7 +118,7 @@ function excerpt($timeout) {
/** Called when the collapsibility of the excerpt (that is, whether or
* not the content height exceeds the collapsed height), changes.
*/
onCollapsibleChanged: '&',
onCollapsibleChanged: '&?',
/** The height of this container in pixels when collapsed.
*/
collapsedHeight: '=',
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment