Skip to content

Adopt Diva's namespaced CSS classes and drop the viewer style-isolation hacks #1001

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
etosphere wants to merge 2 commits into from
Open

Adopt Diva's namespaced CSS classes and drop the viewer style-isolation hacks #1001

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b0b9668
Refactor: adopt released Diva v7.4.1 and drop the CSS scoping workaro…
etosphere Aug 17, 2026
3346dba
Bump vendored Diva to v7.4.2
etosphere Aug 26, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
353 changes: 198 additions & 155 deletions nginx/app/dependencies/diva.js/build/diva.debug.js
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion nginx/app/dependencies/diva.js/build/diva.esm.js
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion nginx/app/dependencies/diva.js/build/diva.js
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion nginx/app/dependencies/diva.js/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "diva.js",
"version": "7.4.1",
"version": "7.4.2",
"license": "MIT",
"repository": {
"type": "git",
Expand Down
11 changes: 4 additions & 7 deletions nginx/app/dependencies/diva.js/src/Main.elm
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -553,8 +553,8 @@ logoutEvent change =
)


mobileShortSideBreakpoint : Int
mobileShortSideBreakpoint =
mobileWidthBreakpoint : Int
mobileWidthBreakpoint =
720


Expand Down Expand Up @@ -1715,13 +1715,10 @@ update msg model =
ViewerLoadingChanged isLoading ->
( { model | isViewerLoading = isLoading }, Cmd.none )

ViewportChanged width height ->
ViewportChanged width _ ->
let
shortSide =
min width height

nextIsMobile =
shortSide <= mobileShortSideBreakpoint
width <= mobileWidthBreakpoint

nextModel =
if nextIsMobile then
Expand Down
9 changes: 9 additions & 0 deletions nginx/app/dependencies/diva.js/src/Model.elm
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,6 +81,7 @@ type alias Page =
, aspect : Float
, label : String
, thumbUrl : String
, fallbackThumbUrl : String
, images : List PageImage
}

Expand Down Expand Up @@ -216,6 +217,13 @@ canvasToPage language canvas =
let
thumbUrl =
canvasThumbnailUrl images canvas

fallbackThumbUrl =
images
|> List.filter .isPrimary
|> List.head
|> Maybe.map .thumbUrl
|> Maybe.withDefault ""
in
Just
{ canvasId = canvas.id
Expand All @@ -224,6 +232,7 @@ canvasToPage language canvas =
, aspect = canvasAspect canvas
, label = canvasLabel canvas
, thumbUrl = thumbUrl
, fallbackThumbUrl = fallbackThumbUrl
, images = images
}

Expand Down
24 changes: 12 additions & 12 deletions nginx/app/dependencies/diva.js/src/View.elm
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ view model =
, View.Sidebar.viewSidebarResizer model
, View.Sidebar.viewSidebarPanel model
]
, div [ HA.class "required-statement-dock" ]
, div [ HA.class "diva-required-statement-dock" ]

@kyrieb-ekat kyrieb-ekat Aug 21, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This renames classes inside the vendored copy of diva.js (tracks the separate DDMAL/diva.js upstream per its package.json). Since the rename only lives here and not upstream, a future diva.js version bump would either silently reintroduce the old unprefixed classes or produce a merge conflict against this fork's edits. Worth confirming: is the plan to upstream this same rename to DDMAL/diva.js, or is this vendored copy meant to diverge permanently from upstream now?

@ahankinson ahankinson Aug 21, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

All classes in Diva are now prefixed upstream. This isn’t a local change

@etosphere etosphere Aug 25, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Confirming Andrew's answer, with the detail that makes this diff confusing: the tree on main says 7.4.1 in package.json but is actually a pre-release snapshot I vendored on 2026-07-23. Upstream didn't tag v7.4.1 until 2026-08-13, and that release is what carries the prefixes.

[ viewMaybe (Lazy.lazy viewRequiredStatement) (requiredStatementTextFor model) ]
, View.PageViewModal.viewPageViewModal model
, View.ManifestInfoModal.viewManifestInfoModal model
Expand Down Expand Up @@ -177,7 +177,7 @@ viewRequiredStatement valueText =

else
div
[ HA.class "required-statement" ]
[ HA.class "diva-required-statement" ]
(HtmlRenderer.renderHtml valueText)


