Mois : mars 2017

[Gulp] Stocker ses options de configuration dans un fichier JSON externe surveillé (gulp watch)

31/03/2017 / admin

Sources :

Doc officielle à propos des fichiers externes de configuration au format JSON : Gulp recipes – Using external config file
M’a donné la solution : Gulp Minify & Concat Javascript
M’ont seulement mis sur la voie : Javascript: get package.json data in gulpfile.js, How To Keep Your Gulp Configuration Options In A JSON File
How to Simplify Your Development Workflow with Gulp

Problématique :

Ce message laissé sur Stack Overflow. J’utilise Gulp pour minifier 2 types bien distincts de fichiers JS :

L’ensemble des fichiers JS stockés dans un dossier ./src/js qui sont des plugins custom écrits spécifiquement pour les besoins du projet ou des vendor (ou « third-party ») plugins surchargés et modifiés spécifiquement pour les besoins du projets.

Une sélection de fichiers JS stockés dans un dossier ./src/vendor/[...] qui sont des vendor plugins que je souhaite utiliser en l’état, sans les modifier (composant Bootstrap, Modernizr, ou autre…).

J’utilise un fichier de configuration externe gulpconf.json pour (notamment) constituer une liste de chemins vers les third-party plugins que je souhaite ajouter aux sources de mon projet. Ce fichier ressemble à ceci :

{
  "js" : {
    "vendor" : [
      "./src/vendor/browser-detection/src/browser-detection.js",
      "./src/vendor/foundation/js/foundation.js",
      "./src/vendor/modernizr/lib/metadata.js",
      "./src/vendor/jquery-mobile/js/events/navigate.js",
      "./src/vendor/jquery-mobile/js/events/touch.js",
      "./src/vendor/jquery-ui/ui/jquery.ui.autocomplete.js",
      "./src/vendor/jquery-ui/ui/jquery.ui.effect-clip.js",
      "./src/vendor/jquery-ui/ui/jquery.ui.effect-bounce.js"
    ]
  }
}

