Add read more button functionality

citizenos · Nov 8, 2023 · c222128 · c222128
1 parent e91be65
commit c222128
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 21 deletions.
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -69,7 +69,6 @@ export class AppComponent {
           }
         }
         if (event && event instanceof NavigationEnd) {
-          console.log(event);
           this.createRelUrls(event.url);
           this.app.setPageTitle();
         }

diff --git a/src/app/topic/components/topic-form/topic-form.component.scss b/src/app/topic/components/topic-form/topic-form.component.scss
@@ -15,6 +15,7 @@
   border-top-left-radius: 16px;
   border-top-right-radius: 16px;
   display: flex;
+  min-height: 60px;
   max-height: 324px;
   width: 100%;
   overflow: hidden;

diff --git a/src/app/topic/components/topic-form/topic-form.component.ts b/src/app/topic/components/topic-form/topic-form.component.ts
@@ -1,13 +1,13 @@
 import { trigger, state, style } from '@angular/animations';
 import { Component, Inject, ViewChild, ElementRef, Input } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import { map, of, switchMap, take, Observable } from 'rxjs';
+import { map, of, take, Observable } from 'rxjs';
 import { Topic } from 'src/app/interfaces/topic';
 import { TopicService } from 'src/app/services/topic.service';
 import { ConfirmDialogComponent } from 'src/app/shared/components/confirm-dialog/confirm-dialog.component';
 import { MatDialog } from '@angular/material/dialog';
 import { GroupService } from 'src/app/services/group.service';
-import { DomSanitizer } from '@angular/platform-browser';
+import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
 import { Group } from 'src/app/interfaces/group';
 import { TranslateService } from '@ngx-translate/core';
 import { GroupMemberTopicService } from 'src/app/services/group-member-topic.service';
@@ -52,7 +52,7 @@ import { InterruptDialogComponent } from 'src/app/shared/components/interrupt-di
 export class TopicFormComponent {
   @ViewChild('imageUpload') fileInput?: ElementRef;
   @Input() topic!: Topic;
-
+  topicUrl = <SafeResourceUrl>'';
   tabSelected;
   tabs = ['info', 'settings', 'preview'];
 
@@ -105,6 +105,15 @@ export class TopicFormComponent {
       ));
   }
 
+  ngOnInit() {
+    this.topicUrl = this.sanitizer.bypassSecurityTrustResourceUrl(
+      this.topic.padUrl)
+  }
+
+  sanitizeURL(): SafeResourceUrl {
+    return this.topicUrl;
+  }
+
   selectTab(tab: string) {
     this.router.navigate([], { fragment: tab });
   }
@@ -200,10 +209,6 @@ export class TopicFormComponent {
     this.inviteMembers();
   }
 
