Merge pull request #1449 from danskernesdigitalebibliotek/DDFFORM-810…

…-links-open-in-new-window-tab-v2

Open links in new window - DDFFORM-810

composer.json

@@ -116,6 +116,7 @@
         "drupal/default_content": "^2.0@alpha",
         "drupal/devel": "^5.1",
         "drupal/dynamic_entity_reference": "^3.1",
+        "drupal/editor_advanced_link": "^2.2",
         "drupal/entity_clone_template": "^2.0",
         "drupal/enum_field": "^1.0",
         "drupal/facets": "^2.0",

config/sync/core.entity_form_display.paragraph.banner.default.yml

@@ -9,7 +9,7 @@ dependencies:
     - field.field.paragraph.banner.field_underlined_title
     - paragraphs.paragraphs_type.banner
   module:
-    - linkit
+    - dpl_link
     - media_library
     - media_library_edit
     - text
@@ -36,14 +36,15 @@ content:
       media_library_edit:
         show_edit: '1'
   field_banner_link:
-    type: linkit
+    type: dpl_link_options
     weight: 0
     region: content
     settings:
       placeholder_url: ''
       placeholder_title: ''
       linkit_profile: default
       linkit_auto_link_text: false
+      target_blank: 0
     third_party_settings: {  }
   field_underlined_title:
     type: text_textarea

config/sync/core.entity_form_display.paragraph.card_grid_automatic.default.yml

@@ -12,8 +12,8 @@ dependencies:
     - field.field.paragraph.card_grid_automatic.field_title
     - paragraphs.paragraphs_type.card_grid_automatic
   module:
+    - dpl_link
     - field_group
-    - link
     - select2
 third_party_settings:
   field_group:
@@ -82,12 +82,15 @@ content:
       match_limit: 10
     third_party_settings: {  }
   field_more_link:
-    type: link_default
+    type: dpl_link_options
     weight: 4
     region: content
     settings:
       placeholder_url: ''
       placeholder_title: ''
+      target_blank: 0
+      linkit_profile: default
+      linkit_auto_link_text: false
     third_party_settings: {  }
   field_title:
     type: string_textfield

config/sync/core.entity_form_display.paragraph.card_grid_manual.default.yml

@@ -8,8 +8,8 @@ dependencies:
     - field.field.paragraph.card_grid_manual.field_title
     - paragraphs.paragraphs_type.card_grid_manual
   module:
+    - dpl_link
     - dynamic_entity_reference
-    - link
 id: paragraph.card_grid_manual.default
 targetEntityType: paragraph
 bundle: card_grid_manual
@@ -26,12 +26,15 @@ content:
       placeholder: 'Search content..'
     third_party_settings: {  }
   field_more_link:
-    type: link_default
+    type: dpl_link_options
     weight: 10
     region: content
     settings:
       placeholder_url: ''
       placeholder_title: ''
+      target_blank: 0
+      linkit_profile: default
+      linkit_auto_link_text: false
     third_party_settings: {  }
   field_title:
     type: string_textfield

config/sync/core.entity_form_display.paragraph.hero.default.yml

@@ -13,7 +13,7 @@ dependencies:
     - paragraphs.paragraphs_type.hero
   module:
     - datetime
-    - link
+    - dpl_link
     - media_library
     - select2
     - text
@@ -62,12 +62,15 @@ content:
       media_types: {  }
     third_party_settings: {  }
   field_hero_link:
-    type: link_default
+    type: dpl_link_options
     weight: 4
     region: content
     settings:
       placeholder_url: ''
       placeholder_title: ''
+      linkit_profile: default
+      linkit_auto_link_text: false
+      target_blank: 0
     third_party_settings: {  }
   field_hero_title:
     type: string_textfield

config/sync/core.extension.yml

@@ -48,6 +48,7 @@ module:
   dpl_instant_loan: 0
   dpl_library_agency: 0
   dpl_library_token: 0
+  dpl_link: 0
   dpl_loans: 0
   dpl_login: 0
   dpl_mail: 0
