Changes for page Project Planning & Organisation
Last modified by Veronika Kocher on Friday, 04 Sep 2026 14:45
From version 9.4
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 9.7
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
-
... ... @@ -426,23 +426,132 @@ 426 426 {{/html}} 427 427 428 428 {{html clean="false"}} 429 -<!-- SN_HORIZONTAL_BOX_HARMONIZER_START --> 430 -<style data-sn-horizontal-box-harmonizer="4"> 431 -[data-sn-equal-height-managed], 432 -[data-sn-first-section-aligned]{ 429 +<!-- SN_SERVICE_NAVIGATOR_MASTER_STYLE_START --> 430 + 431 +<style data-sn-service-navigator-master="1"> 432 +/* ========================================================= 433 + MASTER TYPOGRAPHY 434 + ========================================================= */ 435 +#xwikicontent h1, 436 +#xwikicontent h2, 437 +#xwikicontent h3, 438 +#xwikicontent h4, 439 +#xwikicontent h5, 440 +#xwikicontent h6, 441 +#xwikicontent .box-title, 442 +#xwikicontent [role="heading"], 443 +#xwikicontent h1 a, 444 +#xwikicontent h2 a, 445 +#xwikicontent h3 a, 446 +#xwikicontent h4 a, 447 +#xwikicontent h5 a, 448 +#xwikicontent h6 a, 449 +#xwikicontent .box-title a, 450 +#xwikicontent [role="heading"] a{ 451 + text-align:left!important; 452 + text-justify:auto!important; 453 + word-spacing:normal!important; 454 +} 455 + 456 +/* ========================================================= 457 + COMING SOON / IN VORBEREITUNG 458 + ========================================================= */ 459 +.sn-coming-soon-badge{ 460 + display:inline-block; 461 + vertical-align:middle; 462 + margin-left:10px; 463 + padding:4px 8px; 464 + border-radius:14px; 465 + border:1px solid #efd9cc; 466 + background:#fff4ee; 467 + color:#8a4d36; 468 + font-size:11px; 469 + font-weight:700; 470 + letter-spacing:.055em; 471 + line-height:1.2; 472 + white-space:nowrap; 473 +} 474 + 475 +/* ========================================================= 476 + NATIVE / DETAIL CALLOUT GEOMETRY 477 + Preserve existing backgrounds. 478 + ========================================================= */ 479 +#xwikicontent .arsn-info, 480 +#xwikicontent .dmp-info, 481 +#xwikicontent .ido-info, 482 +#xwikicontent .pp-info, 483 +#xwikicontent .infomessage{ 484 + box-sizing:border-box!important; 485 + border-left:4px solid #21b6d7!important; 486 + border-radius:8px; 487 + text-align:left!important; 488 + word-spacing:normal!important; 489 +} 490 + 491 +#xwikicontent .arsn-warn, 492 +#xwikicontent .dmp-warn, 493 +#xwikicontent .ido-warn, 494 +#xwikicontent .pp-warn, 495 +#xwikicontent .warn, 496 +#xwikicontent .warning, 497 +#xwikicontent .warningmessage, 498 +#xwikicontent .errormessage{ 499 + box-sizing:border-box!important; 500 + border-left:4px solid #e94b13!important; 501 + border-radius:8px; 502 + text-align:left!important; 503 + word-spacing:normal!important; 504 +} 505 + 506 +[data-sn-master-equal-height], 507 +[data-sn-master-first-row]{ 433 433 box-sizing:border-box; 434 434 } 510 + 511 +/* ========================================================= 512 + FULL-WIDTH THREE-LINE NUMBER / TITLE / SUBTITLE BLOCKS 513 + ========================================================= */ 514 +#xwikicontent .arsn-area-label[data-sn-three-line="1"]{ 515 + display:grid!important; 516 + grid-template-columns:minmax(0,1fr)!important; 517 + grid-auto-rows:auto!important; 518 + width:100%!important; 519 + max-width:none!important; 520 + box-sizing:border-box!important; 521 + justify-items:start!important; 522 + align-items:start!important; 523 + gap:2px!important; 524 + text-align:left!important; 525 + text-align-last:left!important; 526 + text-justify:auto!important; 527 + word-spacing:normal!important; 528 + white-space:normal!important; 529 +} 530 +#xwikicontent .arsn-area-label[data-sn-three-line="1"] > .arsn-area-number, 531 +#xwikicontent .arsn-area-label[data-sn-three-line="1"] > .sn-area-label-title, 532 +#xwikicontent .arsn-area-label[data-sn-three-line="1"] > .arsn-area-action{ 533 + display:block!important; 534 + width:100%!important; 535 + margin:0!important; 536 + text-align:left!important; 537 + text-align-last:left!important; 538 + text-justify:auto!important; 539 + word-spacing:normal!important; 540 + white-space:normal!important; 541 +} 435 435 </style> 436 -<script data-sn-horizontal-box-harmonizer="4"> 543 + 544 +<script data-sn-service-navigator-master="1"> 437 437 (function(){ 438 438 "use strict"; 439 439 548 + var PAGE_KIND="detail"; 549 + var PLACEHOLDER=false; 550 + var PLACEHOLDER_LABEL="COMING SOON"; 551 + 440 440 var MOBILE_MAX=767; 441 441 var ROW_TOLERANCE=6; 442 - var MIN_W=150; 443 - var MIN_H=36; 444 - var MAX_PARENT_CHILDREN=16; 445 - var SEARCH_DEPTH=5; 554 + var RESIZE_DEBOUNCE=220; 446 446 447 447 var root= 448 448 document.getElementById("xwikicontent")|| ... ... @@ -452,93 +452,105 @@ 452 452 453 453 if(!root)return; 454 454 455 - var heightManaged=new Set(); 456 - var sectionManaged=new Set(); 457 - var originalMinHeight=new WeakMap(); 458 - var originalMarginTop=new WeakMap(); 459 - var raf=0; 564 + var managedHeight=new Set(); 565 + var managedMargin=new Set(); 566 + var originalHeight=new WeakMap(); 567 + var originalMargin=new WeakMap(); 460 460 461 - function num(v){ 462 - var n=parseFloat(v); 463 - return Number.isFinite(n)?n:0; 464 - } 569 + var resizeTimer=0; 570 + var running=false; 465 465 466 - function visible(el,minW,minH){ 467 - if(!el||el.nodeType!==1)return false; 468 - 469 - var s=getComputedStyle(el); 470 - 471 - if( 472 - s.display==="none"|| 473 - s.visibility==="hidden"|| 474 - Number(s.opacity)===0 475 - ){ 476 - return false; 572 + var THEMES=[ 573 + { 574 + name:"BLUE", 575 + accent:"#21b6d7", 576 + bg:"#eaf7fb", 577 + text:"#315d68", 578 + labels:[ 579 + "HIER STARTEN", 580 + "ENTSCHEIDEN", 581 + "ÜBERPRÜFEN & ANPASSEN", 582 + "START HERE", 583 + "DECIDE", 584 + "REVIEW & ADAPT" 585 + ] 586 + }, 587 + { 588 + name:"RED", 589 + accent:"#e94b13", 590 + bg:"#fff1ec", 591 + text:"#8a4d36", 592 + labels:[ 593 + "PLANEN & ORGANISIEREN", 594 + "ORGANISIEREN & DOKUMENTIEREN", 595 + "PUBLIZIEREN & PRÄSENTIEREN", 596 + "PLAN & ORGANISE", 597 + "PLAN & ORGANIZE", 598 + "ORGANISE & DOCUMENT", 599 + "ORGANIZE & DOCUMENT", 600 + "PUBLISH & PRESENT" 601 + ] 602 + }, 603 + { 604 + name:"YELLOW", 605 + accent:"#f0aa00", 606 + bg:"#fff8e7", 607 + text:"#785b17", 608 + labels:[ 609 + "SCHÜTZEN & KLÄREN", 610 + "STANDARDISIEREN & IDENTIFIZIEREN", 611 + "ÖFFNEN, NACHNUTZEN & AUFFINDBAR MACHEN", 612 + "PROTECT & CLARIFY", 613 + "STANDARDISE & IDENTIFY", 614 + "STANDARDIZE & IDENTIFY", 615 + "OPEN, REUSE & MAKE FINDABLE" 616 + ] 617 + }, 618 + { 619 + name:"GREEN", 620 + accent:"#38b76a", 621 + bg:"#edf9f1", 622 + text:"#3f7451", 623 + labels:[ 624 + "INFRASTRUKTUR EINRICHTEN", 625 + "INFRASTRUKTUR & ZUSAMMENARBEIT EINRICHTEN", 626 + "SPEICHERN & ZUGRIFF STEUERN", 627 + "REPOSITORIUM, ERHALTEN & ÜBERGEBEN", 628 + "SET UP INFRASTRUCTURE", 629 + "SET UP INFRASTRUCTURE & COLLABORATION", 630 + "STORE & CONTROL ACCESS", 631 + "REPOSITORY, PRESERVE & HAND OVER" 632 + ] 477 477 } 634 + ]; 478 478 479 - var r=el.getBoundingClientRect(); 480 - 481 - return ( 482 - r.width>=(minW||1)&& 483 - r.height>=(minH||1) 484 - ); 636 + function num(value){ 637 + var n=parseFloat(value); 638 + return Number.isFinite(n)?n:0; 485 485 } 486 486 487 - function excluded(el){ 488 - return ( 489 - !el.matches|| 490 - el.matches( 491 - "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]" 492 - ) 493 - ); 641 + function norm(value){ 642 + return String(value||"") 643 + .replace(/\s+/g," ") 644 + .trim() 645 + .toUpperCase(); 494 494 } 495 495 496 - function namedLikeBox(el){ 497 - var c= 498 - typeof el.className==="string" 499 - ? el.className 500 - : ""; 648 + function visible(el){ 649 + if(!el||el.nodeType!==1)return false; 501 501 502 - r eturn/(^|[s_-])(box|card|tile|panel|role|check|service|source|call|area|detail|resource|topic|warn|info)([s_-]|$)/i.test(c);503 - }651 + var style=getComputedStyle(el); 652 + var rect=el.getBoundingClientRect(); 504 504 505 - function boxLike(el){ 506 - if(!visible(el,MIN_W,MIN_H)||excluded(el))return false; 507 - 508 - var s=getComputedStyle(el); 509 - var r=el.getBoundingClientRect(); 510 - 511 - var border= 512 - num(s.borderTopWidth)+ 513 - num(s.borderRightWidth)+ 514 - num(s.borderBottomWidth)+ 515 - num(s.borderLeftWidth); 516 - 517 - var radius=Math.max( 518 - num(s.borderTopLeftRadius), 519 - num(s.borderTopRightRadius), 520 - num(s.borderBottomLeftRadius), 521 - num(s.borderBottomRightRadius) 522 - ); 523 - 524 - var bg= 525 - s.backgroundColor&& 526 - s.backgroundColor!=="rgba(0, 0, 0, 0)"&& 527 - s.backgroundColor!=="transparent"; 528 - 529 - var shadow= 530 - s.boxShadow&& 531 - s.boxShadow!=="none"; 532 - 533 533 return ( 534 - namedLikeBox(el)||535 - b order>=1||536 - (bg&&radius>=3)||537 - (shadow&&r.width>=180)655 + style.display!=="none"&& 656 + style.visibility!=="hidden"&& 657 + rect.width>20&& 658 + rect.height>4 538 538 ); 539 539 } 540 540 541 - function save Original(el,map,property){662 + function saveStyle(el,map,property){ 542 542 if(map.has(el))return; 543 543 544 544 map.set(el,{ ... ... @@ -547,7 +547,7 @@ 547 547 }); 548 548 } 549 549 550 - function restore Original(el,map,property){671 + function restoreStyle(el,map,property){ 551 551 var original=map.get(el); 552 552 553 553 if(original&&original.value){ ... ... @@ -561,247 +561,470 @@ 561 561 } 562 562 } 563 563 564 - function reset(){ 565 - heightManaged.forEach(function(el){566 - restore Original(685 + function resetRuntime(){ 686 + managedHeight.forEach(function(el){ 687 + restoreStyle( 567 567 el, 568 - original MinHeight,689 + originalHeight, 569 569 "min-height" 570 570 ); 571 - 572 572 el.removeAttribute( 573 - "data-sn-equal-height -managed"693 + "data-sn-master-equal-height" 574 574 ); 575 575 }); 576 576 577 - sectionManaged.forEach(function(el){578 - restore Original(697 + managedMargin.forEach(function(el){ 698 + restoreStyle( 579 579 el, 580 - originalMargin Top,700 + originalMargin, 581 581 "margin-top" 582 582 ); 583 - 584 584 el.removeAttribute( 585 - "data-sn-first- section-aligned"704 + "data-sn-master-first-row" 586 586 ); 587 587 }); 588 588 589 - heightManaged.clear();590 - sectionManaged.clear();708 + managedHeight.clear(); 709 + managedMargin.clear(); 591 591 } 592 592 593 - function pickTarget(child){594 - if(!visible(child,MIN_W,MIN_H))return null;712 + function themeFor(text){ 713 + var value=norm(text); 595 595 596 - if(boxLike(child)){ 597 - return child; 715 + for(var i=0;i<THEMES.length;i++){ 716 + for(var j=0;j<THEMES[i].labels.length;j++){ 717 + var label=THEMES[i].labels[j]; 718 + 719 + if( 720 + value===label|| 721 + value.indexOf(label+" ")===0|| 722 + value.indexOf(label+" -")===0|| 723 + value.indexOf(label+" ·")===0 724 + ){ 725 + return THEMES[i]; 726 + } 727 + } 598 598 } 599 599 600 - varcr=child.getBoundingClientRect();601 - var q=[];730 + return null; 731 + } 602 602 603 - Array.from(child.children||[]).forEach(function(el){ 604 - q.push({el:el,depth:1}); 733 + /* ======================================================= 734 + BORDERLESS FILLED RED/ORANGE CTA BUTTONS 735 + ======================================================= */ 736 + 737 + function colourDistance(a,b){ 738 + return Math.sqrt( 739 + Math.pow(a[0]-b[0],2)+ 740 + Math.pow(a[1]-b[1],2)+ 741 + Math.pow(a[2]-b[2],2) 742 + ); 743 + } 744 + 745 + function makeFilledRedOrangeCTAsBorderless(){ 746 + var RED_ORANGE=[233,75,19]; 747 + 748 + Array.from( 749 + root.querySelectorAll( 750 + 'a,button,[role="button"],input[type="submit"],input[type="button"]' 751 + ) 752 + ).forEach(function(el){ 753 + if(!visible(el))return; 754 + 755 + var style=getComputedStyle(el); 756 + var rgb=parseRGB(style.backgroundColor); 757 + 758 + if(!rgb)return; 759 + 760 + if( 761 + colourDistance( 762 + rgb, 763 + RED_ORANGE 764 + )>55 765 + ){ 766 + return; 767 + } 768 + 769 + var rect=el.getBoundingClientRect(); 770 + 771 + if( 772 + rect.width<80|| 773 + rect.height<24 774 + ){ 775 + return; 776 + } 777 + 778 + el.style.setProperty( 779 + "border", 780 + "none", 781 + "important" 782 + ); 783 + 784 + el.style.setProperty( 785 + "border-left", 786 + "none", 787 + "important" 788 + ); 789 + 790 + el.style.setProperty( 791 + "border-top", 792 + "none", 793 + "important" 794 + ); 795 + 796 + el.style.setProperty( 797 + "border-right", 798 + "none", 799 + "important" 800 + ); 801 + 802 + el.style.setProperty( 803 + "border-bottom", 804 + "none", 805 + "important" 806 + ); 807 + 808 + el.style.setProperty( 809 + "box-shadow", 810 + "none", 811 + "important" 812 + ); 605 605 }); 814 + } 606 606 607 - var best=null; 608 - var bestScore=-Infinity; 816 + /* ======================================================= 817 + FULL-WIDTH THREE-LINE AREA LABELS 818 + ======================================================= */ 609 609 610 - while(q.length){ 611 - var item=q.shift(); 612 - var el=item.el; 820 + function compactText(value){ 821 + return String(value||"") 822 + .replace(/\s+/g," ") 823 + .trim(); 824 + } 613 613 614 - if(!visible(el,MIN_W,MIN_H))continue; 826 + function makeThreeLineAreaLabels(){ 827 + Array.from( 828 + root.querySelectorAll( 829 + ".arsn-area-label" 830 + ) 831 + ).forEach(function(label){ 832 + if( 833 + label.getAttribute( 834 + "data-sn-three-line" 835 + )==="1" 836 + ){ 837 + return; 838 + } 615 615 616 - var r=el.getBoundingClientRect(); 840 + var number= 841 + label.querySelector( 842 + ":scope > .arsn-area-number" 843 + ); 617 617 845 + var action= 846 + label.querySelector( 847 + ":scope > .arsn-area-action" 848 + ); 849 + 618 618 if( 619 - r .width>=cr.width*.68&&620 - boxLike(el)851 + !number|| 852 + !action 621 621 ){ 622 - var widthFit= 623 - 1-Math.min( 624 - 1, 625 - Math.abs(cr.width-r.width)/ 626 - Math.max(1,cr.width) 627 - ); 854 + return; 855 + } 628 628 629 - var topFit= 630 - 1-Math.min( 631 - 1, 632 - Math.abs(cr.top-r.top)/100 633 - ); 857 + var clone= 858 + label.cloneNode(true); 634 634 635 - var score= 636 - widthFit*6+ 637 - topFit*3+ 638 - Math.min(r.height,900)/450+ 639 - Math.min(r.width*r.height,900000)/900000; 860 + var cloneNumber= 861 + clone.querySelector( 862 + ":scope > .arsn-area-number" 863 + ); 640 640 641 - if(score>bestScore){ 642 - best=el; 643 - bestScore=score; 644 - } 865 + var cloneAction= 866 + clone.querySelector( 867 + ":scope > .arsn-area-action" 868 + ); 869 + 870 + if(cloneNumber){ 871 + cloneNumber.remove(); 645 645 } 646 646 647 - if(item.depth<SEARCH_DEPTH){ 648 - Array.from(el.children||[]).forEach(function(next){ 649 - q.push({ 650 - el:next, 651 - depth:item.depth+1 652 - }); 653 - }); 874 + if(cloneAction){ 875 + cloneAction.remove(); 654 654 } 655 - } 656 656 657 - return best; 658 - } 878 + var titleText= 879 + compactText( 880 + clone.textContent 881 + ); 659 659 660 - function groupsByVisualRow(entries){ 661 - var groups=[]; 883 + if(!titleText){ 884 + return; 885 + } 662 662 663 - entries 664 - .slice() 665 - .sort(function(a,b){ 666 - return ( 667 - a.rect.top-b.rect.top|| 668 - a.rect.left-b.rect.left 887 + var numberNode= 888 + number.cloneNode(true); 889 + 890 + var actionNode= 891 + action.cloneNode(true); 892 + 893 + var titleNode= 894 + document.createElement( 895 + "span" 669 669 ); 670 - }) 671 - .forEach(function(entry){ 672 - var group=null; 673 673 674 - for(var i=0;i<groups.length;i++){ 675 - if( 676 - Math.abs( 677 - groups[i].top- 678 - entry.rect.top 679 - )<=ROW_TOLERANCE 680 - ){ 681 - group=groups[i]; 682 - break; 683 - } 684 - } 898 + titleNode.className= 899 + "sn-area-label-title"; 685 685 686 - if(!group){ 687 - group={ 688 - top:entry.rect.top, 689 - entries:[] 690 - }; 691 - groups.push(group); 692 - } 901 + titleNode.textContent= 902 + titleText; 693 693 694 - group.entries.push(entry); 695 - }); 904 + while(label.firstChild){ 905 + label.removeChild( 906 + label.firstChild 907 + ); 908 + } 696 696 697 - return groups; 910 + label.appendChild( 911 + numberNode 912 + ); 913 + 914 + label.appendChild( 915 + titleNode 916 + ); 917 + 918 + label.appendChild( 919 + actionNode 920 + ); 921 + 922 + label.setAttribute( 923 + "data-sn-three-line", 924 + "1" 925 + ); 926 + 927 + var head= 928 + label.closest( 929 + ".arsn-area-head" 930 + ); 931 + 932 + if(head){ 933 + head.style.setProperty( 934 + "width", 935 + "100%", 936 + "important" 937 + ); 938 + 939 + head.style.setProperty( 940 + "max-width", 941 + "100%", 942 + "important" 943 + ); 944 + 945 + head.style.setProperty( 946 + "box-sizing", 947 + "border-box", 948 + "important" 949 + ); 950 + } 951 + }); 698 698 } 699 699 700 - function validHorizontalGroup(group){ 701 - if(group.entries.length<2)return false; 954 + /* ======================================================= 955 + PLACEHOLDER BADGE 956 + ======================================================= */ 702 702 703 - var lefts= 704 - group.entries 705 - .map(function(e){return e.rect.left;}) 706 - .sort(function(a,b){return a-b;}); 958 + function applyPlaceholderBadge(){ 959 + if(!PLACEHOLDER)return; 707 707 708 708 if( 709 - lefts[lefts.length-1]-710 - lefts[0]<711 - 80962 + document.querySelector( 963 + ".sn-coming-soon-badge" 964 + ) 712 712 ){ 713 - return false;966 + return; 714 714 } 715 715 716 - var widths= 717 - group.entries 718 - .map(function(e){return e.rect.width;}) 719 - .filter(function(w){return w>0;}); 969 + var title= 970 + document.querySelector( 971 + "#document-title" 972 + )|| 973 + document.querySelector( 974 + "h1" 975 + ); 720 720 721 - if( widths.length<2)returnfalse;977 + if(!title)return; 722 722 723 - var minWidth=Math.min.apply(Math,widths); 724 - var maxWidth=Math.max.apply(Math,widths); 979 + var badge= 980 + document.createElement( 981 + "span" 982 + ); 725 725 726 - return ( 727 - maxWidth/ 728 - Math.max(1,minWidth)<= 729 - 1.9 984 + badge.className= 985 + "sn-coming-soon-badge"; 986 + 987 + badge.textContent= 988 + PLACEHOLDER_LABEL; 989 + 990 + badge.setAttribute( 991 + "aria-label", 992 + PLACEHOLDER_LABEL 730 730 ); 731 - } 732 732 733 - function normalizeText(text){ 734 - return String(text||"") 735 - .replace(/s+/g," ") 736 - .trim() 737 - .toUpperCase(); 995 + title.appendChild( 996 + badge 997 + ); 738 738 } 739 739 740 - function exactKnownFirstSection(el){ 741 - var text=normalizeText(el.textContent); 1000 + /* ======================================================= 1001 + DETAIL PAGE OWN-ACCENT PROPAGATION 1002 + ======================================================= */ 742 742 743 - return ( 744 - text==="HIER STARTEN"|| 745 - text==="ORGANISIEREN & DOKUMENTIEREN"|| 746 - text==="ENTSCHEIDEN"|| 747 - text==="START HERE"|| 748 - text==="GET STARTED"|| 749 - text==="ORGANISE & DOCUMENT"|| 750 - text==="ORGANIZE & DOCUMENT"|| 751 - text==="DECIDE" 1004 + function parseRGB(value){ 1005 + var match=String(value||"").match( 1006 + /rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)/i 752 752 ); 1008 + 1009 + if(!match)return null; 1010 + 1011 + return [ 1012 + Number(match[1]), 1013 + Number(match[2]), 1014 + Number(match[3]) 1015 + ]; 753 753 } 754 754 755 - function visuallyFirstSectionBar(card){ 756 - var cardRect=card.getBoundingClientRect(); 757 - var candidates=[]; 1018 + function distance(a,b){ 1019 + return Math.sqrt( 1020 + Math.pow(a[0]-b[0],2)+ 1021 + Math.pow(a[1]-b[1],2)+ 1022 + Math.pow(a[2]-b[2],2) 1023 + ); 1024 + } 758 758 1026 + function paletteMatch(cssColor){ 1027 + var rgb=parseRGB(cssColor); 1028 + 1029 + if(!rgb)return null; 1030 + 1031 + var palette=[ 1032 + {hex:"#21b6d7",rgb:[33,182,215]}, 1033 + {hex:"#e94b13",rgb:[233,75,19]}, 1034 + {hex:"#f0aa00",rgb:[240,170,0]}, 1035 + {hex:"#38b76a",rgb:[56,183,106]} 1036 + ]; 1037 + 1038 + var best=null; 1039 + var bestDistance=Infinity; 1040 + 1041 + palette.forEach(function(item){ 1042 + var d=distance(rgb,item.rgb); 1043 + 1044 + if(d<bestDistance){ 1045 + best=item; 1046 + bestDistance=d; 1047 + } 1048 + }); 1049 + 1050 + return bestDistance<=30 1051 + ?best 1052 + :null; 1053 + } 1054 + 1055 + function propagateDetailAccents(){ 1056 + if(PAGE_KIND!=="detail")return; 1057 + 759 759 Array.from( 760 - card.querySelectorAll( 761 - "div,p,span,strong,h3,h4,h5,h6" 1059 + root.querySelectorAll( 1060 + ".arsn-call,.dmp-call,.ido-call,.pp-call,"+ 1061 + ".arsn-source,.dmp-source,.ido-source,.pp-source" 762 762 ) 763 763 ).forEach(function(el){ 764 - if(!visible(el,20,6))return; 765 - if(excluded(el))return; 1064 + if(!visible(el))return; 766 766 767 - var r=el.getBoundingClientRect(); 768 - var relativeTop=r.top-cardRect.top; 1066 + var style=getComputedStyle(el); 769 769 770 770 if( 771 - relativeTop<45|| 772 - relativeTop>cardRect.height*.72 1069 + num(style.borderTopWidth)>=2 773 773 ){ 774 - return; 1071 + var match= 1072 + paletteMatch( 1073 + style.borderTopColor 1074 + ); 1075 + 1076 + if(match){ 1077 + el.style.setProperty( 1078 + "border-left", 1079 + "4px solid "+match.hex, 1080 + "important" 1081 + ); 1082 + } 775 775 } 1084 + }); 776 776 777 - var widthRatio= 778 - r.width/ 779 - Math.max(1,cardRect.width); 1086 + // Warning families: explicit safety override. 1087 + Array.from( 1088 + root.querySelectorAll( 1089 + ".arsn-warn,.dmp-warn,.ido-warn,.pp-warn,"+ 1090 + ".warn,.warning,.warningmessage,.errormessage" 1091 + ) 1092 + ).forEach(function(el){ 1093 + if(!visible(el))return; 780 780 781 - if( 782 - widthRatio<.55|| 783 - widthRatio>1.05|| 784 - r.height>54 785 - ){ 786 - return; 787 - } 1095 + el.style.setProperty( 1096 + "border-left", 1097 + "4px solid #e94b13", 1098 + "important" 1099 + ); 1100 + }); 788 788 789 - var text=normalizeText(el.textContent); 1102 + // Info families: explicit orientation override. 1103 + Array.from( 1104 + root.querySelectorAll( 1105 + ".arsn-info,.dmp-info,.ido-info,.pp-info,.infomessage" 1106 + ) 1107 + ).forEach(function(el){ 1108 + if(!visible(el))return; 790 790 791 - if( 792 - text.length<2|| 793 - text.length>90 794 - ){ 795 - return; 796 - } 1110 + el.style.setProperty( 1111 + "border-left", 1112 + "4px solid #21b6d7", 1113 + "important" 1114 + ); 1115 + }); 1116 + } 797 797 798 - var style=getComputedStyle(el); 1118 + /* ======================================================= 1119 + OVERVIEW SEMANTIC THEME PALETTE 1120 + ======================================================= */ 799 799 800 - var bg= 801 - style.backgroundColor&& 802 - style.backgroundColor!=="rgba(0, 0, 0, 0)"&& 803 - style.backgroundColor!=="transparent"; 1122 + function smallestThemeHeaders(){ 1123 + return Array.from( 1124 + root.querySelectorAll( 1125 + "div,span,p,strong,h3,h4,h5,h6" 1126 + ) 1127 + ).filter(function(el){ 1128 + if(!visible(el))return false; 1129 + if(!themeFor(el.textContent))return false; 804 804 1131 + return !Array.from( 1132 + el.children||[] 1133 + ).some(function(child){ 1134 + return !!themeFor( 1135 + child.textContent 1136 + ); 1137 + }); 1138 + }); 1139 + } 1140 + 1141 + function findOverviewCard(header){ 1142 + var node=header.parentElement; 1143 + var candidates=[]; 1144 + 1145 + while(node&&node!==root){ 1146 + var rect=node.getBoundingClientRect(); 1147 + var style=getComputedStyle(node); 1148 + 805 805 var border= 806 806 num(style.borderTopWidth)+ 807 807 num(style.borderRightWidth)+ ... ... @@ -808,315 +808,677 @@ 808 808 num(style.borderBottomWidth)+ 809 809 num(style.borderLeftWidth); 810 810 811 - var mostlyUpper= 812 - text.length>=3&& 813 - text===text.toUpperCase(); 814 - 815 - var exact=exactKnownFirstSection(el); 816 - 817 - var score= 818 - (exact?20:0)+ 819 - (bg?6:0)+ 820 - (border>=1?2:0)+ 821 - (mostlyUpper?4:0)+ 822 - (num(style.fontWeight)>=600?1:0); 823 - 824 - if(score>=7){ 825 - candidates.push({ 826 - el:el, 827 - relativeTop:relativeTop, 828 - width:r.width, 829 - score:score 830 - }); 1155 + if( 1156 + rect.width>=220&& 1157 + rect.width<=800&& 1158 + rect.height>=120&& 1159 + border>=1 1160 + ){ 1161 + candidates.push(node); 831 831 } 832 - }); 833 833 1164 + node=node.parentElement; 1165 + } 1166 + 834 834 if(!candidates.length)return null; 835 835 836 836 candidates.sort(function(a,b){ 837 - if(a.score!==b.score)return b.score-a.score; 838 - if(Math.abs(a.relativeTop-b.relativeTop)>3){ 839 - return a.relativeTop-b.relativeTop; 840 - } 841 - return b.width-a.width; 1170 + return ( 1171 + b.getBoundingClientRect().height- 1172 + a.getBoundingClientRect().height 1173 + ); 842 842 }); 843 843 844 - // For exact known labels always prefer the earliest exact match. 845 - var exacts=candidates.filter(function(c){ 846 - return exactKnownFirstSection(c.el); 847 - }); 1176 + return candidates[0]; 1177 + } 848 848 849 - if(exacts.length){ 850 - exacts.sort(function(a,b){ 851 - return a.relativeTop-b.relativeTop||b.width-a.width; 852 - }); 853 - return exacts[0].el; 854 - } 1179 + function rowCandidates(link,card){ 1180 + var result=[]; 1181 + var cardRect= 1182 + card.getBoundingClientRect(); 855 855 856 - // Generic fallback: earliest high-confidence bar. 857 - candidates.sort(function(a,b){ 858 - return a.relativeTop-b.relativeTop||b.score-a.score||b.width-a.width; 859 - }); 1184 + var node=link; 860 860 861 - return candidates[0].el; 862 - } 1186 + while(node&&node!==card){ 1187 + if(visible(node)){ 1188 + var rect= 1189 + node.getBoundingClientRect(); 863 863 864 - function alignFirstSections(cards){ 865 - var rows= 866 - cards.map(function(card){ 867 - var bar= 868 - visuallyFirstSectionBar(card); 1191 + if( 1192 + rect.height<=105&& 1193 + rect.width>= 1194 + cardRect.width*.50&& 1195 + rect.width<= 1196 + cardRect.width*1.03 1197 + ){ 1198 + result.push(node); 1199 + } 1200 + } 869 869 870 - if(!bar)return null; 1202 + node=node.parentElement; 1203 + } 871 871 872 - varcardRect=873 - card.getBoundingClientRect();1205 + return result; 1206 + } 874 874 875 - var barRect= 876 - bar.getBoundingClientRect(); 1208 + function chooseOuterRow( 1209 + candidates, 1210 + link 1211 + ){ 1212 + if(!candidates.length){ 1213 + return link; 1214 + } 877 877 878 - return {879 - card:card,880 - bar:bar,881 - relativeTop:882 - barRect.top-cardRect.top,883 - label:884 - normalizeText(bar.textContent)885 - };1216 + var bordered= 1217 + candidates.filter(function(el){ 1218 + return ( 1219 + num( 1220 + getComputedStyle(el) 1221 + .borderLeftWidth 1222 + )>=1 1223 + ); 886 886 }); 887 887 888 - // Conservative: only align when every card in the horizontal row 889 - // has a reliable first section bar. 890 - if( 891 - rows.some(function(row){ 892 - return !row; 893 - }) 894 - ){ 895 - return null; 1226 + var pool= 1227 + bordered.length 1228 + ?bordered 1229 + :candidates; 1230 + 1231 + pool.sort(function(a,b){ 1232 + var ar= 1233 + a.getBoundingClientRect(); 1234 + 1235 + var br= 1236 + b.getBoundingClientRect(); 1237 + 1238 + return ( 1239 + ar.left-br.left|| 1240 + br.width-ar.width 1241 + ); 1242 + }); 1243 + 1244 + return pool[0]||link; 1245 + } 1246 + 1247 + function applyOverviewPalette(){ 1248 + if(PAGE_KIND!=="overview"){ 1249 + return []; 896 896 } 897 897 898 - var targetTop= 899 - Math.max.apply( 900 - Math, 901 - rows.map(function(row){ 902 - return row.relativeTop; 1252 + var headers= 1253 + smallestThemeHeaders() 1254 + .map(function(el){ 1255 + return { 1256 + el:el, 1257 + theme: 1258 + themeFor( 1259 + el.textContent 1260 + ), 1261 + card: 1262 + findOverviewCard( 1263 + el 1264 + ) 1265 + }; 903 903 }) 904 - ); 1267 + .filter(function(row){ 1268 + return !!row.card; 1269 + }); 905 905 906 - rows.forEach(function(row){ 907 - var delta= 908 - targetTop- 909 - row.relativeTop; 1271 + var unique=[]; 1272 + var seenHeaders=new Set(); 910 910 911 - if(delta<=1)return; 1274 + headers.forEach(function(row){ 1275 + var key= 1276 + row.theme.name+ 1277 + "|"+ 1278 + Math.round( 1279 + row.card 1280 + .getBoundingClientRect() 1281 + .left 1282 + )+ 1283 + "|"+ 1284 + Math.round( 1285 + row.el 1286 + .getBoundingClientRect() 1287 + .top 1288 + ); 912 912 913 - saveOriginal( 914 - row.bar, 915 - originalMarginTop, 916 - "margin-top" 1290 + if(!seenHeaders.has(key)){ 1291 + seenHeaders.add(key); 1292 + unique.push(row); 1293 + } 1294 + }); 1295 + 1296 + unique.forEach(function(row){ 1297 + var headerRect= 1298 + row.el 1299 + .getBoundingClientRect(); 1300 + 1301 + row.el.style.setProperty( 1302 + "background", 1303 + row.theme.bg, 1304 + "important" 917 917 ); 918 918 919 - var currentMargin= 920 - num( 921 - getComputedStyle( 922 - row.bar 923 - ).marginTop 924 - ); 1307 + row.el.style.setProperty( 1308 + "color", 1309 + row.theme.text, 1310 + "important" 1311 + ); 925 925 926 - row.bar.style.setProperty( 927 - "margin-top", 928 - ( 929 - currentMargin+ 930 - delta 931 - )+"px" 1313 + row.el.style.setProperty( 1314 + "text-align", 1315 + "left", 1316 + "important" 932 932 ); 933 933 934 - row.bar.setAttribute( 935 - "data-sn-first-section-aligned", 936 - "4" 1319 + row.el.style.setProperty( 1320 + "word-spacing", 1321 + "normal", 1322 + "important" 937 937 ); 938 938 939 - sectionManaged.add(row.bar); 1325 + var later= 1326 + unique 1327 + .filter(function(other){ 1328 + return ( 1329 + other.card===row.card&& 1330 + other.el 1331 + .getBoundingClientRect() 1332 + .top> 1333 + headerRect.top+2 1334 + ); 1335 + }) 1336 + .sort(function(a,b){ 1337 + return ( 1338 + a.el 1339 + .getBoundingClientRect() 1340 + .top- 1341 + b.el 1342 + .getBoundingClientRect() 1343 + .top 1344 + ); 1345 + }); 1346 + 1347 + var stopTop= 1348 + later.length 1349 + ?later[0].el 1350 + .getBoundingClientRect() 1351 + .top 1352 + :Infinity; 1353 + 1354 + Array.from( 1355 + row.card.querySelectorAll("a") 1356 + ).forEach(function(link){ 1357 + if(!visible(link))return; 1358 + 1359 + var rect= 1360 + link.getBoundingClientRect(); 1361 + 1362 + if( 1363 + rect.top<= 1364 + headerRect.bottom-2|| 1365 + rect.top>= 1366 + stopTop-2 1367 + ){ 1368 + return; 1369 + } 1370 + 1371 + var candidates= 1372 + rowCandidates( 1373 + link, 1374 + row.card 1375 + ); 1376 + 1377 + var target= 1378 + chooseOuterRow( 1379 + candidates, 1380 + link 1381 + ); 1382 + 1383 + candidates.forEach(function(el){ 1384 + el.style.setProperty( 1385 + "border-left", 1386 + "0 solid transparent", 1387 + "important" 1388 + ); 1389 + }); 1390 + 1391 + target.style.setProperty( 1392 + "border-left", 1393 + "3px solid "+ 1394 + row.theme.accent, 1395 + "important" 1396 + ); 1397 + 1398 + target.style.setProperty( 1399 + "box-sizing", 1400 + "border-box", 1401 + "important" 1402 + ); 1403 + }); 940 940 }); 941 941 942 - return { 943 - labels: 944 - rows.map(function(row){ 945 - return row.label; 946 - }), 947 - targetRelativeTop: 948 - Math.round(targetTop) 949 - }; 1406 + return unique; 950 950 } 951 951 952 - function applyGroup(group){ 953 - if(!validHorizontalGroup(group)){ 954 - return null; 1409 + /* ======================================================= 1410 + OVERVIEW CARD HEIGHT + FIRST THEMATIC ROW 1411 + ======================================================= */ 1412 + 1413 + function alignOverviewCards(headers){ 1414 + if( 1415 + PAGE_KIND!=="overview"|| 1416 + window.innerWidth<=MOBILE_MAX 1417 + ){ 1418 + return; 955 955 } 956 956 957 957 var cards=[]; 958 958 var seen=new Set(); 959 959 960 - group.entries.forEach(function(entry){961 - if(!seen.has( entry.target)){962 - seen.add( entry.target);963 - cards.push( entry.target);1424 + headers.forEach(function(row){ 1425 + if(!seen.has(row.card)){ 1426 + seen.add(row.card); 1427 + cards.push(row.card); 964 964 } 965 965 }); 966 966 967 - if(cards.length<2)return null; 1431 + if(cards.length<2){ 1432 + return; 1433 + } 968 968 969 - varfirstSection=970 - alignFirstSections(cards);1435 + // Group cards by actual top position. 1436 + var groups=[]; 971 971 972 - // The section alignment can change natural card heights. 973 - // Measure only afterwards. 974 - var maxHeight=0; 975 - 976 976 cards.forEach(function(card){ 977 - maxHeight=Math.max( 978 - maxHeight, 979 - card.getBoundingClientRect().height 980 - ); 1439 + var top= 1440 + card.getBoundingClientRect().top; 1441 + 1442 + var group=null; 1443 + 1444 + for(var i=0;i<groups.length;i++){ 1445 + if( 1446 + Math.abs( 1447 + groups[i].top-top 1448 + )<=ROW_TOLERANCE 1449 + ){ 1450 + group=groups[i]; 1451 + break; 1452 + } 1453 + } 1454 + 1455 + if(!group){ 1456 + group={ 1457 + top:top, 1458 + cards:[] 1459 + }; 1460 + groups.push(group); 1461 + } 1462 + 1463 + group.cards.push(card); 981 981 }); 982 982 983 - maxHeight=Math.ceil(maxHeight); 1466 + groups.forEach(function(group){ 1467 + if(group.cards.length<2){ 1468 + return; 1469 + } 984 984 985 - if(maxHeight<MIN_H)return null; 1471 + var firstHeaders= 1472 + group.cards.map(function(card){ 1473 + var candidates= 1474 + headers 1475 + .filter(function(row){ 1476 + return row.card===card; 1477 + }) 1478 + .sort(function(a,b){ 1479 + return ( 1480 + a.el 1481 + .getBoundingClientRect() 1482 + .top- 1483 + b.el 1484 + .getBoundingClientRect() 1485 + .top 1486 + ); 1487 + }); 986 986 987 - cards.forEach(function(card){ 988 - saveOriginal( 989 - card, 990 - originalMinHeight, 991 - "min-height" 992 - ); 1489 + return candidates.length 1490 + ?candidates[0] 1491 + :null; 1492 + }); 993 993 994 - card.style.setProperty( 995 - "min-height", 996 - maxHeight+"px" 997 - ); 1494 + if( 1495 + !firstHeaders.some(function(row){ 1496 + return !row; 1497 + }) 1498 + ){ 1499 + var targetTop= 1500 + Math.max.apply( 1501 + Math, 1502 + firstHeaders.map(function(row){ 1503 + return ( 1504 + row.el 1505 + .getBoundingClientRect() 1506 + .top- 1507 + row.card 1508 + .getBoundingClientRect() 1509 + .top 1510 + ); 1511 + }) 1512 + ); 998 998 999 - card.setAttribute( 1000 - "data-sn-equal-height-managed", 1001 - "4" 1002 - ); 1514 + firstHeaders.forEach(function(row){ 1515 + var relativeTop= 1516 + row.el 1517 + .getBoundingClientRect() 1518 + .top- 1519 + row.card 1520 + .getBoundingClientRect() 1521 + .top; 1003 1003 1004 - heightManaged.add(card);1005 - });1523 + var delta= 1524 + targetTop-relativeTop; 1006 1006 1007 - return { 1008 - cards:cards.length, 1009 - height:maxHeight, 1010 - firstSection:firstSection 1011 - }; 1526 + if(delta>1){ 1527 + saveStyle( 1528 + row.el, 1529 + originalMargin, 1530 + "margin-top" 1531 + ); 1532 + 1533 + var current= 1534 + num( 1535 + getComputedStyle( 1536 + row.el 1537 + ).marginTop 1538 + ); 1539 + 1540 + row.el.style.setProperty( 1541 + "margin-top", 1542 + ( 1543 + current+delta 1544 + )+"px" 1545 + ); 1546 + 1547 + row.el.setAttribute( 1548 + "data-sn-master-first-row", 1549 + "1" 1550 + ); 1551 + 1552 + managedMargin.add( 1553 + row.el 1554 + ); 1555 + } 1556 + }); 1557 + } 1558 + 1559 + var maxHeight=0; 1560 + 1561 + group.cards.forEach(function(card){ 1562 + maxHeight= 1563 + Math.max( 1564 + maxHeight, 1565 + card 1566 + .getBoundingClientRect() 1567 + .height 1568 + ); 1569 + }); 1570 + 1571 + maxHeight= 1572 + Math.ceil(maxHeight); 1573 + 1574 + group.cards.forEach(function(card){ 1575 + saveStyle( 1576 + card, 1577 + originalHeight, 1578 + "min-height" 1579 + ); 1580 + 1581 + card.style.setProperty( 1582 + "min-height", 1583 + maxHeight+"px" 1584 + ); 1585 + 1586 + card.setAttribute( 1587 + "data-sn-master-equal-height", 1588 + "1" 1589 + ); 1590 + 1591 + managedHeight.add( 1592 + card 1593 + ); 1594 + }); 1595 + }); 1012 1012 } 1013 1013 1014 - function run(){ 1015 - reset(); 1598 + /* ======================================================= 1599 + DETAIL GRID EQUAL HEIGHT, DESKTOP ONLY 1600 + ======================================================= */ 1016 1016 1602 + function equaliseDetailGrids(){ 1017 1017 if( 1604 + PAGE_KIND!=="detail"|| 1018 1018 window.innerWidth<=MOBILE_MAX 1019 1019 ){ 1020 1020 return; 1021 1021 } 1022 1022 1023 - var parents= 1610 + var selectors=[ 1611 + ".arsn-grid", 1612 + ".arsn-grid-2", 1613 + ".arsn-grid-3", 1614 + ".dmp-grid", 1615 + ".ido-grid", 1616 + ".pp-grid" 1617 + ]; 1618 + 1619 + selectors.forEach(function(selector){ 1024 1024 Array.from( 1025 - root.querySelectorAll("*") 1026 - ).filter(function(parent){ 1027 - return ( 1028 - visible(parent,MIN_W,MIN_H)&& 1029 - parent.children&& 1030 - parent.children.length>=2&& 1031 - parent.children.length<=MAX_PARENT_CHILDREN 1032 - ); 1033 - }); 1621 + root.querySelectorAll(selector) 1622 + ).forEach(function(grid){ 1623 + var children= 1624 + Array.from( 1625 + grid.children||[] 1626 + ).filter(visible); 1034 1034 1035 - var touched=new Set(); 1628 + if(children.length<2){ 1629 + return; 1630 + } 1036 1036 1037 - parents.forEach(function(parent){ 1038 - var entries=[]; 1632 + var groups=[]; 1039 1039 1040 - Array.from(parent.children).forEach(function(child){ 1041 - if(!visible(child,MIN_W,MIN_H))return; 1634 + children.forEach(function(child){ 1635 + var top= 1636 + child 1637 + .getBoundingClientRect() 1638 + .top; 1042 1042 1043 - var target=pickTarget(child); 1044 - if(!target)return; 1640 + var group=null; 1045 1045 1046 - entries.push({ 1047 - target:target, 1048 - rect:target.getBoundingClientRect() 1642 + for(var i=0;i<groups.length;i++){ 1643 + if( 1644 + Math.abs( 1645 + groups[i].top-top 1646 + )<=ROW_TOLERANCE 1647 + ){ 1648 + group=groups[i]; 1649 + break; 1650 + } 1651 + } 1652 + 1653 + if(!group){ 1654 + group={ 1655 + top:top, 1656 + items:[] 1657 + }; 1658 + groups.push(group); 1659 + } 1660 + 1661 + group.items.push(child); 1049 1049 }); 1050 - }); 1051 1051 1052 - if(entries.length<2)return; 1664 + groups.forEach(function(group){ 1665 + if(group.items.length<2){ 1666 + return; 1667 + } 1053 1053 1054 - groupsByVisualRow(entries).forEach(function(group){ 1055 - if(!validHorizontalGroup(group))return; 1669 + var maxHeight=0; 1056 1056 1057 - var signature= 1058 - group.entries.map(function(entry){ 1059 - return entry.target; 1671 + group.items.forEach(function(item){ 1672 + maxHeight= 1673 + Math.max( 1674 + maxHeight, 1675 + item 1676 + .getBoundingClientRect() 1677 + .height 1678 + ); 1060 1060 }); 1061 1061 1062 - if( 1063 - !signature.some(function(el){ 1064 - return !touched.has(el); 1065 - }) 1066 - ){ 1067 - return; 1068 - } 1681 + maxHeight= 1682 + Math.ceil(maxHeight); 1069 1069 1070 - var applied= 1071 - applyGroup(group); 1684 + group.items.forEach(function(item){ 1685 + saveStyle( 1686 + item, 1687 + originalHeight, 1688 + "min-height" 1689 + ); 1072 1072 1073 - if(applied){ 1074 - signature.forEach(function(el){ 1075 - touched.add(el); 1691 + item.style.setProperty( 1692 + "min-height", 1693 + maxHeight+"px" 1694 + ); 1695 + 1696 + item.setAttribute( 1697 + "data-sn-master-equal-height", 1698 + "1" 1699 + ); 1700 + 1701 + managedHeight.add(item); 1076 1076 }); 1077 - } 1703 + }); 1078 1078 }); 1079 1079 }); 1080 1080 } 1081 1081 1082 - function schedule(){ 1083 - if(raf)cancelAnimationFrame(raf); 1708 + /* ======================================================= 1709 + RUN / RESPONSIVE SCHEDULING 1710 + ======================================================= */ 1084 1084 1085 - raf=requestAnimationFrame(function(){ 1086 - raf=requestAnimationFrame(function(){ 1087 - raf=0; 1088 - run(); 1089 - }); 1090 - }); 1712 + function run(){ 1713 + if(running)return; 1714 + 1715 + running=true; 1716 + 1717 + try{ 1718 + resetRuntime(); 1719 + applyPlaceholderBadge(); 1720 + propagateDetailAccents(); 1721 + 1722 + var headers= 1723 + applyOverviewPalette(); 1724 + 1725 + makeThreeLineAreaLabels(); 1726 + makeFilledRedOrangeCTAsBorderless(); 1727 + 1728 + if( 1729 + window.innerWidth> 1730 + MOBILE_MAX 1731 + ){ 1732 + alignOverviewCards( 1733 + headers 1734 + ); 1735 + 1736 + equaliseDetailGrids(); 1737 + } 1738 + }finally{ 1739 + running=false; 1740 + } 1091 1091 } 1092 1092 1093 - addEventListener("resize",schedule,{passive:true}); 1094 - addEventListener("load",schedule,{once:true}); 1743 + function onResize(){ 1744 + if(resizeTimer){ 1745 + clearTimeout( 1746 + resizeTimer 1747 + ); 1748 + } 1095 1095 1096 - root.addEventListener( 1097 - "click", 1098 - function(){ 1099 - setTimeout(schedule,0); 1100 - }, 1101 - true 1102 - ); 1750 + resizeTimer= 1751 + setTimeout( 1752 + function(){ 1753 + resizeTimer=0; 1754 + run(); 1755 + }, 1756 + RESIZE_DEBOUNCE 1757 + ); 1758 + } 1103 1103 1104 - Array.from(root.querySelectorAll("img")).forEach(function(img){ 1105 - if(!img.complete){ 1106 - img.addEventListener("load",schedule,{once:true}); 1760 + async function waitForReady(){ 1761 + if( 1762 + document.readyState!=="complete" 1763 + ){ 1764 + await new Promise(function(resolve){ 1765 + window.addEventListener( 1766 + "load", 1767 + resolve, 1768 + {once:true} 1769 + ); 1770 + }); 1107 1107 } 1108 - }); 1109 1109 1110 - if(document.fonts&&document.fonts.ready){ 1111 - document.fonts.ready.then(schedule); 1773 + if( 1774 + document.fonts&& 1775 + document.fonts.ready 1776 + ){ 1777 + try{ 1778 + await document.fonts.ready; 1779 + }catch(error){} 1780 + } 1781 + 1782 + var images= 1783 + Array.from( 1784 + root.querySelectorAll("img") 1785 + ); 1786 + 1787 + await Promise.all( 1788 + images.map(function(img){ 1789 + if(img.complete){ 1790 + return Promise.resolve(); 1791 + } 1792 + 1793 + return new Promise(function(resolve){ 1794 + var done=function(){ 1795 + resolve(); 1796 + }; 1797 + 1798 + img.addEventListener( 1799 + "load", 1800 + done, 1801 + {once:true} 1802 + ); 1803 + 1804 + img.addEventListener( 1805 + "error", 1806 + done, 1807 + {once:true} 1808 + ); 1809 + }); 1810 + }) 1811 + ); 1812 + 1813 + run(); 1112 1112 } 1113 1113 1114 - schedule(); 1115 - setTimeout(schedule,200); 1116 - setTimeout(schedule,650); 1117 - setTimeout(schedule,1400); 1816 + window.addEventListener( 1817 + "resize", 1818 + onResize, 1819 + {passive:true} 1820 + ); 1821 + 1822 + waitForReady(); 1118 1118 })(); 1119 1119 </script> 1120 -<!-- SN_HORIZONTAL_BOX_HARMONIZER_END --> 1825 + 1826 +<!-- SN_SERVICE_NAVIGATOR_MASTER_STYLE_END --> 1121 1121 {{/html}} 1122 1122