Flash messages when user has scrolled down

[nomeata]

I like that IHP has this single-page-application feeling, and when the next view is similar to the current, the viewport doesn’t move.

But this is a problem with flash messages, which are visible at the top by default, so the user might get an error message and not even see it.

How do others fix this?

Is there maybe some simple CSS I throw at the problem to make the flash message appear, say, at the bottom of the viewport instead?

[mpscholten]

You could try attaching a js-scroll-into-view to the flash message

[unhammer]

I don't know if this is the best way, but I did this by modifying the cssFramework, e.g. with the default bootstrap

import IHP.FlashMessages.Types
import IHP.View.CSSFramework
import IHP.HSX.QQ (hsx)
import IHP.View.Types

myBootstrap = bootstrap { styledFlashMessage }
  where
    styledFlashMessage _ (SuccessFlashMessage message) = [hsx|<div class="alert alert-success js-scroll-into-view">{message}</div>|]
    styledFlashMessage _ (ErrorFlashMessage message)   = [hsx|<div class="alert alert-danger  js-scroll-into-view">{message}</div>|]

and then in Config.hs

config :: ConfigBuilder
config = do
    option myBootstrap

[mpscholten]

This is a good way to solve this 👍

[unhammer]

A better solution would actually be a "toast" style message, since users can find scrolling annoying when they're changing things back and forth. Is there anything like a dismissable toast popup already in the IHP styles?

[mpscholten]

Likely boostrap toasts could be used: https://getbootstrap.com/docs/4.6/components/toasts/

[amitaibu]

Here's my implementation using https://apvarun.github.io/toastify-js/ and Tailwind

npm install --save toastify-js

// app.js

$(document).on('ihp:load', () => {
    toastifyFlashMessage();
});

// Show flash messages using Toastify.
const toastifyFlashMessage = function () {
    // find the inline <script> tag with our flash data
    const flashScript = document.querySelector("script[data-flash-message]");
    if (!flashScript) {
        return;
    }

    const msg = flashScript.dataset.flashMessage;
    const type = flashScript.dataset.messageType;
    if (!msg) {
        return;
    }

    const bgMap = {
        success: "#4ade80",  // Tailwind green‑400
        error: "#f87171",  // Tailwind red‑400
    };
    const bg = bgMap[type] || bgMap.success;

    Toastify({
        text: msg,
        style: { background: bg },
        className: "text-white px-4 py-2 rounded shadow font-medium",
        duration: 4000,
        close: true
    }).showToast();
}

-- Layout.hs

stylesheets :: Html
stylesheets =
    [hsx|
        <link rel="stylesheet" href={assetPath "/vendor/flatpickr.min.css"}/>
        <link rel="stylesheet" href={assetPath "/vendor/toastify-js/toastify.css"} />
        <link rel="stylesheet" href={assetPath "/app.css"}/>
       -- ...
    |]

scripts :: Html
scripts =
    [hsx|
        {when isDevelopment devScripts}

        <script src={assetPath "/vendor/toastify-js/toastify.js"}></script>
       -- ...
    |]

-- CustomCSSFramework.hs

customTailwind :: CSSFramework
customTailwind =
    def
        { styledFlashMessage
        , styledTextFormField
        -- ...
        }
  where
    styledFlashMessage _ (SuccessFlashMessage message) = renderToastScript "success" message
    styledFlashMessage _ (ErrorFlashMessage message) = renderToastScript "error" message

renderToastScript :: Text -> Text -> Blaze.Html
renderToastScript messageType message =
    [hsx|
        <script
            data-flash-message={message}
            data-message-type={messageType}
        ></script>
    |]     

make npm to install, and move to dist

# Makefile

npm:
	npm install
	# Delete the existing /static/vendor directory
	rm -rf static/vendor
	# Loop through each dependency in package.json, and if a 'dist' directory exists
	# for the dependency, copy it to /static/vendor/.
	@node -e "const deps = require('./package.json').dependencies; for (let dep in deps) { console.log(dep); }" | \
	while read module; do \
		if [ -d "node_modules/$$module/dist" ]; then \
			mkdir -p static/vendor/$$module && cp -rf node_modules/$$module/dist/* static/vendor/$$module/; \
		fi; \
	done

	# Copy specific files from node_modules to /static/vendor
	mkdir -p static/vendor/toastify-js && cp -rf node_modules/toastify-js/src/toastify.* static/vendor/toastify-js/

[unhammer]

Nice! ❤️

[unhammer]

I have some minor modifications.

My version clears the dataset.flashMessage after reading it – this avoids duplicate toasts (which seems to happen when a redirect triggers two ihp:load events).

I also wanted support for multiple (different) messages:

const toastifyFlashMessage = function () {
  document.querySelectorAll("script[data-flash-message]").forEach(flashScript => {
    const text = flashScript.dataset.flashMessage;
    const type = flashScript.dataset.messageType;
    if (!text) {
      return;
    }
    flashScript.dataset.flashMessage = ""; // Avoid duplicate toasts (ihp:load can be called twice with redirects)
    const bgMap = {
      success: "#19a974",
      error:   "#721c24",
    };
    const background = bgMap[type] || bgMap.success;
    const durationMap = {
      success: 4000,
      error:   12345,
    };
    const duration = durationMap[type] || durationMap.success;
    Toastify({
      text,
      style: { background },
      className: "px-4 py-2 rounded shadow f4",
      duration,
      stopOnFocus: true,
      close: true
    }).showToast();
  });
}