From ac3d805175e7556c6c30171ad665041eb73f3982 Mon Sep 17 00:00:00 2001 From: "kujiu (@rincevent)" Date: Wed, 2 Jun 2021 23:58:10 +0200 Subject: [PATCH] Fix: CSS issues, keyboard shortcuts, group galleries --- README.rst | 4 +- babel.cfg | 5 + setup.cfg | 21 ++++ setup.py | 30 ++++++ sphinx_galleria/__init__.py | 16 ++- sphinx_galleria/collector.py | 36 ++++--- sphinx_galleria/directive.py | 74 +++++++------ .../locale/fr/LC_MESSAGES/sphinx.po | 37 +++++++ .../locale/nl/LC_MESSAGES/sphinx.po | 37 +++++++ .../static/sphinxgalleria/sphinxgalleria.css | 34 +++++- .../static/sphinxgalleria/sphinxgalleria.mjs | 101 +++++++++++------- 11 files changed, 300 insertions(+), 95 deletions(-) create mode 100644 babel.cfg create mode 100644 sphinx_galleria/locale/fr/LC_MESSAGES/sphinx.po create mode 100644 sphinx_galleria/locale/nl/LC_MESSAGES/sphinx.po diff --git a/README.rst b/README.rst index 0f223fd..31a7b32 100644 --- a/README.rst +++ b/README.rst @@ -38,8 +38,8 @@ Just use the galleria directive like this: :align: Align to 'right', 'left' or 'center' (default to center) - node level :hide_title: Flag - hide title under image (not in dialog) - image level :hide_alt: Flag - hide alternative text under image - image level - :transition: (optional, once) Transition for gallery - image level - :class: (optional, once) HTML class for gallery - node level + :no_transition: Flag - avoid transition effect - node level + :class: (optional) HTML class for gallery - node level Image level options are same for all images defined by the directive. If you need separated descriptions and diff --git a/babel.cfg b/babel.cfg new file mode 100644 index 0000000..6ae3edf --- /dev/null +++ b/babel.cfg @@ -0,0 +1,5 @@ +[python: **.py] +encoding = utf-8 + +[javascript: **.js] +[javascript: **.mjs] diff --git a/setup.cfg b/setup.cfg index 8ce115d..fa1a379 100644 --- a/setup.cfg +++ b/setup.cfg @@ -5,3 +5,24 @@ license-files = LICENSE-de LICENSE-fr LICENSE-nl + + +[extract_messages] +mapping_file = babel.cfg +output_file = sphinx_galleria/locale/sphinx.pot +keywords = _ l_ lazy_gettext gettext ngettext +add_comments = Translators: + +[init_catalog] +domain = sphinx +input_file = sphinx_galleria/locale/sphinx.pot +output_dir = sphinx_galleria/locale/ + +[update_catalog] +domain = sphinx +input_file = sphinx_galleria/locale/sphinx.pot +output_dir = sphinx_galleria/locale/ + +[compile_catalog] +domain = sphinx +directory = sphinx_galleria/locale/ diff --git a/setup.py b/setup.py index d53f634..5cf0dcb 100644 --- a/setup.py +++ b/setup.py @@ -1,4 +1,28 @@ from setuptools import setup +import distutils +from babel.messages import frontend as babel + + +class TranslateCommand(distutils.cmd.Command): + description = "Translation" + + user_options = [] + sub_commands = [ + ('extract_messages', None), + ('update_catalog', None), + ('compile_catalog', None), + ] + + def initialize_options(self): + pass + + def finalize_options(self): + pass + + def run(self): + for cmd_name in self.get_sub_commands(): + self.run_command(cmd_name) + with open("README.rst", "r") as fh: long_description = fh.read() @@ -14,6 +38,12 @@ setup( long_description=long_description, long_description_content_type="text/x-rst", packages=["sphinx_galleria"], + cmdclass={ + 'compile_catalog': babel.compile_catalog, + 'extract_messages': babel.extract_messages, + 'init_catalog': babel.init_catalog, + 'update_catalog': babel.update_catalog + }, package_data={ "sphinx_galleria": [ "*.py", diff --git a/sphinx_galleria/__init__.py b/sphinx_galleria/__init__.py index 68b378d..b7a498c 100644 --- a/sphinx_galleria/__init__.py +++ b/sphinx_galleria/__init__.py @@ -32,10 +32,14 @@ def copy_images_files(app: Sphinx, env: BuildEnvironment) -> None: relpath = os.path.relpath(thumb, env.srcdir) dest = os.path.join(app.outdir, relpath) basename, ext = os.path.splitext(dest) + + if ext.lower() in ('.svg', '.svgz'): + continue + thumbsize = basename.split('-')[-1].split('x') thumbsize = [int(size) for size in thumbsize] original = '.'.join(basename.split('.')[:-1]) + ext - dest = basename + '.jpg' + dest = basename + '.png' ensuredir(os.path.dirname(dest)) with Image.open(original) as im: @@ -60,7 +64,7 @@ def copy_images_files(app: Sphinx, env: BuildEnvironment) -> None: (im.size[1]+thumbsize[0]*im.size[1]/thumbsize[0])//2, )) - out.save(dest, "JPEG") + out.save(dest, "PNG") def install_static_files(app: Sphinx, env: BuildEnvironment) -> None: @@ -93,12 +97,6 @@ def install_static_files(app: Sphinx, env: BuildEnvironment) -> None: app.add_css_file(os.path.join('sphinxgalleria', static)) -def init_directive(app: Sphinx, config) -> None: - if 'galleria_override_image' in config and \ - config['galleria_override_image']: - app.add_directive('image', directive.GalleriaDirective) - - def setup(app: Sphinx) -> Dict[str, Any]: app.add_node( directive.galleria, @@ -112,8 +110,6 @@ def setup(app: Sphinx) -> Dict[str, Any]: ) app.add_directive('galleria', directive.GalleriaDirective) app.add_env_collector(collector.GalleriaCollector) - app.add_config_value('galleria_override_image', False, 'boolean') app.connect('env-updated', install_static_files) app.connect('env-updated', copy_images_files) - app.connect('config-inited', init_directive) return {'version': __version__} diff --git a/sphinx_galleria/collector.py b/sphinx_galleria/collector.py index 01d551f..7561fa3 100644 --- a/sphinx_galleria/collector.py +++ b/sphinx_galleria/collector.py @@ -8,6 +8,7 @@ Galleria image collector import os import glob import logging +from copy import copy from typing import Set from sphinx.environment.collectors import EnvironmentCollector from docutils import nodes @@ -63,9 +64,10 @@ class GalleriaCollector(EnvironmentCollector): images = [] for imageglob in node['images']: thumbsize = imageglob['thumbsize'] + size_array = [] try: for size in thumbsize.split('x'): - int(size) + size_array.append(int(size)) except ValueError: logger.error( __('thumbsize %s is invalid (use 100x120 format)'), @@ -73,25 +75,35 @@ class GalleriaCollector(EnvironmentCollector): raise del imageglob['thumbsize'] - glob_path = os.path.join(app.env.srcdir, imageglob['image']) + glob_path = os.path.join( + os.path.dirname(node.source), + imageglob['path'] + ) for image_path in glob.glob(glob_path): app.env.galleria.add_file(docname, image_path) basename, ext = os.path.splitext(image_path) thumb_path = basename + ".thumb-" + thumbsize + ext - thumb_path_jpg = basename + ".thumb-" + thumbsize + '.jpg' + thumb_path_cropped = basename + ".thumb-" + thumbsize + thumb_path_cropped += '.png' + if ext.lower() in ('.svg', '.svgz'): + thumb_path_cropped = image_path + thumb_path = image_path + + jsonimage = copy(imageglob) + jsonimage['thumbsize'] = size_array + jsonimage['thumb'] = os.path.relpath( + thumb_path_cropped, + app.env.srcdir) + jsonimage['path'] = os.path.relpath( + image_path, + app.env.srcdir + ) + images.append(jsonimage) - images.append({ - 'title': imageglob['title'], - 'alt': imageglob['alt'], - 'thumb': os.path.relpath( - thumb_path_jpg, - app.env.srcdir), - 'image': os.path.relpath(image_path, app.env.srcdir) - }) app.env.dependencies[docname].add(image_path) - app.env.dependencies[docname].add(thumb_path_jpg) + app.env.dependencies[docname].add(thumb_path_cropped) if not os.access( os.path.join( app.srcdir, diff --git a/sphinx_galleria/directive.py b/sphinx_galleria/directive.py index 77f0158..9d4334e 100644 --- a/sphinx_galleria/directive.py +++ b/sphinx_galleria/directive.py @@ -18,7 +18,7 @@ from sphinx.writers.texinfo import TexinfoTranslator 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.locale import _ class galleria(nodes.General, nodes.Element): @@ -26,12 +26,11 @@ class galleria(nodes.General, nodes.Element): def html_visit_galleria(self: HTMLTranslator, node: galleria) -> None: - galleria_id = 'galleria-%s' % uuid.uuid4() - self.body.append( - "
" % ( - galleria_id, - node['class'] + ' align-%s' % node['options']['align'], + "
" % ( + node['options']['galleria'], + node['class'] + ' align-%s sphinxgalleria-core' % + node['options']['align'], node['options']['width'], node['options']['height'], ) @@ -40,12 +39,22 @@ def html_visit_galleria(self: HTMLTranslator, node: galleria) -> None: if len(node['images']) > 0: self.body.append("
") self.body.append("%s" % ( - node['images'][0]['image'], + node['images'][0]['path'], node['images'][0]['title'], node['images'][0]['alt'] )) self.body.append('
') + for img in node['images']: + img['path'] = relative_uri( + self.builder.get_target_uri(self.builder.current_docname), + img['path'] + ) + img['thumb'] = relative_uri( + self.builder.get_target_uri(self.builder.current_docname), + img['thumb'] + ) + self.body.append( "
" % ( - galleria_id, + node['options']['galleria'], json.dumps(node['options']), json.dumps(node['images']) ) @@ -82,7 +91,7 @@ def text_visit_galleria(self: TextTranslator, node: galleria) -> None: def gemini_visit_galleria(self, node: galleria) -> None: for image in node['images']: - self.body.append('=> %s %s' % (image['path'], image['alt'])) + self.body += '=> %s %s' % (image['path'], image['alt']) raise nodes.SkipNode @@ -108,51 +117,54 @@ class GalleriaDirective(Directive): "alt": directives.unchanged, "title": directives.unchanged, "thumbsize": directives.unchanged, - "transition": directives.unchanged, 'width': directives.length_or_percentage_or_unitless, 'height': directives.length_or_unitless, 'align': align_choices, 'hide_title': directives.flag, 'hide_alt': directives.flag, + 'no_transition': directives.flag, } def run(self): - source = self.state.document.settings._source - document = self.state.document - if not document.hasattr('galleria_nodes'): - document.galleria_nodes = {} - if source not in document.galleria_nodes: - document.galleria_nodes[source] = {} + source = self.state_machine.document.settings._source + env = self.state_machine.document.settings.env + try: + if source not in env.galleria_nodes: + env.galleria_nodes[source] = {} - galleria_name = self.options.get('galleria') or uuid.uuid4() + except AttributeError: + env.galleria_nodes = {} + env.galleria_nodes[source] = {} + + galleria_name = self.options.get('galleria') + galleria_name = galleria_name or str(uuid.uuid4()).replace('-', '') created = False - if galleria_name in document.galleria_nodes[source]: - node = document.galleria_nodes[source][galleria_name] + if galleria_name in env.galleria_nodes[source]: + node = env.galleria_nodes[source][galleria_name] else: node = galleria() node['class'] = 'galleria' node['options'] = { - 'transition': 'fade', - 'label_prev': __('Previous'), - 'label_next': __('Next'), - 'label_close': __('Close'), - 'label_thumbnail': __('Thumbnail, click to enlarge'), + 'galleria': 'galleria-' + galleria_name, + 'label_prev': _('Previous'), + 'label_next': _('Next'), + 'label_close': _('Close'), + 'label_thumbnail': _('Thumbnail, click to enlarge'), } node['images'] = [] - document.galleria_nodes[source][galleria_name] = node + env.galleria_nodes[source][galleria_name] = node created = True if self.options.get('class'): - node['class'] = self.options['class'] - if self.options.get('transition'): - node['options']['transition'] = self.options['transition'] + node['class'] = ' '.join(self.options['class']) node['options']["width"] = self.options.get('width') or 'auto' node['options']["height"] = self.options.get('height') or 'auto' node['options']["align"] = self.options.get('align') or 'center' + node['options']["no_transition"] = 'no_transition' in self.options images_path = self.arguments for path in images_path: @@ -160,9 +172,9 @@ class GalleriaDirective(Directive): image["alt"] = self.options.get('alt') image["title"] = self.options.get('title') image["thumbsize"] = self.options.get('thumbsize') or '100x100' - image["hide_alt"] = bool(self.options.get('hide_alt')) - image["hide_title"] = bool(self.options.get('hide_title')) - image["image"] = path + image["hide_alt"] = 'hide_alt' in self.options + image["hide_title"] = 'hide_title' in self.options + image["path"] = path node['images'].append(image) if created: diff --git a/sphinx_galleria/locale/fr/LC_MESSAGES/sphinx.po b/sphinx_galleria/locale/fr/LC_MESSAGES/sphinx.po new file mode 100644 index 0000000..8457f18 --- /dev/null +++ b/sphinx_galleria/locale/fr/LC_MESSAGES/sphinx.po @@ -0,0 +1,37 @@ +# French translations for sphinx_galleria. +# Copyright (C) 2021 ORGANIZATION +# This file is distributed under the same license as the sphinx_galleria +# project. +# FIRST AUTHOR , 2021. +# +msgid "" +msgstr "" +"Project-Id-Version: sphinx_galleria 1.0.0\n" +"Report-Msgid-Bugs-To: EMAIL@ADDRESS\n" +"POT-Creation-Date: 2021-06-02 23:53+0200\n" +"PO-Revision-Date: 2021-06-02 23:55+0200\n" +"Language: fr\n" +"Language-Team: fr \n" +"Plural-Forms: nplurals=2; plural=(n > 1);\n" +"MIME-Version: 1.0\n" +"Content-Type: text/plain; charset=utf-8\n" +"Content-Transfer-Encoding: 8bit\n" +"Generated-By: Babel 2.9.1\n" +"Last-Translator: \n" +"X-Generator: Poedit 2.4.3\n" + +#: sphinx_galleria/directive.py:151 +msgid "Previous" +msgstr "Précédent" + +#: sphinx_galleria/directive.py:152 +msgid "Next" +msgstr "Suivant" + +#: sphinx_galleria/directive.py:153 +msgid "Close" +msgstr "Fermer" + +#: sphinx_galleria/directive.py:154 +msgid "Thumbnail, click to enlarge" +msgstr "Vignette, cliquer pour agrandir" diff --git a/sphinx_galleria/locale/nl/LC_MESSAGES/sphinx.po b/sphinx_galleria/locale/nl/LC_MESSAGES/sphinx.po new file mode 100644 index 0000000..1ea1eba --- /dev/null +++ b/sphinx_galleria/locale/nl/LC_MESSAGES/sphinx.po @@ -0,0 +1,37 @@ +# Dutch translations for sphinx_galleria. +# Copyright (C) 2021 ORGANIZATION +# This file is distributed under the same license as the sphinx_galleria +# project. +# FIRST AUTHOR , 2021. +# +msgid "" +msgstr "" +"Project-Id-Version: sphinx_galleria 1.0.0\n" +"Report-Msgid-Bugs-To: EMAIL@ADDRESS\n" +"POT-Creation-Date: 2021-06-02 23:53+0200\n" +"PO-Revision-Date: 2021-06-02 23:57+0200\n" +"Language: nl\n" +"Language-Team: nl \n" +"Plural-Forms: nplurals=2; plural=(n != 1);\n" +"MIME-Version: 1.0\n" +"Content-Type: text/plain; charset=utf-8\n" +"Content-Transfer-Encoding: 8bit\n" +"Generated-By: Babel 2.9.1\n" +"Last-Translator: \n" +"X-Generator: Poedit 2.4.3\n" + +#: sphinx_galleria/directive.py:151 +msgid "Previous" +msgstr "Vorig" + +#: sphinx_galleria/directive.py:152 +msgid "Next" +msgstr "Volgende" + +#: sphinx_galleria/directive.py:153 +msgid "Close" +msgstr "Sluit" + +#: sphinx_galleria/directive.py:154 +msgid "Thumbnail, click to enlarge" +msgstr "Miniatuur, klik om te vergroten" diff --git a/sphinx_galleria/static/sphinxgalleria/sphinxgalleria.css b/sphinx_galleria/static/sphinxgalleria/sphinxgalleria.css index ce8d94c..89597a5 100644 --- a/sphinx_galleria/static/sphinxgalleria/sphinxgalleria.css +++ b/sphinx_galleria/static/sphinxgalleria/sphinxgalleria.css @@ -1,17 +1,27 @@ .sphinxgalleria-core { text-align: center; + box-sizing: border-box; + margin-bottom: 1rem; } .sphinxgalleria-core.align-center { - margin: auto; + margin-left: auto; + margin-right: auto; } .sphinxgalleria-core.align-left { float: left; + margin-right: 1rem; } .sphinxgalleria-core.align-right { float: right; + margin-left: 1rem; +} + +.sphinxgalleria-core figure { + margin: 0; + padding: 0; } .sphinxgalleria-core figure .row { @@ -31,10 +41,17 @@ margin: 0; padding: 0; border: none; - width: max-content; + border-radius: unset; + box-sizing: border-box; + width: 100%; height: max-content; display: flex; flex-flow: column nowrap; + background-color: transparent; +} + +.sphinxgalleria-core figure .row button.button-modal::hover { + background-color: transparent; } .sphinxgalleria-core figure .row button.button-modal .caption { @@ -46,6 +63,7 @@ border: none; margin: 0; padding: .5rem 1.5rem .5rem 1.5rem; + box-sizing: border-box; width: 100%; text-align: left; } @@ -59,9 +77,13 @@ margin: 0; padding: 0; border: none; - width: auto; + width: 100%; height: auto; - object-fit: contain; + object-fit: cover; + transition: width ease .4s, height ease .4s, opacity ease .4s; +} +.sphinxgalleria-core.no-transition figure .row button.button-modal img { + transition: unset; } .sphinxgalleria-core figure input[type=range] { @@ -163,6 +185,10 @@ flex-shrink: 1000; margin: 0.5rem 0 0.5rem 0; padding: 0; + transition: width ease 1s, height ease 1s, opacity ease .4s; +} +.sphinxgalleria-core.no-transition dialog img { + transition: unset; } .sphinxgalleria-core dialog menu { diff --git a/sphinx_galleria/static/sphinxgalleria/sphinxgalleria.mjs b/sphinx_galleria/static/sphinxgalleria/sphinxgalleria.mjs index a80ebd7..c083c25 100644 --- a/sphinx_galleria/static/sphinxgalleria/sphinxgalleria.mjs +++ b/sphinx_galleria/static/sphinxgalleria/sphinxgalleria.mjs @@ -12,7 +12,7 @@ export class SphinxGalleria { self.node_figure = document.createElement('figure'); self.button_modal = document.createElement('button'); self.button_modal.setAttribute('aria-haspopup', 'dialog'); - self.button_modal.setAttribute('class', 'button-modal'); + self.button_modal.classList.add('button-modal'); self.node_image = document.createElement('img'); self.node_caption = document.createElement('figcaption'); @@ -20,22 +20,22 @@ export class SphinxGalleria { self.node_alt.setAttribute('id', self.target+'-'+'alt'); self.node_image.setAttribute('aria-describedby', self.target+'-'+'alt'); self.node_thumbnails = document.createElement('ul'); - self.node_thumbnails.setAttribute('class', 'thumbnails'); + self.node_thumbnails.classList.add('thumbnails'); self.node_dialog = document.createElement('dialog'); self.node_mask = document.createElement('div'); - self.node_mask.setAttribute('class', 'mask'); + self.node_mask.classList.add('mask'); self.node_mask.hidden = true; var node_submask = document.createElement('div'); - node_submask.setAttribute('class', 'submask'); + node_submask.classList.add('submask'); self.node_div_caption = document.createElement('div'); - self.node_div_caption.setAttribute('class', 'caption'); + self.node_div_caption.classList.add('caption'); var figure_row = document.createElement('div'); - figure_row.setAttribute('class', 'row'); + figure_row.classList.add('row'); self.dialog_button_close = document.createElement('button'); - self.dialog_button_close.setAttribute('class', 'close'); + self.dialog_button_close.classList.add('close'); self.dialog_button_close_icon = document.createElement('button'); self.dialog_button_close_icon.setAttribute('aria-label', self.options.label_close); @@ -50,7 +50,7 @@ export class SphinxGalleria { if(self.oneimage) { self.node_thumbnails.hidden = true; self.node_thumbnails.setAttribute('aria-hidden', true); - self.node_thumbnails.style.visibility = 'hidden'; + self.node_thumbnails.style.display = 'none'; } else { self.node_slider = document.createElement('input'); self.node_slider.setAttribute('type', 'range'); @@ -59,17 +59,17 @@ export class SphinxGalleria { self.node_slider.setAttribute('value', 1); self.button_prev = document.createElement('button'); - self.button_prev.setAttribute('class', 'prev'); + self.button_prev.classList.add('prev'); self.button_prev.setAttribute('aria-label', self.options.label_prev); self.button_next = document.createElement('button'); - self.button_next.setAttribute('class', 'next'); + self.button_next.classList.add('next'); self.button_next.setAttribute('aria-label', self.options.label_next); self.dialog_button_prev = document.createElement('button'); - self.dialog_button_prev.setAttribute('class', 'prev'); + self.dialog_button_prev.classList.add('prev'); self.dialog_button_next = document.createElement('button'); - self.dialog_button_next.setAttribute('class', 'next'); + self.dialog_button_next.classList.add('next'); self.dialog_button_prev.appendChild(document.createTextNode(self.options.label_prev)); self.dialog_button_next.appendChild(document.createTextNode(self.options.label_next)); @@ -107,18 +107,20 @@ export class SphinxGalleria { init() { var self = this; self.node_target = document.getElementById(self.target); + if(self.options.no_transition || self.oneimage) { + if(!self.node_target.classList.contains('no-transition')) { + self.node_target.classList.add('no-transition'); + } + } self.node_target.innerHTML = ''; - self.node_target.setAttribute( - 'class', - self.node_target.getAttribute('class') + " sphinxgalleria-core" - ); + self.node_target.classList.add("sphinxgalleria-core"); self.node_target.appendChild(self.node_figure); self.node_target.appendChild(self.node_thumbnails); self.node_target.appendChild(self.node_mask); var onmodal = function(event) { - var key = event.keyCode || event.charCode || event.which; - if(event.type==='keypress' && key!==13 && key!==32) { + var key = event.key; + if(event.type==='keypress' && key!==" " && key!=="Enter") { return; } event.preventDefault(); @@ -128,8 +130,8 @@ export class SphinxGalleria { self.button_modal.addEventListener('keypress', onmodal); var onclose = function(event) { - var key = event.keyCode || event.charCode || event.which; - if(event.type==='keypress' && key!==13 && key!==32) { + var key = event.key; + if(event.type==='keypress' && key!==" " && key!=="Enter") { return; } event.preventDefault(); @@ -145,8 +147,8 @@ export class SphinxGalleria { if(!self.oneimage) { var onprev = function(event) { - var key = event.keyCode || event.charCode || event.which; - if(event.type==='keypress' && key!==13 && key!==32) { + var key = event.key; + if(event.type==='keypress' && key!==" " && key!=="Enter") { return; } event.preventDefault(); @@ -154,8 +156,8 @@ export class SphinxGalleria { }; var onnext = function(event) { - var key = event.keyCode || event.charCode || event.which; - if(event.type==='keypress' && key!==13 && key!==32) { + var key = event.key; + if(event.type==='keypress' && key!==" " && key!=="Enter") { return; } event.preventDefault(); @@ -195,7 +197,7 @@ export class SphinxGalleria { var image_element = document.createElement('li'); var image_button = document.createElement('input'); image_button.setAttribute('type', 'radio'); - image_button.setAttribute('value', image_data.image); + image_button.setAttribute('value', image_data.path); image_button.setAttribute('name', self.target); image_button.setAttribute('data-index', idx); image_button.setAttribute('id', self.target+'-'+idx); @@ -211,6 +213,8 @@ export class SphinxGalleria { var image_thumb = document.createElement('img'); image_thumb.setAttribute('src', image_data.thumb); + image_thumb.setAttribute('width', image_data.thumbsize[0]); + image_thumb.setAttribute('heigh', image_data.thumbsize[1]); if(image_data.alt) { image_button.setAttribute('data-alt', image_data.alt); @@ -229,28 +233,37 @@ export class SphinxGalleria { image_button.setAttribute('data-hide-title', true); } - if(image_data.transition) { - image_thumb.setAttribute('data-transition', image_data.transition); - } - image_label.appendChild(image_thumb); self.node_thumbnails.appendChild(image_element); image_button.addEventListener('change', function() {self.changeImage();}); }); - self.node_target.addEventListener('keypress', function(event) { - var key = event.keyCode || event.charCode || event.which; + document.addEventListener('keydown', function(event) { + var key = event.key; - if(!self.oneimage && key===37) { + if(!self.node_dialog.open && !self.node_target.contains(document.activeElement)) { + return; + } + + if(!self.oneimage && key==="ArrowLeft") { self.prev(); - } else if(!self.oneimage && key===39) { + event.preventDefault(); + } else if(!self.oneimage && key==="ArrowRight") { self.next(); - } else if(key===27) { + event.preventDefault(); + } else if(key==="Escape") { self.closeModal(); + event.preventDefault(); } }); + if(self.node_dialog.showModal) { + self.node_dialog.addEventListener('close', function() { + self.closeModal(); + }); + } + self.changeImage(); } @@ -291,6 +304,11 @@ export class SphinxGalleria { var hide_caption = true; var idx = parseInt(current.getAttribute('data-index')); + if(!self.options.no_transition && !self.oneimage) { + self.node_image.style.opacity = 0.2; + self.dialog_image.style.opacity = 0.2; + } + if(!self.oneimage) { if(self.node_slider.value !== idx+1) { self.node_slider.value = idx + 1; @@ -338,8 +356,19 @@ export class SphinxGalleria { self.node_div_caption.hidden = false; } - self.node_image.setAttribute('src', url); - self.dialog_image.setAttribute('src', url); + if(self.options.no_transition || self.oneimage) { + self.node_image.setAttribute('src', url); + self.dialog_image.setAttribute('src', url); + } else { + setTimeout(function() { + self.node_image.setAttribute('src', url); + self.dialog_image.setAttribute('src', url); + setTimeout(function() { + self.node_image.style.opacity = 1; + self.dialog_image.style.opacity = 1; + }, 200); + }, 200); + } } showModal() {