Merge pull request #6 from chytanka/develop

faq
chytanka · Feb 26, 2024 · 2bcc3b3 · 2bcc3b3
2 parents 593ad44 + 853fd5c
commit 2bcc3b3
Show file tree

Hide file tree

Showing 20 changed files with 539 additions and 89 deletions.
diff --git a/src/app/common/common-read/ui/common-read/common-read.component.scss b/src/app/common/common-read/ui/common-read/common-read.component.scss
@@ -33,43 +33,4 @@
         place-items: center;
         gap: 1.5ch;
     }
-}
-
-.button {
-    --q: 1;
-
-    user-select: none;
-    border: 0;
-    font: inherit;
-    color: inherit;
-    padding-inline: calc(var(--q) * 1ch);
-    padding-block: calc(var(--q) * 1ch);
-    border-radius: .5ch;
-    cursor: pointer;
-    background: hsl(203.44 8% 16%);
-    transition: all .25s ;
-    text-wrap: balance;
-    -webkit-tap-highlight-color: transparent;
-    box-shadow: 0 .1ch .2ch #0004;
-
-    &.mediun {
-        --q: 1.5
-    }
-
-    &.large {
-        --q: 2
-    }
-
-    &.primary {
-        background: #166496;
-    }
-
-    &:hover {
-        background-color: #166496;
-        color: #ffd60a;
-    }
-
-    &:active {
-        background-color: rgba(0, 15, 30, 1);
-    }
 }
diff --git a/src/app/link-parser/link-parser.module.ts b/src/app/link-parser/link-parser.module.ts
@@ -5,11 +5,13 @@ import { LinkParserRoutingModule } from './link-parser-routing.module';
 import { LinkParserComponent } from './link-parser/link-parser.component';
 import { SharedModule } from '../shared/shared.module';
 import { FormsModule } from '@angular/forms';
