Merge pull request #1480 from dpalou/MOBILE-2555

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

src/addon/badges/pages/issued-badge/issued-badge.html

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

src/addon/mod/forum/components/index/addon-mod-forum-index.html

@@ -40,7 +40,7 @@
                         <ion-note text-right *ngIf="discussion.groupname">
                             <ion-icon name="people"></ion-icon> {{ discussion.groupname }}
                         </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>
                 <ion-card *ngFor="let discussion of discussions" (click)="openDiscussion(discussion)" [class.addon-forum-discussion-selected]="discussion.discussion == selectedDiscussion">
@@ -58,7 +58,7 @@
                         </p>
                     </ion-item>
                     <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-row text-center>
                         <ion-col *ngIf="discussion.groupname">

src/core/courses/components/course-progress/core-courses-course-progress.html

@@ -17,7 +17,7 @@
     <ion-item text-wrap *ngIf="course.summary && course.summary.length">
         <p>
             <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>
         </p>
     </ion-item>

src/core/login/pages/sites/sites.html

@@ -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'">
             </ion-avatar>
             <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>
             <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">

src/directives/format-text.ts

@@ -53,12 +53,11 @@ export class CoreFormatTextDirective implements OnChanges {
                                  // 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.
     @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".
     @Output() afterRender?: EventEmitter<any>; // Called when the data is rendered.
 
     protected element: HTMLElement;
-    protected clickListener;
+    protected showMoreDisplayed: boolean;
 
     constructor(element: ElementRef, private sitesProvider: CoreSitesProvider, private domUtils: CoreDomUtilsProvider,
             private textUtils: CoreTextUtilsProvider, private translate: TranslateService, private platform: Platform,
@@ -70,6 +69,8 @@ export class CoreFormatTextDirective implements OnChanges {
         this.element = element.nativeElement;
         this.element.classList.add('opacity-hide'); // Hide contents until they're treated.
         this.afterRender = new EventEmitter();
+
+        this.element.addEventListener('click', this.elementClicked.bind(this));
     }
 
     /**
@@ -175,10 +176,10 @@ export class CoreFormatTextDirective implements OnChanges {
 
         // If cannot calculate height, shorten always.
         if (!height || height > this.maxHeight) {
-            if (!this.clickListener) {
+            if (!this.showMoreDisplayed) {
                 this.displayShowMore();
             }
-        } else if (this.clickListener) {
+        } else if (this.showMoreDisplayed) {
             this.hideShowMore();
         }
     }
@@ -201,23 +202,27 @@ export class CoreFormatTextDirective implements OnChanges {
         this.element.classList.add('core-shortened');
         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.
      *
-     * @param {boolean}  expandInFullview Whether to expand the text in a new view.
      * @param {MouseEvent} e Click event.
      */
-    protected elementClicked(expandInFullview: boolean, e: MouseEvent): void {
+    protected elementClicked(e: MouseEvent): void {
         if (e.defaultPrevented) {
             // Ignore it if the event was prevented by some other listener.
             return;
         }
 
+        const expandInFullview = this.utils.isTrueOrOne(this.fullOnClick) || false;
+
+        if (!expandInFullview && !this.showMoreDisplayed) {
+            // Nothing to do on click, just stop.
+            return;
+        }
+
         e.preventDefault();
         e.stopPropagation();
 
@@ -456,9 +461,7 @@ export class CoreFormatTextDirective implements OnChanges {
         this.element.classList.remove('core-text-formatted');
         this.element.classList.remove('core-shortened');
         this.element.style.maxHeight = null;
-
+        this.showMoreDisplayed = false;
-        this.element.removeEventListener('click', this.clickListener);
-        this.clickListener = null;
     }
 
     /**