Вы можете открыть медиа-рамку, чтобы выбрать вложение, связанное с другим вложением, которое вы редактируете в существующей медиа-рамке?

Вопрос или проблема

Я хочу иметь медиа-рамку, которая появляется при нажатии на кнопку на существующей медиа-рамке. Таким образом, я могу связать другое вложение с этим вложением.

Вот мой код с кликом, исходящим от селектора на исходной рамке.

  jQuery('*[id*=attachment_link]').on('click', function( event ){

  event.preventDefault();

  // Если медиа-рамка уже существует, откройте ее снова.
  if ( file_frame ) {
  // Установите ID поста на то, что нам нужно
  file_frame.uploader.uploader.param( 'post_id', set_to_post_id );
  // Откройте рамку
  file_frame.open();
  return;
  } else {
  // Установите ID поста wp.media, чтобы загрузчик захватывал нужный нам ID при инициализации
  wp.media.model.settings.post.id = set_to_post_id;
  }

  // Создайте медиа-рамку.
  file_frame = wp.media.frames.file_frame = wp.media({
  title: 'Выберите изображение для загрузки',
  button: {
  text: 'Использовать это изображение',
  },
  multiple: false   // Установите на true, чтобы разрешить выбор нескольких файлов
  });

  // Когда выбирается изображение, выполняется обратный вызов.
  file_frame.on( 'select', function() {
  // Мы установили multiple в false, чтобы получить только одно изображение от загрузчика
  attachment = file_frame.state().get('selection').first().toJSON();

  // Сделайте что-то с attachment.id и/или attachment.url здесь
  //$( '#image-preview' ).attr( 'src', attachment.url ).css( 'width', 'auto' );
  $( '*[id*=attachment_link]' ).val( attachment.id );

  // Восстановите основной ID поста
  wp.media.model.settings.post.id = wp_media_post_id;
  });

  // Наконец, откройте модальное окно
  file_frame.open();
  });

  // Восстановите основной ID, когда нажата кнопка добавления медиа
  jQuery( 'a.add_media' ).on( 'click', function() {
  wp.media.model.settings.post.id = wp_media_post_id;
  });
  });

Этот вопрос показывает пример того, как можно иметь две медиа-рамки по двум причинам.

Как создать разные рамки загрузчика медиа / отфильтровать библиотеку в зависимости от пользовательского действия

Ответ или решение

Конечно, я рад помочь вам разобраться в вопросе открытия медиа-рамки для выбора вложения, которое можно ассоциировать с другим редактируемым вложением. Рассмотрим ваш код и необходимые шаги для достижения вашей цели, а также проанализируем, как это можно улучшить и адаптировать для ваших нужд.

Введение

Ваша задача заключается в необходимости открытия новой медиа-рамки при нажатии на кнопку в существующей рамке. Это позволит пользователю выбирать дополнительные вложения и связывать их с уже существующими. Давайте подробно рассмотрим ваш код и необходимые настройки.

Анализ вашего кода

Ваш код имеет следующие ключевые элементы:

  1. Событие клика: Использование селектора для активации события клика.
  2. Проверка существования медиа-рамки: Предотвращение создания новой рамки, если аналогичная уже существует.
  3. Инициализация медиа-рамки: Настройка параметров, таких как заголовок, кнопка и возможность множественного выбора.
  4. Обработка выбора: Когда пользователь выбирает изображение, вы выполняете определенные действия с его ID и URL.

Рекомендации по улучшению

  1. Создание нового экземпляра медиа-рамки:
    Убедитесь, что вы правильно инициализируете новое окно для выбора вложения, если рамка еще не была создана. Это позволяет избежать лишнего кода и улучшает структуру вашего кода.

  2. Использование модификаторов:
    Вы можете добавлять дополнительные функции для обработчиков событий, что улучшит читаемость и управление кодом.

  3. Значения по умолчанию:
    Убедитесь, что значения по умолчанию для post.id правильно устанавливаются каждый раз, когда пользователь открывает медиа-рамку. Это позволит избежать путаницы с предыдущими выборами.

Пример улучшенного кода

Вот как вы можете модернизировать ваш код с учетом вышеизложенных рекомендаций:

jQuery(document).ready(function($) {
  var file_frame; // Объявляем глобальную переменную для медиа-рамки
  var wp_media_post_id = wp.media.model.settings.post.id; // Сохраняем текущий ID поста

  // Обработчик клика по элементу
  $('*[id*=attachment_link]').on('click', function(event) {
    event.preventDefault();

    // Если рамка уже существует, переоткрываем её
    if (file_frame) {
      file_frame.uploader.uploader.param('post_id', set_to_post_id);
      file_frame.open();
      return;
    }

    // Устанавливаем ID поста для медиа-рамки
    wp.media.model.settings.post.id = set_to_post_id;

    // Создаем новую медиа-рамку
    file_frame = wp.media({
      title: 'Выберите изображение для загрузки',
      button: {
        text: 'Использовать это изображение',
      },
      multiple: false // Отключаем множественный выбор
    });

    // Обработка выбора изображения
    file_frame.on('select', function() {
      var attachment = file_frame.state().get('selection').first().toJSON();

      // Здесь вы можете обработать attachment.id и/или attachment.url
      $('*[id*=attachment_link]').val(attachment.id);
      // Можно также обновить предварительный просмотр изображения
      $('#image-preview').attr('src', attachment.url).css('width', 'auto');

      // Восстанавливаем оригинальный ID поста
      wp.media.model.settings.post.id = wp_media_post_id;
    });

    // Открываем модальное окно
    file_frame.open();
  });

  // Восстанавливаем первоначальный ID, когда нажимается кнопка добавления медиа
  $('a.add_media').on('click', function() {
    wp.media.model.settings.post.id = wp_media_post_id;
  });
});

Заключение

С вышеизложенными улучшениями ваш код станет более структурированным и легким для понимания. Убедитесь, что вы постоянно проверяете свой код на наличие ошибок, особенно при работе с медиа-рамками, чтобы гарантировать стабильность и функциональность.

Если у вас есть дополнительные вопросы или вам нужна помощь с другими аспектами внедрения, не стесняйтесь обращаться. Успехов в разработке!

Оцените материал
Добавить комментарий

Капча загружается...