décembre 2017 – devfrontend.info

Monthdécembre 2017

[jQuery] Illuminer un élément de menu au scroll dans la page

28/12/2017 / admin

Réaliser l’équivalent du composant Magellan de Foundation 6 for sites.

Source: Highlight menu item on scroll – A PEN BY joxmar.

Les sources HTML et CSS sont facultatives; en tout cas, la partie jQuery peut assez facilement s’adapter.

// Cache selectors
var lastId,
 topMenu = $("#mainNav"),
 topMenuHeight = topMenu.outerHeight()+1,
 // All list items
 menuItems = topMenu.find("a"),
 // Anchors corresponding to menu items
 scrollItems = menuItems.map(function(){
   var item = $($(this).attr("href"));
    if (item.length) { return item; }
 });

// Bind click handler to menu items
// so we can get a fancy scroll animation
menuItems.click(function(e){
  var href = $(this).attr("href"),
      offsetTop = href === "#" ? 0 : $(href).offset().top-topMenuHeight+1;
  $('html, body').stop().animate({ 
      scrollTop: offsetTop
  }, 850);
  e.preventDefault();
});

// Bind to scroll
$(window).scroll(function(){
   // Get container scroll position
   var fromTop = $(this).scrollTop()+topMenuHeight;
   
   // Get id of current scroll item
   var cur = scrollItems.map(function(){
     if ($(this).offset().top < fromTop)
       return this;
   });
   // Get the id of the current element
   cur = cur[cur.length-1];
   var id = cur && cur.length ? cur[0].id : "";
   
   if (lastId !== id) {
       lastId = id;
       // Set/remove active class
       menuItems
         .parent().removeClass("active")
         .end().filter("[href=#"+id+"]").parent().addClass("active");
   }                   
});

// Cache selectors

var lastId,

topMenu = $("#mainNav"),

topMenuHeight = topMenu.outerHeight()+1,

// All list items

menuItems = topMenu.find("a"),

// Anchors corresponding to menu items

scrollItems = menuItems.map(function(){

var item = $($(this).attr("href"));

if (item.length) { return item; }

});

// Bind click handler to menu items

// so we can get a fancy scroll animation

menuItems.click(function(e){

var href = $(this).attr("href"),

offsetTop = href === "#" ? 0 : $(href).offset().top-topMenuHeight+1;

$('html, body').stop().animate({

scrollTop: offsetTop

}, 850);

e.preventDefault();

});

// Bind to scroll

$(window).scroll(function(){

// Get container scroll position

var fromTop = $(this).scrollTop()+topMenuHeight;

// Get id of current scroll item

var cur = scrollItems.map(function(){

if ($(this).offset().top < fromTop)

return this;

});

// Get the id of the current element

cur = cur[cur.length-1];

var id = cur && cur.length ? cur[0].id : "";

if (lastId !== id) {

lastId = id;

// Set/remove active class

menuItems

.parent().removeClass("active")

.end().filter("[href=#"+id+"]").parent().addClass("active");

}

});

<nav>
  <ul id="mainNav">
    <li class="active"><a href="#home">Home</a></li>
    <li><a href="#work">Work</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#contact">Contact</a></li>    
  </ul>
</nav>
<section id="home"><h2>Home</h2></section>
<section id="work" data-sr><h2>Work</h2></section>
<section id="about"><h2>About</h2></section>
<section id="contact"><h2>Contact</h2></section>

<nav>

<li><a href="#about">About</a></li>

<li><a href="#contact">Contact</a></li>

</ul>

</nav>

<section id="about"><h2>About</h2></section>

<section id="contact"><h2>Contact</h2></section>

nav{
  position:fixed;
  top:0;
  left:0;
  background:#55443D;
  height:40px;
  width:100%;
  z-index: 1;
  ul{
    margin:0;
    padding:0;
    list-style:none;
    position:relative;
    display:table;
    margin:0 auto;
    li{
      display:table-cell;
      a{
        padding:10px 20px;
        display:block;
        color:white;
        text-decoration:none;
        transition:all 0.3s ease-in-out;
        &:hover{
          color:#F38A8A;
        }
       }      
    }
    .active{
       a{
         color:#F38A8A;
         border-bottom:3px solid #F38A8A;
        }
      }
  }
}
section{
  height: 100vh;
  position:relative;
  margin: 0;
  padding: 0;  
  display:block;
  z-index: 0;
}
#home{
background:#A0CAB5;  
  top:40px;
}
#work{
background:#CDE9CA;
}
#about{
background:#F1EDD0;
}
#contact{
background:#F38A8A;
}
h2{
  padding: 0;
  margin: 0;
}

