Changes for page Icon Picker

Last modified by teamwire005 on 2025/05/06 08:16

From version 1.1
edited by teamwire-admin
on 2020/08/26 13:09
Change comment: Install extension [org.xwiki.platform:xwiki-platform-icon-ui/11.10.8]
To version 2.1
edited by teamwire004
on 2024/01/16 09:32
Change comment: Install extension [org.xwiki.platform:xwiki-platform-icon-ui/14.10.13]

Summary

Details

Page properties
Author
... ... @@ -1,1 +1,1 @@
1 -XWiki.teamwire-admin
1 +XWiki.teamwire004
Content
... ... @@ -10,7 +10,7 @@
10 10   #set($map = {})
11 11   #set($discard = $map.put('iconThemes', $services.icon.iconSetNames))
12 12   #set($discard = $map.put('currentIconTheme', $services.icon.currentIconSetName))
13 - $jsontool.serialize($map)
13 + #jsonResponse($map)
14 14  ###########################
15 15  ## DATA: ICONS
16 16  ###########################
... ... @@ -23,7 +23,7 @@
23 23   #set($discard = $icon.put('render', $services.icon.renderHTML($xwikiIcon, $iconTheme)))
24 24   #set($discard = $icons.add($icon))
25 25   #end
26 - $jsontool.serialize($icons)
26 + #jsonResponse($icons)
27 27  #else
28 28  = Presentation =
29 29  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.
... ... @@ -36,7 +36,7 @@
36 36  \#set(\$discard = \$xwiki.ssx.use('IconThemesCode.IconPicker'))
37 37  
38 38  // JavaScript code:
39 -<script language="javascript">
39 +<script>
40 40  
41 41  // Configure requirejs to load the picker code
42 42  require.config({
XWiki.JavaScriptExtension[0]
Code
... ... @@ -68,7 +68,7 @@
68 68   iconNameDiv.addClass('xwikiIconPickerIconName').text(iconTheme[i].name);
69 69   displayer.append(iconNameDiv);
70 70   // Change the input value when the icon is clicked
71 - displayer.click(function(event) {
71 + displayer.on('click', function(event) {
72 72   currentInput.val(currentInput.data('xwikiIconPickerSettings').prefix + $(event.currentTarget).children('.xwikiIconPickerIconName').text() );
73 73   closePicker();
74 74   });
... ... @@ -130,7 +130,7 @@
130 130   var createIconThemeSelector = function() {
131 131   iconThemeSelector = $(document.createElement('select'));
132 132   // Change the current icon theme where the selector is used
133 - iconThemeSelector.change(function() {
133 + iconThemeSelector.on('change', function() {
134 134   currentIconTheme = iconThemeSelector.val();
135 135   // Remove all the displayed icons
136 136   $('.xwikiIconPickerIcon').remove();
... ... @@ -243,7 +243,7 @@
243 243   }
244 244   }
245 245   // Close the picker when the user press 'escape'.
246 - currentInput.keyup(function (event) {
246 + currentInput.on('keyup', function(event) {
247 247   // See: http://stackoverflow.com/questions/1160008/which-keycode-for-escape-key-with-jquery
248 248   if (event.which == 27) {
249 249   closePicker();
... ... @@ -250,7 +250,7 @@
250 250   }
251 251   });
252 252   }
253 -
253 +
254 254   /**
255 255   * Create the jQuery plugin
256 256   */
... ... @@ -259,7 +259,7 @@
259 259   var settings = $.extend({
260 260   prefix: 'icon:image:'
261 261   }, options);
262 -
262 +
263 263   // Enable the picker on focus
264 264   this.each(function() {
265 265   var elem = $(this);
... ... @@ -270,25 +270,25 @@
270 270   // Attach the settings to the input
271 271   $(this).data('xwikiIconPickerSettings', settings);
272 272   // Create the picker on focus
273 - $(this).focusin(function(event) {
273 + $(this).on('focusin', function(event) {
274 274   createPicker($(event.currentTarget));
275 275   });
276 276   });
277 -
277 +
278 278   // Because the picker uses the 'fixed' position, we must recompute its position everytime the user scrolls the page
279 279   // Otherwise, the picker would stay in the same position *on the screen* without staying close to the input.
280 - $(window).scroll(function() {
280 + $(window).on('scroll', function() {
281 281   setPickerPosition();
282 282   });
283 -
283 +
284 284   // Close the picker if the input and the picker itself have lost the focus
285 - $(window).click(function(event) {
285 + $(window).on('click', function(event) {
286 286   if (xwikiCurrentIconsPicker && document.activeElement != currentInput[0] &&
287 287   !$.contains(xwikiCurrentIconsPicker[0], document.activeElement)) {
288 288   closePicker();
289 289   }
290 290   });
291 -
291 +
292 292   // Return this object to enable the jQuery chaining
293 293   return this;
294 294   }