Ir para o conteúdo

Myoverlay


Criado por Rick =), Nov 04 2010 00:59

Não há respostas para este tópico
  • Por favor, faça o login para responder

#1 Rick =)

Rick =)
  • Rick =)
  • Colaborador
  • 16 Revisões

Revisou 04 novembro 2010 - 00:59

Saudações galera...
Bom... esse com certeza é o tipo de script bem solicitado...

Obviamente, para funcionar como deve, precisamos estilizá-lo corretamente com CSS, por isso, segue o link para baixar um arquivo *.rar contendo o script e 2 skins de bônus:
:seta: myOverlay 3.0

Incluam o script [poder ser o minifyed] E o css na página que pretendem usá-lo...

Para fazer um breve tutorial, preciso do código aqui.
Então lá vai:
/**
 * Autor: Henrique J. P. Barcelos
 * E-mail: rick.hjpbarcelos@gmail.com
 * Twitter: @rickhjpbarcelos
 * Data: 29/07/2010
 * Versão 3.0
 * 
 * Atenção: Este código está sob os termos da licença GPL.
 * Isso significa que você é livre para alterá-lo,
 * desde que cite a fonte original
 */

/*
 * Notas da versão:
 * 
 * 1. Agora existem 3 diferentes tipos de dialogo: Alert, Confirm e Box
 * 
 */

var myOverlay = function(preferences){
	for (var i in myOverlay.defaults)
		this[i] = myOverlay.defaults[i];
	
	this.config(preferences);
};

