claro-8.x-1.x-dev/js/details.es6.js
js/details.es6.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 | /** * @file * Claro's polyfill enhancements for HTML5 details. */ (($, Modernizr, Drupal) => { /** * Workaround for Firefox. * * Firefox applies the focus state only for keyboard navigation. * We have to manually trigger focus to make the behavior consistent across * browsers. * * @type {Drupal~behavior} */ Drupal.behaviors.claroDetails = { attach(context) { $(context) .once( "claroDetails" ) .on( "click" , event => { if (event.target.nodeName === "SUMMARY" ) { $(event.target).trigger( "focus" ); } }); } }; /** * Workaround for non-supporting browsers. * * This shim extends HTML5 Shiv used by core. * * HTML5 Shiv toggles focused details for hitting enter. We copy that for * space key as well to make the behavior consistent across browsers. * * @type {Drupal~behavior} */ Drupal.behaviors.claroDetailsToggleShim = { attach(context) { if (Modernizr.details || !Drupal.CollapsibleDetails.instances.length) { return ; } $(context) .find( "details .details-title" ) .once( "claroDetailsToggleShim" ) .on( "keypress" , event => { const keyCode = event.keyCode || event.charCode; if (keyCode === 32) { $(event.target) .closest( "summary" ) .trigger( "click" ); event.preventDefault(); } }); } }; })(jQuery, Modernizr, Drupal); |