Changes for page Service Navigator

Last modified by Veronika Kocher on Thursday, 03 Sep 2026 14:15

Manage
- Copy
Actions
- Export
- Print Preview
Viewers
- Source
- Children
- Content
- Comments
- Attachments
- History
- Information
- Likes

From 22.13 to 22.12 From 22.15 to 22.14

From version 22.14

edited by Veronika Kocher
on Thursday, 03 Sep 2026 9:34

Change comment: There is no comment for this version

To version 22.13

edited by Veronika Kocher
on Thursday, 03 Sep 2026 9:18

Change comment: There is no comment for this version

Raw
Rendered

Summary

Page properties (1 modified, 0 added, 0 removed)

Details

Page properties

Content

@@ -287,22 +287,20 @@
  {{html clean="false"}}
  <!-- SN_HORIZONTAL_BOX_HARMONIZER_START -->
--<style data-sn-horizontal-box-harmonizer="4">
--[data-sn-equal-height-managed],
--[data-sn-first-section-aligned]{
--  box-sizing:border-box;
++<style data-sn-horizontal-box-harmonizer="1">
++[data-sn-equal-height-managed="1"]{box-sizing:border-box}
++@media(max-width:767px){
++  [data-sn-equal-height-managed="1"]{min-height:0!important}
  }
  </style>
--<script data-sn-horizontal-box-harmonizer="4">
++<script data-sn-horizontal-box-harmonizer="1">
  (function(){
    "use strict";
    var MOBILE_MAX=767;
--  var ROW_TOLERANCE=6;
++  var ROW_TOLERANCE=4;
    var MIN_W=150;
    var MIN_H=36;
--  var MAX_PARENT_CHILDREN=16;
--  var SEARCH_DEPTH=5;
    var root=
      document.getElementById("xwikicontent")||
@@ -312,10 +312,7 @@
    if(!root)return;
--  var heightManaged=new Set();
--  var sectionManaged=new Set();
--  var originalMinHeight=new WeakMap();
--  var originalMarginTop=new WeakMap();
++  var managed=new Set();
    var raf=0;
    function num(v){
@@ -323,181 +323,64 @@
      return Number.isFinite(n)?n:0;
    }
--  function visible(el,minW,minH){
++  function visible(el){
      if(!el||el.nodeType!==1)return false;
--
      var s=getComputedStyle(el);
--
--    if(
--      s.display==="none"||
--      s.visibility==="hidden"||
--      Number(s.opacity)===0
--    ){
--      return false;
--    }
--
++    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)
--    );
++    return r.width>=MIN_W&&r.height>=MIN_H;
    }
    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]"
--      )
++    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);
++    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;
--
++    if(!visible(el)||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);
--
++      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)
++      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)
--    );
++    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(!visible(child))return null;
++    if(boxLike(child))return child;
--    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;
++    var best=null,bestScore=-1;
      while(q.length){
        var item=q.shift();
        var el=item.el;
++      if(!visible(el))continue;
--      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(r.width>=cr.width*.72&&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)/80);
++        var score=widthFit*5+topFit*2+Math.min(r.height,600)/600;
          if(score>bestScore){
            best=el;
            bestScore=score;
@@ -504,12 +504,9 @@
          }
        }
--      if(item.depth<SEARCH_DEPTH){
++      if(item.depth<3){
          Array.from(el.children||[]).forEach(function(next){
--          q.push({
--            el:next,
--            depth:item.depth+1
--          });
++          q.push({el:next,depth:item.depth+1});
          });
        }
      }
@@ -517,392 +517,61 @@
      return best;
    }
