mirror of
https://github.com/ail-project/ail-framework.git
synced 2024-11-22 22:27:17 +00:00
chg: [chats] add message and blur blocks
This commit is contained in:
parent
2ea5f82760
commit
9fbd3f4bb6
10 changed files with 134 additions and 171 deletions
|
@ -258,7 +258,7 @@ class AbstractChatFeeder(DefaultFeeder, ABC):
|
||||||
obj.add(date, message)
|
obj.add(date, message)
|
||||||
obj.set_parent(obj_global_id=message.get_global_id())
|
obj.set_parent(obj_global_id=message.get_global_id())
|
||||||
|
|
||||||
for obj in objs: # TODO PERF avoid parsing metas multpile times
|
for obj in objs: # TODO PERF avoid parsing metas multiple times
|
||||||
|
|
||||||
# CHAT
|
# CHAT
|
||||||
chat = self.process_chat(obj, date, timestamp, reply_id=reply_id)
|
chat = self.process_chat(obj, date, timestamp, reply_id=reply_id)
|
||||||
|
|
|
@ -337,7 +337,7 @@ def api_get_message(message_id):
|
||||||
message = Messages.Message(message_id)
|
message = Messages.Message(message_id)
|
||||||
if not message.exists():
|
if not message.exists():
|
||||||
return {"status": "error", "reason": "Unknown uuid"}, 404
|
return {"status": "error", "reason": "Unknown uuid"}, 404
|
||||||
meta = message.get_meta({'chat', 'content', 'icon', 'link', 'parent', 'parent_meta', 'user-account'})
|
meta = message.get_meta({'chat', 'content', 'icon', 'images', 'link', 'parent', 'parent_meta', 'user-account'})
|
||||||
# if meta['chat']:
|
# if meta['chat']:
|
||||||
# print(meta['chat'])
|
# print(meta['chat'])
|
||||||
# # meta['chat'] =
|
# # meta['chat'] =
|
||||||
|
|
|
@ -134,6 +134,9 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
{% include 'objects/image/block_blur_img_slider.html' %}
|
||||||
|
|
||||||
|
|
||||||
<div class="position-relative">
|
<div class="position-relative">
|
||||||
<div class="chat-messages p-2">
|
<div class="chat-messages p-2">
|
||||||
|
|
||||||
|
@ -143,48 +146,9 @@
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="chat-message-left pb-1">
|
{% with message=meta %}
|
||||||
<div>
|
{% include 'chats_explorer/block_message.html' %}
|
||||||
<img src="{{ url_for('static', filename='image/ail-icon.png') }}" class="rounded-circle mr-1" alt="{{ meta['user-account']['id'] }}" width="40" height="40">
|
{% endwith %}
|
||||||
<div class="text-muted small text-nowrap mt-2">{{ meta['hour'] }}</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex-shrink-1 bg-light rounded py-2 px-3 ml-4 pb-4" style="overflow-x: auto">
|
|
||||||
<div class="font-weight-bold mb-1">
|
|
||||||
{% if meta['user-account']['username'] %}
|
|
||||||
{{ meta['user-account']['username']['id'] }}
|
|
||||||
{% else %}
|
|
||||||
{{ meta['user-account']['id'] }}
|
|
||||||
{% endif %}
|
|
||||||
</div>
|
|
||||||
{% if meta['reply_to'] %}
|
|
||||||
<div class="flex-shrink-1 bg-white border rounded py-2 px-3 ml-4 mb-3" style="overflow-x: auto">
|
|
||||||
<div class="font-weight-bold mb-1">
|
|
||||||
{% if meta['reply_to']['user-account']['username'] %}
|
|
||||||
{{ meta['reply_to']['user-account']['username']['id'] }}
|
|
||||||
{% else %}
|
|
||||||
{{ meta['reply_to']['user-account']['id'] }}
|
|
||||||
{% endif %}
|
|
||||||
</div>
|
|
||||||
<pre class="my-0">{{ meta['reply_to']['content'] }}</pre>
|
|
||||||
{% for tag in meta['reply_to']['tags'] %}
|
|
||||||
<span class="badge badge-{{ bootstrap_label[loop.index0 % 5] }}">{{ tag }}</span>
|
|
||||||
{% endfor %}
|
|
||||||
<div class="text-muted small text-nowrap">{{ meta['reply_to']['full_date'] }}</div>
|
|
||||||
{# <div class="">#}
|
|
||||||
{# <a class="btn btn-light btn-sm text-secondary py-0" href="{{ url_for('correlation.show_correlation')}}?type={{ mess['reply_to']['type'] }}&subtype={{ mess['reply_to']['subtype'] }}&id={{ mess['reply_to']['id'] }}"><i class="fas fa-project-diagram"></i></a>#}
|
|
||||||
{# <a class="btn btn-light btn-sm text-secondary py-0" href="{{ mess['reply_to']['link'] }}"><i class="fas fa-eye"></i></a>#}
|
|
||||||
{# </div>#}
|
|
||||||
</div>
|
|
||||||
{% endif %}
|
|
||||||
<pre class="my-0">{{ meta['content'] }}</pre>
|
|
||||||
{% for tag in meta['tags'] %}
|
|
||||||
<span class="badge badge-{{ bootstrap_label[loop.index0 % 5] }}">{{ tag }}</span>
|
|
||||||
{% endfor %}
|
|
||||||
<div class="">
|
|
||||||
<a class="btn btn-light btn-sm text-secondary px-1" href="{{ url_for('correlation.show_correlation')}}?type={{ meta['type'] }}&subtype={{ meta['subtype'] }}&id={{ meta['id'] }}"><i class="fas fa-project-diagram"></i></a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -144,6 +144,10 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<span class="mt-3">
|
||||||
|
{% include 'objects/image/block_blur_img_slider.html' %}
|
||||||
|
</span>
|
||||||
|
|
||||||
<div class="position-relative">
|
<div class="position-relative">
|
||||||
<div class="chat-messages p-2">
|
<div class="chat-messages p-2">
|
||||||
|
|
||||||
|
@ -157,49 +161,9 @@
|
||||||
|
|
||||||
{% for mess in subchannel['messages'][date] %}
|
{% for mess in subchannel['messages'][date] %}
|
||||||
|
|
||||||
<div class="chat-message-left pb-1">
|
{% with message=mess %}
|
||||||
<div>
|
{% include 'chats_explorer/block_message.html' %}
|
||||||
<img src="{{ url_for('static', filename='image/ail-icon.png') }}" class="rounded-circle mr-1" alt="{{ mess['user-account']['id'] }}" width="40" height="40">
|
{% endwith %}
|
||||||
<div class="text-muted small text-nowrap mt-2">{{ mess['hour'] }}</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex-shrink-1 bg-light rounded py-2 px-3 ml-4 pb-4" style="overflow-x: auto">
|
|
||||||
<div class="font-weight-bold mb-1">
|
|
||||||
{% if mess['user-account']['username'] %}
|
|
||||||
{{ mess['user-account']['username']['id'] }}
|
|
||||||
{% else %}
|
|
||||||
{{ mess['user-account']['id'] }}
|
|
||||||
{% endif %}
|
|
||||||
</div>
|
|
||||||
{% if mess['reply_to'] %}
|
|
||||||
<div class="flex-shrink-1 bg-white border rounded py-2 px-3 ml-4 mb-3" style="overflow-x: auto">
|
|
||||||
<div class="font-weight-bold mb-1">
|
|
||||||
{% if mess['reply_to']['user-account']['username'] %}
|
|
||||||
{{ mess['reply_to']['user-account']['username']['id'] }}
|
|
||||||
{% else %}
|
|
||||||
{{ mess['reply_to']['user-account']['id'] }}
|
|
||||||
{% endif %}
|
|
||||||
</div>
|
|
||||||
<pre class="my-0">{{ mess['reply_to']['content'] }}</pre>
|
|
||||||
{% for tag in mess['reply_to']['tags'] %}
|
|
||||||
<span class="badge badge-{{ bootstrap_label[loop.index0 % 5] }}">{{ tag }}</span>
|
|
||||||
{% endfor %}
|
|
||||||
<div class="text-muted small text-nowrap">{{ mess['reply_to']['full_date'] }}</div>
|
|
||||||
{# <div class="">#}
|
|
||||||
{# <a class="btn btn-light btn-sm text-secondary py-0" href="{{ url_for('correlation.show_correlation')}}?type={{ mess['reply_to']['type'] }}&subtype={{ mess['reply_to']['subtype'] }}&id={{ mess['reply_to']['id'] }}"><i class="fas fa-project-diagram"></i></a>#}
|
|
||||||
{# <a class="btn btn-light btn-sm text-secondary py-0" href="{{ mess['reply_to']['link'] }}"><i class="fas fa-eye"></i></a>#}
|
|
||||||
{# </div>#}
|
|
||||||
</div>
|
|
||||||
{% endif %}
|
|
||||||
<pre class="my-0">{{ mess['content'] }}</pre>
|
|
||||||
{% for tag in mess['tags'] %}
|
|
||||||
<span class="badge badge-{{ bootstrap_label[loop.index0 % 5] }}">{{ tag }}</span>
|
|
||||||
{% endfor %}
|
|
||||||
<div class="">
|
|
||||||
<a class="btn btn-light btn-sm text-secondary px-1" href="{{ url_for('correlation.show_correlation')}}?type={{ mess['type'] }}&subtype={{ mess['subtype'] }}&id={{ mess['id'] }}"><i class="fas fa-project-diagram"></i></a>
|
|
||||||
<a class="btn btn-light btn-sm text-secondary px-1" href="{{ mess['link'] }}"><i class="fas fa-eye"></i></a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
<br>
|
<br>
|
||||||
|
|
74
var/www/templates/chats_explorer/block_message.html
Normal file
74
var/www/templates/chats_explorer/block_message.html
Normal file
|
@ -0,0 +1,74 @@
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.chat-message-left,
|
||||||
|
.chat-message-right {
|
||||||
|
display: flex;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
.chat-message-right {
|
||||||
|
flex-direction: row-reverse;
|
||||||
|
margin-left: auto
|
||||||
|
}
|
||||||
|
.divider:after,
|
||||||
|
.divider:before {
|
||||||
|
content: "";
|
||||||
|
flex: 1;
|
||||||
|
height: 2px;
|
||||||
|
background: #eee;
|
||||||
|
}
|
||||||
|
.message_image {
|
||||||
|
max-width: 50%;
|
||||||
|
filter: blur(5px);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div class="chat-message-left pb-1">
|
||||||
|
<div>
|
||||||
|
<img src="{{ url_for('static', filename='image/ail-icon.png') }}" class="rounded-circle mr-1" alt="{{ message['user-account']['id'] }}" width="40" height="40">
|
||||||
|
<div class="text-muted small text-nowrap mt-2">{{ message['hour'] }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex-shrink-1 bg-light rounded py-2 px-3 ml-4 pb-4" style="overflow-x: auto">
|
||||||
|
<div class="font-weight-bold mb-1">
|
||||||
|
{% if message['user-account']['username'] %}
|
||||||
|
{{ message['user-account']['username']['id'] }}
|
||||||
|
{% else %}
|
||||||
|
{{ message['user-account']['id'] }}
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
{% if message['reply_to'] %}
|
||||||
|
<div class="flex-shrink-1 bg-white border rounded py-2 px-3 ml-4 mb-3" style="overflow-x: auto">
|
||||||
|
<div class="font-weight-bold mb-1">
|
||||||
|
{% if message['reply_to']['user-account']['username'] %}
|
||||||
|
{{ message['reply_to']['user-account']['username']['id'] }}
|
||||||
|
{% else %}
|
||||||
|
{{ message['reply_to']['user-account']['id'] }}
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
<pre class="my-0">{{ message['reply_to']['content'] }}</pre>
|
||||||
|
{% for tag in message['reply_to']['tags'] %}
|
||||||
|
<span class="badge badge-{{ bootstrap_label[loop.index0 % 5] }}">{{ tag }}</span>
|
||||||
|
{% endfor %}
|
||||||
|
<div class="text-muted small text-nowrap">{{ message['reply_to']['full_date'] }}</div>
|
||||||
|
{# <div class="">#}
|
||||||
|
{# <a class="btn btn-light btn-sm text-secondary py-0" href="{{ url_for('correlation.show_correlation')}}?type={{ message['reply_to']['type'] }}&subtype={{ message['reply_to']['subtype'] }}&id={{ message['reply_to']['id'] }}"><i class="fas fa-project-diagram"></i></a>#}
|
||||||
|
{# <a class="btn btn-light btn-sm text-secondary py-0" href="{{ message['reply_to']['link'] }}"><i class="fas fa-eye"></i></a>#}
|
||||||
|
{# </div>#}
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
{% if message['images'] %}
|
||||||
|
<img class="message_image mb-1" src="{{ url_for('objects_image.image', filename=message['images'][0])}}">
|
||||||
|
{% endif %}
|
||||||
|
<pre class="my-0">{{ message['content'] }}</pre>
|
||||||
|
{% for tag in message['tags'] %}
|
||||||
|
<span class="badge badge-{{ bootstrap_label[loop.index0 % 5] }}">{{ tag }}</span>
|
||||||
|
{% endfor %}
|
||||||
|
<div class="">
|
||||||
|
<a class="btn btn-light btn-sm text-secondary px-1" href="{{ url_for('correlation.show_correlation')}}?type={{ message['type'] }}&subtype={{ message['subtype'] }}&id={{ message['id'] }}"><i class="fas fa-project-diagram"></i></a>
|
||||||
|
<a class="btn btn-light btn-sm text-secondary px-1" href="{{ message['link'] }}"><i class="fas fa-eye"></i></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
|
@ -106,7 +106,7 @@
|
||||||
<script>
|
<script>
|
||||||
$(document).ready(function(){
|
$(document).ready(function(){
|
||||||
$("#page-Decoded").addClass("active");
|
$("#page-Decoded").addClass("active");
|
||||||
$("#nav_cve").addClass("active");
|
$("#nav_explorer_chat").addClass("active");
|
||||||
|
|
||||||
$('#tablechats').DataTable({
|
$('#tablechats').DataTable({
|
||||||
"aLengthMenu": [[5, 10, 15, -1], [5, 10, 15, "All"]],
|
"aLengthMenu": [[5, 10, 15, -1], [5, 10, 15, "All"]],
|
||||||
|
|
|
@ -152,27 +152,7 @@
|
||||||
{% if chat['messages'] %}
|
{% if chat['messages'] %}
|
||||||
|
|
||||||
<span class="mt-3">
|
<span class="mt-3">
|
||||||
<div class="card border-secondary">
|
{% include 'objects/image/block_blur_img_slider.html' %}
|
||||||
<div class="card-body py-2">
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-md-3 text-center px-0">
|
|
||||||
<button class="btn btn-sm btn-secondary" onclick="blur_slider.val(0);blur_images();">
|
|
||||||
<i class="fas fa-eye-slash"></i>
|
|
||||||
<span class="label-icon">Hide</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
<div class="col-md-6 text-center pl-0 pt-1">
|
|
||||||
<input type="range" min="0" max="15" step="0.1" value="10" id="blur-slider" onchange="blur_images();">
|
|
||||||
</div>
|
|
||||||
<div class="col-md-3 text-center">
|
|
||||||
<button class="btn btn-sm btn-secondary" onclick="blur_slider.val(15);blur_images();">
|
|
||||||
<i class="fas fa-image"></i>
|
|
||||||
<span class="label-icon">Full</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
<div class="position-relative">
|
<div class="position-relative">
|
||||||
|
@ -188,52 +168,9 @@
|
||||||
|
|
||||||
{% for mess in chat['messages'][date] %}
|
{% for mess in chat['messages'][date] %}
|
||||||
|
|
||||||
<div class="chat-message-left pb-1">
|
{% with message=mess %}
|
||||||
<div>
|
{% include 'chats_explorer/block_message.html' %}
|
||||||
<img src="{{ url_for('static', filename='image/ail-icon.png') }}" class="rounded-circle mr-1" alt="{{ mess['user-account']['id'] }}" width="40" height="40">
|
{% endwith %}
|
||||||
<div class="text-muted small text-nowrap mt-2">{{ mess['hour'] }}</div>
|
|
||||||
</div>
|
|
||||||
<div class="flex-shrink-1 bg-light rounded py-2 px-3 ml-4 pb-4" style="overflow-x: auto">
|
|
||||||
<div class="font-weight-bold mb-1">
|
|
||||||
{% if mess['user-account']['username'] %}
|
|
||||||
{{ mess['user-account']['username']['id'] }}
|
|
||||||
{% else %}
|
|
||||||
{{ mess['user-account']['id'] }}
|
|
||||||
{% endif %}
|
|
||||||
</div>
|
|
||||||
{% if mess['reply_to'] %}
|
|
||||||
<div class="flex-shrink-1 bg-white border rounded py-2 px-3 ml-4 mb-3" style="overflow-x: auto">
|
|
||||||
<div class="font-weight-bold mb-1">
|
|
||||||
{% if mess['reply_to']['user-account']['username'] %}
|
|
||||||
{{ mess['reply_to']['user-account']['username']['id'] }}
|
|
||||||
{% else %}
|
|
||||||
{{ mess['reply_to']['user-account']['id'] }}
|
|
||||||
{% endif %}
|
|
||||||
</div>
|
|
||||||
<pre class="my-0">{{ mess['reply_to']['content'] }}</pre>
|
|
||||||
{% for tag in mess['reply_to']['tags'] %}
|
|
||||||
<span class="badge badge-{{ bootstrap_label[loop.index0 % 5] }}">{{ tag }}</span>
|
|
||||||
{% endfor %}
|
|
||||||
<div class="text-muted small text-nowrap">{{ mess['reply_to']['full_date'] }}</div>
|
|
||||||
{# <div class="">#}
|
|
||||||
{# <a class="btn btn-light btn-sm text-secondary py-0" href="{{ url_for('correlation.show_correlation')}}?type={{ mess['reply_to']['type'] }}&subtype={{ mess['reply_to']['subtype'] }}&id={{ mess['reply_to']['id'] }}"><i class="fas fa-project-diagram"></i></a>#}
|
|
||||||
{# <a class="btn btn-light btn-sm text-secondary py-0" href="{{ mess['reply_to']['link'] }}"><i class="fas fa-eye"></i></a>#}
|
|
||||||
{# </div>#}
|
|
||||||
</div>
|
|
||||||
{% endif %}
|
|
||||||
{% if mess['images'] %}
|
|
||||||
<img class="message_image mb-1" src="{{ url_for('objects_image.image', filename=mess['images'][0])}}">
|
|
||||||
{% endif %}
|
|
||||||
<pre class="my-0">{{ mess['content'] }}</pre>
|
|
||||||
{% for tag in mess['tags'] %}
|
|
||||||
<span class="badge badge-{{ bootstrap_label[loop.index0 % 5] }}">{{ tag }}</span>
|
|
||||||
{% endfor %}
|
|
||||||
<div class="">
|
|
||||||
<a class="btn btn-light btn-sm text-secondary px-1" href="{{ url_for('correlation.show_correlation')}}?type={{ mess['type'] }}&subtype={{ mess['subtype'] }}&id={{ mess['id'] }}"><i class="fas fa-project-diagram"></i></a>
|
|
||||||
<a class="btn btn-light btn-sm text-secondary px-1" href="{{ mess['link'] }}"><i class="fas fa-eye"></i></a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
<br>
|
<br>
|
||||||
|
@ -252,7 +189,7 @@
|
||||||
<script>
|
<script>
|
||||||
$(document).ready(function(){
|
$(document).ready(function(){
|
||||||
$("#page-Decoded").addClass("active");
|
$("#page-Decoded").addClass("active");
|
||||||
$("#nav_cve").addClass("active");
|
$("#nav_chat").addClass("active");
|
||||||
|
|
||||||
{% if chat['subchannels'] %}
|
{% if chat['subchannels'] %}
|
||||||
$('#tablesubchannels').DataTable({
|
$('#tablesubchannels').DataTable({
|
||||||
|
@ -277,16 +214,6 @@ function toggle_sidebar(){
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
const blur_slider = $('#blur-slider');
|
|
||||||
function blur_images(){
|
|
||||||
let blurValue = blur_slider.val();
|
|
||||||
blurValue = 15 - blurValue;
|
|
||||||
let images = document.getElementsByClassName('message_image');
|
|
||||||
for(i = 0; i < images.length; i++) {
|
|
||||||
images[i].style.filter = "blur(" + blurValue + "px)";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
@ -442,15 +369,15 @@ d3.json("{{ url_for('chats_explorer.chats_explorer_messages_stats_week') }}?uuid
|
||||||
tooltip.style("opacity", 1)
|
tooltip.style("opacity", 1)
|
||||||
d3.select(this)
|
d3.select(this)
|
||||||
.style("stroke", "black")
|
.style("stroke", "black")
|
||||||
.style("opacity", 1)
|
//.style("stroke-opacity", 1)
|
||||||
|
|
||||||
tooltip.html(d.date + " " + d.hour + "-" + (d.hour + 1) + "h: <b>" + d.count + "</b> messages")
|
tooltip.html(d.date + " " + d.hour + "-" + (d.hour + 1) + "h: <b>" + d.count + "</b> messages")
|
||||||
}
|
}
|
||||||
const mouseleave = function(d) {
|
const mouseleave = function(d) {
|
||||||
tooltip.style("opacity", 0)
|
tooltip.style("opacity", 0)
|
||||||
d3.select(this)
|
d3.select(this)
|
||||||
.style("stroke", "none")
|
.style("stroke", "white")
|
||||||
.style("opacity", 0.8)
|
//.style("stroke-opacity", 0.8)
|
||||||
}
|
}
|
||||||
|
|
||||||
///////////////////////////////////////////////////////////////////////////
|
///////////////////////////////////////////////////////////////////////////
|
||||||
|
|
|
@ -57,7 +57,7 @@
|
||||||
<script>
|
<script>
|
||||||
$(document).ready(function(){
|
$(document).ready(function(){
|
||||||
$("#page-Decoded").addClass("active");
|
$("#page-Decoded").addClass("active");
|
||||||
$("#nav_cve").addClass("active");
|
$("#nav_explorer_chat").addClass("active");
|
||||||
});
|
});
|
||||||
|
|
||||||
function toggle_sidebar(){
|
function toggle_sidebar(){
|
||||||
|
|
|
@ -59,7 +59,7 @@
|
||||||
<script>
|
<script>
|
||||||
$(document).ready(function(){
|
$(document).ready(function(){
|
||||||
$("#page-Decoded").addClass("active");
|
$("#page-Decoded").addClass("active");
|
||||||
$("#nav_cve").addClass("active");
|
$("#nav_explorer_chat").addClass("active");
|
||||||
});
|
});
|
||||||
|
|
||||||
function toggle_sidebar(){
|
function toggle_sidebar(){
|
||||||
|
|
34
var/www/templates/objects/image/block_blur_img_slider.html
Normal file
34
var/www/templates/objects/image/block_blur_img_slider.html
Normal file
|
@ -0,0 +1,34 @@
|
||||||
|
<div class="card border-secondary">
|
||||||
|
<div class="card-body py-2">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-3 text-center px-0">
|
||||||
|
<button class="btn btn-sm btn-secondary" onclick="blur_slider.val(0);blur_images();">
|
||||||
|
<i class="fas fa-eye-slash"></i>
|
||||||
|
<span class="label-icon">Hide</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-6 text-center pl-0 pt-1">
|
||||||
|
<input type="range" min="0" max="15" step="0.1" value="10" id="blur-slider" onchange="blur_images();">
|
||||||
|
</div>
|
||||||
|
<div class="col-md-3 text-center">
|
||||||
|
<button class="btn btn-sm btn-secondary" onclick="blur_slider.val(15);blur_images();">
|
||||||
|
<i class="fas fa-image"></i>
|
||||||
|
<span class="label-icon">Full</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const blur_slider = $('#blur-slider');
|
||||||
|
function blur_images(){
|
||||||
|
let blurValue = blur_slider.val();
|
||||||
|
blurValue = 15 - blurValue;
|
||||||
|
let images = document.getElementsByClassName('message_image');
|
||||||
|
for(i = 0; i < images.length; i++) {
|
||||||
|
images[i].style.filter = "blur(" + blurValue + "px)";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
Loading…
Reference in a new issue