Merge pull request #10 from clarivate/mohan/customize_interface

Clean up and localization support

Author: kdimatteo

projects/angular-image-viewer/src/lib/angular-image-viewer.component.html

@@ -1,13 +1,13 @@
 <div [appScreenfull]="fullscreen" class="img-container" [style.backgroundColor]="config.containerBackgroundColor"
     (wheel)="scrollZoom($event)">
     <div class="image-name" *ngIf="imageName">
-      <span>{{ imageName }}</span>
+      <span>{{imageName}}</span>
     </div>
 
     <div cdkDrag class="drag-element">
         <img [src]="src[index]" [ngStyle]="style" alt=""
             (cdkDragStarted)="onDragStart($event)"
-            (load)="onLoad(src[index])" (loadstart)="onLoadStart(src[index])" (error)="imageNotFound(src[index])" />
+            (load)="onLoad()" (loadstart)="onLoadStart()" (error)="imageNotFound()" />
     </div>
 
     <div class="spinner-container" *ngIf="loading">
@@ -59,10 +59,10 @@
         </button>
     </div>
     <div class="footer-section">
-        <div class="image-txt-count-left-align"><span>Image {{index + 1}} of {{src.length}}</span></div>
+        <div class="image-txt-count-left-align"><span>{{footerTexts[0]}} {{index + 1}} {{footerTexts[1]}} {{src.length}}</span></div>
         <div class="footer-txt-right-align">
-            <span class="footer-txt-right-align-title" [style.color]="config.primaryColor" >View previous or next image</span>
-            <span class="footer-txt-right-align-note">using < > on the keyboard</span>
+            <span class="footer-txt-right-align-title" [style.color]="config.primaryColor">{{footerTexts[2]}}</span>
+            <span class="footer-txt-right-align-note">{{footerTexts[3]}}</span>
         </div>
     </div>
 </div>

projects/angular-image-viewer/src/lib/angular-image-viewer.component.ts

@@ -43,6 +43,9 @@ export class AngularImageViewerComponent implements OnInit, OnChanges {
   @Input()
   src: string[];
 
+  @Input()
+  config: ImageViewerConfig;
+
   @Input()
   screenHeightOccupied: 0;             // In Px
 
@@ -53,7 +56,12 @@ export class AngularImageViewerComponent implements OnInit, OnChanges {
   imageName: string;
 
   @Input()
-  config: ImageViewerConfig;
+  footerTexts = [
+    'Image',
+    'of',
+    'View previous or next image',
+    'using < > on the keyboard'
+  ];
 
   @Output()
   indexChange: EventEmitter<number> = new EventEmitter();
@@ -74,8 +82,7 @@ export class AngularImageViewerComponent implements OnInit, OnChanges {
   private rotation = 0;
   private hovered = false;
 
-  constructor(@Optional() @Inject('config') public moduleConfig: ImageViewerConfig,
-    private sanitizer: DomSanitizer) { }
+  constructor(@Optional() @Inject('config') public moduleConfig: ImageViewerConfig) { }
 
   ngOnChanges(changes: SimpleChanges) {
     if (changes.screenHeightOccupied) {
@@ -140,15 +147,15 @@ export class AngularImageViewerComponent implements OnInit, OnChanges {
     this.updateStyle();
   }
 
-  onLoad(url) {
+  onLoad() {
     this.loading = false;
   }
 
-  onLoadStart(url) {
+  onLoadStart() {
     this.loading = true;
   }
 
-  imageNotFound(url) {
+  imageNotFound() {
   }
 
   onDragStart(evt) {

src/app/app.component.html

@@ -1,5 +1,5 @@
 <div class="container">
   <angular-image-viewer [src]="images" [(config)]="config" [(index)]="imageIndex" [imageName]="'Image Name ' + imageIndex"
-    [screenHeightOccupied]='0' (customImageEvent)="handleEvent($event)">
+    [screenHeightOccupied]='0' (customImageEvent)="handleEvent($event)" [footerTexts]="footerTexts">
   </angular-image-viewer>
 </div>

src/app/app.component.ts

@@ -18,6 +18,12 @@ export class AppComponent {
   ];
   imageIndex = 0;
   imageName: string;
+  footerTexts = [
+    'Image',
+    'of',
+    'View previous or next image',
+    'using < > on the keyboard'
+  ];
   config: ImageViewerConfig = {
     wheelZoom: true,
     allowKeyboardNavigation: true,