Skip to content
This repository was archived by the owner on Sep 4, 2020. It is now read-only.

Commit cba814a

Browse files
peterpeterparkerpeterpeterparker
committed
feat(#4): add more share actions on blog posts
1 parent 4455ab4 commit cba814a

File tree

10 files changed

+80
-12
lines changed

10 files changed

+80
-12
lines changed

‎src/app/app.component.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ import {faPaperPlane} from '@fortawesome/pro-regular-svg-icons/faPaperPlane';
3737
import {faSearch} from '@fortawesome/pro-regular-svg-icons/faSearch';
3838
import {faHeart} from '@fortawesome/pro-regular-svg-icons/faHeart';
3939
import {faTimesCircle} from '@fortawesome/pro-regular-svg-icons/faTimesCircle';
40+
import {faShare} from '@fortawesome/pro-regular-svg-icons/faShare';
4041

4142
import {faFacebookF} from '@fortawesome/free-brands-svg-icons/faFacebookF';
4243
import {faInstagram} from '@fortawesome/free-brands-svg-icons/faInstagram';
@@ -253,6 +254,7 @@ export class AppComponent implements OnInit, OnDestroy {
253254
library.add(faGiftLight);
254255
library.add(faFemale);
255256
library.add(faMale);
257+
library.add(faShare);
256258
}
257259

258260
private initCookieConsent() {

‎src/app/blog/post/blog-post-view.component.html‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -24,11 +24,8 @@
2424
<div class="row">
2525
<div class="col-lg-8 col-md-10 mx-auto">
2626
<ul class="list-inline d-flex justify-content-center mt-4">
27-
<li class="list-inline-item">
28-
<a [href]="sanitize('http://twitter.com/home?status=https://fluster.io/blog/post/' + post)"><fa-icon [icon]="['fab', 'twitter']"></fa-icon></a>
29-
</li>
30-
<li class="list-inline-item">
31-
<a [href]="sanitize('http://www.facebook.com/share.php?u=https://fluster.io/blog/post/' + post)"><fa-icon [icon]="['fab', 'facebook-f']"></fa-icon></a>
27+
<li class="list-inline-item share">
28+
<a (click)="share()" class="btn"><fa-icon [icon]="['far', 'share']"></fa-icon> {{'TEXT.BUTTON_SHARE'| translate}}</a>
3229
</li>
3330
</ul>
3431
</div>
@@ -37,3 +34,5 @@
3734
</section>
3835

3936
<app-footer [home]="true" [social]="false" [language]="false" [copyright]="false"></app-footer>
37+
38+
<app-web-social-share [show]="showShare" [share]="shareOptions" (closed)="shareClose()"></app-web-social-share>

‎src/app/blog/post/blog-post-view.component.scss‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,4 +61,13 @@ app-blog-post-view {
6161
color: $fluster-peach1;
6262
}
6363

64+
li.share {
65+
a.btn {
66+
border-radius: 8px;
67+
font-size: 1rem;
68+
color: white;
69+
border-color: $fluster-peach1;
70+
}
71+
}
72+
6473
}

‎src/app/blog/post/blog-post-view.component.ts‎

Lines changed: 53 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,9 @@ import {MarkdownService} from 'ngx-markdown';
1010
import {Comparator} from '../../../providers/core/utils/utils';
1111
import {Resources} from '../../../providers/core/utils/resources';
1212

13+
// Web
14+
import {WebSocialShareInput} from 'web-social-share/dist/types/types/web-social-share/web-social-share-input';
15+
1316
@Component({
1417
selector: 'app-blog-post-view',
1518
styleUrls: ['./blog-post-view.component.scss'],
@@ -27,6 +30,9 @@ export class BlogPostViewComponent implements OnInit, OnDestroy {
2730
post: string;
2831
notFound = false;
2932

33+
showShare = false;
34+
shareOptions: WebSocialShareInput;
35+
3036
constructor(private route: ActivatedRoute,
3137
private sanitizer: DomSanitizer,
3238
private markdownService: MarkdownService,
@@ -65,7 +71,7 @@ export class BlogPostViewComponent implements OnInit, OnDestroy {
6571
const images: string[] = content.match(/(?:\/assets\/blog\/img\/post)(.*)(?:jpg|gif)/g);
6672

6773
this.meta.updateTag({property: 'og:type', content: 'article'});
68-
this.meta.updateTag({property: 'og:url', content: 'https://fluster.io/blog/post/' + this.postId});
74+
this.meta.updateTag({property: 'og:url', content: this.RESOURCES.SOCIAL_SHARING.FLUSTER_WEBSITE + '/blog/post/' + this.postId});
6975

7076
if (Comparator.hasElements(images)) {
7177
this.meta.updateTag({
@@ -101,5 +107,51 @@ export class BlogPostViewComponent implements OnInit, OnDestroy {
101107
resolve();
102108
});
103109
}
110+
111+
async share(): Promise<{}> {
112+
return new Promise((resolve) => {
113+
this.shareOptions = {
114+
config: [{
115+
facebook: {
116+
socialShareUrl: this.RESOURCES.SOCIAL_SHARING.FLUSTER_WEBSITE + + '/blog/post/' + this.postId,
117+
socialSharePopupWidth: 400,
118+
socialSharePopupHeight: 400
119+
}
120+
}, {
121+
twitter: {
122+
socialShareUrl: this.RESOURCES.SOCIAL_SHARING.FLUSTER_WEBSITE + + '/blog/post/' + this.postId,
123+
socialSharePopupWidth: 300,
124+
socialSharePopupHeight: 400
125+
}
126+
}, {
127+
reddit: {
128+
socialShareUrl: this.RESOURCES.SOCIAL_SHARING.FLUSTER_WEBSITE + + '/blog/post/' + this.postId,
129+
socialSharePopupWidth: 300,
130+
socialSharePopupHeight: 500
131+
}
132+
}, {
133+
linkedin: {
134+
socialShareUrl: this.RESOURCES.SOCIAL_SHARING.FLUSTER_WEBSITE + + '/blog/post/' + this.postId
135+
}
136+
}, {
137+
pinterest: {
138+
socialShareUrl: this.RESOURCES.SOCIAL_SHARING.FLUSTER_WEBSITE + + '/blog/post/' + this.postId
139+
}
140+
}, {
141+
email: {
142+
socialShareBody: this.RESOURCES.SOCIAL_SHARING.FLUSTER_WEBSITE + + '/blog/post/' + this.postId
143+
}
144+
}]
145+
};
146+
147+
this.showShare = true;
148+
149+
resolve();
150+
});
151+
}
152+
153+
shareClose() {
154+
this.showShare = false;
155+
}
104156
}
105157

‎src/app/blog/post/blog-post-view.module.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import {BlogPostViewComponent} from './blog-post-view.component';
88
import {ComponentsModule} from '../../../components/core/components.module';
99
import {MarkdownModule} from 'ngx-markdown';
1010
import {FontAwesomeModule} from '@fortawesome/angular-fontawesome';
11+
import {WebSocialShareModule} from '../../../components/core/web-social-share/web-social-share.module';
1112

1213
@NgModule({
1314
declarations: [BlogPostViewComponent],
@@ -20,7 +21,8 @@ import {FontAwesomeModule} from '@fortawesome/angular-fontawesome';
2021
TranslateModule.forChild(),
2122
ComponentsModule,
2223
MarkdownModule.forChild(),
23-
FontAwesomeModule
24+
FontAwesomeModule,
25+
WebSocialShareModule
2426
]
2527
})
2628
export class BlogPostViewModule {

‎src/app/item/item-view.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@
4646
<div class="row">
4747
<div class="col-md-12">
4848
<div class="badges">
49-
<a (click)="share()" class="btn btn-xl">{{'TEXT.BUTTON_SHARE'| translate}}</a>
49+
<a (click)="share()" class="btn btn-xl">{{'TEXT.BUTTON_SHARE_AD'| translate}}</a>
5050
</div>
5151
</div>
5252
</div>

‎src/assets/i18n/de.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,8 @@
5959
"SHARE": "WG-Zimmer ",
6060
"MORE": "Um einen Besichtigungstermin zu vereinbaren und mehr Details zu entdecken, öffne dieses Gesuch in unserer App",
6161
"BUTTON": "Gesuch öffnen",
62-
"BUTTON_SHARE": "Gesuch teilen"
62+
"BUTTON_SHARE_AD": "Gesuch teilen",
63+
"BUTTON_SHARE": "Teilen"
6364
},
6465
"COMMON": {
6566
"SOCIAL": {

‎src/assets/i18n/en.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,8 @@
5959
"SHARE": "Shared flat ",
6060
"MORE": "To send a viewing request and to discover more details, view this opportunity in our mobile app",
6161
"BUTTON": "Open ad",
62-
"BUTTON_SHARE": "Partager this ad"
62+
"BUTTON_SHARE_AD": "Share this ad",
63+
"BUTTON_SHARE": "Share"
6364
},
6465
"COMMON": {
6566
"SOCIAL": {

‎src/assets/i18n/fr.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,8 @@
5959
"SHARE": "Colocation ",
6060
"MORE": "Pour contacter l'annonceur et découvrir de plus amples détails, consulte cette annonce dans notre application mobile",
6161
"BUTTON": "Ouvrir l'annonce",
62-
"BUTTON_SHARE": "Partager l'annonce"
62+
"BUTTON_SHARE_AD": "Partager l'annonce",
63+
"BUTTON_SHARE": "Partager"
6364
},
6465
"COMMON": {
6566
"SOCIAL": {

‎src/assets/i18n/it.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,8 @@
5959
"SHARE": "Stanza in appartamento condiviso ",
6060
"MORE": "Per fissare un appuntamento e scoprire maggiori dettagli, visualizza questo annuncio nella nostra app",
6161
"BUTTON": "Apri l'annuncio",
62-
"BUTTON_SHARE": "Condividi l'annuncio"
62+
"BUTTON_SHARE_AD": "Condividi l'annuncio",
63+
"BUTTON_SHARE": "Condividi"
6364
},
6465
"COMMON": {
6566
"SOCIAL": {

0 commit comments

Comments
 (0)