Shift maintext into fields_manager.

iamrobert
Topic Author
Offline
Platinum Member

8 months 3 weeks ago #84240 by iamrobert

Shift maintext into fields_manager. was created by iamrobert

Hi,

I'm trying to recreate my item manager from j3 for my clients. Old one:

But I'm stuck with trying to shift the default text editor into the fields_manager

Is it possible to add the description to the text fields_manager:

Or is there some way to do it via PHP?

I really want to put it where I want on my items page.

Thanks,

Robert

Please Log in or Create an account to join the conversation.

micker
Offline
Administrator

8 months 3 weeks ago #84241 by micker

Replied by micker on topic Shift maintext into fields_manager.

ah .... not sure but maybe the solution is to add text field compatibility in coreprops field. But not sure that can works

FLEXIcontent is Free but involves a very big effort on our part.
Like the our support? (for a bug-free FC, despite being huge extension) Like the features? Like the ongoing development and future commitment to FLEXIcontent?
-- Add your voice to the FLEXIcontent JED listing reviews. Thanks![/size]

Please Log in or Create an account to join the conversation.

iamrobert
Topic Author
Offline
Platinum Member

8 months 3 weeks ago #84242 by iamrobert

Replied by iamrobert on topic Shift maintext into fields_manager.

Hi Micker,

Thanks that would be the best solution, but don't think I can implement it.

So, I went with a JS solution:

Steps I took:

Update layout main.php:
In the main.php (should customize to your own layout):

administrator/components/com_flexicontent/views/item/tmpl/layouts/tabs/main.php

The code below unsets the main description field and puts it inside #move_textarea.

Code:

//UNSET MAIN TEXT DESCRIPTION
if (array_key_exists('text', $captured)) {
    $text_block = $captured['text'];
    unset($captured['text']);
}

//Place description:
echo '<div id="move_textarea">';
echo $text_block;
echo '</div>';

Add JS:
We use JS to move it above the field (#label_outer_fcfield_23) we want to show it.

I added it directly to the bottom of the file - main.php.

Code:

//MOVE THE TEXT EDITOR:
window.onload = function() {
  // Get the elements
  var sourceElement = document.querySelector("#move_textarea");
  //FIELD ABOVE
  var targetElement = document.querySelector("#label_outer_fcfield_23").parentNode;
  // Ensure both elements are found
  if (sourceElement && targetElement) {
    // Clone the source element (including events)
    var clone = sourceElement.cloneNode(true);
    // Insert the clone before the target element
    targetElement.parentNode.insertBefore(clone, targetElement);
    // Optionally, remove the source element
    sourceElement.parentNode.removeChild(sourceElement);
  }
};

As we need to use window.onload to relocate the editor, it causes issues with the XTD buttons underneath the text editor.

The issues are:
1) Content doesn't load on modal pop-up
2) Clicking a link in the modal doesn't close it

So - I implemented the following code to handle this

Code:

//SOLVE xtd-button not closing
document.addEventListener('shown.bs.modal', function (event) {
  let modalIds = [
    'jform_text_fcfile_modal',
    'jform_text_fcitem_modal',
    'jform_text_fccat_modal',
    'jform_text_editors-xtd_module_modal',
    'jform_text_editors-xtd_menu_modal',
    'jform_text_editors-xtd_fields_modal',
  ];
  if (modalIds.includes(event.target.id)) {
    let modal = event.target;
    let modalInstance = bootstrap.Modal.getOrCreateInstance(modal);
    Joomla.Modal.setCurrent(modal);
    let iframeContent = modal.dataset.iframe;
    let modalBody = modal.querySelector('.modal-body');
    modalBody.innerHTML = iframeContent;
    // Get the iframe and add 'onload' event listener
    var iframe = modal.querySelector('iframe');
    iframe.onload = function() {
      // Get the iframe document
      var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
      // Event delegation for .select-link
      iframeDoc.addEventListener('click', function(e) {
        if (e.target.matches('.select-link, .js-module-insert')) {
          modalInstance.hide();
        }
      });
    };
  }
});

There's still a minor JS console issue when you click close:

window.parent.Joomla.Modal.getCurrent(...).close is not a function

but it doesn't affect the site.

If anyone else has a better solution I would love to know.

Please Log in or Create an account to join the conversation.