Jump to content
  • Sky
  • Blueberry
  • Slate
  • Blackcurrant
  • Watermelon
  • Strawberry
  • Orange
  • Banana
  • Apple
  • Emerald
  • Chocolate
  • Charcoal
MrDioamDev

Mydialog actualizado a Bootstrap 4 Modals

Recommended Posts

Hola a todos, este post es para mostrarles en lo que he estado trabajando.

He estado trabajando en Risus2, por lo tanto, algo de lo que he podido actualizar fueron los dialogs por defecto de Risus.

El problema es que tuve algunos problemas de compatibilidad, para empezar hay que usar Jquery 3 para que el archivo de Bootstrap.js (4.0.0) funcione.

Lo segundo, si hago eso, los: hovercard y plugins se van a la basura, así que habrá que actualizarlos también para que funcionen.

Y tercero, podría usar el migrador pero con eso el mydialog, es decir, los archivos de acciones.js, no toman como funciones a los modals.

 

Si alguien le interesa probar, aquí se los dejo:

Usando Jquery 3 [SIN MIGRATOR] y Bootstrap 4.0.0-beta  (la última hasta la fecha: 13/08/2017).

 

En el archivo acciones.js buscamos:

/* mydialog */
var mydialog = {

is_show: false,
class_aux: '',
mask_close: true,
close_button: false,
show: function(class_aux){
	if(this.is_show)
		return;
	else
		this.is_show = true;
	if($('#mydialog').html() == '') //Primera vez
		$('#mydialog').html('<div id="dialog"><div id="title"></div><div id="cuerpo"><div id="procesando"><div id="mensaje"></div></div><div id="modalBody"></div><div id="buttons"></div></div></div>');

	if(class_aux==true)
		$('#mydialog').addClass(this.class_aux);
	else if(this.class_aux != ''){
		$('#mydialog').removeClass(this.class_aux);
		this.class_aux = '';
	}

	if(this.mask_close)
		$('#mask').click(function(){ mydialog.close() });
	else
		$('#mask').unbind('click');

	if(this.close_button)
		$('#mydialog #dialog').append('<span onclick="mydialog.close()">X</span>');
	else
		$('#mydialog #dialog .close_dialog').remove();

	$('#mask').css({'width':$(document).width(),'height':$(document).height(),'display':'block'});

	if(jQuery.browser.msie && jQuery.browser.version < 7) //Fix IE<7 <- fack you
		$('#mydialog #dialog').css('position', 'absolute');
	else
		$('#mydialog #dialog').css('position', 'fixed');
        $('#mydialog #dialog').fadeIn('fast');
},
close: function(){
	//Vuelve todos los parametros por default
	this.class_aux = '';
	this.mask_close = true;
	this.close_button = false;

	this.is_show = false;
	$('#mask').css('display', 'none');
	$('#mydialog #dialog').fadeOut('fast', function(){ $(this).remove() });
	this.procesando_fin();
},
center: function(){
	if($('#mydialog #dialog').height() > $(window).height()-60)
		$('#mydialog #dialog').css({'position':'absolute', 'top':20});
	else
		$('#mydialog #dialog').css('top', $(window).height()/2-$('#mydialog #dialog').height()/2);
	$('#mydialog #dialog').css('left', $(window).width()/2-$('#mydialog #dialog').width()/2);
},

title: function(title){
	$('#mydialog #title').html(title);
},
body: function(body, width, height){
	if(!width && (jQuery.browser.opera || (jQuery.browser.msie && jQuery.browser.version<7)))
		width = '400px';
	$('#mydialog #dialog').width(width?width:'').height(height?height:'');
	$('#mydialog #modalBody').html(body);
},
buttons: function(display_all, btn1_display, btn1_val, btn1_action, btn1_enabled, btn1_focus, btn2_display, btn2_val, btn2_action, btn2_enabled, btn2_focus){
	if(!display_all){
		$('#mydialog #buttons').css('display', 'none').html('');
		return;
	}

	if(btn1_action=='close')
		btn1_action='mydialog.close()';
	if(btn2_action=='close' || !btn2_val)
		btn2_action='mydialog.close()';
	if(!btn2_val){
		btn2_val = 'Cancelar';
		btn2_enabled = true;
	}

	var html = '';
	if(btn1_display)
		html += '<input type="button" class="btn btn-success'+(btn1_enabled?'':' disabled')+'" style="display:'+(btn1_display?'inline-block':'none')+'"'+(btn1_display?' value="'+btn1_val+'"':'')+(btn1_display?' onclick="'+btn1_action+'"':'')+(btn1_enabled?'':' disabled')+' />';
	if(btn2_display)
		html += ' <input type="button" class="btn btn-danger'+(btn1_enabled?'':' disabled')+'" style="display:'+(btn2_display?'inline-block':'none')+'"'+(btn2_display?' value="'+btn2_val+'"':'')+(btn2_display?' onclick="'+btn2_action+'"':'')+(btn2_enabled?'':' disabled')+' />';
	$('#mydialog #buttons').html(html).css('display', 'inline-block');

	if(btn1_focus)
		$('#mydialog #buttons .btn.btn-success').focus();
	else if(btn2_focus)
		$('#mydialog #buttons .btn.btn-danger').focus();
},
buttons_enabled: function(btn1_enabled, btn2_enabled){
	if($('#mydialog #buttons .btn.btn-success'))
		if(btn1_enabled)
			$('#mydialog #buttons .btn.btn-success').removeClass('disabled').removeAttr('disabled');
		else
			$('#mydialog #buttons .btn.btn-success').addClass('disabled').attr('disabled', 'disabled');

	if($('#mydialog #buttons .btn.btn-danger'))
		if(btn2_enabled)
			$('#mydialog #buttons .btn.btn-danger').removeClass('disabled').removeAttr('disabled');
		else
			$('#mydialog #buttons .btn.btn-danger').addClass('disabled').attr('disabled', 'disabled');
},
alert: function(title, body, reload){
	this.show();
	this.title(title);
	this.body(body);
	this.buttons(true, true, 'Aceptar', 'mydialog.close();' + (reload ? 'location.reload();' : 'close'), true, true, false);
	this.center();
},
error_500: function(fun_reintentar){
	setTimeout(function(){
		mydialog.procesando_fin();
		mydialog.show();
		mydialog.title('Error');
		mydialog.body(lang['error procesar']);
		mydialog.buttons(true, true, 'Reintentar', 'mydialog.close();'+fun_reintentar, true, true, true, 'Cancelar', 'close', true, false);
		mydialog.center();
	}, 200);
},
procesando_inicio: function(value, title){
	if(!this.is_show){
		this.show();
		this.title(title);
		this.body('');
		this.buttons(false, false);
		this.center();
	}
	$('#mydialog #procesando #mensaje').html('<i class="fa fa-spinner fa-pulse fa-4x fa-fw"></i>');
	$('#mydialog #procesando').fadeIn('fast');
},
procesando_fin: function(){
	$('#mydialog #procesando').fadeOut('fast');
}

};

