Support images in comments, truncate addresses

wowfunding/static/css/wow.css

@@ -575,4 +575,28 @@ 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;
+}

wowfunding/templates/comments.html

@@ -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>

wowfunding/templates/proposal/proposal.html

@@ -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 %}