🇫🇷France @zenimagine

Add tokens with geolocation fields to set default values in the geolocation filter criteria

I tested the module below, but it does not add tokens to the geolocation exposed filter :

https://www.drupal.org/project/token_views_filter →

@jazzper Thanks, I don't use paragraph, prefer to be 100% ckeditor. I will look for another solution. thanks for these informations

@jazzper Thank you for your help, I managed to do it on my web suite and it is much cleaner :

https://www.cocorinet.fr/points-dinteret

https://www.cocorinet.fr/le-roc-au-chien

I have one last question, you presented your content with a summary, which points to parts of the page. I did a few similar things, but using the links in this ckeditor, entering an ID without putting a link. The problem is that the destination ID appears as a link with an empty href.

On your website it is very clean. How did you do this. I could add the IDs manually in the text of the page but it is very long.

THANKS

zenimagine → created an issue.

@jazzper very pretty your website with Olivero. How did you manage to present the summaries and filters in collapses ?

This is precisely the problem, because the Views only counts visible elements. If I have 200 elements and I limit the display to 5, the Views displays 5 in the results. I want to display a number of 200

zenimagine → created an issue.

Should I apply patch #2 ?

how can I test? I have the same problem

This script works but it needs improvement. Browsing on mobile and tablet is much better :

scripts.js

(function (Drupal, document, window) {
  // Ensures the navigation bar is fixed at the top on mobile devices, regardless of desktop navigation state.
  function fixedMobileNav() {
    const siteHeaderFixable = document.querySelector('[data-drupal-selector="site-header"]');
    const fixNav = () => {
      if (!Drupal.olivero.isDesktopNav()) {
        siteHeaderFixable.classList.add('is-fixed-mobile');
      } else {
        siteHeaderFixable.classList.remove('is-fixed-mobile');
      }
    };
    document.addEventListener('DOMContentLoaded', fixNav);
    window.addEventListener('resize', fixNav);
  }

  // Applies or removes a shadow from the header based on the scroll position, but only in mobile view.
  function shadowMobileNav() {
    const headerInner = document.getElementById("site-header__inner");
    const shadowNav = () => {
      if (!Drupal.olivero.isDesktopNav()) {
        if (document.body.scrollTop > 1 || document.documentElement.scrollTop > 1) {
          headerInner.classList.add('site-header__shadow-active');
        } else {
          headerInner.classList.remove('site-header__shadow-active');
        }
      }
    };
    document.addEventListener('DOMContentLoaded', shadowNav);
    window.addEventListener('resize', shadowNav);
    window.addEventListener("scroll", shadowNav);
  }

  // Handles expanding the navigation menu on mobile and observing changes.
  function handleNavigationExpansion() {
    const navButton = document.querySelector('[data-drupal-selector="mobile-nav-button"]');
    const expandNav = () => {
      const expanded = navButton.getAttribute("aria-expanded") === "true";
      if (expanded && !Drupal.olivero.isDesktopNav()) {
        document.querySelectorAll('[data-drupal-selector="primary-nav-menu-item-has-children"]').forEach(menuItem => {
          Drupal.olivero.toggleSubNav(menuItem, true);
        });
      }
    };
    // Observer for changes in navigation button state.
    const observer = new MutationObserver(() => expandNav());
    observer.observe(navButton, { attributes: true });
    // Resize event to adjust navigation state.
    window.addEventListener('resize', () => {
      setTimeout(expandNav, 100);
    });
  }

  // Initialize all the enhanced navigation functionalities.
  fixedMobileNav();
  shadowMobileNav();
  handleNavigationExpansion();

})(Drupal, document, window);

style.css

.site-header {
    z-index: 111 !important;
    border-block-end: 0px !important;
}

.is-fixed-mobile {
    position: sticky !important;
    top: 0;
    max-width: var(--max-bg-color);
}

.site-header__shadow-active {
    box-shadow: -36px 1px 36px rgba(0,0,0,0.08);
}

#3 Thanks I just applied the patch and it fixes the problem

the problem is fixed in Drupal 10.2.5

It's frustrating, it's impossible to automatically open the navigation bar menus on mobile. Can anyone review my script? THANKS

I have an Olivero subtheme with these files.

scripts.js

