arcanus55 / neodigm55 Goto Github PK

Opening a new soda pop from within an existing popup should close the first popup. This should be the behavior for both declarative and autoopen.

We are seeing increased usage of this method in conjunction with other experiences, such as confetti. This makes the default event audio (error sound) off putting. While it is true that this audio can be configured with the neodigmOpt.EVENT_SOUNDS option, this impacts the entire instance. We should allow the shake() syntax to accept an event audio toggle to allow for config within each call.

Reproduce: Open an page with a carousel component. Navigate to any card then resize the browser. Init is firing and the cards are being resized correctly, but the current page needs to be centered.

This would allow advanced users access to UX artifacts that otherwise would be hidden.

Technical Debt

Update, logo, type, hero, parallax, and cheatsheet infographic.
Canvas particle animation | Hero and Parallax

Update this task with the attribute contract. Should support night and day theming, xsmall-xlarge, and flash theming.

https://github.com/arcanus55/neodigm55/wiki/Neodigm-55-Declarative-Attributes-API

On by default, non-breaking. data-n55-enchanted-cta-hover-an="true|false".

The landing page has been updated.

The user agent preference for motion should inform the animation logic throughout. This is a top level state such as PWA install availability and such.

Refactoring the animation logic may be a work in progress, but the global state should be done in this task.

Version 2.4 is released today. This version in now available from the CDN, optionally minified.

Version 2.5 is now the alpha release.

The restore theme logic should animate. So, not really round-robin, more visually progressive.

The init method should remove all setInterval instances. When Metronome is init after page load (popup open callback) it creates a new emitter, without regard for existing instances.

This is a small issue but should be fixed.

Currently the init() method does unsubscribe without memory leaks, but it wipes out all subscriptions.

Document the generic code required to embed a widget on a site.

Added to roadmap. Will exist behind a feature flag. See description and usage in Wiki.

When a CTA button has a theme of disabled:

1. It should appear gray
2. It should not fire hover animation
3. it should not fire ambient animation
4. it should not be touchable (exclude)
5. it should not fire hover or click audio
6. it should not fire a declarative Soda Pop
7. it should not fire a declarative Toast

Technical Debt

Seems to stop before it reaches its target. Also, may be related but will not go to zero.

This logic should remove all functions assigned to an interval and perform a targeted clearInterval.

Also, vibration should have a global feature flag.

Use a P element to embed SPANS. May need some scoped reset CSS.

This should allow for multiple colors (themes) on the marquee.

Enhanced CTA Buttons
These buttons command your attention and have a mind of their own. The circadian rhythms of arousal and rest make the buttons organic and life-like. They speak to you.

The marquee needs to re-init when it is done (after 4 seconds). Until this is fixed the best work around is to remove the data-n55-enchanted-cta-alt attribute.

Create a WIKI recipe describing how to add the framework in a modern WP (PHP) blog / website.

The Span, neodigm-marquee, or pre element is canceling the event, making it impossible to follow the A href.

Space like - other worldly - svg - generative - subscribe to AMPM (light dark mode)

A Popover (Neodigm Poptart) is a transient view that shows on a content screen when a user clicks or hovers a button or within any defined area.

Update Notes:

• This feature-flag is OFF for the time being, however it is ON in INDEX.HTML
• The "universal template" now exists in every page load. This is the static markup that is injected into the DOM, like Toast and scrim. NOT USED

