Drag&Drop multi-colour sections

[bernhard]

Almost any website that I build needs some kind of differently coloured sections... Unfortunately this is not so easy to accomplish. I've come up with several concepts over the time, but this one is very cool and promising imho ?

Anybody interested in more details or is that something nobody needs? How did/do you solve that?

[FireWire]

On 8/22/2024 at 2:35 AM, bernhard said:

How did/do you solve that?

I only build websites in black and white. Color is a paid extra.

[herr rilke]

On 8/22/2024 at 11:35 AM, bernhard said:

Anybody interested in more details or is that something nobody needs? How did/do you solve that?

yeeees!

me, me, me, me, MEEEEE   🙂 

please do let us know!

as an contao-webmaster i solve this by using custom classes an editor is able to choose from per section - looks a little like your approach

[herr rilke]

say  @bernhard 

is there a chance that you'd introduce us to the art of mulit-colored section backgrounds??

😇

[bernhard]

Hey @herr rilke thx for your interest. Unfortunately nobody else showed interest so it looks like a video would not be interesting to a lot.

On 9/5/2024 at 5:43 PM, herr rilke said:

as an contao-webmaster i solve this by using custom classes an editor is able to choose from per section - looks a little like your approach

I did that as well, but what I don't like with that approach is that if you move a block you have to adjust all classes of all blocks which is tedious.

My approach works similar but different 😛  I use a dedicated block type solely for the color. This block sets a custom runtime flag (like $site->bgColor) and all blocks then add a custom class based on that bgColor flag's value. So once I have a color block with setting "muted" all following blocks might get the class "bg-muted", for example. Then when the next color block comes up it might set the bgColor flag to "primary" which would tell all following blocks to add the class "bg-primary".

Now the challenge is to make that work with spacings and with frontend editing.

On frontend editing the problem to solve is with sorting blocks, because classes come from php and sorting is done on the client with JS. So you need to add a little js to adjust classes once sorting happens. In my project this is done like this:

// section color updates on sort
document.addEventListener("rocksortable-added", (event) => {
  let sortable = event.detail;
  sortable.option("onMove", (e) => {
    setTimeout(() => {
      let el = e.dragged;
      let container = el.closest("[sortable]");
      let children = container.children;
      let colorClass = null;

      // loop all items and update color classes
      for (let i = 0; i < children.length; i++) {
        let child = children[i];

        // don't change class of dragged item
        if (child.classList.contains("sortable-drag")) continue;

        // update colorClass on every rpb-color block
        if (child.classList.contains("rpb-color")) {
          colorClass = child.getAttribute("data-col");
          continue;
        }

        // update colorclass of element
        if (!colorClass) colorClass = "white";
        child.classList.remove("has-bg-white");
        child.classList.remove("has-bg-muted");
        child.classList.remove("has-bg-primary");
        child.classList.remove("has-bg-secondary");
        child.classList.add(`has-bg-${colorClass}`);
      }
    }, 0);
  });
});

For block spacings I've switched my approach from PHP based calculations to CSS based calculations. The trick is to only use margin-top for blocks, because then you can define different margins for blocks based on the previous block like this:

.bg-white + .bg-muted {
  margin-top: 20px;
}

This way you can achieve a lot of flexibility in your design with very little complexity in code.

Hope that helps!