var Phenix = function () {
Troll du Web depuis 1996

Blog

Mon avis sur tout (même si on ne me le demande pas) et surtout sur n’importe quoi !

Un fichier sourcemap SASS pour Foundation

Un de mes collègues a trouvé une solution pour avoir un fichier source map quand on compile Foundation.

Son fichier fait d’autres trucs, je n’ai extrait que la partie source map.

On commence par installer gulp-sourcemap :

  1. npm install gulp-sourcemaps --save-dev

Ensuite on adapte le fichier gulpfile.js pour qu’il génère le sourcemap :

  1. var gulp = require('gulp');
  2. var $ = require('gulp-load-plugins')();
  3.  
  4. var sassPaths = [
  5. 'bower_components/foundation-sites/scss',
  6. 'bower_components/motion-ui/src'
  7. ];
  8.  
  9. gulp.task('sass', function() {
  10. return gulp.src('scss/app.scss')
  11. .pipe($.sourcemaps.init())
  12. .pipe($.sass({
  13. includePaths: sassPaths,
  14. outputStyle: 'compressed' // if css compressed **file size**
  15. }).on('error', $.sass.logError))
  16. .pipe($.autoprefixer({
  17. browsers: ['last 2 versions', 'ie >= 9']
  18. }))
  19. .pipe($.sourcemaps.write('../css'))
  20. .pipe(gulp.dest('css'));
  21. });
  22.  
  23. gulp.task('default', ['sass'], function() {
  24. gulp.watch(['scss/**/*.scss'], ['sass']);
  25. });

Menu responsive avec foundation

Depuis la version 6 du framework SASS/CSS Foundation, le composant qui sert à créer le menu principal du site, à savoir la « top bar » n’est plus un menu responsif « out of the box ».

C’est a vous d’en construire un avec les composants, comme l’explique la documentation.

Voici une structure html qui devrait couvrir la majorité des besoins. N’ont pas que c’est bien compliqué à réaliser, mais j’en ai marre de la refaire encore et toujours.

  1. <div class="title-bar" data-responsive-toggle="main-menu" data-hide-for="medium">
  2. <button class="menu-icon" type="button" data-toggle></button>
  3. <div class="title-bar-title">Menu</div>
  4. </div>
  5. <div class="top-bar" id="main-menu">
  6. <div class="top-bar-left">
  7. <ul class="vertical medium-horizontal menu dropdown" data-responsive-menu="drilldown medium-dropdown" data-parent-link="true">
  8. <li>
  9. <a href="#">Lien</a>
  10. <ul class="menu vertical">
  11. <li>
  12. <a href="">Lien</a>
  13. <ul class="menu vertical">
  14. <li>
  15. <a href="">Lien</a>
  16. </li>
  17. <li>
  18. <a href="">Lien</a>
  19. </li>
  20. <li>
  21. <a href="">Lien</a>
  22. </li>
  23. </ul>
  24. </li>
  25. <li>
  26. <a href="">Lien</a>
  27. </li>
  28. <li>
  29. <a href="">Lien</a>
  30. </li>
  31. </ul>
  32. </li>
  33. <li><a href="#">Lien</a></li>
  34. <li><a href="#">Lien</a></li>
  35. <li><a href="#">Lien</a></li>
  36. <li><a href="#">Lien</a></li>
  37. <li><a href="#">Lien</a></li>
  38. </ul>
  39. </div>
  40. </div>

Trier par date dans les métas

Voici un exemple de $args qui permet d’ordonner une liste de post selon une date stocker dans les métas de Wordpress (table wp_postmeta). C’est pratique pour tout un tas de plus de calendrier !

  1. <?php
  2. // Agenda
  3. $args = array(
  4. 'post_type' => 'events',
  5. 'meta_query' => array(
  6. // Exclure les éléments du passé
  7. 'key' => '_EventStartDate',
  8. 'value' => current_time( 'Y-m-d h:m:s' ),
  9. 'compare' => '>',
  10. ),
  11. ),
  12. 'orderby' => '_EventStartDate',
  13. 'posts_per_page' => 3,
  14. );
Voir en ligne : Ordering custom posts by meta field date


Trouver la traduction d’un objet #SPIP

Une fonction bien pratique quand on travaille avec des squelettes multilingues. Avant j’utilisais un assemblage de boucles et de critères, un peu illisible.

Cette fonction simplifie grandement le travail en retrouvant automatiquement une traduction en fonction d’un couple id_objet/objet.
Cela devrait fonctionner avec n’importe quel objet utilisant le système de traduction de SPIP.

  1. <?php
  2. /**
  3.  * Récupère la traduction d'un objet via la langue et l'id_objet
  4.  *
  5.  * @param int $id_objet
  6.  * @param string $objet
  7.  * @param string $lang
  8.  * @access public
  9.  * @return int
  10.  */
  11. function objet_trouver_traduction($id_objet, $objet, $lang) {
  12.  
  13. // Pas de lang, on sort
  14. if (!isset($lang)) {
  15. return $id_objet;
  16. }
  17.  
  18. // Table
  19. $table = table_objet_sql($objet);
  20. $cle_primaire = id_table_objet($objet);
  21. // On récupère l'éventuelle traduction
  22. $id_traduction = sql_getfetsel(
  23. $cle_primaire,
  24. $table,
  25. 'id_trad='.intval($id_objet),
  26. 'lang='.sql_quote($lang),
  27. 'statut='.sql_quote('publie')
  28. )
  29. );
  30.  
  31. return $id_traduction;
  32. }
  33.  
  34. function article_trouver_traduction($id_article, $lang) {
  35. return objet_trouver_traduction($id_article, 'article', $lang);
  36. }
  37.  
  38. // Si le plugin Traduction entre rubriques est activé
  39. // http://contrib.spip.net/Traduction-des-rubriques
  40. function rubrique_trouver_traduction($id_article, $lang) {
  41. return objet_trouver_traduction($id_article, 'rubrique', $lang);
  42. }

Je l’utilise surtout pour les liens directs dans les squelettes :

  1. <a href="#URL_ARTICLE{[(#EVAL{_ID_ARTICLE_CONTACT}|article_trouver_traduction{#ENV{lang}})]}" class="button large">
  2. Nous contacter
  3. </a>