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