Changes for page Plan Your Data Management

Last modified by Veronika Kocher on Friday, 04 Sep 2026 14:45

Manage
- Copy
Actions
- Export
- Print Preview
Viewers

From 4.8 to 4.9 From 4.11 to 4.12

From version 4.9

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

Change comment: There is no comment for this version

To version 4.11

edited by Veronika Kocher
on Thursday, 03 Sep 2026 13:04

Change comment: There is no comment for this version

Raw
Rendered

Summary

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

Details

Page properties

Content

@@ -258,23 +258,100 @@
  {{/html}}
  {{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]{
++<!-- SN_SERVICE_NAVIGATOR_MASTER_STYLE_START -->
++
++<style data-sn-service-navigator-master="1">
++/* =========================================================
++   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;
  }
  </style>
--<script data-sn-horizontal-box-harmonizer="4">
++
++<script data-sn-service-navigator-master="1">
  (function(){
    "use strict";
++  var PAGE_KIND="detail";
++  var PLACEHOLDER=false;
++  var PLACEHOLDER_LABEL="COMING SOON";
++
    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 RESIZE_DEBOUNCE=220;
    var root=
      document.getElementById("xwikicontent")||
@@ -284,93 +284,105 @@
    if(!root)return;
--  var heightManaged=new Set();
--  var sectionManaged=new Set();
--  var originalMinHeight=new WeakMap();
--  var originalMarginTop=new WeakMap();
--  var raf=0;
++  var managedHeight=new Set();
++  var managedMargin=new Set();
++  var originalHeight=new WeakMap();
++  var originalMargin=new WeakMap();
--  function num(v){
--    var n=parseFloat(v);
--    return Number.isFinite(n)?n:0;
--  }
++  var resizeTimer=0;
++  var running=false;
--  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 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"
++      ]
      }
++  ];
--    var r=el.getBoundingClientRect();
--
--    return (
--      r.width>=(minW||1)&&
--      r.height>=(minH||1)
--    );
++  function num(value){
++    var n=parseFloat(value);
++    return Number.isFinite(n)?n:0;
    }
--  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 norm(value){
++    return String(value||"")
++      .replace(/\s+/g," ")
++      .trim()
++      .toUpperCase();
    }
--  function namedLikeBox(el){
--    var c=
--      typeof el.className==="string"
--        ? el.className
--        : "";
++  function visible(el){
++    if(!el||el.nodeType!==1)return false;
--    return /(^|[s_-])(box|card|tile|panel|role|check|service|source|call|area|detail|resource|topic|warn|info)([s_-]|$)/i.test(c);
--  }
++    var style=getComputedStyle(el);
++    var rect=el.getBoundingClientRect();
--  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)
++      style.display!=="none"&&
++      style.visibility!=="hidden"&&
++      rect.width>20&&
++      rect.height>4
      );
    }
--  function saveOriginal(el,map,property){
++  function saveStyle(el,map,property){
      if(map.has(el))return;
      map.set(el,{
@@ -379,7 +379,7 @@
      });
    }
--  function restoreOriginal(el,map,property){
++  function restoreStyle(el,map,property){
      var original=map.get(el);
      if(original&&original.value){
@@ -393,247 +393,249 @@
      }
    }
--  function reset(){
--    heightManaged.forEach(function(el){
--      restoreOriginal(
++  function resetRuntime(){
++    managedHeight.forEach(function(el){
++      restoreStyle(
          el,
--        originalMinHeight,
++        originalHeight,
          "min-height"
        );
--
        el.removeAttribute(
--        "data-sn-equal-height-managed"
++        "data-sn-master-equal-height"
        );
      });
--    sectionManaged.forEach(function(el){
--      restoreOriginal(
++    managedMargin.forEach(function(el){
++      restoreStyle(
          el,
--        originalMarginTop,
++        originalMargin,
          "margin-top"
        );
--
        el.removeAttribute(
--        "data-sn-first-section-aligned"
++        "data-sn-master-first-row"
        );
      });
--    heightManaged.clear();
--    sectionManaged.clear();
++    managedHeight.clear();
++    managedMargin.clear();
    }
--  function pickTarget(child){
--    if(!visible(child,MIN_W,MIN_H))return null;
++  function themeFor(text){
++    var value=norm(text);
--    if(boxLike(child)){
--      return child;
++    for(var i=0;i<THEMES.length;i++){
++      for(var j=0;j<THEMES[i].labels.length;j++){
++        var label=THEMES[i].labels[j];
++
++        if(
++          value===label||
++          value.indexOf(label+" ")===0||
++          value.indexOf(label+" -")===0||
++          value.indexOf(label+" ·")===0
++        ){
++          return THEMES[i];
++        }
++      }
      }
--    var cr=child.getBoundingClientRect();
--    var q=[];
++    return null;
++  }
--    Array.from(child.children||[]).forEach(function(el){
--      q.push({el:el,depth:1});
--    });
++  /* =======================================================
++     PLACEHOLDER BADGE
++     ======================================================= */
--    var best=null;
--    var bestScore=-Infinity;
++  function applyPlaceholderBadge(){
++    if(!PLACEHOLDER)return;
--    while(q.length){
--      var item=q.shift();
--      var el=item.el;
++    if(
++      document.querySelector(
++        ".sn-coming-soon-badge"
++      )
++    ){
++      return;
++    }
--      if(!visible(el,MIN_W,MIN_H))continue;
++    var title=
++      document.querySelector(
++        "#document-title"
++      )||
++      document.querySelector(
++        "h1"
++      );
--      var r=el.getBoundingClientRect();
++    if(!title)return;
--      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 badge=
++      document.createElement(
++        "span"
++      );
--        var topFit=
--          1-Math.min(
--            1,
--            Math.abs(cr.top-r.top)/100
--          );
++    badge.className=
++      "sn-coming-soon-badge";
--        var score=
--          widthFit*6+
--          topFit*3+
--          Math.min(r.height,900)/450+
--          Math.min(r.width*r.height,900000)/900000;
++    badge.textContent=
++      PLACEHOLDER_LABEL;
--        if(score>bestScore){
--          best=el;
--          bestScore=score;
--        }
--      }
++    badge.setAttribute(
++      "aria-label",
++      PLACEHOLDER_LABEL
++    );
--      if(item.depth<SEARCH_DEPTH){
--        Array.from(el.children||[]).forEach(function(next){
--          q.push({
--            el:next,
--            depth:item.depth+1
--          });
--        });
--      }
--    }
--
--    return best;
++    title.appendChild(
++      badge
++    );
    }
--  function groupsByVisualRow(entries){
--    var groups=[];
++  /* =======================================================
++     DETAIL PAGE OWN-ACCENT PROPAGATION
++     ======================================================= */
--    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;
++  function parseRGB(value){
++    var match=String(value||"").match(
++      /rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)/i
++    );
--        for(var i=0;i<groups.length;i++){
--          if(
--            Math.abs(
--              groups[i].top-
--              entry.rect.top
--            )<=ROW_TOLERANCE
--          ){
--            group=groups[i];
--            break;
--          }
--        }
++    if(!match)return null;
--        if(!group){
--          group={
--            top:entry.rect.top,
--            entries:[]
--          };
--          groups.push(group);
--        }
++    return [
++      Number(match[1]),
++      Number(match[2]),
++      Number(match[3])
++    ];
++  }
--        group.entries.push(entry);
--      });
--
--    return groups;
++  function distance(a,b){
++    return Math.sqrt(
++      Math.pow(a[0]-b[0],2)+
++      Math.pow(a[1]-b[1],2)+
++      Math.pow(a[2]-b[2],2)
++    );
    }
