Changes for page Copyright, Rights & Licences
Last modified by Veronika Kocher on Friday, 18 Sep 2026 16:47
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.11
edited by Veronika Kocher
on Thursday, 03 Sep 2026 13:04
on Thursday, 03 Sep 2026 13:04
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):** Legal Department for binding legal questions and contracts; Publications and/or University Library for publication and licensing practice where relevant. 50 50 ... ... @@ -69,23 +69,100 @@ 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 } 78 78 </style> 79 -<script data-sn-horizontal-box-harmonizer="4"> 154 + 155 +<script data-sn-service-navigator-master="1"> 80 80 (function(){ 81 81 "use strict"; 82 82 159 + var PAGE_KIND="detail"; 160 + var PLACEHOLDER=true; 161 + var PLACEHOLDER_LABEL="COMING SOON"; 162 + 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; 165 + 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; 175 + var managedHeight=new Set(); 176 + var managedMargin=new Set(); 177 + var originalHeight=new WeakMap(); 178 + var originalMargin=new WeakMap(); 103 103 104 - function num(v){ 105 - var n=parseFloat(v); 106 - return Number.isFinite(n)?n:0; 107 - } 180 + var resizeTimer=0; 181 + 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; 183 + var THEMES=[ 184 + { 185 + name:"BLUE", 186 + accent:"#21b6d7", 187 + bg:"#eaf7fb", 188 + text:"#315d68", 189 + labels:[ 190 + "HIER STARTEN", 191 + "ENTSCHEIDEN", 192 + "ÜBERPRÜFEN & ANPASSEN", 193 + "START HERE", 194 + "DECIDE", 195 + "REVIEW & ADAPT" 196 + ] 197 + }, 198 + { 199 + name:"RED", 200 + accent:"#e94b13", 201 + bg:"#fff1ec", 202 + text:"#8a4d36", 203 + labels:[ 204 + "PLANEN & ORGANISIEREN", 205 + "ORGANISIEREN & DOKUMENTIEREN", 206 + "PUBLIZIEREN & PRÄSENTIEREN", 207 + "PLAN & ORGANISE", 208 + "PLAN & ORGANIZE", 209 + "ORGANISE & DOCUMENT", 210 + "ORGANIZE & DOCUMENT", 211 + "PUBLISH & PRESENT" 212 + ] 213 + }, 214 + { 215 + name:"YELLOW", 216 + accent:"#f0aa00", 217 + bg:"#fff8e7", 218 + text:"#785b17", 219 + labels:[ 220 + "SCHÜTZEN & KLÄREN", 221 + "STANDARDISIEREN & IDENTIFIZIEREN", 222 + "ÖFFNEN, NACHNUTZEN & AUFFINDBAR MACHEN", 223 + "PROTECT & CLARIFY", 224 + "STANDARDISE & IDENTIFY", 225 + "STANDARDIZE & IDENTIFY", 226 + "OPEN, REUSE & MAKE FINDABLE" 227 + ] 228 + }, 229 + { 230 + name:"GREEN", 231 + accent:"#38b76a", 232 + bg:"#edf9f1", 233 + text:"#3f7451", 234 + labels:[ 235 + "INFRASTRUKTUR EINRICHTEN", 236 + "INFRASTRUKTUR & ZUSAMMENARBEIT EINRICHTEN", 237 + "SPEICHERN & ZUGRIFF STEUERN", 238 + "REPOSITORIUM, ERHALTEN & ÜBERGEBEN", 239 + "SET UP INFRASTRUCTURE", 240 + "SET UP INFRASTRUCTURE & COLLABORATION", 241 + "STORE & CONTROL ACCESS", 242 + "REPOSITORY, PRESERVE & HAND OVER" 243 + ] 120 120 } 245 + ]; 121 121 122 - var r=el.getBoundingClientRect(); 123 - 124 - return ( 125 - r.width>=(minW||1)&& 126 - r.height>=(minH||1) 127 - ); 247 + function num(value){ 248 + var n=parseFloat(value); 249 + 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 - ); 252 + function norm(value){ 253 + return String(value||"") 254 + .replace(/\s+/g," ") 255 + .trim() 256 + .toUpperCase(); 137 137 } 138 138 139 - function namedLikeBox(el){ 140 - var c= 141 - typeof el.className==="string" 142 - ? el.className 143 - : ""; 259 + function visible(el){ 260 + 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 - }262 + var style=getComputedStyle(el); 263 + 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)266 + style.display!=="none"&& 267 + style.visibility!=="hidden"&& 268 + rect.width>20&& 269 + rect.height>4 181 181 ); 182 182 } 183 183 184 - function save Original(el,map,property){273 + 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){282 + function restoreStyle(el,map,property){ 194 194 var original=map.get(el); 195 195 196 196 if(original&&original.value){ ... ... @@ -204,247 +204,249 @@ 204 204 } 205 205 } 206 206 207 - function reset(){ 208 - heightManaged.forEach(function(el){209 - restore Original(296 + function resetRuntime(){ 297 + managedHeight.forEach(function(el){ 298 + restoreStyle( 210 210 el, 211 - original MinHeight,300 + originalHeight, 212 212 "min-height" 213 213 ); 214 - 215 215 el.removeAttribute( 216 - "data-sn-equal-height -managed"304 + "data-sn-master-equal-height" 217 217 ); 218 218 }); 219 219 220 - sectionManaged.forEach(function(el){221 - restore Original(308 + managedMargin.forEach(function(el){ 309 + restoreStyle( 222 222 el, 223 - originalMargin Top,311 + originalMargin, 224 224 "margin-top" 225 225 ); 226 - 227 227 el.removeAttribute( 228 - "data-sn-first- section-aligned"315 + "data-sn-master-first-row" 229 229 ); 230 230 }); 231 231 232 - heightManaged.clear();233 - sectionManaged.clear();319 + managedHeight.clear(); 320 + managedMargin.clear(); 234 234 } 235 235 236 - function pickTarget(child){237 - if(!visible(child,MIN_W,MIN_H))return null;323 + function themeFor(text){ 324 + var value=norm(text); 238 238 239 - if(boxLike(child)){ 240 - return child; 326 + for(var i=0;i<THEMES.length;i++){ 327 + for(var j=0;j<THEMES[i].labels.length;j++){ 328 + var label=THEMES[i].labels[j]; 329 + 330 + if( 331 + value===label|| 332 + value.indexOf(label+" ")===0|| 333 + value.indexOf(label+" -")===0|| 334 + value.indexOf(label+" ·")===0 335 + ){ 336 + return THEMES[i]; 337 + } 338 + } 241 241 } 242 242 243 - varcr=child.getBoundingClientRect();244 - var q=[];341 + return null; 342 + } 245 245 246 - Array.from(child.children||[]).forEach(function(el){247 - q.push({el:el,depth:1});248 - });344 + /* ======================================================= 345 + PLACEHOLDER BADGE 346 + ======================================================= */ 249 249 250 - var best=null;251 - varbestScore=-Infinity;348 + function applyPlaceholderBadge(){ 349 + if(!PLACEHOLDER)return; 252 252 253 - while(q.length){ 254 - var item=q.shift(); 255 - var el=item.el; 351 + if( 352 + document.querySelector( 353 + ".sn-coming-soon-badge" 354 + ) 355 + ){ 356 + return; 357 + } 256 256 257 - if(!visible(el,MIN_W,MIN_H))continue; 359 + var title= 360 + document.querySelector( 361 + "#document-title" 362 + )|| 363 + document.querySelector( 364 + "h1" 365 + ); 258 258 259 - var r=el.getBoundingClientRect();367 + if(!title)return; 260 260 261 - if( 262 - r.width>=cr.width*.68&& 263 - boxLike(el) 264 - ){ 265 - var widthFit= 266 - 1-Math.min( 267 - 1, 268 - Math.abs(cr.width-r.width)/ 269 - Math.max(1,cr.width) 270 - ); 369 + var badge= 370 + document.createElement( 371 + "span" 372 + ); 271 271 272 - var topFit= 273 - 1-Math.min( 274 - 1, 275 - Math.abs(cr.top-r.top)/100 276 - ); 374 + badge.className= 375 + "sn-coming-soon-badge"; 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; 377 + badge.textContent= 378 + PLACEHOLDER_LABEL; 283 283 284 - if(score>bestScore){ 285 - best=el; 286 - bestScore=score; 287 - } 288 - } 380 + badge.setAttribute( 381 + "aria-label", 382 + PLACEHOLDER_LABEL 383 + ); 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 - }); 297 - } 298 - } 299 - 300 - return best; 385 + title.appendChild( 386 + badge 387 + ); 301 301 } 302 302 303 - function groupsByVisualRow(entries){ 304 - var groups=[]; 390 + /* ======================================================= 391 + DETAIL PAGE OWN-ACCENT PROPAGATION 392 + ======================================================= */ 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 312 - ); 313 - }) 314 - .forEach(function(entry){ 315 - var group=null; 394 + function parseRGB(value){ 395 + var match=String(value||"").match( 396 + /rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)/i 397 + ); 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 - } 399 + if(!match)return null; 328 328 329 - if(!group){ 330 - group={ 331 - top:entry.rect.top, 332 - entries:[] 333 - }; 334 - groups.push(group); 335 - } 401 + return [ 402 + Number(match[1]), 403 + Number(match[2]), 404 + Number(match[3]) 405 + ]; 406 + } 336 336 337 - group.entries.push(entry); 338 - }); 339 - 340 - return groups; 408 + function distance(a,b){ 409 + return Math.sqrt( 410 + Math.pow(a[0]-b[0],2)+ 411 + Math.pow(a[1]-b[1],2)+ 412 + Math.pow(a[2]-b[2],2) 413 + ); 341 341 } 342 342 343 - function validHorizontalGroup(group){344 - if(group.entries.length<2)return false;416 + function paletteMatch(cssColor){ 417 + var rgb=parseRGB(cssColor); 345 345 346 - var lefts= 347 - group.entries 348 - .map(function(e){return e.rect.left;}) 349 - .sort(function(a,b){return a-b;}); 419 + if(!rgb)return null; 350 350 351 - if( 352 - lefts[lefts.length-1]- 353 - lefts[0]< 354 - 80 355 - ){ 356 - return false; 357 - } 421 + var palette=[ 422 + {hex:"#21b6d7",rgb:[33,182,215]}, 423 + {hex:"#e94b13",rgb:[233,75,19]}, 424 + {hex:"#f0aa00",rgb:[240,170,0]}, 425 + {hex:"#38b76a",rgb:[56,183,106]} 426 + ]; 358 358 359 - var widths= 360 - group.entries 361 - .map(function(e){return e.rect.width;}) 362 - .filter(function(w){return w>0;}); 428 + var best=null; 429 + var bestDistance=Infinity; 363 363 364 - if(widths.length<2)return false; 431 + palette.forEach(function(item){ 432 + var d=distance(rgb,item.rgb); 365 365 366 - var minWidth=Math.min.apply(Math,widths); 367 - var maxWidth=Math.max.apply(Math,widths); 434 + if(d<bestDistance){ 435 + best=item; 436 + bestDistance=d; 437 + } 438 + }); 368 368 369 - return ( 370 - maxWidth/ 371 - Math.max(1,minWidth)<= 372 - 1.9 373 - ); 440 + return bestDistance<=30 441 + ?best 442 + :null; 374 374 } 375 375 376 - function normalizeText(text){ 377 - return String(text||"") 378 - .replace(/s+/g," ") 379 - .trim() 380 - .toUpperCase(); 381 - } 445 + function propagateDetailAccents(){ 446 + if(PAGE_KIND!=="detail")return; 382 382 383 - function exactKnownFirstSection(el){ 384 - var text=normalizeText(el.textContent); 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" 395 - ); 396 - } 397 - 398 - function visuallyFirstSectionBar(card){ 399 - var cardRect=card.getBoundingClientRect(); 400 - var candidates=[]; 401 - 402 402 Array.from( 403 - card.querySelectorAll( 404 - "div,p,span,strong,h3,h4,h5,h6" 449 + root.querySelectorAll( 450 + ".arsn-call,.dmp-call,.ido-call,.pp-call,"+ 451 + ".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; 454 + if(!visible(el))return; 409 409 410 - var r=el.getBoundingClientRect(); 411 - var relativeTop=r.top-cardRect.top; 456 + var style=getComputedStyle(el); 412 412 413 413 if( 414 - relativeTop<45|| 415 - relativeTop>cardRect.height*.72 459 + num(style.borderTopWidth)>=2 416 416 ){ 417 - return; 461 + var match= 462 + paletteMatch( 463 + style.borderTopColor 464 + ); 465 + 466 + if(match){ 467 + el.style.setProperty( 468 + "border-left", 469 + "4px solid "+match.hex, 470 + "important" 471 + ); 472 + } 418 418 } 474 + }); 419 419 420 - var widthRatio= 421 - r.width/ 422 - Math.max(1,cardRect.width); 476 + // Warning families: explicit safety override. 477 + Array.from( 478 + root.querySelectorAll( 479 + ".arsn-warn,.dmp-warn,.ido-warn,.pp-warn,"+ 480 + ".warn,.warning,.warningmessage,.errormessage" 481 + ) 482 + ).forEach(function(el){ 483 + if(!visible(el))return; 423 423 424 - if( 425 - widthRatio<.55|| 426 - widthRatio>1.05|| 427 - r.height>54 428 - ){ 429 - return; 430 - } 485 + el.style.setProperty( 486 + "border-left", 487 + "4px solid #e94b13", 488 + "important" 489 + ); 490 + }); 431 431 432 - var text=normalizeText(el.textContent); 492 + // Info families: explicit orientation override. 493 + Array.from( 494 + root.querySelectorAll( 495 + ".arsn-info,.dmp-info,.ido-info,.pp-info,.infomessage" 496 + ) 497 + ).forEach(function(el){ 498 + if(!visible(el))return; 433 433 434 - if( 435 - text.length<2|| 436 - text.length>90 437 - ){ 438 - return; 439 - } 500 + el.style.setProperty( 501 + "border-left", 502 + "4px solid #21b6d7", 503 + "important" 504 + ); 505 + }); 506 + } 440 440 441 - var style=getComputedStyle(el); 508 + /* ======================================================= 509 + OVERVIEW SEMANTIC THEME PALETTE 510 + ======================================================= */ 442 442 443 - var bg= 444 - style.backgroundColor&& 445 - style.backgroundColor!=="rgba(0, 0, 0, 0)"&& 446 - style.backgroundColor!=="transparent"; 512 + function smallestThemeHeaders(){ 513 + return Array.from( 514 + root.querySelectorAll( 515 + "div,span,p,strong,h3,h4,h5,h6" 516 + ) 517 + ).filter(function(el){ 518 + if(!visible(el))return false; 519 + if(!themeFor(el.textContent))return false; 447 447 521 + return !Array.from( 522 + el.children||[] 523 + ).some(function(child){ 524 + return !!themeFor( 525 + child.textContent 526 + ); 527 + }); 528 + }); 529 + } 530 + 531 + function findOverviewCard(header){ 532 + var node=header.parentElement; 533 + var candidates=[]; 534 + 535 + while(node&&node!==root){ 536 + var rect=node.getBoundingClientRect(); 537 + var style=getComputedStyle(node); 538 + 448 448 var border= 449 449 num(style.borderTopWidth)+ 450 450 num(style.borderRightWidth)+ ... ... @@ -451,315 +451,674 @@ 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 - }); 545 + if( 546 + rect.width>=220&& 547 + rect.width<=800&& 548 + rect.height>=120&& 549 + border>=1 550 + ){ 551 + candidates.push(node); 474 474 } 475 - }); 476 476 554 + node=node.parentElement; 555 + } 556 + 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; 560 + return ( 561 + b.getBoundingClientRect().height- 562 + a.getBoundingClientRect().height 563 + ); 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 - }); 566 + return candidates[0]; 567 + } 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 - } 569 + function rowCandidates(link,card){ 570 + var result=[]; 571 + var cardRect= 572 + 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 - }); 574 + var node=link; 503 503 504 - return candidates[0].el; 505 - } 576 + while(node&&node!==card){ 577 + if(visible(node)){ 578 + var rect= 579 + node.getBoundingClientRect(); 506 506 507 - function alignFirstSections(cards){ 508 - var rows= 509 - cards.map(function(card){ 510 - var bar= 511 - visuallyFirstSectionBar(card); 581 + if( 582 + rect.height<=105&& 583 + rect.width>= 584 + cardRect.width*.50&& 585 + rect.width<= 586 + cardRect.width*1.03 587 + ){ 588 + result.push(node); 589 + } 590 + } 512 512 513 - if(!bar)return null; 592 + node=node.parentElement; 593 + } 514 514 515 - varcardRect=516 - card.getBoundingClientRect();595 + return result; 596 + } 517 517 518 - var barRect= 519 - bar.getBoundingClientRect(); 598 + function chooseOuterRow( 599 + candidates, 600 + link 601 + ){ 602 + if(!candidates.length){ 603 + return link; 604 + } 520 520 521 - return {522 - card:card,523 - bar:bar,524 - relativeTop:525 - barRect.top-cardRect.top,526 - label:527 - normalizeText(bar.textContent)528 - };606 + var bordered= 607 + candidates.filter(function(el){ 608 + return ( 609 + num( 610 + getComputedStyle(el) 611 + .borderLeftWidth 612 + )>=1 613 + ); 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; 616 + var pool= 617 + bordered.length 618 + ?bordered 619 + :candidates; 620 + 621 + pool.sort(function(a,b){ 622 + var ar= 623 + a.getBoundingClientRect(); 624 + 625 + var br= 626 + b.getBoundingClientRect(); 627 + 628 + return ( 629 + ar.left-br.left|| 630 + br.width-ar.width 631 + ); 632 + }); 633 + 634 + return pool[0]||link; 635 + } 636 + 637 + function applyOverviewPalette(){ 638 + if(PAGE_KIND!=="overview"){ 639 + return []; 539 539 } 540 540 541 - var targetTop= 542 - Math.max.apply( 543 - Math, 544 - rows.map(function(row){ 545 - return row.relativeTop; 642 + var headers= 643 + smallestThemeHeaders() 644 + .map(function(el){ 645 + return { 646 + el:el, 647 + theme: 648 + themeFor( 649 + el.textContent 650 + ), 651 + card: 652 + findOverviewCard( 653 + el 654 + ) 655 + }; 546 546 }) 547 - ); 657 + .filter(function(row){ 658 + return !!row.card; 659 + }); 548 548 549 - rows.forEach(function(row){ 550 - var delta= 551 - targetTop- 552 - row.relativeTop; 661 + var unique=[]; 662 + var seenHeaders=new Set(); 553 553 554 - if(delta<=1)return; 664 + headers.forEach(function(row){ 665 + var key= 666 + row.theme.name+ 667 + "|"+ 668 + Math.round( 669 + row.card 670 + .getBoundingClientRect() 671 + .left 672 + )+ 673 + "|"+ 674 + Math.round( 675 + row.el 676 + .getBoundingClientRect() 677 + .top 678 + ); 555 555 556 - saveOriginal( 557 - row.bar, 558 - originalMarginTop, 559 - "margin-top" 680 + if(!seenHeaders.has(key)){ 681 + seenHeaders.add(key); 682 + unique.push(row); 683 + } 684 + }); 685 + 686 + unique.forEach(function(row){ 687 + var headerRect= 688 + row.el 689 + .getBoundingClientRect(); 690 + 691 + row.el.style.setProperty( 692 + "background", 693 + row.theme.bg, 694 + "important" 560 560 ); 561 561 562 - var currentMargin= 563 - num( 564 - getComputedStyle( 565 - row.bar 566 - ).marginTop 567 - ); 697 + row.el.style.setProperty( 698 + "color", 699 + row.theme.text, 700 + "important" 701 + ); 568 568 569 - row.bar.style.setProperty( 570 - "margin-top", 571 - ( 572 - currentMargin+ 573 - delta 574 - )+"px" 703 + row.el.style.setProperty( 704 + "text-align", 705 + "left", 706 + "important" 575 575 ); 576 576 577 - row.bar.setAttribute( 578 - "data-sn-first-section-aligned", 579 - "4" 709 + row.el.style.setProperty( 710 + "word-spacing", 711 + "normal", 712 + "important" 580 580 ); 581 581 582 - sectionManaged.add(row.bar); 715 + var later= 716 + unique 717 + .filter(function(other){ 718 + return ( 719 + other.card===row.card&& 720 + other.el 721 + .getBoundingClientRect() 722 + .top> 723 + headerRect.top+2 724 + ); 725 + }) 726 + .sort(function(a,b){ 727 + return ( 728 + a.el 729 + .getBoundingClientRect() 730 + .top- 731 + b.el 732 + .getBoundingClientRect() 733 + .top 734 + ); 735 + }); 736 + 737 + var stopTop= 738 + later.length 739 + ?later[0].el 740 + .getBoundingClientRect() 741 + .top 742 + :Infinity; 743 + 744 + Array.from( 745 + row.card.querySelectorAll("a") 746 + ).forEach(function(link){ 747 + if(!visible(link))return; 748 + 749 + var rect= 750 + link.getBoundingClientRect(); 751 + 752 + if( 753 + rect.top<= 754 + headerRect.bottom-2|| 755 + rect.top>= 756 + stopTop-2 757 + ){ 758 + return; 759 + } 760 + 761 + var candidates= 762 + rowCandidates( 763 + link, 764 + row.card 765 + ); 766 + 767 + var target= 768 + chooseOuterRow( 769 + candidates, 770 + link 771 + ); 772 + 773 + candidates.forEach(function(el){ 774 + el.style.setProperty( 775 + "border-left", 776 + "0 solid transparent", 777 + "important" 778 + ); 779 + }); 780 + 781 + target.style.setProperty( 782 + "border-left", 783 + "3px solid "+ 784 + row.theme.accent, 785 + "important" 786 + ); 787 + 788 + target.style.setProperty( 789 + "box-sizing", 790 + "border-box", 791 + "important" 792 + ); 793 + }); 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 - }; 796 + return unique; 593 593 } 594 594 595 - function applyGroup(group){ 596 - if(!validHorizontalGroup(group)){ 597 - return null; 799 + /* ======================================================= 800 + OVERVIEW CARD HEIGHT + FIRST THEMATIC ROW 801 + ======================================================= */ 802 + 803 + function alignOverviewCards(headers){ 804 + if( 805 + PAGE_KIND!=="overview"|| 806 + window.innerWidth<=MOBILE_MAX 807 + ){ 808 + 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);814 + headers.forEach(function(row){ 815 + if(!seen.has(row.card)){ 816 + seen.add(row.card); 817 + cards.push(row.card); 607 607 } 608 608 }); 609 609 610 - if(cards.length<2)return null; 821 + if(cards.length<2){ 822 + return; 823 + } 611 611 612 - varfirstSection=613 - alignFirstSections(cards);825 + // Group cards by actual top position. 826 + 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 - ); 829 + var top= 830 + card.getBoundingClientRect().top; 831 + 832 + var group=null; 833 + 834 + for(var i=0;i<groups.length;i++){ 835 + if( 836 + Math.abs( 837 + groups[i].top-top 838 + )<=ROW_TOLERANCE 839 + ){ 840 + group=groups[i]; 841 + break; 842 + } 843 + } 844 + 845 + if(!group){ 846 + group={ 847 + top:top, 848 + cards:[] 849 + }; 850 + groups.push(group); 851 + } 852 + 853 + group.cards.push(card); 624 624 }); 625 625 626 - maxHeight=Math.ceil(maxHeight); 856 + groups.forEach(function(group){ 857 + if(group.cards.length<2){ 858 + return; 859 + } 627 627 628 - if(maxHeight<MIN_H)return null; 861 + var firstHeaders= 862 + group.cards.map(function(card){ 863 + var candidates= 864 + headers 865 + .filter(function(row){ 866 + return row.card===card; 867 + }) 868 + .sort(function(a,b){ 869 + return ( 870 + a.el 871 + .getBoundingClientRect() 872 + .top- 873 + b.el 874 + .getBoundingClientRect() 875 + .top 876 + ); 877 + }); 629 629 630 - cards.forEach(function(card){ 631 - saveOriginal( 632 - card, 633 - originalMinHeight, 634 - "min-height" 635 - ); 879 + return candidates.length 880 + ?candidates[0] 881 + :null; 882 + }); 636 636 637 - card.style.setProperty( 638 - "min-height", 639 - maxHeight+"px" 640 - ); 884 + if( 885 + !firstHeaders.some(function(row){ 886 + return !row; 887 + }) 888 + ){ 889 + var targetTop= 890 + Math.max.apply( 891 + Math, 892 + firstHeaders.map(function(row){ 893 + return ( 894 + row.el 895 + .getBoundingClientRect() 896 + .top- 897 + row.card 898 + .getBoundingClientRect() 899 + .top 900 + ); 901 + }) 902 + ); 641 641 642 - card.setAttribute( 643 - "data-sn-equal-height-managed", 644 - "4" 645 - ); 904 + firstHeaders.forEach(function(row){ 905 + var relativeTop= 906 + row.el 907 + .getBoundingClientRect() 908 + .top- 909 + row.card 910 + .getBoundingClientRect() 911 + .top; 646 646 647 - heightManaged.add(card);648 - });913 + var delta= 914 + targetTop-relativeTop; 649 649 650 - return { 651 - cards:cards.length, 652 - height:maxHeight, 653 - firstSection:firstSection 654 - }; 916 + if(delta>1){ 917 + saveStyle( 918 + row.el, 919 + originalMargin, 920 + "margin-top" 921 + ); 922 + 923 + var current= 924 + num( 925 + getComputedStyle( 926 + row.el 927 + ).marginTop 928 + ); 929 + 930 + row.el.style.setProperty( 931 + "margin-top", 932 + ( 933 + current+delta 934 + )+"px" 935 + ); 936 + 937 + row.el.setAttribute( 938 + "data-sn-master-first-row", 939 + "1" 940 + ); 941 + 942 + managedMargin.add( 943 + row.el 944 + ); 945 + } 946 + }); 947 + } 948 + 949 + var maxHeight=0; 950 + 951 + group.cards.forEach(function(card){ 952 + maxHeight= 953 + Math.max( 954 + maxHeight, 955 + card 956 + .getBoundingClientRect() 957 + .height 958 + ); 959 + }); 960 + 961 + maxHeight= 962 + Math.ceil(maxHeight); 963 + 964 + group.cards.forEach(function(card){ 965 + saveStyle( 966 + card, 967 + originalHeight, 968 + "min-height" 969 + ); 970 + 971 + card.style.setProperty( 972 + "min-height", 973 + maxHeight+"px" 974 + ); 975 + 976 + card.setAttribute( 977 + "data-sn-master-equal-height", 978 + "1" 979 + ); 980 + 981 + managedHeight.add( 982 + card 983 + ); 984 + }); 985 + }); 655 655 } 656 656 657 - function run(){ 658 - reset(); 988 + /* ======================================================= 989 + DETAIL GRID EQUAL HEIGHT, DESKTOP ONLY 990 + ======================================================= */ 659 659 992 + function equaliseDetailGrids(){ 660 660 if( 994 + PAGE_KIND!=="detail"|| 661 661 window.innerWidth<=MOBILE_MAX 662 662 ){ 663 663 return; 664 664 } 665 665 666 - var parents= 1000 + var selectors=[ 1001 + ".arsn-grid", 1002 + ".arsn-grid-2", 1003 + ".arsn-grid-3", 1004 + ".dmp-grid", 1005 + ".ido-grid", 1006 + ".pp-grid" 1007 + ]; 1008 + 1009 + 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 - }); 1011 + root.querySelectorAll(selector) 1012 + ).forEach(function(grid){ 1013 + var children= 1014 + Array.from( 1015 + grid.children||[] 1016 + ).filter(visible); 677 677 678 - var touched=new Set(); 1018 + if(children.length<2){ 1019 + return; 1020 + } 679 679 680 - parents.forEach(function(parent){ 681 - var entries=[]; 1022 + var groups=[]; 682 682 683 - Array.from(parent.children).forEach(function(child){ 684 - if(!visible(child,MIN_W,MIN_H))return; 1024 + children.forEach(function(child){ 1025 + var top= 1026 + child 1027 + .getBoundingClientRect() 1028 + .top; 685 685 686 - var target=pickTarget(child); 687 - if(!target)return; 1030 + var group=null; 688 688 689 - entries.push({ 690 - target:target, 691 - rect:target.getBoundingClientRect() 1032 + for(var i=0;i<groups.length;i++){ 1033 + if( 1034 + Math.abs( 1035 + groups[i].top-top 1036 + )<=ROW_TOLERANCE 1037 + ){ 1038 + group=groups[i]; 1039 + break; 1040 + } 1041 + } 1042 + 1043 + if(!group){ 1044 + group={ 1045 + top:top, 1046 + items:[] 1047 + }; 1048 + groups.push(group); 1049 + } 1050 + 1051 + group.items.push(child); 692 692 }); 693 - }); 694 694 695 - if(entries.length<2)return; 1054 + groups.forEach(function(group){ 1055 + if(group.items.length<2){ 1056 + return; 1057 + } 696 696 697 - groupsByVisualRow(entries).forEach(function(group){ 698 - if(!validHorizontalGroup(group))return; 1059 + var maxHeight=0; 699 699 700 - var signature= 701 - group.entries.map(function(entry){ 702 - return entry.target; 1061 + group.items.forEach(function(item){ 1062 + maxHeight= 1063 + Math.max( 1064 + maxHeight, 1065 + item 1066 + .getBoundingClientRect() 1067 + .height 1068 + ); 703 703 }); 704 704 705 - if( 706 - !signature.some(function(el){ 707 - return !touched.has(el); 708 - }) 709 - ){ 710 - return; 711 - } 1071 + maxHeight= 1072 + Math.ceil(maxHeight); 712 712 713 - var applied= 714 - applyGroup(group); 1074 + group.items.forEach(function(item){ 1075 + saveStyle( 1076 + item, 1077 + originalHeight, 1078 + "min-height" 1079 + ); 715 715 716 - if(applied){ 717 - signature.forEach(function(el){ 718 - touched.add(el); 1081 + item.style.setProperty( 1082 + "min-height", 1083 + maxHeight+"px" 1084 + ); 1085 + 1086 + item.setAttribute( 1087 + "data-sn-master-equal-height", 1088 + "1" 1089 + ); 1090 + 1091 + managedHeight.add(item); 719 719 }); 720 - } 1093 + }); 721 721 }); 722 722 }); 723 723 } 724 724 725 - function schedule(){ 726 - if(raf)cancelAnimationFrame(raf); 1098 + /* ======================================================= 1099 + RUN / RESPONSIVE SCHEDULING 1100 + ======================================================= */ 727 727 728 - raf=requestAnimationFrame(function(){ 729 - raf=requestAnimationFrame(function(){ 730 - raf=0; 731 - run(); 732 - }); 733 - }); 1102 + function run(){ 1103 + if(running)return; 1104 + 1105 + running=true; 1106 + 1107 + try{ 1108 + resetRuntime(); 1109 + applyPlaceholderBadge(); 1110 + propagateDetailAccents(); 1111 + 1112 + var headers= 1113 + applyOverviewPalette(); 1114 + 1115 + if( 1116 + window.innerWidth> 1117 + MOBILE_MAX 1118 + ){ 1119 + alignOverviewCards( 1120 + headers 1121 + ); 1122 + 1123 + equaliseDetailGrids(); 1124 + } 1125 + }finally{ 1126 + running=false; 1127 + } 734 734 } 735 735 736 - addEventListener("resize",schedule,{passive:true}); 737 - addEventListener("load",schedule,{once:true}); 1130 + function onResize(){ 1131 + if(resizeTimer){ 1132 + clearTimeout( 1133 + resizeTimer 1134 + ); 1135 + } 738 738 739 - root.addEventListener( 740 - "click", 741 - function(){ 742 - setTimeout(schedule,0); 743 - }, 744 - true 745 - ); 1137 + resizeTimer= 1138 + setTimeout( 1139 + function(){ 1140 + resizeTimer=0; 1141 + run(); 1142 + }, 1143 + RESIZE_DEBOUNCE 1144 + ); 1145 + } 746 746 747 - Array.from(root.querySelectorAll("img")).forEach(function(img){ 748 - if(!img.complete){ 749 - img.addEventListener("load",schedule,{once:true}); 1147 + async function waitForReady(){ 1148 + if( 1149 + document.readyState!=="complete" 1150 + ){ 1151 + await new Promise(function(resolve){ 1152 + window.addEventListener( 1153 + "load", 1154 + resolve, 1155 + {once:true} 1156 + ); 1157 + }); 750 750 } 751 - }); 752 752 753 - if(document.fonts&&document.fonts.ready){ 754 - document.fonts.ready.then(schedule); 1160 + if( 1161 + document.fonts&& 1162 + document.fonts.ready 1163 + ){ 1164 + try{ 1165 + await document.fonts.ready; 1166 + }catch(error){} 1167 + } 1168 + 1169 + var images= 1170 + Array.from( 1171 + root.querySelectorAll("img") 1172 + ); 1173 + 1174 + await Promise.all( 1175 + images.map(function(img){ 1176 + if(img.complete){ 1177 + return Promise.resolve(); 1178 + } 1179 + 1180 + return new Promise(function(resolve){ 1181 + var done=function(){ 1182 + resolve(); 1183 + }; 1184 + 1185 + img.addEventListener( 1186 + "load", 1187 + done, 1188 + {once:true} 1189 + ); 1190 + 1191 + img.addEventListener( 1192 + "error", 1193 + done, 1194 + {once:true} 1195 + ); 1196 + }); 1197 + }) 1198 + ); 1199 + 1200 + run(); 755 755 } 756 756 757 - schedule(); 758 - setTimeout(schedule,200); 759 - setTimeout(schedule,650); 760 - setTimeout(schedule,1400); 1203 + window.addEventListener( 1204 + "resize", 1205 + onResize, 1206 + {passive:true} 1207 + ); 1208 + 1209 + waitForReady(); 761 761 })(); 762 762 </script> 763 -<!-- SN_HORIZONTAL_BOX_HARMONIZER_END --> 1212 + 1213 +<!-- SN_SERVICE_NAVIGATOR_MASTER_STYLE_END --> 764 764 {{/html}} 765 765