Wiki-Quellcode von Release 4.106.0
Zuletzt geändert von MACH ProForms GmbH am 10.04.2025
Verstecke letzte Bearbeiter
| author | version | line-number | content |
|---|---|---|---|
 |
8.2 | 1 | (% class="box" id="HAllgemeines" %) |
| 2 | ((( | ||
| |
1.1 | 3 | Diese Version enthält umfangreiche Erweiterungen im Bereich des Formulareditors, welche wir Ihnen in diesem Artikel im Detail vorstellen. |
| |
8.2 | 4 | ))) |
| |
1.1 | 5 | |
| 6 | {{html}} | ||
| 7 | <div class="overflow-hidden before-after-wrapper"> | ||
| 8 | <div class="before-image-wrapper" style="width: 50%"> | ||
| 9 | <div class="before-image" style="background-image: url('https://mpfpublicstorage.blob.core.windows.net/mpf-marketing/wiki-v4106-as-before.png');"></div> | ||
| 10 | </div> | ||
| 11 | <div class="after-image" style="background-image: url('https://mpfpublicstorage.blob.core.windows.net/mpf-marketing/wiki-v4106-as-after.png');"></div> | ||
| 12 | <span class="handle draggable"></span> | ||
| 13 | </div> | ||
| 14 | |||
| 15 | <script type="text/javascript"> | ||
| 16 | function init() { | ||
| 17 | var style=document.createElement('style'); | ||
| 18 | style.type='text/css'; | ||
| 19 | var myStyles=` | ||
| 20 | .before-after-wrapper { | ||
| 21 | outline: 1px solid gray; | ||
| 22 | position: relative; | ||
| 23 | height: 544px; | ||
| |
15.1 | 24 | width: 1100px; |
| |
1.1 | 25 | } |
| 26 | |||
| 27 | .before-after-wrapper::before { | ||
| 28 | background-color: hsla(172, 61%, 82%, 75%); | ||
| 29 | |||
| 30 | top: 10px; | ||
| 31 | color: gray; | ||
| 32 | content: 'before'; | ||
| 33 | left: 10px; | ||
| 34 | opacity: 0; | ||
| 35 | padding: 5px 10px; | ||
| 36 | position: absolute; | ||
| 37 | transition: opacity 200ms ease-in-out; | ||
| 38 | z-index: 15; | ||
| 39 | } | ||
| 40 | |||
| 41 | :global(.before-after-wrapper.show-before::before) { | ||
| 42 | opacity: 1; | ||
| 43 | } | ||
| 44 | |||
| 45 | .before-after-wrapper::after { | ||
| 46 | background-color: hsla(172, 61%, 82%, 75%); | ||
| 47 | border-radius: 40px; | ||
| 48 | top: 10px; | ||
| 49 | color: gray; | ||
| 50 | opacity: 0; | ||
| 51 | padding: 5px 10px; | ||
| 52 | position: absolute; | ||
| 53 | right: 10px; | ||
| 54 | transition: opacity 200ms ease-in-out; | ||
| 55 | z-index: 15; | ||
| 56 | content: 'after'; | ||
| 57 | } | ||
| 58 | |||
| 59 | :global(.before-after-wrapper.show-after::after) { | ||
| 60 | opacity: 1; | ||
| 61 | } | ||
| 62 | |||
| 63 | .before-image-wrapper { | ||
| 64 | bottom: 0; | ||
| 65 | left: 0; | ||
| 66 | overflow: hidden; | ||
| 67 | position: absolute; | ||
| 68 | top: 0; | ||
| 69 | z-index: 10; | ||
| 70 | } | ||
| 71 | |||
| 72 | .before-image { | ||
| 73 | filter: brightness(95%); | ||
| 74 | background-size: cover; | ||
| 75 | height: 100%; | ||
| 76 | width: 100%; | ||
| 77 | } | ||
| 78 | |||
| 79 | .after-image { | ||
| 80 | background-size: cover; | ||
| 81 | inset: 0; | ||
| 82 | position: absolute; | ||
| 83 | } | ||
| 84 | |||
| 85 | .handle { | ||
| 86 | align-items: center; | ||
| 87 | background: gray; | ||
| 88 | bottom: 0; | ||
| 89 | cursor: col-resize; | ||
| 90 | display: flex; | ||
| 91 | justify-content: center; | ||
| 92 | left: 50%; | ||
| 93 | position: absolute; | ||
| 94 | top: 0; | ||
| 95 | width: 4px; | ||
| 96 | z-index: 20; | ||
| 97 | } | ||
| 98 | |||
| 99 | .handle::before { | ||
| 100 | content: ''; | ||
| 101 | position: absolute; | ||
| 102 | inset: 0 -20px; | ||
| 103 | } | ||
| 104 | |||
| 105 | .handle::after { | ||
| 106 | align-items: center; | ||
| 107 | background: gray; | ||
| 108 | background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 512 512"><path fill="hsl(172, 61%, 82%)" d="M505.7 265.7c3-3 3.1-7.9 .2-11.1l-104-112c-3-3.2-8.1-3.4-11.3-.4s-3.4 8.1-.4 11.3L481.7 252 23.3 252l90.3-90.3c3.1-3.1 3.1-8.2 0-11.3s-8.2-3.1-11.3 0l-104 104c-3.1 3.1-3.1 8.2 0 11.3l104 104c3.1 3.1 8.2 3.1 11.3 0s3.1-8.2 0-11.3L23.3 268l457.4 0-90.3 90.3c-3.1 3.1-3.1 8.2 0 11.3s8.2 3.1 11.3 0l104-104z"/></svg>'); | ||
| 109 | background-position: center; | ||
| 110 | background-repeat: no-repeat; | ||
| 111 | border-radius: 50%; | ||
| 112 | color: gray; | ||
| 113 | content: ''; | ||
| 114 | display: flex; | ||
| 115 | font-size: 16px; | ||
| 116 | font-weight: bold; | ||
| 117 | justify-content: center; | ||
| 118 | max-height: 40px; | ||
| 119 | max-width: 40px; | ||
| 120 | min-height: 40px; | ||
| 121 | min-width: 40px; | ||
| 122 | }`; | ||
| 123 | |||
| 124 | if(style.styleSheet){ | ||
| 125 | style.styleSheet.cssText=myStyles; | ||
| 126 | }else{ | ||
| 127 | style.appendChild(document.createTextNode(myStyles)); | ||
| 128 | } | ||
| 129 | document.getElementsByTagName('head')[0].appendChild(style); | ||
| 130 | |||
| 131 | // get the div containing both the before and after images | ||
| 132 | const imageWrapper = document.querySelector(`.before-after-wrapper`); | ||
| 133 | // check if the user is using a touch device | ||
| 134 | const isTouch = window.matchMedia('(pointer: coarse)').matches; | ||
| 135 | |||
| 136 | // initialize the dragElement function below | ||
| 137 | dragElement(imageWrapper.querySelector('.handle')); | ||
| 138 | |||
| 139 | // get the current coordinates of the .handle | ||
| 140 | function getCoords(e) { | ||
| 141 | let x, y; | ||
| 142 | |||
| 143 | // get the current x and y of the users input (dragging .handle) | ||
| 144 | // check if the device is a touch device | ||
| 145 | if (isTouch) { | ||
| 146 | // touchscreen: if the devices is a touch device, the x and y will be in the touches[0] object | ||
| 147 | x = e.touches[0].clientX; | ||
| 148 | y = e.touches[0].clientY; | ||
| 149 | } else { | ||
| 150 | // | ||
| 151 | // desktop: if the device is not a touch device we can get it right from the event (e) object | ||
| 152 | x = e.clientX; | ||
| 153 | y = e.clientY; | ||
| 154 | } | ||
| 155 | |||
| 156 | return { x, y }; | ||
| 157 | } | ||
| 158 | |||
| 159 | // listens for the user touch/mouse input on the .handle element and drags the slider | ||
| 160 | function dragElement(el) { | ||
| 161 | let pos1 = 0, | ||
| 162 | pos2 = 0, | ||
| 163 | pos3 = 0, | ||
| 164 | pos4 = 0; | ||
| 165 | |||
| 166 | // initialize the slider being dragged when the .handle is pressed | ||
| 167 | if (isTouch) { | ||
| 168 | el.ontouchstart = dragInit; | ||
| 169 | } else { | ||
| 170 | el.onmousedown = dragInit; | ||
| 171 | } | ||
| 172 | |||
| 173 | // call elementDrag/closeElementDrag when the users interacts with .handle | ||
| 174 | function dragInit(e) { | ||
| 175 | e = e || window.event; | ||
| 176 | e.preventDefault(); | ||
| 177 | |||
| 178 | // get the mouse cursor/touch position at startup | ||
| 179 | const { x, y } = getCoords(e); | ||
| 180 | pos3 = x; | ||
| 181 | pos4 = y; | ||
| 182 | |||
| 183 | if (isTouch) { | ||
| 184 | document.ontouchend = closeElementDrag; // stop moving | ||
| 185 | document.ontouchmove = elementDrag; // call function whenever the cursor moves | ||
| 186 | } else { | ||
| 187 | document.onmouseup = closeElementDrag; // stop moving | ||
| 188 | document.onmousemove = elementDrag; // call function whenever the cursor moves | ||
| 189 | } | ||
| 190 | } | ||
| 191 | |||
| 192 | // as the element is dragged update the .before-image-wrapper width | ||
| 193 | function elementDrag(e) { | ||
| 194 | e = e || window.event; | ||
| 195 | e.preventDefault(); | ||
| 196 | |||
| 197 | // calculate new cursor position: | ||
| 198 | const { x, y } = getCoords(e); | ||
| 199 | pos1 = pos3 - x; | ||
| 200 | pos2 = pos4 - y; | ||
| 201 | pos3 = x; | ||
| 202 | pos4 = y; | ||
| 203 | |||
| 204 | let wrapperRight = el.offsetLeft - pos1; | ||
| 205 | |||
| 206 | if (wrapperRight >= 0 && wrapperRight <= imageWrapper.offsetWidth) { | ||
| 207 | // set the element's new position: | ||
| 208 | el.style.left = `${el.offsetLeft - pos1}px`; | ||
| 209 | imageWrapper.querySelector('.before-image-wrapper').style.width = `${wrapperRight}px`; | ||
| 210 | } | ||
| 211 | } | ||
| 212 | |||
| 213 | function closeElementDrag() { | ||
| 214 | if (isTouch) { | ||
| 215 | document.ontouchend = null; | ||
| 216 | document.ontouchmove = null; | ||
| 217 | } else { | ||
| 218 | document.onmouseup = null; | ||
| 219 | document.onmousemove = null; | ||
| 220 | } | ||
| 221 | } | ||
| 222 | } | ||
| 223 | } | ||
| 224 | |||
| 225 | window.addEventListener('load', init); | ||
| 226 | </script> | ||
| 227 | {{/html}} | ||
| 228 | |||
| |
16.1 | 229 | (% class="wikigeneratedid" %) |
| 230 | //Vergleich: Links (Version kleiner 4.106) - Rechts (Version gleich 4.106)// | ||
| 231 | |||
| |
8.3 | 232 | = Anpassungen des Formulareditors = |
| |
1.1 | 233 | |
| |
6.2 | 234 | {{toc start="2"/}} |
| |
1.1 | 235 | |
| |
6.2 | 236 | == Zusammenfassung == |
| |
1.1 | 237 | |
| |
6.2 | 238 | * optische Anpassungen und Modernisierung |
| |
9.4 | 239 | * Die Bereiche Assistent, Panel/Hierarchie, Komponenten und Bibliothek sind gekennzeichnet und voneinander abgegrenzt. |
| |
9.2 | 240 | * Schnellzugriff auf wichtige Komponenteneinstellungen durch Schaltflächen direkt in der Komponentenliste |
| |
6.2 | 241 | |
| |
1.1 | 242 | == Übersicht der Änderungen == |
| 243 | |||
| 244 | === Assistentenbereich === | ||
| 245 | |||
| |
6.2 | 246 | * neue Anordnung der Schaltflächen der Hauptwerkzeugleiste |
| |
1.1 | 247 | |
| 248 | === Panelbereich === | ||
| 249 | |||
| |
9.5 | 250 | * Panelauswahl und Panelwerkzeugleiste wurden zu einer Zeile zusammengefasst. |
| 251 | * Umschalten zwischen Panel- und Hierarchieansicht geschieht jetzt durch eine Schaltfläche statt über Reiter | ||
| 252 | * Wenn Regeln konfiguriert sind, werden die Aktivierungs- und Validierungsregelschaltflächen rot hervorgehoben. | ||
| |
1.1 | 253 | |
| |
6.2 | 254 | === Komponentenbereich === |
| |
1.1 | 255 | |
| |
9.10 | 256 | * verbesserte Orientierung durch eine weitere Spalte "Bezeichnung öffentlich", zusätzlich zu "Bezeichnung intern" |
| |
6.2 | 257 | * ((( |
| |
9.10 | 258 | Konfiguration von Komponenten direkt in der Komponentenliste durch neue Schaltflächen: |
| |
1.1 | 259 | |
| |
6.2 | 260 | * Pflichtkomponente / Pflichtgruppe (sofern Anzeige im Assistenten aktiviert) |
| |
10.4 | 261 | * Eigenschaft der Komponente: "Anzeige im Assistent" |
| |
10.5 | 262 | * Eigenschaft der Komponente: "Anzeige im PDF" |
| 263 | * Eigenschaft der Komponente: "Anzeige in der Druckvorschau" (sofern Druckvorschau aktiviert) | ||
| |
1.1 | 264 | |
| |
6.2 | 265 | Zusätzlich zum Schnellzugriff über die neuen Schaltflächen finden Sie die Einstellungen wie bisher im Konfigurationsdialog der Komponenten. |
| 266 | \\Die Farbe der Schaltflächen in der Komponentenzeile zeigt den konfigurierten Status an: | ||
| 267 | |||
| 268 | * grün: aktiv/immer | ||
| 269 | * gelb: Anzeige wenn Wert vorhanden | ||
| 270 | * schwarz: deaktiviert/nie | ||
| |
10.2 | 271 | * rot: Regel konfiguriert |
| |
6.2 | 272 | ))) |
| 273 | * Symbole für "ContextIdentifier" und "Vorbefüllung" entfallen in der Listendarstellung der Komponenten. | ||
| 274 | Im Konfigurationsdialog der Komponente sind diese Funktionen weiterhin konfigurierbar. | ||
| |
10.1 | 275 | * verknüpfte Komponenten: |
| |
6.3 | 276 | ** das Symbol für verknüpft eingefügte Bausteine ist [[image:1743597653824-818.png||alt="Symbol ~"Link~" für Verknüpfung"]] |
| |
9.2 | 277 | ** Die Bestandteile einer verknüpften Komponente/Komponentengruppe können jetzt angezeigt werden. |
| |
6.3 | 278 | Klicken Sie zum Aufklappen auf das Pfeilsymbol links von der Bezeichnung. |
| |
6.2 | 279 | |
| |
1.1 | 280 | === Bibliothek === |
| 281 | |||
| |
7.2 | 282 | * Ein Dropdown ersetzt die Reiter für Verlage und eigene Bibliothek des Mandanten. |
| |
10.1 | 283 | * Einfügen von Komponenten:[[image:Bibliothek_Kopie-Verknuepfung.png||data-xwiki-image-style-alignment="end"]] |
| |
6.2 | 284 | ** Voreinstellung ist "Verknüpfung erstellen" |
| |
11.1 | 285 | ** Um eine Kopie des markierten Bausteins einzufügen, schalten Sie die Schaltfläche "Verknüpfung erstellen/kopieren" um. Sie finden die Schaltfläche in der Kopfzeile der Bibliothek. |
| |
6.7 | 286 | ** Nach Hinzufügen eines Bausteins wird die Schaltfläche wieder zurückgesetzt auf "Verknüpfung erstellen". |
| |
17.1 | 287 | |
| 288 | Standardkomponenten werden immer als Kopie eingefügt. Die Schaltfläche "Verknüpfung erstellen"/"kopieren" ist deaktiviert. |