Änderungen von Dokument Art & Research Services Navigator
Zuletzt geändert von Veronika Kocher am Freitag, 18 Sep. 2026 16:47
Von Version 9.3
bearbeitet von Veronika Kocher
am Donnerstag, 03 Sep. 2026 9:34
am Donnerstag, 03 Sep. 2026 9:34
Änderungskommentar:
Es gibt keinen Kommentar für diese Version
Auf Version 11.4
bearbeitet von Veronika Kocher
am Freitag, 04 Sep. 2026 14:23
am Freitag, 04 Sep. 2026 14:23
Änderungskommentar:
Es gibt keinen Kommentar für diese Version
Zusammenfassung
-
Seiteneigenschaften (1 geändert, 0 hinzugefügt, 0 gelöscht)
Details
- Seiteneigenschaften
-
- Inhalt
-
... ... @@ -3,7 +3,6 @@ 3 3 Der **Service-Navigator Kunst & Forschung** hilft dir, für jede Phase deines Projekts die passende Orientierung, Services und Ressourcen zu finden. 4 4 5 5 {{info title="Unterstützung für dein Projekt:"}} 6 - 7 7 8 8 **Support Kunst und Forschung (SKF)** begleitet Projekt- und Fördervorhaben und arbeitet je nach Bedarf mit den passenden Services der Universität zusammen. 9 9 ... ... @@ -435,9 +435,9 @@ 435 435 ))) 436 436 ))) 437 437 438 -(% style="padding:0 16px 16px 16px;" %) 437 +(% class="arsn-phase-cta-wrap" style="padding:0 16px 16px 16px;" %) 439 439 ((( 440 -[[Zu Vorbereiten>>https://xwiki.uni-ak.ac.at/bin/view/Service%20Navigator/Art%20%26%20Research%20Services%20Navigator/Enable/||class="btn btn-primary btn-block"]] 439 +[[Zu Vorbereiten>>https://xwiki.uni-ak.ac.at/bin/view/Service%20Navigator/Art%20%26%20Research%20Services%20Navigator/Enable/||class="btn btn-primary btn-block arsn-phase-cta"]] 441 441 ))) 442 442 ))) 443 443 ))) ... ... @@ -501,9 +501,9 @@ 501 501 ))) 502 502 ))) 503 503 504 -(% style="padding:0 16px 16px 16px;" %) 503 +(% class="arsn-phase-cta-wrap" style="padding:0 16px 16px 16px;" %) 505 505 ((( 506 -[[Zu Arbeiten & Verwalten>>https://xwiki.uni-ak.ac.at/bin/view/Service%20Navigator/Art%20%26%20Research%20Services%20Navigator/Work%20%26%20Manage/||class="btn btn-primary btn-block"]] 505 +[[Zu Arbeiten & Verwalten>>https://xwiki.uni-ak.ac.at/bin/view/Service%20Navigator/Art%20%26%20Research%20Services%20Navigator/Work%20%26%20Manage/||class="btn btn-primary btn-block arsn-phase-cta"]] 507 507 ))) 508 508 ))) 509 509 ))) ... ... @@ -577,9 +577,9 @@ 577 577 ))) 578 578 ))) 579 579 580 -(% style="padding:0 16px 16px 16px;" %) 579 +(% class="arsn-phase-cta-wrap" style="padding:0 16px 16px 16px;" %) 581 581 ((( 582 -[[Zu Publizieren & Teilen>>https://xwiki.uni-ak.ac.at/bin/view/Service%20Navigator/Art%20%26%20Research%20Services%20Navigator/Publish%20%26%20Share/||class="btn btn-primary btn-block"]] 581 +[[Zu Publizieren & Teilen>>https://xwiki.uni-ak.ac.at/bin/view/Service%20Navigator/Art%20%26%20Research%20Services%20Navigator/Publish%20%26%20Share/||class="btn btn-primary btn-block arsn-phase-cta"]] 583 583 ))) 584 584 ))) 585 585 ))) ... ... @@ -588,6 +588,11 @@ 588 588 589 589 (% style="margin-top:30px;" %) 590 590 ((( 590 + 591 +<!-- ARSN_TRAINING_WORKSHOPS_INCLUDE_V1_START --> 592 +{{include reference="Service Navigator.Art & Research Services Navigator.Code.TrainingWorkshopsBlock" author="target" /}} 593 +<!-- ARSN_TRAINING_WORKSHOPS_INCLUDE_V1_END --> 594 + 591 591 == Praktische Ressourcen == 592 592 593 593 Nutze praktische Ressourcen, wenn du eine kompakte Übersicht, eine Schritt-für-Schritt-Anleitung oder ein direkt einsetzbares Hilfsmittel für dein Projekt brauchst. ... ... @@ -636,23 +636,132 @@ 636 636 ))) 637 637 638 638 {{html clean="false"}} 639 -<!-- SN_HORIZONTAL_BOX_HARMONIZER_START --> 640 -<style data-sn-horizontal-box-harmonizer="4"> 641 -[data-sn-equal-height-managed], 642 -[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]{ 643 643 box-sizing:border-box; 644 644 } 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 +} 645 645 </style> 646 -<script data-sn-horizontal-box-harmonizer="4"> 757 + 758 +<script data-sn-service-navigator-master="1"> 647 647 (function(){ 648 648 "use strict"; 649 649 762 + var PAGE_KIND="overview"; 763 + var PLACEHOLDER=false; 764 + var PLACEHOLDER_LABEL="IN VORBEREITUNG"; 765 + 650 650 var MOBILE_MAX=767; 651 651 var ROW_TOLERANCE=6; 652 - var MIN_W=150; 653 - var MIN_H=36; 654 - var MAX_PARENT_CHILDREN=16; 655 - var SEARCH_DEPTH=5; 768 + var RESIZE_DEBOUNCE=220; 656 656 657 657 var root= 658 658 document.getElementById("xwikicontent")|| ... ... @@ -662,93 +662,105 @@ 662 662 663 663 if(!root)return; 664 664 665 - var heightManaged=new Set(); 666 - var sectionManaged=new Set(); 667 - var originalMinHeight=new WeakMap(); 668 - var originalMarginTop=new WeakMap(); 669 - var raf=0; 778 + var managedHeight=new Set(); 779 + var managedMargin=new Set(); 780 + var originalHeight=new WeakMap(); 781 + var originalMargin=new WeakMap(); 670 670 671 - function num(v){ 672 - var n=parseFloat(v); 673 - return Number.isFinite(n)?n:0; 674 - } 783 + var resizeTimer=0; 784 + var running=false; 675 675 676 - function visible(el,minW,minH){ 677 - if(!el||el.nodeType!==1)return false; 678 - 679 - var s=getComputedStyle(el); 680 - 681 - if( 682 - s.display==="none"|| 683 - s.visibility==="hidden"|| 684 - Number(s.opacity)===0 685 - ){ 686 - 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 + ] 687 687 } 848 + ]; 688 688 689 - var r=el.getBoundingClientRect(); 690 - 691 - return ( 692 - r.width>=(minW||1)&& 693 - r.height>=(minH||1) 694 - ); 850 + function num(value){ 851 + var n=parseFloat(value); 852 + return Number.isFinite(n)?n:0; 695 695 } 696 696 697 - function excluded(el){ 698 - return ( 699 - !el.matches|| 700 - el.matches( 701 - "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]" 702 - ) 703 - ); 855 + function norm(value){ 856 + return String(value||"") 857 + .replace(/\s+/g," ") 858 + .trim() 859 + .toUpperCase(); 704 704 } 705 705 706 - function namedLikeBox(el){ 707 - var c= 708 - typeof el.className==="string" 709 - ? el.className 710 - : ""; 862 + function visible(el){ 863 + if(!el||el.nodeType!==1)return false; 711 711 712 - r eturn/(^|[s_-])(box|card|tile|panel|role|check|service|source|call|area|detail|resource|topic|warn|info)([s_-]|$)/i.test(c);713 - }865 + var style=getComputedStyle(el); 866 + var rect=el.getBoundingClientRect(); 714 714 715 - function boxLike(el){ 716 - if(!visible(el,MIN_W,MIN_H)||excluded(el))return false; 717 - 718 - var s=getComputedStyle(el); 719 - var r=el.getBoundingClientRect(); 720 - 721 - var border= 722 - num(s.borderTopWidth)+ 723 - num(s.borderRightWidth)+ 724 - num(s.borderBottomWidth)+ 725 - num(s.borderLeftWidth); 726 - 727 - var radius=Math.max( 728 - num(s.borderTopLeftRadius), 729 - num(s.borderTopRightRadius), 730 - num(s.borderBottomLeftRadius), 731 - num(s.borderBottomRightRadius) 732 - ); 733 - 734 - var bg= 735 - s.backgroundColor&& 736 - s.backgroundColor!=="rgba(0, 0, 0, 0)"&& 737 - s.backgroundColor!=="transparent"; 738 - 739 - var shadow= 740 - s.boxShadow&& 741 - s.boxShadow!=="none"; 742 - 743 743 return ( 744 - namedLikeBox(el)||745 - b order>=1||746 - (bg&&radius>=3)||747 - (shadow&&r.width>=180)869 + style.display!=="none"&& 870 + style.visibility!=="hidden"&& 871 + rect.width>20&& 872 + rect.height>4 748 748 ); 749 749 } 750 750 751 - function save Original(el,map,property){876 + function saveStyle(el,map,property){ 752 752 if(map.has(el))return; 753 753 754 754 map.set(el,{ ... ... @@ -757,7 +757,7 @@ 757 757 }); 758 758 } 759 759 760 - function restore Original(el,map,property){885 + function restoreStyle(el,map,property){ 761 761 var original=map.get(el); 762 762 763 763 if(original&&original.value){ ... ... @@ -771,247 +771,470 @@ 771 771 } 772 772 } 773 773 774 - function reset(){ 775 - heightManaged.forEach(function(el){776 - restore Original(899 + function resetRuntime(){ 900 + managedHeight.forEach(function(el){ 901 + restoreStyle( 777 777 el, 778 - original MinHeight,903 + originalHeight, 779 779 "min-height" 780 780 ); 781 - 782 782 el.removeAttribute( 783 - "data-sn-equal-height -managed"907 + "data-sn-master-equal-height" 784 784 ); 785 785 }); 786 786 787 - sectionManaged.forEach(function(el){788 - restore Original(911 + managedMargin.forEach(function(el){ 912 + restoreStyle( 789 789 el, 790 - originalMargin Top,914 + originalMargin, 791 791 "margin-top" 792 792 ); 793 - 794 794 el.removeAttribute( 795 - "data-sn-first- section-aligned"918 + "data-sn-master-first-row" 796 796 ); 797 797 }); 798 798 799 - heightManaged.clear();800 - sectionManaged.clear();922 + managedHeight.clear(); 923 + managedMargin.clear(); 801 801 } 802 802 803 - function pickTarget(child){804 - if(!visible(child,MIN_W,MIN_H))return null;926 + function themeFor(text){ 927 + var value=norm(text); 805 805 806 - if(boxLike(child)){ 807 - 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 + } 808 808 } 809 809 810 - varcr=child.getBoundingClientRect();811 - var q=[];944 + return null; 945 + } 812 812 813 - Array.from(child.children||[]).forEach(function(el){ 814 - 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 + ); 815 815 }); 1028 + } 816 816 817 - var best=null; 818 - var bestScore=-Infinity; 1030 + /* ======================================================= 1031 + FULL-WIDTH THREE-LINE AREA LABELS 1032 + ======================================================= */ 819 819 820 - while(q.length){ 821 - var item=q.shift(); 822 - var el=item.el; 1034 + function compactText(value){ 1035 + return String(value||"") 1036 + .replace(/\s+/g," ") 1037 + .trim(); 1038 + } 823 823 824 - 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 + } 825 825 826 - var r=el.getBoundingClientRect(); 1054 + var number= 1055 + label.querySelector( 1056 + ":scope > .arsn-area-number" 1057 + ); 827 827 1059 + var action= 1060 + label.querySelector( 1061 + ":scope > .arsn-area-action" 1062 + ); 1063 + 828 828 if( 829 - r .width>=cr.width*.68&&830 - boxLike(el)1065 + !number|| 1066 + !action 831 831 ){ 832 - var widthFit= 833 - 1-Math.min( 834 - 1, 835 - Math.abs(cr.width-r.width)/ 836 - Math.max(1,cr.width) 837 - ); 1068 + return; 1069 + } 838 838 839 - var topFit= 840 - 1-Math.min( 841 - 1, 842 - Math.abs(cr.top-r.top)/100 843 - ); 1071 + var clone= 1072 + label.cloneNode(true); 844 844 845 - var score= 846 - widthFit*6+ 847 - topFit*3+ 848 - Math.min(r.height,900)/450+ 849 - Math.min(r.width*r.height,900000)/900000; 1074 + var cloneNumber= 1075 + clone.querySelector( 1076 + ":scope > .arsn-area-number" 1077 + ); 850 850 851 - if(score>bestScore){ 852 - best=el; 853 - bestScore=score; 854 - } 1079 + var cloneAction= 1080 + clone.querySelector( 1081 + ":scope > .arsn-area-action" 1082 + ); 1083 + 1084 + if(cloneNumber){ 1085 + cloneNumber.remove(); 855 855 } 856 856 857 - if(item.depth<SEARCH_DEPTH){ 858 - Array.from(el.children||[]).forEach(function(next){ 859 - q.push({ 860 - el:next, 861 - depth:item.depth+1 862 - }); 863 - }); 1088 + if(cloneAction){ 1089 + cloneAction.remove(); 864 864 } 865 - } 866 866 867 - return best; 868 - } 1092 + var titleText= 1093 + compactText( 1094 + clone.textContent 1095 + ); 869 869 870 - function groupsByVisualRow(entries){ 871 - var groups=[]; 1097 + if(!titleText){ 1098 + return; 1099 + } 872 872 873 - entries 874 - .slice() 875 - .sort(function(a,b){ 876 - return ( 877 - a.rect.top-b.rect.top|| 878 - 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" 879 879 ); 880 - }) 881 - .forEach(function(entry){ 882 - var group=null; 883 883 884 - for(var i=0;i<groups.length;i++){ 885 - if( 886 - Math.abs( 887 - groups[i].top- 888 - entry.rect.top 889 - )<=ROW_TOLERANCE 890 - ){ 891 - group=groups[i]; 892 - break; 893 - } 894 - } 1112 + titleNode.className= 1113 + "sn-area-label-title"; 895 895 896 - if(!group){ 897 - group={ 898 - top:entry.rect.top, 899 - entries:[] 900 - }; 901 - groups.push(group); 902 - } 1115 + titleNode.textContent= 1116 + titleText; 903 903 904 - group.entries.push(entry); 905 - }); 1118 + while(label.firstChild){ 1119 + label.removeChild( 1120 + label.firstChild 1121 + ); 1122 + } 906 906 907 - 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 + }); 908 908 } 909 909 910 - function validHorizontalGroup(group){ 911 - if(group.entries.length<2)return false; 1168 + /* ======================================================= 1169 + PLACEHOLDER BADGE 1170 + ======================================================= */ 912 912 913 - var lefts= 914 - group.entries 915 - .map(function(e){return e.rect.left;}) 916 - .sort(function(a,b){return a-b;}); 1172 + function applyPlaceholderBadge(){ 1173 + if(!PLACEHOLDER)return; 917 917 918 918 if( 919 - lefts[lefts.length-1]-920 - lefts[0]<921 - 801176 + document.querySelector( 1177 + ".sn-coming-soon-badge" 1178 + ) 922 922 ){ 923 - return false;1180 + return; 924 924 } 925 925 926 - var widths= 927 - group.entries 928 - .map(function(e){return e.rect.width;}) 929 - .filter(function(w){return w>0;}); 1183 + var title= 1184 + document.querySelector( 1185 + "#document-title" 1186 + )|| 1187 + document.querySelector( 1188 + "h1" 1189 + ); 930 930 931 - if( widths.length<2)returnfalse;1191 + if(!title)return; 932 932 933 - var minWidth=Math.min.apply(Math,widths); 934 - var maxWidth=Math.max.apply(Math,widths); 1193 + var badge= 1194 + document.createElement( 1195 + "span" 1196 + ); 935 935 936 - return ( 937 - maxWidth/ 938 - Math.max(1,minWidth)<= 939 - 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 940 940 ); 941 - } 942 942 943 - function normalizeText(text){ 944 - return String(text||"") 945 - .replace(/s+/g," ") 946 - .trim() 947 - .toUpperCase(); 1209 + title.appendChild( 1210 + badge 1211 + ); 948 948 } 949 949 950 - function exactKnownFirstSection(el){ 951 - var text=normalizeText(el.textContent); 1214 + /* ======================================================= 1215 + DETAIL PAGE OWN-ACCENT PROPAGATION 1216 + ======================================================= */ 952 952 953 - return ( 954 - text==="HIER STARTEN"|| 955 - text==="ORGANISIEREN & DOKUMENTIEREN"|| 956 - text==="ENTSCHEIDEN"|| 957 - text==="START HERE"|| 958 - text==="GET STARTED"|| 959 - text==="ORGANISE & DOCUMENT"|| 960 - text==="ORGANIZE & DOCUMENT"|| 961 - text==="DECIDE" 1218 + function parseRGB(value){ 1219 + var match=String(value||"").match( 1220 + /rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)/i 962 962 ); 1222 + 1223 + if(!match)return null; 1224 + 1225 + return [ 1226 + Number(match[1]), 1227 + Number(match[2]), 1228 + Number(match[3]) 1229 + ]; 963 963 } 964 964 965 - function visuallyFirstSectionBar(card){ 966 - var cardRect=card.getBoundingClientRect(); 967 - 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 + } 968 968 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 + 969 969 Array.from( 970 - card.querySelectorAll( 971 - "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" 972 972 ) 973 973 ).forEach(function(el){ 974 - if(!visible(el,20,6))return; 975 - if(excluded(el))return; 1278 + if(!visible(el))return; 976 976 977 - var r=el.getBoundingClientRect(); 978 - var relativeTop=r.top-cardRect.top; 1280 + var style=getComputedStyle(el); 979 979 980 980 if( 981 - relativeTop<45|| 982 - relativeTop>cardRect.height*.72 1283 + num(style.borderTopWidth)>=2 983 983 ){ 984 - 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 + } 985 985 } 1298 + }); 986 986 987 - var widthRatio= 988 - r.width/ 989 - 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; 990 990 991 - if( 992 - widthRatio<.55|| 993 - widthRatio>1.05|| 994 - r.height>54 995 - ){ 996 - return; 997 - } 1309 + el.style.setProperty( 1310 + "border-left", 1311 + "4px solid #e94b13", 1312 + "important" 1313 + ); 1314 + }); 998 998 999 - 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; 1000 1000 1001 - if( 1002 - text.length<2|| 1003 - text.length>90 1004 - ){ 1005 - return; 1006 - } 1324 + el.style.setProperty( 1325 + "border-left", 1326 + "4px solid #21b6d7", 1327 + "important" 1328 + ); 1329 + }); 1330 + } 1007 1007 1008 - var style=getComputedStyle(el); 1332 + /* ======================================================= 1333 + OVERVIEW SEMANTIC THEME PALETTE 1334 + ======================================================= */ 1009 1009 1010 - var bg= 1011 - style.backgroundColor&& 1012 - style.backgroundColor!=="rgba(0, 0, 0, 0)"&& 1013 - 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; 1014 1014 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 + 1015 1015 var border= 1016 1016 num(style.borderTopWidth)+ 1017 1017 num(style.borderRightWidth)+ ... ... @@ -1018,315 +1018,755 @@ 1018 1018 num(style.borderBottomWidth)+ 1019 1019 num(style.borderLeftWidth); 1020 1020 1021 - var mostlyUpper= 1022 - text.length>=3&& 1023 - text===text.toUpperCase(); 1024 - 1025 - var exact=exactKnownFirstSection(el); 1026 - 1027 - var score= 1028 - (exact?20:0)+ 1029 - (bg?6:0)+ 1030 - (border>=1?2:0)+ 1031 - (mostlyUpper?4:0)+ 1032 - (num(style.fontWeight)>=600?1:0); 1033 - 1034 - if(score>=7){ 1035 - candidates.push({ 1036 - el:el, 1037 - relativeTop:relativeTop, 1038 - width:r.width, 1039 - score:score 1040 - }); 1369 + if( 1370 + rect.width>=220&& 1371 + rect.width<=800&& 1372 + rect.height>=120&& 1373 + border>=1 1374 + ){ 1375 + candidates.push(node); 1041 1041 } 1042 - }); 1043 1043 1378 + node=node.parentElement; 1379 + } 1380 + 1044 1044 if(!candidates.length)return null; 1045 1045 1046 1046 candidates.sort(function(a,b){ 1047 - if(a.score!==b.score)return b.score-a.score; 1048 - if(Math.abs(a.relativeTop-b.relativeTop)>3){ 1049 - return a.relativeTop-b.relativeTop; 1050 - } 1051 - return b.width-a.width; 1384 + return ( 1385 + b.getBoundingClientRect().height- 1386 + a.getBoundingClientRect().height 1387 + ); 1052 1052 }); 1053 1053 1054 - // For exact known labels always prefer the earliest exact match. 1055 - var exacts=candidates.filter(function(c){ 1056 - return exactKnownFirstSection(c.el); 1057 - }); 1390 + return candidates[0]; 1391 + } 1058 1058 1059 - if(exacts.length){ 1060 - exacts.sort(function(a,b){ 1061 - return a.relativeTop-b.relativeTop||b.width-a.width; 1062 - }); 1063 - return exacts[0].el; 1064 - } 1393 + function rowCandidates(link,card){ 1394 + var result=[]; 1395 + var cardRect= 1396 + card.getBoundingClientRect(); 1065 1065 1066 - // Generic fallback: earliest high-confidence bar. 1067 - candidates.sort(function(a,b){ 1068 - return a.relativeTop-b.relativeTop||b.score-a.score||b.width-a.width; 1069 - }); 1398 + var node=link; 1070 1070 1071 - return candidates[0].el; 1072 - } 1400 + while(node&&node!==card){ 1401 + if(visible(node)){ 1402 + var rect= 1403 + node.getBoundingClientRect(); 1073 1073 1074 - function alignFirstSections(cards){ 1075 - var rows= 1076 - cards.map(function(card){ 1077 - var bar= 1078 - 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 + } 1079 1079 1080 - if(!bar)return null; 1416 + node=node.parentElement; 1417 + } 1081 1081 1082 - varcardRect=1083 - card.getBoundingClientRect();1419 + return result; 1420 + } 1084 1084 1085 - var barRect= 1086 - bar.getBoundingClientRect(); 1422 + function chooseOuterRow( 1423 + candidates, 1424 + link 1425 + ){ 1426 + if(!candidates.length){ 1427 + return link; 1428 + } 1087 1087 1088 - return {1089 - card:card,1090 - bar:bar,1091 - relativeTop:1092 - barRect.top-cardRect.top,1093 - label:1094 - normalizeText(bar.textContent)1095 - };1430 + var bordered= 1431 + candidates.filter(function(el){ 1432 + return ( 1433 + num( 1434 + getComputedStyle(el) 1435 + .borderLeftWidth 1436 + )>=1 1437 + ); 1096 1096 }); 1097 1097 1098 - // Conservative: only align when every card in the horizontal row 1099 - // has a reliable first section bar. 1100 - if( 1101 - rows.some(function(row){ 1102 - return !row; 1103 - }) 1104 - ){ 1105 - 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 []; 1106 1106 } 1107 1107 1108 - var targetTop= 1109 - Math.max.apply( 1110 - Math, 1111 - rows.map(function(row){ 1112 - 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 + }; 1113 1113 }) 1114 - ); 1481 + .filter(function(row){ 1482 + return !!row.card; 1483 + }); 1115 1115 1116 - rows.forEach(function(row){ 1117 - var delta= 1118 - targetTop- 1119 - row.relativeTop; 1485 + var unique=[]; 1486 + var seenHeaders=new Set(); 1120 1120 1121 - 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 + ); 1122 1122 1123 - saveOriginal( 1124 - row.bar, 1125 - originalMarginTop, 1126 - "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" 1127 1127 ); 1128 1128 1129 - var currentMargin= 1130 - num( 1131 - getComputedStyle( 1132 - row.bar 1133 - ).marginTop 1134 - ); 1521 + row.el.style.setProperty( 1522 + "color", 1523 + row.theme.text, 1524 + "important" 1525 + ); 1135 1135 1136 - row.bar.style.setProperty( 1137 - "margin-top", 1138 - ( 1139 - currentMargin+ 1140 - delta 1141 - )+"px" 1527 + row.el.style.setProperty( 1528 + "text-align", 1529 + "left", 1530 + "important" 1142 1142 ); 1143 1143 1144 - row.bar.setAttribute( 1145 - "data-sn-first-section-aligned", 1146 - "4" 1533 + row.el.style.setProperty( 1534 + "word-spacing", 1535 + "normal", 1536 + "important" 1147 1147 ); 1148 1148 1149 - 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( 1572 + link.classList && 1573 + link.classList.contains( 1574 + "arsn-phase-cta" 1575 + ) 1576 + ){ 1577 + return; 1578 + } 1579 + 1580 + if(!visible(link))return; 1581 + 1582 + var rect= 1583 + link.getBoundingClientRect(); 1584 + 1585 + if( 1586 + rect.top<= 1587 + headerRect.bottom-2|| 1588 + rect.top>= 1589 + stopTop-2 1590 + ){ 1591 + return; 1592 + } 1593 + 1594 + var candidates= 1595 + rowCandidates( 1596 + link, 1597 + row.card 1598 + ); 1599 + 1600 + var target= 1601 + chooseOuterRow( 1602 + candidates, 1603 + link 1604 + ); 1605 + 1606 + candidates.forEach(function(el){ 1607 + el.style.setProperty( 1608 + "border-left", 1609 + "0 solid transparent", 1610 + "important" 1611 + ); 1612 + }); 1613 + 1614 + target.style.setProperty( 1615 + "border-left", 1616 + "3px solid "+ 1617 + row.theme.accent, 1618 + "important" 1619 + ); 1620 + 1621 + target.style.setProperty( 1622 + "box-sizing", 1623 + "border-box", 1624 + "important" 1625 + ); 1626 + }); 1150 1150 }); 1151 1151 1152 - return { 1153 - labels: 1154 - rows.map(function(row){ 1155 - return row.label; 1156 - }), 1157 - targetRelativeTop: 1158 - Math.round(targetTop) 1159 - }; 1629 + return unique; 1160 1160 } 1161 1161 1162 - function applyGroup(group){ 1163 - if(!validHorizontalGroup(group)){ 1164 - return null; 1632 + /* ======================================================= 1633 + OVERVIEW CARD HEIGHT + FIRST THEMATIC ROW 1634 + ======================================================= */ 1635 + 1636 + function alignOverviewCards(headers){ 1637 + if( 1638 + PAGE_KIND!=="overview"|| 1639 + window.innerWidth<=MOBILE_MAX 1640 + ){ 1641 + return; 1165 1165 } 1166 1166 1167 1167 var cards=[]; 1168 1168 var seen=new Set(); 1169 1169 1170 - group.entries.forEach(function(entry){1171 - if(!seen.has( entry.target)){1172 - seen.add( entry.target);1173 - cards.push( entry.target);1647 + headers.forEach(function(row){ 1648 + if(!seen.has(row.card)){ 1649 + seen.add(row.card); 1650 + cards.push(row.card); 1174 1174 } 1175 1175 }); 1176 1176 1177 - if(cards.length<2)return null; 1654 + if(cards.length<2){ 1655 + return; 1656 + } 1178 1178 1179 - varfirstSection=1180 - alignFirstSections(cards);1658 + // Group cards by actual top position. 1659 + var groups=[]; 1181 1181 1182 - // The section alignment can change natural card heights. 1183 - // Measure only afterwards. 1184 - var maxHeight=0; 1185 - 1186 1186 cards.forEach(function(card){ 1187 - maxHeight=Math.max( 1188 - maxHeight, 1189 - card.getBoundingClientRect().height 1190 - ); 1662 + var top= 1663 + card.getBoundingClientRect().top; 1664 + 1665 + var group=null; 1666 + 1667 + for(var i=0;i<groups.length;i++){ 1668 + if( 1669 + Math.abs( 1670 + groups[i].top-top 1671 + )<=ROW_TOLERANCE 1672 + ){ 1673 + group=groups[i]; 1674 + break; 1675 + } 1676 + } 1677 + 1678 + if(!group){ 1679 + group={ 1680 + top:top, 1681 + cards:[] 1682 + }; 1683 + groups.push(group); 1684 + } 1685 + 1686 + group.cards.push(card); 1191 1191 }); 1192 1192 1193 - maxHeight=Math.ceil(maxHeight); 1689 + groups.forEach(function(group){ 1690 + if(group.cards.length<2){ 1691 + return; 1692 + } 1194 1194 1195 - if(maxHeight<MIN_H)return null; 1694 + var firstHeaders= 1695 + group.cards.map(function(card){ 1696 + var candidates= 1697 + headers 1698 + .filter(function(row){ 1699 + return row.card===card; 1700 + }) 1701 + .sort(function(a,b){ 1702 + return ( 1703 + a.el 1704 + .getBoundingClientRect() 1705 + .top- 1706 + b.el 1707 + .getBoundingClientRect() 1708 + .top 1709 + ); 1710 + }); 1196 1196 1197 - cards.forEach(function(card){ 1198 - saveOriginal( 1199 - card, 1200 - originalMinHeight, 1201 - "min-height" 1202 - ); 1712 + return candidates.length 1713 + ?candidates[0] 1714 + :null; 1715 + }); 1203 1203 1204 - card.style.setProperty( 1205 - "min-height", 1206 - maxHeight+"px" 1207 - ); 1717 + if( 1718 + !firstHeaders.some(function(row){ 1719 + return !row; 1720 + }) 1721 + ){ 1722 + var targetTop= 1723 + Math.max.apply( 1724 + Math, 1725 + firstHeaders.map(function(row){ 1726 + return ( 1727 + row.el 1728 + .getBoundingClientRect() 1729 + .top- 1730 + row.card 1731 + .getBoundingClientRect() 1732 + .top 1733 + ); 1734 + }) 1735 + ); 1208 1208 1209 - card.setAttribute( 1210 - "data-sn-equal-height-managed", 1211 - "4" 1212 - ); 1737 + firstHeaders.forEach(function(row){ 1738 + var relativeTop= 1739 + row.el 1740 + .getBoundingClientRect() 1741 + .top- 1742 + row.card 1743 + .getBoundingClientRect() 1744 + .top; 1213 1213 1214 - heightManaged.add(card);1215 - });1746 + var delta= 1747 + targetTop-relativeTop; 1216 1216 1217 - return { 1218 - cards:cards.length, 1219 - height:maxHeight, 1220 - firstSection:firstSection 1221 - }; 1749 + if(delta>1){ 1750 + saveStyle( 1751 + row.el, 1752 + originalMargin, 1753 + "margin-top" 1754 + ); 1755 + 1756 + var current= 1757 + num( 1758 + getComputedStyle( 1759 + row.el 1760 + ).marginTop 1761 + ); 1762 + 1763 + row.el.style.setProperty( 1764 + "margin-top", 1765 + ( 1766 + current+delta 1767 + )+"px" 1768 + ); 1769 + 1770 + row.el.setAttribute( 1771 + "data-sn-master-first-row", 1772 + "1" 1773 + ); 1774 + 1775 + managedMargin.add( 1776 + row.el 1777 + ); 1778 + } 1779 + }); 1780 + } 1781 + 1782 + var maxHeight=0; 1783 + 1784 + group.cards.forEach(function(card){ 1785 + maxHeight= 1786 + Math.max( 1787 + maxHeight, 1788 + card 1789 + .getBoundingClientRect() 1790 + .height 1791 + ); 1792 + }); 1793 + 1794 + maxHeight= 1795 + Math.ceil(maxHeight); 1796 + 1797 + group.cards.forEach(function(card){ 1798 + saveStyle( 1799 + card, 1800 + originalHeight, 1801 + "min-height" 1802 + ); 1803 + 1804 + card.style.setProperty( 1805 + "min-height", 1806 + maxHeight+"px" 1807 + ); 1808 + 1809 + card.setAttribute( 1810 + "data-sn-master-equal-height", 1811 + "1" 1812 + ); 1813 + 1814 + managedHeight.add( 1815 + card 1816 + ); 1817 + }); 1818 + }); 1222 1222 } 1223 1223 1224 - function run(){ 1225 - reset(); 1821 + /* ======================================================= 1822 + DETAIL GRID EQUAL HEIGHT, DESKTOP ONLY 1823 + ======================================================= */ 1226 1226 1825 + function equaliseDetailGrids(){ 1227 1227 if( 1827 + PAGE_KIND!=="detail"|| 1228 1228 window.innerWidth<=MOBILE_MAX 1229 1229 ){ 1230 1230 return; 1231 1231 } 1232 1232 1233 - var parents= 1833 + var selectors=[ 1834 + ".arsn-grid", 1835 + ".arsn-grid-2", 1836 + ".arsn-grid-3", 1837 + ".dmp-grid", 1838 + ".ido-grid", 1839 + ".pp-grid" 1840 + ]; 1841 + 1842 + selectors.forEach(function(selector){ 1234 1234 Array.from( 1235 - root.querySelectorAll("*") 1236 - ).filter(function(parent){ 1237 - return ( 1238 - visible(parent,MIN_W,MIN_H)&& 1239 - parent.children&& 1240 - parent.children.length>=2&& 1241 - parent.children.length<=MAX_PARENT_CHILDREN 1242 - ); 1243 - }); 1844 + root.querySelectorAll(selector) 1845 + ).forEach(function(grid){ 1846 + var children= 1847 + Array.from( 1848 + grid.children||[] 1849 + ).filter(visible); 1244 1244 1245 - var touched=new Set(); 1851 + if(children.length<2){ 1852 + return; 1853 + } 1246 1246 1247 - parents.forEach(function(parent){ 1248 - var entries=[]; 1855 + var groups=[]; 1249 1249 1250 - Array.from(parent.children).forEach(function(child){ 1251 - if(!visible(child,MIN_W,MIN_H))return; 1857 + children.forEach(function(child){ 1858 + var top= 1859 + child 1860 + .getBoundingClientRect() 1861 + .top; 1252 1252 1253 - var target=pickTarget(child); 1254 - if(!target)return; 1863 + var group=null; 1255 1255 1256 - entries.push({ 1257 - target:target, 1258 - rect:target.getBoundingClientRect() 1865 + for(var i=0;i<groups.length;i++){ 1866 + if( 1867 + Math.abs( 1868 + groups[i].top-top 1869 + )<=ROW_TOLERANCE 1870 + ){ 1871 + group=groups[i]; 1872 + break; 1873 + } 1874 + } 1875 + 1876 + if(!group){ 1877 + group={ 1878 + top:top, 1879 + items:[] 1880 + }; 1881 + groups.push(group); 1882 + } 1883 + 1884 + group.items.push(child); 1259 1259 }); 1260 - }); 1261 1261 1262 - if(entries.length<2)return; 1887 + groups.forEach(function(group){ 1888 + if(group.items.length<2){ 1889 + return; 1890 + } 1263 1263 1264 - groupsByVisualRow(entries).forEach(function(group){ 1265 - if(!validHorizontalGroup(group))return; 1892 + var maxHeight=0; 1266 1266 1267 - var signature= 1268 - group.entries.map(function(entry){ 1269 - return entry.target; 1894 + group.items.forEach(function(item){ 1895 + maxHeight= 1896 + Math.max( 1897 + maxHeight, 1898 + item 1899 + .getBoundingClientRect() 1900 + .height 1901 + ); 1270 1270 }); 1271 1271 1272 - if( 1273 - !signature.some(function(el){ 1274 - return !touched.has(el); 1275 - }) 1276 - ){ 1277 - return; 1278 - } 1904 + maxHeight= 1905 + Math.ceil(maxHeight); 1279 1279 1280 - var applied= 1281 - applyGroup(group); 1907 + group.items.forEach(function(item){ 1908 + saveStyle( 1909 + item, 1910 + originalHeight, 1911 + "min-height" 1912 + ); 1282 1282 1283 - if(applied){ 1284 - signature.forEach(function(el){ 1285 - touched.add(el); 1914 + item.style.setProperty( 1915 + "min-height", 1916 + maxHeight+"px" 1917 + ); 1918 + 1919 + item.setAttribute( 1920 + "data-sn-master-equal-height", 1921 + "1" 1922 + ); 1923 + 1924 + managedHeight.add(item); 1286 1286 }); 1287 - } 1926 + }); 1288 1288 }); 1289 1289 }); 1290 1290 } 1291 1291 1292 - function schedule(){ 1293 - if(raf)cancelAnimationFrame(raf); 1931 + /* ======================================================= 1932 + RUN / RESPONSIVE SCHEDULING 1933 + ======================================================= */ 1294 1294 1295 - raf=requestAnimationFrame(function(){ 1296 - raf=requestAnimationFrame(function(){ 1297 - raf=0; 1298 - run(); 1299 - }); 1300 - }); 1935 + function run(){ 1936 + if(running)return; 1937 + 1938 + running=true; 1939 + 1940 + try{ 1941 + resetRuntime(); 1942 + applyPlaceholderBadge(); 1943 + propagateDetailAccents(); 1944 + 1945 + var headers= 1946 + applyOverviewPalette(); 1947 + 1948 + makeThreeLineAreaLabels(); 1949 + makeFilledRedOrangeCTAsBorderless(); 1950 + 1951 + if( 1952 + window.innerWidth> 1953 + MOBILE_MAX 1954 + ){ 1955 + alignOverviewCards( 1956 + headers 1957 + ); 1958 + 1959 + equaliseDetailGrids(); 1960 + } 1961 + }finally{ 1962 + running=false; 1963 + } 1301 1301 } 1302 1302 1303 - addEventListener("resize",schedule,{passive:true}); 1304 - addEventListener("load",schedule,{once:true}); 1966 + function onResize(){ 1967 + if(resizeTimer){ 1968 + clearTimeout( 1969 + resizeTimer 1970 + ); 1971 + } 1305 1305 1306 - root.addEventListener( 1307 - "click", 1308 - function(){ 1309 - setTimeout(schedule,0); 1310 - }, 1311 - true 1312 - ); 1973 + resizeTimer= 1974 + setTimeout( 1975 + function(){ 1976 + resizeTimer=0; 1977 + run(); 1978 + }, 1979 + RESIZE_DEBOUNCE 1980 + ); 1981 + } 1313 1313 1314 - Array.from(root.querySelectorAll("img")).forEach(function(img){ 1315 - if(!img.complete){ 1316 - img.addEventListener("load",schedule,{once:true}); 1983 + async function waitForReady(){ 1984 + if( 1985 + document.readyState!=="complete" 1986 + ){ 1987 + await new Promise(function(resolve){ 1988 + window.addEventListener( 1989 + "load", 1990 + resolve, 1991 + {once:true} 1992 + ); 1993 + }); 1317 1317 } 1318 - }); 1319 1319 1320 - if(document.fonts&&document.fonts.ready){ 1321 - document.fonts.ready.then(schedule); 1996 + if( 1997 + document.fonts&& 1998 + document.fonts.ready 1999 + ){ 2000 + try{ 2001 + await document.fonts.ready; 2002 + }catch(error){} 2003 + } 2004 + 2005 + var images= 2006 + Array.from( 2007 + root.querySelectorAll("img") 2008 + ); 2009 + 2010 + await Promise.all( 2011 + images.map(function(img){ 2012 + if(img.complete){ 2013 + return Promise.resolve(); 2014 + } 2015 + 2016 + return new Promise(function(resolve){ 2017 + var done=function(){ 2018 + resolve(); 2019 + }; 2020 + 2021 + img.addEventListener( 2022 + "load", 2023 + done, 2024 + {once:true} 2025 + ); 2026 + 2027 + img.addEventListener( 2028 + "error", 2029 + done, 2030 + {once:true} 2031 + ); 2032 + }); 2033 + }) 2034 + ); 2035 + 2036 + run(); 1322 1322 } 1323 1323 1324 - schedule(); 1325 - setTimeout(schedule,200); 1326 - setTimeout(schedule,650); 1327 - setTimeout(schedule,1400); 2039 + window.addEventListener( 2040 + "resize", 2041 + onResize, 2042 + {passive:true} 2043 + ); 2044 + 2045 + waitForReady(); 1328 1328 })(); 1329 1329 </script> 1330 -<!-- SN_HORIZONTAL_BOX_HARMONIZER_END --> 2048 + 2049 +<!-- SN_SERVICE_NAVIGATOR_MASTER_STYLE_END --> 1331 1331 {{/html}} 1332 1332 2052 +{{html clean="false"}} 2053 +<!-- ARSN_PHASE_CTA_MOBILE_EDGE_FIX_V3_START --> 2054 +<style data-arsn-phase-cta-mobile-edge-fix="3"> 2055 +@media (max-width:767px){ 2056 + 2057 + /* Remove the white side gutters around the three phase CTAs. */ 2058 + #xwikicontent .arsn-phase-cta-wrap{ 2059 + box-sizing:border-box!important; 2060 + width:calc(100% + 2px)!important; 2061 + max-width:none!important; 2062 + margin:14px -1px -1px -1px!important; 2063 + padding:0!important; 2064 + border:0!important; 2065 + border-left:0!important; 2066 + box-shadow:none!important; 2067 + background:transparent!important; 2068 + } 2069 + 2070 + /* Full-width orange CTA; no extra border/shadow. */ 2071 + #xwikicontent a.arsn-phase-cta{ 2072 + display:flex!important; 2073 + align-items:center!important; 2074 + justify-content:center!important; 2075 + gap:8px!important; 2076 + 2077 + box-sizing:border-box!important; 2078 + width:100%!important; 2079 + max-width:none!important; 2080 + min-width:0!important; 2081 + 2082 + margin:0!important; 2083 + padding:12px 14px!important; 2084 + 2085 + border:0!important; 2086 + border-left:0!important; 2087 + border-right:0!important; 2088 + border-top:0!important; 2089 + border-bottom:0!important; 2090 + box-shadow:none!important; 2091 + 2092 + border-radius:8px!important; 2093 + 2094 + text-align:center!important; 2095 + text-align-last:center!important; 2096 + text-justify:auto!important; 2097 + word-spacing:normal!important; 2098 + white-space:normal!important; 2099 + } 2100 + 2101 + /* Keep an XWiki external-link icon on the same line/flex row. */ 2102 + #xwikicontent a.arsn-phase-cta::after{ 2103 + flex:0 0 auto!important; 2104 + margin-left:2px!important; 2105 + } 2106 + 2107 + #xwikicontent a.arsn-phase-cta > .fa, 2108 + #xwikicontent a.arsn-phase-cta > .icon, 2109 + #xwikicontent a.arsn-phase-cta > .external-link-icon, 2110 + #xwikicontent a.arsn-phase-cta > [class*="external"]{ 2111 + position:static!important; 2112 + display:inline-block!important; 2113 + flex:0 0 auto!important; 2114 + margin:0!important; 2115 + } 2116 +} 2117 +</style> 2118 +<!-- ARSN_PHASE_CTA_MOBILE_EDGE_FIX_V3_END --> 2119 +{{/html}} 2120 +