Service Navigator

\n\n \n\n

/* ---------- Typography: never justify headings ---------- */
#xwikicontent h1,
#xwikicontent h2,
#xwikicontent h3,
#xwikicontent h4,
#xwikicontent h5,
#xwikicontent h6,
#xwikicontent .box-title,
#xwikicontent [role="heading"],
#xwikicontent h1 a,
#xwikicontent h2 a,
#xwikicontent h3 a,
#xwikicontent h4 a,
#xwikicontent h5 a,
#xwikicontent h6 a,
#xwikicontent .box-title a,
#xwikicontent [role="heading"] a{
  text-align:left!important;
  text-justify:auto!important;
  word-spacing:normal!important;
}

/* ---------- Native XWiki semantic callouts ---------- */
#xwikicontent .box.infomessage,
#xwikicontent .infomessage,
#xwikicontent .box.warningmessage,
#xwikicontent .warningmessage,
#xwikicontent .box.successmessage,
#xwikicontent .successmessage,
#xwikicontent .box.errormessage,
#xwikicontent .errormessage,
#xwikicontent [data-sn-callout-harmonized="1"]{
  box-sizing:border-box!important;
  border-radius:8px!important;
  border-top:1px solid rgba(0,0,0,.08)!important;
  border-right:1px solid rgba(0,0,0,.08)!important;
  border-bottom:1px solid rgba(0,0,0,.08)!important;
  border-left:4px solid var(--sn-callout-accent,#21b6d7)!important;
  padding:14px 16px!important;
  text-align:left!important;
  text-justify:auto!important;
  word-spacing:normal!important;
  box-shadow:none!important;
}

#xwikicontent .box.infomessage,
#xwikicontent .infomessage{
  --sn-callout-accent:#21b6d7;
  background:#eaf7fb!important;
}

#xwikicontent .box.warningmessage,
#xwikicontent .warningmessage{
  --sn-callout-accent:#f0aa00;
  background:#fff8e7!important;
}

#xwikicontent .box.successmessage,
#xwikicontent .successmessage{
  --sn-callout-accent:#38b76a;
  background:#edf9f1!important;
}

#xwikicontent .box.errormessage,
#xwikicontent .errormessage{
  --sn-callout-accent:#e94b13;
  background:#fff1ec!important;
}

#xwikicontent [data-sn-callout-harmonized="1"] > :first-child,
#xwikicontent .infomessage > :first-child,
#xwikicontent .warningmessage > :first-child,
#xwikicontent .successmessage > :first-child,
#xwikicontent .errormessage > :first-child{
  margin-top:0!important;
}

#xwikicontent [data-sn-callout-harmonized="1"] > :last-child,
#xwikicontent .infomessage > :last-child,
#xwikicontent .warningmessage > :last-child,
#xwikicontent .successmessage > :last-child,
#xwikicontent .errormessage > :last-child{
  margin-bottom:0!important;
}

