Posicionamento inicial das modais

Suporte
1

Olá!

Gostaria de saber se é possível controlar a posição em que uma modal será aberta na tela, como no exemplo abaixo, em que seria necessário que a modal abrisse no local do retângulo cinza, e não centralizada na tela.

Group 1
Group 11911×845 147 KB

2 curtidas
2

Olá, @Camile!

A abertura ocorre clicando no botão da coluna ou no botão da consulta?

Independente de qual for, nativamente na plataforma não é possível reposicionar essa tela. Porém podemos pensar em uma forma de efetuar essa movimentação inserindo código Javascript

3

A abertura ocorre pelo botão da consulta

4

Bom dia @Camile,

Uma solução possível é adicionar o seguinte código no Javascript Público:

function moveWindowElement(left, top, className='canMove', level=1) {
    const identifier = `div[data-level="${level}"], .RadWindow`;

    var elementToMove = document.querySelector(identifier);

    if (elementToMove && document.querySelector(`.${className}`)) {
        if (left)
            elementToMove.style.left = `${left}px`;
    
        if (top)
            elementToMove.style.top = `${top}px`;

        return true;
    }

    return false;
}

//// Exemplo de uso:
//// 1. Verificação continua
//setInterval(function () {
//    moveWindowElement(200, 150);
//}, 1000);
////
//// 2. Captura de evento clique
//document.addEventListener('click', function(e) {
//    if (e.target.closest('.canMove'))
//    {
//        // caso queira pegar a posição do clique pode usar e.clientX e e.clientY
//        var clickInterval = setInterval(function () {
//            if (moveWindowElement(200, 150))
//            {
//                clearInterval(clickInterval);
//                clickInterval = null;
//            }
//        }, 1000);
//    }
//});

E na tua consulta que irá usar o código adicione uma classe CSS chamada canMove

5

Ótimo! Testei e funciona.
Você saberia me dizer se é possível vincular essa função a uma modal específica? Minha consulta possui vários botões que abrem diferentes telas, mas apenas uma dessas janelas precisa desse comportamento.

6

Olá, @Camile!

Fiz uma atualização na função principal para capturar os elementos de forma especifica. Segue abaixo o novo código:

function moveWindowElement(left=0, top=0, className='canMove', level=1, clickElementOrigin=null) {
    function _movePosition(element, left, top) {
        if (left)
            element.style.left = `${left}px`;

        if (top)
            element.style.top = `${top}px`;
    }

    const identifier = `div[data-level="${level}"], .RadWindow`;
    const identifierCmdBar = '.qdsb-cmdBarCustom';

    const prefixElement = /cmdIndex_(?<index>[0-9]+)/g;
    const prefixMoveInX = /moveToX_(?<posX>[0-9]+)/g;
    const prefixMoveInY = /moveToY_(?<posY>[0-9]+)/g;

    var parentElement = document.querySelector(`.${className}`);
    var elementToMove = document.querySelector(identifier);

    if (elementToMove && parentElement) {
        var childrens = parentElement.querySelector(identifierCmdBar).children;
        var indexs = parentElement.className.matchAll(prefixElement).map(mts => parseInt(mts.groups.index)).toArray();
        var posX = parentElement.className.matchAll(prefixMoveInX).map(mts => parseInt(mts.groups.posX)).toArray();
        var posY = parentElement.className.matchAll(prefixMoveInY).map(mts => parseInt(mts.groups.posY)).toArray();

        if (indexs.length > 0) { // Move apenas os elementos filhos que tenham os índices informados nos paramêtros
            for (var index = 0; index < indexs.length; index++) {
                var childIndex = indexs[index];
                var childElement = childrens[childIndex];

                if (childElement == clickElementOrigin)
                    _movePosition(elementToMove, posX[index], posY[index]);
            }
        }
        else { // Move qualquer elemento que tenha a classe informada nos paramêtros
            _movePosition(elementToMove, left, top);
        }

        return true;
    }
    
    return false;
}

document.addEventListener('click', function(e) {
    if (e.target.closest('.canMove'))
    {
        var clickedElement = e.currentTarget.activeElement;
        // caso queira pegar a posição do clique pode usar e.clientX e e.clientY
        var clickInterval = setInterval(function () {
            if (moveWindowElement(undefined, undefined, undefined, undefined, clickedElement))
            {
                clearInterval(clickInterval);
                clickInterval = null;
                clickedElement = null;
            }
        }, 1000);
    }
});

Visando facilitar a implementação segue alguns exemplos de uso do código informado.

Anteriormente era necessário informar somente uma classe na consulta para o código identificar como deve reposicionar.
Exemplo:

canMove

Agora, foi incluído mais três classes que apoiam na identificação e movimentação das telas, sendo elas:

  • cmdIndex_{SUBSTITUA_PELA_POSIÇÃO}: Classe usada para identificar quais botões irão mover a tela de abertura. Pode ser repetido
  • moveToX_{SUBSTITUA_PELA_POSIÇÃO}: Classe usada para definir para onde, no eixo X, a tela deve se mover. Pode ser repetido
  • moveToY_{SUBSTITUA_PELA_POSIÇÃO}: Classe usada para definir para onde, no eixo Y, a tela deve se mover. Pode ser repetido

Obs.: as classes ‘moveToX’ e ‘moveToY’ só serão usadas, quando houver a classe ‘cmdIndex’. Sendo que, cada ‘cmdIndex’ deve conter um ‘moveToX’ e/ou ‘moveToY’.

  • Exemplo de implementação única:
canMove cmdIndex_0 moveToX_100 moveToY_100
  • Exemplo de implementação múltiplas:
canMove cmdIndex_0 moveToX_100 moveToY_100 cmdIndex_1 moveToX_200 moveToX_100
1 curtida