box-content-preview 3.79.0 → 3.81.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +7 -7
- package/dist/lib/index.css +1 -1
- package/dist/lib/index.js +252 -53
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
[](https://mergify.io)
|
|
3
3
|
[](https://github.com/prettier/prettier)
|
|
4
4
|
[](https://travis-ci.org/box/box-content-preview)
|
|
5
|
-
[](https://github.com/box/box-content-preview)
|
|
6
6
|
[](https://www.npmjs.com/package/box-ui-elements)
|
|
7
7
|
|
|
8
8
|
# [Box Content Preview](https://developer.box.com/docs/box-content-preview)
|
|
@@ -22,11 +22,11 @@ We encourage all users to update their applications to utilize modern browsers f
|
|
|
22
22
|
|
|
23
23
|
## Current Version
|
|
24
24
|
|
|
25
|
-
- Version: v3.
|
|
25
|
+
- Version: v3.81.0
|
|
26
26
|
- Locale: en-US
|
|
27
27
|
|
|
28
|
-
https://cdn01.boxcdn.net/platform/preview/3.
|
|
29
|
-
https://cdn01.boxcdn.net/platform/preview/3.
|
|
28
|
+
https://cdn01.boxcdn.net/platform/preview/3.81.0/en-US/preview.js
|
|
29
|
+
https://cdn01.boxcdn.net/platform/preview/3.81.0/en-US/preview.css
|
|
30
30
|
|
|
31
31
|
## Supported Locales
|
|
32
32
|
|
|
@@ -52,10 +52,10 @@ You can self-host the Box Content Preview library or reference the versions avai
|
|
|
52
52
|
<title>Box Content Preview Demo</title>
|
|
53
53
|
|
|
54
54
|
<!-- Latest version of Preview SDK for your locale -->
|
|
55
|
-
<script src="https://cdn01.boxcdn.net/platform/preview/3.
|
|
55
|
+
<script src="https://cdn01.boxcdn.net/platform/preview/3.81.0/en-US/preview.js"></script>
|
|
56
56
|
<link
|
|
57
57
|
rel="stylesheet"
|
|
58
|
-
href="https://cdn01.boxcdn.net/platform/preview/3.
|
|
58
|
+
href="https://cdn01.boxcdn.net/platform/preview/3.81.0/en-US/preview.css"
|
|
59
59
|
/>
|
|
60
60
|
</head>
|
|
61
61
|
<body>
|
|
@@ -76,7 +76,7 @@ To self-host the Box Content Preview library, follow these steps:
|
|
|
76
76
|
|
|
77
77
|
1. Either fork the repo and check out the version you want to host or download the specific version as a zip:
|
|
78
78
|
|
|
79
|
-
- Check out a specific version with `git checkout v3.
|
|
79
|
+
- Check out a specific version with `git checkout v3.81.0`
|
|
80
80
|
- Download a specific version as a zip from https://github.com/box/box-content-preview/releases
|
|
81
81
|
|
|
82
82
|
2. Install dependencies and build the library with `yarn install && yarn build:i18n && yarn build:prod`
|
package/dist/lib/index.css
CHANGED
|
@@ -81,7 +81,7 @@
|
|
|
81
81
|
.bp-FindBarToggle{opacity:.9;transition:opacity 150ms,background-color 150ms;will-change:opacity;outline:0;display:flex;align-items:center;justify-content:center;margin:0;padding:0;color:#fff;background:transparent;border:0;border-radius:25px;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:manipulation;zoom:1}.bp-FindBarToggle:focus:not(:disabled),.bp-FindBarToggle:hover:not(:disabled){background-color:rgba(255,255,255,.08);opacity:1}.bp-FindBarToggle:focus:not(:disabled) svg,.bp-FindBarToggle:hover:not(:disabled) svg,.bp-FindBarToggle.bp-is-active svg{transform:scale(1.09);transition:transform 150ms}.bp-FindBarToggle.bp-is-active,.bp-FindBarToggle:active:not(:disabled){background-color:rgba(255,255,255,.16)}.bp-FindBarToggle.bp-is-active:focus:not(:disabled),.bp-FindBarToggle.bp-is-active:hover:not(:disabled){background-color:rgba(255,255,255,.2)}.bp-FindBarToggle:focus:not(:disabled){box-shadow:inset 0 0 0 1px rgba(211,211,211,.5),0 1px 2px rgba(0,0,0,.1)}.bp-FindBarToggle:focus-visible:not(:disabled){box-shadow:inset 0 0 0 1px rgba(211,211,211,.5),0 1px 2px rgba(0,0,0,.1)}.bp-FindBarToggle:focus:not(:focus-visible){box-shadow:none}.bp-FindBarToggle:disabled{cursor:default;opacity:.2;pointer-events:none}.bp-FindBarToggle svg{width:32px;height:32px;padding:5px}
|
|
82
82
|
.bp-GalleryToggle{opacity:.9;transition:opacity 150ms,background-color 150ms;will-change:opacity;outline:0;display:flex;align-items:center;justify-content:center;margin:0;padding:0;color:#fff;background:transparent;border:0;border-radius:25px;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:manipulation;zoom:1}.bp-GalleryToggle:focus:not(:disabled),.bp-GalleryToggle:hover:not(:disabled){background-color:rgba(255,255,255,.08);opacity:1}.bp-GalleryToggle:focus:not(:disabled) svg,.bp-GalleryToggle:hover:not(:disabled) svg,.bp-GalleryToggle.bp-is-active svg{transform:scale(1.09);transition:transform 150ms}.bp-GalleryToggle.bp-is-active,.bp-GalleryToggle:active:not(:disabled){background-color:rgba(255,255,255,.16)}.bp-GalleryToggle.bp-is-active:focus:not(:disabled),.bp-GalleryToggle.bp-is-active:hover:not(:disabled){background-color:rgba(255,255,255,.2)}.bp-GalleryToggle:focus:not(:disabled){box-shadow:inset 0 0 0 1px rgba(211,211,211,.5),0 1px 2px rgba(0,0,0,.1)}.bp-GalleryToggle:focus-visible:not(:disabled){box-shadow:inset 0 0 0 1px rgba(211,211,211,.5),0 1px 2px rgba(0,0,0,.1)}.bp-GalleryToggle:focus:not(:focus-visible){box-shadow:none}.bp-GalleryToggle:disabled{cursor:default;opacity:.2;pointer-events:none}.bp-GalleryToggle svg{width:32px;height:32px;padding:5px}
|
|
83
83
|
.bp-ThumbnailsToggle{opacity:.9;transition:opacity 150ms,background-color 150ms;will-change:opacity;outline:0;display:flex;align-items:center;justify-content:center;margin:0;padding:0;color:#fff;background:transparent;border:0;border-radius:25px;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:manipulation;zoom:1}.bp-ThumbnailsToggle:focus:not(:disabled),.bp-ThumbnailsToggle:hover:not(:disabled){background-color:rgba(255,255,255,.08);opacity:1}.bp-ThumbnailsToggle:focus:not(:disabled) svg,.bp-ThumbnailsToggle:hover:not(:disabled) svg,.bp-ThumbnailsToggle.bp-is-active svg{transform:scale(1.09);transition:transform 150ms}.bp-ThumbnailsToggle.bp-is-active,.bp-ThumbnailsToggle:active:not(:disabled){background-color:rgba(255,255,255,.16)}.bp-ThumbnailsToggle.bp-is-active:focus:not(:disabled),.bp-ThumbnailsToggle.bp-is-active:hover:not(:disabled){background-color:rgba(255,255,255,.2)}.bp-ThumbnailsToggle:focus:not(:disabled){box-shadow:inset 0 0 0 1px rgba(211,211,211,.5),0 1px 2px rgba(0,0,0,.1)}.bp-ThumbnailsToggle:focus-visible:not(:disabled){box-shadow:inset 0 0 0 1px rgba(211,211,211,.5),0 1px 2px rgba(0,0,0,.1)}.bp-ThumbnailsToggle:focus:not(:focus-visible){box-shadow:none}.bp-ThumbnailsToggle:disabled{cursor:default;opacity:.2;pointer-events:none}.bp-ThumbnailsToggle svg{width:32px;height:32px;padding:5px}
|
|
84
|
-
.bp-gallery-grid{position:absolute;inset:0;z-index:4;padding:40px;padding-bottom:100px;overflow-y:auto;overscroll-behavior:none;background-color:#fff}.bp-gallery-grid-inner{--bp-gallery-hover-scale: 1.02;display:grid;grid-auto-rows:min-content;grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));gap:16px;align-items:start}.bp-gallery-tile{position:relative;padding:0;background:#f5f5f5;border:none;border-radius:12px;box-shadow:0 0 0 1px #eaeaea;cursor:pointer;transition:box-shadow .2s ease-in-out,transform .2s ease-in-out}.bp-gallery-tile:hover{box-shadow:0 0 0 3px #767676,0 4px 5px 0 rgba(0,0,0,.15);transform:translateY(-1px) scale(var(--bp-gallery-hover-scale))}.bp-gallery-tile:hover .bp-gallery-tile-badge{opacity:1}.bp-gallery-tile:focus{outline:none}.bp-gallery-tile img{display:block;width:100%;height:auto;object-fit:contain;border-radius:12px}.bp-gallery-tile--selected{box-shadow:0 0 0 3px #0061d5,0 4px 5px 0 rgba(0,0,0,.08)}.bp-gallery-tile--selected:hover,.bp-gallery-tile--selected:focus{box-shadow:0 0 0 3px #0061d5,0 4px 5px 0 rgba(0,0,0,.08)}.bp-gallery-tile--selected .bp-gallery-tile-badge{background:#0061d5;opacity:1}.bp-gallery-tile-badge{position:absolute;top:-2px;left:-2px;z-index:1;display:flex;align-items:center;justify-content:center;min-width:30px;height:26px;padding:0 4px;color:#fff;font-size:13px;line-height:1;background:#767676;border-radius:12px 0;opacity:0;transition:opacity .15s}.bp-gallery-tile-placeholder{display:block;width:100%;padding-top:129%}.bp-container:has(.bp-gallery-grid) .ba-PopupPortal{display:none}.bcpr-container:has(.bp-is-gallery-open) .bcpr-navigate-left,.bcpr-container:has(.bp-is-gallery-open) .bcpr-navigate-right{display:none}.bp .bp-is-gallery-open .bp-doc.bp-doc-document,.bp .bp-is-gallery-open .bp-doc.bp-is-scrollable{overflow:hidden}
|
|
84
|
+
.bp-gallery-grid{position:absolute;inset:0;z-index:4;padding:40px;padding-bottom:100px;overflow-y:auto;overscroll-behavior:none;background-color:#fff}.bp-gallery-grid-inner{--bp-gallery-hover-scale: 1.02;display:grid;grid-auto-rows:min-content;grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));gap:16px;align-items:start}.bp-gallery-grid-row{display:contents}.bp-gallery-tile{position:relative;padding:0;background:#f5f5f5;border:none;border-radius:12px;box-shadow:0 0 0 1px #eaeaea;cursor:pointer;transition:box-shadow .2s ease-in-out,transform .2s ease-in-out}.bp-gallery-tile:hover{box-shadow:0 0 0 3px #767676,0 4px 5px 0 rgba(0,0,0,.15);transform:translateY(-1px) scale(var(--bp-gallery-hover-scale))}.bp-gallery-tile:hover .bp-gallery-tile-badge{opacity:1}.bp-gallery-tile:focus{outline:none}.bp-gallery-tile img{display:block;width:100%;height:auto;object-fit:contain;border-radius:12px}.bp-gallery-tile--selected{box-shadow:0 0 0 3px #0061d5,0 4px 5px 0 rgba(0,0,0,.08)}.bp-gallery-tile--selected:hover,.bp-gallery-tile--selected:focus{box-shadow:0 0 0 3px #0061d5,0 4px 5px 0 rgba(0,0,0,.08)}.bp-gallery-tile--selected .bp-gallery-tile-badge{background:#0061d5;opacity:1}.bp-gallery-tile-badge{position:absolute;top:-2px;left:-2px;z-index:1;display:flex;align-items:center;justify-content:center;min-width:30px;height:26px;padding:0 4px;color:#fff;font-size:13px;line-height:1;background:#767676;border-radius:12px 0;opacity:0;transition:opacity .15s}.bp-gallery-tile-placeholder{display:block;width:100%;padding-top:129%}.bp-container:has(.bp-gallery-grid) .ba-PopupPortal{display:none}.bcpr-container:has(.bp-is-gallery-open) .bcpr-navigate-left,.bcpr-container:has(.bp-is-gallery-open) .bcpr-navigate-right{display:none}.bp .bp-is-gallery-open .bp-doc.bp-doc-document,.bp .bp-is-gallery-open .bp-doc.bp-is-scrollable{overflow:hidden}
|
|
85
85
|
.custom-theme .bp .bp-thumbnail.bp-thumbnail-is-selected .bp-thumbnail-nav{box-shadow:0 0 0 3px #222,0 4px 5px 0 rgba(0,0,0,.08)}.custom-theme .bp .bp-thumbnail.bp-thumbnail-is-selected .bp-thumbnail-page-number{background:#222}.custom-theme .bp .bp-thumbnail.bp-thumbnail-is-selected.bp-thumbnail-image-loaded .bp-thumbnail-nav{background-color:#222}.bp .bp-ThumbnailsToggle{display:none}.bp .bp-thumbnails-container{position:absolute;top:0;bottom:0;left:0;display:none;flex:0 0 auto;width:191px}.bp .bp-thumbnails-container:focus{outline:none}.bp .bp-thumbnail{position:relative;display:flex;margin-right:20px;margin-left:20px;cursor:pointer;transition:transform .2s ease-in-out}.bp .bp-thumbnail:focus,.bp .bp-thumbnail:hover{transform:translateY(-1px) scale(1.02)}.bp .bp-thumbnail:focus .bp-thumbnail-page-number,.bp .bp-thumbnail:hover .bp-thumbnail-page-number{background:#767676;opacity:1}.bp .bp-thumbnail:focus .bp-thumbnail-nav,.bp .bp-thumbnail:hover .bp-thumbnail-nav{box-shadow:0 0 0 1px #767676,0 4px 5px 0 rgba(0,0,0,.15)}.bp .bp-thumbnail:focus.bp-thumbnail-image-loaded .bp-thumbnail-nav,.bp .bp-thumbnail:hover.bp-thumbnail-image-loaded .bp-thumbnail-nav{background-color:#767676}.bp .bp-thumbnail.bp-thumbnail-is-selected .bp-thumbnail-page-number{background:#0061d5;opacity:1}.bp .bp-thumbnail.bp-thumbnail-is-selected .bp-thumbnail-nav{box-shadow:0 0 0 3px #0061d5,0 4px 5px 0 rgba(0,0,0,.08)}.bp .bp-thumbnail.bp-thumbnail-is-selected.bp-thumbnail-image-loaded .bp-thumbnail-nav{background-color:#0061d5}.bp .bp-thumbnail:not(.bp-thumbnail-image-loaded) .bp-thumbnail-nav{background:#e8e8e8 url(assets/loading_ghost.gif) repeat-y;background-size:100% 100%}.bp .bp-thumbnail-nav{flex:0 0 150px;overflow:hidden;background-color:#d8d8d8;border-radius:6px;box-shadow:0 0 0 1px #e8e8e8,0 1px 4px 0 rgba(0,0,0,.08);transition:box-shadow .2s ease-in-out}.bp .bp-thumbnail-page-number{position:absolute;display:flex;align-items:center;justify-content:center;min-width:28px;height:24px;padding-right:3px;padding-left:3px;color:#fff;font-size:13px;border-radius:3px 0 6px 0;box-shadow:1px 1px 2px 0 rgba(0,0,0,.2);opacity:0}.bp .bp-thumbnail-image{background-repeat:no-repeat;background-position:center;background-size:contain;pointer-events:none}.bp .bp-thumbnails-container--dark{background-color:#444;border-right-color:#000}.bp .bp-thumbnails-container--dark .bp-thumbnail-page-number{background-color:#444}.bp .bp-thumbnails-container--dark .bp-thumbnail-nav{border-color:#444}@keyframes bp-thumbnails-open{0%{display:none;transform:translateX(-191px)}1%{display:flex;transform:translateX(-191px)}100%{transform:translateX(0)}}@media(min-width: 768px){.bp.bp-loaded.bp-thumbnails-open-active .bp-content,.bp.bp-loaded.bp-thumbnails-close-active .bp-content{transition:left 300ms cubic-bezier(0.4, 0, 0.2, 1)}.bp .bp-thumbnails-container{display:none;transition:transform 300ms cubic-bezier(0.4, 0, 0.2, 1)}.bp .bp-thumbnails-container,.bp.bp-thumbnails-close .bp-thumbnails-container,.bp.bp-thumbnails-close-active .bp-thumbnails-container{transform:translateX(-191px)}.bp.bp-thumbnails-close .bp-thumbnails-container{display:none}.bp.bp-thumbnails-close-active .bp-thumbnails-container{display:flex}.bp.bp-thumbnails-open .bp-content{left:191px}.bp.bp-thumbnails-open .bp-content.bp-is-fullscreen{left:0}.bp.bp-thumbnails-open .bp-thumbnails-container{display:flex;transform:translateX(0)}.bp.bp-thumbnails-open-active .bp-thumbnails-container{animation:bp-thumbnails-open 300ms cubic-bezier(0.4, 0, 0.2, 1)}.bp .bp-ThumbnailsToggle{display:flex}}@media(max-width: 767px){.bp-is-mobile .bp-ZoomControls{display:none}}.bp-theme-dark .bp .bp-thumbnails-container{border-right-color:#222}.bp-doc{position:absolute;inset:0;width:100%;height:100%;margin:0;overflow:hidden;letter-spacing:normal;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.bp-doc [hidden]{display:none !important}.bp-doc.bp-is-scrollable{overflow:auto}.bp-doc .pdfViewer.pinching{visibility:hidden}.bp-doc .pdfViewer .page{position:relative;display:block;box-sizing:content-box !important;margin:0 auto;padding:15px 0;overflow:visible;border:0;border-image:none}.bp-doc .pdfViewer .page:not(.bp-is-invisible)::before{box-shadow:0 4px 12px 0 rgba(0,0,0,.1);position:absolute;inset:15px 0 15px 0;display:block;content:""}.bp-doc .pdfViewer .page:not(.bp-is-invisible) .loadingIcon:first-child{background:#e8e8e8 url(assets/loading_ghost.gif) repeat-y;background-size:100% 100%}.bp-doc .pdfViewer .page .loadingIcon{top:15px;bottom:15px;background:none}.bp-doc .pdfViewer .page.loadingIcon::after{top:15px;bottom:15px;background:none}.bp-doc .pdfViewer .page .textAnnotation>img{opacity:0}.bp-doc .pdfViewer .page.pinch-page{padding:0;visibility:visible}.bp-doc .pdfViewer .page.pinch-page .textLayer{display:none}.bp-doc .pdfViewer.pdfViewer--viewOnly .textLayer span{cursor:unset;-webkit-user-select:none;user-select:none}.bp-doc .pdfViewer .page .textLayer{top:15px;bottom:auto;z-index:1;opacity:1;caret-color:#000}.bp-doc .pdfViewer .page .textLayer>div{-webkit-user-select:text;user-select:text}.bp-doc .pdfViewer .page .textLayer .highlight{display:inline-block;background-color:rgba(180,0,170,.2)}.bp-doc .pdfViewer .page .textLayer .highlight.selected{background-color:rgba(0,100,0,.2)}.bp-doc .pdfViewer .page .textLayer .rangy-highlight{opacity:.2}.bp-doc .pdfViewer .page .textLayer ::selection{background-color:rgba(0,97,213,.1)}.bp-doc input,.bp-doc p,.bp-doc span{-webkit-user-select:text;user-select:text}.bp-doc .annotationLayer{z-index:2}.bp-doc .annotationLayer h1,.bp-doc .annotationLayer h2,.bp-doc .annotationLayer h3,.bp-doc .annotationLayer h4,.bp-doc .annotationLayer h5,.bp-doc .annotationLayer h6,.bp-doc .annotationLayer p{margin:0}.bp-doc .annotationLayer h1{font-size:1em}.bp-doc .annotationLayer section{margin-top:15px}.bp-doc .annotationLayer .popup{font-size:inherit}.bp-doc .annotationLayer .popup .header{height:unset;padding:unset !important;background-color:unset}.bp-print-notification{display:none;font-size:24px}@media print{.bp-doc{display:none}.bp-print-notification{display:block}}.bp-content.bp-annotations-discoverable .ba-PopupCursor{display:none}.bp-content.bp-annotations-discoverable .textLayer{pointer-events:none}.bp-content.bp-annotations-discoverable .textLayer span{pointer-events:auto}@media(max-width: 767px){.bp-content.bp-annotations-only-controls.bp-annotations-create--drawing .bp-AnnotationsControls-exitBtn,.bp-content.bp-annotations-only-controls.bp-annotations-create--highlight .bp-AnnotationsControls-exitBtn,.bp-content.bp-annotations-only-controls.bp-annotations-create--region .bp-AnnotationsControls-exitBtn{display:block}.bp-content.bp-annotations-only-controls.bp-annotations-create--drawing .bp-ControlsBarGroup:not(:last-child),.bp-content.bp-annotations-only-controls.bp-annotations-create--drawing .bp-ControlsBarGroup>*:not(.bp-AnnotationsControls),.bp-content.bp-annotations-only-controls.bp-annotations-create--highlight .bp-ControlsBarGroup:not(:last-child),.bp-content.bp-annotations-only-controls.bp-annotations-create--highlight .bp-ControlsBarGroup>*:not(.bp-AnnotationsControls),.bp-content.bp-annotations-only-controls.bp-annotations-create--region .bp-ControlsBarGroup:not(:last-child),.bp-content.bp-annotations-only-controls.bp-annotations-create--region .bp-ControlsBarGroup>*:not(.bp-AnnotationsControls){display:none}}.bp-content.bp-annotations-create--highlight .ba-PopupCursor,.bp-content.bp-annotations-create--region .ba-PopupCursor{display:block}.bp-content.bp-annotations-create--highlight .annotationLayer,.bp-content.bp-annotations-create--region .annotationLayer{pointer-events:none}.bp-content.bp-annotations-create--highlight .ba-DrawingAnnotations-list.is-listening .ba-DrawingTarget,.bp-content.bp-annotations-create--region .ba-DrawingAnnotations-list.is-listening .ba-DrawingTarget{pointer-events:none}.bp-content.bp-annotations-create--highlight .ba-HighlightList .ba-HighlightSvg.is-listening .ba-HighlightTarget-rect,.bp-content.bp-annotations-create--region .ba-HighlightList .ba-HighlightSvg.is-listening .ba-HighlightTarget-rect{pointer-events:none}.bp-content.bp-annotations-create--highlight .ba-RegionAnnotations-list.is-listening .ba-RegionAnnotation,.bp-content.bp-annotations-create--region .ba-RegionAnnotations-list.is-listening .ba-RegionAnnotation{pointer-events:none}.bp-content.bp-annotations-create--region.bp-annotations-ftux-document-cursor-seen .ba-PopupCursor{display:none}.bp-content.bp-annotations-create--region .textLayer,.bp-content.bp-annotations-create--region .textLayer span{pointer-events:none}.bp-content.bp-is-fullscreen .bp-ThumbnailsToggle{display:none}.bp-find-bar{position:absolute;top:0;right:17px;z-index:3;display:flex;align-items:center;padding:6px;font-size:12px;font-family:Lato,"Helvetica Neue",Helvetica,Arial,sans-serif;background:#fff;border:1px solid #e8e8e8}.bp-find-bar ::-ms-clear{display:none}.bp-find-bar .bp-doc-find-field{width:200px;height:34px;padding:6px 6px 6px 25px;color:#494949;line-height:20px;border:1px solid #e8e8e8;border-radius:2px 0 0 2px;outline-style:none;transition-timing-function:ease;transition-duration:150ms;transition-property:border-color}.bp-find-bar .bp-doc-find-field:focus,.bp-find-bar .bp-doc-find-field:hover{border-color:#0061d5}.bp-find-bar .bp-doc-find-results-count{position:absolute;top:37%;right:120px;margin:0;padding:0;color:rgba(73,73,73,.25);line-height:1;text-align:right;cursor:default;-webkit-user-select:none;user-select:none}.bp-find-bar .bp-doc-find-search,.bp-find-bar .bp-doc-find-prev,.bp-find-bar .bp-doc-find-next,.bp-find-bar .bp-doc-find-close{display:flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;line-height:1;vertical-align:middle;background:none;border:1px solid #e8e8e8;border-left:0;cursor:pointer}.bp-find-bar .bp-doc-find-search svg,.bp-find-bar .bp-doc-find-prev svg,.bp-find-bar .bp-doc-find-next svg,.bp-find-bar .bp-doc-find-close svg{width:17px}.bp-find-bar .bp-doc-find-search .icon,.bp-find-bar .bp-doc-find-prev .icon,.bp-find-bar .bp-doc-find-next .icon,.bp-find-bar .bp-doc-find-close .icon{fill:rgba(73,73,73,.75)}.bp-find-bar .bp-doc-find-prev:hover .icon,.bp-find-bar .bp-doc-find-next:hover .icon,.bp-find-bar .bp-doc-find-close:hover .icon{fill:#494949}.bp-find-bar .bp-doc-find-search{position:absolute;top:15%;left:5px;margin:0;line-height:1;text-align:left;border:0;pointer-events:none}.bp-find-bar .bp-doc-find-search svg{width:12px;height:12px}.bp-find-bar .bp-doc-find-close{border:0}.bp-find-bar .bp-doc-find-close svg{width:22px}.bp-find-bar .bp-find-match-not-found,.bp-find-bar .bp-find-match-not-found:hover,.bp-find-bar .bp-find-match-not-found:focus{border-color:rgba(239,72,54,.5)}.bp-find-bar .bp-doc-find-controls{display:flex}.bp .bp-doc.bp-doc-document{overflow-y:scroll}.bp-document-preload-wrapper{position:absolute;inset:0;height:100%;margin:0;overflow-y:scroll;scrollbar-gutter:stable;background-color:#f5f5f5;opacity:1;transition:opacity .5s}.bp-document-preload-wrapper.bp-is-invisible{visibility:hidden}.bp-document-preload-wrapper.bp-is-transparent{opacity:0}.bp-theme-dark .bp-document-preload-wrapper{background-color:#464a4f}.bp-document-preload-wrapper .bp-preload-content,.bp-document-preload-wrapper .bp-preload-overlay,.bp-document-preload-wrapper .bp-preload-placeholder::before{position:absolute;inset:0}.bp-document-preload-wrapper .bp-preload-content{width:100%}.bp-document-preload-wrapper .bp-preload-overlay{background-color:rgba(255,255,255,.4)}.bp-document-preload-wrapper .bp-preload-placeholder{background:#e8e8e8 url(assets/loading_ghost.gif) repeat-y;background-size:100% 100%;box-shadow:0 4px 12px 0 rgba(0,0,0,.1);position:relative;margin:15px auto 30px}.bp-document-preload-wrapper .bp-preload-placeholder img.doc-first-image{width:100%;height:100%}.bp-document-preload-wrapper .bp-preload-placeholder img.loaded{visibility:visible}
|
|
86
86
|
.custom-theme .bp .bp-thumbnail.bp-thumbnail-is-selected .bp-thumbnail-nav{box-shadow:0 0 0 3px #222,0 4px 5px 0 rgba(0,0,0,.08)}.custom-theme .bp .bp-thumbnail.bp-thumbnail-is-selected .bp-thumbnail-page-number{background:#222}.custom-theme .bp .bp-thumbnail.bp-thumbnail-is-selected.bp-thumbnail-image-loaded .bp-thumbnail-nav{background-color:#222}.bp .bp-ThumbnailsToggle{display:none}.bp .bp-thumbnails-container{position:absolute;top:0;bottom:0;left:0;display:none;flex:0 0 auto;width:191px}.bp .bp-thumbnails-container:focus{outline:none}.bp .bp-thumbnail{position:relative;display:flex;margin-right:20px;margin-left:20px;cursor:pointer;transition:transform .2s ease-in-out}.bp .bp-thumbnail:focus,.bp .bp-thumbnail:hover{transform:translateY(-1px) scale(1.02)}.bp .bp-thumbnail:focus .bp-thumbnail-page-number,.bp .bp-thumbnail:hover .bp-thumbnail-page-number{background:#767676;opacity:1}.bp .bp-thumbnail:focus .bp-thumbnail-nav,.bp .bp-thumbnail:hover .bp-thumbnail-nav{box-shadow:0 0 0 1px #767676,0 4px 5px 0 rgba(0,0,0,.15)}.bp .bp-thumbnail:focus.bp-thumbnail-image-loaded .bp-thumbnail-nav,.bp .bp-thumbnail:hover.bp-thumbnail-image-loaded .bp-thumbnail-nav{background-color:#767676}.bp .bp-thumbnail.bp-thumbnail-is-selected .bp-thumbnail-page-number{background:#0061d5;opacity:1}.bp .bp-thumbnail.bp-thumbnail-is-selected .bp-thumbnail-nav{box-shadow:0 0 0 3px #0061d5,0 4px 5px 0 rgba(0,0,0,.08)}.bp .bp-thumbnail.bp-thumbnail-is-selected.bp-thumbnail-image-loaded .bp-thumbnail-nav{background-color:#0061d5}.bp .bp-thumbnail:not(.bp-thumbnail-image-loaded) .bp-thumbnail-nav{background:#e8e8e8 url(assets/loading_ghost.gif) repeat-y;background-size:100% 100%}.bp .bp-thumbnail-nav{flex:0 0 150px;overflow:hidden;background-color:#d8d8d8;border-radius:6px;box-shadow:0 0 0 1px #e8e8e8,0 1px 4px 0 rgba(0,0,0,.08);transition:box-shadow .2s ease-in-out}.bp .bp-thumbnail-page-number{position:absolute;display:flex;align-items:center;justify-content:center;min-width:28px;height:24px;padding-right:3px;padding-left:3px;color:#fff;font-size:13px;border-radius:3px 0 6px 0;box-shadow:1px 1px 2px 0 rgba(0,0,0,.2);opacity:0}.bp .bp-thumbnail-image{background-repeat:no-repeat;background-position:center;background-size:contain;pointer-events:none}.bp .bp-thumbnails-container--dark{background-color:#444;border-right-color:#000}.bp .bp-thumbnails-container--dark .bp-thumbnail-page-number{background-color:#444}.bp .bp-thumbnails-container--dark .bp-thumbnail-nav{border-color:#444}@keyframes bp-thumbnails-open{0%{display:none;transform:translateX(-191px)}1%{display:flex;transform:translateX(-191px)}100%{transform:translateX(0)}}@media(min-width: 768px){.bp.bp-loaded.bp-thumbnails-open-active .bp-content,.bp.bp-loaded.bp-thumbnails-close-active .bp-content{transition:left 300ms cubic-bezier(0.4, 0, 0.2, 1)}.bp .bp-thumbnails-container{display:none;transition:transform 300ms cubic-bezier(0.4, 0, 0.2, 1)}.bp .bp-thumbnails-container,.bp.bp-thumbnails-close .bp-thumbnails-container,.bp.bp-thumbnails-close-active .bp-thumbnails-container{transform:translateX(-191px)}.bp.bp-thumbnails-close .bp-thumbnails-container{display:none}.bp.bp-thumbnails-close-active .bp-thumbnails-container{display:flex}.bp.bp-thumbnails-open .bp-content{left:191px}.bp.bp-thumbnails-open .bp-content.bp-is-fullscreen{left:0}.bp.bp-thumbnails-open .bp-thumbnails-container{display:flex;transform:translateX(0)}.bp.bp-thumbnails-open-active .bp-thumbnails-container{animation:bp-thumbnails-open 300ms cubic-bezier(0.4, 0, 0.2, 1)}.bp .bp-ThumbnailsToggle{display:flex}}@media(max-width: 767px){.bp-is-mobile .bp-ZoomControls{display:none}}.bp-theme-dark .bp .bp-thumbnails-container{border-right-color:#222}.bp-doc{position:absolute;inset:0;width:100%;height:100%;margin:0;overflow:hidden;letter-spacing:normal;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.bp-doc [hidden]{display:none !important}.bp-doc.bp-is-scrollable{overflow:auto}.bp-doc .pdfViewer.pinching{visibility:hidden}.bp-doc .pdfViewer .page{position:relative;display:block;box-sizing:content-box !important;margin:0 auto;padding:15px 0;overflow:visible;border:0;border-image:none}.bp-doc .pdfViewer .page:not(.bp-is-invisible)::before{box-shadow:0 4px 12px 0 rgba(0,0,0,.1);position:absolute;inset:15px 0 15px 0;display:block;content:""}.bp-doc .pdfViewer .page:not(.bp-is-invisible) .loadingIcon:first-child{background:#e8e8e8 url(assets/loading_ghost.gif) repeat-y;background-size:100% 100%}.bp-doc .pdfViewer .page .loadingIcon{top:15px;bottom:15px;background:none}.bp-doc .pdfViewer .page.loadingIcon::after{top:15px;bottom:15px;background:none}.bp-doc .pdfViewer .page .textAnnotation>img{opacity:0}.bp-doc .pdfViewer .page.pinch-page{padding:0;visibility:visible}.bp-doc .pdfViewer .page.pinch-page .textLayer{display:none}.bp-doc .pdfViewer.pdfViewer--viewOnly .textLayer span{cursor:unset;-webkit-user-select:none;user-select:none}.bp-doc .pdfViewer .page .textLayer{top:15px;bottom:auto;z-index:1;opacity:1;caret-color:#000}.bp-doc .pdfViewer .page .textLayer>div{-webkit-user-select:text;user-select:text}.bp-doc .pdfViewer .page .textLayer .highlight{display:inline-block;background-color:rgba(180,0,170,.2)}.bp-doc .pdfViewer .page .textLayer .highlight.selected{background-color:rgba(0,100,0,.2)}.bp-doc .pdfViewer .page .textLayer .rangy-highlight{opacity:.2}.bp-doc .pdfViewer .page .textLayer ::selection{background-color:rgba(0,97,213,.1)}.bp-doc input,.bp-doc p,.bp-doc span{-webkit-user-select:text;user-select:text}.bp-doc .annotationLayer{z-index:2}.bp-doc .annotationLayer h1,.bp-doc .annotationLayer h2,.bp-doc .annotationLayer h3,.bp-doc .annotationLayer h4,.bp-doc .annotationLayer h5,.bp-doc .annotationLayer h6,.bp-doc .annotationLayer p{margin:0}.bp-doc .annotationLayer h1{font-size:1em}.bp-doc .annotationLayer section{margin-top:15px}.bp-doc .annotationLayer .popup{font-size:inherit}.bp-doc .annotationLayer .popup .header{height:unset;padding:unset !important;background-color:unset}.bp-print-notification{display:none;font-size:24px}@media print{.bp-doc{display:none}.bp-print-notification{display:block}}.bp-content.bp-annotations-discoverable .ba-PopupCursor{display:none}.bp-content.bp-annotations-discoverable .textLayer{pointer-events:none}.bp-content.bp-annotations-discoverable .textLayer span{pointer-events:auto}@media(max-width: 767px){.bp-content.bp-annotations-only-controls.bp-annotations-create--drawing .bp-AnnotationsControls-exitBtn,.bp-content.bp-annotations-only-controls.bp-annotations-create--highlight .bp-AnnotationsControls-exitBtn,.bp-content.bp-annotations-only-controls.bp-annotations-create--region .bp-AnnotationsControls-exitBtn{display:block}.bp-content.bp-annotations-only-controls.bp-annotations-create--drawing .bp-ControlsBarGroup:not(:last-child),.bp-content.bp-annotations-only-controls.bp-annotations-create--drawing .bp-ControlsBarGroup>*:not(.bp-AnnotationsControls),.bp-content.bp-annotations-only-controls.bp-annotations-create--highlight .bp-ControlsBarGroup:not(:last-child),.bp-content.bp-annotations-only-controls.bp-annotations-create--highlight .bp-ControlsBarGroup>*:not(.bp-AnnotationsControls),.bp-content.bp-annotations-only-controls.bp-annotations-create--region .bp-ControlsBarGroup:not(:last-child),.bp-content.bp-annotations-only-controls.bp-annotations-create--region .bp-ControlsBarGroup>*:not(.bp-AnnotationsControls){display:none}}.bp-content.bp-annotations-create--highlight .ba-PopupCursor,.bp-content.bp-annotations-create--region .ba-PopupCursor{display:block}.bp-content.bp-annotations-create--highlight .annotationLayer,.bp-content.bp-annotations-create--region .annotationLayer{pointer-events:none}.bp-content.bp-annotations-create--highlight .ba-DrawingAnnotations-list.is-listening .ba-DrawingTarget,.bp-content.bp-annotations-create--region .ba-DrawingAnnotations-list.is-listening .ba-DrawingTarget{pointer-events:none}.bp-content.bp-annotations-create--highlight .ba-HighlightList .ba-HighlightSvg.is-listening .ba-HighlightTarget-rect,.bp-content.bp-annotations-create--region .ba-HighlightList .ba-HighlightSvg.is-listening .ba-HighlightTarget-rect{pointer-events:none}.bp-content.bp-annotations-create--highlight .ba-RegionAnnotations-list.is-listening .ba-RegionAnnotation,.bp-content.bp-annotations-create--region .ba-RegionAnnotations-list.is-listening .ba-RegionAnnotation{pointer-events:none}.bp-content.bp-annotations-create--region.bp-annotations-ftux-document-cursor-seen .ba-PopupCursor{display:none}.bp-content.bp-annotations-create--region .textLayer,.bp-content.bp-annotations-create--region .textLayer span{pointer-events:none}.bp-content.bp-is-fullscreen .bp-ThumbnailsToggle{display:none}.bp-find-bar{position:absolute;top:0;right:17px;z-index:3;display:flex;align-items:center;padding:6px;font-size:12px;font-family:Lato,"Helvetica Neue",Helvetica,Arial,sans-serif;background:#fff;border:1px solid #e8e8e8}.bp-find-bar ::-ms-clear{display:none}.bp-find-bar .bp-doc-find-field{width:200px;height:34px;padding:6px 6px 6px 25px;color:#494949;line-height:20px;border:1px solid #e8e8e8;border-radius:2px 0 0 2px;outline-style:none;transition-timing-function:ease;transition-duration:150ms;transition-property:border-color}.bp-find-bar .bp-doc-find-field:focus,.bp-find-bar .bp-doc-find-field:hover{border-color:#0061d5}.bp-find-bar .bp-doc-find-results-count{position:absolute;top:37%;right:120px;margin:0;padding:0;color:rgba(73,73,73,.25);line-height:1;text-align:right;cursor:default;-webkit-user-select:none;user-select:none}.bp-find-bar .bp-doc-find-search,.bp-find-bar .bp-doc-find-prev,.bp-find-bar .bp-doc-find-next,.bp-find-bar .bp-doc-find-close{display:flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;line-height:1;vertical-align:middle;background:none;border:1px solid #e8e8e8;border-left:0;cursor:pointer}.bp-find-bar .bp-doc-find-search svg,.bp-find-bar .bp-doc-find-prev svg,.bp-find-bar .bp-doc-find-next svg,.bp-find-bar .bp-doc-find-close svg{width:17px}.bp-find-bar .bp-doc-find-search .icon,.bp-find-bar .bp-doc-find-prev .icon,.bp-find-bar .bp-doc-find-next .icon,.bp-find-bar .bp-doc-find-close .icon{fill:rgba(73,73,73,.75)}.bp-find-bar .bp-doc-find-prev:hover .icon,.bp-find-bar .bp-doc-find-next:hover .icon,.bp-find-bar .bp-doc-find-close:hover .icon{fill:#494949}.bp-find-bar .bp-doc-find-search{position:absolute;top:15%;left:5px;margin:0;line-height:1;text-align:left;border:0;pointer-events:none}.bp-find-bar .bp-doc-find-search svg{width:12px;height:12px}.bp-find-bar .bp-doc-find-close{border:0}.bp-find-bar .bp-doc-find-close svg{width:22px}.bp-find-bar .bp-find-match-not-found,.bp-find-bar .bp-find-match-not-found:hover,.bp-find-bar .bp-find-match-not-found:focus{border-color:rgba(239,72,54,.5)}.bp-find-bar .bp-doc-find-controls{display:flex}.bp-doc.bp-doc-presentation{overflow:hidden}.bp-doc.bp-doc-presentation .pdfViewer .page{position:absolute;inset:0;margin:auto}.bp-doc.bp-doc-presentation .pdfViewer .page.bp-is-invisible{opacity:0}.bp-doc.bp-doc-presentation.overflow-x{overflow-x:scroll}.bp-doc.bp-doc-presentation.overflow-y{overflow-y:scroll}.bp-doc.bp-doc-presentation.overflow-y .pdfViewer .page{margin-top:5px}.bp-presentation-preload-wrapper{position:absolute;inset:0;align-content:center;margin:0;background-color:#f5f5f5;transition:opacity .5s}.bp-presentation-preload-wrapper.bp-is-invisible{visibility:hidden}.bp-presentation-preload-wrapper.bp-is-transparent{opacity:0}.bp-theme-dark .bp-presentation-preload-wrapper{background-color:#464a4f}.bp-presentation-preload-wrapper .bp-preload-content,.bp-presentation-preload-wrapper .bp-preload-overlay,.bp-presentation-preload-wrapper .bp-preload-placeholder::before{position:absolute;inset:0}.bp-presentation-preload-wrapper .bp-preload-content{width:100%}.bp-presentation-preload-wrapper .bp-preload-overlay{background-color:rgba(255,255,255,.4)}.bp-presentation-preload-wrapper .bp-preload-placeholder{background:#e8e8e8 url(assets/loading_ghost.gif) repeat-y;background-size:100% 100%;box-shadow:0 4px 12px 0 rgba(0,0,0,.1);position:relative;margin:auto;padding-top:5px}.bp-presentation-preload-wrapper .bp-preload-placeholder img.doc-first-image{width:100%;height:100%}.bp-presentation-preload-wrapper .bp-preload-placeholder img.loaded{visibility:visible}
|
|
87
87
|
.bp-AnimationClipsToggle{opacity:.9;transition:opacity 150ms,background-color 150ms;will-change:opacity;outline:0;display:flex;align-items:center;justify-content:center;margin:0;padding:0;color:#fff;background:transparent;border:0;border-radius:25px;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:manipulation;zoom:1}.bp-AnimationClipsToggle:focus:not(:disabled),.bp-AnimationClipsToggle:hover:not(:disabled){background-color:rgba(255,255,255,.08);opacity:1}.bp-AnimationClipsToggle:focus:not(:disabled) svg,.bp-AnimationClipsToggle:hover:not(:disabled) svg,.bp-AnimationClipsToggle.bp-is-active svg{transform:scale(1.09);transition:transform 150ms}.bp-AnimationClipsToggle.bp-is-active,.bp-AnimationClipsToggle:active:not(:disabled){background-color:rgba(255,255,255,.16)}.bp-AnimationClipsToggle.bp-is-active:focus:not(:disabled),.bp-AnimationClipsToggle.bp-is-active:hover:not(:disabled){background-color:rgba(255,255,255,.2)}.bp-AnimationClipsToggle:focus:not(:disabled){box-shadow:inset 0 0 0 1px rgba(211,211,211,.5),0 1px 2px rgba(0,0,0,.1)}.bp-AnimationClipsToggle:focus-visible:not(:disabled){box-shadow:inset 0 0 0 1px rgba(211,211,211,.5),0 1px 2px rgba(0,0,0,.1)}.bp-AnimationClipsToggle:focus:not(:focus-visible){box-shadow:none}.bp-AnimationClipsToggle:disabled{cursor:default;opacity:.2;pointer-events:none}.bp-AnimationClipsToggle svg{width:32px;height:32px;padding:5px}
|
package/dist/lib/index.js
CHANGED
|
@@ -15388,7 +15388,7 @@ function util_toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var
|
|
|
15388
15388
|
const CLIENT_NAME = "box-content-preview"; // eslint-disable-line no-undef
|
|
15389
15389
|
const CLIENT_NAME_KEY = 'box_client_name';
|
|
15390
15390
|
const CLIENT_VERSION_KEY = 'box_client_version';
|
|
15391
|
-
const CLIENT_VERSION = "3.
|
|
15391
|
+
const CLIENT_VERSION = "3.81.0"; // eslint-disable-line no-undef
|
|
15392
15392
|
const HEADER_CLIENT_NAME = 'X-Box-Client-Name';
|
|
15393
15393
|
const HEADER_CLIENT_VERSION = 'X-Box-Client-Version';
|
|
15394
15394
|
const PROMISE_MAP = {};
|
|
@@ -17085,7 +17085,7 @@ class Browser {
|
|
|
17085
17085
|
;// ./src/lib/Logger.js
|
|
17086
17086
|
/* eslint-disable no-undef */
|
|
17087
17087
|
const Logger_CLIENT_NAME = "box-content-preview";
|
|
17088
|
-
const Logger_CLIENT_VERSION = "3.
|
|
17088
|
+
const Logger_CLIENT_VERSION = "3.81.0";
|
|
17089
17089
|
/* eslint-enable no-undef */
|
|
17090
17090
|
|
|
17091
17091
|
class Logger {
|
|
@@ -17264,7 +17264,7 @@ function FocusTrap_defineProperty(e, r, t) { return (r = FocusTrap_toPropertyKey
|
|
|
17264
17264
|
function FocusTrap_toPropertyKey(t) { var i = FocusTrap_toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
|
|
17265
17265
|
function FocusTrap_toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
17266
17266
|
|
|
17267
|
-
const FOCUSABLE_ELEMENT_SELECTORS = ['a[href]', 'button', 'textarea', 'input[type="text"]', 'input[type="radio"]', 'input[type="checkbox"]', 'select', '[role="option"][tabindex="0"]'];
|
|
17267
|
+
const FOCUSABLE_ELEMENT_SELECTORS = ['a[href]', 'button', 'textarea', 'input[type="text"]', 'input[type="radio"]', 'input[type="checkbox"]', 'select', '[role="option"][tabindex="0"]', '[role="gridcell"][tabindex="0"]'];
|
|
17268
17268
|
const EXCLUDED_SELECTOR_ATTRIBUTES = ['disabled', 'tabindex="-1"', 'aria-disabled="true"', 'aria-hidden="true"'];
|
|
17269
17269
|
const FOCUSABLE_ELEMENTS_SELECTOR = FOCUSABLE_ELEMENT_SELECTORS.map(element => {
|
|
17270
17270
|
let selector = element;
|
|
@@ -34104,8 +34104,16 @@ function VideoFullscreenButton({
|
|
|
34104
34104
|
});
|
|
34105
34105
|
};
|
|
34106
34106
|
update();
|
|
34107
|
+
|
|
34108
|
+
// Watch both the video and the overlay parent. A sibling layout change
|
|
34109
|
+
// (e.g. a host-page sidebar) can shrink the parent and re-center the
|
|
34110
|
+
// video without changing the video element's box size, so observing
|
|
34111
|
+
// mediaEl alone would leave the button at a stale `right` offset.
|
|
34107
34112
|
const resizeObserver = new ResizeObserver(update);
|
|
34108
34113
|
resizeObserver.observe(mediaEl);
|
|
34114
|
+
if (ref.current?.offsetParent) {
|
|
34115
|
+
resizeObserver.observe(ref.current.offsetParent);
|
|
34116
|
+
}
|
|
34109
34117
|
window.addEventListener('resize', update);
|
|
34110
34118
|
return () => {
|
|
34111
34119
|
resizeObserver.disconnect();
|
|
@@ -37799,6 +37807,30 @@ class Thumbnail {
|
|
|
37799
37807
|
}
|
|
37800
37808
|
}
|
|
37801
37809
|
/* harmony default export */ const lib_Thumbnail = (Thumbnail);
|
|
37810
|
+
;// ./src/lib/viewers/gallery/constants.ts
|
|
37811
|
+
const GALLERY_THUMB_MAX_WIDTH = 440;
|
|
37812
|
+
const CONCURRENT_LOADS = 4;
|
|
37813
|
+
const SCROLL_THROTTLE_MS = 200;
|
|
37814
|
+
|
|
37815
|
+
// Keep in sync with the 100% grid rule in GalleryGrid.scss.
|
|
37816
|
+
const GALLERY_TILE_GAP = 16;
|
|
37817
|
+
const GALLERY_TILE_MIN_WIDTH = 220;
|
|
37818
|
+
const GALLERY_THUMB_WIDTH_TIERS = [GALLERY_THUMB_MAX_WIDTH, GALLERY_THUMB_MAX_WIDTH * 2, GALLERY_THUMB_MAX_WIDTH * 3];
|
|
37819
|
+
const GALLERY_THUMB_MAX_TIER = GALLERY_THUMB_WIDTH_TIERS[GALLERY_THUMB_WIDTH_TIERS.length - 1];
|
|
37820
|
+
const GALLERY_THUMB_MAX_DPR = 2;
|
|
37821
|
+
const GALLERY_HIGH_RES_MAX_BYTES = 64 * 1024 * 1024;
|
|
37822
|
+
const GALLERY_HIGH_RES_MAX_PAGES = 16;
|
|
37823
|
+
const GALLERY_HIGH_RES_CONCURRENCY = 2;
|
|
37824
|
+
|
|
37825
|
+
// Gallery availability and zoom limits.
|
|
37826
|
+
// Hide the gallery toggle for files above this page count.
|
|
37827
|
+
const GALLERY_MAX_PAGES = 200;
|
|
37828
|
+
const GALLERY_MAX_SCALE = 3;
|
|
37829
|
+
const GALLERY_MIN_SCALE = 0.5;
|
|
37830
|
+
const GALLERY_SCALE_STEP = 0.1;
|
|
37831
|
+
|
|
37832
|
+
// Keep in sync with the thumbnails sidebar CSS transition.
|
|
37833
|
+
const THUMBNAILS_SIDEBAR_TRANSITION_TIME = 301;
|
|
37802
37834
|
;// ./src/lib/viewers/gallery/HighResThumbnailStore.ts
|
|
37803
37835
|
function HighResThumbnailStore_ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
37804
37836
|
function HighResThumbnailStore_objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? HighResThumbnailStore_ownKeys(Object(t), !0).forEach(function (r) { HighResThumbnailStore_defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : HighResThumbnailStore_ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
@@ -37977,6 +38009,40 @@ class HighResThumbnailStore {
|
|
|
37977
38009
|
return !this.isDestroyed && this.targetWidth === pending.width && this.retained.has(pageNum);
|
|
37978
38010
|
}
|
|
37979
38011
|
}
|
|
38012
|
+
;// ./src/lib/viewers/gallery/galleryGridNavigation.ts
|
|
38013
|
+
/**
|
|
38014
|
+
* Pure math for the gallery ARIA grid: pages are laid out row-major, so page p
|
|
38015
|
+
* (1-based) occupies row floor((p - 1) / columns) + 1 and column ((p - 1) % columns) + 1.
|
|
38016
|
+
* All indices returned here are 1-based, matching aria-rowindex / aria-colindex.
|
|
38017
|
+
*/
|
|
38018
|
+
|
|
38019
|
+
function getRowCount(pageCount, columnCount) {
|
|
38020
|
+
return Math.ceil(pageCount / columnCount);
|
|
38021
|
+
}
|
|
38022
|
+
function getRowIndex(pageNum, columnCount) {
|
|
38023
|
+
return Math.floor((pageNum - 1) / columnCount) + 1;
|
|
38024
|
+
}
|
|
38025
|
+
function getColumnIndex(pageNum, columnCount) {
|
|
38026
|
+
return (pageNum - 1) % columnCount + 1;
|
|
38027
|
+
}
|
|
38028
|
+
|
|
38029
|
+
/** Page one row up in the same column, or null when already in the first row. */
|
|
38030
|
+
function getPageAbove(pageNum, columnCount) {
|
|
38031
|
+
const target = pageNum - columnCount;
|
|
38032
|
+
return target >= 1 ? target : null;
|
|
38033
|
+
}
|
|
38034
|
+
|
|
38035
|
+
/**
|
|
38036
|
+
* Page one row down in the same column, clamped to the last page when the final row is
|
|
38037
|
+
* incomplete (so Down from a cell with no cell directly below lands on the last tile).
|
|
38038
|
+
* Null when already in the last row.
|
|
38039
|
+
*/
|
|
38040
|
+
function getPageBelow(pageNum, columnCount, pageCount) {
|
|
38041
|
+
if (getRowIndex(pageNum, columnCount) >= getRowCount(pageCount, columnCount)) {
|
|
38042
|
+
return null;
|
|
38043
|
+
}
|
|
38044
|
+
return Math.min(pageNum + columnCount, pageCount);
|
|
38045
|
+
}
|
|
37980
38046
|
;// ./src/lib/viewers/gallery/useGalleryPinch.ts
|
|
37981
38047
|
|
|
37982
38048
|
|
|
@@ -38112,26 +38178,17 @@ function GalleryGrid_toPrimitive(t, r) { if ("object" != typeof t || !t) return
|
|
|
38112
38178
|
|
|
38113
38179
|
|
|
38114
38180
|
|
|
38115
|
-
|
|
38116
|
-
|
|
38117
|
-
const SCROLL_THROTTLE_MS = 200;
|
|
38118
|
-
// Keep in sync with the 100% grid rule in GalleryGrid.scss
|
|
38119
|
-
const GALLERY_TILE_GAP = 16;
|
|
38120
|
-
const GALLERY_TILE_MIN_WIDTH = 220;
|
|
38121
|
-
const GALLERY_THUMB_WIDTH_TIERS = [GALLERY_THUMB_MAX_WIDTH, GALLERY_THUMB_MAX_WIDTH * 2, GALLERY_THUMB_MAX_WIDTH * 3];
|
|
38122
|
-
const GALLERY_THUMB_MAX_TIER = GALLERY_THUMB_WIDTH_TIERS[GALLERY_THUMB_WIDTH_TIERS.length - 1];
|
|
38123
|
-
const GALLERY_THUMB_MAX_DPR = 2;
|
|
38124
|
-
const GALLERY_HIGH_RES_MAX_BYTES = 64 * 1024 * 1024;
|
|
38125
|
-
const GALLERY_HIGH_RES_MAX_PAGES = 16;
|
|
38126
|
-
const GALLERY_HIGH_RES_CONCURRENCY = 2;
|
|
38127
|
-
const GALLERY_DEFAULT_PAGE_RATIO = 0.775;
|
|
38181
|
+
|
|
38182
|
+
|
|
38128
38183
|
const GalleryTile = /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.memo(function GalleryTile({
|
|
38129
38184
|
pageNum,
|
|
38130
38185
|
isFocused,
|
|
38186
|
+
ariaColIndex,
|
|
38131
38187
|
imageSrc,
|
|
38132
38188
|
onClick,
|
|
38133
38189
|
onFocus,
|
|
38134
|
-
pageRatio
|
|
38190
|
+
pageRatio,
|
|
38191
|
+
role
|
|
38135
38192
|
}) {
|
|
38136
38193
|
const ratio = pageRatio && Number.isFinite(pageRatio) && pageRatio > 0 ? pageRatio : null;
|
|
38137
38194
|
const tileStyle = ratio ? {
|
|
@@ -38147,6 +38204,7 @@ const GalleryTile = /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.memo(
|
|
|
38147
38204
|
/*#__PURE__*/
|
|
38148
38205
|
// eslint-disable-next-line jsx-a11y/click-events-have-key-events
|
|
38149
38206
|
__WEBPACK_EXTERNAL_MODULE_react_default__.createElement("div", {
|
|
38207
|
+
"aria-colindex": ariaColIndex,
|
|
38150
38208
|
"aria-label": replacePlaceholders("Page {1}", [String(pageNum)]),
|
|
38151
38209
|
"aria-selected": isFocused,
|
|
38152
38210
|
className: `bp-gallery-tile${isFocused ? ' bp-gallery-tile--selected' : ''}`,
|
|
@@ -38154,10 +38212,11 @@ const GalleryTile = /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.memo(
|
|
|
38154
38212
|
"data-resin-target": "galleryTile",
|
|
38155
38213
|
onClick: () => onClick(pageNum),
|
|
38156
38214
|
onFocus: () => onFocus(pageNum),
|
|
38157
|
-
role:
|
|
38215
|
+
role: role,
|
|
38158
38216
|
style: tileStyle,
|
|
38159
38217
|
tabIndex: isFocused ? 0 : -1
|
|
38160
38218
|
}, /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement("span", {
|
|
38219
|
+
"aria-hidden": "true",
|
|
38161
38220
|
className: "bp-gallery-tile-badge"
|
|
38162
38221
|
}, pageNum), imageSrc ? /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement("img", {
|
|
38163
38222
|
alt: "",
|
|
@@ -38173,6 +38232,7 @@ function GalleryGrid({
|
|
|
38173
38232
|
pageCount,
|
|
38174
38233
|
currentPage,
|
|
38175
38234
|
getPageRatio,
|
|
38235
|
+
isAriaGridEnabled = false,
|
|
38176
38236
|
isPinchZoomEnabled = false,
|
|
38177
38237
|
isTouchZoomEnabled = false,
|
|
38178
38238
|
onClose,
|
|
@@ -38187,6 +38247,8 @@ function GalleryGrid({
|
|
|
38187
38247
|
const [highResImages, setHighResImages] = __WEBPACK_EXTERNAL_MODULE_react_useState__({});
|
|
38188
38248
|
const [focusedPage, setFocusedPage] = __WEBPACK_EXTERNAL_MODULE_react_useState__(currentPage);
|
|
38189
38249
|
const [pageRatio, setPageRatio] = __WEBPACK_EXTERNAL_MODULE_react_useState__(null);
|
|
38250
|
+
// Measured from the rendered layout; drives ARIA grid row/column numbers and 2D navigation.
|
|
38251
|
+
const [columnCount, setColumnCount] = __WEBPACK_EXTERNAL_MODULE_react_useState__(1);
|
|
38190
38252
|
// Topmost visible page — the scroll anchor used to restore the viewed area after a reflow.
|
|
38191
38253
|
const anchorPageRef = __WEBPACK_EXTERNAL_MODULE_react_useRef__(currentPage);
|
|
38192
38254
|
const gridRef = __WEBPACK_EXTERNAL_MODULE_react_useRef__(null);
|
|
@@ -38198,6 +38260,11 @@ function GalleryGrid({
|
|
|
38198
38260
|
const isMountedRef = __WEBPACK_EXTERNAL_MODULE_react_useRef__(true);
|
|
38199
38261
|
const inFlightRef = __WEBPACK_EXTERNAL_MODULE_react_useRef__(new Set());
|
|
38200
38262
|
const highResStoreRef = __WEBPACK_EXTERNAL_MODULE_react_useRef__(null);
|
|
38263
|
+
const columnCountRef = __WEBPACK_EXTERNAL_MODULE_react_useRef__(1);
|
|
38264
|
+
const restoreFocusRef = __WEBPACK_EXTERNAL_MODULE_react_useRef__(false);
|
|
38265
|
+
// Anchor tile and its viewport top, captured together when a re-chunk is scheduled so the
|
|
38266
|
+
// post-commit effect restores against the same tile even if the anchor page changes meanwhile.
|
|
38267
|
+
const rechunkAnchorRef = __WEBPACK_EXTERNAL_MODULE_react_useRef__(null);
|
|
38201
38268
|
const byDistanceFromAnchor = (a, b) => Math.abs(a - anchorPageRef.current) - Math.abs(b - anchorPageRef.current);
|
|
38202
38269
|
function getNeededThumbWidth() {
|
|
38203
38270
|
if (scaleRef.current === 1) {
|
|
@@ -38236,13 +38303,15 @@ function GalleryGrid({
|
|
|
38236
38303
|
}
|
|
38237
38304
|
function syncHighRes() {
|
|
38238
38305
|
const store = highResStoreRef.current;
|
|
38239
|
-
|
|
38306
|
+
const {
|
|
38307
|
+
pageRatio
|
|
38308
|
+
} = thumbnail;
|
|
38309
|
+
if (!store || !pageRatio) return;
|
|
38240
38310
|
const width = getNeededThumbWidth();
|
|
38241
|
-
const ratio = thumbnail.pageRatio || GALLERY_DEFAULT_PAGE_RATIO;
|
|
38242
38311
|
if (width === GALLERY_THUMB_MAX_WIDTH) {
|
|
38243
|
-
store.setRetained([], width,
|
|
38312
|
+
store.setRetained([], width, pageRatio);
|
|
38244
38313
|
} else if (!isProcessingRef.current) {
|
|
38245
|
-
store.setRetained(getPagesNearViewport(0.5), width,
|
|
38314
|
+
store.setRetained(getPagesNearViewport(0.5), width, pageRatio);
|
|
38246
38315
|
}
|
|
38247
38316
|
}
|
|
38248
38317
|
function getUnloadedNearViewport() {
|
|
@@ -38365,6 +38434,46 @@ function GalleryGrid({
|
|
|
38365
38434
|
inner.style.gridTemplateColumns = `repeat(auto-fill, ${Math.min(width, baseWidth * currentScale)}px)`;
|
|
38366
38435
|
inner.style.justifyContent = 'center';
|
|
38367
38436
|
}, []);
|
|
38437
|
+
|
|
38438
|
+
// Counts tiles sharing the first row's offsetTop instead of duplicating the CSS
|
|
38439
|
+
// auto-fill math, so the stylesheet stays the only source of truth for the layout.
|
|
38440
|
+
// Runs after every layout mutation: mount, container resize, and zoom changes.
|
|
38441
|
+
const measureColumnCount = __WEBPACK_EXTERNAL_MODULE_react_useCallback__(() => {
|
|
38442
|
+
const grid = gridRef.current;
|
|
38443
|
+
const inner = innerRef.current;
|
|
38444
|
+
if (!isAriaGridEnabled || !grid || !inner) {
|
|
38445
|
+
return;
|
|
38446
|
+
}
|
|
38447
|
+
|
|
38448
|
+
// Without a layout box (hidden host, zero-size container), offsetTop reads 0 for every
|
|
38449
|
+
// tile and the count would balloon to the page count; keep the last measured value.
|
|
38450
|
+
if (!inner.offsetWidth) {
|
|
38451
|
+
return;
|
|
38452
|
+
}
|
|
38453
|
+
const tiles = inner.querySelectorAll('[data-page]');
|
|
38454
|
+
if (tiles.length === 0) {
|
|
38455
|
+
return;
|
|
38456
|
+
}
|
|
38457
|
+
let count = 1;
|
|
38458
|
+
while (count < tiles.length && tiles[count].offsetTop === tiles[0].offsetTop) {
|
|
38459
|
+
count += 1;
|
|
38460
|
+
}
|
|
38461
|
+
if (count !== columnCountRef.current) {
|
|
38462
|
+
// Re-chunking tiles into different rows recreates the focused tile's DOM node,
|
|
38463
|
+
// which would silently drop focus to <body>; remember to restore it post-render.
|
|
38464
|
+
restoreFocusRef.current = grid.contains(document.activeElement);
|
|
38465
|
+
// Capture where the anchor tile sits now — after any zoom/resize scroll fixups that
|
|
38466
|
+
// already ran — so the post-commit effect can restore its position.
|
|
38467
|
+
const anchorPage = anchorPageRef.current;
|
|
38468
|
+
const anchorTile = grid.querySelector(`[data-page="${anchorPage}"]`);
|
|
38469
|
+
rechunkAnchorRef.current = anchorTile ? {
|
|
38470
|
+
page: anchorPage,
|
|
38471
|
+
top: anchorTile.getBoundingClientRect().top
|
|
38472
|
+
} : null;
|
|
38473
|
+
columnCountRef.current = count;
|
|
38474
|
+
setColumnCount(count);
|
|
38475
|
+
}
|
|
38476
|
+
}, [isAriaGridEnabled]);
|
|
38368
38477
|
__WEBPACK_EXTERNAL_MODULE_react_useLayoutEffect__(() => {
|
|
38369
38478
|
const grid = gridRef.current;
|
|
38370
38479
|
const previousScale = scaleRef.current;
|
|
@@ -38373,6 +38482,7 @@ function GalleryGrid({
|
|
|
38373
38482
|
focalRef.current = null;
|
|
38374
38483
|
if (!grid || previousScale === scale) {
|
|
38375
38484
|
applyZoomLayout();
|
|
38485
|
+
measureColumnCount();
|
|
38376
38486
|
return;
|
|
38377
38487
|
}
|
|
38378
38488
|
const focalTile = focal ? document.elementFromPoint?.(focal.x, focal.y)?.closest('[data-page]') : null;
|
|
@@ -38385,7 +38495,8 @@ function GalleryGrid({
|
|
|
38385
38495
|
grid.scrollTop += afterRect.top - beforeRect.top;
|
|
38386
38496
|
}
|
|
38387
38497
|
handleScrollRef.current();
|
|
38388
|
-
|
|
38498
|
+
measureColumnCount();
|
|
38499
|
+
}, [applyZoomLayout, measureColumnCount, scale]);
|
|
38389
38500
|
__WEBPACK_EXTERNAL_MODULE_react_useEffect__(() => {
|
|
38390
38501
|
const throttledScroll = handleScrollRef.current;
|
|
38391
38502
|
const highResStore = new HighResThumbnailStore({
|
|
@@ -38409,6 +38520,12 @@ function GalleryGrid({
|
|
|
38409
38520
|
block: 'center'
|
|
38410
38521
|
});
|
|
38411
38522
|
tile.focus();
|
|
38523
|
+
// The mount-time measurement may have captured this tile's position before this
|
|
38524
|
+
// centering ran; refresh the capture so the re-chunk restore keeps the centering.
|
|
38525
|
+
const anchor = rechunkAnchorRef.current;
|
|
38526
|
+
if (anchor && anchor.page === currentPage) {
|
|
38527
|
+
anchor.top = tile.getBoundingClientRect().top;
|
|
38528
|
+
}
|
|
38412
38529
|
}
|
|
38413
38530
|
}
|
|
38414
38531
|
const initialImages = {};
|
|
@@ -38454,24 +38571,31 @@ function GalleryGrid({
|
|
|
38454
38571
|
if (!grid) return undefined;
|
|
38455
38572
|
let isFirstObservation = true;
|
|
38456
38573
|
const observer = new ResizeObserver(() => {
|
|
38574
|
+
// The initial fire on observe() can already report a size the mount-time layout
|
|
38575
|
+
// effect never saw (e.g. a container that gained its size right after mount), so
|
|
38576
|
+
// always re-apply layout and re-measure; only the scroll-anchor restore is skipped
|
|
38577
|
+
// on that first delivery, since there is no viewed area to preserve yet.
|
|
38578
|
+
applyZoomLayout();
|
|
38457
38579
|
if (isFirstObservation) {
|
|
38458
|
-
isFirstObservation = false;
|
|
38580
|
+
isFirstObservation = false;
|
|
38581
|
+
measureColumnCount();
|
|
38459
38582
|
return;
|
|
38460
38583
|
}
|
|
38461
|
-
applyZoomLayout();
|
|
38462
38584
|
const tile = grid.querySelector(`[data-page="${anchorPageRef.current}"]`);
|
|
38463
38585
|
if (tile) {
|
|
38464
38586
|
tile.scrollIntoView({
|
|
38465
38587
|
block: 'start'
|
|
38466
38588
|
});
|
|
38467
38589
|
}
|
|
38590
|
+
// Measure after the anchor restore so a scheduled re-chunk captures the restored position.
|
|
38591
|
+
measureColumnCount();
|
|
38468
38592
|
// A larger viewport (fullscreen enter, window resize) can reveal unloaded tiles
|
|
38469
38593
|
// without any scroll event, so run the same catch-up the scroll handler does.
|
|
38470
38594
|
handleScrollRef.current();
|
|
38471
38595
|
});
|
|
38472
38596
|
observer.observe(grid);
|
|
38473
38597
|
return () => observer.disconnect();
|
|
38474
|
-
}, [applyZoomLayout]);
|
|
38598
|
+
}, [applyZoomLayout, measureColumnCount]);
|
|
38475
38599
|
const focusTile = __WEBPACK_EXTERNAL_MODULE_react_useCallback__((pageNum, options) => {
|
|
38476
38600
|
const grid = gridRef.current;
|
|
38477
38601
|
if (!grid) return;
|
|
@@ -38480,6 +38604,37 @@ function GalleryGrid({
|
|
|
38480
38604
|
tile.focus(options);
|
|
38481
38605
|
}
|
|
38482
38606
|
}, []);
|
|
38607
|
+
|
|
38608
|
+
// Re-chunk recreates the tile DOM nodes, which drops focus and can shift the scroll
|
|
38609
|
+
// position; restore both after the new nodes commit.
|
|
38610
|
+
const committedColumnCountRef = __WEBPACK_EXTERNAL_MODULE_react_useRef__(columnCount);
|
|
38611
|
+
__WEBPACK_EXTERNAL_MODULE_react_useLayoutEffect__(() => {
|
|
38612
|
+
const isRechunk = committedColumnCountRef.current !== columnCount;
|
|
38613
|
+
committedColumnCountRef.current = columnCount;
|
|
38614
|
+
if (!isRechunk) {
|
|
38615
|
+
return;
|
|
38616
|
+
}
|
|
38617
|
+
const active = document.activeElement;
|
|
38618
|
+
if (restoreFocusRef.current || !active || active === document.body) {
|
|
38619
|
+
restoreFocusRef.current = false;
|
|
38620
|
+
focusTile(focusedPage, {
|
|
38621
|
+
preventScroll: true
|
|
38622
|
+
});
|
|
38623
|
+
}
|
|
38624
|
+
const anchor = rechunkAnchorRef.current;
|
|
38625
|
+
rechunkAnchorRef.current = null;
|
|
38626
|
+
|
|
38627
|
+
// Swapping the row DOM out from under the scroller can shift scrollTop. Restore the
|
|
38628
|
+
// captured anchor tile to its captured viewport position by delta, preserving the mount
|
|
38629
|
+
// centering and the zoom focal-point / resize fixups that already ran.
|
|
38630
|
+
const grid = gridRef.current;
|
|
38631
|
+
if (grid && anchor) {
|
|
38632
|
+
const tile = grid.querySelector(`[data-page="${anchor.page}"]`);
|
|
38633
|
+
if (tile) {
|
|
38634
|
+
grid.scrollTop += tile.getBoundingClientRect().top - anchor.top;
|
|
38635
|
+
}
|
|
38636
|
+
}
|
|
38637
|
+
}, [columnCount, focusedPage, focusTile]);
|
|
38483
38638
|
const handleTileFocus = __WEBPACK_EXTERNAL_MODULE_react_useCallback__(pageNum => {
|
|
38484
38639
|
setFocusedPage(pageNum);
|
|
38485
38640
|
if (onFocusChange) {
|
|
@@ -38504,8 +38659,28 @@ function GalleryGrid({
|
|
|
38504
38659
|
event.stopPropagation();
|
|
38505
38660
|
onClose();
|
|
38506
38661
|
return;
|
|
38507
|
-
// Listbox
|
|
38662
|
+
// Listbox: every arrow moves ±1 page. ARIA grid: Left/Right stay ±1 (across row
|
|
38663
|
+
// edges, clamped at first/last page); Up/Down move one row (Down clamps on a short last row).
|
|
38508
38664
|
case 'ArrowUp':
|
|
38665
|
+
{
|
|
38666
|
+
event.preventDefault();
|
|
38667
|
+
event.stopPropagation();
|
|
38668
|
+
const target = isAriaGridEnabled ? getPageAbove(focusedPage, columnCount) : focusedPage - 1;
|
|
38669
|
+
if (target !== null && target >= 1) {
|
|
38670
|
+
focusTile(target);
|
|
38671
|
+
}
|
|
38672
|
+
return;
|
|
38673
|
+
}
|
|
38674
|
+
case 'ArrowDown':
|
|
38675
|
+
{
|
|
38676
|
+
event.preventDefault();
|
|
38677
|
+
event.stopPropagation();
|
|
38678
|
+
const target = isAriaGridEnabled ? getPageBelow(focusedPage, columnCount, pageCount) : focusedPage + 1;
|
|
38679
|
+
if (target !== null && target <= pageCount) {
|
|
38680
|
+
focusTile(target);
|
|
38681
|
+
}
|
|
38682
|
+
return;
|
|
38683
|
+
}
|
|
38509
38684
|
case 'ArrowLeft':
|
|
38510
38685
|
event.preventDefault();
|
|
38511
38686
|
event.stopPropagation();
|
|
@@ -38513,7 +38688,6 @@ function GalleryGrid({
|
|
|
38513
38688
|
focusTile(focusedPage - 1);
|
|
38514
38689
|
}
|
|
38515
38690
|
return;
|
|
38516
|
-
case 'ArrowDown':
|
|
38517
38691
|
case 'ArrowRight':
|
|
38518
38692
|
event.preventDefault();
|
|
38519
38693
|
event.stopPropagation();
|
|
@@ -38539,33 +38713,59 @@ function GalleryGrid({
|
|
|
38539
38713
|
break;
|
|
38540
38714
|
default:
|
|
38541
38715
|
}
|
|
38542
|
-
}, [focusedPage, focusTile, onClose, onPageNavigate, pageCount]);
|
|
38716
|
+
}, [columnCount, focusedPage, focusTile, isAriaGridEnabled, onClose, onPageNavigate, pageCount]);
|
|
38543
38717
|
const tiles = [];
|
|
38544
38718
|
for (let i = 1; i <= pageCount; i += 1) {
|
|
38545
38719
|
tiles.push(/*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(GalleryTile, {
|
|
38546
38720
|
key: i,
|
|
38721
|
+
ariaColIndex: isAriaGridEnabled ? getColumnIndex(i, columnCount) : undefined,
|
|
38547
38722
|
imageSrc: highResImages[i] || loadedImages[i],
|
|
38548
38723
|
isFocused: i === focusedPage,
|
|
38549
38724
|
onClick: handleTileClick,
|
|
38550
38725
|
onFocus: handleTileFocus,
|
|
38551
38726
|
pageNum: i,
|
|
38552
|
-
pageRatio: getPageRatio && getPageRatio(i) || pageRatio
|
|
38727
|
+
pageRatio: getPageRatio && getPageRatio(i) || pageRatio,
|
|
38728
|
+
role: isAriaGridEnabled ? 'gridcell' : 'option'
|
|
38553
38729
|
}));
|
|
38554
38730
|
}
|
|
38731
|
+
|
|
38732
|
+
// ARIA requires gridcells to live inside rows. The display: contents row wrappers add
|
|
38733
|
+
// that level to the accessibility tree without generating boxes, so the tiles remain
|
|
38734
|
+
// direct CSS-grid items and the visual layout is identical to the flat listbox.
|
|
38735
|
+
let content = tiles;
|
|
38736
|
+
if (isAriaGridEnabled) {
|
|
38737
|
+
const rows = [];
|
|
38738
|
+
for (let start = 0; start < tiles.length; start += columnCount) {
|
|
38739
|
+
const rowIndex = start / columnCount + 1;
|
|
38740
|
+
rows.push(
|
|
38741
|
+
/*#__PURE__*/
|
|
38742
|
+
// Named with the row number so AT announces that instead of every tile in the row.
|
|
38743
|
+
__WEBPACK_EXTERNAL_MODULE_react_default__.createElement("div", {
|
|
38744
|
+
key: start,
|
|
38745
|
+
"aria-label": String(rowIndex),
|
|
38746
|
+
"aria-rowindex": rowIndex,
|
|
38747
|
+
className: "bp-gallery-grid-row",
|
|
38748
|
+
role: "row"
|
|
38749
|
+
}, tiles.slice(start, start + columnCount)));
|
|
38750
|
+
}
|
|
38751
|
+
content = rows;
|
|
38752
|
+
}
|
|
38555
38753
|
return /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement("div", {
|
|
38556
38754
|
ref: gridRef,
|
|
38755
|
+
"aria-colcount": isAriaGridEnabled ? columnCount : undefined,
|
|
38557
38756
|
"aria-label": "Page gallery",
|
|
38757
|
+
"aria-rowcount": isAriaGridEnabled ? getRowCount(pageCount, columnCount) : undefined,
|
|
38558
38758
|
className: "bp-gallery-grid",
|
|
38559
38759
|
onFocus: handleGridFocus,
|
|
38560
38760
|
onKeyDown: handleGridKeyDown,
|
|
38561
38761
|
onScroll: handleScroll,
|
|
38562
|
-
role:
|
|
38762
|
+
role: isAriaGridEnabled ? 'grid' : 'listbox',
|
|
38563
38763
|
tabIndex: -1
|
|
38564
38764
|
}, /*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement("div", {
|
|
38565
38765
|
ref: innerRef,
|
|
38566
38766
|
className: "bp-gallery-grid-inner",
|
|
38567
38767
|
role: "presentation"
|
|
38568
|
-
},
|
|
38768
|
+
}, content));
|
|
38569
38769
|
}
|
|
38570
38770
|
;// ./src/lib/viewers/gallery/GalleryController.tsx
|
|
38571
38771
|
function GalleryController_defineProperty(e, r, t) { return (r = GalleryController_toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
|
|
@@ -38581,16 +38781,10 @@ function GalleryController_toPrimitive(t, r) { if ("object" != typeof t || !t) r
|
|
|
38581
38781
|
|
|
38582
38782
|
|
|
38583
38783
|
|
|
38784
|
+
|
|
38584
38785
|
// Controller-owned shape: GalleryGrid only sees the read surface (GalleryThumbnail),
|
|
38585
38786
|
// but the controller also needs destroy() to invalidate the cache on rotate/teardown.
|
|
38586
38787
|
|
|
38587
|
-
const GALLERY_MAX_PAGES = 200; // Hide gallery toggle for files above this page count, will increase in V2
|
|
38588
|
-
const THUMBNAILS_SIDEBAR_TRANSITION_TIME = 301; // ms
|
|
38589
|
-
|
|
38590
|
-
const GALLERY_MAX_SCALE = 3;
|
|
38591
|
-
const GALLERY_MIN_SCALE = 0.5;
|
|
38592
|
-
const GALLERY_SCALE_STEP = 0.1;
|
|
38593
|
-
|
|
38594
38788
|
// Minimal local shapes for untyped peer modules (pdfjs is JS-only, sidebar is JS-only).
|
|
38595
38789
|
// Only the members the controller actually uses are declared — extend as needed.
|
|
38596
38790
|
|
|
@@ -38700,7 +38894,7 @@ class GalleryController {
|
|
|
38700
38894
|
this.galleryFocusedPage = pageNum;
|
|
38701
38895
|
});
|
|
38702
38896
|
GalleryController_defineProperty(this, "commitScale", scale => {
|
|
38703
|
-
if (!this.
|
|
38897
|
+
if (!this.isEnhancedGalleryEnabled || !Number.isFinite(scale)) {
|
|
38704
38898
|
return false;
|
|
38705
38899
|
}
|
|
38706
38900
|
const clamped = Math.min(GALLERY_MAX_SCALE, Math.max(GALLERY_MIN_SCALE, Math.round(scale * 1000) / 1000));
|
|
@@ -38747,7 +38941,9 @@ class GalleryController {
|
|
|
38747
38941
|
get scale() {
|
|
38748
38942
|
return this.galleryScale;
|
|
38749
38943
|
}
|
|
38750
|
-
|
|
38944
|
+
|
|
38945
|
+
/** Both gallery flags must be on: parent apps target the splits independently. */
|
|
38946
|
+
get isEnhancedGalleryEnabled() {
|
|
38751
38947
|
const {
|
|
38752
38948
|
features
|
|
38753
38949
|
} = this;
|
|
@@ -38762,16 +38958,17 @@ class GalleryController {
|
|
|
38762
38958
|
return true;
|
|
38763
38959
|
}
|
|
38764
38960
|
/**
|
|
38765
|
-
* Redirects
|
|
38961
|
+
* Redirects a grid-nav key pressed outside the grid (e.g. focus parked on a toggle after
|
|
38766
38962
|
* toggling fullscreen) back into it: refocuses the selected tile and replays the key so
|
|
38767
38963
|
* the first press navigates, like the thumbnail sidebar. Keys pressed inside the grid
|
|
38768
|
-
* never arrive here — GalleryGrid stops propagation on every arrow it handles.
|
|
38964
|
+
* never arrive here — GalleryGrid stops propagation on every arrow/Home/End it handles.
|
|
38769
38965
|
*/
|
|
38770
38966
|
handleArrowKey(key) {
|
|
38771
|
-
if (!this.isGalleryOpen
|
|
38967
|
+
if (!this.isGalleryOpen) return;
|
|
38968
|
+
if (!key.startsWith('Arrow') && key !== 'Home' && key !== 'End') return;
|
|
38772
38969
|
const grid = this.galleryEl;
|
|
38773
38970
|
if (!grid) return;
|
|
38774
|
-
const tile = grid.querySelector('[role="option"][tabindex="0"]');
|
|
38971
|
+
const tile = grid.querySelector('[role="option"][tabindex="0"], [role="gridcell"][tabindex="0"]');
|
|
38775
38972
|
if (tile) {
|
|
38776
38973
|
tile.focus();
|
|
38777
38974
|
tile.dispatchEvent(new KeyboardEvent('keydown', {
|
|
@@ -38854,8 +39051,9 @@ class GalleryController {
|
|
|
38854
39051
|
this.galleryRoot.render(/*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(GalleryGrid, {
|
|
38855
39052
|
currentPage: pdfViewer.currentPageNumber,
|
|
38856
39053
|
getPageRatio: this.getPageRatio,
|
|
38857
|
-
|
|
38858
|
-
|
|
39054
|
+
isAriaGridEnabled: this.isEnhancedGalleryEnabled,
|
|
39055
|
+
isPinchZoomEnabled: this.isEnhancedGalleryEnabled && isFeatureEnabled(this.features, 'pinchToZoom.enabled'),
|
|
39056
|
+
isTouchZoomEnabled: this.isEnhancedGalleryEnabled && this.hasTouch,
|
|
38859
39057
|
onClose: this.toggle,
|
|
38860
39058
|
onFocusChange: this.handleFocusChange,
|
|
38861
39059
|
onPageNavigate: this.handleGalleryNavigate,
|
|
@@ -40243,6 +40441,7 @@ function DocBaseViewer_toPrimitive(t, r) { if ("object" != typeof t || !t) retur
|
|
|
40243
40441
|
|
|
40244
40442
|
|
|
40245
40443
|
|
|
40444
|
+
|
|
40246
40445
|
|
|
40247
40446
|
|
|
40248
40447
|
const DOC_FIRST_PAGES_ENABLED = 'docFirstPages.enabled';
|
|
@@ -41064,7 +41263,7 @@ class DocBaseViewer extends viewers_BaseViewer {
|
|
|
41064
41263
|
this.galleryController.handleEscape();
|
|
41065
41264
|
return true;
|
|
41066
41265
|
}
|
|
41067
|
-
if (this.galleryController.
|
|
41266
|
+
if (this.galleryController.isEnhancedGalleryEnabled) {
|
|
41068
41267
|
if (key === 'Shift++') {
|
|
41069
41268
|
this.galleryController.zoomIn();
|
|
41070
41269
|
return true;
|
|
@@ -41076,9 +41275,9 @@ class DocBaseViewer extends viewers_BaseViewer {
|
|
|
41076
41275
|
}
|
|
41077
41276
|
|
|
41078
41277
|
// Swallow page-nav keys so they can't flip the doc page underneath the gallery
|
|
41079
|
-
// or trigger the host's collection navigation. Arrows pressed outside
|
|
41080
|
-
// are redirected into it so the first press navigates the tiles.
|
|
41081
|
-
if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', '[', ']'].includes(key)) {
|
|
41278
|
+
// or trigger the host's collection navigation. Arrows/Home/End pressed outside
|
|
41279
|
+
// the grid are redirected into it so the first press navigates the tiles.
|
|
41280
|
+
if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Home', 'End', '[', ']'].includes(key)) {
|
|
41082
41281
|
this.galleryController.handleArrowKey(key);
|
|
41083
41282
|
return true;
|
|
41084
41283
|
}
|
|
@@ -41639,13 +41838,13 @@ class DocBaseViewer extends viewers_BaseViewer {
|
|
|
41639
41838
|
const isAnnotationsMode = this.currentAnnotatorViewMode === ANNOTATOR_VIEW_MODES.ANNOTATIONS;
|
|
41640
41839
|
const canRotate = this.featureEnabled('rotate.enabled');
|
|
41641
41840
|
const canGallery = !this.isMobile && this.galleryController.canRender(this.pdfViewer.pagesCount);
|
|
41642
|
-
const isGalleryZoomActive = this.galleryController.isOpen && this.galleryController.
|
|
41841
|
+
const isGalleryZoomActive = this.galleryController.isOpen && this.galleryController.isEnhancedGalleryEnabled;
|
|
41643
41842
|
this.controls.render(/*#__PURE__*/__WEBPACK_EXTERNAL_MODULE_react_default__.createElement(DocControls, {
|
|
41644
41843
|
annotationColor: this.annotationModule.getColor(),
|
|
41645
41844
|
annotationMode: this.annotationControlsFSM.getMode(),
|
|
41646
41845
|
experiences: this.experiences,
|
|
41647
41846
|
hasDrawing: canAnnotate && showAnnotationsDrawingCreate && isAnnotationsMode,
|
|
41648
|
-
hasGalleryZoom: this.galleryController.
|
|
41847
|
+
hasGalleryZoom: this.galleryController.isEnhancedGalleryEnabled,
|
|
41649
41848
|
hasHighlight: canAnnotate && canDownload && isAnnotationsMode,
|
|
41650
41849
|
hasRegion: canAnnotate && isAnnotationsMode,
|
|
41651
41850
|
isGalleryOpen: this.galleryController.isOpen,
|