From f17c575c60f8ba0ee706d9851c2dd7ab765b023b Mon Sep 17 00:00:00 2001
From: josdejong <wjosdejong@gmail.com>
Date: Wed, 3 Jun 2020 08:43:33 +0200
Subject: [PATCH] Reset array limit when not expanded, and create a "show more"
 button

---
 src/JSONNode.scss   | 18 ++++++++++++++++++
 src/JSONNode.svelte |  8 ++++++--
 src/styles.scss     |  1 +
 3 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/src/JSONNode.scss b/src/JSONNode.scss
index 68df794..c2dd531 100644
--- a/src/JSONNode.scss
+++ b/src/JSONNode.scss
@@ -124,6 +124,24 @@
   }
 }
 
+div.limit {
+  margin-left: $indentation-width;
+
+  button {
+    background: none;
+    border: none;
+    padding: 0;
+    color: $black;
+    text-decoration: underline;
+    cursor: pointer;
+
+    &:hover,
+    &:focus {
+      color: $red;
+    }
+  }
+}
+
 div.empty {
   &:not(:focus) {
     outline: 1px dotted lightgray;
diff --git a/src/JSONNode.svelte b/src/JSONNode.svelte
index 1b5c1d5..6ddab14 100644
--- a/src/JSONNode.svelte
+++ b/src/JSONNode.svelte
@@ -178,6 +178,10 @@
   function handleShowAll () {
     onLimit(path, Infinity)
   }
+
+  function handleShowMore () {
+    onLimit(path, (Math.round(limit / DEFAULT_LIMIT) + 1) * DEFAULT_LIMIT)
+  }
 </script>
 
 <div class='json-node'>
@@ -229,8 +233,8 @@
           />
         {/each}
         {#if limited}
-          <div>
-            (showing {limit} of {value.length} items <button on:click={handleShowAll}>show all</button>)
+          <div class='limit'>
+            (showing {limit} of {value.length} items <button on:click={handleShowMore}>show more</button> <button on:click={handleShowAll}>show all</button>)
           </div>
         {/if}
       </div>
diff --git a/src/styles.scss b/src/styles.scss
index 275c00c..da2bc19 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -7,6 +7,7 @@ $font-size-icon: 16px;
 
 $white: #fff;
 $black: #1A1A1A;
+$red: #ee422e;
 $contentsMinHeight: 150px;
 $theme-color: #3883fa;
 $theme-color-light: lighten($theme-color, 5%);