Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

change the mask of nickname color for better look, and add parser for message color #15

Merged
merged 5 commits into from Aug 27, 2014
Merged

change the mask of nickname color for better look, and add parser for message color #15

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
c70461a
add a better mask
mmis1000 Aug 26, 2014
27db309
add message color parser
mmis1000 Aug 26, 2014
84a6fdd
use hsl to color nick name
mmis1000 Aug 27, 2014
d3e3f83
fix typo
mmis1000 Aug 27, 2014
18fef1d
comment out debug codes
mmis1000 Aug 27, 2014
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
265 changes: 253 additions & 12 deletions public/applications.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,249 @@
(function(){
setTimeout(function(){
$("ul.logs li").each(function(){
var nickField = $(this).children(".nick");
var colorCode = parseInt(md5(nickField.text()).substring(0,6),16) & 0x7F7F7F;
nickField.css("color","#"+(colorCode < 0x100000 ? '0' : '')+colorCode.toString(16));
})
}, 100);
})()
var parseColor = function() {

var colors = [
"#FFFFFF",
"#000000",
"#000080",
"#008000",

"#ff0000",
"#800040",
"#800080",
"#ff8040",

"#ffff00",
"#80ff00",
"#008000",
"#00ffff",

"#0000ff",
"#FF55FF",
"#808080",
"#C0C0C0"
];

var style = {
2 : {
styles : [
{
key : "font-weight",
value : "bold"
}
]
},
15: {
styles : [
{
key : "background",
value : null
},
{
key : "color",
value : null
},
{
key : "font-style",
value : null
},
{
key : "text-decoration",
value : null
},
{
key : "font-weight",
value : null
}
]
},
22: {
styles:[]
},
29: {
styles : [
{
key : "font-style",
value : "italic"
}
]
},
31: {
styles : [
{
key : "text-decoration",
value : "underline"
}
]
},
3 : function(str){
var temp, color, background,style
style = [];
temp = str.substring(1).split(",")
color = colors[parseInt(temp[0])];
if (color) {
style.push({
key : "color",
value : color
})
}
if (temp[1]) {
background = colors[parseInt(temp[1])];
if (background) {
style.push({
key : "background",
value : background
})
}
}

return {
styles : style
};

}
}

function copyOver(from, to) {
for(var i in from) {
if(from.hasOwnProperty(i)) {
to[i] = from[i];
}
}
}

function wrap(text, styles) {
if (text == null) {
return "";
}
var i
var text2 = "<span style='"
for (i in styles) {
if (styles.hasOwnProperty(i)) {
text2 += i;
text2 += ":";
text2 += styles[i];
text2 += ";";
}
}
text2 += "'>";
text2 += text;
text2 += "</span>";
return text2;
}

var parseColor_ = function(html) {

var html, matchrule, matchrule2, allStyle, temp, text, styles, stylefrag, i;
allStyle = [2, 15, 22, 29, 31, 3];
matchrule = /((?:\u0003\d\d?,\d\d?|\u0003\d\d?|\u0002|\u001d|\u000f|\u0016|\u001f)+)/g;
/* use "html" to prevent break links*/
//html = $(this).html();
temp = html.split(matchrule);
if (temp.length === 1) {
/*no color code, so break it at early at possible*/
return html;
}
for (i = 0; i < temp.length; i++) {
text = temp[i];
if (allStyle.indexOf(text.charCodeAt(0)) < 0) {
continue;
}
styles = {};
matchrule2 = /((?:\u0003\d\d?,\d\d?|\u0003\d\d?|\u0002|\u001d|\u000f|\u0016|\u001f))/g;
fragTemp = matchrule2.exec(text);

if (!fragTemp) {
continue;
}

stylefrag = [];
stylefrag.push(fragTemp[1]);
while (fragTemp = matchrule2.exec(text)) {
stylefrag.push(fragTemp[1]);
}

// extract styles from style frag
stylefrag.forEach(function(el){
var temp2, i
var charCode = el.charCodeAt(0);
if (style[charCode]) {
temp2 = style[charCode]
if (typeof temp2 === "function") {
temp2 = temp2(el);
}
for (i = 0; i< temp2.styles.length; i++) {
styles[temp2.styles[i].key] = temp2.styles[i].value;
}
}
return true;
});
//console.log(JSON.stringify(text));
//console.log(JSON.stringify(stylefrag));
//insert styles into list and remove parsed tag
temp.splice(i, 1, styles);
}



var styleTemp = {};
for (i = 0; i < temp.length; i++) {
if (typeof temp[i] === "object") {
copyOver(temp[i], styleTemp);
copyOver(styleTemp, temp[i]);
}
}

for (i = 0; i < temp.length; i++) {
if (typeof temp[i] === "object") {
temp.splice(i, 2, wrap(temp[i + 1], temp[i]));
}
}

return temp.join('')

};

return parseColor_;
} ();

var getColor = function() {
var cache = {};
function getColor_(str) {
if (cache[str]) {
return cache[str];
}

if (typeof md5 !== "undefined") {
var frag = parseInt(md5(str).substring(0,6), 16);
} else {
var frag = Math.floor(Math.random() * 0xffffff);
console.log('missing md5 support, using random color now!')
}

var h = Math.floor((frag & 0xff0000 >> 16) / 255 * 360);
var s = Math.floor((frag & 0xff00 >> 8) / 255 * 60 + 20);
var l = Math.floor((frag & 0xff) / 255 * 20 + 50);

//convert color with jQuery
var colorCode = $('<span></span>').css("color", "hsl(" + h + "," + s + "%," + l +"%)").css("color");

cache[str] = colorCode;
return colorCode;
}
return getColor_;
}();

setTimeout(function(){
$("ul.logs li").each(function(){
var nickField = $(this).children(".nick");

nickField.css("color",getColor(nickField.text()));
});
$(".wordwrap").each(function(){
$(this).html(
parseColor($(this).html())
);
});
} ,100);

var strftime = function(date) {
var hour = date.getHours(),
Expand Down Expand Up @@ -46,15 +283,19 @@ var pollNewMsg = function(isWidget) {
var date = new Date(parseFloat(msg["time"]) * 1000);
var lis = $(".logs > li").length;
var url = $("#today").text();
var colorCode = parseInt(md5(msg["nick"]).substring(0,6),16) & 0x7F7F7F;

// $("#today").text() gets nothing automatically when isWidget
var msgElement = $("<li id=\"" + lis + "\">").addClass("new-arrival")
.append(link('time', url + '#' + lis, '#' + lis)
.text(strftime(date)))
.append(link('nick', url + '/' + lis, msg['nick'])
.text(msg['nick'])
.css("color",'#'+(colorCode < 0x100000 ? '0' : '')+colorCode.toString(16)))
.append($("<span class=\"msg wordwrap\">").html(msg["msg"]));
.css("color",getColor(msg['nick'])))
.append($("<span class=\"msg wordwrap\">").html(msg["msg"]).each(function(){
$(this).html(
parseColor($(this).html())
);
}));
if (isWidget) {
$(".logs").prepend(msgElement);
}
Expand Down