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