nav{

position:fixed;

top:0;

left:0;

background:#55443D;

height:40px;

width:100%;

z-index: 1;

ul{

margin:0;

padding:0;

list-style:none;

position:relative;

display:table;

margin:0 auto;

li{

display:table-cell;

padding:10px 20px;

display:block;

color:white;

text-decoration:none;

transition:all 0.3s ease-in-out;

&:hover{

color:#F38A8A;

}

.active{

color:#F38A8A;

border-bottom:3px solid #F38A8A;

}

section{

height: 100vh;

position:relative;

margin: 0;

padding: 0;

display:block;

z-index: 0;

}

#home{

background:#A0CAB5;

top:40px;

}

#work{

background:#CDE9CA;

}

#about{

background:#F1EDD0;

}

#contact{

background:#F38A8A;

}

h2{

padding: 0;

margin: 0;

}

Cas plus tordu

…où le sticky est séparé en 2 éléments.

  /*
   * [nCatalog product page] Handle sticky tabs/anchors feature
   */
  if ($('#product-page-tabs').length > 0) {

    $('.accordion-item').removeAttr('id');

    function getStickyHeight() {
        var productPageSticky = $('#productPageHeader').outerHeight(true);
        var searchBar = $('.header-second-row-wrapper').outerHeight(true);
        //console.log(productPageSticky + searchBar);
        return productPageSticky + searchBar;
    }

    getStickyHeight();
    // Cache selectors
    var lastId,
     topMenu = $('#product-page-tabs'),
     // topMenuHeight = topMenu.outerHeight()+1,
     topMenuHeight = getStickyHeight(),
     // All list items
     menuItems = topMenu.children('.tabs-title').find('a'),
     // Anchors corresponding to menu items
     scrollItems = menuItems.map(function(){
       var item = $($(this).attr('href'));
        if (item.length) { return item; }
     });

    // Bind click handler to menu items
    // so we can get a fancy scroll animation
    menuItems.click(function(e){
      var href = $(this).attr('href');

      var offsetTop = href === '#' ? 0 : $(href).offset().top-topMenuHeight+1;

      var currentScroll = $(document).scrollTop();

      if (currentScroll === 0) {
          offsetTop = $(href).offset().top-2*topMenuHeight+1;
      }
      
      $('html, body').stop().animate({ 
          scrollTop: offsetTop
      }, 850);
      e.preventDefault();
    });

    // Bind to scroll
    $(window).scroll(function(){
       // Get container scroll position
       var fromTop = $(this).scrollTop()+topMenuHeight;

       // Get id of current scroll item
       var cur = scrollItems.map(function(){
         if ($(this).offset().top < fromTop)
           return this;
       });
       // Get the id of the current element
       cur = cur[cur.length-1];
       var id = cur && cur.length ? cur[0].id : '';

       if (lastId !== id) {
           lastId = id;
           // Set/remove active class
           menuItems
             .parent().removeClass('is-active')
             .end().filter('[href="#'+id+'"]').parent().addClass('is-active');
       }
    });
  }

* [nCatalog product page] Handle sticky tabs/anchors feature

if ($('#product-page-tabs').length > 0) {

$('.accordion-item').removeAttr('id');

function getStickyHeight() {

var productPageSticky = $('#productPageHeader').outerHeight(true);

var searchBar = $('.header-second-row-wrapper').outerHeight(true);

//console.log(productPageSticky + searchBar);

return productPageSticky + searchBar;

}

getStickyHeight();

// Cache selectors

var lastId,

topMenu = $('#product-page-tabs'),

// topMenuHeight = topMenu.outerHeight()+1,

topMenuHeight = getStickyHeight(),

// All list items

menuItems = topMenu.children('.tabs-title').find('a'),

// Anchors corresponding to menu items

scrollItems = menuItems.map(function(){

var item = $($(this).attr('href'));

if (item.length) { return item; }

});

// Bind click handler to menu items

// so we can get a fancy scroll animation

menuItems.click(function(e){

var href = $(this).attr('href');

var offsetTop = href === '#' ? 0 : $(href).offset().top-topMenuHeight+1;

var currentScroll = $(document).scrollTop();

if (currentScroll === 0) {

offsetTop = $(href).offset().top-2*topMenuHeight+1;

}

$('html, body').stop().animate({

scrollTop: offsetTop

}, 850);

e.preventDefault();

});

// Bind to scroll

$(window).scroll(function(){

// Get container scroll position

var fromTop = $(this).scrollTop()+topMenuHeight;

// Get id of current scroll item

var cur = scrollItems.map(function(){

if ($(this).offset().top < fromTop)

return this;

});

// Get the id of the current element

cur = cur[cur.length-1];

var id = cur && cur.length ? cur[0].id : '';

if (lastId !== id) {

lastId = id;

// Set/remove active class

menuItems

.parent().removeClass('is-active')

.end().filter('[href="#'+id+'"]').parent().addClass('is-active');

}

});

}

