Merge pull request #17 from collective/galleryplugin-updates

Initialize slick-slider automatically when using image gallery inside TinyMCE

.editorconfig

@@ -13,7 +13,8 @@
 root = true
 
 
-[*]  # For All Files
+[*]
+# Default settings for all files.
 # Unix-style newlines with a newline ending every file
 end_of_line = lf
 insert_final_newline = true
@@ -33,7 +34,8 @@ indent_size = 4
 # 2 space indentation
 indent_size = 2
 
-[*.{json,jsonl,js,jsx,ts,tsx,css,less,scss}]  # Frontend development
+[*.{json,jsonl,js,jsx,ts,tsx,css,less,scss}]
+# Frontend development
 # 2 space indentation
 indent_size = 2
 max_line_length = 80

.github/workflows/meta.yml

@@ -53,6 +53,13 @@ jobs:
 # os_dependencies = "git libxml2 libxslt"
 ##
 
+##
+# To test against a specific matrix of python versions
+# when running tests jobs, add in .meta.toml:
+# [github]
+# py_versions = "['3.12', '3.11']"
+##
+
 
 ##
 # Specify additional jobs in .meta.toml:

.gitignore

@@ -20,6 +20,8 @@ __pycache__/
 .tox
 .vscode/
 node_modules/
+forest.dot
+forest.json
 
 # venv / buildout related
 bin/

.meta.toml

@@ -3,7 +3,7 @@
 # See the inline comments on how to expand/tweak this configuration file
 [meta]
 template = "default"
-commit-id = "5d3e918e"
+commit-id = "4cf2df11"
 
 [pyproject]
 codespell_skip = "*.css.map,*.map,*.min.js,yarn.lock"

.pre-commit-config.yaml

@@ -7,7 +7,7 @@ ci:
 
 repos:
 -   repo: https://github.com/asottile/pyupgrade
-    rev: v3.15.0
+    rev: v3.17.0
     hooks:
     -   id: pyupgrade
         args: [--py38-plus]
@@ -16,7 +16,7 @@ repos:
     hooks:
     -   id: isort
 -   repo: https://github.com/psf/black
-    rev: 23.12.1
+    rev: 24.8.0
     hooks:
     -   id: black
 -   repo: https://github.com/collective/zpretty
@@ -33,7 +33,7 @@ repos:
 #  """
 ##
 -   repo: https://github.com/PyCQA/flake8
-    rev: 6.1.0
+    rev: 7.1.1
     hooks:
     -   id: flake8
 
@@ -45,7 +45,7 @@ repos:
 #  """
 ##
 -   repo: https://github.com/codespell-project/codespell
-    rev: v2.2.6
+    rev: v2.3.0
     hooks:
     -   id: codespell
         additional_dependencies:
@@ -72,7 +72,7 @@ repos:
     -   id: check-python-versions
         args: ['--only', 'setup.py,pyproject.toml']
 -   repo: https://github.com/collective/i18ndude
-    rev: "6.1.0"
+    rev: "6.2.1"
     hooks:
     -   id: i18ndude
 

CHANGES.md

@@ -5,7 +5,8 @@ Changelog
 ## 3.6.3 (unreleased)
 
 
-- Nothing changed yet.
+- Initialize "slick-slider" automatically inside TinyMCE image gallery.
+  [petschki]
 
 
 ## 3.6.2 (2024-06-14)

collective/behavior/relatedmedia/browser.py

@@ -46,20 +46,22 @@ def can_upload(self):
 
 class RelatedImagesView(RelatedBaseView):
     def gallery_css_klass(self):
-        rm_behavior = self.behavior
+        css_class = []
 
-        if not rm_behavior:
-            return
+        if self.request.get("showGallery"):
+            css_class.append("related-images-slider")
 
-        css_class = rm_behavior.gallery_css_class
+        rm_behavior = self.behavior
 
-        if css_class:
-            return css_class
+        if rm_behavior:
+            css_class.append(rm_behavior.gallery_css_class)
+        else:
+            dflt_css_class = api.portal.get_registry_record(
+                "collective.behavior.relatedmedia.image_gallery_default_class"
+            )
+            css_class.append(dflt_css_class)
 
-        dflt_css_class = api.portal.get_registry_record(
-            "collective.behavior.relatedmedia.image_gallery_default_class"
-        )
-        return dflt_css_class
+        return " ".join(css_class)
 
     @property
     def show_images_viewlet(self):

collective/behavior/relatedmedia/related_images.pt

@@ -1,23 +1,38 @@
 <div id="related-images"
      tal:define="
        images view/images|nothing;
+       icons python:context.restrictedTraverse('@@iconresolver');
      "
      tal:condition="python:view.show_images_viewlet and images"
      tal:attributes="
        class view/gallery_css_klass|nothing;
      "
      i18n:domain="collective.behavior.relatedmedia"
 >
+  <div class="slick-slider" tal:omit-tag="not:request/showGallery|nothing">
+    <a tal:repeat="img images" class="image-item mb-3 ${python:'first' if repeat['img'].start else ''}" rel="prettyPhoto[relatedImages]" data-fancybox="relatedImages"
+        href="${img/url}" data-caption="${img/title}">
+        <img tal:replace="structure img/tag" />
+        <span class="caption small clearfix text-body-secondary lh-1"
+              tal:condition="img/show_caption|nothing">
+          <span class="caption-title">${img/title}</span><br />
+          <span class="caption-description">${img/description}</span>
+        </span>
+    </a>
+  </div>
 
-  <a tal:repeat="img images" class="image-item mb-3 ${python:'first' if repeat['img'].start else ''}" rel="prettyPhoto[relatedImages]" data-fancybox="relatedImages"
-      href="${img/url}" data-caption="${img/title}">
-      <img tal:replace="structure img/tag" />
-      <span class="caption small clearfix text-body-secondary lh-1"
-            tal:condition="img/show_caption|nothing">
-        <span class="caption-title">${img/title}</span>
-        <span class="caption-description">${img/description}</span>
-      </span>
-  </a>
+  <tal:block condition="python:request.get('showGallery') and images and len(images) > 1">
+    <a class="arrow-link norotate slider-prev btn btn-secondary"
+       href="javascript:void(0)"
+    >
+      <img tal:replace="structure python:icons.tag('arrow-left-short')" />
+    </a>
+    <a class="arrow-link norotate slider-next btn btn-secondary"
+       href="javascript:void(0)"
+    >
+      <img tal:replace="structure python:icons.tag('arrow-right-short')" />
+    </a>
+  </tal:block>
 
   <div class="discreet"
        tal:condition="not:images"