document.onkeydown = function(e){
	key = (e==null)?event.keyCode:e.which;
	if(key == 27)
		mydialog.close();
};


Y lo cambiamos por:

/* MYDIALOG (USANDO BOOTSTRAP (4.0 Y 3.0) (JQUERY 3) | MOD: v0.1 ALPHA) */
/* ADAPTADO POR: MRDIOAMDEV */
var mydialog = {

is_show: false,
class_aux: '',
close_button: false,
show: function(class_aux){
	
	    //GENERAMOS LA MODAL
		$('#mydialog').html('<div class="modal fade" id="dialogmodalbs" role="dialog"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"> <button type="button" class="close" onclick="mydialog.close();">×</button><h4 class="modal-title"></h4></div><div class="modal-body" id="cuerpo"><div class="modalad-procesando"><div class="modalad-procesando-mensaje"></div></div><div class="modalad-modalBody"></div></div><div class="modal-footer"></div></div></div></div>');
		
		//LA LLAMAMOS CON SU FUNCION RESPECTIVA
		$("#dialogmodalbs").modal();
		
	//NI IDEA PARA QUE SERA ESTO PERO LO DEJO IGUAL XD
	if(class_aux==true)
		$('#mydialog').addClass(this.class_aux);
	else if(this.class_aux != ''){
		$('#mydialog').removeClass(this.class_aux);
		this.class_aux = '';
	}		
		
},
close: function(){	
	//CERRAR MODAL
	//setTimeout(function(){
	$('#dialogmodalbs').modal('toggle');
	//}, 200);
	
	//ELIMINARLA
	//setTimeout(function(){
	//$("#mydialog").html("");
	//}, 600);
},
closefull: function(){	
	//CERRAR MODAL
	setTimeout(function(){
	$('#dialogmodalbs').modal('toggle');
	}, 200);
	
	//ELIMINARLA
	setTimeout(function(){
	$("#mydialog").html("");
	}, 600);
},
title: function(title){
	$('.modal-title').html(title);
},
body: function(body, width, height){
	$('.modalad-modalBody').html(body);
},
buttons: function(display_all, btn1_display, btn1_val, btn1_action, btn1_enabled, btn1_focus, btn2_display, btn2_val, btn2_action, btn2_enabled, btn2_focus){
	if(!display_all){
		$('.modal-footer').css('display', 'none').html('');
		return;
	}

	if(btn1_action=='close')
		btn1_action='mydialog.close()';
	if(btn2_action=='close' || !btn2_val)
		btn2_action='mydialog.close()';
	if(!btn2_val){
		btn2_val = 'Cancelar';
		btn2_enabled = true;
	}

	var html = '';
	if(btn1_display)
		html += '<input type="button" class="btn btn-success'+(btn1_enabled?'':' disabled')+'" style="display:'+(btn1_display?'inline-block':'none')+'"'+(btn1_display?' value="'+btn1_val+'"':'')+(btn1_display?' onclick="'+btn1_action+'"':'')+(btn1_enabled?'':' disabled')+' />';
	if(btn2_display)
		html += ' <input type="button" class="btn btn-danger'+(btn1_enabled?'':' disabled')+'" style="display:'+(btn2_display?'inline-block':'none')+'"'+(btn2_display?' value="'+btn2_val+'"':'')+(btn2_display?' onclick="'+btn2_action+'"':'')+(btn2_enabled?'':' disabled')+' />';
	$('.modal-footer').html(html).css('display', 'inline-block');

	if(btn1_focus)
		$('.modal-footer .btn.btn-success').focus();
	else if(btn2_focus)
		$('.modal-footer .btn.btn-danger').focus();
},
buttons_enabled: function(btn1_enabled, btn2_enabled){
	if($('.modal-footer .btn.btn-success'))
		if(btn1_enabled)
			$('.modal-footer .btn.btn-success').removeClass('disabled').removeAttr('disabled');
		else
			$('.modal-footer .btn.btn-success').addClass('disabled').attr('disabled', 'disabled');

	if($('.modal-footer .btn.btn-danger'))
		if(btn2_enabled)
			$('.modal-footer .btn.btn-danger').removeClass('disabled').removeAttr('disabled');
		else
			$('.modal-footer .btn.btn-danger').addClass('disabled').attr('disabled', 'disabled');
},
alert: function(title, body, reload){
	this.show();
	this.title(title);
	this.body(body);
	this.buttons(true, true, 'Aceptar', 'mydialog.close();' + (reload ? 'location.reload();' : 'close'), true, true, false);
	this.center();
},
error_500: function(fun_reintentar){
	setTimeout(function(){
		mydialog.procesando_fin();
		mydialog.show();
		mydialog.title('Error');
		mydialog.body(lang['error procesar']);
		mydialog.buttons(true, true, 'Reintentar', 'mydialog.close();'+fun_reintentar, true, true, true, 'Cancelar', 'close', true, false);
		mydialog.center();
	}, 200);
},
procesando_inicio: function(value, title){
	if(!this.is_show){
		this.show();
		this.title(title);
		this.body('');
		this.buttons(false, false);
		this.center();
	}
	$('.modalad-procesando-mensaje').html('<div class="alert alert-info" style="width:100%;height:100%;">Procesando...</div>');
	$('.modalad-procesando').fadeIn('fast');
},
procesando_fin: function(){
	$('.modalad-procesando').fadeOut('fast');
}

};

//CERRAR X ESC
document.onkeydown = function(e){
	key = (e==null)?event.keyCode:e.which;
	if(key == 27) //TECLA ESC Y CERRAMOS Y ELIMINAMOS DIALOG
		mydialog.closefull();
};

//ELIMINAR MASK ANTIGUA
$( document ).ready(function() {
$("#mask").remove();
});

/****** FIN MODAL ********/

Espero que puedan aportar con algo, ya que no sé que más hacerle para que funcione :S .

Gracias!

Editado por MrDioamDev
  • Gracias 1

Compartir este post


Enlace al post
Compartir en otros sitios
Ahora, CalmBefPhp dijo:

Si se muestran, pero se muestra el de bootstrap.

 

Ya sé que en todo caso se mostraría el de Bootstrap, sólo que entendí que tiene alguna falla. Tendrás una cap? (Por ejemplo intentado borrar una publicación del MI)

Compartir este post


Enlace al post
Compartir en otros sitios
hace 36 minutos, Altffenser dijo:

 

Ya sé que en todo caso se mostraría el de Bootstrap, sólo que entendí que tiene alguna falla. Tendrás una cap? (Por ejemplo intentado borrar una publicación del MI)

Lamentablemente no, ya que estaba trabajando en base de Bootstrap 3, y ahora estoy trabajando en Bootstrap 4.

Y no tiene alguna falla XD, tiene cientas.

 

 

Compartir este post


Enlace al post
Compartir en otros sitios
Ahora, CalmBefPhp dijo:

Lamentablemente no, ya que estaba trabajando en base de Bootstrap 3, y ahora estoy trabajando en Bootstrap 4.

Y no tiene alguna falla XD, tiene cientas.

 

 

 

Cuáles? :o

Compartir este post


Enlace al post
Compartir en otros sitios
hace 12 minutos, Altffenser dijo:

Cuáles? :o

A parte de las que menciono en el post:

hace 3 horas, CalmBefPhp dijo:

El problema es que tuve algunos problemas de compatibilidad, para empezar hay que usar Jquery 3 para que el archivo de Bootstrap.js (4.0.0) funcione.

Lo segundo, si hago eso, los: hovercard y plugins se van a la basura, así que habrá que actualizarlos también para que funcionen.

Y tercero, podría usar el migrador pero con eso el mydialog, es decir, los archivos de acciones.js, no toman como funciones a los modals.

También muchas de las funciones también dejan de funcionar, por ejemplo, en agregar no se visualiza el post.

Además, también se bugea al hacer el "mydialog.procesar_".

Compartir este post


Enlace al post
Compartir en otros sitios
hace 1 minuto, CalmBefPhp dijo:

A parte de las que menciono en el post:

También muchas de las funciones también dejan de funcionar, por ejemplo, en agregar no se visualiza el post.

Además, también se bugea al hacer el "mydialog.procesar_".

 

Pero esas se pueden arreglar. en el caso de los post debes actualizar algunas funciones, busca todos los

.live()

y reemplazalos por

.on()

Así solucionas muchos de los problemas que mencionas... Por otra parte, no necesitas "myDialog.procesar", de todos modos las consultas se hacen O.o

Compartir este post


Enlace al post
Compartir en otros sitios
Ahora, Altffenser dijo:

 

Pero esas se pueden arreglar. en el caso de los post debes actualizar algunas funciones, busca todos los

.live()

y reemplazalos por

.on()

Así solucionas muchos de los problemas que mencionas... Por otra parte, no necesitas "myDialog.procesar", de todos modos las consultas se hacen O.o

Hmm, podría ser, mañana crearé una nueva carpeta con risus y le colocaré el dialog y bootstrap.

Gracias.

 

Compartir este post


Enlace al post
Compartir en otros sitios
hace 1 minuto, CalmBefPhp dijo:

Hmm, podría ser, mañana crearé una nueva carpeta con risus y le colocaré el dialog y bootstrap.

Gracias.

 

 

Hazlo ahorita D:

Compartir este post


Enlace al post
Compartir en otros sitios

Registra una cuenta o conéctate para comentar

Debes ser un miembro de la comunidad para dejar un comentario


  • Navegando Recientemente   0 miembros

    No registered users viewing this page.

×