New component - Notification / Pop-up

[Ajotah98]

Hi everyone,

I started bulding a new component that I guess it's useful on some situations, just a notification/alert/pop-up on bottom-right:

And here is the code:
-- pop-up.handlebars

<div class="popup-container position-fixed bottom-0 end-0 p-3" style="z-index: 1030; max-width: 500px;">
    <div class="popup bg-white shadow rounded d-flex flex-column">
        <div class="d-flex justify-content-between align-items-center p-2">
            {{#if title}}
            <div class="popup-title fw-bold">{{title}}</div>
            {{/if}}
            <button type="button" class="btn-close" aria-label="Cerrar" onclick="closePopup()"></button>
        </div>
        <div class="popup-content p-3">
            {{#if description_md}}
                {{{markdown description_md}}}
            {{/if}}
        </div>
    </div>
</div>

By now, I have a problem. Well, two at least:

• First of all, I need to use JavaScript to fade the notification. But if I use it INSIDE the Handlebars file, It won't work cause of CSP. Is there any form that we can do a working pop-up without including an external JS file on the shell?
• At last but not least, we have the "multi pop-up stacked". It just occurs when you have 2 pop-ups on the same time. They doesn't align, they just go one on top of the other. I don't know yet how to solve that without more JavaScript.

The JS Code:

document.addEventListener('DOMContentLoaded', function () {
    // Delegación de eventos para manejar el cierre del popup
    document.body.addEventListener('click', function(event) {
      if (event.target.matches('.btn-close')) {
        var popupContainer = document.querySelector('.popup-container');
        if (popupContainer) {
          popupContainer.style.transition = 'opacity 0.5s ease';
          popupContainer.style.opacity = '0';
          setTimeout(function() {
            popupContainer.remove();
          }, 500);
        }
      }
    });

    setTimeout(function() {
      var popupContainer = document.querySelector('.popup-container');
      if (popupContainer) {
        popupContainer.style.transition = 'opacity 0.5s ease';
        popupContainer.style.opacity = '0';
        setTimeout(function() {
          popupContainer.remove();
        }, 500);
      }
    }, 5000);
  });
  

And of course, the SQLPage file including it code:

select 
    'pop-up' as component,
    'Test 1' as title,
    'This is test, supporting [MarkDown](https://markdown.es/) 2' as description_md;

[lovasoa]

Hello !

This is an interesting feature, but I'm struggling to see how it would work. These kind of popups usually appear dynamically in user interfaces, but SQLPage is almost entirely statically rendered. In what case would it be useful for such a popup to already be present on page load ? Or do you have something else in mind for how to make the popup appear ?

Javascript is not included directly in components' template code (in order not to duplicate it when the component is used more than once). If you want to see how other components that have javascript handle it, you can have a look at sqlpage.js. If you don't want to upstream your component, you will have to create your own javascript file and include it using the shell's javascript property

[Ajotah98]

Yep,
I tried to search a funcionality for the component dinamically rendered but.... True, I don't get one by now.

I was trying also to load the pop-up directly passing the input to the same page (some like doing a POST to index.sql inside index.sql) or something, but I don't know how to return it.

[lovasoa]

What is the user flow you are thinking of? How does the application you are building work, and when does it need to notify users?

[handydba]

Found this discussion when searching for a way to handle a record status update using a popup dialog.
It's easy to do that using separate pages but that seemed like overkill when updating a single column in a row.
I'd looked at the html <dialog element but that seemed like a lot of work.
Then found HTMX and Hyperscript.
Shortly after that I had a modal dialog for the status update using a 'no-page' shell and other standard SQLPage components.
In essence the modal dialog is as simple as the HTMX modal example
The modal HTML fragment described in that link becomes a variation of the shell-empty described in the SQLPage shell component doc.

[ToniJ123]

Hi,

Is there any way getting this as native component for SQLpage? Or does the static rendering limit methods for working popup off?