Support images in comments, truncate addresses
This commit is contained in:
parent
0c9c0cd5a5
commit
569fa6ee1d
|
@ -576,3 +576,27 @@ ul.b {
|
||||||
.proposal-overview .table-proposal[data-status="4"], .proposal-overview .table-proposal[data-status="4"] a {
|
.proposal-overview .table-proposal[data-status="4"], .proposal-overview .table-proposal[data-status="4"] a {
|
||||||
color: #4b4b4b;
|
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;
|
||||||
|
}
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
<div class="col-md-12">
|
<div class="col-md-12">
|
||||||
<div class="card my-6" id="incoming_txs">
|
<div class="card my-6" id="incoming_txs">
|
||||||
<h5 id="comments" class="card-header">Comments</h5>
|
<h5 id="comments" class="card-header">Comments</h5>
|
||||||
<div class="card-body">
|
<div class="card-body comments-panel">
|
||||||
{% if logged_in %}
|
{% if logged_in %}
|
||||||
<form method="post" action="comment">
|
<form method="post" action="comment">
|
||||||
<input type="hidden" name="pid" value="{{proposal.id}}">
|
<input type="hidden" name="pid" value="{{proposal.id}}">
|
||||||
|
@ -37,7 +37,7 @@
|
||||||
{{c.date_added.strftime('%Y-%m-%d %H:%M')}}
|
{{c.date_added.strftime('%Y-%m-%d %H:%M')}}
|
||||||
</a>
|
</a>
|
||||||
</span><br>
|
</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>
|
<br>
|
||||||
{% if not c.automated %}
|
{% if not c.automated %}
|
||||||
<a class="reply" href="{{url_for('propsal_comment_reply', cid=c.id, pid=proposal.id)}}">reply</a>
|
<a class="reply" href="{{url_for('propsal_comment_reply', cid=c.id, pid=proposal.id)}}">reply</a>
|
||||||
|
@ -65,7 +65,7 @@
|
||||||
</a>
|
</a>
|
||||||
</span>
|
</span>
|
||||||
<br>
|
<br>
|
||||||
<span style="word-break: break-all;">
|
<span data-id="{{_c.id}}" class="body" style="word-break: break-all;">
|
||||||
{{_c.message}}
|
{{_c.message}}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -178,5 +178,72 @@
|
||||||
|
|
||||||
</div>
|
</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 -->
|
<!-- /.container -->
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
Loading…
Reference in New Issue