Étiquette : plugin

[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;

}

[SPIP] Ajout d’un attribut d’accessibilité aria-expanded aux blocs dépliables du plugin Couteau Suisse pour conformité au RGAA

11/01/2019 / admin

Objectif: Ajout d’un attribut aria-expanded aux blocs dépliables du plugin Couteau Suisse pour conformité au critère 7.1.1 du RGAA (Compatibilité avec les outils d’assistance).

Blocs dépliables, version 1.2.2 (pas testé avec d’autres versions)
Fichier concerné: spip/plugins/contrib/blocsdepliables/js/blocs.js.

1. Dans la fonction blocs_toggle_slide_dist, modifier la ligne suivante:

return this.is(".blocs_slide")?this.slideUp(blocs_slide):this.slideDown(blocs_slide);

1	return this.is(".blocs_slide")?this.slideUp(blocs_slide):this.slideDown(blocs_slide);

…comme ceci:

return this.is(".blocs_slide")?this.slideUp(blocs_slide).attr('aria-expanded', 'false'):this.slideDown(blocs_slide).attr('aria-expanded', 'true');

1	return this.is(".blocs_slide")?this.slideUp(blocs_slide).attr('aria-expanded', 'false'):this.slideDown(blocs_slide).attr('aria-expanded', 'true');

2. Dans la fonction blocs_toggle, ajouter:

cible.children('.ouvrir_fermer').attr('aria-expanded', cible.is('.blocs_replie')?false:true);

1	cible.children('.ouvrir_fermer').attr('aria-expanded', cible.is('.blocs_replie')?false:true);

…juste après la ligne:

cible.toggleClass('blocs_replie').blocs_set_title();

1	cible.toggleClass('blocs_replie').blocs_set_title();

[Gulp] Génération d’une police d’icônes avec template en SASS

14/09/2016 / admin

Tutoriel : ICONFONT : GÉNÉRATION VIA GULP.JS
Plug-in Gulp sur github.com : gulp-icon-font – Générer une police d’icône (iconfont) à partir de fichiers SVG.
Sur npmjs.com – gulp-iconfont – Create icon fonts from several SVG icons.
How to generate an iconfont styleguide with Gulp

Attention : préférer les sources hébergées sur github.com à celles présentes dans les codebits du tutoriel.

template sass

Par rapport au tutoriel et aux sources du plug-in sur github.com, notez la présence d’un mixin init-icon-font.

@mixin init-icon-font(){
    display: inline-block;
    font-family: '<%= fontName %>';
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    line-height: 1;
    text-transform: none;
}

@font-face {
    font-family: '<%= fontName %>';
    font-weight: normal;
    font-style: normal;
    src: url('<%= fontPath %><%= fontName %>.eot');
    src: url('<%= fontPath %><%= fontName %>.woff2') format('woff2'),
         url('<%= fontPath %><%= fontName %>.woff') format('woff'),
         url('<%= fontPath %><%= fontName %>.ttf') format('truetype'),
         url('<%= fontPath %><%= fontName %>.eot?#iefix') format('embedded-opentype');
}

.<%= className %>[class^="<%= className %>-"],
.<%= className %>[class*=" <%= className %>-"],
[class*="-<%= className %>-"]{
    @include init-icon-font();
}

$icons: (
    <%= glyphs.map(function(glyph) {
        return glyph.name + ': \'' + '\\' + glyph.unicode[0].charCodeAt(0)
            .toString(16).toUpperCase() + '\''
    }).join(',\n    ') %>
);

@each $name, $icon in $icons {
    .<%= className %>-#{$name} {
        &:before { content: $icon; }
    }
}

@mixin init-icon-font(){

display: inline-block;

font-family: '<%= fontName %>';

-moz-osx-font-smoothing: grayscale;

-webkit-font-smoothing: antialiased;

font-style: normal;

font-variant: normal;

font-weight: normal;

line-height: 1;

text-transform: none;

}