--  function groupsByVisualRow(entries){
--    var groups=[];
--
--    entries
--      .slice()
--      .sort(function(a,b){
--        return (
--          a.rect.top-b.rect.top||
--          a.rect.left-b.rect.left
--        );
--      })
--      .forEach(function(entry){
--        var group=null;
--
--        for(var i=0;i<groups.length;i++){
--          if(
--            Math.abs(
--              groups[i].top-
--              entry.rect.top
--            )<=ROW_TOLERANCE
--          ){
--            group=groups[i];
--            break;
--          }
--        }
--
--        if(!group){
--          group={
--            top:entry.rect.top,
--            entries:[]
--          };
--          groups.push(group);
--        }
--
--        group.entries.push(entry);
--      });
--
--    return groups;
++  function reset(){
++    managed.forEach(function(el){
++      el.style.removeProperty("min-height");
++      el.removeAttribute("data-sn-equal-height-managed");
++    });
++    managed.clear();
    }
--  function validHorizontalGroup(group){
--    if(group.entries.length<2)return false;
--
--    var lefts=
--      group.entries
--        .map(function(e){return e.rect.left;})
--        .sort(function(a,b){return a-b;});
--
--    if(
--      lefts[lefts.length-1]-
--      lefts[0]<
--      80
--    ){
--      return false;
++  function horizontalLayout(parent){
++    if(!visible(parent))return false;
++    var s=getComputedStyle(parent);
++    if(s.display==="grid"||s.display==="inline-grid")return true;
++    if(s.display==="flex"||s.display==="inline-flex"){
++      return s.flexDirection==="row"||s.flexDirection==="row-reverse";
      }
--
--    var widths=
--      group.entries
--        .map(function(e){return e.rect.width;})
--        .filter(function(w){return w>0;});
--
--    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
--    );
++    return false;
    }
--  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;
++  function rowGroups(entries){
++    var groups=[];
++    entries.slice().sort(function(a,b){
++      return a.rect.top-b.rect.top||a.rect.left-b.rect.left;
++    }).forEach(function(entry){
++      var group=null;
++      for(var i=0;i<groups.length;i++){
++        if(Math.abs(groups[i].top-entry.rect.top)<=ROW_TOLERANCE){
++          group=groups[i];
++          break;
++        }
        }
--
--      var widthRatio=
--        r.width/
--        Math.max(1,cardRect.width);
--
--      if(
--        widthRatio<.55||
--        widthRatio>1.05||
--        r.height>54
--      ){
--        return;
++      if(!group){
++        group={top:entry.rect.top,entries:[]};
++        groups.push(group);
        }
--
--      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
--        });
--      }
++      group.entries.push(entry);
      });
--
--    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;
++    return groups;
    }
--  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<MIN_H)return null;
--
--    cards.forEach(function(card){
--      saveOriginal(
--        card,
--        originalMinHeight,
--        "min-height"
--      );
--
--      card.style.setProperty(
--        "min-height",
--        maxHeight+"px"
--      );
--
--      card.setAttribute(
--        "data-sn-equal-height-managed",
--        "4"
--      );
--
--      heightManaged.add(card);
--    });
--
--    return {
--      cards:cards.length,
--      height:maxHeight,
--      firstSection:firstSection
--    };
--  }
--
    function run(){
      reset();
--    if(
--      window.innerWidth<=MOBILE_MAX
--    ){
--      return;
--    }
++    if(window.innerWidth<=MOBILE_MAX)return;
--    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 parents=Array.from(root.querySelectorAll("*")).filter(function(el){
++      return el.children&&el.children.length>=2&&horizontalLayout(el);
++    });
--    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;
--
++        if(!visible(child))return;
          var target=pickTarget(child);
          if(!target)return;
--
          entries.push({
            target:target,
            rect:target.getBoundingClientRect()
@@ -911,30 +911,37 @@
        if(entries.length<2)return;
--      groupsByVisualRow(entries).forEach(function(group){
--        if(!validHorizontalGroup(group))return;
++      rowGroups(entries).forEach(function(group){
++        if(group.entries.length<2)return;
--        var signature=
--          group.entries.map(function(entry){
--            return entry.target;
--          });
++        var lefts=group.entries.map(function(e){return e.rect.left;}).sort(function(a,b){return a-b;});
++        if(lefts[lefts.length-1]-lefts[0]<80)return;
--        if(
--          !signature.some(function(el){
--            return !touched.has(el);
--          })
--        ){
--          return;
--        }
++        var targets=[];
++        var seen=new Set();
--        var applied=
--          applyGroup(group);
++        group.entries.forEach(function(e){
++          if(!seen.has(e.target)){
++            seen.add(e.target);
++            targets.push(e.target);
++          }
++        });
--        if(applied){
--          signature.forEach(function(el){
--            touched.add(el);
--          });
--        }
++        if(targets.length<2)return;
++
++        var max=0;
++        targets.forEach(function(el){
++          max=Math.max(max,el.getBoundingClientRect().height);
++        });
++
++        max=Math.ceil(max);
++        if(max<MIN_H)return;
++
++        targets.forEach(function(el){
++          el.style.setProperty("min-height",max+"px");
++          el.setAttribute("data-sn-equal-height-managed","1");
++          managed.add(el);
++        });
        });
      });
    }
@@ -941,7 +941,6 @@
    function schedule(){
      if(raf)cancelAnimationFrame(raf);
--
      raf=requestAnimationFrame(function(){
        raf=requestAnimationFrame(function(){
          raf=0;
@@ -953,28 +953,17 @@
    addEventListener("resize",schedule,{passive:true});
    addEventListener("load",schedule,{once:true});
--  root.addEventListener(
--    "click",
--    function(){
--      setTimeout(schedule,0);
--    },
--    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);
++  setTimeout(schedule,250);
++  setTimeout(schedule,900);
  })();
  </script>
  <!-- SN_HORIZONTAL_BOX_HARMONIZER_END -->

Changes for page Service Navigator

Summary

Details

Applications

Navigation

My Recent Modifications