MOBILE-2436 format-text: Stop propagating clicks in certain elements
parent
bce1afd586
commit
7d4ccceb20
|
@ -56,7 +56,6 @@ export class CoreFormatTextDirective implements OnChanges {
|
||||||
@Input() fullTitle?: string; // Title to use in full view. Defaults to "Description".
|
@Input() fullTitle?: string; // Title to use in full view. Defaults to "Description".
|
||||||
@Output() afterRender?: EventEmitter<any>; // Called when the data is rendered.
|
@Output() afterRender?: EventEmitter<any>; // Called when the data is rendered.
|
||||||
|
|
||||||
protected tagsToIgnore = ['AUDIO', 'VIDEO', 'BUTTON', 'INPUT', 'SELECT', 'TEXTAREA', 'A'];
|
|
||||||
protected element: HTMLElement;
|
protected element: HTMLElement;
|
||||||
protected clickListener;
|
protected clickListener;
|
||||||
|
|
||||||
|
@ -215,21 +214,16 @@ export class CoreFormatTextDirective implements OnChanges {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
|
|
||||||
const target = <HTMLElement> e.target;
|
if (!expandInFullview) {
|
||||||
|
// Change class.
|
||||||
|
this.element.classList.toggle('core-shortened');
|
||||||
|
|
||||||
if (this.tagsToIgnore.indexOf(target.tagName) === -1 || (target.tagName === 'A' &&
|
return;
|
||||||
!target.getAttribute('href'))) {
|
} else {
|
||||||
if (!expandInFullview) {
|
// Open a new state with the contents.
|
||||||
// Change class.
|
this.textUtils.expandText(this.fullTitle || this.translate.instant('core.description'), this.text,
|
||||||
this.element.classList.toggle('core-shortened');
|
this.component, this.componentId);
|
||||||
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Open a new state with the contents.
|
|
||||||
this.textUtils.expandText(this.fullTitle || this.translate.instant('core.description'), this.text,
|
|
||||||
this.component, this.componentId);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -315,7 +309,8 @@ export class CoreFormatTextDirective implements OnChanges {
|
||||||
videos,
|
videos,
|
||||||
iframes,
|
iframes,
|
||||||
buttons,
|
buttons,
|
||||||
elementsWithInlineStyles;
|
elementsWithInlineStyles,
|
||||||
|
stopClicksElements;
|
||||||
|
|
||||||
div.innerHTML = formatted;
|
div.innerHTML = formatted;
|
||||||
images = Array.from(div.querySelectorAll('img'));
|
images = Array.from(div.querySelectorAll('img'));
|
||||||
|
@ -325,6 +320,7 @@ export class CoreFormatTextDirective implements OnChanges {
|
||||||
iframes = Array.from(div.querySelectorAll('iframe'));
|
iframes = Array.from(div.querySelectorAll('iframe'));
|
||||||
buttons = Array.from(div.querySelectorAll('.button'));
|
buttons = Array.from(div.querySelectorAll('.button'));
|
||||||
elementsWithInlineStyles = Array.from(div.querySelectorAll('*[style]'));
|
elementsWithInlineStyles = Array.from(div.querySelectorAll('*[style]'));
|
||||||
|
stopClicksElements = Array.from(div.querySelectorAll('button,input,select,textarea'));
|
||||||
|
|
||||||
// Walk through the content to find the links and add our directive to it.
|
// Walk through the content to find the links and add our directive to it.
|
||||||
// Important: We need to look for links first because in 'img' we add new links without core-link.
|
// Important: We need to look for links first because in 'img' we add new links without core-link.
|
||||||
|
@ -382,6 +378,13 @@ export class CoreFormatTextDirective implements OnChanges {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Stop propagating click events.
|
||||||
|
stopClicksElements.forEach((element: HTMLElement) => {
|
||||||
|
element.addEventListener('click', (e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
return div;
|
return div;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
@ -496,6 +499,11 @@ export class CoreFormatTextDirective implements OnChanges {
|
||||||
tracks.forEach((track) => {
|
tracks.forEach((track) => {
|
||||||
this.addExternalContent(track);
|
this.addExternalContent(track);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Stop propagating click events.
|
||||||
|
element.addEventListener('click', (e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
Loading…
Reference in New Issue