diff --git a/private/css/cms.balloon-toolbar.css b/private/css/cms.balloon-toolbar.css index 19694d10..fb7a3e2a 100644 --- 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 index a850df26..262b9527 100644 --- 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,') no-repeat inline-end center; + padding-inline-end: 2em; + background: var(--dca-white) url('data:image/svg+xml;utf8,') 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 index e4ff5077..768d2fa3 100644 --- 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 index 9e31ab2a..ebd43576 100644 --- 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 index d40a3831..2bf7a4ce 100644 --- 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 index 39354c22..76d54059 100644 --- 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 {