@@ -80,6 +81,7 @@ module:
   dynamic_entity_reference: 0
   dynamic_page_cache: 0
   editor: 0
+  editor_advanced_link: 0
   entity_clone: 0
   entity_clone_template: 0
   entity_reference_revisions: 0

config/sync/editor.editor.basic.yml

@@ -37,6 +37,9 @@ settings:
       multiBlock: true
     ckeditor5_sourceEditing:
       allowed_tags: {  }
+    editor_advanced_link_link:
+      enabled_attributes:
+        - target
     linkit_extension:
       linkit_enabled: true
       linkit_profile: default

config/sync/editor.editor.limited.yml

@@ -23,6 +23,9 @@ settings:
   plugins:
     ckeditor5_sourceEditing:
       allowed_tags: {  }
+    editor_advanced_link_link:
+      enabled_attributes:
+        - target
     linkit_extension:
       linkit_enabled: true
       linkit_profile: default

config/sync/filter.format.basic.yml

@@ -12,6 +12,6 @@ filters:
     status: true
     weight: -10
     settings:
-      allowed_html: '<br> <p> <h2> <h3> <strong> <em> <blockquote> <a href data-entity-type data-entity-uuid data-entity-substitution> <ul> <ol reversed start> <li> <table> <tr> <td rowspan colspan> <th rowspan colspan> <thead> <tbody> <tfoot> <caption>'
+      allowed_html: '<br> <p> <h2> <h3> <strong> <em> <blockquote> <a href target="_blank" data-entity-type data-entity-uuid data-entity-substitution> <ul> <ol reversed start> <li> <table> <tr> <td rowspan colspan> <th rowspan colspan> <thead> <tbody> <tfoot> <caption>'
       filter_html_help: true
       filter_html_nofollow: false

config/sync/filter.format.limited.yml

@@ -12,6 +12,6 @@ filters:
     status: true
     weight: -10
     settings:
-      allowed_html: '<br /> <p> <strong> <em> <a href data-entity-type data-entity-uuid data-entity-substitution>'
+      allowed_html: '<br> <p> <strong> <em> <a href target="_blank" data-entity-type data-entity-uuid data-entity-substitution>'
       filter_html_help: true
       filter_html_nofollow: false

web/modules/custom/dpl_link/README.md

@@ -0,0 +1,23 @@
+# Overview
+
+The DPL Linkit Options module extends the functionality of the Linkit module by
+adding an option to open links in a new window or tab. This custom field widget
+allows users to specify whether a link should open in the current window or a
+new one when creating or editing link fields in Drupal.
+
+## Configuration
+
+Once the module is enabled, you can configure the link fields in your content
+types to use the new widget:
+
+1. Navigate to the "Manage form display" page of the content type you want
+to configure.
+2. Select "DPL Linkit with options" as the widget type.
+3. Save the field settings.
+
+## Usage
+
+When editing a content item with the configured link field, you will see a new
+checkbox option labeled "Open link in new window/tab." Check this box if you
+want the link to open in a new window or tab. If left unchecked, the link will
+open in the current window.

web/modules/custom/dpl_link/dpl_link.info.yml

@@ -0,0 +1,7 @@
+name: "DPL Link"
+type: module
+description: "Add functionality to link field"
+package: DPL
+core_version_requirement: ^10 || ^11
+dependencies:
+  - drupal:linkit

web/modules/custom/dpl_link/src/Plugin/Field/FieldWidget/LinkitOptionsWidget.php

