Changes for page Art & Research Services Navigator
Last modified by Veronika Kocher on Friday, 18 Sep 2026 16:47
From version 39.22
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 39.25
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
-
... ... @@ -640,23 +640,132 @@ 640 640 ))) 641 641 642 642 {{html clean="false"}} 643 -<!-- SN_HORIZONTAL_BOX_HARMONIZER_START --> 644 -<style data-sn-horizontal-box-harmonizer="4"> 645 -[data-sn-equal-height-managed], 646 -[data-sn-first-section-aligned]{ 643 +<!-- SN_SERVICE_NAVIGATOR_MASTER_STYLE_START --> 644 + 645 +<style data-sn-service-navigator-master="1"> 646 +/* ========================================================= 647 + MASTER TYPOGRAPHY 648 + ========================================================= */ 649 +#xwikicontent h1, 650 +#xwikicontent h2, 651 +#xwikicontent h3, 652 +#xwikicontent h4, 653 +#xwikicontent h5, 654 +#xwikicontent h6, 655 +#xwikicontent .box-title, 656 +#xwikicontent [role="heading"], 657 +#xwikicontent h1 a, 658 +#xwikicontent h2 a, 659 +#xwikicontent h3 a, 660 +#xwikicontent h4 a, 661 +#xwikicontent h5 a, 662 +#xwikicontent h6 a, 663 +#xwikicontent .box-title a, 664 +#xwikicontent [role="heading"] a{ 665 + text-align:left!important; 666 + text-justify:auto!important; 667 + word-spacing:normal!important; 668 +} 669 + 670 +/* ========================================================= 671 + COMING SOON / IN VORBEREITUNG 672 + ========================================================= */ 673 +.sn-coming-soon-badge{ 674 + display:inline-block; 675 + vertical-align:middle; 676 + margin-left:10px; 677 + padding:4px 8px; 678 + border-radius:14px; 679 + border:1px solid #efd9cc; 680 + background:#fff4ee; 681 + color:#8a4d36; 682 + font-size:11px; 683 + font-weight:700; 684 + letter-spacing:.055em; 685 + line-height:1.2; 686 + white-space:nowrap; 687 +} 688 + 689 +/* ========================================================= 690 + NATIVE / DETAIL CALLOUT GEOMETRY 691 + Preserve existing backgrounds. 692 + ========================================================= */ 693 +#xwikicontent .arsn-info, 694 +#xwikicontent .dmp-info, 695 +#xwikicontent .ido-info, 696 +#xwikicontent .pp-info, 697 +#xwikicontent .infomessage{ 698 + box-sizing:border-box!important; 699 + border-left:4px solid #21b6d7!important; 700 + border-radius:8px; 701 + text-align:left!important; 702 + word-spacing:normal!important; 703 +} 704 + 705 +#xwikicontent .arsn-warn, 706 +#xwikicontent .dmp-warn, 707 +#xwikicontent .ido-warn, 708 +#xwikicontent .pp-warn, 709 +#xwikicontent .warn, 710 +#xwikicontent .warning, 711 +#xwikicontent .warningmessage, 712 +#xwikicontent .errormessage{ 713 + box-sizing:border-box!important; 714 + border-left:4px solid #e94b13!important; 715 + border-radius:8px; 716 + text-align:left!important; 717 + word-spacing:normal!important; 718 +} 719 + 720 +[data-sn-master-equal-height], 721 +[data-sn-master-first-row]{ 647 647 box-sizing:border-box; 648 648 } 724 + 725 +/* ========================================================= 726 + FULL-WIDTH THREE-LINE NUMBER / TITLE / SUBTITLE BLOCKS 727 + ========================================================= */ 728 +#xwikicontent .arsn-area-label[data-sn-three-line="1"]{ 729 + display:grid!important; 730 + grid-template-columns:minmax(0,1fr)!important; 731 + grid-auto-rows:auto!important; 732 + width:100%!important; 733 + max-width:none!important; 734 + box-sizing:border-box!important; 735 + justify-items:start!important; 736 + align-items:start!important; 737 + gap:2px!important; 738 + text-align:left!important; 739 + text-align-last:left!important; 740 + text-justify:auto!important; 741 + word-spacing:normal!important; 742 + white-space:normal!important; 743 +} 744 +#xwikicontent .arsn-area-label[data-sn-three-line="1"] > .arsn-area-number, 745 +#xwikicontent .arsn-area-label[data-sn-three-line="1"] > .sn-area-label-title, 746 +#xwikicontent .arsn-area-label[data-sn-three-line="1"] > .arsn-area-action{ 747 + display:block!important; 748 + width:100%!important; 749 + margin:0!important; 750 + text-align:left!important; 751 + text-align-last:left!important; 752 + text-justify:auto!important; 753 + word-spacing:normal!important; 754 + white-space:normal!important; 755 +} 649 649 </style> 650 -<script data-sn-horizontal-box-harmonizer="4"> 757 + 758 +<script data-sn-service-navigator-master="1"> 651 651 (function(){ 652 652 "use strict"; 653 653 762 + var PAGE_KIND="overview"; 763 + var PLACEHOLDER=false; 764 + var PLACEHOLDER_LABEL="COMING SOON"; 765 + 654 654 var MOBILE_MAX=767; 655 655 var ROW_TOLERANCE=6; 656 - var MIN_W=150; 657 - var MIN_H=36; 658 - var MAX_PARENT_CHILDREN=16; 659 - var SEARCH_DEPTH=5; 768 + var RESIZE_DEBOUNCE=220; 660 660 661 661 var root= 662 662 document.getElementById("xwikicontent")|| ... ... @@ -666,93 +666,105 @@ 666 666 667 667 if(!root)return; 668 668 669 - var heightManaged=new Set(); 670 - var sectionManaged=new Set(); 671 - var originalMinHeight=new WeakMap(); 672 - var originalMarginTop=new WeakMap(); 673 - var raf=0; 778 + var managedHeight=new Set(); 779 + var managedMargin=new Set(); 780 + var originalHeight=new WeakMap(); 781 + var originalMargin=new WeakMap(); 674 674 675 - function num(v){ 676 - var n=parseFloat(v); 677 - return Number.isFinite(n)?n:0; 678 - } 783 + var resizeTimer=0; 784 + var running=false; 679 679 680 - function visible(el,minW,minH){ 681 - if(!el||el.nodeType!==1)return false; 682 - 683 - var s=getComputedStyle(el); 684 - 685 - if( 686 - s.display==="none"|| 687 - s.visibility==="hidden"|| 688 - Number(s.opacity)===0 689 - ){ 690 - return false; 786 + var THEMES=[ 787 + { 788 + name:"BLUE", 789 + accent:"#21b6d7", 790 + bg:"#eaf7fb", 791 + text:"#315d68", 792 + labels:[ 793 + "HIER STARTEN", 794 + "ENTSCHEIDEN", 795 + "ÜBERPRÜFEN & ANPASSEN", 796 + "START HERE", 797 + "DECIDE", 798 + "REVIEW & ADAPT" 799 + ] 800 + }, 801 + { 802 + name:"RED", 803 + accent:"#e94b13", 804 + bg:"#fff1ec", 805 + text:"#8a4d36", 806 + labels:[ 807 + "PLANEN & ORGANISIEREN", 808 + "ORGANISIEREN & DOKUMENTIEREN", 809 + "PUBLIZIEREN & PRÄSENTIEREN", 810 + "PLAN & ORGANISE", 811 + "PLAN & ORGANIZE", 812 + "ORGANISE & DOCUMENT", 813 + "ORGANIZE & DOCUMENT", 814 + "PUBLISH & PRESENT" 815 + ] 816 + }, 817 + { 818 + name:"YELLOW", 819 + accent:"#f0aa00", 820 + bg:"#fff8e7", 821 + text:"#785b17", 822 + labels:[ 823 + "SCHÜTZEN & KLÄREN", 824 + "STANDARDISIEREN & IDENTIFIZIEREN", 825 + "ÖFFNEN, NACHNUTZEN & AUFFINDBAR MACHEN", 826 + "PROTECT & CLARIFY", 827 + "STANDARDISE & IDENTIFY", 828 + "STANDARDIZE & IDENTIFY", 829 + "OPEN, REUSE & MAKE FINDABLE" 830 + ] 831 + }, 832 + { 833 + name:"GREEN", 834 + accent:"#38b76a", 835 + bg:"#edf9f1", 836 + text:"#3f7451", 837 + labels:[ 838 + "INFRASTRUKTUR EINRICHTEN", 839 + "INFRASTRUKTUR & ZUSAMMENARBEIT EINRICHTEN", 840 + "SPEICHERN & ZUGRIFF STEUERN", 841 + "REPOSITORIUM, ERHALTEN & ÜBERGEBEN", 842 + "SET UP INFRASTRUCTURE", 843 + "SET UP INFRASTRUCTURE & COLLABORATION", 844 + "STORE & CONTROL ACCESS", 845 + "REPOSITORY, PRESERVE & HAND OVER" 846 + ] 691 691 } 848 + ]; 692 692 693 - var r=el.getBoundingClientRect(); 694 - 695 - return ( 696 - r.width>=(minW||1)&& 697 - r.height>=(minH||1) 698 - ); 850 + function num(value){ 851 + var n=parseFloat(value); 852 + return Number.isFinite(n)?n:0; 699 699 } 700 700 701 - function excluded(el){ 702 - return ( 703 - !el.matches|| 704 - el.matches( 705 - "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]" 706 - ) 707 - ); 855 + function norm(value){ 856 + return String(value||"") 857 + .replace(/\s+/g," ") 858 + .trim() 859 + .toUpperCase(); 708 708 } 709 709 710 - function namedLikeBox(el){ 711 - var c= 712 - typeof el.className==="string" 713 - ? el.className 714 - : ""; 862 + function visible(el){ 863 + if(!el||el.nodeType!==1)return false; 715 715 716 - r eturn/(^|[s_-])(box|card|tile|panel|role|check|service|source|call|area|detail|resource|topic|warn|info)([s_-]|$)/i.test(c);717 - }865 + var style=getComputedStyle(el); 866 + var rect=el.getBoundingClientRect(); 718 718 719 - function boxLike(el){ 720 - if(!visible(el,MIN_W,MIN_H)||excluded(el))return false; 721 - 722 - var s=getComputedStyle(el); 723 - var r=el.getBoundingClientRect(); 724 - 725 - var border= 726 - num(s.borderTopWidth)+ 727 - num(s.borderRightWidth)+ 728 - num(s.borderBottomWidth)+ 729 - num(s.borderLeftWidth); 730 - 731 - var radius=Math.max( 732 - num(s.borderTopLeftRadius), 733 - num(s.borderTopRightRadius), 734 - num(s.borderBottomLeftRadius), 735 - num(s.borderBottomRightRadius) 736 - ); 737 - 738 - var bg= 739 - s.backgroundColor&& 740 - s.backgroundColor!=="rgba(0, 0, 0, 0)"&& 741 - s.backgroundColor!=="transparent"; 742 - 743 - var shadow= 744 - s.boxShadow&& 745 - s.boxShadow!=="none"; 746 - 747 747 return ( 748 - namedLikeBox(el)||749 - b order>=1||750 - (bg&&radius>=3)||751 - (shadow&&r.width>=180)869 + style.display!=="none"&& 870 + style.visibility!=="hidden"&& 871 + rect.width>20&& 872 + rect.height>4 752 752 ); 753 753 } 754 754 755 - function save Original(el,map,property){876 + function saveStyle(el,map,property){ 756 756 if(map.has(el))return; 757 757 758 758 map.set(el,{ ... ... @@ -761,7 +761,7 @@ 761 761 }); 762 762 } 763 763 764 - function restore Original(el,map,property){885 + function restoreStyle(el,map,property){ 765 765 var original=map.get(el); 766 766 767 767 if(original&&original.value){ ... ... @@ -775,247 +775,470 @@ 775 775 } 776 776 } 777 777 778 - function reset(){ 779 - heightManaged.forEach(function(el){780 - restore Original(899 + function resetRuntime(){ 900 + managedHeight.forEach(function(el){ 901 + restoreStyle( 781 781 el, 782 - original MinHeight,903 + originalHeight, 783 783 "min-height" 784 784 ); 785 - 786 786 el.removeAttribute( 787 - "data-sn-equal-height -managed"907 + "data-sn-master-equal-height" 788 788 ); 789 789 }); 790 790 791 - sectionManaged.forEach(function(el){792 - restore Original(911 + managedMargin.forEach(function(el){ 912 + restoreStyle( 793 793 el, 794 - originalMargin Top,914 + originalMargin, 795 795 "margin-top" 796 796 ); 797 - 798 798 el.removeAttribute( 799 - "data-sn-first- section-aligned"918 + "data-sn-master-first-row" 800 800 ); 801 801 }); 802 802 803 - heightManaged.clear();804 - sectionManaged.clear();922 + managedHeight.clear(); 923 + managedMargin.clear(); 805 805 } 806 806 807 - function pickTarget(child){808 - if(!visible(child,MIN_W,MIN_H))return null;926 + function themeFor(text){ 927 + var value=norm(text); 809 809 810 - if(boxLike(child)){ 811 - return child; 929 + for(var i=0;i<THEMES.length;i++){ 930 + for(var j=0;j<THEMES[i].labels.length;j++){ 931 + var label=THEMES[i].labels[j]; 932 + 933 + if( 934 + value===label|| 935 + value.indexOf(label+" ")===0|| 936 + value.indexOf(label+" -")===0|| 937 + value.indexOf(label+" ·")===0 938 + ){ 939 + return THEMES[i]; 940 + } 941 + } 812 812 } 813 813 814 - varcr=child.getBoundingClientRect();815 - var q=[];944 + return null; 945 + } 816 816 817 - Array.from(child.children||[]).forEach(function(el){ 818 - q.push({el:el,depth:1}); 947 + /* ======================================================= 948 + BORDERLESS FILLED RED/ORANGE CTA BUTTONS 949 + ======================================================= */ 950 + 951 + function colourDistance(a,b){ 952 + return Math.sqrt( 953 + Math.pow(a[0]-b[0],2)+ 954 + Math.pow(a[1]-b[1],2)+ 955 + Math.pow(a[2]-b[2],2) 956 + ); 957 + } 958 + 959 + function makeFilledRedOrangeCTAsBorderless(){ 960 + var RED_ORANGE=[233,75,19]; 961 + 962 + Array.from( 963 + root.querySelectorAll( 964 + 'a,button,[role="button"],input[type="submit"],input[type="button"]' 965 + ) 966 + ).forEach(function(el){ 967 + if(!visible(el))return; 968 + 969 + var style=getComputedStyle(el); 970 + var rgb=parseRGB(style.backgroundColor); 971 + 972 + if(!rgb)return; 973 + 974 + if( 975 + colourDistance( 976 + rgb, 977 + RED_ORANGE 978 + )>55 979 + ){ 980 + return; 981 + } 982 + 983 + var rect=el.getBoundingClientRect(); 984 + 985 + if( 986 + rect.width<80|| 987 + rect.height<24 988 + ){ 989 + return; 990 + } 991 + 992 + el.style.setProperty( 993 + "border", 994 + "none", 995 + "important" 996 + ); 997 + 998 + el.style.setProperty( 999 + "border-left", 1000 + "none", 1001 + "important" 1002 + ); 1003 + 1004 + el.style.setProperty( 1005 + "border-top", 1006 + "none", 1007 + "important" 1008 + ); 1009 + 1010 + el.style.setProperty( 1011 + "border-right", 1012 + "none", 1013 + "important" 1014 + ); 1015 + 1016 + el.style.setProperty( 1017 + "border-bottom", 1018 + "none", 1019 + "important" 1020 + ); 1021 + 1022 + el.style.setProperty( 1023 + "box-shadow", 1024 + "none", 1025 + "important" 1026 + ); 819 819 }); 1028 + } 820 820 821 - var best=null; 822 - var bestScore=-Infinity; 1030 + /* ======================================================= 1031 + FULL-WIDTH THREE-LINE AREA LABELS 1032 + ======================================================= */ 823 823 824 - while(q.length){ 825 - var item=q.shift(); 826 - var el=item.el; 1034 + function compactText(value){ 1035 + return String(value||"") 1036 + .replace(/\s+/g," ") 1037 + .trim(); 1038 + } 827 827 828 - if(!visible(el,MIN_W,MIN_H))continue; 1040 + function makeThreeLineAreaLabels(){ 1041 + Array.from( 1042 + root.querySelectorAll( 1043 + ".arsn-area-label" 1044 + ) 1045 + ).forEach(function(label){ 1046 + if( 1047 + label.getAttribute( 1048 + "data-sn-three-line" 1049 + )==="1" 1050 + ){ 1051 + return; 1052 + } 829 829 830 - var r=el.getBoundingClientRect(); 1054 + var number= 1055 + label.querySelector( 1056 + ":scope > .arsn-area-number" 1057 + ); 831 831 1059 + var action= 1060 + label.querySelector( 1061 + ":scope > .arsn-area-action" 1062 + ); 1063 + 832 832 if( 833 - r .width>=cr.width*.68&&834 - boxLike(el)1065 + !number|| 1066 + !action 835 835 ){ 836 - var widthFit= 837 - 1-Math.min( 838 - 1, 839 - Math.abs(cr.width-r.width)/ 840 - Math.max(1,cr.width) 841 - ); 1068 + return; 1069 + } 842 842 843 - var topFit= 844 - 1-Math.min( 845 - 1, 846 - Math.abs(cr.top-r.top)/100 847 - ); 1071 + var clone= 1072 + label.cloneNode(true); 848 848 849 - var score= 850 - widthFit*6+ 851 - topFit*3+ 852 - Math.min(r.height,900)/450+ 853 - Math.min(r.width*r.height,900000)/900000; 1074 + var cloneNumber= 1075 + clone.querySelector( 1076 + ":scope > .arsn-area-number" 1077 + ); 854 854 855 - if(score>bestScore){ 856 - best=el; 857 - bestScore=score; 858 - } 1079 + var cloneAction= 1080 + clone.querySelector( 1081 + ":scope > .arsn-area-action" 1082 + ); 1083 + 1084 + if(cloneNumber){ 1085 + cloneNumber.remove(); 859 859 } 860 860 861 - if(item.depth<SEARCH_DEPTH){ 862 - Array.from(el.children||[]).forEach(function(next){ 863 - q.push({ 864 - el:next, 865 - depth:item.depth+1 866 - }); 867 - }); 1088 + if(cloneAction){ 1089 + cloneAction.remove(); 868 868 } 869 - } 870 870 871 - return best; 872 - } 1092 + var titleText= 1093 + compactText( 1094 + clone.textContent 1095 + ); 873 873 874 - function groupsByVisualRow(entries){ 875 - var groups=[]; 1097 + if(!titleText){ 1098 + return; 1099 + } 876 876 877 - entries 878 - .slice() 879 - .sort(function(a,b){ 880 - return ( 881 - a.rect.top-b.rect.top|| 882 - a.rect.left-b.rect.left 1101 + var numberNode= 1102 + number.cloneNode(true); 1103 + 1104 + var actionNode= 1105 + action.cloneNode(true); 1106 + 1107 + var titleNode= 1108 + document.createElement( 1109 + "span" 883 883 ); 884 - }) 885 - .forEach(function(entry){ 886 - var group=null; 887 887 888 - for(var i=0;i<groups.length;i++){ 889 - if( 890 - Math.abs( 891 - groups[i].top- 892 - entry.rect.top 893 - )<=ROW_TOLERANCE 894 - ){ 895 - group=groups[i]; 896 - break; 897 - } 898 - } 1112 + titleNode.className= 1113 + "sn-area-label-title"; 899 899 900 - if(!group){ 901 - group={ 902 - top:entry.rect.top, 903 - entries:[] 904 - }; 905 - groups.push(group); 906 - } 1115 + titleNode.textContent= 1116 + titleText; 907 907 908 - group.entries.push(entry); 909 - }); 1118 + while(label.firstChild){ 1119 + label.removeChild( 1120 + label.firstChild 1121 + ); 1122 + } 910 910 911 - return groups; 1124 + label.appendChild( 1125 + numberNode 1126 + ); 1127 + 1128 + label.appendChild( 1129 + titleNode 1130 + ); 1131 + 1132 + label.appendChild( 1133 + actionNode 1134 + ); 1135 + 1136 + label.setAttribute( 1137 + "data-sn-three-line", 1138 + "1" 1139 + ); 1140 + 1141 + var head= 1142 + label.closest( 1143 + ".arsn-area-head" 1144 + ); 1145 + 1146 + if(head){ 1147 + head.style.setProperty( 1148 + "width", 1149 + "100%", 1150 + "important" 1151 + ); 1152 + 1153 + head.style.setProperty( 1154 + "max-width", 1155 + "100%", 1156 + "important" 1157 + ); 1158 + 1159 + head.style.setProperty( 1160 + "box-sizing", 1161 + "border-box", 1162 + "important" 1163 + ); 1164 + } 1165 + }); 912 912 } 913 913 914 - function validHorizontalGroup(group){ 915 - if(group.entries.length<2)return false; 1168 + /* ======================================================= 1169 + PLACEHOLDER BADGE 1170 + ======================================================= */ 916 916 917 - var lefts= 918 - group.entries 919 - .map(function(e){return e.rect.left;}) 920 - .sort(function(a,b){return a-b;}); 1172 + function applyPlaceholderBadge(){ 1173 + if(!PLACEHOLDER)return; 921 921 922 922 if( 923 - lefts[lefts.length-1]-924 - lefts[0]<925 - 801176 + document.querySelector( 1177 + ".sn-coming-soon-badge" 1178 + ) 926 926 ){ 927 - return false;1180 + return; 928 928 } 929 929 930 - var widths= 931 - group.entries 932 - .map(function(e){return e.rect.width;}) 933 - .filter(function(w){return w>0;}); 1183 + var title= 1184 + document.querySelector( 1185 + "#document-title" 1186 + )|| 1187 + document.querySelector( 1188 + "h1" 1189 + ); 934 934 935 - if( widths.length<2)returnfalse;1191 + if(!title)return; 936 936 937 - var minWidth=Math.min.apply(Math,widths); 938 - var maxWidth=Math.max.apply(Math,widths); 1193 + var badge= 1194 + document.createElement( 1195 + "span" 1196 + ); 939 939 940 - return ( 941 - maxWidth/ 942 - Math.max(1,minWidth)<= 943 - 1.9 1198 + badge.className= 1199 + "sn-coming-soon-badge"; 1200 + 1201 + badge.textContent= 1202 + PLACEHOLDER_LABEL; 1203 + 1204 + badge.setAttribute( 1205 + "aria-label", 1206 + PLACEHOLDER_LABEL 944 944 ); 945 - } 946 946 947 - function normalizeText(text){ 948 - return String(text||"") 949 - .replace(/s+/g," ") 950 - .trim() 951 - .toUpperCase(); 1209 + title.appendChild( 1210 + badge 1211 + ); 952 952 } 953 953 954 - function exactKnownFirstSection(el){ 955 - var text=normalizeText(el.textContent); 1214 + /* ======================================================= 1215 + DETAIL PAGE OWN-ACCENT PROPAGATION 1216 + ======================================================= */ 956 956 957 - return ( 958 - text==="HIER STARTEN"|| 959 - text==="ORGANISIEREN & DOKUMENTIEREN"|| 960 - text==="ENTSCHEIDEN"|| 961 - text==="START HERE"|| 962 - text==="GET STARTED"|| 963 - text==="ORGANISE & DOCUMENT"|| 964 - text==="ORGANIZE & DOCUMENT"|| 965 - text==="DECIDE" 1218 + function parseRGB(value){ 1219 + var match=String(value||"").match( 1220 + /rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)/i 966 966 ); 1222 + 1223 + if(!match)return null; 1224 + 1225 + return [ 1226 + Number(match[1]), 1227 + Number(match[2]), 1228 + Number(match[3]) 1229 + ]; 967 967 } 968 968 969 - function visuallyFirstSectionBar(card){ 970 - var cardRect=card.getBoundingClientRect(); 971 - var candidates=[]; 1232 + function distance(a,b){ 1233 + return Math.sqrt( 1234 + Math.pow(a[0]-b[0],2)+ 1235 + Math.pow(a[1]-b[1],2)+ 1236 + Math.pow(a[2]-b[2],2) 1237 + ); 1238 + } 972 972 1240 + function paletteMatch(cssColor){ 1241 + var rgb=parseRGB(cssColor); 1242 + 1243 + if(!rgb)return null; 1244 + 1245 + var palette=[ 1246 + {hex:"#21b6d7",rgb:[33,182,215]}, 1247 + {hex:"#e94b13",rgb:[233,75,19]}, 1248 + {hex:"#f0aa00",rgb:[240,170,0]}, 1249 + {hex:"#38b76a",rgb:[56,183,106]} 1250 + ]; 1251 + 1252 + var best=null; 1253 + var bestDistance=Infinity; 1254 + 1255 + palette.forEach(function(item){ 1256 + var d=distance(rgb,item.rgb); 1257 + 1258 + if(d<bestDistance){ 1259 + best=item; 1260 + bestDistance=d; 1261 + } 1262 + }); 1263 + 1264 + return bestDistance<=30 1265 + ?best 1266 + :null; 1267 + } 1268 + 1269 + function propagateDetailAccents(){ 1270 + if(PAGE_KIND!=="detail")return; 1271 + 973 973 Array.from( 974 - card.querySelectorAll( 975 - "div,p,span,strong,h3,h4,h5,h6" 1273 + root.querySelectorAll( 1274 + ".arsn-call,.dmp-call,.ido-call,.pp-call,"+ 1275 + ".arsn-source,.dmp-source,.ido-source,.pp-source" 976 976 ) 977 977 ).forEach(function(el){ 978 - if(!visible(el,20,6))return; 979 - if(excluded(el))return; 1278 + if(!visible(el))return; 980 980 981 - var r=el.getBoundingClientRect(); 982 - var relativeTop=r.top-cardRect.top; 1280 + var style=getComputedStyle(el); 983 983 984 984 if( 985 - relativeTop<45|| 986 - relativeTop>cardRect.height*.72 1283 + num(style.borderTopWidth)>=2 987 987 ){ 988 - return; 1285 + var match= 1286 + paletteMatch( 1287 + style.borderTopColor 1288 + ); 1289 + 1290 + if(match){ 1291 + el.style.setProperty( 1292 + "border-left", 1293 + "4px solid "+match.hex, 1294 + "important" 1295 + ); 1296 + } 989 989 } 1298 + }); 990 990 991 - var widthRatio= 992 - r.width/ 993 - Math.max(1,cardRect.width); 1300 + // Warning families: explicit safety override. 1301 + Array.from( 1302 + root.querySelectorAll( 1303 + ".arsn-warn,.dmp-warn,.ido-warn,.pp-warn,"+ 1304 + ".warn,.warning,.warningmessage,.errormessage" 1305 + ) 1306 + ).forEach(function(el){ 1307 + if(!visible(el))return; 994 994 995 - if( 996 - widthRatio<.55|| 997 - widthRatio>1.05|| 998 - r.height>54 999 - ){ 1000 - return; 1001 - } 1309 + el.style.setProperty( 1310 + "border-left", 1311 + "4px solid #e94b13", 1312 + "important" 1313 + ); 1314 + }); 1002 1002 1003 - var text=normalizeText(el.textContent); 1316 + // Info families: explicit orientation override. 1317 + Array.from( 1318 + root.querySelectorAll( 1319 + ".arsn-info,.dmp-info,.ido-info,.pp-info,.infomessage" 1320 + ) 1321 + ).forEach(function(el){ 1322 + if(!visible(el))return; 1004 1004 1005 - if( 1006 - text.length<2|| 1007 - text.length>90 1008 - ){ 1009 - return; 1010 - } 1324 + el.style.setProperty( 1325 + "border-left", 1326 + "4px solid #21b6d7", 1327 + "important" 1328 + ); 1329 + }); 1330 + } 1011 1011 1012 - var style=getComputedStyle(el); 1332 + /* ======================================================= 1333 + OVERVIEW SEMANTIC THEME PALETTE 1334 + ======================================================= */ 1013 1013 1014 - var bg= 1015 - style.backgroundColor&& 1016 - style.backgroundColor!=="rgba(0, 0, 0, 0)"&& 1017 - style.backgroundColor!=="transparent"; 1336 + function smallestThemeHeaders(){ 1337 + return Array.from( 1338 + root.querySelectorAll( 1339 + "div,span,p,strong,h3,h4,h5,h6" 1340 + ) 1341 + ).filter(function(el){ 1342 + if(!visible(el))return false; 1343 + if(!themeFor(el.textContent))return false; 1018 1018 1345 + return !Array.from( 1346 + el.children||[] 1347 + ).some(function(child){ 1348 + return !!themeFor( 1349 + child.textContent 1350 + ); 1351 + }); 1352 + }); 1353 + } 1354 + 1355 + function findOverviewCard(header){ 1356 + var node=header.parentElement; 1357 + var candidates=[]; 1358 + 1359 + while(node&&node!==root){ 1360 + var rect=node.getBoundingClientRect(); 1361 + var style=getComputedStyle(node); 1362 + 1019 1019 var border= 1020 1020 num(style.borderTopWidth)+ 1021 1021 num(style.borderRightWidth)+ ... ... @@ -1022,315 +1022,677 @@ 1022 1022 num(style.borderBottomWidth)+ 1023 1023 num(style.borderLeftWidth); 1024 1024 1025 - var mostlyUpper= 1026 - text.length>=3&& 1027 - text===text.toUpperCase(); 1028 - 1029 - var exact=exactKnownFirstSection(el); 1030 - 1031 - var score= 1032 - (exact?20:0)+ 1033 - (bg?6:0)+ 1034 - (border>=1?2:0)+ 1035 - (mostlyUpper?4:0)+ 1036 - (num(style.fontWeight)>=600?1:0); 1037 - 1038 - if(score>=7){ 1039 - candidates.push({ 1040 - el:el, 1041 - relativeTop:relativeTop, 1042 - width:r.width, 1043 - score:score 1044 - }); 1369 + if( 1370 + rect.width>=220&& 1371 + rect.width<=800&& 1372 + rect.height>=120&& 1373 + border>=1 1374 + ){ 1375 + candidates.push(node); 1045 1045 } 1046 - }); 1047 1047 1378 + node=node.parentElement; 1379 + } 1380 + 1048 1048 if(!candidates.length)return null; 1049 1049 1050 1050 candidates.sort(function(a,b){ 1051 - if(a.score!==b.score)return b.score-a.score; 1052 - if(Math.abs(a.relativeTop-b.relativeTop)>3){ 1053 - return a.relativeTop-b.relativeTop; 1054 - } 1055 - return b.width-a.width; 1384 + return ( 1385 + b.getBoundingClientRect().height- 1386 + a.getBoundingClientRect().height 1387 + ); 1056 1056 }); 1057 1057 1058 - // For exact known labels always prefer the earliest exact match. 1059 - var exacts=candidates.filter(function(c){ 1060 - return exactKnownFirstSection(c.el); 1061 - }); 1390 + return candidates[0]; 1391 + } 1062 1062 1063 - if(exacts.length){ 1064 - exacts.sort(function(a,b){ 1065 - return a.relativeTop-b.relativeTop||b.width-a.width; 1066 - }); 1067 - return exacts[0].el; 1068 - } 1393 + function rowCandidates(link,card){ 1394 + var result=[]; 1395 + var cardRect= 1396 + card.getBoundingClientRect(); 1069 1069 1070 - // Generic fallback: earliest high-confidence bar. 1071 - candidates.sort(function(a,b){ 1072 - return a.relativeTop-b.relativeTop||b.score-a.score||b.width-a.width; 1073 - }); 1398 + var node=link; 1074 1074 1075 - return candidates[0].el; 1076 - } 1400 + while(node&&node!==card){ 1401 + if(visible(node)){ 1402 + var rect= 1403 + node.getBoundingClientRect(); 1077 1077 1078 - function alignFirstSections(cards){ 1079 - var rows= 1080 - cards.map(function(card){ 1081 - var bar= 1082 - visuallyFirstSectionBar(card); 1405 + if( 1406 + rect.height<=105&& 1407 + rect.width>= 1408 + cardRect.width*.50&& 1409 + rect.width<= 1410 + cardRect.width*1.03 1411 + ){ 1412 + result.push(node); 1413 + } 1414 + } 1083 1083 1084 - if(!bar)return null; 1416 + node=node.parentElement; 1417 + } 1085 1085 1086 - varcardRect=1087 - card.getBoundingClientRect();1419 + return result; 1420 + } 1088 1088 1089 - var barRect= 1090 - bar.getBoundingClientRect(); 1422 + function chooseOuterRow( 1423 + candidates, 1424 + link 1425 + ){ 1426 + if(!candidates.length){ 1427 + return link; 1428 + } 1091 1091 1092 - return {1093 - card:card,1094 - bar:bar,1095 - relativeTop:1096 - barRect.top-cardRect.top,1097 - label:1098 - normalizeText(bar.textContent)1099 - };1430 + var bordered= 1431 + candidates.filter(function(el){ 1432 + return ( 1433 + num( 1434 + getComputedStyle(el) 1435 + .borderLeftWidth 1436 + )>=1 1437 + ); 1100 1100 }); 1101 1101 1102 - // Conservative: only align when every card in the horizontal row 1103 - // has a reliable first section bar. 1104 - if( 1105 - rows.some(function(row){ 1106 - return !row; 1107 - }) 1108 - ){ 1109 - return null; 1440 + var pool= 1441 + bordered.length 1442 + ?bordered 1443 + :candidates; 1444 + 1445 + pool.sort(function(a,b){ 1446 + var ar= 1447 + a.getBoundingClientRect(); 1448 + 1449 + var br= 1450 + b.getBoundingClientRect(); 1451 + 1452 + return ( 1453 + ar.left-br.left|| 1454 + br.width-ar.width 1455 + ); 1456 + }); 1457 + 1458 + return pool[0]||link; 1459 + } 1460 + 1461 + function applyOverviewPalette(){ 1462 + if(PAGE_KIND!=="overview"){ 1463 + return []; 1110 1110 } 1111 1111 1112 - var targetTop= 1113 - Math.max.apply( 1114 - Math, 1115 - rows.map(function(row){ 1116 - return row.relativeTop; 1466 + var headers= 1467 + smallestThemeHeaders() 1468 + .map(function(el){ 1469 + return { 1470 + el:el, 1471 + theme: 1472 + themeFor( 1473 + el.textContent 1474 + ), 1475 + card: 1476 + findOverviewCard( 1477 + el 1478 + ) 1479 + }; 1117 1117 }) 1118 - ); 1481 + .filter(function(row){ 1482 + return !!row.card; 1483 + }); 1119 1119 1120 - rows.forEach(function(row){ 1121 - var delta= 1122 - targetTop- 1123 - row.relativeTop; 1485 + var unique=[]; 1486 + var seenHeaders=new Set(); 1124 1124 1125 - if(delta<=1)return; 1488 + headers.forEach(function(row){ 1489 + var key= 1490 + row.theme.name+ 1491 + "|"+ 1492 + Math.round( 1493 + row.card 1494 + .getBoundingClientRect() 1495 + .left 1496 + )+ 1497 + "|"+ 1498 + Math.round( 1499 + row.el 1500 + .getBoundingClientRect() 1501 + .top 1502 + ); 1126 1126 1127 - saveOriginal( 1128 - row.bar, 1129 - originalMarginTop, 1130 - "margin-top" 1504 + if(!seenHeaders.has(key)){ 1505 + seenHeaders.add(key); 1506 + unique.push(row); 1507 + } 1508 + }); 1509 + 1510 + unique.forEach(function(row){ 1511 + var headerRect= 1512 + row.el 1513 + .getBoundingClientRect(); 1514 + 1515 + row.el.style.setProperty( 1516 + "background", 1517 + row.theme.bg, 1518 + "important" 1131 1131 ); 1132 1132 1133 - var currentMargin= 1134 - num( 1135 - getComputedStyle( 1136 - row.bar 1137 - ).marginTop 1138 - ); 1521 + row.el.style.setProperty( 1522 + "color", 1523 + row.theme.text, 1524 + "important" 1525 + ); 1139 1139 1140 - row.bar.style.setProperty( 1141 - "margin-top", 1142 - ( 1143 - currentMargin+ 1144 - delta 1145 - )+"px" 1527 + row.el.style.setProperty( 1528 + "text-align", 1529 + "left", 1530 + "important" 1146 1146 ); 1147 1147 1148 - row.bar.setAttribute( 1149 - "data-sn-first-section-aligned", 1150 - "4" 1533 + row.el.style.setProperty( 1534 + "word-spacing", 1535 + "normal", 1536 + "important" 1151 1151 ); 1152 1152 1153 - sectionManaged.add(row.bar); 1539 + var later= 1540 + unique 1541 + .filter(function(other){ 1542 + return ( 1543 + other.card===row.card&& 1544 + other.el 1545 + .getBoundingClientRect() 1546 + .top> 1547 + headerRect.top+2 1548 + ); 1549 + }) 1550 + .sort(function(a,b){ 1551 + return ( 1552 + a.el 1553 + .getBoundingClientRect() 1554 + .top- 1555 + b.el 1556 + .getBoundingClientRect() 1557 + .top 1558 + ); 1559 + }); 1560 + 1561 + var stopTop= 1562 + later.length 1563 + ?later[0].el 1564 + .getBoundingClientRect() 1565 + .top 1566 + :Infinity; 1567 + 1568 + Array.from( 1569 + row.card.querySelectorAll("a") 1570 + ).forEach(function(link){ 1571 + if(!visible(link))return; 1572 + 1573 + var rect= 1574 + link.getBoundingClientRect(); 1575 + 1576 + if( 1577 + rect.top<= 1578 + headerRect.bottom-2|| 1579 + rect.top>= 1580 + stopTop-2 1581 + ){ 1582 + return; 1583 + } 1584 + 1585 + var candidates= 1586 + rowCandidates( 1587 + link, 1588 + row.card 1589 + ); 1590 + 1591 + var target= 1592 + chooseOuterRow( 1593 + candidates, 1594 + link 1595 + ); 1596 + 1597 + candidates.forEach(function(el){ 1598 + el.style.setProperty( 1599 + "border-left", 1600 + "0 solid transparent", 1601 + "important" 1602 + ); 1603 + }); 1604 + 1605 + target.style.setProperty( 1606 + "border-left", 1607 + "3px solid "+ 1608 + row.theme.accent, 1609 + "important" 1610 + ); 1611 + 1612 + target.style.setProperty( 1613 + "box-sizing", 1614 + "border-box", 1615 + "important" 1616 + ); 1617 + }); 1154 1154 }); 1155 1155 1156 - return { 1157 - labels: 1158 - rows.map(function(row){ 1159 - return row.label; 1160 - }), 1161 - targetRelativeTop: 1162 - Math.round(targetTop) 1163 - }; 1620 + return unique; 1164 1164 } 1165 1165 1166 - function applyGroup(group){ 1167 - if(!validHorizontalGroup(group)){ 1168 - return null; 1623 + /* ======================================================= 1624 + OVERVIEW CARD HEIGHT + FIRST THEMATIC ROW 1625 + ======================================================= */ 1626 + 1627 + function alignOverviewCards(headers){ 1628 + if( 1629 + PAGE_KIND!=="overview"|| 1630 + window.innerWidth<=MOBILE_MAX 1631 + ){ 1632 + return; 1169 1169 } 1170 1170 1171 1171 var cards=[]; 1172 1172 var seen=new Set(); 1173 1173 1174 - group.entries.forEach(function(entry){1175 - if(!seen.has( entry.target)){1176 - seen.add( entry.target);1177 - cards.push( entry.target);1638 + headers.forEach(function(row){ 1639 + if(!seen.has(row.card)){ 1640 + seen.add(row.card); 1641 + cards.push(row.card); 1178 1178 } 1179 1179 }); 1180 1180 1181 - if(cards.length<2)return null; 1645 + if(cards.length<2){ 1646 + return; 1647 + } 1182 1182 1183 - varfirstSection=1184 - alignFirstSections(cards);1649 + // Group cards by actual top position. 1650 + var groups=[]; 1185 1185 1186 - // The section alignment can change natural card heights. 1187 - // Measure only afterwards. 1188 - var maxHeight=0; 1189 - 1190 1190 cards.forEach(function(card){ 1191 - maxHeight=Math.max( 1192 - maxHeight, 1193 - card.getBoundingClientRect().height 1194 - ); 1653 + var top= 1654 + card.getBoundingClientRect().top; 1655 + 1656 + var group=null; 1657 + 1658 + for(var i=0;i<groups.length;i++){ 1659 + if( 1660 + Math.abs( 1661 + groups[i].top-top 1662 + )<=ROW_TOLERANCE 1663 + ){ 1664 + group=groups[i]; 1665 + break; 1666 + } 1667 + } 1668 + 1669 + if(!group){ 1670 + group={ 1671 + top:top, 1672 + cards:[] 1673 + }; 1674 + groups.push(group); 1675 + } 1676 + 1677 + group.cards.push(card); 1195 1195 }); 1196 1196 1197 - maxHeight=Math.ceil(maxHeight); 1680 + groups.forEach(function(group){ 1681 + if(group.cards.length<2){ 1682 + return; 1683 + } 1198 1198 1199 - if(maxHeight<MIN_H)return null; 1685 + var firstHeaders= 1686 + group.cards.map(function(card){ 1687 + var candidates= 1688 + headers 1689 + .filter(function(row){ 1690 + return row.card===card; 1691 + }) 1692 + .sort(function(a,b){ 1693 + return ( 1694 + a.el 1695 + .getBoundingClientRect() 1696 + .top- 1697 + b.el 1698 + .getBoundingClientRect() 1699 + .top 1700 + ); 1701 + }); 1200 1200 1201 - cards.forEach(function(card){ 1202 - saveOriginal( 1203 - card, 1204 - originalMinHeight, 1205 - "min-height" 1206 - ); 1703 + return candidates.length 1704 + ?candidates[0] 1705 + :null; 1706 + }); 1207 1207 1208 - card.style.setProperty( 1209 - "min-height", 1210 - maxHeight+"px" 1211 - ); 1708 + if( 1709 + !firstHeaders.some(function(row){ 1710 + return !row; 1711 + }) 1712 + ){ 1713 + var targetTop= 1714 + Math.max.apply( 1715 + Math, 1716 + firstHeaders.map(function(row){ 1717 + return ( 1718 + row.el 1719 + .getBoundingClientRect() 1720 + .top- 1721 + row.card 1722 + .getBoundingClientRect() 1723 + .top 1724 + ); 1725 + }) 1726 + ); 1212 1212 1213 - card.setAttribute( 1214 - "data-sn-equal-height-managed", 1215 - "4" 1216 - ); 1728 + firstHeaders.forEach(function(row){ 1729 + var relativeTop= 1730 + row.el 1731 + .getBoundingClientRect() 1732 + .top- 1733 + row.card 1734 + .getBoundingClientRect() 1735 + .top; 1217 1217 1218 - heightManaged.add(card);1219 - });1737 + var delta= 1738 + targetTop-relativeTop; 1220 1220 1221 - return { 1222 - cards:cards.length, 1223 - height:maxHeight, 1224 - firstSection:firstSection 1225 - }; 1740 + if(delta>1){ 1741 + saveStyle( 1742 + row.el, 1743 + originalMargin, 1744 + "margin-top" 1745 + ); 1746 + 1747 + var current= 1748 + num( 1749 + getComputedStyle( 1750 + row.el 1751 + ).marginTop 1752 + ); 1753 + 1754 + row.el.style.setProperty( 1755 + "margin-top", 1756 + ( 1757 + current+delta 1758 + )+"px" 1759 + ); 1760 + 1761 + row.el.setAttribute( 1762 + "data-sn-master-first-row", 1763 + "1" 1764 + ); 1765 + 1766 + managedMargin.add( 1767 + row.el 1768 + ); 1769 + } 1770 + }); 1771 + } 1772 + 1773 + var maxHeight=0; 1774 + 1775 + group.cards.forEach(function(card){ 1776 + maxHeight= 1777 + Math.max( 1778 + maxHeight, 1779 + card 1780 + .getBoundingClientRect() 1781 + .height 1782 + ); 1783 + }); 1784 + 1785 + maxHeight= 1786 + Math.ceil(maxHeight); 1787 + 1788 + group.cards.forEach(function(card){ 1789 + saveStyle( 1790 + card, 1791 + originalHeight, 1792 + "min-height" 1793 + ); 1794 + 1795 + card.style.setProperty( 1796 + "min-height", 1797 + maxHeight+"px" 1798 + ); 1799 + 1800 + card.setAttribute( 1801 + "data-sn-master-equal-height", 1802 + "1" 1803 + ); 1804 + 1805 + managedHeight.add( 1806 + card 1807 + ); 1808 + }); 1809 + }); 1226 1226 } 1227 1227 1228 - function run(){ 1229 - reset(); 1812 + /* ======================================================= 1813 + DETAIL GRID EQUAL HEIGHT, DESKTOP ONLY 1814 + ======================================================= */ 1230 1230 1816 + function equaliseDetailGrids(){ 1231 1231 if( 1818 + PAGE_KIND!=="detail"|| 1232 1232 window.innerWidth<=MOBILE_MAX 1233 1233 ){ 1234 1234 return; 1235 1235 } 1236 1236 1237 - var parents= 1824 + var selectors=[ 1825 + ".arsn-grid", 1826 + ".arsn-grid-2", 1827 + ".arsn-grid-3", 1828 + ".dmp-grid", 1829 + ".ido-grid", 1830 + ".pp-grid" 1831 + ]; 1832 + 1833 + selectors.forEach(function(selector){ 1238 1238 Array.from( 1239 - root.querySelectorAll("*") 1240 - ).filter(function(parent){ 1241 - return ( 1242 - visible(parent,MIN_W,MIN_H)&& 1243 - parent.children&& 1244 - parent.children.length>=2&& 1245 - parent.children.length<=MAX_PARENT_CHILDREN 1246 - ); 1247 - }); 1835 + root.querySelectorAll(selector) 1836 + ).forEach(function(grid){ 1837 + var children= 1838 + Array.from( 1839 + grid.children||[] 1840 + ).filter(visible); 1248 1248 1249 - var touched=new Set(); 1842 + if(children.length<2){ 1843 + return; 1844 + } 1250 1250 1251 - parents.forEach(function(parent){ 1252 - var entries=[]; 1846 + var groups=[]; 1253 1253 1254 - Array.from(parent.children).forEach(function(child){ 1255 - if(!visible(child,MIN_W,MIN_H))return; 1848 + children.forEach(function(child){ 1849 + var top= 1850 + child 1851 + .getBoundingClientRect() 1852 + .top; 1256 1256 1257 - var target=pickTarget(child); 1258 - if(!target)return; 1854 + var group=null; 1259 1259 1260 - entries.push({ 1261 - target:target, 1262 - rect:target.getBoundingClientRect() 1856 + for(var i=0;i<groups.length;i++){ 1857 + if( 1858 + Math.abs( 1859 + groups[i].top-top 1860 + )<=ROW_TOLERANCE 1861 + ){ 1862 + group=groups[i]; 1863 + break; 1864 + } 1865 + } 1866 + 1867 + if(!group){ 1868 + group={ 1869 + top:top, 1870 + items:[] 1871 + }; 1872 + groups.push(group); 1873 + } 1874 + 1875 + group.items.push(child); 1263 1263 }); 1264 - }); 1265 1265 1266 - if(entries.length<2)return; 1878 + groups.forEach(function(group){ 1879 + if(group.items.length<2){ 1880 + return; 1881 + } 1267 1267 1268 - groupsByVisualRow(entries).forEach(function(group){ 1269 - if(!validHorizontalGroup(group))return; 1883 + var maxHeight=0; 1270 1270 1271 - var signature= 1272 - group.entries.map(function(entry){ 1273 - return entry.target; 1885 + group.items.forEach(function(item){ 1886 + maxHeight= 1887 + Math.max( 1888 + maxHeight, 1889 + item 1890 + .getBoundingClientRect() 1891 + .height 1892 + ); 1274 1274 }); 1275 1275 1276 - if( 1277 - !signature.some(function(el){ 1278 - return !touched.has(el); 1279 - }) 1280 - ){ 1281 - return; 1282 - } 1895 + maxHeight= 1896 + Math.ceil(maxHeight); 1283 1283 1284 - var applied= 1285 - applyGroup(group); 1898 + group.items.forEach(function(item){ 1899 + saveStyle( 1900 + item, 1901 + originalHeight, 1902 + "min-height" 1903 + ); 1286 1286 1287 - if(applied){ 1288 - signature.forEach(function(el){ 1289 - touched.add(el); 1905 + item.style.setProperty( 1906 + "min-height", 1907 + maxHeight+"px" 1908 + ); 1909 + 1910 + item.setAttribute( 1911 + "data-sn-master-equal-height", 1912 + "1" 1913 + ); 1914 + 1915 + managedHeight.add(item); 1290 1290 }); 1291 - } 1917 + }); 1292 1292 }); 1293 1293 }); 1294 1294 } 1295 1295 1296 - function schedule(){ 1297 - if(raf)cancelAnimationFrame(raf); 1922 + /* ======================================================= 1923 + RUN / RESPONSIVE SCHEDULING 1924 + ======================================================= */ 1298 1298 1299 - raf=requestAnimationFrame(function(){ 1300 - raf=requestAnimationFrame(function(){ 1301 - raf=0; 1302 - run(); 1303 - }); 1304 - }); 1926 + function run(){ 1927 + if(running)return; 1928 + 1929 + running=true; 1930 + 1931 + try{ 1932 + resetRuntime(); 1933 + applyPlaceholderBadge(); 1934 + propagateDetailAccents(); 1935 + 1936 + var headers= 1937 + applyOverviewPalette(); 1938 + 1939 + makeThreeLineAreaLabels(); 1940 + makeFilledRedOrangeCTAsBorderless(); 1941 + 1942 + if( 1943 + window.innerWidth> 1944 + MOBILE_MAX 1945 + ){ 1946 + alignOverviewCards( 1947 + headers 1948 + ); 1949 + 1950 + equaliseDetailGrids(); 1951 + } 1952 + }finally{ 1953 + running=false; 1954 + } 1305 1305 } 1306 1306 1307 - addEventListener("resize",schedule,{passive:true}); 1308 - addEventListener("load",schedule,{once:true}); 1957 + function onResize(){ 1958 + if(resizeTimer){ 1959 + clearTimeout( 1960 + resizeTimer 1961 + ); 1962 + } 1309 1309 1310 - root.addEventListener( 1311 - "click", 1312 - function(){ 1313 - setTimeout(schedule,0); 1314 - }, 1315 - true 1316 - ); 1964 + resizeTimer= 1965 + setTimeout( 1966 + function(){ 1967 + resizeTimer=0; 1968 + run(); 1969 + }, 1970 + RESIZE_DEBOUNCE 1971 + ); 1972 + } 1317 1317 1318 - Array.from(root.querySelectorAll("img")).forEach(function(img){ 1319 - if(!img.complete){ 1320 - img.addEventListener("load",schedule,{once:true}); 1974 + async function waitForReady(){ 1975 + if( 1976 + document.readyState!=="complete" 1977 + ){ 1978 + await new Promise(function(resolve){ 1979 + window.addEventListener( 1980 + "load", 1981 + resolve, 1982 + {once:true} 1983 + ); 1984 + }); 1321 1321 } 1322 - }); 1323 1323 1324 - if(document.fonts&&document.fonts.ready){ 1325 - document.fonts.ready.then(schedule); 1987 + if( 1988 + document.fonts&& 1989 + document.fonts.ready 1990 + ){ 1991 + try{ 1992 + await document.fonts.ready; 1993 + }catch(error){} 1994 + } 1995 + 1996 + var images= 1997 + Array.from( 1998 + root.querySelectorAll("img") 1999 + ); 2000 + 2001 + await Promise.all( 2002 + images.map(function(img){ 2003 + if(img.complete){ 2004 + return Promise.resolve(); 2005 + } 2006 + 2007 + return new Promise(function(resolve){ 2008 + var done=function(){ 2009 + resolve(); 2010 + }; 2011 + 2012 + img.addEventListener( 2013 + "load", 2014 + done, 2015 + {once:true} 2016 + ); 2017 + 2018 + img.addEventListener( 2019 + "error", 2020 + done, 2021 + {once:true} 2022 + ); 2023 + }); 2024 + }) 2025 + ); 2026 + 2027 + run(); 1326 1326 } 1327 1327 1328 - schedule(); 1329 - setTimeout(schedule,200); 1330 - setTimeout(schedule,650); 1331 - setTimeout(schedule,1400); 2030 + window.addEventListener( 2031 + "resize", 2032 + onResize, 2033 + {passive:true} 2034 + ); 2035 + 2036 + waitForReady(); 1332 1332 })(); 1333 1333 </script> 1334 -<!-- SN_HORIZONTAL_BOX_HARMONIZER_END --> 2039 + 2040 +<!-- SN_SERVICE_NAVIGATOR_MASTER_STYLE_END --> 1335 1335 {{/html}} 1336 1336