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;
|
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
|
||||||
*/
|
*/
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue