@@ -13,6 +13,7 @@ class PDFViewer extends React.Component {
return (
< React . Fragment >
< div id = "outerContainer" >
< div id = "sidebarContainer" >
< div id = "toolbarSidebar" >
< div id = "thumbnails-header" className = "p-4 d-flex justify-content-between" >
@@ -21,25 +22,27 @@ class PDFViewer extends React.Component {
< / d i v >
< div id = "toolbarSidebarLeft" className = "sf-hide" >
< div id = "sidebarViewButtons" className = "splitToolbarButton toggled" role = "radiogroup" >
< button id = "viewThumbnail" className = "toolbarButton toggled" title = "Show Thumbnails" tabIndex = { 2 } data - l10n - id = "pdfjs-thumbs-button " role = "radio" aria - checked = "true" aria - controls = "thumbnailView" >
< span data - l10n - id = "pdfjs-thumbs-button- label" > Thumbnails < / s p a n >
< button id = "viewThumbnail" className = "toolbarButton toggled" title = "Show Thumbnails" tabIndex = "2" data - l10n - id = "thumbs " role = "radio" aria - checked = "true" aria - controls = "thumbnailView" >
< span data - l10n - id = "thumbs_ label" > Thumbnails < / s p a n >
< / b u t t o n >
< button id = "viewOutline" className = "toolbarButton" title = "Show Document Outline (double-click to expand/collapse all items)" tabIndex = { 3 } data - l10n - id = "pdfjs- document- outline-button " role = "radio" aria - checked = "false" aria - controls = "outlineView" >
< span data - l10n - id = "pdfjs- document- outline-button- label" > Document Outline < / s p a n >
< button id = "viewOutline" className = "toolbarButton" title = "Show Document Outline (double-click to expand/collapse all items)" tabIndex = "3" data - l10n - id = "document_ outline" role = "radio" aria - checked = "false" aria - controls = "outlineView" >
< span data - l10n - id = "document_ outline_ label" > Document Outline < / s p a n >
< / b u t t o n >
< button id = "viewAttachments" className = "toolbarButton" title = "Show Attachments" tabIndex = { 4 } data - l10n - id = "pdfjs- attachments-button " role = "radio" aria - checked = "false" aria - controls = "attachmentsView" >
< span data - l10n - id = "pdfjs- attachments-button- label" > Attachments < / s p a n >
< button id = "viewAttachments" className = "toolbarButton" title = "Show Attachments" tabIndex = "4" data - l10n - id = "attachments" role = "radio" aria - checked = "false" aria - controls = "attachmentsView" >
< span data - l10n - id = "attachments_ label" > Attachments < / s p a n >
< / b u t t o n >
< button id = "viewLayers" className = "toolbarButton" title = "Show Layers (double-click to reset all layers to the default state)" tabIndex = { 5 } data - l10n - id = "pdfjs-layers-button " role = "radio" aria - checked = "false" aria - controls = "layersView" >
< span data - l10n - id = "pdfjs-layers-button- label" > Layers < / s p a n >
< button id = "viewLayers" className = "toolbarButton" title = "Show Layers (double-click to reset all layers to the default state)" tabIndex = "5" data - l10n - id = "layers " role = "radio" aria - checked = "false" aria - controls = "layersView" >
< span data - l10n - id = "layers_ label" > Layers < / s p a n >
< / b u t t o n >
< / d i v >
< / d i v >
< div id = "toolbarSidebarRight" >
< div id = "outlineOptionsContainer" className = "sf-hide " >
< div className = "verticalToolbarSeparator" / >
< button id = "currentOutlineItem" className = "toolbarButton" disabled = "disabled" title = "Find Current Outline Item" tabIndex = { 6 } data - l10n - id = "pdfjs-current-outline-item-button" >
< span data - l10n - id = "pdfjs- current-o utline-i tem-button-label" > Current Outline Item < / s p a n >
< div id = "outlineOptionsContainer" className = "hidden " >
< div className = "verticalToolbarSeparator" > < / d i v >
< button id = "currentO utlineI tem" className = "toolbarButton" disabled = "disabled" title = "Find Current Outline Item" tabIndex = "6" data - l10n - id = "current_outline_item" >
< span data - l10n - id = "current_outline_item_label" > Current Outline Item < / s p a n >
< / b u t t o n >
< / d i v >
< / d i v >
@@ -54,194 +57,192 @@ class PDFViewer extends React.Component {
< div id = "layersView" className = "hidden" >
< / d i v >
< / d i v >
< div id = "sidebarResizer" / >
< /div> {/ * sidebarContainer * / }
< div id = "sidebarResizer" > < / d i v >
< / d i v >
{ /*<!-- sidebarContainer -->*/ }
< div id = "mainContainer" >
< div className = "findbar hidden doorHanger" id = "findbar" >
< div id = "findbarInputContainer" >
< input id = "findInput" className = "toolbarField" title = "Find" placeholder = "Find in document…" tabIndex = { 91 } data - l10n - id = "pdfjs- find- input" aria - invalid = "false" / >
< input id = "findInput" className = "toolbarField" title = "Find" placeholder = "Find in document…" tabIndex = "91" data - l10n - id = "find_ input" aria - invalid = "false" / >
< div className = "splitToolbarButton" >
< button id = "findPrevious" className = "toolbarButton" title = "Find the previous occurrence of the phrase" tabIndex = { 92 } data - l10n - id = "pdfjs- find- previous-button " >
< span data - l10n - id = "pdfjs- find- previous-button- label" > Previous < / s p a n >
< button id = "findPrevious" className = "toolbarButton" title = "Find the previous occurrence of the phrase" tabIndex = "92" data - l10n - id = "find_ previous" >
< span data - l10n - id = "find_ previous_ label" > Previous < / s p a n >
< / b u t t o n >
< div className = "splitToolbarButtonSeparator" / >
< button id = "findNext" className = "toolbarButton" title = "Find the next occurrence of the phrase" tabIndex = { 93 } data - l10n - id = "pdfjs- find- next-button " >
< span data - l10n - id = "pdfjs- find- next-button- label" > Next < / s p a n >
< div className = "splitToolbarButtonSeparator" > < / d i v >
< button id = "findNext" className = "toolbarButton" title = "Find the next occurrence of the phrase" tabIndex = "93" data - l10n - id = "find_ next" >
< span data - l10n - id = "find_ next_ label" > Next < / s p a n >
< / b u t t o n >
< / d i v >
< / d i v >
< div id = "findbarOptionsOneContainer" >
< input type = "checkbox" id = "findHighlightAll" className = "toolbarField" tabIndex = { 94 } / >
< label htmlFor = "findHighlightAll" className = "toolbarLabel" data - l10n - id = "pdfjs- find- highlight-checkbox " > Highlight All < / l a b e l >
< input type = "checkbox" id = "findMatchCase" className = "toolbarField" tabIndex = { 95 } / >
< label htmlFor = "findMatchCase" className = "toolbarLabel" data - l10n - id = "pdfjs- find- match- case-checkbox- label" > Match Case < / l a b e l >
< input type = "checkbox" id = "findHighlightAll" className = "toolbarField" tabIndex = "94" / >
< label htmlFor = "findHighlightAll" className = "toolbarLabel" data - l10n - id = "find_ highlight" > Highlight All < / l a b e l >
< input type = "checkbox" id = "findMatchCase" className = "toolbarField" tabIndex = "95" / >
< label htmlFor = "findMatchCase" className = "toolbarLabel" data - l10n - id = "find_ match_ case_ label" > Match Case < / l a b e l >
< / d i v >
< div id = "findbarOptionsTwoContainer" >
< input type = "checkbox" id = "findMatchDiacritics" className = "toolbarField" tabIndex = { 96 } / >
< label htmlFor = "findMatchDiacritics" className = "toolbarLabel" data - l10n - id = "pdfjs- find- match- diacritics-checkbox- label" > Match Diacritics < / l a b e l >
< input type = "checkbox" id = "findEntireWord" className = "toolbarField" tabIndex = { 97 } / >
< label htmlFor = "findEntireWord" className = "toolbarLabel" data - l10n - id = "pdfjs- find- entire- word-checkbox- label" > Whole Words < / l a b e l >
< input type = "checkbox" id = "findMatchDiacritics" className = "toolbarField" tabIndex = "96" / >
< label htmlFor = "findMatchDiacritics" className = "toolbarLabel" data - l10n - id = "find_ match_ diacritics_ label" > Match Diacritics < / l a b e l >
< input type = "checkbox" id = "findEntireWord" className = "toolbarField" tabIndex = "97" / >
< label htmlFor = "findEntireWord" className = "toolbarLabel" data - l10n - id = "find_ entire_ word_ label" > Whole Words < / l a b e l >
< / d i v >
< div id = "findbarMessageContainer" aria - live = "polite" >
< span id = "findResultsCount" className = "toolbarLabel" / >
< span id = "findMsg" className = "toolbarLabel" / >
< / d i v >
< /div> {/ * findbar * / }
< div className = "editorParamsToolbar hidden doorHangerRight" id = "editorHighlightParamsToolbar" >
< div id = "highlightParamsToolbarContainer" className = "editorParamsToolbarContainer" >
< div id = "editorHighlightColorPicker" className = "colorPicker" >
< span id = "highlightColorPickerLabel" className = "editorParamsLabel" data - l10n - id = "pdfjs-editor-highlight-colorpicker-label" > Highlight color < / s p a n >
< / d i v >
< div id = "editorHighlightThickness" >
< label htmlFor = "editorFreeHighlightThickness" className = "editorParamsLabel" data - l10n - id = "pdfjs-editor-free-highlight-thickness-input" > Thickness < / l a b e l >
< div className = "thicknessPicker" >
< input type = "range" id = "editorFreeHighlightThickness" className = "editorParamsSlider" data - l10n - id = "pdfjs-editor-free-highlight-thickness-title" defaultValue = { 12 } min = { 8 } max = { 24 } step = { 1 } tabIndex = { 101 } / >
< / d i v >
< / d i v >
< div id = "editorHighlightVisibility" >
< div className = "divider" / >
< div className = "toggler" >
< label htmlFor = "editorHighlightShowAll" className = "editorParamsLabel" data - l10n - id = "pdfjs-editor-highlight-show-all-button-label" > Show all < / l a b e l >
< button id = "editorHighlightShowAll" className = "toggle-button" data - l10n - id = "pdfjs-editor-highlight-show-all-button" aria - pressed = "true" tabIndex = { 102 } / >
< / d i v >
< / d i v >
< span id = "findResultsCount" className = "toolbarLabel" > < / s p a n >
< span id = "findMsg" className = "toolbarLabel" > < / s p a n >
< / d i v >
< / d i v >
{ /*<!-- findbar -->*/ }
< div className = "editorParamsToolbar hidden doorHangerRight" id = "editorFreeTextParamsToolbar" >
< div className = "editorParamsToolbarContainer" >
< div className = "editorParamsSetter" >
< label htmlFor = "editorFreeTextColor" className = "editorParamsLabel" data - l10n - id = "pdfjs- editor- free- text- color-input " > Color < / l a b e l >
< input type = "color" id = "editorFreeTextColor" className = "editorParamsColor" tabIndex = { 103 } / >
< label htmlFor = "editorFreeTextColor" className = "editorParamsLabel" data - l10n - id = "editor_ free_ text_ color" > Color < / l a b e l >
< input type = "color" id = "editorFreeTextColor" className = "editorParamsColor" tabIndex = "100" / >
< / d i v >
< div className = "editorParamsSetter" >
< label htmlFor = "editorFreeTextFontSize" className = "editorParamsLabel" data - l10n - id = "pdfjs- editor- free- text- size-input " > Size < / l a b e l >
< input type = "range" id = "editorFreeTextFontSize" className = "editorParamsSlider" defaultValue = { 10 } min = { 5 } max = { 100 } step = { 1 } tabIndex = { 104 } / >
< label htmlFor = "editorFreeTextFontSize" className = "editorParamsLabel" data - l10n - id = "editor_ free_ text_ size" > Size < / l a b e l >
< input type = "range" id = "editorFreeTextFontSize" className = "editorParamsSlider" defaultValue = "10" min = "5" max = "100" step = "1" tabIndex = "101" / >
< / d i v >
< / d i v >
< / d i v >
< div className = "editorParamsToolbar hidden doorHangerRight" id = "editorInkParamsToolbar" >
< div className = "editorParamsToolbarContainer" >
< div className = "editorParamsSetter" >
< label htmlFor = "editorInkColor" className = "editorParamsLabel" data - l10n - id = "pdfjs- editor- ink- color-input " > Color < / l a b e l >
< input type = "color" id = "editorInkColor" className = "editorParamsColor" tabIndex = { 105 } / >
< label htmlFor = "editorInkColor" className = "editorParamsLabel" data - l10n - id = "editor_ ink_ color" > Color < / l a b e l >
< input type = "color" id = "editorInkColor" className = "editorParamsColor" tabIndex = "102" / >
< / d i v >
< div className = "editorParamsSetter" >
< label htmlFor = "editorInkThickness" className = "editorParamsLabel" data - l10n - id = "pdfjs- editor- ink- thickness-input " > Thickness < / l a b e l >
< input type = "range" id = "editorInkThickness" className = "editorParamsSlider" defaultValue = { 1 } min = { 1 } max = { 20 } step = { 1 } tabIndex = { 106 } / >
< label htmlFor = "editorInkThickness" className = "editorParamsLabel" data - l10n - id = "editor_ ink_ thickness" > Thickness < / l a b e l >
< input type = "range" id = "editorInkThickness" className = "editorParamsSlider" defaultValue = "1" min = "1" max = "20" step = "1" tabIndex = "103" / >
< / d i v >
< div className = "editorParamsSetter" >
< label htmlFor = "editorInkOpacity" className = "editorParamsLabel" data - l10n - id = "pdfjs- editor- ink- opacity-input " > Opacity < / l a b e l >
< input type = "range" id = "editorInkOpacity" className = "editorParamsSlider" defaultValue = { 100 } min = { 1 } max = { 100 } step = { 1 } tabIndex = { 107 } / >
< label htmlFor = "editorInkOpacity" className = "editorParamsLabel" data - l10n - id = "editor_ ink_ opacity" > Opacity < / l a b e l >
< input type = "range" id = "editorInkOpacity" className = "editorParamsSlider" defaultValue = "100" min = "1" max = "100" step = "1" tabIndex = "104" / >
< / d i v >
< / d i v >
< / d i v >
< div className = "editorParamsToolbar hidden doorHangerRight" id = "editorStampParamsToolbar" >
< div className = "editorParamsToolbarContainer" >
< button id = "editorStampAddImage" className = "secondaryToolbarButton" title = "Add image" tabIndex = { 108 } data - l10n - id = "pdfjs-editor-stamp-add-image-button" >
< span className = "editorParamsLabel" data - l10n - id = "pdfjs-editor-stamp-add-image-button-label" > Add image < / s p a n >
< / b u t t o n >
< / d i v >
< / d i v >
< div id = "secondaryToolbar" className = "secondaryToolbar hidden doorHangerRight" >
< div id = "secondaryToolbarButtonContainer" >
< button id = "secondaryOpenFile" className = "secondaryToolbarButton" title = "Open File" tabIndex = { 51 } data - l10n - id = "pdfjs- open- file-button " >
< span data - l10n - id = "pdfjs- open- file-button- label" > Open < / s p a n >
< button id = "secondaryOpenFile" className = "secondaryToolbarButton visibleLargeView " title = "Open File" tabIndex = "51" data - l10n - id = "open_ file" >
< span data - l10n - id = "open_ file_ label" > Open < / s p a n >
< / b u t t o n >
< button id = "secondaryPrint" className = "secondaryToolbarButton visibleMediumView" title = "Print" tabIndex = { 52 } data - l10n - id = "pdfjs-print-button" >
< span data - l10n - id = "pdfjs-print-button-label" > Print < / s p a n >
< button id = "secondaryPrint" className = "secondaryToolbarButton visibleMediumView" title = "Print" tabIndex = "52" data - l10n - id = "print" >
< span data - l10n - id = "print_label" > Print < / s p a n >
< / b u t t o n >
< button id = "secondaryDownload" className = "secondaryToolbarButton visibleMediumView" title = "Save" tabIndex = { 53 } data - l10n - id = "pdfjs-save-button" >
< span data - l10n - id = "pdfjs-save-button-label" > Save < / s p a n >
< button id = "secondaryDownload" className = "secondaryToolbarButton visibleMediumView" title = "Save" tabIndex = "53" data - l10n - id = "save" >
< span data - l10n - id = "save_label" > Save < / s p a n >
< / b u t t o n >
< div className = "horizontalToolbarSeparator" / >
< button id = "presentationMode" className = "secondaryToolbarButton" title = "Switch to Presentation Mode" tabIndex = { 54 } data - l10n - id = "pdfjs-presentation-mode-button" >
< span data - l10n - id = "pdfjs-presentation-mode-button-label" > Presentation Mode < / s p a n >
< div className = "horizontalToolbarSeparator visibleLargeView" > < / d i v >
< button id = "presentationMode" className = "secondaryToolbarButton" title = "Switch to Presentation Mode" tabIndex = "54" data - l10n - id = "presentation_mode" >
< span data - l10n - id = "presentation_mode_label" > Presentation Mode < / s p a n >
< / b u t t o n >
< a href = "#" id = "viewBookmark" className = "secondaryToolbarButton" title = "Current Page (View URL from Current Page)" tabIndex = { 55 } data - l10n - id = "pdfjs-bookmark-button" >
< span data - l10n - id = "pdfjs-bookmark-button-label" > Current Page< / s p a n >
< a href = "#" id = "viewBookmark" className = "secondaryToolbarButton" title = " Current Page (View URL from Current Page)" tabIndex = "55" data - l10n - id = "bookmark1" >
< span data - l10n - id = "bookmark1_label" > Current Page < / s p a n >
< / a >
< div id = "viewBookmarkSeparator" className = "horizontalToolbarSeparator" / >
< div id = "viewBookmarkSeparator" className = "horizontalToolbarSeparator" > < / d i v >
{ /*
<button id="firstPage" className="secondaryToolbarButton" title="Go to First Page" tabIndex={ 56} data-l10n-id="pdfjs- first- page-button ">
<span data-l10n-id="pdfjs- first- page-button- label">Go to First Page</span>
</button>
<button id="lastPage" className="secondaryToolbarButton" title="Go to Last Page" tabIndex={ 57} data-l10n-id="pdfjs- last- page-button ">
<span data-l10n-id="pdfjs- last- page-button- label">Go to Last Page</span>
</button>
<button id="firstPage" className="secondaryToolbarButton" title="Go to First Page" tabIndex=" 56" data-l10n-id="first_ page">
<span data-l10n-id="first_ page_ label">Go to First Page</span>
</button>
<button id="lastPage" className="secondaryToolbarButton" title="Go to Last Page" tabIndex=" 57" data-l10n-id="last_ page">
<span data-l10n-id="last_ page_ label">Go to Last Page</span>
</button>
*/ }
< div className = "horizontalToolbarSeparator" / >
< button id = "pageRotateCw" className = "secondaryToolbarButton" title = "Rotate Clockwise" tabIndex = { 58 } data - l10n - id = "pdfjs-page-rotate-cw-button" >
< span data - l10n - id = "pdfjs-page-rotate-cw-button-label" > Rotate Clockwise < / s p a n >
< div className = "horizontalToolbarSeparator" > < / d i v >
< button id = "pageRotateCw" className = "secondaryToolbarButton" title = "Rotate Clockwise" tabIndex = "58" data - l10n - id = "page_rotate_cw" >
< span data - l10n - id = "page_rotate_cw_label" > Rotate Clockwise < / s p a n >
< / b u t t o n >
< button id = "pageRotateCcw" className = "secondaryToolbarButton" title = "Rotate Counterclockwise" tabIndex = { 59 } data - l10n - id = "pdfjs- page- rotate- ccw-button " >
< span data - l10n - id = "pdfjs- page- rotate- ccw-button- label" > Rotate Counterclockwise < / s p a n >
< button id = "pageRotateCcw" className = "secondaryToolbarButton" title = "Rotate Counterclockwise" tabIndex = "59" data - l10n - id = "page_ rotate_ ccw" >
< span data - l10n - id = "page_ rotate_ ccw_ label" > Rotate Counterclockwise < / s p a n >
< / b u t t o n >
< div className = "horizontalToolbarSeparator" / >
< div className = "horizontalToolbarSeparator" > < / d i v >
< div id = "cursorToolButtons" role = "radiogroup" >
< button id = "cursorSelectTool" className = "secondaryToolbarButton toggled" title = "Enable Text Selection Tool" tabIndex = { 60 } data - l10n - id = "pdfjs- cursor- text- select- tool-button " role = "radio" aria - checked = "true" >
< span data - l10n - id = "pdfjs- cursor- text- select- tool-button- label" > Text Selection Tool < / s p a n >
< button id = "cursorSelectTool" className = "secondaryToolbarButton toggled" title = "Enable Text Selection Tool" tabIndex = "60" data - l10n - id = "cursor_ text_ select_ tool" role = "radio" aria - checked = "true" >
< span data - l10n - id = "cursor_ text_ select_ tool_ label" > Text Selection Tool < / s p a n >
< / b u t t o n >
< button id = "cursorHandTool" className = "secondaryToolbarButton" title = "Enable Hand Tool" tabIndex = { 61 } data - l10n - id = "pdfjs- cursor- hand- tool-button " role = "radio" aria - checked = "false" >
< span data - l10n - id = "pdfjs- cursor- hand- tool-button- label" > Hand Tool < / s p a n >
< button id = "cursorHandTool" className = "secondaryToolbarButton" title = "Enable Hand Tool" tabIndex = "61" data - l10n - id = "cursor_ hand_ tool" role = "radio" aria - checked = "false" >
< span data - l10n - id = "cursor_ hand_ tool_ label" > Hand Tool < / s p a n >
< / b u t t o n >
< / d i v >
< div className = "horizontalToolbarSeparator" / >
< div className = "horizontalToolbarSeparator" > < / d i v >
< div id = "scrollModeButtons" role = "radiogroup" >
< button id = "scrollPage" className = "secondaryToolbarButton" title = "Use Page Scrolling" tabIndex = { 62 } data - l10n - id = "pdfjs- scroll- page-button " role = "radio" aria - checked = "false" >
< span data - l10n - id = "pdfjs- scroll- page-button- label" > Page Scrolling < / s p a n >
< button id = "scrollPage" className = "secondaryToolbarButton" title = "Use Page Scrolling" tabIndex = "62" data - l10n - id = "scroll_ page" role = "radio" aria - checked = "false" >
< span data - l10n - id = "scroll_ page_ label" > Page Scrolling < / s p a n >
< / b u t t o n >
< button id = "scrollVertical" className = "secondaryToolbarButton toggled" title = "Use Vertical Scrolling" tabIndex = { 63 } data - l10n - id = "pdfjs- scroll- vertical-button " role = "radio" aria - checked = "true" >
< span data - l10n - id = "pdfjs- scroll- vertical-button- label" > Vertical Scrolling < / s p a n >
< button id = "scrollVertical" className = "secondaryToolbarButton toggled" title = "Use Vertical Scrolling" tabIndex = "63" data - l10n - id = "scroll_ vertical" role = "radio" aria - checked = "true" >
< span data - l10n - id = "scroll_ vertical_ label" > Vertical Scrolling < / s p a n >
< / b u t t o n >
< button id = "scrollHorizontal" className = "secondaryToolbarButton" title = "Use Horizontal Scrolling" tabIndex = { 64 } data - l10n - id = "pdfjs- scroll- horizontal-button " role = "radio" aria - checked = "false" >
< span data - l10n - id = "pdfjs- scroll- horizontal-button- label" > Horizontal Scrolling < / s p a n >
< button id = "scrollHorizontal" className = "secondaryToolbarButton" title = "Use Horizontal Scrolling" tabIndex = "64" data - l10n - id = "scroll_ horizontal" role = "radio" aria - checked = "false" >
< span data - l10n - id = "scroll_ horizontal_ label" > Horizontal Scrolling < / s p a n >
< / b u t t o n >
< button id = "scrollWrapped" className = "secondaryToolbarButton" title = "Use Wrapped Scrolling" tabIndex = { 65 } data - l10n - id = "pdfjs- scroll- wrapped-button " role = "radio" aria - checked = "false" >
< span data - l10n - id = "pdfjs- scroll- wrapped-button- label" > Wrapped Scrolling < / s p a n >
< button id = "scrollWrapped" className = "secondaryToolbarButton" title = "Use Wrapped Scrolling" tabIndex = "65" data - l10n - id = "scroll_ wrapped" role = "radio" aria - checked = "false" >
< span data - l10n - id = "scroll_ wrapped_ label" > Wrapped Scrolling < / s p a n >
< / b u t t o n >
< / d i v >
< div className = "horizontalToolbarSeparator" / >
< div className = "horizontalToolbarSeparator" > < / d i v >
< div id = "spreadModeButtons" role = "radiogroup" >
< button id = "spreadNone" className = "secondaryToolbarButton toggled" title = "Do not join page spreads" tabIndex = { 66 } data - l10n - id = "pdfjs- spread- none-button " role = "radio" aria - checked = "true" >
< span data - l10n - id = "pdfjs- spread- none-button- label" > No Spreads < / s p a n >
< button id = "spreadNone" className = "secondaryToolbarButton toggled" title = "Do not join page spreads" tabIndex = "66" data - l10n - id = "spread_ none" role = "radio" aria - checked = "true" >
< span data - l10n - id = "spread_ none_ label" > No Spreads < / s p a n >
< / b u t t o n >
< button id = "spreadOdd" className = "secondaryToolbarButton" title = "Join page spreads starting with odd-numbered pages" tabIndex = { 67 } data - l10n - id = "pdfjs- spread- odd-button " role = "radio" aria - checked = "false" >
< span data - l10n - id = "pdfjs- spread- odd-button- label" > Odd Spreads < / s p a n >
< button id = "spreadOdd" className = "secondaryToolbarButton" title = "Join page spreads starting with odd-numbered pages" tabIndex = "67" data - l10n - id = "spread_ odd" role = "radio" aria - checked = "false" >
< span data - l10n - id = "spread_ odd_ label" > Odd Spreads < / s p a n >
< / b u t t o n >
< button id = "spreadEven" className = "secondaryToolbarButton" title = "Join page spreads starting with even-numbered pages" tabIndex = { 68 } data - l10n - id = "pdfjs- spread- even-button " role = "radio" aria - checked = "false" >
< span data - l10n - id = "pdfjs- spread- even-button- label" > Even Spreads < / s p a n >
< button id = "spreadEven" className = "secondaryToolbarButton" title = "Join page spreads starting with even-numbered pages" tabIndex = "68" data - l10n - id = "spread_ even" role = "radio" aria - checked = "false" >
< span data - l10n - id = "spread_ even_ label" > Even Spreads < / s p a n >
< / b u t t o n >
< / d i v >
< div className = "horizontalToolbarSeparator" / >
< button id = "documentProperties" className = "secondaryToolbarButton" title = "Document Properties…" tabIndex = { 69 } data - l10n - id = "pdfjs-document-properties-button" aria - controls = "documentPropertiesDialog" >
< span data - l10n - id = "pdfjs-document-properties-button-label" > Document Properties … < / s p a n >
< div className = "horizontalToolbarSeparator" > < / d i v >
< button id = "documentProperties" className = "secondaryToolbarButton" title = "Document Properties…" tabIndex = "69" data - l10n - id = "document_properties" aria - controls = "documentPropertiesDialog" >
< span data - l10n - id = "document_properties_label" > Document Properties … < / s p a n >
< / b u t t o n >
< / d i v >
< /div> {/ * secondaryToolbar * / }
< / d i v >
{ /*<!-- secondaryToolbar -->*/ }
< div className = "toolbar" >
< div id = "toolbarContainer" >
< div id = "toolbarViewer" >
< div id = "toolbarViewerLeft" >
< button id = "sidebarToggle" className = "toolbarButton" title = "Toggle Sidebar" tabIndex = { 11 } data - l10n - id = "pdfjs- toggle- sidebar-button " aria - expanded = "false" aria - controls = "sidebarContainer" >
< span data - l10n - id = "pdfjs- toggle- sidebar-button- label" > Toggle Sidebar < / s p a n >
< button id = "sidebarToggle" className = "toolbarButton" title = "Toggle Sidebar" tabIndex = "11" data - l10n - id = "toggle_ sidebar" aria - expanded = "false" aria - controls = "sidebarContainer" >
< span data - l10n - id = "toggle_ sidebar_ label" > Toggle Sidebar < / s p a n >
< / b u t t o n >
< div className = "toolbarButtonSpacer d-none" / >
< button id = "viewFind" className = "toolbarButton d-none" title = "Find in Document" tabIndex = { 12 } data - l10n - id = "pdfjs- findbar-button " aria - expanded = "false" aria - controls = "findbar" >
< span data - l10n - id = "pdfjs- findbar-button- label" > Find < / s p a n >
< div className = "toolbarButtonSpacer d-none" > < / d i v >
< button id = "viewFind" className = "toolbarButton d-none" title = "Find in Document" tabIndex = "12" data - l10n - id = "findbar" aria - expanded = "false" aria - controls = "findbar" >
< span data - l10n - id = "findbar_ label" > Find < / s p a n >
< / b u t t o n >
< div className = "splitToolbarButton hiddenSmallView ml-2 d-flex align-items-center" >
< div className = "splitToolbarButtonSeparator mr-2" > < / d i v >
< button id = "firstPage" className = "toolbarButton" title = "Go to First Page" tabIndex = "56" data - l10n - id = "first_page" >
< span data - l10n - id = "first_page_label" > Go to First Page < / s p a n >
< / b u t t o n >
< button className = "toolbarButton" title = "Previous Page" id = "previous" tabIndex = { 13 } data - l10n - id = "pdfjs- previous-button " >
< span data - l10n - id = "pdfjs- previous-button- label" > Previous < / s p a n >
< button className = "toolbarButton" title = "Previous Page" id = "previous" tabIndex = "13" data - l10n - id = "previous" >
< span data - l10n - id = "previous_ label" > Previous < / s p a n >
< / b u t t o n >
< input type = "number" id = "pageNumber" className = "toolbarField" title = "Page" defaultValue = "1" min = "1" tabIndex = "15" data - l10n - id = "page" autoComplete = "off" / >
< span id = "numPages" className = "toolbarLabel" > < / s p a n >
< button className = "toolbarButton" title = "Next Page" id = "next" tabIndex = { 14 } data - l10n - id = "pdfjs-next-button " >
< span data - l10n - id = "pdfjs-next-button- label" > Next < / s p a n >
< button className = "toolbarButton" title = "Next Page" id = "next" tabIndex = "14" data - l10n - id = "next " >
< span data - l10n - id = "next_ label" > Next < / s p a n >
< / b u t t o n >
< button id = "lastPage" className = "toolbarButton" title = "Go to Last Page" tabIndex = "57" data - l10n - id = "last_page" >
< span data - l10n - id = "last_page_label" > Go to Last Page < / s p a n >
@@ -249,212 +250,177 @@ class PDFViewer extends React.Component {
< / d i v >
< / d i v >
< div id = "toolbarViewerRight" className = "sf-hide" >
< button id = "openFile" className = "toolbarButton hiddenLargeView" title = "Open File" tabIndex = "31" data - l10n - id = "open_file" >
< span data - l10n - id = "open_file_label" > Open < / s p a n >
< / b u t t o n >
< button id = "print" className = "toolbarButton hiddenMediumView" title = "Print" tabIndex = "32" data - l10n - id = "print" >
< span data - l10n - id = "print_label" > Print < / s p a n >
< / b u t t o n >
< button id = "download" className = "toolbarButton hiddenMediumView" title = "Save" tabIndex = "33" data - l10n - id = "save" >
< span data - l10n - id = "save_label" > Save < / s p a n >
< / b u t t o n >
< div className = "verticalToolbarSeparator hiddenMediumView" > < / d i v >
< div id = "editorModeButtons" className = "splitToolbarButton toggled" role = "radiogroup" >
< button id = "editorHighligh t" className = "toolbarButton" hidden disabled= "disabled" title = "Highligh t" role = "radio" aria - checked = "false" aria - controls = "editorHighligh tParamsToolbar" tabIndex = { 31 } data - l10n - id = "pdfjs-editor-highlight-button " >
< span data - l10n - id = "pdfjs-editor-highlight-button- label" > Highligh t< / s p a n >
< button id = "editorFreeTex t" className = "toolbarButton" disabled = "disabled" title = "Tex t" role = "radio" aria - checked = "false" aria - controls = "editorFreeTex tParamsToolbar" tabIndex = "34" data - l10n - id = "editor_free_text2 " >
< span data - l10n - id = "editor_free_text2_ label" > Tex t< / s p a n >
< / b u t t o n >
< button id = "editorFreeText " className = "toolbarButton" disabled = "disabled" title = "Text " role = "radio" aria - checked = "false" aria - controls = "editorFreeText ParamsToolbar" tabIndex = { 32 } data - l10n - id = "pdfjs-editor-free-text-button " >
< span data - l10n - id = "pdfjs-editor-free-text-button- label" > Text < / s p a n >
< / b u t t o n >
< button id = "editorInk" className = "toolbarButton" disabled = "disabled" title = "Draw" role = "radio" aria - checked = "false" aria - controls = "editorInkParamsToolbar" tabIndex = { 33 } data - l10n - id = "pdfjs-editor-ink-button" >
< span data - l10n - id = "pdfjs-editor-ink-button-label" > Draw < / s p a n >
< / b u t t o n >
< button id = "editorStamp" className = "toolbarButton hidden" disabled = "disabled" title = "Add or edit images" role = "radio" aria - checked = "false" aria - controls = "editorStampParamsToolbar" tabIndex = { 34 } data - l10n - id = "pdfjs-editor-stamp-button" >
< span data - l10n - id = "pdfjs-editor-stamp-button-label" > Add or edit images < / s p a n >
< button id = "editorInk " className = "toolbarButton" disabled = "disabled" title = "Draw " role = "radio" aria - checked = "false" aria - controls = "editorInk ParamsToolbar" tabIndex = "35" data - l10n - id = "editor_ink2 " >
< span data - l10n - id = "editor_ink2_ label" > Draw < / s p a n >
< / b u t t o n >
< / d i v >
< div id = "editorModeSeparator" className = "verticalToolbarSeparator" / >
< div id = "editorModeSeparator" className = "verticalToolbarSeparator" > < / d i v >
< button id = "print " className = "toolbarButton hiddenMediumView " title = "Print " tabIndex = { 41 } data - l10n - id = "pdfjs-print-button " >
< span data - l10n - id = "pdfjs-print-button- label" > Print < / s p a n >
< / b u t t o n >
< button id = "download" className = "toolbarButton hiddenMediumView" title = "Save" tabIndex = { 42 } data - l10n - id = "pdfjs-save-button" >
< span data - l10n - id = "pdfjs-save-button-label" > Save < / s p a n >
< / b u t t o n >
< div className = "verticalToolbarSeparator hiddenMediumView" / >
< button id = "secondaryToolbarToggle" className = "toolbarButton" title = "Tools" tabIndex = { 43 } data - l10n - id = "pdfjs-tools-button" aria - expanded = "false" aria - controls = "secondaryToolbar" >
< span data - l10n - id = "pdfjs-tools-button-label" > Tools < / s p a n >
< button id = "secondaryToolbarToggle " className = "toolbarButton" title = "Tools " tabIndex = "48" data - l10n - id = "tools" aria - expanded = "false" aria - controls = "secondaryToolbar " >
< span data - l10n - id = "tools_ label" > Tools < / s p a n >
< / b u t t o n >
< / d i v >
< div id = "toolbarViewerMiddle" className = "d-flex align-items-center" >
< div className = "splitToolbarButton float-none" >
< button id = "zoomOut" className = "toolbarButton" title = "Zoom Out" tabIndex = { 21 } data - l10n - id = "pdfjs- zoom- out-button " >
< span data - l10n - id = "pdfjs- zoom- out-button- label" > Zoom Out < / s p a n >
< button id = "zoomOut" className = "toolbarButton" title = "Zoom Out" tabIndex = "21" data - l10n - id = "zoom_ out" >
< span data - l10n - id = "zoom_ out_ label" > Zoom Out < / s p a n >
< / b u t t o n >
< div className = "splitToolbarButtonSeparator d-none" / >
< div className = "splitToolbarButtonSeparator d-none" > < / d i v >
< / d i v >
< span id = "scaleSelectContainer" className = "dropdownToolbarButton" >
< select id = "scaleSelect" title = "Zoom" tabIndex = { 23 } data - l10n - id = "pdfjs-zoom-select " >
< option id = "pageAutoOption" valu e= "auto" defaultValue = { 'auto' } data - l10n - id = "pdfjs- page- scale- auto" > Automatic Zoom < / o p t i o n >
< option id = "pageActualOption" value = "page-actual" data - l10n - id = "pdfjs- page- scale- actual" > Actual Size < / o p t i o n >
< option id = "pageFitOption" value = "page-fit" data - l10n - id = "pdfjs- page- scale- fit" > Page Fit < / o p t i o n >
< option id = "pageWidthOption" value = "page-width" data - l10n - id = "pdfjs- page- scale- width" > Page Width < / o p t i o n >
< option id = "customScaleOption" value = "custom" disabled = "disabled" hidden = { true } data - l10n - id = "pdfjs-page-scale-percent" data - l10n - args = "{ scale: 0 }" > 0 % < / o p t i o n >
< option value = "0.5" data - l10n - id = "pdfjs- page- scale- percent" data - l10n - args = " { scale: 50 }" > 50 % < / o p t i o n >
< option value = "0.75" data - l10n - id = "pdfjs- page- scale- percent" data - l10n - args = " { scale: 75 }" > 75 % < / o p t i o n >
< option value = { 1 } data - l10n - id = "pdfjs- page- scale- percent" data - l10n - args = " { scale: 100 }" > 100 % < / o p t i o n >
< option value = "1.25" data - l10n - id = "pdfjs- page- scale- percent" data - l10n - args = " { scale: 125 }" > 125 % < / o p t i o n >
< option value = "1.5" data - l10n - id = "pdfjs- page- scale- percent" data - l10n - args = " { scale: 150 }" > 150 % < / o p t i o n >
< option value = { 2 } data - l10n - id = "pdfjs- page- scale- percent" data - l10n - args = " { scale: 200 }" > 200 % < / o p t i o n >
< option value = { 3 } data - l10n - id = "pdfjs- page- scale- percent" data - l10n - args = " { scale: 300 }" > 300 % < / o p t i o n >
< option value = { 4 } data - l10n - id = "pdfjs- page- scale- percent" data - l10n - args = " { scale: 400 }" > 400 % < / o p t i o n >
< div id = "scaleSelectContainer" className = "dropdownToolbarButton my-0 mx-1 float-none " >
< select id = "scaleSelect" title = "Zoom" tabIndex = "23" data - l10n - id = "zoom" defaultValue = "auto" className = "bg-white border rounded py-0 px-1 " >
< option id = "pageAutoOption" titl e= "" value = "auto" data - l10n - id = "page_ scale_ auto" > Automatic Zoom < / o p t i o n >
< option id = "pageActualOption" title = "" value = "page-actual" data - l10n - id = "page_ scale_ actual" > Actual Size < / o p t i o n >
< option id = "pageFitOption" title = "" value = "page-fit" data - l10n - id = "page_ scale_ fit" > Page Fit < / o p t i o n >
< option id = "pageWidthOption" title = "" value = "page-width" data - l10n - id = "page_ scale_ width" > Page Width < / o p t i o n >
< option id = "customScaleOption" title = "" value = "custom" disabled = "disabled" hidden = { true } > < / o p t i o n >
< option title = "" value= "0.5" data - l10n - id = "page_ scale_ percent" data - l10n - args = ' { " scale" : 50 }' > 50 % < / o p t i o n >
< option title = "" value= "0.75" data - l10n - id = "page_ scale_ percent" data - l10n - args = ' { " scale" : 75 }' > 75 % < / o p t i o n >
< option title = "" value= "1" data - l10n - id = "page_ scale_ percent" data - l10n - args = ' { " scale" : 100 }' > 100 % < / o p t i o n >
< option title = "" value= "1.25" data - l10n - id = "page_ scale_ percent" data - l10n - args = ' { " scale" : 125 }' > 125 % < / o p t i o n >
< option title = "" value= "1.5" data - l10n - id = "page_ scale_ percent" data - l10n - args = ' { " scale" : 150 }' > 150 % < / o p t i o n >
< option title = "" value= "2" data - l10n - id = "page_ scale_ percent" data - l10n - args = ' { " scale" : 200 }' > 200 % < / o p t i o n >
< option title = "" value= "3" data - l10n - id = "page_ scale_ percent" data - l10n - args = ' { " scale" : 300 }' > 300 % < / o p t i o n >
< option title = "" value= "4" data - l10n - id = "page_ scale_ percent" data - l10n - args = ' { " scale" : 400 }' > 400 % < / o p t i o n >
< / s e l e c t >
< / s p a n >
< button id = "zoomIn" className = "t oolbarButton" title = "Zoom In" tabIndex = { 22 } data - l10n - id = "pdfjs-zoom-in-button " >
< span data - l10n - id = "pdfjs-zoom-in-button-label" > Zoom In < / s p a n >
</ b u t t o n >
< / d i v >
< div className = "splitT oolbarButton float-none " >
< button id = "zoomIn" className = "toolbarButton" title = "Zoom In" tabIndex = "22" data - l10n - id = "zoom_in" >
< span data - l10n - id = "zoom_in_label" > Zoom In < / s p a n >
< / b u t t o n >
< / d i v >
< / d i v >
< / d i v >
< div id = "loadingBar" >
< span className = "loading-icon loading-tip" > < / s p a n >
{ /*<div className="progress">
<div className="glimmer">
</div>*/ }
<div className="glimmer">
</div>
</div>*/ }
< / d i v >
< / d i v >
< / d i v >
< div id = "viewerContainer" tabIndex = { 0 } >
< div id = "viewer" className = "pdfViewer" / >
< div id = "viewerContainer" tabIndex = "0" >
< div id = "viewer" className = "pdfViewer" > < / d i v >
< / d i v >
< /div> {/ * mainContainer * / }
< / d i v >
{ /*<!-- mainContainer -->*/ }
< div id = "dialogContainer" >
< dialog id = "passwordDialog" >
< div className = "row" >
< label htmlFor = "password" id = "passwordText" data - l10n - id = "pdfjs- password- label" > Enter the password to open this PDF file : < / l a b e l >
< label htmlFor = "password" id = "passwordText" data - l10n - id = "password_ label" > Enter the password to open this PDF file : < / l a b e l >
< / d i v >
< div className = "row" >
< input type = "password" id = "password" className = "toolbarField" / >
< / d i v >
< div className = "buttonRow" >
< button id = "passwordCancel" className = "dialogButton" > < span data - l10n - id = "pdfjs- password- cancel-button " > Cancel < / s p a n > < / b u t t o n >
< button id = "passwordSubmit" className = "dialogButton" > < span data - l10n - id = "pdfjs- password- ok-button " > OK < / s p a n > < / b u t t o n >
< button id = "passwordCancel" className = "dialogButton" > < span data - l10n - id = "password_ cancel" > Cancel < / s p a n > < / b u t t o n >
< button id = "passwordSubmit" className = "dialogButton" > < span data - l10n - id = "password_ ok" > OK < / s p a n > < / b u t t o n >
< / d i v >
< / d i a l o g >
< dialog id = "documentPropertiesDialog" >
< div className = "row" >
< span id = "fileNameLabel" data - l10n - id = "pdfjs- document- properties- file- name" > File name : < / s p a n >
< span id = "fileNameLabel" data - l10n - id = "document_ properties_ file_ name" > File name : < / s p a n >
< p id = "fileNameField" aria - labelledby = "fileNameLabel" > - < / p >
< / d i v >
< div className = "row" >
< span id = "fileSizeLabel" data - l10n - id = "pdfjs- document- properties- file- size" > File size : < / s p a n >
< span id = "fileSizeLabel" data - l10n - id = "document_ properties_ file_ size" > File size : < / s p a n >
< p id = "fileSizeField" aria - labelledby = "fileSizeLabel" > - < / p >
< / d i v >
< div className = "separator" / >
< div className = "separator" > < / d i v >
< div className = "row" >
< span id = "titleLabel" data - l10n - id = "pdfjs- document- properties- title" > Title : < / s p a n >
< span id = "titleLabel" data - l10n - id = "document_ properties_ title" > Title : < / s p a n >
< p id = "titleField" aria - labelledby = "titleLabel" > - < / p >
< / d i v >
< div className = "row" >
< span id = "authorLabel" data - l10n - id = "pdfjs- document- properties- author" > Author : < / s p a n >
< span id = "authorLabel" data - l10n - id = "document_ properties_ author" > Author : < / s p a n >
< p id = "authorField" aria - labelledby = "authorLabel" > - < / p >
< / d i v >
< div className = "row" >
< span id = "subjectLabel" data - l10n - id = "pdfjs- document- properties- subject" > Subject : < / s p a n >
< span id = "subjectLabel" data - l10n - id = "document_ properties_ subject" > Subject : < / s p a n >
< p id = "subjectField" aria - labelledby = "subjectLabel" > - < / p >
< / d i v >
< div className = "row" >
< span id = "keywordsLabel" data - l10n - id = "pdfjs- document- properties- keywords" > Keywords : < / s p a n >
< span id = "keywordsLabel" data - l10n - id = "document_ properties_ keywords" > Keywords : < / s p a n >
< p id = "keywordsField" aria - labelledby = "keywordsLabel" > - < / p >
< / d i v >
< div className = "row" >
< span id = "creationDateLabel" data - l10n - id = "pdfjs- document- properties- creation- date" > Creation Date : < / s p a n >
< span id = "creationDateLabel" data - l10n - id = "document_ properties_ creation_ date" > Creation Date : < / s p a n >
< p id = "creationDateField" aria - labelledby = "creationDateLabel" > - < / p >
< / d i v >
< div className = "row" >
< span id = "modificationDateLabel" data - l10n - id = "pdfjs- document- properties- modification- date" > Modification Date : < / s p a n >
< span id = "modificationDateLabel" data - l10n - id = "document_ properties_ modification_ date" > Modification Date : < / s p a n >
< p id = "modificationDateField" aria - labelledby = "modificationDateLabel" > - < / p >
< / d i v >
< div className = "row" >
< span id = "creatorLabel" data - l10n - id = "pdfjs- document- properties- creator" > Creator : < / s p a n >
< span id = "creatorLabel" data - l10n - id = "document_ properties_ creator" > Creator : < / s p a n >
< p id = "creatorField" aria - labelledby = "creatorLabel" > - < / p >
< / d i v >
< div className = "separator" / >
< div className = "separator" > < / d i v >
< div className = "row" >
< span id = "producerLabel" data - l10n - id = "pdfjs- document- properties- producer" > PDF Producer : < / s p a n >
< span id = "producerLabel" data - l10n - id = "document_ properties_ producer" > PDF Producer : < / s p a n >
< p id = "producerField" aria - labelledby = "producerLabel" > - < / p >
< / d i v >
< div className = "row" >
< span id = "versionLabel" data - l10n - id = "pdfjs- document- properties- version" > PDF Version : < / s p a n >
< span id = "versionLabel" data - l10n - id = "document_ properties_ version" > PDF Version : < / s p a n >
< p id = "versionField" aria - labelledby = "versionLabel" > - < / p >
< / d i v >
< div className = "row" >
< span id = "pageCountLabel" data - l10n - id = "pdfjs- document- properties- page- count" > Page Count : < / s p a n >
< span id = "pageCountLabel" data - l10n - id = "document_ properties_ page_ count" > Page Count : < / s p a n >
< p id = "pageCountField" aria - labelledby = "pageCountLabel" > - < / p >
< / d i v >
< div className = "row" >
< span id = "pageSizeLabel" data - l10n - id = "pdfjs- document- properties- page- size" > Page Size : < / s p a n >
< span id = "pageSizeLabel" data - l10n - id = "document_ properties_ page_ size" > Page Size : < / s p a n >
< p id = "pageSizeField" aria - labelledby = "pageSizeLabel" > - < / p >
< / d i v >
< div className = "separator" / >
< div className = "separator" > < / d i v >
< div className = "row" >
< span id = "linearizedLabel" data - l10n - id = "pdfjs- document- properties- linearized" > Fast Web View : < / s p a n >
< span id = "linearizedLabel" data - l10n - id = "document_ properties_ linearized" > Fast Web View : < / s p a n >
< p id = "linearizedField" aria - labelledby = "linearizedLabel" > - < / p >
< / d i v >
< div className = "buttonRow" >
< button id = "documentPropertiesClose" className = "dialogButton" > < span data - l10n - id = "pdfjs- document- properties- close-button " > Close < / s p a n > < / b u t t o n >
< / d i v >
< / d i a l o g >
< dialog id = "altTextDialog" aria - labelledby = "dialogLabel" aria - describedby = "dialogDescription" >
< div id = "altTextContainer" >
< div id = "overallDescription" >
< span id = "dialogLabel" data - l10n - id = "pdfjs-editor-alt-text-dialog-label" className = "title" > Choose an option < / s p a n >
< span id = "dialogDescription" data - l10n - id = "pdfjs-editor-alt-text-dialog-description" >
Alt text ( alternative text ) helps when people can ’ t see the image or when it doesn ’ t load .
< / s p a n >
< / d i v >
< div id = "addDescription" >
< div className = "radio" >
< div className = "radioButton" >
< input type = "radio" id = "descriptionButton" name = "altTextOption" tabIndex = { 0 } aria - describedby = "descriptionAreaLabel" defaultChecked / >
< label htmlFor = "descriptionButton" data - l10n - id = "pdfjs-editor-alt-text-add-description-label" > Add a description < / l a b e l >
< / d i v >
< div className = "radioLabel" >
< span id = "descriptionAreaLabel" data - l10n - id = "pdfjs-editor-alt-text-add-description-description" >
Aim for 1 - 2 sentences that describe the subject , setting , or actions .
< / s p a n >
< / d i v >
< / d i v >
< div className = "descriptionArea" >
< textarea id = "descriptionTextarea" placeholder = "For example, “A young man sits down at a table to eat a meal”" aria - labelledby = "descriptionAreaLabel" data - l10n - id = "pdfjs-editor-alt-text-textarea" tabIndex = { 0 } defaultValue = { '' } / >
< / d i v >
< / d i v >
< div id = "markAsDecorative" >
< div className = "radio" >
< div className = "radioButton" >
< input type = "radio" id = "decorativeButton" name = "altTextOption" aria - describedby = "decorativeLabel" / >
< label htmlFor = "decorativeButton" data - l10n - id = "pdfjs-editor-alt-text-mark-decorative-label" > Mark as decorative < / l a b e l >
< / d i v >
< div className = "radioLabel" >
< span id = "decorativeLabel" data - l10n - id = "pdfjs-editor-alt-text-mark-decorative-description" >
This is used for ornamental images , like borders or watermarks .
< / s p a n >
< / d i v >
< / d i v >
< / d i v >
< div id = "buttons" >
< button id = "altTextCancel" tabIndex = { 0 } > < span data - l10n - id = "pdfjs-editor-alt-text-cancel-button" > Cancel < / s p a n > < / b u t t o n >
< button id = "altTextSave" tabIndex = { 0 } > < span data - l10n - id = "pdfjs-editor-alt-text-save-button" > Save < / s p a n > < / b u t t o n >
< / d i v >
< button id = "documentPropertiesClose" className = "dialogButton" > < span data - l10n - id = "document_ properties_ close" > Close < / s p a n > < / b u t t o n >
< / d i v >
< / d i a l o g >
< dialog id = "printServiceDialog" style = { { minWidth : '200px' } } >
< div className = "row" >
< span data - l10n - id = "pdfjs- print- progress- message" > Preparing document for printing … < / s p a n >
< span data - l10n - id = "print_ progress_ message" > Preparing document for printing … < / s p a n >
< / d i v >
< div className = "row" >
< progress value = { 0 } max = { 100 } / >
< span data - l10n - id = "pdfjs- print- progress- percent" data - l10n - args = " { progress: 0 }" className = "relative-progress" > 0 % < / s p a n >
< progress value = "0" max = "100" > < / p r o g r e s s >
< span data - l10n - id = "print_ progress_ percent" data - l10n - args = ' { " progress" : 0 }' className = "relative-progress" > 0 % < / s p a n >
< / d i v >
< div className = "buttonRow" >
< button id = "printCancel" className = "dialogButton" > < span data - l10n - id = "pdfjs- print- progress- close-button " > Cancel < / s p a n > < / b u t t o n >
< button id = "printCancel" className = "dialogButton" > < span data - l10n - id = "print_ progress_ close" > Cancel < / s p a n > < / b u t t o n >
< / d i v >
< / d i a l o g >
< /div> {/ * dialogContainer * / }
< / d i v >
{ /*<!-- dialogContainer -->*/ }
< /div> {/ * outerContainer * / }
< / d i v >
{ /*<!-- outerContainer -->*/ }
{ /*<div id="printContainer"></div>*/ }
< input type = "file" id = "fileInput" className = "hidden" / >
< / R e a c t . F r a g m e n t >