Wiki-Quellcode von Schulungsvideos
Zeige letzte Bearbeiter
author | version | line-number | content |
---|---|---|---|
1 | In unseren Schulungsvideos begleiten wir Sie bei den ersten Schritten in FORMCYCLE. In den zur Verfügung stehenden Lektionen lernen Sie unter anderem, wie Sie Formulare im Formulardesigner erstellen und Workflows konfigurieren, um selbständig die Anforderungen Ihrer Formularprojekte umzusetzen. | ||
2 | |||
3 | {{velocity}} | ||
4 | #set ($mainCards = [{ | ||
5 | 'icon': 'fa fa-play-circle', | ||
6 | 'title': 'Lektion 1', | ||
7 | 'description': 'Erste Schritte<br>Formulardesigner', | ||
8 | 'documentation': "Schulung.lektion1", | ||
9 | 'bgcolor': '#cae7df', | ||
10 | 'color': '#2b3649', | ||
11 | 'colordesc': '#617496' | ||
12 | }, { | ||
13 | 'icon': 'fa fa-play-circle', | ||
14 | 'title': 'Lektion 2', | ||
15 | 'description': 'Workflowdesigner', | ||
16 | 'documentation': 'Schulung.lektion2', | ||
17 | 'bgcolor': '#cae7df', | ||
18 | 'color': '#2b3649', | ||
19 | 'colordesc': '#617496' | ||
20 | }, { | ||
21 | 'icon': 'fa fa-play-circle', | ||
22 | 'title': 'Lektion 3', | ||
23 | 'description': 'Postfach', | ||
24 | 'documentation': 'Schulung.lektion3', | ||
25 | 'bgcolor': '#cae7df', | ||
26 | 'color': '#2b3649', | ||
27 | 'colordesc': '#617496' | ||
28 | }, { | ||
29 | 'icon': 'fa fa-play-circle', | ||
30 | 'title': 'Sonstiges', | ||
31 | 'description': 'Datenquellen<br>Double-Opt-In<br>...', | ||
32 | 'documentation': 'Schulung.lektionSonstiges' | ||
33 | }]) | ||
34 | |||
35 | ## 'icon': 'fa fa-play-circle', | ||
36 | ## 'title': 'Einführungsvideos', | ||
37 | ## 'description': 'Kurze Videos zum Vorstellen einzelner FORMCYCLE-Funktionen; ggf. Titel "Schnelleinstieg"', | ||
38 | ## 'documentation': 'https://formcycle.eu/de/features' | ||
39 | ##}, { | ||
40 | ## 'iconfc': 'puzzle', | ||
41 | ## 'title': 'Anwendungsfälle', | ||
42 | ## 'description': 'Formulardaten verarbeiten', | ||
43 | ## 'documentation': 'doc:Anwendungsfälle.WebHome' | ||
44 | ##}, { | ||
45 | |||
46 | |||
47 | |||
48 | ## 'icon': 'fa fa-share-square', | ||
49 | ## 'title': 'Daten extern weiterverarbeiten', | ||
50 | ## 'description': 'Mit FORMCYCLE erfasste Daten an andere Systeme weiterleiten', | ||
51 | ## 'documentation': 'Formcycle.UserInterface.MyForms.WorkflowProcessing' | ||
52 | ##}, { | ||
53 | |||
54 | |||
55 | |||
56 | {{html}} | ||
57 | ##$jsontool.serialize(${mainCards})<br> | ||
58 | ##$jsontool.serialize($mainCards)<br> | ||
59 | {{/html}} | ||
60 | |||
61 | {{MainMenuTiles cards='$jsontool.serialize($mainCards)' /}} | ||
62 | |||
63 | {{/velocity}} | ||
64 | |||
65 | |||
66 | |||
67 | |||
68 | {{velocity}} | ||
69 | {{html wiki="false" clean="false"}} | ||
70 | |||
71 | <style> | ||
72 | .jqcloud{font:10px Helvetica,Arial,sans-serif;line-height:normal;overflow:hidden;position:relative}.jqcloud-word{margin:0;padding:0}.jqcloud-word.w1{color:#aab5f0;font-size:100%}.jqcloud-word.w2{color:#9ce;font-size:150%}.jqcloud-word.w3{color:#a0ddff;font-size:200%}.jqcloud-word.w4{color:#90c5f0;font-size:250%}.jqcloud-word.w5{color:#90a0dd;font-size:300%}.jqcloud-word.w6{color:#90c5f0;font-size:350%}.jqcloud-word.w7{color:#39d;font-size:400%}.jqcloud-word.w8{color:#0cf;font-size:450%}.jqcloud-word.w9{color:#0cf;font-size:500%}.jqcloud-word.w10{color:#0cf;font-size:550%}.jqcloud-word a{color:inherit;font-size:inherit;text-decoration:none}.jqcloud-word a:hover{color:#0cf} | ||
73 | .jqcloud span { | ||
74 | -moz-user-select: -moz-none; | ||
75 | -khtml-user-select: none; | ||
76 | -webkit-user-select: none; | ||
77 | -ms-user-select: none; | ||
78 | user-select: none; | ||
79 | background-color: #eaeaef; | ||
80 | border-radius: 10px; | ||
81 | padding: 0px 4px 0px 4px; | ||
82 | } | ||
83 | .jqcloud span.jqHighlight { | ||
84 | color: #0cf !important; | ||
85 | } | ||
86 | .jQButton { | ||
87 | color: #fff; | ||
88 | background-color: #3480AD;/*#f0f0f3*/ | ||
89 | text-align: center; | ||
90 | display: inline-block; | ||
91 | border-radius: 4px; | ||
92 | padding: 4px 10px 4px 22px; | ||
93 | font-size: 15px | ||
94 | margin: auto; | ||
95 | margin-bottom: 5px; | ||
96 | -moz-user-select: -moz-none; | ||
97 | -khtml-user-select: none; | ||
98 | -webkit-user-select: none; | ||
99 | -ms-user-select: none; | ||
100 | user-select: none; | ||
101 | } | ||
102 | .jQButton[active=false] { | ||
103 | background-color: #a7a7a7; | ||
104 | } | ||
105 | .jQButton:hover { | ||
106 | background-color: #0cf; | ||
107 | } | ||
108 | .jQButton[active=false]:hover { | ||
109 | background-color: #676767; | ||
110 | } | ||
111 | .jQButton .jQButton-icon::before { | ||
112 | font-family: "FontAwesome"; | ||
113 | font-size: 14px; | ||
114 | font-weight: 400; | ||
115 | content: "\f046"; | ||
116 | } | ||
117 | .jQButton[active=false] .jQButton-icon::before { | ||
118 | content: "\f096"; | ||
119 | } | ||
120 | .jQButton-icon { | ||
121 | position: absolute; | ||
122 | margin-left: -11px; | ||
123 | } | ||
124 | </style> | ||
125 | |||
126 | <script> | ||
127 | require(['jquery'],function(XjQ) { | ||
128 | 'use strict'; | ||
129 | |||
130 | /* | ||
131 | * Plugin class | ||
132 | */ | ||
133 | var jQCloud = function(element, word_array, options) { | ||
134 | this.Xelement = XjQ(element); | ||
135 | |||
136 | this.word_array = word_array || []; | ||
137 | this.options = options; | ||
138 | |||
139 | this.sizeGenerator = null; | ||
140 | this.colorGenerator = null; | ||
141 | |||
142 | // Data used internally | ||
143 | this.data = { | ||
144 | placed_words: [], | ||
145 | timeouts: {}, | ||
146 | namespace: null, | ||
147 | step: null, | ||
148 | angle: null, | ||
149 | aspect_ratio: null, | ||
150 | max_weight: null, | ||
151 | min_weight: null, | ||
152 | sizes: [], | ||
153 | colors: [] | ||
154 | }; | ||
155 | |||
156 | this.initialize(); | ||
157 | }; | ||
158 | |||
159 | jQCloud.DEFAULTS = { | ||
160 | width: 100, | ||
161 | height: 100, | ||
162 | center: { x: 0.5, y: 0.5 }, | ||
163 | steps: 10, | ||
164 | delay: null, | ||
165 | shape: 'elliptic', | ||
166 | classPattern: 'w{n}', | ||
167 | encodeURI: true, | ||
168 | removeOverflowing: true, | ||
169 | afterCloudRender: null, | ||
170 | autoResize: false, | ||
171 | colors: null, | ||
172 | fontSize: null, | ||
173 | template: null | ||
174 | }; | ||
175 | |||
176 | jQCloud.prototype = { | ||
177 | initialize: function() { | ||
178 | // Set/Get dimensions | ||
179 | if (this.options.width) { | ||
180 | this.Xelement.width(this.options.width); | ||
181 | } | ||
182 | else { | ||
183 | this.options.width = this.Xelement.width(); | ||
184 | } | ||
185 | if (this.options.height) { | ||
186 | this.Xelement.height(this.options.height); | ||
187 | } | ||
188 | else { | ||
189 | this.options.height = this.Xelement.height(); | ||
190 | } | ||
191 | |||
192 | // Default options value | ||
193 | this.options = XjQ.extend(true, {}, jQCloud.DEFAULTS, this.options); | ||
194 | |||
195 | // Ensure delay | ||
196 | if (this.options.delay === null) { | ||
197 | this.options.delay = this.word_array.length > 50 ? 10 : 0; | ||
198 | } | ||
199 | |||
200 | // Backward compatibility | ||
201 | if (this.options.center.x > 1) { | ||
202 | this.options.center.x = this.options.center.x / this.options.width; | ||
203 | this.options.center.y = this.options.center.y / this.options.height; | ||
204 | } | ||
205 | |||
206 | // Create colorGenerator function from options | ||
207 | // Direct function | ||
208 | if (typeof this.options.colors == 'function') { | ||
209 | this.colorGenerator = this.options.colors; | ||
210 | } | ||
211 | // Array of sizes | ||
212 | else if (XjQ.isArray(this.options.colors)) { | ||
213 | var cl = this.options.colors.length; | ||
214 | if (cl > 0) { | ||
215 | // Fill the sizes array to X items | ||
216 | if (cl < this.options.steps) { | ||
217 | for (var i = cl; i < this.options.steps; i++) { | ||
218 | this.options.colors[i] = this.options.colors[cl - 1]; | ||
219 | } | ||
220 | } | ||
221 | |||
222 | this.colorGenerator = function(weight) { | ||
223 | return this.options.colors[this.options.steps - weight]; | ||
224 | }; | ||
225 | } | ||
226 | } | ||
227 | |||
228 | // Create sizeGenerator function from options | ||
229 | // Direct function | ||
230 | if (typeof this.options.fontSize == 'function') { | ||
231 | this.sizeGenerator = this.options.fontSize; | ||
232 | } | ||
233 | // Object with 'from' and 'to' | ||
234 | else if (XjQ.isPlainObject(this.options.fontSize)) { | ||
235 | this.sizeGenerator = function(width, height, weight) { | ||
236 | var max = width * this.options.fontSize.from, | ||
237 | min = width * this.options.fontSize.to; | ||
238 | return Math.round(min + (max - min) * 1.0 / (this.options.steps - 1) * (weight - 1)) + 'px'; | ||
239 | }; | ||
240 | } | ||
241 | // Array of sizes | ||
242 | else if (XjQ.isArray(this.options.fontSize)) { | ||
243 | var sl = this.options.fontSize.length; | ||
244 | if (sl > 0) { | ||
245 | // Fill the sizes array to X items | ||
246 | if (sl < this.options.steps) { | ||
247 | for (var j = sl; j < this.options.steps; j++) { | ||
248 | this.options.fontSize[j] = this.options.fontSize[sl - 1]; | ||
249 | } | ||
250 | } | ||
251 | |||
252 | this.sizeGenerator = function(width, height, weight) { | ||
253 | return this.options.fontSize[this.options.steps - weight]; | ||
254 | }; | ||
255 | } | ||
256 | } | ||
257 | |||
258 | this.data.angle = Math.random() * 6.28; | ||
259 | this.data.step = (this.options.shape === 'rectangular') ? 18.0 : 2.0; | ||
260 | this.data.aspect_ratio = this.options.width / this.options.height; | ||
261 | this.clearTimeouts(); | ||
262 | |||
263 | // Namespace word ids to avoid collisions between multiple clouds | ||
264 | this.data.namespace = (this.Xelement.attr('id') || Math.floor((Math.random() * 1000000)).toString(36)) + '_word_'; | ||
265 | |||
266 | this.Xelement.addClass('jqcloud'); | ||
267 | |||
268 | // Container's CSS position cannot be 'static' | ||
269 | if (this.Xelement.css('position') === 'static') { | ||
270 | this.Xelement.css('position', 'relative'); | ||
271 | } | ||
272 | |||
273 | // Delay execution so that the browser can render the page before the computatively intensive word cloud drawing | ||
274 | this.createTimeout(XjQ.proxy(this.drawWordCloud, this), 10); | ||
275 | |||
276 | // Attach window resize event | ||
277 | if (this.options.autoResize) { | ||
278 | XjQ(window).on('resize.' + this.data.namespace, throttle(this.resize, 50, this)); | ||
279 | } | ||
280 | }, | ||
281 | |||
282 | // Helper function to keep track of timeouts so they can be destroyed | ||
283 | createTimeout: function(callback, time) { | ||
284 | var timeout = setTimeout(XjQ.proxy(function() { | ||
285 | delete this.data.timeouts[timeout]; | ||
286 | callback(); | ||
287 | }, this), time); | ||
288 | this.data.timeouts[timeout] = true; | ||
289 | }, | ||
290 | |||
291 | // Destroy all timeouts | ||
292 | clearTimeouts: function() { | ||
293 | XjQ.each(this.data.timeouts, function(key) { | ||
294 | clearTimeout(key); | ||
295 | }); | ||
296 | this.data.timeouts = {}; | ||
297 | }, | ||
298 | |||
299 | // Pairwise overlap detection | ||
300 | overlapping: function(a, b) { | ||
301 | if (Math.abs(2.0 * a.left + a.width - 2.0 * b.left - b.width) < a.width + b.width) { | ||
302 | if (Math.abs(2.0 * a.top + a.height - 2.0 * b.top - b.height) < a.height + b.height) { | ||
303 | return true; | ||
304 | } | ||
305 | } | ||
306 | return false; | ||
307 | }, | ||
308 | |||
309 | // Helper function to test if an element overlaps others | ||
310 | hitTest: function(elem) { | ||
311 | // Check elements for overlap one by one, stop and return false as soon as an overlap is found | ||
312 | for (var i = 0, l = this.data.placed_words.length; i < l; i++) { | ||
313 | if (this.overlapping(elem, this.data.placed_words[i])) { | ||
314 | return true; | ||
315 | } | ||
316 | } | ||
317 | return false; | ||
318 | }, | ||
319 | |||
320 | // Initialize the drawing of the whole cloud | ||
321 | drawWordCloud: function() { | ||
322 | var i, l; | ||
323 | |||
324 | this.Xelement.children('[id^="' + this.data.namespace + '"]').remove(); | ||
325 | |||
326 | if (this.word_array.length === 0) { | ||
327 | return; | ||
328 | } | ||
329 | |||
330 | // Make sure every weight is a number before sorting | ||
331 | for (i = 0, l = this.word_array.length; i < l; i++) { | ||
332 | this.word_array[i].weight = parseFloat(this.word_array[i].weight, 10); | ||
333 | } | ||
334 | |||
335 | // Sort word_array from the word with the highest weight to the one with the lowest | ||
336 | this.word_array.sort(function(a, b) { | ||
337 | return b.weight - a.weight; | ||
338 | }); | ||
339 | |||
340 | // Kepp trace of bounds | ||
341 | this.data.max_weight = this.word_array[0].weight; | ||
342 | this.data.min_weight = this.word_array[this.word_array.length - 1].weight; | ||
343 | |||
344 | // Generate colors | ||
345 | this.data.colors = []; | ||
346 | if (this.colorGenerator) { | ||
347 | for (i = 0; i < this.options.steps; i++) { | ||
348 | this.data.colors.push(this.colorGenerator(i + 1)); | ||
349 | } | ||
350 | } | ||
351 | |||
352 | // Generate font sizes | ||
353 | this.data.sizes = []; | ||
354 | if (this.sizeGenerator) { | ||
355 | for (i = 0; i < this.options.steps; i++) { | ||
356 | this.data.sizes.push(this.sizeGenerator(this.options.width, this.options.height, i + 1)); | ||
357 | } | ||
358 | } | ||
359 | |||
360 | // Iterate drawOneWord on every word, immediately or with delay | ||
361 | if (this.options.delay > 0) { | ||
362 | this.drawOneWordDelayed(); | ||
363 | } | ||
364 | else { | ||
365 | for (i = 0, l = this.word_array.length; i < l; i++) { | ||
366 | this.drawOneWord(i, this.word_array[i]); | ||
367 | } | ||
368 | |||
369 | if (typeof this.options.afterCloudRender === 'function') { | ||
370 | this.options.afterCloudRender.call(this.Xelement); | ||
371 | } | ||
372 | } | ||
373 | }, | ||
374 | |||
375 | // Function to draw a word, by moving it in spiral until it finds a suitable empty place | ||
376 | drawOneWord: function(index, word) { | ||
377 | var word_id = this.data.namespace + index, | ||
378 | word_selector = '#' + word_id, | ||
379 | |||
380 | // option.shape == 'elliptic' | ||
381 | angle = this.data.angle, | ||
382 | radius = 0.0, | ||
383 | |||
384 | // option.shape == 'rectangular' | ||
385 | steps_in_direction = 0.0, | ||
386 | quarter_turns = 0.0, | ||
387 | |||
388 | weight = Math.floor(this.options.steps / 2), | ||
389 | word_span, | ||
390 | word_size, | ||
391 | word_style; | ||
392 | |||
393 | // Create word attr object | ||
394 | //word.attr = XjQ.extend({}, word.html, { id: word_id }); | ||
395 | word.attr = XjQ.extend({}, word.html, { id: word_id, group: (word.group ? word.group : "") }); | ||
396 | |||
397 | // Linearly map the original weight to a discrete scale from 1 to 10 | ||
398 | // Only if weights are different | ||
399 | if (this.data.max_weight != this.data.min_weight) { | ||
400 | weight = Math.round((word.weight - this.data.min_weight) * 1.0 * (this.options.steps - 1) / (this.data.max_weight - this.data.min_weight)) + 1; | ||
401 | } | ||
402 | word_span = XjQ('<span>').attr(word.attr); | ||
403 | |||
404 | word_span.addClass('jqcloud-word'); | ||
405 | |||
406 | // Apply class | ||
407 | if (this.options.classPattern) { | ||
408 | word_span.addClass(this.options.classPattern.replace('{n}', weight)); | ||
409 | } | ||
410 | |||
411 | // Apply color | ||
412 | if (this.data.colors.length) { | ||
413 | word_span.css('color', this.data.colors[weight - 1]); | ||
414 | } | ||
415 | |||
416 | // Apply color from word property | ||
417 | if (word.color) { | ||
418 | word_span.css('color', word.color); | ||
419 | } | ||
420 | |||
421 | // Apply size | ||
422 | if (this.data.sizes.length) { | ||
423 | word_span.css('font-size', this.data.sizes[weight - 1]); | ||
424 | } | ||
425 | |||
426 | //Render using template function if provided. | ||
427 | if (this.options.template) { | ||
428 | word_span.html(this.options.template(word)); | ||
429 | } else if (word.link) { | ||
430 | // Append link if word.link attribute was set | ||
431 | // If link is a string, then use it as the link href | ||
432 | if (typeof word.link === 'string') { | ||
433 | word.link = { href: word.link }; | ||
434 | } | ||
435 | |||
436 | if (this.options.encodeURI) { | ||
437 | word.link.href = encodeURI(word.link.href).replace(/'/g, '%27'); | ||
438 | } | ||
439 | |||
440 | word_span.append(XjQ('<a>').attr(word.link).text(word.text)); | ||
441 | } | ||
442 | else { | ||
443 | word_span.text(word.text); | ||
444 | } | ||
445 | |||
446 | // Bind handlers to words | ||
447 | if (word.handlers) { | ||
448 | word_span.on(word.handlers); | ||
449 | } | ||
450 | |||
451 | this.Xelement.append(word_span); | ||
452 | |||
453 | word_size = { | ||
454 | width: word_span.outerWidth(), | ||
455 | height: word_span.outerHeight() | ||
456 | }; | ||
457 | word_size.left = this.options.center.x * this.options.width - word_size.width / 2.0; | ||
458 | word_size.top = this.options.center.y * this.options.height - word_size.height / 2.0; | ||
459 | |||
460 | // Save a reference to the style property, for better performance | ||
461 | word_style = word_span[0].style; | ||
462 | word_style.position = 'absolute'; | ||
463 | word_style.left = word_size.left + 'px'; | ||
464 | word_style.top = word_size.top + 'px'; | ||
465 | |||
466 | while (this.hitTest(word_size)) { | ||
467 | // option shape is 'rectangular' so move the word in a rectangular spiral | ||
468 | if (this.options.shape === 'rectangular') { | ||
469 | steps_in_direction++; | ||
470 | |||
471 | if (steps_in_direction * this.data.step > (1 + Math.floor(quarter_turns / 2.0)) * this.data.step * ((quarter_turns % 4 % 2) === 0 ? 1 : this.data.aspect_ratio)) { | ||
472 | steps_in_direction = 0.0; | ||
473 | quarter_turns++; | ||
474 | } | ||
475 | |||
476 | switch (quarter_turns % 4) { | ||
477 | case 1: | ||
478 | word_size.left += this.data.step * this.data.aspect_ratio + Math.random() * 2.0; | ||
479 | break; | ||
480 | case 2: | ||
481 | word_size.top -= this.data.step + Math.random() * 2.0; | ||
482 | break; | ||
483 | case 3: | ||
484 | word_size.left -= this.data.step * this.data.aspect_ratio + Math.random() * 2.0; | ||
485 | break; | ||
486 | case 0: | ||
487 | word_size.top += this.data.step + Math.random() * 2.0; | ||
488 | break; | ||
489 | } | ||
490 | } | ||
491 | // Default settings: elliptic spiral shape | ||
492 | else { | ||
493 | radius += this.data.step; | ||
494 | angle += (index % 2 === 0 ? 1 : -1) * this.data.step; | ||
495 | |||
496 | word_size.left = this.options.center.x * this.options.width - (word_size.width / 2.0) + (radius * Math.cos(angle)) * this.data.aspect_ratio; | ||
497 | word_size.top = this.options.center.y * this.options.height + radius * Math.sin(angle) - (word_size.height / 2.0); | ||
498 | } | ||
499 | word_style.left = word_size.left + 'px'; | ||
500 | word_style.top = word_size.top + 'px'; | ||
501 | } | ||
502 | |||
503 | // Don't render word if part of it would be outside the container | ||
504 | if (this.options.removeOverflowing && ( | ||
505 | word_size.left < 0 || word_size.top < 0 || | ||
506 | (word_size.left + word_size.width) > this.options.width || | ||
507 | (word_size.top + word_size.height) > this.options.height | ||
508 | ) | ||
509 | ) { | ||
510 | word_span.remove(); | ||
511 | return; | ||
512 | } | ||
513 | |||
514 | // Save position for further usage | ||
515 | this.data.placed_words.push(word_size); | ||
516 | |||
517 | if (typeof word.afterWordRender === 'function') { | ||
518 | word.afterWordRender.call(word_span); | ||
519 | } | ||
520 | }, | ||
521 | |||
522 | // Draw one word then recall the function after a delay | ||
523 | drawOneWordDelayed: function(index) { | ||
524 | index = index || 0; | ||
525 | |||
526 | // if not visible then do not attempt to draw | ||
527 | if (!this.Xelement.is(':visible')) { | ||
528 | this.createTimeout(XjQ.proxy(function() { | ||
529 | this.drawOneWordDelayed(index); | ||
530 | }, this), 10); | ||
531 | |||
532 | return; | ||
533 | } | ||
534 | |||
535 | if (index < this.word_array.length) { | ||
536 | this.drawOneWord(index, this.word_array[index]); | ||
537 | |||
538 | this.createTimeout(XjQ.proxy(function() { | ||
539 | this.drawOneWordDelayed(index + 1); | ||
540 | }, this), this.options.delay); | ||
541 | } | ||
542 | else { | ||
543 | if (typeof this.options.afterCloudRender == 'function') { | ||
544 | this.options.afterCloudRender.call(this.Xelement); | ||
545 | } | ||
546 | } | ||
547 | }, | ||
548 | |||
549 | // Destroy any data and objects added by the plugin | ||
550 | destroy: function() { | ||
551 | if (this.options.autoResize) { | ||
552 | XjQ(window).off('resize.' + this.data.namespace); | ||
553 | } | ||
554 | |||
555 | this.clearTimeouts(); | ||
556 | this.Xelement.removeClass('jqcloud'); | ||
557 | this.Xelement.removeData('jqcloud'); | ||
558 | this.Xelement.children('[id^="' + this.data.namespace + '"]').remove(); | ||
559 | }, | ||
560 | |||
561 | // Update the list of words | ||
562 | update: function(word_array) { | ||
563 | this.word_array = word_array; | ||
564 | this.data.placed_words = []; | ||
565 | |||
566 | this.clearTimeouts(); | ||
567 | this.drawWordCloud(); | ||
568 | }, | ||
569 | |||
570 | resize: function() { | ||
571 | var new_size = { | ||
572 | width: this.Xelement.width(), | ||
573 | height: this.Xelement.height() | ||
574 | }; | ||
575 | |||
576 | if (new_size.width != this.options.width || new_size.height != this.options.height) { | ||
577 | this.options.width = new_size.width; | ||
578 | this.options.height = new_size.height; | ||
579 | this.data.aspect_ratio = this.options.width / this.options.height; | ||
580 | |||
581 | this.update(this.word_array); | ||
582 | } | ||
583 | }, | ||
584 | }; | ||
585 | |||
586 | /* | ||
587 | * Apply throttling to a callback | ||
588 | * @param callback {function} | ||
589 | * @param delay {int} milliseconds | ||
590 | * @param context {object|null} | ||
591 | * @return {function} | ||
592 | */ | ||
593 | function throttle(callback, delay, context) { | ||
594 | var state = { | ||
595 | pid: null, | ||
596 | last: 0 | ||
597 | }; | ||
598 | |||
599 | return function() { | ||
600 | var elapsed = new Date().getTime() - state.last, | ||
601 | args = arguments, | ||
602 | that = this; | ||
603 | |||
604 | function exec() { | ||
605 | state.last = new Date().getTime(); | ||
606 | return callback.apply(context || that, Array.prototype.slice.call(args)); | ||
607 | } | ||
608 | |||
609 | if (elapsed > delay) { | ||
610 | return exec(); | ||
611 | } | ||
612 | else { | ||
613 | clearTimeout(state.pid); | ||
614 | state.pid = setTimeout(exec, delay - elapsed); | ||
615 | } | ||
616 | }; | ||
617 | } | ||
618 | |||
619 | /* | ||
620 | * jQuery plugin | ||
621 | */ | ||
622 | XjQ.fn.jQCloud = function(word_array, option) { | ||
623 | var args = arguments; | ||
624 | |||
625 | return this.each(function() { | ||
626 | var Xthis = XjQ(this), | ||
627 | data = Xthis.data('jqcloud'); | ||
628 | |||
629 | if (!data && word_array === 'destroy') { | ||
630 | // Don't even try to initialize when called with 'destroy' | ||
631 | return; | ||
632 | } | ||
633 | if (!data) { | ||
634 | var options = typeof option === 'object' ? option : {}; | ||
635 | Xthis.data('jqcloud', (data = new jQCloud(this, word_array, options))); | ||
636 | } | ||
637 | else if (typeof word_array === 'string') { | ||
638 | data[word_array].apply(data, Array.prototype.slice.call(args, 1)); | ||
639 | } | ||
640 | }); | ||
641 | }; | ||
642 | |||
643 | XjQ.fn.jQCloud.defaults = { | ||
644 | set: function(options) { | ||
645 | XjQ.extend(true, jQCloud.DEFAULTS, options); | ||
646 | }, | ||
647 | get: function(key) { | ||
648 | var options = jQCloud.DEFAULTS; | ||
649 | if (key) { | ||
650 | options = options[key]; | ||
651 | } | ||
652 | return XjQ.extend(true, {}, options); | ||
653 | } | ||
654 | }; | ||
655 | |||
656 | var jQwords = [ | ||
657 | {text: "Druckvorschau", weight: 9, group: 'Designer', link: 'https://help.formcycle.eu/xwiki/bin/view/Formcycle/'}, | ||
658 | {text: "Link im Formular", weight: 6, group: 'Designer', link: 'https://help.formcycle.eu/xwiki/bin/view/Formcycle/'}, | ||
659 | {text: "Kalenderwidget anpassen", weight: 8, group: 'Designer', link: 'https://help.formcycle.eu/xwiki/bin/view/Formcycle/'}, | ||
660 | {text: "Optionale Daten einer Auswahl mitspeichern (col Attribute)", weight: 4, group: 'Designer', link: 'https://help.formcycle.eu/xwiki/bin/view/Formcycle/'}, | ||
661 | {text: "Aktion vor Absenden ausführen", weight: 5, group: 'Designer', link: 'https://help.formcycle.eu/xwiki/bin/view/Formcycle/'}, | ||
662 | {text: "Absenden ohne Speichern", weight: 9, group: 'Designer', link: 'https://help.formcycle.eu/xwiki/bin/view/Formcycle/'}, | ||
663 | {text: "Eigene Formularfeld-Validatoren (Regex)", weight: 10, group: 'Designer', link: 'https://help.formcycle.eu/xwiki/bin/view/Formcycle/'}, | ||
664 | {text: "Wiederholende Felder (dynamic) im JS adressieren", weight: 10, group: 'Designer', link: 'https://help.formcycle.eu/xwiki/bin/view/Formcycle/'}, | ||
665 | {text: "Events an dynamic Felder anhängen", weight: 9, group: 'Designer', link: 'https://help.formcycle.eu/xwiki/bin/view/Formcycle/'}, | ||
666 | {text: "[Richtext-Editor (Ticket #4227)]", weight: 3, group: 'Designer', link: 'https://help.formcycle.eu/xwiki/bin/view/Formcycle/'}, | ||
667 | {text: "Vorbelegung von Daten im Formular (extern)", weight: 9, group: 'Designer', link: 'https://help.formcycle.eu/xwiki/bin/view/Formcycle/'}, | ||
668 | {text: "intiale Vorbelegung von Daten in Feldern", weight: 9, group: 'Designer', link: 'https://help.formcycle.eu/xwiki/bin/view/Formcycle/'}, | ||
669 | {text: "Formularfelder mit LDAP-Daten vorbelegen (Ticket 3701)", weight: 3, group: 'Designer', link: 'https://help.formcycle.eu/xwiki/bin/view/Formcycle/'}, | ||
670 | {text: "Formulareingaben zurücksetzen", weight: 7, group: 'Designer', link: 'https://help.formcycle.eu/xwiki/bin/view/Formcycle/'}, | ||
671 | {text: "Formulardaten lokal speichern und später wieder laden (Ticket #3964)", weight: 8, group: 'Designer', link: 'https://help.formcycle.eu/xwiki/bin/view/Formcycle/'}, | ||
672 | {text: "Formular zwischenspeichern", weight: 9, group: 'Designer', link: 'https://help.formcycle.eu/xwiki/bin/view/Formcycle/'}, | ||
673 | {text: "Labeltext zur Laufzeit manipulieren (Ticket #3493)", weight: 5, group: 'Designer', link: 'https://help.formcycle.eu/xwiki/bin/view/Formcycle/'}, | ||
674 | {text: "Mehrfachbedingungen im Designer", weight: 7, group: 'Designer', link: 'https://help.formcycle.eu/xwiki/bin/view/Formcycle/'}, | ||
675 | {text: "zusätzliches JS und CSS in allen Formularen", weight: 8, group: 'Designer', link: 'https://help.formcycle.eu/xwiki/bin/view/Formcycle/'}, | ||
676 | {text: "mehrseitige Formulare", weight: 9, group: 'Designer', link: 'https://help.formcycle.eu/xwiki/bin/view/Formcycle/'}, | ||
677 | {text: "responive / mobile Ansicht", weight: 10, group: 'Designer', link: 'https://help.formcycle.eu/xwiki/bin/view/Formcycle/'}, | ||
678 | {text: "andere Schriftart einbinden / Design ändern", weight: 9, group: 'Designer', link: 'https://help.formcycle.eu/xwiki/bin/view/Formcycle/'}, | ||
679 | {text: "Java-Script API", weight: 8, group: 'Designer', link: 'https://help.formcycle.eu/xwiki/bin/view/Formcycle/'}, | ||
680 | |||
681 | {text: "Datenquellen für Auswahllisten hinterlegen", weight: 8, group: 'Datenquellen', link: 'https://help.formcycle.eu/xwiki/bin/view/Formcycle/'}, | ||
682 | {text: "Datenquellen in Auswahllisten anhand von Parametern hinterlegen", weight: 6, group: 'Datenquellen', link: 'https://help.formcycle.eu/xwiki/bin/view/Formcycle/'}, | ||
683 | {text: "Leerer erster Eintrag bei SQL-Datenquelle (Ticket #4068)", weight: 5, group: 'Datenquellen', link: 'https://help.formcycle.eu/xwiki/bin/view/Formcycle/'}, | ||
684 | |||
685 | {text: "Mehrfachbedingungen im Workflow", weight: 8, group: 'Statusverarbeitung', link: 'https://help.formcycle.eu/xwiki/bin/view/Formcycle/'}, | ||
686 | {text: "Automatisiertes Löschen nach bestimmten Zeitraum", weight: 9, group: 'Statusverarbeitung', link: 'https://help.formcycle.eu/xwiki/bin/view/Formcycle/'}, | ||
687 | {text: "Exportmöglichkeiten von Daten", weight: 6, group: 'Statusverarbeitung', link: 'https://help.formcycle.eu/xwiki/bin/view/Formcycle/'}, | ||
688 | {text: "E-Mail Aktionen abhängig von Eingaben (Bedingungen) durchführen", weight: 8, group: 'Statusverarbeitung', link: 'https://help.formcycle.eu/xwiki/bin/view/Formcycle/'}, | ||
689 | {text: "Bedingtes Einblenden von Elementen", weight: 7, group: 'Statusverarbeitung', link: 'https://help.formcycle.eu/xwiki/bin/view/Formcycle/'}, | ||
690 | {text: "Mehrstufigen Workflow (Beispiel)", weight: 8, group: 'Statusverarbeitung', link: 'https://help.formcycle.eu/xwiki/bin/view/Formcycle/'}, | ||
691 | {text: "Statuswechsel", weight: 10, group: 'Statusverarbeitung', link: 'https://help.formcycle.eu/xwiki/bin/view/Formcycle/'}, | ||
692 | {text: "Vorgangs-ID im Druck (Word-Fill) anzeigen (Ticket #3813)", weight: 5, group: 'Statusverarbeitung', link: 'https://help.formcycle.eu/xwiki/bin/view/Formcycle/'}, | ||
693 | {text: "iCal Datei erzeugen", weight: 3, group: 'Statusverarbeitung', link: 'https://help.formcycle.eu/xwiki/bin/view/Formcycle/'}, | ||
694 | {text: "aktuelles Datum in der Verarbeitung", weight: 6, group: 'Statusverarbeitung', link: 'https://help.formcycle.eu/xwiki/bin/view/Formcycle/'}, | ||
695 | {text: "Laufende Nummer aus Nummernkreis erzeugen (Ticket #3249)", weight: 3, group: 'Statusverarbeitung', link: 'https://help.formcycle.eu/xwiki/bin/view/Formcycle/'}, | ||
696 | {text: "E-Mail-Versand", weight: 10, group: 'Statusverarbeitung', link: 'https://help.formcycle.eu/xwiki/bin/view/Formcycle/'}, | ||
697 | |||
698 | {text: "Migrationsmöglichkeiten in Webseite", weight: 6, group: 'Abschlusseite', link: 'https://help.formcycle.eu/xwiki/bin/view/Formcycle/'}, | ||
699 | {text: "Abschlussseite in Webseite anzeigen (inline)", weight: 5, group: 'Abschlusseite', link: 'https://help.formcycle.eu/xwiki/bin/view/Formcycle/'}, | ||
700 | {text: "Generierte Dateien auf Abschlussseite anzeigen", weight: 7, group: 'Abschlusseite', link: 'https://help.formcycle.eu/xwiki/bin/view/Formcycle/'}, | ||
701 | {text: "Benutzerdefinierte Abschlussseite", weight: 9, group: 'Abschlusseite', link: 'https://help.formcycle.eu/xwiki/bin/view/Formcycle/'}, | ||
702 | {text: "Referenznummer (Ticket #3866)", weight: 5, group: 'Abschlusseite', link: 'https://help.formcycle.eu/xwiki/bin/view/Formcycle/'}, | ||
703 | |||
704 | {text: "Vorgänge löschen", weight: 9, group: 'Posteingang', link: 'https://help.formcycle.eu/xwiki/bin/view/Formcycle/'}, | ||
705 | {text: "Filtermöglichkeiten", weight: 8, group: 'Posteingang', link: 'https://help.formcycle.eu/xwiki/bin/view/Formcycle/'}, | ||
706 | {text: "Stauswechsel im Postfach ermöglichen (notwendige Einstellungen)", weight: 6.5, group: 'Posteingang', link: 'https://help.formcycle.eu/xwiki/bin/view/Formcycle/'}, | ||
707 | {text: "Postfach exportieren", weight: 7, group: 'Posteingang', link: 'https://help.formcycle.eu/xwiki/bin/view/Formcycle/'}, | ||
708 | {text: "Berechtigungen/Sichtbarkeiten für Benutzer festlegen", weight: 6, group: 'Posteingang', link: 'https://help.formcycle.eu/xwiki/bin/view/Formcycle/'}, | ||
709 | |||
710 | {text: "Update FORMCYCLE", weight: 4, group: 'Anderes', link: 'https://help.formcycle.eu/xwiki/bin/view/Formcycle/'}, | ||
711 | {text: "Zugriffseinschränkung - Möglichkeiten", weight: 3, group: 'Anderes', link: 'https://help.formcycle.eu/xwiki/bin/view/Formcycle/'}, | ||
712 | {text: "I-Frame automatisch Höhe anpassen", weight: 5, group: 'Anderes', link: 'https://help.formcycle.eu/xwiki/bin/view/Formcycle/'}, | ||
713 | {text: "Daten aus Formular werden nicht gespeichert (Disablede Felder)", weight: 6, group: 'Anderes', link: 'https://help.formcycle.eu/xwiki/bin/view/Formcycle/'}, | ||
714 | {text: "Double Opt-In", weight: 7, group: 'Anderes', link: 'https://help.formcycle.eu/xwiki/bin/view/Formcycle/UserInterface/MyForms/DoubleOptIn/'}, | ||
715 | {text: "[Übersicht von Lösungen bei Problemen mit z.B. DB (Ticket #3714, #3057)]", weight: 6, group: 'Anderes', link: 'https://help.formcycle.eu/xwiki/bin/view/Formcycle/'}, | ||
716 | {text: "[Tomcat Zugriff HTTPS - Zertifikat-Einrichtung (Ticket #3295)]", weight: 5, group: 'Anderes', link: 'https://help.formcycle.eu/xwiki/bin/view/Formcycle/'}, | ||
717 | {text: "Beispiele für Print CSS / Erläuterung was das PDF Print Plugin macht", weight: 7, group: 'Anderes', link: 'https://help.formcycle.eu/xwiki/bin/view/Formcycle/'}, | ||
718 | ]; | ||
719 | ##http://mistic100.github.io/jQCloud/demo.html#handlers | ||
720 | /*XjQ('#jQArea').jQCloud(jQwords, { | ||
721 | classPattern: null, | ||
722 | colors: ["#176694", "#3480AD", "#5398c1", "#76b2d6", "#7ca2b9", "#889fad", "#8e979c", "#929596", "#babbbb"], | ||
723 | fontSize: ['16px','15px','15px','14px','14px','13px','13px','12px','12px'], | ||
724 | //width: 500, | ||
725 | height: 500 | ||
726 | });*/ | ||
727 | |||
728 | var jQButtons = XjQ('.jQButton'); | ||
729 | |||
730 | jQButtons.click(function() { | ||
731 | if (XjQ(this).attr('active') == 'true') { | ||
732 | XjQ('#jQArea').children('span[group="'+XjQ(this).attr('group')+'"]').each(jQTagInvisible); | ||
733 | XjQ(this).attr('active', 'false'); | ||
734 | } else { | ||
735 | XjQ('#jQArea').children('span[group="'+XjQ(this).attr('group')+'"]').each(jQTagVisible); | ||
736 | XjQ(this).attr('active', 'true'); | ||
737 | } | ||
738 | }); | ||
739 | function jQTagVisible() { | ||
740 | XjQ(this).css('display', 'block'); | ||
741 | } | ||
742 | function jQTagInvisible() { | ||
743 | XjQ(this).css('display', 'none'); | ||
744 | } | ||
745 | |||
746 | jQButtons.hover(function() { | ||
747 | console.log("hover",XjQ(this)); | ||
748 | XjQ('#jQArea').children('span[group="'+XjQ(this).attr('group')+'"]').each(jQTagHighlighted); | ||
749 | }, function() { | ||
750 | console.log("unhover",XjQ(this)); | ||
751 | XjQ('#jQArea').children('span[group="'+XjQ(this).attr('group')+'"]').each(jQTagNotHighlighted); | ||
752 | }); | ||
753 | function jQTagHighlighted() { | ||
754 | XjQ(this).addClass('jqHighlight'); | ||
755 | } | ||
756 | function jQTagNotHighlighted() { | ||
757 | XjQ(this).removeClass('jqHighlight'); | ||
758 | } | ||
759 | }); | ||
760 | </script> | ||
761 | <!-- | ||
762 | <div class="row"> | ||
763 | <div class="d-none d-md-block col-lg-12 card-main"> | ||
764 | <div class="well" > | ||
765 | <div id="jQButtons"> | ||
766 | <div id="jQBtn1" class="jQButton" group="Designer" active="true"><span class="jQButton-icon"></span> Designer</div> | ||
767 | <div id="jQBtn1" class="jQButton" group="Datenquellen" active="true"><span class="jQButton-icon"></span> Datenquellen</div> | ||
768 | <div id="jQBtn1" class="jQButton" group="Statusverarbeitung" active="true"><span class="jQButton-icon"></span> Statusverarbeitung</div> | ||
769 | <div id="jQBtn1" class="jQButton" group="Abschlusseite" active="true"><span class="jQButton-icon"></span> Abschlusseite</div> | ||
770 | <div id="jQBtn1" class="jQButton" group="Posteingang" active="true"><span class="jQButton-icon"></span> Posteingang</div> | ||
771 | <div id="jQBtn1" class="jQButton" group="Anderes" active="true"><span class="jQButton-icon"></span> Anderes</div> | ||
772 | </div> | ||
773 | <div id="jQArea"> | ||
774 | </div> | ||
775 | </div> | ||
776 | </div> | ||
777 | </div> | ||
778 | --> | ||
779 | {{/html}} | ||
780 | {{/velocity}} | ||
781 | |||
782 |