Service Navigator

[data-sn-equal-height-managed],
[data-sn-first-section-aligned]{
  box-sizing:border-box;
}

(function(){
  "use strict";

  var MOBILE_MAX=767;
  var ROW_TOLERANCE=6;
  var MIN_W=150;
  var MIN_H=36;
  var MAX_PARENT_CHILDREN=16;
  var SEARCH_DEPTH=5;

  var root=
    document.getElementById("xwikicontent")||
    document.querySelector(".xwiki-rendering-content")||
    document.querySelector("main")||
    document.body;

  if(!root)return;

  var heightManaged=new Set();
  var sectionManaged=new Set();
  var originalMinHeight=new WeakMap();
  var originalMarginTop=new WeakMap();
  var raf=0;

  function num(v){
    var n=parseFloat(v);
    return Number.isFinite(n)?n:0;
  }

  function visible(el,minW,minH){
    if(!el||el.nodeType!==1)return false;

    var s=getComputedStyle(el);

    if(
      s.display==="none"||
      s.visibility==="hidden"||
      Number(s.opacity)===0
    ){
      return false;
    }

    var r=el.getBoundingClientRect();

    return (
      r.width>=(minW||1)&&
      r.height>=(minH||1)
    );
  }

  function excluded(el){
    return (
      !el.matches||
      el.matches(
        "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]"
      )
    );
  }

  function namedLikeBox(el){
    var c=
      typeof el.className==="string"
        ? el.className
        : "";

    return /(^|[s_-])(box|card|tile|panel|role|check|service|source|call|area|detail|resource|topic|warn|info)([s_-]|$)/i.test(c);
  }

  function boxLike(el){
    if(!visible(el,MIN_W,MIN_H)||excluded(el))return false;

    var s=getComputedStyle(el);
    var r=el.getBoundingClientRect();

    var border=
      num(s.borderTopWidth)+
      num(s.borderRightWidth)+
      num(s.borderBottomWidth)+
      num(s.borderLeftWidth);

    var radius=Math.max(
      num(s.borderTopLeftRadius),
      num(s.borderTopRightRadius),
      num(s.borderBottomLeftRadius),
      num(s.borderBottomRightRadius)
    );

    var bg=
      s.backgroundColor&&
      s.backgroundColor!=="rgba(0, 0, 0, 0)"&&
      s.backgroundColor!=="transparent";

    var shadow=
      s.boxShadow&&
      s.boxShadow!=="none";

    return (
      namedLikeBox(el)||
      border>=1||
      (bg&&radius>=3)||
      (shadow&&r.width>=180)
    );
  }

  function saveOriginal(el,map,property){
    if(map.has(el))return;

    map.set(el,{
      value:el.style.getPropertyValue(property),
      priority:el.style.getPropertyPriority(property)
    });
  }

  function restoreOriginal(el,map,property){
    var original=map.get(el);

    if(original&&original.value){
      el.style.setProperty(
        property,
        original.value,
        original.priority||""
      );
    }else{
      el.style.removeProperty(property);
    }
  }

  function reset(){
    heightManaged.forEach(function(el){
      restoreOriginal(
        el,
        originalMinHeight,
        "min-height"
      );

      el.removeAttribute(
        "data-sn-equal-height-managed"
      );
    });

    sectionManaged.forEach(function(el){
      restoreOriginal(
        el,
        originalMarginTop,
        "margin-top"
      );

      el.removeAttribute(
        "data-sn-first-section-aligned"
      );
    });

    heightManaged.clear();
    sectionManaged.clear();
  }

  function pickTarget(child){
    if(!visible(child,MIN_W,MIN_H))return null;

    if(boxLike(child)){
      return child;
    }

    var cr=child.getBoundingClientRect();
    var q=[];

    Array.from(child.children||[]).forEach(function(el){
      q.push({el:el,depth:1});
    });

    var best=null;
    var bestScore=-Infinity;

    while(q.length){
      var item=q.shift();
      var el=item.el;

      if(!visible(el,MIN_W,MIN_H))continue;

      var r=el.getBoundingClientRect();

      if(
        r.width>=cr.width*.68&&
        boxLike(el)
      ){
        var widthFit=
          1-Math.min(
            1,
            Math.abs(cr.width-r.width)/
            Math.max(1,cr.width)
          );

        var topFit=
          1-Math.min(
            1,
            Math.abs(cr.top-r.top)/100
          );

        var score=
          widthFit*6+
          topFit*3+
          Math.min(r.height,900)/450+
          Math.min(r.width*r.height,900000)/900000;

        if(score>bestScore){
          best=el;
          bestScore=score;
        }
      }

      if(item.depth0;});

    if(widths.length<2)return false;

    var minWidth=Math.min.apply(Math,widths);
    var maxWidth=Math.max.apply(Math,widths);

    return (
      maxWidth/
      Math.max(1,minWidth)<=
      1.9
    );
  }

  function normalizeText(text){
    return String(text||"")
      .replace(/s+/g," ")
      .trim()
      .toUpperCase();
  }

  function exactKnownFirstSection(el){
    var text=normalizeText(el.textContent);

    return (
      text==="HIER STARTEN"||
      text==="ORGANISIEREN & DOKUMENTIEREN"||
      text==="ENTSCHEIDEN"||
      text==="START HERE"||
      text==="GET STARTED"||
      text==="ORGANISE & DOCUMENT"||
      text==="ORGANIZE & DOCUMENT"||
      text==="DECIDE"
    );
  }

  function visuallyFirstSectionBar(card){
    var cardRect=card.getBoundingClientRect();
    var candidates=[];

    Array.from(
      card.querySelectorAll(
        "div,p,span,strong,h3,h4,h5,h6"
      )
    ).forEach(function(el){
      if(!visible(el,20,6))return;
      if(excluded(el))return;

      var r=el.getBoundingClientRect();
      var relativeTop=r.top-cardRect.top;

      if(
        relativeTop<45||
        relativeTop>cardRect.height*.72
      ){
        return;
      }

      var widthRatio=
        r.width/
        Math.max(1,cardRect.width);

      if(
        widthRatio<.55||
        widthRatio>1.05||
        r.height>54
      ){
        return;
      }

      var text=normalizeText(el.textContent);

      if(
        text.length<2||
        text.length>90
      ){
        return;
      }

      var style=getComputedStyle(el);

      var bg=
        style.backgroundColor&&
        style.backgroundColor!=="rgba(0, 0, 0, 0)"&&
        style.backgroundColor!=="transparent";

      var border=
        num(style.borderTopWidth)+
        num(style.borderRightWidth)+
        num(style.borderBottomWidth)+
        num(style.borderLeftWidth);

      var mostlyUpper=
        text.length>=3&&
        text===text.toUpperCase();

      var exact=exactKnownFirstSection(el);

      var score=
        (exact?20:0)+
        (bg?6:0)+
        (border>=1?2:0)+
        (mostlyUpper?4:0)+
        (num(style.fontWeight)>=600?1:0);

      if(score>=7){
        candidates.push({
          el:el,
          relativeTop:relativeTop,
          width:r.width,
          score:score
        });
      }
    });

    if(!candidates.length)return null;

    candidates.sort(function(a,b){
      if(a.score!==b.score)return b.score-a.score;
      if(Math.abs(a.relativeTop-b.relativeTop)>3){
        return a.relativeTop-b.relativeTop;
      }
      return b.width-a.width;
    });

    // For exact known labels always prefer the earliest exact match.
    var exacts=candidates.filter(function(c){
      return exactKnownFirstSection(c.el);
    });

    if(exacts.length){
      exacts.sort(function(a,b){
        return a.relativeTop-b.relativeTop||b.width-a.width;
      });
      return exacts[0].el;
    }

    // Generic fallback: earliest high-confidence bar.
    candidates.sort(function(a,b){
      return a.relativeTop-b.relativeTop||b.score-a.score||b.width-a.width;
    });

    return candidates[0].el;
  }

  function alignFirstSections(cards){
    var rows=
      cards.map(function(card){
        var bar=
          visuallyFirstSectionBar(card);

        if(!bar)return null;

        var cardRect=
          card.getBoundingClientRect();

        var barRect=
          bar.getBoundingClientRect();

        return {
          card:card,
          bar:bar,
          relativeTop:
            barRect.top-cardRect.top,
          label:
            normalizeText(bar.textContent)
        };
      });

    // Conservative: only align when every card in the horizontal row
    // has a reliable first section bar.
    if(
      rows.some(function(row){
        return !row;
      })
    ){
      return null;
    }

    var targetTop=
      Math.max.apply(
        Math,
        rows.map(function(row){
          return row.relativeTop;
        })
      );

    rows.forEach(function(row){
      var delta=
        targetTop-
        row.relativeTop;

      if(delta<=1)return;

      saveOriginal(
        row.bar,
        originalMarginTop,
        "margin-top"
      );

      var currentMargin=
        num(
          getComputedStyle(
            row.bar
          ).marginTop
        );

      row.bar.style.setProperty(
        "margin-top",
        (
          currentMargin+
          delta
        )+"px"
      );

      row.bar.setAttribute(
        "data-sn-first-section-aligned",
        "4"
      );

      sectionManaged.add(row.bar);
    });

    return {
      labels:
        rows.map(function(row){
          return row.label;
        }),
      targetRelativeTop:
        Math.round(targetTop)
    };
  }

  function applyGroup(group){
    if(!validHorizontalGroup(group)){
      return null;
    }

    var cards=[];
    var seen=new Set();

    group.entries.forEach(function(entry){
      if(!seen.has(entry.target)){
        seen.add(entry.target);
        cards.push(entry.target);
      }
    });

    if(cards.length<2)return null;

    var firstSection=
      alignFirstSections(cards);

    // The section alignment can change natural card heights.
    // Measure only afterwards.
    var maxHeight=0;

    cards.forEach(function(card){
      maxHeight=Math.max(
        maxHeight,
        card.getBoundingClientRect().height
      );
    });

    maxHeight=Math.ceil(maxHeight);

    if(maxHeight=2&&
          parent.children.length<=MAX_PARENT_CHILDREN
        );
      });

    var touched=new Set();

    parents.forEach(function(parent){
      var entries=[];

      Array.from(parent.children).forEach(function(child){
        if(!visible(child,MIN_W,MIN_H))return;

        var target=pickTarget(child);
        if(!target)return;

        entries.push({
          target:target,
          rect:target.getBoundingClientRect()
        });
      });

      if(entries.length<2)return;

      groupsByVisualRow(entries).forEach(function(group){
        if(!validHorizontalGroup(group))return;

        var signature=
          group.entries.map(function(entry){
            return entry.target;
          });

        if(
          !signature.some(function(el){
            return !touched.has(el);
          })
        ){
          return;
        }

        var applied=
          applyGroup(group);

        if(applied){
          signature.forEach(function(el){
            touched.add(el);
          });
        }
      });
    });
  }

  function schedule(){
    if(raf)cancelAnimationFrame(raf);

    raf=requestAnimationFrame(function(){
      raf=requestAnimationFrame(function(){
        raf=0;
        run();
      });
    });
  }

  addEventListener("resize",schedule,{passive:true});
  addEventListener("load",schedule,{once:true});

  root.addEventListener(
    "click",
    function(){
      setTimeout(schedule,0);
    },
    true
  );

  Array.from(root.querySelectorAll("img")).forEach(function(img){
    if(!img.complete){
      img.addEventListener("load",schedule,{once:true});
    }
  });

  if(document.fonts&&document.fonts.ready){
    document.fonts.ready.then(schedule);
  }

  schedule();
  setTimeout(schedule,200);
  setTimeout(schedule,650);
  setTimeout(schedule,1400);
})();