@reldens/cms 0.20.0 → 0.23.0

package/admin/reldens-admin-client.css

@@ -387,7 +387,7 @@
                 .button {
                     margin-bottom: 1rem;
 
-                    &.list-delete-selection {
+                    &.list-select {
                         margin-bottom: 0;
                     }
                 }
@@ -532,8 +532,7 @@
                 flex-direction: row;
                 vertical-align: middle;
                 align-items: center;
-                width: 100%;
-                margin: 0 0 1rem 0;
+                margin: 0 1rem 1rem 0;
                 font-size: 14px;
                 color: var(--darkGrey);
 
@@ -587,130 +586,58 @@
         }
     }
 
-    .maps-wizard {
-        .main-action-container.maps-selection {
-            width: 100%;
-
-            .wizard-options-container {
-                display: flex;
-                justify-content: space-between;
-                flex-wrap: wrap;
-                width: 100%;
-
-                /* 3 or more items => 4 columns */
-                .wizard-map-option-container {
-                    flex: 0 0 22%;
-                    padding: 1rem 1% 0;
-                    margin: 1.5rem 0 0;
-                    border: 1px solid #ccc;
-                }
-
-                /* 1 child => 1 columns */
-                .wizard-map-option-container:only-child {
-                    flex: 0 0 100%;
-                    padding: 1rem 0 0;
-                    border: none;
-                }
-
-                /* 2 children => 2 columns */
-                .wizard-map-option-container:first-child:nth-last-child(2),
-                .wizard-map-option-container:last-child:nth-child(2) {
-                    flex: 0 0 47%;
-                }
-
-                & input.map-wizard-option {
-                    top: 2px;
-                    margin-right: 0;
-                }
-            }
-        }
-
-        .checkbox-container {
-            display: flex;
-            flex-direction: row;
-            font-weight: var(--bold);
-        }
-
-        .wizard-options-container {
-            padding: 0;
-            margin-bottom: 1rem;
-
-            & input.map-wizard-option {
-                position: relative;
-                top: -2px;
-                margin-right: 6px;
-            }
-
-            .wizard-map-option-container {
-                display: flex;
-                flex-direction: column;
-                list-style: none;
-                padding-top: 1rem;
-                margin-top: 1.5rem;
-                border-top: 1px solid #ccc;
-
-                & label {
-                    cursor: pointer;
-                }
-
-                & canvas {
-                    width: 100%;
-                    margin-top: 1rem;
-                }
-            }
-
-            .wizard-option-container {
-                list-style: none;
-                margin-bottom: 1rem;
-
-                .main-option {
-                    display: inline-block;
-                    cursor: pointer;
-                }
-
-                .maps-wizard-option-content {
-                    display: none;
-                    padding-left: 1.6rem;
-                }
-
-                &.active {
-                    .maps-wizard-option-content {
-                        display: block;
-                    }
-                }
-            }
-        }
-
-        .maps-wizard-form {
-            align-items: flex-start;
-            flex-direction: column;
-            justify-content: flex-start;
+    .filters-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        width: 100%;
+        margin-bottom: 1rem;
+        flex-wrap: wrap;
+        gap: 1rem;
+    }
 
-            .submit-container {
-                display: flex;
-            }
-        }
+    .filters-toggle {
+        cursor: pointer;
+        margin: 0;
+        padding: 0.5rem 0;
+        flex-shrink: 0;
+    }
 
-        .sub-map-option-description {
-            display: flex;
-            align-items: center;
+    .filters-toggle img {
+        width: 34px;
+        height: auto;
+        margin-right: 0.5rem;
+        opacity: 0.7;
+    }
 
-            & img.icon-sm {
-                margin-right: 1rem;
-            }
-        }
+    .search-controls {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        flex-wrap: wrap;
+        flex: 1;
+        justify-content: flex-end;
+    }
 
-        .sub-maps-container {
-            display: block;
+    .search-input-group input[type="text"] {
+        width: calc(100% - 1rem);
+        padding: 0.5rem;
+        border: 1px solid #ccc;
+        border-radius: 4px;
+        font-size: 1rem;
+    }
 
-            &.hidden {
-                display: none;
-            }
+    .search-input-group input[type="text"]:focus {
+        outline: none;
+        border-color: var(--lightBlue);
+        box-shadow: 0 0 0 0.2rem rgba(52, 152, 219, 0.25);
+    }
 
-            & p {
-                margin: 1.5rem 0 0;
-            }
-        }
+    .filter-actions {
+        display: flex;
+        gap: 0.5rem;
+        flex-wrap: wrap;
+        flex-shrink: 0;
     }
 
     .loading {
@@ -768,8 +695,15 @@
             }
         }
 
