Mois : août 2017

[Drupal 7] Afficher une image dans un fichier node.tpl.php présent dans un thème

28/08/2017 / admin

Source . Ceci sous-entend de récupérer l’URL vers l’image stockée dans un thème.

<img src="<?php print base_path() . drupal_get_path('theme', 'roederer_main_theme'); ?>/images/bloc-homepage-entreprises-parapluie.png" alt="" />

1	<img src="<?php print base_path() . drupal_get_path('theme', 'roederer_main_theme'); ?>/images/bloc-homepage-entreprises-parapluie.png" alt="" />

[jQuery] Un carousel avec visuel en pleine page avec n’importe quel plug-in

16/08/2017 / admin

Le but de ce billet n’est pas de donner une solution toute faite mais plutôt une méthode pour étendre rapidement et efficacement les fonctionnalités de n’importe que plug-in jQuery de slider.

HTML

On crée un container dans lequel on place une balise <img> aux attributs non renseignés. Cette balise va servir à accueillir l’image « en cours ».

<!-- Full-page carousel -->
<div id="fullPageCarousel" class="full-page-carousel is-image">
    <img src="" alt="" />
</div>

</div>

jQuery avec la méthode Bind et l’événement DOMSubtreeModified

On crée une fonction qui surveille en temps réel quelle image du carousel est affichée (celle qui possède la plupart du temps une classe .current) et on stocke son URL dans une variable. On assigne ensuite le contenu de cette variable à l’attribut src de notre image en haut de page.

On exécute la fonction au chargement de la page, puis à chaque fois que le DOM relatif au carousel évolue (passage d’une slide à l’autre).

/*
 * full page Carousel
 */
// Use 'default' view of slick carousel
function switchImg(){
  var getActiveImgURL = $('#block-views-home-slider-block').find('.slick-current img').attr('src');
  $('#fullPageCarousel img').attr('src', '').attr('src', getActiveImgURL);
}
switchImg();
$('#block-views-home-slider-block').bind('DOMSubtreeModified', switchImg);

* full page Carousel

// Use 'default' view of slick carousel

function switchImg(){

var getActiveImgURL = $('#block-views-home-slider-block').find('.slick-current img').attr('src');

$('#fullPageCarousel img').attr('src', '').attr('src', getActiveImgURL);

}

switchImg();

$('#block-views-home-slider-block').bind('DOMSubtreeModified', switchImg);

Cas du Slick Carousel (Drupal 7)

Utiliser la méthode .bind() sur l’événement DOMSubtreeModified ne fonctionne pas dans le cas où un changement de slide utilise plusieurs événements. (En réalité,
ça fonctionne, mais le console.log() imprime plusieurs fois l’URL récupérée).

    /*
     * full page Carousel
     */
    // Use 'default' view of slick carousel
    function switchImg(slideIndex){
      if($('#block-views-home-slider-block').find('.slick-slide.slide--' + slideIndex +' img').length > 0){
        var getActiveImgURL = $('#block-views-home-slider-block').find('.slick-slide.slide--' + slideIndex +' img').first().attr('src');
        $('#fullPageCarousel img').attr('src', '').attr('src', getActiveImgURL);
      }
    }
    switchImg(0);
    jQuery(document).on('beforeChange', '#slick-views-home-slider-1-slider', function (event, slick, currentSlide, nextSlide) {
      switchImg(nextSlide);
    });

* full page Carousel

// Use 'default' view of slick carousel

function switchImg(slideIndex){

if($('#block-views-home-slider-block').find('.slick-slide.slide--' + slideIndex +' img').length > 0){

var getActiveImgURL = $('#block-views-home-slider-block').find('.slick-slide.slide--' + slideIndex +' img').first().attr('src');

$('#fullPageCarousel img').attr('src', '').attr('src', getActiveImgURL);

}

switchImg(0);

jQuery(document).on('beforeChange', '#slick-views-home-slider-1-slider', function (event, slick, currentSlide, nextSlide) {

switchImg(nextSlide);

});

SCSS

On masque les images par défaut du carousel. On met en place quelques styles pour afficher les visuels en pleine page et pour les caler en haut de la fenêtre.

//
// full page carousel
#block-views-home-slider-block {
  img {
    display: none;
  }
}
.full-page-carousel {
  &.is-image {
    img {
      position: absolute;
      z-index: -1;
      top: 0;
    }
  }
}

// full page carousel

#block-views-home-slider-block {

img {

display: none;

}

.full-page-carousel {

&.is-image {

img {

position: absolute;

z-index: -1;

top: 0;

}

Une alternative où l’image est placée en background-image de l’élément body

    /*
     * full page Carousel
     */
    // Use 'default' view of slick carousel
    function switchImg(slideIndex){
      if($('#block-views-home-slider-block').find('.slick-slide.slide--' + slideIndex +' .views-field-field-image img').length > 0){
        var getActiveImgURL = $('#block-views-home-slider-block').find('.slick-slide.slide--' + slideIndex +' .views-field-field-image img').first().attr('src');
        $('body')
          .attr('style', '')
          .css({
            'background-image': 'url("'+ getActiveImgURL +'")',
            'background-position': 'top center',
            'background-repeat': 'no-repeat'
          });
      }
    }
    switchImg(0);
    jQuery(document).on('beforeChange', '#slick-views-home-slider-1-slider', function (event, slick, currentSlide, nextSlide) {
      switchImg(nextSlide);
    });

* full page Carousel

// Use 'default' view of slick carousel

function switchImg(slideIndex){

if($('#block-views-home-slider-block').find('.slick-slide.slide--' + slideIndex +' .views-field-field-image img').length > 0){

var getActiveImgURL = $('#block-views-home-slider-block').find('.slick-slide.slide--' + slideIndex +' .views-field-field-image img').first().attr('src');

$('body')

.attr('style', '')

.css({

'background-image': 'url("'+ getActiveImgURL +'")',

'background-position': 'top center',

'background-repeat': 'no-repeat'

});

}

switchImg(0);

jQuery(document).on('beforeChange', '#slick-views-home-slider-1-slider', function (event, slick, currentSlide, nextSlide) {

switchImg(nextSlide);

});

[Foundation 6] Ajouter des couleurs à la palette par défaut et créer une palette de dégradés

08/08/2017 / admin

$foundation-palette: (
  primary: #0070b8,
  secondary: #f08a00,
  tertiary: #6f7072,
  quaternary: #003f6c,
  quinary: #fecc00,
  senary: #a6a8aa,
  success: #2dcc70,
  warning: #ffae00,
  alert: #e20d0d,
);
$light-gray: #e6e6e6;
$medium-gray: #cacaca;
$dark-gray: #8a8a8a;
$black: #000000;
$white: #ffffff;
$body-background: $white;
$body-font-color: $black;

@include add-foundation-colors;

$tertiary-color: get-color(tertiary);
$quaternary-color: get-color(quaternary);
$quinary-color: get-color(quinary);
$senary-color: get-color(senary);

$primary-color-white-25: mix(white, $primary-color, 25%);
$primary-color-white-50: mix(white, $primary-color, 50%);
$primary-color-black-25: mix(black, $primary-color, 25%);
$primary-color-black-50: mix(black, $primary-color, 50%);

$secondary-color-white-25: mix(white, $secondary-color, 25%);
$secondary-color-white-50: mix(white, $secondary-color, 50%);
$secondary-color-black-25: mix(black, $secondary-color, 25%);
$secondary-color-black-50: mix(black, $secondary-color, 50%);

$tertiary-color-white-25: mix(white, $tertiary-color, 25%);
$tertiary-color-white-50: mix(white, $tertiary-color, 50%);
$tertiary-color-black-25: mix(black, $tertiary-color, 25%);
$tertiary-color-black-50: mix(black, $tertiary-color, 50%);

$quaternary-color-white-25: mix(white, $quaternary-color, 25%);
$quaternary-color-white-50: mix(white, $quaternary-color, 50%);
$quaternary-color-black-25: mix(black, $quaternary-color, 25%);
$quaternary-color-black-50: mix(black, $quaternary-color, 50%);

$quinary-color-white-25: mix(white, $quinary-color, 25%);
$quinary-color-white-50: mix(white, $quinary-color, 50%);
$quinary-color-black-25: mix(black, $quinary-color, 25%);
$quinary-color-black-50: mix(black, $quinary-color, 50%);

$senary-color-white-25: mix(white, $senary-color, 25%);
$senary-color-white-50: mix(white, $senary-color, 50%);
$senary-color-black-25: mix(black, $senary-color, 25%);
$senary-color-black-50: mix(black, $senary-color, 50%);

$gradient-palette: (
  primary: (
    start: $primary-color,
    end:   $quaternary-color, 
  ),
  secondary: (
    start: $secondary-color,
    end:   $quinary-color, 
  ),
  tertiary: (
    start: $tertiary-color,
    end:   $senary-color, 
  ),
  quaternary: (
    start: #373738,
    end:   #535355, 
  ),
  quinary: (
    start: #d2d3d4,
    end:   #f5f5f5, 
  ),
  senary: (
    start: #e5f0f7,
    end:   #f2f8fb, 
  ),
);

$primary-gradient-start-color: map-deep-get($gradient-palette, primary, start);
$primary-gradient-end-color: map-deep-get($gradient-palette, primary, end);
$secondary-gradient-start-color: map-deep-get($gradient-palette, secondary, start);
$secondary-gradient-end-color: map-deep-get($gradient-palette, secondary, end);
$tertiary-gradient-start-color: map-deep-get($gradient-palette, tertiary, start);
$tertiary-gradient-end-color: map-deep-get($gradient-palette, tertiary, end);
$quaternary-gradient-start-color: map-deep-get($gradient-palette, quaternary, start);
$quaternary-gradient-end-color: map-deep-get($gradient-palette, quaternary, end);
$quinary-gradient-start-color: map-deep-get($gradient-palette, quinary, start);
$quinary-gradient-end-color: map-deep-get($gradient-palette, quinary, end);
$senary-gradient-start-color: map-deep-get($gradient-palette, senary, start);
$senary-gradient-end-color: map-deep-get($gradient-palette, senary, end);

$foundation-palette: (

primary: #0070b8,

secondary: #f08a00,

tertiary: #6f7072,

quaternary: #003f6c,

quinary: #fecc00,

senary: #a6a8aa,

success: #2dcc70,

warning: #ffae00,

alert: #e20d0d,

);

$light-gray: #e6e6e6;

$medium-gray: #cacaca;

$dark-gray: #8a8a8a;

$black: #000000;

$white: #ffffff;

$body-background: $white;

$body-font-color: $black;

@include add-foundation-colors;

$tertiary-color: get-color(tertiary);

$quaternary-color: get-color(quaternary);

$quinary-color: get-color(quinary);

$senary-color: get-color(senary);

$primary-color-white-25: mix(white, $primary-color, 25%);

$primary-color-white-50: mix(white, $primary-color, 50%);

$primary-color-black-25: mix(black, $primary-color, 25%);

$primary-color-black-50: mix(black, $primary-color, 50%);

$secondary-color-white-25: mix(white, $secondary-color, 25%);

$secondary-color-white-50: mix(white, $secondary-color, 50%);

$secondary-color-black-25: mix(black, $secondary-color, 25%);

$secondary-color-black-50: mix(black, $secondary-color, 50%);

$tertiary-color-white-25: mix(white, $tertiary-color, 25%);

$tertiary-color-white-50: mix(white, $tertiary-color, 50%);

$tertiary-color-black-25: mix(black, $tertiary-color, 25%);

$tertiary-color-black-50: mix(black, $tertiary-color, 50%);

$quaternary-color-white-25: mix(white, $quaternary-color, 25%);

$quaternary-color-white-50: mix(white, $quaternary-color, 50%);

$quaternary-color-black-25: mix(black, $quaternary-color, 25%);

$quaternary-color-black-50: mix(black, $quaternary-color, 50%);

$quinary-color-white-25: mix(white, $quinary-color, 25%);

$quinary-color-white-50: mix(white, $quinary-color, 50%);

$quinary-color-black-25: mix(black, $quinary-color, 25%);

$quinary-color-black-50: mix(black, $quinary-color, 50%);

$senary-color-white-25: mix(white, $senary-color, 25%);

$senary-color-white-50: mix(white, $senary-color, 50%);

$senary-color-black-25: mix(black, $senary-color, 25%);

$senary-color-black-50: mix(black, $senary-color, 50%);

$gradient-palette: (

primary: (

start: $primary-color,

end: $quaternary-color,

secondary: (

start: $secondary-color,

end: $quinary-color,

tertiary: (

start: $tertiary-color,

end: $senary-color,

quaternary: (

start: #373738,

end: #535355,

quinary: (

start: #d2d3d4,

end: #f5f5f5,

senary: (

start: #e5f0f7,

end: #f2f8fb,

);

$primary-gradient-start-color: map-deep-get($gradient-palette, primary, start);

$primary-gradient-end-color: map-deep-get($gradient-palette, primary, end);

$secondary-gradient-start-color: map-deep-get($gradient-palette, secondary, start);

$secondary-gradient-end-color: map-deep-get($gradient-palette, secondary, end);

$tertiary-gradient-start-color: map-deep-get($gradient-palette, tertiary, start);

$tertiary-gradient-end-color: map-deep-get($gradient-palette, tertiary, end);

$quaternary-gradient-start-color: map-deep-get($gradient-palette, quaternary, start);

$quaternary-gradient-end-color: map-deep-get($gradient-palette, quaternary, end);

$quinary-gradient-start-color: map-deep-get($gradient-palette, quinary, start);

$quinary-gradient-end-color: map-deep-get($gradient-palette, quinary, end);

$senary-gradient-start-color: map-deep-get($gradient-palette, senary, start);

$senary-gradient-end-color: map-deep-get($gradient-palette, senary, end);

[SASS] Fonctions et mixins pour manipuler les couleurs

08/08/2017 / admin

Documentation officielle (RGB Functions, HSL Functions, Opacity Functions).
A Visual Guide to Sass & Compass Color Functions – Jackie Balzer
Des fonctions pour éclairer ou assombrir une couleur, respectivement par le blanc ou le noir.

Sass lighten() and darken() vs mix() using black and white – A PEN BY Josh McCarty
Shades and Tints of a color.

Eclaircir une couleur avec la fonction Mix de SASS

mix(white, $color, $percentage);

1	mix(white, $color, $percentage);

Assombrir une couleur avec la fonction Mix de SASS

mix(black, $color, $percentage);

1	mix(black, $color, $percentage);

[CSS] Des feuilles de style d’impression

04/08/2017 / admin

Frameworks dédiés à l’impression papier des pages web

Tutoriels

Ressources de ce blog

Tableaux: des largeurs de colonnes qui s’adaptent en fonction de leur contenu

table { table-layout: auto; }

1	table { table-layout: auto; }

[jQuery] Vérifier qu’un élément est présent dans le DOM lorsqu’on scrolle dans la page

03/08/2017 / admin

Source: Check if element is visible after scrolling.

function Utils() {}

Utils.prototype = {
  constructor: Utils,
  isElementInView: function (element, fullyInView) {
    var pageTop = $(window).scrollTop();
    var pageBottom = pageTop + $(window).height();
    var elementTop = $(element).offset().top;
    var elementBottom = elementTop + $(element).height();

    if (fullyInView === true) {
      return ((pageTop < elementTop) && (pageBottom > elementBottom));
    } else {
      return ((elementTop <= pageBottom) && (elementBottom >= pageTop));
    }
  }
};

var Utils = new Utils();

// Usage:
//
// var isElementInView = Utils.isElementInView($('#flyout-left-container'), false);

// if (isElementInView) {
//   console.log('in view');
// } else {
//   console.log('out of view');
// }

function Utils() {}

Utils.prototype = {

constructor: Utils,

isElementInView: function (element, fullyInView) {

var pageTop = $(window).scrollTop();

var pageBottom = pageTop + $(window).height();

var elementTop = $(element).offset().top;

var elementBottom = elementTop + $(element).height();

if (fullyInView === true) {

return ((pageTop < elementTop) && (pageBottom > elementBottom));

} else {

return ((elementTop <= pageBottom) && (elementBottom >= pageTop));

}

};

var Utils = new Utils();

// Usage:

// var isElementInView = Utils.isElementInView($('#flyout-left-container'), false);

// if (isElementInView) {

// console.log('in view');

// } else {

// console.log('out of view');

// }

[Foundation 6] Créer une ancre vers le haut de page avec le composant Sticky

03/08/2017 / admin

Attention: merde lorsqu’on utilise des composants de type Accordéon, etc … (lorsque la hauteur de page s’agrandit) !!

Sur chaque page du site, une fonctionnalité de scroll automatique/retour vers le haut de page peut-être ajoutée en exploitant le composant Sticky de Foundation 6. Ce lien de retour devrait apparaître dès qu’un scroll est nécessaire et serait fixé en bas de page sur la limite haute du bloc footer.

Bloc HTML à placer en haut de page (dans le DOM)

<div class="row" data-sticky-container="">
    <div 
      class="sticky scroll-up" 
      data-sticky="" 
      style="width:100%"
      data-container-class="scroll-up-sticky-container"
      data-sticky-on="small" 
      data-stick-to="bottom"  
      data-top-anchor="1200" 
      data-btm-anchor="content-block:bottom">
        <a href="#top">
          <i class="iconfont iconfont-angle-up" />
        </a>
    </div>
</div>

<div

class="sticky scroll-up"

data-sticky=""

style="width:100%"

data-container-class="scroll-up-sticky-container"

data-sticky-on="small"

data-stick-to="bottom"

data-top-anchor="1200"

data-btm-anchor="content-block:bottom">

</a>

</div>

Bloc HTML à placer juste avant le footer (dans le DOM)

<div class="row">
  <div 
    class="scroll-up scroll-up-bottom is-hidden" 
    style="width:100%">
      <a href="#top">
        <i class="iconfont iconfont-angle-up" />
      </a>
  </div>
</div>

<div

class="scroll-up scroll-up-bottom is-hidden"

style="width:100%">

</a>

</div>

Code JS

Edit 01/12/2017: (à priori) fonctionne sans le code ci-dessous…

// fonction Scroll vers le haut
// Quand la page n'est pas assez haute pour justifier l'affichage de l'ancre
var pageBoxInfo = Foundation.Box.GetDimensions(document.getElementById('top'));
// 1200 is "data-top-anchor" attribute value from "Bloc HTML à placer en haut de page (dans le DOM)"
if( pageBoxInfo.height >= 1200 ) {
  $('.scroll-up-bottom').removeClass('is-hidden');
}

// fonction Scroll vers le haut

// Quand la page n'est pas assez haute pour justifier l'affichage de l'ancre

var pageBoxInfo = Foundation.Box.GetDimensions(document.getElementById('top'));

// 1200 is "data-top-anchor" attribute value from "Bloc HTML à placer en haut de page (dans le DOM)"

if( pageBoxInfo.height >= 1200 ) {

$('.scroll-up-bottom').removeClass('is-hidden');

}

Code SASS

A noter: la présence de la propriété pointer-events sur .scroll-up.sticky.is-at-bottom et .scroll-up a pour éviter que les éléments qui se trouvent sous la zone (à 100% de largeur) du sticky soient bloqués au clic. <a href="https://caniuse.com/#search=pointer-events">pointer-events</a> ne fonctionnera pas sous IE10 et en-dessous, mais on s’en b*% l$! c*ù|!!€%.

A noter #2: la présence de la propriété // margin-right: -25%; sur .scroll-up a pour permettre de positionner à sa guise le lien.

//
// "scroll to top" feature
.scroll-up {
  &.sticky {
    display: none;
    &.is-at-bottom {
      display: block;
      pointer-events: none;
    }
  }

  text-align: right;
  
  &-sticky-container {
    height: 0px !important;
  }
  a{
    display: inline-block;
    text-align: center; 
    color: #fff;
    background: $primary-color;
    pointer-events: all;
    // margin-right: -25%;
    @include breakpoint(medium down) {
      $scroll-up-width: 35px;
      width: $scroll-up-width;
      height: $scroll-up-width;
      line-height: $scroll-up-width;
      font-size: rem-calc($scroll-up-width/1.5);
    }
    @include breakpoint(large) {
      $scroll-up-width: 70px;
      width: $scroll-up-width;
      height: $scroll-up-width;
      line-height: $scroll-up-width;
      font-size: rem-calc($scroll-up-width/1.5);      
    }    
  }

  &-bottom {
    border-bottom: 2px solid #fff;
    margin-bottom: -$base-spacing-small;
  }
}

// "scroll to top" feature

.scroll-up {

&.sticky {

display: none;

&.is-at-bottom {

display: block;

pointer-events: none;

}

text-align: right;

&-sticky-container {

height: 0px !important;

}

display: inline-block;

text-align: center;

color: #fff;

background: $primary-color;

pointer-events: all;

// margin-right: -25%;

@include breakpoint(medium down) {

$scroll-up-width: 35px;

width: $scroll-up-width;

height: $scroll-up-width;

line-height: $scroll-up-width;

font-size: rem-calc($scroll-up-width/1.5);

}

@include breakpoint(large) {

$scroll-up-width: 70px;

width: $scroll-up-width;

height: $scroll-up-width;

line-height: $scroll-up-width;

font-size: rem-calc($scroll-up-width/1.5);

}

&-bottom {

border-bottom: 2px solid #fff;

margin-bottom: -$base-spacing-small;

}

Articles récents

Catégories

Archives

Méta

Mois : août 2017

[Drupal 7] Afficher une image dans un fichier node.tpl.php présent dans un thème

[jQuery] Un carousel avec visuel en pleine page avec n’importe quel plug-in

HTML

jQuery avec la méthode Bind et l’événement DOMSubtreeModified

Cas du Slick Carousel (Drupal 7)

SCSS

Une alternative où l’image est placée en background-image de l’élément body

[Foundation 6] Ajouter des couleurs à la palette par défaut et créer une palette de dégradés

[SASS] Fonctions et mixins pour manipuler les couleurs

Eclaircir une couleur avec la fonction Mix de SASS

Assombrir une couleur avec la fonction Mix de SASS

[CSS] Des feuilles de style d’impression

Frameworks dédiés à l’impression papier des pages web

Tutoriels

Ressources de ce blog

Tableaux: des largeurs de colonnes qui s’adaptent en fonction de leur contenu

[jQuery] Vérifier qu’un élément est présent dans le DOM lorsqu’on scrolle dans la page

[Foundation 6] Créer une ancre vers le haut de page avec le composant Sticky

Bloc HTML à placer en haut de page (dans le DOM)

Bloc HTML à placer juste avant le footer (dans le DOM)

Code JS

Code SASS