--  function validHorizontalGroup(group){
--    if(group.entries.length<2)return false;
++  function paletteMatch(cssColor){
++    var rgb=parseRGB(cssColor);
--    var lefts=
--      group.entries
--        .map(function(e){return e.rect.left;})
--        .sort(function(a,b){return a-b;});
++    if(!rgb)return null;
--    if(
--      lefts[lefts.length-1]-
--      lefts[0]<
--      80
--    ){
--      return false;
--    }
++    var palette=[
++      {hex:"#21b6d7",rgb:[33,182,215]},
++      {hex:"#e94b13",rgb:[233,75,19]},
++      {hex:"#f0aa00",rgb:[240,170,0]},
++      {hex:"#38b76a",rgb:[56,183,106]}
++    ];
--    var widths=
--      group.entries
--        .map(function(e){return e.rect.width;})
--        .filter(function(w){return w>0;});
++    var best=null;
++    var bestDistance=Infinity;
--    if(widths.length<2)return false;
++    palette.forEach(function(item){
++      var d=distance(rgb,item.rgb);
--    var minWidth=Math.min.apply(Math,widths);
--    var maxWidth=Math.max.apply(Math,widths);
++      if(d<bestDistance){
++        best=item;
++        bestDistance=d;
++      }
++    });
--    return (
--      maxWidth/
--      Math.max(1,minWidth)<=
--      1.9
--    );
++    return bestDistance<=30
++      ?best
++      :null;
    }
--  function normalizeText(text){
--    return String(text||"")
--      .replace(/s+/g," ")
--      .trim()
--      .toUpperCase();
--  }
++  function propagateDetailAccents(){
++    if(PAGE_KIND!=="detail")return;
--  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"
++      root.querySelectorAll(
++        ".arsn-call,.dmp-call,.ido-call,.pp-call,"+
++        ".arsn-source,.dmp-source,.ido-source,.pp-source"
        )
      ).forEach(function(el){
--      if(!visible(el,20,6))return;
--      if(excluded(el))return;
++      if(!visible(el))return;
--      var r=el.getBoundingClientRect();
--      var relativeTop=r.top-cardRect.top;
++      var style=getComputedStyle(el);
        if(
--        relativeTop<45||
--        relativeTop>cardRect.height*.72
++        num(style.borderTopWidth)>=2
        ){
--        return;
++        var match=
++          paletteMatch(
++            style.borderTopColor
++          );
++
++        if(match){
++          el.style.setProperty(
++            "border-left",
++            "4px solid "+match.hex,
++            "important"
++          );
++        }
        }
++    });
--      var widthRatio=
--        r.width/
--        Math.max(1,cardRect.width);
++    // 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;
--      if(
--        widthRatio<.55||
--        widthRatio>1.05||
--        r.height>54
--      ){
--        return;
--      }
++      el.style.setProperty(
++        "border-left",
++        "4px solid #e94b13",
++        "important"
++      );
++    });
--      var text=normalizeText(el.textContent);
++    // 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;
--      if(
--        text.length<2||
--        text.length>90
--      ){
--        return;
--      }
++      el.style.setProperty(
++        "border-left",
++        "4px solid #21b6d7",
++        "important"
++      );
++    });
++  }
--      var style=getComputedStyle(el);
++  /* =======================================================
++     OVERVIEW SEMANTIC THEME PALETTE
++     ======================================================= */
--      var bg=
--        style.backgroundColor&&
--        style.backgroundColor!=="rgba(0, 0, 0, 0)"&&
--        style.backgroundColor!=="transparent";
++  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)+
@@ -640,315 +640,674 @@
          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(
++        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){
--      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;
++      return (
++        b.getBoundingClientRect().height-
++        a.getBoundingClientRect().height
++      );
      });
