✔ Fix Overflow ~

bifeldy · Dec 22, 2023 · dba83e6 · dba83e6
1 parent 817a90b
commit dba83e6
Show file tree

Hide file tree

Showing 7 changed files with 35 additions and 16 deletions.
diff --git a/dist/fansubid/browser/index.html b/dist/fansubid/browser/index.html
@@ -63,7 +63,7 @@
       <noscript>🎉 Harap Menyalakan JavaScript Untuk Dapat Mengakses Website Ini ✨</noscript>
     </div>
     <app-root></app-root>
-  <script src="runtime.e27249c1331735f4.js" type="module"></script><script src="polyfills.bbae203fdd01cf64.js" type="module"></script><script src="scripts.25bb5de51afc8a05.js" defer></script><script src="main.8b83f65b15cf99a2.js" type="module"></script>
+  <script src="runtime.e27249c1331735f4.js" type="module"></script><script src="polyfills.bbae203fdd01cf64.js" type="module"></script><script src="scripts.25bb5de51afc8a05.js" defer></script><script src="main.3d1725919bfc31d6.js" type="module"></script>
 
 
 </body></html>
diff --git a/dist/fansubid/browser/main.3d1725919bfc31d6.js b/dist/fansubid/browser/main.3d1725919bfc31d6.js
diff --git a/dist/fansubid/browser/main.8b83f65b15cf99a2.js b/dist/fansubid/browser/main.8b83f65b15cf99a2.js
diff --git a/dist/fansubid/browser/ngsw.json b/dist/fansubid/browser/ngsw.json
@@ -1,6 +1,6 @@
 {
   "configVersion": 1,
-  "timestamp": 1703217005383,
+  "timestamp": 1703218811626,
   "index": "/index.html",
   "assetGroups": [
     {
@@ -42,7 +42,7 @@
         "/common.698fd424c1ae0657.js",
         "/favicon.ico",
         "/index.html",
-        "/main.8b83f65b15cf99a2.js",
+        "/main.3d1725919bfc31d6.js",
         "/manifest.webmanifest",
         "/polyfills.bbae203fdd01cf64.js",
         "/runtime.e27249c1331735f4.js",
@@ -116,8 +116,8 @@
     "/960.1e1fe3434266e9a4.js": "c649bd883373fc66f7e2781d27054b5da57413a3",
     "/common.698fd424c1ae0657.js": "46b346a739b76049a55c209a473d9bbdd6c4568f",
     "/favicon.ico": "071facb8fab2e4b3493dcfbb0b02d7bd21bca97e",
-    "/index.html": "63435a93ac06d9ce9de9f7663c5ccdc3447f2abf",
-    "/main.8b83f65b15cf99a2.js": "b025a8fa3914f30c353ac56bc271546e51761ced",
+    "/index.html": "882343d394f381cb659726e9d62b4a4d7b892bd3",
+    "/main.3d1725919bfc31d6.js": "87be5252a1aa6c685bc1a1749689bb7c95bfc391",
     "/manifest.webmanifest": "eafb5426cdc9fd714787e5453af315b9972875a3",
     "/polyfills.bbae203fdd01cf64.js": "a59f17cf29cb649f708d7ec7aa6b7247712859e1",
     "/runtime.e27249c1331735f4.js": "231839c87a77ec87ba38184d7aab3c43cdb4e11a",

diff --git a/dist/fansubid/server/main.js b/dist/fansubid/server/main.js
diff --git a/...hared/components/material-dialog/material-dialog-info/material-dialog-info.component.html b/...hared/components/material-dialog/material-dialog-info/material-dialog-info.component.html
@@ -1,10 +1,8 @@
-<h1 mat-dialog-title (mouseover)="checkReadContent($event)">
-  {{ DATA.title }}
-</h1>
-<div mat-dialog-content class="p-4" (scroll)="checkReadContent($event)" (mouseover)="checkReadContent($event)"
+<h1 mat-dialog-title>{{ DATA.title }}</h1>
+<div mat-dialog-content class="p-4" (scroll)="onScroll($event)" #htmlElementContentDialog
   [innerHTML]="DATA.htmlMessage | safeInnerHtml" class="text-break text-warning">
 </div>
-<div mat-dialog-actions (mouseover)="checkReadContent($event)">
+<div mat-dialog-actions>
   <small *ngIf="DATA.infoText" class="text-start m-2">
     <i>* {{ DATA.infoText }}</i>
   </small>

diff --git a/..._shared/components/material-dialog/material-dialog-info/material-dialog-info.component.ts b/..._shared/components/material-dialog/material-dialog-info/material-dialog-info.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, Inject } from '@angular/core';
+import { Component, OnInit, Inject, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
 import { MAT_DIALOG_DATA } from '@angular/material/dialog';
 
 import { DialogInfoDataModel } from '../../../../../models/dialog';
@@ -10,9 +10,11 @@ import { GlobalService } from '../../../../_shared/services/global.service';
   templateUrl: './material-dialog-info.component.html',
   styleUrls: ['./material-dialog-info.component.css']
 })
-export class MaterialDialogInfoComponent implements OnInit {
+export class MaterialDialogInfoComponent implements OnInit, AfterViewInit {
 
-  buttonDisabled = true;
+  buttonDisabled = false;
+
+  @ViewChild('htmlElementContentDialog') el: ElementRef;
 
   constructor(
     @Inject(MAT_DIALOG_DATA) private data: DialogInfoDataModel,
@@ -31,8 +33,27 @@ export class MaterialDialogInfoComponent implements OnInit {
     this.gs.log('[DIALOG_DATA_IN]', this.data);
   }
 
-  checkReadContent(ev: any): void {
+  ngAfterViewInit(): void {
+    const isScrollable = this.checkOverflow();
+    if (isScrollable) {
+      this.buttonDisabled = true;
+    }
+  }
+
+  onScroll(ev: any): void {
     this.buttonDisabled = !(ev.target.offsetHeight + ev.target.scrollTop >= ev.target.scrollHeight);
   }
 
+  // https://stackoverflow.com/questions/143815/determine-if-an-html-elements-content-overflows
+  checkOverflow(): boolean {
+    const e = this.el.nativeElement;
+    const curOverflow = e.style.overflow;
+    if (!curOverflow || curOverflow === 'visible' ) {
+      e.style.overflow = 'hidden';
+    }
+    const isOverflowing = e.clientWidth < e.scrollWidth || e.clientHeight < e.scrollHeight;
+    e.style.overflow = curOverflow;
+    return isOverflowing;
+  }
+
 }