Layer submenu implemented

This commit is contained in:
Mal 2023-01-19 23:50:42 +01:00
parent 09c5b04fac
commit 01be6ec525
2 changed files with 97 additions and 37 deletions

View File

@ -157,7 +157,7 @@ const Cube = function (width, depth, height) {
this.frames[this.currentFrame].layers[layerIndex][index] = state; this.frames[this.currentFrame].layers[layerIndex][index] = state;
} }
for (const row of this.html.children.item(this.height - layerIndex - 1).children) { for (const row of this.html.children.item(this.height - layerIndex - 1).querySelectorAll('.row')) {
for (const led of row.children) { for (const led of row.children) {
this._setLed(led, state); this._setLed(led, state);
} }
@ -169,7 +169,7 @@ const Cube = function (width, depth, height) {
*/ */
this.setLedColor = function (color) { this.setLedColor = function (color) {
for (const layer of this.html.children) { for (const layer of this.html.children) {
for (const row of layer.children) { for (const row of layer.querySelectorAll('.row')) {
for (const led of row.children) { for (const led of row.children) {
for (const cssClass of COLOR_CLASS) { for (const cssClass of COLOR_CLASS) {
led.classList.remove(cssClass); led.classList.remove(cssClass);
@ -239,6 +239,17 @@ const Cube = function (width, depth, height) {
layerElement.appendChild(row); layerElement.appendChild(row);
} }
const layerIndex = this.height - z - 1;
const submenu = new LayerSubmenu(layerElement);
submenu.onLayerOn = () => {
this.setLayer(layerIndex, true);
}
submenu.onLayerOff = () => {
this.setLayer(layerIndex, false);
}
submenu.init();
this.html.appendChild(layerElement); this.html.appendChild(layerElement);
} }
} }
@ -256,6 +267,55 @@ const Cube = function (width, depth, height) {
} }
} }
/**
* @param {HTMLElement} layer
*/
const LayerSubmenu = function (layer) {
this.layer = layer;
this.html = document.createElement('div');
this.buttonLayerOn = document.createElement('button');
this.buttonLayerOff = document.createElement('button');
this,onLayerOn = function () {}
this.onLayerOff = function () {}
this.init = function () {
this.html.classList.add('layer-submenu');
const line = document.createElement('div');
line.classList.add('submenu-line');
this.html.appendChild(line);
const buttons = document.createElement('div');
buttons.classList.add('layer-buttons');
this.html.appendChild(buttons);
this.buttonLayerOn.classList.add('layer-button', 'layer-button-on');
this.buttonLayerOn.title = 'Alle LEDs an';
buttons.appendChild(this.buttonLayerOn);
this.buttonLayerOn.addEventListener(
'click',
() => {
this.onLayerOn();
}
);
this.buttonLayerOff.classList.add('layer-button', 'layer-button-off');
this.buttonLayerOff.title = 'Alle LEDs aus';
buttons.appendChild(this.buttonLayerOff);
this.buttonLayerOff.addEventListener(
'click',
() => {
this.onLayerOff();
}
);
this.layer.appendChild(this.html);
}
}
/** /**
* @param {string} id * @param {string} id
*/ */

View File

@ -149,36 +149,6 @@ button:hover {
padding-bottom: 200px; padding-bottom: 200px;
} }
.layer {
position: relative;
transform: scale(1.0, 0.4) rotate(-45deg);
margin-bottom: -40%;
border: 2px solid transparent;
border-radius: 20px;
background-color: black;
}
.layer:hover {
border: 2px solid white;
border-radius: 20px;
}
.layer-submenu {
position: absolute;
left: 67%;
bottom: -74px;
display: flex;
align-items: center;
transform: rotate(45deg) scale(1.0, 2.1);
visibility: hidden;
padding-left: 58px;
}
.submenu-line {
border: 1px solid white;
width: 80px;
}
.selector { .selector {
position: relative; position: relative;
} }
@ -227,14 +197,44 @@ button:hover {
color: black; color: black;
} }
.layer {
position: relative;
transform: scale(1.0, 0.4) rotate(-45deg);
margin-bottom: -40%;
border: 2px solid transparent;
border-radius: 20px;
background-color: black;
}
.layer:hover {
border: 2px solid white;
border-radius: 20px;
}
.layer-submenu {
position: absolute;
left: 67%;
bottom: -74px;
display: flex;
align-items: center;
transform: rotate(45deg) scale(1.0, 3);
visibility: hidden;
padding-left: 58px;
}
.submenu-line {
border: 0.25px solid white;
width: 80px;
}
.layer:hover .layer-submenu { .layer:hover .layer-submenu {
visibility: visible; visibility: visible;
} }
.layer-buttons { .layer-buttons {
display: flex; display: flex;
border: solid 2px white; border: solid 0.5px white;
padding: 10px; padding: 5px 10px;
border-radius: 10px; border-radius: 10px;
} }
@ -247,11 +247,11 @@ button:hover {
cursor: pointer; cursor: pointer;
} }
.layer-button-on { .layer-button-on, .layer-button-on:hover {
background-color: white; background-color: white;
} }
.layer-button-off { .layer-button-off, .layer-button-off:hover {
background-color: black; background-color: black;
} }