wiki-grav/plugins/admin/themes/grav/app/utils/remodal.js
2022-04-24 14:32:58 +02:00

821 lines
22 KiB
JavaScript

/* Remodal from https://github.com/vodkabears/Remodal
* With Stackable option from https://github.com/antstorm/Remodal patch
*/
import $ from 'jquery';
!(function(root, factory) {
return factory(root, $);
})(this, function(global, $) {
'use strict';
/**
* Name of the plugin
* @private
* @const
* @type {String}
*/
var PLUGIN_NAME = 'remodal';
/**
* Namespace for CSS and events
* @private
* @const
* @type {String}
*/
var NAMESPACE = window.REMODAL_GLOBALS && window.REMODAL_GLOBALS.NAMESPACE || PLUGIN_NAME;
/**
* Animationstart event with vendor prefixes
* @private
* @const
* @type {String}
*/
var ANIMATIONSTART_EVENTS = $.map(
['animationstart', 'webkitAnimationStart', 'MSAnimationStart', 'oAnimationStart'],
function(eventName) {
return eventName + '.' + NAMESPACE;
}
).join(' ');
/**
* Animationend event with vendor prefixes
* @private
* @const
* @type {String}
*/
var ANIMATIONEND_EVENTS = $.map(
['animationend', 'webkitAnimationEnd', 'MSAnimationEnd', 'oAnimationEnd'],
function(eventName) {
return eventName + '.' + NAMESPACE;
}
).join(' ');
/**
* Default settings
* @private
* @const
* @type {Object}
*/
var DEFAULTS = $.extend({
hashTracking: true,
closeOnConfirm: true,
closeOnCancel: true,
closeOnEscape: true,
closeOnOutsideClick: true,
modifier: '',
stack: false,
appendTo: null
}, window.REMODAL_GLOBALS && window.REMODAL_GLOBALS.DEFAULTS);
/**
* States of the Remodal
* @private
* @const
* @enum {String}
*/
var STATES = {
CLOSING: 'closing',
CLOSED: 'closed',
OPENING: 'opening',
OPENED: 'opened'
};
/**
* Reasons of the state change.
* @private
* @const
* @enum {String}
*/
var STATE_CHANGE_REASONS = {
CONFIRMATION: 'confirmation',
CANCELLATION: 'cancellation'
};
/**
* Is animation supported?
* @private
* @const
* @type {Boolean}
*/
var IS_ANIMATION = (function() {
var style = document.createElement('div').style;
return style.animationName !== undefined ||
style.WebkitAnimationName !== undefined ||
style.MozAnimationName !== undefined ||
style.msAnimationName !== undefined ||
style.OAnimationName !== undefined;
})();
/**
* Is iOS?
* @private
* @const
* @type {Boolean}
*/
var IS_IOS = /iPad|iPhone|iPod/.test(navigator.platform);
/**
* Current modal
* @private
* @type {Remodal}
*/
var openModals = [];
/**
* Scrollbar position
* @private
* @type {Number}
*/
var scrollTop;
/**
* Returns an animation duration
* @private
* @param {jQuery} $elem
* @returns {Number}
*/
function getAnimationDuration($elem) {
if (
IS_ANIMATION &&
$elem.css('animation-name') === 'none' &&
$elem.css('-webkit-animation-name') === 'none' &&
$elem.css('-moz-animation-name') === 'none' &&
$elem.css('-o-animation-name') === 'none' &&
$elem.css('-ms-animation-name') === 'none'
) {
return 0;
}
var duration = $elem.css('animation-duration') ||
$elem.css('-webkit-animation-duration') ||
$elem.css('-moz-animation-duration') ||
$elem.css('-o-animation-duration') ||
$elem.css('-ms-animation-duration') ||
'0s';
var delay = $elem.css('animation-delay') ||
$elem.css('-webkit-animation-delay') ||
$elem.css('-moz-animation-delay') ||
$elem.css('-o-animation-delay') ||
$elem.css('-ms-animation-delay') ||
'0s';
var iterationCount = $elem.css('animation-iteration-count') ||
$elem.css('-webkit-animation-iteration-count') ||
$elem.css('-moz-animation-iteration-count') ||
$elem.css('-o-animation-iteration-count') ||
$elem.css('-ms-animation-iteration-count') ||
'1';
var max;
var len;
var num;
var i;
duration = duration.split(', ');
delay = delay.split(', ');
iterationCount = iterationCount.split(', ');
// The 'duration' size is the same as the 'delay' size
for (i = 0, len = duration.length, max = Number.NEGATIVE_INFINITY; i < len; i++) {
num = parseFloat(duration[i]) * parseInt(iterationCount[i], 10) + parseFloat(delay[i]);
if (num > max) {
max = num;
}
}
return max;
}
/**
* Returns a scrollbar width
* @private
* @returns {Number}
*/
function getScrollbarWidth() {
if ($(document).height() <= $(window).height()) {
return 0;
}
var outer = document.createElement('div');
var inner = document.createElement('div');
var widthNoScroll;
var widthWithScroll;
outer.style.visibility = 'hidden';
outer.style.width = '100px';
document.body.appendChild(outer);
widthNoScroll = outer.offsetWidth;
// Force scrollbars
outer.style.overflow = 'scroll';
// Add inner div
inner.style.width = '100%';
outer.appendChild(inner);
widthWithScroll = inner.offsetWidth;
// Remove divs
outer.parentNode.removeChild(outer);
return widthNoScroll - widthWithScroll;
}
/**
* Locks the screen
* @private
*/
function lockScreen() {
if (IS_IOS) {
return;
}
var $html = $('html');
var lockedClass = namespacify('is-locked');
var paddingRight;
var $body;
if (!$html.hasClass(lockedClass)) {
$body = $(document.body);
// Zepto does not support '-=', '+=' in the `css` method
paddingRight = parseInt($body.css('padding-right'), 10) + getScrollbarWidth();
$body.css('padding-right', paddingRight + 'px');
$html.addClass(lockedClass);
}
}
/**
* Unlocks the screen
* @private
*/
function unlockScreen() {
if (IS_IOS) {
return;
}
var $html = $('html');
var lockedClass = namespacify('is-locked');
var paddingRight;
var $body;
if ($html.hasClass(lockedClass)) {
$body = $(document.body);
// Zepto does not support '-=', '+=' in the `css` method
paddingRight = parseInt($body.css('padding-right'), 10) - getScrollbarWidth();
$body.css('padding-right', paddingRight + 'px');
$html.removeClass(lockedClass);
}
}
/**
* Sets a state for an instance
* @private
* @param {Remodal} instance
* @param {STATES} state
* @param {Boolean} isSilent If true, Remodal does not trigger events
* @param {String} Reason of a state change.
*/
function setState(instance, state, isSilent, reason) {
var newState = namespacify('is', state);
var allStates = [namespacify('is', STATES.CLOSING),
namespacify('is', STATES.OPENING),
namespacify('is', STATES.CLOSED),
namespacify('is', STATES.OPENED)].join(' ');
instance.$bg
.removeClass(allStates)
.addClass(newState);
instance.$overlay
.removeClass(allStates)
.addClass(newState);
instance.$wrapper
.removeClass(allStates)
.addClass(newState);
instance.$modal
.removeClass(allStates)
.addClass(newState);
instance.state = state;
!isSilent && instance.$modal.trigger({
type: state,
reason: reason
}, [{ reason: reason }]);
}
/**
* Synchronizes with the animation
* @param {Function} doBeforeAnimation
* @param {Function} doAfterAnimation
* @param {Remodal} instance
*/
function syncWithAnimation(doBeforeAnimation, doAfterAnimation, instance) {
var runningAnimationsCount = 0;
var handleAnimationStart = function(e) {
if (e.target !== this) {
return;
}
runningAnimationsCount++;
};
var handleAnimationEnd = function(e) {
if (e.target !== this) {
return;
}
if (--runningAnimationsCount === 0) {
// Remove event listeners
$.each(['$bg', '$overlay', '$wrapper', '$modal'], function(index, elemName) {
instance[elemName].off(ANIMATIONSTART_EVENTS + ' ' + ANIMATIONEND_EVENTS);
});
doAfterAnimation();
}
};
$.each(['$bg', '$overlay', '$wrapper', '$modal'], function(index, elemName) {
instance[elemName]
.on(ANIMATIONSTART_EVENTS, handleAnimationStart)
.on(ANIMATIONEND_EVENTS, handleAnimationEnd);
});
doBeforeAnimation();
// If the animation is not supported by a browser or its duration is 0
if (
getAnimationDuration(instance.$bg) === 0 &&
getAnimationDuration(instance.$overlay) === 0 &&
getAnimationDuration(instance.$wrapper) === 0 &&
getAnimationDuration(instance.$modal) === 0
) {
// Remove event listeners
$.each(['$bg', '$overlay', '$wrapper', '$modal'], function(index, elemName) {
instance[elemName].off(ANIMATIONSTART_EVENTS + ' ' + ANIMATIONEND_EVENTS);
});
doAfterAnimation();
}
}
/**
* Closes immediately
* @private
* @param {Remodal} instance
*/
function halt(instance) {
if (instance.state === STATES.CLOSED) {
return;
}
$.each(['$bg', '$overlay', '$wrapper', '$modal'], function(index, elemName) {
instance[elemName].off(ANIMATIONSTART_EVENTS + ' ' + ANIMATIONEND_EVENTS);
});
removeModal(instance);
instance.$bg.removeClass(instance.settings.modifier);
instance.$overlay.removeClass(instance.settings.modifier).hide();
instance.$wrapper.hide();
if (openModals.length === 0) {
unlockScreen();
}
setState(instance, STATES.CLOSED, true);
}
/**
* Parses a string with options
* @private
* @param str
* @returns {Object}
*/
function parseOptions(str) {
var obj = {};
var arr;
var len;
var val;
var i;
// Remove spaces before and after delimiters
str = str.replace(/\s*:\s*/g, ':').replace(/\s*,\s*/g, ',');
// Parse a string
arr = str.split(',');
for (i = 0, len = arr.length; i < len; i++) {
arr[i] = arr[i].split(':');
val = arr[i][1];
// Convert a string value if it is like a boolean
if (typeof val === 'string' || val instanceof String) {
val = val === 'true' || (val === 'false' ? false : val);
}
// Convert a string value if it is like a number
if (typeof val === 'string' || val instanceof String) {
val = !isNaN(val) ? +val : val;
}
obj[arr[i][0]] = val;
}
return obj;
}
/**
* Generates a string separated by dashes and prefixed with NAMESPACE
* @private
* @param {...String}
* @returns {String}
*/
function namespacify() {
var result = NAMESPACE;
for (var i = 0; i < arguments.length; ++i) {
result += '-' + arguments[i];
}
return result;
}
/**
* Handles the hashchange event
* @private
* @listens hashchange
*/
function handleHashChangeEvent() {
var id = location.hash.replace('#', '');
var instance;
var $elem;
var current = currentModal();
if (!id) {
// Check if we have currently opened modal and animation was completed
if (current && current.state === STATES.OPENED && current.settings.hashTracking) {
current.close();
}
} else {
if (!current || current.id !== id) {
// Catch syntax error if your hash is bad
try {
$elem = $(
'[data-' + PLUGIN_NAME + '-id="' + id + '"]'
);
} catch (err) {
}
if ($elem && $elem.length) {
instance = $[PLUGIN_NAME].lookup[$elem.data(PLUGIN_NAME)];
if (instance && instance.settings.hashTracking) {
instance.open();
}
}
}
}
}
function currentModal() {
return openModals[openModals.length - 1];
}
function removeModal(remodal) {
var index = openModals.indexOf(remodal);
if (index >= 0) {
openModals.slice(index, 1);
}
}
/**
* Remodal constructor
* @constructor
* @param {jQuery} $modal
* @param {Object} options
*/
function Remodal($modal, options) {
var $body = $(document.body);
var $appendTo = $body;
var remodal = this;
remodal.id = $modal.attr('data-' + PLUGIN_NAME + '-id');
remodal.settings = $.extend({}, DEFAULTS, options);
remodal.index = $[PLUGIN_NAME].lookup.push(remodal) - 1;
remodal.state = STATES.CLOSED;
// remodal.$overlay = $('.' + namespacify('overlay'));
if (remodal.settings.appendTo !== null && remodal.settings.appendTo.length) {
$appendTo = $(remodal.settings.appendTo);
}
if (!remodal.$overlay) {
remodal.$overlay = $('<div>').addClass(namespacify('overlay') + ' ' + namespacify('is', STATES.CLOSED)).hide();
$appendTo.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 = $('<div>')
.addClass(
namespacify('wrapper') + ' ' +
remodal.settings.modifier + ' ' +
namespacify('is', STATES.CLOSED))
.hide()
.append(remodal.$modal);
$appendTo.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);
var isWrapper = $target.hasClass(namespacify('wrapper'));
var isWithin = $target.closest('.' + namespacify('is', STATES.OPENED)).length;
if (!isWrapper && isWithin) {
return;
}
if (remodal.settings.closeOnOutsideClick) {
remodal.close();
}
});
}
/**
* Opens a modal window
* @public
*/
Remodal.prototype.open = function() {
var remodal = this;
var current;
var modalCount;
// 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 (remodal.id && remodal.settings.hashTracking) {
scrollTop = $(window).scrollTop();
location.hash = remodal.id;
}
if (!remodal.settings.stack) {
current = currentModal();
if (current && current !== remodal) {
halt(current);
}
}
modalCount = openModals.push(remodal);
remodal.$overlay.css('z-index', function(_, value) { return parseInt(value, 10) + modalCount; });
remodal.$wrapper.css('z-index', function(_, value) { return parseInt(value, 10) + modalCount; });
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;
var current;
// Check if the animation was completed
if (remodal.state === STATES.OPENING || remodal.state === STATES.CLOSING || remodal.state === STATES.CLOSED) {
return;
}
removeModal(remodal);
if (
remodal.settings.hashTracking &&
remodal.id === location.hash.substr(1)
) {
current = currentModal();
if (current) {
location.hash = current.id;
} else {
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();
if (openModals.length === 0) {
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 &&
instance.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) {
var current = currentModal();
if (current && current.settings.closeOnEscape && current.state === STATES.OPENED && e.keyCode === 27) {
current.close();
}
});
// Handles the hashchange event
$(window).on('hashchange.' + NAMESPACE, handleHashChangeEvent);
});
});