Pathogen
/
neptune
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Fix all tab content being changed at once

This commit is contained in:
Mark Veidemanis 2022-08-29 17:23:33 +01:00
parent b6ca84c7a5
commit ae2004090c
Signed by: m
GPG Key ID: 5ACFCEED46C0904F
10 changed files with 90 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
core/static/tabs.css
View File

@ -1,7 +0,0 @@
#tab-content div {
display: none;
}
#tab-content div.is-active {
display: block;
}

67
core/static/tabs.js
View File

@ -1,35 +1,36 @@
// tabbed browsing for the modal function initTabs(unique) {
function initTabs() { var tabs_selector = '#tabs-'+unique+' li';
TABS.forEach((tab) => { var TABS = [...document.querySelectorAll(tabs_selector)];
tab.addEventListener('click', (e) => { var CONTENT = [...document.querySelectorAll('#tab-content-'+unique+' div')];
let selected = tab.getAttribute('data-tab'); var ACTIVE_CLASS = 'is-active';
updateActiveTab(tab); TABS.forEach((tab) => {
updateActiveContent(selected); tab.addEventListener('click', (e) => {
}) let selected = tab.getAttribute('data-tab');
}) updateActiveTab(TABS, ACTIVE_CLASS, tab);
} updateActiveContent(CONTENT, ACTIVE_CLASS, selected);
})
})
}
function updateActiveTab(selected) { function updateActiveTab(TABS, ACTIVE_CLASS, selected) {
TABS.forEach((tab) => { TABS.forEach((tab) => {
if (tab && tab.classList.contains(ACTIVE_CLASS)) { if (tab && tab.classList.contains(ACTIVE_CLASS)) {
tab.classList.remove(ACTIVE_CLASS); tab.classList.remove(ACTIVE_CLASS);
} }
}); });
selected.classList.add(ACTIVE_CLASS); selected.classList.add(ACTIVE_CLASS);
} }
function updateActiveContent(selected) { function updateActiveContent(CONTENT, ACTIVE_CLASS, selected) {
CONTENT.forEach((item) => { CONTENT.forEach((item) => {
if (item && item.classList.contains(ACTIVE_CLASS)) { if (item && item.classList.contains(ACTIVE_CLASS)) {
item.classList.remove(ACTIVE_CLASS); item.classList.remove(ACTIVE_CLASS);
} }
let data = item.getAttribute('data-content'); let data = item.getAttribute('data-content');
if (data === selected) { if (data === selected) {
item.classList.add(ACTIVE_CLASS); item.classList.add(ACTIVE_CLASS);
} }
}); });
} }
var TABS = [...document.querySelectorAll('#tabs li')];
var CONTENT = [...document.querySelectorAll('#tab-content div')]; // initTabs();
var ACTIVE_CLASS = 'is-active';
initTabs();

17
core/templates/modals/context.html
View File

