https://www.compilatio.net/wp-content/plugins/pilo-blocks/assets/pib-rto.min.js?ver=7.1.2

1class RealTimeObserver{#h="2.4.0-1";#a;#t;#e;#r;#s=new Set;#i;#o;constructor(t,e={}){this.#a=t,this.#t=e,this.#r=this.#v(this.#t.rootMargin||"0"),this.#e=this.#l(),this.#t.debug&&(console.log(`%cRealTimeObserver v${this.#h} - Debug mode enabled`,"background-color: #FBB046; font-size: 18px; font-weight: bold; padding:3px 5px; color:#2.4.08"),this.#x(),addStyle())}#l(){return new IntersectionObserver(this.#m.bind(this),{...this.#t,rootMargin:this.#p()})}get root(){return this.#e.root}get rootMargin(){return this.#e.rootMargin}get thresholds(){return this.#e.thresholds}disconnect(){this.#s.clear(),this.#e.disconnect()}observe(t){this.#s.add(t),this.#e.observe(t),this.#t.debug&&this.#g(t)}takeRecords(){return this.#e.takeRecords()}unobserve(t){this.#s.delete(t),this.#e.unobserve(t),this.#t.debug&&this.#u(t)}#p(){const t=this.#c(this.#y()),e=this.#d();return[-e.top+t.top,e.right-t.right,e.bottom-t.bottom,-e.left+t.left].map(r=>`${r}px`).join(" ")}#c(t){const e=this.#r.map(({type:r,value:i},s)=>r==="px"?i:i*(s%2?t.width:t.height)/100);return{top:t.top-e[0],right:t.right+e[1],bottom:t.bottom+e[2],left:t.left-e[3],width:t.right+e[1]-(t.left-e[3]),height:t.bottom+e[2]-(t.top-e[0])}}#g(t){const e=document.createElement("div");e.classList.add("threshold-overlay"),t.appendChild(e);let o=this.#t.threshold;o=typeof o=="number"?o:.5,o=o||1;const r=document.createElement("div");r.classList.add("threshold-marker"),r.style.setProperty("--threshold",o*100+"%"),r.dataset.threshold=o,e.appendChild(r);const i=document.createElement("span");i.classList.add("overlay-label"),i.textContent="\xC9l\xE9ment observ\xE9",e.appendChild(i);const s=document.createElement("span");s.classList.add("marker-label"),s.textContent=`Zone d'intersection: ${o*100}%`,r.appendChild(s)}#b(t,e){const o=t.querySelector(".threshold-overlay");o&&(o.style.borderColor=e>0?"red":"rgba(255, 0, 0, 0.5)"),t.querySelectorAll(".threshold-marker").forEach(i=>{const s=parseFloat(i.dataset.threshold);i.style.background=e>=s?"rgba(0, 255, 0, 0.3)":"rgba(255, 0, 0, 0.3)"})}#u(t){const e=t.querySelector(".threshold-overlay");e&&e.remove()}#m(t){t.forEach(e=>{this.#a(e),this.#t.debug&&this.#b(e.target,e.intersectionRatio)})}#x(){this.#i=document.createElement("div"),this.#i.setAttribute("id","viewport"),document.body.appendChild(this.#i),this.#o=document.createElement("div"),this.#o.setAttribute("id","root-margin"),this.#i.appendChild(this.#o);const t=document.createElement("span");t.classList.add("root_margin-label"),t.textContent=`Zone d'intersection: ${this.#r.map(({value:e,type:o})=>`${e}${o}`).join(" ")}`,this.#o.appendChild(t),window.visualViewport.addEventListener("scroll",()=>{this.#n()}),setInterval(()=>{this.#n()},50),this.#n()}#n(){const t=this.#d(),e=this.#r.map(({value:r,type:i},s)=>i==="%"?r*(s%2?t.width:t.height)/100:r),o=4;this.#o.style.top=`${e[0]+o}px`,this.#o.style.right=`${e[1]+o}px`,this.#o.style.bottom=`${e[2]+o}px`,this.#o.style.left=`${e[3]+o}px`}#v(t){const e=t.split(/\s+/);return["top","right","bottom","left"].map((o,r)=>

1this.#f(e[r]||e[0]))}#f(t){return{type:t.endsWith("%")?"%":"px",value:parseFloat(t)}}#d(){const t=document.documentElement;return{top:0,left:0,right:t.clientWidth,width:t.clientWidth,bottom:t.clientHeight,height:t.clientHeight}}#y(){const t=window.visualViewport;return{top:t.offsetTop,left:t.offsetLeft,right:t.offsetLeft+t.width,width:t.width,bottom:t.offsetTop+t.height,height:t.height}}}function addStyle(){const n=document.createElement("style");n.innerHTML=`
2        #viewport {
3            position: fixed;
4            outline: solid 2px rgba(0, 180, 0,0);
5            background: rgba(0, 180, 0, 0.0);
6            pointer-events:none;
7            border-radius: 3px;
8            z-index: 1000000;
9            inset: 4px;
10        }
11        #root-margin {
12            position: fixed;
13            background: rgba(0, 37, 220, 0.1);
14            outline: dashed 2px rgb(0, 37, 220);
15            mix-blend-mode: screen;
16            border-radius: 3px;
17            box-sizing: border-box;
18            border-radius: 8px;
19
20        }
21        *:has(>.threshold-overlay){
22            position:relative
23        }
24        .threshold-overlay{
25            position: absolute;
26            top: 0;
27            left: 0;
28            width: 100%;
29            height: 100%;
30            border: 3px solid rgba(255, 0, 0, 0.3);
31            background-color: rgba(255, 0, 0, 0.1);
32            pointer-events: none;
33            border-radius: 8px;
34            padding:4px
35        }
36        
37        *[data-active="true"] .threshold-overlay{
38            background: rgba(0, 255, 0, 0.3);
39            border: 3px dashed green !important;
40        }
41        .threshold-marker{
42            --padding: 4px;
43            position: absolute;
44            left: var(--padding);
45            width: calc(100% - (var(--padding) * 2));
46            height: calc(var(--threshold) - (var(--padding) * 2));
47            outline: 2px dashed red;
48            outline-offset: -4px;
49            background: rgba(255, 0, 0, 0.3);
50            top: var(--padding);
51            border-radius: 8px;
52
53        }
54        .overlay-label {
55            position: absolute;
56            top: 0px;
57            width: max-content;
58            right: calc(100% + 8px);
59            font-size: 12px;
60            color: white;
61            background: rgba(0, 0, 0, 0.6);
62            padding: 2px 5px;
63            border-radius: 3px;
64            pointer-events: none;
65        }
66
67        .marker-label {
68            position: absolute;
69            top: 4px;
70            right: 4px;
71            font-size: 12px;
72            color: white;
73            background: rgba(0, 0, 0, 0.6);
74            padding: 2px 5px;
75            border-radius: 3px;
76            pointer-events: none;
77        }
78        .root_margin-label {
79            position: absolute;
80            top: 50%;
81            right: 4px;
82            font-size: 12px;
83            color: white;
84            background: rgba(0, 0, 0, 0.6);
85            padding: 2px 5px;
86            border-radius: 3px;
87            pointer-events: none;
88            z-index:500000;
89            transform: translateY(-50%);
90        }
91
92    `,document.head.appendChild(n)}