restored reveal animations.

4 files changed, 47 insertions, 20 deletions

diff --git a/package-lock.json b/package-lock.json
index f0f65919b..0ebba74e1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -164,6 +164,7 @@
                 "rc-switch": "^4.1.0",
                 "react": "^18.2.0",
                 "react-autosuggest": "^10.1.0",
+                "react-awesome-reveal": "^4.2.7",
                 "react-color": "^2.19.3",
                 "react-compound-slider": "^3.4.0",
                 "react-datepicker": "^4.24.0",
@@ -29699,6 +29700,29 @@
                 "react": ">=16.3.0"
             }
         },
+        "node_modules/react-awesome-reveal": {
+            "version": "4.2.7",
+            "resolved": "https://registry.npmjs.org/react-awesome-reveal/-/react-awesome-reveal-4.2.7.tgz",
+            "integrity": "sha512-5vETORNz6df0+N+RdPlInw73WBeccfFh73JamnhfbQWwcqCmdeL0Ap5pX9RyRlTMdag5yXAH+FWN8qrnIsyWVA==",
+            "funding": [
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/morellodev"
+                },
+                {
+                    "type": "opencollective",
+                    "url": "https://opencollective.com/react-awesome-reveal"
+                }
+            ],
+            "dependencies": {
+                "react-intersection-observer": "^9.5.3",
+                "react-is": "^18.2.0"
+            },
+            "peerDependencies": {
+                "@emotion/react": "^11.0.0",
+                "react": ">=16.14.0"
+            }
+        },
         "node_modules/react-color": {
             "version": "2.19.3",
             "resolved": "https://registry.npmjs.org/react-color/-/react-color-2.19.3.tgz",
@@ -29822,6 +29846,14 @@
                 "react": "*"
             }
         },
+        "node_modules/react-intersection-observer": {
+            "version": "9.5.3",
+            "resolved": "https://registry.npmjs.org/react-intersection-observer/-/react-intersection-observer-9.5.3.tgz",
+            "integrity": "sha512-NJzagSdUPS5rPhaLsHXYeJbsvdpbJwL6yCHtMk91hc0ufQ2BnXis+0QQ9NBh6n9n+Q3OyjR6OQLShYbaNBkThQ==",
+            "peerDependencies": {
+                "react": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
+            }
+        },
         "node_modules/react-is": {
             "version": "18.2.0",
             "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz",
diff --git a/package.json b/package.json
index 97b50efad..127091e2d 100644
--- a/package.json
+++ b/package.json
@@ -248,6 +248,7 @@
         "rc-switch": "^4.1.0",
         "react": "^18.2.0",
         "react-autosuggest": "^10.1.0",
+        "react-awesome-reveal": "^4.2.7",
         "react-color": "^2.19.3",
         "react-compound-slider": "^3.4.0",
         "react-datepicker": "^4.24.0",
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index a05ea3390..2d5f68a69 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -3,7 +3,7 @@ import { Dropdown, DropdownType, Type } from 'browndash-components';
 import { IReactionDisposer, action, computed, makeObservable, observable, reaction, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import { computedFn } from 'mobx-utils';
-// import { Bounce, Fade, Flip, LightSpeed, Roll, Rotate, Zoom } from 'react-reveal';
+import { Bounce, Fade, Flip, JackInTheBox, Roll, Rotate, Zoom } from 'react-awesome-reveal';
 import * as React from 'react';
 import { Utils, emptyFunction, isTargetChildOf as isParentOf, lightOrDark, returnEmptyString, returnFalse, returnTrue, returnVal, simulateMouseClick } from '../../../Utils';
 import { Doc, DocListCast, Field, Opt, StrListCast } from '../../../fields/Doc';
@@ -1264,13 +1264,13 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
         switch (StrCast(presEffectDoc?.presentation_effect, StrCast(presEffectDoc?.followLinkAnimEffect))) {
             default: 
             case PresEffect.None:       return renderDoc;
-            // case PresEffect.Zoom:       return <Zoom {...effectProps}>{renderDoc}</Zoom>;
-            // case PresEffect.Fade:       return <Fade {...effectProps}>{renderDoc}</Fade>;
-            // case PresEffect.Flip:       return <Flip {...effectProps}>{renderDoc}</Flip>;
-            // case PresEffect.Rotate:     return <Rotate {...effectProps}>{renderDoc}</Rotate>;
-            // case PresEffect.Bounce:     return <Bounce {...effectProps}>{renderDoc}</Bounce>;
-            // case PresEffect.Roll:       return <Roll {...effectProps}>{renderDoc}</Roll>;
-            // case PresEffect.Lightspeed: return <LightSpeed {...effectProps}>{renderDoc}</LightSpeed>;
+            case PresEffect.Zoom:       return <Zoom {...effectProps}>{renderDoc}</Zoom>;
+            case PresEffect.Fade:       return <Fade {...effectProps}>{renderDoc}</Fade>;
+            case PresEffect.Flip:       return <Flip {...effectProps}>{renderDoc}</Flip>;
+            case PresEffect.Rotate:     return <Rotate {...effectProps}>{renderDoc}</Rotate>;
+            case PresEffect.Bounce:     return <Bounce {...effectProps}>{renderDoc}</Bounce>;
+            case PresEffect.Roll:       return <Roll {...effectProps}>{renderDoc}</Roll>;
+            case PresEffect.Lightspeed: return <JackInTheBox {...effectProps}>{renderDoc}</JackInTheBox>;
         }
     }
     @computed get highlighting() {
diff --git a/src/client/views/nodes/trails/PresBox.tsx b/src/client/views/nodes/trails/PresBox.tsx
index 17993d88e..e213b2fc5 100644
--- a/src/client/views/nodes/trails/PresBox.tsx
+++ b/src/client/views/nodes/trails/PresBox.tsx
@@ -1671,12 +1671,9 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                                 className={'presBox-dropdownOptions'}
                                 style={{ display: this._openBulletEffectDropdown ? 'grid' : 'none', color: SettingsManager.userColor, background: SettingsManager.userBackgroundColor }}
                                 onPointerDown={e => e.stopPropagation()}>
-                                {bulletEffect(PresEffect.None)}
-                                {bulletEffect(PresEffect.Fade)}
-                                {bulletEffect(PresEffect.Flip)}
-                                {bulletEffect(PresEffect.Rotate)}
-                                {bulletEffect(PresEffect.Bounce)}
-                                {bulletEffect(PresEffect.Roll)}
+                                {Object.values(PresEffect)
+                                    .filter(v => isNaN(Number(v)))
+                                    .map(effect => bulletEffect(effect))}
                             </div>
                         </div>
                     </div>
@@ -1840,12 +1837,9 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                                     display: this._openEffectDropdown ? 'grid' : 'none',
                                 }}
                                 onPointerDown={e => e.stopPropagation()}>
-                                {preseEffect(PresEffect.None)}
-                                {preseEffect(PresEffect.Fade)}
-                                {preseEffect(PresEffect.Flip)}
-                                {preseEffect(PresEffect.Rotate)}
-                                {preseEffect(PresEffect.Bounce)}
-                                {preseEffect(PresEffect.Roll)}
+                                {Object.values(PresEffect)
+                                    .filter(v => isNaN(Number(v)))
+                                    .map(effect => preseEffect(effect))}
                             </div>
                         </div>
                         <div className="ribbon-doubleButton" style={{ display: effect === PresEffectDirection.None ? 'none' : 'inline-flex' }}>