Fix overview modals

This commit is contained in:
Mark Veidemanis 2022-08-03 07:20:30 +01:00
parent ba99642060
commit ef3022e1b3
Signed by: m
GPG Key ID: 5ACFCEED46C0904F
7 changed files with 47 additions and 24 deletions

View File

@ -1,17 +1,37 @@
var modal = document.querySelector('.modal'); // assuming you have only 1 var modal = document.querySelector('.modal'); // assuming you have only 1
var html = document.querySelector('html'); var html = document.querySelector('html');
modal.querySelector('.modal-background').addEventListener('click', function(e) {
e.preventDefault(); var elements = document.querySelectorAll('.modal-background');
modal.classList.remove('is-active'); for(var i = 0; i < elements.length; i++) {
html.classList.remove('is-clipped'); elements[i].addEventListener('click', function(e) {
}); // elements[i].preventDefault();
modal.querySelector('.modal-close').addEventListener('click', function(e) { modal.classList.remove('is-active');
e.preventDefault(); html.classList.remove('is-clipped');
modal.classList.remove('is-active'); });
html.classList.remove('is-clipped'); }
});
modal.querySelector('.modal-close-button').addEventListener('click', function(e) { var elements = document.querySelectorAll('.modal-close');
e.preventDefault(); for(var i = 0; i < elements.length; i++) {
modal.classList.remove('is-active'); elements[i].addEventListener('click', function(e) {
html.classList.remove('is-clipped'); // elements[i].preventDefault();
}); modal.classList.remove('is-active');
html.classList.remove('is-clipped');
});
}
function activateButtons() {
var elements = document.querySelectorAll('.modal-close-button');
for(var i = 0; i < elements.length; i++) {
elements[i].addEventListener('click', function(e) {
// elements[i].preventDefault();
modal.classList.remove('is-active');
html.classList.remove('is-clipped');
});
}
}
activateButtons();
// modal.querySelector('.modal-close-button').addEventListener('click', function(e) {
// e.preventDefault();
// modal.classList.remove('is-active');
// html.classList.remove('is-clipped');
// });

View File

@ -64,12 +64,14 @@
</tbody> </tbody>
</table> </table>
<button <button
type="button"
class="button is-light" class="button is-light"
hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}' hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
hx-get="{% url 'threshold_irc_network_info' net %}"> hx-get="{% url 'threshold_irc_network_info' net %}">
Cancel Cancel
</button> </button>
<button class="button is-info">Submit</button> <button type="submit" class="button is-info">Submit</button>
<script>activateButtons();</script>
</div> </div>
</form> </form>

View File

@ -5,7 +5,7 @@
hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}' hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
hx-get="{% url 'threshold_irc_actions_add-network' %}" hx-get="{% url 'threshold_irc_actions_add-network' %}"
hx-trigger="click" hx-trigger="click"
hx-target="#modals-here-actions" hx-target="#modals-here"
class="button is-info"> class="button is-info">
<span class="icon-text"> <span class="icon-text">
<span class="icon"> <span class="icon">

View File

@ -42,6 +42,4 @@
</button> </button>
</div> </div>
{% endif %} {% endif %}
<div id="modals-here">
</div>
</div> </div>

View File

@ -63,11 +63,12 @@
</div> </div>
</div> </div>
<button <button
type="button"
class="button is-light modal-close-button"> class="button is-light modal-close-button">
Cancel Cancel
</button> </button>
<button class="button is-info modal-close-button">Submit</button> <button type="submit" class="button is-info modal-close-button">Submit</button>
<script>activateButtons();</script>
</form> </form>
</div> </div>

View File

@ -52,11 +52,12 @@
</div> </div>
</div> </div>
<button <button
type="button"
class="button is-light modal-close-button"> class="button is-light modal-close-button">
Cancel Cancel
</button> </button>
<button class="button is-info modal-close-button">Submit</button> <button type="submit" class="button is-info modal-close-button">Submit</button>
<script>activateButtons();</script>
</form> </form>
</div> </div>

View File

@ -85,5 +85,6 @@
</div> </div>
</div> </div>
</div> </div>
<div id="modals-here">
</div>
{% endblock %} {% endblock %}