fix 5310 : show social links bar on non-scrollable item pages (DSpace#5315)

* fix 5310 : show social links bar on non-scrollable item pages

* fix 5310 : restore floating behavior on scrollable pages and prevent footer overlap

* fix 5310 : restore floating style on all pages, only skip scroll-show when page is not scrollable

* Fix DSpace#5310: use IntersectionObserver to hide bar when footer is visible

* Fix DSpace#5310: adjustments based on feedback

* Fix DSpace#5310: adjustments spec

* Fix DSpace#5310: adjustments spec

* Fix DSpace#5310: adjustments spec re-run CI

* Fix DSpace#5310: adjustments spec re-run CI

* Fix DSpace#5310: adjustments spec re-run CI

* Fix DSpace#5310: adjustments spec re-run CI

* Fix DSpace#5310: adjustments spec re-run CI

* Fix DSpace#5310: adjustments spec re-run CI

* Fix DSpace#5310: adjustments spec re-run CI

* Fix DSpace#5310: adjustments spec re-run CI

* Fix DSpace#5310: adjustments Floating Share Buttons

Author: guillermo-escire

src/app/social/social.component.html

@@ -1,5 +1,8 @@
-<div id="dspace-a2a" [class.d-none]="(showOnCurrentRoute$ | async) !== true" data-a2a-scroll-show="0,60"
-  class="a2a_kit a2a_kit_size_32 a2a_floating_style a2a_default_style" [attr.data-a2a-title]="title" [attr.data-a2a-url]="url">
+<div id="dspace-a2a"
+  [class.d-none]="(showOnCurrentRoute$ | async) !== true"
+  class="a2a_kit a2a_kit_size_32 a2a_floating_style a2a_vertical_style"
+  [attr.data-a2a-title]="title"
+  [attr.data-a2a-url]="url">
   @for (button of buttonList; track button) {
     <a [class]="'a2a_button_' + button" [class.a2a_counter]="showCounters && button !== 'facebook'"></a>
   }

src/app/social/social.component.scss

@@ -1,7 +1,11 @@
 ::ng-deep {
-  div#dspace-a2a {
-    bottom: 0;
-    right: 0;
+  #dspace-a2a {
     z-index: 998;
+    right: 0px !important;
+    top: 150px !important;
+
+    @media screen and (max-width: 980px) {
+      display: none !important;
+    }
   }
 }

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

@@ -1,21 +1,22 @@
 import { DOCUMENT } from '@angular/common';
 import {
   ComponentFixture,
+  fakeAsync,
   TestBed,
+  tick,
 } from '@angular/core/testing';
 import { ActivatedRoute } from '@angular/router';
 import { StoreModule } from '@ngrx/store';
+import { BehaviorSubject } from 'rxjs';
 
 import { SocialComponent } from './social.component';
 import { SocialService } from './social.service';
 
 describe('SocialComponent', () => {
   let component: SocialComponent;
   let fixture: ComponentFixture<SocialComponent>;
-  let document: Document;
 
   const socialServiceStub = {};
-
   const activatedRouteStub = {} as ActivatedRoute;
 
   beforeEach(async () => {
@@ -28,12 +29,77 @@ describe('SocialComponent', () => {
     }).compileComponents();
     fixture = TestBed.createComponent(SocialComponent);
     component = fixture.componentInstance;
-    document = TestBed.inject(DOCUMENT) as any;
     fixture.detectChanges();
   });
 
   it('should create socialComponent', () => {
     expect(component).toBeTruthy();
   });
 
+  it('should initialize properties from socialService configuration on ngOnInit', () => {
+    const config = {
+      buttons: ['facebook', 'twitter'],
+      showPlusButton: true,
+      showCounters: true,
+      title: 'Test Title',
+    };
+
+    (component as any).socialService = {
+      enabled: true,
+      configuration: config,
+      initializeAddToAnyScript: () => {},
+      showOnCurrentRoute$: null,
+    };
+
+    component.ngOnInit();
+
+    expect(component.buttonList).toEqual(config.buttons);
+    expect(component.showPlusButton).toBeTrue();
+    expect(component.showCounters).toBeTrue();
+    expect(component.title).toBe('Test Title');
+  });
+
+  describe('toggle d-none', () => {
+    let toggleFixture: ComponentFixture<SocialComponent>;
+    let showOnCurrentRoute$: BehaviorSubject<boolean>;
+
+    beforeEach(async () => {
+      showOnCurrentRoute$ = new BehaviorSubject<boolean>(false);
+
+      TestBed.resetTestingModule();
+      await TestBed.configureTestingModule({
+        imports: [StoreModule.forRoot({}), SocialComponent],
+        providers: [
+          { provide: ActivatedRoute, useValue: activatedRouteStub },
+          {
+            provide: SocialService,
+            useValue: {
+              enabled: true,
+              configuration: { buttons: [], showPlusButton: false, showCounters: false, title: '' },
+              initializeAddToAnyScript: () => {},
+              showOnCurrentRoute$: showOnCurrentRoute$,
+            },
+          },
+        ],
+      }).compileComponents();
+
+      toggleFixture = TestBed.createComponent(SocialComponent);
+      toggleFixture.detectChanges();
+    });
+
+    it('should toggle d-none class based on showOnCurrentRoute$', fakeAsync(() => {
+      const doc = TestBed.inject(DOCUMENT);
+
+      const bar = doc.getElementById('dspace-a2a');
+      expect(bar).toBeTruthy();
+      expect(bar.classList.contains('d-none')).toBeTrue();
+
+      showOnCurrentRoute$.next(true);
+      tick();
+      toggleFixture.detectChanges();
+
+      expect(bar.classList.contains('d-none')).toBeFalse();
+    }));
+  });
+
 });

src/app/social/social.component.ts

@@ -22,13 +22,13 @@ import { SocialService } from './social.service';
  */
 export class SocialComponent implements OnInit {
 
+
   /**
    * The script containing the profile ID
    */
   script: HTMLScriptElement;
 
   showOnCurrentRoute$: Observable<boolean>;
-
   buttonList: string[];
   showPlusButton: boolean;
   title: string;