myOverlay.prototype = (function(){
	var $wrapper = null;
	var $wrapperHeight = null;
	var $wrapperWidth = null;
	var defaultCSS = null;
	
	var container = function(txt, heading, width, height){
		defaultCSS = {
			'position': this.position,
			'z-index': this.zIndex
		};
		
		this.width = width;
		this.height = height;
		
		if (this.modal) this.modalBackground();
		
		var newHTML = '<div class="myOverlayContainer baseContainer">';
		newHTML += '<h1 class=\"myOverlayHeader\">'+heading+'<button class="btClose">Fechar</button></h1>';
		newHTML += '<div class="myOverlayBox">';
		newHTML += '<span class="top_left"></span>';
		newHTML += '<span class="top_right"></span>';
		newHTML += '<span class="center_left"></span>';
		newHTML += '<span class="center_right"></span>';
		newHTML += '<span class="bottom_left"></span>';
		newHTML += '<span class="bottom_center"></span>';
		newHTML += '<span class="bottom_right"></span>';
		newHTML += '<div class="myOverlayBoxContent">';
		newHTML += '<div class="myOverlayBoxText">' + txt + '</div>';
		newHTML += '<div class="buttonContainer">';
		newHTML += '</div>';
		newHTML += '</div>';
		newHTML += '</div>';
		newHTML += '</div>';
		
		$wrapper.append(newHTML);
		
		this.$currentContainer = $wrapper.children().last('.myOverlayContainer');
		this.$currentContainer.css(defaultCSS).hide();
		if (!$.browser.msie) 
			this.$currentContainer.fadeIn(this.speed);
		else 
			this.$currentContainer.show();
		
		if(this.containerMinWidth)
			this.$currentContainer.css({'min-width': this.containerMinWidth + 'px'});
		
		if(this.containerMinHeight)
			this.$currentContainer.css({'min-height': this.containerMinHeight + 'px'});
		
		if (!this.showCloseButton) 
			this.$currentContainer.find('.btClose').hide();
			
		width = width || this.width;
		height = height || this.height;
			
		this.resize(width, height);
		
		activateButtons.call(this);
		activateKeyClose.call(this);
	};
	
	var removeElements = function(){
		var $elements = $(this).closest('.myOverlayContainer').prev('.myOverlayModal').andSelf();
		if (!$.browser.msie) {
			$elements.fadeOut(this.speed, function(){
				$(this).remove();
			});
		} else {
			$elements.remove();
		};
	};
	
	var activateButtons = function(){
		var self = this;
		this.$currentContainer.find('.btClose').click(function(e){
			if (typeof self.callbackClose == 'function') 
				self.callbackClose.call(self);
			e = e || window.event;
			removeElements.call(this);
		});
		
		this.$currentContainer.find('.btOk').click(function(e){
			e = e || window.event;
			if (typeof self.callbackOk == 'function') 
				self.callbackOk.call(self);
			self.$currentContainer.find('.btClose').click();
		});
		
		this.$currentContainer.find('.btYes').click(function(e){
			e = e || window.event;
			if (typeof self.callbackYes == 'function') 
				self.callbackYes.call(self);
			self.$currentContainer.find('.btClose').click();
		});
		
		this.$currentContainer.find('.btNo').click(function(e){
			e = e || window.event;
			if (typeof self.callbackNo == 'function')
				self.callbackNo.call(self);
			self.$currentContainer.find('.btClose').click();
		});
	};
	
	var fixIE = function(){
		if(!$.browser.msie)
			return false;
		$('.myOverlayModal').css({
			'filter': 'alpha(opacity=' + this.IEOpacity + ')',
			'background-color': this.IEColor
		});
		
		if (parseInt($.browser.version) <= 7) {
			if (!this.width) 
				$('.myOverlayContainer').width(this.IEWidth);
			
			if (!this.height) 
				$('.myOverlayContainer').height(this.IEHeight);
		}
	};
	
	var activateKeyClose = function(){
		var self = this;
		if(this.keyClose){
			$(document).keyup(function(e){
				e = e || window.event;
				if (e.keyCode == self.keyClose){
					$wrapper.last('.myOverlayContainer').find('.btClose').click();
				} 
			});
		};
	};
	
	return {
		constructor: myOverlay,
		
		config: function(preferences){
			if (typeof preferences == "object")
				for (var i in preferences) 
					if (i in this) 
						this[i] = preferences[i];
			
			$wrapper = $(this.wrapper);
			$wrapper.css({
				position: 'relative'
			});
			
			var self = this;
			$(window).resize(function(){
				self.backgroundResize();
			});
			
			if(this.width == 'auto')
				this.width = null;
			if(this.height == 'auto')
				this.height = null;
		},
		
		modalBackground: function(){
			$wrapper.append('<div class="myOverlayModal"></div>');
			
			this.$currentModal = $wrapper.children().last('.myOverlayModal');
			this.$currentModal.css(defaultCSS).css({
				'background-color': this.color,
				'top': 0,
				'left': 0,
				'display': 'block',
				'opacity': 0,
				'filter': 'alpha(opacity=0)'
			});
			
			if(!$.browser.msie){
				this.$currentModal.animate({
					opacity: this.opacity
				}, this.speed);
			} else {
				this.$currentModal.css({
					filter: 'alpha(opacity=' + (this.opacity * 100) + ')'
				});
			};
			
			this.backgroundResize();
			activateKeyClose.call(this);
		},
		
		backgroundResize: function(){
			if ($wrapper.get(0).nodeName == 'BODY' || (!$.browser.msie && $wrapper.get(0) instanceof HTMLBodyElement)) {
				$wrapperWidth = $(document).width();
				$wrapperHeight = $(document).height();
			}
			else {
				var outerWdt = $wrapper.outerWidth();
				var outerHgt = $wrapper.outerHeight();
				
				var scrollWdt = $wrapper.get(0).scrollWidth;
				var scrollHgt = $wrapper.get(0).scrollHeight;
				
				$wrapperWidth = Math.max(outerWdt, scrollWdt);
				$wrapperHeight = Math.max(outerHgt, scrollHgt);
			}
			
			this.$currentModal.css(defaultCSS).css({
				'width': $wrapperWidth + 'px',
				'height': $wrapperHeight + 'px'
			});
		},
		
		box: function(txt, heading, width, height){
			if ($wrapper.children().filter('.baseContainer').size() != 0) 
				return false;
			
			if (heading) 
				this.headings.box = heading;
				
			container.call(this, txt, this.headings.box, width, height);
			activateButtons.call(this);
		},
		
		alert: function(txt, callback, width, height){
			//Previne a criação de mais de um Alert dentro de um mesmo elemento
			if ($wrapper.children().filter('.myOverlayAlert').size() != 0) 
				return false;
			
			container.call(this, txt, this.headings.alert, width, height);
			
			this.$currentContainer.removeClass('baseContainer').addClass('myOverlayAlert').find('.buttonContainer')
			.append('<button class="btOk">' + this.buttonTexts.ok + '</button>');
			
			if(this.autofocus)
				this.$currentContainer.find('.btOk').focus();
			
			if (callback) 
				this.callbackOk = callback;
			
			this.resize(width, height);
			activateButtons.call(this);
		},
		
		confirm: function(txt, callbackYes, callbackNo, width, height){
			//Previne a criação de mais de um Confirm dentro de um mesmo elemento
			if ($wrapper.children().filter('.myOverlayConfirm').size() != 0) 
				return false;
			
			container.call(this, txt, this.headings.alert, width, height);
			
			this.$currentContainer.removeClass('baseContainer').addClass('myOverlayConfirm').find('.buttonContainer')
			.append('<button class="btYes">' + this.buttonTexts.yes + '</button>')
			.append('<button class="btNo">' + this.buttonTexts.no + '</button>');
			
			if(this.autofocus)
				this.$currentContainer.find('.btYes').focus();
			
			if (callbackYes) 
				this.callbackYes = callbackYes;
			if (callbackNo) 
				this.callbackNo = callbackNo;
			
			this.resize(width, height);	
			activateButtons.call(this);
		},
		
		resize: function(width, height){
			if (width && width < this.containerMinWidth)
				width = this.containerMinWidth;
			
			if (height && height < this.containerMinHeight)
				height = this.containerMinHeight;
			
			if (width) 
				this.$currentContainer.width(width);

			if (height) {
				var headerHgt = this.$currentContainer.find('> h1').outerHeight();
				var bottomHgt = this.$currentContainer.find('.bottom_center').outerHeight();
				var boxPaddingTop = parseInt(this.$currentContainer.find('.myOverlayBoxContent').css('padding-top'));
				var boxPaddingBottom = parseInt(this.$currentContainer.find('.myOverlayBoxContent').css('padding-bottom'));
				var new_hgt = height - (headerHgt + bottomHgt + boxPaddingBottom + boxPaddingTop);
				this.$currentContainer.find('.myOverlayBoxContent').height(new_hgt);
			};
			
			this.width = width;
			this.height = height;
			
			this.centralize();
			fixIE.call(this);			
		},
		
		centralize: function(){
			var width = this.$currentContainer.outerWidth();
			var height = this.$currentContainer.outerHeight();
			
			this.$currentContainer.css({
				'top': '50%',
				'left': '50%',
				'margin-top': '-' + height / 2 + 'px',
				'margin-left': '-' + width / 2 + 'px'
			}).css(defaultCSS).fadeIn(this.speed);
		}
	}
})();

