lity: ajout de lity en proof of concept (f369f743) · Validations · spip / mediabox

formulaires/inc-configurer_mediabox-lity.html

0 → 100755

+2 −0

Numéro de ligne d'origine	Numéro de ligne de diff	Ligne de diff
		<div class="editer-groupe">
		</div>

lib/lity/lity.css

0 → 100644

+209 −0

Numéro de ligne d'origine	Numéro de ligne de diff	Ligne de diff
		/*! Lity - v3.0.0-dev - 2020-04-26
		* http://sorgalla.com/lity/
		* Copyright (c) 2015-2020 Jan Sorgalla; Licensed MIT */

		.lity-active,
		.lity-active body {
		overflow: hidden;
		}

		.lity {
		z-index: 9990;
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		white-space: nowrap;
		background: #0b0b0b;
		background: rgba(0, 0, 0, .9);
		outline: none !important;
		opacity: 0;
		-webkit-transition: opacity .3s ease;
		-o-transition: opacity .3s ease;
		transition: opacity .3s ease;
		}

		.lity.lity-opened {
		opacity: 1;
		}

		.lity.lity-closed {
		opacity: 0;
		}

		.lity * {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		}

		.lity-wrap {
		z-index: 9990;
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		text-align: center;
		outline: none !important;
		}

		.lity-wrap:before {
		content: '';
		display: inline-block;
		height: 100%;
		vertical-align: middle;
		margin-right: -0.25em;
		}

		.lity-loader {
		z-index: 9991;
		color: #fff;
		position: absolute;
		top: 50%;
		margin-top: -0.8em;
		width: 100%;
		text-align: center;
		font-size: 14px;
		font-family: Arial, Helvetica, sans-serif;
		opacity: 0;
		-webkit-transition: opacity .3s ease;
		-o-transition: opacity .3s ease;
		transition: opacity .3s ease;
		}

		.lity-loading .lity-loader {
		opacity: 1;
		}

		.lity-container {
		z-index: 9992;
		position: relative;
		text-align: left;
		vertical-align: middle;
		display: inline-block;
		white-space: normal;
		max-width: 100%;
		max-height: 100%;
		outline: none !important;
		}

		.lity-content {
		z-index: 9993;
		width: 100%;
		-webkit-transform: scale(1);
		-ms-transform: scale(1);
		-o-transform: scale(1);
		transform: scale(1);
		-webkit-transition: -webkit-transform .3s ease;
		transition: -webkit-transform .3s ease;
		-o-transition: -o-transform .3s ease;
		transition: transform .3s ease;
		transition: transform .3s ease, -webkit-transform .3s ease, -o-transform .3s ease;
		}

		.lity-loading .lity-content,
		.lity-closed .lity-content {
		-webkit-transform: scale(0.8);
		-ms-transform: scale(0.8);
		-o-transform: scale(0.8);
		transform: scale(0.8);
		}

		.lity-content:after {
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		display: block;
		right: 0;
		width: auto;
		height: auto;
		z-index: -1;
		-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .6);
		box-shadow: 0 0 8px rgba(0, 0, 0, .6);
		}

		.lity-close,
		.lity-close:hover,
		.lity-close:focus,
		.lity-close:active,
		.lity-close:visited {
		z-index: 9994;
		width: 35px;
		height: 35px;

		/* Change to position: absolute to display close button inside content container */
		position: fixed;
		right: 0;
		top: 0;
		-webkit-appearance: none;
		cursor: pointer;
		text-decoration: none;
		text-align: center;
		padding: 0;
		color: #fff;
		font-style: normal;
		font-size: 35px;
		font-family: Arial, Baskerville, monospace;
		line-height: 35px;
		text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
		border: 0;
		background: none;
		-webkit-box-shadow: none;
		box-shadow: none;
		}

		.lity-close::-moz-focus-inner {
		border: 0;
		padding: 0;
		}

		.lity-close:active {
		top: 1px;
		}

		/* Image */

		.lity-image img {
		max-width: 100%;
		display: block;
		line-height: 0;
		border: 0;
		}

		/* iFrame */

		.lity-iframe .lity-container {
		width: 100%;
		max-width: 964px;
		}

		.lity-iframe-container {
		width: 100%;
		height: 0;
		padding-top: 56.25%;
		overflow: auto;
		pointer-events: auto;
		-webkit-transform: translateZ(0);
		transform: translateZ(0);
		-webkit-overflow-scrolling: touch;
		}

		.lity-iframe-container iframe {
		position: absolute;
		display: block;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .6);
		box-shadow: 0 0 8px rgba(0, 0, 0, .6);
		background: #000;
		}

		.lity-hide {
		display: none;
		}

