SOLVED - Numerous nth child in a menu. How to set different colors in a short short way?

Community Usage questions
12

I've edited this a bit further. Hopefully it comes in handy for one or another:

JS{{
var row_colors = ["yellow", "orange", "blue", "purple"]
var color_hover = ["white"]
var items_opacity = .2

var gridx = @{this.gridTemplate}
var gridy = Math.ceil(Object.keys(@{this.values}).length / gridx)
if (gridx == "") {
  console.log("ERROR. Need value in gridTemplate for "+@{this.id})
  return
}
if (row_colors.length != gridy) {
  console.log("ERROR in "+@{this}+". Specified colors (currently "+row_colors.length+") don't match amount of rows of widget (currently "+gridy+").")
  return
}
var colors_off = []
for (var i = 0; i < row_colors.length; i++) {
  colors_off = colors_off.concat(Array(gridx).fill(row_colors[i]))
}
var css = ''
for (var i = 0; i < colors_off.length; i++) {
  css += ".item:nth-child(" + (i+1) + "){background:" + colors_off[i] + "; opacity: "+items_opacity+"}\n"
  css += ".item:nth-child(" + (i+1) + "):hover{background: "+ color_hover + ";\nopacity: 1}\n"
  
}
css += ".item.on{opacity: 1;}"
return css
}}

The idea is to have the menu's props set to:
css: [see script]
layout: grid
gridTemplate: 2 [example for number of rows]
values: { "Value 1": 1, "Value 2": 2, "Menu Entry": 3, "Menu Entry 2": 4, "Menu Entry 3": 5, "Hello World!": 6, "Another Entry 1": 7 } [example]

I scripted this, so one only needs to change the first 3 variables in css (see code) to taste. In the last effective line of the code, you can add additional css properties => In the code above it's for example css += ".item.on{opacity: 1;}"

Feel free to ask/edit/modify to your liking.
Cheers to you all and happy coding! :smiley:

4 Likes