MOBILE-2555 core: Remove clean HTML from forum list and more

main
Dani Palou 2018-08-22 13:44:39 +02:00
parent 7d4ccceb20
commit cf8998dd5f
5 changed files with 20 additions and 17 deletions

View File

@ -65,7 +65,7 @@
<ion-item text-wrap *ngIf="course.fullname"> <ion-item text-wrap *ngIf="course.fullname">
<h2>{{ 'core.course' | translate}}</h2> <h2>{{ 'core.course' | translate}}</h2>
<p> <p>
<core-format-text clean="true" [text]="course.fullname"></core-format-text> <core-format-text [text]="course.fullname"></core-format-text>
</p> </p>
</ion-item> </ion-item>
</ion-item-group> </ion-item-group>

View File

@ -40,7 +40,7 @@
<ion-note text-right *ngIf="discussion.groupname"> <ion-note text-right *ngIf="discussion.groupname">
<ion-icon name="people"></ion-icon> {{ discussion.groupname }} <ion-icon name="people"></ion-icon> {{ discussion.groupname }}
</ion-note> </ion-note>
<p><core-format-text [clean]="true" [maxHeight]="60" [component]="component" [componentId]="componentId" [text]="discussion.message"></core-format-text></p> <p><core-format-text [maxHeight]="60" [component]="component" [componentId]="componentId" [text]="discussion.message"></core-format-text></p>
</ion-card-content> </ion-card-content>
</ion-card> </ion-card>
<ion-card *ngFor="let discussion of discussions" (click)="openDiscussion(discussion)" [class.addon-forum-discussion-selected]="discussion.discussion == selectedDiscussion"> <ion-card *ngFor="let discussion of discussions" (click)="openDiscussion(discussion)" [class.addon-forum-discussion-selected]="discussion.discussion == selectedDiscussion">
@ -58,7 +58,7 @@
</p> </p>
</ion-item> </ion-item>
<ion-card-content> <ion-card-content>
<core-format-text [clean]="true" [maxHeight]="60" [component]="component" [componentId]="componentId" [text]="discussion.message"></core-format-text> <core-format-text [maxHeight]="60" [component]="component" [componentId]="componentId" [text]="discussion.message"></core-format-text>
</ion-card-content> </ion-card-content>
<ion-row text-center> <ion-row text-center>
<ion-col *ngIf="discussion.groupname"> <ion-col *ngIf="discussion.groupname">

View File

@ -17,7 +17,7 @@
<ion-item text-wrap *ngIf="course.summary && course.summary.length"> <ion-item text-wrap *ngIf="course.summary && course.summary.length">
<p> <p>
<summary> <summary>
<core-format-text [text]="course.summary" singleLine="true" clean="true"></core-format-text> <core-format-text [text]="course.summary" [singleLine]="true" [clean]="true" [fullOnClick]="true"></core-format-text>
</summary> </summary>
</p> </p>
</ion-item> </ion-item>

View File

@ -16,7 +16,7 @@
<img [src]="site.avatar" core-external-content [siteId]="site.id" alt="{{ 'core.pictureof' | translate:{$a: site.fullname} }}" role="presentation" onError="this.src='assets/img/user-avatar.png'"> <img [src]="site.avatar" core-external-content [siteId]="site.id" alt="{{ 'core.pictureof' | translate:{$a: site.fullname} }}" role="presentation" onError="this.src='assets/img/user-avatar.png'">
</ion-avatar> </ion-avatar>
<h2>{{site.fullName}}</h2> <h2>{{site.fullName}}</h2>
<p><core-format-text [text]="site.siteName" clean="true" watch="true" [siteId]="site.id"></core-format-text></p> <p><core-format-text [text]="site.siteName" clean="true" [siteId]="site.id"></core-format-text></p>
<p>{{site.siteUrl}}</p> <p>{{site.siteUrl}}</p>
<ion-badge item-end *ngIf="!showDelete && site.badge">{{site.badge}}</ion-badge> <ion-badge item-end *ngIf="!showDelete && site.badge">{{site.badge}}</ion-badge>
<button *ngIf="showDelete" item-end ion-button icon-only clear color="danger" (click)="deleteSite($event, idx)" [attr.aria-label]="'core.delete' | translate"> <button *ngIf="showDelete" item-end ion-button icon-only clear color="danger" (click)="deleteSite($event, idx)" [attr.aria-label]="'core.delete' | translate">

