Skip to content

Commit a6f4807

Browse files
PawelZlakowskiPawelZlakowski
committed
feature: backport social share links from cris
1 parent 1aac6a2 commit a6f4807

14 files changed

Lines changed: 282 additions & 2 deletions

‎src/app/app.component.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
11
<ds-root
22
[shouldShowFullscreenLoader]="(isAuthBlocking$ | async) || (isThemeLoading$ | async)"
33
[shouldShowRouteLoader]="isRouteLoading$ | async"></ds-root>
4+
5+
@if (browserPlatform) {
6+
<ds-social></ds-social>
7+
}

‎src/app/app.component.ts‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,8 @@ import { IdleModalComponent } from './shared/idle-modal/idle-modal.component';
5252
import { CSSVariableService } from './shared/sass-helper/css-variable.service';
5353
import { HostWindowState } from './shared/search/host-window.reducer';
5454
import { ThemeService } from './shared/theme-support/theme.service';
55+
import { SocialComponent } from './social/social.component';
56+
import { SocialService } from './social/social.service';
5557

5658
@Component({
5759
selector: 'ds-app',
@@ -60,6 +62,7 @@ import { ThemeService } from './shared/theme-support/theme.service';
6062
changeDetection: ChangeDetectionStrategy.OnPush,
6163
imports: [
6264
AsyncPipe,
65+
SocialComponent,
6366
ThemedRootComponent,
6467
],
6568
})
@@ -87,6 +90,11 @@ export class AppComponent implements OnInit, AfterViewInit {
8790
*/
8891
idleModalOpen: boolean;
8992

93+
/**
94+
* In order to show sharing component only in csr
95+
*/
96+
browserPlatform = false;
97+
9098
constructor(
9199
@Inject(NativeWindowService) private _window: NativeWindowRef,
92100
@Inject(DOCUMENT) private document: any,
@@ -99,16 +107,20 @@ export class AppComponent implements OnInit, AfterViewInit {
99107
private cssService: CSSVariableService,
100108
private modalService: NgbModal,
101109
private modalConfig: NgbModalConfig,
110+
private socialService: SocialService,
102111
) {
103112
this.notificationOptions = environment.notifications;
113+
this.browserPlatform = isPlatformBrowser(this.platformId);
104114

105-
if (isPlatformBrowser(this.platformId)) {
115+
if (this.browserPlatform) {
106116
this.trackIdleModal();
107117
}
108118

109119
this.isThemeLoading$ = this.themeService.isThemeLoading$;
110120

111121
this.storeCSSVariables();
122+
123+
this.socialService.initialize();
112124
}
113125

114126
ngOnInit() {

‎src/app/home-page/home-page-routes.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ export const ROUTES: Route[] = [
1111
pathMatch: 'full',
1212
data: {
1313
title: 'home.title',
14+
showSocialButtons: true,
1415
menu: {
1516
public: [{
1617
id: 'statistics_site',

‎src/app/item-page/item-page-routes.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,9 @@ export const ROUTES: Route[] = [
4141
},
4242
{
4343
path: ':id',
44+
data: {
45+
showSocialButtons: true,
46+
},
4447
resolve: {
4548
dso: itemPageResolver,
4649
itemRequest: accessTokenResolver,

‎src/app/search-page/search-page-routes.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@ import { ThemedSearchPageComponent } from './themed-search-page.component';
77

88
export const ROUTES: Route[] = [{
99
path: '',
10-
resolve: { breadcrumb: i18nBreadcrumbResolver }, data: { title: 'search.title', breadcrumbKey: 'search' },
10+
resolve: { breadcrumb: i18nBreadcrumbResolver },
11+
data: { title: 'search.title', breadcrumbKey: 'search', showSocialButtons: true },
1112
children: [
1213
{ path: '', component: ThemedSearchPageComponent },
1314
{

‎src/app/social/social.component.html‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<div id="dspace-a2a" [class.d-none]="(showOnCurrentRoute$ | async) !== true" data-a2a-scroll-show="0,60"
2+
class="a2a_kit a2a_kit_size_32 a2a_floating_style a2a_default_style" [attr.data-a2a-title]="title" [attr.data-a2a-url]="url">
3+
@for (button of buttonList; track button) {
4+
<a [class]="'a2a_button_' + button" [class.a2a_counter]="showCounters && button !== 'facebook'"></a>
5+
}
6+
@if (showPlusButton) {
7+
<a class="a2a_dd" href="https://www.addtoany.com/share"></a>
8+
}
9+
</div>

‎src/app/social/social.component.scss‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
::ng-deep {
2+
div#dspace-a2a {
3+
bottom: 0;
4+
right: 0;
5+
z-index: 998;
6+
}
7+
}

‎src/app/social/social.component.spec.ts‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import { DOCUMENT } from '@angular/common';
2+
import {
3+
ComponentFixture,
4+
TestBed,
5+
} from '@angular/core/testing';
6+
import { ActivatedRoute } from '@angular/router';
7+
import { StoreModule } from '@ngrx/store';
8+
9+
import { SocialComponent } from './social.component';
10+
import { SocialService } from './social.service';
11+
12+
describe('SocialComponent', () => {
13+
let component: SocialComponent;
14+
let fixture: ComponentFixture<SocialComponent>;
15+
let document: Document;
16+
17+
const socialServiceStub = {};
18+
19+
const activatedRouteStub = {} as ActivatedRoute;
20+
21+
beforeEach(async () => {
22+
await TestBed.configureTestingModule({
23+
imports: [StoreModule.forRoot({}), SocialComponent],
24+
providers: [
25+
{ provide: ActivatedRoute, useValue: activatedRouteStub },
26+
{ provide: SocialService, useValue: socialServiceStub },
27+
],
28+
}).compileComponents();
29+
fixture = TestBed.createComponent(SocialComponent);
30+
component = fixture.componentInstance;
31+
document = TestBed.inject(DOCUMENT) as any;
32+
fixture.detectChanges();
33+
});
34+
35+
it('should create socialComponent', () => {
36+
expect(component).toBeTruthy();
37+
});
38+
39+
});

‎src/app/social/social.component.ts‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import { AsyncPipe } from '@angular/common';
2+
import {
3+
ChangeDetectionStrategy,
4+
Component,
5+
OnInit,
6+
} from '@angular/core';
7+
import { Observable } from 'rxjs';
8+
9+
import { SocialService } from './social.service';
10+
11+
@Component({
12+
selector: 'ds-social',
13+
templateUrl: './social.component.html',
14+
styleUrls: ['./social.component.scss'],
15+
changeDetection: ChangeDetectionStrategy.OnPush,
16+
imports: [
17+
AsyncPipe,
18+
],
19+
})
20+
/**
21+
* Component to render dynamically the social2 buttons using addToAny plugin
22+
*/
23+
export class SocialComponent implements OnInit {
24+
25+
/**
26+
* The script containing the profile ID
27+
*/
28+
script: HTMLScriptElement;
29+
30+
showOnCurrentRoute$: Observable<boolean>;
31+
32+
buttonList: string[];
33+
showPlusButton: boolean;
34+
title: string;
35+
url: string;
36+
showCounters: boolean;
37+
38+
constructor(
39+
private socialService: SocialService,
40+
) {}
41+
42+
ngOnInit() {
43+
if (this.socialService.enabled) {
44+
this.buttonList = this.socialService.configuration.buttons;
45+
this.showPlusButton = this.socialService.configuration.showPlusButton;
46+
this.showCounters = this.socialService.configuration.showCounters;
47+
this.title = this.socialService.configuration.title;
48+
this.socialService.initializeAddToAnyScript();
49+
this.showOnCurrentRoute$ = this.socialService.showOnCurrentRoute$;
50+
}
51+
}
52+
53+
}

‎src/app/social/social.service.ts‎

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
import {
2+
DOCUMENT,
3+
isPlatformBrowser,
4+
} from '@angular/common';
5+
import {
6+
DestroyRef,
7+
Inject,
8+
inject,
9+
Injectable,
10+
PLATFORM_ID,
11+
} from '@angular/core';
12+
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
13+
import {
14+
ChildActivationEnd,
15+
Router,
16+
} from '@angular/router';
17+
import { BehaviorSubject } from 'rxjs';
18+
import {
19+
distinctUntilChanged,
20+
filter,
21+
map,
22+
} from 'rxjs/operators';
23+
24+
import { environment } from '../../environments/environment';
25+
26+
@Injectable( { providedIn: 'root' } )
27+
export class SocialService {
28+
private destroyRef = inject(DestroyRef);
29+
30+
private showOnCurrentRouteSubject = new BehaviorSubject(false);
31+
32+
/**
33+
* Show/hide the social buttons according to the activated route
34+
*/
35+
showOnCurrentRoute$ = this.showOnCurrentRouteSubject.asObservable();
36+
37+
private readonly isSocialEnabled: boolean;
38+
39+
constructor(
40+
@Inject(PLATFORM_ID) protected platformId: any,
41+
@Inject(DOCUMENT) private _document: Document,
42+
private router: Router,
43+
) {
44+
this.isSocialEnabled = isPlatformBrowser(this.platformId) && environment.addToAnyPlugin.socialNetworksEnabled;
45+
}
46+
47+
/**
48+
* Traverse tree from bottom to parent in route definition to get whenever feature is enabled via *showSocialButtons*
49+
*/
50+
private activatedRouteDataChanges$ = this.router.events.pipe(
51+
filter(events => events instanceof ChildActivationEnd),
52+
map((event: ChildActivationEnd) => event.snapshot),
53+
map(route => {
54+
while (route.firstChild) {
55+
route = route.firstChild;
56+
}
57+
return route;
58+
}),
59+
filter(route => route.outlet === 'primary'),
60+
map(route => route.data),
61+
);
62+
63+
/**
64+
* Returns whether the social network buttons are enabled
65+
*/
66+
get enabled() {
67+
return this.isSocialEnabled;
68+
}
69+
70+
/**
71+
* Returns the list of available buttons
72+
*/
73+
get configuration() {
74+
return environment.addToAnyPlugin;
75+
}
76+
77+
/**
78+
* Import the AddToAny JavaScript
79+
*/
80+
initializeAddToAnyScript(): any {
81+
// Initializing the addToAny script
82+
const script = this._document.createElement('script');
83+
script.type = 'text/javascript';
84+
script.src = environment.addToAnyPlugin.scriptUrl;
85+
script.async = true;
86+
87+
// Wait for document to finish grow vertically so that script listener handles properly body height changes
88+
let lastBodyHeight = 0;
89+
const documentBody = this._document.body;
90+
91+
const bodyHeightInterval = setInterval(() => {
92+
const currentBodyHeight = documentBody.getBoundingClientRect().height;
93+
94+
if (currentBodyHeight > lastBodyHeight) {
95+
lastBodyHeight = currentBodyHeight;
96+
} else {
97+
this._document.head.appendChild(script);
98+
clearInterval(bodyHeightInterval);
99+
}
100+
}, 200);
101+
}
102+
103+
/**
104+
* Initialize the Social service. This method must be called only inside app component.
105+
*/
106+
initialize() {
107+
if (!this.enabled) {
108+
return;
109+
}
110+
111+
const showSocialButtons = this.activatedRouteDataChanges$.pipe(
112+
map(data => data?.showSocialButtons === true),
113+
distinctUntilChanged(),
114+
takeUntilDestroyed(this.destroyRef),
115+
);
116+
117+
showSocialButtons.subscribe(this.showOnCurrentRouteSubject);
118+
}
119+
120+
}

0 commit comments

Comments
 (0)