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
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
on 2024/01/16 09:32
Change comment:
Install extension [org.xwiki.platform:xwiki-platform-icon-ui/14.10.13]
Summary
-
Page properties (2 modified, 0 added, 0 removed)
-
Objects (1 modified, 0 added, 0 removed)
Details
- Page properties
-
- Author
-
... ... @@ -1,1 +1,1 @@ 1 -XWiki.teamwire -admin1 +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 (function246 + 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 }