Tagjavascript

[JavaScript] Exécuter une fonction seulement une fois

11/05/2021 / admin

js/utils.js:

const executeOnlyOnce = ( function( callbackFunction ) {
    let alreadyExecuted = false;
    return function( callbackFunction ) {
        if ( !alreadyExecuted ) {
            alreadyExecuted = true;

            // Execute only once!
            callbackFunction();
        }
    };
})();

export { executeOnlyOnce }

const executeOnlyOnce = ( function( callbackFunction ) {

let alreadyExecuted = false;

return function( callbackFunction ) {

if ( !alreadyExecuted ) {

alreadyExecuted = true;

// Execute only once!

callbackFunction();

}

};

})();

export { executeOnlyOnce }

import { executeOnlyOnce } from './js/utils';

let hadPreviousBreakpointChanges = false;
console.log( hadPreviousBreakpointChanges ); // "false"

const onBreakpointChange = function(){
    hadPreviousBreakpointChanges = true;
};

import { executeOnlyOnce } from './js/utils';

let hadPreviousBreakpointChanges = false;

console.log( hadPreviousBreakpointChanges ); // "false"

const onBreakpointChange = function(){

hadPreviousBreakpointChanges = true;

};

executeOnlyOnce(onBreakpointChange);
console.log(hadPreviousBreakpointChanges); // "true"

1 2	executeOnlyOnce(onBreakpointChange); console.log(hadPreviousBreakpointChanges); // "true"

[JavaScript] Mediaqueries et breakpoints en JS ES6+ avec la librairie breakpoint-helper

06/05/2021 / admin

Base de l’initialisation du helper

import bph from 'breakpoint-helper';

// UIkit v3.6.19 CSS breakpoints
// $breakpoint-small: 640px !default;
// $breakpoint-medium: 960px !default;
// $breakpoint-large: 1200px !default;
// $breakpoint-xlarge: 1600px !default;

const instance = bph({
    small: '640px',
    medium: '960px',
    large: '1200px',
    xlarge: '1600px',
});

import bph from 'breakpoint-helper';

// UIkit v3.6.19 CSS breakpoints

// $breakpoint-small: 640px !default;

// $breakpoint-medium: 960px !default;

// $breakpoint-large: 1200px !default;

// $breakpoint-xlarge: 1600px !default;

const instance = bph({

small: '640px',

medium: '960px',

large: '1200px',

xlarge: '1600px',

});

Utiliser la méthode `listen()` avec un breakpoint unique

(Mobile first!) On définit un breakpoint unique à (max-width: 1199px) au-delà duquel on exécute du code pour les Desktops.

La clé/name 'large' correspond à une largeur de 1200px. Le paramètre useMax permet l’ajout et le calcul de la valeur max-width.

const { listen } = instance;

const currentBreakpoint = listen(
    {
        name: 'large',
        useMax: true,
    },
    ({ matches }) => {
        if (matches) {
            // Execute code for Mobile devices
            console.log('Current breakpoint is: (max-width: 1199px)');
        } else {
            // Execute code for Desktop devices
            console.log('Current breakpoint is: (min-width: 1200px)');
        }
    }
);

const { listen } = instance;

const currentBreakpoint = listen(

{

name: 'large',

useMax: true,

({ matches }) => {

if (matches) {

// Execute code for Mobile devices

console.log('Current breakpoint is: (max-width: 1199px)');

} else {

// Execute code for Desktop devices

console.log('Current breakpoint is: (min-width: 1200px)');

}

);

Une autre solution si vous souhaitez une meilleure séparation du code exécuté par breakpoint

Cette solution alternative vous permet d’inclure du code pour nettoyer votre DOM dans le listener propre au breakpoint pour lequel vous initialisez également des choses.

const bpMobile = listen(
{
        name: 'large',
        useMax: true,
    },
    ({ matches }) => {
        if (matches) {
            // Initialiser
            console.log('EXECUTE code for: Mobile!');
        } else {
            // Nettoyer
            console.log('DESTROY code for: Mobile!');
        }
    }
);

const bpDesktop = listen('large', ({ matches }) => {
    if (matches) {
        // Initialiser
        console.log('EXECUTE code for: Desktop!');
    } else {
        // Nettoyer
        console.log('DESTROY code for: Desktop!');
    }
});

const bpMobile = listen(

{

name: 'large',

useMax: true,

({ matches }) => {

if (matches) {

// Initialiser

console.log('EXECUTE code for: Mobile!');

} else {

// Nettoyer

console.log('DESTROY code for: Mobile!');

}

);

const bpDesktop = listen('large', ({ matches }) => {

if (matches) {

// Initialiser

console.log('EXECUTE code for: Desktop!');

} else {

// Nettoyer

console.log('DESTROY code for: Desktop!');

}

});

[Webpack Encore] Optimiser vos bundles CSS avec PurgeCSS et JS et le tree shaking

03/05/2021 / admin

Testé fonctionnel Webpack Encore v1.1.2 (tournant sous Webpack v5.34.0).

Utiliser PurgeCSS avec Webpack Encore

Source: blog de PHP Roberto – Integrating Purgecss with Symfony Encore (version PDF: phproberto.com-Integrating Purgecss with Symfony Encore).

Le tree shaking avec Webpack Encore

Quelques ressources en ligne:

Tree shaking (sur survivejs.com)

Oui, le tree shaking est activé par défaut en mode « production » dans Webpack Encore. C’est juste que la documentation officielle sur symfony.com oublie de le mentionner (grrr…)!

Vous pouvez effectuer le test qui est décrit ici (aka « le tree shaking dans Webpack Encore expliqué en 30 secondes ») pour vous en assurer.

Pour exemple, si vous avez les deux fichiers suivants:

// src/imports.js
export function testA() {
  console.log('Test A');
}

export function testB() {
  console.log('Test B');
}

// src/imports.js

export function testA() {

console.log('Test A');

}

export function testB() {

console.log('Test B');

}

// src/index.js (entry point)
import { testA } from './imports';

testA();

// src/index.js (entry point)

import { testA } from './imports';

testA();

Exécuter la commande yarn encore dev devrait générer quelque chose de similaire à ceci:

/***/ "./src/imports.js":
/*!************************!*\
  !*** ./src/imports.js ***!
  \************************/
/*! exports provided: testA, testB */
/*! exports used: testA */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
/* harmony export (immutable) */ __webpack_exports__["a"] = testA;
/* unused harmony export testB */
function testA() {
  console.log('Test A');
}

function testB() {
  console.log('Test B');
}

/***/ }),

/***/ "./src/imports.js":

/*!************************!*\

!*** ./src/imports.js ***!

\************************/

/*! exports provided: testA, testB */

/*! exports used: testA */

/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";

/* harmony export (immutable) */ __webpack_exports__["a"] = testA;

/* unused harmony export testB */

function testA() {

console.log('Test A');

}

function testB() {

console.log('Test B');

}

/***/ }),

Cependant, en exécutant la commande yarn encore production le commentaire /* unused harmony export testB */ présent avec la précédente commande sera pris en compte par UglifyJs qui va en conséquence supprimer l’export en relation lors de la phase de minification. Dans ce cas, on ne devrait pas retrouver la chaîne de caractère « Test B » dans le fichier généré:

!function(e){function t(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}var n={};t.m=e,t.c=n,t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:r})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="/",t(t.s="lVK7")}({dxJD:function(e,t,n){"use strict";function r(){console.log("Test A")}t.a=r},lVK7:function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var r=n("dxJD");Object(r.a)()}});

Activer les commentaires `/* unused harmony export */` en développement avec le paramètre `config.optimization.usedExports = true;`

Ceci vous permettra de vérifier avec du code humainement lisible quels sont les parties de votre code qui ne sont pas exploitées et qui seront supprimées dans le bundle minifié de production.

Tout à la fin de votre fichier webpack.config.js:

[...]
;

// fetch the config, then modify it!
const config = Encore.getWebpackConfig();

config.optimization.usedExports = true;

// export the final config
module.exports = config;
// was:
// module.exports = Encore.getWebpackConfig();

[...]

;

// fetch the config, then modify it!

const config = Encore.getWebpackConfig();

config.optimization.usedExports = true;

// export the final config

module.exports = config;

// was:

// module.exports = Encore.getWebpackConfig();

Vous pouvez tout-à-fait laisser cette config activée. Elle ne portera pas préjudice au poids final de votre build de production.

[Webpack Encore] Intégration d’UIkit v3 dans un projet Symfony pour un bundle à la carte

27/04/2021 / admin

Méthode préférée de création d’un bundle des composants du framework front-end UIkit v3 avec Webpack

Testé fonctionnel UIkit v3.6.19!
Voir aussi: la méthode la plus simple, mais extrêmement limitée en terme de choix des composants qu’on souhaite importer (embarque tous les composants JS du core, embarque les styles d’absolument tous les composants).

Suite à différents tests de génération d’un bundle entièrement à la carte des composants d’UIkit v3 que j’ai effectué et à quelques soucis rencontrés avec l’affichage des icônes, je me suis rendu à l’évidence que le framework open-source développé par YOOTheme n’allait pas pouvoir être intégré à mon projet Symfony dans les règles de l’art.

Pour pouvoir sélectionner à la carte les composants et les icônes qui doivent figurer dans notre bundle (et surtout: retirer tous ceux qui ne vont pas servir!!!) tout en consignant les informations sur notre sélection directement dans le Git de notre projet, nous allons notamment devoir:

Créer un dossier mirroir des sources d’UIkit (dossier ./node_modules/uikit/*) dans le dossier qui contient le code spécifique à notre projet (dossier ./assets/uikit/* dans mon cas).
Commenter tous les composants dont nous n’aurons pas besoin pour notre build custom dans les fichiers assets/uikit/src/scss/theme/_import.scss et assets/uikit/src/scss/components/_import.scss (mirroirs de ceux du dossier source ./node_modules/uikit/src/scss/*).
Commenter tous les composants dont nous n’aurons pas besoin pour notre build custom dans les fichiers assets/uikit/src/js/core/index.js et assets/uikit/src/js/components/index.js (mirroirs de ceux du dossier source ./node_modules/uikit/src/js/*).
Consigner notre sélection d’icônes dans des dossiers mirroirs de ceux du dossier source ./node_modules/uikit/src/images/*
Exécuter un script bash qui va s’occuper de:
- Remplacer les fichiers source de ./node_modules/uikit/* par leurs versions mirroirs consignées dans ./assets/uikit/* (et ajouter les nouveaux fichiers si il y en a).
- Lancer, depuis ./node_modules/uikit, les commandes de build fournies dans les sources d’UIkit pour notre sélection de composants et d’icônes.
- Lancer, depuis la racine du projet Symfony, la commande Webpack de build des sources SCSS, JS et icônes de notre projet (yarn encore dev).

Cette technique s’inspire du concept de fork, à la différence qu’ici nous n’aurons pas à maintenir un fork à chaque montée de version d’UIkit (un nouveau tag tous les 15 jours au moment où j’écris ces lignes).
Ici, les modifications relatives aux sources d’UIkit sont également versionnées directement dans les sources de notre projet custom alors qu’avec un fork doit avoir par définition son propre dépôt (donc un seul repository à gérer au lieu de deux).

Il s’agit de générer de nouvelles sources « dist » d’UIkit, taillées sur-mesure sur la base de notre propre sélection de composants et d’icônes.

C’est la source présente dans le dossier ./node_modules/uikit/dist qui est importée par défaut par Webpack lorsque nous déclarons la ligne import UIkit from 'uikit'; dans le fichier assets/app.js.

Note: en procédant ainsi il devrait (je n’ai pas encore testé) être possible d’ajouter également vos propres composants, développés sur les bases d’UIkit, au build custom.

La configuration de Webpack

Fichier `webpack.config.js`

Dans la configuration de Webpack, ajouter l’alias pour le chemin vers les sources SCSS d’UIkit dans le dossier ./node_modules:

const Encore = require('@symfony/webpack-encore');
const path = require('path');

[...]

Encore
    .addAliases({
        // UIkit:
        '@uk-scss': path.resolve(__dirname, './node_modules/uikit/src/scss')
    })

[...]

    // enables Sass/SCSS support
    .enableSassLoader()

const Encore = require('@symfony/webpack-encore');

const path = require('path');

[...]

Encore

.addAliases({

// UIkit:

'@uk-scss': path.resolve(__dirname, './node_modules/uikit/src/scss')

})

[...]

// enables Sass/SCSS support

.enableSassLoader()

Le bundle à la carte des styles (format SCSS)

Note: le build standard des styles d’UIkit (format de sortie/dist CSS) a ceci de particulier qu’il est réalisé à partir des sources LESS. Le framework est bien fourni avec une version SCSS des styles, mais il s’agit juste d’une conversion faite à partir des sources LESS et générée via un script.

En d’autres termes, si nous souhaitons travailler à partir du format SCSS, le build pour cette partie devra être réalisé côté Webpack.

Fichier `assets/styles/app.scss`

/* Import your custom selection of UIkit components here: */
@import '_uikit-explicit-pieces';

1 2	/* Import your custom selection of UIkit components here: */ @import '_uikit-explicit-pieces';

Note: selon votre propre organisation de vos fichiers SCSS, l’import de _uikit-explicit-pieces.scss devrait intervenir très tôt (en tout premier?) dans votre chaîne d’imports.

Fichier `assets/styles/_uikit-explicit-pieces.scss`

Créer un fichier _uikit-explicit-pieces.scss qui suit à la lettre les directives de mise en place des styles relatifs au framework front-end UIkit.

L’alias @uk-scss déclaré plus haut dans le fichier webpack.config.js est utilisé ici comme racine du chemin vers les fichiers sources.

/*
 * Based on: UIkit v3.6.19
 * Source: https://github.com/uikit/uikit/tree/v3.6.19
 * Documentation: https://getuikit.com/docs/sass#how-to-build
 */

/* 1. Your custom variables and variable overwrites. */
//$global-link-color: tomato;

/* 2. Import default variables and available mixins. */
@import "@uk-scss/variables-theme.scss";
@import "@uk-scss/mixins-theme.scss";

/* 3. Your custom mixin overwrites. */
//@mixin hook-card() { color: tomato; }

/* 4. Import UIkit here: */
//@import "@uk-scss/theme/_import.scss"; // Comment if you don't want to include theme specific styles.
@import "@uk-scss/components/_import.scss";

* Based on: UIkit v3.6.19

* Source: https://github.com/uikit/uikit/tree/v3.6.19

* Documentation: https://getuikit.com/docs/sass#how-to-build

/* 1. Your custom variables and variable overwrites. */

//$global-link-color: tomato;

/* 2. Import default variables and available mixins. */

@import "@uk-scss/variables-theme.scss";

@import "@uk-scss/mixins-theme.scss";

/* 3. Your custom mixin overwrites. */

//@mixin hook-card() { color: tomato; }

/* 4. Import UIkit here: */

//@import "@uk-scss/theme/_import.scss"; // Comment if you don't want to include theme specific styles.

@import "@uk-scss/components/_import.scss";

Edit: l’utilisation de PurgeCSS avec Webpack rend le reste de la partie SCSS de cet article totalement OBSOLèTE!

Attention: les styles propres à la grille d’UIkit comportent des déclarations de type .uk-child-width-1-4@m. L’arobase n’étant pas présent dans la regex du defaultExtractor de PurgeCSS, il faudra faire comme moi dans le code ci-dessous et le rajouter si vous voulez éviter que les styles de la grille soient considérés comme non-utilisés et dégagés du bundle.

En effet, plus besoin d’éditer les fichiers _import.scss des sources d’UIkit pour commenter les composants dont nous n’avons pas besoin! PurgeCSS se charge de faire le boulot à notre place en scannant les chemins et fichiers que nous allons pointer dans sa configuration pour repérer les IDs et classes que nous utilisons et purement et simplement supprimer toutes les autres de notre bundle!

Voici un exemple à rajouter à la toute fin de votre fichier webpack.config.js:

    [...]

    // PurgeCSS
    // if (Encore.isProduction()) {
        Encore.addPlugin(new PurgeCssPlugin({
            paths: glob.sync([
                path.join(__dirname, './app/Resources/views/**/*.html.twig'),
                path.join(__dirname, './web/build/**/*.js')
            ]),
            defaultExtractor: (content) => {
                return content.match(/[\w-/:@]+(?<!:)/g) || [];
            }
        }));
    // }

;

// export the final config
module.exports = Encore.getWebpackConfig();

[...]

// PurgeCSS

// if (Encore.isProduction()) {

Encore.addPlugin(new PurgeCssPlugin({

paths: glob.sync([

path.join(__dirname, './app/Resources/views/**/*.html.twig'),

path.join(__dirname, './web/build/**/*.js')

]),

defaultExtractor: (content) => {

return content.match(/[\w-/:@]+(?<!:)/g) || [];

}

}));

// }

;

// export the final config

module.exports = Encore.getWebpackConfig();

Cette technique reste une suggestion, mais reconnaissez que c’est tout-de-même bien pratique!

Fichier `assets/uikit/src/scss/theme/_import.scss`

Ce fichier est, à la base, une copie conforme du fichier source https://github.com/uikit/uikit/blob/v3.6.19/src/scss/theme/_import.scss.

Commenter tous les composants dont vous n’aurez pas besoin pour votre build custom (où commenter carrément l’import de ce fichier dans assets/styles/_uikit-explicit-pieces.scss si vous pensez que rien ne va vous servir):

// Base
@import "variables.scss";
@import "base.scss";

// Elements
@import "link.scss";
@import "heading.scss";
@import "divider.scss";
@import "list.scss";
@import "description-list.scss";
@import "table.scss";
@import "icon.scss";
@import "form-range.scss";
@import "form.scss";
@import "button.scss";
@import "progress.scss";

// Layout
@import "section.scss";
@import "container.scss";
@import "tile.scss";
@import "card.scss";

// Common
@import "close.scss";
@import "spinner.scss";
@import "marker.scss";
@import "totop.scss";
@import "alert.scss";
@import "placeholder.scss";
@import "badge.scss";
@import "label.scss";
@import "overlay.scss";
@import "article.scss";
@import "comment.scss";
@import "search.scss";

// JavaScript
@import "accordion.scss";
@import "drop.scss";
@import "dropdown.scss";
@import "modal.scss";
@import "slider.scss";
@import "sticky.scss";
@import "offcanvas.scss";
@import "leader.scss";
@import "notification.scss";
@import "tooltip.scss";
@import "sortable.scss";
@import "countdown.scss";

@import "grid.scss";

// Navs
@import "nav.scss";
@import "navbar.scss";
@import "subnav.scss";
@import "breadcrumb.scss";
@import "pagination.scss";
@import "tab.scss";
@import "slidenav.scss";
@import "dotnav.scss";
@import "thumbnav.scss";
@import "iconnav.scss";

@import "lightbox.scss";

// Utilities
@import "animation.scss";
@import "width.scss";
@import "height.scss";
@import "text.scss";
@import "column.scss";
@import "background.scss";
@import "align.scss";
@import "utility.scss";
@import "margin.scss";
@import "padding.scss";
@import "position.scss";
@import "transition.scss";
@import "inverse.scss";

// Base

@import "variables.scss";

@import "base.scss";

// Elements

@import "link.scss";

@import "heading.scss";

@import "divider.scss";

@import "list.scss";

@import "description-list.scss";

@import "table.scss";

@import "icon.scss";

@import "form-range.scss";

@import "form.scss";

@import "button.scss";

@import "progress.scss";

// Layout

@import "section.scss";

@import "container.scss";

@import "tile.scss";

@import "card.scss";

// Common

@import "close.scss";

@import "spinner.scss";

@import "marker.scss";

@import "totop.scss";

@import "alert.scss";

@import "placeholder.scss";

@import "badge.scss";

@import "label.scss";

@import "overlay.scss";

@import "article.scss";

@import "comment.scss";

@import "search.scss";

// JavaScript

@import "accordion.scss";

@import "drop.scss";

@import "dropdown.scss";

@import "modal.scss";

@import "slider.scss";

@import "sticky.scss";

@import "offcanvas.scss";

@import "leader.scss";

@import "notification.scss";

@import "tooltip.scss";

@import "sortable.scss";

@import "countdown.scss";

@import "grid.scss";

// Navs

@import "nav.scss";

@import "navbar.scss";

@import "subnav.scss";

@import "breadcrumb.scss";

@import "pagination.scss";

@import "tab.scss";

@import "slidenav.scss";

@import "dotnav.scss";

@import "thumbnav.scss";

@import "iconnav.scss";

@import "lightbox.scss";

// Utilities

@import "animation.scss";

@import "width.scss";

@import "height.scss";

@import "text.scss";

@import "column.scss";

@import "background.scss";

@import "align.scss";

@import "utility.scss";

@import "margin.scss";

@import "padding.scss";

@import "position.scss";

@import "transition.scss";

@import "inverse.scss";

Fichier `assets/uikit/src/scss/components/_import.scss`

Ce fichier est, à la base, une copie conforme du fichier source https://github.com/uikit/uikit/blob/v3.6.19/scss/components/_import.scss.

Commenter tous les composants dont vous n’aurez pas besoin pour votre build custom:

// Base
@import "variables.scss";
@import "mixin.scss";
@import "base.scss";

// Elements
@import "link.scss";
//@import "heading.scss";
//@import "divider.scss";
//@import "list.scss";
//@import "description-list.scss";
//@import "table.scss";
@import "icon.scss";
//@import "form-range.scss";
//@import "form.scss"; // After: Icon, Form Range
@import "button.scss";
//@import "progress.scss";

// Layout
//@import "section.scss";
//@import "container.scss";
//@import "tile.scss";
//@import "card.scss";

// Common
@import "close.scss"; // After: Icon
//@import "spinner.scss"; // After: Icon
//@import "totop.scss"; // After: Icon
//@import "marker.scss"; // After: Icon
//@import "alert.scss"; // After: Close
//@import "placeholder.scss";
//@import "badge.scss";
//@import "label.scss";
//@import "overlay.scss"; // After: Icon
//@import "article.scss";
//@import "comment.scss";
//@import "search.scss"; // After: Icon

// JavaScript
@import "accordion.scss";
//@import "drop.scss"; // After: Card
//@import "dropdown.scss"; // After: Card
//@import "modal.scss"; // After: Close
//@import "slideshow.scss";
//@import "slider.scss";
//@import "sticky.scss";
//@import "offcanvas.scss";
//@import "switcher.scss";
//@import "leader.scss";
@import "notification.scss";
//@import "tooltip.scss";
//@import "sortable.scss";
@import "countdown.scss";
// Scrollspy
// Toggle
// Scroll

@import "grid.scss";

// Navs
//@import "nav.scss";
//@import "navbar.scss"; // After: Card, Grid, Nav, Icon, Search
//@import "subnav.scss";
//@import "breadcrumb.scss";
//@import "pagination.scss";
//@import "tab.scss";
//@import "slidenav.scss"; // After: Icon
//@import "dotnav.scss";
//@import "thumbnav.scss";
//@import "iconnav.scss";

//@import "lightbox.scss"; // After: Close, Slidenav

// Utilities
//@import "animation.scss";
//@import "width.scss";
//@import "height.scss";
//@import "text.scss";
//@import "column.scss";
//@import "cover.scss";
//@import "background.scss";
//@import "align.scss";
//@import "svg.scss";
//@import "utility.scss";
//@import "flex.scss"; // After: Utility
//@import "margin.scss";
//@import "padding.scss";
//@import "position.scss";
//@import "transition.scss";
//@import "visibility.scss";
//@import "inverse.scss";

// Need to be loaded last
//@import "print.scss";

// Base

@import "variables.scss";

@import "mixin.scss";

@import "base.scss";

// Elements

@import "link.scss";

//@import "heading.scss";

//@import "divider.scss";

//@import "list.scss";

//@import "description-list.scss";

//@import "table.scss";

@import "icon.scss";

//@import "form-range.scss";

//@import "form.scss"; // After: Icon, Form Range

@import "button.scss";

//@import "progress.scss";

// Layout

//@import "section.scss";

//@import "container.scss";

//@import "tile.scss";

//@import "card.scss";

// Common

@import "close.scss"; // After: Icon

//@import "spinner.scss"; // After: Icon

//@import "totop.scss"; // After: Icon

//@import "marker.scss"; // After: Icon

//@import "alert.scss"; // After: Close

//@import "placeholder.scss";

//@import "badge.scss";

//@import "label.scss";

//@import "overlay.scss"; // After: Icon

//@import "article.scss";

//@import "comment.scss";

//@import "search.scss"; // After: Icon

// JavaScript

@import "accordion.scss";

//@import "drop.scss"; // After: Card

//@import "dropdown.scss"; // After: Card

//@import "modal.scss"; // After: Close

//@import "slideshow.scss";

//@import "slider.scss";

//@import "sticky.scss";

//@import "offcanvas.scss";

//@import "switcher.scss";

//@import "leader.scss";

@import "notification.scss";

//@import "tooltip.scss";

//@import "sortable.scss";

@import "countdown.scss";

// Scrollspy

// Toggle

// Scroll

@import "grid.scss";

// Navs

//@import "nav.scss";

//@import "navbar.scss"; // After: Card, Grid, Nav, Icon, Search

//@import "subnav.scss";

//@import "breadcrumb.scss";

//@import "pagination.scss";

//@import "tab.scss";

//@import "slidenav.scss"; // After: Icon

//@import "dotnav.scss";

//@import "thumbnav.scss";

//@import "iconnav.scss";

//@import "lightbox.scss"; // After: Close, Slidenav

// Utilities

//@import "animation.scss";

//@import "width.scss";

//@import "height.scss";

//@import "text.scss";

//@import "column.scss";

//@import "cover.scss";

//@import "background.scss";

//@import "align.scss";

//@import "svg.scss";

//@import "utility.scss";

//@import "flex.scss"; // After: Utility

//@import "margin.scss";

//@import "padding.scss";

//@import "position.scss";

//@import "transition.scss";

//@import "visibility.scss";

//@import "inverse.scss";

// Need to be loaded last

//@import "print.scss";

Les fichiers JS

Fichier `assets/app.js`

On importe le fichier SCSS « racine/maître » app.scss. C’est celui qui va concentrer l’ensemble des @import des différents composants.
On importe le bundle^* de notre sélection de composants JS via la directive import UIkit from 'uikit';.
On importe le bundle^* de notre sélection d’icônes via les directives import Icons from 'uikit/dist/js/uikit-icons'; UIkit.use(Icons);
On initialise un composant Notification (test)

*: j’explique ça juste en-dessous.

// Styles
import './styles/app.scss';

// JS (from custom build generated in ./node_modules/uikit/dist/ folder)
import UIkit from 'uikit';

// Icons must be imported separately (from custom build generated in ./node_modules/uikit/dist/ folder)
import Icons from 'uikit/dist/js/uikit-icons';
UIkit.use(Icons);

// Exemple of Notification component inititalization
UIkit.notification("Hello World!");

// Styles

import './styles/app.scss';

// JS (from custom build generated in ./node_modules/uikit/dist/ folder)

import UIkit from 'uikit';

// Icons must be imported separately (from custom build generated in ./node_modules/uikit/dist/ folder)

import Icons from 'uikit/dist/js/uikit-icons';

UIkit.use(Icons);

// Exemple of Notification component inititalization

UIkit.notification("Hello World!");

Fichier `assets/uikit/src/js/core/index.js`

Ce fichier est, à la base, une copie conforme du fichier source https://github.com/uikit/uikit/blob/v3.6.19/src/js/core/index.js.

Commenter tous les composants dont vous n’aurez pas besoin pour votre build custom:

export {default as Accordion} from './accordion';
// export {default as Alert} from './alert';
// export {default as Cover} from './cover';
// export {default as Drop, default as Dropdown} from './drop';
// export {default as FormCustom} from './form-custom';
// export {default as Gif} from './gif';
// export {default as Grid} from './grid';
// export {default as HeightMatch} from './height-match';
// export {default as HeightViewport} from './height-viewport';
export {default as Icon} from './icon';
// export {default as Img} from './img';
// export {default as Leader} from './leader';
// export {default as Margin} from './margin';
// export {default as Modal} from './modal';
// export {default as Nav} from './nav';
// export {default as Navbar} from './navbar';
// export {default as Offcanvas} from './offcanvas';
// export {default as OverflowAuto} from './overflow-auto';
// export {default as Responsive} from './responsive';
// export {default as Scroll} from './scroll';
// export {default as Scrollspy} from './scrollspy';
// export {default as ScrollspyNav} from './scrollspy-nav';
// export {default as Sticky} from './sticky';
// export {default as Svg} from './svg';
// export {default as Switcher} from './switcher';
// export {default as Tab} from './tab';
// export {default as Toggle} from './toggle';
// export {default as Video} from './video';

// Icon components
export {Close} from './icon';
// export {Spinner} from './icon';
// export {Slidenav as SlidenavNext} from './icon';
// export {Slidenav as SlidenavPrevious} from './icon';
// export {Search as SearchIcon} from './icon';
// export {IconComponent as Marker} from './icon';
// export {IconComponent as NavbarToggleIcon} from './icon';
// export {IconComponent as OverlayIcon} from './icon';
// export {IconComponent as PaginationNext} from './icon';
// export {IconComponent as PaginationPrevious} from './icon';
// export {IconComponent as Totop} from './icon';

export {default as Accordion} from './accordion';

// export {default as Alert} from './alert';

// export {default as Cover} from './cover';

// export {default as Drop, default as Dropdown} from './drop';

// export {default as FormCustom} from './form-custom';

// export {default as Gif} from './gif';

// export {default as Grid} from './grid';

// export {default as HeightMatch} from './height-match';

// export {default as HeightViewport} from './height-viewport';

export {default as Icon} from './icon';

// export {default as Img} from './img';

// export {default as Leader} from './leader';

// export {default as Margin} from './margin';

// export {default as Modal} from './modal';

// export {default as Nav} from './nav';

// export {default as Navbar} from './navbar';

// export {default as Offcanvas} from './offcanvas';

// export {default as OverflowAuto} from './overflow-auto';

// export {default as Responsive} from './responsive';

// export {default as Scroll} from './scroll';

// export {default as Scrollspy} from './scrollspy';

// export {default as ScrollspyNav} from './scrollspy-nav';

// export {default as Sticky} from './sticky';

// export {default as Svg} from './svg';

// export {default as Switcher} from './switcher';

// export {default as Tab} from './tab';

// export {default as Toggle} from './toggle';

// export {default as Video} from './video';

// Icon components

export {Close} from './icon';

// export {Spinner} from './icon';

// export {Slidenav as SlidenavNext} from './icon';

// export {Slidenav as SlidenavPrevious} from './icon';

// export {Search as SearchIcon} from './icon';

// export {IconComponent as Marker} from './icon';

// export {IconComponent as NavbarToggleIcon} from './icon';

// export {IconComponent as OverlayIcon} from './icon';

// export {IconComponent as PaginationNext} from './icon';

// export {IconComponent as PaginationPrevious} from './icon';

// export {IconComponent as Totop} from './icon';

Fichier `assets/uikit/src/js/components/index.js`

Ce fichier est, à la base, une copie conforme du fichier source https://github.com/uikit/uikit/blob/v3.6.19/src/js/components/index.js.

Commenter tous les composants dont vous n’aurez pas besoin pour votre build custom:

export {default as Countdown} from './countdown';
// export {default as Filter} from './filter';
// export {default as Lightbox} from './lightbox';
// export {default as LightboxPanel} from './lightbox-panel';
export {default as Notification} from './notification';
// export {default as Parallax} from './parallax';
// export {default as Slider} from './slider';
// export {default as SliderParallax} from './slider-parallax';
// export {default as Slideshow} from './slideshow';
// export {default as SlideshowParallax} from './slideshow-parallax';
// export {default as Sortable} from './sortable';
// export {default as Tooltip} from './tooltip';
// export {default as Upload} from './upload';

export {default as Countdown} from './countdown';

// export {default as Filter} from './filter';

// export {default as Lightbox} from './lightbox';

// export {default as LightboxPanel} from './lightbox-panel';

export {default as Notification} from './notification';

// export {default as Parallax} from './parallax';

// export {default as Slider} from './slider';

// export {default as SliderParallax} from './slider-parallax';

// export {default as Slideshow} from './slideshow';

// export {default as SlideshowParallax} from './slideshow-parallax';

// export {default as Sortable} from './sortable';

// export {default as Tooltip} from './tooltip';

// export {default as Upload} from './upload';

Les icônes

Structure des dossiers (à respecter)

Attention: la documentation d’UIkit vous explique comment remplacer des icônes existantes ou ajouter de nouvelles icônes à votre projet.
Cependant, cette dernière fait mention d’un dossier custom/ dans lequel placer les nouvelles icônes à ajouter à votre projet (avant d’effectuer votre build)… sans préciser à quel endroit de l’arborescence des fichiers du framework celui-ci devrait se trouver (edit: dans src/custom/icons/)!

La manipulation des icônes fonctionnera très bien si vous déposez vos fichiers de remplacement et vos nouveaux fichiers dans l’un des 3 dossiers suivants:

Icônes des… erm… (reste à définir): ./assets/uikit/src/images/backgrounds/
Icônes des composants: ./assets/uikit/src/images/components/
Icônes de la bibliothèque d’icônes: ./assets/uikit/src/images/icons/

Note: dans le cas où une même icône est utilisée pour un ou plusieurs composants ET dans la bibliothèque (la croix de fermeture par exemple, présente au minimum dans le composant Notification ET dans la bibliothèque), le fichier doit être présent dans les deux dossiers ./assets/uikit/src/images/components/close-icon.svg et ./assets/uikit/src/images/icons/close.svg (libellé différent, et le code peut-être différent également pour une même icône, cf. ici (components/close-icon.svg) et là (icons/close.svg)).

Fichier `assets/uikit/build/util.js`

Ce fichier est, à la base, une copie conforme du fichier source https://github.com/uikit/uikit/blob/v3.6.19/build/util.js.

Je ne donne ci-dessous que la constante const svgo = new SVGO qui est à modifier avec l’ajout de deux nouveaux paramètres, mais l’intégralité du code issu du fichier source est, bien entendu, à conserver!:

removeAttrs qui va s’occuper de nettoyer le fichier SVG source en supprimant des attributs, inutiles pour nous, qu’on va par exemple retrouver dans les icônes issues de la populaire bibliothèque Font Awesome.
addAttributesToSVGElement qui va s’occuper d’ajouter les attributs width="20" et height="20", nécessaires au bon fonctionnement de la bibliothèque d’icônes UIkit, là où ils manquent. Attention: si ces attributs existent déjà avec des valeurs similaires ou d’autres valeurs, ils ne seront pas écrasés par ce paramètre!

[...]

exports.icons = async function (src) {

    const svgo = new SVGO({

        plugins: [
            {removeViewBox: false},
            {
                cleanupNumericValues: {
                    floatPrecision: 3
                }
            },
            {convertPathData: false},
            {convertShapeToPath: false},
            {mergePaths: false},
            {removeDimensions: false},
            {removeStyleElement: false},
            {removeScriptElement: false},
            {removeUnknownsAndDefaults: false},
            {removeUselessStrokeAndFill: false},
            // Remove unwanted attributes
            // https://github.com/svg/svgo/blob/v1.3.2/examples/test.js#L75
            {removeAttrs: {attrs: '(id|class|aria-hidden|focusable|data-prefix|data-icon|role)'}},
            // Add "width" and "height" attributes (where missing) with a value of "20"
            // /!\ Needs to be an array!
            // /!\ Existant "width" and "height" attributes WON'T be replaced!
            // https://github.com/svg/svgo/issues/583#issuecomment-275941582
            {addAttributesToSVGElement: {attributes: ['width="20"', 'height="20"']}}
        ]

    });

[...]

[...]

exports.icons = async function (src) {

const svgo = new SVGO({

plugins: [

{removeViewBox: false},

{

cleanupNumericValues: {

floatPrecision: 3

}

{convertPathData: false},

{convertShapeToPath: false},

{mergePaths: false},

{removeDimensions: false},

{removeStyleElement: false},

{removeScriptElement: false},

{removeUnknownsAndDefaults: false},

{removeUselessStrokeAndFill: false},

// Remove unwanted attributes

// https://github.com/svg/svgo/blob/v1.3.2/examples/test.js#L75

{removeAttrs: {attrs: '(id|class|aria-hidden|focusable|data-prefix|data-icon|role)'}},

// Add "width" and "height" attributes (where missing) with a value of "20"

// /!\ Needs to be an array!

// /!\ Existant "width" and "height" attributes WON'T be replaced!

// https://github.com/svg/svgo/issues/583#issuecomment-275941582

{addAttributesToSVGElement: {attributes: ['width="20"', 'height="20"']}}

]

});

[...]

Petit récapitulatif de l’arborescence attendue

…sous forme de capture d’écran.

Le script bash

Nouvelle méthode (au 04/05/2021):

Dans le fichier package.json qui devrait se trouver à la racine de votre projet, nous allons ajouter un script qui va générer automatiquement les sources dist optimisées d’UIkit:

{
    "scripts": {
      "uk": "./build/build-uikit.sh"
    },
    "devDependencies": {

    [...]

}

{

"scripts": {

"uk": "./build/build-uikit.sh"

"devDependencies": {

[...]

}

Nous allons ensuite créer un fichier build/build-uikit.sh qui va contenir le script en question:

#!/usr/bin/env bash

# Rendre ce script exécutable:
# chmod +x ./build/build-uikit.sh

# Générer les sources JS et le sprite d'icônes SVG:
# $ yarn run uk

# Générer uniquement les sources JS:
# $ yarn run uk uikit

# Générer uniquement le sprite d'icônes SVG:
# $ yarn run uk icons

cp -r assets/uikit/* node_modules/uikit/
cd node_modules/uikit

# Si le dossier "node_modules" n'existe pas:
if [ ! -d "node_modules" ]
then
  npm install
fi

# Possibilité de passer des arguments:
array=("$@")

# Si pas d'arguments, on execute la commande par défaut:
if [ $# -eq 0 ]
then
  node build/build uikit icons -d

# Sinon, on exécute la commande en fonction des arguments passés:
else
  node build/build $@ -d
fi

#!/usr/bin/env bash

# Rendre ce script exécutable:

# chmod +x ./build/build-uikit.sh

# Générer les sources JS et le sprite d'icônes SVG:

# $ yarn run uk

# Générer uniquement les sources JS:

# $ yarn run uk uikit

# Générer uniquement le sprite d'icônes SVG:

# $ yarn run uk icons

cp -r assets/uikit/* node_modules/uikit/

cd node_modules/uikit

# Si le dossier "node_modules" n'existe pas:

if [ ! -d "node_modules" ]

then

npm install

# Possibilité de passer des arguments:

array=("$@")

# Si pas d'arguments, on execute la commande par défaut:

if [ $# -eq 0 ]

then

node build/build uikit icons -d

# Sinon, on exécute la commande en fonction des arguments passés:

else

node build/build $@ -d

ATTENTION: afin de rendre ce script exécutable, il faut lancer depuis la racine de votre projet la commande chmod +x ./build/build-uikit.sh!

Désormais, vous pourrez lancer différentes commandes pour générer votre build à la carte d’UIkit:

yarn run uk: générer les sources JS et le sprite d’icônes SVG d’UIkit
yarn run uk uikit: générer uniquement les sources JS d’UIkit
yarn run uk icons: générer uniquement le sprite d’icônes SVG d’UIkit

Note: nous n’avons bien sûr pas de commande relative aux styles car ils sont générés directement via Webpack Encore.

Méthode précédente (dépréciée):

Attention: les sources du framework front-end UIkit consignées dans le dossier node_modules/ de votre projet ont leur propre fichier package.json. Pour exécuter les différents scripts de build, il convient donc d’avoir au préalable déployé les dépendances Node au sein du dossier à l’aide de la commande npm install. En d’autres termes, si le dossier node_modules n’est pas présent dans le dossier ./node_modules/uikit/, les commandes de build vont vous péter à la tronche :D.

Depuis la racine de votre projet:

On copie nos fichiers custom d’UIkit vers le dossier où sont consignées les sources issues du Git officiel (les fichiers initiaux existants seront écrasés par les nôtres; c’est ce qu’on veut):

cp -r assets/uikit/* node_modules/uikit/

1	cp -r assets/uikit/* node_modules/uikit/

On se rend dans le dossier où sont consignées les sources d’UIkit:

cd node_modules/uikit

1	cd node_modules/uikit

La manipulation suiffante n’est à effectuer que dans deux cas:

Vous n’avez encore jamais lancé la commande npm install depuis ce dossier et le dossier node_modules n’est donc pas présent à la racine de ./node_modules/uikit/.
Vous avez effectué des modifications dans le fichier ./node_modules/uikit/package.json (vérifier que ce fichier est présent dans ./assets/uikit/; ça peut être une bonne indication du fait qu’il faille lancer les deux commandes ci-dessous).

rm -rf node_modules
npm install

1 2	rm -rf node_modules npm install

Effectuer un build non-minifié (paramètre -d – c’est Webpack Encore qui assurera la minification par la suite) des sources JS d’UIkit qui contient uniquement notre sélection de composants et la bibliothèque d’icônes:

node build/build uikit icons -d

1	node build/build uikit icons -d

Note: voir les autres paramètres possibles pour la commande node build/build.

On retourne à la racine de notre projet et on lance la commande de build propre à Webpack Encore:

cd ../..
yarn encore dev|yarn encore production

1 2	cd ../.. yarn encore dev\|yarn encore production

Vos sources pour afficher votre site dans le navigateur sont prêtes!

Quelques chiffres suite à mes tests

[339 KB] Build JS standard d’UIkit non-minifié (comprend tout le core et tous les composants)
[136,5 KB] Build JS à la carte d’UIkit non-minifié (comprend uniquement les fonctionnalités du core nécessaires au fonctionnement de ma sélection de composants et les composants suivants: core: accordion, icon | components: countdown, notification – cf. Fichiers JS)
[130 KB] Build JS standard d’UIkit minifié via les fonctionnalités de build fournies avec le framework
[52,7 KB] Build JS à la carte d’UIkit minifié via Webpack Encore

Caveats connus!

Les icônes des composants, si elles proviennent d’une autre source que la bibliothèque UIkit, ne sont pas nettoyées par par les modifications apportées au script de build de cette dernière ce qui occasionne des soucis d’affichage. Solution de correction possible: passer au préalable par Webpack (plutôt que par une modification des scripts de build d’UIkit) pour nettoyer tous les SVG et les rendre « UIkit-compliant » avant de les envoyer vers ./node_modules/uikit/* et d’effectuer un build.

Méthode alternative (attention: limitations connues au niveau des icônes)

ATTENTION: plusieurs limitations au niveau des icônes avec cette méthode de bundle:

Les icônes des composants ne s’affichent pas (cf. Diagnostique des erreurs ci-dessous).
Si la bibliothèque d’icônes (générée séparément) s’affiche bien, cette méthode ne permet de personnaliser celle-ci en ajoutant/supprimant des icônes.

Diagnostique des erreurs:

M’affiche l’erreur suivante en console:

fastdom.js:67 TypeError: Cannot read property ‘cloneNode’ of undefined
at getIcon (icon.js:186)
at UIkitComponent.getSvg (icon.js:63)
at UIkitComponent.connected (svg.js:38)
at hooks.js:10
at Array.forEach ()
at UIkitComponent.UIkit._callHook (hooks.js:10)
at UIkitComponent.UIkit._callConnected (hooks.js:31)
at UIkitComponent.UIkit.$mount (instance.js:28)
at UIkitComponent.UIkit._init (state.js:23)
at new UIkitComponent (global.js:30)

Les icônes des composants sont générées séparément du sprite d’icônes utilisables à la carte (et qui, lui, fonctionne!).
Lorsque je compare aux sources JS fournies dans le dossier dist, je remarque l’absence du code suivant dans mon bundle Webpack:

var closeIcon = "<svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" xmlns=\"http://www.w3.org/2000/svg\"><line fill=\"none\" stroke=\"#000\" stroke-width=\"1.1\" x1=\"1\" y1=\"1\" x2=\"13\" y2=\"13\"/><line fill=\"none\" stroke=\"#000\" stroke-width=\"1.1\" x1=\"13\" y1=\"1\" x2=\"1\" y2=\"13\"/></svg>";
var closeLarge = "<svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><line fill=\"none\" stroke=\"#000\" stroke-width=\"1.4\" x1=\"1\" y1=\"1\" x2=\"19\" y2=\"19\"/><line fill=\"none\" stroke=\"#000\" stroke-width=\"1.4\" x1=\"19\" y1=\"1\" x2=\"1\" y2=\"19\"/></svg>";
var marker = "<svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><rect x=\"9\" y=\"4\" width=\"1\" height=\"11\"/><rect x=\"4\" y=\"9\" width=\"11\" height=\"1\"/></svg>";
var navbarToggleIcon = "<svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><rect y=\"9\" width=\"20\" height=\"2\"/><rect y=\"3\" width=\"20\" height=\"2\"/><rect y=\"15\" width=\"20\" height=\"2\"/></svg>";
var overlayIcon = "<svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" xmlns=\"http://www.w3.org/2000/svg\"><rect x=\"19\" y=\"0\" width=\"1\" height=\"40\"/><rect x=\"0\" y=\"19\" width=\"40\" height=\"1\"/></svg>";
var paginationNext = "<svg width=\"7\" height=\"12\" viewBox=\"0 0 7 12\" xmlns=\"http://www.w3.org/2000/svg\"><polyline fill=\"none\" stroke=\"#000\" stroke-width=\"1.2\" points=\"1 1 6 6 1 11\"/></svg>";
var paginationPrevious = "<svg width=\"7\" height=\"12\" viewBox=\"0 0 7 12\" xmlns=\"http://www.w3.org/2000/svg\"><polyline fill=\"none\" stroke=\"#000\" stroke-width=\"1.2\" points=\"6 1 1 6 6 11\"/></svg>";
var searchIcon = "<svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><circle fill=\"none\" stroke=\"#000\" stroke-width=\"1.1\" cx=\"9\" cy=\"9\" r=\"7\"/><path fill=\"none\" stroke=\"#000\" stroke-width=\"1.1\" d=\"M14,14 L18,18 L14,14 Z\"/></svg>";
var searchLarge = "<svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" xmlns=\"http://www.w3.org/2000/svg\"><circle fill=\"none\" stroke=\"#000\" stroke-width=\"1.8\" cx=\"17.5\" cy=\"17.5\" r=\"16.5\"/><line fill=\"none\" stroke=\"#000\" stroke-width=\"1.8\" x1=\"38\" y1=\"39\" x2=\"29\" y2=\"30\"/></svg>";
var searchNavbar = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><circle fill=\"none\" stroke=\"#000\" stroke-width=\"1.1\" cx=\"10.5\" cy=\"10.5\" r=\"9.5\"/><line fill=\"none\" stroke=\"#000\" stroke-width=\"1.1\" x1=\"23\" y1=\"23\" x2=\"17\" y2=\"17\"/></svg>";
var slidenavNext = "<svg width=\"14\" height=\"24\" viewBox=\"0 0 14 24\" xmlns=\"http://www.w3.org/2000/svg\"><polyline fill=\"none\" stroke=\"#000\" stroke-width=\"1.4\" points=\"1.225,23 12.775,12 1.225,1 \"/></svg>";
var slidenavNextLarge = "<svg width=\"25\" height=\"40\" viewBox=\"0 0 25 40\" xmlns=\"http://www.w3.org/2000/svg\"><polyline fill=\"none\" stroke=\"#000\" stroke-width=\"2\" points=\"4.002,38.547 22.527,20.024 4,1.5 \"/></svg>";
var slidenavPrevious = "<svg width=\"14\" height=\"24\" viewBox=\"0 0 14 24\" xmlns=\"http://www.w3.org/2000/svg\"><polyline fill=\"none\" stroke=\"#000\" stroke-width=\"1.4\" points=\"12.775,1 1.225,12 12.775,23 \"/></svg>";
var slidenavPreviousLarge = "<svg width=\"25\" height=\"40\" viewBox=\"0 0 25 40\" xmlns=\"http://www.w3.org/2000/svg\"><polyline fill=\"none\" stroke=\"#000\" stroke-width=\"2\" points=\"20.527,1.5 2,20.024 20.525,38.547 \"/></svg>";
var spinner = "<svg width=\"30\" height=\"30\" viewBox=\"0 0 30 30\" xmlns=\"http://www.w3.org/2000/svg\"><circle fill=\"none\" stroke=\"#000\" cx=\"15\" cy=\"15\" r=\"14\"/></svg>";
var totop = "<svg width=\"18\" height=\"10\" viewBox=\"0 0 18 10\" xmlns=\"http://www.w3.org/2000/svg\"><polyline fill=\"none\" stroke=\"#000\" stroke-width=\"1.2\" points=\"1 9 9 1 17 9 \"/></svg>";

var closeIcon = "<svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" xmlns=\"http://www.w3.org/2000/svg\"><line fill=\"none\" stroke=\"#000\" stroke-width=\"1.1\" x1=\"1\" y1=\"1\" x2=\"13\" y2=\"13\"/><line fill=\"none\" stroke=\"#000\" stroke-width=\"1.1\" x1=\"13\" y1=\"1\" x2=\"1\" y2=\"13\"/></svg>";

var closeLarge = "<svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><line fill=\"none\" stroke=\"#000\" stroke-width=\"1.4\" x1=\"1\" y1=\"1\" x2=\"19\" y2=\"19\"/><line fill=\"none\" stroke=\"#000\" stroke-width=\"1.4\" x1=\"19\" y1=\"1\" x2=\"1\" y2=\"19\"/></svg>";

var marker = "<svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><rect x=\"9\" y=\"4\" width=\"1\" height=\"11\"/><rect x=\"4\" y=\"9\" width=\"11\" height=\"1\"/></svg>";

var navbarToggleIcon = "<svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><rect y=\"9\" width=\"20\" height=\"2\"/><rect y=\"3\" width=\"20\" height=\"2\"/><rect y=\"15\" width=\"20\" height=\"2\"/></svg>";

var overlayIcon = "<svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" xmlns=\"http://www.w3.org/2000/svg\"><rect x=\"19\" y=\"0\" width=\"1\" height=\"40\"/><rect x=\"0\" y=\"19\" width=\"40\" height=\"1\"/></svg>";

var paginationNext = "<svg width=\"7\" height=\"12\" viewBox=\"0 0 7 12\" xmlns=\"http://www.w3.org/2000/svg\"><polyline fill=\"none\" stroke=\"#000\" stroke-width=\"1.2\" points=\"1 1 6 6 1 11\"/></svg>";

var paginationPrevious = "<svg width=\"7\" height=\"12\" viewBox=\"0 0 7 12\" xmlns=\"http://www.w3.org/2000/svg\"><polyline fill=\"none\" stroke=\"#000\" stroke-width=\"1.2\" points=\"6 1 1 6 6 11\"/></svg>";

var searchIcon = "<svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\"><circle fill=\"none\" stroke=\"#000\" stroke-width=\"1.1\" cx=\"9\" cy=\"9\" r=\"7\"/><path fill=\"none\" stroke=\"#000\" stroke-width=\"1.1\" d=\"M14,14 L18,18 L14,14 Z\"/></svg>";

var searchLarge = "<svg width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" xmlns=\"http://www.w3.org/2000/svg\"><circle fill=\"none\" stroke=\"#000\" stroke-width=\"1.8\" cx=\"17.5\" cy=\"17.5\" r=\"16.5\"/><line fill=\"none\" stroke=\"#000\" stroke-width=\"1.8\" x1=\"38\" y1=\"39\" x2=\"29\" y2=\"30\"/></svg>";

var searchNavbar = "<svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><circle fill=\"none\" stroke=\"#000\" stroke-width=\"1.1\" cx=\"10.5\" cy=\"10.5\" r=\"9.5\"/><line fill=\"none\" stroke=\"#000\" stroke-width=\"1.1\" x1=\"23\" y1=\"23\" x2=\"17\" y2=\"17\"/></svg>";

var slidenavNext = "<svg width=\"14\" height=\"24\" viewBox=\"0 0 14 24\" xmlns=\"http://www.w3.org/2000/svg\"><polyline fill=\"none\" stroke=\"#000\" stroke-width=\"1.4\" points=\"1.225,23 12.775,12 1.225,1 \"/></svg>";

var slidenavNextLarge = "<svg width=\"25\" height=\"40\" viewBox=\"0 0 25 40\" xmlns=\"http://www.w3.org/2000/svg\"><polyline fill=\"none\" stroke=\"#000\" stroke-width=\"2\" points=\"4.002,38.547 22.527,20.024 4,1.5 \"/></svg>";

var slidenavPrevious = "<svg width=\"14\" height=\"24\" viewBox=\"0 0 14 24\" xmlns=\"http://www.w3.org/2000/svg\"><polyline fill=\"none\" stroke=\"#000\" stroke-width=\"1.4\" points=\"12.775,1 1.225,12 12.775,23 \"/></svg>";

var slidenavPreviousLarge = "<svg width=\"25\" height=\"40\" viewBox=\"0 0 25 40\" xmlns=\"http://www.w3.org/2000/svg\"><polyline fill=\"none\" stroke=\"#000\" stroke-width=\"2\" points=\"20.527,1.5 2,20.024 20.525,38.547 \"/></svg>";

var spinner = "<svg width=\"30\" height=\"30\" viewBox=\"0 0 30 30\" xmlns=\"http://www.w3.org/2000/svg\"><circle fill=\"none\" stroke=\"#000\" cx=\"15\" cy=\"15\" r=\"14\"/></svg>";

var totop = "<svg width=\"18\" height=\"10\" viewBox=\"0 0 18 10\" xmlns=\"http://www.w3.org/2000/svg\"><polyline fill=\"none\" stroke=\"#000\" stroke-width=\"1.2\" points=\"1 9 9 1 17 9 \"/></svg>";

Pas de résolution à ce jour.

Fichiers impliqués

Fichier `assets/app.js`

// Styles
import './uikit-explicit-pieces.scss'
// JS
import UIkit from './uikit-explicit-pieces';

// UIkit
UIkit.notification("Hello World!");

// Styles

import './uikit-explicit-pieces.scss'

// JS

import UIkit from './uikit-explicit-pieces';

// UIkit

UIkit.notification("Hello World!");

Fichier `webpack.config.js`:

const Encore = require('@symfony/webpack-encore');
const path = require('path');

[...]

Encore
    .addAliases({
        // UIkit JS:
        'uikit-util': path.resolve(__dirname, './node_modules/uikit/src/js/util'),
        '@uk-js': path.resolve(__dirname, './node_modules/uikit/src/js'),
        '@uk-scss': path.resolve(__dirname, './node_modules/uikit/src/scss')
    })

[...]

    // enables Sass/SCSS support
    .enableSassLoader()

const Encore = require('@symfony/webpack-encore');

const path = require('path');

[...]

Encore

.addAliases({

// UIkit JS:

'uikit-util': path.resolve(__dirname, './node_modules/uikit/src/js/util'),

'@uk-js': path.resolve(__dirname, './node_modules/uikit/src/js'),

'@uk-scss': path.resolve(__dirname, './node_modules/uikit/src/scss')

})

[...]

// enables Sass/SCSS support

.enableSassLoader()

Bundle Javascript – Fichier `assets/uikit-explicit-pieces.js`:

/*
 * Based on: UIkit v3.6.19
 * Source: https://github.com/uikit/uikit/tree/v3.6.19
 * Documentation: https://getuikit.com/docs/javascript
 */

/*
 * Overrides:
 * ./node_modules/uikit/src/js/uikit-core.js
 * ./node_modules/uikit/src/js/uikit.js
 */

// import UIkit from 'uikit/src/js/api/index';

    /*
     * Overrides:
     * ./node_modules/uikit/src/js/api/index.js
     *
     * Override needed because of the "UIkit.version = VERSION;" line that generates an
     * "Uncaught ReferenceError: VERSION is not defined" error in browser console!
     */

    import globalAPI from '@uk-js/api/global';
    import hooksAPI from '@uk-js/api/hooks';
    import stateAPI from '@uk-js/api/state';
    import instanceAPI from '@uk-js/api/instance';
    import componentAPI from '@uk-js/api/component';
    import * as util from 'uikit-util';

    const UIkit = function (options) {
        this._init(options);
    };

    UIkit.util = util;
    UIkit.data = '__uikit__';
    UIkit.prefix = 'uk-';
    UIkit.options = {};
    // UIkit.version = VERSION;

    globalAPI(UIkit);
    hooksAPI(UIkit);
    stateAPI(UIkit);
    componentAPI(UIkit);
    instanceAPI(UIkit);

    /* END: Overrides: ./node_modules/uikit/src/js/api/index.js */

import Core from '@uk-js/core/core';
import boot from '@uk-js/api/boot';
// import * as components from 'uikit/src/js/core/index';

    /*
     * Overrides:
     * ./node_modules/uikit/src/js/core/index.js
     */

    import {Accordion,
            Alert,
            Cover,
            Drop, Dropdown,
            FormCustom,
            Gif,
            Grid,
            HeightMatch,
            HeightViewport,
            Icon,
            Img,
            Leader,
            Margin,
            Modal,
            Nav,
            Navbar,
            Offcanvas,
            OverflowAuto,
            Responsive,
            Scroll,
            Scrollspy,
            ScrollspyNav,
            Sticky,
            Svg,
            Switcher,
            Tab,
            Toggle,
            Video} from '@uk-js/core/index';

    // Icon components
    import {Close,
            Spinner,
            Slidenav as SlidenavNext,
            Slidenav as SlidenavPrevious,
            Search as SearchIcon,
            IconComponent as Marker,
            IconComponent as NavbarToggleIcon,
            IconComponent as OverlayIcon,
            IconComponent as PaginationNext,
            IconComponent as PaginationPrevious,
            IconComponent as Totop} from '@uk-js/core/icon';

    /* END: Overrides: ./node_modules/uikit/src/js/core/index.js */

/* From: ./node_modules/uikit/src/js/uikit.js */
// import * as components from 'uikit/src/js/components/index';

    /*
     * Overrides:
     * ./node_modules/uikit/src/js/components/index.js
     */

    import {Countdown,
            Filter,
            Lightbox,
            LightboxPanel,
            Notification,
            Parallax,
            Slider,
            SliderParallax,
            Slideshow,
            SlideshowParallax,
            Sortable,
            Tooltip,
            Upload} from '@uk-js/components/index';

    /* END: Overrides: ./node_modules/uikit/src/js/components/index.js */

import {each} from '@uk-js/util/lang';

// register components
/* Declare your selection of UIkit components to be included in the Webpack build and registered here: */
const components = {
    /* Core components */
    Accordion,
    Alert,
    Cover,
    Drop, Dropdown,
    FormCustom,
    Gif,
    Grid,
    HeightMatch,
    HeightViewport,
    Icon,
    Img,
    Leader,
    Margin,
    Modal,
    Nav,
    Navbar,
    Offcanvas,
    OverflowAuto,
    Responsive,
    Scroll,
    Scrollspy,
    ScrollspyNav,
    Sticky,
    Svg,
    Switcher,
    Tab,
    Toggle,
    Video,

    /* Core components: icon */
    Close,
    Spinner,
    SlidenavNext,
    SlidenavPrevious,
    SearchIcon,
    Marker,
    NavbarToggleIcon,
    OverlayIcon,
    PaginationNext,
    PaginationPrevious,
    Totop,

    /* Additional components */
    Countdown,
    Filter,
    Lightbox,
    LightboxPanel,
    Notification,
    Parallax,
    Slider,
    SliderParallax,
    Slideshow,
    SlideshowParallax,
    Sortable,
    Tooltip,
    Upload
};

each(components, (component, name) =>
    UIkit.component(name, component)
);

// core functionality
UIkit.use(Core);

/* Icons must be imported separately, from node_modules/uikit/dist/ folder */
import Icons from 'uikit/dist/js/uikit-icons';
UIkit.use(Icons);

boot(UIkit);

/* END: Overrides: ./node_modules/uikit/src/js/uikit-core.js, ./node_modules/uikit/src/js/uikit.js */

/* FINALLY, export everything into 'UIkit' object. */
export default UIkit;

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

* Based on: UIkit v3.6.19

* Source: https://github.com/uikit/uikit/tree/v3.6.19

* Documentation: https://getuikit.com/docs/javascript

* Overrides:

* ./node_modules/uikit/src/js/uikit-core.js

* ./node_modules/uikit/src/js/uikit.js

// import UIkit from 'uikit/src/js/api/index';

* Overrides:

* ./node_modules/uikit/src/js/api/index.js

* Override needed because of the "UIkit.version = VERSION;" line that generates an

* "Uncaught ReferenceError: VERSION is not defined" error in browser console!

import globalAPI from '@uk-js/api/global';

import hooksAPI from '@uk-js/api/hooks';

import stateAPI from '@uk-js/api/state';

import instanceAPI from '@uk-js/api/instance';

import componentAPI from '@uk-js/api/component';

import * as util from 'uikit-util';

const UIkit = function (options) {

this._init(options);

};

UIkit.util = util;

UIkit.data = '__uikit__';

UIkit.prefix = 'uk-';

UIkit.options = {};

// UIkit.version = VERSION;

globalAPI(UIkit);

hooksAPI(UIkit);

stateAPI(UIkit);

componentAPI(UIkit);

instanceAPI(UIkit);

/* END: Overrides: ./node_modules/uikit/src/js/api/index.js */

import Core from '@uk-js/core/core';

import boot from '@uk-js/api/boot';

// import * as components from 'uikit/src/js/core/index';

* Overrides:

* ./node_modules/uikit/src/js/core/index.js

import {Accordion,

Alert,

Cover,

Drop, Dropdown,

FormCustom,

Gif,

Grid,

HeightMatch,

HeightViewport,

Icon,

Img,

Leader,

Margin,

Modal,

Nav,

Navbar,

Offcanvas,

OverflowAuto,

Responsive,

Scroll,

Scrollspy,

ScrollspyNav,

Sticky,

Svg,

Switcher,

Tab,

Toggle,

Video} from '@uk-js/core/index';

// Icon components

import {Close,

Spinner,

Slidenav as SlidenavNext,

Slidenav as SlidenavPrevious,

Search as SearchIcon,

IconComponent as Marker,

IconComponent as NavbarToggleIcon,

IconComponent as OverlayIcon,

IconComponent as PaginationNext,

IconComponent as PaginationPrevious,

IconComponent as Totop} from '@uk-js/core/icon';

/* END: Overrides: ./node_modules/uikit/src/js/core/index.js */

/* From: ./node_modules/uikit/src/js/uikit.js */

// import * as components from 'uikit/src/js/components/index';

* Overrides:

* ./node_modules/uikit/src/js/components/index.js

import {Countdown,

Filter,

Lightbox,

LightboxPanel,

Notification,

Parallax,

Slider,

SliderParallax,

Slideshow,

SlideshowParallax,

Sortable,

Tooltip,

Upload} from '@uk-js/components/index';

/* END: Overrides: ./node_modules/uikit/src/js/components/index.js */

import {each} from '@uk-js/util/lang';

// register components

/* Declare your selection of UIkit components to be included in the Webpack build and registered here: */

const components = {

/* Core components */

Accordion,

Alert,

Cover,

Drop, Dropdown,

FormCustom,

Gif,

Grid,

HeightMatch,

HeightViewport,

Icon,

Img,

Leader,

Margin,

Modal,

Nav,

Navbar,

Offcanvas,

OverflowAuto,

Responsive,

Scroll,

Scrollspy,

ScrollspyNav,

Sticky,

Svg,

Switcher,

Tab,

Toggle,

Video,

/* Core components: icon */

Close,

Spinner,

SlidenavNext,

SlidenavPrevious,

SearchIcon,

Marker,

NavbarToggleIcon,

OverlayIcon,

PaginationNext,

PaginationPrevious,

Totop,

/* Additional components */

Countdown,

Filter,

Lightbox,

LightboxPanel,

Notification,

Parallax,

Slider,

SliderParallax,

Slideshow,

SlideshowParallax,

Sortable,

Tooltip,

Upload

};

each(components, (component, name) =>

UIkit.component(name, component)

);

// core functionality

UIkit.use(Core);

/* Icons must be imported separately, from node_modules/uikit/dist/ folder */

import Icons from 'uikit/dist/js/uikit-icons';

UIkit.use(Icons);

boot(UIkit);

/* END: Overrides: ./node_modules/uikit/src/js/uikit-core.js, ./node_modules/uikit/src/js/uikit.js */

/* FINALLY, export everything into 'UIkit' object. */

export default UIkit;

Bundle Styles – Fichier: `uikit-explicit-pieces.scss`:

/*
 * Based on: UIkit v3.6.19
 * Source: https://github.com/uikit/uikit/tree/v3.6.19
 * Documentation: https://getuikit.com/docs/sass
 */

/* 1. Your custom variables and variable overwrites. */
//$global-link-color: #DA7D02;

/* 2. Import default variables and available mixins. */
@import "@uk-scss/variables-theme.scss";
@import "@uk-scss/mixins-theme.scss";

/* 3. Your custom mixin overwrites. */
//@mixin hook-card() { color: #000; }

/* 4. Import UIkit here: */

/*
 * Overrides:
 * ./node_modules/uikit/src/scss/uikit-theme.scss
 */

//
// Theme
//

//@import "@uk-scss/theme/theme/_import.scss";

    /*
     * Overrides:
     * ./node_modules/uikit/src/scss/theme/_import.scss
     */

    /*
     * [DEV NOTE] Sachant que les fichiers importés ci-dessous sont relatifs au thème, ils devraient:
     * - N'être importés qu'à la condition qu'on souhaite personnaliser le rendu graphique du composant en question
     * - N'être importés de node_modules qu'à la condition qu'ils nous conviennent en l'état...
     * - ...sinon, être surchargés (en partant impérativement d'un copier-coller de l'original) et modifiés dans le thème
     */

    // Base
    //@import "@uk-scss/theme/variables.scss";
    //@import "@uk-scss/theme/base.scss";

    // Elements
    //@import "@uk-scss/theme/link.scss";
    //@import "@uk-scss/theme/heading.scss";
    //@import "@uk-scss/theme/divider.scss";
    //@import "@uk-scss/theme/list.scss";
    //@import "@uk-scss/theme/description-list.scss";
    //@import "@uk-scss/theme/table.scss";
    //@import "@uk-scss/theme/icon.scss";
    //@import "@uk-scss/theme/form-range.scss";
    //@import "@uk-scss/theme/form.scss";
    //@import "@uk-scss/theme/button.scss";
    //@import "@uk-scss/theme/progress.scss";

    // Layout
    //@import "@uk-scss/theme/section.scss";
    //@import "@uk-scss/theme/container.scss";
    //@import "@uk-scss/theme/tile.scss";
    //@import "@uk-scss/theme/card.scss";

    // Common
    //@import "@uk-scss/theme/close.scss";
    //@import "@uk-scss/theme/spinner.scss";
    //@import "@uk-scss/theme/marker.scss";
    //@import "@uk-scss/theme/totop.scss";
    //@import "@uk-scss/theme/alert.scss";
    //@import "@uk-scss/theme/placeholder.scss";
    //@import "@uk-scss/theme/badge.scss";
    //@import "@uk-scss/theme/label.scss";
    //@import "@uk-scss/theme/overlay.scss";
    //@import "@uk-scss/theme/article.scss";
    //@import "@uk-scss/theme/comment.scss";
    //@import "@uk-scss/theme/search.scss";

    // JavaScript
    //@import "@uk-scss/theme/accordion.scss";
    //@import "@uk-scss/theme/drop.scss";
    //@import "@uk-scss/theme/dropdown.scss";
    //@import "@uk-scss/theme/modal.scss";
    //@import "@uk-scss/theme/slider.scss";
    //@import "@uk-scss/theme/sticky.scss";
    //@import "@uk-scss/theme/offcanvas.scss";
    //@import "@uk-scss/theme/leader.scss";
    //@import "@uk-scss/theme/notification.scss";
    //@import "@uk-scss/theme/tooltip.scss";
    //@import "@uk-scss/theme/sortable.scss";
    //@import "@uk-scss/theme/countdown.scss";

    //@import "@uk-scss/theme/grid.scss";

    // Navs
    //@import "@uk-scss/theme/nav.scss";
    //@import "@uk-scss/theme/navbar.scss";
    //@import "@uk-scss/theme/subnav.scss";
    //@import "@uk-scss/theme/breadcrumb.scss";
    //@import "@uk-scss/theme/pagination.scss";
    //@import "@uk-scss/theme/tab.scss";
    //@import "@uk-scss/theme/slidenav.scss";
    //@import "@uk-scss/theme/dotnav.scss";
    //@import "@uk-scss/theme/thumbnav.scss";
    //@import "@uk-scss/theme/iconnav.scss";

    //@import "@uk-scss/theme/lightbox.scss";

    // Utilities
    //@import "@uk-scss/theme/animation.scss";
    //@import "@uk-scss/theme/width.scss";
    //@import "@uk-scss/theme/height.scss";
    //@import "@uk-scss/theme/text.scss";
    //@import "@uk-scss/theme/column.scss";
    //@import "@uk-scss/theme/background.scss";
    //@import "@uk-scss/theme/align.scss";
    //@import "@uk-scss/theme/utility.scss";
    //@import "@uk-scss/theme/margin.scss";
    //@import "@uk-scss/theme/padding.scss";
    //@import "@uk-scss/theme/position.scss";
    //@import "@uk-scss/theme/transition.scss";
    //@import "@uk-scss/theme/inverse.scss";

    /* END: Overrides: ./node_modules/uikit/src/scss/theme/_import.scss */

//@import "@uk-scss/theme/components/_import.scss";

    /*
     * Overrides:
     * ./node_modules/uikit/src/scss/components/_import.scss
     */

    // Base
    @import "@uk-scss/components/variables.scss";
    @import "@uk-scss/components/mixin.scss";
    @import "@uk-scss/components/base.scss";

    // Elements
    @import "@uk-scss/components/link.scss";
    @import "@uk-scss/components/heading.scss";
    @import "@uk-scss/components/divider.scss";
    @import "@uk-scss/components/list.scss";
    @import "@uk-scss/components/description-list.scss";
    @import "@uk-scss/components/table.scss";
    @import "@uk-scss/components/icon.scss";
    @import "@uk-scss/components/form-range.scss";
    @import "@uk-scss/components/form.scss"; // After: Icon, Form Range
    @import "@uk-scss/components/button.scss";
    @import "@uk-scss/components/progress.scss";

    // Layout
    @import "@uk-scss/components/section.scss";
    @import "@uk-scss/components/container.scss";
    @import "@uk-scss/components/tile.scss";
    @import "@uk-scss/components/card.scss";

    // Common
    @import "@uk-scss/components/close.scss"; // After: Icon
    @import "@uk-scss/components/spinner.scss"; // After: Icon
    @import "@uk-scss/components/totop.scss"; // After: Icon
    @import "@uk-scss/components/marker.scss"; // After: Icon
    @import "@uk-scss/components/alert.scss"; // After: Close
    @import "@uk-scss/components/placeholder.scss";
    @import "@uk-scss/components/badge.scss";
    @import "@uk-scss/components/label.scss";
    @import "@uk-scss/components/overlay.scss"; // After: Icon
    @import "@uk-scss/components/article.scss";
    @import "@uk-scss/components/comment.scss";
    @import "@uk-scss/components/search.scss"; // After: Icon

    // JavaScript
    @import "@uk-scss/components/accordion.scss";
    //@import "@uk-scss/components/drop.scss"; // After: Card
    //@import "@uk-scss/components/dropdown.scss"; // After: Card
    //@import "@uk-scss/components/modal.scss"; // After: Close
    //@import "@uk-scss/components/slideshow.scss";
    //@import "@uk-scss/components/slider.scss";
    //@import "@uk-scss/components/sticky.scss";
    //@import "@uk-scss/components/offcanvas.scss";
    //@import "@uk-scss/components/switcher.scss";
    //@import "@uk-scss/components/leader.scss";
    @import "@uk-scss/components/notification.scss";
    //@import "@uk-scss/components/tooltip.scss";
    //@import "@uk-scss/components/sortable.scss";
    @import "@uk-scss/components/countdown.scss";
    // Scrollspy
    // Toggle
    // Scroll

    @import "@uk-scss/components/grid.scss";

    // Navs
    @import "@uk-scss/components/nav.scss";
    @import "@uk-scss/components/navbar.scss"; // After: Card, Grid, Nav, Icon, Search
    @import "@uk-scss/components/subnav.scss";
    @import "@uk-scss/components/breadcrumb.scss";
    @import "@uk-scss/components/pagination.scss";
    @import "@uk-scss/components/tab.scss";
    @import "@uk-scss/components/slidenav.scss"; // After: Icon
    @import "@uk-scss/components/dotnav.scss";
    @import "@uk-scss/components/thumbnav.scss";
    @import "@uk-scss/components/iconnav.scss";

    @import "@uk-scss/components/lightbox.scss"; // After: Close, Slidenav

    // Utilities
    @import "@uk-scss/components/animation.scss";
    @import "@uk-scss/components/width.scss";
    @import "@uk-scss/components/height.scss";
    @import "@uk-scss/components/text.scss";
    @import "@uk-scss/components/column.scss";
    @import "@uk-scss/components/cover.scss";
    @import "@uk-scss/components/background.scss";
    @import "@uk-scss/components/align.scss";
    @import "@uk-scss/components/svg.scss";
    @import "@uk-scss/components/utility.scss";
    @import "@uk-scss/components/flex.scss"; // After: Utility
    @import "@uk-scss/components/margin.scss";
    @import "@uk-scss/components/padding.scss";
    @import "@uk-scss/components/position.scss";
    @import "@uk-scss/components/transition.scss";
    @import "@uk-scss/components/visibility.scss";
    @import "@uk-scss/components/inverse.scss";

    // Need to be loaded last
    @import "@uk-scss/components/print.scss";

    /* END: Overrides: ./node_modules/uikit/src/scss/components/_import.scss */

/* END: Overrides: ./node_modules/uikit/src/scss/uikit-theme.scss */

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

* Based on: UIkit v3.6.19

* Source: https://github.com/uikit/uikit/tree/v3.6.19

* Documentation: https://getuikit.com/docs/sass

/* 1. Your custom variables and variable overwrites. */

//$global-link-color: #DA7D02;

/* 2. Import default variables and available mixins. */

@import "@uk-scss/variables-theme.scss";

@import "@uk-scss/mixins-theme.scss";

/* 3. Your custom mixin overwrites. */

//@mixin hook-card() { color: #000; }

/* 4. Import UIkit here: */

* Overrides:

* ./node_modules/uikit/src/scss/uikit-theme.scss

// Theme

//@import "@uk-scss/theme/theme/_import.scss";

* Overrides:

* ./node_modules/uikit/src/scss/theme/_import.scss

* [DEV NOTE] Sachant que les fichiers importés ci-dessous sont relatifs au thème, ils devraient:

* - N'être importés qu'à la condition qu'on souhaite personnaliser le rendu graphique du composant en question

* - N'être importés de node_modules qu'à la condition qu'ils nous conviennent en l'état...

* - ...sinon, être surchargés (en partant impérativement d'un copier-coller de l'original) et modifiés dans le thème

// Base

//@import "@uk-scss/theme/variables.scss";

//@import "@uk-scss/theme/base.scss";

// Elements

//@import "@uk-scss/theme/link.scss";

//@import "@uk-scss/theme/heading.scss";

//@import "@uk-scss/theme/divider.scss";

//@import "@uk-scss/theme/list.scss";

//@import "@uk-scss/theme/description-list.scss";

//@import "@uk-scss/theme/table.scss";

//@import "@uk-scss/theme/icon.scss";

//@import "@uk-scss/theme/form-range.scss";

//@import "@uk-scss/theme/form.scss";

//@import "@uk-scss/theme/button.scss";

//@import "@uk-scss/theme/progress.scss";

// Layout

//@import "@uk-scss/theme/section.scss";

//@import "@uk-scss/theme/container.scss";

//@import "@uk-scss/theme/tile.scss";

//@import "@uk-scss/theme/card.scss";

// Common

//@import "@uk-scss/theme/close.scss";

//@import "@uk-scss/theme/spinner.scss";

//@import "@uk-scss/theme/marker.scss";

//@import "@uk-scss/theme/totop.scss";

//@import "@uk-scss/theme/alert.scss";

//@import "@uk-scss/theme/placeholder.scss";

//@import "@uk-scss/theme/badge.scss";

//@import "@uk-scss/theme/label.scss";

//@import "@uk-scss/theme/overlay.scss";

//@import "@uk-scss/theme/article.scss";

//@import "@uk-scss/theme/comment.scss";

//@import "@uk-scss/theme/search.scss";

// JavaScript

//@import "@uk-scss/theme/accordion.scss";

//@import "@uk-scss/theme/drop.scss";

//@import "@uk-scss/theme/dropdown.scss";

//@import "@uk-scss/theme/modal.scss";

//@import "@uk-scss/theme/slider.scss";

//@import "@uk-scss/theme/sticky.scss";

//@import "@uk-scss/theme/offcanvas.scss";

//@import "@uk-scss/theme/leader.scss";

//@import "@uk-scss/theme/notification.scss";

//@import "@uk-scss/theme/tooltip.scss";

//@import "@uk-scss/theme/sortable.scss";

//@import "@uk-scss/theme/countdown.scss";

//@import "@uk-scss/theme/grid.scss";

// Navs

//@import "@uk-scss/theme/nav.scss";

//@import "@uk-scss/theme/navbar.scss";

//@import "@uk-scss/theme/subnav.scss";

//@import "@uk-scss/theme/breadcrumb.scss";

//@import "@uk-scss/theme/pagination.scss";

//@import "@uk-scss/theme/tab.scss";

//@import "@uk-scss/theme/slidenav.scss";

//@import "@uk-scss/theme/dotnav.scss";

//@import "@uk-scss/theme/thumbnav.scss";

//@import "@uk-scss/theme/iconnav.scss";

//@import "@uk-scss/theme/lightbox.scss";

// Utilities

//@import "@uk-scss/theme/animation.scss";

//@import "@uk-scss/theme/width.scss";

//@import "@uk-scss/theme/height.scss";

//@import "@uk-scss/theme/text.scss";

//@import "@uk-scss/theme/column.scss";

//@import "@uk-scss/theme/background.scss";

//@import "@uk-scss/theme/align.scss";

//@import "@uk-scss/theme/utility.scss";

//@import "@uk-scss/theme/margin.scss";

//@import "@uk-scss/theme/padding.scss";

//@import "@uk-scss/theme/position.scss";

//@import "@uk-scss/theme/transition.scss";

//@import "@uk-scss/theme/inverse.scss";

/* END: Overrides: ./node_modules/uikit/src/scss/theme/_import.scss */

//@import "@uk-scss/theme/components/_import.scss";

* Overrides:

* ./node_modules/uikit/src/scss/components/_import.scss

// Base

@import "@uk-scss/components/variables.scss";

@import "@uk-scss/components/mixin.scss";

@import "@uk-scss/components/base.scss";

// Elements

@import "@uk-scss/components/link.scss";

@import "@uk-scss/components/heading.scss";

@import "@uk-scss/components/divider.scss";

@import "@uk-scss/components/list.scss";

@import "@uk-scss/components/description-list.scss";

@import "@uk-scss/components/table.scss";

@import "@uk-scss/components/icon.scss";

@import "@uk-scss/components/form-range.scss";

@import "@uk-scss/components/form.scss"; // After: Icon, Form Range

@import "@uk-scss/components/button.scss";

@import "@uk-scss/components/progress.scss";

// Layout

@import "@uk-scss/components/section.scss";

@import "@uk-scss/components/container.scss";

@import "@uk-scss/components/tile.scss";

@import "@uk-scss/components/card.scss";

// Common

@import "@uk-scss/components/close.scss"; // After: Icon

@import "@uk-scss/components/spinner.scss"; // After: Icon

@import "@uk-scss/components/totop.scss"; // After: Icon

@import "@uk-scss/components/marker.scss"; // After: Icon

@import "@uk-scss/components/alert.scss"; // After: Close

@import "@uk-scss/components/placeholder.scss";

@import "@uk-scss/components/badge.scss";

@import "@uk-scss/components/label.scss";

@import "@uk-scss/components/overlay.scss"; // After: Icon

@import "@uk-scss/components/article.scss";

@import "@uk-scss/components/comment.scss";

@import "@uk-scss/components/search.scss"; // After: Icon

// JavaScript

@import "@uk-scss/components/accordion.scss";

//@import "@uk-scss/components/drop.scss"; // After: Card

//@import "@uk-scss/components/dropdown.scss"; // After: Card

//@import "@uk-scss/components/modal.scss"; // After: Close

//@import "@uk-scss/components/slideshow.scss";

//@import "@uk-scss/components/slider.scss";

//@import "@uk-scss/components/sticky.scss";

//@import "@uk-scss/components/offcanvas.scss";

//@import "@uk-scss/components/switcher.scss";

//@import "@uk-scss/components/leader.scss";

@import "@uk-scss/components/notification.scss";

//@import "@uk-scss/components/tooltip.scss";

//@import "@uk-scss/components/sortable.scss";

@import "@uk-scss/components/countdown.scss";

// Scrollspy

// Toggle

// Scroll

@import "@uk-scss/components/grid.scss";

// Navs

@import "@uk-scss/components/nav.scss";

@import "@uk-scss/components/navbar.scss"; // After: Card, Grid, Nav, Icon, Search

@import "@uk-scss/components/subnav.scss";

@import "@uk-scss/components/breadcrumb.scss";

@import "@uk-scss/components/pagination.scss";

@import "@uk-scss/components/tab.scss";

@import "@uk-scss/components/slidenav.scss"; // After: Icon

@import "@uk-scss/components/dotnav.scss";

@import "@uk-scss/components/thumbnav.scss";

@import "@uk-scss/components/iconnav.scss";

@import "@uk-scss/components/lightbox.scss"; // After: Close, Slidenav

// Utilities

@import "@uk-scss/components/animation.scss";

@import "@uk-scss/components/width.scss";

@import "@uk-scss/components/height.scss";

@import "@uk-scss/components/text.scss";

@import "@uk-scss/components/column.scss";

@import "@uk-scss/components/cover.scss";

@import "@uk-scss/components/background.scss";

@import "@uk-scss/components/align.scss";

@import "@uk-scss/components/svg.scss";

@import "@uk-scss/components/utility.scss";

@import "@uk-scss/components/flex.scss"; // After: Utility

@import "@uk-scss/components/margin.scss";

@import "@uk-scss/components/padding.scss";

@import "@uk-scss/components/position.scss";

@import "@uk-scss/components/transition.scss";

@import "@uk-scss/components/visibility.scss";

@import "@uk-scss/components/inverse.scss";

// Need to be loaded last

@import "@uk-scss/components/print.scss";

/* END: Overrides: ./node_modules/uikit/src/scss/components/_import.scss */

/* END: Overrides: ./node_modules/uikit/src/scss/uikit-theme.scss */

[SEO] Obfuscation des liens pour le maillage interne

26/02/2021 / admin

Article ayant servi de source à ce billet: Comment faire de l’obfuscation de liens pour votre maillage interne ? et version PDF – 410-gone.fr-Comment faire de lobfuscation de liens pour votre maillage interne.

// Source/doc: https://www.410-gone.fr/seo/optimisation-on-site/maillage-interne/cocon-semantique/obfuscation.html

// HTML pour les liens à obfusquer (les URLs doivent être encodées en base-64):
// <span class="qcd" data-qcd="aHR0cHM6Ly93d3cuNDEwLWdvbmUuZnIvYS1wcm9wb3MuaHRtbA==">
//     mentions légales
// </span>

// Encodage en base-64 en PHP:
// https://www.php.net/manual/en/function.base64-encode.php

document.addEventListener("DOMContentLoaded", function(event) {
    var classname = document.getElementsByClassName("qcd");
    for (var i = 0; i < classname.length; i++) {
        //click gauche
        classname[i].addEventListener('click', myFunction, false);
        //click droit
        classname[i].addEventListener('contextmenu', myRightFunction, false);
    }
});

//fonction du click gauche
var myFunction = function(event) {
    var attribute = this.getAttribute("data-qcd");
    if(event.ctrlKey) {
        var newWindow = window.open(decodeURIComponent(window.atob(attribute)), '_blank');
        newWindow.focus();
    } else {
        document.location.href= decodeURIComponent(window.atob(attribute));
    }
};

//fonction du click droit
var myRightFunction = function(event) {
    var attribute = this.getAttribute("data-qcd");
    if(event.ctrlKey) {
        var newWindow = window.open(decodeURIComponent(window.atob(attribute)), '_blank');
        newWindow.focus();
    } else {
        window.open(decodeURIComponent(window.atob(attribute)),'_blank');
    }
}

// Source/doc: https://www.410-gone.fr/seo/optimisation-on-site/maillage-interne/cocon-semantique/obfuscation.html

// HTML pour les liens à obfusquer (les URLs doivent être encodées en base-64):

// <span class="qcd" data-qcd="aHR0cHM6Ly93d3cuNDEwLWdvbmUuZnIvYS1wcm9wb3MuaHRtbA==">

// mentions légales

// </span>

// Encodage en base-64 en PHP:

// https://www.php.net/manual/en/function.base64-encode.php

document.addEventListener("DOMContentLoaded", function(event) {

var classname = document.getElementsByClassName("qcd");

for (var i = 0; i < classname.length; i++) {

//click gauche

classname[i].addEventListener('click', myFunction, false);

//click droit

classname[i].addEventListener('contextmenu', myRightFunction, false);

}

});

//fonction du click gauche

var myFunction = function(event) {

var attribute = this.getAttribute("data-qcd");

if(event.ctrlKey) {

var newWindow = window.open(decodeURIComponent(window.atob(attribute)), '_blank');

newWindow.focus();

} else {

document.location.href= decodeURIComponent(window.atob(attribute));

}

};

//fonction du click droit

var myRightFunction = function(event) {

var attribute = this.getAttribute("data-qcd");

if(event.ctrlKey) {

var newWindow = window.open(decodeURIComponent(window.atob(attribute)), '_blank');

newWindow.focus();

} else {

window.open(decodeURIComponent(window.atob(attribute)),'_blank');

}

[Magento 2] Les bases et patterns de l’utilisation de javascript (AMD, requireJS, widget jQuery, plugin, module, x-magento-init, etc…)

26/02/2021 / admin

Intégrer et exploiter dans Magento 2 un plugin jQuery tiers dont le code source est structuré selon le pattern AMD

Pour illustrer cette partie, nous allons intégrer dans Magento 2 le plugin jQuery Slick Carousel, dont le code source est structuré selon le pattern AMD.

Remarque: l’intégration du plugin jQuery tiers va se faire dans un thème. Si vous comptez utiliser le plugin en question sur un projet multi-sites/multi-thèmes ou sur plusieurs projets, une meilleure stratégie consisterait à intégrer ce premier dans un nouveau module MyVendor_Slick qu’on placerait dans app/code/MyVendor/Slick.
Cette démarche n’est pas décrite ici, mais mériterait d’être envisagée en fonction de vos besoins.

Récupération du plugin sous Git et copie dans l’arborescence du thème

Récupérer la source minifiée du plugin Slick sous Git (tag v1.8.1 dans mon exemple, mais vous pouvez vérifier si il existe un tag plus récent) et copier-coller le fichier dans votre thème, au chemin suivant: app/design/frontend/MyVendor/mytheme/web/js/vendor/slick/slick.min.js.

Déclaration du plugin en tant que module via RequireJS

Dans le fichier app/design/frontend/MyVendor/mytheme/requirejs-config.js:

var config = {
    // Paths defines associations from library name (used to include the library,
    // for example when using "define") and the library file path.
    paths: {
        'slick': 'js/vendor/slick/slick.min
    },

    // Shim: when you're loading your dependencies, requirejs loads them all
    // concurrently. You need to set up a shim to tell requirejs that the library
    // (e.g. a jQuery plugin) depends on another already being loaded (e.g. depends
    // on jQuery).
    shim: {
        'slick': {
            deps: ['jquery']
        }
    }
};

var config = {

// Paths defines associations from library name (used to include the library,

// for example when using "define") and the library file path.

paths: {

'slick': 'js/vendor/slick/slick.min

// Shim: when you're loading your dependencies, requirejs loads them all

// concurrently. You need to set up a shim to tell requirejs that the library

// (e.g. a jQuery plugin) depends on another already being loaded (e.g. depends

// on jQuery).

shim: {

'slick': {

deps: ['jquery']

}

};

Création d’un fichier d’initialisation d’une instance du plugin

Dans votre thème, créer le fichier app/design/frontend/MyVendor/mytheme/web/js/init-slick.js qui va servir à appeller et à initialiser une instance du plugin javascript Slick et vous donnera accès à toutes les options de l’API originale:

define(['jquery','slick'], function($)
{
    return function(config, element)
    {
        $(element).slick(config);
    };
});

define(['jquery','slick'], function($)

{

return function(config, element)

{

$(element).slick(config);

};

});

Petite subtilité: ajouter une configuration spécifique par défaut à toutes les instances de votre plugin

Dans l’exemple ci-dessous, le fichier app/design/frontend/MyVendor/mytheme/web/js/init-slick.js est agrémenté d’un objet defaults qui surcharge (via les settings proposés de base par le plugin Slick Carousel prevArrow et nextArrow) l’aspect graphique des chevrons « slide précédent/slide suivant ».

L’intérêt d’ajouter une configuration spécifique par défaut à toutes les instances de votre plugin réside, pour l’exemple du Carousel, dans le fait qui si la charte graphique de votre projet prévoit les mêmes chevrons spés pour tous les sliders du site, vous allez pouvoir tous les initialiser sans avoir besoin de re-préciser à chaque fois que vous voulez surcharger les pictos fournis de base par ceux de votre charte.

Vous pouvez, bien entendu, les re-surcharger et utiliser d’autres options du plugin à la demande pour chaque nouveau Carousel que vous allez mettre en place.

define(['jquery','slick'], function($)
{
    return function(config, element)
    {
        let defaults = {
            prevArrow: '<button type="button" class="btn-round slick-prev"><svg viewBox="0 0 100 100" class="icon icon-arrow-back-chevron"><use xlink:href="#icon-arrow-back-chevron"></use></svg></button>',
            nextArrow: '<button type="button" class="btn-round slick-next"><svg viewBox="0 0 100 100" class="icon icon-arrow-forward-chevron"><use xlink:href="#icon-arrow-forward-chevron"></use></svg></button>'
        };

        $(element).slick($.extend(defaults, config));
    };
});

define(['jquery','slick'], function($)

{

return function(config, element)

{

let defaults = {

prevArrow: '<button type="button" class="btn-round slick-prev"><svg viewBox="0 0 100 100" class="icon icon-arrow-back-chevron"><use xlink:href="#icon-arrow-back-chevron"></use></svg></button>',

nextArrow: '<button type="button" class="btn-round slick-next"><svg viewBox="0 0 100 100" class="icon icon-arrow-forward-chevron"><use xlink:href="#icon-arrow-forward-chevron"></use></svg></button>'

};

$(element).slick($.extend(defaults, config));

};

});

Appeler et initialiser une instance du plugin sur un élément du DOM

Cette page de la documentation officielle vous expliquera comment appeler et initialiser une instance du plugin sur un élément du DOM dans Magento 2.

Elle aborde notamment la manière de procéder depuis un fichier template PHTML, depuis un fichier JS et comment exécuter data-amge-init et x-magento-init dans un cas où le DOM se met à jour dynamiquement.

Dans ce billet, je vais me contenter d’illustrer un exemple de notation déclarative avec x-magento-init depuis un fichier PHTML.

Exemple de notation déclarative avec `x-magento-init` depuis un fichier PHTML

Ici, j’initialise simplement mon module Slick sur l’élément du DOM qui porte l’ID home-slider. Le carousel va s’afficher soit avec les options de base fournies par le plugin Slick, soit avec les options de base fournies par le plugin Slick ET des pictos chevrons surchargés par ma configuration par défaut si j’en ai défini une.

<div id="home-slider">
    <div><a href="#">Slide one</a></div>
    <div><a href="#">Slide two</a></div>
    <div><a href="#">Slide three</a></div>
    <div><a href="#">Slide four</a></div>
    <div><a href="#">Slide five</a></div>
    <div><a href="#">Slide six</a></div>
</div>

<script type="text/x-magento-init">
    {
        "#home-slider": {
            "js/init-slick": {}
        }
    }
</script>

<div><a href="#">Slide one</a></div>

<div><a href="#">Slide two</a></div>

<div><a href="#">Slide three</a></div>

<div><a href="#">Slide four</a></div>

<div><a href="#">Slide five</a></div>

<div><a href="#">Slide six</a></div>

</div>

{

"#home-slider": {

"js/init-slick": {}

}

</script>

Même exemple avec ajout d’options

Ici, je choisis de paramétrer mon carousel afin qu’il affiche 4 slides à la fois et qu’on scrolle d’une slide à chaque fois qu’on active les boutons prev/next ou tout autre mode de navigation fourni par le plugin. Les options slidesToShow et slidesToScroll sont fournies par le plugin Slick et exploitables immédiatement grâce à la magie d’AMD, de RequireJs et de Magento.

<script type="text/x-magento-init">
    {
        "#home-slider": {
            "js/init-slick": {
                "slidesToShow": "4", // # of slides to show at a time
                "slidesToScroll": "1" // # of slides to scroll at a time
            }
        }
    }
</script>

{

"#home-slider": {

"js/init-slick": {

"slidesToShow": "4", // # of slides to show at a time

"slidesToScroll": "1" // # of slides to scroll at a time

}

</script>

Ressources en ligne:

Un excellent pense-bête sur l’intégration de code javascript dans Magento 2. Tout y est parfaitement structuré, clair, concis et illustré: initialisation imperative/declaration, plain modules, jQuery UI Widgets (add new method, override existing method, create new widget), UI components, etc… Version PDF pour la postérité – jason.codes-Magento 2 JavaScript CheatSheet. Voir aussi, les sous-articles connexes:

[Magento 2] Un module Javascript embarqué via RequireJS pour bloquer le scroll de la page à l’affichage d’un élément en surimpression

29/01/2021 / admin

Testé fonctionnel Magento 2.4 CE. L’idée de ce billet est surtout de montrer comment Magento 2 permet l’accès à de petites fonctionnalités écrites en Javascript/jQuery de manière modulaire via RequireJS.

Le code source du plugin:

app/design/frontend///web/js/utils/page-scroll-state.js

Retenez le nom de la fonction handle() du plugin, car elle nous servira plus bas.

define(['jquery'], function($) {
    'use strict';

    let PAGE_SCROLL_STATE = {};

    PAGE_SCROLL_STATE.handle = function() {
        const $_HTML = $('html');
        if ($_HTML.hasClass('is-disabled-page-scroll')) {
            $_HTML.removeClass('is-disabled-page-scroll');
        } else {
            $_HTML.addClass('is-disabled-page-scroll');
        }
    }

    return PAGE_SCROLL_STATE;

});

define(['jquery'], function($) {

'use strict';

let PAGE_SCROLL_STATE = {};

PAGE_SCROLL_STATE.handle = function() {

const $_HTML = $('html');

if ($_HTML.hasClass('is-disabled-page-scroll')) {

$_HTML.removeClass('is-disabled-page-scroll');

} else {

$_HTML.addClass('is-disabled-page-scroll');

}

return PAGE_SCROLL_STATE;

});

Déclarer le plugin via RequireJS:

app/design/frontend///requirejs-config.js

var config = {

    // Paths defines associations from library name (used to include the library,
    // for example when using "define") and the library file path.
    paths: {
        'page-scroll-state': 'js/utils/page-scroll-state'
    }

};

var config = {

// Paths defines associations from library name (used to include the library,

// for example when using "define") and the library file path.

paths: {

'page-scroll-state': 'js/utils/page-scroll-state'

}

};

A noter: si l’on souhaite rendre notre plug-in disponible immédiatement dans toutes les pages du site, nous pouvons ajouter ceci au fichier requirejs-config.js (je ne sais pas si la présence d’une virgule en fin de ligne peut poser problème):

    // 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: [
        'page-scroll-state': 'js/utils/page-scroll-state',
    ]

// 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: [

'page-scroll-state': 'js/utils/page-scroll-state',

]

Exploiter le plugin dans un autre fichier JS, un PHTML, etc…:

ligne 3: on requiert notre plugin tel que déclaré dans la partie paths: du fichier app/design/frontend///requirejs-config.js
(ligne 2: on n’oublie pas la dépendance à jquery ou autre si besoin…)
ligne 4: on définit un alias pour notre plugin, à invoquer par la suite dans le code qui est encapsulé dans la fonction que nous ouvrons
lignes 10 et 18: on invoque la fonction .handle() de notre plugin, via l’alias pageScrollState (défini comme argument de la fonction en ligne 4)

    require([
        'jquery',
        'page-scroll-state'
    ], function($, pageScrollState) {
        'use strict';

        // A l'ouverture de $_OFFCANVAS_LEFT_PRIMARY...
        $_OFFCANVAS_LEFT_PRIMARY.on('opened.zf.offCanvas', function() {
            // Disable page scroll
            pageScrollState.handle();
        });

        // A la fermeture de $_OFFCANVAS_LEFT_PRIMARY...
        $_OFFCANVAS_LEFT_PRIMARY.on('closed.zf.offCanvas', function() {
            // Closes all open elements, and returns to root menu.
            $_MEGAMENU.foundation('_hideAll');
            // Re-enable page scroll
            pageScrollState.handle();
        });

    });

require([

'jquery',

'page-scroll-state'

], function($, pageScrollState) {

'use strict';

// A l'ouverture de $_OFFCANVAS_LEFT_PRIMARY...

$_OFFCANVAS_LEFT_PRIMARY.on('opened.zf.offCanvas', function() {

// Disable page scroll

pageScrollState.handle();

});

// A la fermeture de $_OFFCANVAS_LEFT_PRIMARY...

$_OFFCANVAS_LEFT_PRIMARY.on('closed.zf.offCanvas', function() {

// Closes all open elements, and returns to root menu.

$_MEGAMENU.foundation('_hideAll');

// Re-enable page scroll

pageScrollState.handle();

});

Bonus: les styles!

//
//  Common (styles-m.css)
//  _____________________________________________

& when (@media-common = true) {
    .is-disabled-page-scroll {
        margin: 0 !important;
        height: 100% !important;
        overflow: hidden !important;
    }
}

// Common (styles-m.css)

// _____________________________________________

& when (@media-common = true) {

.is-disabled-page-scroll {

margin: 0 !important;

height: 100% !important;

overflow: hidden !important;

}

[javaScript] Quelques expressions régulières (Regex) utiles

15/01/2021 / admin

Source: Regex match string until whitespace Javascript.

Une regex qui extrait, à partir d’une chaîne de caractères de type level1 nav-1-1 category-item first active parent is-submenu-item is-drilldown-submenu-item la classe qui commence par nav- et se termine au prochain espacement (whitespace):

$('.level1', '#megaMenu').on('click', function(e){
    e.preventDefault();
    let $_THIS = $(this);

    $_THIS.removeClass(function () { // Select the element divs which has class that starts with "nav-"
        var className = this.className.match(/(nav-)[^\s]+/gi); // Get a match to match the pattern "Starts with nav- and until next whitespace" and extract that classname
        console.log(className); // ["nav-1-1"]
    });
});

$('.level1', '#megaMenu').on('click', function(e){

e.preventDefault();

let $_THIS = $(this);

$_THIS.removeClass(function () { // Select the element divs which has class that starts with "nav-"

var className = this.className.match(/(nav-)[^\s]+/gi); // Get a match to match the pattern "Starts with nav- and until next whitespace" and extract that classname

console.log(className); // ["nav-1-1"]

});

[Magento 2] Afficher/masquer le bouton « Effacer tous les filtres » dans la liste des catégories/produits

12/01/2021 / admin

Testé fonctionnel Magento 2.4!

Dans mon exemple, l’ID « narrow-by-list » est présent deux fois dans le DOM (ce qui n’est pas du tout une bonne pratique) car la liste des filtres s’affiche dans deux zones bien distinctes de la page: 1. en mode horizontal au-dessus de la liste des catégories/produits et dans un volet glissant qui ne s’affiche qu’au clic sur un bouton de type « Voir plus de filtres ».

Il faudra donc adapter un peu mon code à votre propre utilisation.

Chemin: app/design/frontend/MyVendor/MyTheme/Magento_LayeredNavigation/templates/layer/view.phtml.

Je désactive la condition PHP <?php if ($block->getLayer()->getState()->getFilters()) : ?> qui sette la visibilité du bouton « Effacer tout », mais uniquement au rechargement de la page.
J’ajoute un ID <div id="filterActions" class="block-actions filter-actions">.

            <?php //if ($block->getLayer()->getState()->getFilters()) : ?>
                <div id="filterActions" class="block-actions filter-actions">
                    <a href="<?= $block->escapeUrl($block->getClearUrl()) ?>" class="action secondary icon clear small filter-clear">
                        <span><?= $block->escapeHtml(__('Clear All')) ?></span>
                        <span class="icon">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="20" viewBox="0 0 24 20"><g><g><g><path fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="20" d="M1 6.99v0l3 4.5v0l3.5-4v0"/></g><g><path fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="20" d="M13.5 19.5A9.5 9.5 0 1 0 4 10v1.494"/></g></g></g></svg>
                        </span>
                    </a>
                </div>
            <?php //endif; ?>

<?php //if ($block->getLayer()->getState()->getFilters()) : ?>

<a href="<?= $block->escapeUrl($block->getClearUrl()) ?>" class="action secondary icon clear small filter-clear">

<span><?= $block->escapeHtml(__('Clear All')) ?></span>

</span>

</a>

</div>

<?php //endif; ?>

Dans le même fichier view.phtml, j’ajoute ce bout de code javaScript (il vous faudra probablement adapter le ciblage du selecteur suivant qui n’existera pas chez vous: let FILTER = $('#narrow-by-list.is-view-top').find('.active');):

<script>
    require([
        'jquery'
    ], function($){
        'use strict';

        // On vérifie dans le noeud '#narrow-by-list.is-view-top' (view-top.phtml)
        // qu'il y a au moins 1 filtre d'actif.
        function checkForActiveFilter() {
            let FILTER = $('#narrow-by-list.is-view-top').find('.active');

            if (FILTER.length >= 1) {
                return true;
            } else {
                return false;
            }
        }

        // On sette la visibilité du bouton "Effacer tout" en fonction du résultat
        // retourné par la fonction checkForActiveFilter().
        function setFilterActionsVisibility() {
            const $FILTER_ACTIONS = $('#filterActions');

            if ( checkForActiveFilter() == true ){
                $FILTER_ACTIONS.removeClass('no-active-filter');
            } else {
                $FILTER_ACTIONS.addClass('no-active-filter');
            }
        }

        // console.log("is any filter active? " + checkForActiveFilter());
        
        setFilterActionsVisibility();
    });
</script>

require([

'jquery'

], function($){

'use strict';

// On vérifie dans le noeud '#narrow-by-list.is-view-top' (view-top.phtml)

// qu'il y a au moins 1 filtre d'actif.

function checkForActiveFilter() {

let FILTER = $('#narrow-by-list.is-view-top').find('.active');

if (FILTER.length >= 1) {

return true;

} else {

return false;

}

// On sette la visibilité du bouton "Effacer tout" en fonction du résultat

// retourné par la fonction checkForActiveFilter().

function setFilterActionsVisibility() {

const $FILTER_ACTIONS = $('#filterActions');

if ( checkForActiveFilter() == true ){

$FILTER_ACTIONS.removeClass('no-active-filter');

} else {

$FILTER_ACTIONS.addClass('no-active-filter');

}

// console.log("is any filter active? " + checkForActiveFilter());

setFilterActionsVisibility();

});

</script>

On n’oublie pas le petit CSS qui va bien:

#filterActions.no-active-filter {
    display: none !important;
}

#filterActions.no-active-filter {

display: none !important;

}

[Magento 2] Etendre un composant JS natif

07/12/2020 / admin

Testé fonctionnel Magento 2.4. Source: Extending Magento 2 default JS components. Version PDF – inchoo.net-Extending Magento 2 default JS components.

Etendre le composant UI Tabs pour ajouter un effet de bordure animée sous les onglets:

app/design/frontend/MyVendor/mytheme/web/js/tabs-custom.js

define([
        'jquery',
        'jquery-ui-modules/widget',
        'jquery-ui-modules/core',
        'mage/mage',
        'mage/collapsible'],
    function($){
        $.widget('custom.tabs', $.mage.tabs, {
            options: {
                indicator: false
            },
            _create: function () {
                // IF NO options ARE POSSIBLE:
                // if ( $(".items.has-indicator").length > 0 ){
                //     this._addIndicator();
                // }
                if (this.options.indicator) {
                    this._addIndicator();
                }
            },
            _addIndicator: function () {
                var $menu = $(".items.has-indicator"),
                    indicator = $('<span class="indicator"></span>');

                $menu.append(indicator);

                position_indicator($menu.find("li.current"));

                setTimeout(function(){indicator.css("opacity", 1);}, 500);
                $menu.find("li").mouseenter(function(){
                    position_indicator($(this));
                });
                $menu.find("li").mouseleave(function(){
                    position_indicator($menu.find("li.current"));
                });

                $(window).on('resize', function(){
                    position_indicator($menu.find("li.current"));
                });

                function position_indicator(ele){
                    var left   = ele.position().left,
                        width  = ele.outerWidth(),
                        top    = ele.position().top,
                        height = ele.outerHeight();

                    if(window.matchMedia("(max-width:890px)").matches){
                        indicator.stop().animate({
                            top: top,
                            height: height,
                            width: 3,
                            left: 0
                        });
                    }
                    else{
                        indicator.stop().animate({
                            left: left,
                            width: width,
                            height: 3,
                            top: "100%"
                        });
                    }
                }
            }
        });
        return $.custom.tabs;
    });

define([

'jquery',

'jquery-ui-modules/widget',

'jquery-ui-modules/core',

'mage/mage',

'mage/collapsible'],

function($){

$.widget('custom.tabs', $.mage.tabs, {

options: {

indicator: false

_create: function () {

// IF NO options ARE POSSIBLE:

// if ( $(".items.has-indicator").length > 0 ){

// this._addIndicator();

// }

if (this.options.indicator) {

this._addIndicator();

}

_addIndicator: function () {

var $menu = $(".items.has-indicator"),

indicator = $('<span class="indicator"></span>');

$menu.append(indicator);

position_indicator($menu.find("li.current"));

setTimeout(function(){indicator.css("opacity", 1);}, 500);

$menu.find("li").mouseenter(function(){

position_indicator($(this));

});

$menu.find("li").mouseleave(function(){

position_indicator($menu.find("li.current"));

});

$(window).on('resize', function(){

position_indicator($menu.find("li.current"));

});

function position_indicator(ele){

var left = ele.position().left,

width = ele.outerWidth(),

top = ele.position().top,

height = ele.outerHeight();

if(window.matchMedia("(max-width:890px)").matches){

indicator.stop().animate({

top: top,

height: height,

width: 3,

left: 0

});

}

else{

indicator.stop().animate({

left: left,

width: width,

height: 3,

top: "100%"

});

}

});

return $.custom.tabs;

});

app/design/frontend/MyVendor/mytheme/requirejs-config.js

var config = {
    map: {
        '*' : {
            'tabs': 'js/tabs-custom'
        }
    }
};

var config = {

map: {

'*' : {

'tabs': 'js/tabs-custom'

}

};

app/design/frontend/MyVendor/mytheme/Magento_Theme/templates/html/sections.phtml

<div class="section-items <?= $block->escapeHtmlAttr($groupCss) ?>-items"
     data-mage-init='{"tabs":{"openedState":"active","indicator":"true"}}'>

1 2	<div class="section-items <?= $block->escapeHtmlAttr($groupCss) ?>-items" data-mage-init='{"tabs":{"openedState":"active","indicator":"true"}}'>

app/design/frontend/MyVendor/mytheme/web/css/source/tabs.less

@tab-item-height: 50px;
@tab-item-border-width: 3px;

.items:not(.nav) {
    border-bottom: none 0;
    display: flex;
    .nav.item {
        margin: 0;
        display: flex;
        > a,
        &.current > strong {
            padding: 0 @tab-item-height / 2.25;
            position: relative;
            display: flex;
            align-items: center;
        }
        &.current > strong {
            font-weight: 500;
            &:hover {
                color: @red;
            }
        }
    }
    &.has-indicator {
        position: relative;
        .indicator{
            left: 0;
            height: 3px;
            position: absolute;
            bottom: 0;
            width: 0;
            opacity: 0;
            background: @red;
            overflow: visible !important;

            &:before{
                content:"";
                position: absolute;
                bottom: 0;
                background-color: @red;
            }
        }
    }
}



//
//  Mobile
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
    .items:not(.nav) {
        flex-direction: column;
        background: linear-gradient(90deg, @greyLight 0%, @greyLight @tab-item-border-width, transparent @tab-item-border-width, transparent 100%);
        .nav.item {
            height: @tab-item-height;
        }
        &.has-indicator {
            .indicator {
                &:before{
                    width: 13px;
                    height: 2px;
                    left: 0;
                    top: 50%;
                    transform: translateY(-50%) translateX(0);
                }
            }
        }
    }
}



//
//  Desktop
//  _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
    .items:not(.nav) {
        flex-direction: row;
        background: linear-gradient(180deg, transparent 0%, transparent @tab-item-height, @greyLight @tab-item-height, @greyLight 100%);
        .nav.item {
            // total height: @tab-item-height + @tab-item-border-width;
            height: @tab-item-height + @tab-item-border-width;
        }
        &.has-indicator {
            .indicator {
                transform: translateY(-3px);
                &:before{
                    width: 2px;
                    height: 13px;
                    left: 50%;
                    transform: translateX(-50%);
                }
            }
        }
    }
}

@tab-item-height: 50px;

@tab-item-border-width: 3px;

.items:not(.nav) {

border-bottom: none 0;

display: flex;

.nav.item {

margin: 0;

display: flex;

> a,

&.current > strong {

padding: 0 @tab-item-height / 2.25;

position: relative;

display: flex;

align-items: center;

}

&.current > strong {

font-weight: 500;

&:hover {

color: @red;

}

&.has-indicator {

position: relative;

.indicator{

left: 0;

height: 3px;

position: absolute;

bottom: 0;

width: 0;

opacity: 0;

background: @red;

overflow: visible !important;

&:before{

content:"";

position: absolute;

bottom: 0;

background-color: @red;

}

// Mobile

// _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {

.items:not(.nav) {

flex-direction: column;

background: linear-gradient(90deg, @greyLight 0%, @greyLight @tab-item-border-width, transparent @tab-item-border-width, transparent 100%);

.nav.item {

height: @tab-item-height;

}

&.has-indicator {

.indicator {

&:before{

width: 13px;

height: 2px;

left: 0;

top: 50%;

transform: translateY(-50%) translateX(0);

}

// Desktop

// _____________________________________________

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {

.items:not(.nav) {

flex-direction: row;

background: linear-gradient(180deg, transparent 0%, transparent @tab-item-height, @greyLight @tab-item-height, @greyLight 100%);

.nav.item {

// total height: @tab-item-height + @tab-item-border-width;

height: @tab-item-height + @tab-item-border-width;

}

&.has-indicator {

.indicator {

transform: translateY(-3px);

&:before{

width: 2px;

height: 13px;

left: 50%;

transform: translateX(-50%);

}

app/design/frontend/MyVendor/mytheme/Magento_Sales/layout/sales_order_info_links.xml et app/design/frontend/MyVendor/mytheme/Magento_Sales/layout/sales_order_guest_info_links.xml

<body>
    <referenceContainer name="content">
        <block class="Magento\Framework\View\Element\Html\Links" as="links" name="sales.order.info.links" before="-">
            <arguments>
                <argument name="css_class" xsi:type="string">items order-links has-indicator</argument>
            </arguments>

<body>

<argument name="css_class" xsi:type="string">items order-links has-indicator</argument>

</arguments>

Theme by Anders Norén — Up ↑

Le bloc-notes professionnel d'un développeur front-end senior

Articles récents

Catégories

Tags

Archives

Méta

Tagjavascript

Base de l’initialisation du helper

Utiliser la méthode listen() avec un breakpoint unique

Une autre solution si vous souhaitez une meilleure séparation du code exécuté par breakpoint

Utiliser PurgeCSS avec Webpack Encore

Le tree shaking avec Webpack Encore

Activer les commentaires /* unused harmony export */ en développement avec le paramètre config.optimization.usedExports = true;

Méthode préférée de création d’un bundle des composants du framework front-end UIkit v3 avec Webpack

La configuration de Webpack

Fichier webpack.config.js

Le bundle à la carte des styles (format SCSS)

Fichier assets/styles/app.scss

Fichier assets/styles/_uikit-explicit-pieces.scss

Edit: l’utilisation de PurgeCSS avec Webpack rend le reste de la partie SCSS de cet article totalement OBSOLèTE!

Fichier assets/uikit/src/scss/theme/_import.scss

Fichier assets/uikit/src/scss/components/_import.scss

Les fichiers JS

Fichier assets/app.js

Fichier assets/uikit/src/js/core/index.js

Fichier assets/uikit/src/js/components/index.js

Les icônes

Structure des dossiers (à respecter)

Fichier assets/uikit/build/util.js

Petit récapitulatif de l’arborescence attendue

Le script bash

Nouvelle méthode (au 04/05/2021):

Méthode précédente (dépréciée):

Quelques chiffres suite à mes tests

Caveats connus!

Méthode alternative (attention: limitations connues au niveau des icônes)

Diagnostique des erreurs:

Fichiers impliqués

Fichier assets/app.js

Fichier webpack.config.js:

Bundle Javascript – Fichier assets/uikit-explicit-pieces.js:

Bundle Styles – Fichier: uikit-explicit-pieces.scss:

Intégrer et exploiter dans Magento 2 un plugin jQuery tiers dont le code source est structuré selon le pattern AMD

Récupération du plugin sous Git et copie dans l’arborescence du thème

Déclaration du plugin en tant que module via RequireJS

Création d’un fichier d’initialisation d’une instance du plugin

Petite subtilité: ajouter une configuration spécifique par défaut à toutes les instances de votre plugin

Appeler et initialiser une instance du plugin sur un élément du DOM

Exemple de notation déclarative avec x-magento-init depuis un fichier PHTML

Même exemple avec ajout d’options

Ressources en ligne:

Le code source du plugin:

Déclarer le plugin via RequireJS:

Exploiter le plugin dans un autre fichier JS, un PHTML, etc…:

Bonus: les styles!

Etendre le composant UI Tabs pour ajouter un effet de bordure animée sous les onglets:

Utiliser la méthode `listen()` avec un breakpoint unique

Activer les commentaires `/* unused harmony export */` en développement avec le paramètre `config.optimization.usedExports = true;`

Fichier `webpack.config.js`

Fichier `assets/styles/app.scss`

Fichier `assets/styles/_uikit-explicit-pieces.scss`

Fichier `assets/uikit/src/scss/theme/_import.scss`

Fichier `assets/uikit/src/scss/components/_import.scss`

Fichier `assets/app.js`

Fichier `assets/uikit/src/js/core/index.js`

Fichier `assets/uikit/src/js/components/index.js`

Fichier `assets/uikit/build/util.js`

Fichier `assets/app.js`

Fichier `webpack.config.js`:

Bundle Javascript – Fichier `assets/uikit-explicit-pieces.js`:

Bundle Styles – Fichier: `uikit-explicit-pieces.scss`:

Exemple de notation déclarative avec `x-magento-init` depuis un fichier PHTML