mirror of
https://github.com/flarum/core.git
synced 2025-07-25 18:51:40 +02:00
Clean up user avatar/color generation
This commit is contained in:
@@ -1,57 +1,22 @@
|
|||||||
import Ember from 'ember';
|
import Ember from 'ember';
|
||||||
|
|
||||||
function hsvToRgb(h, s, v) {
|
|
||||||
var r, g, b, i, f, p, q, t;
|
|
||||||
if (h && s === undefined && v === undefined) {
|
|
||||||
s = h.s; v = h.v; h = h.h;
|
|
||||||
}
|
|
||||||
i = Math.floor(h * 6);
|
|
||||||
f = h * 6 - i;
|
|
||||||
p = v * (1 - s);
|
|
||||||
q = v * (1 - f * s);
|
|
||||||
t = v * (1 - (1 - f) * s);
|
|
||||||
switch (i % 6) {
|
|
||||||
case 0: r = v; g = t; b = p; break;
|
|
||||||
case 1: r = q; g = v; b = p; break;
|
|
||||||
case 2: r = p; g = v; b = t; break;
|
|
||||||
case 3: r = p; g = q; b = v; break;
|
|
||||||
case 4: r = t; g = p; b = v; break;
|
|
||||||
case 5: r = v; g = p; b = q; break;
|
|
||||||
}
|
|
||||||
return {
|
|
||||||
r: Math.floor(r * 255),
|
|
||||||
g: Math.floor(g * 255),
|
|
||||||
b: Math.floor(b * 255)
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Ember.Handlebars.makeBoundHelper(function(user, options) {
|
export default Ember.Handlebars.makeBoundHelper(function(user, options) {
|
||||||
if (!user) {
|
var attributes = 'class="avatar '+options.hash.class+'"';
|
||||||
return;
|
var content = '';
|
||||||
|
|
||||||
|
if (user) {
|
||||||
|
var username = user.get('username') || '?';
|
||||||
|
attributes += ' title="'+Ember.Handlebars.Utils.escapeExpression(username)+'"';
|
||||||
|
|
||||||
|
var avatarUrl = user.get('avatarUrl');
|
||||||
|
if (avatarUrl) {
|
||||||
|
return new Ember.Handlebars.SafeString('<img src="'+avatarUrl+'" '+attributes+'>');
|
||||||
}
|
}
|
||||||
|
|
||||||
// var number;
|
content = username.charAt(0).toUpperCase();
|
||||||
// if (number = user.get('avatarNumber')) {
|
attributes += ' style="background:'+user.get('color')+'"';
|
||||||
// number = number + '';
|
}
|
||||||
// var filename = number.length >= 3 ? number : new Array(3 - number.length + 1).join('0') + number;
|
|
||||||
// return new Ember.Handlebars.SafeString('<img src="/packages/flarum/core/avatars/'+filename+'.jpg" class="avatar '+options.hash.class+'">');
|
|
||||||
// }
|
|
||||||
|
|
||||||
var username = user.get('username');
|
return new Ember.Handlebars.SafeString('<span '+attributes+'>'+content+'</span>');
|
||||||
if (!username) {
|
|
||||||
username = '?';
|
|
||||||
}
|
|
||||||
|
|
||||||
var letter = username.charAt(0).toUpperCase();
|
|
||||||
|
|
||||||
var num = 0;
|
|
||||||
for (var i = 0; i < username.length; i++) {
|
|
||||||
num += username.charCodeAt(i) * 13;
|
|
||||||
}
|
|
||||||
|
|
||||||
var hue = num % 360;
|
|
||||||
var rgb = hsvToRgb(hue / 360, 100 / 255, 200 / 255);
|
|
||||||
var bg = ''+rgb.r.toString(16)+rgb.g.toString(16)+rgb.b.toString(16);
|
|
||||||
return new Ember.Handlebars.SafeString('<span class="avatar '+options.hash.class+'" style="background:#'+bg+'" title="'+username+'">'+letter+'</span>');
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@@ -1,5 +1,7 @@
|
|||||||
import DS from 'ember-data';
|
import DS from 'ember-data';
|
||||||
|
|
||||||
|
import stringToColor from 'flarum/utils/string-to-color';
|
||||||
|
|
||||||
export default DS.Model.extend({
|
export default DS.Model.extend({
|
||||||
username: DS.attr('string'),
|
username: DS.attr('string'),
|
||||||
email: DS.attr('string'),
|
email: DS.attr('string'),
|
||||||
@@ -16,5 +18,9 @@ export default DS.Model.extend({
|
|||||||
postsCount: DS.attr('number'),
|
postsCount: DS.attr('number'),
|
||||||
|
|
||||||
canEdit: DS.attr('boolean'),
|
canEdit: DS.attr('boolean'),
|
||||||
canDelete: DS.attr('boolean')
|
canDelete: DS.attr('boolean'),
|
||||||
|
|
||||||
|
color: Ember.computed('username', function() {
|
||||||
|
return '#'+stringToHex(this.get('username'));
|
||||||
|
})
|
||||||
});
|
});
|
||||||
|
36
ember/app/utils/string-to-color.js
Normal file
36
ember/app/utils/string-to-color.js
Normal file
@@ -0,0 +1,36 @@
|
|||||||
|
import Ember from 'ember';
|
||||||
|
|
||||||
|
function hsvToRgb(h, s, v) {
|
||||||
|
var r, g, b, i, f, p, q, t;
|
||||||
|
if (h && s === undefined && v === undefined) {
|
||||||
|
s = h.s; v = h.v; h = h.h;
|
||||||
|
}
|
||||||
|
i = Math.floor(h * 6);
|
||||||
|
f = h * 6 - i;
|
||||||
|
p = v * (1 - s);
|
||||||
|
q = v * (1 - f * s);
|
||||||
|
t = v * (1 - (1 - f) * s);
|
||||||
|
switch (i % 6) {
|
||||||
|
case 0: r = v; g = t; b = p; break;
|
||||||
|
case 1: r = q; g = v; b = p; break;
|
||||||
|
case 2: r = p; g = v; b = t; break;
|
||||||
|
case 3: r = p; g = q; b = v; break;
|
||||||
|
case 4: r = t; g = p; b = v; break;
|
||||||
|
case 5: r = v; g = p; b = q; break;
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
r: Math.floor(r * 255),
|
||||||
|
g: Math.floor(g * 255),
|
||||||
|
b: Math.floor(b * 255)
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function(string) {
|
||||||
|
var num = 0;
|
||||||
|
for (var i = 0; i < string.length; i++) {
|
||||||
|
num += string.charCodeAt(i);
|
||||||
|
}
|
||||||
|
var hue = num % 360;
|
||||||
|
var rgb = hsvToRgb(hue / 360, 100 / 255, 200 / 255);
|
||||||
|
return ''+rgb.r.toString(16)+rgb.g.toString(16)+rgb.b.toString(16);
|
||||||
|
};
|
Reference in New Issue
Block a user