Merge pull request #20634 from nextcloud/legacy-avatar-placeholder

Generate legacy image placeholder text by taking first letters

core/js/tests/specs/jquery.placeholderSpec.js

@@ -0,0 +1,43 @@
+/**
+ * Copyright (c) 2019 Serhii Shliakhov <shlyakhov.up@gmail.com>
+ *
+ * This file is licensed under the Affero General Public License version 3
+ * or later.
+ *
+ * See the COPYING-README file.
+ *
+ */
+
+describe('jquery.placeholder tests', function() {
+
+	var $div;
+
+	beforeEach(function() {
+		$('#testArea').append($('<div id="placeholderdiv">'));
+		$div = $('#placeholderdiv');
+	});
+
+	afterEach(function() {
+		$div.remove();
+	});
+
+	describe('placeholder text', function() {
+		it('shows one first letter if one word in a input text', function() {
+			spyOn($div, 'html');
+			$div.imageplaceholder('Seed', 'Name')
+			expect($div.html).toHaveBeenCalledWith('N');
+		});
+
+		it('shows two first letters if two words in a input text', function() {
+			spyOn($div, 'html');
+			$div.imageplaceholder('Seed', 'First Second')
+			expect($div.html).toHaveBeenCalledWith('FS');
+		});
+
+		it('shows two first letters if more then two words in a input text', function() {
+			spyOn($div, 'html');
+			$div.imageplaceholder('Seed', 'First Second Middle')
+			expect($div.html).toHaveBeenCalledWith('FS');
+		});
+	});
+});

core/src/jquery/placeholder.js

@@ -158,7 +158,8 @@ $.fn.imageplaceholder = function(seed, text, size) {
 	this.css('font-size', (height * 0.55) + 'px')
 
 	if (seed !== null && seed.length) {
-		this.html(text[0].toUpperCase())
+		var placeholderText = text.split(' ', 2).map((word) => word[0].toUpperCase()).join('')
+		this.html(placeholderText);
 	}
 }