#xwikicontent [data-sn-equal-height-managed],
#xwikicontent [data-sn-first-section-aligned],
#xwikicontent [data-sn-first-content-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=18;
  var SEARCH_DEPTH=5;
  var RESIZE_DEBOUNCE=220;
  var MIN_WIDTH_CHANGE=2;

  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 contentManaged=new Set();

  var originalMinHeight=new WeakMap();
  var originalMarginTop=new WeakMap();

  var resizeTimer=0;
  var lastWidth=-1;
  var hasApplied=false;
  var applying=false;

  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 normalizeText(text){
    return String(text||"")
      .replace(/\s+/g," ")
      .trim()
      .toUpperCase();
  }

  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]"
      )
    );
  }

  /* ---------- Custom coloured callouts ---------- */

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

    return (
      /(^|\s)(infomessage|warningmessage|successmessage|errormessage)(\s|$)/.test(c)
    );
  }

  function customCallout(el){
    if(!visible(el,220,42)||excluded(el))return false;

    var r=el.getBoundingClientRect();

    if(r.height>520)return false;

    var s=getComputedStyle(el);

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

    var left=
      num(s.borderLeftWidth);

    return (
      bg&&
      left>=2
    );
  }

  function harmoniseCustomCallouts(){
    Array.from(
      root.querySelectorAll(
        "div,aside,section"
      )
    ).forEach(function(el){
      if(nativeCallout(el))return;
      if(!customCallout(el))return;

      var s=getComputedStyle(el);

      el.setAttribute(
        "data-sn-callout-harmonized",
        "1"
      );

      if(
        s.borderLeftColor
      ){
        el.style.setProperty(
          "--sn-callout-accent",
          s.borderLeftColor
        );
      }
    });
  }

  /* ---------- Restore only values V7 itself changed ---------- */

  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 resetRuntime(){
    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"
      );
    });

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

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

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

  /* ---------- Card detection ---------- */

  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 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 minW=
      Math.min.apply(Math,widths);

    var maxW=
      Math.max.apply(Math,widths);

    return (
      maxW/
      Math.max(1,minW)<=
      1.9
    );
  }

  /* ---------- Known ARSN first section bars ---------- */

  function knownBar(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 findKnownBar(card){
    var cardRect=
      card.getBoundingClientRect();

    var rows=
      Array.from(
        card.querySelectorAll(
          "div,p,span,strong,h3,h4,h5,h6"
        )
      )
      .filter(function(el){
        if(!visible(el,20,6))return false;
        if(!knownBar(el))return false;

        var r=el.getBoundingClientRect();

        var rel=
          r.top-
          cardRect.top;

        return (
          rel>=35&&
          rel<=
            cardRect.height*.75
        );
      })
      .sort(function(a,b){
        return (
          a.getBoundingClientRect().top-
          b.getBoundingClientRect().top
        );
      });

    return rows[0]||null;
  }

  function alignKnownBars(cards){
    var rows=
      cards.map(function(card){
        var bar=
          findKnownBar(card);

        if(!bar)return null;

        var cr=
          card.getBoundingClientRect();

        var br=
          bar.getBoundingClientRect();

        return {
          bar:bar,
          relativeTop:
            br.top-
            cr.top
        };
      });

    if(
      rows.some(function(row){
        return !row;
      })
    ){
      return false;
    }

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

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

      if(delta<=1)return;

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

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

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

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

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

    return true;
  }

  /* ---------- Generic first content after heading ---------- */

  function heading(card){
    var cr=
      card.getBoundingClientRect();

    var rows=
      Array.from(
        card.querySelectorAll(
          "h1,h2,h3,h4,h5,h6,.box-title,[role=heading]"
        )
      )
      .filter(function(el){
        if(!visible(el,20,8))return false;

        var r=el.getBoundingClientRect();

        var rel=
          r.top-
          cr.top;

        return (
          rel>=0&&
          rel<=
            Math.min(
              160,
              cr.height*.45
            )
        );
      })
      .sort(function(a,b){
        return (
          a.getBoundingClientRect().top-
          b.getBoundingClientRect().top
        );
      });

    return rows[0]||null;
  }

  function firstContent(card,h){
    if(!h)return null;

    var cr=
      card.getBoundingClientRect();

    var hr=
      h.getBoundingClientRect();

    var rows=
      Array.from(
        card.querySelectorAll(
          "p,div,ul,ol,dl,blockquote"
        )
      )
      .filter(function(el){
        if(
          el===h||
          h.contains(el)||
          el.contains(h)
        ){
          return false;
        }

        if(!visible(el,30,8))return false;

        var text=
          String(el.textContent||"")
            .replace(/\s+/g," ")
            .trim();

        if(text.length<3)return false;

        var r=el.getBoundingClientRect();

        if(
          r.top<
          hr.bottom-1
        ){
          return false;
        }

        if(
          r.top-cr.top>
          Math.min(
            280,
            cr.height*.65
          )
        ){
          return false;
        }

        if(
          r.height>
          cr.height*.58
        ){
          return false;
        }

        return true;
      })
      .sort(function(a,b){
        var ar=
          a.getBoundingClientRect();

        var br=
          b.getBoundingClientRect();

        return (
          ar.top-br.top||
          ar.height-br.height
        );
      });

    return rows[0]||null;
  }

  function alignGeneric(cards){
    var rows=
      cards.map(function(card){
        var h=
          heading(card);

        var c=
          firstContent(
            card,
            h
          );

        if(!h||!c)return null;

        var cr=
          card.getBoundingClientRect();

        var rr=
          c.getBoundingClientRect();

        return {
          content:c,
          relativeTop:
            rr.top-cr.top
        };
      });

    if(
      rows.some(function(row){
        return !row;
      })
    ){
      return false;
    }

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

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

      if(delta<=1)return;

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

      var current=
        num(
          getComputedStyle(
            row.content
          ).marginTop
        );

      row.content.style.setProperty(
        "margin-top",
        (
          current+
          delta
        )+"px"
      );

      row.content.setAttribute(
        "data-sn-first-content-aligned",
        "7"
      );

      contentManaged.add(
        row.content
      );
    });

    return true;
  }

  function applyRow(group){
    if(!validRow(group))return false;

    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 false;

    if(
      !alignKnownBars(cards)
    ){
      alignGeneric(cards);
    }

    var maxHeight=0;

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

    maxHeight=
      Math.ceil(
        maxHeight
      );

    if(maxHeight<0||
      Math.abs(
        width-
        lastWidth
      )>=
      MIN_WIDTH_CHANGE;

    if(
      hasApplied&&
      !force&&
      !meaningful
    ){
      return;
    }

    applying=true;

    try{
      harmoniseCustomCallouts();

      if(width<=MOBILE_MAX){
        if(hasApplied){
          resetRuntime();
        }

        hasApplied=false;
        lastWidth=width;
        return;
      }

      if(hasApplied){
        resetRuntime();
      }

      var parents=
        Array.from(
          root.querySelectorAll("*")
        )
        .filter(function(parent){
          return (
            visible(
              parent,
              MIN_W,
              MIN_H
            )&&
            parent.children&&
            parent.children.length>=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()
          });
        });

        groupRows(
          entries
        ).forEach(function(group){
          if(!validRow(group))return;

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

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

          if(applyRow(group)){
            targets.forEach(function(el){
              touched.add(el);
            });
          }
        });
      });

      lastWidth=width;
      hasApplied=true;
    }finally{
      applying=false;
    }
  }

  function resize(){
    if(resizeTimer){
      clearTimeout(
        resizeTimer
      );
    }

    resizeTimer=
      setTimeout(
        function(){
          resizeTimer=0;
          calculate(false);
        },
        RESIZE_DEBOUNCE
      );
  }

  function waitImages(){
    var images=
      Array.from(
        root.querySelectorAll("img")
      );

    return Promise.all(
      images.map(function(img){
        if(img.complete){
          return Promise.resolve();
        }

        return new Promise(function(resolve){
          var done=function(){
            resolve();
          };

          img.addEventListener(
            "load",
            done,
            {once:true}
          );

          img.addEventListener(
            "error",
            done,
            {once:true}
          );
        });
      })
    );
  }

  async function initial(){
    if(
      document.readyState!==
      "complete"
    ){
      await new Promise(function(resolve){
        addEventListener(
          "load",
          resolve,
          {once:true}
        );
      });
    }

    if(
      document.fonts&&
      document.fonts.ready
    ){
      try{
        await document.fonts.ready;
      }catch(error){}
    }

    await waitImages();

    // Exactly one initial layout calculation.
    calculate(true);
  }

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

  initial();
})();

{{/html}}\n