docs: docs for string translation

sachinchoolur · Jan 29, 2022 · e77e83f · e77e83f
1 parent 3e4f0a9
commit e77e83f
Show file tree

Hide file tree

Showing 8 changed files with 73 additions and 17 deletions.
diff --git a/src/lg-settings.ts b/src/lg-settings.ts
@@ -31,6 +31,15 @@ export interface MobileSettings
         Partial<RotateSettings>,
         Partial<ShareSettings> {}
 
+export interface LightGalleryCoreStrings {
+    closeGallery: string;
+    toggleMaximize: string;
+    previousSlide: string;
+    nextSlide: string;
+    download: string;
+    playVideo: string;
+}
+
 export type LightGalleryAllSettings = LightGalleryCoreSettings &
     ZoomSettings &
     ThumbnailsSettings &
@@ -503,9 +512,15 @@ export interface LightGalleryCoreSettings {
      */
     mobileSettings: Partial<MobileSettings>;
 
-    plugins: (new (instance: LightGallery, $LG: LgQuery) => any)[];
+    /**
+     * Aria label strings for lightGallery core modules.
+     * @description This can be useful if you want to localize the lightGallery strings to other languages.
+     * Use your own service to translate the strings and pass it via settings.strings
+     * You can find dedicated strings option for all lightGallery modules in their respective documentation.
+     */
+    strings: LightGalleryCoreStrings;
 
-    strings: { [key: string]: string };
+    plugins: (new (instance: LightGallery, $LG: LgQuery) => any)[];
 }
 
 export const lightGalleryCoreSettings: LightGalleryCoreSettings = {
@@ -581,5 +596,5 @@ export const lightGalleryCoreSettings: LightGalleryCoreSettings = {
         nextSlide: 'Next slide',
         download: 'Download',
         playVideo: 'Play video',
-    },
+    } as LightGalleryCoreStrings,
 };
diff --git a/src/plugins/autoplay/lg-autoplay-settings.ts b/src/plugins/autoplay/lg-autoplay-settings.ts
@@ -1,3 +1,7 @@
+export interface AutoplayStrings {
+    toggleAutoplay: string;
+}
+
 export interface AutoplaySettings {
     /**
      * Enable autoplay plugin
@@ -37,7 +41,7 @@ export interface AutoplaySettings {
     /**
      * Custom translation strings for aria-labels
      */
-    autoplayPluginStrings: { [key: string]: string };
+    autoplayPluginStrings: AutoplayStrings;
 }
 export const autoplaySettings: AutoplaySettings = {
     autoplay: true,
@@ -47,5 +51,7 @@ export const autoplaySettings: AutoplaySettings = {
     forceSlideShowAutoplay: false,
     autoplayControls: true,
     appendAutoplayControlsTo: '.lg-toolbar',
-    autoplayPluginStrings: { toggleAutoplay: 'Toggle Autoplay' },
+    autoplayPluginStrings: {
+        toggleAutoplay: 'Toggle Autoplay',
+    } as AutoplayStrings,
 };
diff --git a/src/plugins/comment/lg-comment-settings.ts b/src/plugins/comment/lg-comment-settings.ts
@@ -1,3 +1,7 @@
+export interface CommentStrings {
+    toggleComments: string;
+}
+
 export interface CommentSettings {
     /**
      * Enable comment box
@@ -28,7 +32,7 @@ export interface CommentSettings {
     /**
      * Custom translation strings for aria-labels
      */
-    commentPluginStrings: { [key: string]: string };
+    commentPluginStrings: CommentStrings;
 }
 
 export const commentSettings: CommentSettings = {
@@ -41,5 +45,7 @@ export const commentSettings: CommentSettings = {
     },
     commentsMarkup:
         '<div id="lg-comment-box" class="lg-comment-box lg-fb-comment-box"><div class="lg-comment-header"><h3 class="lg-comment-title">Leave a comment.</h3><span class="lg-comment-close lg-icon"></span></div><div class="lg-comment-body"></div></div>',
-    commentPluginStrings: { toggleComments: 'Toggle Comments' },
+    commentPluginStrings: {
+        toggleComments: 'Toggle Comments',
+    } as CommentStrings,
 };
diff --git a/src/plugins/fullscreen/lg-fullscreen-settings.ts b/src/plugins/fullscreen/lg-fullscreen-settings.ts
@@ -1,3 +1,6 @@
+export interface FullscreenStrings {
+    toggleFullscreen: string;
+}
 export interface FullscreenSettings {
     /**
      * Enable/Disable fullscreen option
@@ -7,10 +10,12 @@ export interface FullscreenSettings {
     /**
      * Custom translation strings for aria-labels
      */
-    fullscreenPluginStrings: { [key: string]: string };
+    fullscreenPluginStrings: FullscreenStrings;
 }
 
 export const fullscreenSettings: FullscreenSettings = {
     fullScreen: true,
-    fullscreenPluginStrings: { toggleFullscreen: 'Toggle Fullscreen' },
+    fullscreenPluginStrings: {
+        toggleFullscreen: 'Toggle Fullscreen',
+    } as FullscreenStrings,
 };
diff --git a/src/plugins/rotate/lg-rotate-settings.ts b/src/plugins/rotate/lg-rotate-settings.ts
@@ -1,3 +1,10 @@
+export interface RotateStrings {
+    flipVertical: string;
+    flipHorizontal: string;
+    rotateLeft: string;
+    rotateRight: string;
+}
+
 export interface RotateSettings {
     /**
      * Enable/Disable rotate option
@@ -32,7 +39,7 @@ export interface RotateSettings {
     /**
      * Custom translation strings for aria-labels
      */
-    rotatePluginStrings: { [key: string]: string };
+    rotatePluginStrings: RotateStrings;
 }
 export const rotateSettings = {
     rotate: true,
@@ -46,5 +53,5 @@ export const rotateSettings = {
         flipHorizontal: 'Flip horizontal',
         rotateLeft: 'Rotate left',
         rotateRight: 'Rotate right',
-    },
+    } as RotateStrings,
 };
