Änderungen von Dokument Icon Picker

Zusammenfassung

• Seiteneigenschaften (1 geändert, 0 hinzugefügt, 0 gelöscht)
• Objekte (2 geändert, 0 hinzugefügt, 0 gelöscht)
  • XWiki.JavaScriptExtension[0]
  • XWiki.StyleSheetExtension[0]

Details

Seiteneigenschaften

Inhalt

...	...	@@ -1,29 +1,30 @@
1	1	{{velocity}}
2	2	###########################
3		-## GLOBALS
4		-###########################
5		-#set($xwikiIcons = ['home', 'wiki', 'space', 'page', 'check', 'add', 'anchor', 'terminal', 'list', 'branch', 'down', 'up', 'left', 'right', 'arrows', 'repeat', 'undo', 'refresh', 'rotate-left', 'rotate-right', 'switch', 'random', 'attach', 'shopping-cart', 'bell', 'trash', 'bomb', 'book', 'cube', 'cubes', 'briefcase', 'bug', 'building', 'caret-down', 'caret-up', 'caret-right', 'calculator', 'calendar', 'camera', 'remove', 'cross', 'car', 'truck', 'chart-bar', 'chart-organisation', 'cloud', 'clock', 'cog', 'comment', 'comments', 'desktop', 'contrast', 'eject', 'step-forward', 'step-backward', 'fast-forward', 'backward', 'play', 'pause', 'stop', 'gamepad', 'credit-card', 'coffee', 'cut', 'database', 'delete', 'floppy-disk', 'glass', 'drive', 'envelope', 'warning', 'error', 'info', 'eye', 'rss', 'female', 'male', 'film', 'flag', 'search', 'search-plus', 'search-minus', 'folder', 'user', 'group', 'heart', 'question', 'image', 'key', 'keyboard', 'lightbulb', 'link', 'unlink', 'lock', 'unlock', 'money', 'dollar', 'euro', 'gbp', 'yen', 'music', 'file', 'file-white', 'file-pdf', 'file-code', 'file-archive', 'file-word', 'file-excel', 'file-powerpoint', 'file-text', 'paste', 'pencil', 'print', 'shield', 'certificate', 'volume-up', 'volume-down', 'volume-off', 'soccer', 'star', 'table', 'phone', 'font', 'bold', 'italic', 'strikethrough', 'subscript', 'superscript', 'underline', 'align-center', 'align-justify', 'align-left', 'align-right', 'columns', 'indent-left', 'indent-right', 'list-bullets', 'list-numbers', 'sun', 'world', 'wrench'])
6		-###########################
7	7	## DATA: ICON THEMES
8	8	###########################
9		-#if($request.action == 'data_iconthemes')
10		- #set($map = {})
11		- #set($discard = $map.put('iconThemes', $services.icon.iconSetNames))
12		- #set($discard = $map.put('currentIconTheme', $services.icon.currentIconSetName))
13		- $jsontool.serialize($map)
	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)
14	14	###########################
15	15	## DATA: ICONS
16	16	###########################
17		-#elseif($request.action == 'data_icons')
18		- #set($icons = [])
19		- #set($iconTheme = $request.iconTheme)
20		- #foreach($xwikiIcon in $xwikiIcons)
21		- #set($icon = {})
22		- #set($discard = $icon.put('name', $xwikiIcon))
23		- #set($discard = $icon.put('render', $services.icon.renderHTML($xwikiIcon, $iconTheme)))
24		- #set($discard = $icons.add($icon))
	13	+#elseif ($request.action == 'data_icons')
	14	+ #set ($icons = [])
	15	+ #set ($iconTheme = $request.iconTheme)
	16	+ #set ($xwikiIcons = $collectiontool.sort($services.icon.getIconNames($iconTheme)))
	17	+ #set ($iconNamePrefix = $request.query.toLowerCase())
	18	+ #foreach ($xwikiIcon in $xwikiIcons)
	19	+ #if ("$!iconNamePrefix" == '' || $xwikiIcon.startsWith($iconNamePrefix))
	20	+ #set ($discard = $icons.add({
	21	+ 'name': $xwikiIcon,
	22	+ 'render': $services.icon.renderHTML($xwikiIcon, $iconTheme),
	23	+ 'metadata': $services.icon.getMetaData($xwikiIcon, $iconTheme)
	24	+ }))
	25	+ #end
25	25	#end
26		- $jsontool.serialize($icons)
	27	+ #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.

XWiki.JavaScriptExtension[0]

Code

...	...	@@ -55,23 +55,37 @@
55	55	* Display the list of icons
56	56	*/
57	57	var displayList = function(iconTheme) {
	58	+ // Filter the icons we display based on the value of the input field.
	59	+ let selectedIconName = '';
	60	+ if (currentInput.data('xwikiIconPickerSettings') !== '') {
	61	+ selectedIconName = currentInput[0].value.replace(currentInput.data('xwikiIconPickerSettings').prefix, '');
	62	+ }
58	58	// For each icon
59	59	for (var i=0; i < iconTheme.length; ++i) {
60	60	// Display the icon
61		- var displayer = $(document.createElement('div'));
62		- iconListSection.append(displayer);
63		- displayer.addClass('xwikiIconPickerIcon');
64		- var imageDiv = $(document.createElement('div'));
65		- imageDiv.addClass('xwikiIconPickerIconImage').html(iconTheme[i].render);
66		- displayer.append(imageDiv);
67		- var iconNameDiv = $(document.createElement('div'));
68		- iconNameDiv.addClass('xwikiIconPickerIconName').text(iconTheme[i].name);
69		- displayer.append(iconNameDiv);
70		- // Change the input value when the icon is clicked
71		- displayer.click(function(event) {
72		- currentInput.val(currentInput.data('xwikiIconPickerSettings').prefix + $(event.currentTarget).children('.xwikiIconPickerIconName').text() );
73		- closePicker();
74		- });
	66	+ if (selectedIconName === '' || iconTheme[i].name.includes(selectedIconName)) {
	67	+ var displayer = $(document.createElement('button'));
	68	+ displayer.addClass('btn');
	69	+ iconListSection.append(displayer);
	70	+ displayer.addClass('xwikiIconPickerIcon');
	71	+ var imageDiv = $(document.createElement('p'));
	72	+ imageDiv.addClass('xwikiIconPickerIconImage').html(iconTheme[i].render);
	73	+ displayer.append(imageDiv);
	74	+ var iconNameSpan = $(document.createElement('p'));
	75	+ // Usually, the icon name is just one "word" in snakecase. e.g. arrow_refresh_small
	76	+ // We add Line Break Opportunity elements in the middle of this word so that it's cut into nice to read
	77	+ // substrings.
	78	+ let iconNameWithLineBreakOpportunities = iconTheme[i].name
	79	+ .replaceAll("-","<wbr/>-")
	80	+ .replaceAll("_","<wbr/>_");
	81	+ iconNameSpan.addClass('xwikiIconPickerIconName').html(iconNameWithLineBreakOpportunities);
	82	+ displayer.append(iconNameSpan);
	83	+ // Change the input value when the icon is clicked
	84	+ displayer.on('click', function(event) {
	85	+ currentInput.val(currentInput.data('xwikiIconPickerSettings').prefix + $(event.currentTarget).children('.xwikiIconPickerIconName').text());
	86	+ closePicker();
	87	+ });
	88	+ }
75	75	}
76	76	}
77	77
...	...	@@ -79,7 +79,7 @@
79	79	* Load the icon list (get the JSON from the server) and display it afterwards
80	80	*/
81	81	var loadIconList = function(iconTheme) {
82		- $.getJSON(getResourceURL('data_icons', 'iconTheme='+iconTheme), function(dataIcons) {
	96	+ $.getJSON(getResourceURL('data_icons', 'iconTheme=' + iconTheme), function(dataIcons) {
83	83	// Put the result in the icons map
84	84	icons[iconTheme] = dataIcons;
85	85	// Display the list
...	...	@@ -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() {
	147	+ iconThemeSelector.on('change', function() {
134	134	currentIconTheme = iconThemeSelector.val();
135	135	// Remove all the displayed icons
136	136	$('.xwikiIconPickerIcon').remove();
...	...	@@ -187,7 +187,7 @@
187	187	}
188	188
189	189	/**
190		- * Create the piccker
	204	+ * Create the picker
191	191	*/
192	192	var createPicker = function (input) {
193	193	// If the picker already exists
...	...	@@ -206,7 +206,7 @@
206	206	xwikiCurrentIconsPicker = $(document.createElement('div'));
207	207	xwikiCurrentIconsPicker.addClass('xwikiIconPickerContainer');
208	208	// Insert the picker in the DOM
209		- $(body).append(xwikiCurrentIconsPicker);
	223	+ xwikiCurrentIconsPicker.insertAfter(currentInput);
210	210	// Set the position
211	211	setPickerPosition();
212	212	// Add the icon list section
...	...	@@ -242,15 +242,34 @@
242	242	loadIconList(currentIconTheme);
243	243	}
244	244	}
245		- // Close the picker when the user press 'escape'.
246		- currentInput.keyup(function (event) {
	259	+ var lastTimeout = 0;
	260	+ var reloadIconList = function () {
	261	+ // Remove all the displayed icons
	262	+ $('.xwikiIconPickerIcon').remove();
	263	+ // Display the new ones. We always reload because the filter results are unrelated.
	264	+ displayList(icons[currentIconTheme]);
	265	+ };
	266	+ currentInput.on('keyup', function(event) {
	267	+ // Close the picker when the user press 'escape'.
247	247	// See: http://stackoverflow.com/questions/1160008/which-keycode-for-escape-key-with-jquery
248	248	if (event.which == 27) {
249	249	closePicker();
	271	+ } else {
	272	+ if (lastTimeout!==0) {
	273	+ clearTimeout(lastTimeout);
	274	+ }
	275	+ lastTimeout = setTimeout(reloadIconList, 500);
250	250	}
251	251	});
	278	+ iconThemeSelector.on('keyup', function(event) {
	279	+ // Close the picker when the user press 'escape'.
	280	+ // See: http://stackoverflow.com/questions/1160008/which-keycode-for-escape-key-with-jquery
	281	+ if (event.which == 27) {
	282	+ closePicker();
	283	+ }
	284	+ });
252	252	}
253		-
	286	+
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		-
	295	+
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) {
	306	+ $(this).on('focusin', function(event) {
274	274	createPicker($(event.currentTarget));
275	275	});
276	276	});
277		-
	310	+
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() {
	313	+ $(window).on('scroll', function() {
281	281	setPickerPosition();
282	282	});
283		-
	316	+
284	284	// Close the picker if the input and the picker itself have lost the focus
285		- $(window).click(function(event) {
	318	+ $(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		-
	324	+
292	292	// Return this object to enable the jQuery chaining
293	293	return this;
294	294	}

XWiki.StyleSheetExtension[0]

Code

...	...	@@ -12,18 +12,26 @@
12	12	.xwikiIconPickerList {
13	13	overflow-y: scroll;
14	14	height: 240px;
	15	+ display: flex;
	16	+ flex-wrap: wrap;
	17	+ gap: .3em;
15	15	}
16	16
	20	+/* Avoid stretching on the Loader element. */
	21	+.xwikiIconPickerList > img {
	22	+ object-fit: contain;
	23	+}
	24	+
17	17	.xwikiIconPickerIcon {
18		- float: left;
19	19	height: 80px;
20	20	width: 100px;
21	21	text-align: center;
22		- border-radius: 4px;
	29	+ border-radius: 7px;
23	23	vertical-align: middle;
24	24	overflow: hidden;
25	25	padding: 10px;
26	26	cursor: pointer;
	34	+ background-color: transparent;
27	27	}
28	28
29	29	.xwikiIconPickerIcon:hover {
...	...	@@ -32,6 +32,7 @@
32	32
33	33	.xwikiIconPickerIconImage {
34	34	font-size: 24px;
	43	+ line-height: 1;
35	35	margin: 0;
36	36	}
37	37
...	...	@@ -39,6 +39,18 @@
39	39	width: 24px;
40	40	}
41	41
	51	+.xwikiIconPickerIcon .xwikiIconPickerIconName {
	52	+ /* We want to limit the number of lines in the name so that it always fit inside the standard button size.
	53	+ The value below is just about twice the line-height. */
	54	+ max-height: 2.9em;
	55	+ /* For the few names that need three lines, we make sure the user can scroll to read the whole name. */
	56	+ overflow-y: scroll;
	57	+ overflow-x: hidden;
	58	+ /* Make sure the name wraps onto multiple lines instead of overflowing. */
	59	+ white-space: pre-wrap;
	60	+ word-break: break-word;
	61	+}
	62	+
42	42	.xwikiIconPickerIconThemeSelector {
43	43	width: 100%;
44	44	background-color: $theme.menuBackgroundColor;