Merge pull request #1645 from UUDigitalHumanitieslab/feature/toggle-b…

…utton-directive Feature/toggle button directive
CentreForDigitalHumanities · Aug 30, 2024 · 8f21960 · 8f21960
2 parents 4e5a6d7 + 4c5d68d
commit 8f21960
Show file tree

Hide file tree

Showing 8 changed files with 105 additions and 21 deletions.
diff --git a/frontend/src/app/image-view/image-navigation.component.html b/frontend/src/app/image-view/image-navigation.component.html
@@ -4,9 +4,10 @@
         <fa-icon [icon]="scanIcons.prev" aria-hidden="true"></fa-icon>
     </button>
     <ng-container *ngFor="let pageNumber of buttonArray">
-        <a class="button is-small" [ngClass]="{'is-primary':pageNumber===page}" (click)="goToPage(pageNumber)">
+        <button class="button is-small" iaToggleButton [active]="pageNumber===page"
+            (click)="goToPage(pageNumber)">
             {{pageNumber}}
-        </a>
+    </button>
     </ng-container>
     <button id="nextButton" class="button is-small" (click)="nextPage()"
         aria-label="next page">

diff --git a/frontend/src/app/search/pagination/pagination.component.html b/frontend/src/app/search/pagination/pagination.component.html
@@ -8,14 +8,11 @@
         <li *ngIf="currentPages[0]>2">
             <span class="pagination-ellipsis">&hellip;</span>
         </li>
-        <li>
-            <button [ngClass]="{'is-current': currentPage===currentPages[0]}" class="pagination-link" (click)="loadResults(currentPages[0])">{{currentPages[0]}}</button>
-        </li>
-        <li>
-            <button [ngClass]="{'is-current': currentPage===currentPages[1]}" class="pagination-link" (click)="loadResults(currentPages[1])">{{currentPages[1]}}</button>
-        </li>
-        <li *ngIf="totalResults>resultsPerPage*2">
-            <button [ngClass]="{'is-current': currentPage===currentPages[2]}" class="pagination-link" (click)="loadResults(currentPages[2])">{{currentPages[2]}}</button>
+        <li *ngFor="let page of currentPages">
+            <button iaToggleButton [active]="currentPage===page"
+                activeClass="is-current" class="pagination-link"
+                (click)="loadResults(page)">{{page}}
+            </button>
         </li>
         <li *ngIf="currentPages[2]<totalPages-1">
             <span class="pagination-ellipsis">&hellip;</span>

diff --git a/frontend/src/app/shared/shared.module.ts b/frontend/src/app/shared/shared.module.ts
@@ -17,6 +17,7 @@ import { TabPanelDirective } from './tabs/tab-panel.directive';
 import { TabsComponent } from './tabs/tabs.component';
 import { ToggleComponent } from './toggle/toggle.component';
 import { SlugifyPipe } from './pipes/slugify.pipe';
