feat: LinkField, CmsDialog API

django-cms · Dec 19, 2024 · e9d3b48 · e9d3b48
1 parent 3ff16c5
commit e9d3b48
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 26 deletions.
diff --git a/private/css/cms.balloon-toolbar.css b/private/css/cms.balloon-toolbar.css
@@ -40,3 +40,7 @@
 .cms-editor-inline-wrapper:not(:has(.ProseMirror-focused)) .cms-balloon {
     animation: 0s linear 0.2s forwards delayedHide;
 }
+
+dialog.cms-form-dialog.cms-balloon-menu {
+    padding: 2px 0.4rem;
+}
diff --git a/private/css/cms.linkfield.css b/private/css/cms.linkfield.css
@@ -3,9 +3,13 @@
         font-size: 0.8rem;
         position: relative;
         input[type="text"] {
-            padding-inline-end: 3em;
-            background: var(--dca-white) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="16" fill="%23808080" viewBox="0 0 16 16"><path d="M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/></svg>') no-repeat inline-end center;
+            padding-inline-end: 2em;
+            background: var(--dca-white) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="16" fill="%23808080" viewBox="0 0 16 16"><path d="M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/></svg>') no-repeat right center;
+            &[dir=rtl] {
+                background-position: left center;
+            }
             background-size: auto 1em;
+            font-size: 0.8rem;
         }
         .cms-linkfield-selected {
             font-weight: bold;

diff --git a/private/css/cms.tiptap.css b/private/css/cms.tiptap.css
@@ -59,7 +59,7 @@
         [role="button"].show > .dropdown-content {
             visibility: visible;
         }
-        padding: 6px 0.8rem;
+        padding: 2px 0.4rem;
         /* border-radius: 3px; */
         margin: 0  !important;
         font-size: 1rem;
@@ -118,6 +118,7 @@
         vertical-align: middle;
         line-height: 1.2;
         padding: 6px 4px  !important;
+        z-index: 1;
         &:active, &.active {
             background: var(--dca-gray-lighter, var(--selected-bg))  !important;
         }

diff --git a/private/js/cms.dialog.js b/private/js/cms.dialog.js
@@ -277,9 +277,9 @@ class CmsForm {
             const el_pos = this.el.getBoundingClientRect();
             if (options.x > window.innerWidth / 2) {
                 this.dialog.classList.add("right");
-                this.dialog.style.right = ( el_pos.x + el_pos.width - options.x - 28) + 'px';
+                this.dialog.style.right = ( el_pos.x + el_pos.width - options.x - 24) + 'px';
             } else {
-                this.dialog.style.left = (options.x - el_pos.x - 28) + 'px';
+                this.dialog.style.left = (options.x - el_pos.x - 24) + 'px';
             }
             this.dialog.style.top = (options.y - el_pos.y + 5) + 'px';
             this.dialog.style.transform = 'none';

diff --git a/private/js/cms.linkfield.js b/private/js/cms.linkfield.js
@@ -2,46 +2,33 @@
 /* jshint esversion: 11 */
 /* global document, window, console */
 
-import "../css/cms.linkfield.css";
 
 class LinkField {
     constructor(element, options) {
         this.options = options;
         this.urlElement = element;
         this.form = element.closest("form");
-        this.selectElement = this.form.querySelector(`input[name="${this.urlElement.id + '_select'}"]`);
+        this.selectElement = this.form?.querySelector(`input[name="${this.urlElement.id + '_select'}"]`);
         if (this.selectElement) {
             this.urlElement.setAttribute('type', 'hidden');  // Two input types?
             this.selectElement.setAttribute('type', 'hidden');  // Make hidden and add common input
-            this.prepareField();
+            this.createInput();
             this.registerEvents();
         }
+        this.populateField();
     }
 
-    prepareField() {
+    createInput() {
         this.inputElement = document.createElement('input');
         this.inputElement.setAttribute('type', 'text');
         this.inputElement.setAttribute('autocomplete', 'off');
         this.inputElement.setAttribute('spellcheck', 'false');
         this.inputElement.setAttribute('autocorrect', 'off');
         this.inputElement.setAttribute('autocapitalize', 'off');
-        this.inputElement.setAttribute('placeholder', this.urlElement.getAttribute('placeholder'));
+        this.inputElement.setAttribute('placeholder', this.urlElement.getAttribute('placeholder') ||'');
+        this.inputElement.className = this.urlElement.className;
         this.inputElement.classList.add('cms-linkfield-input');
-        if (this.selectElement.value) {
-            this.handleChange({target: this.selectElement});
-            this.inputElement.classList.add('cms-linkfield-selected');
-        } else if (this.urlElement.value) {
-            this.inputElement.value = this.urlElement.value;
-            this.inputElement.classList.remove('cms-linkfield-selected');
-        }
-        if (this.selectElement.getAttribute('data-value')) {
-            this.inputElement.value = this.selectElement.getAttribute('data-value');
-            this.inputElement.classList.add('cms-linkfield-selected');
-        }
-        if (this.selectElement.getAttribute('data-href')) {
-            this.urlElement.value = this.selectElement.getAttribute('data-href');
-            this.inputElement.classList.add('cms-linkfield-selected');
-        }
+
         this.wrapper = document.createElement('div');
         this.wrapper.classList.add('cms-linkfield-wrapper');
         this.urlElement.insertAdjacentElement('afterend', this.wrapper);
@@ -53,6 +40,31 @@ class LinkField {
         }
         this.wrapper.appendChild(this.inputElement);
         this.wrapper.appendChild(this.dropdown);
+
+    }
+
+    populateField() {
+        if (this.selectElement) {
+            if (this.selectElement.value) {
+                this.handleChange();
+                this.inputElement.classList.add('cms-linkfield-selected');
+            } else if (this.urlElement.value) {
+                this.inputElement.value = this.urlElement.value;
+                this.inputElement.classList.remove('cms-linkfield-selected');
+            } else {
+                this.inputElement.value = '';
+                this.inputElement.classList.remove('cms-linkfield-selected');
+            }
+            if (this.selectElement.getAttribute('data-value')) {
+                this.inputElement.value = this.selectElement.getAttribute('data-value');
+                this.inputElement.classList.add('cms-linkfield-selected');
+            }
+            if (this.selectElement.getAttribute('data-href')) {
+                this.urlElement.value = this.selectElement.getAttribute('data-href');
+                this.inputElement.classList.add('cms-linkfield-selected');
+            }
+            this.dropdown.innerHTML = '';  // CSS hides dropdown when empty
+        }
     }
 
     registerEvents() {
@@ -87,7 +99,7 @@ class LinkField {
        }
 
     showResults(response, page = 1) {
-        var currentSection;  // Keep track of the current section so that paginated data can be added
+        let currentSection;  // Keep track of the current section so that paginated data can be added
         if (page === 1) {
             // First page clears the dropdown
             this.dropdown.innerHTML = '';

diff --git a/private/js/cms.tiptap.js b/private/js/cms.tiptap.js
@@ -27,6 +27,7 @@ import { formToHtml, populateForm } from './cms.dialog';
 import LinkField from "./cms.linkfield";
 
 import "../css/cms.tiptap.css";
+import "../css/cms.linkfield.css";
 
 
 class CMSTipTapPlugin {