[Javascript] Ressources pour manipuler les tableaux

19/12/2017 / admin

Doc généraliste

La doc officielle de developer.mozilla.org – en français, très bien faite avec des exemples manipulables en live à la jsFiddle!
JavaScript Arrays Tutorial sur le site de Dynamic Web Coding (EN)

Code snippets

Comment ajouter des éléments à un tableau?

var ar = ['one', 'two', 'three']; ar[3] = 'four'; // add new element to ar

1
2

var ar = ['one', 'two', 'three'];
ar[3] = 'four'; // add new element to ar

Comment ajouter des URLs contenus dans un menu (UL>LI) dans un tableau?

<ul class="menu sidebar-navigation vertical accordion-menu">
    <li class="is-accordion-submenu-parent">
        <a href="http://www.local/site_disabled/fr/home-static.html" class="link" onclick="" title="">Accueil</a>
    </li>
    <li class="is-accordion-submenu-parent">
        <a href="http://www.local/site_disabled/fr/flightlist-a-static.html" class="link" onclick="" title="">Arrivées du jour</a>
    </li>
    <li class="is-accordion-submenu-parent">
        <a href="http://www.local/site_disabled/fr/flightlist-d-static.html" class="link" onclick="" title="">Départs du jour</a>
    </li>
    <li class="is-accordion-submenu-parent">
        <a href="http://www.local/site_disabled/fr/companylist-static.html" class="link" onclick="" title="">Compagnies aériennes</a>
    </li>
</ul>

<a href="http://www.local/site_disabled/fr/home-static.html" class="link" onclick="" title="">Accueil</a>

</li>

<a href="http://www.local/site_disabled/fr/flightlist-a-static.html" class="link" onclick="" title="">Arrivées du jour</a>

</li>

<a href="http://www.local/site_disabled/fr/flightlist-d-static.html" class="link" onclick="" title="">Départs du jour</a>

</li>

<a href="http://www.local/site_disabled/fr/companylist-static.html" class="link" onclick="" title="">Compagnies aériennes</a>

</li>

</ul>

var staticNavURLs = [];
$mobileMenu.find('a').each(function(){
    staticNavURLs.push($(this).attr('href'));
});

var staticNavURLs = [];

$mobileMenu.find('a').each(function(){

staticNavURLs.push($(this).attr('href'));

});

Le console.log renvoie ceci:

(4) ["http://www.local/site_disabled/fr/home-static.html", "http://www.local/site_disabled/fr/flightlist-a-static.html", "http://www.local/site_disabled/fr/flightlist-d-static.html", "http://www.local/site_disabled/fr/companylist-static.html"]
0: "http://www.local/site_disabled/fr/home-static.html"
1: "http://www.local/site_disabled/fr/flightlist-a-static.html"
2: "http://www.local/site_disabled/fr/flightlist-d-static.html"
3: "http://www.local/site_disabled/fr/companylist-static.html"
length: 4

Comment ajouter des entrées clé+valeur (key+value) à un tableau?

var facetEntriesOffset = [];
$('.facet.dropdown', '#refinementFacets').each(function(){
    facetEntriesOffset.push({
        offsetLeft: $(this).offset().left,
        middle: $(this).outerWidth()/2
    });
});

var facetEntriesOffset = [];

