Service Navigator

/* =========================================================
   MASTER TYPOGRAPHY
   ========================================================= */
#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;
}

/* =========================================================
   COMING SOON / IN VORBEREITUNG
   ========================================================= */
.sn-coming-soon-badge{
  display:inline-block;
  vertical-align:middle;
  margin-left:10px;
  padding:4px 8px;
  border-radius:14px;
  border:1px solid #efd9cc;
  background:#fff4ee;
  color:#8a4d36;
  font-size:11px;
  font-weight:700;
  letter-spacing:.055em;
  line-height:1.2;
  white-space:nowrap;
}

/* =========================================================
   NATIVE / DETAIL CALLOUT GEOMETRY
   Preserve existing backgrounds.
   ========================================================= */
#xwikicontent .arsn-info,
#xwikicontent .dmp-info,
#xwikicontent .ido-info,
#xwikicontent .pp-info,
#xwikicontent .infomessage{
  box-sizing:border-box!important;
  border-left:4px solid #21b6d7!important;
  border-radius:8px;
  text-align:left!important;
  word-spacing:normal!important;
}

#xwikicontent .arsn-warn,
#xwikicontent .dmp-warn,
#xwikicontent .ido-warn,
#xwikicontent .pp-warn,
#xwikicontent .warn,
#xwikicontent .warning,
#xwikicontent .warningmessage,
#xwikicontent .errormessage{
  box-sizing:border-box!important;
  border-left:4px solid #e94b13!important;
  border-radius:8px;
  text-align:left!important;
  word-spacing:normal!important;
}

[data-sn-master-equal-height],
[data-sn-master-first-row]{
  box-sizing:border-box;
}

(function(){
  "use strict";

  var PAGE_KIND="overview";
  var PLACEHOLDER=false;
  var PLACEHOLDER_LABEL="COMING SOON";

  var MOBILE_MAX=767;
  var ROW_TOLERANCE=6;
  var RESIZE_DEBOUNCE=220;

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

  if(!root)return;

  var managedHeight=new Set();
  var managedMargin=new Set();
  var originalHeight=new WeakMap();
  var originalMargin=new WeakMap();

  var resizeTimer=0;
  var running=false;

  var THEMES=[
    {
      name:"BLUE",
      accent:"#21b6d7",
      bg:"#eaf7fb",
      text:"#315d68",
      labels:[
        "HIER STARTEN",
        "ENTSCHEIDEN",
        "ÜBERPRÜFEN & ANPASSEN",
        "START HERE",
        "DECIDE",
        "REVIEW & ADAPT"
      ]
    },
    {
      name:"RED",
      accent:"#e94b13",
      bg:"#fff1ec",
      text:"#8a4d36",
      labels:[
        "PLANEN & ORGANISIEREN",
        "ORGANISIEREN & DOKUMENTIEREN",
        "PUBLIZIEREN & PRÄSENTIEREN",
        "PLAN & ORGANISE",
        "PLAN & ORGANIZE",
        "ORGANISE & DOCUMENT",
        "ORGANIZE & DOCUMENT",
        "PUBLISH & PRESENT"
      ]
    },
    {
      name:"YELLOW",
      accent:"#f0aa00",
      bg:"#fff8e7",
      text:"#785b17",
      labels:[
        "SCHÜTZEN & KLÄREN",
        "STANDARDISIEREN & IDENTIFIZIEREN",
        "ÖFFNEN, NACHNUTZEN & AUFFINDBAR MACHEN",
        "PROTECT & CLARIFY",
        "STANDARDISE & IDENTIFY",
        "STANDARDIZE & IDENTIFY",
        "OPEN, REUSE & MAKE FINDABLE"
      ]
    },
    {
      name:"GREEN",
      accent:"#38b76a",
      bg:"#edf9f1",
      text:"#3f7451",
      labels:[
        "INFRASTRUKTUR EINRICHTEN",
        "INFRASTRUKTUR & ZUSAMMENARBEIT EINRICHTEN",
        "SPEICHERN & ZUGRIFF STEUERN",
        "REPOSITORIUM, ERHALTEN & ÜBERGEBEN",
        "SET UP INFRASTRUCTURE",
        "SET UP INFRASTRUCTURE & COLLABORATION",
        "STORE & CONTROL ACCESS",
        "REPOSITORY, PRESERVE & HAND OVER"
      ]
    }
  ];

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

  function norm(value){
    return String(value||"")
      .replace(/\s+/g," ")
      .trim()
      .toUpperCase();
  }

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

    var style=getComputedStyle(el);
    var rect=el.getBoundingClientRect();

    return (
      style.display!=="none"&&
      style.visibility!=="hidden"&&
      rect.width>20&&
      rect.height>4
    );
  }

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

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

  function restoreStyle(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(){
    managedHeight.forEach(function(el){
      restoreStyle(
        el,
        originalHeight,
        "min-height"
      );
      el.removeAttribute(
        "data-sn-master-equal-height"
      );
    });

    managedMargin.forEach(function(el){
      restoreStyle(
        el,
        originalMargin,
        "margin-top"
      );
      el.removeAttribute(
        "data-sn-master-first-row"
      );
    });

    managedHeight.clear();
    managedMargin.clear();
  }

  function themeFor(text){
    var value=norm(text);

    for(var i=0;i=2
      ){
        var match=
          paletteMatch(
            style.borderTopColor
          );

        if(match){
          el.style.setProperty(
            "border-left",
            "4px solid "+match.hex,
            "important"
          );
        }
      }
    });

    // Warning families: explicit safety override.
    Array.from(
      root.querySelectorAll(
        ".arsn-warn,.dmp-warn,.ido-warn,.pp-warn,"+
        ".warn,.warning,.warningmessage,.errormessage"
      )
    ).forEach(function(el){
      if(!visible(el))return;

      el.style.setProperty(
        "border-left",
        "4px solid #e94b13",
        "important"
      );
    });

    // Info families: explicit orientation override.
    Array.from(
      root.querySelectorAll(
        ".arsn-info,.dmp-info,.ido-info,.pp-info,.infomessage"
      )
    ).forEach(function(el){
      if(!visible(el))return;

      el.style.setProperty(
        "border-left",
        "4px solid #21b6d7",
        "important"
      );
    });
  }

  /* =======================================================
     OVERVIEW SEMANTIC THEME PALETTE
     ======================================================= */

  function smallestThemeHeaders(){
    return Array.from(
      root.querySelectorAll(
        "div,span,p,strong,h3,h4,h5,h6"
      )
    ).filter(function(el){
      if(!visible(el))return false;
      if(!themeFor(el.textContent))return false;

      return !Array.from(
        el.children||[]
      ).some(function(child){
        return !!themeFor(
          child.textContent
        );
      });
    });
  }

  function findOverviewCard(header){
    var node=header.parentElement;
    var candidates=[];

    while(node&&node!==root){
      var rect=node.getBoundingClientRect();
      var style=getComputedStyle(node);

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

      if(
        rect.width>=220&&
        rect.width<=800&&
        rect.height>=120&&
        border>=1
      ){
        candidates.push(node);
      }

      node=node.parentElement;
    }

    if(!candidates.length)return null;

    candidates.sort(function(a,b){
      return (
        b.getBoundingClientRect().height-
        a.getBoundingClientRect().height
      );
    });

    return candidates[0];
  }

  function rowCandidates(link,card){
    var result=[];
    var cardRect=
      card.getBoundingClientRect();

    var node=link;

    while(node&&node!==card){
      if(visible(node)){
        var rect=
          node.getBoundingClientRect();

        if(
          rect.height<=105&&
          rect.width>=
            cardRect.width*.50&&
          rect.width<=
            cardRect.width*1.03
        ){
          result.push(node);
        }
      }

      node=node.parentElement;
    }

    return result;
  }

  function chooseOuterRow(
    candidates,
    link
  ){
    if(!candidates.length){
      return link;
    }

    var bordered=
      candidates.filter(function(el){
        return (
          num(
            getComputedStyle(el)
              .borderLeftWidth
          )>=1
        );
      });

    var pool=
      bordered.length
        ?bordered
        :candidates;

    pool.sort(function(a,b){
      var ar=
        a.getBoundingClientRect();

      var br=
        b.getBoundingClientRect();

      return (
        ar.left-br.left||
        br.width-ar.width
      );
    });

    return pool[0]||link;
  }

  function applyOverviewPalette(){
    if(PAGE_KIND!=="overview"){
      return [];
    }

    var headers=
      smallestThemeHeaders()
        .map(function(el){
          return {
            el:el,
            theme:
              themeFor(
                el.textContent
              ),
            card:
              findOverviewCard(
                el
              )
          };
        })
        .filter(function(row){
          return !!row.card;
        });

    var unique=[];
    var seenHeaders=new Set();

    headers.forEach(function(row){
      var key=
        row.theme.name+
        "|"+
        Math.round(
          row.card
            .getBoundingClientRect()
            .left
        )+
        "|"+
        Math.round(
          row.el
            .getBoundingClientRect()
            .top
        );

      if(!seenHeaders.has(key)){
        seenHeaders.add(key);
        unique.push(row);
      }
    });

    unique.forEach(function(row){
      var headerRect=
        row.el
          .getBoundingClientRect();

      row.el.style.setProperty(
        "background",
        row.theme.bg,
        "important"
      );

      row.el.style.setProperty(
        "color",
        row.theme.text,
        "important"
      );

      row.el.style.setProperty(
        "text-align",
        "left",
        "important"
      );

      row.el.style.setProperty(
        "word-spacing",
        "normal",
        "important"
      );

      var later=
        unique
          .filter(function(other){
            return (
              other.card===row.card&&
              other.el
                .getBoundingClientRect()
                .top>
                headerRect.top+2
            );
          })
          .sort(function(a,b){
            return (
              a.el
                .getBoundingClientRect()
                .top-
              b.el
                .getBoundingClientRect()
                .top
            );
          });

      var stopTop=
        later.length
          ?later[0].el
              .getBoundingClientRect()
              .top
          :Infinity;

      Array.from(
        row.card.querySelectorAll("a")
      ).forEach(function(link){
        if(!visible(link))return;

        var rect=
          link.getBoundingClientRect();

        if(
          rect.top<=
            headerRect.bottom-2||
          rect.top>=
            stopTop-2
        ){
          return;
        }

        var candidates=
          rowCandidates(
            link,
            row.card
          );

        var target=
          chooseOuterRow(
            candidates,
            link
          );

        candidates.forEach(function(el){
          el.style.setProperty(
            "border-left",
            "0 solid transparent",
            "important"
          );
        });

        target.style.setProperty(
          "border-left",
          "3px solid "+
            row.theme.accent,
          "important"
        );

        target.style.setProperty(
          "box-sizing",
          "border-box",
          "important"
        );
      });
    });

    return unique;
  }

  /* =======================================================
     OVERVIEW CARD HEIGHT + FIRST THEMATIC ROW
     ======================================================= */

  function alignOverviewCards(headers){
    if(
      PAGE_KIND!=="overview"||
      window.innerWidth<=MOBILE_MAX
    ){
      return;
    }

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

    headers.forEach(function(row){
      if(!seen.has(row.card)){
        seen.add(row.card);
        cards.push(row.card);
      }
    });

    if(cards.length<2){
      return;
    }

    // Group cards by actual top position.
    var groups=[];

    cards.forEach(function(card){
      var top=
        card.getBoundingClientRect().top;

      var group=null;

      for(var i=0;i1){
            saveStyle(
              row.el,
              originalMargin,
              "margin-top"
            );

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

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

            row.el.setAttribute(
              "data-sn-master-first-row",
              "1"
            );

            managedMargin.add(
              row.el
            );
          }
        });
      }

      var maxHeight=0;

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

      maxHeight=
        Math.ceil(maxHeight);

      group.cards.forEach(function(card){
        saveStyle(
          card,
          originalHeight,
          "min-height"
        );

        card.style.setProperty(
          "min-height",
          maxHeight+"px"
        );

        card.setAttribute(
          "data-sn-master-equal-height",
          "1"
        );

        managedHeight.add(
          card
        );
      });
    });
  }

  /* =======================================================
     DETAIL GRID EQUAL HEIGHT, DESKTOP ONLY
     ======================================================= */

  function equaliseDetailGrids(){
    if(
      PAGE_KIND!=="detail"||
      window.innerWidth<=MOBILE_MAX
    ){
      return;
    }

    var selectors=[
      ".arsn-grid",
      ".arsn-grid-2",
      ".arsn-grid-3",
      ".dmp-grid",
      ".ido-grid",
      ".pp-grid"
    ];

    selectors.forEach(function(selector){
      Array.from(
        root.querySelectorAll(selector)
      ).forEach(function(grid){
        var children=
          Array.from(
            grid.children||[]
          ).filter(visible);

        if(children.length<2){
          return;
        }

        var groups=[];

        children.forEach(function(child){
          var top=
            child
              .getBoundingClientRect()
              .top;

          var group=null;

          for(var i=0;i
        MOBILE_MAX
      ){
        alignOverviewCards(
          headers
        );

        equaliseDetailGrids();
      }
    }finally{
      running=false;
    }
  }

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

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

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

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

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

    await 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}
          );
        });
      })
    );

    run();
  }

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

  waitForReady();
})();