Рейтинг:0

Как добавить классы и атрибуты colorbox-load к ссылкам, исходящим из изображения svg?

флаг cn

У меня есть изображения SVG, которые добавляются к узлам через svg_image_field модуль. В них есть внутренние ссылки /load-parts-ajax/{nid}. Путь ведет к просмотру всплывающей страницы контента с этим путем /загрузить-части-ajax/%. Я пытаюсь открыть представление в цветовом поле. У меня есть это в моей реализации в Drupal 7, которая отлично работает. Мы установили модуль colorbox_node и использовали colorbox-узел класс, и это было очень легко.

Однако для Drupal 9 у меня установлен colorbox и его библиотека, и я пробовал colorbox_load, с ng_lightbox, и я добавил путь к разрешенным путям в конфигурации без кубиков. я тоже пытаюсь colorbox_simple_load позвонить цветная загрузка класс без везения.

(Я могу взломать рендеринг всей страницы просмотра сайта и все путем набивки cboxэлемент после урока, но я уверен, что это неправильно.)

Вот .js:

(функция ($, Друпал) {
  Drupal.behaviors.MY_MODULE = {
    прикрепить: функция (контекст, настройки) {
      $(документ).ajaxStop(функция() {
        setTimeout(function () { //необходимо добавить короткую паузу для повторного запуска colorbox
          $(".view-MY-POP-UP-VIEW", контекст).once().flexslider({
            анимация: «горки»,
            слайд-шоу: ложь,
            касание: ложное,
            анимацияЦикл: ложь,
          });
        }, 500);
      });

      $(".field--name-field-MY-IMAGE .svg_a", context).each(function(index, item) {
        $(item).attr("href", $(item).attr("xlink:href"));
        $(item).attr("внутренняя ширина данных", "304");
        $(item).attr("внутренняя высота данных", "532");
        $(item).attr("class", "colorbox-load");
      });
    }
  };
})(jQuery, Drupal);

И вот как я называю свои библиотеки .js: одна для отображения SVG в представлении, другая для отображения узла.

/**
 * Реализует hook_views_pre_render().
 */
функция MY_views_pre_render(\Drupal\views\ViewExecutable $view) {
  if (isset($view) && $view->storage->id() == 'MY_VIEW') {
    $view->element['#attached']['library'][] = 'MY_MODULE/MY-LIBRARY';
  }
}

/**
 * Реализует hook_preprocess_node().
 */
функция MY_preprocess_node(&$variables) {
  $узел = $переменные['узел'];
  если ($node->bundle() == 'МОЙ_УЗЕЛ') {
    $variables['#attached']['library'][] = 'MY_MODULE/MY-LIBRARY';
  }
}

Атрибуты из файла .js добавляются к ссылкам на изображения в обоих случаях, но цветная загрузка class, похоже, не распознается, поскольку ссылки просто открывают вид в новом окне.

Вот разметка, которая выглядит идентично рабочей разметке drupal 7 (кроме использования класса colorbox-load вместо colorbox-node)

<a id="e3_hyperlink" xlink:title="" xlink:href="/load-parts-ajax/251" target="_blank" class="colorbox-load" href="/load-parts-ajax/251" data-inner-width="304" data-inner-height="532">

Итак, прежде чем я по ошибке открою отчет об ошибке, есть ли что-то простое, что мне не хватает для реализации цветная загрузка class правильно, или что-то подобное должно работать так же, как оно есть?

РЕДАКТИРОВАТЬ: colorbox_simple_load имеет это на странице проекта:

$url = Url::fromUri('internal:/example.html');
$link = Link::fromTextAndUrl(t('View'), $url);
$output = $link->toRenderable();
$выход['#атрибуты']['класс'] = [
  'загрузка цветового поля',
];
colorbox_simple_load_page_attachments ($ output);

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

sonfd avatar
флаг in
Моя первая мысль заключается в том, что это потому, что вы добавляете классы цветовых рамок и метаданные через js.
tonytheferg avatar
флаг cn
Можете ли вы опубликовать альтернативное решение?
sonfd avatar
флаг in
Добавьте класс и атрибуты к ссылкам до их отображения. (Не используйте JavaScript, чтобы добавить их после загрузки страницы.)
tonytheferg avatar
флаг cn
Как лучше всего это сделать?
tonytheferg avatar
флаг cn
Ссылки находятся на изображении svg, поэтому я не думаю, что они доступны для серверной части Drupal.
sonfd avatar
флаг in
Хорошо, в качестве альтернативы, я думаю, вы могли бы попробовать повторно прикрепить поведение, например. в конце вашего поведения запустите `Drupal.attachBehaviors('.field--name-field-MY-IMAGE')`. Я думаю, проблема в том, что colorbox уже искал ссылки с классом colorbox, прежде чем вы добавите класс к своим ссылкам. Использование Drupal.attachBehaviors должно заставить colorbox перепроверить ссылки вашего svg.
tonytheferg avatar
флаг cn
классы были неправильными, обновлю вопрос `$(item).attr("class", "use-ajax"); $(item).attr("тип диалога данных", "colorbox");` должен быть использован
sonfd avatar
флаг in
Вы использовали `Drupal.attachBehaviors()`? или это решилось другим способом? В вашем последнем комментарии говорится, что вы собираетесь обновить вопрос с помощью нового javascript, который вы пробовали, однако я не вижу этого в вопросе.
tonytheferg avatar
флаг cn
Я планирую опубликовать то, что я сделал, в качестве ответа, когда у меня будет время. Я добавил `Drupal.attachBehaviors()`, но мне пришлось сделать это, чтобы классы добавлялись для анонимных пользователей. Первоначальная причина, по которой он не работал, заключалась в том, что классы, которые я использовал, не подходили для использования вместе с модулем colorbox_load.

Ответить или комментировать

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