@font-face {

font-family: '<%= fontName %>';

font-weight: normal;

font-style: normal;

src: url('<%= fontPath %><%= fontName %>.eot');

src: url('<%= fontPath %><%= fontName %>.woff2') format('woff2'),

url('<%= fontPath %><%= fontName %>.woff') format('woff'),

url('<%= fontPath %><%= fontName %>.ttf') format('truetype'),

url('<%= fontPath %><%= fontName %>.eot?#iefix') format('embedded-opentype');

}

.<%= className %>[class^="<%= className %>-"],

.<%= className %>[class*=" <%= className %>-"],

[class*="-<%= className %>-"]{

@include init-icon-font();

}

$icons: (

<%= glyphs.map(function(glyph) {

return glyph.name + ': \'' + '\\' + glyph.unicode[0].charCodeAt(0)

.toString(16).toUpperCase() + '\''

}).join(',\n ') %>

);

@each $name, $icon in $icons {

.<%= className %>-#{$name} {

&:before { content: $icon; }

}

gulpfile.js

var gulp = require('gulp');
    sass = require('gulp-sass');
    iconfont = require('gulp-iconfont');

gulp.task('iconfont', function () {
  gulp.src('src/icons/**/*.svg')
    .pipe(iconfont({
      fontName: 'project'
    , prependUnicode: true
    , formats: ['ttf', 'eot', 'woff', 'woff2']
    , timestamp: runTimestamp
    , normalize: true
    , fontHeight: 1001
    , centerHorizontally: true
    }))
    .on('glyphs', function (glyphs) {
      console.log(glyphs);
      gulp.src('src/sass/templates/_icons.scss')
        .pipe(consolidate('lodash', {
          glyphs: glyphs
        , fontName: 'project'
        , fontPath: '/media/themes/project/icons/'
        , className: 'icon'
        })).on('error', function(e){console.log(e);})
        .pipe(gulp.dest('src/sass'));
    })
    .pipe(gulp.dest('image/icons'));
});