diff --git a/src/plugins/share/lg-share-settings.ts b/src/plugins/share/lg-share-settings.ts
@@ -1,5 +1,9 @@
 import { ShareOption } from './types';
 
+export interface ShareStrings {
+    share: string;
+}
+
 export interface ShareSettings {
     /**
      * Enable/Disable share options
@@ -48,7 +52,7 @@ export interface ShareSettings {
     /**
      * Custom translation strings for aria-labels
      */
-    sharePluginStrings: { [key: string]: string };
+    sharePluginStrings: ShareStrings;
 }
 
 export const shareSettings = {
@@ -60,5 +64,5 @@ export const shareSettings = {
     pinterest: true,
     pinterestDropdownText: 'Pinterest',
     additionalShareOptions: [],
-    sharePluginStrings: { share: 'Share' },
+    sharePluginStrings: { share: 'Share' } as ShareStrings,
 };
diff --git a/src/plugins/thumbnail/lg-thumbnail-settings.ts b/src/plugins/thumbnail/lg-thumbnail-settings.ts
@@ -1,3 +1,7 @@
+interface ThumbnailStrings {
+    toggleThumbnails: string;
+}
+
 export interface ThumbnailsSettings {
     /**
      * Enable thumbnails for the gallery
@@ -78,7 +82,7 @@ export interface ThumbnailsSettings {
     /**
      * Custom translation strings for aria-labels
      */
-    thumbnailPluginStrings: { [key: string]: string };
+    thumbnailPluginStrings: ThumbnailStrings;
 }
 
 export const thumbnailsSettings: ThumbnailsSettings = {
@@ -102,5 +106,7 @@ export const thumbnailsSettings: ThumbnailsSettings = {
     loadYouTubeThumbnail: true,
     youTubeThumbSize: 1,
 
-    thumbnailPluginStrings: { toggleThumbnails: 'Toggle thumbnails' },
+    thumbnailPluginStrings: {
+        toggleThumbnails: 'Toggle thumbnails',
+    } as ThumbnailStrings,
 };
diff --git a/src/plugins/zoom/lg-zoom-settings.ts b/src/plugins/zoom/lg-zoom-settings.ts
@@ -2,6 +2,13 @@ export interface ActualSizeIcons {
     zoomIn: 'lg-zoom-in' | 'lg-actual-size';
     zoomOut: 'lg-zoom-out' | 'lg-actual-size';
 }
+
+export interface ZoomStrings {
+    zoomIn: string;
+    zoomOut: string;
+    viewActualSize: string;
+}
+
 export interface ZoomSettings {
     /**
      * Value of zoom should be incremented/decremented
@@ -42,7 +49,7 @@ export interface ZoomSettings {
     /**
      * Custom translation strings for aria-labels
      */
-    zoomPluginStrings: { [key: string]: string };
+    zoomPluginStrings: ZoomStrings;
 }
 
 export const zoomSettings: ZoomSettings = {
@@ -59,5 +66,5 @@ export const zoomSettings: ZoomSettings = {
         zoomIn: 'Zoom in',
         zoomOut: 'Zoom out',
         viewActualSize: 'View actual size',
-    },
+    } as ZoomStrings,
 };