Zum Inhalt springen

Wiki-Quellcode von Release_4.106.0

Version 1.1 von MACH ProForms GmbH am 27.03.2025
Zeige letzte Bearbeiter
1 = Allgemeines =
2
3 Diese Version enthält umfangreiche Erweiterungen im Bereich des Formulareditors, welche wir Ihnen in diesem Artikel im Detail vorstellen.
4
5 == Vergleich ==
6
7 {{html}}
8 <div class="overflow-hidden before-after-wrapper">
9 <div class="before-image-wrapper" style="width: 50%">
10 <div class="before-image" style="background-image: url('https://mpfpublicstorage.blob.core.windows.net/mpf-marketing/wiki-v4106-as-before.png');"></div>
11 </div>
12 <div class="after-image" style="background-image: url('https://mpfpublicstorage.blob.core.windows.net/mpf-marketing/wiki-v4106-as-after.png');"></div>
13 <span class="handle draggable"></span>
14 </div>
15
16 <script type="text/javascript">
17 function init() {
18 var style=document.createElement('style');
19 style.type='text/css';
20 var myStyles=`
21 .before-after-wrapper {
22 outline: 1px solid gray;
23 position: relative;
24 height: 544px;
25 width: 1121px;
26 }
27
28 .before-after-wrapper::before {
29 background-color: hsla(172, 61%, 82%, 75%);
30
31 top: 10px;
32 color: gray;
33 content: 'before';
34 left: 10px;
35 opacity: 0;
36 padding: 5px 10px;
37 position: absolute;
38 transition: opacity 200ms ease-in-out;
39 z-index: 15;
40 }
41
42 :global(.before-after-wrapper.show-before::before) {
43 opacity: 1;
44 }
45
46 .before-after-wrapper::after {
47 background-color: hsla(172, 61%, 82%, 75%);
48 border-radius: 40px;
49 top: 10px;
50 color: gray;
51 opacity: 0;
52 padding: 5px 10px;
53 position: absolute;
54 right: 10px;
55 transition: opacity 200ms ease-in-out;
56 z-index: 15;
57 content: 'after';
58 }
59
60 :global(.before-after-wrapper.show-after::after) {
61 opacity: 1;
62 }
63
64 .before-image-wrapper {
65 bottom: 0;
66 left: 0;
67 overflow: hidden;
68 position: absolute;
69 top: 0;
70 z-index: 10;
71 }
72
73 .before-image {
74 filter: brightness(95%);
75 background-size: cover;
76 height: 100%;
77 width: 100%;
78 }
79
80 .after-image {
81 background-size: cover;
82 inset: 0;
83 position: absolute;
84 }
85
86 .handle {
87 align-items: center;
88 background: gray;
89 bottom: 0;
90 cursor: col-resize;
91 display: flex;
92 justify-content: center;
93 left: 50%;
94 position: absolute;
95 top: 0;
96 width: 4px;
97 z-index: 20;
98 }
99
100 .handle::before {
101 content: '';
102 position: absolute;
103 inset: 0 -20px;
104 }
105
106 .handle::after {
107 align-items: center;
108 background: gray;
109 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>');
110 background-position: center;
111 background-repeat: no-repeat;
112 border-radius: 50%;
113 color: gray;
114 content: '';
115 display: flex;
116 font-size: 16px;
117 font-weight: bold;
118 justify-content: center;
119 max-height: 40px;
120 max-width: 40px;
121 min-height: 40px;
122 min-width: 40px;
123 }`;
124
125 if(style.styleSheet){
126 style.styleSheet.cssText=myStyles;
127 }else{
128 style.appendChild(document.createTextNode(myStyles));
129 }
130 document.getElementsByTagName('head')[0].appendChild(style);
131
132 // get the div containing both the before and after images
133 const imageWrapper = document.querySelector(`.before-after-wrapper`);
134 // check if the user is using a touch device
135 const isTouch = window.matchMedia('(pointer: coarse)').matches;
136
137 // initialize the dragElement function below
138 dragElement(imageWrapper.querySelector('.handle'));
139
140 // get the current coordinates of the .handle
141 function getCoords(e) {
142 let x, y;
143
144 // get the current x and y of the users input (dragging .handle)
145 // check if the device is a touch device
146 if (isTouch) {
147 // touchscreen: if the devices is a touch device, the x and y will be in the touches[0] object
148 x = e.touches[0].clientX;
149 y = e.touches[0].clientY;
150 } else {
151 //
152 // desktop: if the device is not a touch device we can get it right from the event (e) object
153 x = e.clientX;
154 y = e.clientY;
155 }
156
157 return { x, y };
158 }
159
160 // listens for the user touch/mouse input on the .handle element and drags the slider
161 function dragElement(el) {
162 let pos1 = 0,
163 pos2 = 0,
164 pos3 = 0,
165 pos4 = 0;
166
167 // initialize the slider being dragged when the .handle is pressed
168 if (isTouch) {
169 el.ontouchstart = dragInit;
170 } else {
171 el.onmousedown = dragInit;
172 }
173
174 // call elementDrag/closeElementDrag when the users interacts with .handle
175 function dragInit(e) {
176 e = e || window.event;
177 e.preventDefault();
178
179 // get the mouse cursor/touch position at startup
180 const { x, y } = getCoords(e);
181 pos3 = x;
182 pos4 = y;
183
184 if (isTouch) {
185 document.ontouchend = closeElementDrag; // stop moving
186 document.ontouchmove = elementDrag; // call function whenever the cursor moves
187 } else {
188 document.onmouseup = closeElementDrag; // stop moving
189 document.onmousemove = elementDrag; // call function whenever the cursor moves
190 }
191 }
192
193 // as the element is dragged update the .before-image-wrapper width
194 function elementDrag(e) {
195 e = e || window.event;
196 e.preventDefault();
197
198 // calculate new cursor position:
199 const { x, y } = getCoords(e);
200 pos1 = pos3 - x;
201 pos2 = pos4 - y;
202 pos3 = x;
203 pos4 = y;
204
205 let wrapperRight = el.offsetLeft - pos1;
206
207 if (wrapperRight >= 0 && wrapperRight <= imageWrapper.offsetWidth) {
208 // set the element's new position:
209 el.style.left = `${el.offsetLeft - pos1}px`;
210 imageWrapper.querySelector('.before-image-wrapper').style.width = `${wrapperRight}px`;
211 }
212 }
213
214 function closeElementDrag() {
215 if (isTouch) {
216 document.ontouchend = null;
217 document.ontouchmove = null;
218 } else {
219 document.onmouseup = null;
220 document.onmousemove = null;
221 }
222 }
223 }
224 }
225
226 window.addEventListener('load', init);
227 </script>
228 {{/html}}
229
230 = Anpassungen =
231
232 == Oberfläche Übersicht ==
233
234 * generell optische Anpassungen und neuer Anstrich
235 * Bereiche clustern
236 * Bereiche mit Labels A, P/H, K, B
237
238 == Übersicht der Änderungen ==
239
240 === Assistentenbereich ===
241
242 * Neue Gruppierung der Buttons
243 * Neuer Button zum Starten der Veröffentlichung (wenn vorhanden)
244
245 === Panelbereich ===
246
247 * Jetzt eine Zeile
248 * Erster Button schaltet zwischen Panel und Hierarchie um
249 * Die Buttons für Aktivierung und Validierungsregeln erhalten nun die Farbe, wenn vorhanden
250
251 === Hierarchie ===
252
253 * Wechsel zwischen Panelbereich/Hierarchie über Button mit Status
254 * blaues Label ändert sich P/H
255
256 === Komponentenbereich ===
257
258 * Darstellung erweitert um Bezeichnung öffentlich, zusätzlich zu Bezeichnung intern
259 * Komponenteneinstellungen
260 ** Symbole a Status jetzt auf Schaltflächen erkennbar
261 ** Symbole b fällt weg: "ContextIdentifier" oder eine "Vorbefüllung" hat, wird in der Listendarstellung der Komponenten nicht mehr angezeigt
262 weiterhin in Einstellungen konfigurierbar
263 ** farbige Kennzeichnung Beregelung > auf Schaltflächen
264 * Schaltflächen dazugekommen zu bestehenden
265 ** Schaltfläche Pflichtkomponente / Pflichtgruppe
266 weiterhin in Einstellungen konfigurierbar
267 ** Funktionen "Anzeige im Assistenten", "Anzeige im PDF" und "Anzeigen in der Druckvorschau" jetzt zusätzlich über Schaltflächen konfigurierbar
268 weiterhin in Einstellungen konfigurierbar
269 ** Farbe der Schaltfläche steht für die Einstellung: grün/gelb/schwarz
270 * verknüpfte Komponenten
271 ** anderes, einheitliches Symbol
272 ** enthaltende Komponenten sehen, aufklappbar
273
274 === Bibliothek ===
275
276 * Mehrere Verlage nun als Dropdown
277 * Hinzufügen als Kopie oder Verknüpfung nun über Button mit Status,
278 nach Hinzufügen als Kopie springt der Button wieder zurück auf als Verknüpfung hinzufügen