Expand All @@ -197,13 +197,13 @@ viewThrobber =
]
in
div
[ HA.class "throbber-overlay" ]
[ HA.class "diva-throbber-overlay" ]
[ div
[ HA.class "throbber" ]
[ HA.class "diva-throbber" ]
(List.map
(\delay ->
div
[ HA.class "throbber-cube"
[ HA.class "diva-throbber-cube"
, HA.style "animation-delay" (String.fromFloat delay ++ "s")
]
[]
Expand All @@ -216,16 +216,16 @@ viewThrobber =
viewViewerStatusModal : ( String, String, Bool ) -> Html Msg
viewViewerStatusModal ( titleText, message, isError ) =
div
[ HA.class "viewer-status-overlay" ]
[ HA.class "diva-viewer-status-overlay" ]
[ div
[ HA.class "modal is-narrow" ]
[ HA.class "diva-modal is-narrow" ]
[ div
[ HA.class "modal-header" ]
[ div [ HA.class "modal-title" ] [ text titleText ] ]
[ HA.class "diva-modal-header" ]
[ div [ HA.class "diva-modal-title" ] [ text titleText ] ]
, div
[ HA.class "modal-body is-no-sidebar" ]
[ HA.class "diva-modal-body is-no-sidebar" ]
[ div
[ classList [ ( "status", True ), ( "is-error", isError ) ] ]
[ classList [ ( "diva-status", True ), ( "is-error", isError ) ] ]
[ text message ]
]
]
Expand All @@ -234,7 +234,7 @@ viewViewerStatusModal ( titleText, message, isError ) =

viewZoomIndicator : String -> Html Msg
viewZoomIndicator zoomText =
div [ HA.class "viewer-zoom-indicator" ] [ text zoomText ]
div [ HA.class "diva-viewer-zoom-indicator" ] [ text zoomText ]


viewerStatus : Model -> Maybe ( String, String, Bool )
Expand Down
28 changes: 14 additions & 14 deletions nginx/app/dependencies/diva.js/src/View/CollectionExplorer.elm
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ viewCollectionResizer model =
ResourceLoadedCollection _ ->
div
[ classList
[ ( "collection-resizer", True )
[ ( "diva-collection-resizer", True )
, ( "is-hidden", not model.collectionSidebarVisible )
]
, Events.on "mousedown"
Expand Down Expand Up @@ -64,7 +64,7 @@ viewCollectionPanel model collectionState =
in
div
[ classList
[ ( "collection-panel", True )
[ ( "diva-collection-panel", True )
, ( "is-fullscreen", model.fullscreen )
, ( "is-hidden", not model.collectionSidebarVisible )
]
Expand All @@ -77,18 +77,18 @@ viewCollectionPanel model collectionState =
)
]
[ div
[ HA.class "collection-header" ]
[ div [ HA.class "collection-title" ] [ text labelText ]
[ HA.class "diva-collection-header" ]
[ div [ HA.class "diva-collection-title" ] [ text labelText ]
, viewMaybe
(\summary ->
div [ HA.class "collection-summary" ] [ text (extractLabelFromLanguageMap model.detectedLanguage summary) ]
div [ HA.class "diva-collection-summary" ] [ text (extractLabelFromLanguageMap model.detectedLanguage summary) ]
)
collection.summary
]
, div
[ HA.class "sidebar-content" ]
[ HA.class "diva-sidebar-content" ]
[ div
[ HA.class "sidebar-pane is-scroll" ]
[ HA.class "diva-sidebar-pane is-scroll" ]
[ viewCollectionTree model.detectedLanguage collectionState collection.items ]
]
]
Expand All @@ -97,7 +97,7 @@ viewCollectionPanel model collectionState =
viewCollectionTree : Language -> CollectionState -> List CollectionItem -> Html Msg
viewCollectionTree language collectionState items =
ul
[ HA.class "collection-list list-reset" ]
[ HA.class "diva-collection-list diva-list-reset" ]
(List.map (Lazy.lazy3 viewCollectionItem language collectionState) items)


Expand All @@ -113,8 +113,8 @@ viewManifestItem language collectionState manifest =
li []
[ button
[ classList
[ ( "manifest-tree-item", True )
, ( "ui-button", True )
[ ( "diva-manifest-tree-item", True )
, ( "diva-ui-button", True )
, ( "is-active", isActive )
]
, type_ "button"
Expand Down Expand Up @@ -148,7 +148,7 @@ viewNestedCollection language collectionState collection =

loadingView =
if isLoading then
[ div [ HA.class "contents-empty" ] [ text "Loading…" ] ]
[ div [ HA.class "diva-contents-empty" ] [ text "Loading…" ] ]

else
[]
Expand All @@ -159,13 +159,13 @@ viewNestedCollection language collectionState collection =
[]
in
li
[ HA.class "collection-tree-item" ]
[ HA.class "diva-collection-tree-item" ]
(button
[ HA.class "collection-node-button ui-button"
[ HA.class "diva-collection-node-button diva-ui-button"
, type_ "button"
, Events.onClick (UserClickedCollectionItem collection.id)
]
[ div [ HA.class "collection-expand-icon" ] [ text expandIcon ]
[ div [ HA.class "diva-collection-expand-icon" ] [ text expandIcon ]
, text labelText
]
:: childrenView
Expand Down
4 changes: 2 additions & 2 deletions nginx/app/dependencies/diva.js/src/View/Helpers.elm
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ viewButtonWithAttributes extraAttrs config =

baseAttrs =
[ classList
[ ( "canvas-toolbar-button", True )
[ ( "diva-canvas-toolbar-button", True )
, ( "is-disabled", isDisabled )
, ( "is-fullscreen", config.isFullscreen )
]
Expand All @@ -49,7 +49,7 @@ viewButtonWithAttributes extraAttrs config =
HA.disabled True :: (extraAttrs ++ baseAttrs)
in
div
[ HA.class "canvas-toolbar-item"
[ HA.class "diva-canvas-toolbar-item"
, HA.attribute "data-tooltip" config.label
]
[ button buttonAttrs [ config.icon ]
Expand Down
26 changes: 13 additions & 13 deletions nginx/app/dependencies/diva.js/src/View/ManifestInfoModal.elm
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,9 @@ viewManifestInfoModal : Model -> Html Msg
viewManifestInfoModal model =
if model.manifestInfoOpen then
div
[ HA.class "modal-overlay" ]
[ HA.class "diva-modal-overlay" ]
[ div
[ HA.class "modal is-narrow" ]
[ HA.class "diva-modal is-narrow" ]
[ viewHeader model
, currentManifest model
|> viewBody model
Expand Down Expand Up @@ -214,27 +214,27 @@ viewBody model maybeManifest =
viewMaybe (viewLogoBlock model.detectedLanguage) maybeManifest
in
div
[ HA.class "modal-body is-two-column" ]
[ HA.class "diva-modal-body is-two-column" ]
[ div
[ HA.class "metadata-body" ]
[ HA.class "diva-metadata-body" ]
(List.map viewRow rows)
, div
[ HA.class "manifest-info-logo-wrap" ]
[ HA.class "diva-manifest-info-logo-wrap" ]
[ logoBlock ]
]


viewHeader : { a | fullscreen : Bool } -> Html Msg
viewHeader { fullscreen } =
div
[ HA.class "modal-header" ]
[ HA.class "diva-modal-header" ]
[ div
[ HA.class "modal-title" ]
[ HA.class "diva-modal-title" ]
[ text "Manifest Info" ]
, div
[ HA.class "modal-actions" ]
[ HA.class "diva-modal-actions" ]
[ div
[ HA.class "modal-close-action" ]
[ HA.class "diva-modal-close-action" ]
[ viewButton
{ label = "Close"
, icon = Icons.close
Expand Down Expand Up @@ -275,7 +275,7 @@ viewLogoBlock language manifest =
[ viewMaybe
(\url ->
img
[ HA.class "manifest-info-logo"
[ HA.class "diva-manifest-info-logo"
, src url
, alt "Manifest logo"
]
Expand Down Expand Up @@ -305,9 +305,9 @@ viewLogoBlock language manifest =
viewRow : ( String, Html Msg ) -> Html Msg
viewRow ( labelText, valueNode ) =
div
[ HA.class "metadata-item" ]
[ div [ HA.class "metadata-label" ] [ text labelText ]
, div [ HA.class "metadata-value" ] [ valueNode ]
[ HA.class "diva-metadata-item" ]
[ div [ HA.class "diva-metadata-label" ] [ text labelText ]
, div [ HA.class "diva-metadata-value" ] [ valueNode ]
]


Expand Down
Loading
Loading