Wiki source code of Icon Picker
Version 5.1 by Thomas Coelho (local) on 2024/12/17 09:49
Show last authors
author | version | line-number | content |
---|---|---|---|
1 | {{velocity}} | ||
2 | ########################### | ||
3 | ## DATA: ICON THEMES | ||
4 | ########################### | ||
5 | #if ($request.action == 'data_iconthemes') | ||
6 | #set ($map = {}) | ||
7 | #set ($discard = $map.put('iconThemes', $services.icon.iconSetNames)) | ||
8 | #set ($discard = $map.put('currentIconTheme', $services.icon.currentIconSetName)) | ||
9 | #jsonResponse($map) | ||
10 | ########################### | ||
11 | ## DATA: ICONS | ||
12 | ########################### | ||
13 | #elseif ($request.action == 'data_icons') | ||
14 | #set ($icons = []) | ||
15 | #set ($iconTheme = $request.iconTheme) | ||
16 | #set ($xwikiIcons = $collectiontool.sort($services.icon.getIconNames($iconTheme))) | ||
17 | #set ($iconNamePrefix = $request.query.toLowerCase()) | ||
18 | #foreach ($xwikiIcon in $xwikiIcons) | ||
19 | #if ("$!iconNamePrefix" == '' || $xwikiIcon.startsWith($iconNamePrefix)) | ||
20 | #set ($discard = $icons.add({ | ||
21 | 'name': $xwikiIcon, | ||
22 | 'render': $services.icon.renderHTML($xwikiIcon, $iconTheme), | ||
23 | 'metadata': $services.icon.getMetaData($xwikiIcon, $iconTheme) | ||
24 | })) | ||
25 | #end | ||
26 | #end | ||
27 | #jsonResponse($icons) | ||
28 | #else | ||
29 | = Presentation = | ||
30 | The Icon Picker is a jQuery plugin written by XWiki to help user selecting an icon. See [[IconPickerMacro]] for using this picker easily. If you want to use it manually, read the following. | ||
31 | |||
32 | == Example == | ||
33 | With Velocity and HTML: | ||
34 | |||
35 | {{code language="none"}} | ||
36 | // Enable the CSS of the picker: | ||
37 | \#set(\$discard = \$xwiki.ssx.use('IconThemesCode.IconPicker')) | ||
38 | |||
39 | // JavaScript code: | ||
40 | <script> | ||
41 | |||
42 | // Configure requirejs to load the picker code | ||
43 | require.config({ | ||
44 | paths: { | ||
45 | 'xwiki-icon-picker': '\$xwiki.getURL($services.model.createDocumentReference('', 'IconThemesCode', 'IconPicker'), 'jsx', "minify=$!request.minify")' | ||
46 | } | ||
47 | }); | ||
48 | |||
49 | // Require jquery and the icon picker | ||
50 | require(['jquery', 'xwiki-icon-picker'], function($) { | ||
51 | // Here you can bind the picker to some elements. | ||
52 | // Examples: | ||
53 | $('#someElement').xwikiIconPicker(); // apply the picker to the field #someElement | ||
54 | $('#someElement').xwikiIconPicker({prefix: 'image:icon:'}); // change the prefix inserted before the icon name | ||
55 | }); | ||
56 | |||
57 | </script> | ||
58 | {{/code}} | ||
59 | #end | ||
60 | {{/velocity}} |