Image viewer navigation controls

Author: way5

package.json

@@ -1,6 +1,6 @@
 {
  "name": "react-document-viewer",
- "version": "2.3.1",
+ "version": "2.3.2",
  "description": "React-based component which provides epub,mobi,pdf,xls,xlsx,docx and image viewer capabilities for your browser",
  "main": "src/index.js",
  "author": "Sergey Ko <u306060@gmail.com>",

readme.md

@@ -1,16 +1,16 @@
-<p align="center"> 
+<p align="center">
 
-![ReactDocViewer Logo](./doc/logo.png) 
+![ReactDocViewer Logo](./doc/logo.png)
 
 </p>
 
-![React Document Viewer Version](https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fraw.githubusercontent.com%2Fway5%2Freact-document-viewer%2Frefs%2Fheads%2Fdev%2Fpackage.json&query=%24.version&label=ReactDocViewer:&color=%23F86071)
+![React Document Viewer Version](https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fraw.githubusercontent.com%2Fway5%2Freact-document-viewer%2Frefs%2Fheads%2Fmaster%2Fpackage.json&query=%24.version&label=ReactDocViewer:&color=%23F86071)
 
 ### + INTRO
 
 Accepted document formats:
 
-- docx 
+- docx
 - xls, xlsx
 - pdf
 - epub

src/index.js

@@ -12,10 +12,6 @@ if (process.env.NODE_ENV === 'development') {
  files: [
  { src: '/docs/test.jpg', name: '', type: '' },
  { src: '/docs/test.webp', name: 'Image #2', type: '' },
- { src: '/docs/test.jpg', name: '', type: '' },
- { src: '/docs/test.webp', name: 'Image #3', type: '' },
- { src: '/docs/test.jpg', name: '', type: '' },
- { src: '/docs/test.webp', name: 'Image #4', type: '' }
  ],
  downloadInNewWindow: false,
  noNavbar: false,

src/locales/en-US.json

@@ -21,6 +21,9 @@
  "pageWidthOption": "Page Width",
  "sidebarToggle": "Toggle Sidebar",
  "viewThumbnail": "Show Thumbnails",
+ "gotoFirst": "To the beginning",
+ "gotoLast": "To the end",
+ "navbarClickToDownload": "Click to download",
  "resetView": "Reset view",
  "formatInfoDocx": "Please upload a file in DOCX format",
  "formatInfoPPTx": "PPT(X) format is not supported at the moment",

src/locales/es-ES.json

@@ -21,6 +21,9 @@
  "pageWidthOption": "Ajuste de anchura",
  "sidebarToggle": "Barra lateral",
  "viewThumbnail": "Ver miniaturas",
+ "gotoFirst": "Ir al inicio",
+ "gotoLast": "Ir al final",
+ "navbarClickToDownload": "Haga clic para descargar",
  "resetView": "Restablecer vista",
  "formatInfoDocx": "Por favor abra el documento en formato DOCX",
  "formatInfoPPTx": "PPT(X) formato no soportado actualmente",

src/locales/ru-RU.json

@@ -21,6 +21,9 @@
  "pageWidthOption": "Подогнать по ширине",
  "sidebarToggle": "Показать/скрыть боковую панель",
  "viewThumbnail": "Показать/скрыть миниатюры",
+ "gotoFirst": "В начало",
+ "gotoLast": "В конец",
+ "navbarClickToDownload": "Нажмите, чтобы отобразить изображение",
  "resetView": "Сброс представления",
  "formatInfoDocx": "Пожалуйста, загрузите документ в формате DOCX",
  "formatInfoPPTx": "На данный момент PPT(X) формат не поддерживается",

src/locales/zh-CN.json

@@ -21,6 +21,9 @@
  "pageWidthOption": "适合页宽",
  "sidebarToggle": "切换侧栏",
  "viewThumbnail": "显示缩略图",
+ "gotoFirst": "第一的",
+ "gotoLast": "去最后",
+ "navbarClickToDownload": "点击下载",
  "formatInfoDocx": "请打开DOC格式文档",
  "formatInfoPPTx": "暂不支持PPT(X)文件预览，请关注后续更新！",
  "supportFileTypes": "目前仅支持DOCX,XLS(X),PDF,EPUB,FB2,MOBI格式的文件！",

src/plugins/img/Navigation.tsx

@@ -1,6 +1,8 @@
-import React, { ReactElement, ReactHTMLElement } from 'react';
+import React, { ReactElement } from 'react';
 import { ImageViewerNavProps } from '../../definitions';
-import { TbPhotoDown } from 'react-icons/tb';
+import { TbChevronLeftPipe, TbChevronRightPipe, TbPhotoDown } from 'react-icons/tb';
+import { useTranslation } from 'react-i18next';
+import { Tooltip } from 'react-tooltip';
 
 /**
  * Navigation block
@@ -10,12 +12,13 @@ import { TbPhotoDown } from 'react-icons/tb';
  * @returns {*}
  */
 export default function ImageViewerNavigation(props: ImageViewerNavProps) {
+ const { t } = useTranslation();
  const { activeIndex = 0, thumbWidth = 50, thumbHeight = undefined, thumbSpace = 10 } = props;
  const [listMarginLeft, setListMarginLeft] = React.useState<number>(0);
 
  React.useEffect(() => {
- if(props.images && props.images[activeIndex]) {
- let margin = ((activeIndex + 1) * (thumbWidth + thumbSpace)) - (thumbWidth/2);
+ if (props.images && props.images[activeIndex]) {
+ let margin = (activeIndex + 1) * (thumbWidth + thumbSpace) - thumbWidth / 2;
  setListMarginLeft(margin);
  }
  }, [props.images]);
@@ -30,22 +33,31 @@ export default function ImageViewerNavigation(props: ImageViewerNavProps) {
  const imagesList = () => {
  let elements: ReactElement[] = [];
  let styles = {};
- if(thumbHeight)
- styles = { ...styles, height: `${thumbHeight}px` };
+ if (thumbHeight) styles = { ...styles, height: `${thumbHeight}px` };
  styles = { ...styles, width: `${thumbWidth}px` };
  for (let i = 0; i < props.imagesTotal; i++) {
  let liElement = (
  <li
  key={i}
- className={(i === activeIndex) ? 'active' : ''}
- style={{marginLeft: `${thumbSpace}px`}}
+ className={i === activeIndex ? 'active' : ''}
+ style={{ marginLeft: `${thumbSpace}px` }}
  onClick={e => {
  handleChangeImg(i);
  }}>
  {props.images && props.images[i] ? (
- <img style={styles} src={props.images[i].src} alt={props.images[i].alt} />
+ <img
+ style={styles}
+ src={props.images[i].src}
+ alt={props.images[i].alt}
+ data-tooltip-id='navbar-tooltip'
+ data-tooltip-content={props.images[i].alt}
+ />
  ) : (
- <div className="placeholder" style={styles} >
+ <div
+ className='placeholder'
+ style={styles}
+ data-tooltip-id='navbar-tooltip'
+ data-tooltip-content={t('navbarClickToDownload')}>
  <TbPhotoDown />
  </div>
  )}
@@ -58,10 +70,41 @@ export default function ImageViewerNavigation(props: ImageViewerNavProps) {
  };
 
  return (
- <div className='navbar'>
- <ul className='list list-transition' style={{ marginLeft: `calc(50% - ${listMarginLeft}px)` }}>
- {imagesList()}
- </ul>
- </div>
+ <>
+ <div className='navbar'>
+ <button
+ type='button'
+ className='navbar-goto-first'
+ onClick={e => {
+ handleChangeImg(0);
+ }}
+ disabled={activeIndex === 0}
+ data-tooltip-id='navbar-tooltip'
+ data-tooltip-content={t('gotoFirst')}
+ data-tooltip-place='right'
+ data-tooltip-hidden={activeIndex === 0}>
+ <TbChevronLeftPipe />
+ </button>
+ <div className='wrapper'>
+ <ul className='list list-transition' style={{ marginLeft: `calc(50% - ${listMarginLeft}px)` }}>
+ {imagesList()}
+ </ul>
+ </div>
+ <button
+ type='button'
+ className='navbar-goto-last'
+ onClick={e => {
+ handleChangeImg(props.imagesTotal - 1);
+ }}
+ disabled={activeIndex === props.imagesTotal - 1}
+ data-tooltip-id='navbar-tooltip'
+ data-tooltip-content={t('gotoLast')}
+ data-tooltip-place='left'
+ data-tooltip-hidden={activeIndex === props.imagesTotal - 1}>
+ <TbChevronRightPipe />
+ </button>
+ </div>
+ <Tooltip id='navbar-tooltip' />
+ </>
  );
 }

src/plugins/img/index.tsx

@@ -201,6 +201,7 @@ export default (props: ViewerPluginProps) => {
  const imageUrl = _getBlobUrlFromBuffer(fileBuffer, fileType.extension);
  image.src = imageUrl;
  }
+ image.alt = fileName;
 
  function loadImgSuccess(imgWidth: number, imgHeight: number, success: boolean) {
  if (currentActiveIndex !== currentIndex.current) {

src/scss/index.scss

@@ -236,31 +236,48 @@ div:not(span):where(.doc-viewer),
  }
 
  .navbar {
- @apply overflow-x-auto w-full flex items-center justify-start scrollbar-none;
+ @apply w-full scrollbar-none relative;
 
- &.drag {
- @apply cursor-grabbing;
+ .navbar-goto-first {
+ @apply left-4;
+ }
+
+ .navbar-goto-last {
+ @apply right-4;
+ }
+
+ .navbar-goto-first,
+ .navbar-goto-last {
+ @apply absolute top-[calc(50%-theme('height.4'))] h-8 w-8 rounded-full border-2 border-solid cursor-pointer flex items-center justify-center
+ [&:not(:disabled)]:active:scale-95 disabled:cursor-not-allowed z-10;
+ @extend .border-primary;
+ @extend .text-primary;
+ @extend .button-toolbar;
  }
 
+ .wrapper {
+ @apply w-full h-full overflow-x-scroll flex items-center justify-start ;
+
  .list {
  @apply inline-flex;
 
  li {
- @apply flex cursor-pointer box-border select-none border border-solid;
- @extend .border-primary;
+ @apply flex cursor-pointer select-none;
 
  img {
- @apply opacity-50 select-none;
+ @apply opacity-50 select-none box-border border border-solid;
+ @extend .border-primary;
  }
 
  &.active > img {
  opacity: 1;
  }
 
  .placeholder {
- @apply flex items-center justify-center min-w-10;
+ @apply flex items-center justify-center min-w-10 box-border border border-solid;
  @extend .toolbar-background;
  @extend .text-primary;
+ @extend .border-primary;
  }
  }
 
@@ -279,6 +296,7 @@ div:not(span):where(.doc-viewer),
  }
  }
  }
+ }
  }
  }