Window Panel Model

#demonstração: ###demonstração mult-panel drag, resize, minimize, close, focus ###demonstração onclickOut: 'minimize', permitindo somente 1 panel aberto

#Instalação:

via npm window-panel-model

npm install window-panel-model

via cdnjs:

• baixe esta biblioteca e inclua-o no seu projeto os seguintes arquivos

<!-- Lembre-se de incluir jQuery :) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>

<!-- jQuery Window Panel Modal -->
<script src="./panel.min.js"></script> <!-- seu caminho para o panel.min.js-->
<link rel="stylesheet" href="./panel.min.css" /> <!-- seu caminho para o panel.min.css-->

Abrindo a janela

$('#button').panel();

Elemento target

a janela abre com animação partindo de um target. O elemento target será o elemento que chamar o panel(). Nesse exemplo acima, será o nosso botão com id = button. É possível ainda definir um atributo target diferente dentro dos parâmetros do nosso panel().

• Veja abaixo um exemplo:

$('html').panel({
    target: $("#button")
});

perceba que foi necessário mandarmos o elemento como target, e não uma referência ao seu id, ou class

#Identificação da Janela nossa janela precisa ser única, e por isso é gerado um id de identificação da janela. o id é gerado de forma aleatória com números que variam de 0 a 10000000. De todo modo, se você precisar manipular esse id, é necessário fornecer seu próprio atributo id.

• Observe o modelo abaixo:

$('#button').panel({
    id: 'id-da-minha-janela-de-post'
});

#Header Cabeçalho da janela, podemos nomear nossa janela aqui, e atribuir estilo, basta colocarmos o atributo header.

• vejamos abaixo:

$('#button').panel({
    header: {
        html: 'Minha Janela',
        css: {
            background: 'cyan'
        }
    }
});

o header.html é o nome da sua janela, e serve para identificação do usuário ao utilizar mais que uma janela. Ao minimizar uma janela, somente este título ficará a amostra para identificação. O html do header tem por padrão largura de 140px, tendo espaço para cerca de 18 caracteres. Para alterar este tamanho, modifique no panel.css

#Conteúdo da Janela Para controlar o conteúdo da janela, é preciso atacarmos o atributo body. Onde é possível determinarmos seu conteúdo (html) e seu estilo (css).

• Veja o exemplo abaixo

###Exemplo de aplicação de estilo:

$('#button').panel({
    body: {
        html: '<div><h2>Corpo da janela</h2></div>', 
        css: {
            'padding': '20px',
            'font-size': '1.3em'
        }
    }
});

#Estilo da Janela Para modificar o estilo da janela, basta utilizar-mos o atributo css.

• Veja abaixo

$('#button').panel({
    css: {
        'background': '#EEEEEE', 
        'color': 'darkcyan',
        'opacity': 0.8
    }
});

#Atributos da Janela Também é possível definir nossos atributos da janela através do atributo attr, para definição de qualquer atributo suportado pelo html.

• Veja um exemplo

$('#button').panel({
    attr: {
        title: 'Olá, eu sou o title da janela',
        class: 'minhaClasse outraClasse',
        'data-alguma-coisa': 'guarde algo útil para controle'
    }
});

#Botões de Cabeçalho da Janela por padrão, a janela inicia com 3 botões, o de minimizar, maximizar e fechar. É possível determinar quais botões você quer para sua janela. Para isso, iremos atacar o atributo control.

control.close:

• Descrição: Fecha a janela permanentemente, excluíndo todos os dados da janela.
• Valor Padrão: true,
• Valores Aceitos: true, false, 1, 0.

control.maximize:

• Descrição: Coloca a janela em tamanho máximo do site. Dando total foco a essa janela
• Valor Padrão: true,
• Valores Aceitos: false, true, 1, 0.

control.minimize:

• Descrição: Minimiza a janela tirando o foco dela, a janela fica no final do site fixado, com tamanho mínimo.
• Valor Padrão: true,
• Valores Aceitos: false, true, 1, 0.

Confira este exemplo abaixo:

$("#button").panel({
    control: {
        minimize: false,
        maximize: false,
        close: true // não precisa informar o close, pois o valor padrão já é true
    }
});

#Gatilho dos Botões Para definirmos outras ações extras para serem executadas ao clicar em close, minimize ou maximize. Basta atacarmos o atributo control com os valores onClose, onMinimize, onMaximize.

control.onClose:

• Descrição: Executa uma ação ao fechar a janela.
• Valor Padrão: null,
• Valores Aceitos: function()

control.onMinimize:

• Descrição: Executa uma ação ao minimizar a janela.
• Valor Padrão: null,
• Valores Aceitos: function()

control.onMaximize:

