diff --git a/CHANGES b/CHANGES index ba9e817..e0f3626 100644 --- a/CHANGES +++ b/CHANGES @@ -2,6 +2,13 @@ Changes ======= +1.0.2 (*2021-07-13*) +==================== + +- Fix scroll computation +- Translation of ignored elements +- Improve accessibility + 1.0.1 (*2021-06-03*) ==================== diff --git a/setup.py b/setup.py index 9bc8ddd..705030a 100644 --- a/setup.py +++ b/setup.py @@ -7,7 +7,7 @@ with open("README.rst", "r") as fh: setup( name="sphinx_galleria", - version="1.0.1", + version="1.0.2", url="https://procrastinator.nerv-project.eu/nerv-project/sphinx_galleria", license="EUPL 1.2", author="Kujiu", diff --git a/sphinx_galleria/__init__.py b/sphinx_galleria/__init__.py index ecb722b..b9dccf6 100644 --- a/sphinx_galleria/__init__.py +++ b/sphinx_galleria/__init__.py @@ -14,7 +14,7 @@ from PIL import Image from . import directive from . import collector -__version_info__ = (1, 0, 1) +__version_info__ = (1, 0, 2) __version__ = '.'.join([str(val) for val in __version_info__]) diff --git a/sphinx_galleria/directive.py b/sphinx_galleria/directive.py index 7558c5a..6676889 100644 --- a/sphinx_galleria/directive.py +++ b/sphinx_galleria/directive.py @@ -7,6 +7,7 @@ Galleria directive import uuid import json +from typing import Sequence from docutils import nodes from docutils.parsers.rst import Directive @@ -19,6 +20,7 @@ from sphinx.writers.text import TextTranslator from sphinx.writers.manpage import ManualPageTranslator from sphinx.util.osutil import relative_uri from sphinx.locale import _ +from sphinx.addnodes import translatable def length_or_percentage_or_unitless(argument: str): @@ -32,8 +34,33 @@ def length_or_percentage_or_unitless(argument: str): return directives.get_measure(argument, length_units) -class galleria(nodes.General, nodes.Element): - pass +class galleria(nodes.General, nodes.Element, translatable): + def preserve_original_messages(self) -> None: + for image in self.get('images', []): + if image.get('title'): + image['rawtitle'] = image['title'] + if image.get('alt'): + image['rawalt'] = image['alt'] + + def extract_original_messages(self) -> Sequence[str]: + messages = [] + for image in self.get('images', []): + if image.get('rawalt'): + messages.append(image['rawalt']) + if image.get('rawtitle'): + messages.append(image['rawtitle']) + + return messages + + def apply_translated_message( + self, original_message: str, + translated_message: str) -> None: + for image in self.get('images', []): + if image.get('rawtitle') == original_message: + image['title'] = translated_message + + if image.get('rawalt') == original_message: + image['alt'] = translated_message def html_visit_galleria(self: HTMLTranslator, node: galleria) -> None: diff --git a/sphinx_galleria/static/sphinxgalleria/sphinxgalleria.css b/sphinx_galleria/static/sphinxgalleria/sphinxgalleria.css index 2345cba..e264ae7 100644 --- a/sphinx_galleria/static/sphinxgalleria/sphinxgalleria.css +++ b/sphinx_galleria/static/sphinxgalleria/sphinxgalleria.css @@ -313,6 +313,8 @@ .sphinxgalleria-core ul.thumbnails li img { margin: 0.5rem; cursor: pointer; - object-fit: cover; + object-fit: contain; max-width: unset; + width: auto; + height: auto; } diff --git a/sphinx_galleria/static/sphinxgalleria/sphinxgalleria.mjs b/sphinx_galleria/static/sphinxgalleria/sphinxgalleria.mjs index 4d2aedd..c8e9a68 100644 --- a/sphinx_galleria/static/sphinxgalleria/sphinxgalleria.mjs +++ b/sphinx_galleria/static/sphinxgalleria/sphinxgalleria.mjs @@ -18,13 +18,14 @@ export class SphinxGalleria { self.node_caption = document.createElement('figcaption'); self.node_alt = document.createElement('p'); self.node_alt.setAttribute('id', self.target+'-'+'alt'); - self.node_image.setAttribute('aria-describedby', self.target+'-'+'alt'); + self.node_image.setAttribute('aria-labelledby', self.target+'-'+'alt'); self.node_thumbnails = document.createElement('ul'); self.node_thumbnails.classList.add('thumbnails'); self.node_dialog = document.createElement('dialog'); self.node_mask = document.createElement('div'); self.node_mask.classList.add('mask'); self.node_mask.hidden = true; + self.node_mask.setAttribute('aria-hidden', true); var node_submask = document.createElement('div'); node_submask.classList.add('submask'); @@ -41,7 +42,7 @@ export class SphinxGalleria { self.dialog_button_close_icon.setAttribute('aria-label', self.options.label_close); self.dialog_image = document.createElement('img'); - self.dialog_image.setAttribute('aria-describedby', self.target+'-'+'alt'); + self.dialog_image.setAttribute('aria-labelledby', self.target+'-'+'alt'); self.dialog_title = document.createElement('h1'); var dialog_header = document.createElement('header'); @@ -320,9 +321,12 @@ export class SphinxGalleria { self.node_slider.value = idx + 1; } var current_img = current.nextSibling.childNodes[0]; - current_img.scrollIntoView({ + var offset = current_img.offsetLeft - self.node_thumbnails.offsetLeft; + offset -= self.node_thumbnails.offsetWidth / 2; + offset += current_img.offsetWidth / 2; + self.node_thumbnails.scrollTo({ + left: offset, behavior: 'smooth', - inline: 'center', }); } @@ -331,17 +335,20 @@ export class SphinxGalleria { self.node_caption.hidden = false; self.dialog_title.innerHTML = title; self.dialog_title.hidden = false; + self.dialog_title.removeAttribute('aria-hidden'); hide_caption = false; } else if(title) { self.node_caption.innerHTML = ''; self.node_caption.hidden = true; self.dialog_title.innerHTML = title; self.dialog_title.hidden = false; + self.dialog_title.removeAttribute('aria-hidden'); } else { self.node_caption.innerHTML = ''; self.node_caption.hidden = true; self.dialog_title.innerHTML = ''; self.dialog_title.hidden = true; + self.dialog_title.setAttribute('aria-hidden', true); } if(!hide_alt && alt) { @@ -376,6 +383,7 @@ export class SphinxGalleria { showModal() { this.node_mask.hidden = false; + this.node_mask.removeAttribute('aria-hidden'); if(this.node_dialog.showModal) { this.node_dialog.showModal(); } else { @@ -383,6 +391,7 @@ export class SphinxGalleria { this.node_dialog.setAttribute('open', true); this.node_dialog.setAttribute('aria-modal', true); this.node_dialog.hidden = false; + this.node_dialog.removeAttribute('aria-hidden'); } } @@ -394,7 +403,9 @@ export class SphinxGalleria { this.node_dialog.removeAttribute('open'); this.node_dialog.removeAttribute('aria-modal'); this.node_dialog.hidden = true; + this.node_dialog.setAttribute('aria-hidden', true); } this.node_mask.hidden = true; + this.node_mask.setAttribute('aria-hidden', true); } }