C’est par ici: [Magento 2] Vérifier qu’un utilisateur client est connecté à son compte et afficher son prénom dans un template PHTML.
Voir aussi: [Magento 2] Comment inclure et utiliser un fichier JS custom avec requireJS.
Tagjs
Source: How to include and use custom js file with require js in magento2.
Source: Four Ways to Add JavaScript to Magento 2.
En-dehors d’un thème, en créant un module
Se référer à la documentation officielle de Magento 2 pour voir comment créer un nouveau module. Dans mon exemple, le vendor s’appelle Naked et le module s’appelle HelloWorld.
Dans app/code/Naked/HelloWorld/ créer une arborescence de dossiers et les trois fichiers suivants:
view/frontend/requirejs-config.jsview/frontend/web/js/hello-world.jsview/frontend/web/js/methods.js
view/frontend/requirejs-config.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
var config = { // You can also set the map property and define the prefixes for various modules. // In future, we can use these prefixes to connect the required JS modules in other modules. map: { '*': { helloWorld: 'Naked_HelloWorld/js/hello-world', methods: 'Naked_HelloWorld/js/methods', } }, // In this case, the scripts we have connected will work on all pages of the module. // Usually, some third-party libraries are connected in this way. deps: [ 'Naked_HelloWorld/js/hello-world', ] }; |
Les scripts déclarés sous la variable deps vont fonctionner immédiatement et sur toutes les pages du site. Inutile d’initialiser quoi que ce soit dans un fichier *.phtml.
view/frontend/web/js/hello-world.js
|
1 2 3 4 5 6 7 8 9 10 |
define(['jquery', 'methods'], function($, methods) { "use strict"; console.log('hello world!'); $('a.logo').on('click', function(e){ e.preventDefault(); methods.showAlert('Logo clicked!'); }); }); |
view/frontend/web/js/methods.js
|
1 2 3 4 5 6 7 8 9 10 11 |
define(['jquery'], function($) { var methods = {}; methods.showAlert = function(arg) { alert(arg); } return methods; }); |
Article de lullabot.com: Importing CSS Breakpoints Into JavaScript. Demo Codepen.
- ANIMISTA IS A PLACE WHERE YOU CAN PLAY WITH A COLLECTION OF PRE-MADE CSS ANIMATIONS, TWEAK THEM AND GET ONLY THOSE YOU WILL ACTUALLY USE.
- Animate.css – A cross-browser library of CSS animations. As easy to use as an easy thing.
- Motion UI – A Sass library for creating flexible CSS transitions and animations.
Ressources généralistes sur le sujet :
Supprimer les CSS Core :
Peut se faire par le biais du hook_css_alter via le fichier template.php du thème.
Attention: dans le cas ou certaines CSS sont déclarées comme étant des dépendances du module contrib, il ne faut pas déclarer le module contrib mais ce qui semblent être des sous-modules… (en commentaires dans l’exemple ci-dessous, les déclarations qui ne fonctionnent pas) :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
// unset($css[drupal_get_path('module', 'contrib').'/date/date_api/date.css']); // unset($css[drupal_get_path('module', 'contrib').'/date/date_popup/themes/datepicker.1.7.css']); unset($css[drupal_get_path('module', 'date').'/date_api/date.css']); unset($css[drupal_get_path('module', 'date').'/date_popup/themes/datepicker.1.7.css']); // unset($css[drupal_get_path('module', 'contrib').'/logintoboggan/logintoboggan.css']); unset($css[drupal_get_path('module', 'logintoboggan').'/logintoboggan.css']); // unset($css[drupal_get_path('module', 'contrib').'/css/views.css']); // unset($css[drupal_get_path('module', 'contrib').'/css/ckeditor.css']); // unset($css[drupal_get_path('module', 'contrib').'/media/modules/media_wysiwyg/css/media_wysiwyg.base.css']); // unset($css[drupal_get_path('module', 'contrib').'/admin_menu/admin_menu.css']); // unset($css[drupal_get_path('module', 'contrib').'/admin_menu/admin_menu.uid1.css']); unset($css[drupal_get_path('module', 'views').'/css/views.css']); unset($css[drupal_get_path('module', 'ckeditor').'/css/ckeditor.css']); unset($css[drupal_get_path('module', 'media_wysiwyg').'/css/media_wysiwyg.base.css']); unset($css[drupal_get_path('module', 'admin_menu').'/admin_menu.css']); unset($css[drupal_get_path('module', 'admin_menu').'/admin_menu.uid1.css']); // unset($css[drupal_get_path('module', 'contrib').'/css/ctools.css']); unset($css[drupal_get_path('module', 'ctools').'/css/ctools.css']); // unset($css[drupal_get_path('module', 'contrib').'/adminimal_admin_menu/adminimal_admin_menu.css']); // unset($css[drupal_get_path('module', 'contrib').'/adminimal_admin_menu/js/slicknav/slicknav.css']); unset($css[drupal_get_path('module', 'adminimal_admin_menu').'/adminimal_admin_menu.css']); unset($css[drupal_get_path('module', 'adminimal_admin_menu').'/js/slicknav/slicknav.css']); |
…ce qui nous donne au propre :
|
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 |
function my_theme_css_alter(&$css) { /** * Drupal Tutorial: Remove System CSS and JS files * https://www.jnorton.co.uk/drupal-tutorial-remove-system-css-js-files */ unset($css[drupal_get_path('module', 'system').'/system.base.css']); unset($css[drupal_get_path('module', 'system').'/system.menus.css']); unset($css[drupal_get_path('module', 'system').'/system.messages.css']); unset($css[drupal_get_path('module', 'system').'/system.theme.css']); unset($css[drupal_get_path('module', 'contextual').'/contextual.css']); unset($css[drupal_get_path('module', 'comment').'/comment.css']); unset($css[drupal_get_path('module', 'date').'/date_api/date.css']); unset($css[drupal_get_path('module', 'date').'/date_popup/themes/datepicker.1.7.css']); unset($css[drupal_get_path('module', 'field').'/theme/field.css']); unset($css[drupal_get_path('module', 'logintoboggan').'/logintoboggan.css']); unset($css[drupal_get_path('module', 'node').'/node.css']); unset($css[drupal_get_path('module', 'search').'/search.css']); unset($css[drupal_get_path('module', 'user').'/user.css']); unset($css[drupal_get_path('module', 'views').'/css/views.css']); unset($css[drupal_get_path('module', 'ckeditor').'/css/ckeditor.css']); unset($css[drupal_get_path('module', 'media_wysiwyg').'/css/media_wysiwyg.base.css']); unset($css[drupal_get_path('module', 'admin_menu').'/admin_menu.css']); unset($css[drupal_get_path('module', 'admin_menu').'/admin_menu.uid1.css']); unset($css[drupal_get_path('module', 'ctools').'/css/ctools.css']); unset($css[drupal_get_path('module', 'adminimal_admin_menu').'/adminimal_admin_menu.css']); unset($css[drupal_get_path('module', 'adminimal_admin_menu').'/js/slicknav/slicknav.css']); } |
Charger/Ne pas charger certaines ressources CSS/JS si l’utilisateur est anonyme/connecté:
Avec les hooks user_is_anonymous et user_is_logged_in:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
function my_theme_css_alter(&$css) { // On dégage la CSS suivante, peu importe le statut anonyme/connecté de l'utilisateur : unset($css[drupal_get_path('module', 'system').'/system.base.css']); // On dégage la CSS suivante si l'utilisateur est anonyme : if(user_is_anonymous()) { unset($css[drupal_get_path('module', 'contextual').'/contextual.css']); } // On dégage la CSS suivante si l'utilisateur est connecté : if(user_is_logged_in()) { unset($css[drupal_get_path('module', 'comment').'/comment.css']); } } |
Remplacer la version de jQuery par défaut (via CDN)
- [Doc officielle Drupal 7] Using Newer Versions of jQuery
- Drupal 7 override jquery js file in custom theme
Peut se faire par le biais du hook_js_alter via le fichier template.php du thème :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
/** * Drupal 7 override jquery js file in custom theme * https://stackoverflow.com/questions/22900307/drupal-7-override-jquery-js-file-in-custom-theme#answer-22931513 */ function my_theme_js_alter(&$js) { $jqKey = "my-new-jquery"; // a key for new jquery file entry $js[$jqKey] = $js['misc/jquery.js']; // copy the default jquery settings, so you don't have to re-type them. $js[$jqKey]['data'] = "https://code.jquery.com/jquery-2.1.0.min.js"; // the path for new jquery file. $js[$jqKey]['version'] = '2.1.0'; // your jquery version. unset($js['misc/jquery.js']); // delete drupal's default jquery file. } |
- Doc officielle CSS : function drupal_add_css
- Doc officielle JS :
Voir notamment au niveau de la méthode path_to_theme() et de l’option group pour choisir l’ordre de chargement des fichiers.
|
1 2 3 4 5 6 |
function <my_theme>_preprocess_page(&$variables) { // On the front page, add another CSS file to the CSS_THEME group if ($variables['is_front'] == TRUE) { drupal_add_css(path_to_theme(). '/css/front.css', array('group' => CSS_THEME)); } } |
On peut également affiner la position de chargement de la CSS avec l’option weight :
|
1 2 3 4 5 6 |
function <my_theme>_preprocess_page(&$variables) { // On the front page, add another CSS file if ($variables['is_front'] == TRUE) { drupal_add_css(path_to_theme(). '/css/front.css', array('group' => CSS_THEME, 'weight' => -10)); } } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
name = My theme description = bla, bla, bla... core = 7.x ; CSS stylesheets[all][] = css/reset.css stylesheets[all][] = css/960.css stylesheets[all][] = css/main.css ; JS scripts[] = js/jquery.autofill.js scripts[] = js/javascript.js ; Regions regions[header] = Header regions[content] = Content regions[sidebar_first] = First Sidebar regions[sidebar_second] = Second Sidebar regions[page_top] = Page Top regions[page_bottom] = Page Bottom regions[footer_left] = Footer left regions[footer_right] = Footer right regions[help] = Help |
Alternative intéressante: @include-media – Simple, elegant and maintainable media queries in Sass. Couplé à include-media-export – An include-media plugin for exporting breakpoints from Sass to JavaScript.
Avant propos : certains des CMS les plus récents du marché proposent nativement des solutions équivalentes à Sync MQ pour gérer et/ou synchroniser l’exécution de media queries CSS et JS. Pour d’évidentes raisons de compréhension et de maintenabilité de votre code source, je vous conseille de vous tourner plutôt vers ces solutions lorsqu’elles existent.
Sync MQ: pour quoi faire?
Qu’on démarre un projet de site internet de zéro ou qu’un client nous demande une nouvelle mouture, à destination des supports mobiles, de son site existant (qui tourne sous une solution qui ne prend pas en charge les concepts de responsive design), la question de la gestion et de l’adaptation de l’affichage sur différents périphériques de navigation (ordinateurs, tablettes, smartphones) se pose rapidement. Si l’utilisation de media queries s’impose immédiatement comme une évidence dans nos feuilles de styles qu’en est-il en revanche de l’exécution, pour un support donné, de code JavaScript? Et existe-t’il un moyen simple de gérer, d’optimiser votre code CSS (ou LESS, ou SASS, ou autre préprocesseur…) et JS et de synchroniser leur exécution ?
C’est pour répondre à cette double problématique qu’intervient Sync MQ dont le concept est :
- de simplifier l’écriture et la déclaration de media queries par rapport aux méthodes traditionnelles,
- de faciliter la synchronisation de l’exécution de media queries tant au niveau de vos styles que du code JavaScript.
Les sources de Sync MQ que vous trouverez sous GitHub à l’heure ou j’écris ces lignes exploitent des dépendances telles qu’Enquire JS et le composant Grid de Bootstrap 3 parce que c’est celles avec lesquelles j’aime travailler. Mais Sync MQ est avant tout un concept que rien ne vous empêche d’intégrer à vos propres habitudes de travail. Vous pouvez tout-à-fait remplacer Enquire JS par la brique mq de Modernizr ou le composant Grid de Bootstrap 3 par celui proposé par le framework Foundation 4.
De l’art de bien choisir ses points de rupture.
=> Web Stats
Et mon code JavaScript dans tout ça?
Quel intérêt de faire appel à une dépendance telle qu’Enquire JS alors qu’une ligne de code JavaScript suffirait à exécuter du code pour un support donné?
Pour un point de rupture donné (mettons, 800px) et suivant le navigateur utilisé, la méthode $(window).width() de jQuery et les Media Queries CSS3 ne sont pas exécutées systématiquement au même moment.
|
1 2 3 4 5 |
$(window).resize(function(){ if ($(window).width() <= 800){ // faire quelque chose ici... } }); |
A Code Example of the Difference Between jQuery Window Width and CSS Media Query width measurements.
Dans cet exemple, l’auteur démontre que […].
On commence par créer des variables aux libellés parlants pour remplacer le code (moins digeste) traditionnellement utilisé en CSS pour la déclaration de media queries.
|
1 2 3 4 5 6 7 |
$bpMobile: "(max-width: #{$screen-sm-max})"; $bpSmartphone: "(max-width: #{$screen-xs-max})"; $bpTablet: "(min-width: #{$screen-sm-min}) and (max-width: #{$screen-sm-max})"; $bpTabletUp: "(min-width: #{$screen-sm-min})"; $bpDesktop: "(min-width: #{$screen-md-min})"; $bpSmallDesktop: "(min-width: #{$screen-md-min}) and (max-width: #{$screen-md-max})"; $bpLargeDesktop: "(min-width: #{$screen-lg-min})"; |
Comme décrit plus haut, les points de rupture retenus ne ciblent pas uniquement un ou plusieurs supports donnés (iPhone, iPad, Amstrad CPC) en fonction de leurs résolutions mais :
- des ensembles moyens de résolutions rencontrées par périphériques (Smartphone, Tablette, Desktop),
- les résolutions que les clients nous demandent le plus souvent de cibler.
Les valeurs affectées à ces variables aux libellés allégés font directement référence à celles des points de rupture définis dans les variables du framework Bootstrap 3 (version SASS).
|
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 |
//== Media queries breakpoints // //## Define the breakpoints at which your layout will change, adapting to different screen sizes. // Extra small screen / phone //** Deprecated `$screen-xs` as of v3.0.1 $screen-xs: 480px !default; //** Deprecated `$screen-xs-min` as of v3.2.0 $screen-xs-min: $screen-xs !default; //** Deprecated `$screen-phone` as of v3.0.1 $screen-phone: $screen-xs-min !default; // Small screen / tablet //** Deprecated `$screen-sm` as of v3.0.1 $screen-sm: 768px !default; $screen-sm-min: $screen-sm !default; //** Deprecated `$screen-tablet` as of v3.0.1 $screen-tablet: $screen-sm-min !default; // Medium screen / desktop //** Deprecated `$screen-md` as of v3.0.1 $screen-md: 992px !default; $screen-md-min: $screen-md !default; //** Deprecated `$screen-desktop` as of v3.0.1 $screen-desktop: $screen-md-min !default; // Large screen / wide desktop //** Deprecated `$screen-lg` as of v3.0.1 $screen-lg: 1200px !default; $screen-lg-min: $screen-lg !default; //** Deprecated `$screen-lg-desktop` as of v3.0.1 $screen-lg-desktop: $screen-lg-min !default; // So media queries don't overlap when required, provide a maximum $screen-xs-max: ($screen-sm-min - 1) !default; $screen-sm-max: ($screen-md-min - 1) !default; $screen-md-max: ($screen-lg-min - 1) !default; |
Ces mêmes valeurs sont immédiatement ré-exploitées dans Bootstrap pour construire les styles du composant Grid.
Aussi, on retrouvera dans Sync MQ parmi les habituelles Smartphone, Tablette et Desktop, des media queries englobant:
- l’ensemble des Mobiles (
$bpMobilepour Smartphone et Tablette), - les Tablettes et au-delà (
$bpTabletUp), - les petits et larges Desktops séparément (
$bpSmallDesktopet$bpLargeDesktop).
Pour cibler par exemple les résolutions à partir des tablettes et au-delà, au lieu d’écrire:
|
1 |
@media (min-width: #{$screen-sm-min}) { body{ border: 10px solid tomato; } } |
J’écris désormais:
|
1 |
@media #{$bpTabletUp} { body{ border: 10px solid tomato; } } |
Quelques astuces d’utilisation:
- Lorsque vous choisissez un plug-in JS amené à être exécuté en fonction d’un point de rupture, veillez à ce qu’il possède une méthode
.destroy()et/ou.reload(). C’est le cas, par exemple, du carousel BxSlider. La présence de ce type d’options vous dispensera de nettoyer vous-même un DOM modifié par l’exécution d’un plug-in lorsque vous souhaiterez en annuler les effets pour une vue donnée. - Trois résolutions sont en réalité disponibles pour Amstrad CPC: 160×200 pixels avec 16 couleurs, 320×200 pixels avec 4 couleurs, et 640×200 pixels avec 2 couleurs. De quoi rentabiliser immédiatement l’utilisation de Sync MQ.
Un peu de documentation:
- enquire JS
- Bootsrap 3 Grid component mediaqueries
- Bootstrap SASS variables
- Defining Breakpoints sur Open Web
- Where And How To Set Breakpoints In Media Queries
- Firing Responsive jQuery Functions based on CSS Media Queries Rather than Window Width – jQuery
$(window).width()and CSS3 Media Queries do not always match. - Abnormal media query handling in Fire Fox
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<p><a href="http://getbootstrap.com/css/#grid">Bootstrap 3 grid component documentation</a></p> <h2>CSS mediaqueries :</h2> <div class="css-mediaqueries"> <p class="bp bpMobile">bpMobile</p> <p class="bp bpSmartphone">bpSmartphone</p> <p class="bp bpTablet">bpTablet</p> <p class="bp bpTabletUp">bpTabletUp (Tablet + up)</p> <p class="bp bpDesktop">bpDesktop</p> <p class="bp bpSmallDesktop">bpSmallDesktop</p> <p class="bp bpLargeDesktop">bpLargeDesktop</p> </div> <h2>JS mediaqueries :</h2> <div class="js-mediaqueries"> <p class="bp js-bpMobile">bpMobile</p> <p class="bp js-bpSmartphone">bpSmartphone</p> <p class="bp js-bpTablet">bpTablet</p> <p class="bp js-bpTabletUp">bpTabletUp (Tablet + up)</p> <p class="bp js-bpDesktop">bpDesktop</p> <p class="bp js-bpSmallDesktop">bpSmallDesktop</p> <p class="bp js-bpLargeDesktop">bpLargeDesktop</p> </div> |
CSS (SASS)
|
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 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 |
// from: https://github.com/twbs/bootstrap-sass/blob/3.3-stable/assets/stylesheets/bootstrap/_variables.scss#L286 //== Media queries breakpoints // //## Define the breakpoints at which your layout will change, adapting to different screen sizes. // Extra small screen / phone //** Deprecated `$screen-xs` as of v3.0.1 $screen-xs: 480px !default; //** Deprecated `$screen-xs-min` as of v3.2.0 $screen-xs-min: $screen-xs !default; //** Deprecated `$screen-phone` as of v3.0.1 $screen-phone: $screen-xs-min !default; // Small screen / tablet //** Deprecated `$screen-sm` as of v3.0.1 $screen-sm: 768px !default; $screen-sm-min: $screen-sm !default; //** Deprecated `$screen-tablet` as of v3.0.1 $screen-tablet: $screen-sm-min !default; // Medium screen / desktop //** Deprecated `$screen-md` as of v3.0.1 $screen-md: 992px !default; $screen-md-min: $screen-md !default; //** Deprecated `$screen-desktop` as of v3.0.1 $screen-desktop: $screen-md-min !default; // Large screen / wide desktop //** Deprecated `$screen-lg` as of v3.0.1 $screen-lg: 1200px !default; $screen-lg-min: $screen-lg !default; //** Deprecated `$screen-lg-desktop` as of v3.0.1 $screen-lg-desktop: $screen-lg-min !default; // So media queries don't overlap when required, provide a maximum $screen-xs-max: ($screen-sm-min - 1) !default; $screen-sm-max: ($screen-md-min - 1) !default; $screen-md-max: ($screen-lg-min - 1) !default; // Breakpoints aliases $bpSmartphone: "(max-width: #{$screen-xs-max})"; $bpTablet: "(min-width: #{$screen-sm-min}) and (max-width: #{$screen-sm-max})"; $bpSmallDesktop: "(min-width: #{$screen-md-min}) and (max-width: #{$screen-md-max})"; $bpLargeDesktop: "(min-width: #{$screen-lg-min})"; $bpMobile: "(max-width: #{$screen-sm-max})"; $bpTabletUp: "(min-width: #{$screen-sm-min})"; $bpDesktop: "(min-width: #{$screen-md-min})"; // See it in action : .css-mediaqueries .bp{ display: none; } @media #{$bpMobile} { .bp.bpMobile{ display: block; } } @media #{$bpSmartphone} { .bp.bpSmartphone{ display: block; } } @media #{$bpTablet} { .bp.bpTablet{ display: block; } } @media #{$bpTabletUp} { .bp.bpTabletUp{ display: block; } } @media #{$bpDesktop} { .bp.bpDesktop{ display: block; } } @media #{$bpSmallDesktop} { .bp.bpSmallDesktop{ display: block; } } @media #{$bpLargeDesktop} { .bp.bpLargeDesktop{ display: block; } } |
JS (enquire, jQuery)
|
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 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 |
// enquire JS documentation : http://wicky.nillia.ms/enquire.js/ // breakpoints global vars // bootstrap grid breakpoints values // from: https://github.com/twbs/bootstrap-sass/blob/3.3-stable/assets/stylesheets/bootstrap/_variables.scss#L286 var bs_screen_xs_min = '480'; bs_screen_sm_min = '768'; bs_screen_md_min = '992'; bs_screen_lg_min = '1200'; bs_screen_xs_max = bs_screen_sm_min - 1; bs_screen_sm_max = bs_screen_md_min - 1; bs_screen_md_max = bs_screen_lg_min - 1; // enquire JS breakpoints aliases // (as seen on Bootstrap documentation: http://getbootstrap.com/css/#grid-media-queries) bpSmartphone = 'screen and (max-width: '+ bs_screen_xs_max +'px)'; bpTablet = 'screen and (min-width: '+ bs_screen_sm_min +'px) and (max-width: '+ bs_screen_sm_max +'px)'; bpSmallDesktop = 'screen and (min-width: '+ bs_screen_md_min +'px) and (max-width: '+ bs_screen_md_max +'px)'; bpLargeDesktop = 'screen and (min-width: '+ bs_screen_lg_min +'px)'; bpMobile = 'screen and (max-width: '+ bs_screen_sm_max +'px)'; bpTabletUp = 'screen and (min-width: '+ bs_screen_sm_min +'px)'; bpDesktop = 'screen and (min-width: '+ bs_screen_md_min +'px)'; function resetJSDOM(){ $('.js-mediaqueries p.bp').hide(); } resetJSDOM(); // enquire JS enquire.register(bpMobile, { match : function() { // console.log('bpMobile'); $('p.bp.js-bpMobile').show(); }, unmatch : function() { $('p.bp.js-bpMobile').hide(); } }); enquire.register(bpSmartphone, { match : function() { // console.log('bpSmartphone'); $('p.bp.js-bpSmartphone').show(); }, unmatch : function() { $('p.bp.js-bpSmartphone').hide(); } }); enquire.register(bpTablet, { match : function() { // console.log('bpTablet'); $('p.bp.js-bpTablet').show(); }, unmatch : function() { $('p.bp.js-bpTablet').hide(); } }); enquire.register(bpTabletUp, { match : function() { // console.log('bpTabletUp'); $('p.bp.js-bpTabletUp').show(); }, unmatch : function() { $('p.bp.js-bpTabletUp').hide(); } }); enquire.register(bpDesktop, { match : function() { // console.log('bpDesktop'); $('p.bp.js-bpDesktop').show(); }, unmatch : function() { $('p.bp.js-bpDesktop').hide(); } }); enquire.register(bpSmallDesktop, { match : function() { // console.log('bpSmallDesktop'); $('p.bp.js-bpSmallDesktop').show(); }, unmatch : function() { $('p.bp.js-bpSmallDesktop').hide(); } }); enquire.register(bpLargeDesktop, { match : function() { // console.log('bpLargeDesktop'); $('p.bp.js-bpLargeDesktop').show(); }, unmatch : function() { $('p.bp.js-bpLargeDesktop').hide(); } }); |
Cas d’école : j’écris du code JS spécifique pour un bloc (un tag) donné, par exemple la pagination, et je souhaite l’inclure proprement afin :
- qu’il ne soit pas présent directement dans le template *.jsp du bloc (chemin :
/webroot/WEB-INF/tags/responsive/nav/pagination/pageSelectionPagination.tag) - qu’il soit plutôt déclaré dans un fichier séparé qui contient uniquement des directives JS propres à ce bloc (chemin :
/webroot/_ui/responsive/common/js/) - qu’il soit exécuté uniquement si une pagination est présente dans la page qui s’affiche dans le navigateur
Ajouter, dans le template de bloc, une classe qui servira à l’exécution des directives JS
Dans /webroot/WEB-INF/tags/responsive/nav/pagination/pageSelectionPagination.tag :
|
1 2 3 |
<ul class="pagination js-spe-pagination"> <%-- markup et conditions servant à afficher ma pagination --%> </ul> |
Ici, on ajoute une classe js-spe-pagination.
Créer le fichier qui contiendra notre code JS spécifique
Dans /webroot/_ui/responsive/common/js/, créer un fichier acc.spe.pagination.js qui contient le code ci dessous :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
ACC.spePagination = { _autoload: [ ['spePagination', $('.js-spe-pagination').length != 0], ], spePagination: function (){ ACC.spePagination.buildDropupPagination(); }, buildDropupPagination: function (){ $('.pagination-bar.bottom .js-spe-pagination').addClass('dropup'); } } |
- ligne 3: l'
_autoloadva définir qu’on exécute le code présent dans la fonctionspePaginationà la condition que la classe.js-spe-paginationsoit présente dans le DOM - ligne 1: l’ensemble du code JS spécifique relatif à notre pagination est encapsulé dans un namespace
ACC.spePaginationqu’on retrouve ensuite à chaque fois qu’on cherche à exécuter une fonction (spePagination: function (){ACC.spePagination.buildDropupPagination();}) - Attention: noter la présence de virgules lignes 3, 4 et 8 pour bien assurer la transition entre les différentes parties du code
Déclarer la nouvelle référence JS
Dans /webroot/WEB-INF/tags/responsive/template/javaScript.tag, ajouter :
|
1 |
<script type="text/javascript" src="${commonResourcePath}/js/acc.spe.pagination.js"></script> |
mais aussi dans web/webroot/WEB-INF/wro.xml.
Déclarer des variables (hors fonctions)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
ACC.spePagination = { _autoload: [ ['spePagination', $('.js-spe-pagination').length != 0], ], maVariable1 : $('.toto'), maVariable2 : $('.tutu'), spePagination: function (){ ACC.spePagination.buildDropupPagination(); }, buildDropupPagination: function (){ $('.pagination-bar.bottom .js-spe-pagination').addClass('dropup'); } } |
Starter kit :
Sample de code pour démarrer récupéré ici : /_ui/responsive/common/js/_autoload.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 |
//################################################################ //#### Autoload //################################################################ ACC.sample={ _autoload: [ "samplefunction", ["somefunction", "some expression to test"] ["somefunction","some expression to test","elsefunction"] ], samplefunction:function(){ //... do some suff here, executed every time ... }, somefunction:function(){ //... do some suff here. if expression match ... }, elsefunction:function(){ //... do some suff here. if expression NOT match ... } } // sample expression: $(".js-storefinder-map").length != 0 |
Activer le mode « wro » (la concaténation des fichiers JS et CSS) :
Le mode « wro » permet de concaténer l’ensemble des fichiers JS du projet. Il faut déclarer les scripts dans deux fichiers distincts :
/webroot/WEB-INF/tags/responsive/template/javaScript.tag(pour le JS)\webroot\WEB-INF\tags\responsive\template\styleSheets.tag(pour le CSS)/webroot/WEB-INF/wro.xml
Pour le second, le chemin vers chaque ressource Js se déclare comme suit :
|
1 |
<js>/_ui/responsive/common/js/jquery.textarea_autosize.min.js</js> |
Pour tester sans passer par une modification de conf’ plus lourde :
Ne pas versionner de code avec l’exemple ci-dessous!
Dans le fichier /webroot/WEB-INF/tags/responsive/template/javaScript.tag ajouter le caractère ! dans <c:when test="${!wro4jEnabled}"> :
|
1 2 3 4 |
<c:when test="${!wro4jEnabled}"> <script type="text/javascript" src="${contextPath}/wro/all_responsive.js"></script> <script type="text/javascript" src="${contextPath}/wro/addons_responsive.js"></script> </c:when> |
où:
|
1 2 3 4 5 |
<%-- Minified JS (see "storefront.wro4j.enabled" in properties and group "naos_js" in wro.xml) --%> <%--c:when test="${wro4jEnabled}"--%> <c:when test="true"> <script type="text/javascript" src="/wro/naos_js.${wroHashes['/wro/naos_js.js']}.js"></script> </c:when> |
|
1 2 3 4 |
<%--c:when test="${wro4jEnabled && (cmsSite.uid eq aubertSiteUid)}"--%> <c:when test="true"> <link rel="stylesheet" type="text/css" media="all" href="/wro/naos_aub_css.${wroHashes['/wro/naos_aub_css.css']}.css"/> </c:when> |
© 2020 FrontEndDeveloper
Theme by Anders Norén — Up ↑