Changes for page Icon Picker Macro

Last modified by superadmin on 2017/11/28 14:52
From empty
To version 1.1
edited by superadmin
on 2017/11/28 14:52
Change comment: Install extension [org.xwiki.platform:xwiki-platform-icon-ui/9.9]

Summary

Details

Page properties
Title
... ... @@ -1,0 +1,1 @@
1 +Icon Picker Macro
Parent
... ... @@ -1,0 +1,1 @@
1 +IconThemes.WebHome
Author
... ... @@ -1,1 +1,1 @@
1 -XWiki.XWikiGuest
1 +xwiki:XWiki.superadmin
Hidden
... ... @@ -1,1 +1,1 @@
1 -false
1 +true
Content
... ... @@ -1,0 +1,25 @@
1 += Usage =
2 +{{code}}
3 +{{iconPicker id="" class="" prefix="" /}}
4 +{{/code}}
5 +
6 +**Where:**
7 +|=id (optional)|DOM id of the input field where the picker will apply
8 +|=class (optional)|CSS class of inputs where the picker will apply
9 +|=prefix (optional)|Prefix to add before the name of the icon in the input field (default: "{{{image:icon:}}}")
10 +== Live example ==
11 +{{code}}
12 +{{html}}
13 + <p>Field 1: <input type="text" id="myPicker" /></p>
14 + <p>Field 2: <input type="text" class="fieldWithPicker" /></p>
15 +{{/html}}
16 +
17 +{{iconPicker id="myPicker" class="fieldWithPicker" prefix="icon:" /}}
18 +{{/code}}
19 +== Play with it ==
20 +{{html}}
21 + <p>Field 1: <input type="text" id="myPicker" /></p>
22 + <p>Field 2: <input type="text" class="fieldWithPicker" /></p>
23 +{{/html}}
24 +
25 +{{iconPicker id="myPicker" class="fieldWithPicker" prefix="icon:" /}}
XWiki.WikiMacroClass[0]
Macro code
... ... @@ -1,0 +1,33 @@
1 +{{velocity output="false"}}
2 + $xwiki.ssx.use('IconThemesCode.IconPicker')
3 + ## The icons themes may need some SSX, so we ask for a rendering of an icon of each icon theme, to be able to display
4 + ## all icon themes in the picker
5 + ## ToDo: since it is a bit hacky, a better system would be to dynamically load the needed SSX on demand
6 + #foreach($iconSetName in $services.icon.iconSetNames)
7 + $services.icon.render('wiki', $iconSetName)
8 + #end
9 +{{/velocity}}
10 +
11 +{{velocity}}
12 +{{html clean="false"}}
13 +<script language="javascript">
14 + require.config({
15 + paths: {
16 + 'xwiki-icon-picker': '$xwiki.getURL($services.model.createDocumentReference('', 'IconThemesCode', 'IconPicker'), 'jsx', "minify=$!{escapetool.url($request.minify)}")'
17 + }
18 + });
19 + require(['jquery', 'xwiki-icon-picker'], function($) {
20 + var options = {};
21 + #if($xcontext.macro.params.parameterNames.contains('prefix'))
22 + options['prefix'] = '$escapetool.javascript($xcontext.macro.params.prefix)';
23 + #end
24 + #if("$!xcontext.macro.params.id" != '')
25 + $('#${xcontext.macro.params.id}').xwikiIconPicker(options);
26 + #end
27 + #if("$!xcontext.macro.params.get('class')" != '')
28 + $('.${xcontext.macro.params.get('class')}').xwikiIconPicker(options);
29 + #end
30 + });
31 +</script>
32 +{{/html}}
33 +{{/velocity}}
Macro content type
... ... @@ -1,0 +1,1 @@
1 +No content
Default category
... ... @@ -1,0 +1,1 @@
1 +Development
Macro description
... ... @@ -1,0 +1,1 @@
1 +Select an icon within the XWiki icon set.
Macro id
... ... @@ -1,0 +1,1 @@
1 +iconPicker
Macro name
... ... @@ -1,0 +1,1 @@
1 +Icon Picker
Supports inline mode
... ... @@ -1,0 +1,1 @@
1 +Yes
Macro visibility
... ... @@ -1,0 +1,1 @@
1 +Current Wiki
XWiki.WikiMacroParameterClass[0]
Parameter description
... ... @@ -1,0 +1,1 @@
1 +DOM id of the input field where the picker will apply
Parameter mandatory
... ... @@ -1,0 +1,1 @@
1 +No
Parameter name
... ... @@ -1,0 +1,1 @@
1 +id
XWiki.WikiMacroParameterClass[1]
Parameter description
... ... @@ -1,0 +1,1 @@
1 +CSS class of inputs where the picker will apply
Parameter mandatory
... ... @@ -1,0 +1,1 @@
1 +No
Parameter name
... ... @@ -1,0 +1,1 @@
1 +class
XWiki.WikiMacroParameterClass[2]
Parameter description
... ... @@ -1,0 +1,1 @@
1 +Prefix to add before the name of the icon in the input field (default: "image:icon:")
Parameter mandatory
... ... @@ -1,0 +1,1 @@
1 +No
Parameter name
... ... @@ -1,0 +1,1 @@
1 +prefix

Tips

You can click on the arrows next to the breadcrumb elements to quickly navigate to sibling and children pages.

Need help?

If you need help with XWiki you can contact: