Skip to content

Instantly share code, notes, and snippets.

@forkbombe
Created August 24, 2016 13:54
Show Gist options
  • Save forkbombe/f73d0171a73f9dd8a4b9b03df734805a to your computer and use it in GitHub Desktop.
Save forkbombe/f73d0171a73f9dd8a4b9b03df734805a to your computer and use it in GitHub Desktop.
Re-usable modal using jquery-ui plus extension for WordPress AJAX
/**
* Example init
*
* new Modal('login-form', {
* title = 'Please Log In',
* content = preloader.spawn();
* });
*
* @param name
* @param options
* @constructor
*/
var Modal = function(name, options) {
/**
* Arguments passed
*/
this.name = name;
this.options = options;
/**
* The elements
* @type {{}}
*/
this.element = {}; // The Modal Element
this.modal = {}; // The Modal Object
/**
* This object
* @type {Modal}
*/
var $this = this; // This Object
/**
* The modal container wrapper
* @returns {string}
*/
this.container = function() {
return '' +
'<div class="modal-box" data-name="'+$this.name+'" title="'+$this.options.title+'">' +
''+$this.options.content+'' +
'</div>';
};
/**
* Prepends the modal container to the body
* @returns {boolean}
*/
this.create = function() {
// Cleanup before create
$this.destroy();
// Inject HTML to the DOM before the body
$('body').prepend($this.container());
// Select the newly inserted element
$this.element = $('.modal-box[data-name="'+$this.name+'"');
// Bind jQuery-ui dialog to element
$this.modal = $this.element.dialog({
//.. jQuery-ui Dialog Params
});
return false;
};
/**
* Params : requestContent - immediately request content
* Displays modal box
*/
this.spawn = function(requestContent) {
// requestContent default false
requestContent =
typeof requestContent !== 'undefined' ?
requestContent : false;
$this.create();
// Then open it
$this.modal.dialog('open');
// Hide header when modal open
var header = $('header');
header.addClass('hide');
// if requestContent true then get the content
if(requestContent) {
$this.requestContent();
}
};
/**
* Destroys modal box
*/
this.destroy = function() {
if($this.element.length>0) {
// Remove our modal box from the DOM
$this.element.remove();
}
};
/**
* Starts the request for content
* @param modal
* @returns {*}
*/
this.requestContent = function() {
var xhr;
if (xhr && xhr.readyState != 4) {
xhr.abort();
}
xhr = $.ajax({
url: ajaxurl,
data: {
action: 'modal', // Mapped to WordPress Ajax method 'modal'
template: $this.name // WordPress Ajax method modal uses name to map to template file for contents of modal
},
success: function (content) {
$this.setContent(content, function () {
// after ajax complete callback
});
}
});
return xhr;
};
/**
* Set the content inside the modal
*
* @param content
* @param callback
*/
this.setContent = function(content, callback) {
$this.element.html(content);
$this.fluid();
if(callback!=='undefined') {
callback();
}
};
/**
* Set new modal title
* @param title
*/
this.setTitle = function(title) {
$this.find('.ui-dialog-title').text(title);
};
/**
* Find HTML elements within the modal
*
* @param element
* @returns {*}
*/
this.find = function(element) {
var els = $this.element.find(element);
if(els.length>0) {
return els;
}
return false;
};
/**
* Fluid jquery-ui dialogs
*/
this.fluid = function() {
var $visible = $(".ui-dialog:visible");
// each open dialog
$visible.each(function () {
var $this = $(this);
var dialog = $this.find(".ui-dialog-content").data("ui-dialog");
// if fluid option == true
if (dialog.options.fluid) {
var wWidth = $(window).width();
// check window width against dialog width
if (wWidth < (parseInt(dialog.options.maxWidth) + 50)) {
// keep dialog from filling entire screen
$this.css("max-width", "90%");
} else {
// fix maxWidth bug
$this.css("max-width", dialog.options.maxWidth + "px");
}
//reposition dialog
dialog.option("position", dialog.options.position);
}
});
}
};
// Create a modal
var modal = new Modal('member-login', {
'title' : 'Please log in',
'content' : '<p>This is a login box</p>'
});
modal.spawn();
// Create modal and request content via WordPress AJAX
var modal = new Modal('member-login', {
'title' : 'Please log in',
'content' : 'Loading...'
});
modal.spawn(true);
// Set content of existing modal
modal.setContent('<p>New Content</p>')
// Set new modal title
modal.setTitle('New Title');
class Modal {
public function __construct() {
add_action( 'wp_ajax_modal', array($this, 'modal') );
add_action( 'wp_ajax_nopriv_modal', array($this, 'modal') );
}
public static function modal() {
if(isset($_REQUEST['template'])) {
ob_start();
// Choose directory for modal content
include(TEMPLATEPATH . '/tpl/modal/'.$_REQUEST['template'].'.php');
$modal = ob_get_contents();
ob_end_clean();
echo $modal;
}
die();
}
}
new Modal();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment