Commit 23fed3ac authored by Anne Cavalier's avatar Anne Cavalier

Merge branch 'develop'

parents 73a8ac54 ba9c276d
......@@ -4,7 +4,7 @@
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Scampi - Ressources du PiDILA</title>
<title>Scampi - Ressources du Pidila</title>
<meta name="description" content="Bibliothèque de composants conformes à la checklist Pidila">
<script src="../js/libs/modernizr.js"></script>
<link rel="stylesheet" href="scampi.css" />
......@@ -38,7 +38,7 @@
<div class="container">
<div class="site-id">
<a href="#">
<img class="site-logo" src="scampi.png" alt="">
<img class="site-logo" src="scampi.png" alt="" width="160">
<p class="site-title">Page de test Scampi et modules</p>
</a>
</div>
......@@ -68,6 +68,7 @@
</div>
<div class="container main-container">
<div class="sg-comment">
<p>Un exemple de commentaire dépliable</p>
</div>
......@@ -648,7 +649,7 @@
<!--
src ainsi juste pour les test ; dans un vrai projet on regroupera les scripts utilisés dans un seul répertoire qu'on concaténera puis minifiera -->
<script src="../js/libs/jquery-2.2.0.min.js"></script>
<script src="../js/main/anchor-focus.js"></script>
<script src="../modules/anchor-focus/anchor-focus.js"></script>
<script src="../modules/collapse/collapse.js"></script>
<script src="../modules/menu-simple/menu-simple.js"></script>
<script src="../modules/skip-link/skip-link.js"></script>
......
_test/scampi.png

10.8 KB | W: | H:

_test/scampi.png

8.42 KB | W: | H:

_test/scampi.png
_test/scampi.png
_test/scampi.png
_test/scampi.png
  • 2-up
  • Swipe
  • Onion skin
