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

Jump to any page in the wiki with Ctrl+G or Meta+G.
See more shortcuts.

Need help?

If you need help with XWiki you can contact: