1.0.1 release

CHANGES

@@ -2,6 +2,13 @@
 Changes
 =======
 
+1.0.1 (*2021-06-03*)
+====================
+
+- Fix translation
+- Add timer option
+- Better CSS and transition
+
 1.0.0 (*2021-05-28*)
 ====================
 

README.rst

@@ -39,6 +39,7 @@ Just use the galleria directive like this:
       :hide_title: Flag - hide title under image (not in dialog) - image level
       :hide_alt: Flag - hide alternative text under image - image level
       :no_transition: Flag - avoid transition effect - node level
+      :timer: (optional) Go to next image each timer seconds
       :class: (optional) HTML class for gallery - node level
 
 Image level options are same for all images defined by

setup.cfg

@@ -10,7 +10,7 @@ license-files =
 [extract_messages]
 mapping_file = babel.cfg
 output_file = sphinx_galleria/locale/sphinx.pot
-keywords = _ l_ lazy_gettext gettext ngettext
+keywords = _ __ l_ lazy_gettext gettext ngettext
 add_comments = Translators:
 
 [init_catalog]

setup.py

@@ -1,35 +1,13 @@
 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()
 
 setup(
     name="sphinx_galleria",
-    version="1.0.0",
+    version="1.0.1",
     url="https://procrastinator.nerv-project.eu/nerv-project/sphinx_galleria",
     license="EUPL 1.2",
     author="Kujiu",
@@ -49,6 +27,9 @@ setup(
             "*.py",
             "static/sphinxgalleria/*.mjs",
             "static/sphinxgalleria/*.css",
+            "locale/*.pot",
+            "locale/*/LC_MESSAGES/*.po",
+            "locale/*/LC_MESSAGES/*.mo",
         ]
     },
     install_requires=["sphinx>=3.0.0"],

sphinx_galleria/__init__.py

@@ -14,7 +14,7 @@ from PIL import Image
 from . import directive
 from . import collector
 
-__version_info__ = (1, 0, 0)
+__version_info__ = (1, 0, 1)
 __version__ = '.'.join([str(val) for val in __version_info__])
 
 
@@ -112,4 +112,10 @@ def setup(app: Sphinx) -> Dict[str, Any]:
     app.add_env_collector(collector.GalleriaCollector)
     app.connect('env-updated', install_static_files)
     app.connect('env-updated', copy_images_files)
+
+    locale_path = os.path.join(
+        os.path.abspath(os.path.dirname(__file__)),
+        'locale'
+    )
+    app.add_message_catalog('sphinx', locale_path)
     return {'version': __version__}

sphinx_galleria/directive.py

@@ -21,6 +21,17 @@ from sphinx.util.osutil import relative_uri
 from sphinx.locale import _
 
 
+def length_or_percentage_or_unitless(argument: str):
+    length_units = [
+        'em', 'rem', 'ex',
+        'px', 'pt',
+        'in', 'cm', 'mm', 'pt', 'pc',
+        'vh', 'vw',
+        '%', ''
+    ]
+    return directives.get_measure(argument, length_units)
+
+
 class galleria(nodes.General, nodes.Element):
     pass
 
@@ -112,13 +123,14 @@ class GalleriaDirective(Directive):
     final_argument_whitespace = True
 
     option_spec = {
-        "class": directives.class_option,
-        "galleria": directives.unchanged,
-        "alt": directives.unchanged,
-        "title": directives.unchanged,
-        "thumbsize": directives.unchanged,
-        'width': directives.length_or_percentage_or_unitless,
-        'height': directives.length_or_unitless,
+        'class': directives.class_option,
+        'galleria': directives.unchanged,
+        'alt': directives.unchanged,
+        'title': directives.unchanged,
+        'thumbsize': directives.unchanged,
+        'timer': directives.nonnegative_int,
+        'width': length_or_percentage_or_unitless,
+        'height': length_or_percentage_or_unitless,
         'align': align_choices,
         'hide_title': directives.flag,
         'hide_alt': directives.flag,
@@ -161,11 +173,13 @@ class GalleriaDirective(Directive):
         if self.options.get('class'):
             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']["width"] = self.options.get('width') or 'unset'
+        node['options']["height"] = self.options.get('height') or 'unset'
         node['options']["align"] = self.options.get('align') or 'center'
         node['options']["no_transition"] = 'no_transition' in self.options
 
+        node['options']["timer"] = self.options.get('timer')
+
         images_path = self.arguments
         for path in images_path:
             image = {}

sphinx_galleria/locale/fr/LC_MESSAGES/sphinx.po

@@ -8,30 +8,40 @@ 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"
+"POT-Creation-Date: 2021-06-03 18:40+0200\n"
 "PO-Revision-Date: 2021-06-02 23:55+0200\n"
+"Last-Translator: \n"
 "Language: fr\n"
 "Language-Team: fr <LL@li.org>\n"
-"Plural-Forms: nplurals=2; plural=(n > 1);\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
+#: sphinx_galleria/collector.py:73
+#, python-format
+msgid "thumbsize %s is invalid (use 100x120 format)"
+msgstr ""
+
+#: sphinx_galleria/collector.py:112
+#, python-format
+msgid "image file not readable %s"
+msgstr ""
+
+#: sphinx_galleria/directive.py:162
 msgid "Previous"
 msgstr "Précédent"
 
-#: sphinx_galleria/directive.py:152
+#: sphinx_galleria/directive.py:163
 msgid "Next"
 msgstr "Suivant"
 
-#: sphinx_galleria/directive.py:153
+#: sphinx_galleria/directive.py:164
 msgid "Close"
 msgstr "Fermer"
 
-#: sphinx_galleria/directive.py:154
+#: sphinx_galleria/directive.py:165
 msgid "Thumbnail, click to enlarge"
 msgstr "Vignette, cliquer pour agrandir"
+

sphinx_galleria/locale/nl/LC_MESSAGES/sphinx.po

@@ -8,30 +8,40 @@ 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"
+"POT-Creation-Date: 2021-06-03 18:40+0200\n"
 "PO-Revision-Date: 2021-06-02 23:57+0200\n"
+"Last-Translator: \n"
 "Language: nl\n"
 "Language-Team: nl <LL@li.org>\n"
-"Plural-Forms: nplurals=2; plural=(n != 1);\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
+#: sphinx_galleria/collector.py:73
+#, python-format
+msgid "thumbsize %s is invalid (use 100x120 format)"
+msgstr ""
+
+#: sphinx_galleria/collector.py:112
+#, python-format
+msgid "image file not readable %s"
+msgstr ""
+
+#: sphinx_galleria/directive.py:162
 msgid "Previous"
 msgstr "Vorig"
 
-#: sphinx_galleria/directive.py:152
+#: sphinx_galleria/directive.py:163
 msgid "Next"
 msgstr "Volgende"
 
-#: sphinx_galleria/directive.py:153
+#: sphinx_galleria/directive.py:164
 msgid "Close"
 msgstr "Sluit"
 
-#: sphinx_galleria/directive.py:154
+#: sphinx_galleria/directive.py:165
 msgid "Thumbnail, click to enlarge"
 msgstr "Miniatuur, klik om te vergroten"
+

sphinx_galleria/locale/sphinx.pot

@@ -7,9 +7,9 @@
 #, fuzzy
 msgid ""
 msgstr ""
-"Project-Id-Version: sphinx_galleria 1.0.0\n"
+"Project-Id-Version: sphinx_galleria 1.0.1\n"
 "Report-Msgid-Bugs-To: EMAIL@ADDRESS\n"
-"POT-Creation-Date: 2021-06-02 23:53+0200\n"
+"POT-Creation-Date: 2021-06-03 18:40+0200\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <LL@li.org>\n"
@@ -18,19 +18,29 @@ msgstr ""
 "Content-Transfer-Encoding: 8bit\n"
 "Generated-By: Babel 2.9.1\n"
 
-#: sphinx_galleria/directive.py:151
+#: sphinx_galleria/collector.py:73
+#, python-format
+msgid "thumbsize %s is invalid (use 100x120 format)"
+msgstr ""
+
+#: sphinx_galleria/collector.py:112
+#, python-format
+msgid "image file not readable %s"
+msgstr ""
+
+#: sphinx_galleria/directive.py:162
 msgid "Previous"
 msgstr ""
 
-#: sphinx_galleria/directive.py:152
+#: sphinx_galleria/directive.py:163
 msgid "Next"
 msgstr ""
 
-#: sphinx_galleria/directive.py:153
+#: sphinx_galleria/directive.py:164
 msgid "Close"
 msgstr ""
 
-#: sphinx_galleria/directive.py:154
+#: sphinx_galleria/directive.py:165
 msgid "Thumbnail, click to enlarge"
 msgstr ""
 

sphinx_galleria/static/sphinxgalleria/sphinxgalleria.css

@@ -2,6 +2,8 @@
     text-align: center;
     box-sizing: border-box;
     margin-bottom: 1rem;
+    display: flex;
+    flex-flow: column nowrap;
 }
 
 .sphinxgalleria-core.align-center {
@@ -22,11 +24,17 @@
 .sphinxgalleria-core figure {
     margin: 0;
     padding: 0;
+    flex-grow: 1000;
+    flex-shrink: 1000;
+    display: flex;
+    flex-flow: column nowrap;
 }
 
 .sphinxgalleria-core figure .row {
     flex-flow: row nowrap;
     display: flex;
+    flex-shrink: 1000;
+    flex-grow: 1000;
 }
 
 .sphinxgalleria-core figure .row button {
@@ -44,7 +52,7 @@
     border-radius: unset;
     box-sizing: border-box;
     width: 100%;
-    height: max-content;
+    height: 100%;
     display: flex;
     flex-flow: column nowrap;
     background-color: transparent;
@@ -74,13 +82,15 @@
 }
 
 .sphinxgalleria-core figure .row button.button-modal img {
-    margin: 0;
+    margin: auto;
     padding: 0;
     border: none;
-    width: 100%;
+    width: auto;
     height: auto;
-    object-fit: cover;
     transition: width ease .4s, height ease .4s, opacity ease .4s;
+    object-fit: contain;
+    flex-grow: 1000;
+    flex-shrink: 1000;
 }
 .sphinxgalleria-core.no-transition figure .row button.button-modal img {
     transition: unset;
@@ -88,6 +98,8 @@
 
 .sphinxgalleria-core figure input[type=range] {
     width: 90%;
+    margin-left: auto;
+    margin-right: auto;
     height: 1.5rem;
     border: none;
     -webkit-appearance: none;
@@ -117,6 +129,7 @@
     margin-top: -.5rem;
 }
 .sphinxgalleria-core figure input[type=range]:focus::-webkit-slider-runnable-track {
+    -webkit-appearance: none;
     background-color: hsl(0, 0%, 34%);
     border: none;
 }
@@ -244,12 +257,14 @@
 
 .sphinxgalleria-core figure button.prev,
 .sphinxgalleria-core figure button.next {
-    background-color: hsl(0, 0%, 34%);
-    color: white;
-    height: 4rem;
-    width: 4rem;
-    margin: auto .5rem auto .5rem;
-    border-radius: 1rem;
+    color: hsl(0, 0%, 34%);
+    background-color: transparent;
+    font-size: 4rem;
+    padding: 1rem;
+    height: 100%;
+    display: inline;
+    vertical-align: middle;
+    margin: 1;
     border: none;
 }
 
@@ -257,26 +272,19 @@
 .sphinxgalleria-core figure button.next:hover,
 .sphinxgalleria-core figure button.prev:focus,
 .sphinxgalleria-core figure button.next:focus {
-    background-color: hsl(0, 0%, 64%);
-    transition: background-color ease .4s;
-}
-
-.sphinxgalleria-core figure button.prev {
-}
-
-.sphinxgalleria-core figure button.next {
+    color: hsl(0, 0%, 64%);
+    transition: color ease .4s;
 }
 
 .sphinxgalleria-core figure button.prev::before,
 .sphinxgalleria-core dialog menu button.prev::before {
-    margin-right: 0.5rem;
-    content: '←';
+    content: '<';
 }
 
 .sphinxgalleria-core figure button.next::after,
 .sphinxgalleria-core dialog menu button.next::after {
     margin-left: 0.5rem;
-    content: '→';
+    content: '>';
 }
 
 .sphinxgalleria-core ul.thumbnails {
@@ -305,5 +313,6 @@
 .sphinxgalleria-core ul.thumbnails li img {
     margin: 0.5rem;
     cursor: pointer;
+    object-fit: cover;
     max-width: unset;
 }

sphinx_galleria/static/sphinxgalleria/sphinxgalleria.mjs

@@ -146,6 +146,12 @@ export class SphinxGalleria {
         self.dialog_button_close_icon.addEventListener('keypress', onclose);
 
         if(!self.oneimage) {
+            if(self.options.timer){
+                setInterval(function(){
+                    self.next();
+                }, self.options.timer*1000);
+            }
+
             var onprev = function(event) {
                 var key = event.key;
                 if(event.type==='keypress' && key!==" " && key!=="Enter") {
@@ -314,12 +320,9 @@ export class SphinxGalleria {
                 self.node_slider.value = idx + 1;
             }
             var current_img = current.nextSibling.childNodes[0];
-            self.node_thumbnails.scrollTo({
-                left: current_img.x -
-                      self.node_thumbnails.offsetWidth/2 +
-                      current_img.clientWidth/2,
-                top: 0,
-                behavior: 'smooth'
+            current_img.scrollIntoView({
+                behavior: 'smooth',
+                inline: 'center',
             });
         }