--    // For exact known labels always prefer the earliest exact match.
--    var exacts=candidates.filter(function(c){
--      return exactKnownFirstSection(c.el);
--    });
++    return candidates[0];
++  }
--    if(exacts.length){
--      exacts.sort(function(a,b){
--        return a.relativeTop-b.relativeTop||b.width-a.width;
--      });
--      return exacts[0].el;
--    }
++  function rowCandidates(link,card){
++    var result=[];
++    var cardRect=
++      card.getBoundingClientRect();
--    // Generic fallback: earliest high-confidence bar.
--    candidates.sort(function(a,b){
--      return a.relativeTop-b.relativeTop||b.score-a.score||b.width-a.width;
--    });
++    var node=link;
--    return candidates[0].el;
--  }
++    while(node&&node!==card){
++      if(visible(node)){
++        var rect=
++          node.getBoundingClientRect();
--  function alignFirstSections(cards){
--    var rows=
--      cards.map(function(card){
--        var bar=
--          visuallyFirstSectionBar(card);
++        if(
++          rect.height<=105&&
++          rect.width>=
++            cardRect.width*.50&&
++          rect.width<=
++            cardRect.width*1.03
++        ){
++          result.push(node);
++        }
++      }
--        if(!bar)return null;
++      node=node.parentElement;
++    }
--        var cardRect=
--          card.getBoundingClientRect();
++    return result;
++  }
--        var barRect=
--          bar.getBoundingClientRect();
++  function chooseOuterRow(
++    candidates,
++    link
++  ){
++    if(!candidates.length){
++      return link;
++    }
--        return {
--          card:card,
--          bar:bar,
--          relativeTop:
--            barRect.top-cardRect.top,
--          label:
--            normalizeText(bar.textContent)
--        };
++    var bordered=
++      candidates.filter(function(el){
++        return (
++          num(
++            getComputedStyle(el)
++              .borderLeftWidth
++          )>=1
++        );
        });
--    // 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 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 targetTop=
--      Math.max.apply(
--        Math,
--        rows.map(function(row){
--          return row.relativeTop;
++    var headers=
++      smallestThemeHeaders()
++        .map(function(el){
++          return {
++            el:el,
++            theme:
++              themeFor(
++                el.textContent
++              ),
++            card:
++              findOverviewCard(
++                el
++              )
++          };
          })
--      );
++        .filter(function(row){
++          return !!row.card;
++        });
--    rows.forEach(function(row){
--      var delta=
--        targetTop-
--        row.relativeTop;
++    var unique=[];
++    var seenHeaders=new Set();
--      if(delta<=1)return;
++    headers.forEach(function(row){
++      var key=
++        row.theme.name+
++        "|"+
++        Math.round(
++          row.card
++            .getBoundingClientRect()
++            .left
++        )+
++        "|"+
++        Math.round(
++          row.el
++            .getBoundingClientRect()
++            .top
++        );
--      saveOriginal(
--        row.bar,
--        originalMarginTop,
--        "margin-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"
        );
--      var currentMargin=
--        num(
--          getComputedStyle(
--            row.bar
--          ).marginTop
--        );
++      row.el.style.setProperty(
++        "color",
++        row.theme.text,
++        "important"
++      );
--      row.bar.style.setProperty(
--        "margin-top",
--        (
--          currentMargin+
--          delta
--        )+"px"
++      row.el.style.setProperty(
++        "text-align",
++        "left",
++        "important"
        );
--      row.bar.setAttribute(
--        "data-sn-first-section-aligned",
--        "4"
++      row.el.style.setProperty(
++        "word-spacing",
++        "normal",
++        "important"
        );
--      sectionManaged.add(row.bar);
++      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 {
--      labels:
--        rows.map(function(row){
--          return row.label;
--        }),
--      targetRelativeTop:
--        Math.round(targetTop)
--    };
++    return unique;
    }
--  function applyGroup(group){
--    if(!validHorizontalGroup(group)){
--      return null;
++  /* =======================================================
++     OVERVIEW CARD HEIGHT + FIRST THEMATIC ROW
++     ======================================================= */
++
++  function alignOverviewCards(headers){
++    if(
++      PAGE_KIND!=="overview"||
++      window.innerWidth<=MOBILE_MAX
++    ){
++      return;
      }
      var cards=[];
      var seen=new Set();
--    group.entries.forEach(function(entry){
--      if(!seen.has(entry.target)){
--        seen.add(entry.target);
--        cards.push(entry.target);
++    headers.forEach(function(row){
++      if(!seen.has(row.card)){
++        seen.add(row.card);
++        cards.push(row.card);
        }
      });
--    if(cards.length<2)return null;
++    if(cards.length<2){
++      return;
++    }
--    var firstSection=
--      alignFirstSections(cards);
++    // Group cards by actual top position.
++    var groups=[];
--    // 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
--      );
++      var top=
++        card.getBoundingClientRect().top;
++
++      var group=null;
++
++      for(var i=0;i<groups.length;i++){
++        if(
++          Math.abs(
++            groups[i].top-top
++          )<=ROW_TOLERANCE
++        ){
++          group=groups[i];
++          break;
++        }
++      }
++
++      if(!group){
++        group={
++          top:top,
++          cards:[]
++        };
++        groups.push(group);
++      }
++
++      group.cards.push(card);
      });
--    maxHeight=Math.ceil(maxHeight);
++    groups.forEach(function(group){
++      if(group.cards.length<2){
++        return;
++      }
--    if(maxHeight<MIN_H)return null;
++      var firstHeaders=
++        group.cards.map(function(card){
++          var candidates=
++            headers
++              .filter(function(row){
++                return row.card===card;
++              })
++              .sort(function(a,b){
++                return (
++                  a.el
++                    .getBoundingClientRect()
++                    .top-
++                  b.el
++                    .getBoundingClientRect()
++                    .top
++                );
++              });
--    cards.forEach(function(card){
--      saveOriginal(
--        card,
--        originalMinHeight,
--        "min-height"
--      );
++          return candidates.length
++            ?candidates[0]
++            :null;
++        });
--      card.style.setProperty(
--        "min-height",
--        maxHeight+"px"
--      );
++      if(
++        !firstHeaders.some(function(row){
++          return !row;
++        })
++      ){
++        var targetTop=
++          Math.max.apply(
++            Math,
++            firstHeaders.map(function(row){
++              return (
++                row.el
++                  .getBoundingClientRect()
++                  .top-
++                row.card
++                  .getBoundingClientRect()
++                  .top
++              );
++            })
++          );
--      card.setAttribute(
--        "data-sn-equal-height-managed",
--        "4"
--      );
++        firstHeaders.forEach(function(row){
++          var relativeTop=
++            row.el
++              .getBoundingClientRect()
++              .top-
++            row.card
++              .getBoundingClientRect()
++              .top;
--      heightManaged.add(card);
--    });
++          var delta=
++            targetTop-relativeTop;
--    return {
--      cards:cards.length,
--      height:maxHeight,
--      firstSection:firstSection
--    };
++          if(delta>1){
++            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
++        );
++      });
++    });
    }
--  function run(){
--    reset();
++  /* =======================================================
++     DETAIL GRID EQUAL HEIGHT, DESKTOP ONLY
++     ======================================================= */
++  function equaliseDetailGrids(){
      if(
++      PAGE_KIND!=="detail"||
        window.innerWidth<=MOBILE_MAX
      ){
        return;
      }
--    var parents=
++    var selectors=[
++      ".arsn-grid",
++      ".arsn-grid-2",
++      ".arsn-grid-3",
++      ".dmp-grid",
++      ".ido-grid",
++      ".pp-grid"
++    ];
++
++    selectors.forEach(function(selector){
        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
--        );
--      });
++        root.querySelectorAll(selector)
++      ).forEach(function(grid){
++        var children=
++          Array.from(
++            grid.children||[]
++          ).filter(visible);
--    var touched=new Set();
++        if(children.length<2){
++          return;
++        }
--    parents.forEach(function(parent){
--      var entries=[];
++        var groups=[];
--      Array.from(parent.children).forEach(function(child){
--        if(!visible(child,MIN_W,MIN_H))return;
++        children.forEach(function(child){
++          var top=
++            child
++              .getBoundingClientRect()
++              .top;
--        var target=pickTarget(child);
--        if(!target)return;
++          var group=null;
--        entries.push({
--          target:target,
--          rect:target.getBoundingClientRect()
++          for(var i=0;i<groups.length;i++){
++            if(
++              Math.abs(
++                groups[i].top-top
++              )<=ROW_TOLERANCE
++            ){
++              group=groups[i];
++              break;
++            }
++          }
++
++          if(!group){
++            group={
++              top:top,
++              items:[]
++            };
++            groups.push(group);
++          }
++
++          group.items.push(child);
          });
--      });
--      if(entries.length<2)return;
++        groups.forEach(function(group){
++          if(group.items.length<2){
++            return;
++          }
--      groupsByVisualRow(entries).forEach(function(group){
--        if(!validHorizontalGroup(group))return;
++          var maxHeight=0;
--        var signature=
--          group.entries.map(function(entry){
--            return entry.target;
++          group.items.forEach(function(item){
++            maxHeight=
++              Math.max(
++                maxHeight,
++                item
++                  .getBoundingClientRect()
++                  .height
++              );
            });
--        if(
--          !signature.some(function(el){
--            return !touched.has(el);
--          })
--        ){
--          return;
--        }
++          maxHeight=
++            Math.ceil(maxHeight);
--        var applied=
--          applyGroup(group);
++          group.items.forEach(function(item){
++            saveStyle(
++              item,
++              originalHeight,
++              "min-height"
++            );
--        if(applied){
--          signature.forEach(function(el){
--            touched.add(el);
++            item.style.setProperty(
++              "min-height",
++              maxHeight+"px"
++            );
++
++            item.setAttribute(
++              "data-sn-master-equal-height",
++              "1"
++            );
++
++            managedHeight.add(item);
            });
--        }
++        });
        });
      });
    }
--  function schedule(){
--    if(raf)cancelAnimationFrame(raf);
++  /* =======================================================
++     RUN / RESPONSIVE SCHEDULING
++     ======================================================= */
--    raf=requestAnimationFrame(function(){
--      raf=requestAnimationFrame(function(){
--        raf=0;
--        run();
--      });
--    });
++  function run(){
++    if(running)return;
++
++    running=true;
++
++    try{
++      resetRuntime();
++      applyPlaceholderBadge();
++      propagateDetailAccents();
++
++      var headers=
++        applyOverviewPalette();
++
++      if(
++        window.innerWidth>
++        MOBILE_MAX
++      ){
++        alignOverviewCards(
++          headers
++        );
++
++        equaliseDetailGrids();
++      }
++    }finally{
++      running=false;
++    }
    }
--  addEventListener("resize",schedule,{passive:true});
--  addEventListener("load",schedule,{once:true});
++  function onResize(){
++    if(resizeTimer){
++      clearTimeout(
++        resizeTimer
++      );
++    }
--  root.addEventListener(
--    "click",
--    function(){
--      setTimeout(schedule,0);
--    },
--    true
--  );
++    resizeTimer=
++      setTimeout(
++        function(){
++          resizeTimer=0;
++          run();
++        },
++        RESIZE_DEBOUNCE
++      );
++  }
--  Array.from(root.querySelectorAll("img")).forEach(function(img){
--    if(!img.complete){
--      img.addEventListener("load",schedule,{once:true});
++  async function waitForReady(){
++    if(
++      document.readyState!=="complete"
++    ){
++      await new Promise(function(resolve){
++        window.addEventListener(
++          "load",
++          resolve,
++          {once:true}
++        );
++      });
      }
--  });
--  if(document.fonts&&document.fonts.ready){
--    document.fonts.ready.then(schedule);
++    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();
    }
--  schedule();
--  setTimeout(schedule,200);
--  setTimeout(schedule,650);
--  setTimeout(schedule,1400);
++  window.addEventListener(
++    "resize",
++    onResize,
++    {passive:true}
++  );
++
++  waitForReady();
  })();
  </script>
--<!-- SN_HORIZONTAL_BOX_HARMONIZER_END -->
++
++<!-- SN_SERVICE_NAVIGATOR_MASTER_STYLE_END -->
  {{/html}}

Changes for page Plan Your Data Management

Summary

Details

Applications

Navigation

My Recent Modifications