Wiki source code of Icon Picker
Version 2.1 by Benjamin Fischer on 2024/10/07 10:56
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 | #foreach($xwikiIcon in $xwikiIcons) | ||
| 18 | #set($icon = {}) | ||
| 19 | #set($discard = $icon.put('name', $xwikiIcon)) | ||
| 20 | #set($discard = $icon.put('render', $services.icon.renderHTML($xwikiIcon, $iconTheme))) | ||
| 21 | #set($discard = $icon.put('metadata', $services.icon.getMetaData($xwikiIcon, $iconTheme))) | ||
| 22 | #set($discard = $icons.add($icon)) | ||
| 23 | #end | ||
| 24 | #jsonResponse($icons) | ||
| 25 | #else | ||
| 26 | = Presentation = | ||
| 27 | 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. | ||
| 28 | |||
| 29 | == Example == | ||
| 30 | With Velocity and HTML: | ||
| 31 | |||
| 32 | {{code language="none"}} | ||
| 33 | // Enable the CSS of the picker: | ||
| 34 | \#set(\$discard = \$xwiki.ssx.use('IconThemesCode.IconPicker')) | ||
| 35 | |||
| 36 | // JavaScript code: | ||
| 37 | <script> | ||
| 38 | |||
| 39 | // Configure requirejs to load the picker code | ||
| 40 | require.config({ | ||
| 41 | paths: { | ||
| 42 | 'xwiki-icon-picker': '\$xwiki.getURL($services.model.createDocumentReference('', 'IconThemesCode', 'IconPicker'), 'jsx', "minify=$!request.minify")' | ||
| 43 | } | ||
| 44 | }); | ||
| 45 | |||
| 46 | // Require jquery and the icon picker | ||
| 47 | require(['jquery', 'xwiki-icon-picker'], function($) { | ||
| 48 | // Here you can bind the picker to some elements. | ||
| 49 | // Examples: | ||
| 50 | $('#someElement').xwikiIconPicker(); // apply the picker to the field #someElement | ||
| 51 | $('#someElement').xwikiIconPicker({prefix: 'image:icon:'}); // change the prefix inserted before the icon name | ||
| 52 | }); | ||
| 53 | |||
| 54 | </script> | ||
| 55 | {{/code}} | ||
| 56 | #end | ||
| 57 | {{/velocity}} |