-  sanitizeURL() {
-    return this.sanitizer.bypassSecurityTrustResourceUrl(this.topic.padUrl);
-  }
-
   chooseCategory(category: string) {
     if (this.topic.categories && this.topic.categories.indexOf(category) > -1) {
       this.topic.categories.splice(this.topic.categories.indexOf(category), 1);
@@ -263,7 +268,7 @@ export class TopicFormComponent {
   removeTag(tag: string) {
     this.tags.splice(this.tags.indexOf(tag), 1);
   }
-  cancel () {
+  cancel() {
     const confirmDialog = this.dialog.open(InterruptDialogComponent);
 
     confirmDialog.afterClosed().subscribe(result => {
@@ -273,7 +278,7 @@ export class TopicFormComponent {
           .subscribe(() => {
             this.router.navigate(['dashboard']);
           })*/
-          this.router.navigate(['dashboard']);
+        this.router.navigate(['dashboard']);
       }
     });
     //[routerLink]="['/', translate.currentLang, 'topics', topic.id]"

diff --git a/src/app/topic/topic.component.html b/src/app/topic/topic.component.html
@@ -200,7 +200,7 @@ <h3 [innerHTML]="'VIEWS.TOPICS_TOPICID.HEADING_BACK_TO_MY_TOPICS'| translate"></
   <div class="topic_content_area_wrap">
     <div class="content_area_left" *ngIf="tabSelected$ | async as tabSelected;">
       <ng-container
-        *ngIf="topic.report && ((topic.report.moderatedReasonType && TopicService.canEdit(topic)) || (!TopicService.canEdit(topic) && topic.report.type) || !topic.report.moderatedReasonType)">
+        *ngIf="topic.report && ((topic.report?.type && !topic.report?.moderatedReasonType) || (topic.report?.type) || (TopicService.canEdit(topic) && topic.report?.moderatedReasonType))">
         <div class="notification_inline error">
           <div class="icon_notification">
             <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -250,16 +250,17 @@ <h3 [innerHTML]="'VIEWS.TOPICS_TOPICID.HEADING_BACK_TO_MY_TOPICS'| translate"></
         <div class="topic_image">
           <img *ngIf="topic.imageUrl" [src]="topic.imageUrl">
         </div>
-        <div id="topic_text_wrap"
-          [TourItem]="{tourid: 'topic', index: 6, position: ((wWidth <= 1024)? 'bottom': 'top')}">
+        <div id="topic_text_wrap" #topicText
+          [TourItem]="{tourid: 'topic', index: 6, position: ((wWidth <= 1024)? 'bottom': 'top')}"
+          [@readMore]="readMore? 'open' : 'closed'">
           <div class="topic_title">
             <div class="main_heading" [innerHTML]="topic.title"></div>
           </div>
           <div class="topic_intro" [innerHTML]="topic.intro"></div>
           <div class="topic_content" [innerHTML]="topic.description">
           </div>
         </div>
-        <div class="button_wrap">
+        <div class="button_wrap" *ngIf="readMoreButton">
           <button class="btn_medium_secondary" (click)="readMore=!readMore">
             <svg *ngIf="!readMore" width="24" height="24" viewBox="0 0 24 24" fill="none"
               xmlns="http://www.w3.org/2000/svg">

diff --git a/src/app/topic/topic.component.ts b/src/app/topic/topic.component.ts
@@ -1,9 +1,9 @@
 import { TopicEventService } from './../services/topic-event.service';
 import { NotificationService } from 'src/app/services/notification.service';
 import { TopicMemberGroupService } from 'src/app/services/topic-member-group.service';
-import { Component, OnInit, Inject } from '@angular/core';
+import { Component, OnInit, Inject, ViewChild, ElementRef } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
-import { switchMap, of, map, tap, Observable, Subscription, take } from 'rxjs';
+import { switchMap, of, map, tap, Observable, take } from 'rxjs';
 import { MatDialog } from '@angular/material/dialog';
 import { TranslateService } from '@ngx-translate/core';
 import { DomSanitizer } from '@angular/platform-browser';
@@ -32,13 +32,22 @@ import { TopicJoinComponent } from './components/topic-join/topic-join.component
 import { TopicReportReasonComponent } from './components/topic-report-reason/topic-report-reason.component';
 import { TopicJoinService } from 'src/app/services/topic-join.service';
 import { TourService } from 'src/app/services/tour.service';
-import { Title, Meta, MetaDefinition } from '@angular/platform-browser';
 
 @Component({
   selector: 'topic',
   templateUrl: './topic.component.html',
   styleUrls: ['./topic.component.scss'],
   animations: [
+    trigger('readMore', [
+      state('open', style({
+        maxHeight: '100%',
+        transition: '0.3s ease-in-out max-height'
+      })),
+      state('closed', style({
+        maxHeight: '320px',
+        transition: '0.3s ease-in-out max-height'
+      }))
+    ]),
     trigger('openClose', [
       state('open', style({
         minHeight: '100%',
@@ -69,6 +78,16 @@ import { Title, Meta, MetaDefinition } from '@angular/platform-browser';
 
 export class TopicComponent implements OnInit {
   //new
+  topicText?: ElementRef
+  readMoreButton = false;
+  @ViewChild('topicText') set content(content: ElementRef) {
+    if (content) { // initially setter gets called with undefined
+      this.topicText = content;
+      if (content.nativeElement.offsetHeight > 200) {
+        this.readMoreButton = true;
+      }
+    }
+  }
   showCategories = false;
   showAttachments = false;
   showGroups = false;
@@ -78,7 +97,7 @@ export class TopicComponent implements OnInit {
   showVoteTablet = (window.innerWidth <= 1024);
   tabSelected$: Observable<string>;
   showTutorial = false;
-  topicTitle:string = '';
+  topicTitle: string = '';
   //new end
   topic$; // decorate the property with @Input()
   groups$: Observable<Group[]>;
@@ -148,15 +167,15 @@ export class TopicComponent implements OnInit {
           this.vote$ = this.TopicVoteService.get({ topicId: topic.id, voteId: topic.voteId });
         }
         if (topic.status === this.TopicService.STATUSES.followUp) {
-          this.events$ = TopicEventService.getItems({topicId: topic.id});
+          this.events$ = TopicEventService.getItems({ topicId: topic.id });
         }
         const padURL = new URL(topic.padUrl);
         if (padURL.searchParams.get('lang') !== this.translate.currentLang) {
           padURL.searchParams.set('lang', this.translate.currentLang);
         }
         padURL.searchParams.set('theme', 'default');
         topic.padUrl = padURL.href; // Change of PAD URL here has to be before $sce.trustAsResourceUrl($scope.topic.padUrl);
-        setTimeout(()=> {
+        setTimeout(() => {
           this.showTutorial = true;
         }, 500);
         return topic;
@@ -181,7 +200,7 @@ export class TopicComponent implements OnInit {
   ngOnDestroy(): void {
   }
 
-  reportReasonDialog (topic: Topic) {
+  reportReasonDialog(topic: Topic) {
     this.dialog.open(TopicReportReasonComponent, {
       data: {
         report: topic.report
@@ -248,6 +267,11 @@ export class TopicComponent implements OnInit {
   }
 
   ngOnInit(): void {
+    console.log('ngOnInit', this.topicText)
+  }
+
+  ngAfterViewInit(): void {
+    console.log('ngAfterViewInit', this.topicText)
   }
 
   currentUrl() {