-        .view-field .field-value img {
-            max-width: 200px;
+        .view-field {
+            .field-value img {
+                max-width: 200px;
+            }
+
+            .admin-audio-player {
+                width: 100%;
+                max-width: 400px;
+            }
         }
 
         .edit-field {
@@ -787,12 +721,12 @@
                         margin: 0;
                         padding: 0.5rem;
                         border: none;
-                        background: transparent;
+                        background-color: transparent;
 
                         &:not([disabled]) {
                             margin: 0;
                             border: 1px solid #7f8c8d;
-                            background: var(--white);
+                            background-color: var(--white);
 
                             &[type="checkbox"] {
                                 max-width: max-content;
@@ -806,7 +740,7 @@
         }
 
         .actions {
-            margin-top: 2rem;
+            margin: 2rem 0;
             text-align: center;
 
             & form {
@@ -851,7 +785,7 @@
         overflow: auto;
     }
 
-    .cache-confirm-dialog {
+    .confirm-dialog {
         border: none;
         border-radius: 8px;
         padding: 0;
@@ -860,38 +794,40 @@
         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
     }
 
-    .cache-confirm-dialog::backdrop {
+    .confirm-dialog::backdrop {
         background-color: rgba(0, 0, 0, 0.5);
     }
 
-    .cache-dialog-content {
+    .dialog-content {
         padding: 1rem;
     }
 
-    .cache-dialog-content h5 {
+    .dialog-content h5 {
         margin: 0 0 1rem 0;
         font-size: 18px;
         color: var(--darkGrey);
     }
 
-    .cache-dialog-content p {
+    .dialog-content p {
         margin: 0 0 1rem 0;
         color: var(--darkGrey);
     }
 
-    .cache-warning {
-        padding: 1rem;
-        background-color: #fff3cd;
-        border: 1px solid #ffeaa7;
-        border-radius: 4px;
-        color: #856404;
-        margin-bottom: 1rem;
-    }
-
-    .cache-dialog-actions {
+    .dialog-actions {
         display: flex;
         justify-content: flex-end;
         gap: 1rem;
     }
 
 }
+
+@media (max-width: 768px) {
+    .reldens-admin-panel .filter-actions {
+        flex-direction: column;
+    }
+
+    .reldens-admin-panel .filter-actions .button {
+        width: 100%;
+        text-align: center;
+    }
+}

package/admin/reldens-admin-client.js

@@ -12,42 +12,6 @@ window.addEventListener('DOMContentLoaded', () => {
     let queryString = location.search;
     let urlParams = new URLSearchParams(queryString);
 
-    function getCookie(name)
-    {
-        let value = `; ${document.cookie}`;
-        let parts = value.split(`; ${name}=`);
-        if(2 === parts.length){
-            return parts.pop().split(';').shift()
-        }
-    }
-
-    function deleteCookie(name)
-    {
-        document.cookie = name + '=; Path=/; Expires=Thu, 01 Jan 1970 00:00:01 GMT;';
-    }
-
-    function escapeHTML(str)
-    {
-        return str.replace(/&/g, "&")
-            .replace(/</g, "&lt;")
-            .replace(/>/g, "&gt;")
-            .replace(/"/g, "&quot;")
-            .replace(/'/g, "&#039;");
-    }
-
-    function cloneElement(element)
-    {
-        if(element instanceof HTMLCanvasElement){
-            let clonedCanvas = document.createElement('canvas');
-            clonedCanvas.width = element.width;
-            clonedCanvas.height = element.height;
-            let ctx = clonedCanvas.getContext('2d');
-            ctx.drawImage(element, 0, 0);
-            return clonedCanvas
-        }
-        return element.cloneNode(true);
-    }
-
     // error codes messages map:
     let errorMessages = {
         saveBadPatchData: 'Bad patch data on update.',
@@ -59,56 +23,9 @@ window.addEventListener('DOMContentLoaded', () => {
         errorId: 'Missing entity ID on POST.'
     };
 
-    // copyright year:
-    let copyRightYear = document.querySelector('.copyright-year');
-    if(copyRightYear){
-        copyRightYear.innerHTML = String((new Date()).getFullYear());
-    }
-
-    // activate expand/collapse elements
-    let expandCollapseButtons = document.querySelectorAll('[data-expand-collapse]');
-    if(expandCollapseButtons){
-        for(let expandCollapseButton of expandCollapseButtons){
-            expandCollapseButton.addEventListener('click', (event) => {
-                let expandCollapseElement = document.querySelector(event.currentTarget.dataset.expandCollapse);
-                if(expandCollapseElement){
-                    expandCollapseElement.classList.toggle('hidden');
-                }
-            });
-        }
-    }
+    activateExpandCollapse();
 
-    // activate modals on click
-    let modalElements = document.querySelectorAll('[data-toggle="modal"]');
-    if(modalElements){
-        for(let modalElement of modalElements){
-            modalElement.addEventListener('click', () => {
-                let overlay = document.createElement('div');
-                overlay.classList.add('modal-overlay');
-                let modal = document.createElement('div');
-                modal.classList.add('modal');
-                modal.classList.add('clickable');
-                let clonedElement = cloneElement(modalElement);
-                clonedElement.classList.add('clickable');
-                modal.appendChild(clonedElement);
-                overlay.appendChild(modal);
-                document.body.appendChild(overlay);
-                clonedElement.addEventListener('click', () => {
-                    document.body.removeChild(overlay);
-                });
-                modal.addEventListener('click', (e) => {
-                    if(e.target === modal){
-                        document.body.removeChild(modal.parentNode);
-                    }
-                });
-                overlay.addEventListener('click', (e) => {
-                    if(e.target === overlay) {
-                        document.body.removeChild(overlay);
-                    }
-                });
-            });
-        }
-    }
+    activateModalElements();
 
     // login errors:
     if('true' === urlParams.get('login-error')){
@@ -118,23 +35,64 @@ window.addEventListener('DOMContentLoaded', () => {
         }
     }
 
+    // entity search functionality:
+    let entityFilterTerm = document.querySelector('#entityFilterTerm');
+    let filterForm = document.querySelector('#filter-form');
+    let allFilters = document.querySelectorAll('.filters-toggle-content .filter input');
+    if(entityFilterTerm && filterForm){
+        entityFilterTerm.addEventListener('input', () => {
+            if(entityFilterTerm.value){
+                for(let filterInput of allFilters){
+                    filterInput.value = '';
+                }
+            }
+        });
+        entityFilterTerm.addEventListener('keypress', (event) => {
+            if(13 === event.keyCode){
+                event.preventDefault();
+                filterForm.submit();
+            }
+        });
+        for(let filterInput of allFilters){
+            filterInput.addEventListener('input', () => {
+                if(filterInput.value){
+                    entityFilterTerm.value = '';
+                }
+            });
+        }
+        filterForm.addEventListener('submit', () => {
+            if(entityFilterTerm.value && allFilters.some(input => input.value)){
+                for(let filterInput of allFilters){
+                    filterInput.value = '';
+                }
+            }
+        });
+    }
+
     // forms behavior:
     let forms = document.querySelectorAll('form');
     if(forms){
         for(let form of forms){
             form.addEventListener('submit', (event) => {
-                let submitButton = document.querySelector('input[type="submit"]');
+                let submitButton = form.querySelector('input[type="submit"], button[type="submit"]');
                 submitButton.disabled = true;
                 let loadingImage = document.querySelector('.submit-container .loading');
                 if(loadingImage){
                     loadingImage.classList.remove('hidden');
                 }
                 if(form.classList.contains('form-delete') || form.classList.contains('confirmation-required')){
-                    if(!confirm('Are you sure?')){
-                        event.preventDefault();
-                        submitButton.disabled = false;
-                        loadingImage.classList.add('hidden');
-                    }
+                    event.preventDefault();
+                    showConfirmDialog((confirmed) => {
+                        if(confirmed){
+                            form.submit();
+                        }
+                        if(!confirmed){
+                            submitButton.disabled = false;
+                            if(loadingImage){
+                                loadingImage.classList.add('hidden');
+                            }
+                        }
+                    });
                 }
             });
         }
@@ -180,21 +138,33 @@ window.addEventListener('DOMContentLoaded', () => {
             filtersToggleContent.classList.toggle('hidden');
         });
         let allFilters = document.querySelectorAll('.filters-toggle-content .filter input');
+        let entitySearchInput = document.querySelector('#entityFilterTerm');
+        let hasEntitySearch = entitySearchInput && '' !== entitySearchInput.value;
         let activeFilters = Array.from(allFilters).filter(input => '' !== input.value);
-        if(0 < activeFilters.length){
+        if(0 < activeFilters.length || hasEntitySearch){
             filtersToggleContent.classList.remove('hidden');
-            let paginationLinks = document.querySelectorAll('.pagination a');
-            let filtersForm = document.querySelector('#filter-form');
-            if(paginationLinks && filtersForm){
-                for(let link of paginationLinks){
-                    link.addEventListener('click', (event) => {
-                        event.stopPropagation();
-                        event.preventDefault();
-                        filtersForm.action = link.href;
-                        filtersForm.submit();
-                        return false;
-                    })
-                }
+        }
+        let paginationLinks = document.querySelectorAll('.pagination a');
+        if(paginationLinks && filterForm){
+            for(let link of paginationLinks){
+                link.addEventListener('click', (event) => {
+                    event.stopPropagation();
+                    event.preventDefault();
+                    let url = new URL(link.href);
+                    let params = new URLSearchParams(url.search);
+                    if(entitySearchInput && entitySearchInput.value){
+                        params.set('entityFilterTerm', entitySearchInput.value);
+                    }
+                    for(let filterInput of allFilters){
+                        if(filterInput.value){
+                            let filterName = filterInput.name;
+                            params.set(filterName, filterInput.value);
+                        }
+                    }
+                    let newUrl = url.pathname + '?' + params;
+                    window.location.href = newUrl;
+                    return false;
+                })
             }
         }
     }
@@ -216,19 +186,31 @@ window.addEventListener('DOMContentLoaded', () => {
     let deleteSelectionForm = document.getElementById('delete-selection-form');
     let hiddenInput = document.querySelector('.hidden-ids-input');
     if(listDeleteSelection && deleteSelectionForm && hiddenInput){
-        listDeleteSelection.addEventListener('click', () => {
-            if(!confirm('Are you sure?')){
-                return;
-            }
-            let checkboxes = document.querySelectorAll('.ids-checkbox');
-            let ids = [];
-            for(let checkbox of checkboxes){
-                if(checkbox.checked){
-                    ids.push(checkbox.value);
+        listDeleteSelection.addEventListener('click', (event) => {
+            event.preventDefault();
+            showConfirmDialog((confirmed) => {
+                if(confirmed){
+                    let checkboxes = document.querySelectorAll('.ids-checkbox');
+                    let ids = [];
+                    for(let checkbox of checkboxes){
+                        if(checkbox.checked){
+                            ids.push(parseInt(checkbox.value));
+                        }
+                    }
+                    if(0 === ids.length){
+                        return;
+                    }
+                    deleteSelectionForm.innerHTML = '';
+                    for(let id of ids){
+                        let input = document.createElement('input');
+                        input.type = 'hidden';
+                        input.name = 'ids[]';
+                        input.value = id;
+                        deleteSelectionForm.appendChild(input);
+                    }
+                    deleteSelectionForm.submit();
                 }
-            }
-            hiddenInput.value = ids.join(',');
-            deleteSelectionForm.submit();
+            });
         });
     }
 
@@ -278,25 +260,18 @@ window.addEventListener('DOMContentLoaded', () => {
 
     // cache clear all functionality:
     let cacheClearAllButton = document.querySelector('.cache-clear-all-button');
-    let cacheConfirmDialog = document.querySelector('.cache-confirm-dialog');
-    let cacheDialogCancel = document.querySelector('.cache-dialog-cancel');
     let cacheClearForm = document.querySelector('.cache-clear-form');
-    if(cacheClearAllButton && cacheConfirmDialog){
+    if(cacheClearAllButton){
         cacheClearAllButton.addEventListener('click', () => {
-            cacheConfirmDialog.showModal();
-        });
-    }
-    if(cacheDialogCancel && cacheConfirmDialog){
-        cacheDialogCancel.addEventListener('click', () => {
-            cacheConfirmDialog.close();
-        });
-    }
-    if(cacheClearForm){
-        cacheClearForm.addEventListener('submit', (event) => {
-            let submitButton = cacheClearForm.querySelector('button[type="submit"]');
-            if(submitButton){
-                submitButton.disabled = true;
-            }
+            showConfirmDialog((confirmed) => {
+                if(confirmed && cacheClearForm){
+                    let submitButton = cacheClearForm.querySelector('button[type="submit"]');
+                    if(submitButton){
+                        submitButton.disabled = true;
+                    }
+                    cacheClearForm.submit();
+                }
+            });
         });
     }
 

package/admin/templates/clear-all-cache-button.html

@@ -1,17 +1,17 @@
 <button type="button" class="button button-warning cache-clear-all-button">
     {{buttonText}}
 </button>
-<dialog class="cache-confirm-dialog">
-    <div class="cache-dialog-content">
-        <h5>{{confirmTitle}}</h5>
-        <p>{{confirmMessage}}</p>
+<dialog class="confirm-dialog">
+    <div class="dialog-content">
+        <h5 class="dialog-title">{{confirmTitle}}</h5>
+        <p class="dialog-message">{{confirmMessage}}</p>
         <div class="alert cache-warning">
             <strong>{{warningText}}</strong> {{warningMessage}}
         </div>
-        <div class="cache-dialog-actions">
-            <button type="button" class="button button-secondary cache-dialog-cancel">{{cancelText}}</button>
+        <div class="dialog-actions">
+            <button type="button" class="button button-secondary dialog-cancel">{{cancelText}}</button>
             <form method="post" action="{{clearAllCacheRoute}}" class="cache-clear-form">
-                <button type="submit" class="button button-danger">{{confirmText}}</button>
+                <button type="submit" class="button button-danger dialog-confirm">{{confirmText}}</button>
             </form>
         </div>
     </div>

package/admin/templates/edit.html

@@ -1,5 +1,11 @@
 <div class="entity-edit {{&entityName}}-edit">
     <h2>{{&templateTitle}}</h2>
+    <div class="actions">
+        <button class="button button-primary button-submit" type="submit" form="edit-form" name="saveAction" value="save">Save</button>
+        <button class="button button-primary button-submit" type="submit" form="edit-form" name="saveAction" value="saveAndContinue">Save and continue...</button>
+        <button class="button button-primary button-submit" type="submit" form="edit-form" name="saveAction" value="saveAndGoBack">Save and go back</button>
+        <a class="button button-secondary button-back" href="{{&entityViewRoute}}">Cancel</a>
+    </div>
     <form name="edit-form" id="edit-form" action="{{&entitySaveRoute}}" method="post"{{&multipartFormData}}>
         <input type="hidden" name="{{&idProperty}}" value="{{&idValue}}"/>
         <div class="edit-field">
@@ -18,6 +24,7 @@
         <div class="actions">
             <button class="button button-primary button-submit" type="submit" name="saveAction" value="save">Save</button>
             <button class="button button-primary button-submit" type="submit" name="saveAction" value="saveAndContinue">Save and continue...</button>
+            <button class="button button-primary button-submit" type="submit" name="saveAction" value="saveAndGoBack">Save and go back</button>
             <a class="button button-secondary button-back" href="{{&entityViewRoute}}">Cancel</a>
         </div>
     </form>

package/admin/templates/fields/view/audio.html

@@ -0,0 +1,7 @@
+{{#fieldValue}}
+<audio controls class="admin-audio-player">
+    <source src="{{&fieldValue}}">
+    Your browser does not support the audio element.
+</audio>
+<p><a href="{{&fieldValue}}"{{&target}}>{{&fieldValue}}</a></p>
+{{/fieldValue}}

package/admin/templates/fields/view/audios.html

@@ -0,0 +1,8 @@
+{{#fieldValue}}
+<audio controls class="admin-audio-player multiple-files">
+    <source src="{{&fieldValuePart}}">
+    Your browser does not support the audio element.
+</audio>
+<p><a href="{{&fieldValuePart}}"{{&target}}>{{&fieldOriginalValuePart}}</a></p>
+<br/>
+{{/fieldValue}}