• Descrição: Executa uma ação ao maximizar a janela.
• Valor Padrão: null,
• Valores Aceitos: function()

Veja um exemplo

$("#button").panel({
    control: {
        maximize: false, //remove o botão maximize, conforme vimos no exemplo anterior
        onMinimize: function() {
          alert('ok'); //dispara um alert quando clicado em minimize
          return true; //cancela a função padrão de minimizar.
        },
        onClose: minhaFuncaoClose() //minha função declarada em outro local sendo chamada ao fechar a janela.
    }
});

percebam, que no exemplo acima, no atributo control.onMinimize, foi retornado true na função atribuída, isso irá cancelar a função padrão de minimizar a janela. Também é aplicável ao control.onClose e ao control.onMaximize

#Drag e Resize Para não permitir o drag (arrasto da janela), basta atacar o atributo control.drag, e para não permitir o resize da janela, basta atacar o atributo control.resize.

control.drag:

• Descrição: Define se a janela poderá ser movida (drag).
• Valor Padrão: true,
• Valores Aceitos: true, false, 1, 0.

control.resize:

• Descrição: Define se a janela poderá ser reajustada de tamanho (resize).
• Valor Padrão: true,
• Valores Aceitos: true, false, 1, 0.

Veja o exemplo

$("#button").panel({
    control: {
        drag: false,// não permite drag da janela
        resize: true // não precisa informar, pois o padrão já é true.
    }
});

#Gatilho Drag e Resize assim como os botões close, minimize e maximize, drag e resize também podem disparar funções. Porém somente irá disparar, ao finalizar a ação de drag, ou de resize. E não é possível cancelar a ação padrão, como nos botões close, minimize e maximize. Novamente atacamos nosso atributo control para alcançar os gatilhos.

control.onDrag:

• Descrição: Executa uma ação ao finalizar a ação de drag.
• Valor Padrão: null,
• Valores Aceitos: function()

control.onResize:

• Descrição: Executa uma ação ao finalizar a ação de resize.
• Valor Padrão: null,
• Valores Aceitos: function()

Veja a aplicação do drag e resize abaixo

$("#button").panel({
    control: {
        onDrag: function() {
            console.log("você moveu a janela");
        },
        onResize: minhaFuncaoResize()
    }
});

Efeitos

para controlar alguns efeitos, utilizamos o atributo control.

control.blur:

• Descrição: Deixa os elementos dentro do body ofuscados, com excessão das janelas.
• Valor Padrão: true,
• Valores Aceitos: true, false, 1, 0.

control.speed:

• Descrição: controla velocidade das transições entre ações em segundos.
• Valor Padrão: 0.25,
• Valores Aceitos: 0.01 ~ 10

control.clickOut:

• Descrição: executa ação de fechamento ao clicar fora da janela quando for true. Minimiza janela quando valor for 'minimize'
• Valor Padrão: false,
• Valores Aceitos: false, true, 'minimize'

Confira um exemplo de aplicação do controle de efeitos

$('#button').panel({
    control: {
        blur: false, //remove efeito de blur do fundo
        speed: 0.01, //para remover transição.
        clickOut: 'minimize' // minimaliza janela se clicar fora dela.
    }
});

#Exemplo Completo

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="./panel.min.js"></script>
<link rel="stylesheet" href="./panel.min.css" />

<button id="btnWin">Janela</button>

<sctipt>
    $("#btnWin").panel({
        header: { // cabeçalho da janela
            html: 'Demo Janela',
            css: {
                background: 'tomato'
            }
        },
        body: { // conteúdo da janela
            html: '<h2>Conteúdo da janela</h2>',
            css: {
                background: '#EEEEEE',
                padding: '15px 30px'
            }
        },
        css: {//janela estilo
            width: '400px', //inicia com 400px largura
            height: '500px', //inicia com 500px de altura
            left: '300px' //inicia com 300px da esquerda
            // top é deixado no padrão, pois não foi definido
        }
        control: { //controle
            resize: false,
            speed: 0.5,
            clickOut: 'minimize',
            onClose: function() {
                $('html').panel({
                    header: {
                        html: 'Fechamento'
                    },
                    body: {
                        html: '<b> Obrigado por usar</b>',
                        css: {
                            padding: '20px',
                            'text-align': 'center',
                            'font-size': '3em'
                        }
                    },
                    control: {
                        clickOut: true
                    }
                });
            }
        }
    });
</sctipt>

Autor

• Desenvolvedor: Edinei J. Bauer
• Email: [email protected]

#Bugs? Encontrou um bug? Reporte! Isso é um software livre e precisa de ajuda.

Contribuição

Qualquer melhoria do código, seja para redução do código, implementação de funções extras ou melhoria do desempenho, vair ser bem-vinda,

• Aguardo sua sugestão.