[Resolvido] Modal personalizável

[João Arruda 0]

Não sei se alguém já postou algo desse tipo por aqui, mas gostaria de deixar a minha versão. :)

 

Andei pesquisando por algum tempo como eu poderia fazer uma janela modal com todas as propriedades (o quanto possível) de uma janela de verdade, mas com DHTML.

 

Achei um script bem interessante, útil e eficiente.

 

Este script faz o trabalho do "Drag n' Drop" que estamos acostumados a ver em tantos sites (obtido em http://www.dynamicdrive.com/):

var Drag = {

obj : null,

init : function(o, oRoot, minX, maxX, minY, maxY, bSwapHorzRef, bSwapVertRef, fXMapper, fYMapper)
{
	o.onmousedown	= Drag.start;

	o.hmode		= bSwapHorzRef ? false : true ;
	o.vmode		= bSwapVertRef ? false : true ;

	o.root = oRoot && oRoot != null ? oRoot : o ;

	if (o.hmode  && isNaN(parseInt(o.root.style.left  ))) o.root.style.left   = "0px";
	if (o.vmode  && isNaN(parseInt(o.root.style.top   ))) o.root.style.top    = "0px";
	if (!o.hmode && isNaN(parseInt(o.root.style.right ))) o.root.style.right  = "0px";
	if (!o.vmode && isNaN(parseInt(o.root.style.bottom))) o.root.style.bottom = "0px";

	o.minX	= typeof minX != 'undefined' ? minX : null;
	o.minY	= typeof minY != 'undefined' ? minY : null;
	o.maxX	= typeof maxX != 'undefined' ? maxX : null;
	o.maxY	= typeof maxY != 'undefined' ? maxY : null;

	o.xMapper = fXMapper ? fXMapper : null;
	o.yMapper = fYMapper ? fYMapper : null;

	o.root.onDragStart	= new Function();
	o.root.onDragEnd	= new Function();
	o.root.onDrag		= new Function();
},

start : function(e)
{
	var o = Drag.obj = this;
	e = Drag.fixE(e);
	var y = parseInt(o.vmode ? o.root.style.top  : o.root.style.bottom);
	var x = parseInt(o.hmode ? o.root.style.left : o.root.style.right );
	o.root.onDragStart(x, y);

	o.lastMouseX	= e.clientX;
	o.lastMouseY	= e.clientY;

	if (o.hmode) {
		if (o.minX != null)	o.minMouseX	= e.clientX - x + o.minX;
		if (o.maxX != null)	o.maxMouseX	= o.minMouseX + o.maxX - o.minX;
	} else {
		if (o.minX != null) o.maxMouseX = -o.minX + e.clientX + x;
		if (o.maxX != null) o.minMouseX = -o.maxX + e.clientX + x;
	}

	if (o.vmode) {
		if (o.minY != null)	o.minMouseY	= e.clientY - y + o.minY;
		if (o.maxY != null)	o.maxMouseY	= o.minMouseY + o.maxY - o.minY;
	} else {
		if (o.minY != null) o.maxMouseY = -o.minY + e.clientY + y;
		if (o.maxY != null) o.minMouseY = -o.maxY + e.clientY + y;
	}

	document.onmousemove	= Drag.drag;
	document.onmouseup	= Drag.end;

	return false;
},

drag : function(e)
{
	e = Drag.fixE(e);
	var o = Drag.obj;

	var ey	= e.clientY;
	var ex	= e.clientX;
	var y = parseInt(o.vmode ? o.root.style.top  : o.root.style.bottom);
	var x = parseInt(o.hmode ? o.root.style.left : o.root.style.right );
	var nx, ny;

	if (o.minX != null) ex = o.hmode ? Math.max(ex, o.minMouseX) : Math.min(ex, o.maxMouseX);
	if (o.maxX != null) ex = o.hmode ? Math.min(ex, o.maxMouseX) : Math.max(ex, o.minMouseX);
	if (o.minY != null) ey = o.vmode ? Math.max(ey, o.minMouseY) : Math.min(ey, o.maxMouseY);
	if (o.maxY != null) ey = o.vmode ? Math.min(ey, o.maxMouseY) : Math.max(ey, o.minMouseY);

	nx = x + ((ex - o.lastMouseX) * (o.hmode ? 1 : -1));
	ny = y + ((ey - o.lastMouseY) * (o.vmode ? 1 : -1));

	if (o.xMapper)		nx = o.xMapper(y)
	else if (o.yMapper)	ny = o.yMapper(x)

	Drag.obj.root.style[o.hmode ? "left" : "right"] = nx + "px";
	Drag.obj.root.style[o.vmode ? "top" : "bottom"] = ny + "px";
	Drag.obj.lastMouseX	= ex;
	Drag.obj.lastMouseY	= ey;

	Drag.obj.root.onDrag(nx, ny);
	return false;
},

end : function()
{
	document.onmousemove = null;
	document.onmouseup   = null;
	Drag.obj.root.onDragEnd(	parseInt(Drag.obj.root.style[Drag.obj.hmode ? "left" : "right"]), 
								parseInt(Drag.obj.root.style[Drag.obj.vmode ? "top" : "bottom"]));
	Drag.obj = null;
},

fixE : function(e)
{
	if (typeof e == 'undefined') e = window.event;
	if (typeof e.layerX == 'undefined') e.layerX = e.offsetX;
	if (typeof e.layerY == 'undefined') e.layerY = e.offsetY;
	return e;
}
};

 

Perfeito, já temos o Drag n' Drop criados. Agora, as outras funções são moleza!

 

Essas foram idealizadas por mim... Se tiverem soluções melhores, me ajudem, por favor! :D

 

Para minimizar a janela (deixar só o cabeçalho visível):

function minimizaDiv(div, cab) {
           cab.style.position = "relative";
           div.style.visibility = "hidden";
           cab.style.visibility = "visible";
       }

 

Agora, para restaurar a janela (voltar à posição e tamanho normais):

function restauraDiv(div, cab) {
           cab.style.position = "static"; //pode ser tanto static quanto fixed
           div.style.visibility = "visible";
       }

 

Bem, o mais simples de todos, obviamente, temos que fechar a janelinha:

function fechaDiv(div) {
           div.style.visibility = "hidden";
       }

 

Agora, vamos elaborar a própria janela, em HTML:

<div id="div1" style="background-color:#999999;height: 300px; position: relative; width: 300px;">
<!--tem que ter position: relative ou absolute, para que o Drag possa atuar. 
Se colocar position: absolute, a div ficará por cima de todos os outros elementos da página, 
não importando a sua distribuição ou ordem, o que não acontece com o relative.-->
<div id="cab1" style="background-color: #000000; color: #FFFFFF; cursor: move; height: 30px; margin: 5px;">
<!--colocar o cursor como "move" para o usuário saber que ele pode arrastar a janela.-->
<span style="float: left;">Título da Janela</span><!--float: left para o título ficar preso à esquerda-->
<span style="float: right;"><!--os "botões" para as funções vão ficar ancorados à direita-->
<span onclick="minimizaDiv(div1,cab1);" style="cursor: pointer;">▼</span><!--cria o ícone para minimizar-->
<span onclick="restauraDiv(div1,cab1);" style="cursor: pointer;">▲</span><!--cria o ícone para restaurar-->
<span onclick="fechaDiv(div1);" style="cursor: pointer;font-weight:bolder;">X</span><!--cria o ícone para fechar-->
</span>
</div>
</div>

 

Criada a janela, agora vamos fechar com chave de ouro! Ou melhor, com a chamada da função que faz o Drag:

<script type="text\javascript">
Drag.init(cab1, div1); 
//o primeiro argumento é o Handler, ou seja, o objeto que irá conduzir a movimentação do 2º (Root) - neste caso, o cabeçalho da janela e o conteúdo da janela!.
</script>

 

Pronto, pessoal! Espero que gostem e que sugiram alterações! :)