Allgemeines

Diese Version enthält umfangreiche Erweiterungen im Bereich des Formulareditors, welche wir Ihnen in diesem Artikel im Detail vorstellen.

Vergleich

    function init() {
var style=document.createElement('style');
style.type='text/css';
var myStyles=`
.before-after-wrapper {
    outline: 1px solid gray;
    position: relative;       
    height: 544px;
    width: 1121px;
  }
  
  .before-after-wrapper::before {
    background-color: hsla(172, 61%, 82%, 75%);
    
    top: 10px;
    color: gray;
    content: 'before';
    left: 10px;
    opacity: 0;
    padding: 5px 10px;
    position: absolute;
    transition: opacity 200ms ease-in-out;
    z-index: 15;
  }
  
  :global(.before-after-wrapper.show-before::before) {
    opacity: 1;
  }
  
  .before-after-wrapper::after {
    background-color: hsla(172, 61%, 82%, 75%);
    border-radius: 40px;
    top: 10px;
    color: gray;
    opacity: 0;
    padding: 5px 10px;
    position: absolute;
    right: 10px;
    transition: opacity 200ms ease-in-out;
    z-index: 15;
    content: 'after';
  }
  
  :global(.before-after-wrapper.show-after::after) {
    opacity: 1;
  }
  
  .before-image-wrapper {
    bottom: 0;
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    z-index: 10;
  }
  
  .before-image {
    filter: brightness(95%);
    background-size: cover;
    height: 100%;
    width: 100%;
  }
  
  .after-image {
    background-size: cover;
    inset: 0;
    position: absolute;
  }
  
  .handle {
    align-items: center;
    background: gray;
    bottom: 0;
    cursor: col-resize;
    display: flex;
    justify-content: center;
    left: 50%;
    position: absolute;
    top: 0;
    width: 4px;
    z-index: 20;
  }
  
  .handle::before {
    content: '';
    position: absolute;
    inset: 0 -20px;
  }
  
  .handle::after {
    align-items: center;
    background: gray;
    background-image: url('data:image/svg+xml,');
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 50%;
    color: gray;
    content: '';
    display: flex;
    font-size: 16px;
    font-weight: bold;
    justify-content: center;
    max-height: 40px;
    max-width: 40px;
    min-height: 40px;
    min-width: 40px;
  }`;

if(style.styleSheet){
    style.styleSheet.cssText=myStyles;
}else{
    style.appendChild(document.createTextNode(myStyles));
}
document.getElementsByTagName('head')[0].appendChild(style);

       // get the div containing both the before and after images
const imageWrapper = document.querySelector(`.before-after-wrapper`);
// check if the user is using a touch device
const isTouch = window.matchMedia('(pointer: coarse)').matches;

// initialize the dragElement function below
dragElement(imageWrapper.querySelector('.handle'));

// get the current coordinates of the .handle
function getCoords(e) {
  let x, y;

  // get the current x and y of the users input (dragging .handle)
  // check if the device is a touch device
  if (isTouch) {
    // touchscreen: if the devices is a touch device, the x and y will be in the touches[0] object
    x = e.touches[0].clientX;
    y = e.touches[0].clientY;
  } else {
    // 
    // desktop: if the device is not a touch device we can get it right from the event (e) object
    x = e.clientX;
    y = e.clientY;
  }

  return { x, y };
}

// listens for the user touch/mouse input on the .handle element and drags the slider
function dragElement(el) {
  let pos1 = 0,
      pos2 = 0,
      pos3 = 0,
      pos4 = 0;

  // initialize the slider being dragged when the .handle is pressed
  if (isTouch) {
    el.ontouchstart = dragInit;
  } else {
    el.onmousedown = dragInit;
  }

  // call elementDrag/closeElementDrag when the users interacts with .handle
  function dragInit(e) {
    e = e || window.event;
    e.preventDefault();

    // get the mouse cursor/touch position at startup
    const { x, y } = getCoords(e);
    pos3 = x;
    pos4 = y;

    if (isTouch) {
      document.ontouchend = closeElementDrag; // stop moving
      document.ontouchmove = elementDrag; // call function whenever the cursor moves
    } else {
      document.onmouseup = closeElementDrag; // stop moving
      document.onmousemove = elementDrag; // call function whenever the cursor moves
    }
  }

  // as the element is dragged update the .before-image-wrapper width
  function elementDrag(e) {
    e = e || window.event;
    e.preventDefault();

    // calculate new cursor position:
    const { x, y } = getCoords(e);
    pos1 = pos3 - x;
    pos2 = pos4 - y;
    pos3 = x;
    pos4 = y;

    let wrapperRight = el.offsetLeft - pos1;

    if (wrapperRight >= 0 && wrapperRight <= imageWrapper.offsetWidth) {
      // set the element's new position:
      el.style.left = `${el.offsetLeft - pos1}px`;
      imageWrapper.querySelector('.before-image-wrapper').style.width = `${wrapperRight}px`;
    }
  }

  function closeElementDrag() {
    if (isTouch) {
      document.ontouchend = null;
      document.ontouchmove = null;
    } else {
      document.onmouseup = null;
      document.onmousemove = null;
    }
  }
}
    }

    window.addEventListener('load', init);

Anpassungen

Oberfläche Übersicht

• generell optische Anpassungen und neuer Anstrich
• Bereiche clustern
• Bereiche mit Labels A, P/H, K, B

Übersicht der Änderungen

Assistentenbereich

• Neue Gruppierung der Buttons
• Neuer Button zum Starten der Veröffentlichung (wenn vorhanden)

Panelbereich

• Jetzt eine Zeile
• Erster Button schaltet zwischen Panel und Hierarchie um
• Die Buttons für Aktivierung und Validierungsregeln erhalten nun die Farbe, wenn vorhanden

Hierarchie

• Wechsel zwischen Panelbereich/Hierarchie über Button mit Status
• blaues Label ändert sich P/H

Komponentenbereich

• Darstellung erweitert um Bezeichnung öffentlich, zusätzlich zu Bezeichnung intern
• Komponenteneinstellungen
  • Symbole a Status jetzt auf Schaltflächen erkennbar
  • Symbole b fällt weg: "ContextIdentifier" oder eine "Vorbefüllung" hat, wird in der Listendarstellung der Komponenten nicht mehr angezeigt
    weiterhin in Einstellungen konfigurierbar
  • farbige Kennzeichnung Beregelung > auf Schaltflächen
• Schaltflächen dazugekommen zu bestehenden
  • Schaltfläche Pflichtkomponente / Pflichtgruppe
    weiterhin in Einstellungen konfigurierbar
  • Funktionen "Anzeige im Assistenten", "Anzeige im PDF" und "Anzeigen in der Druckvorschau" jetzt zusätzlich über Schaltflächen konfigurierbar
    weiterhin in Einstellungen konfigurierbar
  • Farbe der Schaltfläche steht für die Einstellung: grün/gelb/schwarz
• verknüpfte Komponenten
  • anderes, einheitliches Symbol
  • enthaltende Komponenten sehen, aufklappbar

Bibliothek

• Mehrere Verlage nun als Dropdown
• Hinzufügen als Kopie oder Verknüpfung nun über Button mit Status,
  nach Hinzufügen als Kopie springt der Button wieder zurück auf als Verknüpfung hinzufügen