Changes for page Identify Your Data & Research Outputs
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.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
-
... ... @@ -262,23 +262,100 @@ 262 262 {{/html}} 263 263 264 264 {{html clean="false"}} 265 -<!-- SN_HORIZONTAL_BOX_HARMONIZER_START --> 266 -<style data-sn-horizontal-box-harmonizer="4"> 267 -[data-sn-equal-height-managed], 268 -[data-sn-first-section-aligned]{ 265 +<!-- SN_SERVICE_NAVIGATOR_MASTER_STYLE_START --> 266 + 267 +<style data-sn-service-navigator-master="1"> 268 +/* ========================================================= 269 + MASTER TYPOGRAPHY 270 + ========================================================= */ 271 +#xwikicontent h1, 272 +#xwikicontent h2, 273 +#xwikicontent h3, 274 +#xwikicontent h4, 275 +#xwikicontent h5, 276 +#xwikicontent h6, 277 +#xwikicontent .box-title, 278 +#xwikicontent [role="heading"], 279 +#xwikicontent h1 a, 280 +#xwikicontent h2 a, 281 +#xwikicontent h3 a, 282 +#xwikicontent h4 a, 283 +#xwikicontent h5 a, 284 +#xwikicontent h6 a, 285 +#xwikicontent .box-title a, 286 +#xwikicontent [role="heading"] a{ 287 + text-align:left!important; 288 + text-justify:auto!important; 289 + word-spacing:normal!important; 290 +} 291 + 292 +/* ========================================================= 293 + COMING SOON / IN VORBEREITUNG 294 + ========================================================= */ 295 +.sn-coming-soon-badge{ 296 + display:inline-block; 297 + vertical-align:middle; 298 + margin-left:10px; 299 + padding:4px 8px; 300 + border-radius:14px; 301 + border:1px solid #efd9cc; 302 + background:#fff4ee; 303 + color:#8a4d36; 304 + font-size:11px; 305 + font-weight:700; 306 + letter-spacing:.055em; 307 + line-height:1.2; 308 + white-space:nowrap; 309 +} 310 + 311 +/* ========================================================= 312 + NATIVE / DETAIL CALLOUT GEOMETRY 313 + Preserve existing backgrounds. 314 + ========================================================= */ 315 +#xwikicontent .arsn-info, 316 +#xwikicontent .dmp-info, 317 +#xwikicontent .ido-info, 318 +#xwikicontent .pp-info, 319 +#xwikicontent .infomessage{ 320 + box-sizing:border-box!important; 321 + border-left:4px solid #21b6d7!important; 322 + border-radius:8px; 323 + text-align:left!important; 324 + word-spacing:normal!important; 325 +} 326 + 327 +#xwikicontent .arsn-warn, 328 +#xwikicontent .dmp-warn, 329 +#xwikicontent .ido-warn, 330 +#xwikicontent .pp-warn, 331 +#xwikicontent .warn, 332 +#xwikicontent .warning, 333 +#xwikicontent .warningmessage, 334 +#xwikicontent .errormessage{ 335 + box-sizing:border-box!important; 336 + border-left:4px solid #e94b13!important; 337 + border-radius:8px; 338 + text-align:left!important; 339 + word-spacing:normal!important; 340 +} 341 + 342 +[data-sn-master-equal-height], 343 +[data-sn-master-first-row]{ 269 269 box-sizing:border-box; 270 270 } 271 271 </style> 272 -<script data-sn-horizontal-box-harmonizer="4"> 347 + 348 +<script data-sn-service-navigator-master="1"> 273 273 (function(){ 274 274 "use strict"; 275 275 352 + var PAGE_KIND="detail"; 353 + var PLACEHOLDER=false; 354 + var PLACEHOLDER_LABEL="COMING SOON"; 355 + 276 276 var MOBILE_MAX=767; 277 277 var ROW_TOLERANCE=6; 278 - var MIN_W=150; 279 - var MIN_H=36; 280 - var MAX_PARENT_CHILDREN=16; 281 - var SEARCH_DEPTH=5; 358 + var RESIZE_DEBOUNCE=220; 282 282 283 283 var root= 284 284 document.getElementById("xwikicontent")|| ... ... @@ -288,93 +288,105 @@ 288 288 289 289 if(!root)return; 290 290 291 - var heightManaged=new Set(); 292 - var sectionManaged=new Set(); 293 - var originalMinHeight=new WeakMap(); 294 - var originalMarginTop=new WeakMap(); 295 - var raf=0; 368 + var managedHeight=new Set(); 369 + var managedMargin=new Set(); 370 + var originalHeight=new WeakMap(); 371 + var originalMargin=new WeakMap(); 296 296 297 - function num(v){ 298 - var n=parseFloat(v); 299 - return Number.isFinite(n)?n:0; 300 - } 373 + var resizeTimer=0; 374 + var running=false; 301 301 302 - function visible(el,minW,minH){ 303 - if(!el||el.nodeType!==1)return false; 304 - 305 - var s=getComputedStyle(el); 306 - 307 - if( 308 - s.display==="none"|| 309 - s.visibility==="hidden"|| 310 - Number(s.opacity)===0 311 - ){ 312 - return false; 376 + var THEMES=[ 377 + { 378 + name:"BLUE", 379 + accent:"#21b6d7", 380 + bg:"#eaf7fb", 381 + text:"#315d68", 382 + labels:[ 383 + "HIER STARTEN", 384 + "ENTSCHEIDEN", 385 + "ÜBERPRÜFEN & ANPASSEN", 386 + "START HERE", 387 + "DECIDE", 388 + "REVIEW & ADAPT" 389 + ] 390 + }, 391 + { 392 + name:"RED", 393 + accent:"#e94b13", 394 + bg:"#fff1ec", 395 + text:"#8a4d36", 396 + labels:[ 397 + "PLANEN & ORGANISIEREN", 398 + "ORGANISIEREN & DOKUMENTIEREN", 399 + "PUBLIZIEREN & PRÄSENTIEREN", 400 + "PLAN & ORGANISE", 401 + "PLAN & ORGANIZE", 402 + "ORGANISE & DOCUMENT", 403 + "ORGANIZE & DOCUMENT", 404 + "PUBLISH & PRESENT" 405 + ] 406 + }, 407 + { 408 + name:"YELLOW", 409 + accent:"#f0aa00", 410 + bg:"#fff8e7", 411 + text:"#785b17", 412 + labels:[ 413 + "SCHÜTZEN & KLÄREN", 414 + "STANDARDISIEREN & IDENTIFIZIEREN", 415 + "ÖFFNEN, NACHNUTZEN & AUFFINDBAR MACHEN", 416 + "PROTECT & CLARIFY", 417 + "STANDARDISE & IDENTIFY", 418 + "STANDARDIZE & IDENTIFY", 419 + "OPEN, REUSE & MAKE FINDABLE" 420 + ] 421 + }, 422 + { 423 + name:"GREEN", 424 + accent:"#38b76a", 425 + bg:"#edf9f1", 426 + text:"#3f7451", 427 + labels:[ 428 + "INFRASTRUKTUR EINRICHTEN", 429 + "INFRASTRUKTUR & ZUSAMMENARBEIT EINRICHTEN", 430 + "SPEICHERN & ZUGRIFF STEUERN", 431 + "REPOSITORIUM, ERHALTEN & ÜBERGEBEN", 432 + "SET UP INFRASTRUCTURE", 433 + "SET UP INFRASTRUCTURE & COLLABORATION", 434 + "STORE & CONTROL ACCESS", 435 + "REPOSITORY, PRESERVE & HAND OVER" 436 + ] 313 313 } 438 + ]; 314 314 315 - var r=el.getBoundingClientRect(); 316 - 317 - return ( 318 - r.width>=(minW||1)&& 319 - r.height>=(minH||1) 320 - ); 440 + function num(value){ 441 + var n=parseFloat(value); 442 + return Number.isFinite(n)?n:0; 321 321 } 322 322 323 - function excluded(el){ 324 - return ( 325 - !el.matches|| 326 - el.matches( 327 - "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]" 328 - ) 329 - ); 445 + function norm(value){ 446 + return String(value||"") 447 + .replace(/\s+/g," ") 448 + .trim() 449 + .toUpperCase(); 330 330 } 331 331 332 - function namedLikeBox(el){ 333 - var c= 334 - typeof el.className==="string" 335 - ? el.className 336 - : ""; 452 + function visible(el){ 453 + if(!el||el.nodeType!==1)return false; 337 337 338 - r eturn/(^|[s_-])(box|card|tile|panel|role|check|service|source|call|area|detail|resource|topic|warn|info)([s_-]|$)/i.test(c);339 - }455 + var style=getComputedStyle(el); 456 + var rect=el.getBoundingClientRect(); 340 340 341 - function boxLike(el){ 342 - if(!visible(el,MIN_W,MIN_H)||excluded(el))return false; 343 - 344 - var s=getComputedStyle(el); 345 - var r=el.getBoundingClientRect(); 346 - 347 - var border= 348 - num(s.borderTopWidth)+ 349 - num(s.borderRightWidth)+ 350 - num(s.borderBottomWidth)+ 351 - num(s.borderLeftWidth); 352 - 353 - var radius=Math.max( 354 - num(s.borderTopLeftRadius), 355 - num(s.borderTopRightRadius), 356 - num(s.borderBottomLeftRadius), 357 - num(s.borderBottomRightRadius) 358 - ); 359 - 360 - var bg= 361 - s.backgroundColor&& 362 - s.backgroundColor!=="rgba(0, 0, 0, 0)"&& 363 - s.backgroundColor!=="transparent"; 364 - 365 - var shadow= 366 - s.boxShadow&& 367 - s.boxShadow!=="none"; 368 - 369 369 return ( 370 - namedLikeBox(el)||371 - b order>=1||372 - (bg&&radius>=3)||373 - (shadow&&r.width>=180)459 + style.display!=="none"&& 460 + style.visibility!=="hidden"&& 461 + rect.width>20&& 462 + rect.height>4 374 374 ); 375 375 } 376 376 377 - function save Original(el,map,property){466 + function saveStyle(el,map,property){ 378 378 if(map.has(el))return; 379 379 380 380 map.set(el,{ ... ... @@ -383,7 +383,7 @@ 383 383 }); 384 384 } 385 385 386 - function restore Original(el,map,property){475 + function restoreStyle(el,map,property){ 387 387 var original=map.get(el); 388 388 389 389 if(original&&original.value){ ... ... @@ -397,247 +397,249 @@ 397 397 } 398 398 } 399 399 400 - function reset(){ 401 - heightManaged.forEach(function(el){402 - restore Original(489 + function resetRuntime(){ 490 + managedHeight.forEach(function(el){ 491 + restoreStyle( 403 403 el, 404 - original MinHeight,493 + originalHeight, 405 405 "min-height" 406 406 ); 407 - 408 408 el.removeAttribute( 409 - "data-sn-equal-height -managed"497 + "data-sn-master-equal-height" 410 410 ); 411 411 }); 412 412 413 - sectionManaged.forEach(function(el){414 - restore Original(501 + managedMargin.forEach(function(el){ 502 + restoreStyle( 415 415 el, 416 - originalMargin Top,504 + originalMargin, 417 417 "margin-top" 418 418 ); 419 - 420 420 el.removeAttribute( 421 - "data-sn-first- section-aligned"508 + "data-sn-master-first-row" 422 422 ); 423 423 }); 424 424 425 - heightManaged.clear();426 - sectionManaged.clear();512 + managedHeight.clear(); 513 + managedMargin.clear(); 427 427 } 428 428 429 - function pickTarget(child){430 - if(!visible(child,MIN_W,MIN_H))return null;516 + function themeFor(text){ 517 + var value=norm(text); 431 431 432 - if(boxLike(child)){ 433 - return child; 519 + for(var i=0;i<THEMES.length;i++){ 520 + for(var j=0;j<THEMES[i].labels.length;j++){ 521 + var label=THEMES[i].labels[j]; 522 + 523 + if( 524 + value===label|| 525 + value.indexOf(label+" ")===0|| 526 + value.indexOf(label+" -")===0|| 527 + value.indexOf(label+" ·")===0 528 + ){ 529 + return THEMES[i]; 530 + } 531 + } 434 434 } 435 435 436 - varcr=child.getBoundingClientRect();437 - var q=[];534 + return null; 535 + } 438 438 439 - Array.from(child.children||[]).forEach(function(el){440 - q.push({el:el,depth:1});441 - });537 + /* ======================================================= 538 + PLACEHOLDER BADGE 539 + ======================================================= */ 442 442 443 - var best=null;444 - varbestScore=-Infinity;541 + function applyPlaceholderBadge(){ 542 + if(!PLACEHOLDER)return; 445 445 446 - while(q.length){ 447 - var item=q.shift(); 448 - var el=item.el; 544 + if( 545 + document.querySelector( 546 + ".sn-coming-soon-badge" 547 + ) 548 + ){ 549 + return; 550 + } 449 449 450 - if(!visible(el,MIN_W,MIN_H))continue; 552 + var title= 553 + document.querySelector( 554 + "#document-title" 555 + )|| 556 + document.querySelector( 557 + "h1" 558 + ); 451 451 452 - var r=el.getBoundingClientRect();560 + if(!title)return; 453 453 454 - if( 455 - r.width>=cr.width*.68&& 456 - boxLike(el) 457 - ){ 458 - var widthFit= 459 - 1-Math.min( 460 - 1, 461 - Math.abs(cr.width-r.width)/ 462 - Math.max(1,cr.width) 463 - ); 562 + var badge= 563 + document.createElement( 564 + "span" 565 + ); 464 464 465 - var topFit= 466 - 1-Math.min( 467 - 1, 468 - Math.abs(cr.top-r.top)/100 469 - ); 567 + badge.className= 568 + "sn-coming-soon-badge"; 470 470 471 - var score= 472 - widthFit*6+ 473 - topFit*3+ 474 - Math.min(r.height,900)/450+ 475 - Math.min(r.width*r.height,900000)/900000; 570 + badge.textContent= 571 + PLACEHOLDER_LABEL; 476 476 477 - if(score>bestScore){ 478 - best=el; 479 - bestScore=score; 480 - } 481 - } 573 + badge.setAttribute( 574 + "aria-label", 575 + PLACEHOLDER_LABEL 576 + ); 482 482 483 - if(item.depth<SEARCH_DEPTH){ 484 - Array.from(el.children||[]).forEach(function(next){ 485 - q.push({ 486 - el:next, 487 - depth:item.depth+1 488 - }); 489 - }); 490 - } 491 - } 492 - 493 - return best; 578 + title.appendChild( 579 + badge 580 + ); 494 494 } 495 495 496 - function groupsByVisualRow(entries){ 497 - var groups=[]; 583 + /* ======================================================= 584 + DETAIL PAGE OWN-ACCENT PROPAGATION 585 + ======================================================= */ 498 498 499 - entries 500 - .slice() 501 - .sort(function(a,b){ 502 - return ( 503 - a.rect.top-b.rect.top|| 504 - a.rect.left-b.rect.left 505 - ); 506 - }) 507 - .forEach(function(entry){ 508 - var group=null; 587 + function parseRGB(value){ 588 + var match=String(value||"").match( 589 + /rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)/i 590 + ); 509 509 510 - for(var i=0;i<groups.length;i++){ 511 - if( 512 - Math.abs( 513 - groups[i].top- 514 - entry.rect.top 515 - )<=ROW_TOLERANCE 516 - ){ 517 - group=groups[i]; 518 - break; 519 - } 520 - } 592 + if(!match)return null; 521 521 522 - if(!group){ 523 - group={ 524 - top:entry.rect.top, 525 - entries:[] 526 - }; 527 - groups.push(group); 528 - } 594 + return [ 595 + Number(match[1]), 596 + Number(match[2]), 597 + Number(match[3]) 598 + ]; 599 + } 529 529 530 - group.entries.push(entry); 531 - }); 532 - 533 - return groups; 601 + function distance(a,b){ 602 + return Math.sqrt( 603 + Math.pow(a[0]-b[0],2)+ 604 + Math.pow(a[1]-b[1],2)+ 605 + Math.pow(a[2]-b[2],2) 606 + ); 534 534 } 535 535 536 - function validHorizontalGroup(group){537 - if(group.entries.length<2)return false;609 + function paletteMatch(cssColor){ 610 + var rgb=parseRGB(cssColor); 538 538 539 - var lefts= 540 - group.entries 541 - .map(function(e){return e.rect.left;}) 542 - .sort(function(a,b){return a-b;}); 612 + if(!rgb)return null; 543 543 544 - if( 545 - lefts[lefts.length-1]- 546 - lefts[0]< 547 - 80 548 - ){ 549 - return false; 550 - } 614 + var palette=[ 615 + {hex:"#21b6d7",rgb:[33,182,215]}, 616 + {hex:"#e94b13",rgb:[233,75,19]}, 617 + {hex:"#f0aa00",rgb:[240,170,0]}, 618 + {hex:"#38b76a",rgb:[56,183,106]} 619 + ]; 551 551 552 - var widths= 553 - group.entries 554 - .map(function(e){return e.rect.width;}) 555 - .filter(function(w){return w>0;}); 621 + var best=null; 622 + var bestDistance=Infinity; 556 556 557 - if(widths.length<2)return false; 624 + palette.forEach(function(item){ 625 + var d=distance(rgb,item.rgb); 558 558 559 - var minWidth=Math.min.apply(Math,widths); 560 - var maxWidth=Math.max.apply(Math,widths); 627 + if(d<bestDistance){ 628 + best=item; 629 + bestDistance=d; 630 + } 631 + }); 561 561 562 - return ( 563 - maxWidth/ 564 - Math.max(1,minWidth)<= 565 - 1.9 566 - ); 633 + return bestDistance<=30 634 + ?best 635 + :null; 567 567 } 568 568 569 - function normalizeText(text){ 570 - return String(text||"") 571 - .replace(/s+/g," ") 572 - .trim() 573 - .toUpperCase(); 574 - } 638 + function propagateDetailAccents(){ 639 + if(PAGE_KIND!=="detail")return; 575 575 576 - function exactKnownFirstSection(el){ 577 - var text=normalizeText(el.textContent); 578 - 579 - return ( 580 - text==="HIER STARTEN"|| 581 - text==="ORGANISIEREN & DOKUMENTIEREN"|| 582 - text==="ENTSCHEIDEN"|| 583 - text==="START HERE"|| 584 - text==="GET STARTED"|| 585 - text==="ORGANISE & DOCUMENT"|| 586 - text==="ORGANIZE & DOCUMENT"|| 587 - text==="DECIDE" 588 - ); 589 - } 590 - 591 - function visuallyFirstSectionBar(card){ 592 - var cardRect=card.getBoundingClientRect(); 593 - var candidates=[]; 594 - 595 595 Array.from( 596 - card.querySelectorAll( 597 - "div,p,span,strong,h3,h4,h5,h6" 642 + root.querySelectorAll( 643 + ".arsn-call,.dmp-call,.ido-call,.pp-call,"+ 644 + ".arsn-source,.dmp-source,.ido-source,.pp-source" 598 598 ) 599 599 ).forEach(function(el){ 600 - if(!visible(el,20,6))return; 601 - if(excluded(el))return; 647 + if(!visible(el))return; 602 602 603 - var r=el.getBoundingClientRect(); 604 - var relativeTop=r.top-cardRect.top; 649 + var style=getComputedStyle(el); 605 605 606 606 if( 607 - relativeTop<45|| 608 - relativeTop>cardRect.height*.72 652 + num(style.borderTopWidth)>=2 609 609 ){ 610 - return; 654 + var match= 655 + paletteMatch( 656 + style.borderTopColor 657 + ); 658 + 659 + if(match){ 660 + el.style.setProperty( 661 + "border-left", 662 + "4px solid "+match.hex, 663 + "important" 664 + ); 665 + } 611 611 } 667 + }); 612 612 613 - var widthRatio= 614 - r.width/ 615 - Math.max(1,cardRect.width); 669 + // Warning families: explicit safety override. 670 + Array.from( 671 + root.querySelectorAll( 672 + ".arsn-warn,.dmp-warn,.ido-warn,.pp-warn,"+ 673 + ".warn,.warning,.warningmessage,.errormessage" 674 + ) 675 + ).forEach(function(el){ 676 + if(!visible(el))return; 616 616 617 - if( 618 - widthRatio<.55|| 619 - widthRatio>1.05|| 620 - r.height>54 621 - ){ 622 - return; 623 - } 678 + el.style.setProperty( 679 + "border-left", 680 + "4px solid #e94b13", 681 + "important" 682 + ); 683 + }); 624 624 625 - var text=normalizeText(el.textContent); 685 + // Info families: explicit orientation override. 686 + Array.from( 687 + root.querySelectorAll( 688 + ".arsn-info,.dmp-info,.ido-info,.pp-info,.infomessage" 689 + ) 690 + ).forEach(function(el){ 691 + if(!visible(el))return; 626 626 627 - if( 628 - text.length<2|| 629 - text.length>90 630 - ){ 631 - return; 632 - } 693 + el.style.setProperty( 694 + "border-left", 695 + "4px solid #21b6d7", 696 + "important" 697 + ); 698 + }); 699 + } 633 633 634 - var style=getComputedStyle(el); 701 + /* ======================================================= 702 + OVERVIEW SEMANTIC THEME PALETTE 703 + ======================================================= */ 635 635 636 - var bg= 637 - style.backgroundColor&& 638 - style.backgroundColor!=="rgba(0, 0, 0, 0)"&& 639 - style.backgroundColor!=="transparent"; 705 + function smallestThemeHeaders(){ 706 + return Array.from( 707 + root.querySelectorAll( 708 + "div,span,p,strong,h3,h4,h5,h6" 709 + ) 710 + ).filter(function(el){ 711 + if(!visible(el))return false; 712 + if(!themeFor(el.textContent))return false; 640 640 714 + return !Array.from( 715 + el.children||[] 716 + ).some(function(child){ 717 + return !!themeFor( 718 + child.textContent 719 + ); 720 + }); 721 + }); 722 + } 723 + 724 + function findOverviewCard(header){ 725 + var node=header.parentElement; 726 + var candidates=[]; 727 + 728 + while(node&&node!==root){ 729 + var rect=node.getBoundingClientRect(); 730 + var style=getComputedStyle(node); 731 + 641 641 var border= 642 642 num(style.borderTopWidth)+ 643 643 num(style.borderRightWidth)+ ... ... @@ -644,315 +644,674 @@ 644 644 num(style.borderBottomWidth)+ 645 645 num(style.borderLeftWidth); 646 646 647 - var mostlyUpper= 648 - text.length>=3&& 649 - text===text.toUpperCase(); 650 - 651 - var exact=exactKnownFirstSection(el); 652 - 653 - var score= 654 - (exact?20:0)+ 655 - (bg?6:0)+ 656 - (border>=1?2:0)+ 657 - (mostlyUpper?4:0)+ 658 - (num(style.fontWeight)>=600?1:0); 659 - 660 - if(score>=7){ 661 - candidates.push({ 662 - el:el, 663 - relativeTop:relativeTop, 664 - width:r.width, 665 - score:score 666 - }); 738 + if( 739 + rect.width>=220&& 740 + rect.width<=800&& 741 + rect.height>=120&& 742 + border>=1 743 + ){ 744 + candidates.push(node); 667 667 } 668 - }); 669 669 747 + node=node.parentElement; 748 + } 749 + 670 670 if(!candidates.length)return null; 671 671 672 672 candidates.sort(function(a,b){ 673 - if(a.score!==b.score)return b.score-a.score; 674 - if(Math.abs(a.relativeTop-b.relativeTop)>3){ 675 - return a.relativeTop-b.relativeTop; 676 - } 677 - return b.width-a.width; 753 + return ( 754 + b.getBoundingClientRect().height- 755 + a.getBoundingClientRect().height 756 + ); 678 678 }); 679 679 680 - // For exact known labels always prefer the earliest exact match. 681 - var exacts=candidates.filter(function(c){ 682 - return exactKnownFirstSection(c.el); 683 - }); 759 + return candidates[0]; 760 + } 684 684 685 - if(exacts.length){ 686 - exacts.sort(function(a,b){ 687 - return a.relativeTop-b.relativeTop||b.width-a.width; 688 - }); 689 - return exacts[0].el; 690 - } 762 + function rowCandidates(link,card){ 763 + var result=[]; 764 + var cardRect= 765 + card.getBoundingClientRect(); 691 691 692 - // Generic fallback: earliest high-confidence bar. 693 - candidates.sort(function(a,b){ 694 - return a.relativeTop-b.relativeTop||b.score-a.score||b.width-a.width; 695 - }); 767 + var node=link; 696 696 697 - return candidates[0].el; 698 - } 769 + while(node&&node!==card){ 770 + if(visible(node)){ 771 + var rect= 772 + node.getBoundingClientRect(); 699 699 700 - function alignFirstSections(cards){ 701 - var rows= 702 - cards.map(function(card){ 703 - var bar= 704 - visuallyFirstSectionBar(card); 774 + if( 775 + rect.height<=105&& 776 + rect.width>= 777 + cardRect.width*.50&& 778 + rect.width<= 779 + cardRect.width*1.03 780 + ){ 781 + result.push(node); 782 + } 783 + } 705 705 706 - if(!bar)return null; 785 + node=node.parentElement; 786 + } 707 707 708 - varcardRect=709 - card.getBoundingClientRect();788 + return result; 789 + } 710 710 711 - var barRect= 712 - bar.getBoundingClientRect(); 791 + function chooseOuterRow( 792 + candidates, 793 + link 794 + ){ 795 + if(!candidates.length){ 796 + return link; 797 + } 713 713 714 - return {715 - card:card,716 - bar:bar,717 - relativeTop:718 - barRect.top-cardRect.top,719 - label:720 - normalizeText(bar.textContent)721 - };799 + var bordered= 800 + candidates.filter(function(el){ 801 + return ( 802 + num( 803 + getComputedStyle(el) 804 + .borderLeftWidth 805 + )>=1 806 + ); 722 722 }); 723 723 724 - // Conservative: only align when every card in the horizontal row 725 - // has a reliable first section bar. 726 - if( 727 - rows.some(function(row){ 728 - return !row; 729 - }) 730 - ){ 731 - return null; 809 + var pool= 810 + bordered.length 811 + ?bordered 812 + :candidates; 813 + 814 + pool.sort(function(a,b){ 815 + var ar= 816 + a.getBoundingClientRect(); 817 + 818 + var br= 819 + b.getBoundingClientRect(); 820 + 821 + return ( 822 + ar.left-br.left|| 823 + br.width-ar.width 824 + ); 825 + }); 826 + 827 + return pool[0]||link; 828 + } 829 + 830 + function applyOverviewPalette(){ 831 + if(PAGE_KIND!=="overview"){ 832 + return []; 732 732 } 733 733 734 - var targetTop= 735 - Math.max.apply( 736 - Math, 737 - rows.map(function(row){ 738 - return row.relativeTop; 835 + var headers= 836 + smallestThemeHeaders() 837 + .map(function(el){ 838 + return { 839 + el:el, 840 + theme: 841 + themeFor( 842 + el.textContent 843 + ), 844 + card: 845 + findOverviewCard( 846 + el 847 + ) 848 + }; 739 739 }) 740 - ); 850 + .filter(function(row){ 851 + return !!row.card; 852 + }); 741 741 742 - rows.forEach(function(row){ 743 - var delta= 744 - targetTop- 745 - row.relativeTop; 854 + var unique=[]; 855 + var seenHeaders=new Set(); 746 746 747 - if(delta<=1)return; 857 + headers.forEach(function(row){ 858 + var key= 859 + row.theme.name+ 860 + "|"+ 861 + Math.round( 862 + row.card 863 + .getBoundingClientRect() 864 + .left 865 + )+ 866 + "|"+ 867 + Math.round( 868 + row.el 869 + .getBoundingClientRect() 870 + .top 871 + ); 748 748 749 - saveOriginal( 750 - row.bar, 751 - originalMarginTop, 752 - "margin-top" 873 + if(!seenHeaders.has(key)){ 874 + seenHeaders.add(key); 875 + unique.push(row); 876 + } 877 + }); 878 + 879 + unique.forEach(function(row){ 880 + var headerRect= 881 + row.el 882 + .getBoundingClientRect(); 883 + 884 + row.el.style.setProperty( 885 + "background", 886 + row.theme.bg, 887 + "important" 753 753 ); 754 754 755 - var currentMargin= 756 - num( 757 - getComputedStyle( 758 - row.bar 759 - ).marginTop 760 - ); 890 + row.el.style.setProperty( 891 + "color", 892 + row.theme.text, 893 + "important" 894 + ); 761 761 762 - row.bar.style.setProperty( 763 - "margin-top", 764 - ( 765 - currentMargin+ 766 - delta 767 - )+"px" 896 + row.el.style.setProperty( 897 + "text-align", 898 + "left", 899 + "important" 768 768 ); 769 769 770 - row.bar.setAttribute( 771 - "data-sn-first-section-aligned", 772 - "4" 902 + row.el.style.setProperty( 903 + "word-spacing", 904 + "normal", 905 + "important" 773 773 ); 774 774 775 - sectionManaged.add(row.bar); 908 + var later= 909 + unique 910 + .filter(function(other){ 911 + return ( 912 + other.card===row.card&& 913 + other.el 914 + .getBoundingClientRect() 915 + .top> 916 + headerRect.top+2 917 + ); 918 + }) 919 + .sort(function(a,b){ 920 + return ( 921 + a.el 922 + .getBoundingClientRect() 923 + .top- 924 + b.el 925 + .getBoundingClientRect() 926 + .top 927 + ); 928 + }); 929 + 930 + var stopTop= 931 + later.length 932 + ?later[0].el 933 + .getBoundingClientRect() 934 + .top 935 + :Infinity; 936 + 937 + Array.from( 938 + row.card.querySelectorAll("a") 939 + ).forEach(function(link){ 940 + if(!visible(link))return; 941 + 942 + var rect= 943 + link.getBoundingClientRect(); 944 + 945 + if( 946 + rect.top<= 947 + headerRect.bottom-2|| 948 + rect.top>= 949 + stopTop-2 950 + ){ 951 + return; 952 + } 953 + 954 + var candidates= 955 + rowCandidates( 956 + link, 957 + row.card 958 + ); 959 + 960 + var target= 961 + chooseOuterRow( 962 + candidates, 963 + link 964 + ); 965 + 966 + candidates.forEach(function(el){ 967 + el.style.setProperty( 968 + "border-left", 969 + "0 solid transparent", 970 + "important" 971 + ); 972 + }); 973 + 974 + target.style.setProperty( 975 + "border-left", 976 + "3px solid "+ 977 + row.theme.accent, 978 + "important" 979 + ); 980 + 981 + target.style.setProperty( 982 + "box-sizing", 983 + "border-box", 984 + "important" 985 + ); 986 + }); 776 776 }); 777 777 778 - return { 779 - labels: 780 - rows.map(function(row){ 781 - return row.label; 782 - }), 783 - targetRelativeTop: 784 - Math.round(targetTop) 785 - }; 989 + return unique; 786 786 } 787 787 788 - function applyGroup(group){ 789 - if(!validHorizontalGroup(group)){ 790 - return null; 992 + /* ======================================================= 993 + OVERVIEW CARD HEIGHT + FIRST THEMATIC ROW 994 + ======================================================= */ 995 + 996 + function alignOverviewCards(headers){ 997 + if( 998 + PAGE_KIND!=="overview"|| 999 + window.innerWidth<=MOBILE_MAX 1000 + ){ 1001 + return; 791 791 } 792 792 793 793 var cards=[]; 794 794 var seen=new Set(); 795 795 796 - group.entries.forEach(function(entry){797 - if(!seen.has( entry.target)){798 - seen.add( entry.target);799 - cards.push( entry.target);1007 + headers.forEach(function(row){ 1008 + if(!seen.has(row.card)){ 1009 + seen.add(row.card); 1010 + cards.push(row.card); 800 800 } 801 801 }); 802 802 803 - if(cards.length<2)return null; 1014 + if(cards.length<2){ 1015 + return; 1016 + } 804 804 805 - varfirstSection=806 - alignFirstSections(cards);1018 + // Group cards by actual top position. 1019 + var groups=[]; 807 807 808 - // The section alignment can change natural card heights. 809 - // Measure only afterwards. 810 - var maxHeight=0; 811 - 812 812 cards.forEach(function(card){ 813 - maxHeight=Math.max( 814 - maxHeight, 815 - card.getBoundingClientRect().height 816 - ); 1022 + var top= 1023 + card.getBoundingClientRect().top; 1024 + 1025 + var group=null; 1026 + 1027 + for(var i=0;i<groups.length;i++){ 1028 + if( 1029 + Math.abs( 1030 + groups[i].top-top 1031 + )<=ROW_TOLERANCE 1032 + ){ 1033 + group=groups[i]; 1034 + break; 1035 + } 1036 + } 1037 + 1038 + if(!group){ 1039 + group={ 1040 + top:top, 1041 + cards:[] 1042 + }; 1043 + groups.push(group); 1044 + } 1045 + 1046 + group.cards.push(card); 817 817 }); 818 818 819 - maxHeight=Math.ceil(maxHeight); 1049 + groups.forEach(function(group){ 1050 + if(group.cards.length<2){ 1051 + return; 1052 + } 820 820 821 - if(maxHeight<MIN_H)return null; 1054 + var firstHeaders= 1055 + group.cards.map(function(card){ 1056 + var candidates= 1057 + headers 1058 + .filter(function(row){ 1059 + return row.card===card; 1060 + }) 1061 + .sort(function(a,b){ 1062 + return ( 1063 + a.el 1064 + .getBoundingClientRect() 1065 + .top- 1066 + b.el 1067 + .getBoundingClientRect() 1068 + .top 1069 + ); 1070 + }); 822 822 823 - cards.forEach(function(card){ 824 - saveOriginal( 825 - card, 826 - originalMinHeight, 827 - "min-height" 828 - ); 1072 + return candidates.length 1073 + ?candidates[0] 1074 + :null; 1075 + }); 829 829 830 - card.style.setProperty( 831 - "min-height", 832 - maxHeight+"px" 833 - ); 1077 + if( 1078 + !firstHeaders.some(function(row){ 1079 + return !row; 1080 + }) 1081 + ){ 1082 + var targetTop= 1083 + Math.max.apply( 1084 + Math, 1085 + firstHeaders.map(function(row){ 1086 + return ( 1087 + row.el 1088 + .getBoundingClientRect() 1089 + .top- 1090 + row.card 1091 + .getBoundingClientRect() 1092 + .top 1093 + ); 1094 + }) 1095 + ); 834 834 835 - card.setAttribute( 836 - "data-sn-equal-height-managed", 837 - "4" 838 - ); 1097 + firstHeaders.forEach(function(row){ 1098 + var relativeTop= 1099 + row.el 1100 + .getBoundingClientRect() 1101 + .top- 1102 + row.card 1103 + .getBoundingClientRect() 1104 + .top; 839 839 840 - heightManaged.add(card);841 - });1106 + var delta= 1107 + targetTop-relativeTop; 842 842 843 - return { 844 - cards:cards.length, 845 - height:maxHeight, 846 - firstSection:firstSection 847 - }; 1109 + if(delta>1){ 1110 + saveStyle( 1111 + row.el, 1112 + originalMargin, 1113 + "margin-top" 1114 + ); 1115 + 1116 + var current= 1117 + num( 1118 + getComputedStyle( 1119 + row.el 1120 + ).marginTop 1121 + ); 1122 + 1123 + row.el.style.setProperty( 1124 + "margin-top", 1125 + ( 1126 + current+delta 1127 + )+"px" 1128 + ); 1129 + 1130 + row.el.setAttribute( 1131 + "data-sn-master-first-row", 1132 + "1" 1133 + ); 1134 + 1135 + managedMargin.add( 1136 + row.el 1137 + ); 1138 + } 1139 + }); 1140 + } 1141 + 1142 + var maxHeight=0; 1143 + 1144 + group.cards.forEach(function(card){ 1145 + maxHeight= 1146 + Math.max( 1147 + maxHeight, 1148 + card 1149 + .getBoundingClientRect() 1150 + .height 1151 + ); 1152 + }); 1153 + 1154 + maxHeight= 1155 + Math.ceil(maxHeight); 1156 + 1157 + group.cards.forEach(function(card){ 1158 + saveStyle( 1159 + card, 1160 + originalHeight, 1161 + "min-height" 1162 + ); 1163 + 1164 + card.style.setProperty( 1165 + "min-height", 1166 + maxHeight+"px" 1167 + ); 1168 + 1169 + card.setAttribute( 1170 + "data-sn-master-equal-height", 1171 + "1" 1172 + ); 1173 + 1174 + managedHeight.add( 1175 + card 1176 + ); 1177 + }); 1178 + }); 848 848 } 849 849 850 - function run(){ 851 - reset(); 1181 + /* ======================================================= 1182 + DETAIL GRID EQUAL HEIGHT, DESKTOP ONLY 1183 + ======================================================= */ 852 852 1185 + function equaliseDetailGrids(){ 853 853 if( 1187 + PAGE_KIND!=="detail"|| 854 854 window.innerWidth<=MOBILE_MAX 855 855 ){ 856 856 return; 857 857 } 858 858 859 - var parents= 1193 + var selectors=[ 1194 + ".arsn-grid", 1195 + ".arsn-grid-2", 1196 + ".arsn-grid-3", 1197 + ".dmp-grid", 1198 + ".ido-grid", 1199 + ".pp-grid" 1200 + ]; 1201 + 1202 + selectors.forEach(function(selector){ 860 860 Array.from( 861 - root.querySelectorAll("*") 862 - ).filter(function(parent){ 863 - return ( 864 - visible(parent,MIN_W,MIN_H)&& 865 - parent.children&& 866 - parent.children.length>=2&& 867 - parent.children.length<=MAX_PARENT_CHILDREN 868 - ); 869 - }); 1204 + root.querySelectorAll(selector) 1205 + ).forEach(function(grid){ 1206 + var children= 1207 + Array.from( 1208 + grid.children||[] 1209 + ).filter(visible); 870 870 871 - var touched=new Set(); 1211 + if(children.length<2){ 1212 + return; 1213 + } 872 872 873 - parents.forEach(function(parent){ 874 - var entries=[]; 1215 + var groups=[]; 875 875 876 - Array.from(parent.children).forEach(function(child){ 877 - if(!visible(child,MIN_W,MIN_H))return; 1217 + children.forEach(function(child){ 1218 + var top= 1219 + child 1220 + .getBoundingClientRect() 1221 + .top; 878 878 879 - var target=pickTarget(child); 880 - if(!target)return; 1223 + var group=null; 881 881 882 - entries.push({ 883 - target:target, 884 - rect:target.getBoundingClientRect() 1225 + for(var i=0;i<groups.length;i++){ 1226 + if( 1227 + Math.abs( 1228 + groups[i].top-top 1229 + )<=ROW_TOLERANCE 1230 + ){ 1231 + group=groups[i]; 1232 + break; 1233 + } 1234 + } 1235 + 1236 + if(!group){ 1237 + group={ 1238 + top:top, 1239 + items:[] 1240 + }; 1241 + groups.push(group); 1242 + } 1243 + 1244 + group.items.push(child); 885 885 }); 886 - }); 887 887 888 - if(entries.length<2)return; 1247 + groups.forEach(function(group){ 1248 + if(group.items.length<2){ 1249 + return; 1250 + } 889 889 890 - groupsByVisualRow(entries).forEach(function(group){ 891 - if(!validHorizontalGroup(group))return; 1252 + var maxHeight=0; 892 892 893 - var signature= 894 - group.entries.map(function(entry){ 895 - return entry.target; 1254 + group.items.forEach(function(item){ 1255 + maxHeight= 1256 + Math.max( 1257 + maxHeight, 1258 + item 1259 + .getBoundingClientRect() 1260 + .height 1261 + ); 896 896 }); 897 897 898 - if( 899 - !signature.some(function(el){ 900 - return !touched.has(el); 901 - }) 902 - ){ 903 - return; 904 - } 1264 + maxHeight= 1265 + Math.ceil(maxHeight); 905 905 906 - var applied= 907 - applyGroup(group); 1267 + group.items.forEach(function(item){ 1268 + saveStyle( 1269 + item, 1270 + originalHeight, 1271 + "min-height" 1272 + ); 908 908 909 - if(applied){ 910 - signature.forEach(function(el){ 911 - touched.add(el); 1274 + item.style.setProperty( 1275 + "min-height", 1276 + maxHeight+"px" 1277 + ); 1278 + 1279 + item.setAttribute( 1280 + "data-sn-master-equal-height", 1281 + "1" 1282 + ); 1283 + 1284 + managedHeight.add(item); 912 912 }); 913 - } 1286 + }); 914 914 }); 915 915 }); 916 916 } 917 917 918 - function schedule(){ 919 - if(raf)cancelAnimationFrame(raf); 1291 + /* ======================================================= 1292 + RUN / RESPONSIVE SCHEDULING 1293 + ======================================================= */ 920 920 921 - raf=requestAnimationFrame(function(){ 922 - raf=requestAnimationFrame(function(){ 923 - raf=0; 924 - run(); 925 - }); 926 - }); 1295 + function run(){ 1296 + if(running)return; 1297 + 1298 + running=true; 1299 + 1300 + try{ 1301 + resetRuntime(); 1302 + applyPlaceholderBadge(); 1303 + propagateDetailAccents(); 1304 + 1305 + var headers= 1306 + applyOverviewPalette(); 1307 + 1308 + if( 1309 + window.innerWidth> 1310 + MOBILE_MAX 1311 + ){ 1312 + alignOverviewCards( 1313 + headers 1314 + ); 1315 + 1316 + equaliseDetailGrids(); 1317 + } 1318 + }finally{ 1319 + running=false; 1320 + } 927 927 } 928 928 929 - addEventListener("resize",schedule,{passive:true}); 930 - addEventListener("load",schedule,{once:true}); 1323 + function onResize(){ 1324 + if(resizeTimer){ 1325 + clearTimeout( 1326 + resizeTimer 1327 + ); 1328 + } 931 931 932 - root.addEventListener( 933 - "click", 934 - function(){ 935 - setTimeout(schedule,0); 936 - }, 937 - true 938 - ); 1330 + resizeTimer= 1331 + setTimeout( 1332 + function(){ 1333 + resizeTimer=0; 1334 + run(); 1335 + }, 1336 + RESIZE_DEBOUNCE 1337 + ); 1338 + } 939 939 940 - Array.from(root.querySelectorAll("img")).forEach(function(img){ 941 - if(!img.complete){ 942 - img.addEventListener("load",schedule,{once:true}); 1340 + async function waitForReady(){ 1341 + if( 1342 + document.readyState!=="complete" 1343 + ){ 1344 + await new Promise(function(resolve){ 1345 + window.addEventListener( 1346 + "load", 1347 + resolve, 1348 + {once:true} 1349 + ); 1350 + }); 943 943 } 944 - }); 945 945 946 - if(document.fonts&&document.fonts.ready){ 947 - document.fonts.ready.then(schedule); 1353 + if( 1354 + document.fonts&& 1355 + document.fonts.ready 1356 + ){ 1357 + try{ 1358 + await document.fonts.ready; 1359 + }catch(error){} 1360 + } 1361 + 1362 + var images= 1363 + Array.from( 1364 + root.querySelectorAll("img") 1365 + ); 1366 + 1367 + await Promise.all( 1368 + images.map(function(img){ 1369 + if(img.complete){ 1370 + return Promise.resolve(); 1371 + } 1372 + 1373 + return new Promise(function(resolve){ 1374 + var done=function(){ 1375 + resolve(); 1376 + }; 1377 + 1378 + img.addEventListener( 1379 + "load", 1380 + done, 1381 + {once:true} 1382 + ); 1383 + 1384 + img.addEventListener( 1385 + "error", 1386 + done, 1387 + {once:true} 1388 + ); 1389 + }); 1390 + }) 1391 + ); 1392 + 1393 + run(); 948 948 } 949 949 950 - schedule(); 951 - setTimeout(schedule,200); 952 - setTimeout(schedule,650); 953 - setTimeout(schedule,1400); 1396 + window.addEventListener( 1397 + "resize", 1398 + onResize, 1399 + {passive:true} 1400 + ); 1401 + 1402 + waitForReady(); 954 954 })(); 955 955 </script> 956 -<!-- SN_HORIZONTAL_BOX_HARMONIZER_END --> 1405 + 1406 +<!-- SN_SERVICE_NAVIGATOR_MASTER_STYLE_END --> 957 957 {{/html}} 958 958