lib/lity/lity.js

0 → 100644

+581 −0

Numéro de ligne d'origine	Numéro de ligne de diff	Ligne de diff
		/*! Lity - v3.0.0-dev - 2020-04-26
		* http://sorgalla.com/lity/
		* Copyright (c) 2015-2020 Jan Sorgalla; Licensed MIT */
		(function(window, factory) {
		if (typeof define === 'function' && define.amd) {
		define(['jquery'], function($) {
		return factory(window, $);
		});
		} else if (typeof module === 'object' && typeof module.exports === 'object') {
		module.exports = factory(window, require('jquery'));
		} else {
		window.lity = factory(window, window.jQuery \|\| window.Zepto);
		}
		}(typeof window !== "undefined" ? window : this, function(window, $) {
		'use strict';

		var document = window.document;

		var _win = $(window);
		var _deferred = $.Deferred;
		var _html = $('html');
		var _instances = [];

		var _attrAriaHidden = 'aria-hidden';
		var _dataAriaHidden = 'lity-' + _attrAriaHidden;

		var _focusableElementsSelector = 'a[href],area[href],input:not([disabled]),select:not([disabled]),textarea:not([disabled]),button:not([disabled]),iframe,object,embed,[contenteditable],[tabindex]:not([tabindex^="-"])';

		var _defaultOptions = {
		esc: true,
		handler: null,
		handlers: {
		image: imageHandler,
		inline: inlineHandler,
		iframe: iframeHandler
		},
		template: '<div class="lity" role="dialog" aria-label="Dialog Window (Press escape to close)" tabindex="-1"><div class="lity-wrap" data-lity-close role="document"><div class="lity-loader" aria-hidden="true">Loading...</div><div class="lity-container"><div class="lity-content"></div><button class="lity-close" type="button" aria-label="Close (Press escape to close)" data-lity-close>×</button></div></div></div>'
		};

		var _imageRegexp = /(^data:image\/)\|(\.(png\|jpe?g\|gif\|svg\|webp\|bmp\|ico\|tiff?)(\?\S*)?$)/i;

		var _transitionEndEvent = (function() {
		var el = document.createElement('div');

		var transEndEventNames = {
		WebkitTransition: 'webkitTransitionEnd',
		MozTransition: 'transitionend',
		OTransition: 'oTransitionEnd otransitionend',
		transition: 'transitionend'
		};

		for (var name in transEndEventNames) {
		if (el.style[name] !== undefined) {
		return transEndEventNames[name];
		}
		}

		return false;
		})();

		function transitionEnd(element) {
		var deferred = _deferred();

		if (!_transitionEndEvent \|\| !element.length) {
		deferred.resolve();
		} else {
		element.one(_transitionEndEvent, deferred.resolve);
		setTimeout(deferred.resolve, 500);
		}

		return deferred.promise();
		}

		function settings(currSettings, key, value) {
		if (arguments.length === 1) {
		return $.extend({}, currSettings);
		}

		if (typeof key === 'string') {
		if (typeof value === 'undefined') {
		return typeof currSettings[key] === 'undefined'
		? null
		: currSettings[key];
		}

		currSettings[key] = value;
		} else {
		$.extend(currSettings, key);
		}

		return this;
		}

		function parseQueryParams(params) {
		var pos = params.indexOf('?');

		if (pos > -1) {
		params = params.substr(pos + 1);
		}

		var pairs = decodeURI(params.split('#')[0]).split('&');
		var obj = {}, p;

		for (var i = 0, n = pairs.length; i < n; i++) {
		if (!pairs[i]) {
		continue;
		}

		p = pairs[i].split('=');
		obj[p[0]] = p[1];
		}

		return obj;
		}

		function appendQueryParams(url, params) {
		if (!params) {
		return url;
		}

		if ('string' === $.type(params)) {
		params = parseQueryParams(params);
		}

		if (url.indexOf('?') > -1) {
		var split = url.split('?');
		url = split.shift();

		params = $.extend(
		{},
		parseQueryParams(split[0]),
		params
		)
		}

		return url + '?' + $.param(params);
		}

		function transferHash(originalUrl, newUrl) {
		var pos = originalUrl.indexOf('#');

		if (-1 === pos) {
		return newUrl;
		}

		if (pos > 0) {
		originalUrl = originalUrl.substr(pos);
		}

		return newUrl + originalUrl;
		}

		function iframe(iframeUrl, instance, queryParams, hashUrl) {
		instance && instance.element().addClass('lity-iframe');

		if (queryParams) {
		iframeUrl = appendQueryParams(iframeUrl, queryParams);
		}

		if (hashUrl) {
		iframeUrl = transferHash(hashUrl, iframeUrl);
		}

		return '<div class="lity-iframe-container"><iframe frameborder="0" allowfullscreen allow="autoplay; fullscreen" src="' + iframeUrl + '"/></div>';
		}

		function error(msg) {
		return $('<span class="lity-error"></span>').append(msg);
		}

		function imageHandler(target, instance) {
		var desc = (instance.opener() && instance.opener().data('lity-desc')) \|\| 'Image with no description';
		var img = $('<img src="' + target + '" alt="' + desc + '"/>');
		var deferred = _deferred();
		var failed = function() {
		deferred.reject(error('Failed loading image'));
		};

		img
		.on('load', function() {
		if (this.naturalWidth === 0) {
		return failed();
		}

		deferred.resolve(img);
		})
		.on('error', failed)
		;

		return deferred.promise();
		}

		imageHandler.test = function(target) {
		return _imageRegexp.test(target);
		};

		function inlineHandler(target, instance) {
		var el, placeholder, hasHideClass;

		try {
		el = $(target);
		} catch (e) {
		return false;
		}

		if (!el.length) {
		return false;
		}

		placeholder = $('<i style="display:none !important"></i>');
		hasHideClass = el.hasClass('lity-hide');

		instance
		.element()
		.one('lity:remove', function() {
		placeholder
		.before(el)
		.remove()
		;

		if (hasHideClass && !el.closest('.lity-content').length) {
		el.addClass('lity-hide');
		}
		})
		;

		return el
		.removeClass('lity-hide')
		.after(placeholder)
		;
		}

		function iframeHandler(target, instance) {
		return iframe(target, instance);
		}

		function winHeight() {
		return document.documentElement.clientHeight
		? document.documentElement.clientHeight
		: Math.round(_win.height());
		}

		function keydown(e) {
		var current = currentInstance();

		if (!current) {
		return;
		}

		// ESC key
		if (e.keyCode === 27 && !!current.options('esc')) {
		current.close();
		}

		// TAB key
		if (e.keyCode === 9) {
		handleTabKey(e, current);
		}
		}

		function handleTabKey(e, instance) {
		var focusableElements = instance.element().find(_focusableElementsSelector);
		var focusedIndex = focusableElements.index(document.activeElement);

		if (e.shiftKey && focusedIndex <= 0) {
		focusableElements.get(focusableElements.length - 1).focus();
		e.preventDefault();
		} else if (!e.shiftKey && focusedIndex === focusableElements.length - 1) {
		focusableElements.get(0).focus();
		e.preventDefault();
		}
		}

		function resize() {
		$.each(_instances, function(i, instance) {
		instance.resize();
		});
		}

		function registerInstance(instanceToRegister) {
		if (1 === _instances.unshift(instanceToRegister)) {
		_html.addClass('lity-active');

		_win
		.on({
		resize: resize,
		keydown: keydown
		})
		;
		}

		$('body > *').not(instanceToRegister.element())
		.addClass('lity-hidden')
		.each(function() {
		var el = $(this);

		if (undefined !== el.data(_dataAriaHidden)) {
		return;
		}

		el.data(_dataAriaHidden, el.attr(_attrAriaHidden) \|\| null);
		})
		.attr(_attrAriaHidden, 'true')
		;
		}

		function removeInstance(instanceToRemove) {
		var show;

		instanceToRemove
		.element()
		.attr(_attrAriaHidden, 'true')
		;

		if (1 === _instances.length) {
		_html.removeClass('lity-active');

		_win
		.off({
		resize: resize,
		keydown: keydown
		})
		;
		}

		_instances = $.grep(_instances, function(instance) {
		return instanceToRemove !== instance;
		});

		if (!!_instances.length) {
		show = _instances[0].element();
		} else {
		show = $('.lity-hidden');
		}

		show
		.removeClass('lity-hidden')
		.each(function() {
		var el = $(this), oldAttr = el.data(_dataAriaHidden);

		if (!oldAttr) {
		el.removeAttr(_attrAriaHidden);
		} else {
		el.attr(_attrAriaHidden, oldAttr);
		}

		el.removeData(_dataAriaHidden);
		})
		;
		}

		function currentInstance() {
		if (0 === _instances.length) {
		return null;
		}

		return _instances[0];
		}

		function factory(target, instance, handlers, preferredHandler) {
		var handler = 'inline', content;

		var currentHandlers = $.extend({}, handlers);

		if (preferredHandler && currentHandlers[preferredHandler]) {
		content = currentHandlers[preferredHandler](target, instance);
		handler = preferredHandler;
		} else {
		// Run inline and iframe handlers after all other handlers
		$.each(['inline', 'iframe'], function(i, name) {
		delete currentHandlers[name];

		currentHandlers[name] = handlers[name];
		});

		$.each(currentHandlers, function(name, currentHandler) {
		// Handler might be "removed" by setting callback to null
		if (!currentHandler) {
		return true;
		}

		if (
		currentHandler.test &&
		!currentHandler.test(target, instance)
		) {
		return true;
		}

		content = currentHandler(target, instance);

		if (false !== content) {
		handler = name;
		return false;
		}
		});
		}

		return {handler: handler, content: content \|\| ''};
		}

		function Lity(target, options, opener, activeElement) {
		var self = this;
		var result;
		var isReady = false;
		var isClosed = false;
		var element;
		var content;

		options = $.extend(
		{},
		_defaultOptions,
		options
		);

		element = $(options.template);

		// -- API --

		self.element = function() {
		return element;
		};

		self.opener = function() {
		return opener;
		};

		self.content = function() {
		return content;
		};

		self.options = $.proxy(settings, self, options);
		self.handlers = $.proxy(settings, self, options.handlers);

		self.resize = function() {
		if (!isReady \|\| isClosed) {
		return;
		}

		content
		.css('max-height', winHeight() + 'px')
		.trigger('lity:resize', [self])
		;
		};

		self.close = function() {
		if (!isReady \|\| isClosed) {
		return;
		}

		isClosed = true;

		removeInstance(self);

		var deferred = _deferred();

		// We return focus only if the current focus is inside this instance
		if (
		activeElement &&
		(
		document.activeElement === element[0] \|\|
		$.contains(element[0], document.activeElement)
		)
		) {
		try {
		activeElement.focus();
		} catch (e) {
		// Ignore exceptions, eg. for SVG elements which can't be
		// focused in IE11
		}
		}

		content.trigger('lity:close', [self]);

		element
		.removeClass('lity-opened')
		.addClass('lity-closed')
		;

		transitionEnd(content.add(element))
		.always(function() {
		content.trigger('lity:remove', [self]);
		element.remove();
		element = undefined;
		deferred.resolve();
		})
		;

		return deferred.promise();
		};

		// -- Initialization --

		result = factory(target, self, options.handlers, options.handler);

		element
		.attr(_attrAriaHidden, 'false')
		.addClass('lity-loading lity-opened lity-' + result.handler)
		.appendTo('body')
		.focus()
		.on('click', '[data-lity-close]', function(e) {
		if ($(e.target).is('[data-lity-close]')) {
		self.close();
		}
		})
		.trigger('lity:open', [self])
		;

		registerInstance(self);

		$.when(result.content)
		.always(ready)
		;

		function ready(result) {
		content = $(result)
		.css('max-height', winHeight() + 'px')
		;

		element
		.find('.lity-loader')
		.each(function() {
		var loader = $(this);

		transitionEnd(loader)
		.always(function() {
		loader.remove();
		})
		;
		})
		;

		element
		.removeClass('lity-loading')
		.find('.lity-content')
		.empty()
		.append(content)
		;

		isReady = true;

		content
		.trigger('lity:ready', [self])
		;
		}
		}

		function lity(target, options, opener) {
		if (!target.preventDefault) {
		opener = $(opener);
		} else {
		target.preventDefault();
		opener = $(this);
		target = opener.data('lity-target') \|\| opener.attr('href') \|\| opener.attr('src');
		}

		var instance = new Lity(
		target,
		$.extend(
		{},
		opener.data('lity-options') \|\| opener.data('lity'),
		options
		),
		opener,
		document.activeElement
		);

		if (!target.preventDefault) {
		return instance;
		}
		}

		lity.version = '3.0.0-dev';
		lity.options = $.proxy(settings, lity, _defaultOptions);
		lity.handlers = $.proxy(settings, lity, _defaultOptions.handlers);
		lity.current = currentInstance;
		lity.iframe = iframe;

		$(document).on('click.lity', '[data-lity]', lity);

		return lity;
		}));

lib/lity/plugins/facebookvideo/facebookvideo.js

0 → 100644

+37 −0

Numéro de ligne d'origine	Numéro de ligne de diff	Ligne de diff
		/*! Lity - v3.0.0-dev - 2020-04-26
		* http://sorgalla.com/lity/
		* Copyright (c) 2015-2020 Jan Sorgalla; Licensed MIT */
		(function(window, factory) {
		if (typeof define === 'function' && define.amd) {
		define(['lity'], function(lity) {
		factory(lity);
		});
		} else if (typeof module === 'object' && typeof module.exports === 'object') {
		factory(require('lity'));
		} else {
		factory(window.lity);
		}
		}(typeof window !== "undefined" ? window : this, function(lity) {
		'use strict';

		var _regex = /(facebook\.com)\/([a-z0-9_-])\/videos\/([0-9])(.*)?$/i;

		lity.handlers('facebookvideo', function(target, instance) {
		var matches = _regex.exec(target);

		if (!matches) {
		return false;
		}

		if (0 !== target.indexOf('http')) {
		target = 'https:' + target;
		}

		return lity.iframe(
		'https://www.facebook.com/plugins/video.php?href=' + target + '&autoplay=1',
		instance,
		matches[4],
		target
		);
		});
		}));

lib/lity/plugins/facebookvideo/facebookvideo.min.js

0 → 100644

+5 −0

Numéro de ligne d'origine	Numéro de ligne de diff	Ligne de diff
		/*! Lity - v3.0.0-dev - 2020-04-26
		* http://sorgalla.com/lity/
		* Copyright (c) 2015-2020 Jan Sorgalla; Licensed MIT */

		!function(a,b){"function"==typeof define&&define.amd?define(["lity"],function(a){b(a)}):b("object"==typeof module&&"object"==typeof module.exports?require("lity"):a.lity)}("undefined"!=typeof window?window:this,function(a){"use strict";var b=/(facebook\.com)\/([a-z0-9_-])\/videos\/([0-9])(.*)?$/i;a.handlers("facebookvideo",function(c,d){var e=b.exec(c);return!!e&&(0!==c.indexOf("http")&&(c="https:"+c),a.iframe("https://www.facebook.com/plugins/video.php?href="+c+"&autoplay=1",d,e[4],c))})});
		No newline at end of file