/*! v0.1.2 */
/*! v0.1.4 */
/*! Licence MIT ou CeCILL-B */
......@@ -11,13 +11,6 @@ Ces fichiers sont à importer tels quels.
- **jquery.min.js** (optionnel selon votre projet) : plusieurs de nos modules s’appuient sur jquery. Si vous utilisez une autre bibliothèque javascript pensez à adapter les scripts des modules.
- **modernizr.js** ajoute des classes sur `<body>` qui permettront d’appliquer des règles en fonction des *features* supportées.
### main
Ces fichiers sont à compiler et à importer en un seul fichier.
- **anchor-focus.js** règle un bug webkit où le focus sur les liens ancrés n’est pas effectif.
- et tous les éventuels scripts associés à des modules.
## Ordre des imports
**modernizr.js** doit être importé dans le head.
......
......@@ -5,6 +5,6 @@
Présentation
-------------
Le script anchor_focus.js règle un bug présent dans Chrome/Safari/IE qui empêche le déplacement du focus à partir d’un lien ancré.
Le script anchor-focus.js règle un bug présent dans Chrome/Safari/IE qui empêche le déplacement du focus à partir d’un lien ancré.
Plus d’informations : [skip-navigation-link-not-working-in-google-chrome](http://stackoverflow.com/questions/3572843/skip-navigation-link-not-working-in-google-chrome/6188217#6188217)
......@@ -13,8 +13,8 @@
// // Exemple de règles pour visualiser la fonctionalité
// // plier /déplier
.expandmore__button[aria-expanded=false]:before,
.expandmore__button[data-expanded=false]:before {
.expandmore__button:before,
.expandmore__button:before {
content : '+ ';
speak: none;
}
......
$(document).ready(function(){
/*
* jQuery simple and accessible hide-show system (collapsible regions), using ARIA
* Website: http://a11y.nicolas-hoffmann.net/hide-show/
* License MIT: https://github.com/nico3333fr/jquery-accessible-hide-show-aria/blob/master/LICENSE
*/
// loading expand paragraphs
// these are recommended settings by a11y experts. You may update to fulfill your needs, but be sure of what you’re doing.
var attr_control = 'data-controls',
attr_expanded = 'aria-expanded',
attr_labelledby = 'data-labelledby',
attr_hidden = 'data-hidden',
$expandmore = $('.js-expandmore'),
$to_expand = $('.js-to_expand'),
$body = $('body'),
delay = 1500;
if ( $expandmore.length && $to_expand.length ) { // if there are at least one :)
$expandmore.each( function(index_to_expand) {
var $this = $(this) ,
index_lisible = index_to_expand+1,
options = $this.data(),
$hideshow_prefix_classes = typeof options.hideshowPrefixClass !== 'undefined' ? options.hideshowPrefixClass + '-' : '',
$to_expand = $this.next(".js-to_expand"),
$expandmore_text = $this.html();
$this.html( '<button class="' + $hideshow_prefix_classes + 'expandmore__button js-expandmore-button">' + $expandmore_text + '</button>' );
$button = $this.children('.js-expandmore-button');
$to_expand.addClass( $hideshow_prefix_classes + 'expandmore__to_expand' ).stop().delay( delay ).queue( function() {
var $this = $(this);
if ($this.hasClass('js-first_load')) {
$this.removeClass('js-first_load');
jQuery(document).ready(function($) {
/*
* jQuery simple and accessible hide-show system (collapsible regions), using ARIA
* @version v1.7.0
* Website: https://a11y.nicolas-hoffmann.net/hide-show/
* License MIT: https://github.com/nico3333fr/jquery-accessible-hide-show-aria/blob/master/LICENSE
*/
// loading expand paragraphs
// these are recommended settings by a11y experts. You may update to fulfill your needs, but be sure of what you’re doing.
var attr_control = 'data-controls',
attr_expanded = 'aria-expanded',
attr_labelledby = 'data-labelledby',
attr_hidden = 'data-hidden',
$expandmore = $('.js-expandmore'),
$body = $('body'),
delay = 1500,
hash = window.location.hash.replace("#", ""),
multiexpandable = true,
expand_all_text = 'Tout déplier',
collapse_all_text = 'Tout replier';
if ($expandmore.length) { // if there are at least one :)
$expandmore.each(function(index_to_expand) {
var $this = $(this),
index_lisible = index_to_expand + 1,
options = $this.data(),
$hideshow_prefix_classes = typeof options.hideshowPrefixClass !== 'undefined' ? options.hideshowPrefixClass + '-' : '',
$to_expand = $this.next(".js-to_expand"),
$expandmore_text = $this.html();
$this.html('<button type="button" class="' + $hideshow_prefix_classes + 'expandmore__button js-expandmore-button">' + $expandmore_text + '</button>');
var $button = $this.children('.js-expandmore-button');
$to_expand.addClass($hideshow_prefix_classes + 'expandmore__to_expand').stop().delay(delay).queue(function() {
var $this = $(this);
if ($this.hasClass('js-first_load')) {
$this.removeClass('js-first_load');
}
});
$button.attr('id', 'label_expand_' + index_lisible);
$button.attr(attr_control, 'expand_' + index_lisible);
$button.attr(attr_expanded, 'false');
$to_expand.attr('id', 'expand_' + index_lisible);
$to_expand.attr(attr_hidden, 'true');
$to_expand.attr(attr_labelledby, 'label_expand_' + index_lisible);
// quick tip to open (if it has class is-opened or if hash is in expand)
if ($to_expand.hasClass('is-opened') || (hash !== "" && $to_expand.find($("#" + hash)).length)) {
$button.addClass('is-opened').attr(attr_expanded, 'true');
$to_expand.removeClass('is-opened').removeAttr(attr_hidden);
}
});
$button.attr('id', 'label_expand_' + index_lisible);
$button.attr(attr_control, 'expand_' + index_lisible);
$button.attr(attr_expanded, 'false');
$to_expand.attr('id', 'expand_' + index_lisible);
$to_expand.attr(attr_hidden, 'true');
$to_expand.attr(attr_labelledby, 'label_expand_' + index_lisible);
});
// quick tip to open
if ($to_expand.hasClass('is-opened') ){
$button.addClass('is-opened').attr(attr_expanded, 'true');
$to_expand.removeClass('is-opened').removeAttr(attr_hidden);
}
});
}
}
$body.on('click', '.js-expandmore-button', function(event) {
var $this = $(this),
$destination = $('#' + $this.attr(attr_control));
if ($this.attr(attr_expanded) === 'false') {
$body.on( 'click', '.js-expandmore-button', function( event ) {
var $this = $(this),
$destination = $( '#' + $this.attr(attr_control) );
if (multiexpandable === false) {
$('.js-expandmore-button').removeClass('is-opened').attr(attr_expanded, 'false');
$('.js-to_expand').attr(attr_hidden, 'true');
}
$this.addClass('is-opened').attr(attr_expanded, 'true');
$destination.removeAttr(attr_hidden);
} else {
$this.removeClass('is-opened').attr(attr_expanded, 'false');
$destination.attr(attr_hidden, 'true');
}
event.preventDefault();
if ($this.attr(attr_expanded) === 'false') {
$this.addClass('is-opened').attr(attr_expanded, 'true');
$destination.removeAttr(attr_hidden);
}
else {
$this.removeClass('is-opened').attr(attr_expanded, 'false');
$destination.attr(attr_hidden, 'true');
}
});
event.preventDefault();
$body.on('click keydown', '.js-expandmore', function(event) {
var $this = $(this),
$target = $(event.target),
$button_in = $this.find('.js-expandmore-button');
});
if (!$target.is($button_in) && !$target.closest($button_in).length) {
$body.on( 'click keydown', '.js-expandmore', function( event ) {
var $this = $(this),
$target = $(event.target),
$button_in = $this.find( '.js-expandmore-button' );
if (event.type === 'click') {
$button_in.trigger('click');
return false;
}
if (event.type === 'keydown' && (event.keyCode === 13 || event.keyCode === 32)) {
$button_in.trigger('click');
return false;
}
if ( !$target.is($button_in) && !$target.closest($button_in).length ) {
}
if ( event.type == 'click' ){
$button_in.trigger('click');
return false;
}
if ( event.type == 'keydown' && (event.keyCode==13 || event.keyCode==32 ) ){
$button_in.trigger('click');
return false;
}
}
});
$body.on('click keydown', '.js-expandmore-all', function(event) {
var $this = $(this),
is_expanded = $this.attr('data-expand'),
$all_buttons = $('.js-expandmore-button'),
$all_destinations = $('.js-to_expand');
if (
event.type === 'click' ||
(event.type === 'keydown' && (event.keyCode === 13 || event.keyCode === 32))
) {
if (is_expanded === 'true') {
$all_buttons.addClass('is-opened').attr(attr_expanded, 'true');
$all_destinations.removeAttr(attr_hidden);
$this.attr('data-expand', 'false').html(collapse_all_text);
} else {
$all_buttons.removeClass('is-opened').attr(attr_expanded, 'false');
$all_destinations.attr(attr_hidden, 'true');
$this.attr('data-expand', 'true').html(expand_all_text);
}
}
});
});
});
......@@ -21,6 +21,11 @@ Pour que le script fonctionne correctement, le code html doit répondre à deux
Les styles présents dans le module sont les styles minimaux pour le bon fonctionnement du module.
Il est possible d’ajouter un bouton pour déplier / replier tous les blocs de la page.
Le texte affiché dans ce bouton se configure dans le fichier javascript.
### Script associé
Pour que ce module fonctionne, le script associé doit être appelé dans le pied de page, avant la fermeture du `body`.
......@@ -31,15 +36,15 @@ Exemple
-------
````html
<!-- fermé par défaut -->
<h2 class="expandmore">Une question ?</h2>
<div class="to-expand">
<button class="js-expandmore-all" data-expand="true">Tout déplier</button>
<h2 class="js-expandmore">Une question ?</h2>
<div class="js-to_expand">
<p>Le contenu caché peut être constitué de tout élément html : paragraphes, titres, tableaux, images…</p>
</div>
<!-- ouvert par défaut -->
<h2 class="expandmore">Une autre question ?</h2>
<div class="to-expand is-opened">
<h2 class="js-expandmore">Une autre question ?</h2>
<div class="js-to_expand is-opened">
<p>Ce contenu repliable est ouvert par défaut.</p>
</div>
````
{
"name": "scampi",
"version": "0.1.3",
"version": "0.1.4",
"description": "Scampi est un ensemble de composants sass/js/html accessibles et responsive développés à la DILA (Direction de l’information légale et administrative). Il vise à être utilisé en interne et par nos prestataires ou partenaires.",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment