From 2e193fdd29cbdab932cda9feba9db12ea6ec3b68 Mon Sep 17 00:00:00 2001
From: Elia Lazzari <elia.lazzari@gmail.com>
Date: Tue, 12 Apr 2022 19:13:41 +0200
Subject: [PATCH] Options Popup doesn't manage the list overflow! Fixes #1

---
 examples/tcp_simulator.mjs |  2 +-
 index.js                   | 20 ++++++++++++++++++--
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/examples/tcp_simulator.mjs b/examples/tcp_simulator.mjs
index 701e171..72f9858 100644
--- a/examples/tcp_simulator.mjs
+++ b/examples/tcp_simulator.mjs
@@ -10,7 +10,7 @@ let period = 100
 
 let mode = 'random'
 
-const periodList = [10, 100, 250, 500, 1000, 2000, 5000, 10000]
+const periodList = [10, 100, 250, 500, 1000, 2000, 5000, 10000, 20000, 30000, 60000, 120000, 300000, 600000, 900000, 1800000, 3600000]
 const modeList = ["random", "linear"]
 
 const clientManager = new EventEmitter()
diff --git a/index.js b/index.js
index d8cb38b..5ac21c4 100644
--- a/index.js
+++ b/index.js
@@ -261,6 +261,8 @@ class OptionPopup extends EventEmitter {
         this.options = options
         this.selected = selected
         this.visible = visible
+        this.marginTop = 4
+        this.startIndex = 0
         if (this.CM.widgetsCollection[this.id]) {
             this.CM.unRegisterWidget(this)
             const message = `OptionPopup ${this.id} already exists.`
@@ -270,13 +272,27 @@ class OptionPopup extends EventEmitter {
         this.CM.registerWiget(this)
     }
 
+    adaptOptions() {
+        return this.options.slice(this.startIndex, this.startIndex + this.CM.Terminal.rows - this.marginTop - 4)
+    }
+
     keyListner(str, key) {
         switch (key.name) {
             case 'down':
                 this.setSelected(this.options[(this.options.indexOf(this.selected) + 1) % this.options.length])
+                if (this.CM.Terminal.rows - this.marginTop - 4 < this.options.length) {
+                    if (this.selected === this.options[this.adaptOptions().length + this.startIndex]) {
+                        this.startIndex++
+                    }
+                } else {
+                    this.startIndex = 0
+                }
                 break
             case 'up':
                 this.setSelected(this.options[(this.options.indexOf(this.selected) - 1 + this.options.length) % this.options.length])
+                if (this.startIndex > 0 && this.selected === this.adaptOptions()[0]) {
+                    this.startIndex--
+                }
                 break
             case 'return':
                 {
@@ -373,13 +389,13 @@ class OptionPopup extends EventEmitter {
         footer += "┘\n"
 
         let content = ""
-        this.options.forEach((option, index) => {
+        this.adaptOptions().forEach((option, index) => {
             content += `│${option === this.selected ? "<" : " "} ${option}${option === this.selected ? " >" : "  "}${" ".repeat(windowWidth - option.toString().length - 4)}│\n`
         })
 
         const windowDesign = `${header}${content}${footer}`
         windowDesign.split('\n').forEach((line, index) => {
-            this.CM.Terminal.cursorTo(Math.round((this.CM.Terminal.columns / 2) - (windowWidth / 2)), 4 + index)
+            this.CM.Terminal.cursorTo(Math.round((this.CM.Terminal.columns / 2) - (windowWidth / 2)), this.marginTop + index)
             this.CM.Terminal.write(line)
         })
         return this