diff --git a/the_works/static/css/the_works.css b/the_works/static/css/the_works.css index 24a489e..c12680d 100644 --- a/the_works/static/css/the_works.css +++ b/the_works/static/css/the_works.css @@ -171,8 +171,8 @@ form:not([novalidate]) input:user-valid[type="search"] { } /* style for Klappentext tooltips */ -[data-tooltip][data-placement="bottom"]::after, -[data-tooltip][data-placement="bottom"]::before { +[data-tooltip][data-placement="bottom"]:after, +[data-tooltip][data-placement="bottom"]:before { white-space: pre-line; max-width: 400px; } @@ -212,6 +212,68 @@ form:not([novalidate]) input:user-valid[type="search"] { display: none; } +/* imageselect styles */ +label:has([type="radio"]) { + width: 100%; +} + +.imageselect-entry, +.imageselect-entry-summary { + display: inline grid; + grid-template-columns: 2rem 2rem auto; + grid-column-gap: var(--pico-form-element-spacing-horizontal); + align-content: center; + height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2); + padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal); + + .imageselect-div { + display: flex; + align-items: center; + justify-content: center; + + border: var(--pico-border-width) solid var(--pico-table-border-color); + cursor: zoom-in; + max-height: 100%; + text-align: center; + width: calc(1rem * var(--pico-line-height)); + +/* display: block; + padding: 0px; + margin: auto;*/ + } + + .imageselect-img, + .imageselect-svg { + object-fit: contain; + height: calc(1rem * var(--pico-line-height)); + } +} + +details.imageselect > summary.imageselect-summary { + padding: 0px; +} + +#imagepreview-modal { + max-height: 95vh; + + .imagepreview-div { + display: flex; + align-items: center; + justify-content: center; + } +} + + +/* .imageselect-overlay { + position: absolute; + top: 50px; + left: 50px; + display: none; +} + +.imageselect-div:hover .imageselect-overlay { + display: block; +} */ [data-display-werksform]::before { diff --git a/the_works/static/js/imagepreview.js b/the_works/static/js/imagepreview.js new file mode 100644 index 0000000..33f3a22 --- /dev/null +++ b/the_works/static/js/imagepreview.js @@ -0,0 +1,20 @@ +/* + * IMAGEPREVIEW FUNCTIONS + */ +function initImagepreview(modal_id) { + // event handlers for all the thumbnails that raise the preview modal on click + document.querySelectorAll(".imageselect-div").forEach(el => el.addEventListener("click", handleImagepreview, true)); + // enable closing the modal + document.getElementById(modal_id).addEventListener("click", event => event.target.close()); + document.querySelector("dialog button.modal-close").addEventListener("click", event => event.target.closest("dialog").close()); +} + +function handleImagepreview(event) { + let modal = document.getElementById("imagepreview-modal"); + modal.querySelector("img").setAttribute("src", event.target.closest(".imageselect-entry").dataset["bild"]); + modal.querySelector(".imagepreview-details").innerText = event.target.closest(".imageselect-entry").querySelector(".imageselect-label").innerText; + modal.showModal(); + if ( event.target.closest(".imageselect-entry").localName.toLowerCase() == "div" ) { + event.stopPropagation(); + } +} \ No newline at end of file diff --git a/the_works/static/js/imageselect.js b/the_works/static/js/imageselect.js new file mode 100644 index 0000000..adb3cf7 --- /dev/null +++ b/the_works/static/js/imageselect.js @@ -0,0 +1,53 @@ +/* + * IMAGESELECT FUNCTIONS + */ +// initialize imege select with given id +function initImageselect(id) { +console.log("this is initImageselect!"); + let is = document.getElementById(id); + // add event listener to radio buttons + let summary = is.querySelector("summary"); + let input_name = is.querySelector("input[type='radio']").getAttribute("name"); + document.querySelectorAll(`[name='${input_name}']`).forEach( el => { + el.addEventListener("change", event => updateImageselect(event.target, summary)); + if ( el.checked ) { + el.dispatchEvent(new Event("change")); + } + }); +} + + +// event handler for imageselect radio buttons; displays the selected entry in the dropdown's summary element +function updateImageselect(that, summary) { + // clear summary contents + summary.innerHTML = ""; + + // create new element which will contain a copy of the entry in the dropdown menu + let div = document.createElement("div"); + div.classList.add("imageselect-entry"); + div.dataset["bild"] = that.closest(".imageselect-entry").dataset["bild"]; + + // remove radio button's attributes id (no duplicates allowed) and name (so it won't count towards the form) + let n = that.closest(".imageselect-entry").querySelector(".imageselect-input").cloneNode(true); + n.firstElementChild.removeAttribute("name"); + n.firstElementChild.removeAttribute("id"); + n.firstElementChild.setAttribute("checked", ""); + div.appendChild(n); + + // clone image part + n = that.closest(".imageselect-entry").querySelector(".imageselect-div").cloneNode(true); + n.addEventListener("click", handleImagepreview, true); + div.appendChild(n); + + // remove label element (but keep the contents) so it doesn't interfere with the dropdown functionality + n = that.closest(".imageselect-entry").querySelector(".imageselect-title").cloneNode(true); + let innerText = n.firstElementChild.innerText; + n.classList.add("imageselect-label"); + n.firstElementChild.remove(); + n.innerText = innerText; + div.appendChild(n); + + // add div to summary + summary.appendChild(div); +} + diff --git a/the_works/static/js/modal.js b/the_works/static/js/modal.js index 20745ad..09fad8a 100644 --- a/the_works/static/js/modal.js +++ b/the_works/static/js/modal.js @@ -9,7 +9,6 @@ function initModal(modal_id, input_ids, headings, form_actions) { document.getElementById("create-button").addEventListener("click", () => showDialog(modal_id, input_ids, headings[0], form_actions[0], new Array(input_ids.length).fill(""), 0)); // add event listeners to "update" elements for (const el of document.querySelectorAll('.action-update')) { -console.log(`input_ids is ${input_ids}`); el.addEventListener("click", event => showDialog( modal_id, input_ids, @@ -19,6 +18,8 @@ console.log(`input_ids is ${input_ids}`); event.currentTarget.dataset.id )); } + // add event listener to close button + document.querySelector("dialog button.modal-close").addEventListener("click", event => event.target.closest("dialog").close()); } diff --git a/the_works/static/js/multiselect.js b/the_works/static/js/multiselect.js index cef5868..8599645 100644 --- a/the_works/static/js/multiselect.js +++ b/the_works/static/js/multiselect.js @@ -4,7 +4,7 @@ // initializes all dropdown selects on the page function initAllMultiselects() { // initialize each dropdown individually - let dropdowns = document.querySelectorAll("form details.dropdown"); + let dropdowns = document.querySelectorAll("form details.multiselect"); dropdowns.forEach(d => initMultiselect(d)); // now it's time to set the z-indices // get the_works style sheet @@ -24,7 +24,7 @@ function initAllMultiselects() { } } // add event handler to summary elements preventing default behavior (toggling the details element) if the click actually targeted a badge - document.querySelectorAll("form details.dropdown summary").forEach(summary => summary.addEventListener("click", event => summaryClick(event, summary), true)); + document.querySelectorAll("form details.multiselect summary").forEach(summary => summary.addEventListener("click", event => summaryClick(event, summary), true)); } diff --git a/the_works/templates/views/werk_detail.html b/the_works/templates/views/werk_detail.html index 7a365c0..4ff971e 100644 --- a/the_works/templates/views/werk_detail.html +++ b/the_works/templates/views/werk_detail.html @@ -45,17 +45,19 @@ Werk bearbeiten {% for wf in werksformen %}{% endfor %} - - +
+ + +
+