CMS next prev attributes for list that contain more than 100 items

Attributes
21

Any success? Is there anything else I can do?

22

hey @eklundpetter! Please remove the data-key attributes from your links, I’m writing a script that will manage to add this attribute to each of the link elements. Publish and let me know.

23

Hey, ohh nice, thanks

yes the data-key attributes are removed now

24

Hey @eklundpetter! This code should achieve what you are looking for. Please verify that the data-key is not added to any other element. I still saw it added to all collection items on my end. this is to ensure no unwanted clicks are performed.

<script>
  window.fsAttributes = window.fsAttributes || [];
  window.fsAttributes.push([
    'cmsload',
    (listInstances) => {
      console.log('cmsload Successfully loaded!');
      window.fsAttributes.cmsprevnext.init();

      window.fsAttributes.push([
        'cmsprevnext',
        (listInstances) => {
          console.log('cmsprevnext Successfully loaded!');

          document
            .querySelector('[fs-cmsprevnext-element="previous"] .link-block_prev')
            .setAttribute('data-key', 37); // Left arrow is key code 37

          document
            .querySelector('[fs-cmsprevnext-element="next"] .link-block_prev')
            .setAttribute('data-key', 39); // Right arrow is key code 39

          window.addEventListener('keydown', (e) => {
            const post = document.querySelector(`[data-key="${e.keyCode}"]`);
            if (!post) return;
            post.click();
          });
        },
      ]);
    },
  ]);
</script>
``
25

"Thanks so much, works great! The only glitch is that it stops working at the 100-limit?. In this example, it stops on image 011

26

Hey @eklundpetter! Here we go, this now adds a mutation observer in case the element is not ready and correctly adds the data-key to both links

<script>
  window.fsAttributes = window.fsAttributes || [];
  window.fsAttributes.push([
    'cmsload',
    (listInstances) => {
      console.log('cmsload Successfully loaded!');
      window.fsAttributes.cmsprevnext.init();

      window.fsAttributes.push([
        'cmsprevnext',
        () => {
          console.log('cmsprevnext Successfully loaded!');

          const observeAndSetAttribute = (targetSelector, attributeValue) => {
            const targetElement = document.querySelector(targetSelector);

            if (targetElement) {
              targetElement.setAttribute('data-key', attributeValue);
              return; // Stop observing once the element is found
            }

            const observer = new MutationObserver((mutationsList, observer) => {
              const updatedTargetElement = document.querySelector(targetSelector);

              if (updatedTargetElement) {
                updatedTargetElement.setAttribute('data-key', attributeValue);
                observer.disconnect(); // Stop observing once the element is found
              }
            });

            observer.observe(document.body, { subtree: true, childList: true });
          };

          observeAndSetAttribute('[fs-cmsprevnext-element="previous"] .link-block_prev', 37);
          observeAndSetAttribute('[fs-cmsprevnext-element="next"] .link-block_prev', 39);

          window.addEventListener('keydown', (e) => {
            const post = document.querySelector(`[data-key="${e.keyCode}"]`);
            if (!post) return;
            post.click();
          });
        },
      ]);
    },
  ]);
</script>