+import { FaqComponent } from './ui/faq/faq.component';
 
 
 @NgModule({
   declarations: [
-    LinkParserComponent
+    LinkParserComponent,
+    FaqComponent
   ],
   imports: [
     CommonModule,

diff --git a/src/app/link-parser/link-parser/link-parser.component.html b/src/app/link-parser/link-parser/link-parser.component.html
@@ -8,7 +8,7 @@
   <div style="display: grid; grid-template-columns: 1fr auto; align-items: center;">
     <span style="font-family: 'EB Garamond', serif; font-style: italic; opacity: .72;">{{lang.phrases.slogan}}</span>
     @if (linkParams()) {
-    <a class="link" [routerLink]="[linkParams()?.site, linkParams64()?.id]">
+    <a class="button primary small" [routerLink]="[linkParams()?.site, linkParams64()?.id]">
       <span>{{lang.phrases.letsgo}} </span>
       <span class="site-name">{{linkParams()?.site}}</span>
       <span class="site-address" [title]="linkParams()?.id">{{'/'+linkParams()?.id | truncate}}</span>
@@ -21,21 +21,39 @@
 </div>
 @defer{
 <app-overlay class="show top">
+  <button title="F1" class="button tshadow" (click)="showHelp()">❔</button>
   <app-view-mode-bar style="margin-left: auto;" (valueChange)="lang.setLang($event.code); lang.updateManifest()"
     [options]="langOpt" [value]="optLangValue()" />
 </app-overlay>
 }
 @defer{
 <app-overlay class="show">
   <small>{{lang.phrases.shortTitle}}, &copy; 2024</small>
-  <a href="https://github.com/chytanka" target="_blank" rel="noopener noreferrer">
-    <img style="width: 2ch;" src="/assets/logos/github-logo.svg" alt="Github">
-  </a>
-  <a href="https://www.reddit.com/r/chytanka/" target="_blank" rel="noopener noreferrer">
-    <img style="width: 2ch;" src="/assets/logos/reddit-logo.svg" alt="Reddit">
-  </a>
-  <a href="https://bsky.app/profile/chytanka.github.io" target="_blank" rel="noopener noreferrer">
-    <img style="width: 2ch;" src="/assets/logos/bsky-logo.svg" alt="Blue Sky">
-  </a>
+
+  @for (item of social; track $index) {
+    <a [href]="item.link" target="_blank" rel="noopener noreferrer">
+      <img style="width: 2ch;" [src]="item.logoSrc" [alt]="item.alt">
+    </a>
+  }
+
+  <made-in-ukraine />
 </app-overlay>
-}
+}
+
+<dialog #dialog (click)="closeDialog($event)">
+  <div class="dialog-wrapper">
+    <header>
+      <h2>🙋‍♂️ {{lang.ph().faq}}</h2>
+    </header>
+    <section>
+      @defer{ <app-faq /> }
+    </section>
+    <footer>
+      <form method="dialog">
+        <button class="button empty full">
+          {{lang.ph().ok}}
+        </button>
+      </form>
+    </footer>
+  </div>
+</dialog>
diff --git a/src/app/link-parser/link-parser/link-parser.component.scss b/src/app/link-parser/link-parser/link-parser.component.scss
@@ -61,12 +61,12 @@ input[type=url]::placeholder {
     }
 }
 
-a {
-    padding: 1ch;
-    font-size: smaller;
-    color: inherit;
-    text-decoration: none;
-}
+// a {
+//     padding: 1ch;
+//     font-size: smaller;
+//     color: inherit;
+//     text-decoration: none;
+// }
 
 .site-name {
     text-transform: uppercase;
@@ -109,4 +109,100 @@ app-overlay {
     &::before {
         content: unset;
     }
+}
+
+made-in-ukraine {
+    margin-left: auto;
+
+}
+
+
+dialog {
+    --r: 1ch;
+    --b: 2px;
+    padding: 0;
+    max-width: min(calc(100vw - 4ch), 60ch);
+    max-height: calc(100dvh - 4ch);
+    border-radius: var(--r);
+    border: var(--b) solid #166496;
+    background-color: rgb(0, 15, 30);
+    color: inherit;
+
+    &::before {
+        content: 'esc';
+        position: fixed;
+        left: 2ch;
+        top: 2ch;
+        display: inline-grid;
+        place-content: center;
+        background-color: rgba(0, 39, 65, 1);
+        border: 1px solid #166496;
+        height: 3.5ch;
+        padding: 1ch .75ch;
+        font-size: smaller;
+        border-radius: .5ch;
+        margin: 0 .25ch;
+        font-family: monospace;
+        font-weight: bold;
+        line-height: 1ch;
+        box-shadow: 0 .35ch #166496;
+        color: #ffd60a;
+        opacity: .5;
+    }
+
+    &::backdrop {
+        backdrop-filter: blur(.5ch) brightness(.32);
+    }
+
+    .dialog-wrapper {
+        display: grid;
+        max-height: 100%;
+        grid-template: auto 1fr auto / 1fr;
+    }
+
+    header,
+    footer {
+        background-color: rgb(0, 39, 65);
+        padding: 1ch 2ch;
+    }
+
+    header {
+        border-top-left-radius: calc(var(--r) - var(--b));
+        border-top-right-radius: calc(var(--r) - var(--b));
+
+        h2,
+        h4 {
+            margin: 0;
+        }
+    }
+
+    footer {
+        border-bottom-left-radius: calc(var(--r) - var(--b));
+        border-bottom-right-radius: calc(var(--r) - var(--b));
+    }
+
+    section {
+        padding: 2ch;
+        overflow: auto;
+    }
+
+    &[open] {
+        display: flex;
+    }
+}
+
+
+:host {
+    transition: scale .1s ease-in-out;
+}
+
+:host:has(dialog[open]) {
+    scale: .99;
+    overflow: hidden;
+}
+
+:host:has(input[type=url]:focus) {
+    app-overlay {
+        opacity: 0;
+    }
 }
diff --git a/src/app/link-parser/link-parser/link-parser.component.ts b/src/app/link-parser/link-parser/link-parser.component.ts
@@ -1,10 +1,11 @@
-import { Component, Signal, WritableSignal, computed, signal } from '@angular/core';
+import { Component, ElementRef, HostListener, Signal, ViewChild, WritableSignal, computed, effect, inject, signal } from '@angular/core';
 import { LinkParserService } from '../data-access/link-parser.service';
 import { ImgurLinkParser, JsonLinkParser, MangadexLinkParser, RedditLinkParser, TelegraphLinkParser } from '../utils';
-import { ActivatedRoute , Router} from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
 import { LangService } from '../../shared/data-access/lang.service';
-import { ViewModeOption } from '../../shared/data-access';
+import { DomManipulationService, ViewModeOption } from '../../shared/data-access';
 import { Base64 } from '../../shared/utils';
+import { Title } from '@angular/platform-browser';
 
 const LANG_OPTIONS: ViewModeOption[] = [
   { dir: "rtl", mode: "pages", hintPhraceKey: "english", code: "en", emoji: "🇬🇧" },
@@ -19,6 +20,10 @@ const LANG_OPTIONS: ViewModeOption[] = [
   ]
 })
 export class LinkParserComponent {
+  private title: Title = inject(Title);
+  private router: Router = inject(Router);
+  private route: ActivatedRoute = inject(ActivatedRoute);
+  private dm: DomManipulationService = inject(DomManipulationService)
 
   link: WritableSignal<string> = signal('');
   linkParams: Signal<any> = computed(() => this.parser.parse(this.link()));
@@ -32,12 +37,14 @@ export class LinkParserComponent {
 
   langOpt = LANG_OPTIONS
 
-  optLangValue = () => this.langOpt.filter((opt: any)=>opt.code == this.lang.lang())[0]
+  optLangValue = () => this.langOpt.filter((opt: any) => opt.code == this.lang.lang())[0]
 
-  constructor(private route: ActivatedRoute, private router: Router, public parser: LinkParserService, public lang: LangService) {
+  constructor(public parser: LinkParserService, public lang: LangService) {
     this.initParser();
-  //  console.log( this.);
-
+
+    effect(() => {
+      this.initTitle()
+    })
   }
 
   initParser() {
@@ -55,33 +62,92 @@ export class LinkParserComponent {
   }
 
   ngOnInit() {
-    const url: string | null = this.route.snapshot.queryParamMap.get('url');
-
-    if (url) {
-      this.link.set(url ?? '')
-    } else {
-      this.initFromclipboard();
-    }
+    this.initUrl()
   }
 
   async initFromclipboard() {
     try {
       const text = await navigator.clipboard?.readText()
       this.link.set(text ?? '')
     } catch (error) {
-      
+
     }
 
     if (!this.linkParams()) { this.link.set('') }
   }
 
+  initTitle() {
+    this.title.setTitle(this.lang.ph().title)
+  }
+
+  initUrl() {
+    const url: string | null = this.route.snapshot.queryParamMap.get('url');
+
+    if (url) {
+      this.link.set(url ?? '')
+    } else {
+      this.initFromclipboard();
+    }
+  }
 
   onSubmit() {
-    if(!this.linkParams) return;
+    if (!this.linkParams) return;
 
     const link = `/${this.linkParams().site}/${this.linkParams64().id}`
 
     this.router.navigateByUrl(link);
   }
 
+  @ViewChild('dialog', { static: true }) dialogRef!: ElementRef;
+  dialogElement: WritableSignal<HTMLDialogElement> = signal(document.createElement('dialog'));
+
+
+  ngAfterViewInit() {
+    this.dialogElement.set(this.dialogRef.nativeElement);
+  }
+
+  async showHelp() {
+    this.dialogElement().showModal()
+    // const mutate = () => {
+    //   this.dialogElement().showModal()
+    // }
+
+    // this.dm.startViewTransition(mutate)
+  }
+
+  async closeDialog(event: Event) {
+    if (event.target instanceof HTMLDialogElement) {
+      const mutate = () => (event.target as HTMLDialogElement).close();
+
+      this.dm.startViewTransition(mutate)
+    }
+
+  }
+
+  @HostListener('window:keydown', ["$event"])
+  helpHotKey(event: KeyboardEvent) {
+    if (event.key === 'F1') {
+      event.preventDefault()
+      this.showHelp()
+    }
+  }
+
+  social: any[] = [
+    {
+      alt: "Github",
+      link: "//github.com/chytanka",
+      logoSrc: "/assets/logos/github-logo.svg"
+    },
+    {
+      alt: "Reddit",
+      link: "//www.reddit.com/r/chytanka",
+      logoSrc: "/assets/logos/reddit-logo.svg"
+    },
+    {
+      alt: "Blue Sky",
+      link: "//bsky.app/profile/chytanka.github.io",
+      logoSrc: "/assets/logos/bsky-logo.svg"
+    }
+  ]
+
 }