Zum Inhalt springen

Wiki-Quellcode von Release 4.106.0

Zuletzt geändert von MACH ProForms GmbH am 10.04.2025
Zeige letzte Bearbeiter
1 (% class="box" id="HAllgemeines" %)
2 (((
3 Diese Version enthält umfangreiche Erweiterungen im Bereich des Formulareditors, welche wir Ihnen in diesem Artikel im Detail vorstellen.
4 )))
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;
24 width: 1100px;
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
229 (% class="wikigeneratedid" %)
230 //Vergleich: Links (Version kleiner 4.106) - Rechts (Version gleich 4.106)//
231
232 = Anpassungen des Formulareditors =
233
234 {{toc start="2"/}}
235
236 == Zusammenfassung ==
237
238 * optische Anpassungen und Modernisierung
239 * Die Bereiche Assistent, Panel/Hierarchie, Komponenten und Bibliothek sind gekennzeichnet und voneinander abgegrenzt.
240 * Schnellzugriff auf wichtige Komponenteneinstellungen durch Schaltflächen direkt in der Komponentenliste
241
242 == Übersicht der Änderungen ==
243
244 === Assistentenbereich ===
245
246 * neue Anordnung der Schaltflächen der Hauptwerkzeugleiste
247
248 === Panelbereich ===
249
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.
253
254 === Komponentenbereich ===
255
256 * verbesserte Orientierung durch eine weitere Spalte "Bezeichnung öffentlich", zusätzlich zu "Bezeichnung intern"
257 * (((
258 Konfiguration von Komponenten direkt in der Komponentenliste durch neue Schaltflächen:
259
260 * Pflichtkomponente / Pflichtgruppe (sofern Anzeige im Assistenten aktiviert)
261 * Eigenschaft der Komponente: "Anzeige im Assistent"
262 * Eigenschaft der Komponente: "Anzeige im PDF"
263 * Eigenschaft der Komponente: "Anzeige in der Druckvorschau" (sofern Druckvorschau aktiviert)
264
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
271 * rot: Regel konfiguriert
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.
275 * verknüpfte Komponenten:
276 ** das Symbol für verknüpft eingefügte Bausteine ist [[image:1743597653824-818.png||alt="Symbol ~"Link~" für Verknüpfung"]]
277 ** Die Bestandteile einer verknüpften Komponente/Komponentengruppe können jetzt angezeigt werden.
278 Klicken Sie zum Aufklappen auf das Pfeilsymbol links von der Bezeichnung.
279
280 === Bibliothek ===
281
282 * Ein Dropdown ersetzt die Reiter für Verlage und eigene Bibliothek des Mandanten.
283 * Einfügen von Komponenten:[[image:Bibliothek_Kopie-Verknuepfung.png||data-xwiki-image-style-alignment="end"]]
284 ** Voreinstellung ist "Verknüpfung erstellen"
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.
286 ** Nach Hinzufügen eines Bausteins wird die Schaltfläche wieder zurückgesetzt auf "Verknüpfung erstellen".
287
288 Standardkomponenten werden immer als Kopie eingefügt. Die Schaltfläche "Verknüpfung erstellen"/"kopieren" ist deaktiviert.