1. A Poptart is singleton
2. A Poptart maintains its state even when not visible (reopened)
3. A Poptart is never modal
4. A Poptart can be actuated declaratively or by API ( autoOpen ) within ANY viewport 👁️
5. A Poptart closes upon click/tap outside, escape key, or explicit neodigmPoptart.close()
6. A Poptart has life-cycle events ( setOnBeforeOpen setOnAfterOpen setOnClose )
7. A Poptart can exist inside a Soda Pop and/or Carousel
8. A Carousel, Tulip, and Parallax can exist inside a Poptart
9. A Poptart is X Y Z H (auto Y scroll) W fixed
10. A Poptart's width and coordinates may be inherited from it's bound actuator component
11. A Poptart's theme can be explicitly defined or inherited from it's actuating (bound) component (flash theme may take precedence)
12. A Poptart animates on / off /w event audio 👁️
13. All Poptart functionality may be paused indefinitely or for a finite amount of time ( neodigmPoptart.pause( 1000 ) )
14. A Poptart supports custom Adobe analytics / Google analytics dataLayer ( N55_GTM_DL_POPTRT )
15. A Poptart supports Dark / Light mode (ampm) background & border
16. A Poptart cannot be disabled but will not be opened if its bound component is disabled
17. A Poptart will not be visible when printing
18. A Poptart may render an arrow pointing at its bound component ( "arrow":true )👁️
19. A Poptart z-index is soft coded and configurable ( N55_ZIND )

BOUND ACTUATOR
data-n55-poptart-hover="neodigm-template id"
data-n55-poptart-click="neodigm-template id"
neodigmPoptart.autoOpen("neodigm-template id", "target selector");

NEODIGM-TEMPLATE
data-n55-poptart='{"x": 176, "y": 176, "z": 176, "h": 176, "w": 176, "position":"top|right|bottom|left", "arrow":false, "offset":{"x":0,"y":0,"w":-16}}}'

CTA with Marquee:

Find a way to pause the marquee / metronome when the button is not in hover state.

A standard progressively disclosed button (sodapop or carousel) link to the Neodigm 55 home page (TSK) with a search param (poweredby=neodigm55).

Update wiki recipe, index.html, and ROI calc prototype.

Adding a neodigm-icon element within the button text should display an inline icon.

Create a wiki recipe.

This is a non-breaking change. Adding the id of a SodaPop template to any of the SetEvent functions will cause that function to fire on that event only when that template is being actuated.

Not providing an id, will cause the function to fire on all templates (as it does now). This is now known as the DEFAULT function.

If a default function exists it will fire after the named function. So they will both fire, is the point.

Need to add one or more recipes in the wiki.

Currently all Parallax are off on Mobile. Make it so they can be turned on for mobile devices, however the default should be off.

It would be nice if we could get this working on iphones.

1. Standard interface (play and pause)
2. Expose number in Q (countQ)
3. Make conditional Q (q_if_empty)
4. Remember Theme

The circle X should not show when printing (while a popup is open). Also Toast should not print.

We've been talking about some life cycle hooks for this component. Until then, lets expose the current page give the id of the instance.

Returns an integer greater than zero.

SodaPop Scrim not blurred on Firefox

Increase height. Make color linear gradient (themed). Also consider speeding up (5.2s).

This may be a breaking change for implementations that have custom CSS overrides (toast specific). The fix would be to override the progress bar CSS. If so, update Wiki (overrides article).

Create a config toggle that turns off/on sounds built into the framework events, such as Soda Pop open and close.
Each implementation should be able to have sound turned on, but have framework sounds turned off.
The default should be ON.

The custom config object should allow for a subset of the library config object. The transfer from custom should be on a per properties basis. Currently all properties must exist in the custom object, however it should work if only one exists.

This is difficult to reproduce; You would need to fire autoOpen from the console, providing it the id of a template configured as fullscreen, then close that popup. The real life use case is when a fullscreen popup is actuated from the URL querystring.

While parallax is turned OFF by default on mobile, it is possible to turn it on. Do this with caution because it will not work properly on an iPhone. This is a known Safari issue. If we can find a graceful compromise, thats cool, but we will not be doing the "if safari" thing.

Map the Enter key and the Escape key to two CTA buttons.

Steps to reproduce:

• Open any modal popup
• Close it
• Open any non-modal popup
• The Close X is missing

Refactor existing