Monthnovembre 2016

[Pastacode] Publier du code source en provenance de Pastebin dans un billet de blog

Pastebin est un service gratuit d’hébergement à vie de bouts de code.

Le bout de code suivant (http://pastebin.com/P97HHWpS) enregistré sous Pastebin peut être affiché dans le corps d’un billet de blog WordPress si le plugin Pastacode est installé. Dans l’éditeur en vue « Texte », utiliser la balise suivante :

[jQuery] Créer des catégories et utiliser leurs scopes pour trier des éléments du DOM

Problème:

Mon code m’affiche une liste de boutiques d’une même enseigne sur l’ensemble des villes françaises. Cette liste ne fait l’objet d’aucun tri. J’ai besoin de créer 3 groupes bien distincts de boutiques:

  • Les boutiques sur Paris
  • Les boutiques en région parisienne
  • Les boutiques en province

Exemple du code source de ma liste de boutiques (vous observerez pour la suite de ce tutoriel la présence des classes .shop-all pour la liste et .shop-zipcode pour baliser chaque code postal) :

Solution:

Préparer le markup HTML à la création dynamique de 3 listes.

Dans la source HTML, on initie une liste pour chacun des 3 groupes précités.

Récupérer une information de nature similaire sur chaque élément qui nous permettra ensuite d’effectuer le tri voulu.

Pour chaque boutique, on commence via les méthodes jQuery .each() et .text() par récupérer le code postal complet (5 caractères) marqué par la classe .shop-zipcode qui se trouve dans le DOM pour baliser chaque code postal. On tronque immédiatement chaque valeur récupérée pour ne conserver que les 2 premiers caractères via la méthode .substring() et on l’affiche dans le DOM via un data-attribute data-zipcode="" qu’on affecte à chaque élément <li></li> de notre liste initiale de boutiques.

Déterminer un scope pour chaque catégorie et marquer chaque élément de la liste en fonction.

On attribue à chaque boutique (chaque élément de notre liste initiale) une classe .is-paris, .is-idf ou .is-province en fonction de la zone géographique (nos catégories) dans laquelle elle se situe.

Au préalable, on crée un tableau idfCodeList qui regroupe tous les code postaux qui constituent l’Ile-de-France.

On va ensuite marquer par une classe ajoutée dans le DOM chaque élément de notre liste en fonction de sa catégorie. On commence par localiser les boutiques sur Paris dont le scope est constitué des codes postaux qui commencent par « 75 » avec une première condition if().

On marque ensuite les éléments dont le code postal figure dans notre tableau idfCodeList avec une seconde condition else if(). La méthode jQuery .inArray va nous permettre de vérifier si chaque élément de liste possède un code postal qui correspond au scope du tableau que nous venons de créer et de marquer les éléments correspondants en fonction.

Pour finir, on marque les éléments restants (boutiques en province) puisqu’ils n’entrent dans aucun des deux premiers scopes (Paris, Ile-de-France) que nous avons établi.

On déplace chaque élément précédemment marqué dans la catégorie correspondante.

On commence, pour écrire moins de code, par déclarer dans un tableau isZones un libellé pour chacune des trois zones qui serviront à trier les boutiques. Ces libellés doivent être repris de ceux des IDs des 3 listes initiées précédemment dans votre source HTML.

On peut ensuite créer une boucle qui affectera dynamiquement chaque boutique à l’une des 3 listes correspondante dans le DOM en fonction de la zone géographique dans laquelle elle se trouve. Pour ce faire, on utilise les libellés déclarés dans le tableau isZones.

Pour finir, nettoyer le DOM de tout markup inutile.

La liste initale de boutiques est maintenant vide. Supprimons là du DOM.

Code jQuery complet sans les commentaires:

[Change 3.x][Gulp] Ajouter les Sourcemaps dans RBS Change

[12:46 PM] Frank LANG: Quand t’as essayé d’installe gulp-sourcemaps, t’arrivais à avoir un fichier .map ?
[12:49 PM] Frank LANG: En fait j’avais pas encore regardé comment fonctionne le plug-in; je pense savoir d’où vient le problème
[12:50 PM] Frank LANG: on crée un fichier main.css qui est le résultat de tous nos fichiers SASS compilés et processés
[12:50 PM] Frank LANG: et (pour ma part mais j’imagine que tu étais arrivé à ce stade également), j’ai bien un fichier « main.css.map » qui est généré
[12:52 PM] Frank LANG: Sauf que Change prend « main.css » et le compile et le minifie avec d’autres fichiers CSS (skin.css pur ne citer que lui) et nous crée une CSS unique « screen.css » chargée dans la page
[12:52 PM] Frank LANG: Et c’est la raison pour laquelle le plugin sourcemaps ne fonctionne pas
[12:52 PM] Frank LANG: il se réfère à main.css
[12:53 PM] Frank LANG: et c’est « screen.css » qui est chargée en front
[1:06 PM] Frank LANG: Utiliser les sourcemaps dans Change doit être possible moyennant une grosse grosse bidouille

[1:09 PM] Frank LANG: ouais en fait j’ai réussi
[1:10 PM] Frank LANG: mais c’est lourd …
[1:11 PM] Frank LANG: dans Y:\change30\manbow\override\modules\website\templates\PageDynamic-ContentBasis.all.all.php qui est le fichier qui génère l’en-tête de page
[1:11 PM] Frank LANG: je mets un lien absolu vers main.css :
[1:12 PM] Frank LANG:

[1:14 PM] Frank LANG: et dans la gulpfile, je crée une nouvelle tâche ‘sass_sourcemaps’ qui va faire pareil que la tâche ‘sass’ mais qui va générer les fichiers ‘main.css’ et  ’.map’ dans le dossier ‘image’ du thème car c’est le seul qui est accessible depuis le front via une URL relative
[1:14 PM] Frank LANG: Tu accèdes à : http://manbow.vmchange.rbs.fr/media/themes/responsive/main.css
[1:15 PM] Frank LANG: mais pas à : http://manbow.vmchange.rbs.fr/themes/responsive/style/main.css
[1:15 PM] Frank LANG: Avec ça, l’inspecteur d’éléments te remonte le code dans les SCSS
[1:15 PM] Frank LANG: Mais y’a plusieurs soucis :
[1:16 PM] Frank LANG: 1. je charge 2x le fichier ‘main.css’, donc tu auras toujours le code CSS compilé dans l’inspecteur d’éléments. En plus, le code SASS sera toujours déclaré après, car surchargé.
[1:17 PM] Frank LANG: 2. on peut pas laisser le lien relatif dans le fichier d’en-tête en prod; c’est pas propre (mais à la limite, faut pas inclure les sourcemaps en prod non plus; il parait que ça ralentit l’exécution des CSS)
[1:19 PM] Frank LANG: 3. ‘main.css’ ne contient que les styles issus des fichiers SASS. Les sources CSS comme par exemple ‘skin.css’ ne sont pas incluses. Ce n’ets pas si problématique je pense car l’inspecteur d’éléments te permettra de les retrouver au besoin.
[1:20 PM] Frank LANG: Ce qui est bien :
[1:20 PM] Frank LANG: 1. on a les sourcemaps
[1:21 PM] Frank LANG: malgré tout
[1:26 PM] Frank LANG: j’ai pushé le code commenté si jamais tu veux l’activer pour voir
[1:27 PM] Frank LANG: je pense que via Change, il n’y aura pas possibilité d’avoir mieux que ça

Protégé : [Change 3.x] Bonnes pratiques pour le développement à partir du thème naked-12-cols (branche responsive-modern) #2

Cette publication est protégée par un mot de passe. Pour la voir, veuillez saisir votre mot de passe ci-dessous :

Protégé : [Change 3.x] Bonnes pratiques pour le développement à partir du thème naked-12-cols (branche responsive-modern)

Cette publication est protégée par un mot de passe. Pour la voir, veuillez saisir votre mot de passe ci-dessous :

Protégé : [Change 3.x] Quelques notes sur le module Skin (habillage)

Cette publication est protégée par un mot de passe. Pour la voir, veuillez saisir votre mot de passe ci-dessous :

© 2020 FrontEndDeveloper

Theme by Anders NorénUp ↑