myOverlay.setDefaults = function(preferences){
	if (typeof preferences == "object") {
		for (var i in preferences) {
			if (i in myOverlay.defaults) {
				myOverlay.defaults[i] = preferences[i];
			}
		}
	}
};

myOverlay.defaults = {
	//Dimensões
	width: 'auto',				//Largura do contâiner
	height: 'auto', 			//Altura do contâiner
	wrapper: 'body', 			//Elemento ou seletor ao qual adicionar o contâiner
	containerMinWidth: 200, 	//Largura mínima do container
	containerMinHeight: null,	//Altura mínima do container
	
	//IE Fix
	IEWidth: 400, 			//Fixa uma largura para o IE
	IEHeight: 200, 			//Fixa um altura para o IE
	IEColor: '#666',		//Fixa um background para o IE, pois 'transparent' não funciona no mesmo
	IEOpacity: 60,			//Fixa uma opacidade para o background para o IE			
	
	//CSS
	color: 'transparent',		 		//Cor de fundo do overlay
	opacity: 1, 				//Opacitade do overlay
	zIndex: '400', 				//z-index do overlay e do contâiner
	position: 'absolute', 		//position do overlay e do contâiner [static | absolute | fixed]
	
	//Animation
	speed: 'normal', 			//Velocidade da animação
	
	//Interface
	showCloseButton: true, 		//Mostrar ou não o botão de fechar
	keyClose: 27, 				//Tecla para ativar o fechamento do container [padrão = ESC, null desativa esta função]
	modal: true, 				//Define se o fundo deve ser esmarecido ou não
	showHeading: true, 			//Define se o título do container deve ser mostrado
	headings: { 				//Títulos dos 3 tipos de janelas
		alert: 'Aten&ccedil;&atilde;o',
		confirm: 'Confirma&ccedil;&atilde;o',
		box: 'myOverlay 3.0'
	},
	autofocus: false,
	
	//Botões
	buttonTexts: { 				//Textos inseridos nos botões
		yes: 'Sim',
		no: 'N&atilde;o',
		ok: 'Ok'
	},
	
	//Callbacks
	callbackYes: null, 			//Callback para quando o botão YES é clicado
	callbackNo: null, 			//Callback para quando o botão NO é clicado
	callbackOk: null, 			//Callback para quando o botão OK é clicado
	callbackClose: null			//Callback para quando o botão Fechar é clicado
}