@ -2,8 +2,6 @@
{% load static %} {% load static %}
<script src="{% static 'modal.js' %}"></script> <script src="{% static 'modal.js' %}"></script>
<link rel ="stylesheet" href="{% static 'tabs.css' %}">
<script src="{% static 'tabs.js' %}"></script>
<script> <script>
document.addEventListener("restore-modal-scroll", function(event) { document.addEventListener("restore-modal-scroll", function(event) {
var modalContent = document.getElementsByClassName("modal-content")[0]; var modalContent = document.getElementsByClassName("modal-content")[0];
@ -27,13 +25,22 @@
}); });
</script> </script>
<style>
#tab-content-{{ unique }} div {
display: none;
}
#tab-content-{{ unique }} div.is-active {
display: block;
}
</style>
<div id="modal" class="modal is-active is-clipped"> <div id="modal" class="modal is-active is-clipped">
<div class="modal-background"></div> <div class="modal-background"></div>
<div class="modal-content"> <div class="modal-content">
<div class="box"> <div class="box">
{% include 'partials/notify.html' %} {% include 'partials/notify.html' %}
<div class="tabs is-toggle is-fullwidth is-info" id="tabs"> <div class="tabs is-toggle is-fullwidth is-info" id="tabs-{{ unique }}">
<ul> <ul>
<li class="is-active" data-tab="1"> <li class="is-active" data-tab="1">
<a> <a>
@ -61,7 +68,7 @@
</li> </li>
</ul> </ul>
</div> </div>
<div id="tab-content"> <div id="tab-content-{{ unique }}">
<div class="is-active" data-content="1"> <div class="is-active" data-content="1">
<h4 class="subtitle is-4">Scrollback of {{ channel }} on {{ net }}{{ num }}</h4> <h4 class="subtitle is-4">Scrollback of {{ channel }} on {{ net }}{{ num }}</h4>
{% include 'modals/context_table.html' %} {% include 'modals/context_table.html' %}
@ -108,7 +115,7 @@
</div> </div>
</div> </div>
</div> </div>
<script>initTabs("{{ unique }}");</script>
<button class="modal-close is-large" aria-label="close"></button> <button class="modal-close is-large" aria-label="close"></button>
{# <script>activateButtons();</script> #}
</div> </div>
</div> </div>

2
core/templates/modals/drilldown.html
View File

@ -2,8 +2,6 @@
{% load static %} {% load static %}
<script src="{% static 'modal.js' %}"></script> <script src="{% static 'modal.js' %}"></script>
<link rel ="stylesheet" href="{% static 'tabs.css' %}">
<script src="{% static 'tabs.js' %}"></script>
<div id="modal" class="modal is-active is-clipped"> <div id="modal" class="modal is-active is-clipped">
<div class="modal-background"></div> <div class="modal-background"></div>
<div class="modal-content"> <div class="modal-content">

8
core/templates/partials/magnet.html
View File

@ -1,8 +1,8 @@
<magnet-block attract-distance="10" align-to="outer|center" class="floating-window"> <magnet-block attract-distance="10" align-to="outer|center" class="floating-window">
{% extends 'partials/panel.html' %} {% extends 'partials/panel.html' %}
{% block heading %} {% block heading %}
{% endblock %} {% endblock %}
{% block panel_content %} {% block panel_content %}
{% endblock %} {% endblock %}
</magnet-block> </magnet-block>

1
core/templates/ui/drilldown/drilldown.html
View File

@ -22,6 +22,7 @@
</div> </div>
{% endif %} {% endif %}
<script src="{% static 'js/chart.js' %}"></script> <script src="{% static 'js/chart.js' %}"></script>
<script src="{% static 'tabs.js' %}"></script>
<script> <script>
function setupTags() { function setupTags() {
var inputTags = document.getElementById('tags'); var inputTags = document.getElementById('tags');

9
core/templates/widgets/drilldown.html
View File

@ -1,12 +1,12 @@
<div id="drilldown-widget"> <div id="drilldown-widget">
<div id="drilldown-widget-{{ net }}" class="grid-stack-item" gs-w="5" gs-h="15"> <div id="drilldown-widget-{{ unique }}" class="grid-stack-item" gs-w="5" gs-h="15">
<div class="grid-stack-item-content"> <div class="grid-stack-item-content">
<div class="panel"> <div class="panel">
<p class="panel-heading" style="padding: .2em; line-height: .5em;"> <p class="panel-heading" style="padding: .2em; line-height: .5em;">
<i class="fa-solid fa-arrows-up-down-left-right has-text-grey-light ui-move"></i> <i class="fa-solid fa-arrows-up-down-left-right has-text-grey-light ui-move"></i>
<i <i
class="fa-solid fa-xmark has-text-grey-light ui-close" class="fa-solid fa-xmark has-text-grey-light ui-close"
onclick='grid.removeWidget("drilldown-widget-{{ net }}"); grid.compact();'></i> onclick='grid.removeWidget("drilldown-widget-{{ unique }}"); grid.compact();'></i>
Drilldown Drilldown
</p> </p>
<div class="panel-block is-active"> <div class="panel-block is-active">
@ -27,5 +27,8 @@
grid.addWidget(contents.innerHTML); grid.addWidget(contents.innerHTML);
contents.outerHTML = ""; contents.outerHTML = "";
grid.compact(); grid.compact();
// because we remove the element the JS runs in
// so we need to run it again here
initTabs("{{ unique }}");
</script> </script>

18
core/templates/window-content/context.html
View File

@ -2,8 +2,6 @@
{% load static %} {% load static %}
<script src="{% static 'modal.js' %}"></script> <script src="{% static 'modal.js' %}"></script>
<link rel ="stylesheet" href="{% static 'tabs.css' %}">
<script src="{% static 'tabs.js' %}"></script>
<script> <script>
document.addEventListener("restore-modal-scroll", function(event) { document.addEventListener("restore-modal-scroll", function(event) {
var modalContent = document.getElementsByClassName("modal-content")[0]; var modalContent = document.getElementsByClassName("modal-content")[0];
@ -27,13 +25,22 @@
}); });
</script> </script>
<style>
#tab-content-{{ unique }} div {
display: none;
}
#tab-content-{{ unique }} div.is-active {
display: block;
}
</style>
<div id="modal" class="modal is-active is-clipped"> <div id="modal" class="modal is-active is-clipped">
<div class="modal-background"></div> <div class="modal-background"></div>
<div class="modal-content"> <div class="modal-content">
<div class="box"> <div class="box">
{% include 'partials/notify.html' %} {% include 'partials/notify.html' %}
<div class="tabs is-toggle is-fullwidth is-info" id="tabs"> <div class="tabs is-toggle is-fullwidth is-info" id="tabs-{{ unique }}">
<ul> <ul>
<li class="is-active" data-tab="1"> <li class="is-active" data-tab="1">
<a> <a>
@ -61,7 +68,7 @@
</li> </li>
</ul> </ul>
</div> </div>
<div id="tab-content"> <div id="tab-content-{{ unique }}">
<div class="is-active" data-content="1"> <div class="is-active" data-content="1">
<h4 class="subtitle is-4">Scrollback of {{ channel }} on {{ net }}{{ num }}</h4> <h4 class="subtitle is-4">Scrollback of {{ channel }} on {{ net }}{{ num }}</h4>
{% include 'modals/context_table.html' %} {% include 'modals/context_table.html' %}
@ -108,7 +115,8 @@
</div> </div>
</div> </div>
</div> </div>
<script>initTabs("{{ unique }}");</script>
<button class="modal-close is-large" aria-label="close"></button> <button class="modal-close is-large" aria-label="close"></button>
{# <script>activateButtons();</script> #}
</div> </div>
</div> </div>

18
core/templates/window-content/drilldown.html
View File

@ -1,8 +1,15 @@
{% load index %} {% load index %}
{% load static %} {% load static %}
<div class="tabs is-toggle is-fullwidth is-info" id="tabs"> <style>
<link rel ="stylesheet" href="{% static 'tabs.css' %}"> #tab-content-{{ unique }} div {
<script src="{% static 'tabs.js' %}"></script> display: none;
}
#tab-content-{{ unique }} div.is-active {
display: block;
}
</style>
<div class="tabs is-toggle is-fullwidth is-info" id="tabs-{{ unique }}">
<ul> <ul>
<li class="is-active" data-tab="1"> <li class="is-active" data-tab="1">
<a> <a>
@ -30,7 +37,7 @@
</li> </li>
</ul> </ul>
</div> </div>
<div id="tab-content"> <div id="tab-content-{{ unique }}">
<div class="is-active" data-content="1"> <div class="is-active" data-content="1">
<h4 class="subtitle is-4">Channels for {{ nick }} on {{ net }}</h4> <h4 class="subtitle is-4">Channels for {{ nick }} on {{ net }}</h4>
{% for channel in chans %} {% for channel in chans %}
@ -95,5 +102,6 @@
</a> </a>
{% endfor %} {% endfor %}
</div> </div>
<script>initTabs("{{ unique }}");</script>
</div> </div>
<script src="{% static 'tabs.js' %}"></script>

