Layer submenu implemented

public/index.js

@@ -1,3 +1,6 @@
+/**
+ * @param {number} duration 
+ */
 const Frame = function (duration) {
     this.layers = [];
     this.duration = duration;
@@ -18,6 +21,9 @@ COLOR_CLASS[LED_COLOR.RED] = 'led-red';
 COLOR_CLASS[LED_COLOR.GREEN] = 'led-green';
 COLOR_CLASS[LED_COLOR.BLUE] = 'led-blue';
 
+/**
+ * @param {string} id 
+ */
 const Selector = function (id) {
     this.items = [];
     this.currentItem = 0;
@@ -45,6 +51,9 @@ const Selector = function (id) {
 
     this.onSelect = function () {};
 
+    /**
+     * @param {number} index 
+     */
     this.selectItem = function (index) {
         this.htmlItems.hidden = true;
 
@@ -58,11 +67,20 @@ const Selector = function (id) {
     };
 }
 
+/**
+ * @param {number} width 
+ * @param {number} depth 
+ * @param {number} height 
+ */
 const FrameFactory = function (width, depth, height) {
     this.width = width;
     this.depth = depth;
     this.height = height;
 
+    /**
+     * @param {number} duration 
+     * @returns Frame
+     */
     this.getFrame = function (duration) {
         const frame = new Frame(duration);
         
@@ -80,6 +98,11 @@ const FrameFactory = function (width, depth, height) {
     }
 }
 
+/**
+ * @param {number} width 
+ * @param {number} depth 
+ * @param {number} height 
+ */
 const Cube = function (width, depth, height) {
     this.width = width;
     this.depth = depth;
@@ -92,41 +115,61 @@ const Cube = function (width, depth, height) {
         this._setupHtml();
     }
 
+    /**
+     * @param {number} frameIndex 
+     */
     this.setCurrentFrame = function (frameIndex) {
         this.currentFrame = frameIndex;
 
         this._loadFrame(frameIndex);
     }
 
+    /**
+     * @param {Frame} frame 
+     */
     this.addFrame = function (frame) {
         this.frames.push(frame);
     }
 
+    /**
+     * @param {number} frameIndex 
+     */
     this.deleteFrame = function (frameIndex) {
         this.frames = this.frames.slice(0, frameIndex).concat(
             this.frames.slice(frameIndex + 1)
         );
     }
 
+    /**
+     * @param {number} layerIndex 
+     * @param {number} ledIndex 
+     */
     this.switchLed = function (layerIndex, ledIndex) {
         this.frames[this.currentFrame].layers[layerIndex][ledIndex] = !this.frames[this.currentFrame].layers[layerIndex][ledIndex];
     }
 
+    /**
+     * @param {number} layerIndex 
+     * @param {boolean} state 
+     */
     this.setLayer = function (layerIndex, state) {
         for (let index = 0; index < this.width * this.depth; index++) {
             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);
             }
         }
     }
 
+    /**
+     * @param {LED_COLOR} color 
+     */
     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);
@@ -138,6 +181,9 @@ const Cube = function (width, depth, height) {
         }
     }
 
+    /**
+     * @param {number} frameIndex 
+     */
     this._loadFrame = function (frameIndex) {
         for (let layer = 0; layer < this.frames[frameIndex].layers.length; layer++) {
             for (let row = 0; row < this.depth; row++) {
@@ -192,11 +238,26 @@ 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);
         }
     }
 
+    /**
+     * @param {HTMLElement} ledHtml 
+     * @param {boolean} state 
+     */
     this._setLed = function (ledHtml, state) {
         if (state) {
             ledHtml.classList.remove('led-off');
@@ -206,6 +267,58 @@ 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 
+ */
 const FrameMenu = function (id) {
     this.html = document.getElementById(id);
     this.htmlSlider = this.html.querySelector('#frame-slider');
@@ -302,11 +415,17 @@ const FrameMenu = function (id) {
         }
     )
 
+    /**
+     * @param {number} frameIndex 
+     */
     this.slideToFrame = function (frameIndex) {
         this.htmlSlider.value = frameIndex + 1;
         this._updateFramePosition();
     }
 
+    /**
+     * @param {number} frameIndex 
+     */
     this.setDuration = function (duration) {
         this.htmlInputDuration.value = duration;
     }

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;
+    border: solid 0.5px white;
-    padding: 10px;
+    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;
 }