Changes for page Funding & Funder Requirements
Last modified by Veronika Kocher on Friday, 04 Sep 2026 14:45
From version 5.10
edited by Veronika Kocher
on Thursday, 03 Sep 2026 10:09
on Thursday, 03 Sep 2026 10:09
Change comment:
There is no comment for this version
To version 5.9
edited by Veronika Kocher
on Thursday, 03 Sep 2026 9:34
on Thursday, 03 Sep 2026 9:34
Change comment:
There is no comment for this version
Summary
-
Page properties (1 modified, 0 added, 0 removed)
Details
- Page properties
-
- Content
-
... ... @@ -68,104 +68,15 @@ 68 68 <!-- ARSN_SEARCH_TERMS_END --> 69 69 {{/html}} 70 70 71 -\n\n 72 -\n\n{{html clean="false"}} 71 +{{html clean="false"}} 73 73 <!-- SN_HORIZONTAL_BOX_HARMONIZER_START --> 74 - 75 -<style data-sn-horizontal-box-harmonizer="7"> 76 -/* ---------- Typography: never justify headings ---------- */ 77 -#xwikicontent h1, 78 -#xwikicontent h2, 79 -#xwikicontent h3, 80 -#xwikicontent h4, 81 -#xwikicontent h5, 82 -#xwikicontent h6, 83 -#xwikicontent .box-title, 84 -#xwikicontent [role="heading"], 85 -#xwikicontent h1 a, 86 -#xwikicontent h2 a, 87 -#xwikicontent h3 a, 88 -#xwikicontent h4 a, 89 -#xwikicontent h5 a, 90 -#xwikicontent h6 a, 91 -#xwikicontent .box-title a, 92 -#xwikicontent [role="heading"] a{ 93 - text-align:left!important; 94 - text-justify:auto!important; 95 - word-spacing:normal!important; 96 -} 97 - 98 -/* ---------- Native XWiki semantic callouts ---------- */ 99 -#xwikicontent .box.infomessage, 100 -#xwikicontent .infomessage, 101 -#xwikicontent .box.warningmessage, 102 -#xwikicontent .warningmessage, 103 -#xwikicontent .box.successmessage, 104 -#xwikicontent .successmessage, 105 -#xwikicontent .box.errormessage, 106 -#xwikicontent .errormessage, 107 -#xwikicontent [data-sn-callout-harmonized="1"]{ 108 - box-sizing:border-box!important; 109 - border-radius:8px!important; 110 - border-top:1px solid rgba(0,0,0,.08)!important; 111 - border-right:1px solid rgba(0,0,0,.08)!important; 112 - border-bottom:1px solid rgba(0,0,0,.08)!important; 113 - border-left:4px solid var(--sn-callout-accent,#21b6d7)!important; 114 - padding:14px 16px!important; 115 - text-align:left!important; 116 - text-justify:auto!important; 117 - word-spacing:normal!important; 118 - box-shadow:none!important; 119 -} 120 - 121 -#xwikicontent .box.infomessage, 122 -#xwikicontent .infomessage{ 123 - --sn-callout-accent:#21b6d7; 124 - background:#eaf7fb!important; 125 -} 126 - 127 -#xwikicontent .box.warningmessage, 128 -#xwikicontent .warningmessage{ 129 - --sn-callout-accent:#f0aa00; 130 - background:#fff8e7!important; 131 -} 132 - 133 -#xwikicontent .box.successmessage, 134 -#xwikicontent .successmessage{ 135 - --sn-callout-accent:#38b76a; 136 - background:#edf9f1!important; 137 -} 138 - 139 -#xwikicontent .box.errormessage, 140 -#xwikicontent .errormessage{ 141 - --sn-callout-accent:#e94b13; 142 - background:#fff1ec!important; 143 -} 144 - 145 -#xwikicontent [data-sn-callout-harmonized="1"] > :first-child, 146 -#xwikicontent .infomessage > :first-child, 147 -#xwikicontent .warningmessage > :first-child, 148 -#xwikicontent .successmessage > :first-child, 149 -#xwikicontent .errormessage > :first-child{ 150 - margin-top:0!important; 151 -} 152 - 153 -#xwikicontent [data-sn-callout-harmonized="1"] > :last-child, 154 -#xwikicontent .infomessage > :last-child, 155 -#xwikicontent .warningmessage > :last-child, 156 -#xwikicontent .successmessage > :last-child, 157 -#xwikicontent .errormessage > :last-child{ 158 - margin-bottom:0!important; 159 -} 160 - 161 -#xwikicontent [data-sn-equal-height-managed], 162 -#xwikicontent [data-sn-first-section-aligned], 163 -#xwikicontent [data-sn-first-content-aligned]{ 73 +<style data-sn-horizontal-box-harmonizer="4"> 74 +[data-sn-equal-height-managed], 75 +[data-sn-first-section-aligned]{ 164 164 box-sizing:border-box; 165 165 } 166 166 </style> 167 - 168 -<script data-sn-horizontal-box-harmonizer="7"> 79 +<script data-sn-horizontal-box-harmonizer="4"> 169 169 (function(){ 170 170 "use strict"; 171 171 ... ... @@ -173,10 +173,8 @@ 173 173 var ROW_TOLERANCE=6; 174 174 var MIN_W=150; 175 175 var MIN_H=36; 176 - var MAX_PARENT_CHILDREN=1 8;87 + var MAX_PARENT_CHILDREN=16; 177 177 var SEARCH_DEPTH=5; 178 - var RESIZE_DEBOUNCE=220; 179 - var MIN_WIDTH_CHANGE=2; 180 180 181 181 var root= 182 182 document.getElementById("xwikicontent")|| ... ... @@ -188,16 +188,10 @@ 188 188 189 189 var heightManaged=new Set(); 190 190 var sectionManaged=new Set(); 191 - var contentManaged=new Set(); 192 - 193 193 var originalMinHeight=new WeakMap(); 194 194 var originalMarginTop=new WeakMap(); 102 + var raf=0; 195 195 196 - var resizeTimer=0; 197 - var lastWidth=-1; 198 - var hasApplied=false; 199 - var applying=false; 200 - 201 201 function num(v){ 202 202 var n=parseFloat(v); 203 203 return Number.isFinite(n)?n:0; ... ... @@ -224,13 +224,6 @@ 224 224 ); 225 225 } 226 226 227 - function normalizeText(text){ 228 - return String(text||"") 229 - .replace(/\s+/g," ") 230 - .trim() 231 - .toUpperCase(); 232 - } 233 - 234 234 function excluded(el){ 235 235 return ( 236 236 !el.matches|| ... ... @@ -240,84 +240,57 @@ 240 240 ); 241 241 } 242 242 243 - /* ---------- Custom coloured callouts ---------- */ 244 - 245 - function nativeCallout(el){ 139 + function namedLikeBox(el){ 246 246 var c= 247 247 typeof el.className==="string" 248 - ? el.className .toLowerCase()142 + ? el.className 249 249 : ""; 250 250 251 - return ( 252 - /(^|\s)(infomessage|warningmessage|successmessage|errormessage)(\s|$)/.test(c) 253 - ); 145 + return /(^|[s_-])(box|card|tile|panel|role|check|service|source|call|area|detail|resource|topic|warn|info)([s_-]|$)/i.test(c); 254 254 } 255 255 256 - function customCallout(el){257 - if(!visible(el, 220,42)||excluded(el))return false;148 + function boxLike(el){ 149 + if(!visible(el,MIN_W,MIN_H)||excluded(el))return false; 258 258 151 + var s=getComputedStyle(el); 259 259 var r=el.getBoundingClientRect(); 260 260 261 - if(r.height>520)return false; 154 + var border= 155 + num(s.borderTopWidth)+ 156 + num(s.borderRightWidth)+ 157 + num(s.borderBottomWidth)+ 158 + num(s.borderLeftWidth); 262 262 263 - var s=getComputedStyle(el); 160 + var radius=Math.max( 161 + num(s.borderTopLeftRadius), 162 + num(s.borderTopRightRadius), 163 + num(s.borderBottomLeftRadius), 164 + num(s.borderBottomRightRadius) 165 + ); 264 264 265 265 var bg= 266 266 s.backgroundColor&& 267 267 s.backgroundColor!=="rgba(0, 0, 0, 0)"&& 268 - s.backgroundColor!=="transparent"&& 269 - s.backgroundColor!=="rgb(255, 255, 255)"; 170 + s.backgroundColor!=="transparent"; 270 270 271 - var left= 272 - num(s.borderLeftWidth); 172 + var shadow= 173 + s.boxShadow&& 174 + s.boxShadow!=="none"; 273 273 274 274 return ( 275 - bg&& 276 - left>=2 177 + namedLikeBox(el)|| 178 + border>=1|| 179 + (bg&&radius>=3)|| 180 + (shadow&&r.width>=180) 277 277 ); 278 278 } 279 279 280 - function harmoniseCustomCallouts(){ 281 - Array.from( 282 - root.querySelectorAll( 283 - "div,aside,section" 284 - ) 285 - ).forEach(function(el){ 286 - if(nativeCallout(el))return; 287 - if(!customCallout(el))return; 288 - 289 - var s=getComputedStyle(el); 290 - 291 - el.setAttribute( 292 - "data-sn-callout-harmonized", 293 - "1" 294 - ); 295 - 296 - if( 297 - s.borderLeftColor 298 - ){ 299 - el.style.setProperty( 300 - "--sn-callout-accent", 301 - s.borderLeftColor 302 - ); 303 - } 304 - }); 305 - } 306 - 307 - /* ---------- Restore only values V7 itself changed ---------- */ 308 - 309 309 function saveOriginal(el,map,property){ 310 310 if(map.has(el))return; 311 311 312 312 map.set(el,{ 313 - value: 314 - el.style.getPropertyValue( 315 - property 316 - ), 317 - priority: 318 - el.style.getPropertyPriority( 319 - property 320 - ) 188 + value:el.style.getPropertyValue(property), 189 + priority:el.style.getPropertyPriority(property) 321 321 }); 322 322 } 323 323 ... ... @@ -331,13 +331,11 @@ 331 331 original.priority||"" 332 332 ); 333 333 }else{ 334 - el.style.removeProperty( 335 - property 336 - ); 203 + el.style.removeProperty(property); 337 337 } 338 338 } 339 339 340 - function reset Runtime(){207 + function reset(){ 341 341 heightManaged.forEach(function(el){ 342 342 restoreOriginal( 343 343 el, ... ... @@ -362,79 +362,16 @@ 362 362 ); 363 363 }); 364 364 365 - contentManaged.forEach(function(el){ 366 - restoreOriginal( 367 - el, 368 - originalMarginTop, 369 - "margin-top" 370 - ); 371 - 372 - el.removeAttribute( 373 - "data-sn-first-content-aligned" 374 - ); 375 - }); 376 - 377 377 heightManaged.clear(); 378 378 sectionManaged.clear(); 379 - contentManaged.clear(); 380 380 } 381 381 382 - /* ---------- Card detection ---------- */ 383 - 384 - function namedLikeBox(el){ 385 - var c= 386 - typeof el.className==="string" 387 - ? el.className 388 - : ""; 389 - 390 - return /(^|[\s_-])(box|card|tile|panel|role|check|service|source|call|area|detail|resource|topic|warn|info)([\s_-]|$)/i.test(c); 391 - } 392 - 393 - function boxLike(el){ 394 - if( 395 - !visible(el,MIN_W,MIN_H)|| 396 - excluded(el) 397 - ){ 398 - return false; 399 - } 400 - 401 - var s=getComputedStyle(el); 402 - var r=el.getBoundingClientRect(); 403 - 404 - var border= 405 - num(s.borderTopWidth)+ 406 - num(s.borderRightWidth)+ 407 - num(s.borderBottomWidth)+ 408 - num(s.borderLeftWidth); 409 - 410 - var radius=Math.max( 411 - num(s.borderTopLeftRadius), 412 - num(s.borderTopRightRadius), 413 - num(s.borderBottomLeftRadius), 414 - num(s.borderBottomRightRadius) 415 - ); 416 - 417 - var bg= 418 - s.backgroundColor&& 419 - s.backgroundColor!=="rgba(0, 0, 0, 0)"&& 420 - s.backgroundColor!=="transparent"; 421 - 422 - var shadow= 423 - s.boxShadow&& 424 - s.boxShadow!=="none"; 425 - 426 - return ( 427 - namedLikeBox(el)|| 428 - border>=1|| 429 - (bg&&radius>=3)|| 430 - (shadow&&r.width>=180) 431 - ); 432 - } 433 - 434 434 function pickTarget(child){ 435 435 if(!visible(child,MIN_W,MIN_H))return null; 436 436 437 - if(boxLike(child))return child; 239 + if(boxLike(child)){ 240 + return child; 241 + } 438 438 439 439 var cr=child.getBoundingClientRect(); 440 440 var q=[]; ... ... @@ -496,7 +496,7 @@ 496 496 return best; 497 497 } 498 498 499 - function groupRow s(entries){303 + function groupsByVisualRow(entries){ 500 500 var groups=[]; 501 501 502 502 entries ... ... @@ -536,7 +536,7 @@ 536 536 return groups; 537 537 } 538 538 539 - function valid Row(group){343 + function validHorizontalGroup(group){ 540 540 if(group.entries.length<2)return false; 541 541 542 542 var lefts= ... ... @@ -559,26 +559,25 @@ 559 559 560 560 if(widths.length<2)return false; 561 561 562 - var minW= 563 - Math.min.apply(Math,widths);366 + var minWidth=Math.min.apply(Math,widths); 367 + var maxWidth=Math.max.apply(Math,widths); 564 564 565 - var maxW= 566 - Math.max.apply(Math,widths); 567 - 568 568 return ( 569 - maxW/ 570 - Math.max(1,minW)<= 370 + maxWidth/ 371 + Math.max(1,minWidth)<= 571 571 1.9 572 572 ); 573 573 } 574 574 575 - /* ---------- Known ARSN first section bars ---------- */ 376 + function normalizeText(text){ 377 + return String(text||"") 378 + .replace(/s+/g," ") 379 + .trim() 380 + .toUpperCase(); 381 + } 576 576 577 - function knownBar(el){ 578 - var text= 579 - normalizeText( 580 - el.textContent 581 - ); 383 + function exactKnownFirstSection(el){ 384 + var text=normalizeText(el.textContent); 582 582 583 583 return ( 584 584 text==="HIER STARTEN"|| ... ... @@ -592,274 +592,150 @@ 592 592 ); 593 593 } 594 594 595 - function findKnownBar(card){596 - var cardRect= 597 - card.getBoundingClientRect();398 + function visuallyFirstSectionBar(card){ 399 + var cardRect=card.getBoundingClientRect(); 400 + var candidates=[]; 598 598 599 - var rows= 600 - Array.from( 601 - card.querySelectorAll( 602 - "div,p,span,strong,h3,h4,h5,h6" 603 - ) 402 + Array.from( 403 + card.querySelectorAll( 404 + "div,p,span,strong,h3,h4,h5,h6" 604 604 ) 605 - .filter(function(el){606 - if(!visible(el,20,6))returnfalse;607 - if(!knownBar(el))returnfalse;406 + ).forEach(function(el){ 407 + if(!visible(el,20,6))return; 408 + if(excluded(el))return; 608 608 609 - var r=el.getBoundingClientRect(); 410 + var r=el.getBoundingClientRect(); 411 + var relativeTop=r.top-cardRect.top; 610 610 611 - var rel= 612 - r.top- 613 - cardRect.top; 413 + if( 414 + relativeTop<45|| 415 + relativeTop>cardRect.height*.72 416 + ){ 417 + return; 418 + } 614 614 615 - return ( 616 - rel>=35&& 617 - rel<= 618 - cardRect.height*.75 619 - ); 620 - }) 621 - .sort(function(a,b){ 622 - return ( 623 - a.getBoundingClientRect().top- 624 - b.getBoundingClientRect().top 625 - ); 626 - }); 420 + var widthRatio= 421 + r.width/ 422 + Math.max(1,cardRect.width); 627 627 628 - return rows[0]||null; 629 - } 424 + if( 425 + widthRatio<.55|| 426 + widthRatio>1.05|| 427 + r.height>54 428 + ){ 429 + return; 430 + } 630 630 631 - function alignKnownBars(cards){ 632 - var rows= 633 - cards.map(function(card){ 634 - var bar= 635 - findKnownBar(card); 432 + var text=normalizeText(el.textContent); 636 636 637 - if(!bar)return null; 434 + if( 435 + text.length<2|| 436 + text.length>90 437 + ){ 438 + return; 439 + } 638 638 639 - var cr= 640 - card.getBoundingClientRect(); 441 + var style=getComputedStyle(el); 641 641 642 - var br= 643 - bar.getBoundingClientRect(); 443 + var bg= 444 + style.backgroundColor&& 445 + style.backgroundColor!=="rgba(0, 0, 0, 0)"&& 446 + style.backgroundColor!=="transparent"; 644 644 645 - return { 646 - bar:bar, 647 - relativeTop: 648 - br.top- 649 - cr.top 650 - }; 651 - }); 448 + var border= 449 + num(style.borderTopWidth)+ 450 + num(style.borderRightWidth)+ 451 + num(style.borderBottomWidth)+ 452 + num(style.borderLeftWidth); 652 652 653 - if( 654 - rows.some(function(row){ 655 - return !row; 656 - }) 657 - ){ 658 - return false; 659 - } 454 + var mostlyUpper= 455 + text.length>=3&& 456 + text===text.toUpperCase(); 660 660 661 - var target= 662 - Math.max.apply( 663 - Math, 664 - rows.map(function(row){ 665 - return row.relativeTop; 666 - }) 667 - ); 458 + var exact=exactKnownFirstSection(el); 668 668 669 - rows.forEach(function(row){ 670 - var delta= 671 - target- 672 - row.relativeTop; 460 + var score= 461 + (exact?20:0)+ 462 + (bg?6:0)+ 463 + (border>=1?2:0)+ 464 + (mostlyUpper?4:0)+ 465 + (num(style.fontWeight)>=600?1:0); 673 673 674 - if(delta<=1)return; 467 + if(score>=7){ 468 + candidates.push({ 469 + el:el, 470 + relativeTop:relativeTop, 471 + width:r.width, 472 + score:score 473 + }); 474 + } 475 + }); 675 675 676 - saveOriginal( 677 - row.bar, 678 - originalMarginTop, 679 - "margin-top" 680 - ); 477 + if(!candidates.length)return null; 681 681 682 - var current= 683 - num( 684 - getComputedStyle( 685 - row.bar 686 - ).marginTop 687 - ); 479 + candidates.sort(function(a,b){ 480 + if(a.score!==b.score)return b.score-a.score; 481 + if(Math.abs(a.relativeTop-b.relativeTop)>3){ 482 + return a.relativeTop-b.relativeTop; 483 + } 484 + return b.width-a.width; 485 + }); 688 688 689 - row.bar.style.setProperty( 690 - "margin-top", 691 - ( 692 - current+ 693 - delta 694 - )+"px" 695 - ); 696 - 697 - row.bar.setAttribute( 698 - "data-sn-first-section-aligned", 699 - "7" 700 - ); 701 - 702 - sectionManaged.add( 703 - row.bar 704 - ); 487 + // For exact known labels always prefer the earliest exact match. 488 + var exacts=candidates.filter(function(c){ 489 + return exactKnownFirstSection(c.el); 705 705 }); 706 706 707 - return true; 708 - } 709 - 710 - /* ---------- Generic first content after heading ---------- */ 711 - 712 - function heading(card){ 713 - var cr= 714 - card.getBoundingClientRect(); 715 - 716 - var rows= 717 - Array.from( 718 - card.querySelectorAll( 719 - "h1,h2,h3,h4,h5,h6,.box-title,[role=heading]" 720 - ) 721 - ) 722 - .filter(function(el){ 723 - if(!visible(el,20,8))return false; 724 - 725 - var r=el.getBoundingClientRect(); 726 - 727 - var rel= 728 - r.top- 729 - cr.top; 730 - 731 - return ( 732 - rel>=0&& 733 - rel<= 734 - Math.min( 735 - 160, 736 - cr.height*.45 737 - ) 738 - ); 739 - }) 740 - .sort(function(a,b){ 741 - return ( 742 - a.getBoundingClientRect().top- 743 - b.getBoundingClientRect().top 744 - ); 492 + if(exacts.length){ 493 + exacts.sort(function(a,b){ 494 + return a.relativeTop-b.relativeTop||b.width-a.width; 745 745 }); 496 + return exacts[0].el; 497 + } 746 746 747 - return rows[0]||null; 748 - } 499 + // Generic fallback: earliest high-confidence bar. 500 + candidates.sort(function(a,b){ 501 + return a.relativeTop-b.relativeTop||b.score-a.score||b.width-a.width; 502 + }); 749 749 750 - function firstContent(card,h){ 751 - if(!h)return null; 752 - 753 - var cr= 754 - card.getBoundingClientRect(); 755 - 756 - var hr= 757 - h.getBoundingClientRect(); 758 - 759 - var rows= 760 - Array.from( 761 - card.querySelectorAll( 762 - "p,div,ul,ol,dl,blockquote" 763 - ) 764 - ) 765 - .filter(function(el){ 766 - if( 767 - el===h|| 768 - h.contains(el)|| 769 - el.contains(h) 770 - ){ 771 - return false; 772 - } 773 - 774 - if(!visible(el,30,8))return false; 775 - 776 - var text= 777 - String(el.textContent||"") 778 - .replace(/\s+/g," ") 779 - .trim(); 780 - 781 - if(text.length<3)return false; 782 - 783 - var r=el.getBoundingClientRect(); 784 - 785 - if( 786 - r.top< 787 - hr.bottom-1 788 - ){ 789 - return false; 790 - } 791 - 792 - if( 793 - r.top-cr.top> 794 - Math.min( 795 - 280, 796 - cr.height*.65 797 - ) 798 - ){ 799 - return false; 800 - } 801 - 802 - if( 803 - r.height> 804 - cr.height*.58 805 - ){ 806 - return false; 807 - } 808 - 809 - return true; 810 - }) 811 - .sort(function(a,b){ 812 - var ar= 813 - a.getBoundingClientRect(); 814 - 815 - var br= 816 - b.getBoundingClientRect(); 817 - 818 - return ( 819 - ar.top-br.top|| 820 - ar.height-br.height 821 - ); 822 - }); 823 - 824 - return rows[0]||null; 504 + return candidates[0].el; 825 825 } 826 826 827 - function align Generic(cards){507 + function alignFirstSections(cards){ 828 828 var rows= 829 829 cards.map(function(card){ 830 - var h=831 - heading(card);510 + var bar= 511 + visuallyFirstSectionBar(card); 832 832 833 - var c= 834 - firstContent( 835 - card, 836 - h 837 - ); 513 + if(!bar)return null; 838 838 839 - if(!h||!c)return null; 840 - 841 - var cr= 515 + var cardRect= 842 842 card.getBoundingClientRect(); 843 843 844 - var r r=845 - c.getBoundingClientRect();518 + var barRect= 519 + bar.getBoundingClientRect(); 846 846 847 847 return { 848 - content:c, 522 + card:card, 523 + bar:bar, 849 849 relativeTop: 850 - rr.top-cr.top 525 + barRect.top-cardRect.top, 526 + label: 527 + normalizeText(bar.textContent) 851 851 }; 852 852 }); 853 853 531 + // Conservative: only align when every card in the horizontal row 532 + // has a reliable first section bar. 854 854 if( 855 855 rows.some(function(row){ 856 856 return !row; 857 857 }) 858 858 ){ 859 - return false;538 + return null; 860 860 } 861 861 862 - var target= 541 + var targetTop= 863 863 Math.max.apply( 864 864 Math, 865 865 rows.map(function(row){ ... ... @@ -869,47 +869,54 @@ 869 869 870 870 rows.forEach(function(row){ 871 871 var delta= 872 - target- 551 + targetTop- 873 873 row.relativeTop; 874 874 875 875 if(delta<=1)return; 876 876 877 877 saveOriginal( 878 - row. content,557 + row.bar, 879 879 originalMarginTop, 880 880 "margin-top" 881 881 ); 882 882 883 - var current= 562 + var currentMargin= 884 884 num( 885 885 getComputedStyle( 886 - row. content565 + row.bar 887 887 ).marginTop 888 888 ); 889 889 890 - row. content.style.setProperty(569 + row.bar.style.setProperty( 891 891 "margin-top", 892 892 ( 893 - current+ 572 + currentMargin+ 894 894 delta 895 895 )+"px" 896 896 ); 897 897 898 - row. content.setAttribute(899 - "data-sn-first-con tent-aligned",900 - " 7"577 + row.bar.setAttribute( 578 + "data-sn-first-section-aligned", 579 + "4" 901 901 ); 902 902 903 - contentManaged.add( 904 - row.content 905 - ); 582 + sectionManaged.add(row.bar); 906 906 }); 907 907 908 - return true; 585 + return { 586 + labels: 587 + rows.map(function(row){ 588 + return row.label; 589 + }), 590 + targetRelativeTop: 591 + Math.round(targetTop) 592 + }; 909 909 } 910 910 911 - function applyRow(group){ 912 - if(!validRow(group))return false; 595 + function applyGroup(group){ 596 + if(!validHorizontalGroup(group)){ 597 + return null; 598 + } 913 913 914 914 var cards=[]; 915 915 var seen=new Set(); ... ... @@ -921,30 +921,25 @@ 921 921 } 922 922 }); 923 923 924 - if(cards.length<2)return false;610 + if(cards.length<2)return null; 925 925 926 - if( 927 - !alignKnownBars(cards) 928 - ){ 929 - alignGeneric(cards); 930 - } 612 + var firstSection= 613 + alignFirstSections(cards); 931 931 615 + // The section alignment can change natural card heights. 616 + // Measure only afterwards. 932 932 var maxHeight=0; 933 933 934 934 cards.forEach(function(card){ 935 - maxHeight= 936 - Math.max( 937 - maxHeight, 938 - card.getBoundingClientRect().height 939 - ); 620 + maxHeight=Math.max( 621 + maxHeight, 622 + card.getBoundingClientRect().height 623 + ); 940 940 }); 941 941 942 - maxHeight= 943 - Math.ceil( 944 - maxHeight 945 - ); 626 + maxHeight=Math.ceil(maxHeight); 946 946 947 - if(maxHeight<MIN_H)return false;628 + if(maxHeight<MIN_H)return null; 948 948 949 949 cards.forEach(function(card){ 950 950 saveOriginal( ... ... @@ -960,228 +960,125 @@ 960 960 961 961 card.setAttribute( 962 962 "data-sn-equal-height-managed", 963 - " 7"644 + "4" 964 964 ); 965 965 966 966 heightManaged.add(card); 967 967 }); 968 968 969 - return true; 650 + return { 651 + cards:cards.length, 652 + height:maxHeight, 653 + firstSection:firstSection 654 + }; 970 970 } 971 971 972 - function calculate(force){973 - if(applying)return;657 + function run(){ 658 + reset(); 974 974 975 - var width= 976 - Math.round( 977 - window.innerWidth 978 - ); 979 - 980 - var meaningful= 981 - lastWidth<0|| 982 - Math.abs( 983 - width- 984 - lastWidth 985 - )>= 986 - MIN_WIDTH_CHANGE; 987 - 988 988 if( 989 - hasApplied&& 990 - !force&& 991 - !meaningful 661 + window.innerWidth<=MOBILE_MAX 992 992 ){ 993 993 return; 994 994 } 995 995 996 - applying=true; 666 + var parents= 667 + Array.from( 668 + root.querySelectorAll("*") 669 + ).filter(function(parent){ 670 + return ( 671 + visible(parent,MIN_W,MIN_H)&& 672 + parent.children&& 673 + parent.children.length>=2&& 674 + parent.children.length<=MAX_PARENT_CHILDREN 675 + ); 676 + }); 997 997 998 - try{ 999 - harmoniseCustomCallouts(); 678 + var touched=new Set(); 1000 1000 1001 - if(width<=MOBILE_MAX){ 1002 - if(hasApplied){ 1003 - resetRuntime(); 1004 - } 680 + parents.forEach(function(parent){ 681 + var entries=[]; 1005 1005 1006 - hasApplied=false; 1007 - lastWidth=width; 1008 - return; 1009 - } 683 + Array.from(parent.children).forEach(function(child){ 684 + if(!visible(child,MIN_W,MIN_H))return; 1010 1010 1011 - if(hasApplied){ 1012 - resetRuntime(); 1013 - } 686 + var target=pickTarget(child); 687 + if(!target)return; 1014 1014 1015 - var parents= 1016 - Array.from( 1017 - root.querySelectorAll("*") 1018 - ) 1019 - .filter(function(parent){ 1020 - return ( 1021 - visible( 1022 - parent, 1023 - MIN_W, 1024 - MIN_H 1025 - )&& 1026 - parent.children&& 1027 - parent.children.length>=2&& 1028 - parent.children.length<= 1029 - MAX_PARENT_CHILDREN 1030 - ); 689 + entries.push({ 690 + target:target, 691 + rect:target.getBoundingClientRect() 1031 1031 }); 693 + }); 1032 1032 1033 - var touched= 1034 - new Set(); 695 + if(entries.length<2)return; 1035 1035 1036 - pa rents.forEach(function(parent){1037 - var entries=[];697 + groupsByVisualRow(entries).forEach(function(group){ 698 + if(!validHorizontalGroup(group))return; 1038 1038 1039 - Array.from( 1040 - parent.children 1041 - ).forEach(function(child){ 1042 - if( 1043 - !visible( 1044 - child, 1045 - MIN_W, 1046 - MIN_H 1047 - ) 1048 - ){ 1049 - return; 1050 - } 1051 - 1052 - var target= 1053 - pickTarget(child); 1054 - 1055 - if(!target)return; 1056 - 1057 - entries.push({ 1058 - target:target, 1059 - rect: 1060 - target.getBoundingClientRect() 700 + var signature= 701 + group.entries.map(function(entry){ 702 + return entry.target; 1061 1061 }); 1062 - }); 1063 1063 1064 - groupRows( 1065 - entries 1066 - ).forEach(function(group){ 1067 - if(!validRow(group))return; 705 + if( 706 + !signature.some(function(el){ 707 + return !touched.has(el); 708 + }) 709 + ){ 710 + return; 711 + } 1068 1068 1069 - var targets= 1070 - group.entries.map(function(entry){ 1071 - return entry.target; 1072 - }); 713 + var applied= 714 + applyGroup(group); 1073 1073 1074 - if( 1075 - !targets.some(function(el){ 1076 - return !touched.has(el); 1077 - }) 1078 - ){ 1079 - return; 1080 - } 1081 - 1082 - if(applyRow(group)){ 1083 - targets.forEach(function(el){ 1084 - touched.add(el); 1085 - }); 1086 - } 1087 - }); 716 + if(applied){ 717 + signature.forEach(function(el){ 718 + touched.add(el); 719 + }); 720 + } 1088 1088 }); 1089 - 1090 - lastWidth=width; 1091 - hasApplied=true; 1092 - }finally{ 1093 - applying=false; 1094 - } 722 + }); 1095 1095 } 1096 1096 1097 - function resize(){ 1098 - if(resizeTimer){ 1099 - clearTimeout( 1100 - resizeTimer 1101 - ); 1102 - } 725 + function schedule(){ 726 + if(raf)cancelAnimationFrame(raf); 1103 1103 1104 - resizeTimer= 1105 - setTimeout( 1106 - function(){ 1107 - resizeTimer=0; 1108 - calculate(false); 1109 - }, 1110 - RESIZE_DEBOUNCE 1111 - ); 728 + raf=requestAnimationFrame(function(){ 729 + raf=requestAnimationFrame(function(){ 730 + raf=0; 731 + run(); 732 + }); 733 + }); 1112 1112 } 1113 1113 1114 - function waitImages(){ 1115 - var images= 1116 - Array.from( 1117 - root.querySelectorAll("img") 1118 - ); 736 + addEventListener("resize",schedule,{passive:true}); 737 + addEventListener("load",schedule,{once:true}); 1119 1119 1120 - return Promise.all( 1121 - images.map(function(img){ 1122 - if(img.complete){ 1123 - return Promise.resolve(); 1124 - } 739 + root.addEventListener( 740 + "click", 741 + function(){ 742 + setTimeout(schedule,0); 743 + }, 744 + true 745 + ); 1125 1125 1126 - return new Promise(function(resolve){ 1127 - var done=function(){ 1128 - resolve(); 1129 - }; 1130 - 1131 - img.addEventListener( 1132 - "load", 1133 - done, 1134 - {once:true} 1135 - ); 1136 - 1137 - img.addEventListener( 1138 - "error", 1139 - done, 1140 - {once:true} 1141 - ); 1142 - }); 1143 - }) 1144 - ); 1145 - } 1146 - 1147 - async function initial(){ 1148 - if( 1149 - document.readyState!== 1150 - "complete" 1151 - ){ 1152 - await new Promise(function(resolve){ 1153 - addEventListener( 1154 - "load", 1155 - resolve, 1156 - {once:true} 1157 - ); 1158 - }); 747 + Array.from(root.querySelectorAll("img")).forEach(function(img){ 748 + if(!img.complete){ 749 + img.addEventListener("load",schedule,{once:true}); 1159 1159 } 751 + }); 1160 1160 1161 - if( 1162 - document.fonts&& 1163 - document.fonts.ready 1164 - ){ 1165 - try{ 1166 - await document.fonts.ready; 1167 - }catch(error){} 1168 - } 1169 - 1170 - await waitImages(); 1171 - 1172 - // Exactly one initial layout calculation. 1173 - calculate(true); 753 + if(document.fonts&&document.fonts.ready){ 754 + document.fonts.ready.then(schedule); 1174 1174 } 1175 1175 1176 - addEventListener( 1177 - "resize", 1178 - resize, 1179 - {passive:true} 1180 - ); 1181 - 1182 - initial(); 757 + schedule(); 758 + setTimeout(schedule,200); 759 + setTimeout(schedule,650); 760 + setTimeout(schedule,1400); 1183 1183 })(); 1184 1184 </script> 1185 - 1186 1186 <!-- SN_HORIZONTAL_BOX_HARMONIZER_END --> 1187 -{{/html}}\n 764 +{{/html}} 765 +