Änderungen von Dokument Art & Research Services Navigator
Zuletzt geändert von Veronika Kocher am Freitag, 18 Sep. 2026 16:47
Von Version 9.5
bearbeitet von Veronika Kocher
am Donnerstag, 03 Sep. 2026 13:04
am Donnerstag, 03 Sep. 2026 13:04
Änderungskommentar:
Es gibt keinen Kommentar für diese Version
Auf Version 9.2
bearbeitet von Veronika Kocher
am Donnerstag, 03 Sep. 2026 9:18
am Donnerstag, 03 Sep. 2026 9:18
Änderungskommentar:
Es gibt keinen Kommentar für diese Version
Zusammenfassung
-
Seiteneigenschaften (1 geändert, 0 hinzugefügt, 0 gelöscht)
Details
- Seiteneigenschaften
-
- Inhalt
-
... ... @@ -636,100 +636,21 @@ 636 636 ))) 637 637 638 638 {{html clean="false"}} 639 -<!-- SN_SERVICE_NAVIGATOR_MASTER_STYLE_START --> 640 - 641 -<style data-sn-service-navigator-master="1"> 642 -/* ========================================================= 643 - MASTER TYPOGRAPHY 644 - ========================================================= */ 645 -#xwikicontent h1, 646 -#xwikicontent h2, 647 -#xwikicontent h3, 648 -#xwikicontent h4, 649 -#xwikicontent h5, 650 -#xwikicontent h6, 651 -#xwikicontent .box-title, 652 -#xwikicontent [role="heading"], 653 -#xwikicontent h1 a, 654 -#xwikicontent h2 a, 655 -#xwikicontent h3 a, 656 -#xwikicontent h4 a, 657 -#xwikicontent h5 a, 658 -#xwikicontent h6 a, 659 -#xwikicontent .box-title a, 660 -#xwikicontent [role="heading"] a{ 661 - text-align:left!important; 662 - text-justify:auto!important; 663 - word-spacing:normal!important; 639 +<!-- SN_HORIZONTAL_BOX_HARMONIZER_START --> 640 +<style data-sn-horizontal-box-harmonizer="1"> 641 +[data-sn-equal-height-managed="1"]{box-sizing:border-box} 642 +@media(max-width:767px){ 643 + [data-sn-equal-height-managed="1"]{min-height:0!important} 664 664 } 665 - 666 -/* ========================================================= 667 - COMING SOON / IN VORBEREITUNG 668 - ========================================================= */ 669 -.sn-coming-soon-badge{ 670 - display:inline-block; 671 - vertical-align:middle; 672 - margin-left:10px; 673 - padding:4px 8px; 674 - border-radius:14px; 675 - border:1px solid #efd9cc; 676 - background:#fff4ee; 677 - color:#8a4d36; 678 - font-size:11px; 679 - font-weight:700; 680 - letter-spacing:.055em; 681 - line-height:1.2; 682 - white-space:nowrap; 683 -} 684 - 685 -/* ========================================================= 686 - NATIVE / DETAIL CALLOUT GEOMETRY 687 - Preserve existing backgrounds. 688 - ========================================================= */ 689 -#xwikicontent .arsn-info, 690 -#xwikicontent .dmp-info, 691 -#xwikicontent .ido-info, 692 -#xwikicontent .pp-info, 693 -#xwikicontent .infomessage{ 694 - box-sizing:border-box!important; 695 - border-left:4px solid #21b6d7!important; 696 - border-radius:8px; 697 - text-align:left!important; 698 - word-spacing:normal!important; 699 -} 700 - 701 -#xwikicontent .arsn-warn, 702 -#xwikicontent .dmp-warn, 703 -#xwikicontent .ido-warn, 704 -#xwikicontent .pp-warn, 705 -#xwikicontent .warn, 706 -#xwikicontent .warning, 707 -#xwikicontent .warningmessage, 708 -#xwikicontent .errormessage{ 709 - box-sizing:border-box!important; 710 - border-left:4px solid #e94b13!important; 711 - border-radius:8px; 712 - text-align:left!important; 713 - word-spacing:normal!important; 714 -} 715 - 716 -[data-sn-master-equal-height], 717 -[data-sn-master-first-row]{ 718 - box-sizing:border-box; 719 -} 720 720 </style> 721 - 722 -<script data-sn-service-navigator-master="1"> 646 +<script data-sn-horizontal-box-harmonizer="1"> 723 723 (function(){ 724 724 "use strict"; 725 725 726 - var PAGE_KIND="overview"; 727 - var PLACEHOLDER=false; 728 - var PLACEHOLDER_LABEL="IN VORBEREITUNG"; 729 - 730 730 var MOBILE_MAX=767; 731 - var ROW_TOLERANCE=6; 732 - var RESIZE_DEBOUNCE=220; 651 + var ROW_TOLERANCE=4; 652 + var MIN_W=150; 653 + var MIN_H=36; 733 733 734 734 var root= 735 735 document.getElementById("xwikicontent")|| ... ... @@ -739,1044 +739,212 @@ 739 739 740 740 if(!root)return; 741 741 742 - var managedHeight=new Set(); 743 - var managedMargin=new Set(); 744 - var originalHeight=new WeakMap(); 745 - var originalMargin=new WeakMap(); 663 + var managed=new Set(); 664 + var raf=0; 746 746 747 - var resizeTimer=0; 748 - var running=false; 749 - 750 - var THEMES=[ 751 - { 752 - name:"BLUE", 753 - accent:"#21b6d7", 754 - bg:"#eaf7fb", 755 - text:"#315d68", 756 - labels:[ 757 - "HIER STARTEN", 758 - "ENTSCHEIDEN", 759 - "ÜBERPRÜFEN & ANPASSEN", 760 - "START HERE", 761 - "DECIDE", 762 - "REVIEW & ADAPT" 763 - ] 764 - }, 765 - { 766 - name:"RED", 767 - accent:"#e94b13", 768 - bg:"#fff1ec", 769 - text:"#8a4d36", 770 - labels:[ 771 - "PLANEN & ORGANISIEREN", 772 - "ORGANISIEREN & DOKUMENTIEREN", 773 - "PUBLIZIEREN & PRÄSENTIEREN", 774 - "PLAN & ORGANISE", 775 - "PLAN & ORGANIZE", 776 - "ORGANISE & DOCUMENT", 777 - "ORGANIZE & DOCUMENT", 778 - "PUBLISH & PRESENT" 779 - ] 780 - }, 781 - { 782 - name:"YELLOW", 783 - accent:"#f0aa00", 784 - bg:"#fff8e7", 785 - text:"#785b17", 786 - labels:[ 787 - "SCHÜTZEN & KLÄREN", 788 - "STANDARDISIEREN & IDENTIFIZIEREN", 789 - "ÖFFNEN, NACHNUTZEN & AUFFINDBAR MACHEN", 790 - "PROTECT & CLARIFY", 791 - "STANDARDISE & IDENTIFY", 792 - "STANDARDIZE & IDENTIFY", 793 - "OPEN, REUSE & MAKE FINDABLE" 794 - ] 795 - }, 796 - { 797 - name:"GREEN", 798 - accent:"#38b76a", 799 - bg:"#edf9f1", 800 - text:"#3f7451", 801 - labels:[ 802 - "INFRASTRUKTUR EINRICHTEN", 803 - "INFRASTRUKTUR & ZUSAMMENARBEIT EINRICHTEN", 804 - "SPEICHERN & ZUGRIFF STEUERN", 805 - "REPOSITORIUM, ERHALTEN & ÜBERGEBEN", 806 - "SET UP INFRASTRUCTURE", 807 - "SET UP INFRASTRUCTURE & COLLABORATION", 808 - "STORE & CONTROL ACCESS", 809 - "REPOSITORY, PRESERVE & HAND OVER" 810 - ] 811 - } 812 - ]; 813 - 814 - function num(value){ 815 - var n=parseFloat(value); 666 + function num(v){ 667 + var n=parseFloat(v); 816 816 return Number.isFinite(n)?n:0; 817 817 } 818 818 819 - function norm(value){ 820 - return String(value||"") 821 - .replace(/\s+/g," ") 822 - .trim() 823 - .toUpperCase(); 824 - } 825 - 826 826 function visible(el){ 827 827 if(!el||el.nodeType!==1)return false; 828 - 829 - var style=getComputedStyle(el); 830 - var rect=el.getBoundingClientRect(); 831 - 832 - return ( 833 - style.display!=="none"&& 834 - style.visibility!=="hidden"&& 835 - rect.width>20&& 836 - rect.height>4 837 - ); 673 + var s=getComputedStyle(el); 674 + if(s.display==="none"||s.visibility==="hidden"||Number(s.opacity)===0)return false; 675 + var r=el.getBoundingClientRect(); 676 + return r.width>=MIN_W&&r.height>=MIN_H; 838 838 } 839 839 840 - function saveStyle(el,map,property){ 841 - if(map.has(el))return; 842 - 843 - map.set(el,{ 844 - value:el.style.getPropertyValue(property), 845 - priority:el.style.getPropertyPriority(property) 846 - }); 847 - } 848 - 849 - function restoreStyle(el,map,property){ 850 - var original=map.get(el); 851 - 852 - if(original&&original.value){ 853 - el.style.setProperty( 854 - property, 855 - original.value, 856 - original.priority||"" 857 - ); 858 - }else{ 859 - el.style.removeProperty(property); 860 - } 861 - } 862 - 863 - function resetRuntime(){ 864 - managedHeight.forEach(function(el){ 865 - restoreStyle( 866 - el, 867 - originalHeight, 868 - "min-height" 869 - ); 870 - el.removeAttribute( 871 - "data-sn-master-equal-height" 872 - ); 873 - }); 874 - 875 - managedMargin.forEach(function(el){ 876 - restoreStyle( 877 - el, 878 - originalMargin, 879 - "margin-top" 880 - ); 881 - el.removeAttribute( 882 - "data-sn-master-first-row" 883 - ); 884 - }); 885 - 886 - managedHeight.clear(); 887 - managedMargin.clear(); 888 - } 889 - 890 - function themeFor(text){ 891 - var value=norm(text); 892 - 893 - for(var i=0;i<THEMES.length;i++){ 894 - for(var j=0;j<THEMES[i].labels.length;j++){ 895 - var label=THEMES[i].labels[j]; 896 - 897 - if( 898 - value===label|| 899 - value.indexOf(label+" ")===0|| 900 - value.indexOf(label+" -")===0|| 901 - value.indexOf(label+" ·")===0 902 - ){ 903 - return THEMES[i]; 904 - } 905 - } 906 - } 907 - 908 - return null; 909 - } 910 - 911 - /* ======================================================= 912 - PLACEHOLDER BADGE 913 - ======================================================= */ 914 - 915 - function applyPlaceholderBadge(){ 916 - if(!PLACEHOLDER)return; 917 - 918 - if( 919 - document.querySelector( 920 - ".sn-coming-soon-badge" 921 - ) 922 - ){ 923 - return; 924 - } 925 - 926 - var title= 927 - document.querySelector( 928 - "#document-title" 929 - )|| 930 - document.querySelector( 931 - "h1" 932 - ); 933 - 934 - if(!title)return; 935 - 936 - var badge= 937 - document.createElement( 938 - "span" 939 - ); 940 - 941 - badge.className= 942 - "sn-coming-soon-badge"; 943 - 944 - badge.textContent= 945 - PLACEHOLDER_LABEL; 946 - 947 - badge.setAttribute( 948 - "aria-label", 949 - PLACEHOLDER_LABEL 679 + function excluded(el){ 680 + return !el.matches||el.matches( 681 + "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]" 950 950 ); 951 - 952 - title.appendChild( 953 - badge 954 - ); 955 955 } 956 956 957 - /* ======================================================= 958 - DETAIL PAGE OWN-ACCENT PROPAGATION 959 - ======================================================= */ 960 - 961 - function parseRGB(value){ 962 - var match=String(value||"").match( 963 - /rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)/i 964 - ); 965 - 966 - if(!match)return null; 967 - 968 - return [ 969 - Number(match[1]), 970 - Number(match[2]), 971 - Number(match[3]) 972 - ]; 685 + function namedLikeBox(el){ 686 + var c=typeof el.className==="string"?el.className:""; 687 + return /(^|[\s_-])(box|card|tile|panel|role|check|service|source|call|area|detail|resource|topic|warn|info)([\s_-]|$)/i.test(c); 973 973 } 974 974 975 - function distance(a,b){ 976 - return Math.sqrt( 977 - Math.pow(a[0]-b[0],2)+ 978 - Math.pow(a[1]-b[1],2)+ 979 - Math.pow(a[2]-b[2],2) 690 + function boxLike(el){ 691 + if(!visible(el)||excluded(el))return false; 692 + var s=getComputedStyle(el); 693 + var r=el.getBoundingClientRect(); 694 + var border= 695 + num(s.borderTopWidth)+num(s.borderRightWidth)+ 696 + num(s.borderBottomWidth)+num(s.borderLeftWidth); 697 + var radius=Math.max( 698 + num(s.borderTopLeftRadius),num(s.borderTopRightRadius), 699 + num(s.borderBottomLeftRadius),num(s.borderBottomRightRadius) 980 980 ); 701 + var bg=s.backgroundColor&&s.backgroundColor!=="rgba(0, 0, 0, 0)"&&s.backgroundColor!=="transparent"; 702 + var shadow=s.boxShadow&&s.boxShadow!=="none"; 703 + return namedLikeBox(el)||border>=1||(bg&&radius>=3)||(shadow&&r.width>=180); 981 981 } 982 982 983 - function paletteMatch(cssColor){ 984 - var rgb=parseRGB(cssColor); 706 + function pickTarget(child){ 707 + if(!visible(child))return null; 708 + if(boxLike(child))return child; 985 985 986 - if(!rgb)return null; 987 - 988 - var palette=[ 989 - {hex:"#21b6d7",rgb:[33,182,215]}, 990 - {hex:"#e94b13",rgb:[233,75,19]}, 991 - {hex:"#f0aa00",rgb:[240,170,0]}, 992 - {hex:"#38b76a",rgb:[56,183,106]} 993 - ]; 994 - 995 - var best=null; 996 - var bestDistance=Infinity; 997 - 998 - palette.forEach(function(item){ 999 - var d=distance(rgb,item.rgb); 1000 - 1001 - if(d<bestDistance){ 1002 - best=item; 1003 - bestDistance=d; 1004 - } 710 + var cr=child.getBoundingClientRect(); 711 + var q=[]; 712 + Array.from(child.children||[]).forEach(function(el){ 713 + q.push({el:el,depth:1}); 1005 1005 }); 1006 1006 1007 - return bestDistance<=30 1008 - ?best 1009 - :null; 1010 - } 716 + var best=null,bestScore=-1; 1011 1011 1012 - function propagateDetailAccents(){ 1013 - if(PAGE_KIND!=="detail")return; 718 + while(q.length){ 719 + var item=q.shift(); 720 + var el=item.el; 721 + if(!visible(el))continue; 1014 1014 1015 - Array.from( 1016 - root.querySelectorAll( 1017 - ".arsn-call,.dmp-call,.ido-call,.pp-call,"+ 1018 - ".arsn-source,.dmp-source,.ido-source,.pp-source" 1019 - ) 1020 - ).forEach(function(el){ 1021 - if(!visible(el))return; 723 + var r=el.getBoundingClientRect(); 1022 1022 1023 - var style=getComputedStyle(el); 1024 - 1025 - if( 1026 - num(style.borderTopWidth)>=2 1027 - ){ 1028 - var match= 1029 - paletteMatch( 1030 - style.borderTopColor 1031 - ); 1032 - 1033 - if(match){ 1034 - el.style.setProperty( 1035 - "border-left", 1036 - "4px solid "+match.hex, 1037 - "important" 1038 - ); 725 + if(r.width>=cr.width*.72&&boxLike(el)){ 726 + var widthFit=1-Math.min(1,Math.abs(cr.width-r.width)/Math.max(1,cr.width)); 727 + var topFit=1-Math.min(1,Math.abs(cr.top-r.top)/80); 728 + var score=widthFit*5+topFit*2+Math.min(r.height,600)/600; 729 + if(score>bestScore){ 730 + best=el; 731 + bestScore=score; 1039 1039 } 1040 1040 } 1041 - }); 1042 1042 1043 - // Warning families: explicit safety override. 1044 - Array.from( 1045 - root.querySelectorAll( 1046 - ".arsn-warn,.dmp-warn,.ido-warn,.pp-warn,"+ 1047 - ".warn,.warning,.warningmessage,.errormessage" 1048 - ) 1049 - ).forEach(function(el){ 1050 - if(!visible(el))return; 1051 - 1052 - el.style.setProperty( 1053 - "border-left", 1054 - "4px solid #e94b13", 1055 - "important" 1056 - ); 1057 - }); 1058 - 1059 - // Info families: explicit orientation override. 1060 - Array.from( 1061 - root.querySelectorAll( 1062 - ".arsn-info,.dmp-info,.ido-info,.pp-info,.infomessage" 1063 - ) 1064 - ).forEach(function(el){ 1065 - if(!visible(el))return; 1066 - 1067 - el.style.setProperty( 1068 - "border-left", 1069 - "4px solid #21b6d7", 1070 - "important" 1071 - ); 1072 - }); 1073 - } 1074 - 1075 - /* ======================================================= 1076 - OVERVIEW SEMANTIC THEME PALETTE 1077 - ======================================================= */ 1078 - 1079 - function smallestThemeHeaders(){ 1080 - return Array.from( 1081 - root.querySelectorAll( 1082 - "div,span,p,strong,h3,h4,h5,h6" 1083 - ) 1084 - ).filter(function(el){ 1085 - if(!visible(el))return false; 1086 - if(!themeFor(el.textContent))return false; 1087 - 1088 - return !Array.from( 1089 - el.children||[] 1090 - ).some(function(child){ 1091 - return !!themeFor( 1092 - child.textContent 1093 - ); 1094 - }); 1095 - }); 1096 - } 1097 - 1098 - function findOverviewCard(header){ 1099 - var node=header.parentElement; 1100 - var candidates=[]; 1101 - 1102 - while(node&&node!==root){ 1103 - var rect=node.getBoundingClientRect(); 1104 - var style=getComputedStyle(node); 1105 - 1106 - var border= 1107 - num(style.borderTopWidth)+ 1108 - num(style.borderRightWidth)+ 1109 - num(style.borderBottomWidth)+ 1110 - num(style.borderLeftWidth); 1111 - 1112 - if( 1113 - rect.width>=220&& 1114 - rect.width<=800&& 1115 - rect.height>=120&& 1116 - border>=1 1117 - ){ 1118 - candidates.push(node); 735 + if(item.depth<3){ 736 + Array.from(el.children||[]).forEach(function(next){ 737 + q.push({el:next,depth:item.depth+1}); 738 + }); 1119 1119 } 1120 - 1121 - node=node.parentElement; 1122 1122 } 1123 1123 1124 - if(!candidates.length)return null; 1125 - 1126 - candidates.sort(function(a,b){ 1127 - return ( 1128 - b.getBoundingClientRect().height- 1129 - a.getBoundingClientRect().height 1130 - ); 1131 - }); 1132 - 1133 - return candidates[0]; 742 + return best; 1134 1134 } 1135 1135 1136 - function rowCandidates(link,card){ 1137 - var result=[]; 1138 - var cardRect= 1139 - card.getBoundingClientRect(); 1140 - 1141 - var node=link; 1142 - 1143 - while(node&&node!==card){ 1144 - if(visible(node)){ 1145 - var rect= 1146 - node.getBoundingClientRect(); 1147 - 1148 - if( 1149 - rect.height<=105&& 1150 - rect.width>= 1151 - cardRect.width*.50&& 1152 - rect.width<= 1153 - cardRect.width*1.03 1154 - ){ 1155 - result.push(node); 1156 - } 1157 - } 1158 - 1159 - node=node.parentElement; 1160 - } 1161 - 1162 - return result; 1163 - } 1164 - 1165 - function chooseOuterRow( 1166 - candidates, 1167 - link 1168 - ){ 1169 - if(!candidates.length){ 1170 - return link; 1171 - } 1172 - 1173 - var bordered= 1174 - candidates.filter(function(el){ 1175 - return ( 1176 - num( 1177 - getComputedStyle(el) 1178 - .borderLeftWidth 1179 - )>=1 1180 - ); 1181 - }); 1182 - 1183 - var pool= 1184 - bordered.length 1185 - ?bordered 1186 - :candidates; 1187 - 1188 - pool.sort(function(a,b){ 1189 - var ar= 1190 - a.getBoundingClientRect(); 1191 - 1192 - var br= 1193 - b.getBoundingClientRect(); 1194 - 1195 - return ( 1196 - ar.left-br.left|| 1197 - br.width-ar.width 1198 - ); 745 + function reset(){ 746 + managed.forEach(function(el){ 747 + el.style.removeProperty("min-height"); 748 + el.removeAttribute("data-sn-equal-height-managed"); 1199 1199 }); 1200 - 1201 - return pool[0]||link; 750 + managed.clear(); 1202 1202 } 1203 1203 1204 - function applyOverviewPalette(){ 1205 - if(PAGE_KIND!=="overview"){ 1206 - return []; 753 + function horizontalLayout(parent){ 754 + if(!visible(parent))return false; 755 + var s=getComputedStyle(parent); 756 + if(s.display==="grid"||s.display==="inline-grid")return true; 757 + if(s.display==="flex"||s.display==="inline-flex"){ 758 + return s.flexDirection==="row"||s.flexDirection==="row-reverse"; 1207 1207 } 1208 - 1209 - var headers= 1210 - smallestThemeHeaders() 1211 - .map(function(el){ 1212 - return { 1213 - el:el, 1214 - theme: 1215 - themeFor( 1216 - el.textContent 1217 - ), 1218 - card: 1219 - findOverviewCard( 1220 - el 1221 - ) 1222 - }; 1223 - }) 1224 - .filter(function(row){ 1225 - return !!row.card; 1226 - }); 1227 - 1228 - var unique=[]; 1229 - var seenHeaders=new Set(); 1230 - 1231 - headers.forEach(function(row){ 1232 - var key= 1233 - row.theme.name+ 1234 - "|"+ 1235 - Math.round( 1236 - row.card 1237 - .getBoundingClientRect() 1238 - .left 1239 - )+ 1240 - "|"+ 1241 - Math.round( 1242 - row.el 1243 - .getBoundingClientRect() 1244 - .top 1245 - ); 1246 - 1247 - if(!seenHeaders.has(key)){ 1248 - seenHeaders.add(key); 1249 - unique.push(row); 1250 - } 1251 - }); 1252 - 1253 - unique.forEach(function(row){ 1254 - var headerRect= 1255 - row.el 1256 - .getBoundingClientRect(); 1257 - 1258 - row.el.style.setProperty( 1259 - "background", 1260 - row.theme.bg, 1261 - "important" 1262 - ); 1263 - 1264 - row.el.style.setProperty( 1265 - "color", 1266 - row.theme.text, 1267 - "important" 1268 - ); 1269 - 1270 - row.el.style.setProperty( 1271 - "text-align", 1272 - "left", 1273 - "important" 1274 - ); 1275 - 1276 - row.el.style.setProperty( 1277 - "word-spacing", 1278 - "normal", 1279 - "important" 1280 - ); 1281 - 1282 - var later= 1283 - unique 1284 - .filter(function(other){ 1285 - return ( 1286 - other.card===row.card&& 1287 - other.el 1288 - .getBoundingClientRect() 1289 - .top> 1290 - headerRect.top+2 1291 - ); 1292 - }) 1293 - .sort(function(a,b){ 1294 - return ( 1295 - a.el 1296 - .getBoundingClientRect() 1297 - .top- 1298 - b.el 1299 - .getBoundingClientRect() 1300 - .top 1301 - ); 1302 - }); 1303 - 1304 - var stopTop= 1305 - later.length 1306 - ?later[0].el 1307 - .getBoundingClientRect() 1308 - .top 1309 - :Infinity; 1310 - 1311 - Array.from( 1312 - row.card.querySelectorAll("a") 1313 - ).forEach(function(link){ 1314 - if(!visible(link))return; 1315 - 1316 - var rect= 1317 - link.getBoundingClientRect(); 1318 - 1319 - if( 1320 - rect.top<= 1321 - headerRect.bottom-2|| 1322 - rect.top>= 1323 - stopTop-2 1324 - ){ 1325 - return; 1326 - } 1327 - 1328 - var candidates= 1329 - rowCandidates( 1330 - link, 1331 - row.card 1332 - ); 1333 - 1334 - var target= 1335 - chooseOuterRow( 1336 - candidates, 1337 - link 1338 - ); 1339 - 1340 - candidates.forEach(function(el){ 1341 - el.style.setProperty( 1342 - "border-left", 1343 - "0 solid transparent", 1344 - "important" 1345 - ); 1346 - }); 1347 - 1348 - target.style.setProperty( 1349 - "border-left", 1350 - "3px solid "+ 1351 - row.theme.accent, 1352 - "important" 1353 - ); 1354 - 1355 - target.style.setProperty( 1356 - "box-sizing", 1357 - "border-box", 1358 - "important" 1359 - ); 1360 - }); 1361 - }); 1362 - 1363 - return unique; 760 + return false; 1364 1364 } 1365 1365 1366 - /* ======================================================= 1367 - OVERVIEW CARD HEIGHT + FIRST THEMATIC ROW 1368 - ======================================================= */ 1369 - 1370 - function alignOverviewCards(headers){ 1371 - if( 1372 - PAGE_KIND!=="overview"|| 1373 - window.innerWidth<=MOBILE_MAX 1374 - ){ 1375 - return; 1376 - } 1377 - 1378 - var cards=[]; 1379 - var seen=new Set(); 1380 - 1381 - headers.forEach(function(row){ 1382 - if(!seen.has(row.card)){ 1383 - seen.add(row.card); 1384 - cards.push(row.card); 1385 - } 1386 - }); 1387 - 1388 - if(cards.length<2){ 1389 - return; 1390 - } 1391 - 1392 - // Group cards by actual top position. 763 + function rowGroups(entries){ 1393 1393 var groups=[]; 1394 - 1395 - cards.forEach(function(card){ 1396 - var top= 1397 - card.getBoundingClientRect().top; 1398 - 765 + entries.slice().sort(function(a,b){ 766 + return a.rect.top-b.rect.top||a.rect.left-b.rect.left; 767 + }).forEach(function(entry){ 1399 1399 var group=null; 1400 - 1401 1401 for(var i=0;i<groups.length;i++){ 1402 - if( 1403 - Math.abs( 1404 - groups[i].top-top 1405 - )<=ROW_TOLERANCE 1406 - ){ 770 + if(Math.abs(groups[i].top-entry.rect.top)<=ROW_TOLERANCE){ 1407 1407 group=groups[i]; 1408 1408 break; 1409 1409 } 1410 1410 } 1411 - 1412 1412 if(!group){ 1413 - group={ 1414 - top:top, 1415 - cards:[] 1416 - }; 776 + group={top:entry.rect.top,entries:[]}; 1417 1417 groups.push(group); 1418 1418 } 1419 - 1420 - group.cards.push(card); 779 + group.entries.push(entry); 1421 1421 }); 781 + return groups; 782 + } 1422 1422 1423 - groups.forEach(function(group){ 1424 - if(group.cards.length<2){ 1425 - return; 1426 - } 784 + function run(){ 785 + reset(); 1427 1427 1428 - var firstHeaders= 1429 - group.cards.map(function(card){ 1430 - var candidates= 1431 - headers 1432 - .filter(function(row){ 1433 - return row.card===card; 1434 - }) 1435 - .sort(function(a,b){ 1436 - return ( 1437 - a.el 1438 - .getBoundingClientRect() 1439 - .top- 1440 - b.el 1441 - .getBoundingClientRect() 1442 - .top 1443 - ); 1444 - }); 787 + if(window.innerWidth<=MOBILE_MAX)return; 1445 1445 1446 - return candidates.length 1447 - ?candidates[0] 1448 - :null; 1449 - }); 789 + var parents=Array.from(root.querySelectorAll("*")).filter(function(el){ 790 + return el.children&&el.children.length>=2&&horizontalLayout(el); 791 + }); 1450 1450 1451 - if( 1452 - !firstHeaders.some(function(row){ 1453 - return !row; 1454 - }) 1455 - ){ 1456 - var targetTop= 1457 - Math.max.apply( 1458 - Math, 1459 - firstHeaders.map(function(row){ 1460 - return ( 1461 - row.el 1462 - .getBoundingClientRect() 1463 - .top- 1464 - row.card 1465 - .getBoundingClientRect() 1466 - .top 1467 - ); 1468 - }) 1469 - ); 793 + parents.forEach(function(parent){ 794 + var entries=[]; 1470 1470 1471 - firstHeaders.forEach(function(row){ 1472 - var relativeTop= 1473 - row.el 1474 - .getBoundingClientRect() 1475 - .top- 1476 - row.card 1477 - .getBoundingClientRect() 1478 - .top; 1479 - 1480 - var delta= 1481 - targetTop-relativeTop; 1482 - 1483 - if(delta>1){ 1484 - saveStyle( 1485 - row.el, 1486 - originalMargin, 1487 - "margin-top" 1488 - ); 1489 - 1490 - var current= 1491 - num( 1492 - getComputedStyle( 1493 - row.el 1494 - ).marginTop 1495 - ); 1496 - 1497 - row.el.style.setProperty( 1498 - "margin-top", 1499 - ( 1500 - current+delta 1501 - )+"px" 1502 - ); 1503 - 1504 - row.el.setAttribute( 1505 - "data-sn-master-first-row", 1506 - "1" 1507 - ); 1508 - 1509 - managedMargin.add( 1510 - row.el 1511 - ); 1512 - } 796 + Array.from(parent.children).forEach(function(child){ 797 + if(!visible(child))return; 798 + var target=pickTarget(child); 799 + if(!target)return; 800 + entries.push({ 801 + target:target, 802 + rect:target.getBoundingClientRect() 1513 1513 }); 1514 - } 1515 - 1516 - var maxHeight=0; 1517 - 1518 - group.cards.forEach(function(card){ 1519 - maxHeight= 1520 - Math.max( 1521 - maxHeight, 1522 - card 1523 - .getBoundingClientRect() 1524 - .height 1525 - ); 1526 1526 }); 1527 1527 1528 - maxHeight= 1529 - Math.ceil(maxHeight); 806 + if(entries.length<2)return; 1530 1530 1531 - group.cards.forEach(function(card){ 1532 - saveStyle( 1533 - card, 1534 - originalHeight, 1535 - "min-height" 1536 - ); 808 + rowGroups(entries).forEach(function(group){ 809 + if(group.entries.length<2)return; 1537 1537 1538 - card.style.setProperty( 1539 - "min-height", 1540 - maxHeight+"px" 1541 - ); 811 + var lefts=group.entries.map(function(e){return e.rect.left;}).sort(function(a,b){return a-b;}); 812 + if(lefts[lefts.length-1]-lefts[0]<80)return; 1542 1542 1543 - card.setAttribute( 1544 - "data-sn-master-equal-height", 1545 - "1" 1546 - ); 814 + var targets=[]; 815 + var seen=new Set(); 1547 1547 1548 - managedHeight.add( 1549 - card 1550 - ); 1551 - }); 1552 - }); 1553 - } 1554 - 1555 - /* ======================================================= 1556 - DETAIL GRID EQUAL HEIGHT, DESKTOP ONLY 1557 - ======================================================= */ 1558 - 1559 - function equaliseDetailGrids(){ 1560 - if( 1561 - PAGE_KIND!=="detail"|| 1562 - window.innerWidth<=MOBILE_MAX 1563 - ){ 1564 - return; 1565 - } 1566 - 1567 - var selectors=[ 1568 - ".arsn-grid", 1569 - ".arsn-grid-2", 1570 - ".arsn-grid-3", 1571 - ".dmp-grid", 1572 - ".ido-grid", 1573 - ".pp-grid" 1574 - ]; 1575 - 1576 - selectors.forEach(function(selector){ 1577 - Array.from( 1578 - root.querySelectorAll(selector) 1579 - ).forEach(function(grid){ 1580 - var children= 1581 - Array.from( 1582 - grid.children||[] 1583 - ).filter(visible); 1584 - 1585 - if(children.length<2){ 1586 - return; 1587 - } 1588 - 1589 - var groups=[]; 1590 - 1591 - children.forEach(function(child){ 1592 - var top= 1593 - child 1594 - .getBoundingClientRect() 1595 - .top; 1596 - 1597 - var group=null; 1598 - 1599 - for(var i=0;i<groups.length;i++){ 1600 - if( 1601 - Math.abs( 1602 - groups[i].top-top 1603 - )<=ROW_TOLERANCE 1604 - ){ 1605 - group=groups[i]; 1606 - break; 1607 - } 817 + group.entries.forEach(function(e){ 818 + if(!seen.has(e.target)){ 819 + seen.add(e.target); 820 + targets.push(e.target); 1608 1608 } 822 + }); 1609 1609 1610 - if(!group){ 1611 - group={ 1612 - top:top, 1613 - items:[] 1614 - }; 1615 - groups.push(group); 1616 - } 824 + if(targets.length<2)return; 1617 1617 1618 - group.items.push(child); 826 + var max=0; 827 + targets.forEach(function(el){ 828 + max=Math.max(max,el.getBoundingClientRect().height); 1619 1619 }); 1620 1620 1621 - groups.forEach(function(group){ 1622 - if(group.items.length<2){ 1623 - return; 1624 - } 831 + max=Math.ceil(max); 832 + if(max<MIN_H)return; 1625 1625 1626 - var maxHeight=0; 1627 - 1628 - group.items.forEach(function(item){ 1629 - maxHeight= 1630 - Math.max( 1631 - maxHeight, 1632 - item 1633 - .getBoundingClientRect() 1634 - .height 1635 - ); 1636 - }); 1637 - 1638 - maxHeight= 1639 - Math.ceil(maxHeight); 1640 - 1641 - group.items.forEach(function(item){ 1642 - saveStyle( 1643 - item, 1644 - originalHeight, 1645 - "min-height" 1646 - ); 1647 - 1648 - item.style.setProperty( 1649 - "min-height", 1650 - maxHeight+"px" 1651 - ); 1652 - 1653 - item.setAttribute( 1654 - "data-sn-master-equal-height", 1655 - "1" 1656 - ); 1657 - 1658 - managedHeight.add(item); 1659 - }); 834 + targets.forEach(function(el){ 835 + el.style.setProperty("min-height",max+"px"); 836 + el.setAttribute("data-sn-equal-height-managed","1"); 837 + managed.add(el); 1660 1660 }); 1661 1661 }); 1662 1662 }); 1663 1663 } 1664 1664 1665 - /* ======================================================= 1666 - RUN / RESPONSIVE SCHEDULING 1667 - ======================================================= */ 1668 - 1669 - function run(){ 1670 - if(running)return; 1671 - 1672 - running=true; 1673 - 1674 - try{ 1675 - resetRuntime(); 1676 - applyPlaceholderBadge(); 1677 - propagateDetailAccents(); 1678 - 1679 - var headers= 1680 - applyOverviewPalette(); 1681 - 1682 - if( 1683 - window.innerWidth> 1684 - MOBILE_MAX 1685 - ){ 1686 - alignOverviewCards( 1687 - headers 1688 - ); 1689 - 1690 - equaliseDetailGrids(); 1691 - } 1692 - }finally{ 1693 - running=false; 1694 - } 843 + function schedule(){ 844 + if(raf)cancelAnimationFrame(raf); 845 + raf=requestAnimationFrame(function(){ 846 + raf=requestAnimationFrame(function(){ 847 + raf=0; 848 + run(); 849 + }); 850 + }); 1695 1695 } 1696 1696 1697 - function onResize(){ 1698 - if(resizeTimer){ 1699 - clearTimeout( 1700 - resizeTimer 1701 - ); 1702 - } 853 + addEventListener("resize",schedule,{passive:true}); 854 + addEventListener("load",schedule,{once:true}); 1703 1703 1704 - resizeTimer= 1705 - setTimeout( 1706 - function(){ 1707 - resizeTimer=0; 1708 - run(); 1709 - }, 1710 - RESIZE_DEBOUNCE 1711 - ); 1712 - } 856 + root.addEventListener("click",function(){ 857 + setTimeout(schedule,0); 858 + },true); 1713 1713 1714 - async function waitForReady(){ 1715 - if( 1716 - document.readyState!=="complete" 1717 - ){ 1718 - await new Promise(function(resolve){ 1719 - window.addEventListener( 1720 - "load", 1721 - resolve, 1722 - {once:true} 1723 - ); 1724 - }); 1725 - } 1726 - 1727 - if( 1728 - document.fonts&& 1729 - document.fonts.ready 1730 - ){ 1731 - try{ 1732 - await document.fonts.ready; 1733 - }catch(error){} 1734 - } 1735 - 1736 - var images= 1737 - Array.from( 1738 - root.querySelectorAll("img") 1739 - ); 1740 - 1741 - await Promise.all( 1742 - images.map(function(img){ 1743 - if(img.complete){ 1744 - return Promise.resolve(); 1745 - } 1746 - 1747 - return new Promise(function(resolve){ 1748 - var done=function(){ 1749 - resolve(); 1750 - }; 1751 - 1752 - img.addEventListener( 1753 - "load", 1754 - done, 1755 - {once:true} 1756 - ); 1757 - 1758 - img.addEventListener( 1759 - "error", 1760 - done, 1761 - {once:true} 1762 - ); 1763 - }); 1764 - }) 1765 - ); 1766 - 1767 - run(); 860 + if(document.fonts&&document.fonts.ready){ 861 + document.fonts.ready.then(schedule); 1768 1768 } 1769 1769 1770 - window.addEventListener( 1771 - "resize", 1772 - onResize, 1773 - {passive:true} 1774 - ); 1775 - 1776 - waitForReady(); 864 + schedule(); 865 + setTimeout(schedule,250); 866 + setTimeout(schedule,900); 1777 1777 })(); 1778 1778 </script> 1779 - 1780 -<!-- SN_SERVICE_NAVIGATOR_MASTER_STYLE_END --> 869 +<!-- SN_HORIZONTAL_BOX_HARMONIZER_END --> 1781 1781 {{/html}} 1782 1782