richie 2.34.1.dev9__py2.py3-none-any.whl → 2.34.1.dev16__py2.py3-none-any.whl

frontend/scss/colors/_theme.scss

@@ -47,6 +47,14 @@ $r-theme: (
     item-cta-hollow-background: transparent,
     item-cta-hollow-border: transparent,
     item-divider-border: r-color('light-grey'),
+    dropdown-border-radius: 8px,
+    dropdown-padding: 0.5rem,
+    dropdown-gap: 0.5rem,
+    dropdown-background-color: r-color('azure2'),
+    dropdown-item-background-color: r-color('indianred3'),
+    dropdown-item-text-color: r-color('white'),
+    dropdown-item-border-radius: 4px,
+    dropdown-item-padding: 0.5rem 1rem,
   ),
   body-content: (
     base-color: r-color('black'),

frontend/scss/components/_header.scss

@@ -168,6 +168,10 @@
       flex-wrap: nowrap;
     }
 
+    & > .topbar__list {
+      position: relative;
+    }
+
     // Aside menu variation
     &--aside {
       @include sv-flex(1, 0, auto);
@@ -197,6 +201,76 @@
   // Menu item element
   &__item {
     $item-selector: &;
+    &.dropdown {
+      display: block;
+      position: static;
+
+      & > button {
+        width: 100%;
+
+        & > .icon {
+          height: 1rem;
+          margin-left: 0.5rem;
+          width: 1rem;
+        }
+      }
+
+      & ul[role='menu'] {
+        padding-left: 0.5rem;
+      }
+    }
+
+    @include media-breakpoint-up($r-topbar-breakpoint) {
+      &.dropdown {
+        // See header_menu.html for the definition of the variables
+        --active-background-color: #{r-theme-val(topbar, dropdown-item-background-color)};
+        --active-text-color: #{r-theme-val(topbar, dropdown-item-text-color)};
+
+        & > button[aria-expanded='true'] {
+          background-color: r-theme-val(topbar, dropdown-background-color);
+        }
+
+        & > button[aria-expanded='true'] + .topbar__sublist {
+          display: block;
+        }
+
+        & > .topbar__sublist {
+          background: r-theme-val(topbar, dropdown-background-color);
+          box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
+          border-radius: r-theme-val(topbar, dropdown-border-radius);
+          display: none;
+          position: absolute;
+          transform: translateX(-8px);
+          max-width: 100%;
+
+          &--full-width {
+            left: 0;
+            transform: inherit;
+          }
+
+          & > ul[role='menu'] {
+            display: flex;
+            flex-wrap: wrap;
+            gap: r-theme-val(topbar, dropdown-gap);
+            padding: r-theme-val(topbar, dropdown-padding);
+          }
+
+          & .topbar__item > a {
+            background-color: #fff;
+            border-radius: r-theme-val(topbar, dropdown-item-border-radius);
+            padding: r-theme-val(topbar, dropdown-item-padding);
+            &::after {
+              display: none;
+            }
+
+            &:is(:focus, :hover) {
+              background-color: var(--active-background-color);
+              color: var(--active-text-color);
+            }
+          }
+        }
+      }
+    }
 
     @include sv-flex(1, 0, auto);
     display: flex;
@@ -213,15 +287,23 @@
       --r--menu--item--hover--color: #{r-theme-val(topbar, item-hover-color)};
     }
 
-    & > a {
+    & > button {
+      @include button-reset-style();
+      --radius: #{r-theme-val(topbar, dropdown-border-radius)};
+      border-radius: var(--radius) var(--radius) 0 0;
+    }
+
+    & > a,
+    & > button {
       @include sv-flex(1, 0, 100%);
+      align-items: center;
+      color: inherit;
       display: flex;
-      padding: 1rem 0.2rem 1rem 1rem;
       flex-direction: row;
-      align-items: center;
       font-family: inherit;
       font-weight: inherit;
-      color: inherit;
+      justify-content: space-between;
+      padding: 1rem 0.2rem 1rem 1rem;
 
       @include media-breakpoint-up($r-topbar-breakpoint) {
         padding: 1rem 1rem;
@@ -235,18 +317,22 @@
 
           // If there is no default hover color we assume there is also no variant
           @if r-theme-val(topbar, item-hover-color) {
-            &::after {
-              content: '';
-              position: absolute;
-              bottom: 0;
-              left: 0;
-              right: 0;
-              height: 8px;
+            &:is(a)::after {
               background-color: var(--r--menu--item--hover--color);
               border-top-left-radius: 0.2rem;
               border-top-right-radius: 0.2rem;
+              bottom: 0;
+              content: '';
+              height: 8px;
+              left: 0;
+              position: absolute;
+              right: 0;
             }
           }
+
+          &:is(button) {
+            background-color: r-theme-val(topbar, dropdown-background-color);
+          }
         }
       }
     }
@@ -257,8 +343,10 @@
 
     // Current page item or current ancestor
     &--selected,
-    &--ancestor {
-      & > a {
+    &--ancestor,
+    &:has(.topbar__sublist .topbar__item.topbar__item--selected) {
+      & > a,
+      & > button {
         position: relative;
         color: r-theme-val(topbar, item-active-color);
 
@@ -328,7 +416,8 @@
     }
 
     // Item divider
-    & + #{$item-selector} {
+    & + #{$item-selector},
+    & > .topbar__list #{$item-selector} {
       @if r-theme-val(topbar, item-divider-border) {
         border-top: $onepixel solid r-theme-val(topbar, item-divider-border);
       }

frontend/scss/objects/_selector.scss

@@ -1,5 +1,6 @@
 .selector {
   position: relative;
+  z-index: 200;
 
   &__button {
     appearance: none;

richie/apps/core/cache.py

@@ -3,22 +3,34 @@ Plugin for django-redis that supports redis sentinel.
 Credits :
  - https://github.com/lamoda/django-sentinel
  - https://github.com/KabbageInc/django-redis-sentinel
+
+RedisCache with a fallback cache to prevent denial of service if Redis is down
+Freely inspired by django-cache-fallback
+
+Credits:
+- https://github.com/Kub-AT/django-cache-fallback/
 """
 
 import logging
 import random
 
 from django.conf import settings
+from django.core.cache import caches
+from django.core.cache.backends.base import BaseCache
 from django.core.exceptions import ImproperlyConfigured
 from django.utils.cache import get_max_age, patch_response_headers
 from django.utils.deprecation import MiddlewareMixin
 
+from cms.cache import CMS_PAGE_CACHE_VERSION_KEY
+from django_redis.cache import RedisCache
 from django_redis.client import DefaultClient
 from redis.sentinel import Sentinel
 
-DJANGO_REDIS_LOGGER = getattr(settings, "DJANGO_REDIS_LOGGER", __name__)
+from .utils import Throttle
 
-logger = logging.getLogger(__name__)
+FALLBACK_CACHE_INVALIDATION_INTERVAL = 60  # seconds
+DJANGO_REDIS_LOGGER = getattr(settings, "DJANGO_REDIS_LOGGER", __name__)
+logger = logging.getLogger(DJANGO_REDIS_LOGGER)
 
 
 class SentinelClient(DefaultClient):
@@ -174,3 +186,164 @@ class LimitBrowserCacheTTLHeaders(MiddlewareMixin):
                 patch_response_headers(response, cache_timeout=max_ttl)
 
         return response
+
+
+class RedisCacheWithFallback(BaseCache):
+    """
+    BaseCache object with a redis_cache used as main cache
+    and the "fallback" aliased cache which takes over
+    in case redis_cache is down.
+    """
+
+    def __init__(self, server, params):
+        """
+        Instantiate the Redis Cache with server and params
+        and retrieve the cache with alias "fallback"
+        """
+        super().__init__(params)
+        self.redis_cache = RedisCache(server, params)
+        self.fallback_cache = caches["memory_cache"]
+
+    def _call_with_fallback(self, method, *args, **kwargs):
+        """
+        Try first to exec provided method through Redis cache instance,
+        in case of success, invalidate the fallback cache so it is clean and
+        ready for next failure,
+        in case of failure, logger reports the exception and
+        the fallback cache takes over.
+        """
+        try:
+            next_cache_state = self._call_redis_cache(method, args, kwargs)
+            self._invalidate_fallback_cache()
+            return next_cache_state
+        except Exception as e:  # pylint: disable=W0718
+            logger.warning("[DEGRADED CACHE MODE] - Switch to fallback cache")
+            logger.exception(e)
+            return self._call_fallback_cache(method, args, kwargs)
+
+    def _call_redis_cache(self, method, args, kwargs):
+        """
+        Exec the provided method through the redis cache instance
+        """
+        return getattr(self.redis_cache, method)(*args, **kwargs)
+
+    def _call_fallback_cache(self, method, args, kwargs):
+        """
+        Exec the provided method through the fallback cache instance
+        """
+        return getattr(self.fallback_cache, method)(*args, **kwargs)
+
+    @Throttle(FALLBACK_CACHE_INVALIDATION_INTERVAL)  # 60 seconds
+    def _invalidate_fallback_cache(self):
+        """
+        Invalidate cms page cache in the fallback cache.
+        """
+        self.fallback_cache.delete(CMS_PAGE_CACHE_VERSION_KEY)
+
+    def get_backend_timeout(self, *args, **kwargs):
+        """
+        Pass get_backend_timeout cache method to _call_with_fallback
+        """
+        return self._call_with_fallback("get_backend_timeout", *args, **kwargs)
+
+    def make_key(self, *args, **kwargs):
+        """
+        Pass make_key cache method to _call_with_fallback
+        """
+        return self._call_with_fallback("make_key", *args, **kwargs)
+
+    def add(self, *args, **kwargs):
+        """
+        Pass add cache method to _call_with_fallback
+        """
+        return self._call_with_fallback("add", *args, **kwargs)
+
+    def get(self, *args, **kwargs):
+        """
+        Pass get cache method to _call_with_fallback
+        """
+        return self._call_with_fallback("get", *args, **kwargs)
+
+    def set(self, *args, **kwargs):
+        """
+        Pass set cache method to _call_with_fallback
+        """
+        return self._call_with_fallback("set", *args, **kwargs)
+
+    def touch(self, *args, **kwargs):
+        """
+        Pass touch cache method to _call_with_fallback
+        """
+        return self._call_with_fallback("touch", *args, **kwargs)
+
+    def delete(self, *args, **kwargs):
+        """
+        Pass delete cache method to _call_with_fallback
+        """
+        return self._call_with_fallback("delete", *args, **kwargs)
+
+    def get_many(self, *args, **kwargs):
+        """
+        Pass get_many cache method to _call_with_fallback
+        """
+        return self._call_with_fallback("get_many", *args, **kwargs)
+
+    def get_or_set(self, *args, **kwargs):
+        """
+        Pass get_or_set cache method to _call_with_fallback
+        """
+        return self._call_with_fallback("get_or_set", *args, **kwargs)
+
+    def has_key(self, *args, **kwargs):
+        """
+        Pass has_key cache method to _call_with_fallback
+        """
+        return self._call_with_fallback("has_key", *args, **kwargs)
+
+    def incr(self, *args, **kwargs):
+        """
+        Pass incr cache method to _call_with_fallback
+        """
+        return self._call_with_fallback("incr", *args, **kwargs)
+
+    def decr(self, *args, **kwargs):
+        """
+        Pass decr cache method to _call_with_fallback
+        """
+        return self._call_with_fallback("decr", *args, **kwargs)
+
+    def set_many(self, *args, **kwargs):
+        """
+        Pass set_many cache method to _call_with_fallback
+        """
+        return self._call_with_fallback("set_many", *args, **kwargs)
+
+    def delete_many(self, *args, **kwargs):
+        """
+        Pass delete_many cache method to _call_with_fallback
+        """
+        return self._call_with_fallback("delete_many", *args, **kwargs)
+
+    def clear(self):
+        """
+        Pass clear cache method to _call_with_fallback
+        """
+        return self._call_with_fallback("clear")
+
+    def validate_key(self, *args, **kwargs):
+        """
+        Pass validate_key cache method to _call_with_fallback
+        """
+        return self._call_with_fallback("validate_key", *args, **kwargs)
+
+    def incr_version(self, *args, **kwargs):
+        """
+        Pass incr_version cache method to _call_with_fallback
+        """
+        return self._call_with_fallback("incr_version", *args, **kwargs)
+
+    def decr_version(self, *args, **kwargs):
+        """
+        Pass decr_version cache method to _call_with_fallback
+        """
+        return self._call_with_fallback("decr_version", *args, **kwargs)

richie/apps/core/storage.py

@@ -0,0 +1,63 @@
+"""Customizing Django storage backends to enable blue/green deployments."""
+
+import re
+from collections import OrderedDict
+
+from django.conf import settings
+from django.contrib.staticfiles.storage import ManifestStaticFilesStorage
+
+from storages.backends.s3boto3 import S3Boto3Storage
+
+STATIC_POSTPROCESS_IGNORE_REGEX = re.compile(
+    r"^richie\/js\/build\/[0-9]*\..*\.index\.js(\.map)?$"
+)
+
+
+class CDNManifestStaticFilesStorage(ManifestStaticFilesStorage):
+    """
+    Manifest static files storage backend that can be placed behing a CDN
+    and ignores files that are already versioned by webpack.
+    """
+
+    def post_process(self, paths, dry_run=False, **options):  # pylint: disable=W0221
+        """
+        Remove paths from file to post process.
+        Some js static files generated by webpack already have a unique name per build
+        and may be referenced from within the js applications. We therefore don't want
+        to hash their name and include them in the manifest file.
+        We use a regex configurable via settings to decide which files to ignore.
+        Parameters
+        ----------
+        paths : OrderedDict
+            List of files to post process
+        dry_run: boolean
+            run process but nothing is apply if True
+        options: kwargs
+            See HashedFilesMixin.post_process
+        """
+        filtered_paths = OrderedDict()
+        for path in paths:
+            if not STATIC_POSTPROCESS_IGNORE_REGEX.match(path):
+                filtered_paths[path] = paths[path]
+
+        yield from super().post_process(filtered_paths, dry_run=dry_run, **options)
+
+    def url(self, name, force=False):
+        """
+        Prepend static files path by the CDN base url when configured in settings.
+        """
+        url = super().url(name, force=force)
+
+        cdn_domain = getattr(settings, "CDN_DOMAIN", None)
+        if cdn_domain:
+            url = f"//{cdn_domain:s}{url:s}"
+
+        return url
+
+
+class MediaStorage(S3Boto3Storage):  # pylint: disable=W0223
+    """A S3Boto3Storage backend to serve media files via CloudFront."""
+
+    bucket_name = getattr(settings, "AWS_MEDIA_BUCKET_NAME", None)
+    custom_domain = getattr(settings, "CDN_DOMAIN", None)
+    file_overwrite = False

richie/apps/core/templates/menu/header_menu.html

@@ -1,22 +1,42 @@
-{% load menu_tags %}{% spaceless %}
+{% load cms_tags menu_tags %}{% spaceless %}
 
 {% for child in children %}
     {% with children_slug=child.get_menu_title|slugify menu_options=child.menu_extension %}
-        <li class="topbar__item dropdown
-            {% if child.selected %} topbar__item--selected{% endif %}
+        <li class="topbar__item
+            {% if menu_options.allow_submenu and child.children %}dropdown{% endif %}
+            {% if menu_options.allow_submenu and menu_options.menu_color %} topbar__item--{{ menu_options.menu_color }}{% endif %}"
+            {% if child.selected or child.attr.redirect_url == current_page.get_absolute_url %} topbar__item--selected{% endif %}
             {% if child.ancestor %} topbar__item--ancestor{% endif %}
             {% if child.sibling %} topbar__item--sibling{% endif %}
-            {% if child.descendant %} topbar__item--descendant{% endif %}
-            {% if menu_options.menu_color %} topbar__item--{{ menu_options.menu_color }}{% endif %}">
-            <a href="{{ child.attr.redirect_url|default:child.get_absolute_url }}">
-               {{ child.get_menu_title }}
-            </a>
+            {% if child.descendant %} topbar__item--descendant{% endif %}"
+        >
             {% comment %}Dropdown menu for children are only for page with index page
             extension with a specific option enabled{% endcomment %}
             {% if menu_options.allow_submenu and child.children %}
-                <ul>
-                    {% show_menu from_level to_level extra_inactive extra_active template "" "" child %}
-                </ul>
+                    <button 
+                      aria-expanded="false"
+                      aria-haspopup="true"
+                      aria-controls="dropdown-{{ child.id }}"
+                      id="dropdown-button-{{ child.id }}"
+                    >
+                      {{ child.get_menu_title }}
+                      <svg class="icon" aria-hidden="true">
+                        <use xlink:href="#icon-chevron-down"></use>
+                      </svg>
+                    </button>
+                    <nav 
+                      class="topbar__sublist"
+                      id="dropdown-{{ child.id }}"
+                      aria-labelledby="dropdown-button-{{ child.id }}"
+                    >
+                      <ul role="menu">
+                        {% show_menu from_level to_level extra_inactive extra_active template "" "" child %}
+                      </ul>
+                    </nav>
+            {% else %}
+                <a href="{{ child.attr.redirect_url|default:child.get_absolute_url }}">
+                    {{ child.get_menu_title }}
+                </a>
             {% endif %}
         </li>
     {% endwith %}

richie/apps/core/templates/richie/base.html

@@ -255,16 +255,158 @@
                 }
             }
 
+            /**
+             * Initialize listeners for navigation dropdown menu
+             * Add listeners for accessibility features and full-width styling
+             * see header_menu.html for the HTML structure
+             */
+            function initializeDropdownMenu() {
+                const $dropdowns = document.querySelectorAll('.topbar__item.dropdown .topbar__sublist');
+                const $dropdownButtons = document.querySelectorAll('.topbar__item.dropdown button');
+                const $topbar = document.querySelector('.topbar > .topbar__container');
+
+                /**
+                 * Apply full-width class to dropdown menu if it's wider than the topbar
+                 * To compute the width, we need to take into account the position of the menu button
+                 * and the width of the topbar
+                 */
+                function _updateDropdownWidth($dropdown) {
+                    const $menu = $dropdown.querySelector('ul[role="menu"]');
+                    const $menuButton = $dropdown.previousElementSibling;
+                    const topbarWidth = $topbar.getBoundingClientRect().width;
+                    const topbarLeft = $topbar.getBoundingClientRect().left;
+                    const menuButtonLeft = $menuButton.getBoundingClientRect().left;
+                    $dropdown.style.display = 'block';
+                    $menu.style.flexWrap = 'nowrap';
+                    const menuWidth = $menu.getBoundingClientRect().width;
+                    $dropdown.style = '';
+                    $menu.style = '';
+                    const menuRelativeOffsetX = menuButtonLeft - topbarLeft;
+
+                    
+                    if (menuWidth > (topbarWidth - menuRelativeOffsetX)) {
+                        $dropdown.classList.add('topbar__sublist--full-width');
+                    } else {
+                        $dropdown.classList.remove('topbar__sublist--full-width');
+                    }
+                }
+
+                function _closeDropdown($button) {
+                    $button.setAttribute('aria-expanded', 'false');
+                    // Remove focus trap and event listeners when closing
+                    const $dropdown = document.getElementById($button.getAttribute('aria-controls'));
+                    const $menuItems = $dropdown.querySelectorAll('a');
+                    $menuItems.forEach(item => {
+                        item.removeEventListener('keydown', _handleMenuItemKeydown);
+                    });
+                }
+
+                function _openDropdown($button) {
+                    $button.setAttribute('aria-expanded', 'true');
+                    // Set up focus trap and event listeners when opening
+                    const $dropdown = document.getElementById($button.getAttribute('aria-controls'));
+                    const $menuItems = $dropdown.querySelectorAll('a');
+                    $menuItems.forEach(item => {
+                        item.setAttribute('role', 'menuitem');
+                        item.addEventListener('keydown', _handleMenuItemKeydown);
+                    });
+                    // Focus first menu item
+                    if ($menuItems.length) $menuItems[0].focus();
+                }
+
+                /**
+                 * Allow navigation through dropdown menu items using keyboard
+                 */
+                function _handleMenuItemKeydown(event) {
+                    const $currentItem = event.target;
+                    const $dropdown = $currentItem.closest('.topbar__sublist');
+                    const $menuItems = Array.from($dropdown.querySelectorAll('a'));
+                    const currentIndex = $menuItems.indexOf($currentItem);
+                    const $button = document.querySelector(`[aria-controls="${$dropdown.id}"]`);
+
+                    switch (event.key) {
+                        case 'ArrowDown':
+                            event.preventDefault();
+                            const nextIndex = (currentIndex + 1) % $menuItems.length;
+                            $menuItems[nextIndex].focus();
+                            break;
+                        case 'ArrowUp':
+                            event.preventDefault();
+                            const prevIndex = (currentIndex - 1 + $menuItems.length) % $menuItems.length;
+                            $menuItems[prevIndex].focus();
+                            break;
+                        case 'Escape':
+                            event.preventDefault();
+                            _closeDropdown($button);
+                            $button.focus();
+                            break;
+                    }
+                }
+
+                $dropdowns.forEach(($dropdown, index) => {
+                    const $button = $dropdownButtons[index];
+
+                    // Initial width calculation
+                    _updateDropdownWidth($dropdown);
+
+                    // Handle button clicks
+                    $button.addEventListener('click', () => {
+                        const isExpanded = $button.getAttribute('aria-expanded') === 'true';
+                        if (isExpanded) {
+                            _closeDropdown($button);
+                        } else {
+                            // Close any other open dropdowns
+                            $dropdownButtons.forEach(btn => {
+                                if (btn !== $button && btn.getAttribute('aria-expanded') === 'true') {
+                                    _closeDropdown(btn);
+                                }
+                            });
+                            _openDropdown($button);
+                        }
+                    });
+
+                    // Handle button keyboard interactions
+                    $button.addEventListener('keydown', (event) => {
+                        if (event.key === 'ArrowDown' || event.key === 'Enter' || event.key === ' ') {
+                            event.preventDefault();
+                            _openDropdown($button);
+                        }
+                    });
+
+                    // Close when clicking outside
+                    document.addEventListener('click', (event) => {
+                        if (!$button.contains(event.target) && !$dropdown.contains(event.target)) {
+                            _closeDropdown($button);
+                        }
+                    });
+
+                    // Close when element within dropdown focus is lost
+                    $dropdown.addEventListener('focusout', (event) => {
+                        const $focusedElement = event.relatedTarget;
+                        if (!$dropdown.contains($focusedElement)) {
+                            _closeDropdown($button);
+                        }
+                    });
+                });
+
+                // Handle window resize
+                let resizeTimeout;
+                const RESIZE_DEBOUNCE_DELAY = 250;
+                window.addEventListener('resize', () => {
+                    clearTimeout(resizeTimeout);
+                    resizeTimeout = setTimeout(() => {
+                        $dropdowns.forEach($dropdown => {
+                            _updateDropdownWidth($dropdown);
+                        });
+                    }, RESIZE_DEBOUNCE_DELAY);
+                });
+            }
+
             document.addEventListener("DOMContentLoaded", function() {
                 initializeAccordions();
                 initializeHamburgerMenu();
+                initializeDropdownMenu();
             });
-
-            function toggleClass(elements, clazz) {
-                for (let element of elements) {
-                    element.classList.toggle(clazz);
-                }
-            }
         </script>
         {% if request.toolbar and request.toolbar.edit_mode_active %}
         {# When edit mode is active, we have to refresh js scripts after saving modifications #}
@@ -274,6 +416,7 @@
                 __RICHIE__.render();
                 initializeAccordions();
                 initializeHamburgerMenu();
+                initializeDropdownMenu();
             });
         </script>
         {% endif %}