Valider 39609d20 rédigé par tcharlss's avatar tcharlss
Parcourir les fichiers

feat: ajout d'un mode d'affichage 'sidebar' 

Permet de faire des barres d'outils latérales, des navigations, etc.
Comparable au composant 'offcanvas' de Boostrap, dont c'est inspiré.

On active de 2 façons :
* Soit au moyen de l'attribut `data-box-sidebar` sur le lien ou le bouton déclencheur : `<a class="mediabox" data-box-sidebar="end" href="#truc">`
* Soit avec l'option `sideBar` si on ouvre la modale programmatiquement

L'option peut avoir 4 valeurs : `start`, `end`, `top`, `bottom`

Il y a par défaut des dimensions arbitraires, on peut les forcer en combinant avec `data-box-width` et cie.
parent acbae3c3

javascript/spip.mediabox.js

+13 −1
Numéro de ligne d'origine Numéro de ligne de diff Ligne de diff
@@ -14,6 +14,8 @@ 
 * onOpen: 		(Function:null) The callback function used in place of SimpleModal's open

 * onShow: 		(Function:null) The callback function used after the modal dialog has opened

 * onClose: 		(Function:null) The callback function used in place of SimpleModal's close

 * className: 		(String:null) Classes ajoutées au conteneur général

 * sideBar: 		(String:null) Active le mode sidebar : start | end | top | bottom

 *

 */
@@ -35,7 +37,17 @@ 
	$.parseMediaboxOptions = function(nameSpace, opener) {

		var options = {};



		var data2options = {"width":"width","height":"height","min-width":"minWidth","min-height":"minHeight","max-width":"maxWidth","max-height":"maxHeight","caption-state":"defaultCaptionState"};

		// Attributs data-box-xx et leurs correspondances

		var data2options = {

			"width":"width",

			"height":"height",

			"min-width":"minWidth",

			"min-height":"minHeight",

			"max-width":"maxWidth",

			"max-height":"maxHeight",

			"caption-state":"defaultCaptionState",

			"sidebar":"sideBar"

		};

		var v;

		for (var o in data2options) {

			v = ($(opener).data(nameSpace+'-' + o) || '');

lity/css/lity.mediabox.css

+84 −0
Numéro de ligne d'origine Numéro de ligne de diff Ligne de diff
@@ -150,6 +150,11 @@ 
  }

}



/* Fermeture */

.box_mediabox.lity-closing:before {

	opacity: 0;

}



/* Progress bar */

.lity-group-progress-bar {

	display: none;
@@ -204,3 +209,82 @@ 
	-o-transform: scale(1) translateX(-50vw);

	transform: scale(1) translateX(-50vw);

}



/**

 * Sidebar

 */

:root {

	--mediabox-sidebar-width: 25rem;

	--mediabox-sidebar-height: calc(5rem + 20%);

	--mediabox-sidebar-close-size: 2rem;

}

.box_mediabox.lity-sidebar:before {

	opacity: 0.5;

}

.box_mediabox.lity-sidebar .lity-wrap {

	display: flex;

}

.box_mediabox.lity-sidebar .lity-container {

	position: relative;

	transition: transform 0.3s ease-in-out;

}

.box_mediabox.lity-sidebar .lity-content {

	height: 100%;

	width: 100%;

	min-width: initial;

	min-height: initial;

	transition: none !important;

	transform: none !important;

	padding-block-start: var(--mediabox-sidebar-close-size);

}

.box_mediabox.lity-sidebar .lity-close {

	position: absolute;

	color: inherit;

	width: var(--mediabox-sidebar-close-size);

	height: var(--mediabox-sidebar-close-size);

	font-size: var(--mediabox-sidebar-close-size);

	line-height: var(--mediabox-sidebar-close-size);

}

/* Gauche / droite */

.box_mediabox.lity-sidebar-inline .lity-container {

	width: var(--mediabox-sidebar-width);

	max-width: 100vw;

}

/* Gauche */

.box_mediabox.lity-sidebar-start .lity-wrap {

	justify-content: start;

}

.box_mediabox.lity-sidebar-start.lity-loading .lity-container,

.box_mediabox.lity-sidebar-start.lity-closing .lity-container {

	transform: scale(1) translateX(-100%);

}

/* Droite */

.box_mediabox.lity-sidebar-end .lity-wrap {

	justify-content: end;

}

.box_mediabox.lity-sidebar-end.lity-loading .lity-container,

.box_mediabox.lity-sidebar-end.lity-closing .lity-container {

	transform: scale(1) translateX(100%);

}

/* Haut / bas */

.box_mediabox.lity-sidebar-block .lity-wrap:before {

	margin: 0;

}

.box_mediabox.lity-sidebar-top .lity-container,

.box_mediabox.lity-sidebar-bottom .lity-container {

	height: var(--mediabox-sidebar-height);

	max-height: 100vw;

}

/* Haut */

.box_mediabox.lity-sidebar-top.lity-loading .lity-container,

.box_mediabox.lity-sidebar-top.lity-closing .lity-container {

	transform: scale(1) translateY(-100%);

}

/* Bas */

.box_mediabox.lity-sidebar-bottom .lity-wrap {

	align-items: end;

}

.box_mediabox.lity-sidebar-bottom.lity-loading .lity-container,

.box_mediabox.lity-sidebar-bottom.lity-closing .lity-container {

	transform: scale(1) translateY(100%);

}
 
 No newline at end of file

lity/js/lity.mediabox.js

+15 −0
Numéro de ligne d'origine Numéro de ligne de diff Ligne de diff
@@ -48,6 +48,21 @@ 
			var styles = [];

			var styles_container = '';

			var styles_content = '';

			// Offcanvas

			if (cfg.sideBar) {

				className += ' lity-sidebar lity-sidebar-' + cfg.sideBar;

				// Garde-fou : forcer hauteur et largeur

				if (cfg.sideBar === 'start' || cfg.sideBar === 'end') {

					className += ' lity-sidebar-inline';

					cfg.height = '100vh';

					cfg.maxHeight = '100vh';

				}

				if (cfg.sideBar === 'top' || cfg.sideBar === 'bottom') {

					className += ' lity-sidebar-block';

					cfg.width = '100vw';

					cfg.maxWidth = '100vw';

				}

			}

			if (cfg.maxWidth) {

				styles.push("max-width:" + cfg.maxWidth.replace("%","vw"));

			}

mediabox_pipelines.php

+0 −1
Numéro de ligne d'origine Numéro de ligne de diff Ligne de diff
@@ -121,7 +121,6 @@ function mediabox_config($public = null) { 
				'maxHeight' => '95%',

				'minWidth' => '600px',

				'minHeight' => '300px',

				'opacite' => '0.9',

				'defaultCaptionState' => 'expanded',

			]

		);

prive/lity/skins/spip/lity.css

+7 −0
Numéro de ligne d'origine Numéro de ligne de diff Ligne de diff
@@ -3,6 +3,13 @@ 
	opacity:0.9;

}



/* Mode sidebar */

.box_mediabox.lity-sidebar .lity-container {

	box-shadow:

		0 0 0.5em hsla(0, 0%, 0%, 0.1),

		0 0 2em hsla(0, 0%, 0%, 0.15);

}



/* focus */

.box_mediabox button[class*="lity-"]:focus{

	outline: 2px dotted #ccc;

Forge communautaire SPIP | Charte d'utilisation | Signaler un problème sur ce site