{

"js" : {

"vendor" : [

"./src/vendor/browser-detection/src/browser-detection.js",

"./src/vendor/foundation/js/foundation.js",

"./src/vendor/modernizr/lib/metadata.js",

"./src/vendor/jquery-mobile/js/events/navigate.js",

"./src/vendor/jquery-mobile/js/events/touch.js",

"./src/vendor/jquery-ui/ui/jquery.ui.autocomplete.js",

"./src/vendor/jquery-ui/ui/jquery.ui.effect-clip.js",

"./src/vendor/jquery-ui/ui/jquery.ui.effect-bounce.js"

]

}

Le problème est que lorsque je lance ma tâche gulp watch, des modifications (typiquement, l’ajout d’un chemin vers un nouveau vendor plugin que je souhaite ajouter à mon projet) sont détectées dans mon fichier de config mais elles ne sont pas appliquées. Exemple des logs que j’obtiens :

[09:26:53] File /home/cms/project/themes/starter/gulpconf.json was changed
[09:26:53] Starting 'clear_vendor_cache'...
[09:26:53] Finished 'clear_vendor_cache' after 1.56 ms
[09:26:53] Starting 'js'...
[09:26:53] Finished 'js' after 4.67 ms

[09:26:53] File /home/cms/project/themes/starter/gulpconf.json was changed

[09:26:53] Starting 'clear_vendor_cache'...

[09:26:53] Finished 'clear_vendor_cache' after 1.56 ms

[09:26:53] Starting 'js'...

[09:26:53] Finished 'js' after 4.67 ms

Solution :

A partir du JSON fourni plus haut, dans le gulpfile.js placer ces différentes parties :

var appFiles = {
  scripts: [paths.scripts.src + '*.js', './gulpconf.json']
};

var appFiles = {

scripts: [paths.scripts.src + '*.js', './gulpconf.json']

};

var fs = require('fs');
var gulpconf = "./gulpconf.json";

1 2	var fs = require('fs'); var gulpconf = "./gulpconf.json";

gulp.task('js:vendor',function(){
  var json = JSON.parse(fs.readFileSync(gulpconf)),
  vendorjs = json.js.vendor;

  gulp.src(vendorjs)
    .pipe(plugins.uglify())
    .pipe(plugins.rename(function(opt) {
      opt.basename = opt.basename.replace(/\./g,'-');
      return opt;
    }))    
    .pipe(plugins.size())
    .pipe(gulp.dest(paths.scripts.dest));
});

gulp.task('js:custom', function() {
  gulp.src(paths.scripts.src + '*.js')
    .pipe(plugins.uglify())
    .pipe(plugins.rename(function(opt) {
      opt.basename = opt.basename.replace(/\./g,'-');
      return opt;
    }))    
    .pipe(plugins.size())
    .pipe(gulp.dest(paths.scripts.dest));
});

gulp.task('js:vendor',function(){

var json = JSON.parse(fs.readFileSync(gulpconf)),

vendorjs = json.js.vendor;

gulp.src(vendorjs)

.pipe(plugins.uglify())

.pipe(plugins.rename(function(opt) {

opt.basename = opt.basename.replace(/\./g,'-');

return opt;

}))

.pipe(plugins.size())

.pipe(gulp.dest(paths.scripts.dest));

});

gulp.task('js:custom', function() {

gulp.src(paths.scripts.src + '*.js')

.pipe(plugins.uglify())

.pipe(plugins.rename(function(opt) {

opt.basename = opt.basename.replace(/\./g,'-');

return opt;

}))

.pipe(plugins.size())

.pipe(gulp.dest(paths.scripts.dest));

});

gulp.task('watch', ['sprite:svg', 'style', 'js:vendor', 'js:custom'], function(){
  gulp.watch('./src/images/sprites/svg/*.svg', ['sprite:svg']);
  gulp.watch(appFiles.styles, ['style']).on('change', function(evt) {
    changeEvent(evt);
  });
  gulp.watch(appFiles.scripts, ['js:vendor', 'js:custom']).on('change', function(evt) {
    changeEvent(evt);
  });
  gulp.watch(paths.sprite.src, ['sprite']).on('change', function(evt) {
    changeEvent(evt);
  });
});

gulp.task('watch', ['sprite:svg', 'style', 'js:vendor', 'js:custom'], function(){

gulp.watch('./src/images/sprites/svg/*.svg', ['sprite:svg']);

gulp.watch(appFiles.styles, ['style']).on('change', function(evt) {

changeEvent(evt);

});

gulp.watch(appFiles.scripts, ['js:vendor', 'js:custom']).on('change', function(evt) {

changeEvent(evt);

});

gulp.watch(paths.sprite.src, ['sprite']).on('change', function(evt) {

changeEvent(evt);

});

[Hybris] Utiliser les conditions c:if ou sec:authorize pour afficher/masquer des informations

28/03/2017 / admin

Tester si l’utilisateur est loggué en jstl

<c:if test="${user.uid eq 'anonymous'}">
	<p>Utilisateur anonyme</p>
</c:if>

<c:if test="${user.uid ne 'anonymous'}">
    <p>Utilisateur connecté</p>
</c:if>

<c:if test="${user.uid eq 'anonymous'}">

<p>Utilisateur anonyme</p>

</c:if>

<c:if test="${user.uid ne 'anonymous'}">

<p>Utilisateur connecté</p>

</c:if>

ou:

<sec:authorize access="hasRole('ROLE_ANONYMOUS')">
	<p>Utilisateur anonyme</p>
</sec:authorize>

<sec:authorize ifNotGranted="ROLE_ANONYMOUS">
    <p>Utilisateur connecté</p>
</sec:authorize>

<sec:authorize access="hasRole('ROLE_ANONYMOUS')">

<p>Utilisateur anonyme</p>

</sec:authorize>

<sec:authorize ifNotGranted="ROLE_ANONYMOUS">

<p>Utilisateur connecté</p>

</sec:authorize>

[Magento 1.x] Créer et afficher un bloc statique en front

27/03/2017 / admin

Source : Magento – Creating and Showing a static block in Frontend.

The content of the blocks are created and modified from Magento Admin panel which can be placed on one or multiple pages. To create a static block you can follow some simple steps which are given bellow.

Creating a Static Block:

A. Go to the Magento Admin panel and then select the CMS -> Static Blocks.
B. Then Click on the “Add New Block” button from the right top .
C. Now fillup the following fields:

Block Title: Give the Name of the static block here. This will not show on the frontend.
Identifier: Give the id of this block. It used as reference of this block, when adding to a template file or CMS page.
Status: Its define visibility of this static block on the frontend.
Content: Content of static block can be plain text, HTML code and Javascript. PHP code can’t use in this area.

D. After fillup all fields then click on “Save Block” button from the right top .

Showing a Static Block in Frontend:

A static block can be added to display on the frontend by some different ways which are discribed bellow:

1. Adding a static block to a CMS page From the Magento admin:
Go to CMS > Pages and click on a pre-existing page or create a new page where you want to show your static block.
Now use the following code in the Content field of the CMS page:

{{block type=”cms/block” block_id=”your_block_identifier” template=”cms/content.phtml”}}

2. Adding a static block by using template phtml file:
Open your phtml file where you want to add the static block.
For Example: /app/design/frontend/your-instance-name/your_theme/template/callouts/right_col.phtml
Then you can use the following code in your phtml file to show the content of your ststic block:

<?php echo $this->getLayout()->createBlock(‘cms/block’)->setBlockId(‘your_block_identifier’)->toHtml() ?>

3. Adding a static block by using XML layout file:
Use the following code to show the content of static block by using Layout XML file:

<reference name=”content/left/right”>
<block type=”cms/block” name=”your_block_name” before=”-”>
<action ethod=”setBlockId”><block_id>your_block_identifier</block_id></action>
</block>
</reference>

Note: You can use the above code to show the block content in specific page by using “ Layout Update XML ” field of CMS page.
To do this go: CMS -> pages from your magento backend. Then click on on that page where you want to show the static block.
Then click on Design tab from left panel like:

Now Past the above code in Layout Update XML field.
here i wrote <reference name=”content/left/right”> in code. You must use only one like- content / left or right as your reference name.

[Webdesign] Manipuler les couleurs pour créer une charte graphique

24/03/2017 / admin

Practical Color Theory for People Who Code

[CSS] Des images responsive dans un tableau HTML ou dans un container en display: table-cell;

24/03/2017 / admin

table

nada …

display: table-cell;

ATTENTION: sous IE10, IE11, dans le cadre d’une mise en page Responsive et si vous utilisez des images, il est possible que le redimensionnement homothétique de celles-ci soit mal géré. Vous pouvez ajouter ce style pour corriger le problème :

.votre-faux-tableau .votre-fausse-cellule img { width: 99.99%; }

1	.votre-faux-tableau .votre-fausse-cellule img { width: 99.99%; }

Source: Responsive Images in display: table-cell – A PEN BY Matt Stow.
Voir également: Why do Firefox and Opera ignore max-width inside of display: table-cell?.

<p>Normal "responsive" image</p>
<img src="http://placehold.it/650x150" />

<p>Image in a display: table-cell</p>
<div class="cell"><img src="http://placehold.it/650x150" /></div>

<p>Image in a display: table-cell with width: 100%</p>
<div class="cell"><img src="http://placehold.it/650x150" class="cell-fluid" /></div>

<p>Normal "responsive" image</p>

<p>Image in a display: table-cell</p>

<p>Image in a display: table-cell with width: 100%</p>

img {
  height: auto;
  max-width: 100%;
}

.cell {
  display: table-cell;
}

.cell-fluid {
  width: 100%;
}

img {

height: auto;

max-width: 100%;

}

.cell {

display: table-cell;

}

.cell-fluid {

width: 100%;

}

[Gulp] Des icônes au format SVG dans vos projets avec gulp-svgstore

23/03/2017 / admin

Voir une autre approche avec gulp-svg-sprites qui génère un sprite SVG et une feuille SASS avec des mixins prêts à l’emploi.

Des tutos sur la mise en place de sprites SVG avec gulp et le plug-in gulp-svgstore:

Icon System with SVG Sprites sur css-tricks.com.

Gulp svgstore – Combine svg files into one with elements.
SVG Icon Systems with Gulp.
My current SVG techniques and workflow, avec exemple d’icônes animées via les transitions CSS.
Creating SVG Sprites Using Gulp sur YouTube.
https://codegists.com/code/svg-sprites-tutorial/
A Complete Guide To Implementing An SVG Icon System
SVG ICON WORKFLOW FOR JEKYLL WITH GULP

Obtenir un guide de styles des icônes générées:

Using Svg Symbol Map With SC5 Style Guide Generator
A11Y Style Guide – This application is a living style guide, generated from KSS documented styles…with an accessibility twist.

Des ressources à propos de SVG:

[jQuery] Cibler un ID dont le libellé contient un caractère point « . »

22/03/2017 / admin

$("textarea[id='review.comment']").css('border','1px solid red');

1	$("textarea[id='review.comment']").css('border','1px solid red');

$('#review\\.comment').css('border','1px solid blue');

1	$('#review\\.comment').css('border','1px solid blue');

[jQuery] Activer un bouton radio ou une checkboxe en cliquant sur un autre élément avec la méthode .prop()

16/03/2017 / admin

Case à cocher (checkbox)

En cliquant sur div#loyaltyCardForm, on active la checkboxe input#offerLoyaltyCard

<div id="loyaltyCardForm" class="loyalty-card-form">
    <div class="loyalty-card-form-checkbox">
        <input type="checkbox" name="offerLoyaltyCard" id="offerLoyaltyCard" value="1"/>
    </div>
    <div class="loyalty-card-form-label">
        <label for="offerLoyaltyCard">
            <span class="tagline tagline-row-1">
                <spring:theme code="naos.product.loyaltycard.offer.title" />
            </span><br/>
            <span class="tagline tagline-row-2">
                <spring:theme code="naos.product.loyaltycard.offer.message" />
            </span>
        </label>
    </div>
</div>

</div>

<spring:theme code="naos.product.loyaltycard.offer.title" />

</span><br/>

<spring:theme code="naos.product.loyaltycard.offer.message" />

</span>

</label>

</div>

var $offerLoyaltyCard = $('#offerLoyaltyCard');
$('#loyaltyCardForm').on('click', function(){
    if(!$('#offerLoyaltyCard').is(':checked')){
        $offerLoyaltyCard.prop('checked', true);
    } else {
        $offerLoyaltyCard.prop('checked', false);
    }
});

var $offerLoyaltyCard = $('#offerLoyaltyCard');

$('#loyaltyCardForm').on('click', function(){

if(!$('#offerLoyaltyCard').is(':checked')){

$offerLoyaltyCard.prop('checked', true);

} else {

$offerLoyaltyCard.prop('checked', false);

}

});

Bouton radio

Source: Toggling Radio Buttons with jQuery et jsFiddle.

Avec 2 boutons radio seulement

Source: jsFiddle.

<button id="toggler">click me</button><br>
<input type="radio" name="speeds" value="fast" checked>fast<br>
<input type="radio" name="speeds" value="slow">slow<br>

<button id="toggler">click me</button><br>

$('#toggler').click(function() {
    $('input[type="radio"]').not(':checked').prop("checked", true);
});

$('#toggler').click(function() {

$('input[type="radio"]').not(':checked').prop("checked", true);

});

Avec plus que 2 boutons radio

Source: jsFiddle.

<button id="toggler">click me</button><br>
<input type="radio" name="speeds" value="fast" checked>fast<br>
<input type="radio" name="speeds" value="medium">medium<br>
<input type="radio" name="speeds" value="slow">slow<br>

<button id="toggler">click me</button><br>

<input type="radio" name="speeds" value="medium">medium<br>

var $radios = $('input[type="radio"][name="speeds"]')
$('#toggler').click(function() {
    var $checked = $radios.filter(':checked');
    var $next = $radios.eq($radios.index($checked) + 1);
    if(!$next.length){
        $next = $radios.first();
    }
    $next.prop("checked", true);
});

var $radios = $('input[type="radio"][name="speeds"]')

$('#toggler').click(function() {

var $checked = $radios.filter(':checked');

var $next = $radios.eq($radios.index($checked) + 1);

if(!$next.length){

$next = $radios.first();

}

$next.prop("checked", true);

});

[CSS] Des containers de la largeur de la fenêtre à l’intérieur de containers de largeur limitée

16/03/2017 / admin

Sources : Full Width Containers in Limited Width Parents et Full Browser Width Bars (vieux) sur CSS-Tricks.

css-tricks.com-Full Width Containers in Limited WidthParents pour la postérité 🙂

[Magento 2.x] Les options du slider Fotorama natif

14/03/2017 / admin

Magento2 : How to disable product image slider on detail page. Dans /theme_folder/etc/view.xml :

<vars module="Magento_Catalog">

    <!-- Gallery and magnifier theme settings. Start -->
    <var name="gallery">
        <var name="nav">thumbs</var> <!-- Gallery navigation style (false/thumbs/dots) -->
        <var name="loop">true</var> <!-- Gallery navigation loop (true/false) -->
        <var name="keyboard">true</var> <!-- Turn on/off keyboard arrows navigation (true/false) -->
        <var name="arrows">true</var> <!-- Turn on/off arrows on the sides preview (true/false) -->
        <var name="caption">false</var> <!-- Display alt text as image title (true/false) -->
        <var name="allowfullscreen">true</var> <!-- Turn on/off fullscreen (true/false) -->
        <var name="navdir">horizontal</var> <!-- Sliding direction of thumbnails (horizontal/vertical) -->
        <var name="navarrows">true</var> <!-- Turn on/off on the thumbs navigation sides (true/false) -->
        <var name="navtype">slides</var> <!-- Sliding type of thumbnails (slides/thumbs) -->
        <var name="transition">
            <var name="effect">slide</var> <!-- Sets transition effect for slides changing (slide/crossfade/dissolve) -->
            <var name="duration">500</var> <!-- Sets transition duration in ms -->
        </var>
        <var name="fullscreen">
            <var name="nav">thumbs</var> <!-- Fullscreen navigation style (false/thumbs/dots) -->
            <var name="loop">true</var> <!-- Fullscreen navigation loop (true/false/null) -->
            <var name="keyboard">true</var> <!-- Turn on/off keyboard arrows navigation (true/false/null) -->
            <var name="arrows">false</var> <!-- Turn on/off arrows on the sides preview (true/false/null) -->
            <var name="caption">false</var> <!-- Display alt text as image title (true/false) -->
            <var name="navdir">horizontal</var> <!--Sliding direction of thumbnails in full screen(horizontal/vertical)  -->
            <var name="thumbwidth">150</var> <!-- Width of thumbnails in fullscreen -->
            <var name="thumbheight">150</var> <!-- Height of thumbnails in fullscreen -->
            <var name="navigation_carousel">true</var> <!-- Display navigation thumbs as carousel (true/false) -->
            <var name="transition">
                <var name="effect">dissolve</var> <!-- Sets transition effect for slides changing (slide/crossfade/dissolve) -->
                <var name="duration">500</var> <!-- Sets transition duration in ms -->
                <var name="carousel">true</var> <!-- Display navigation thumbs as carousel (true/false) -->
            </var>
        </var>
    </var>

<var name="nav">thumbs</var>

<var name="caption">false</var>

<var name="navdir">horizontal</var>

<var name="navtype">slides</var>

<var name="effect">slide</var>

</var>

<var name="nav">thumbs</var>

<var name="arrows">false</var>

<var name="caption">false</var>

<var name="navdir">horizontal</var>

<var name="effect">dissolve</var>

</var>

Articles récents

Catégories

Archives

Méta

Mois : mars 2017

[Gulp] Stocker ses options de configuration dans un fichier JSON externe surveillé (gulp watch)

Problématique :

Solution :

[Hybris] Utiliser les conditions c:if ou sec:authorize pour afficher/masquer des informations

Tester si l’utilisateur est loggué en jstl

[Magento 1.x] Créer et afficher un bloc statique en front

[Webdesign] Manipuler les couleurs pour créer une charte graphique

[CSS] Des images responsive dans un tableau HTML ou dans un container en display: table-cell;

table

display: table-cell;

[Gulp] Des icônes au format SVG dans vos projets avec gulp-svgstore

Des tutos sur la mise en place de sprites SVG avec gulp et le plug-in gulp-svgstore:

Obtenir un guide de styles des icônes générées:

Des ressources à propos de SVG:

[jQuery] Cibler un ID dont le libellé contient un caractère point « . »

[jQuery] Activer un bouton radio ou une checkboxe en cliquant sur un autre élément avec la méthode .prop()

Case à cocher (checkbox)

Bouton radio

Avec 2 boutons radio seulement

Avec plus que 2 boutons radio

[CSS] Des containers de la largeur de la fenêtre à l’intérieur de containers de largeur limitée

[Magento 2.x] Les options du slider Fotorama natif