Unique color per nick
This commit is contained in:
parent
cd68d12436
commit
678f6e3c08
|
@ -1,6 +1,6 @@
|
||||||
html,
|
html,
|
||||||
body {
|
body {
|
||||||
font: 12px Consolas, monospace;
|
font: 13px "Consolas", monospace;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
a:focus {
|
a:focus {
|
||||||
|
@ -164,6 +164,7 @@ h2 {
|
||||||
background: #fff;
|
background: #fff;
|
||||||
border-left: 1px solid #ddd;
|
border-left: 1px solid #ddd;
|
||||||
bottom: 30px;
|
bottom: 30px;
|
||||||
|
line-height: 1.4em;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
padding: 4px 0;
|
padding: 4px 0;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
@ -173,20 +174,23 @@ h2 {
|
||||||
}
|
}
|
||||||
#chat .users .user {
|
#chat .users .user {
|
||||||
display: block;
|
display: block;
|
||||||
color: #f00;
|
|
||||||
padding: 0 8px;
|
padding: 0 8px;
|
||||||
}
|
}
|
||||||
#chat .messages {
|
#chat .messages {
|
||||||
bottom: 30px;
|
bottom: 30px;
|
||||||
left: 0;
|
left: 0;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
padding: 4px 8px;
|
padding: 4px 0;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 160px;
|
right: 160px;
|
||||||
top: 43px;
|
top: 43px;
|
||||||
word-wrap: break-word;
|
word-wrap: break-word;
|
||||||
z-index: 0;
|
z-index: 0;
|
||||||
}
|
}
|
||||||
|
#chat .message {
|
||||||
|
line-height: 1.4em;
|
||||||
|
padding: 0 6px;
|
||||||
|
}
|
||||||
#chat .message .time {
|
#chat .message .time {
|
||||||
color: #bbb;
|
color: #bbb;
|
||||||
}
|
}
|
||||||
|
|
|
@ -90,7 +90,7 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="users">
|
<div class="users">
|
||||||
{{#each users}}
|
{{#each users}}
|
||||||
<a href="{{name}}" class="user">
|
<a href="{{name}}" class="user" style="color: {{color name}}">
|
||||||
{{mode}}{{name}}
|
{{mode}}{{name}}
|
||||||
</a>
|
</a>
|
||||||
{{/each}}
|
{{/each}}
|
||||||
|
@ -99,8 +99,8 @@
|
||||||
{{#each messages}}
|
{{#each messages}}
|
||||||
<div class="message {{type}}">
|
<div class="message {{type}}">
|
||||||
<span class="time">{{time}}</span>
|
<span class="time">{{time}}</span>
|
||||||
<a href="{{user}}" class="user">{{mode}}{{user}}</a>
|
<a href="{{user}}" class="user" style="color: {{color user}}">{{mode}}{{user}}</a>
|
||||||
<span class="text">{{type}} {{{autoLink text}}}</span>
|
<span class="text">{{type}} {{{link text}}}</span>
|
||||||
</div>
|
</div>
|
||||||
{{/each}}
|
{{/each}}
|
||||||
</div>
|
</div>
|
||||||
|
@ -114,7 +114,7 @@
|
||||||
|
|
||||||
<script type="text/html" id="user">
|
<script type="text/html" id="user">
|
||||||
{{#users}}
|
{{#users}}
|
||||||
<a href="{{name}}" class="user">
|
<a href="{{name}}" class="user" style="color: {{color name}}">
|
||||||
{{mode}}{{name}}
|
{{mode}}{{name}}
|
||||||
</a>
|
</a>
|
||||||
{{/users}}
|
{{/users}}
|
||||||
|
@ -124,8 +124,8 @@
|
||||||
{{#messages}}
|
{{#messages}}
|
||||||
<div class="message {{type}}">
|
<div class="message {{type}}">
|
||||||
<span class="time">{{time}}</span>
|
<span class="time">{{time}}</span>
|
||||||
<a href="{{user}}" class="user">{{mode}}{{user}}</a>
|
<a href="{{user}}" class="user" style="color: {{color user}}">{{mode}}{{user}}</a>
|
||||||
<span class="text">{{type}} {{{autoLink text}}}</span>
|
<span class="text">{{type}} {{{link text}}}</span>
|
||||||
</div>
|
</div>
|
||||||
{{/messages}}
|
{{/messages}}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -215,9 +215,58 @@ $(function() {
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
|
||||||
Handlebars.registerHelper("autoLink", function(text) {
|
Handlebars.registerHelper("link", function(text) {
|
||||||
var text = Handlebars.Utils.escapeExpression(text);
|
var text = Handlebars.Utils.escapeExpression(text);
|
||||||
return URI.withinString(text, function(url) {
|
return URI.withinString(text, function(url) {
|
||||||
return "<a href='" + url + "' target='_blank'>" + url + "</a>";
|
return "<a href='" + url + "' target='_blank'>" + url + "</a>";
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
Handlebars.registerHelper("color", function(text) {
|
||||||
|
return get_color(text);
|
||||||
|
});
|
||||||
|
|
||||||
|
// colornicks
|
||||||
|
// https://github.com/avidal
|
||||||
|
|
||||||
|
function clean_nick(nick) {
|
||||||
|
// attempts to clean up a nickname
|
||||||
|
// by removing alternate characters from the end
|
||||||
|
// nc_ becomes nc, avidal` becomes avidal
|
||||||
|
|
||||||
|
nick = nick.toLowerCase();
|
||||||
|
|
||||||
|
// typically ` and _ are used on the end alone
|
||||||
|
nick = nick.replace(/[`_]+$/, '');
|
||||||
|
|
||||||
|
// remove |<anything> from the end
|
||||||
|
nick = nick.replace(/|.*$/, '');
|
||||||
|
|
||||||
|
return nick;
|
||||||
|
}
|
||||||
|
|
||||||
|
function hash(nick) {
|
||||||
|
var cleaned = clean_nick(nick);
|
||||||
|
var h = 0;
|
||||||
|
|
||||||
|
for(var i = 0; i < cleaned.length; i++) {
|
||||||
|
h = cleaned.charCodeAt(i) + (h << 6) + (h << 16) - h;
|
||||||
|
}
|
||||||
|
|
||||||
|
return h;
|
||||||
|
}
|
||||||
|
|
||||||
|
function get_color(nick) {
|
||||||
|
var nickhash = hash(nick);
|
||||||
|
|
||||||
|
// get a random value for the hue
|
||||||
|
var h = nickhash % 360;
|
||||||
|
|
||||||
|
var l = 50;
|
||||||
|
var s = 100;
|
||||||
|
|
||||||
|
// playing around with some numbers
|
||||||
|
h = 360 + (h % 40);
|
||||||
|
|
||||||
|
return "hsl(" + h + "," + s + "%," + l + "%)";
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in New Issue