Julian Steinwachs
10 years ago
8 changed files with 885 additions and 312 deletions
@ -0,0 +1,205 @@ |
|||||||
|
|
||||||
|
var React = require('react'); |
||||||
|
|
||||||
|
module.exports = Post = React.createClass({ |
||||||
|
|
||||||
|
extractUsername: function(s) { |
||||||
|
var username = ""; |
||||||
|
for( var i = 0; i < s.length; i++ ) { |
||||||
|
var c = s.charCodeAt(i); |
||||||
|
if( (c >= 'a'.charCodeAt(0) && c <= 'z'.charCodeAt(0)) || |
||||||
|
(c >= 'A'.charCodeAt(0) && c <= 'Z'.charCodeAt(0)) || |
||||||
|
(c >= '0'.charCodeAt(0) && c <= '9'.charCodeAt(0)) || |
||||||
|
c == '_'.charCodeAt(0) ) { |
||||||
|
username += s[i]; |
||||||
|
} else { |
||||||
|
break; |
||||||
|
} |
||||||
|
} |
||||||
|
return username; |
||||||
|
}, |
||||||
|
extractHashtag: function(s) { |
||||||
|
var hashtag = ""; |
||||||
|
s = this.reverseHtmlEntities(s); |
||||||
|
for( var i = 0; i < s.length; i++ ) { |
||||||
|
if( " \n\t.,:/?!;'\"()[]{}*#".indexOf(s[i]) < 0 ) { |
||||||
|
hashtag += s[i]; |
||||||
|
} else { |
||||||
|
break; |
||||||
|
} |
||||||
|
} |
||||||
|
return hashtag; |
||||||
|
}, |
||||||
|
escapeHtmlEntities: function(str) { |
||||||
|
return str |
||||||
|
.replace(/&/g, '&') |
||||||
|
.replace(/</g, '<') |
||||||
|
.replace(/>/g, '>') |
||||||
|
.replace(/"/g, '"') |
||||||
|
.replace(/'/g, '''); |
||||||
|
}, |
||||||
|
reverseHtmlEntities: function(str) { |
||||||
|
return str |
||||||
|
.replace(/</g, '<') |
||||||
|
.replace(/>/g, '>') |
||||||
|
.replace(/"/g, '"') |
||||||
|
.replace(/'/g, "'") |
||||||
|
.replace(/&/g, '&'); |
||||||
|
}, |
||||||
|
parseContent: function( msg ) { |
||||||
|
|
||||||
|
var output = []; |
||||||
|
|
||||||
|
var tmp; |
||||||
|
var match = null; |
||||||
|
var index; |
||||||
|
var strUrlRegexp = "http[s]?://"; |
||||||
|
var strEmailRegexp = "\\S+@\\S+\\.\\S+"; |
||||||
|
var strSplitCounterR = "\\(\\d{1,2}\\/\\d{1,2}\\)$"; |
||||||
|
var reAll = new RegExp("(?:^|[ \\n\\t.,:\\/?!])(#|@|" + strUrlRegexp + "|" + strEmailRegexp + "|" + strSplitCounterR + ")"); |
||||||
|
var reHttp = new RegExp(strUrlRegexp); |
||||||
|
var reEmail = new RegExp(strEmailRegexp); |
||||||
|
var reSplitCounter = new RegExp(strSplitCounterR); |
||||||
|
|
||||||
|
msg = this.escapeHtmlEntities(msg); |
||||||
|
|
||||||
|
while( msg != undefined && msg.length ) { |
||||||
|
|
||||||
|
match = reAll.exec(msg); |
||||||
|
if( match ) { |
||||||
|
index = (match[0] === match[1]) ? match.index : match.index + 1; |
||||||
|
if( match[1] == "@" ) { |
||||||
|
output.push({type:"text",raw:(msg.substr(0, index))}); |
||||||
|
tmp = msg.substr(index+1); |
||||||
|
var username = this.extractUsername(tmp); |
||||||
|
if( username.length ) { |
||||||
|
output.push({type:"mention",raw:"@"+username}); |
||||||
|
} |
||||||
|
msg = tmp.substr(String(username).length); |
||||||
|
continue; |
||||||
|
} |
||||||
|
|
||||||
|
if( reHttp.exec(match[1]) ) { |
||||||
|
output.push({type:"text",raw:(msg.substr(0, index))}); |
||||||
|
tmp = msg.substring(index); |
||||||
|
var space = tmp.search(/[ \n\t]/); |
||||||
|
var url; |
||||||
|
if( space != -1 ) url = tmp.substring(0,space); else url = tmp; |
||||||
|
if( url.length ) { |
||||||
|
output.push({type:"url",raw:url}); |
||||||
|
} |
||||||
|
msg = tmp.substr(String(url).length); |
||||||
|
continue; |
||||||
|
} |
||||||
|
|
||||||
|
if( reEmail.exec(match[1]) ) { |
||||||
|
output.push({type:"text",raw:(msg.substr(0, index))}); |
||||||
|
tmp = msg.substring(index); |
||||||
|
var space = tmp.search(/[ \n\t]/); |
||||||
|
var email; |
||||||
|
if( space != -1 ) email = tmp.substring(0,space); else email = tmp; |
||||||
|
if( email.length ) { |
||||||
|
output.push({type:"email",raw:email}); |
||||||
|
} |
||||||
|
msg = tmp.substr(String(email).length); |
||||||
|
continue; |
||||||
|
} |
||||||
|
|
||||||
|
if( match[1] == "#" ) { |
||||||
|
output.push({type:"text",raw:(msg.substr(0, index))}); |
||||||
|
tmp = msg.substr(index+1); |
||||||
|
var hashtag = this.extractHashtag(tmp); |
||||||
|
if( hashtag.length ) { |
||||||
|
// var hashtag_lc='';
|
||||||
|
// for( var i = 0; i < hashtag.length; i++ ) {
|
||||||
|
// var c = hashtag[i];
|
||||||
|
// hashtag_lc += (c >= 'A' && c <= 'Z') ? c.toLowerCase() : c;
|
||||||
|
// }
|
||||||
|
output.push({type:"hashtag",raw:"#"+hashtag}); |
||||||
|
|
||||||
|
} |
||||||
|
msg = tmp.substr(String(hashtag).length); |
||||||
|
continue; |
||||||
|
} |
||||||
|
|
||||||
|
/*if (reSplitCounter.exec(match[1])) { |
||||||
|
output.append({type:"text",raw:(msg.substr(0, index))}); |
||||||
|
tmp = msg.substring(index); |
||||||
|
if( tmp.length ) { |
||||||
|
var splitCounter = $('<span class="splited-post-counter"></span>'); |
||||||
|
splitCounter.text(tmp); |
||||||
|
output.append(splitCounter); |
||||||
|
msg = ""; |
||||||
|
continue; |
||||||
|
} |
||||||
|
msg = tmp.substr(String(hashtag).length); |
||||||
|
continue; |
||||||
|
}*/ |
||||||
|
} |
||||||
|
|
||||||
|
output.push({type:"text",raw:(msg.substr(0, index))}); |
||||||
|
msg = ""; |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
return output; |
||||||
|
|
||||||
|
}, |
||||||
|
render: function() { |
||||||
|
|
||||||
|
var parsedContent = this.parseContent(this.props.content); |
||||||
|
|
||||||
|
//console.log(parsedContent)
|
||||||
|
|
||||||
|
var ret = parsedContent.map(function(item,index){ |
||||||
|
//console.log(item.raw)
|
||||||
|
switch(item.type) { |
||||||
|
case "mention": |
||||||
|
return ( |
||||||
|
<a key={index} className="text-muted" href={"#/profile/"+item.raw.substr(1)}>{item.raw}</a> |
||||||
|
) |
||||||
|
case "hashtag": |
||||||
|
return ( |
||||||
|
<span key={index} className="text-muted">{item.raw}</span> |
||||||
|
) |
||||||
|
case "url": |
||||||
|
return ( |
||||||
|
<a key={index} className="text-primary" href={item.raw} target="_blank">{item.raw}</a> |
||||||
|
) |
||||||
|
case "email": |
||||||
|
return ( |
||||||
|
<span key={index} className="text-primary">{item.raw}</span> |
||||||
|
) |
||||||
|
default: |
||||||
|
return ( |
||||||
|
<span key={index}>{item.raw}</span> |
||||||
|
) |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
//console.log(ret);
|
||||||
|
|
||||||
|
return ( |
||||||
|
<div> |
||||||
|
{ret} |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
/* |
||||||
|
<div className="post-avatar"> |
||||||
|
<img src={this.state.avatar}/> |
||||||
|
</div> |
||||||
|
<div className="post-bulk"> |
||||||
|
<div className="post-username"> |
||||||
|
<span className="post-fullname">{this.state.fullname} </span> |
||||||
|
@{post.username} - {post.id} |
||||||
|
|
||||||
|
</div> |
||||||
|
<div className="post-timestamp">{post.timestamp}</div> |
||||||
|
<div className="post-content">{post.content}</div> |
||||||
|
</div> |
||||||
|
<hr/> |
||||||
|
|
||||||
|
*/ |
||||||
Loading…
Reference in new issue