View File

@ -52,12 +52,11 @@ export class CoreFormatTextDirective implements OnChanges {
// Using this parameter will force display: block to calculate height better. // Using this parameter will force display: block to calculate height better.
// If you want to avoid this use class="inline" at the same time to use display: inline-block. // If you want to avoid this use class="inline" at the same time to use display: inline-block.
@Input() fullOnClick?: boolean | string; // Whether it should open a new page with the full contents on click. @Input() fullOnClick?: boolean | string; // Whether it should open a new page with the full contents on click.
// Only if "max-height" is set and the content has been collapsed.
@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 element: HTMLElement; protected element: HTMLElement;
protected clickListener; protected showMoreDisplayed: boolean;
constructor(element: ElementRef, private sitesProvider: CoreSitesProvider, private domUtils: CoreDomUtilsProvider, constructor(element: ElementRef, private sitesProvider: CoreSitesProvider, private domUtils: CoreDomUtilsProvider,
private textUtils: CoreTextUtilsProvider, private translate: TranslateService, private platform: Platform, private textUtils: CoreTextUtilsProvider, private translate: TranslateService, private platform: Platform,
@ -68,6 +67,8 @@ export class CoreFormatTextDirective implements OnChanges {
this.element = element.nativeElement; this.element = element.nativeElement;
this.element.classList.add('opacity-hide'); // Hide contents until they're treated. this.element.classList.add('opacity-hide'); // Hide contents until they're treated.
this.afterRender = new EventEmitter(); this.afterRender = new EventEmitter();
this.element.addEventListener('click', this.elementClicked.bind(this));
} }
/** /**
@ -168,10 +169,10 @@ export class CoreFormatTextDirective implements OnChanges {
// If cannot calculate height, shorten always. // If cannot calculate height, shorten always.
if (!height || height > this.maxHeight) { if (!height || height > this.maxHeight) {
if (!this.clickListener) { if (!this.showMoreDisplayed) {
this.displayShowMore(); this.displayShowMore();
} }
} else if (this.clickListener) { } else if (this.showMoreDisplayed) {
this.hideShowMore(); this.hideShowMore();
} }
} }
@ -194,23 +195,27 @@ export class CoreFormatTextDirective implements OnChanges {
this.element.classList.add('core-shortened'); this.element.classList.add('core-shortened');
this.element.style.maxHeight = this.maxHeight + 'px'; this.element.style.maxHeight = this.maxHeight + 'px';
this.clickListener = this.elementClicked.bind(this, expandInFullview); this.showMoreDisplayed = true;
this.element.addEventListener('click', this.clickListener);
} }
/** /**
* Listener to call when the element is clicked. * Listener to call when the element is clicked.
* *
* @param {boolean} expandInFullview Whether to expand the text in a new view.
* @param {MouseEvent} e Click event. * @param {MouseEvent} e Click event.
*/ */
protected elementClicked(expandInFullview: boolean, e: MouseEvent): void { protected elementClicked(e: MouseEvent): void {
if (e.defaultPrevented) { if (e.defaultPrevented) {
// Ignore it if the event was prevented by some other listener. // Ignore it if the event was prevented by some other listener.
return; return;
} }
const expandInFullview = this.utils.isTrueOrOne(this.fullOnClick) || false;
if (!expandInFullview && !this.showMoreDisplayed) {
// Nothing to do on click, just stop.
return;
}
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
@ -442,9 +447,7 @@ export class CoreFormatTextDirective implements OnChanges {
this.element.classList.remove('core-text-formatted'); this.element.classList.remove('core-text-formatted');
this.element.classList.remove('core-shortened'); this.element.classList.remove('core-shortened');
this.element.style.maxHeight = null; this.element.style.maxHeight = null;
this.showMoreDisplayed = false;
this.element.removeEventListener('click', this.clickListener);
this.clickListener = null;
} }
/** /**