Como fazer um alert bonitinho sem aquele barulho irritante?
var overlay = new myOverlay();
overlay.alert('Isto é um teste!');

E o confirm? *-*
var overlay = new myOverlay();
overlay.confirm('Deseja realmente fazer isso?!');

Não quer confirmar nem alertar nada, só quer a janelinha estilosa?
overlay.box('Coloque seu conteúdo aqui!');[/code]

Ooo, gênio, de que me serve esse confirm? Porque eu faço assim:
var overlay = new myOverlay();
if(overlay.confirm('Deseja realmente fazer isso?!')){
   //faz alguma coisa
} else {
   //faz outra coisa
}
não funcionaaaa!!!!!! :angry: :angry: :angry: :angry: :angry:

Caaalma galera, calma... Não tem jeito de isso funcionar exatamente como o confirm nativo...
Como contornar o problema?

Estão vendo os dois botões existentes no confirm, um 'Sim' e outro 'Não'?
Observem agora a assinatura do método myOverlary::confirm:
myOverlay::confirm(txt, callbackYes, callbackNo, width, height);

Deu pra sacar? Substitua 'callbackYes' pela função que quer que seja executada se o botão 'Sim' for clicado e 'callbackNo' pela executada se o usuário clicar em 'Não'

E esse width e esse height aí?
A princípio, a altura e a largura são definidas dinamicamente e a janela é centralizada na tela [mágica :D ]
Mas você pode fixar o tamanho dela alterando esses atributos, lembrando que ambos são do tipo INTEGER, ou seja, sem o 'px'...

E essa assinatura do método myOverlay::box que é diferente?
myOverlay::box(txt, heading, width, height);

Não há nenhum callback específico para o método box pois não há botões nele a não ser o de fechar a janela [que eu já falo sobre :rolleyes: ]
Você pode personalizar também o texto mostrado no header (título) da janela alterando o segundo parâmetro...

E pra executar uma ação quando a caixa é fechada?
var overlay = new myOverlay({
    callbackClose: function(){
      //fazer algo...
    }
});
overlay.alert('Isto é um teste!');

Que legal! Posso fechar com o teclado???
A princípio sim, a tecla ESC promove um click automático no botão que fecha a janela
Olhe as propriedades:
showCloseButton: true, 		//Mostrar ou não o botão de fechar
keyClose: 27,                         //Tecla que fecha a janela modal [padrão = ESC]

Se não quer permitir que o usuário use o teclado para fechar janela, ou mais além, que ele não possa fechar a janela, tente:
var overlay = new myOverlay({
    keyClose: null //Não fecha pelo teclado
    showCloseButton: false //Não mostra o botão que fecha a janela [só é recomendado fazer isto para alerts e confirms]
});
overlay.alert('Isto é um teste!');

Alterando os valores dos botões e dos headers:
var overlay = new myOverlay({
headings: { 				//Títulos dos 3 tipos de janelas
	confirm: 'Votar na Dilma',
},
//Botões
buttonTexts: { 				//Textos inseridos nos botões
	yes: 'Sim, Sou Louco!',
	no: 'N&atilde;o, Obrigado!',
});
overlay.confirm('Deseja realmente fazer isto?');


Faltou só falar dos bugs que o IE me faz ter que corrigir, mas não falarei por hora B)
Com o que está aqui dá para usurfruir de todas as funcionalidades :D

Tha-tha-that's a-a-all f-f-f-f-fo-f-fol-folks!
Loading Module: Computer Engineer
|############-------------------| 50%




1 usuário(s) está(ão) lendo este código

1 membro(s), 0 visitante(s) e 0 membros anônimo(s)