+import { ToggleButtonDirective } from './toggle-button.directive';
 
 @NgModule({
     declarations: [
@@ -28,6 +29,7 @@ import { SlugifyPipe } from './pipes/slugify.pipe';
         TabPanelDirective,
         ToggleComponent,
         SlugifyPipe,
+        ToggleButtonDirective,
     ],
     exports: [
         // shared components
@@ -36,6 +38,7 @@ import { SlugifyPipe } from './pipes/slugify.pipe';
         ScrollToDirective,
         TabsComponent,
         TabPanelDirective,
+        ToggleButtonDirective,
 
         // shared modules
         BrowserAnimationsModule,

diff --git a/frontend/src/app/shared/toggle-button.directive.spec.ts b/frontend/src/app/shared/toggle-button.directive.spec.ts
@@ -0,0 +1,54 @@
+import { Component } from '@angular/core';
+import { ToggleButtonDirective } from './toggle-button.directive';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { CommonModule } from '@angular/common';
+
+@Component({
+    template: `
+    <button class="button" iaToggleButton [active]="active" [activeClass]="class">
+        Test
+    </button>
+    `,
+})
+class ToggleButtonTestComponent {
+    active = false;
+    class = 'is-primary';
+}
+
+describe('ToggleButtonDirective', () => {
+    let fixture: ComponentFixture<ToggleButtonTestComponent>;
+    let component: ToggleButtonTestComponent;
+    let button: HTMLButtonElement;
+
+    beforeEach(() => {
+        TestBed.configureTestingModule({
+            declarations: [ToggleButtonTestComponent, ToggleButtonDirective],
+            imports: [CommonModule],
+        });
+        fixture = TestBed.createComponent(ToggleButtonTestComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+        const element = fixture.debugElement.nativeElement as Element;
+        button = element.querySelector('button');
+
+    });
+
+    it('should show toggle state', () => {
+        expect(button.className).toEqual('button');
+        expect(button.getAttribute('aria-pressed')).toBe('false');
+
+        component.active = true;
+        fixture.detectChanges();
+
+        expect(button.className).toEqual('button is-primary');
+        expect(button.getAttribute('aria-pressed')).toBe('true');
+    });
+
+    it('should set the CSS class through input', () => {
+        component.class = 'is-danger';
+        component.active = true;
+        fixture.detectChanges();
+
+        expect(button.className).toEqual('button is-danger');
+    });
+});
diff --git a/frontend/src/app/shared/toggle-button.directive.ts b/frontend/src/app/shared/toggle-button.directive.ts
@@ -0,0 +1,17 @@
+import { Directive, HostBinding, Input } from '@angular/core';
+
+@Directive({
+    selector: 'button[iaToggleButton]',
+})
+export class ToggleButtonDirective {
+    @HostBinding('attr.aria-pressed')
+    @Input() active: boolean;
+
+    /** name of the CSS class that should be applied when active */
+    @Input() activeClass: string = 'is-primary';
+
+    @HostBinding('class')
+    get classes(): Record<string, boolean> {
+        return { [this.activeClass]: this.active }
+    }
+}
diff --git a/frontend/src/app/visualization/freqtable.component.html b/frontend/src/app/visualization/freqtable.component.html
@@ -26,15 +26,17 @@
         <div class="level-item" *ngIf="wideFormatColumn !== undefined" iaBalloon="change the format for the table">
             <div class="field has-addons">
                 <div class="control">
-                    <button class="button" [class.is-primary]="format === 'long'" (click)="setFormat('long')">long format</button>
+                    <button class="button" iaToggleButton [active]="format === 'long'"
+                        (click)="setFormat('long')">long format</button>
                 </div>
                 <div class="control">
-                    <button class="button" [class.is-primary]="format === 'wide'" (click)="setFormat('wide')">wide format</button>
+                    <button class="button" iaToggleButton [active]="format === 'wide'"
+                        (click)="setFormat('wide')">wide format</button>
                 </div>
             </div>
         </div>
         <div class="level-item" *ngIf="!disableFullTable">
-            <button class="button" [class.is-primary]="fullTableToggle === true" (click)="toggleFullTable()">Show extra
+            <button class="button" iaToggleButton [active]="fullTableToggle" (click)="toggleFullTable()">Show extra
                 columns</button>
         </div>
     </div>

diff --git a/frontend/src/app/visualization/visualization.component.html b/frontend/src/app/visualization/visualization.component.html
@@ -61,13 +61,15 @@
                 <div class="field has-addons">
                     <!-- Buttons for switching between table and graphical representation -->
                     <div class="control">
-                        <button class="button" [class.is-primary]="!freqtable" (click)="freqtable = false">
-                            <fa-icon [icon]="visualizationIcons.chart" aria-label="view chart"></fa-icon>
+                        <button class="button" iaToggleButton [active]="!freqtable"
+                            (click)="freqtable = false" aria-label="view chart">
+                            <fa-icon [icon]="visualizationIcons.chart" aria-hidden="true" />
                         </button>
                     </div>
                     <div class="control">
-                        <button class="button" [class.is-primary]="freqtable" (click)="freqtable = true">
-                            <fa-icon [icon]="visualizationIcons.table" aria-label="view table"></fa-icon>
+                        <button class="button" iaToggleButton [active]="freqtable"
+                            (click)="freqtable = true" aria-label="view table">
+                            <fa-icon [icon]="visualizationIcons.table" aria-hidden="true"/>
                         </button>
                     </div>
                 </div>

diff --git a/frontend/src/app/word-models/word-models.component.html b/frontend/src/app/word-models/word-models.component.html
@@ -34,13 +34,21 @@
                                 <div class="field has-addons">
                                     <!-- Buttons for switching between table and graphical representation -->
                                     <div class="control">
-                                        <button class="button" [class.is-primary]="!asTable" (click)="asTable = false">
-                                            <fa-icon [icon]="visualizationIcons.chart" aria-label="view chart"></fa-icon>
+                                        <button class="button" iaToggleButton
+                                            [active]="!asTable"
+                                            (click)="asTable = false"
+                                            aria-label="view chart">
+                                            <fa-icon [icon]="visualizationIcons.chart"
+                                                aria-hidden="true" />
                                         </button>
                                     </div>
                                     <div class="control">
-                                        <button class="button" [class.is-primary]="asTable" (click)="asTable = true">
-                                            <fa-icon [icon]="visualizationIcons.table" aria-label="view table"></fa-icon>
+                                        <button class="button" iaToggleButton
+                                            [active]="asTable"
+                                            (click)="asTable = true"
+                                            aria-label="view table">
+                                            <fa-icon [icon]="visualizationIcons.table"
+                                                aria-hidden="true" />
                                         </button>
                                     </div>
                                 </div>