Changes for page Infrastructure, Services & Tools
Last modified by Veronika Kocher on Friday, 04 Sep 2026 14:45
From version 5.9
edited by Veronika Kocher
on Thursday, 03 Sep 2026 9:34
on Thursday, 03 Sep 2026 9:34
Change comment:
There is no comment for this version
To version 5.12
edited by Veronika Kocher
on Thursday, 03 Sep 2026 14:15
on Thursday, 03 Sep 2026 14:15
Change comment:
There is no comment for this version
Summary
-
Page properties (1 modified, 0 added, 0 removed)
Details
- Page properties
-
- Content
-
... ... @@ -44,7 +44,7 @@ 44 44 45 45 == Who is responsible? == 46 46 47 - {{html}}<!-- ARSN_TOPIC_ROUTING_V1 -->{{/html}}47 + 48 48 {{info title="Service routing"}} 49 49 **Primary specialist service(s):** IT & Digitalisation/ZID for digital systems; Facility Management for rooms/building services; the named specialist infrastructure owner for equipment, labs or other facilities. 50 50 ... ... @@ -69,23 +69,132 @@ 69 69 {{/html}} 70 70 71 71 {{html clean="false"}} 72 -<!-- SN_HORIZONTAL_BOX_HARMONIZER_START --> 73 -<style data-sn-horizontal-box-harmonizer="4"> 74 -[data-sn-equal-height-managed], 75 -[data-sn-first-section-aligned]{ 72 +<!-- SN_SERVICE_NAVIGATOR_MASTER_STYLE_START --> 73 + 74 +<style data-sn-service-navigator-master="1"> 75 +/* ========================================================= 76 + MASTER TYPOGRAPHY 77 + ========================================================= */ 78 +#xwikicontent h1, 79 +#xwikicontent h2, 80 +#xwikicontent h3, 81 +#xwikicontent h4, 82 +#xwikicontent h5, 83 +#xwikicontent h6, 84 +#xwikicontent .box-title, 85 +#xwikicontent [role="heading"], 86 +#xwikicontent h1 a, 87 +#xwikicontent h2 a, 88 +#xwikicontent h3 a, 89 +#xwikicontent h4 a, 90 +#xwikicontent h5 a, 91 +#xwikicontent h6 a, 92 +#xwikicontent .box-title a, 93 +#xwikicontent [role="heading"] a{ 94 + text-align:left!important; 95 + text-justify:auto!important; 96 + word-spacing:normal!important; 97 +} 98 + 99 +/* ========================================================= 100 + COMING SOON / IN VORBEREITUNG 101 + ========================================================= */ 102 +.sn-coming-soon-badge{ 103 + display:inline-block; 104 + vertical-align:middle; 105 + margin-left:10px; 106 + padding:4px 8px; 107 + border-radius:14px; 108 + border:1px solid #efd9cc; 109 + background:#fff4ee; 110 + color:#8a4d36; 111 + font-size:11px; 112 + font-weight:700; 113 + letter-spacing:.055em; 114 + line-height:1.2; 115 + white-space:nowrap; 116 +} 117 + 118 +/* ========================================================= 119 + NATIVE / DETAIL CALLOUT GEOMETRY 120 + Preserve existing backgrounds. 121 + ========================================================= */ 122 +#xwikicontent .arsn-info, 123 +#xwikicontent .dmp-info, 124 +#xwikicontent .ido-info, 125 +#xwikicontent .pp-info, 126 +#xwikicontent .infomessage{ 127 + box-sizing:border-box!important; 128 + border-left:4px solid #21b6d7!important; 129 + border-radius:8px; 130 + text-align:left!important; 131 + word-spacing:normal!important; 132 +} 133 + 134 +#xwikicontent .arsn-warn, 135 +#xwikicontent .dmp-warn, 136 +#xwikicontent .ido-warn, 137 +#xwikicontent .pp-warn, 138 +#xwikicontent .warn, 139 +#xwikicontent .warning, 140 +#xwikicontent .warningmessage, 141 +#xwikicontent .errormessage{ 142 + box-sizing:border-box!important; 143 + border-left:4px solid #e94b13!important; 144 + border-radius:8px; 145 + text-align:left!important; 146 + word-spacing:normal!important; 147 +} 148 + 149 +[data-sn-master-equal-height], 150 +[data-sn-master-first-row]{ 76 76 box-sizing:border-box; 77 77 } 153 + 154 +/* ========================================================= 155 + FULL-WIDTH THREE-LINE NUMBER / TITLE / SUBTITLE BLOCKS 156 + ========================================================= */ 157 +#xwikicontent .arsn-area-label[data-sn-three-line="1"]{ 158 + display:grid!important; 159 + grid-template-columns:minmax(0,1fr)!important; 160 + grid-auto-rows:auto!important; 161 + width:100%!important; 162 + max-width:none!important; 163 + box-sizing:border-box!important; 164 + justify-items:start!important; 165 + align-items:start!important; 166 + gap:2px!important; 167 + text-align:left!important; 168 + text-align-last:left!important; 169 + text-justify:auto!important; 170 + word-spacing:normal!important; 171 + white-space:normal!important; 172 +} 173 +#xwikicontent .arsn-area-label[data-sn-three-line="1"] > .arsn-area-number, 174 +#xwikicontent .arsn-area-label[data-sn-three-line="1"] > .sn-area-label-title, 175 +#xwikicontent .arsn-area-label[data-sn-three-line="1"] > .arsn-area-action{ 176 + display:block!important; 177 + width:100%!important; 178 + margin:0!important; 179 + text-align:left!important; 180 + text-align-last:left!important; 181 + text-justify:auto!important; 182 + word-spacing:normal!important; 183 + white-space:normal!important; 184 +} 78 78 </style> 79 -<script data-sn-horizontal-box-harmonizer="4"> 186 + 187 +<script data-sn-service-navigator-master="1"> 80 80 (function(){ 81 81 "use strict"; 82 82 191 + var PAGE_KIND="detail"; 192 + var PLACEHOLDER=true; 193 + var PLACEHOLDER_LABEL="COMING SOON"; 194 + 83 83 var MOBILE_MAX=767; 84 84 var ROW_TOLERANCE=6; 85 - var MIN_W=150; 86 - var MIN_H=36; 87 - var MAX_PARENT_CHILDREN=16; 88 - var SEARCH_DEPTH=5; 197 + var RESIZE_DEBOUNCE=220; 89 89 90 90 var root= 91 91 document.getElementById("xwikicontent")|| ... ... @@ -95,93 +95,105 @@ 95 95 96 96 if(!root)return; 97 97 98 - var heightManaged=new Set(); 99 - var sectionManaged=new Set(); 100 - var originalMinHeight=new WeakMap(); 101 - var originalMarginTop=new WeakMap(); 102 - var raf=0; 207 + var managedHeight=new Set(); 208 + var managedMargin=new Set(); 209 + var originalHeight=new WeakMap(); 210 + var originalMargin=new WeakMap(); 103 103 104 - function num(v){ 105 - var n=parseFloat(v); 106 - return Number.isFinite(n)?n:0; 107 - } 212 + var resizeTimer=0; 213 + var running=false; 108 108 109 - function visible(el,minW,minH){ 110 - if(!el||el.nodeType!==1)return false; 111 - 112 - var s=getComputedStyle(el); 113 - 114 - if( 115 - s.display==="none"|| 116 - s.visibility==="hidden"|| 117 - Number(s.opacity)===0 118 - ){ 119 - return false; 215 + var THEMES=[ 216 + { 217 + name:"BLUE", 218 + accent:"#21b6d7", 219 + bg:"#eaf7fb", 220 + text:"#315d68", 221 + labels:[ 222 + "HIER STARTEN", 223 + "ENTSCHEIDEN", 224 + "ÜBERPRÜFEN & ANPASSEN", 225 + "START HERE", 226 + "DECIDE", 227 + "REVIEW & ADAPT" 228 + ] 229 + }, 230 + { 231 + name:"RED", 232 + accent:"#e94b13", 233 + bg:"#fff1ec", 234 + text:"#8a4d36", 235 + labels:[ 236 + "PLANEN & ORGANISIEREN", 237 + "ORGANISIEREN & DOKUMENTIEREN", 238 + "PUBLIZIEREN & PRÄSENTIEREN", 239 + "PLAN & ORGANISE", 240 + "PLAN & ORGANIZE", 241 + "ORGANISE & DOCUMENT", 242 + "ORGANIZE & DOCUMENT", 243 + "PUBLISH & PRESENT" 244 + ] 245 + }, 246 + { 247 + name:"YELLOW", 248 + accent:"#f0aa00", 249 + bg:"#fff8e7", 250 + text:"#785b17", 251 + labels:[ 252 + "SCHÜTZEN & KLÄREN", 253 + "STANDARDISIEREN & IDENTIFIZIEREN", 254 + "ÖFFNEN, NACHNUTZEN & AUFFINDBAR MACHEN", 255 + "PROTECT & CLARIFY", 256 + "STANDARDISE & IDENTIFY", 257 + "STANDARDIZE & IDENTIFY", 258 + "OPEN, REUSE & MAKE FINDABLE" 259 + ] 260 + }, 261 + { 262 + name:"GREEN", 263 + accent:"#38b76a", 264 + bg:"#edf9f1", 265 + text:"#3f7451", 266 + labels:[ 267 + "INFRASTRUKTUR EINRICHTEN", 268 + "INFRASTRUKTUR & ZUSAMMENARBEIT EINRICHTEN", 269 + "SPEICHERN & ZUGRIFF STEUERN", 270 + "REPOSITORIUM, ERHALTEN & ÜBERGEBEN", 271 + "SET UP INFRASTRUCTURE", 272 + "SET UP INFRASTRUCTURE & COLLABORATION", 273 + "STORE & CONTROL ACCESS", 274 + "REPOSITORY, PRESERVE & HAND OVER" 275 + ] 120 120 } 277 + ]; 121 121 122 - var r=el.getBoundingClientRect(); 123 - 124 - return ( 125 - r.width>=(minW||1)&& 126 - r.height>=(minH||1) 127 - ); 279 + function num(value){ 280 + var n=parseFloat(value); 281 + return Number.isFinite(n)?n:0; 128 128 } 129 129 130 - function excluded(el){ 131 - return ( 132 - !el.matches|| 133 - el.matches( 134 - "button,input,select,textarea,option,label,img,svg,canvas,table,thead,tbody,tfoot,tr,td,th,summary,script,style,noscript,template,.btn,.chip,[role=button]" 135 - ) 136 - ); 284 + function norm(value){ 285 + return String(value||"") 286 + .replace(/\s+/g," ") 287 + .trim() 288 + .toUpperCase(); 137 137 } 138 138 139 - function namedLikeBox(el){ 140 - var c= 141 - typeof el.className==="string" 142 - ? el.className 143 - : ""; 291 + function visible(el){ 292 + if(!el||el.nodeType!==1)return false; 144 144 145 - r eturn/(^|[s_-])(box|card|tile|panel|role|check|service|source|call|area|detail|resource|topic|warn|info)([s_-]|$)/i.test(c);146 - }294 + var style=getComputedStyle(el); 295 + var rect=el.getBoundingClientRect(); 147 147 148 - function boxLike(el){ 149 - if(!visible(el,MIN_W,MIN_H)||excluded(el))return false; 150 - 151 - var s=getComputedStyle(el); 152 - var r=el.getBoundingClientRect(); 153 - 154 - var border= 155 - num(s.borderTopWidth)+ 156 - num(s.borderRightWidth)+ 157 - num(s.borderBottomWidth)+ 158 - num(s.borderLeftWidth); 159 - 160 - var radius=Math.max( 161 - num(s.borderTopLeftRadius), 162 - num(s.borderTopRightRadius), 163 - num(s.borderBottomLeftRadius), 164 - num(s.borderBottomRightRadius) 165 - ); 166 - 167 - var bg= 168 - s.backgroundColor&& 169 - s.backgroundColor!=="rgba(0, 0, 0, 0)"&& 170 - s.backgroundColor!=="transparent"; 171 - 172 - var shadow= 173 - s.boxShadow&& 174 - s.boxShadow!=="none"; 175 - 176 176 return ( 177 - namedLikeBox(el)||178 - b order>=1||179 - (bg&&radius>=3)||180 - (shadow&&r.width>=180)298 + style.display!=="none"&& 299 + style.visibility!=="hidden"&& 300 + rect.width>20&& 301 + rect.height>4 181 181 ); 182 182 } 183 183 184 - function save Original(el,map,property){305 + function saveStyle(el,map,property){ 185 185 if(map.has(el))return; 186 186 187 187 map.set(el,{ ... ... @@ -190,7 +190,7 @@ 190 190 }); 191 191 } 192 192 193 - function restore Original(el,map,property){314 + function restoreStyle(el,map,property){ 194 194 var original=map.get(el); 195 195 196 196 if(original&&original.value){ ... ... @@ -204,247 +204,470 @@ 204 204 } 205 205 } 206 206 207 - function reset(){ 208 - heightManaged.forEach(function(el){209 - restore Original(328 + function resetRuntime(){ 329 + managedHeight.forEach(function(el){ 330 + restoreStyle( 210 210 el, 211 - original MinHeight,332 + originalHeight, 212 212 "min-height" 213 213 ); 214 - 215 215 el.removeAttribute( 216 - "data-sn-equal-height -managed"336 + "data-sn-master-equal-height" 217 217 ); 218 218 }); 219 219 220 - sectionManaged.forEach(function(el){221 - restore Original(340 + managedMargin.forEach(function(el){ 341 + restoreStyle( 222 222 el, 223 - originalMargin Top,343 + originalMargin, 224 224 "margin-top" 225 225 ); 226 - 227 227 el.removeAttribute( 228 - "data-sn-first- section-aligned"347 + "data-sn-master-first-row" 229 229 ); 230 230 }); 231 231 232 - heightManaged.clear();233 - sectionManaged.clear();351 + managedHeight.clear(); 352 + managedMargin.clear(); 234 234 } 235 235 236 - function pickTarget(child){237 - if(!visible(child,MIN_W,MIN_H))return null;355 + function themeFor(text){ 356 + var value=norm(text); 238 238 239 - if(boxLike(child)){ 240 - return child; 358 + for(var i=0;i<THEMES.length;i++){ 359 + for(var j=0;j<THEMES[i].labels.length;j++){ 360 + var label=THEMES[i].labels[j]; 361 + 362 + if( 363 + value===label|| 364 + value.indexOf(label+" ")===0|| 365 + value.indexOf(label+" -")===0|| 366 + value.indexOf(label+" ·")===0 367 + ){ 368 + return THEMES[i]; 369 + } 370 + } 241 241 } 242 242 243 - varcr=child.getBoundingClientRect();244 - var q=[];373 + return null; 374 + } 245 245 246 - Array.from(child.children||[]).forEach(function(el){ 247 - q.push({el:el,depth:1}); 376 + /* ======================================================= 377 + BORDERLESS FILLED RED/ORANGE CTA BUTTONS 378 + ======================================================= */ 379 + 380 + function colourDistance(a,b){ 381 + return Math.sqrt( 382 + Math.pow(a[0]-b[0],2)+ 383 + Math.pow(a[1]-b[1],2)+ 384 + Math.pow(a[2]-b[2],2) 385 + ); 386 + } 387 + 388 + function makeFilledRedOrangeCTAsBorderless(){ 389 + var RED_ORANGE=[233,75,19]; 390 + 391 + Array.from( 392 + root.querySelectorAll( 393 + 'a,button,[role="button"],input[type="submit"],input[type="button"]' 394 + ) 395 + ).forEach(function(el){ 396 + if(!visible(el))return; 397 + 398 + var style=getComputedStyle(el); 399 + var rgb=parseRGB(style.backgroundColor); 400 + 401 + if(!rgb)return; 402 + 403 + if( 404 + colourDistance( 405 + rgb, 406 + RED_ORANGE 407 + )>55 408 + ){ 409 + return; 410 + } 411 + 412 + var rect=el.getBoundingClientRect(); 413 + 414 + if( 415 + rect.width<80|| 416 + rect.height<24 417 + ){ 418 + return; 419 + } 420 + 421 + el.style.setProperty( 422 + "border", 423 + "none", 424 + "important" 425 + ); 426 + 427 + el.style.setProperty( 428 + "border-left", 429 + "none", 430 + "important" 431 + ); 432 + 433 + el.style.setProperty( 434 + "border-top", 435 + "none", 436 + "important" 437 + ); 438 + 439 + el.style.setProperty( 440 + "border-right", 441 + "none", 442 + "important" 443 + ); 444 + 445 + el.style.setProperty( 446 + "border-bottom", 447 + "none", 448 + "important" 449 + ); 450 + 451 + el.style.setProperty( 452 + "box-shadow", 453 + "none", 454 + "important" 455 + ); 248 248 }); 457 + } 249 249 250 - var best=null; 251 - var bestScore=-Infinity; 459 + /* ======================================================= 460 + FULL-WIDTH THREE-LINE AREA LABELS 461 + ======================================================= */ 252 252 253 - while(q.length){ 254 - var item=q.shift(); 255 - var el=item.el; 463 + function compactText(value){ 464 + return String(value||"") 465 + .replace(/\s+/g," ") 466 + .trim(); 467 + } 256 256 257 - if(!visible(el,MIN_W,MIN_H))continue; 469 + function makeThreeLineAreaLabels(){ 470 + Array.from( 471 + root.querySelectorAll( 472 + ".arsn-area-label" 473 + ) 474 + ).forEach(function(label){ 475 + if( 476 + label.getAttribute( 477 + "data-sn-three-line" 478 + )==="1" 479 + ){ 480 + return; 481 + } 258 258 259 - var r=el.getBoundingClientRect(); 483 + var number= 484 + label.querySelector( 485 + ":scope > .arsn-area-number" 486 + ); 260 260 488 + var action= 489 + label.querySelector( 490 + ":scope > .arsn-area-action" 491 + ); 492 + 261 261 if( 262 - r .width>=cr.width*.68&&263 - boxLike(el)494 + !number|| 495 + !action 264 264 ){ 265 - var widthFit= 266 - 1-Math.min( 267 - 1, 268 - Math.abs(cr.width-r.width)/ 269 - Math.max(1,cr.width) 270 - ); 497 + return; 498 + } 271 271 272 - var topFit= 273 - 1-Math.min( 274 - 1, 275 - Math.abs(cr.top-r.top)/100 276 - ); 500 + var clone= 501 + label.cloneNode(true); 277 277 278 - var score= 279 - widthFit*6+ 280 - topFit*3+ 281 - Math.min(r.height,900)/450+ 282 - Math.min(r.width*r.height,900000)/900000; 503 + var cloneNumber= 504 + clone.querySelector( 505 + ":scope > .arsn-area-number" 506 + ); 283 283 284 - if(score>bestScore){ 285 - best=el; 286 - bestScore=score; 287 - } 508 + var cloneAction= 509 + clone.querySelector( 510 + ":scope > .arsn-area-action" 511 + ); 512 + 513 + if(cloneNumber){ 514 + cloneNumber.remove(); 288 288 } 289 289 290 - if(item.depth<SEARCH_DEPTH){ 291 - Array.from(el.children||[]).forEach(function(next){ 292 - q.push({ 293 - el:next, 294 - depth:item.depth+1 295 - }); 296 - }); 517 + if(cloneAction){ 518 + cloneAction.remove(); 297 297 } 298 - } 299 299 300 - return best; 301 - } 521 + var titleText= 522 + compactText( 523 + clone.textContent 524 + ); 302 302 303 - function groupsByVisualRow(entries){ 304 - var groups=[]; 526 + if(!titleText){ 527 + return; 528 + } 305 305 306 - entries 307 - .slice() 308 - .sort(function(a,b){ 309 - return ( 310 - a.rect.top-b.rect.top|| 311 - a.rect.left-b.rect.left 530 + var numberNode= 531 + number.cloneNode(true); 532 + 533 + var actionNode= 534 + action.cloneNode(true); 535 + 536 + var titleNode= 537 + document.createElement( 538 + "span" 312 312 ); 313 - }) 314 - .forEach(function(entry){ 315 - var group=null; 316 316 317 - for(var i=0;i<groups.length;i++){ 318 - if( 319 - Math.abs( 320 - groups[i].top- 321 - entry.rect.top 322 - )<=ROW_TOLERANCE 323 - ){ 324 - group=groups[i]; 325 - break; 326 - } 327 - } 541 + titleNode.className= 542 + "sn-area-label-title"; 328 328 329 - if(!group){ 330 - group={ 331 - top:entry.rect.top, 332 - entries:[] 333 - }; 334 - groups.push(group); 335 - } 544 + titleNode.textContent= 545 + titleText; 336 336 337 - group.entries.push(entry); 338 - }); 547 + while(label.firstChild){ 548 + label.removeChild( 549 + label.firstChild 550 + ); 551 + } 339 339 340 - return groups; 553 + label.appendChild( 554 + numberNode 555 + ); 556 + 557 + label.appendChild( 558 + titleNode 559 + ); 560 + 561 + label.appendChild( 562 + actionNode 563 + ); 564 + 565 + label.setAttribute( 566 + "data-sn-three-line", 567 + "1" 568 + ); 569 + 570 + var head= 571 + label.closest( 572 + ".arsn-area-head" 573 + ); 574 + 575 + if(head){ 576 + head.style.setProperty( 577 + "width", 578 + "100%", 579 + "important" 580 + ); 581 + 582 + head.style.setProperty( 583 + "max-width", 584 + "100%", 585 + "important" 586 + ); 587 + 588 + head.style.setProperty( 589 + "box-sizing", 590 + "border-box", 591 + "important" 592 + ); 593 + } 594 + }); 341 341 } 342 342 343 - function validHorizontalGroup(group){ 344 - if(group.entries.length<2)return false; 597 + /* ======================================================= 598 + PLACEHOLDER BADGE 599 + ======================================================= */ 345 345 346 - var lefts= 347 - group.entries 348 - .map(function(e){return e.rect.left;}) 349 - .sort(function(a,b){return a-b;}); 601 + function applyPlaceholderBadge(){ 602 + if(!PLACEHOLDER)return; 350 350 351 351 if( 352 - lefts[lefts.length-1]-353 - lefts[0]<354 - 80605 + document.querySelector( 606 + ".sn-coming-soon-badge" 607 + ) 355 355 ){ 356 - return false;609 + return; 357 357 } 358 358 359 - var widths= 360 - group.entries 361 - .map(function(e){return e.rect.width;}) 362 - .filter(function(w){return w>0;}); 612 + var title= 613 + document.querySelector( 614 + "#document-title" 615 + )|| 616 + document.querySelector( 617 + "h1" 618 + ); 363 363 364 - if( widths.length<2)returnfalse;620 + if(!title)return; 365 365 366 - var minWidth=Math.min.apply(Math,widths); 367 - var maxWidth=Math.max.apply(Math,widths); 622 + var badge= 623 + document.createElement( 624 + "span" 625 + ); 368 368 369 - return ( 370 - maxWidth/ 371 - Math.max(1,minWidth)<= 372 - 1.9 627 + badge.className= 628 + "sn-coming-soon-badge"; 629 + 630 + badge.textContent= 631 + PLACEHOLDER_LABEL; 632 + 633 + badge.setAttribute( 634 + "aria-label", 635 + PLACEHOLDER_LABEL 373 373 ); 374 - } 375 375 376 - function normalizeText(text){ 377 - return String(text||"") 378 - .replace(/s+/g," ") 379 - .trim() 380 - .toUpperCase(); 638 + title.appendChild( 639 + badge 640 + ); 381 381 } 382 382 383 - function exactKnownFirstSection(el){ 384 - var text=normalizeText(el.textContent); 643 + /* ======================================================= 644 + DETAIL PAGE OWN-ACCENT PROPAGATION 645 + ======================================================= */ 385 385 386 - return ( 387 - text==="HIER STARTEN"|| 388 - text==="ORGANISIEREN & DOKUMENTIEREN"|| 389 - text==="ENTSCHEIDEN"|| 390 - text==="START HERE"|| 391 - text==="GET STARTED"|| 392 - text==="ORGANISE & DOCUMENT"|| 393 - text==="ORGANIZE & DOCUMENT"|| 394 - text==="DECIDE" 647 + function parseRGB(value){ 648 + var match=String(value||"").match( 649 + /rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)/i 395 395 ); 651 + 652 + if(!match)return null; 653 + 654 + return [ 655 + Number(match[1]), 656 + Number(match[2]), 657 + Number(match[3]) 658 + ]; 396 396 } 397 397 398 - function visuallyFirstSectionBar(card){ 399 - var cardRect=card.getBoundingClientRect(); 400 - var candidates=[]; 661 + function distance(a,b){ 662 + return Math.sqrt( 663 + Math.pow(a[0]-b[0],2)+ 664 + Math.pow(a[1]-b[1],2)+ 665 + Math.pow(a[2]-b[2],2) 666 + ); 667 + } 401 401 669 + function paletteMatch(cssColor){ 670 + var rgb=parseRGB(cssColor); 671 + 672 + if(!rgb)return null; 673 + 674 + var palette=[ 675 + {hex:"#21b6d7",rgb:[33,182,215]}, 676 + {hex:"#e94b13",rgb:[233,75,19]}, 677 + {hex:"#f0aa00",rgb:[240,170,0]}, 678 + {hex:"#38b76a",rgb:[56,183,106]} 679 + ]; 680 + 681 + var best=null; 682 + var bestDistance=Infinity; 683 + 684 + palette.forEach(function(item){ 685 + var d=distance(rgb,item.rgb); 686 + 687 + if(d<bestDistance){ 688 + best=item; 689 + bestDistance=d; 690 + } 691 + }); 692 + 693 + return bestDistance<=30 694 + ?best 695 + :null; 696 + } 697 + 698 + function propagateDetailAccents(){ 699 + if(PAGE_KIND!=="detail")return; 700 + 402 402 Array.from( 403 - card.querySelectorAll( 404 - "div,p,span,strong,h3,h4,h5,h6" 702 + root.querySelectorAll( 703 + ".arsn-call,.dmp-call,.ido-call,.pp-call,"+ 704 + ".arsn-source,.dmp-source,.ido-source,.pp-source" 405 405 ) 406 406 ).forEach(function(el){ 407 - if(!visible(el,20,6))return; 408 - if(excluded(el))return; 707 + if(!visible(el))return; 409 409 410 - var r=el.getBoundingClientRect(); 411 - var relativeTop=r.top-cardRect.top; 709 + var style=getComputedStyle(el); 412 412 413 413 if( 414 - relativeTop<45|| 415 - relativeTop>cardRect.height*.72 712 + num(style.borderTopWidth)>=2 416 416 ){ 417 - return; 714 + var match= 715 + paletteMatch( 716 + style.borderTopColor 717 + ); 718 + 719 + if(match){ 720 + el.style.setProperty( 721 + "border-left", 722 + "4px solid "+match.hex, 723 + "important" 724 + ); 725 + } 418 418 } 727 + }); 419 419 420 - var widthRatio= 421 - r.width/ 422 - Math.max(1,cardRect.width); 729 + // Warning families: explicit safety override. 730 + Array.from( 731 + root.querySelectorAll( 732 + ".arsn-warn,.dmp-warn,.ido-warn,.pp-warn,"+ 733 + ".warn,.warning,.warningmessage,.errormessage" 734 + ) 735 + ).forEach(function(el){ 736 + if(!visible(el))return; 423 423 424 - if( 425 - widthRatio<.55|| 426 - widthRatio>1.05|| 427 - r.height>54 428 - ){ 429 - return; 430 - } 738 + el.style.setProperty( 739 + "border-left", 740 + "4px solid #e94b13", 741 + "important" 742 + ); 743 + }); 431 431 432 - var text=normalizeText(el.textContent); 745 + // Info families: explicit orientation override. 746 + Array.from( 747 + root.querySelectorAll( 748 + ".arsn-info,.dmp-info,.ido-info,.pp-info,.infomessage" 749 + ) 750 + ).forEach(function(el){ 751 + if(!visible(el))return; 433 433 434 - if( 435 - text.length<2|| 436 - text.length>90 437 - ){ 438 - return; 439 - } 753 + el.style.setProperty( 754 + "border-left", 755 + "4px solid #21b6d7", 756 + "important" 757 + ); 758 + }); 759 + } 440 440 441 - var style=getComputedStyle(el); 761 + /* ======================================================= 762 + OVERVIEW SEMANTIC THEME PALETTE 763 + ======================================================= */ 442 442 443 - var bg= 444 - style.backgroundColor&& 445 - style.backgroundColor!=="rgba(0, 0, 0, 0)"&& 446 - style.backgroundColor!=="transparent"; 765 + function smallestThemeHeaders(){ 766 + return Array.from( 767 + root.querySelectorAll( 768 + "div,span,p,strong,h3,h4,h5,h6" 769 + ) 770 + ).filter(function(el){ 771 + if(!visible(el))return false; 772 + if(!themeFor(el.textContent))return false; 447 447 774 + return !Array.from( 775 + el.children||[] 776 + ).some(function(child){ 777 + return !!themeFor( 778 + child.textContent 779 + ); 780 + }); 781 + }); 782 + } 783 + 784 + function findOverviewCard(header){ 785 + var node=header.parentElement; 786 + var candidates=[]; 787 + 788 + while(node&&node!==root){ 789 + var rect=node.getBoundingClientRect(); 790 + var style=getComputedStyle(node); 791 + 448 448 var border= 449 449 num(style.borderTopWidth)+ 450 450 num(style.borderRightWidth)+ ... ... @@ -451,315 +451,677 @@ 451 451 num(style.borderBottomWidth)+ 452 452 num(style.borderLeftWidth); 453 453 454 - var mostlyUpper= 455 - text.length>=3&& 456 - text===text.toUpperCase(); 457 - 458 - var exact=exactKnownFirstSection(el); 459 - 460 - var score= 461 - (exact?20:0)+ 462 - (bg?6:0)+ 463 - (border>=1?2:0)+ 464 - (mostlyUpper?4:0)+ 465 - (num(style.fontWeight)>=600?1:0); 466 - 467 - if(score>=7){ 468 - candidates.push({ 469 - el:el, 470 - relativeTop:relativeTop, 471 - width:r.width, 472 - score:score 473 - }); 798 + if( 799 + rect.width>=220&& 800 + rect.width<=800&& 801 + rect.height>=120&& 802 + border>=1 803 + ){ 804 + candidates.push(node); 474 474 } 475 - }); 476 476 807 + node=node.parentElement; 808 + } 809 + 477 477 if(!candidates.length)return null; 478 478 479 479 candidates.sort(function(a,b){ 480 - if(a.score!==b.score)return b.score-a.score; 481 - if(Math.abs(a.relativeTop-b.relativeTop)>3){ 482 - return a.relativeTop-b.relativeTop; 483 - } 484 - return b.width-a.width; 813 + return ( 814 + b.getBoundingClientRect().height- 815 + a.getBoundingClientRect().height 816 + ); 485 485 }); 486 486 487 - // For exact known labels always prefer the earliest exact match. 488 - var exacts=candidates.filter(function(c){ 489 - return exactKnownFirstSection(c.el); 490 - }); 819 + return candidates[0]; 820 + } 491 491 492 - if(exacts.length){ 493 - exacts.sort(function(a,b){ 494 - return a.relativeTop-b.relativeTop||b.width-a.width; 495 - }); 496 - return exacts[0].el; 497 - } 822 + function rowCandidates(link,card){ 823 + var result=[]; 824 + var cardRect= 825 + card.getBoundingClientRect(); 498 498 499 - // Generic fallback: earliest high-confidence bar. 500 - candidates.sort(function(a,b){ 501 - return a.relativeTop-b.relativeTop||b.score-a.score||b.width-a.width; 502 - }); 827 + var node=link; 503 503 504 - return candidates[0].el; 505 - } 829 + while(node&&node!==card){ 830 + if(visible(node)){ 831 + var rect= 832 + node.getBoundingClientRect(); 506 506 507 - function alignFirstSections(cards){ 508 - var rows= 509 - cards.map(function(card){ 510 - var bar= 511 - visuallyFirstSectionBar(card); 834 + if( 835 + rect.height<=105&& 836 + rect.width>= 837 + cardRect.width*.50&& 838 + rect.width<= 839 + cardRect.width*1.03 840 + ){ 841 + result.push(node); 842 + } 843 + } 512 512 513 - if(!bar)return null; 845 + node=node.parentElement; 846 + } 514 514 515 - varcardRect=516 - card.getBoundingClientRect();848 + return result; 849 + } 517 517 518 - var barRect= 519 - bar.getBoundingClientRect(); 851 + function chooseOuterRow( 852 + candidates, 853 + link 854 + ){ 855 + if(!candidates.length){ 856 + return link; 857 + } 520 520 521 - return {522 - card:card,523 - bar:bar,524 - relativeTop:525 - barRect.top-cardRect.top,526 - label:527 - normalizeText(bar.textContent)528 - };859 + var bordered= 860 + candidates.filter(function(el){ 861 + return ( 862 + num( 863 + getComputedStyle(el) 864 + .borderLeftWidth 865 + )>=1 866 + ); 529 529 }); 530 530 531 - // Conservative: only align when every card in the horizontal row 532 - // has a reliable first section bar. 533 - if( 534 - rows.some(function(row){ 535 - return !row; 536 - }) 537 - ){ 538 - return null; 869 + var pool= 870 + bordered.length 871 + ?bordered 872 + :candidates; 873 + 874 + pool.sort(function(a,b){ 875 + var ar= 876 + a.getBoundingClientRect(); 877 + 878 + var br= 879 + b.getBoundingClientRect(); 880 + 881 + return ( 882 + ar.left-br.left|| 883 + br.width-ar.width 884 + ); 885 + }); 886 + 887 + return pool[0]||link; 888 + } 889 + 890 + function applyOverviewPalette(){ 891 + if(PAGE_KIND!=="overview"){ 892 + return []; 539 539 } 540 540 541 - var targetTop= 542 - Math.max.apply( 543 - Math, 544 - rows.map(function(row){ 545 - return row.relativeTop; 895 + var headers= 896 + smallestThemeHeaders() 897 + .map(function(el){ 898 + return { 899 + el:el, 900 + theme: 901 + themeFor( 902 + el.textContent 903 + ), 904 + card: 905 + findOverviewCard( 906 + el 907 + ) 908 + }; 546 546 }) 547 - ); 910 + .filter(function(row){ 911 + return !!row.card; 912 + }); 548 548 549 - rows.forEach(function(row){ 550 - var delta= 551 - targetTop- 552 - row.relativeTop; 914 + var unique=[]; 915 + var seenHeaders=new Set(); 553 553 554 - if(delta<=1)return; 917 + headers.forEach(function(row){ 918 + var key= 919 + row.theme.name+ 920 + "|"+ 921 + Math.round( 922 + row.card 923 + .getBoundingClientRect() 924 + .left 925 + )+ 926 + "|"+ 927 + Math.round( 928 + row.el 929 + .getBoundingClientRect() 930 + .top 931 + ); 555 555 556 - saveOriginal( 557 - row.bar, 558 - originalMarginTop, 559 - "margin-top" 933 + if(!seenHeaders.has(key)){ 934 + seenHeaders.add(key); 935 + unique.push(row); 936 + } 937 + }); 938 + 939 + unique.forEach(function(row){ 940 + var headerRect= 941 + row.el 942 + .getBoundingClientRect(); 943 + 944 + row.el.style.setProperty( 945 + "background", 946 + row.theme.bg, 947 + "important" 560 560 ); 561 561 562 - var currentMargin= 563 - num( 564 - getComputedStyle( 565 - row.bar 566 - ).marginTop 567 - ); 950 + row.el.style.setProperty( 951 + "color", 952 + row.theme.text, 953 + "important" 954 + ); 568 568 569 - row.bar.style.setProperty( 570 - "margin-top", 571 - ( 572 - currentMargin+ 573 - delta 574 - )+"px" 956 + row.el.style.setProperty( 957 + "text-align", 958 + "left", 959 + "important" 575 575 ); 576 576 577 - row.bar.setAttribute( 578 - "data-sn-first-section-aligned", 579 - "4" 962 + row.el.style.setProperty( 963 + "word-spacing", 964 + "normal", 965 + "important" 580 580 ); 581 581 582 - sectionManaged.add(row.bar); 968 + var later= 969 + unique 970 + .filter(function(other){ 971 + return ( 972 + other.card===row.card&& 973 + other.el 974 + .getBoundingClientRect() 975 + .top> 976 + headerRect.top+2 977 + ); 978 + }) 979 + .sort(function(a,b){ 980 + return ( 981 + a.el 982 + .getBoundingClientRect() 983 + .top- 984 + b.el 985 + .getBoundingClientRect() 986 + .top 987 + ); 988 + }); 989 + 990 + var stopTop= 991 + later.length 992 + ?later[0].el 993 + .getBoundingClientRect() 994 + .top 995 + :Infinity; 996 + 997 + Array.from( 998 + row.card.querySelectorAll("a") 999 + ).forEach(function(link){ 1000 + if(!visible(link))return; 1001 + 1002 + var rect= 1003 + link.getBoundingClientRect(); 1004 + 1005 + if( 1006 + rect.top<= 1007 + headerRect.bottom-2|| 1008 + rect.top>= 1009 + stopTop-2 1010 + ){ 1011 + return; 1012 + } 1013 + 1014 + var candidates= 1015 + rowCandidates( 1016 + link, 1017 + row.card 1018 + ); 1019 + 1020 + var target= 1021 + chooseOuterRow( 1022 + candidates, 1023 + link 1024 + ); 1025 + 1026 + candidates.forEach(function(el){ 1027 + el.style.setProperty( 1028 + "border-left", 1029 + "0 solid transparent", 1030 + "important" 1031 + ); 1032 + }); 1033 + 1034 + target.style.setProperty( 1035 + "border-left", 1036 + "3px solid "+ 1037 + row.theme.accent, 1038 + "important" 1039 + ); 1040 + 1041 + target.style.setProperty( 1042 + "box-sizing", 1043 + "border-box", 1044 + "important" 1045 + ); 1046 + }); 583 583 }); 584 584 585 - return { 586 - labels: 587 - rows.map(function(row){ 588 - return row.label; 589 - }), 590 - targetRelativeTop: 591 - Math.round(targetTop) 592 - }; 1049 + return unique; 593 593 } 594 594 595 - function applyGroup(group){ 596 - if(!validHorizontalGroup(group)){ 597 - return null; 1052 + /* ======================================================= 1053 + OVERVIEW CARD HEIGHT + FIRST THEMATIC ROW 1054 + ======================================================= */ 1055 + 1056 + function alignOverviewCards(headers){ 1057 + if( 1058 + PAGE_KIND!=="overview"|| 1059 + window.innerWidth<=MOBILE_MAX 1060 + ){ 1061 + return; 598 598 } 599 599 600 600 var cards=[]; 601 601 var seen=new Set(); 602 602 603 - group.entries.forEach(function(entry){604 - if(!seen.has( entry.target)){605 - seen.add( entry.target);606 - cards.push( entry.target);1067 + headers.forEach(function(row){ 1068 + if(!seen.has(row.card)){ 1069 + seen.add(row.card); 1070 + cards.push(row.card); 607 607 } 608 608 }); 609 609 610 - if(cards.length<2)return null; 1074 + if(cards.length<2){ 1075 + return; 1076 + } 611 611 612 - varfirstSection=613 - alignFirstSections(cards);1078 + // Group cards by actual top position. 1079 + var groups=[]; 614 614 615 - // The section alignment can change natural card heights. 616 - // Measure only afterwards. 617 - var maxHeight=0; 618 - 619 619 cards.forEach(function(card){ 620 - maxHeight=Math.max( 621 - maxHeight, 622 - card.getBoundingClientRect().height 623 - ); 1082 + var top= 1083 + card.getBoundingClientRect().top; 1084 + 1085 + var group=null; 1086 + 1087 + for(var i=0;i<groups.length;i++){ 1088 + if( 1089 + Math.abs( 1090 + groups[i].top-top 1091 + )<=ROW_TOLERANCE 1092 + ){ 1093 + group=groups[i]; 1094 + break; 1095 + } 1096 + } 1097 + 1098 + if(!group){ 1099 + group={ 1100 + top:top, 1101 + cards:[] 1102 + }; 1103 + groups.push(group); 1104 + } 1105 + 1106 + group.cards.push(card); 624 624 }); 625 625 626 - maxHeight=Math.ceil(maxHeight); 1109 + groups.forEach(function(group){ 1110 + if(group.cards.length<2){ 1111 + return; 1112 + } 627 627 628 - if(maxHeight<MIN_H)return null; 1114 + var firstHeaders= 1115 + group.cards.map(function(card){ 1116 + var candidates= 1117 + headers 1118 + .filter(function(row){ 1119 + return row.card===card; 1120 + }) 1121 + .sort(function(a,b){ 1122 + return ( 1123 + a.el 1124 + .getBoundingClientRect() 1125 + .top- 1126 + b.el 1127 + .getBoundingClientRect() 1128 + .top 1129 + ); 1130 + }); 629 629 630 - cards.forEach(function(card){ 631 - saveOriginal( 632 - card, 633 - originalMinHeight, 634 - "min-height" 635 - ); 1132 + return candidates.length 1133 + ?candidates[0] 1134 + :null; 1135 + }); 636 636 637 - card.style.setProperty( 638 - "min-height", 639 - maxHeight+"px" 640 - ); 1137 + if( 1138 + !firstHeaders.some(function(row){ 1139 + return !row; 1140 + }) 1141 + ){ 1142 + var targetTop= 1143 + Math.max.apply( 1144 + Math, 1145 + firstHeaders.map(function(row){ 1146 + return ( 1147 + row.el 1148 + .getBoundingClientRect() 1149 + .top- 1150 + row.card 1151 + .getBoundingClientRect() 1152 + .top 1153 + ); 1154 + }) 1155 + ); 641 641 642 - card.setAttribute( 643 - "data-sn-equal-height-managed", 644 - "4" 645 - ); 1157 + firstHeaders.forEach(function(row){ 1158 + var relativeTop= 1159 + row.el 1160 + .getBoundingClientRect() 1161 + .top- 1162 + row.card 1163 + .getBoundingClientRect() 1164 + .top; 646 646 647 - heightManaged.add(card);648 - });1166 + var delta= 1167 + targetTop-relativeTop; 649 649 650 - return { 651 - cards:cards.length, 652 - height:maxHeight, 653 - firstSection:firstSection 654 - }; 1169 + if(delta>1){ 1170 + saveStyle( 1171 + row.el, 1172 + originalMargin, 1173 + "margin-top" 1174 + ); 1175 + 1176 + var current= 1177 + num( 1178 + getComputedStyle( 1179 + row.el 1180 + ).marginTop 1181 + ); 1182 + 1183 + row.el.style.setProperty( 1184 + "margin-top", 1185 + ( 1186 + current+delta 1187 + )+"px" 1188 + ); 1189 + 1190 + row.el.setAttribute( 1191 + "data-sn-master-first-row", 1192 + "1" 1193 + ); 1194 + 1195 + managedMargin.add( 1196 + row.el 1197 + ); 1198 + } 1199 + }); 1200 + } 1201 + 1202 + var maxHeight=0; 1203 + 1204 + group.cards.forEach(function(card){ 1205 + maxHeight= 1206 + Math.max( 1207 + maxHeight, 1208 + card 1209 + .getBoundingClientRect() 1210 + .height 1211 + ); 1212 + }); 1213 + 1214 + maxHeight= 1215 + Math.ceil(maxHeight); 1216 + 1217 + group.cards.forEach(function(card){ 1218 + saveStyle( 1219 + card, 1220 + originalHeight, 1221 + "min-height" 1222 + ); 1223 + 1224 + card.style.setProperty( 1225 + "min-height", 1226 + maxHeight+"px" 1227 + ); 1228 + 1229 + card.setAttribute( 1230 + "data-sn-master-equal-height", 1231 + "1" 1232 + ); 1233 + 1234 + managedHeight.add( 1235 + card 1236 + ); 1237 + }); 1238 + }); 655 655 } 656 656 657 - function run(){ 658 - reset(); 1241 + /* ======================================================= 1242 + DETAIL GRID EQUAL HEIGHT, DESKTOP ONLY 1243 + ======================================================= */ 659 659 1245 + function equaliseDetailGrids(){ 660 660 if( 1247 + PAGE_KIND!=="detail"|| 661 661 window.innerWidth<=MOBILE_MAX 662 662 ){ 663 663 return; 664 664 } 665 665 666 - var parents= 1253 + var selectors=[ 1254 + ".arsn-grid", 1255 + ".arsn-grid-2", 1256 + ".arsn-grid-3", 1257 + ".dmp-grid", 1258 + ".ido-grid", 1259 + ".pp-grid" 1260 + ]; 1261 + 1262 + selectors.forEach(function(selector){ 667 667 Array.from( 668 - root.querySelectorAll("*") 669 - ).filter(function(parent){ 670 - return ( 671 - visible(parent,MIN_W,MIN_H)&& 672 - parent.children&& 673 - parent.children.length>=2&& 674 - parent.children.length<=MAX_PARENT_CHILDREN 675 - ); 676 - }); 1264 + root.querySelectorAll(selector) 1265 + ).forEach(function(grid){ 1266 + var children= 1267 + Array.from( 1268 + grid.children||[] 1269 + ).filter(visible); 677 677 678 - var touched=new Set(); 1271 + if(children.length<2){ 1272 + return; 1273 + } 679 679 680 - parents.forEach(function(parent){ 681 - var entries=[]; 1275 + var groups=[]; 682 682 683 - Array.from(parent.children).forEach(function(child){ 684 - if(!visible(child,MIN_W,MIN_H))return; 1277 + children.forEach(function(child){ 1278 + var top= 1279 + child 1280 + .getBoundingClientRect() 1281 + .top; 685 685 686 - var target=pickTarget(child); 687 - if(!target)return; 1283 + var group=null; 688 688 689 - entries.push({ 690 - target:target, 691 - rect:target.getBoundingClientRect() 1285 + for(var i=0;i<groups.length;i++){ 1286 + if( 1287 + Math.abs( 1288 + groups[i].top-top 1289 + )<=ROW_TOLERANCE 1290 + ){ 1291 + group=groups[i]; 1292 + break; 1293 + } 1294 + } 1295 + 1296 + if(!group){ 1297 + group={ 1298 + top:top, 1299 + items:[] 1300 + }; 1301 + groups.push(group); 1302 + } 1303 + 1304 + group.items.push(child); 692 692 }); 693 - }); 694 694 695 - if(entries.length<2)return; 1307 + groups.forEach(function(group){ 1308 + if(group.items.length<2){ 1309 + return; 1310 + } 696 696 697 - groupsByVisualRow(entries).forEach(function(group){ 698 - if(!validHorizontalGroup(group))return; 1312 + var maxHeight=0; 699 699 700 - var signature= 701 - group.entries.map(function(entry){ 702 - return entry.target; 1314 + group.items.forEach(function(item){ 1315 + maxHeight= 1316 + Math.max( 1317 + maxHeight, 1318 + item 1319 + .getBoundingClientRect() 1320 + .height 1321 + ); 703 703 }); 704 704 705 - if( 706 - !signature.some(function(el){ 707 - return !touched.has(el); 708 - }) 709 - ){ 710 - return; 711 - } 1324 + maxHeight= 1325 + Math.ceil(maxHeight); 712 712 713 - var applied= 714 - applyGroup(group); 1327 + group.items.forEach(function(item){ 1328 + saveStyle( 1329 + item, 1330 + originalHeight, 1331 + "min-height" 1332 + ); 715 715 716 - if(applied){ 717 - signature.forEach(function(el){ 718 - touched.add(el); 1334 + item.style.setProperty( 1335 + "min-height", 1336 + maxHeight+"px" 1337 + ); 1338 + 1339 + item.setAttribute( 1340 + "data-sn-master-equal-height", 1341 + "1" 1342 + ); 1343 + 1344 + managedHeight.add(item); 719 719 }); 720 - } 1346 + }); 721 721 }); 722 722 }); 723 723 } 724 724 725 - function schedule(){ 726 - if(raf)cancelAnimationFrame(raf); 1351 + /* ======================================================= 1352 + RUN / RESPONSIVE SCHEDULING 1353 + ======================================================= */ 727 727 728 - raf=requestAnimationFrame(function(){ 729 - raf=requestAnimationFrame(function(){ 730 - raf=0; 731 - run(); 732 - }); 733 - }); 1355 + function run(){ 1356 + if(running)return; 1357 + 1358 + running=true; 1359 + 1360 + try{ 1361 + resetRuntime(); 1362 + applyPlaceholderBadge(); 1363 + propagateDetailAccents(); 1364 + 1365 + var headers= 1366 + applyOverviewPalette(); 1367 + 1368 + makeThreeLineAreaLabels(); 1369 + makeFilledRedOrangeCTAsBorderless(); 1370 + 1371 + if( 1372 + window.innerWidth> 1373 + MOBILE_MAX 1374 + ){ 1375 + alignOverviewCards( 1376 + headers 1377 + ); 1378 + 1379 + equaliseDetailGrids(); 1380 + } 1381 + }finally{ 1382 + running=false; 1383 + } 734 734 } 735 735 736 - addEventListener("resize",schedule,{passive:true}); 737 - addEventListener("load",schedule,{once:true}); 1386 + function onResize(){ 1387 + if(resizeTimer){ 1388 + clearTimeout( 1389 + resizeTimer 1390 + ); 1391 + } 738 738 739 - root.addEventListener( 740 - "click", 741 - function(){ 742 - setTimeout(schedule,0); 743 - }, 744 - true 745 - ); 1393 + resizeTimer= 1394 + setTimeout( 1395 + function(){ 1396 + resizeTimer=0; 1397 + run(); 1398 + }, 1399 + RESIZE_DEBOUNCE 1400 + ); 1401 + } 746 746 747 - Array.from(root.querySelectorAll("img")).forEach(function(img){ 748 - if(!img.complete){ 749 - img.addEventListener("load",schedule,{once:true}); 1403 + async function waitForReady(){ 1404 + if( 1405 + document.readyState!=="complete" 1406 + ){ 1407 + await new Promise(function(resolve){ 1408 + window.addEventListener( 1409 + "load", 1410 + resolve, 1411 + {once:true} 1412 + ); 1413 + }); 750 750 } 751 - }); 752 752 753 - if(document.fonts&&document.fonts.ready){ 754 - document.fonts.ready.then(schedule); 1416 + if( 1417 + document.fonts&& 1418 + document.fonts.ready 1419 + ){ 1420 + try{ 1421 + await document.fonts.ready; 1422 + }catch(error){} 1423 + } 1424 + 1425 + var images= 1426 + Array.from( 1427 + root.querySelectorAll("img") 1428 + ); 1429 + 1430 + await Promise.all( 1431 + images.map(function(img){ 1432 + if(img.complete){ 1433 + return Promise.resolve(); 1434 + } 1435 + 1436 + return new Promise(function(resolve){ 1437 + var done=function(){ 1438 + resolve(); 1439 + }; 1440 + 1441 + img.addEventListener( 1442 + "load", 1443 + done, 1444 + {once:true} 1445 + ); 1446 + 1447 + img.addEventListener( 1448 + "error", 1449 + done, 1450 + {once:true} 1451 + ); 1452 + }); 1453 + }) 1454 + ); 1455 + 1456 + run(); 755 755 } 756 756 757 - schedule(); 758 - setTimeout(schedule,200); 759 - setTimeout(schedule,650); 760 - setTimeout(schedule,1400); 1459 + window.addEventListener( 1460 + "resize", 1461 + onResize, 1462 + {passive:true} 1463 + ); 1464 + 1465 + waitForReady(); 761 761 })(); 762 762 </script> 763 -<!-- SN_HORIZONTAL_BOX_HARMONIZER_END --> 1468 + 1469 +<!-- SN_SERVICE_NAVIGATOR_MASTER_STYLE_END --> 764 764 {{/html}} 765 765