').addClass(namespacify('overlay') + ' ' + namespacify('is', STATES.CLOSED)).hide();
$body.append(remodal.$overlay);
}
remodal.$bg = $('.' + namespacify('bg')).addClass(namespacify('is', STATES.CLOSED));
remodal.$modal = $modal
.addClass(
NAMESPACE + ' ' +
namespacify('is-initialized') + ' ' +
remodal.settings.modifier + ' ' +
namespacify('is', STATES.CLOSED))
.attr('tabindex', '-1');
remodal.$wrapper = $('
')
.addClass(
namespacify('wrapper') + ' ' +
remodal.settings.modifier + ' ' +
namespacify('is', STATES.CLOSED))
.hide()
.append(remodal.$modal);
$body.append(remodal.$wrapper);
// Add the event listener for the close button
remodal.$wrapper.on('click.' + NAMESPACE, '[data-' + PLUGIN_NAME + '-action="close"]', function(e) {
e.preventDefault();
remodal.close();
});
// Add the event listener for the cancel button
remodal.$wrapper.on('click.' + NAMESPACE, '[data-' + PLUGIN_NAME + '-action="cancel"]', function(e) {
e.preventDefault();
remodal.$modal.trigger(STATE_CHANGE_REASONS.CANCELLATION);
if (remodal.settings.closeOnCancel) {
remodal.close(STATE_CHANGE_REASONS.CANCELLATION);
}
});
// Add the event listener for the confirm button
remodal.$wrapper.on('click.' + NAMESPACE, '[data-' + PLUGIN_NAME + '-action="confirm"]', function(e) {
e.preventDefault();
remodal.$modal.trigger(STATE_CHANGE_REASONS.CONFIRMATION);
if (remodal.settings.closeOnConfirm) {
remodal.close(STATE_CHANGE_REASONS.CONFIRMATION);
}
});
// Add the event listener for the overlay
remodal.$wrapper.on('click.' + NAMESPACE, function(e) {
var $target = $(e.target);
if (!$target.hasClass(namespacify('wrapper'))) {
return;
}
if (remodal.settings.closeOnOutsideClick) {
remodal.close();
}
});
}
/**
* Opens a modal window
* @public
*/
Remodal.prototype.open = function() {
var remodal = this;
var id;
// Check if the animation was completed
if (remodal.state === STATES.OPENING || remodal.state === STATES.CLOSING) {
return;
}
id = remodal.$modal.attr('data-' + PLUGIN_NAME + '-id');
if (id && remodal.settings.hashTracking) {
scrollTop = $(window).scrollTop();
location.hash = id;
}
if (current && current !== remodal) {
halt(current);
}
current = remodal;
lockScreen();
remodal.$bg.addClass(remodal.settings.modifier);
remodal.$overlay.addClass(remodal.settings.modifier).show();
remodal.$wrapper.show().scrollTop(0);
remodal.$modal.focus();
syncWithAnimation(
function() {
setState(remodal, STATES.OPENING);
},
function() {
setState(remodal, STATES.OPENED);
},
remodal);
};
/**
* Closes a modal window
* @public
* @param {String} reason
*/
Remodal.prototype.close = function(reason) {
var remodal = this;
// Check if the animation was completed
if (remodal.state === STATES.OPENING || remodal.state === STATES.CLOSING) {
return;
}
if (
remodal.settings.hashTracking &&
remodal.$modal.attr('data-' + PLUGIN_NAME + '-id') === location.hash.substr(1)
) {
location.hash = '';
$(window).scrollTop(scrollTop);
}
syncWithAnimation(
function() {
setState(remodal, STATES.CLOSING, false, reason);
},
function() {
remodal.$bg.removeClass(remodal.settings.modifier);
remodal.$overlay.removeClass(remodal.settings.modifier).hide();
remodal.$wrapper.hide();
unlockScreen();
setState(remodal, STATES.CLOSED, false, reason);
},
remodal);
};
/**
* Returns a current state of a modal
* @public
* @returns {STATES}
*/
Remodal.prototype.getState = function() {
return this.state;
};
/**
* Destroys a modal
* @public
*/
Remodal.prototype.destroy = function() {
var lookup = $[PLUGIN_NAME].lookup;
var instanceCount;
halt(this);
this.$wrapper.remove();
delete lookup[this.index];
instanceCount = $.grep(lookup, function(instance) {
return !!instance;
}).length;
if (instanceCount === 0) {
this.$overlay.remove();
this.$bg.removeClass(
namespacify('is', STATES.CLOSING) + ' ' +
namespacify('is', STATES.OPENING) + ' ' +
namespacify('is', STATES.CLOSED) + ' ' +
namespacify('is', STATES.OPENED));
}
};
/**
* Special plugin object for instances
* @public
* @type {Object}
*/
$[PLUGIN_NAME] = {
lookup: []
};
/**
* Plugin constructor
* @constructor
* @param {Object} options
* @returns {JQuery}
*/
$.fn[PLUGIN_NAME] = function(opts) {
var instance;
var $elem;
this.each(function(index, elem) {
$elem = $(elem);
if ($elem.data(PLUGIN_NAME) == null) {
instance = new Remodal($elem, opts);
$elem.data(PLUGIN_NAME, instance.index);
if (
instance.settings.hashTracking &&
$elem.attr('data-' + PLUGIN_NAME + '-id') === location.hash.substr(1)
) {
instance.open();
}
} else {
instance = $[PLUGIN_NAME].lookup[$elem.data(PLUGIN_NAME)];
}
});
return instance;
};
$(document).ready(function() {
// data-remodal-target opens a modal window with the special Id
$(document).on('click', '[data-' + PLUGIN_NAME + '-target]', function(e) {
e.preventDefault();
var elem = e.currentTarget;
var id = elem.getAttribute('data-' + PLUGIN_NAME + '-target');
var $target = $('[data-' + PLUGIN_NAME + '-id="' + id + '"]');
$[PLUGIN_NAME].lookup[$target.data(PLUGIN_NAME)].open();
});
// Auto initialization of modal windows
// They should have the 'remodal' class attribute
// Also you can write the `data-remodal-options` attribute to pass params into the modal
$(document).find('.' + NAMESPACE).each(function(i, container) {
var $container = $(container);
var options = $container.data(PLUGIN_NAME + '-options');
if (!options) {
options = {};
} else if (typeof options === 'string' || options instanceof String) {
options = parseOptions(options);
}
$container[PLUGIN_NAME](options);
});
// Handles the keydown event
$(document).on('keydown.' + NAMESPACE, function(e) {
if (current && current.settings.closeOnEscape && current.state === STATES.OPENED && e.keyCode === 27) {
current.close();
}
});
// Handles the hashchange event
$(window).on('hashchange.' + NAMESPACE, handleHashChangeEvent);
});
});