Merge pull request #2016 from bookwyrm-social/duplicate-script

Moves duplicate field script into its own file
This commit is contained in:
Mouse Reeve 2022-03-14 11:09:48 -07:00 committed by GitHub
commit c0db081120
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 37 additions and 24 deletions

View file

@ -38,10 +38,6 @@ let BookWyrm = new (class {
.querySelectorAll("[data-modal-open]") .querySelectorAll("[data-modal-open]")
.forEach((node) => node.addEventListener("click", this.handleModalButton.bind(this))); .forEach((node) => node.addEventListener("click", this.handleModalButton.bind(this)));
document
.querySelectorAll("[data-duplicate]")
.forEach((node) => node.addEventListener("click", this.duplicateInput.bind(this)));
document document
.querySelectorAll("details.dropdown") .querySelectorAll("details.dropdown")
.forEach((node) => .forEach((node) =>
@ -495,26 +491,6 @@ let BookWyrm = new (class {
window.open(url, windowName, "left=100,top=100,width=430,height=600"); window.open(url, windowName, "left=100,top=100,width=430,height=600");
} }
duplicateInput(event) {
const trigger = event.currentTarget;
const input_id = trigger.dataset.duplicate;
const orig = document.getElementById(input_id);
const parent = orig.parentNode;
const new_count = parent.querySelectorAll("input").length + 1;
let input = orig.cloneNode();
input.id += "-" + new_count;
input.value = "";
let label = parent.querySelector("label").cloneNode();
label.setAttribute("for", input.id);
parent.appendChild(label);
parent.appendChild(input);
}
/** /**
* Set up a "click-to-copy" component from a textarea element * Set up a "click-to-copy" component from a textarea element
* with `data-copytext`, `data-copytext-label`, `data-copytext-success` * with `data-copytext`, `data-copytext-label`, `data-copytext-success`

View file

@ -0,0 +1,32 @@
(function () {
"use strict";
/**
* Duplicate an input field
*
* @param {event} the click even on the associated button
*/
function duplicateInput(event) {
const trigger = event.currentTarget;
const input_id = trigger.dataset.duplicate;
const orig = document.getElementById(input_id);
const parent = orig.parentNode;
const new_count = parent.querySelectorAll("input").length + 1;
let input = orig.cloneNode();
input.id += "-" + new_count;
input.value = "";
let label = parent.querySelector("label").cloneNode();
label.setAttribute("for", input.id);
parent.appendChild(label);
parent.appendChild(input);
}
document
.querySelectorAll("[data-duplicate]")
.forEach((node) => node.addEventListener("click", duplicateInput));
})();

View file

@ -1,4 +1,5 @@
{% load i18n %} {% load i18n %}
{% load static %}
{% if form.non_field_errors %} {% if form.non_field_errors %}
<div class="block"> <div class="block">
@ -302,3 +303,7 @@
</section> </section>
</div> </div>
</div> </div>
{% block scripts %}
<script src="{% static "js/forms.js" %}"></script>
{% endblock %}