Layer submenu implemented
This commit is contained in:
parent
09c5b04fac
commit
01be6ec525
|
@ -157,7 +157,7 @@ const Cube = function (width, depth, height) {
|
|||
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) {
|
||||
this._setLed(led, state);
|
||||
}
|
||||
|
@ -169,7 +169,7 @@ const Cube = function (width, depth, height) {
|
|||
*/
|
||||
this.setLedColor = function (color) {
|
||||
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 cssClass of COLOR_CLASS) {
|
||||
led.classList.remove(cssClass);
|
||||
|
@ -239,6 +239,17 @@ const Cube = function (width, depth, height) {
|
|||
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);
|
||||
}
|
||||
}
|
||||
|
@ -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
|
||||
*/
|
||||
|
|
|
@ -149,36 +149,6 @@ button:hover {
|
|||
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 {
|
||||
position: relative;
|
||||
}
|
||||
|
@ -227,14 +197,44 @@ button:hover {
|
|||
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 {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.layer-buttons {
|
||||
display: flex;
|
||||
border: solid 2px white;
|
||||
padding: 10px;
|
||||
border: solid 0.5px white;
|
||||
padding: 5px 10px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
|
@ -247,11 +247,11 @@ button:hover {
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
.layer-button-on {
|
||||
.layer-button-on, .layer-button-on:hover {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.layer-button-off {
|
||||
.layer-button-off, .layer-button-off:hover {
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in New Issue