Support images in comments, truncate addresses

This commit is contained in:
Sander Ferdinand 2018-08-19 15:48:56 +02:00
parent 0c9c0cd5a5
commit 569fa6ee1d
3 changed files with 95 additions and 4 deletions

View file

@ -576,3 +576,27 @@ ul.b {
.proposal-overview .table-proposal[data-status="4"], .proposal-overview .table-proposal[data-status="4"] a {
color: #4b4b4b;
}
.comments-panel {
background-color: #ffffffb0;
}
.comments-panel .comment-container .media-body span.body img{
margin-top:20px;
margin-bottom:10px;
max-width:500px;
max-height:600px;
display: inline;
}
.wow_addy{
color: red;
cursor: pointer;
font-family: monospace;
background: #f6f6f6;
font-size:14px;
}
.wow_addy[data-active="true"]{
cursor: default;
}

View file

@ -2,7 +2,7 @@
<div class="col-md-12">
<div class="card my-6" id="incoming_txs">
<h5 id="comments" class="card-header">Comments</h5>
<div class="card-body">
<div class="card-body comments-panel">
{% if logged_in %}
<form method="post" action="comment">
<input type="hidden" name="pid" value="{{proposal.id}}">
@ -37,7 +37,7 @@
{{c.date_added.strftime('%Y-%m-%d %H:%M')}}
</a>
</span><br>
<span style="{% if c.automated %}color:blue;{% endif %};word-break: break-all;">{{c.message}}</span>
<span data-id="{{c.id}}" class="body" style="{% if c.automated %}color:blue;{% endif %};word-break: break-all;">{{c.message}}</span>
<br>
{% if not c.automated %}
<a class="reply" href="{{url_for('propsal_comment_reply', cid=c.id, pid=proposal.id)}}">reply</a>
@ -65,7 +65,7 @@
</a>
</span>
<br>
<span style="word-break: break-all;">
<span data-id="{{_c.id}}" class="body" style="word-break: break-all;">
{{_c.message}}
</span>
</div>

View file

@ -178,5 +178,72 @@
</div>
<script>
$(document).ready(function(){
let regexp_url = /^[a-zA-Z0-9.:\/]+$/;
let regexp_address = /(W[o|W][a-zA-Z0-9]{95})/g;
let truncated_addy = function(obj){ return `<span data-addy="${obj}" class="wow_addy">${obj.substring(0, 4)}...${obj.slice(-4)}</span>`; }
function rich_addy(obj) {
let html = obj.html();
var matches = html.match(regexp_address);
if(matches) {
matches.filter(function(value, index,self){ return self.indexOf(value) === index; }).forEach(function (obj) {
html = html.replace(new RegExp(obj, 'g'), truncated_addy(obj));
});
}
obj.html(html);
}
function rich_img(obj) {
let content = obj.html();
//let x = obj.attr('data-id');
//if(x == 52){
// debugger;
//}
let spl = content.split(' ');
let lines = [];
spl.forEach(function (line) {
line = line.trim();
if (line && line.search(regexp_url) != -1 && line.indexOf("..") < 0) {
if (line.startsWith('https://i.imgflip.com/')) {
line = `<img src="${line}"/></a><br>`;
} else if (line.startsWith('https://i.imgur.com/')) {
line = `<img src="${line}"/></a><br>`;
}
}
if (line) {
lines.push(line);
}
});
obj.html(lines.join(" "));
}
$(document).on('click', '.wow_addy', function(event){
let obj = $(this);
if(obj.attr('data-active') === "true"){
//obj.attr('data-active', 'false');
//obj.html(truncated_addy(obj.attr('data-addy')));
} else {
obj.attr('data-active', 'true');
obj.html(obj.attr('data-addy'));
}
});
$('.comments-panel .comment-container .media-body span.body').each(function (i, obj){
obj = $(obj);
// convert images to <img>
rich_img(obj);
// truncate addys
let html = rich_addy(obj);
});
});
</script>
<!-- /.container -->
{% endblock %}