5
core/views/ui/drilldown.py
View File

@ -1,5 +1,6 @@
import json import json
import urllib import urllib
import uuid
from copy import deepcopy from copy import deepcopy
from django.conf import settings from django.conf import settings
@ -384,6 +385,7 @@ class DrilldownContextModal(APIView):
# Make the time nicer # Make the time nicer
# for index, item in enumerate(results["object_list"]): # for index, item in enumerate(results["object_list"]):
# results["object_list"][index]["time"] = item["time"]+"SSS" # results["object_list"][index]["time"] = item["time"]+"SSS"
unique = str(uuid.uuid4())[:8]
context = { context = {
"net": query_params["net"], "net": query_params["net"],
"channel": query_params["channel"], "channel": query_params["channel"],
@ -398,6 +400,7 @@ class DrilldownContextModal(APIView):
"mtype": query_params["mtype"], "mtype": query_params["mtype"],
"nick": query_params["nick"], "nick": query_params["nick"],
"params": query_params, "params": query_params,
"unique": unique,
} }
if request.user.is_superuser: if request.user.is_superuser:
if query: if query:
@ -465,6 +468,7 @@ class ThresholdInfoModal(APIView):
# SAFE BLOCK END # # SAFE BLOCK END #
unique = str(uuid.uuid4())[:8]
context = { context = {
"net": net, "net": net,
"nick": nick, "nick": nick,
@ -475,5 +479,6 @@ class ThresholdInfoModal(APIView):
"inter_users": inter_users, "inter_users": inter_users,
"num_users": num_users, "num_users": num_users,
"num_chans": num_chans, "num_chans": num_chans,
"unique": unique,
} }
return render(request, self.template_name, context) return render(request, self.template_name, context)