Php object in js in for each loop

The CMS Questions
1

Hello,

In my code I am trying to change the color of indicator dots according to the colors that I give in the backend. I have to change the color through js since I am using a flickity carousel here that creates the dots in the js.
the js works and technically also getting the colors from the backend however its not item specific, what happens is that every item has the dots colored from the array from the last created item, but every item has a specific set of colors assigned in the backend. Is there a way to have the for each loop also be applicable and working for the js?

this is my code:

<?php 
$works = $site
->children()
->not('error')->not('home');
?>

    <?php foreach ($works as $work): ?>
        <div class="workItem" id="<?= $work->uuid() ?>">
            <a class="collapsible">
                <span class="punkt" style="background-color:<?= $work->firstdotcolor() ?>;"></span>
                <span class="workTitle"><?= $work->title() ?></span>
                <span class="workShortInfo"><?= $work->intro() ?></span>
                <?php if ($work->read()->isNotEmpty()): ?>
                    <span class="workShortInfo" style="text-decoration:underline;"><span id="btnText">Read text by</span> <?= $work->read() ?></span>
                <?php endif ?>
                </a>

            <div class="content">
                <div class="contentWrapper">
                    <p class="text">
                     <?= $work->text()->kti() ?>
                    </p>
                    <p class="footnotes">
                     <?= $work->footnotes()->kti() ?>
                    </p>
                </div>
            </div>

            <div class="carousel" 
                style="color:<?= $work->firstdotcolor() ?> !important;"
                data-flickity='{ "freeScroll": true, "wrapAround": true, "accessibility": true }'>
                <?php foreach ($work->images() as $galleryImg): ?>
                    <div class="carousel-cell" style="color:<?= $work->firstdotcolor() ?> !important;">
                        <img
                        src="<?= $galleryImg->placeholderUri() ?>"
                        data-src="<?= $galleryImg->url() ?>"
                        data-lazyload
                        height="100%"
                        width="100%"
                        alt="<?= $galleryImg->alt() ?>"
                        />
                    </div>
                <?php endforeach ?>
            </div>

<script>
var colors = ["<?= $work->firstdotcolor() ?>", "<?= $work->colorpalette1() ?>", "<?= $work->colorpalette2() ?>", "<?= $work->colorpalette3() ?>", "<?= $work->colorpalette4() ?>", "<?= $work->colorpalette5() ?>", "<?= $work->colorpalette6() ?>"];

setTimeout(() => {
  var customizeContainer = Array.from(document.querySelectorAll('.dot'));

  customizeContainer.forEach(function(node, i) {

      node.style.setProperty("background-color", colors[i % colors.length], "important");
    // console.log(node);
  });
}, 100)

</script>


        </div>
    <?php endforeach ?>
2

It’s really hard to understand without any screenshots or better even screen capture video what you want to achieve and where it doesn’t work as intended.

A very first thing I noticed is that you <script> block is inside the foreach loop. So for every work you are creating a new script. But looking at the script, it seems this is intended to just run once for all - not multiple times.

3

actually thats exactly what I would want to achieve! having a script for every $work, so that the var colors is specific to every $work, do you know how that would look then?

4

But your script looks for all .dot elements and loops over them.
So now you have multiple script blocks and every one of them loops over all of them.

I really don’t quite get what the script is even supposed to do. Why don’t you directly add the right color as background color (as a HTML style attribute for example). Why setting it via javascript?

5

the dots are only created through js (I’m using flickity for the carousel and that creates the dots for each img in the gallery) so I could access their color through the css file but then I could only put one color and it stays like that and I can’t access it through the panel (right?). Since they are not in the html I cannot directly add it there. So I thought I need to try to solve it through js.

(What I want to achieve with my code is: there is different work Items in the for each loop, each has an image carousel, with the indicator dots of said carousel colored in a from a set of colors that is specific to the work Item it belongs to)

yes thats where I’m not getting further, I first thought that when I combine the .dot with the id of the workItem as
var customizeContainer = Array.from(document.querySelectorAll('#<?= $work->uuid() ?> .dot')); or say that this is may container
var container = document.querySelector("#<?= $work->uuid() ?>"); and then search for the dots in that container with
var customizeContainer = Array.from(container.querySelectorAll('.dot'));

I can achieve what I want but then the console says that #page://0bQ9zKDIHpWum1vq’ is not a valid selector

I have to say that I’m really in (for me) unknown and deep waters so sorry if I’m not making sense

6

Try $work->id(). This should be unique enough among your works and not contain characters that CSS doesn’t like as selector.

7

i have it now like that
var customizeContainer = Array.from(document.getElementById("<?= $work->id() ?>").querySelectorAll(' .dot'));
and at least i don’t get an error in the console but the colors are still just the ones from the last work
so the problem is more here right?

var colors = ["<?= $work->firstdotcolor() ?>", "<?= $work->colorpalette1() ?>", "<?= $work->colorpalette2() ?>", "<?= $work->colorpalette3() ?>", "<?= $work->colorpalette4() ?>", "<?= $work->colorpalette5() ?>", "<?= $work->colorpalette6() ?>"];
8

Maybe you can provide some screenshots to make clearer how it looks like, what’s currently happening vs. what’s supposed to happen.

Right now it’s hard to help you as it’s hard to understand the matter at hand, especially since this doesn’t really seem Kirby-related anymore but more JS/CSS matters.

9

this is my codepen with the isolated code for the colored dots:

https://codepen.io/Insa-Deist/pen/jOXNOKM

there I have a static array of colors that make up the dots, each gallery will be a project ($work) in the code with kirby.
in the panel I have an option to assign a color array:

Bildschirmfoto 2023-08-22 um 12.15.22
Bildschirmfoto 2023-08-22 um 12.15.22988×1924 157 KB

these I want to call, specific to each project ($work) which I hoped to achieve by putting the js into the for each loop and calling the colors just like I am calling for example the title or the images with $work->… (see code in first post) however this gives me the colors of the last project ($work) for every project ($work) (so the js doesn’t work in the logic of the for each loop?)

Bildschirmfoto 2023-08-22 um 12.21.50
Bildschirmfoto 2023-08-22 um 12.21.50866×1628 91.6 KB