From 01be6ec52513827a2112e5f17ccbf83e00325587 Mon Sep 17 00:00:00 2001 From: Mal Date: Thu, 19 Jan 2023 23:50:42 +0100 Subject: [PATCH] Layer submenu implemented --- public/index.js | 66 +++++++++++++++++++++++++++++++++++++++++++--- public/style.css | 68 ++++++++++++++++++++++++------------------------ 2 files changed, 97 insertions(+), 37 deletions(-) diff --git a/public/index.js b/public/index.js index bc2baab..3a84c42 100644 --- a/public/index.js +++ b/public/index.js @@ -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); @@ -238,7 +238,18 @@ 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 */ diff --git a/public/style.css b/public/style.css index 084e09f..1f38c3b 100644 --- a/public/style.css +++ b/public/style.css @@ -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; }