valentin_le_moign/thalim-theme
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Newsletters archivées lisibles en mobile (iframe srcdoc) + fix couleur du bouton de recherche sur iOS

Browse Source
This commit is contained in:
Valentin Le Moign
2026-07-06 23:34:30 +02:00
parent 5f682a637b
commit 3f62d882f4
7 changed files with 113 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
css/style.css
View File

@@ -394,6 +394,7 @@ header {
display: block; display: block;
margin-left: auto; margin-left: auto;
background-color: #eeeeee; background-color: #eeeeee;
color: #1a1a1a;
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
font-family: "NewsCycle", sans-serif; font-family: "NewsCycle", sans-serif;
font-size: 0.85rem; font-size: 0.85rem;
@@ -2173,6 +2174,11 @@ footer {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 1.5rem; } gap: 1.5rem; }
.article .main-content-text .newsletter-frame {
display: block;
width: 100%;
border: 0;
overflow: hidden; }
.article .main-content-text .canal-u-embed, .article .main-content-text .canal-u-embed,
.article .main-content-text .video-embed { .article .main-content-text .video-embed {
position: relative; position: relative;

12
inc/assets.php
View File

@@ -190,6 +190,18 @@ function theme_enqueue_assets() {
filemtime(get_template_directory() . '/js/imageSwiper.js'), filemtime(get_template_directory() . '/js/imageSwiper.js'),
true true
); );
// Newsletters archivées : rendues en <iframe srcdoc>, hauteur auto-ajustée
$queried_id = get_queried_object_id();
if ($queried_id && has_category(thalim_cat_id('newsletter'), $queried_id)) {
wp_enqueue_script(
'newsletterFrame',
get_template_directory_uri() . '/js/newsletterFrame.js',
[],
filemtime(get_template_directory() . '/js/newsletterFrame.js'),
true
);
}
} }
wp_enqueue_script( wp_enqueue_script(

12
inc/single-helpers.php
View File

@@ -99,8 +99,20 @@ function thalim_get_single_data($post_id) {
'parent_link' => '', 'parent_link' => '',
'category_name' => '', 'category_name' => '',
'category_link' => '', 'category_link' => '',
'is_newsletter' => false,
'newsletter_html' => '',
]; ];
// Newsletters archivées (cat « newsletter ») : le post_content est un
// document HTML email complet (table 600px + <style> media queries). Injecté
// dans la page il perd son <head>/<style> et déborde en mobile ; le template
// le rend donc isolé dans une <iframe srcdoc> — on passe le HTML brut (pas
// filtré par the_content/wpautop qui casserait le document).
if (in_array(thalim_cat_id('newsletter'), wp_get_post_categories($post_id), true)) {
$data['is_newsletter'] = true;
$data['newsletter_html'] = get_post_field('post_content', $post_id);
}
// --- Dates --- // --- Dates ---
$raw_debut = get_post_meta($post_id, 'date_de_debut', true); $raw_debut = get_post_meta($post_id, 'date_de_debut', true);
$raw_fin = get_post_meta($post_id, 'date_de_fin', true); $raw_fin = get_post_meta($post_id, 'date_de_fin', true);

64
js/newsletterFrame.js Normal file
View File

@@ -0,0 +1,64 @@
/**
* Newsletters archivées : la <iframe srcdoc> qui rend le document email
* (single.twig, posts de catégorie « newsletter ») n'a pas de hauteur
* intrinsèque. On l'ajuste au contenu réel et on ré-ajuste sur resize, au
* chargement des images et sur tout reflow interne (ResizeObserver).
*/
(function () {
'use strict';
function resize(frame) {
try {
var doc = frame.contentDocument || frame.contentWindow.document;
if (!doc || !doc.body) return;
var h = Math.max(
doc.body.scrollHeight, doc.documentElement.scrollHeight,
doc.body.offsetHeight, doc.documentElement.offsetHeight
);
frame.style.height = h + 'px';
} catch (e) { /* cross-origin impossible : srcdoc est same-origin */ }
}
function setup(frame) {
var run = function () { resize(frame); };
frame.addEventListener('load', function () {
run();
try {
var win = frame.contentWindow;
var doc = frame.contentDocument;
// Le reflow d'images en cours de chargement change la hauteur.
Array.prototype.forEach.call(doc.images, function (img) {
if (!img.complete) { img.addEventListener('load', run); }
});
if (win.ResizeObserver && doc.body) {
new win.ResizeObserver(run).observe(doc.body);
}
} catch (e) { /* no-op */ }
});
// srcdoc peut déjà être chargé si le script tourne tard.
run();
}
function init() {
var frames = document.querySelectorAll('.newsletter-frame');
Array.prototype.forEach.call(frames, setup);
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', init);
} else {
init();
}
var raf;
window.addEventListener('resize', function () {
if (raf) { cancelAnimationFrame(raf); }
raf = requestAnimationFrame(function () {
Array.prototype.forEach.call(
document.querySelectorAll('.newsletter-frame'), resize
);
});
});
})();

2
scss/_header.scss
View File

@@ -297,6 +297,8 @@ header {
display: block; display: block;
margin-left: auto; margin-left: auto;
background-color: $light-gray; background-color: $light-gray;
color: $dark-gray; // iOS Safari/Firefox : sans couleur explicite, le texte
// du <button> hérite du blanc système et devient illisible
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
font-family: $font-primary; font-family: $font-primary;
font-size: 0.85rem; font-size: 0.85rem;

11
scss/_single.scss
View File

@@ -352,6 +352,17 @@
gap: 1.5rem; gap: 1.5rem;
} }
// Newsletter archivée : document email rendu isolé (voir single.twig).
// L'iframe prend la largeur de la colonne ; son responsive interne
// (@media max-width:620px) fait passer la table 600px à 100%. Hauteur
// posée en px par newsletterFrame.js.
.newsletter-frame {
display: block;
width: 100%;
border: 0;
overflow: hidden;
}
.canal-u-embed, .canal-u-embed,
.video-embed { .video-embed {
position: relative; position: relative;

7
templates/single.twig
View File

@@ -224,7 +224,12 @@
</p> </p>
{% endif %} {% endif %}
{% if current_language == 'en' and article.body_en %} {% if article.is_newsletter %}
{# Document email complet (table 600px + media queries) rendu
isolé pour préserver son <head>/<style> et son responsive.
Hauteur auto-ajustée par newsletterFrame.js. #}
<iframe class="newsletter-frame" title="{{ post.title }}" srcdoc="{{ article.newsletter_html|e('html_attr') }}"></iframe>
{% elseif current_language == 'en' and article.body_en %}
{{ article.body_en|raw }} {{ article.body_en|raw }}
{% else %} {% else %}
{{ post.content }} {{ post.content }}