(function (Drupal, document, window) {
  // Ensures the navigation bar is fixed at the top on mobile devices, regardless of desktop navigation state.
  function fixedMobileNav() {
    function fixNav() {
      const siteHeaderFixable = document.querySelector('[data-drupal-selector="site-header"]');
      if (!Drupal.olivero.isDesktopNav()) {
        siteHeaderFixable.classList.add('is-fixed-mobile');
      } else {
        siteHeaderFixable.classList.remove('is-fixed-mobile');
      }
    }
    document.addEventListener('DOMContentLoaded', fixNav);
    window.addEventListener('resize', fixNav);
  }

  // Applies or removes a shadow from the header based on the scroll position, but only in mobile view.
  function shadowMobileNav() {
    function shadowNav() {
      const headerInner = document.getElementById("site-header__inner");
      if (!Drupal.olivero.isDesktopNav()) {
        if (document.body.scrollTop > 1 || document.documentElement.scrollTop > 1) {
          headerInner.classList.add('site-header__shadow-active');
        } else {
          headerInner.classList.remove('site-header__shadow-active');
        }
      }
    }
    document.addEventListener('DOMContentLoaded', shadowNav);
    window.addEventListener('resize', shadowNav);
    window.addEventListener("scroll", shadowNav);
  }

  // This function is responsible for automatically expanding the navigation menu on mobile devices.
  function expandMobileNav() {
    function expandNav() {
      if (!Drupal.olivero.isDesktopNav()) {
        document.querySelectorAll('[data-drupal-selector="primary-nav-menu-item-has-children"]').forEach(menuItem => {
          Drupal.olivero.toggleSubNav(menuItem, true);
        });
      }
    }
    document.addEventListener('DOMContentLoaded', expandNav);
    window.addEventListener('resize', expandNav);
  }

  // Initialize all the enhanced navigation functionalities.
  fixedMobileNav();
  shadowMobileNav();
  expandMobileNav();

})(Drupal, document, window);

style.css

.site-header {
    z-index: 111 !important;
    border-block-end: 0px !important;
}

.is-fixed-mobile {
    position: sticky !important;
    top: 0;
    max-width: var(--max-bg-color);
}

.site-header__shadow-active {
    box-shadow: -36px 1px 36px rgba(0,0,0,0.08);
}

Can you help me ? Here are the modifications made to my Olivero subtheme. You can test it works.

My problem is that when I resize the window, the menus collapse. You have to reload the page so that it automatically unfolds in mobile mode.

scripts.js :

(function (Drupal, window, document) {
  // Automatically expands the menu on mobile devices.
  function expandMobileNav() {
    if (!Drupal.olivero.isDesktopNav()) {
      document.querySelectorAll('[data-drupal-selector="primary-nav-menu-item-has-children"]').forEach(menuItem => {
        Drupal.olivero.toggleSubNav(menuItem, true);
      });
    }
  }

  // Fixes the navigation bar on mobile regardless of `isDesktopNav`.
  function ensureMobileNavFixed() {
    const siteHeaderFixable = document.querySelector('[data-drupal-selector="site-header"]');
    function adjustNavFixation() {
      if (!Drupal.olivero.isDesktopNav()) {
        siteHeaderFixable.classList.add('is-fixed-mobile');
      } else {
        siteHeaderFixable.classList.remove('is-fixed-mobile');
      }
    }
    adjustNavFixation();
    window.addEventListener('resize', adjustNavFixation);
  }

  // Applies or removes the header shadow based on page scrolling, only in mobile view.
  function toggleHeaderShadow() {
    const headerInner = document.getElementById("site-header__inner");
    if (!Drupal.olivero.isDesktopNav()) {
      if (document.body.scrollTop > 1 || document.documentElement.scrollTop > 1) {
        headerInner.classList.add('site-header__shadow-active');
      } else {
        headerInner.classList.remove('site-header__shadow-active');
      }
    }
  }

  document.addEventListener('DOMContentLoaded', function () {
    expandMobileNav();
    ensureMobileNavFixed();
    toggleHeaderShadow();
  });

  window.addEventListener("scroll", toggleHeaderShadow);
  window.addEventListener('resize', function() {
    expandMobileNav();
    ensureMobileNavFixed();
    toggleHeaderShadow();
  });
})(Drupal, window, document);

style.css :

.is-fixed-mobile {
    position: sticky;
    top: 0;
    z-index: 102;
    max-width: var(--max-bg-color);
}

.site-header__shadow-active {
    box-shadow: -36px 1px 36px rgba(0,0,0,0.08);
}

The CSS code above is not the solution, because the visitor cannot fold the menu manually and the "+" and "-" buttons are not consistent.

I made 2 screenshots with the code that changes when the menu and fold and unfold.

The CSS is not correct, so what code should I add to scripts.js to correctly unfold the menus on mobile ?

I have a website with the default Olivero theme. I want when the navigation bar display switches to mobile mode, the menus are automatically expanded. Like in this screenshot :

https://ibb.co/zXbjYLB

style.css :

.site-header {
    z-index: 111;
    position: sticky;
    top: 0;
    border-bottom-width: 0px;
}

.site-header__shadow-active {
    box-shadow: -36px 1px 36px rgb(0 0 0 / 8%);
}

.primary-nav__menu--level-2 {
    visibility: visible !important;
    max-height: none !important;
    margin-top: 1.6875rem !important;
    opacity: 1 !important;
}

#header-nav {
    display: flex;
    flex-direction: column;
}

#header-nav .menu--main {
    order: 2;
    padding-bottom: 2.25rem;
}

#header-nav .region--secondary-menu {
    margin-top: 0;
    margin-bottom: 1.25rem;
    order: 1;
}

@media (min-width: 75rem) {
  body:not(.is-always-mobile-nav) .site-header {
    position: relative;
  }
  body:not(.is-always-mobile-nav) .site-header__shadow-active {
    box-shadow: none;
  }
  body:not(.is-always-mobile-nav) .primary-nav__menu--level-2 {
    visibility: hidden !important;
    max-height: 0 !important;
    margin-top: 0 !important;
    opacity: 0 !important;
  }
  body:not(.is-always-mobile-nav) .primary-nav__menu--level-2.is-active-menu-parent {
    visibility: visible !important;
    max-height: none !important;
    opacity: 1 !important;
  }
  body:not(.is-always-mobile-nav) .primary-nav__button-toggle {
    display: block;
  }
  body:not(.is-always-mobile-nav) #header-nav {
    flex-direction: initial !important;
  }
  body:not(.is-always-mobile-nav) #header-nav .region--secondary-menu {
    order: initial !important;
  }
  body:not(.is-always-mobile-nav) #header-nav .menu--main {
    order: initial !important;
    padding-bottom: initial !important;
  }
  body:not(.is-always-mobile-nav) .region--secondary-menu {
    margin-top: 2.25rem !important;
    margin-bottom: 2.25rem !important;
  }
}

@media (min-width: 43.75rem) {
  .region--content-below {
    display: block;
  }
  [dir="ltr"] .region--content-below > * {
    margin-right: 0rem;
  }
}

I created a scripts.js file in my Olivero subtheme. I imagine I need to add some code, but no idea what to put.

scripts.js

(function ($, Drupal, window, document) {
  $(document).ready(function () {

    window.addEventListener("scroll", function() {
      if (document.body.scrollTop > 1 || document.documentElement.scrollTop > 1) {
        document.getElementById("site-header__inner").classList.add('site-header__shadow-active');
      } else {
        document.getElementById("site-header__inner").classList.remove('site-header__shadow-active');
      }
    });

  });
})(jQuery, Drupal, this, this.document);

This code seems to work fine, but I don't know if it's a good practice. The Olivero theme is complicated to customize.

I'm missing an item, currently when the menu is expanded it shows the "+" button

I want it to display the "-" button which would be more logical.

The visitor must be able to unfold or collapse the menu when he clicks on the "+" and "-" button.

Can you help me finish this code? THANKS

Options in the theme configuration would be ideal. Like the Bootstrap theme for Drupal does.

In a block the content linked to the ID of the current page works, the problem only appears on the page linked to the block. All content is displayed and the page ID where the block is placed is not supported. While in the previous version of Drupal Core it worked perfectly.

Does anyone have a patch to fix this?

zenimagine → created an issue.

zenimagine → created an issue.

Has anyone with programming skills tested the view import to reproduce the problem?

I can't do anything more on my part. I hope this will be corrected in the next update. THANKS

Someone needs to do this, because I don't have the knowledge.

https://www.drupal.org/project/drupal/releases/10.2.0-alpha1 →

The bug appears from version 10.2.0-alpha1

There are no bugs with version 10.1.8

@cilefen I don't know the code, I updated my question with as much information as possible. This is a very annoying bug.

I have just tested on stable versions of Drupal and the bug appears from version 10.2.0

It works on version 10.1.8

I already did this before posting this report. But you could check my view by doing the import, to be sure that it comes from a regression.

@cilefen Can anyone test on simplytest.me ? On my site this views worked and since the updates, all my views display "all" instead of the entity ID

zenimagine → created an issue.

zenimagine → created an issue.

zenimagine → created an issue.

Thank you for your comments, I redid my logo on this website :

https://maskable.app/editor

It's not simple and intuitive, but it improves the framing a little. However, the box on the home screen is square. Too bad because it was better in the round.

This is weird, because a few months ago, the PWA didn't have these problems.

I have alerts regarding your last comment in Chrome

yes I did the update just before sending my message, as well as the database and I cleared the cache, but that does not correct

I followed your instructions and it doesn't work, the logo overflows

I'm on version 2.x-dev and I have another website on version 2.0.0-rc2

For these two websites I have the same problem. I cleared the cache and that doesn't fix it.

Do the test with a blank inteallation, the website logo overflows from the application logo. Look at my screenshot

zenimagine → created an issue.

zenimagine → created an issue.

zenimagine → created an issue.

Patch #14 works for me with Drupal 10.1

zenimagine → created an issue.

I tested the latest patch and it has no effect on the menu.

Thanks, it works. I had cleared cache in drupal but not in browser

I have applied the patch to the module and cleaned the cacahe but I have this error in the console and ckeditor does not load:

TypeError: this.editor.plugins.get(...).formView is null
    _changeFormToVertical https://www.example.com/modules/contrib/editor_advanced_link/js/build/editorAdvancedLink.js?v=10.1.0:1
    init https://www.example.com/modules/contrib/editor_advanced_link/js/build/editorAdvancedLink.js?v=10.1.0:1

Sorry, error on my part, because I applied the patch to the kernel. I have now correctly applied the patch to the module, but it does not work. I have errors in the console and ckeditor does not load.

        "patches": {
            "drupal/editor_advanced_link": {
                "CKEditor 5 ^36 compatibility — necessary for Drupal 10.1.x": "https://www.drupal.org/files/issues/2023-05-24/3350254-ckeditor-5-36-compatibility-16.patch"
            }
        },

Hi, impossible to apply the patch on drupal 10.1 would you have a solution? THANKS

  - Installing drupal/core (10.1.0): Extracting archive
  - Applying patches for drupal/core
    https://www.drupal.org/files/issues/2023-05-24/3350254-ckeditor-5-36-compatibility-16.patch (CKEditor 5 ^36 compatibility — necessary for Drupal 10.1.x)
   Could not apply patch! Skipping. The error was: Cannot apply patch https://www.drupal.org/files/issues/2023-05-24/3350254-ckeditor-5-36-compatibility-16.patch

The version solves the problem :-)

zenimagine → created an issue.

Very good thank you, yes you have to update the dependencies otherwise it does not work

zenimagine → created an issue.

zenimagine → created an issue.

Hi, I just tested the patch, it works well, but needs some improvement.

When the page is at the top, the back button should disappear and appear only when you start scrolling the page.

@VM Yes but as you have specified this module is not drupal 10 compatible and there is another problem: I want there to be a flag for the user to mark that he wishes to be notified by email. Even if the user is not a member of the group.

yes and it's been going on for over a year, this module is installed on my Drupal and I have no use for it. It would be nice to show a "Unable to uninstall" warning on the module page.

Thank you

@Robert Castelo Thank you for your work, is there an update path from version 2 to version 3 ?

I have Drupal 9.5.7 and just installed this module. I created a field, which I deleted and it is impossible to get rid of this module for months.

I have this message on the uninstall page with the uninstall checkbox disabled:

"Recurring Dates Field cannot be uninstalled for the following reason:
Fields awaiting deletion"

How to properly remove this module? The DEV versions have the same problem.

Please leave this open. This is a big problem and unfortunately there is no warning on the module page to indicate that it is not uninstallable.

+1

+1

+1

I've been trying to uninstall this module permanently for more than 6 months and I have the exact same problem as in this question. Is there a solution ? Can you update the module to be uninstallable?

Hi, can you update? THANKS

zenimagine → created an issue.

ok thanks

I have a Drupal 9.5 website and the PWA 1.6 module installed. Is there an update path to version 2? THANKS

zenimagine → created an issue.

I just tested the latest DEV and saved the fields again but it doesn't fix

I just updated, no problem, thanks

zenimagine → created an issue.

Ok thanks, I just installed it and it works on Drupal 10

it is written alpha-0 does this risk breaking the site or the module in the future ?

Hi, I have a site with drupal 10, which version of this module should I install, on my site in production? Is it stable? THANKS

zenimagine → created an issue.

I found, you have to replace the contextual filter for the same with depth and select 1

Thank you it works the solution and remove drush

@mfb I just uninstalled the module, now I have this error and the update is not done :

Your requirements could not be resolved to an installable set of packages.

Problem 1
- Root composer.json requires drupal/core-recommended 10.0.2 -> satisfiable by drupal/core-recommended[10.0.2].
- drupal/core-recommended 10.0.2 requires psr/log ~3.0.0 -> found psr/log[3.0.0] but these were not loaded, likely because it conflicts with another require.

Installation failed, reverting ./composer.json and ./composer.lock to their original content.

Do you have a solution because this completely blocks the update to Drupal 10 :

https://www.drupal.org/project/drupal/issues/3335486 💬 Unable to upgrade Drupal 9 to Drupal 10 Fixed

zenimagine → created an issue. See original summary → .

I found this link but I don't speak English, I use a translator. What command should I enter in cli?

https://drushcommands.com/drush-9x/role/role:perm:remove/

thank you