diff --git a/apps/blog/src/assets/i18n/en.json b/apps/blog/src/assets/i18n/en.json index bf0026f6..7afda7cf 100644 --- a/apps/blog/src/assets/i18n/en.json +++ b/apps/blog/src/assets/i18n/en.json @@ -100,7 +100,8 @@ "title": "Share this post", "twitterAriaLabel": "Share on Twitter", "facebookAriaLabel": "Share on Facebook", - "linkedInAriaLabel": "Share on LinkedIn" + "linkedInAriaLabel": "Share on LinkedIn", + "urlAriaLabel": "Copy URL" }, "dynamicTextClamp": { "readMore": "Read more", diff --git a/apps/blog/src/assets/i18n/pl.json b/apps/blog/src/assets/i18n/pl.json index 70498a46..e92acfa5 100644 --- a/apps/blog/src/assets/i18n/pl.json +++ b/apps/blog/src/assets/i18n/pl.json @@ -103,7 +103,8 @@ "title": "Podziel się artykułem", "twitterAriaLabel": "Udostępnij na Twitterze", "facebookAriaLabel": "Udostępnij na Facebooku", - "linkedInAriaLabel": "Udostępnij na LinkedIn" + "linkedInAriaLabel": "Udostępnij na LinkedIn", + "urlAriaLabel": "Skopiuj URL" }, "dynamicTextClamp": { "readMore": "Czytaj więcej", diff --git a/apps/blog/src/assets/icons/link.svg b/apps/blog/src/assets/icons/link.svg new file mode 100644 index 00000000..c2686f09 --- /dev/null +++ b/apps/blog/src/assets/icons/link.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/libs/blog/articles/feature-article/src/lib/article-share-icons/article-share-icons.component.scss b/libs/blog/articles/feature-article/src/lib/article-share-icons/article-share-icons.component.scss new file mode 100644 index 00000000..cf54514b --- /dev/null +++ b/libs/blog/articles/feature-article/src/lib/article-share-icons/article-share-icons.component.scss @@ -0,0 +1,16 @@ +.url-icon-animated { + animation: icon 1s forwards; + animation-iteration-count: 1; +} + +@keyframes icon { + 0% { + transform: scale(1); + } + 50% { + transform: scale(0.8); + } + 100% { + transform: scale(1); + } +} diff --git a/libs/blog/articles/feature-article/src/lib/article-share-icons/article-share-icons.component.ts b/libs/blog/articles/feature-article/src/lib/article-share-icons/article-share-icons.component.ts index e7078705..bf89e9c6 100644 --- a/libs/blog/articles/feature-article/src/lib/article-share-icons/article-share-icons.component.ts +++ b/libs/blog/articles/feature-article/src/lib/article-share-icons/article-share-icons.component.ts @@ -1,4 +1,15 @@ -import { Component, computed, input } from '@angular/core'; +import { CdkCopyToClipboard } from '@angular/cdk/clipboard'; +import { NgClass } from '@angular/common'; +import { + Component, + computed, + ElementRef, + inject, + input, + Renderer2, + signal, + viewChild, +} from '@angular/core'; import { TranslocoDirective } from '@jsverse/transloco'; import { FastSvgComponent } from '@push-based/ngx-fast-svg'; @@ -13,16 +24,22 @@ type ShareItem = { @Component({ standalone: true, selector: 'al-article-share-icons', - imports: [IconComponent, TranslocoDirective, FastSvgComponent], + imports: [ + IconComponent, + TranslocoDirective, + FastSvgComponent, + CdkCopyToClipboard, + NgClass, + ], + styleUrls: ['./article-share-icons.component.scss'], template: ` -
- +
+ {{ t('articleShareIcons.title') }} @for (item of items(); track $index) { } + + @if (!isCopyUrlClicked()) { + + } @else { + + } +
`, }) @@ -39,6 +74,12 @@ export class ArticleShareIconsComponent { title = input.required(); language = input.required(); + isCopyUrlClicked = signal(false); + copyUrlIcon = viewChild('copyUrlIcon'); + + protected readonly window = window; + private renderer = inject(Renderer2); + readonly items = computed(() => { const url = this.language() === 'pl_PL' @@ -64,4 +105,27 @@ export class ArticleShareIconsComponent { }, ]; }); + + onCopyUrl(): void { + this.isCopyUrlClicked.set(true); + + if (this.copyUrlIcon()) { + this.renderer.addClass( + this.copyUrlIcon()?.nativeElement, + 'url-icon-animated', + ); + const handleAnimationEnd = () => { + this.isCopyUrlClicked.set(false); + this.renderer.removeClass( + this.copyUrlIcon()?.nativeElement, + 'url-icon-animated', + ); + }; + this.renderer.listen( + this.copyUrlIcon()?.nativeElement, + 'animationend', + handleAnimationEnd, + ); + } + } } diff --git a/libs/blog/shared/ui-icon/src/lib/icon/icon.component.ts b/libs/blog/shared/ui-icon/src/lib/icon/icon.component.ts index 1d26364c..efa5a3cc 100644 --- a/libs/blog/shared/ui-icon/src/lib/icon/icon.component.ts +++ b/libs/blog/shared/ui-icon/src/lib/icon/icon.component.ts @@ -18,7 +18,8 @@ export type IconType = | 'send' | 'tick' | 'twitter-x' - | 'youtube'; + | 'youtube' + | 'link'; @Component({ selector: 'al-icon',