#2 #15 Add the ability ("Spoiler" component) to toggle visibility of …

…large values in tables
versusbassz · Jan 20, 2022 · 9c9a72e · 9c9a72e
1 parent 636bc82
commit 9c9a72e
Show file tree

Hide file tree

Showing 7 changed files with 161 additions and 43 deletions.
diff --git a/assets/js/components/tables/EntityPropsTable.js b/assets/js/components/tables/EntityPropsTable.js
@@ -1,11 +1,13 @@
 import React, { useState } from "react";
 
+import { Spoiler } from "./Spoiler";
 import { SortingArrow } from "./SortingArrow";
 import { CellContent } from "./CellContent";
 import { Quote } from "./Quote";
 import { str } from "../../utils/i18n";
 import { dynamicSort } from "../../utils/sorting";
 import { searchString } from "../../utils/strings";
+import { SPOILER_MIN_LENGTH } from "../../constants";
 
 export const EntityPropsTable = ({ fieldsData, search }) => {
   const [ ui, setUI ] = useState({
@@ -106,28 +108,30 @@ export const EntityPropsTable = ({ fieldsData, search }) => {
             </td>
 
             <td className="vsm-table__column vsm-table__column_type_td vsm-table__column_content_value">
-              {valueType === "pretty" ? (
-                <>
-                  <div className="vsm-value_type_pretty">
-                    <CellContent value={item.value_pretty} search={search} />
+              <Spoiler enabled={item?.value?.length >= SPOILER_MIN_LENGTH}>
+                {valueType === "pretty" ? (
+                  <>
+                    <div className="vsm-value_type_pretty">
+                      <CellContent value={item.value_pretty} search={search} />
+                    </div>
+                    {search && (searchString(search, item.value) && ! searchString(search, item.value_pretty)) && (
+                      <span className="vsm-value-note">* {str("see_raw_value")}</span>
+                    )}
+                  </>
+                ) : (
+                  <div className="vsm-value_type_plain">
+                    {item.value === null ? (
+                      <span className="vsm-null">null</span>
+                    ) : (
+                      <>
+                        <Quote />
+                        <CellContent value={item.value} search={search} />
+                        <Quote />
+                      </>
+                    )}
                   </div>
-                  {search && (searchString(search, item.value) && ! searchString(search, item.value_pretty)) && (
-                    <span className="vsm-value-note">* {str("see_raw_value")}</span>
-                  )}
-                </>
-              ) : (
-                <div className="vsm-value_type_plain">
-                  {item.value === null ? (
-                    <span className="vsm-null">null</span>
-                  ) : (
-                    <>
-                      <Quote />
-                      <CellContent value={item.value} search={search} />
-                      <Quote />
-                    </>
-                  )}
-                </div>
-              )}
+                )}
+              </Spoiler>
             </td>
 
           </tr>

diff --git a/assets/js/components/tables/MetaTable.js b/assets/js/components/tables/MetaTable.js
@@ -1,12 +1,14 @@
 import React, { useState } from "react";
 
+import { Spoiler } from "./Spoiler";
 import { SortingArrow } from "./SortingArrow";
 import { ToggleButton } from "./ToggleButton";
 import { CellContent } from "./CellContent";
 import { Quote } from "./Quote";
 import { str } from "../../utils/i18n";
 import { searchString } from "../../utils/strings";
 import { dynamicSort } from "../../utils/sorting";
+import { SPOILER_MIN_LENGTH } from "../../constants";
 
 export const MetaTable = ({ fieldsData, search }) => {
   const [ ui, setUI ] = useState({
@@ -144,28 +146,30 @@ export const MetaTable = ({ fieldsData, search }) => {
             </td>
 
             <td className="vsm-table__column vsm-table__column_type_td vsm-table__column_content_value">
-              {valueType === "pretty" ? (
-                <>
-                  <div className="vsm-value_type_pretty">
-                    <CellContent value={item.value_pretty} search={search} />
+              <Spoiler enabled={item?.value?.length >= SPOILER_MIN_LENGTH}>
+                {valueType === "pretty" ? (
+                  <>
+                    <div className="vsm-value_type_pretty">
+                      <CellContent value={item.value_pretty} search={search} />
+                    </div>
+                    {search && (searchString(search, item.value) && ! searchString(search, item.value_pretty)) && (
+                      <span className="vsm-value-note">* {str("see_raw_value")}</span>
+                    )}
+                  </>
+                ) : (
+                  <div className="vsm-value_type_plain">
+                    {item.value === null ? (
+                      <span className="vsm-null">null</span>
+                    ) : (
+                      <>
+                        <Quote />
+                        <CellContent value={item.value} search={search} />
+                        <Quote />
+                      </>
+                    )}
                   </div>
-                  {search && (searchString(search, item.value) && ! searchString(search, item.value_pretty)) && (
-                    <span className="vsm-value-note">* {str("see_raw_value")}</span>
-                  )}
-                </>
-              ) : (
-                <div className="vsm-value_type_plain">
-                  {item.value === null ? (
-                    <span className="vsm-null">null</span>
-                  ) : (
-                    <>
-                      <Quote />
-                      <CellContent value={item.value} search={search} />
-                      <Quote />
-                    </>
-                  )}
-                </div>
-              )}
+                )}
+              </Spoiler>
             </td>
           </tr>
         );

diff --git a/assets/js/components/tables/Spoiler.js b/assets/js/components/tables/Spoiler.js
@@ -0,0 +1,43 @@
+import React, { useState } from "react";
+import classNames from "classnames";
+
+import { str } from "../../utils/i18n";
+
+export const Spoiler = ({children, enabled = false}) => {
+  if (! enabled) return children;
+
+  const [opened, setOpened] = useState(false);
+
+  const open = () => {
+    console.log("open", opened);
+    ! opened && setOpened(true)
+  };
+  const close = () => {
+    console.log("close", opened);
+    opened && setOpened(false);
+  }
+
+  const limiterClasses = ! opened ? ["vsm-spoiler__limiter"] : [];
+
+  return (
+    <div className="vsm-spoiler">
+      {opened && <ToggleButton type="top" onClick={close} />}
+
+      <div className={classNames(limiterClasses)} onClick={open}>
+        {! opened && <div className="vsm-spoiler__overflow" />}
+        {children}
+      </div>
+
+      {opened && <ToggleButton type="bottom" onClick={close} />}
+    </div>
+  );
+};
+
+const ToggleButton = ({ type, onClick }) => {
+  const classes = classNames([
+    "vsm-spoiler__button",
+    `vsm-spoiler__button--${type}`
+  ]);
+
+  return <div className={classes} onClick={onClick}>{str("close")}</div>;
+};
diff --git a/assets/js/constants.js b/assets/js/constants.js
@@ -2,3 +2,4 @@
 export const LS_TTL = 60 * 60 * 24;
 
 export const CONSOLE_PREFIX = "[Entity viewer]";
+export const SPOILER_MIN_LENGTH = 500;
diff --git a/assets/styles/main.scss b/assets/styles/main.scss
@@ -267,3 +267,56 @@
         background-color:#e2f9de;
     }
 }
+
+// Wrapper component (for toggleable values in tables)
+.vsm-spoiler {
+    position: relative;
+
+    &__limiter {
+        height: 100px;
+        position: relative;
+        overflow: hidden;
+        cursor: pointer;
+    }
+
+    &__overflow {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+
+        /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0+0,1+100,1+100 */
+        background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); /* FF3.6-15 */
+        background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
+        background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
+    }
+
+    &__button {
+        position: relative;
+        border-radius: 3px;
+        border: 1px solid #777;
+        padding: 5px 0;
+
+        color: #333;
+        text-align: center;
+        line-height: 1;
+        //background-color: #9ec5e577;
+
+        cursor: pointer;
+        user-select: none;
+
+        &--top {
+            //margin: -5px 0 7px 0;
+            margin: 0 0 7px 0;
+            left: 0;
+            top: 0;
+        }
+
+        &--bottom {
+            //margin: 7px 0 -5px 0;
+            margin: 7px 0 0 0;
+            left: 0;
+            bottom: 0;
+        }
+    }
+}
diff --git a/src/Fixture/TestDataGenerator.php b/src/Fixture/TestDataGenerator.php
@@ -58,11 +58,23 @@ public static function generate(): void
         $posts = [
             [
                 'post_type' => 'post',
-                'post_title' => 'Test Post - multiple serialized values',
+                'post_title' => 'Test Post - Multiple serialized values',
                 'post_status' => 'publish',
                 'post_author' => $default_user_id,
+                'post_content' => '...',
                 'meta_input' => $meta_fields,
             ],
+            [
+                'post_type' => 'post',
+                'post_title' => 'Test Post - Spoilers testing',
+                'post_status' => 'publish',
+                'post_author' => $default_user_id,
+                'post_content' => implode(',', range(0,1000)),
+                'meta_input' => array_merge($meta_fields, [
+                    'ev-large-field' => implode(',', range(0,1000)),
+                    'ev-large-field-serialized' => array_fill(0, 20, implode(',', range(0,100))),
+                ]),
+            ],
         ];
 
         foreach ($posts as $post) {

diff --git a/src/inc/logic.php b/src/inc/logic.php
@@ -46,6 +46,7 @@ function show_metabox(object $item): void
                 'fields_not_found_for_search_query' => esc_html__('There are no meta fields for this search query.', 'entity-viewer'),
                 'see_raw_value' => esc_html__('see the raw value for search results', 'entity-viewer'),
                 'error' => esc_html__('Error', 'entity-viewer'),
+                'close' => esc_html__('Close', 'entity-viewer'),
             ],
         ],
         'metabox' => [
Original file line number	Diff line number	Diff line change
Expand Up		@@ -2,3 +2,4 @@
		export const LS_TTL = 60 * 60 * 24;

		export const CONSOLE_PREFIX = "[Entity viewer]";
		export const SPOILER_MIN_LENGTH = 500;