@@ -0,0 +1,81 @@
+<?php
+
+namespace Drupal\dpl_link\Plugin\Field\FieldWidget;
+
+use Drupal\Core\Field\FieldItemListInterface;
+use Drupal\Core\Form\FormStateInterface;
+use Drupal\link\Plugin\Field\FieldType\LinkItem;
+use Drupal\linkit\Plugin\Field\FieldWidget\LinkitWidget;
+
+/**
+ * Plugin implementation of the 'dpl_link_options' widget.
+ *
+ * @FieldWidget(
+ *   id = "dpl_link_options",
+ *   label = @Translation("DPL Linkit with options"),
+ *   field_types = {
+ *     "link"
+ *   }
+ * )
+ */
+class LinkitOptionsWidget extends LinkitWidget {
+
+  /**
+   * {@inheritDoc}
+   *
+   * @return array<mixed>
+   *   See LinkitWidget.
+   */
+  public static function defaultSettings(): array {
+    return [
+      'target_blank' => 0,
+    ] + parent::defaultSettings();
+  }
+
+  /**
+   * {@inheritDoc}
+   */
+  public function formElement(FieldItemListInterface $items, $delta, array $element, array &$form, FormStateInterface $form_state): array {
+    $element = parent::formElement($items, $delta, $element, $form, $form_state);
+    $item = $items[$delta] ?? NULL;
+    $target = 'self';
+
+    if ($item instanceof LinkItem) {
+      $target = $item->getValue()['options']['target'] ?? $target;
+    }
+
+    $element['target_blank'] = [
+      '#type' => 'checkbox',
+      '#title' => $this->t('Open link in new window/tab'),
+      '#default_value' => ($target === '_blank'),
+    ];
+
+    return $element;
+  }
+
+  /**
+   * {@inheritDoc}
+   *
+   * @param array<mixed> $values
+   *   See LinkitWidget.
+   * @param array<mixed> $form
+   *   See LinkitWidget.
+   * @param \Drupal\Core\Form\FormStateInterface $form_state
+   *   See LinkitWidget.
+   *
+   * @return array<mixed>
+   *   See LinkitWidget.
+   */
+  public function massageFormValues(array $values, array $form, FormStateInterface $form_state): array {
+    $values = parent::massageFormValues($values, $form, $form_state);
+
+    foreach ($values as $delta => $value) {
+      if (!empty($value['target_blank'])) {
+        $values[$delta]['options']['target'] = '_blank';
+      }
+    }
+
+    return $values;
+  }
+
+}

web/modules/custom/dpl_update/dpl_update.install

@@ -149,6 +149,8 @@ function dpl_update_install(): string {
   $messages[] = dpl_update_update_10012();
   $messages[] = dpl_update_update_10013();
   $messages[] = dpl_update_update_10014();
+  $messages[] = dpl_update_update_10015();
+  $messages[] = dpl_update_update_10016();
 
   return implode('\r\n', $messages);
 }
@@ -261,3 +263,17 @@ function dpl_update_update_10014(): string {
     'password_policy_character_types',
   ]);
 }
+
+/**
+ * Installing editor_advanced_link.
+ */
+function dpl_update_update_10015(): string {
+  return _dpl_update_install_modules(['editor_advanced_link']);
+}
+
+/**
+ * Installing dpl_link.
+ */
+function dpl_update_update_10016(): string {
+  return _dpl_update_install_modules(['dpl_link']);
+}

web/themes/custom/novel/templates/components/card-grid-link.html.twig

@@ -1,3 +1,5 @@
 {% for item in items %}
-  <a href="{{ item.content['#url'] }}" class="card-grid__link">{{ item.content['#title'] }}</a>
+  {% set url = item.content['#url'] %}
+  {% set target = url.options.target|default('_self') %}
+  <a href="{{ url }}" target="{{ target }}" class="card-grid__link link-tag">{{ item.content['#title'] }}</a>
 {% endfor %}

web/themes/custom/novel/templates/components/hero.html.twig

@@ -6,8 +6,11 @@
 %}
 
 <section {{ attributes.addClass(classes) }}>
-  {% if url %}
-    <a href="{{ url }}" class="hero__content arrow arrow__hover--right-large">
+  {% if link %}
+    {% set url = link.0['#url'] %}
+    {% set target = url.options.target|default('_self') %}
+
+    <a href="{{ url }}" target="{{ target }}" class="hero__content arrow arrow__hover--right-large">
       {% include "@novel/components/hero-inner.html.twig" %}
 
       <div>