@reldens/cms 0.20.0 → 0.23.0

package/templates/{site.webmanifest → assets/favicons/default/site.webmanifest}

@@ -7,18 +7,18 @@
     "background_color": "#000000",
     "icons": [
         {
-            "src": "assets/favicons/android-icon-144x144.png",
+            "src": "/assets/favicons/default/android-icon-144x144.png",
             "sizes": "144x144",
             "type": "image/png",
             "purpose": "any"
         },
         {
-            "src": "assets/favicons/android-icon-192x192.png",
+            "src": "/assets/favicons/default/android-icon-192x192.png",
             "sizes": "192x192",
             "type": "image/png"
         },
         {
-            "src": "assets/favicons/android-icon-512x512.png",
+            "src": "/assets/favicons/default/android-icon-512x512.png",
             "sizes": "512x512",
             "type": "image/png",
             "purpose": "maskable"

package/templates/cms_forms/field_email.html

@@ -0,0 +1,14 @@
+<div class="form-field {{errorClass}} {{requiredClass}}">
+    <label for="{{fieldName}}" class="form-label">
+        {{fieldLabel}}{{#isRequired}} <span class="required-indicator">*</span>{{/isRequired}}
+    </label>
+    <input type="email"
+           name="submittedValues[{{fieldName}}]"
+           id="{{fieldName}}"
+           value="{{fieldValue}}"
+           class="form-control {{#hasError}}is-invalid{{/hasError}}"
+           {{#isRequired}}required{{/isRequired}}
+    {{#placeholder}}placeholder="{{placeholder}}"{{/placeholder}} />
+    {{#helpText}}<div class="form-text">{{helpText}}</div>{{/helpText}}
+    {{#hasError}}<div class="invalid-feedback">{{fieldError}}</div>{{/hasError}}
+</div>

package/templates/cms_forms/field_number.html

@@ -0,0 +1,17 @@
+<div class="form-field {{errorClass}} {{requiredClass}}">
+    <label for="{{fieldName}}" class="form-label">
+        {{fieldLabel}}{{#isRequired}} <span class="required-indicator">*</span>{{/isRequired}}
+    </label>
+    <input type="number"
+        name="submittedValues[{{fieldName}}]"
+        id="{{fieldName}}"
+        value="{{fieldValue}}"
+        class="form-control {{#hasError}}is-invalid{{/hasError}}"
+        {{#isRequired}}required{{/isRequired}}
+        {{#placeholder}}placeholder="{{placeholder}}"{{/placeholder}}
+        {{#min}}min="{{min}}"{{/min}}
+        {{#max}}max="{{max}}"{{/max}}
+        {{#step}}step="{{step}}"{{/step}}/>
+    {{#helpText}}<div class="form-text">{{helpText}}</div>{{/helpText}}
+    {{#hasError}}<div class="invalid-feedback">{{fieldError}}</div>{{/hasError}}
+</div>

package/templates/cms_forms/field_select.html

@@ -0,0 +1,15 @@
+<div class="form-field {{errorClass}} {{requiredClass}}">
+    <label for="{{fieldName}}" class="form-label">
+        {{fieldLabel}}{{#isRequired}} <span class="required-indicator">*</span>{{/isRequired}}
+    </label>
+    <select name="submittedValues[{{fieldName}}]"
+        id="{{fieldName}}"
+        class="form-select {{#hasError}}is-invalid{{/hasError}}"
+        {{#isRequired}}required{{/isRequired}}>
+        {{#options}}
+        <option value="{{value}}" {{#selected}}selected{{/selected}}>{{label}}</option>
+        {{/options}}
+    </select>
+    {{#helpText}}<div class="form-text">{{helpText}}</div>{{/helpText}}
+    {{#hasError}}<div class="invalid-feedback">{{fieldError}}</div>{{/hasError}}
+</div>

package/templates/cms_forms/field_text.html

@@ -0,0 +1,16 @@
+<div class="form-field {{errorClass}} {{requiredClass}}">
+    <label for="{{fieldName}}" class="form-label">
+        {{fieldLabel}}{{#isRequired}} <span class="required-indicator">*</span>{{/isRequired}}
+    </label>
+    <input type="{{fieldType}}"
+           name="submittedValues[{{fieldName}}]"
+           id="{{fieldName}}"
+           value="{{fieldValue}}"
+           class="form-control {{#hasError}}is-invalid{{/hasError}}"
+           {{#isRequired}}required{{/isRequired}}
+    {{#placeholder}}placeholder="{{placeholder}}"{{/placeholder}}
+    {{#maxLength}}maxlength="{{maxLength}}"{{/maxLength}}
+    {{#pattern}}pattern="{{pattern}}"{{/pattern}} />
+    {{#helpText}}<div class="form-text">{{helpText}}</div>{{/helpText}}
+    {{#hasError}}<div class="invalid-feedback">{{fieldError}}</div>{{/hasError}}
+</div>

package/templates/cms_forms/field_textarea.html

@@ -0,0 +1,13 @@
+<div class="form-field {{errorClass}} {{requiredClass}}">
+    <label for="{{fieldName}}" class="form-label">
+        {{fieldLabel}}{{#isRequired}} <span class="required-indicator">*</span>{{/isRequired}}
+    </label>
+    <textarea name="submittedValues[{{fieldName}}]"
+        id="{{fieldName}}"
+        class="form-control {{#hasError}}is-invalid{{/hasError}}"
+        {{#isRequired}}required{{/isRequired}}
+        {{#placeholder}}placeholder="{{placeholder}}"{{/placeholder}}
+        {{#maxLength}}maxlength="{{maxLength}}"{{/maxLength}}>{{fieldValue}}</textarea>
+    {{#helpText}}<div class="form-text">{{helpText}}</div>{{/helpText}}
+    {{#hasError}}<div class="invalid-feedback">{{fieldError}}</div>{{/hasError}}
+</div>

package/templates/cms_forms/form.html

@@ -0,0 +1,22 @@
+{{#showSuccessMessage}}
+<div class="form-message form-success">
+    {{successMessage}}
+</div>
+{{/showSuccessMessage}}
+{{#showErrorMessage}}
+<div class="form-message form-error">
+    {{errorMessage}}
+</div>
+{{/showErrorMessage}}
+<form method="POST" action="{{submitUrl}}" class="{{cssClass}}">
+    <input type="hidden" name="formKey" value="{{formKey}}" />
+    <input type="hidden" name="successRedirect" value="{{successRedirect}}"/>
+    <input type="hidden" name="errorRedirect" value="{{errorRedirect}}"/>
+    <div class="hidden">
+        <input type="text" name="{{honeypotFieldName}}" value=""/>
+    </div>
+    {{&formFields}}
+    <div class="form-submit">
+        <button type="submit" class="btn btn-primary">{{submitButtonText}}</button>
+    </div>
+</form>

package/templates/css/styles.css

@@ -103,3 +103,7 @@ img {
     max-width: 100%;
     height: auto;
 }
+
+.hidden {
+    display: none;
+}

package/templates/js/functions.js

@@ -0,0 +1,144 @@
+/**
+ *
+ * Reldens - Functions
+ *
+ */
+
+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);
+}
+
+function showConfirmDialog(callback)
+{
+    let dialog = document.querySelector('.confirm-dialog');
+    if(!dialog){
+        return callback(false);
+    }
+    dialog.showModal();
+    let confirmButton = dialog.querySelector('.dialog-confirm');
+    let cancelButton = dialog.querySelector('.dialog-cancel');
+    let onConfirm = () => {
+        dialog.close();
+        callback(true);
+        confirmButton.removeEventListener('click', onConfirm);
+        cancelButton.removeEventListener('click', onCancel);
+    };
+    let onCancel = () => {
+        dialog.close();
+        callback(false);
+        confirmButton.removeEventListener('click', onConfirm);
+        cancelButton.removeEventListener('click', onCancel);
+    };
+    confirmButton.addEventListener('click', onConfirm);
+    cancelButton.addEventListener('click', onCancel);
+}
+
+function activateExpandCollapse()
+{
+    let expandCollapseButtons = document.querySelectorAll('[data-expand-collapse]');
+    if(expandCollapseButtons){
+        return;
+    }
+    for(let expandCollapseButton of expandCollapseButtons){
+        expandCollapseButton.addEventListener('click', (event) => {
+            let expandCollapseElement = document.querySelector(event.currentTarget.dataset.expandCollapse);
+            if(expandCollapseElement){
+                expandCollapseElement.classList.toggle('hidden');
+            }
+        });
+    }
+}
+
+function createModalContent(modalElement)
+{
+    if(modalElement.hasAttribute('data-modal-zoom-image')){
+        let modalContent = document.createElement('img');
+        modalContent.src = modalElement.getAttribute('data-modal-zoom-image');
+        modalContent.alt = modalElement.alt || 'Modal Image';
+        modalContent.classList.add('modal-zoom-image');
+        return modalContent;
+    }
+    return cloneElement(modalElement);
+}
+
+function activateModalElements()
+{
+    let modalElements = document.querySelectorAll('[data-toggle="modal"]');
+    if(!modalElements){
+        return;
+    }
+    for(let modalElement of modalElements){
+        if(!modalElement.id){
+            modalElement.id = 'modal-'+Math.random().toString(36).substr(2, 9);
+        }
+        modalElement.addEventListener('click', () => {
+            let overlayId = 'overlay-'+modalElement.id;
+            let existingOverlay = document.querySelector('#'+overlayId);
+            if(existingOverlay){
+                existingOverlay.style.display = 'block';
+                document.body.style.overflow = 'hidden';
+                return;
+            }
+            let overlay = document.createElement('div');
+            overlay.id = overlayId;
+            overlay.classList.add('modal-overlay');
+            let modal = document.createElement('div');
+            modal.classList.add('modal');
+            modal.classList.add('clickable');
+            let modalContent = createModalContent(modalElement);
+            modalContent.classList.add('clickable');
+            modal.appendChild(modalContent);
+            overlay.appendChild(modal);
+            document.body.appendChild(overlay);
+            document.body.style.overflow = 'hidden';
+            modalContent.addEventListener('click', () => {
+                document.body.style.overflow = '';
+                document.body.removeChild(overlay);
+            });
+            modal.addEventListener('click', (e) => {
+                if(modal === e.target){
+                    document.body.style.overflow = '';
+                    document.body.removeChild(overlay);
+                }
+            });
+            overlay.addEventListener('click', (e) => {
+                if(overlay === e.target){
+                    document.body.style.overflow = '';
+                    document.body.removeChild(overlay);
+                }
+            });
+        });
+    }
+}

package/templates/js/scripts.js

@@ -16,4 +16,9 @@ document.addEventListener('DOMContentLoaded', function() {
     if(copyRightYear){
         copyRightYear.innerHTML = String((new Date()).getFullYear());
     }
+
+    activateExpandCollapse();
+
+    activateModalElements();
+
 });

package/templates/page.html

@@ -29,13 +29,19 @@
     {{#canonical_url}}
     <link rel="canonical" href="{{canonical_url}}"/>
     {{/canonical_url}}
+    <!-- favicons -->
+    <meta name="msapplication-config" content="[asset(/favicons/default/browserconfig.xml)]"/>
+    <link rel="icon" href="[asset(/favicons/default/favicon.ico)]" type="image/x-icon"/>
+    <link rel="shortcut icon" href="[asset(/favicons/default/favicon.ico)]" type="image/x-icon">
+    <link rel="manifest" href="[asset(/favicons/default/site.webmanifest)]"/>
     <!-- CSS and JS -->
-    <link href="/css/styles.css" rel="stylesheet"/>
-    <script src="/js/cookie-consent.js"></script>
+    <link rel="stylesheet" href="[url(/css/styles.css)]"/>
+    <script defer src="[url(/js/cookie-consent.js)]"></script>
 </head>
 <body class="{{siteHandle}}">
-    {{&content}}
-    {{>cookie-consent}}
-    <script type="text/javascript" defer src="/js/scripts.js"></script>
+{{&content}}
+{{>cookie-consent}}
+<script defer type="text/javascript" src="[url(/js/functions.js)]"></script>
+<script defer type="text/javascript" src="[url(/js/scripts.js)]"></script>
 </body>
 </html>

package/templates/partials/pagedCollection.html

@@ -3,7 +3,7 @@
     {{&collectionContentForCurrentPage}}
 </div>
 <div class="row pager-container">
-    <div class="pagination col-lg-12 mt-2 mb-2">
+    <div class="pagination col-lg-12">
         <ul>
             {{#prevPageUrl}}
             <li class="previous previous-page"><a href="{{ prevPageUrl }}">{{&prevPageLabel }}</a></li>

package/lib/admin-translations.js

@@ -1,56 +0,0 @@
-/**
- *
- * Reldens - AdminTranslations
- *
- */
-
-class AdminTranslations
-{
-
-    static appendTranslations(translations)
-    {
-        // @TODO - BETA - Fix translations, use snippets, include new snippets under the basic config script.
-        let adminTranslations = {
-            messages: {
-                loginWelcome: 'CMS - Login',
-                reldensTitle: 'Reldens - CMS',
-                reldensSlogan: 'You can do it',
-                reldensDiscordTitle: 'Join our Discord server!',
-                reldensDiscordText: 'Talk with the creators and other Reldens users',
-                reldensGithubTitle: 'Find us on GitHub!',
-                reldensGithubText: 'Need a new feature?'
-                    +' Would you like to contribute with code?'
-                    +' Find the source code or create an issue in GitHub',
-                reldensLoading: 'Loading...',
-                confirmClearCacheMessage: 'Are you sure you want to clear all cache? This action cannot be undone.',
-                clearCacheWarning: 'This will clear all cached routes and may impact site performance temporarily.'
-            },
-            labels: {
-                navigation: 'Reldens - CMS',
-                adminVersion: 'Admin: {{version}}',
-                loginWelcome: 'Reldens',
-                pages: 'Server Management',
-                management: 'Management',
-                shuttingDown: 'Server is shutting down in:',
-                submitShutdownLabel: 'Shutdown Server',
-                submitCancelLabel: 'Cancel Server Shutdown',
-                cleanCache: 'Clean Cache',
-                clearAllCache: 'Clear All Cache',
-                confirmClearCache: 'Confirm Clear Cache',
-                warning: 'Warning:',
-                cancel: 'Cancel',
-                confirm: 'Continue',
-            }
-        };
-        for(let i of Object.keys(translations)){
-            if(!adminTranslations[i]){
-                adminTranslations[i] = {};
-            }
-            Object.assign(adminTranslations[i], translations[i]);
-        }
-        return adminTranslations;
-    }
-
-}
-
-module.exports.AdminTranslations = AdminTranslations;