gulp.task('sass', function(){
  return gulp.src('src/sass/**/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('style'))
});

// Watch every tasks with 'gulp watch'
gulp.task('watch', ['iconfont', 'sass'], function(){});

var gulp = require('gulp');

sass = require('gulp-sass');

iconfont = require('gulp-iconfont');

gulp.task('iconfont', function () {

gulp.src('src/icons/**/*.svg')

.pipe(iconfont({

fontName: 'project'

, prependUnicode: true

, formats: ['ttf', 'eot', 'woff', 'woff2']

, timestamp: runTimestamp

, normalize: true

, fontHeight: 1001

, centerHorizontally: true

}))

.on('glyphs', function (glyphs) {

console.log(glyphs);

gulp.src('src/sass/templates/_icons.scss')

.pipe(consolidate('lodash', {

glyphs: glyphs

, fontName: 'project'

, fontPath: '/media/themes/project/icons/'

, className: 'icon'

})).on('error', function(e){console.log(e);})

.pipe(gulp.dest('src/sass'));

})

.pipe(gulp.dest('image/icons'));

});

gulp.task('sass', function(){

return gulp.src('src/sass/**/*.scss')

.pipe(sass().on('error', sass.logError))

.pipe(gulp.dest('style'))

});

// Watch every tasks with 'gulp watch'

gulp.task('watch', ['iconfont', 'sass'], function(){});

Utilisation dans des sources SASS :

.element{
    &:after{
        @include init-icon-font();
        content: '\EA13';
    }
    &.is-active{
        &:after{
            transform : translateY(-50%) rotate(180deg);
        }
    }
}

.element{

&:after{

@include init-icon-font();

content: '\EA13';

}

&.is-active{

&:after{

transform : translateY(-50%) rotate(180deg);

}

(bonus) Markup HTML planche d’icônes

<ul class="doc-iconlist">
    <li><i class="icon icon-"></i><p>icon icon-</p></li>
</ul>

<style type="text/css">
  .doc-iconlist li{
     width: 12.50%;
     height: 115px;
     padding: 10px;
     float: left;
     text-align: center;
     border: 1px solid #fff;
     background-color: #eee;
  }
  .doc-iconlist i{
      font-size: 2.6em;
  }
</style>

</ul>

.doc-iconlist li{

width: 12.50%;

height: 115px;

padding: 10px;

float: left;

text-align: center;

border: 1px solid #fff;

background-color: #eee;

}

.doc-iconlist i{

font-size: 2.6em;

}

</style>

How to generate an iconfont styleguide with Gulp

Source: How to generate html page with elements from scss in Gulp
sur Stack Overflow

Here is an example using the jade templating engine. This will read the file ./test.scss, extract all the icon-* words and generate a ./template.html file:

Gulpfile.js:

// npm i gulp gulp-jade --save-dev

var gulp = require('gulp'),
    jade = require('gulp-jade'),
    fs   = require('fs');


gulp.task('default', function () {
    var re = new RegExp(/icon-(\w+)/);

    fs.readFile('./test.scss', 'utf8', function(err, data) {
        var icons = []
        if(err)
            return console.log(err);
        data.split('\r\n').forEach(function(icon) {
            var match = re.exec(icon);
            if(match)
                icons.push('icon-' + match[1])
        })
        // the gulp-jade plugin expects template local data to be an object
        // such as:
        // {locals: YOUR_DATA_OBJECT_TO_BIND}
        bind({locals: {icons: icons}})
    });

    // method that will bind data to your template
    var bind = function(data) {     
        gulp.src('./template.jade')
            .pipe(jade(data))
            .pipe(gulp.dest('./'))
    }
});

// npm i gulp gulp-jade --save-dev

var gulp = require('gulp'),

jade = require('gulp-jade'),

fs = require('fs');

gulp.task('default', function () {

var re = new RegExp(/icon-(\w+)/);

fs.readFile('./test.scss', 'utf8', function(err, data) {

var icons = []

if(err)

return console.log(err);

data.split('\r\n').forEach(function(icon) {

var match = re.exec(icon);

if(match)

icons.push('icon-' + match[1])

})

// the gulp-jade plugin expects template local data to be an object

// such as:

// {locals: YOUR_DATA_OBJECT_TO_BIND}

bind({locals: {icons: icons}})

});

// method that will bind data to your template

var bind = function(data) {

gulp.src('./template.jade')

.pipe(jade(data))

.pipe(gulp.dest('./'))

}

});

./test.scss:

.icon-calendar {
    @include icon(calendar);
}
.icon-circle {
    @include icon(circle);
}
.icon-sun {
    @include icon(sun);
}
.icon-home {
    @include icon(home);
}

.icon-calendar {

@include icon(calendar);

}

.icon-circle {

@include icon(circle);

}

.icon-sun {

@include icon(sun);

}

.icon-home {

@include icon(home);

}

./template.jade

The icons variable comes from the {locals: {icons: {}} argument in the .pipe(jade(data)) call.

doctype html
html(lang="en")
    head
    // you may want to add a link to your compiled `css` file for a nicer display
    body
        for ic in icons
            i(class=ic)
                |.
                = ic

doctype html

html(lang="en")

head

// you may want to add a link to your compiled `css` file for a nicer display

body

for ic in icons

i(class=ic)

= ic

[jQuery] Créer un plugin avec la méthode jQuery.fn.extend()

19/08/2016 / admin

Sources :

devheart.org – Tutorial: Creating a jQuery plugin
lostechies.com – Extending Objects in jQuery

Attention : en l’état, ce code requiert l’utilisation des plugins bxSlider et enquire.js et n’est pas tout-à-fait opérationnel. Le but de ce billet est de mettre en avant le principe de créer un mini plugin qui stocke des valeurs spécifiques de paramètres issus d’un plugin tiers (en l’occurence bxslider) afin de pouvoir les redistribuer à la volée sans avoir à les ressaisir à chaque fois.

jQuery(document).ready(function() { jQuery.fn.setSlider = function(settings){ var config = { 'minSlides': '1', 'maxSlides': '3', 'slideWidth': '200', 'slideMargin': '20', 'moveSlides': '1', 'controls': false }; if (settings){jQuery.extend(config, settings);} return this.each(function(){ jQuery(this).bxSlider4({ minSlides: config.minSlides, maxSlides: config.maxSlides, slideWidth: config.slideWidth, slideMargin: config.slideMargin, moveSlides: config.moveSlides, controls: config.controls }); }); }; var pushOffreSlider = jQuery('.push-offre-slider'); // enquire JS enquire.register(bpSmartphone, { match : function() { pushOffreSlider.setSlider({ slideWidth: 200, maxSlides: 1, slideMargin: 20 }); // console.log('bpSmartphone'); }, unmatch : function() {} }); enquire.register(bpTablet, { match : function() { pushOffreSlider.setSlider({ slideWidth: 200, maxSlides: 2, slideMargin: 20 }); // console.log('bpTablet'); }, unmatch : function() {} }); enquire.register(bpDesktop, { match : function() { pushOffreSlider.setSlider({ slideWidth: 200, maxSlides: 3, slideMargin: 20 }); // console.log('bpDesktop'); }, unmatch : function() {} }); });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

jQuery(document).ready(function() {

    jQuery.fn.setSlider = function(settings){
        var config = {
            'minSlides': '1',
            'maxSlides': '3',
            'slideWidth': '200',
            'slideMargin': '20',
            'moveSlides': '1',
            'controls': false
        };

        if (settings){jQuery.extend(config, settings);}

        return this.each(function(){
            jQuery(this).bxSlider4({
                minSlides: config.minSlides,
                maxSlides: config.maxSlides,
                slideWidth: config.slideWidth,
                slideMargin: config.slideMargin,
                moveSlides: config.moveSlides,
                controls: config.controls
            });
        });
    };

    var pushOffreSlider = jQuery('.push-offre-slider');

    // enquire JS
    enquire.register(bpSmartphone, {
      match : function() {
        pushOffreSlider.setSlider({
            slideWidth: 200,
            maxSlides: 1,
            slideMargin: 20
        });
        // console.log('bpSmartphone');
      },
      unmatch : function() {}
    });

    enquire.register(bpTablet, {
      match : function() {
        pushOffreSlider.setSlider({
            slideWidth: 200,
            maxSlides: 2,
            slideMargin: 20
        });
        //  console.log('bpTablet');
      },
      unmatch : function() {}
    });

    enquire.register(bpDesktop, {
      match : function() {
        pushOffreSlider.setSlider({
            slideWidth: 200,
            maxSlides: 3,
            slideMargin: 20
        });
        // console.log('bpDesktop');
      },
      unmatch : function() {}
    });

});

Articles récents

Catégories

Archives

Méta

Étiquette : plugin

[SEO] Obfuscation des liens pour le maillage interne

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

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:

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

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!

[SPIP] Ajout d’un attribut d’accessibilité aria-expanded aux blocs dépliables du plugin Couteau Suisse pour conformité au RGAA

[Gulp] Génération d’une police d’icônes avec template en SASS

template sass

gulpfile.js

Utilisation dans des sources SASS :

(bonus) Markup HTML planche d’icônes

How to generate an iconfont styleguide with Gulp

Gulpfile.js:

./test.scss:

./template.jade

[jQuery] Créer un plugin avec la méthode jQuery.fn.extend()

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!

template sass

gulpfile.js

Utilisation dans des sources SASS :

(bonus) Markup HTML planche d’icônes

How to generate an iconfont styleguide with Gulp

Gulpfile.js:

./test.scss:

./template.jade

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