$('.facet.dropdown', '#refinementFacets').each(function(){

facetEntriesOffset.push({

offsetLeft: $(this).offset().left,

middle: $(this).outerWidth()/2

});

Comment supprimer tous les éléments d’une tableau, sauf les N derniers?

arr = arr.slice(-1 * n);

1

arr = arr.slice(-1 * n);

Alternatively, modify the existing array with splice().

arr.splice(0, arr.length - n);

1

arr.splice(0, arr.length - n);

get closest number out of array

function closest (num, arr) {
    var curr = arr[0];
    var diff = Math.abs (num - curr);
    for (var val = 0; val < arr.length; val++) {
        var newdiff = Math.abs (num - arr[val]);
        if (newdiff < diff) {
            diff = newdiff;
            curr = arr[val];
        }
    }
    return curr;
}
array = [2, 42, 82, 122, 162, 202, 242, 282, 322, 362];
number = 112;
alert (closest (number, array));

function closest (num, arr) {

var curr = arr[0];

var diff = Math.abs (num - curr);

for (var val = 0; val < arr.length; val++) {

var newdiff = Math.abs (num - arr[val]);

if (newdiff < diff) {

diff = newdiff;

curr = arr[val];

}

return curr;

}

array = [2, 42, 82, 122, 162, 202, 242, 282, 322, 362];

number = 112;

alert (closest (number, array));

check if value exist or lies between particular values in array

var dataArr = [10, 20, 30, 50, 70, 80, 90, 100];

function _find(array, search) {
  var indexes = [],
      len = array.length,
      i,
      index = array.indexOf(search);

  if (~index) {
    return index;
  }

  if (search < array[0]) {
    return -1;  
  }

  for (i = 1; i < len; i++) {
    if (array[i] >= search) {
      return [i - 1, i];
    }    
  }

  return -1;
}


console.log(_find(dataArr, 22));

var dataArr = [10, 20, 30, 50, 70, 80, 90, 100];

function _find(array, search) {

var indexes = [],

len = array.length,

index = array.indexOf(search);

if (~index) {

return index;

}

if (search < array[0]) {

return -1;

}

for (i = 1; i < len; i++) {

if (array[i] >= search) {

return [i - 1, i];

}

return -1;

}

console.log(_find(dataArr, 22));

How to compare values between two arrays?

var A = [2, 12, 3, 42];
var B = [12, 42, 44, 12, 123];

var len = Math.max(A.length, B.length);
console.log(len)
for (var i = 0; i < len; i++) {
  console.log(A[i], B[i], A[i] === B[i])
}

var A = [2, 12, 3, 42];

var B = [12, 42, 44, 12, 123];

var len = Math.max(A.length, B.length);

console.log(len)

for (var i = 0; i < len; i++) {

console.log(A[i], B[i], A[i] === B[i])

}

Logic for checking in-between two numbers – Attention au code d’exemple qui fonctionne bien mais qui omet les accolades !!!.

var i; var y = 0; var val = 321; var zones = [0,150,300,400,600,800];
for (i = 0; i < zones.length; i++){
    if (val >= zones[i]){
        y = i;
    }
}
console.log('Value ' + val + ' is at position ' + y);

var i; var y = 0; var val = 321; var zones = [0,150,300,400,600,800];

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

if (val >= zones[i]){

y = i;

}

console.log('Value ' + val + ' is at position ' + y);

[Foundation 6] Habiller proprement un input type= »file »

18/12/2017 / admin

Source: Adding Filename Feedback to (Stylized) Foundation File Upload Buttons sur Foundation forum.

The Problem:

Foundation has support for stylizing file inputs by adding a label element — but currently — after the user chooses a file from his/her system, there is no feedback that shows that a file was selected. The button’s text remains the same (e.g. « Upload File ») and doesn’t display the filename the user selected, causing the user to wonder if the file was actually selected.

The Solution:

To add feedback, you can add a small amount of JS code. Here’s an example that targets all input files using the example that Foundation uses on their Forms page.

HTML:

<label for="exampleFileUpload" class="button">Upload File</label>
<input type="file" id="exampleFileUpload" class="show-for-sr">

1 2	<label for="exampleFileUpload" class="button">Upload File</label> <input type="file" id="exampleFileUpload" class="show-for-sr">

JS:

(function(){

    // Attach the change event listener to change the label of all input[type=file] elements
    var els = document.querySelectorAll("input[type=file]"),
        i;
    for (i = 0; i < els.length; i++) {
        els[i].addEventListener("change", function() {
            var label = this.previousElementSibling;
            label.innerHTML = this.files[0].name;
        });
    }

})();

(function(){

// Attach the change event listener to change the label of all input[type=file] elements

var els = document.querySelectorAll("input[type=file]"),

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

els[i].addEventListener("change", function() {

var label = this.previousElementSibling;

label.innerHTML = this.files[0].name;

});

}

})();

Tested working in Foundation 6.3.0

(Note: If using this code, you may want to use a named function instead of recreating an anonymous function in each iteration of the for loop.)

You may want to do some quick validation on this.files before setting the label’s innerHTML or leave the label’s innerHTML alone to keep the button as is and write the file name in another div next to it. There are also other things to consider such as multiple file uploads (in which you could signify the number of files as feedback for that use-case). It would be great if Foundation could possibly add this feature in the future.

Hope this helps,

Roy

[RBS Change 3.6.x] erreurs et solutions

14/12/2017 / admin

f_AOP::getParentName could not find _ definition file #0

f_AOP::getParentName could not find ncatalog_BlockFacetsAction definition file #0 /home/intlangf/change30/ntnsnr/repository/framework/framework-3.6.9-wf/aop/AOP.php(599): f_AOP->getParentName('ncatalog_BlockF...') #1 /home/intlangf/change30/ntnsnr/repository/framework/framework-3.6.9-wf/aop/AOP.php(476): f_AOP->findFirstChild('ecomextended_Bl...', 'ncatalog_BlockF...') #2 /home/intlangf/change30/ntnsnr/repository/framework/framework-3.6.9-wf/aop/AOP.php(696): f_AOP->loadAlterations() #3 /home/intlangf/change30/ntnsnr/repository/framework/framework-3.6.9-wf/loader/ClassResolver.class.php(548): f_AOP->hasAlterations() #4 /home/intlangf/change30/ntnsnr/repository/framework/framework-3.6.9-wf/loader/ClassResolver.class.php(540): ClassResolverDevMode->checkAOPTime('nusers_ChangeCo...', '/home/intlangf/...') #5 /home/intlangf/change30/ntnsnr/repository/framework/framework-3.6.9-wf/loader/ClassLoader.class.php(61): ClassResolverDevMode->getPathOrNull('nusers_ChangeCo...') #6 [internal function]: ClassLoader->autoload('nusers_ChangeCo...') #7 /home/intlangf/change30/ntnsnr/repository/framework/framework-3.6.9-wf/libs/mvc/Controller.class.php(237): spl_autoload_call('nusers_ChangeCo...') #8 /home/intlangf/change30/ntnsnr/index.php(42): Controller::newInstance('controller_Chan...') #9 {main} Fatal error: Call to a member function dispatch() on a non-object in /home/intlangf/change30/ntnsnr/index.php on line 43 Call Stack: 0.0000 656504 1. {main}() /home/intlangf/change30/ntnsnr/index.php:0

f_AOP::getParentName could not find ncatalog_BlockFacetsAction definition file #0 /home/intlangf/change30/ntnsnr/repository/framework/framework-3.6.9-wf/aop/AOP.php(599): f_AOP->getParentName('ncatalog_BlockF...') #1 /home/intlangf/change30/ntnsnr/repository/framework/framework-3.6.9-wf/aop/AOP.php(476): f_AOP->findFirstChild('ecomextended_Bl...', 'ncatalog_BlockF...') #2 /home/intlangf/change30/ntnsnr/repository/framework/framework-3.6.9-wf/aop/AOP.php(696): f_AOP->loadAlterations() #3 /home/intlangf/change30/ntnsnr/repository/framework/framework-3.6.9-wf/loader/ClassResolver.class.php(548): f_AOP->hasAlterations() #4 /home/intlangf/change30/ntnsnr/repository/framework/framework-3.6.9-wf/loader/ClassResolver.class.php(540): ClassResolverDevMode->checkAOPTime('nusers_ChangeCo...', '/home/intlangf/...') #5 /home/intlangf/change30/ntnsnr/repository/framework/framework-3.6.9-wf/loader/ClassLoader.class.php(61): ClassResolverDevMode->getPathOrNull('nusers_ChangeCo...') #6 [internal function]: ClassLoader->autoload('nusers_ChangeCo...') #7 /home/intlangf/change30/ntnsnr/repository/framework/framework-3.6.9-wf/libs/mvc/Controller.class.php(237): spl_autoload_call('nusers_ChangeCo...') #8 /home/intlangf/change30/ntnsnr/index.php(42): Controller::newInstance('controller_Chan...') #9 {main} Fatal error: Call to a member function dispatch() on a non-object in /home/intlangf/change30/ntnsnr/index.php on line 43 Call Stack: 0.0000 656504 1. {main}() /home/intlangf/change30/ntnsnr/index.php:0

ch cconf
ch ua

1 2	ch cconf ch ua

[Police d’icônes] bugs connus et leurs solutions

12/12/2017 / admin

Après mise à jour de la police d’icônes, ce n’est pas la bonne police qui s’affiche

Vous avez ajouté ou retiré des icônes de votre police et, après mise à jour sur votre serveur, l’affichage des polices est décalé et ce n’est plus les bonnes polices qui s’affichent au bon endroit (je sais, c’est pas très français tout ça, mais vous comprenez ce que je veux dire, non?)

Le problème peut venir de la mise en cache des fonts et le blog CSS Tricks propose plusieurs solutions dans son article Strategies for Cache-Busting CSS.

C’est notamment la seconde solution qui est intéressante pour un dev front-end: Changing file name.
Elle consiste (pour faire simple) à attribuer un libellé unique au fichier incriminé à chaque fois qu’il est modifié. De cette manière, le serveur (quasiment) peu importe comment il est configuré, verra que c’est un nouveau fichier et en tiendra compte lors du prochain affichage d’une page dans un navigateur.

css-tricks.com-Strategies for Cache-BustingCSS (version PDF pour la postérité).

Une solution à mettre en place via Gulp

gulp-iconfont issue – font change so every build. One think bothers me: on every build of the iconfont the resulting font changes so it’s in my local changes all the time. Why the font changes despite I’m not changing the svg icons? How can I solve this issue?

See the gulp-svg2ttf timestamp option https://github.com/nfroidure/gulp-iconfont#iconfontoptions.

I have solved this problem as follows: first I generate a checksum and store it in the package.json with the current timestamp. This way the timestamp changes only when the checksum changes.

The relevant parts of my gulpfile:

'use strict';

var fs = require('fs');
var path = require('path');
var crypto = require('crypto');

var gulp = require('gulp');
var iconfont = require('gulp-iconfont');
var intercept = require('gulp-intercept');
var naturalSort = require('gulp-natural-sort');

var del = require('del');

var PACKAGE = require('./package.json');
if(!('timestamps' in PACKAGE)) {
    PACKAGE.timestamps = {};
}

var FILES = '/your/path/here/*.svg';
var FONT_NAME = 'your-name';
var DESTINATION = '/your/path/here/';

var digest;

gulp.task('digest', function() {
    var hash = crypto.createHash('sha1');
    return gulp.src([FILES])
        .pipe(naturalSort())
        .pipe(intercept(function(file){
            hash.update(file.relative);
            hash.update(file.contents);
        }))
        .on('end', function() {
            digest = hash.digest('base64').replace(/[+\/=]+/g, '').substring(0, 5);
            if(!(digest in PACKAGE.timestamps)) {
                PACKAGE.timestamps[digest] = Math.round(Date.now()/1000);
            }
            fs.writeFileSync('./package.json', JSON.stringify(PACKAGE, null, 2));
        });
});

gulp.task('clean', ['digest'], function() {
    var glob = path.join(DESTINATION, FONT_NAME);
    return del([glob+'*', '!'+glob+'@'+digest+'*'], {force: true});
});

gulp.task('generate', ['digest'], function() {
    var options = {
        fontName: FONT_NAME,
        fileName: FONT_NAME+'@'+digest,
        timestamp: PACKAGE.timestamps[digest]
    };
    return gulp.src([FILES])
        .pipe(iconfont(options))
        .pipe(gulp.dest(DESTINATION));
});

gulp.task('font', ['generate', 'clean']);

'use strict';

var fs = require('fs');

var path = require('path');

var crypto = require('crypto');

var gulp = require('gulp');

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

var intercept = require('gulp-intercept');

var naturalSort = require('gulp-natural-sort');

var del = require('del');

var PACKAGE = require('./package.json');

if(!('timestamps' in PACKAGE)) {

PACKAGE.timestamps = {};

}

var FILES = '/your/path/here/*.svg';

var FONT_NAME = 'your-name';

var DESTINATION = '/your/path/here/';

var digest;

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

var hash = crypto.createHash('sha1');

return gulp.src([FILES])

.pipe(naturalSort())

.pipe(intercept(function(file){

hash.update(file.relative);

hash.update(file.contents);

}))

.on('end', function() {

digest = hash.digest('base64').replace(/[+\/=]+/g, '').substring(0, 5);

if(!(digest in PACKAGE.timestamps)) {

PACKAGE.timestamps[digest] = Math.round(Date.now()/1000);

}

fs.writeFileSync('./package.json', JSON.stringify(PACKAGE, null, 2));

});

gulp.task('clean', ['digest'], function() {

var glob = path.join(DESTINATION, FONT_NAME);

return del([glob+'*', '!'+glob+'@'+digest+'*'], {force: true});

});

gulp.task('generate', ['digest'], function() {

var options = {

fontName: FONT_NAME,

fileName: FONT_NAME+'@'+digest,

timestamp: PACKAGE.timestamps[digest]

};

return gulp.src([FILES])

.pipe(iconfont(options))

.pipe(gulp.dest(DESTINATION));

});

gulp.task('font', ['generate', 'clean']);

Ce n’est pas la bonne icône qui s’affiche sous Chrome

Après avoir ajouté à la volée une ou plusieurs icônes à votre bibliothèque custom, certaines icônes en front sont remplacées par d’autres… C’est un souci avec les caches du navigateur Chrome. Il est évoqué ici: Issue with Icon Fonts in Chrome 23.

La solution consiste à déclarer le(s) format(s) woff jsute après le format eot et avant tous les autres:

@font-face {
  font-family: 'Graublau Web';
  src: url('GraublauWeb.eot?') format('eot'), url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype');
}

@font-face {

font-family: 'Graublau Web';

src: url('GraublauWeb.eot?') format('eot'), url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype');

}

Source: Bulletproof @font-face Syntax par Paul Irish.

Une deuxième solution consiste à ne générer que le format woff, la prise en charge de ce dernier étant particulièrement étendue aujourd’hui:

// conf GULP
    "iconfont": {
      "fontName": "iconfont",
      "centerHorizontally": true,
      "normalize": true,
      "fontHeight": 1001,
      "formats": ["woff"],
      "prependUnicode": false,
      "timestamp": "runTimestamp"
    },

// conf GULP

"iconfont": {

"fontName": "iconfont",

"centerHorizontally": true,

"normalize": true,

"fontHeight": 1001,

"formats": ["woff"],

"prependUnicode": false,

"timestamp": "runTimestamp"

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

// TEMPLATE SASS

@font-face {

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

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

// src: url('<%= fontPath %><%= fontName %>.eot?#iefix') format('embedded-opentype'),

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

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

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

// url('<%= fontPath %><%= fontName %>.svg') format('svg');

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

font-weight: normal;

font-style: normal;

}

[javaScript] Désactiver un bouton d’action si le champ input associé affiche une valeur inférieure ou égale à zéro

11/12/2017 / admin

Solution 1:

Vérifier que le contenu à changé avec l’événement input (source: Can jQuery check whether input content has changed?).

$('.input-group-field').on('input', function() {
  var selectElem = $(this);
  var inputValue = parseInt(selectElem.val());
  
  if(!inputValue || inputValue < 0) {
    selectElem
      .next('.js-trigger-add-to-cart')
      .attr('disabled', 'disabled');
  }
  else {
    selectElem
      .next('.js-trigger-add-to-cart')
      .removeAttr('disabled');
  }
});

$('.input-group-field').on('input', function() {

var selectElem = $(this);

var inputValue = parseInt(selectElem.val());

if(!inputValue || inputValue < 0) {

selectElem

.next('.js-trigger-add-to-cart')

.attr('disabled', 'disabled');

}

else {

selectElem

.next('.js-trigger-add-to-cart')

.removeAttr('disabled');

}

});

Où (optimisé)

$('.input-group-field').on('input', function() {
  var selectElem = $(this);
  var inputValue = parseInt(selectElem.val());
  var targetElems = selectElem
                      .closest('.input-group')
                      .find('input[type="hidden"], .js-trigger-add-to-cart');
  
  if(!inputValue || inputValue < 0) {
    targetElems
      .attr('disabled', 'disabled');
  }
  else {
    targetElems
      .removeAttr('disabled', 'disabled');
  }
});

$('.input-group-field').on('input', function() {

var selectElem = $(this);

var inputValue = parseInt(selectElem.val());

var targetElems = selectElem

.closest('.input-group')

.find('input[type="hidden"], .js-trigger-add-to-cart');

if(!inputValue || inputValue < 0) {

targetElems

.attr('disabled', 'disabled');

}

else {

targetElems

.removeAttr('disabled', 'disabled');

}

});

Solution 2:

avec les attributs onkeyup et disabled

<div class="input-group">
	<input type="hidden" name="solrsearchParam[selected_product][${id}]" id="productselect_${id}" value="${id}" disabled="disabled"/>
	<input tal:condition="canAdd" class="input-group-field" type="text" size="3" value="0" name="solrsearchParam[quantities][${id}]" id="product_${id}" onkeyup="
		var selectElem = document.getElementById('btn_productselect_${id}');
		var inputValue = parseInt(this.value);
		if(!inputValue || inputValue < 0)
			selectElem.setAttribute('disabled', 'disabled');
		else
			selectElem.removeAttribute('disabled');"/>
	<button id="btn_productselect_${id}" class="button js-trigger-add-to-cart" type="button" disabled="disabled">
		<i class="iconfont iconfont-shopping_cart"></i>
		<span class="show-for-sr">${trans:m.catalog.frontoffice.add-to-cart,ucf}</span>
	</button>
</div>

<input tal:condition="canAdd" class="input-group-field" type="text" size="3" value="0" name="solrsearchParam[quantities][${id}]" id="product_${id}" onkeyup="

var selectElem = document.getElementById('btn_productselect_${id}');

var inputValue = parseInt(this.value);

if(!inputValue || inputValue < 0)

selectElem.setAttribute('disabled', 'disabled');

else

selectElem.removeAttribute('disabled');"/>

<span class="show-for-sr">${trans:m.catalog.frontoffice.add-to-cart,ucf}</span>

</button>

</div>

[jQuery][dataTables] Report des libellés d’en-têtes dans les éléments Select correspondant

07/12/2017 / admin

Un petit code bit pour le projet https://datatables.net/ qui permet le report des libellés d’en-têtes dans les éléments Select correspondant.

// Report des libellés d'en-têtes dans les éléments Select correspondant.
$('th[data-heading]').each(function(){
  var getDataHeadingLabel = $(this).attr('data-heading');
  $(this).find('option[selected]').text(getDataHeadingLabel);
});

// Report des libellés d'en-têtes dans les éléments Select correspondant.

$('th[data-heading]').each(function(){

var getDataHeadingLabel = $(this).attr('data-heading');

$(this).find('option[selected]').text(getDataHeadingLabel);

});

Attention à bien placer et renseigner le data-heading dans la source HTML:

<thead>
  <td>
    <th data-heading="-- Mon en-tête de colonne --"></th>

<thead>

<td>

[jQuery][dataTables] Désactiver l’élément Select si toutes les cellules d’une même colonne ont le même contenu

07/12/2017 / admin

Un petit plug-in pour le projet https://datatables.net/ qui permet de désactiver l’élément Select si toutes les cellules d’une même colonne ont le même contenu (ne PAS tenir compte de la colonne Date dans la capture).

Utilisation:

$.disableSelect('#ra-table-equivalences');

1	$.disableSelect('#ra-table-equivalences');

Code source:

Le mettre sous Git il faudrait …

$(function(){
  //
  // Désactiver l'élément Select si toutes les cellules
  // d'une même colonne ont le même contenu.
  // (tri inutile dans ce cas)
  $.disableSelect = function(selector){
    var $sel = $(selector);

    // On récupère le contenu de toutes les cellules du tableau, par colonne.
      // https://datatables.net/reference/type/column-selector
    var table = $sel.DataTable();
    var allData = table.columns().data();
    var data = table.columns('th').data();

    // On vérifie que toutes les valeurs du tableau sont égales...
      // http://api.jquery.com/jquery.each/
      // https://stackoverflow.com/a/21266395/1662176
    $.each(data, function(index, value){
      var checkIfAllValuesOfArrayAreEqual = !!value.reduce(function(a, b){ return (a === b) ? a : NaN; });

      // ...si "Oui", on désactive l'élément Select.
      if(checkIfAllValuesOfArrayAreEqual === true) {
        $sel.find('thead th:eq('+index+')')
          .addClass('js-disabled-select')
          .find('select')
          .attr('disabled', 'disabled');
      }
    });
  }
});

$(function(){

// Désactiver l'élément Select si toutes les cellules

// d'une même colonne ont le même contenu.

// (tri inutile dans ce cas)

$.disableSelect = function(selector){

var $sel = $(selector);

// On récupère le contenu de toutes les cellules du tableau, par colonne.

// https://datatables.net/reference/type/column-selector

var table = $sel.DataTable();

var allData = table.columns().data();

var data = table.columns('th').data();

// On vérifie que toutes les valeurs du tableau sont égales...

// http://api.jquery.com/jquery.each/

// https://stackoverflow.com/a/21266395/1662176

$.each(data, function(index, value){

var checkIfAllValuesOfArrayAreEqual = !!value.reduce(function(a, b){ return (a === b) ? a : NaN; });

// ...si "Oui", on désactive l'élément Select.

if(checkIfAllValuesOfArrayAreEqual === true) {

$sel.find('thead th:eq('+index+')')

.addClass('js-disabled-select')

.find('select')

.attr('disabled', 'disabled');

}

});

}

});

Theme by Anders Norén — Up ↑

devfrontend.info

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

Articles récents

Catégories

Archives

Méta

Monthdécembre 2017

[jQuery] Illuminer un élément de menu au scroll dans la page

Cas plus tordu

[Javascript] Ressources pour manipuler les tableaux

Doc généraliste

Code snippets

[Foundation 6] Habiller proprement un input type= »file »

The Problem:

The Solution:

HTML:

JS:

[RBS Change 3.6.x] erreurs et solutions

f_AOP::getParentName could not find _ definition file #0

[Police d’icônes] bugs connus et leurs solutions

Après mise à jour de la police d’icônes, ce n’est pas la bonne police qui s’affiche

Une solution à mettre en place via Gulp

Ce n’est pas la bonne icône qui s’affiche sous Chrome

[javaScript] Désactiver un bouton d’action si le champ input associé affiche une valeur inférieure ou égale à zéro

Solution 1:

Solution 2:

[jQuery][dataTables] Report des libellés d’en-têtes dans les éléments Select correspondant

[jQuery][dataTables] Désactiver l’élément Select si toutes les cellules d’une même colonne ont le même contenu

Code source:

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

Articles récents

Catégories

Tags

Archives

Méta

Monthdécembre 2017

Cas plus tordu

Doc généraliste

Code snippets

The Problem:

The Solution:

HTML:

JS:

f_AOP::getParentName could not find _ definition file #0

Après mise à jour de la police d’icônes, ce n’est pas la bonne police qui s’affiche

Une solution à mettre en place via Gulp

Ce n’est pas la bonne icône qui s’affiche sous Chrome

Solution 1:

Solution 2:

Code source: