From 99d922ac6d1b0d68d6cab47b961fab36eb4f67d3 Mon Sep 17 00:00:00 2001
From: roshni <roshniupadhyay89@gmail.com>
Date: Mon, 13 Jan 2025 13:08:31 +0530
Subject: [PATCH 01/10] Issue# 3489112: Integrate responsive preview with
Navigation top bar
---
.../responsive_preview.device.desktop.yml | 10 ++
.../responsive_preview.device.mobile.yml | 10 ++
css/responsive-preview.navigation.css | 42 +++++
images/desktop.svg | 7 +
images/mobile.svg | 7 +
responsive_preview.libraries.yml | 1 +
responsive_preview.module | 6 +
src/Plugin/TopBarItem/ResponsiveIcons.php | 151 ++++++++++++++++++
src/ResponsivePreview.php | 33 ++--
.../responsive-preview-navigation.html.twig | 18 +++
10 files changed, 273 insertions(+), 12 deletions(-)
create mode 100644 config/install/responsive_preview.device.desktop.yml
create mode 100644 config/install/responsive_preview.device.mobile.yml
create mode 100644 css/responsive-preview.navigation.css
create mode 100644 images/desktop.svg
create mode 100644 images/mobile.svg
create mode 100644 src/Plugin/TopBarItem/ResponsiveIcons.php
create mode 100644 templates/responsive-preview-navigation.html.twig
diff --git a/config/install/responsive_preview.device.desktop.yml b/config/install/responsive_preview.device.desktop.yml
new file mode 100644
index 0000000..00264a3
--- /dev/null
+++ b/config/install/responsive_preview.device.desktop.yml
@@ -0,0 +1,10 @@
+id: desktop
+label: Desktop
+dimensions:
+ width: 1024
+ height: 768
+ dppx: 1.0
+orientation: landscape
+weight: 0
+status: 1
+langcode: en
diff --git a/config/install/responsive_preview.device.mobile.yml b/config/install/responsive_preview.device.mobile.yml
new file mode 100644
index 0000000..47463ac
--- /dev/null
+++ b/config/install/responsive_preview.device.mobile.yml
@@ -0,0 +1,10 @@
+id: mobile
+label: Mobile
+dimensions:
+ width: 768
+ height: 1280
+ dppx: 2
+orientation: portrait
+weight: 0
+status: 1
+langcode: en
\ No newline at end of file
diff --git a/css/responsive-preview.navigation.css b/css/responsive-preview.navigation.css
new file mode 100644
index 0000000..f057e06
--- /dev/null
+++ b/css/responsive-preview.navigation.css
@@ -0,0 +1,42 @@
+.responsive-preview-navigation-bar ul.responsive-preview-options {
+ display: flex;
+ list-style: none;
+ background-color: #EEE;
+ border-radius: 4px;
+ margin: 0;
+ padding: 0;
+}
+
+.responsive-preview-navigation-bar .responsive-preview-item-list {
+ transform: none !important;
+ inset: unset !important;
+ position: unset !important;
+}
+.responsive-preview-navigation-bar ul.responsive-preview-options button {
+ background-color: transparent;
+ border: 2px solid transparent;
+ padding: 3px 10px;
+ background-repeat: no-repeat;
+ background-position: center;
+ cursor: pointer;
+ background-size: 25px 25px;
+ width: 50px;
+ height: 35px;
+ font-size: 0;
+}
+.responsive-preview-navigation-bar ul.responsive-preview-options button.device-icon-mobile {
+ background-image: url("../images/mobile.svg");
+}
+.responsive-preview-navigation-bar ul.responsive-preview-options button.device-icon-desktop{
+ background-image: url("../images/desktop.svg");
+}
+.responsive-preview-navigation-bar ul.responsive-preview-options button.active {
+ background-color: #fff;
+ border-color: #EEE;
+ border-radius: 4px;
+}
+
+
+
+
+
diff --git a/images/desktop.svg b/images/desktop.svg
new file mode 100644
index 0000000..b89ba7b
--- /dev/null
+++ b/images/desktop.svg
@@ -0,0 +1,7 @@
+<svg version="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" width="25" height="25">
+ <title>desktop</title>
+ <style>
+ .s0 { fill: #000000 }
+ </style>
+ <path class="s0" d="m42 4h-36c-2.2 0-4 1.8-4 4v24c0 2.2 1.8 4 4 4h14v4h-4v4h16v-4h-4v-4h14c2.2 0 4-1.8 4-4v-24c0-2.2-1.8-4-4-4zm0 28h-36v-24h36z"/>
+</svg>
\ No newline at end of file
diff --git a/images/mobile.svg b/images/mobile.svg
new file mode 100644
index 0000000..848382f
--- /dev/null
+++ b/images/mobile.svg
@@ -0,0 +1,7 @@
+<svg version="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="25" height="25">
+ <title>mobile</title>
+ <style>
+ .s0 { fill: #000000 }
+ </style>
+ <path class="s0" d="m66 11h-32c-3.3 0-6 2.7-6 6v66c0 3.3 2.7 6 6 6h32c3.3 0 6-2.7 6-6v-66c0-3.3-2.7-6-6-6zm2 72c0 1.1-0.9 2-2 2h-32c-1.1 0-2-0.9-2-2v-4h36zm0-8h-36v-50h36zm0-54h-36v-4c0-1.1 0.9-2 2-2h32c1.1 0 2 0.9 2 2z"/>
+</svg>
\ No newline at end of file
diff --git a/responsive_preview.libraries.yml b/responsive_preview.libraries.yml
index afaa299..f234403 100644
--- a/responsive_preview.libraries.yml
+++ b/responsive_preview.libraries.yml
@@ -9,6 +9,7 @@ drupal.responsive-preview:
theme:
css/responsive-preview.theme.css: {}
css/responsive-preview.icons.css: {}
+ css/responsive-preview.navigation.css: {}
dependencies:
- core/once
- core/drupal.displace
diff --git a/responsive_preview.module b/responsive_preview.module
index 800892b..3711816 100644
--- a/responsive_preview.module
+++ b/responsive_preview.module
@@ -41,6 +41,12 @@ function responsive_preview_theme() {
return [
'item_list__responsive_preview' => $defaultVariables['item_list'],
+ 'responsive_preview_navigation' => [
+ 'variables' => [
+ 'devices' => [],
+ 'attributes' => [],
+ ],
+ ],
];
}
diff --git a/src/Plugin/TopBarItem/ResponsiveIcons.php b/src/Plugin/TopBarItem/ResponsiveIcons.php
new file mode 100644
index 0000000..8d9d043
--- /dev/null
+++ b/src/Plugin/TopBarItem/ResponsiveIcons.php
@@ -0,0 +1,151 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Drupal\responsive_preview\Plugin\TopBarItem;
+
+use Drupal\Core\Entity\EntityTypeManagerInterface;
+use Drupal\Core\Plugin\ContainerFactoryPluginInterface;
+use Drupal\Core\Session\AccountProxyInterface;
+use Drupal\Core\StringTranslation\StringTranslationTrait;
+use Drupal\Core\StringTranslation\TranslatableMarkup;
+use Drupal\Core\Cache\Cache;
+use Drupal\navigation\Attribute\TopBarItem;
+use Drupal\navigation\TopBarItemBase;
+use Drupal\navigation\TopBarRegion;
+use Symfony\Component\DependencyInjection\ContainerInterface;
+use Drupal\responsive_preview\ResponsivePreview;
+
+/**
+ * Provides the Responsive Icons top bar item.
+ */
+#[TopBarItem(
+ id: 'responsive_icons',
+ region: TopBarRegion::Tools,
+ label: new TranslatableMarkup('Responsive Icons'),
+)]
+final class ResponsiveIcons extends TopBarItemBase implements ContainerFactoryPluginInterface {
+
+ use StringTranslationTrait;
+
+ /**
+ * The ResponsivePreview service.
+ *
+ * @var \Drupal\responsive_preview\ResponsivePreview
+ */
+ private ResponsivePreview $responsivePreview;
+
+ /**
+ * The current user service.
+ *
+ * @var \Drupal\Core\Session\AccountProxyInterface
+ */
+ private AccountProxyInterface $currentUser;
+
+ /**
+ * The EntityTypeManager service.
+ *
+ * @var \Drupal\Core\Entity\EntityTypeManagerInterface
+ */
+ private EntityTypeManagerInterface $entityTypeManager;
+
+ /**
+ * Constructs a new ResponsiveIcons instance.
+ *
+ * @param array $configuration
+ * A configuration array containing plugin instance information.
+ * @param string $plugin_id
+ * The plugin ID for the plugin instance.
+ * @param mixed $plugin_definition
+ * The plugin implementation definition.
+ * @param \Drupal\responsive_preview\ResponsivePreview $responsivePreview
+ * The ResponsivePreview service.
+ * @param \Drupal\Core\Session\AccountProxyInterface $currentUser
+ * The current user service.
+ * @param \Drupal\Core\Entity\EntityTypeManagerInterface $entityTypeManager
+ * The entity type manager service.
+ */
+ public function __construct(
+ array $configuration,
+ string $plugin_id,
+ $plugin_definition,
+ ResponsivePreview $responsivePreview,
+ AccountProxyInterface $currentUser,
+ EntityTypeManagerInterface $entityTypeManager,
+ ) {
+ parent::__construct($configuration, $plugin_id, $plugin_definition);
+ $this->responsivePreview = $responsivePreview;
+ $this->currentUser = $currentUser;
+ $this->entityTypeManager = $entityTypeManager;
+ }
+
+ /**
+ * {@inheritdoc}
+ */
+ public static function create(ContainerInterface $container, array $configuration, $plugin_id, $plugin_definition): static {
+ return new static(
+ $configuration,
+ $plugin_id,
+ $plugin_definition,
+ $container->get('responsive_preview'),
+ $container->get('current_user'),
+ $container->get('entity_type.manager'),
+ );
+ }
+
+ /**
+ * {@inheritdoc}
+ */
+ public function build(): array {
+ try {
+ // Check if the user has the required permission.
+ if (!$this->currentUser->hasPermission('access responsive preview')) {
+ return [];
+ }
+
+ $device_definition = $this->entityTypeManager->getDefinition('responsive_preview_device');
+
+ // Add cache tags and contexts.
+ $cache_tags = Cache::mergeTags(
+ $device_definition->getListCacheTags(),
+ ['config:node_type_list']
+ );
+ $cache_contexts = Cache::mergeContexts(
+ ['route.is_admin', 'url', 'user.permissions']
+ );
+
+ $url = $this->responsivePreview->getPreviewUrl();
+
+ // Define the devices you want to filter by.
+ $device_names = ['mobile', 'desktop'];
+ // If a preview URL exists, build the navigation bar render array.
+ if ($url) {
+ return [
+ '#theme' => 'responsive_preview_navigation',
+ '#cache' => [
+ 'tags' => $cache_tags,
+ 'contexts' => $cache_contexts,
+ ],
+ '#attached' => [
+ 'library' => ['responsive_preview/drupal.responsive-preview'],
+ 'drupalSettings' => [
+ 'responsive_preview' => [
+ 'url' => ltrim($url, '/'),
+ ],
+ ],
+ ],
+ '#devices' => $this->responsivePreview->getRenderableDevicesList($device_names, FALSE),
+ '#attributes' => [
+ 'id' => 'responsive-preview-toolbar-tab',
+ 'class' => ['responsive-preview-navigation-bar'],
+ ],
+ ];
+ }
+ return [];
+ }
+ catch (\Exception $e) {
+ // Nothing to show if no devices found.
+ }
+ }
+
+}
diff --git a/src/ResponsivePreview.php b/src/ResponsivePreview.php
index dc01b65..22b2336 100644
--- a/src/ResponsivePreview.php
+++ b/src/ResponsivePreview.php
@@ -136,13 +136,19 @@ class ResponsivePreview {
* @throws \Drupal\Component\Plugin\Exception\InvalidPluginDefinitionException
* @throws \Drupal\Component\Plugin\Exception\PluginNotFoundException
*/
- public function getRenderableDevicesList() {
+ public function getRenderableDevicesList($device_name = NULL, $include_configure_link = TRUE) {
$links = [];
+ // Load devices with or without filtering by device name.
+ $device_properties = ['status' => 1];
+ if ($device_name) {
+ // Filter by the device name if provided.
+ $device_properties['label'] = $device_name;
+ }
/** @var \Drupal\responsive_preview\Entity\Device[] $devices */
$devices = $this->entityTypeManager
->getStorage('responsive_preview_device')
- ->loadByProperties(['status' => 1]);
+ ->loadByProperties($device_properties);
uasort($devices, [Device::class, 'sort']);
@@ -161,21 +167,24 @@ class ResponsivePreview {
'responsive-preview-device',
'responsive-preview-icon',
'responsive-preview-icon-active',
+ 'device-icon-' . $name,
],
],
];
}
- // Add a configuration link.
- $links['configure_link'] = [
- '#type' => 'link',
- '#title' => $this->t('Configure devices'),
- '#url' => Url::fromRoute('entity.responsive_preview_device.collection'),
- '#access' => $this->currentUser->hasPermission('administer responsive preview'),
- '#attributes' => [
- 'class' => ['responsive-preview-configure'],
- ],
- ];
+ // Conditionally add the configuration link.
+ if ($include_configure_link) {
+ $links['configure_link'] = [
+ '#type' => 'link',
+ '#title' => $this->t('Configure devices'),
+ '#url' => Url::fromRoute('entity.responsive_preview_device.collection'),
+ '#access' => $this->currentUser->hasPermission('administer responsive preview'),
+ '#attributes' => [
+ 'class' => ['responsive-preview-configure'],
+ ],
+ ];
+ }
return [
'#theme' => 'item_list__responsive_preview',
diff --git a/templates/responsive-preview-navigation.html.twig b/templates/responsive-preview-navigation.html.twig
new file mode 100644
index 0000000..c47c6f7
--- /dev/null
+++ b/templates/responsive-preview-navigation.html.twig
@@ -0,0 +1,18 @@
+{#
+/**
+ * @file
+ * Theme override for the responsive preview navigation.
+ *
+ * Available variables:
+ * - devices: A list of devices to be rendered. Each device contains:
+ * - attributes: HTML attributes to be applied to each device element.
+ * - content: The rendered content of the device (already sanitized).
+ * - attributes: HTML attributes to be applied to the main wrapper.
+ *
+ * @see template_preprocess_responsive_preview_navigation()
+ */
+#}
+
+<div {{ attributes }} >
+ {{ devices }}
+</div>
--
GitLab
From c98063eebf7c3773d39362cf859da32e0d808b44 Mon Sep 17 00:00:00 2001
From: roshni <roshniupadhyay89@gmail.com>
Date: Mon, 13 Jan 2025 13:44:13 +0530
Subject: [PATCH 02/10] Issue# 3489112: Fixed phpstan and stylelint issues
---
css/responsive-preview.navigation.css | 34 +++++++++++------------
src/Plugin/TopBarItem/ResponsiveIcons.php | 1 +
2 files changed, 18 insertions(+), 17 deletions(-)
diff --git a/css/responsive-preview.navigation.css b/css/responsive-preview.navigation.css
index f057e06..5232083 100644
--- a/css/responsive-preview.navigation.css
+++ b/css/responsive-preview.navigation.css
@@ -1,42 +1,42 @@
.responsive-preview-navigation-bar ul.responsive-preview-options {
display: flex;
list-style: none;
- background-color: #EEE;
+ background-color: #eee;
border-radius: 4px;
margin: 0;
padding: 0;
}
.responsive-preview-navigation-bar .responsive-preview-item-list {
- transform: none !important;
- inset: unset !important;
position: unset !important;
+ inset: unset !important;
+ transform: none !important;
}
+
.responsive-preview-navigation-bar ul.responsive-preview-options button {
+ width: 50px;
+ height: 35px;
+ cursor: pointer;
background-color: transparent;
border: 2px solid transparent;
+ border-radius: 4px;
padding: 3px 10px;
- background-repeat: no-repeat;
- background-position: center;
- cursor: pointer;
+ background-repeat: no-repeat;
+ background-position: center;
background-size: 25px 25px;
- width: 50px;
- height: 35px;
font-size: 0;
}
+
.responsive-preview-navigation-bar ul.responsive-preview-options button.device-icon-mobile {
- background-image: url("../images/mobile.svg");
+ background-image: url("../images/mobile.svg");
}
-.responsive-preview-navigation-bar ul.responsive-preview-options button.device-icon-desktop{
- background-image: url("../images/desktop.svg");
+
+.responsive-preview-navigation-bar ul.responsive-preview-options button.device-icon-desktop {
+ background-image: url("../images/desktop.svg");
}
+
.responsive-preview-navigation-bar ul.responsive-preview-options button.active {
background-color: #fff;
- border-color: #EEE;
+ border-color: #eee;
border-radius: 4px;
}
-
-
-
-
-
diff --git a/src/Plugin/TopBarItem/ResponsiveIcons.php b/src/Plugin/TopBarItem/ResponsiveIcons.php
index 8d9d043..136661f 100644
--- a/src/Plugin/TopBarItem/ResponsiveIcons.php
+++ b/src/Plugin/TopBarItem/ResponsiveIcons.php
@@ -145,6 +145,7 @@ final class ResponsiveIcons extends TopBarItemBase implements ContainerFactoryPl
}
catch (\Exception $e) {
// Nothing to show if no devices found.
+ return [];
}
}
--
GitLab
From fcc579648491118a79a415b1f32b3c220241e7bf Mon Sep 17 00:00:00 2001
From: roshni <roshniupadhyay89@gmail.com>
Date: Mon, 13 Jan 2025 17:44:27 +0530
Subject: [PATCH 03/10] Issue# 3489112: Styling changes on Edit page
---
css/responsive-preview.navigation.css | 5 +++++
1 file changed, 5 insertions(+)
diff --git a/css/responsive-preview.navigation.css b/css/responsive-preview.navigation.css
index 5232083..a366ffd 100644
--- a/css/responsive-preview.navigation.css
+++ b/css/responsive-preview.navigation.css
@@ -7,6 +7,11 @@
padding: 0;
}
+.responsive-preview-navigation-bar ul.responsive-preview-options li {
+ list-style: none;
+ margin: 0;
+}
+
.responsive-preview-navigation-bar .responsive-preview-item-list {
position: unset !important;
inset: unset !important;
--
GitLab
From c1d054f4228bb92bd091f14a52fc36615708bb2e Mon Sep 17 00:00:00 2001
From: roshni <roshniupadhyay89@gmail.com>
Date: Thu, 16 Jan 2025 23:44:51 +0530
Subject: [PATCH 04/10] Issue# 3489112: Revert responsive preview module
changes and created a submodule
---
.../responsive_preview.device.desktop.yml | 10 -
.../responsive_preview.device.mobile.yml | 10 -
css/responsive-preview.navigation.css | 47 ----
.../css/responsive-preview.navigation.css | 34 +++
.../images}/desktop.svg | 0
.../images}/mobile.svg | 0
.../responsive_preview_toolbar.info.yml | 9 +
.../responsive_preview_toolbar.libraries.yml | 5 +
.../responsive_preview_toolbar.module | 15 ++
.../src/Plugin/TopBarItem/ResponsiveIcons.php | 245 ++++++++++++++++++
.../responsive-preview-navigation.html.twig | 18 ++
responsive_preview.libraries.yml | 1 -
responsive_preview.module | 6 -
src/ResponsivePreview.php | 32 +--
.../responsive-preview-navigation.html.twig | 18 --
15 files changed, 337 insertions(+), 113 deletions(-)
delete mode 100644 config/install/responsive_preview.device.desktop.yml
delete mode 100644 config/install/responsive_preview.device.mobile.yml
delete mode 100644 css/responsive-preview.navigation.css
create mode 100644 modules/responsive_preview_toolbar/css/responsive-preview.navigation.css
rename {images => modules/responsive_preview_toolbar/images}/desktop.svg (100%)
rename {images => modules/responsive_preview_toolbar/images}/mobile.svg (100%)
create mode 100644 modules/responsive_preview_toolbar/responsive_preview_toolbar.info.yml
create mode 100644 modules/responsive_preview_toolbar/responsive_preview_toolbar.libraries.yml
create mode 100644 modules/responsive_preview_toolbar/responsive_preview_toolbar.module
create mode 100644 modules/responsive_preview_toolbar/src/Plugin/TopBarItem/ResponsiveIcons.php
create mode 100644 modules/responsive_preview_toolbar/templates/responsive-preview-navigation.html.twig
delete mode 100644 templates/responsive-preview-navigation.html.twig
diff --git a/config/install/responsive_preview.device.desktop.yml b/config/install/responsive_preview.device.desktop.yml
deleted file mode 100644
index 00264a3..0000000
--- a/config/install/responsive_preview.device.desktop.yml
+++ /dev/null
@@ -1,10 +0,0 @@
-id: desktop
-label: Desktop
-dimensions:
- width: 1024
- height: 768
- dppx: 1.0
-orientation: landscape
-weight: 0
-status: 1
-langcode: en
diff --git a/config/install/responsive_preview.device.mobile.yml b/config/install/responsive_preview.device.mobile.yml
deleted file mode 100644
index 47463ac..0000000
--- a/config/install/responsive_preview.device.mobile.yml
+++ /dev/null
@@ -1,10 +0,0 @@
-id: mobile
-label: Mobile
-dimensions:
- width: 768
- height: 1280
- dppx: 2
-orientation: portrait
-weight: 0
-status: 1
-langcode: en
\ No newline at end of file
diff --git a/css/responsive-preview.navigation.css b/css/responsive-preview.navigation.css
deleted file mode 100644
index a366ffd..0000000
--- a/css/responsive-preview.navigation.css
+++ /dev/null
@@ -1,47 +0,0 @@
-.responsive-preview-navigation-bar ul.responsive-preview-options {
- display: flex;
- list-style: none;
- background-color: #eee;
- border-radius: 4px;
- margin: 0;
- padding: 0;
-}
-
-.responsive-preview-navigation-bar ul.responsive-preview-options li {
- list-style: none;
- margin: 0;
-}
-
-.responsive-preview-navigation-bar .responsive-preview-item-list {
- position: unset !important;
- inset: unset !important;
- transform: none !important;
-}
-
-.responsive-preview-navigation-bar ul.responsive-preview-options button {
- width: 50px;
- height: 35px;
- cursor: pointer;
- background-color: transparent;
- border: 2px solid transparent;
- border-radius: 4px;
- padding: 3px 10px;
- background-repeat: no-repeat;
- background-position: center;
- background-size: 25px 25px;
- font-size: 0;
-}
-
-.responsive-preview-navigation-bar ul.responsive-preview-options button.device-icon-mobile {
- background-image: url("../images/mobile.svg");
-}
-
-.responsive-preview-navigation-bar ul.responsive-preview-options button.device-icon-desktop {
- background-image: url("../images/desktop.svg");
-}
-
-.responsive-preview-navigation-bar ul.responsive-preview-options button.active {
- background-color: #fff;
- border-color: #eee;
- border-radius: 4px;
-}
diff --git a/modules/responsive_preview_toolbar/css/responsive-preview.navigation.css b/modules/responsive_preview_toolbar/css/responsive-preview.navigation.css
new file mode 100644
index 0000000..3e961c0
--- /dev/null
+++ b/modules/responsive_preview_toolbar/css/responsive-preview.navigation.css
@@ -0,0 +1,34 @@
+.responsive-preview-navigation-bar {
+ background-color: #eee;
+ border-radius: 4px;
+ margin: 0;
+ padding: 0;
+}
+
+.responsive-preview-navigation-bar button {
+ width: 50px;
+ height: 35px;
+ cursor: pointer;
+ background-color: transparent;
+ border: 2px solid transparent;
+ border-radius: 4px;
+ padding: 3px 10px;
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: 25px 25px;
+ font-size: 0;
+}
+
+.responsive-preview-navigation-bar button.device-icon-mobile {
+ background-image: url("../images/mobile.svg");
+}
+
+.responsive-preview-navigation-bar button.device-icon-desktop {
+ background-image: url("../images/desktop.svg");
+}
+
+.responsive-preview-navigation-bar button.active {
+ background-color: #fff;
+ border-color: #eee;
+ border-radius: 4px;
+}
diff --git a/images/desktop.svg b/modules/responsive_preview_toolbar/images/desktop.svg
similarity index 100%
rename from images/desktop.svg
rename to modules/responsive_preview_toolbar/images/desktop.svg
diff --git a/images/mobile.svg b/modules/responsive_preview_toolbar/images/mobile.svg
similarity index 100%
rename from images/mobile.svg
rename to modules/responsive_preview_toolbar/images/mobile.svg
diff --git a/modules/responsive_preview_toolbar/responsive_preview_toolbar.info.yml b/modules/responsive_preview_toolbar/responsive_preview_toolbar.info.yml
new file mode 100644
index 0000000..7a809c4
--- /dev/null
+++ b/modules/responsive_preview_toolbar/responsive_preview_toolbar.info.yml
@@ -0,0 +1,9 @@
+name: 'Responsive Preview Toolbar'
+type: module
+description: 'Provides a toolbar with responsive preview icons.'
+core_version_requirement: ^10 || ^11
+package: 'Responsive Preview'
+dependencies:
+ - drupal:responsive_preview
+ - drupal:navigation
+
diff --git a/modules/responsive_preview_toolbar/responsive_preview_toolbar.libraries.yml b/modules/responsive_preview_toolbar/responsive_preview_toolbar.libraries.yml
new file mode 100644
index 0000000..e303bf2
--- /dev/null
+++ b/modules/responsive_preview_toolbar/responsive_preview_toolbar.libraries.yml
@@ -0,0 +1,5 @@
+drupal.responsive-preview-toolbar:
+ version: VERSION
+ css:
+ theme:
+ css/responsive-preview.navigation.css: {}
diff --git a/modules/responsive_preview_toolbar/responsive_preview_toolbar.module b/modules/responsive_preview_toolbar/responsive_preview_toolbar.module
new file mode 100644
index 0000000..1c465ff
--- /dev/null
+++ b/modules/responsive_preview_toolbar/responsive_preview_toolbar.module
@@ -0,0 +1,15 @@
+<?php
+
+/**
+ * Implements hook_theme().
+ */
+function responsive_preview_toolbar_theme() {
+ return [
+ 'responsive_preview_navigation' => [
+ 'variables' => [
+ 'items' => [],
+ 'attributes' => [],
+ ],
+ ],
+ ];
+}
diff --git a/modules/responsive_preview_toolbar/src/Plugin/TopBarItem/ResponsiveIcons.php b/modules/responsive_preview_toolbar/src/Plugin/TopBarItem/ResponsiveIcons.php
new file mode 100644
index 0000000..0329ab4
--- /dev/null
+++ b/modules/responsive_preview_toolbar/src/Plugin/TopBarItem/ResponsiveIcons.php
@@ -0,0 +1,245 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Drupal\responsive_preview_toolbar\Plugin\TopBarItem;
+
+use Drupal\Core\Entity\EntityTypeManagerInterface;
+use Drupal\Core\Plugin\ContainerFactoryPluginInterface;
+use Drupal\Core\Session\AccountProxyInterface;
+use Drupal\Core\StringTranslation\StringTranslationTrait;
+use Drupal\Core\StringTranslation\TranslatableMarkup;
+use Drupal\Core\Cache\Cache;
+use Drupal\navigation\Attribute\TopBarItem;
+use Drupal\navigation\TopBarItemBase;
+use Drupal\navigation\TopBarRegion;
+use Symfony\Component\DependencyInjection\ContainerInterface;
+use Drupal\Core\Routing\RouteMatchInterface;
+use Drupal\Core\Routing\AdminContext;
+use Drupal\Core\Path\CurrentPathStack;
+use Drupal\responsive_preview\ResponsivePreview;
+
+/**
+ * Provides the Responsive Icons top bar item.
+ */
+#[TopBarItem(
+ id: 'responsive_icons',
+ region: TopBarRegion::Tools,
+ label: new TranslatableMarkup('Responsive Icons'),
+)]
+final class ResponsiveIcons extends TopBarItemBase implements ContainerFactoryPluginInterface {
+
+ use StringTranslationTrait;
+
+ /**
+ * The ResponsivePreview service.
+ *
+ * @var \Drupal\responsive_preview\ResponsivePreview
+ */
+ private ResponsivePreview $responsivePreview;
+
+ /**
+ * The current user service.
+ *
+ * @var \Drupal\Core\Session\AccountProxyInterface
+ */
+ private AccountProxyInterface $currentUser;
+
+ /**
+ * The EntityTypeManager service.
+ *
+ * @var \Drupal\Core\Entity\EntityTypeManagerInterface
+ */
+ private EntityTypeManagerInterface $entityTypeManager;
+
+ /**
+ * The route match service.
+ *
+ * @var \Drupal\Core\Routing\RouteMatchInterface
+ */
+ private RouteMatchInterface $routeMatch;
+
+ /**
+ * The admin context service.
+ *
+ * @var \Drupal\Core\Routing\AdminContext
+ */
+ private AdminContext $routerAdminContext;
+
+ /**
+ * The current path stack service.
+ *
+ * @var \Drupal\Core\Path\CurrentPathStack
+ */
+ private CurrentPathStack $currentPathStack;
+
+ /**
+ * Constructs a new ResponsiveIcons instance.
+ *
+ * @param array $configuration
+ * A configuration array containing plugin instance information.
+ * @param string $plugin_id
+ * The plugin ID for the plugin instance.
+ * @param mixed $plugin_definition
+ * The plugin implementation definition.
+ * @param \Drupal\responsive_preview\ResponsivePreview $responsivePreview
+ * The ResponsivePreview service.
+ * @param \Drupal\Core\Session\AccountProxyInterface $currentUser
+ * The current user service.
+ * @param \Drupal\Core\Entity\EntityTypeManagerInterface $entityTypeManager
+ * The entity type manager service.
+ * @param \Drupal\Core\Routing\RouteMatchInterface $routeMatch
+ * The route match service.
+ * @param \Drupal\Core\Routing\AdminContext $routerAdminContext
+ * The admin context service.
+ * @param \Drupal\Core\Path\CurrentPathStack $currentPathStack
+ * The current path stack service.
+ */
+ public function __construct(
+ array $configuration,
+ string $plugin_id,
+ $plugin_definition,
+ ResponsivePreview $responsivePreview,
+ AccountProxyInterface $currentUser,
+ EntityTypeManagerInterface $entityTypeManager,
+ RouteMatchInterface $routeMatch,
+ AdminContext $routerAdminContext,
+ CurrentPathStack $currentPathStack,
+ ) {
+ parent::__construct($configuration, $plugin_id, $plugin_definition);
+ $this->responsivePreview = $responsivePreview;
+ $this->currentUser = $currentUser;
+ $this->entityTypeManager = $entityTypeManager;
+ $this->routeMatch = $routeMatch;
+ $this->routerAdminContext = $routerAdminContext;
+ $this->currentPathStack = $currentPathStack;
+ }
+
+ /**
+ * {@inheritdoc}
+ */
+ public static function create(ContainerInterface $container, array $configuration, $plugin_id, $plugin_definition): static {
+ return new static(
+ $configuration,
+ $plugin_id,
+ $plugin_definition,
+ $container->get('responsive_preview'),
+ $container->get('current_user'),
+ $container->get('entity_type.manager'),
+ $container->get('current_route_match'),
+ $container->get('router.admin_context'),
+ $container->get('path.current'),
+ );
+ }
+
+ /**
+ * {@inheritdoc}
+ */
+ public function build(): array {
+ try {
+ if (!$this->currentUser->hasPermission('access responsive preview')) {
+ return [];
+ }
+
+ $cache_tags = Cache::mergeTags(['config:node_type_list']);
+ $cache_contexts = Cache::mergeContexts(['route.is_admin', 'url', 'user.permissions']);
+
+ $url = $this->getPreviewUrl();
+
+ if ($url) {
+ return [
+ '#theme' => 'responsive_preview_navigation',
+ '#cache' => [
+ 'tags' => $cache_tags,
+ 'contexts' => $cache_contexts,
+ ],
+ '#attached' => [
+ 'library' => [
+ 'responsive_preview/drupal.responsive-preview',
+ 'responsive_preview_toolbar/drupal.responsive-preview-toolbar',
+ ],
+ 'drupalSettings' => [
+ 'responsive_preview' => [
+ 'url' => ltrim($url, '/'),
+ ],
+ ],
+ ],
+ '#items' => [
+ [
+ '#type' => 'html_tag',
+ '#tag' => 'button',
+ '#value' => $this->t('Desktop'),
+ '#attributes' => [
+ 'data-responsive-preview-name' => 'desktop',
+ 'data-responsive-preview-width' => 1280,
+ 'data-responsive-preview-height' => 768,
+ 'data-responsive-preview-dppx' => 1.0,
+ 'data-responsive-preview-orientation' => 'landscape',
+ 'class' => [
+ 'responsive-preview-device',
+ 'responsive-preview-icon',
+ 'device-icon-desktop',
+ ],
+ ],
+ ],
+ [
+ '#type' => 'html_tag',
+ '#tag' => 'button',
+ '#value' => $this->t('Mobile'),
+ '#attributes' => [
+ 'data-responsive-preview-name' => 'mobile',
+ 'data-responsive-preview-width' => 768,
+ 'data-responsive-preview-height' => 1280,
+ 'data-responsive-preview-dppx' => 2,
+ 'data-responsive-preview-orientation' => 'portrait',
+ 'class' => [
+ 'responsive-preview-device',
+ 'responsive-preview-icon',
+ 'device-icon-mobile',
+ ],
+ ],
+ ],
+ ],
+ '#attributes' => [
+ 'id' => 'responsive-preview-toolbar-tab',
+ 'class' => ['responsive-preview-navigation-bar'],
+ ],
+ ];
+ }
+ return [];
+ }
+ catch (\Exception $e) {
+ return [];
+ }
+ }
+
+ /**
+ * Helper to show responsive preview and returns the url for the preview.
+ */
+ public function getPreviewUrl() {
+ if ($this->routeMatch->getRouteName() === 'node.add') {
+ $node_type = $this->routeMatch->getParameter('node_type');
+ if ($node_type && !$this->previewEnabled($node_type)) {
+ return NULL;
+ }
+ return '/';
+ }
+ elseif ($form = $this->routeMatch->getRouteObject()->getDefault("_entity_form")) {
+ $entity_type_id = current(explode('.', $form));
+ if (!($entity = $this->routeMatch->getParameter($entity_type_id))) {
+ return NULL;
+ }
+ if ($entity instanceof NodeInterface && !$this->previewEnabled($entity->type->entity)) {
+ return NULL;
+ }
+ if ($entity->hasLinkTemplate('canonical')) {
+ return $entity->toUrl()->toString();
+ }
+ }
+ if (!$this->routerAdminContext->isAdminRoute()) {
+ return $this->currentPathStack->getPath();
+ }
+ return NULL;
+ }
+
+}
diff --git a/modules/responsive_preview_toolbar/templates/responsive-preview-navigation.html.twig b/modules/responsive_preview_toolbar/templates/responsive-preview-navigation.html.twig
new file mode 100644
index 0000000..b19f318
--- /dev/null
+++ b/modules/responsive_preview_toolbar/templates/responsive-preview-navigation.html.twig
@@ -0,0 +1,18 @@
+{#
+/**
+ * @file
+ * Theme override for the responsive preview navigation.
+ *
+ * Available variables:
+ * - items: A list of items to render. Each item contains:
+ * - attributes: HTML attributes for the item.
+ * - content: The rendered content of the item (e.g., Mobile, Desktop).
+ * - attributes: HTML attributes for the main wrapper.
+ *
+ * @see template_preprocess_responsive_preview_navigation()
+ */
+#}
+
+<div{{ attributes }}>
+ {{items}}
+</div>
diff --git a/responsive_preview.libraries.yml b/responsive_preview.libraries.yml
index f234403..afaa299 100644
--- a/responsive_preview.libraries.yml
+++ b/responsive_preview.libraries.yml
@@ -9,7 +9,6 @@ drupal.responsive-preview:
theme:
css/responsive-preview.theme.css: {}
css/responsive-preview.icons.css: {}
- css/responsive-preview.navigation.css: {}
dependencies:
- core/once
- core/drupal.displace
diff --git a/responsive_preview.module b/responsive_preview.module
index 3711816..800892b 100644
--- a/responsive_preview.module
+++ b/responsive_preview.module
@@ -41,12 +41,6 @@ function responsive_preview_theme() {
return [
'item_list__responsive_preview' => $defaultVariables['item_list'],
- 'responsive_preview_navigation' => [
- 'variables' => [
- 'devices' => [],
- 'attributes' => [],
- ],
- ],
];
}
diff --git a/src/ResponsivePreview.php b/src/ResponsivePreview.php
index 22b2336..923f210 100644
--- a/src/ResponsivePreview.php
+++ b/src/ResponsivePreview.php
@@ -136,19 +136,13 @@ class ResponsivePreview {
* @throws \Drupal\Component\Plugin\Exception\InvalidPluginDefinitionException
* @throws \Drupal\Component\Plugin\Exception\PluginNotFoundException
*/
- public function getRenderableDevicesList($device_name = NULL, $include_configure_link = TRUE) {
+ public function getRenderableDevicesList() {
$links = [];
- // Load devices with or without filtering by device name.
- $device_properties = ['status' => 1];
- if ($device_name) {
- // Filter by the device name if provided.
- $device_properties['label'] = $device_name;
- }
/** @var \Drupal\responsive_preview\Entity\Device[] $devices */
$devices = $this->entityTypeManager
->getStorage('responsive_preview_device')
- ->loadByProperties($device_properties);
+ ->loadByProperties(['status' => 1]);
uasort($devices, [Device::class, 'sort']);
@@ -167,24 +161,20 @@ class ResponsivePreview {
'responsive-preview-device',
'responsive-preview-icon',
'responsive-preview-icon-active',
- 'device-icon-' . $name,
],
],
];
}
- // Conditionally add the configuration link.
- if ($include_configure_link) {
- $links['configure_link'] = [
- '#type' => 'link',
- '#title' => $this->t('Configure devices'),
- '#url' => Url::fromRoute('entity.responsive_preview_device.collection'),
- '#access' => $this->currentUser->hasPermission('administer responsive preview'),
- '#attributes' => [
- 'class' => ['responsive-preview-configure'],
- ],
- ];
- }
+ $links['configure_link'] = [
+ '#type' => 'link',
+ '#title' => $this->t('Configure devices'),
+ '#url' => Url::fromRoute('entity.responsive_preview_device.collection'),
+ '#access' => $this->currentUser->hasPermission('administer responsive preview'),
+ '#attributes' => [
+ 'class' => ['responsive-preview-configure'],
+ ],
+ ];
return [
'#theme' => 'item_list__responsive_preview',
diff --git a/templates/responsive-preview-navigation.html.twig b/templates/responsive-preview-navigation.html.twig
deleted file mode 100644
index c47c6f7..0000000
--- a/templates/responsive-preview-navigation.html.twig
+++ /dev/null
@@ -1,18 +0,0 @@
-{#
-/**
- * @file
- * Theme override for the responsive preview navigation.
- *
- * Available variables:
- * - devices: A list of devices to be rendered. Each device contains:
- * - attributes: HTML attributes to be applied to each device element.
- * - content: The rendered content of the device (already sanitized).
- * - attributes: HTML attributes to be applied to the main wrapper.
- *
- * @see template_preprocess_responsive_preview_navigation()
- */
-#}
-
-<div {{ attributes }} >
- {{ devices }}
-</div>
--
GitLab
From ce3708209d4a1b24ef70c5685385c9622f38caef Mon Sep 17 00:00:00 2001
From: roshni <roshniupadhyay89@gmail.com>
Date: Fri, 17 Jan 2025 12:37:39 +0530
Subject: [PATCH 05/10] Issue# 3489112: Removed duplicate function
---
.../src/Plugin/TopBarItem/ResponsiveIcons.php | 92 ++-----------------
1 file changed, 6 insertions(+), 86 deletions(-)
diff --git a/modules/responsive_preview_toolbar/src/Plugin/TopBarItem/ResponsiveIcons.php b/modules/responsive_preview_toolbar/src/Plugin/TopBarItem/ResponsiveIcons.php
index 0329ab4..5d82d0b 100644
--- a/modules/responsive_preview_toolbar/src/Plugin/TopBarItem/ResponsiveIcons.php
+++ b/modules/responsive_preview_toolbar/src/Plugin/TopBarItem/ResponsiveIcons.php
@@ -4,19 +4,14 @@ declare(strict_types=1);
namespace Drupal\responsive_preview_toolbar\Plugin\TopBarItem;
-use Drupal\Core\Entity\EntityTypeManagerInterface;
use Drupal\Core\Plugin\ContainerFactoryPluginInterface;
use Drupal\Core\Session\AccountProxyInterface;
use Drupal\Core\StringTranslation\StringTranslationTrait;
use Drupal\Core\StringTranslation\TranslatableMarkup;
-use Drupal\Core\Cache\Cache;
use Drupal\navigation\Attribute\TopBarItem;
use Drupal\navigation\TopBarItemBase;
use Drupal\navigation\TopBarRegion;
use Symfony\Component\DependencyInjection\ContainerInterface;
-use Drupal\Core\Routing\RouteMatchInterface;
-use Drupal\Core\Routing\AdminContext;
-use Drupal\Core\Path\CurrentPathStack;
use Drupal\responsive_preview\ResponsivePreview;
/**
@@ -45,34 +40,6 @@ final class ResponsiveIcons extends TopBarItemBase implements ContainerFactoryPl
*/
private AccountProxyInterface $currentUser;
- /**
- * The EntityTypeManager service.
- *
- * @var \Drupal\Core\Entity\EntityTypeManagerInterface
- */
- private EntityTypeManagerInterface $entityTypeManager;
-
- /**
- * The route match service.
- *
- * @var \Drupal\Core\Routing\RouteMatchInterface
- */
- private RouteMatchInterface $routeMatch;
-
- /**
- * The admin context service.
- *
- * @var \Drupal\Core\Routing\AdminContext
- */
- private AdminContext $routerAdminContext;
-
- /**
- * The current path stack service.
- *
- * @var \Drupal\Core\Path\CurrentPathStack
- */
- private CurrentPathStack $currentPathStack;
-
/**
* Constructs a new ResponsiveIcons instance.
*
@@ -86,14 +53,6 @@ final class ResponsiveIcons extends TopBarItemBase implements ContainerFactoryPl
* The ResponsivePreview service.
* @param \Drupal\Core\Session\AccountProxyInterface $currentUser
* The current user service.
- * @param \Drupal\Core\Entity\EntityTypeManagerInterface $entityTypeManager
- * The entity type manager service.
- * @param \Drupal\Core\Routing\RouteMatchInterface $routeMatch
- * The route match service.
- * @param \Drupal\Core\Routing\AdminContext $routerAdminContext
- * The admin context service.
- * @param \Drupal\Core\Path\CurrentPathStack $currentPathStack
- * The current path stack service.
*/
public function __construct(
array $configuration,
@@ -101,18 +60,10 @@ final class ResponsiveIcons extends TopBarItemBase implements ContainerFactoryPl
$plugin_definition,
ResponsivePreview $responsivePreview,
AccountProxyInterface $currentUser,
- EntityTypeManagerInterface $entityTypeManager,
- RouteMatchInterface $routeMatch,
- AdminContext $routerAdminContext,
- CurrentPathStack $currentPathStack,
) {
parent::__construct($configuration, $plugin_id, $plugin_definition);
$this->responsivePreview = $responsivePreview;
$this->currentUser = $currentUser;
- $this->entityTypeManager = $entityTypeManager;
- $this->routeMatch = $routeMatch;
- $this->routerAdminContext = $routerAdminContext;
- $this->currentPathStack = $currentPathStack;
}
/**
@@ -125,10 +76,6 @@ final class ResponsiveIcons extends TopBarItemBase implements ContainerFactoryPl
$plugin_definition,
$container->get('responsive_preview'),
$container->get('current_user'),
- $container->get('entity_type.manager'),
- $container->get('current_route_match'),
- $container->get('router.admin_context'),
- $container->get('path.current'),
);
}
@@ -137,15 +84,18 @@ final class ResponsiveIcons extends TopBarItemBase implements ContainerFactoryPl
*/
public function build(): array {
try {
+ // Check if the user has the required permission.
if (!$this->currentUser->hasPermission('access responsive preview')) {
return [];
}
- $cache_tags = Cache::mergeTags(['config:node_type_list']);
- $cache_contexts = Cache::mergeContexts(['route.is_admin', 'url', 'user.permissions']);
+ $url = $this->responsivePreview->getPreviewUrl();
- $url = $this->getPreviewUrl();
+ // Add cache tags and contexts.
+ $cache_tags = ['config:node_type_list'];
+ $cache_contexts = ['route.is_admin', 'url', 'user.permissions'];
+ // If a preview URL exists, build the navigation bar render array.
if ($url) {
return [
'#theme' => 'responsive_preview_navigation',
@@ -206,40 +156,10 @@ final class ResponsiveIcons extends TopBarItemBase implements ContainerFactoryPl
],
];
}
- return [];
}
catch (\Exception $e) {
return [];
}
}
- /**
- * Helper to show responsive preview and returns the url for the preview.
- */
- public function getPreviewUrl() {
- if ($this->routeMatch->getRouteName() === 'node.add') {
- $node_type = $this->routeMatch->getParameter('node_type');
- if ($node_type && !$this->previewEnabled($node_type)) {
- return NULL;
- }
- return '/';
- }
- elseif ($form = $this->routeMatch->getRouteObject()->getDefault("_entity_form")) {
- $entity_type_id = current(explode('.', $form));
- if (!($entity = $this->routeMatch->getParameter($entity_type_id))) {
- return NULL;
- }
- if ($entity instanceof NodeInterface && !$this->previewEnabled($entity->type->entity)) {
- return NULL;
- }
- if ($entity->hasLinkTemplate('canonical')) {
- return $entity->toUrl()->toString();
- }
- }
- if (!$this->routerAdminContext->isAdminRoute()) {
- return $this->currentPathStack->getPath();
- }
- return NULL;
- }
-
}
--
GitLab
From 78d57b85580296c30033e213fb110958ddd20da3 Mon Sep 17 00:00:00 2001
From: roshni <roshniupadhyay89@gmail.com>
Date: Mon, 20 Jan 2025 17:40:26 +0530
Subject: [PATCH 06/10] Issue# 3489112: Module fixes
---
.../css/responsive-preview.navigation.css | 0
.../images/desktop.svg | 0
.../images/mobile.svg | 0
.../responsive_preview_navigation.info.yml | 9 +
...sponsive_preview_navigation.libraries.yml} | 2 +-
.../responsive_preview_navigation.module} | 2 +-
.../Plugin/TopBarItem/ResponsiveIcons.php | 123 +++++++------
.../responsive-preview-navigation.html.twig | 0
.../responsive_preview_toolbar.info.yml | 9 -
.../src/Plugin/TopBarItem/ResponsiveIcons.php | 165 ------------------
src/ResponsivePreview.php | 1 +
11 files changed, 78 insertions(+), 233 deletions(-)
rename modules/{responsive_preview_toolbar => responsive_preview_navigation}/css/responsive-preview.navigation.css (100%)
rename modules/{responsive_preview_toolbar => responsive_preview_navigation}/images/desktop.svg (100%)
rename modules/{responsive_preview_toolbar => responsive_preview_navigation}/images/mobile.svg (100%)
create mode 100644 modules/responsive_preview_navigation/responsive_preview_navigation.info.yml
rename modules/{responsive_preview_toolbar/responsive_preview_toolbar.libraries.yml => responsive_preview_navigation/responsive_preview_navigation.libraries.yml} (69%)
rename modules/{responsive_preview_toolbar/responsive_preview_toolbar.module => responsive_preview_navigation/responsive_preview_navigation.module} (79%)
rename {src => modules/responsive_preview_navigation/src}/Plugin/TopBarItem/ResponsiveIcons.php (53%)
rename modules/{responsive_preview_toolbar => responsive_preview_navigation}/templates/responsive-preview-navigation.html.twig (100%)
delete mode 100644 modules/responsive_preview_toolbar/responsive_preview_toolbar.info.yml
delete mode 100644 modules/responsive_preview_toolbar/src/Plugin/TopBarItem/ResponsiveIcons.php
diff --git a/modules/responsive_preview_toolbar/css/responsive-preview.navigation.css b/modules/responsive_preview_navigation/css/responsive-preview.navigation.css
similarity index 100%
rename from modules/responsive_preview_toolbar/css/responsive-preview.navigation.css
rename to modules/responsive_preview_navigation/css/responsive-preview.navigation.css
diff --git a/modules/responsive_preview_toolbar/images/desktop.svg b/modules/responsive_preview_navigation/images/desktop.svg
similarity index 100%
rename from modules/responsive_preview_toolbar/images/desktop.svg
rename to modules/responsive_preview_navigation/images/desktop.svg
diff --git a/modules/responsive_preview_toolbar/images/mobile.svg b/modules/responsive_preview_navigation/images/mobile.svg
similarity index 100%
rename from modules/responsive_preview_toolbar/images/mobile.svg
rename to modules/responsive_preview_navigation/images/mobile.svg
diff --git a/modules/responsive_preview_navigation/responsive_preview_navigation.info.yml b/modules/responsive_preview_navigation/responsive_preview_navigation.info.yml
new file mode 100644
index 0000000..169cd43
--- /dev/null
+++ b/modules/responsive_preview_navigation/responsive_preview_navigation.info.yml
@@ -0,0 +1,9 @@
+name: 'Responsive Preview Navigation'
+type: module
+description: 'Provides a navigation with responsive preview icons.'
+core_version_requirement: ^10.3 || ^11
+package: 'Responsive Preview'
+dependencies:
+ - drupal:responsive_preview
+ - drupal:navigation
+
diff --git a/modules/responsive_preview_toolbar/responsive_preview_toolbar.libraries.yml b/modules/responsive_preview_navigation/responsive_preview_navigation.libraries.yml
similarity index 69%
rename from modules/responsive_preview_toolbar/responsive_preview_toolbar.libraries.yml
rename to modules/responsive_preview_navigation/responsive_preview_navigation.libraries.yml
index e303bf2..8cc4803 100644
--- a/modules/responsive_preview_toolbar/responsive_preview_toolbar.libraries.yml
+++ b/modules/responsive_preview_navigation/responsive_preview_navigation.libraries.yml
@@ -1,4 +1,4 @@
-drupal.responsive-preview-toolbar:
+drupal.responsive-preview-navigation:
version: VERSION
css:
theme:
diff --git a/modules/responsive_preview_toolbar/responsive_preview_toolbar.module b/modules/responsive_preview_navigation/responsive_preview_navigation.module
similarity index 79%
rename from modules/responsive_preview_toolbar/responsive_preview_toolbar.module
rename to modules/responsive_preview_navigation/responsive_preview_navigation.module
index 1c465ff..013d709 100644
--- a/modules/responsive_preview_toolbar/responsive_preview_toolbar.module
+++ b/modules/responsive_preview_navigation/responsive_preview_navigation.module
@@ -3,7 +3,7 @@
/**
* Implements hook_theme().
*/
-function responsive_preview_toolbar_theme() {
+function responsive_preview_navigation_theme() {
return [
'responsive_preview_navigation' => [
'variables' => [
diff --git a/src/Plugin/TopBarItem/ResponsiveIcons.php b/modules/responsive_preview_navigation/src/Plugin/TopBarItem/ResponsiveIcons.php
similarity index 53%
rename from src/Plugin/TopBarItem/ResponsiveIcons.php
rename to modules/responsive_preview_navigation/src/Plugin/TopBarItem/ResponsiveIcons.php
index 136661f..bfa96f2 100644
--- a/src/Plugin/TopBarItem/ResponsiveIcons.php
+++ b/modules/responsive_preview_navigation/src/Plugin/TopBarItem/ResponsiveIcons.php
@@ -2,14 +2,12 @@
declare(strict_types=1);
-namespace Drupal\responsive_preview\Plugin\TopBarItem;
+namespace Drupal\responsive_preview_navigation\Plugin\TopBarItem;
-use Drupal\Core\Entity\EntityTypeManagerInterface;
use Drupal\Core\Plugin\ContainerFactoryPluginInterface;
use Drupal\Core\Session\AccountProxyInterface;
use Drupal\Core\StringTranslation\StringTranslationTrait;
use Drupal\Core\StringTranslation\TranslatableMarkup;
-use Drupal\Core\Cache\Cache;
use Drupal\navigation\Attribute\TopBarItem;
use Drupal\navigation\TopBarItemBase;
use Drupal\navigation\TopBarRegion;
@@ -42,13 +40,6 @@ final class ResponsiveIcons extends TopBarItemBase implements ContainerFactoryPl
*/
private AccountProxyInterface $currentUser;
- /**
- * The EntityTypeManager service.
- *
- * @var \Drupal\Core\Entity\EntityTypeManagerInterface
- */
- private EntityTypeManagerInterface $entityTypeManager;
-
/**
* Constructs a new ResponsiveIcons instance.
*
@@ -62,8 +53,6 @@ final class ResponsiveIcons extends TopBarItemBase implements ContainerFactoryPl
* The ResponsivePreview service.
* @param \Drupal\Core\Session\AccountProxyInterface $currentUser
* The current user service.
- * @param \Drupal\Core\Entity\EntityTypeManagerInterface $entityTypeManager
- * The entity type manager service.
*/
public function __construct(
array $configuration,
@@ -71,12 +60,10 @@ final class ResponsiveIcons extends TopBarItemBase implements ContainerFactoryPl
$plugin_definition,
ResponsivePreview $responsivePreview,
AccountProxyInterface $currentUser,
- EntityTypeManagerInterface $entityTypeManager,
) {
parent::__construct($configuration, $plugin_id, $plugin_definition);
$this->responsivePreview = $responsivePreview;
$this->currentUser = $currentUser;
- $this->entityTypeManager = $entityTypeManager;
}
/**
@@ -89,7 +76,6 @@ final class ResponsiveIcons extends TopBarItemBase implements ContainerFactoryPl
$plugin_definition,
$container->get('responsive_preview'),
$container->get('current_user'),
- $container->get('entity_type.manager'),
);
}
@@ -97,56 +83,79 @@ final class ResponsiveIcons extends TopBarItemBase implements ContainerFactoryPl
* {@inheritdoc}
*/
public function build(): array {
+ // Check if the user has the required permission.
+ if (!$this->currentUser->hasPermission('access responsive preview')) {
+ return [];
+ }
+ $url = NULL;
try {
- // Check if the user has the required permission.
- if (!$this->currentUser->hasPermission('access responsive preview')) {
- return [];
- }
-
- $device_definition = $this->entityTypeManager->getDefinition('responsive_preview_device');
-
- // Add cache tags and contexts.
- $cache_tags = Cache::mergeTags(
- $device_definition->getListCacheTags(),
- ['config:node_type_list']
- );
- $cache_contexts = Cache::mergeContexts(
- ['route.is_admin', 'url', 'user.permissions']
- );
-
$url = $this->responsivePreview->getPreviewUrl();
-
- // Define the devices you want to filter by.
- $device_names = ['mobile', 'desktop'];
- // If a preview URL exists, build the navigation bar render array.
- if ($url) {
- return [
- '#theme' => 'responsive_preview_navigation',
- '#cache' => [
- 'tags' => $cache_tags,
- 'contexts' => $cache_contexts,
+ }
+ catch (\InvalidArgumentException $e) {
+ return [];
+ }
+ $cache_contexts = ['user.permissions', 'route', 'url.path'];
+ if ($url) {
+ return [
+ '#theme' => 'responsive_preview_navigation',
+ '#cache' => [
+ 'contexts' => $cache_contexts,
+ ],
+ '#attached' => [
+ 'library' => [
+ 'responsive_preview/drupal.responsive-preview',
+ 'responsive_preview_navigation/drupal.responsive-preview-navigation',
],
- '#attached' => [
- 'library' => ['responsive_preview/drupal.responsive-preview'],
- 'drupalSettings' => [
- 'responsive_preview' => [
- 'url' => ltrim($url, '/'),
+ 'drupalSettings' => [
+ 'responsive_preview' => [
+ 'url' => ltrim($url, '/'),
+ ],
+ ],
+ ],
+ '#items' => [
+ [
+ '#type' => 'html_tag',
+ '#tag' => 'button',
+ '#value' => $this->t('Desktop'),
+ '#attributes' => [
+ 'data-responsive-preview-name' => 'desktop',
+ 'data-responsive-preview-width' => 1280,
+ 'data-responsive-preview-height' => 768,
+ 'data-responsive-preview-dppx' => 1.0,
+ 'data-responsive-preview-orientation' => 'landscape',
+ 'class' => [
+ 'responsive-preview-device',
+ 'responsive-preview-icon',
+ 'device-icon-desktop',
],
],
],
- '#devices' => $this->responsivePreview->getRenderableDevicesList($device_names, FALSE),
- '#attributes' => [
- 'id' => 'responsive-preview-toolbar-tab',
- 'class' => ['responsive-preview-navigation-bar'],
+ [
+ '#type' => 'html_tag',
+ '#tag' => 'button',
+ '#value' => $this->t('Mobile'),
+ '#attributes' => [
+ 'data-responsive-preview-name' => 'mobile',
+ 'data-responsive-preview-width' => 768,
+ 'data-responsive-preview-height' => 1280,
+ 'data-responsive-preview-dppx' => 2,
+ 'data-responsive-preview-orientation' => 'portrait',
+ 'class' => [
+ 'responsive-preview-device',
+ 'responsive-preview-icon',
+ 'device-icon-mobile',
+ ],
+ ],
],
- ];
- }
- return [];
- }
- catch (\Exception $e) {
- // Nothing to show if no devices found.
- return [];
+ ],
+ '#attributes' => [
+ 'id' => 'responsive-preview-toolbar-tab',
+ 'class' => ['responsive-preview-navigation-bar'],
+ ],
+ ];
}
+ return [];
+
}
}
diff --git a/modules/responsive_preview_toolbar/templates/responsive-preview-navigation.html.twig b/modules/responsive_preview_navigation/templates/responsive-preview-navigation.html.twig
similarity index 100%
rename from modules/responsive_preview_toolbar/templates/responsive-preview-navigation.html.twig
rename to modules/responsive_preview_navigation/templates/responsive-preview-navigation.html.twig
diff --git a/modules/responsive_preview_toolbar/responsive_preview_toolbar.info.yml b/modules/responsive_preview_toolbar/responsive_preview_toolbar.info.yml
deleted file mode 100644
index 7a809c4..0000000
--- a/modules/responsive_preview_toolbar/responsive_preview_toolbar.info.yml
+++ /dev/null
@@ -1,9 +0,0 @@
-name: 'Responsive Preview Toolbar'
-type: module
-description: 'Provides a toolbar with responsive preview icons.'
-core_version_requirement: ^10 || ^11
-package: 'Responsive Preview'
-dependencies:
- - drupal:responsive_preview
- - drupal:navigation
-
diff --git a/modules/responsive_preview_toolbar/src/Plugin/TopBarItem/ResponsiveIcons.php b/modules/responsive_preview_toolbar/src/Plugin/TopBarItem/ResponsiveIcons.php
deleted file mode 100644
index 5d82d0b..0000000
--- a/modules/responsive_preview_toolbar/src/Plugin/TopBarItem/ResponsiveIcons.php
+++ /dev/null
@@ -1,165 +0,0 @@
-<?php
-
-declare(strict_types=1);
-
-namespace Drupal\responsive_preview_toolbar\Plugin\TopBarItem;
-
-use Drupal\Core\Plugin\ContainerFactoryPluginInterface;
-use Drupal\Core\Session\AccountProxyInterface;
-use Drupal\Core\StringTranslation\StringTranslationTrait;
-use Drupal\Core\StringTranslation\TranslatableMarkup;
-use Drupal\navigation\Attribute\TopBarItem;
-use Drupal\navigation\TopBarItemBase;
-use Drupal\navigation\TopBarRegion;
-use Symfony\Component\DependencyInjection\ContainerInterface;
-use Drupal\responsive_preview\ResponsivePreview;
-
-/**
- * Provides the Responsive Icons top bar item.
- */
-#[TopBarItem(
- id: 'responsive_icons',
- region: TopBarRegion::Tools,
- label: new TranslatableMarkup('Responsive Icons'),
-)]
-final class ResponsiveIcons extends TopBarItemBase implements ContainerFactoryPluginInterface {
-
- use StringTranslationTrait;
-
- /**
- * The ResponsivePreview service.
- *
- * @var \Drupal\responsive_preview\ResponsivePreview
- */
- private ResponsivePreview $responsivePreview;
-
- /**
- * The current user service.
- *
- * @var \Drupal\Core\Session\AccountProxyInterface
- */
- private AccountProxyInterface $currentUser;
-
- /**
- * Constructs a new ResponsiveIcons instance.
- *
- * @param array $configuration
- * A configuration array containing plugin instance information.
- * @param string $plugin_id
- * The plugin ID for the plugin instance.
- * @param mixed $plugin_definition
- * The plugin implementation definition.
- * @param \Drupal\responsive_preview\ResponsivePreview $responsivePreview
- * The ResponsivePreview service.
- * @param \Drupal\Core\Session\AccountProxyInterface $currentUser
- * The current user service.
- */
- public function __construct(
- array $configuration,
- string $plugin_id,
- $plugin_definition,
- ResponsivePreview $responsivePreview,
- AccountProxyInterface $currentUser,
- ) {
- parent::__construct($configuration, $plugin_id, $plugin_definition);
- $this->responsivePreview = $responsivePreview;
- $this->currentUser = $currentUser;
- }
-
- /**
- * {@inheritdoc}
- */
- public static function create(ContainerInterface $container, array $configuration, $plugin_id, $plugin_definition): static {
- return new static(
- $configuration,
- $plugin_id,
- $plugin_definition,
- $container->get('responsive_preview'),
- $container->get('current_user'),
- );
- }
-
- /**
- * {@inheritdoc}
- */
- public function build(): array {
- try {
- // Check if the user has the required permission.
- if (!$this->currentUser->hasPermission('access responsive preview')) {
- return [];
- }
-
- $url = $this->responsivePreview->getPreviewUrl();
-
- // Add cache tags and contexts.
- $cache_tags = ['config:node_type_list'];
- $cache_contexts = ['route.is_admin', 'url', 'user.permissions'];
-
- // If a preview URL exists, build the navigation bar render array.
- if ($url) {
- return [
- '#theme' => 'responsive_preview_navigation',
- '#cache' => [
- 'tags' => $cache_tags,
- 'contexts' => $cache_contexts,
- ],
- '#attached' => [
- 'library' => [
- 'responsive_preview/drupal.responsive-preview',
- 'responsive_preview_toolbar/drupal.responsive-preview-toolbar',
- ],
- 'drupalSettings' => [
- 'responsive_preview' => [
- 'url' => ltrim($url, '/'),
- ],
- ],
- ],
- '#items' => [
- [
- '#type' => 'html_tag',
- '#tag' => 'button',
- '#value' => $this->t('Desktop'),
- '#attributes' => [
- 'data-responsive-preview-name' => 'desktop',
- 'data-responsive-preview-width' => 1280,
- 'data-responsive-preview-height' => 768,
- 'data-responsive-preview-dppx' => 1.0,
- 'data-responsive-preview-orientation' => 'landscape',
- 'class' => [
- 'responsive-preview-device',
- 'responsive-preview-icon',
- 'device-icon-desktop',
- ],
- ],
- ],
- [
- '#type' => 'html_tag',
- '#tag' => 'button',
- '#value' => $this->t('Mobile'),
- '#attributes' => [
- 'data-responsive-preview-name' => 'mobile',
- 'data-responsive-preview-width' => 768,
- 'data-responsive-preview-height' => 1280,
- 'data-responsive-preview-dppx' => 2,
- 'data-responsive-preview-orientation' => 'portrait',
- 'class' => [
- 'responsive-preview-device',
- 'responsive-preview-icon',
- 'device-icon-mobile',
- ],
- ],
- ],
- ],
- '#attributes' => [
- 'id' => 'responsive-preview-toolbar-tab',
- 'class' => ['responsive-preview-navigation-bar'],
- ],
- ];
- }
- }
- catch (\Exception $e) {
- return [];
- }
- }
-
-}
diff --git a/src/ResponsivePreview.php b/src/ResponsivePreview.php
index 923f210..dc01b65 100644
--- a/src/ResponsivePreview.php
+++ b/src/ResponsivePreview.php
@@ -166,6 +166,7 @@ class ResponsivePreview {
];
}
+ // Add a configuration link.
$links['configure_link'] = [
'#type' => 'link',
'#title' => $this->t('Configure devices'),
--
GitLab
From 8d96bb790c74ae82f7754223c3c82ae503b0849c Mon Sep 17 00:00:00 2001
From: roshni <roshniupadhyay89@gmail.com>
Date: Tue, 21 Jan 2025 10:19:45 +0530
Subject: [PATCH 07/10] Issue# 3489112: Module fixes
---
.../src/Plugin/TopBarItem/ResponsiveIcons.php | 154 +++++++++++-------
1 file changed, 97 insertions(+), 57 deletions(-)
diff --git a/modules/responsive_preview_navigation/src/Plugin/TopBarItem/ResponsiveIcons.php b/modules/responsive_preview_navigation/src/Plugin/TopBarItem/ResponsiveIcons.php
index bfa96f2..013b26a 100644
--- a/modules/responsive_preview_navigation/src/Plugin/TopBarItem/ResponsiveIcons.php
+++ b/modules/responsive_preview_navigation/src/Plugin/TopBarItem/ResponsiveIcons.php
@@ -85,77 +85,117 @@ final class ResponsiveIcons extends TopBarItemBase implements ContainerFactoryPl
public function build(): array {
// Check if the user has the required permission.
if (!$this->currentUser->hasPermission('access responsive preview')) {
- return [];
+ return [
+ '#cache' => [
+ 'contexts' => ['user.permissions'],
+ ],
+ ];
}
+
$url = NULL;
try {
$url = $this->responsivePreview->getPreviewUrl();
}
catch (\InvalidArgumentException $e) {
- return [];
+ return [
+ '#cache' => [
+ 'contexts' => ['user.permissions'],
+ ],
+ ];
}
+
$cache_contexts = ['user.permissions', 'route', 'url.path'];
+
if ($url) {
- return [
- '#theme' => 'responsive_preview_navigation',
- '#cache' => [
- 'contexts' => $cache_contexts,
+ return $this->buildResponsivePreviewNavigation($url, $cache_contexts);
+ }
+
+ return [
+ '#cache' => [
+ 'contexts' => $cache_contexts,
+ ],
+ ];
+ }
+
+ /**
+ * Builds the responsive preview navigation render array.
+ *
+ * @param string $url
+ * The responsive preview URL.
+ * @param array $cache_contexts
+ * The cache contexts.
+ *
+ * @return array
+ * A render array for the responsive preview navigation.
+ */
+ protected function buildResponsivePreviewNavigation(string $url, array $cache_contexts): array {
+ return [
+ '#theme' => 'responsive_preview_navigation',
+ '#cache' => [
+ 'contexts' => $cache_contexts,
+ ],
+ '#attached' => [
+ 'library' => [
+ 'responsive_preview/drupal.responsive-preview',
+ 'responsive_preview_navigation/drupal.responsive-preview-navigation',
],
- '#attached' => [
- 'library' => [
- 'responsive_preview/drupal.responsive-preview',
- 'responsive_preview_navigation/drupal.responsive-preview-navigation',
- ],
- 'drupalSettings' => [
- 'responsive_preview' => [
- 'url' => ltrim($url, '/'),
- ],
+ 'drupalSettings' => [
+ 'responsive_preview' => [
+ 'url' => ltrim($url, '/'),
],
],
- '#items' => [
- [
- '#type' => 'html_tag',
- '#tag' => 'button',
- '#value' => $this->t('Desktop'),
- '#attributes' => [
- 'data-responsive-preview-name' => 'desktop',
- 'data-responsive-preview-width' => 1280,
- 'data-responsive-preview-height' => 768,
- 'data-responsive-preview-dppx' => 1.0,
- 'data-responsive-preview-orientation' => 'landscape',
- 'class' => [
- 'responsive-preview-device',
- 'responsive-preview-icon',
- 'device-icon-desktop',
- ],
- ],
- ],
- [
- '#type' => 'html_tag',
- '#tag' => 'button',
- '#value' => $this->t('Mobile'),
- '#attributes' => [
- 'data-responsive-preview-name' => 'mobile',
- 'data-responsive-preview-width' => 768,
- 'data-responsive-preview-height' => 1280,
- 'data-responsive-preview-dppx' => 2,
- 'data-responsive-preview-orientation' => 'portrait',
- 'class' => [
- 'responsive-preview-device',
- 'responsive-preview-icon',
- 'device-icon-mobile',
- ],
- ],
- ],
+ ],
+ '#items' => $this->getResponsivePreviewItems(),
+ '#attributes' => [
+ 'id' => 'responsive-preview-toolbar-tab',
+ 'class' => ['responsive-preview-navigation-bar'],
+ ],
+ ];
+ }
+
+ /**
+ * Defines the responsive preview items.
+ *
+ * @return array
+ * An array of responsive preview items.
+ */
+ protected function getResponsivePreviewItems(): array {
+ return [
+ [
+ '#type' => 'html_tag',
+ '#tag' => 'button',
+ '#value' => $this->t('Desktop'),
+ '#attributes' => [
+ 'data-responsive-preview-name' => 'desktop',
+ 'data-responsive-preview-width' => 1280,
+ 'data-responsive-preview-height' => 768,
+ 'data-responsive-preview-dppx' => 1.0,
+ 'data-responsive-preview-orientation' => 'landscape',
+ 'class' => [
+ 'responsive-preview-device',
+ 'responsive-preview-icon',
+ 'device-icon-desktop',
],
- '#attributes' => [
- 'id' => 'responsive-preview-toolbar-tab',
- 'class' => ['responsive-preview-navigation-bar'],
+ ],
+ ],
+ [
+ '#type' => 'html_tag',
+ '#tag' => 'button',
+ '#value' => $this->t('Mobile'),
+ '#attributes' => [
+ 'data-responsive-preview-name' => 'mobile',
+ 'data-responsive-preview-width' => 768,
+ 'data-responsive-preview-height' => 1280,
+ 'data-responsive-preview-dppx' => 2,
+ 'data-responsive-preview-orientation' => 'portrait',
+ 'class' => [
+ 'responsive-preview-device',
+ 'responsive-preview-icon',
+ 'device-icon-mobile',
],
- ];
- }
- return [];
-
+ ],
+ ],
+ ];
}
}
--
GitLab
From d3bba84bfd2b30a0b8251ebec643aa084106756e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pablo=20L=C3=B3pez?= <pablo.lopez@lullabot.com>
Date: Wed, 22 Jan 2025 10:05:15 +0100
Subject: [PATCH 08/10] Issue #3489112: Integrate responsive preview with
Navigation top bar
---
.../src/Plugin/TopBarItem/ResponsiveIcons.php | 124 ++++++++----------
1 file changed, 52 insertions(+), 72 deletions(-)
diff --git a/modules/responsive_preview_navigation/src/Plugin/TopBarItem/ResponsiveIcons.php b/modules/responsive_preview_navigation/src/Plugin/TopBarItem/ResponsiveIcons.php
index 013b26a..8a90fde 100644
--- a/modules/responsive_preview_navigation/src/Plugin/TopBarItem/ResponsiveIcons.php
+++ b/modules/responsive_preview_navigation/src/Plugin/TopBarItem/ResponsiveIcons.php
@@ -22,24 +22,10 @@ use Drupal\responsive_preview\ResponsivePreview;
region: TopBarRegion::Tools,
label: new TranslatableMarkup('Responsive Icons'),
)]
-final class ResponsiveIcons extends TopBarItemBase implements ContainerFactoryPluginInterface {
+class ResponsiveIcons extends TopBarItemBase implements ContainerFactoryPluginInterface {
use StringTranslationTrait;
- /**
- * The ResponsivePreview service.
- *
- * @var \Drupal\responsive_preview\ResponsivePreview
- */
- private ResponsivePreview $responsivePreview;
-
- /**
- * The current user service.
- *
- * @var \Drupal\Core\Session\AccountProxyInterface
- */
- private AccountProxyInterface $currentUser;
-
/**
* Constructs a new ResponsiveIcons instance.
*
@@ -50,20 +36,18 @@ final class ResponsiveIcons extends TopBarItemBase implements ContainerFactoryPl
* @param mixed $plugin_definition
* The plugin implementation definition.
* @param \Drupal\responsive_preview\ResponsivePreview $responsivePreview
- * The ResponsivePreview service.
+ * The ResponsivePreview.
* @param \Drupal\Core\Session\AccountProxyInterface $currentUser
- * The current user service.
+ * The current user.
*/
public function __construct(
array $configuration,
string $plugin_id,
$plugin_definition,
- ResponsivePreview $responsivePreview,
- AccountProxyInterface $currentUser,
+ protected ResponsivePreview $responsivePreview,
+ protected AccountProxyInterface $currentUser,
) {
parent::__construct($configuration, $plugin_id, $plugin_definition);
- $this->responsivePreview = $responsivePreview;
- $this->currentUser = $currentUser;
}
/**
@@ -83,13 +67,17 @@ final class ResponsiveIcons extends TopBarItemBase implements ContainerFactoryPl
* {@inheritdoc}
*/
public function build(): array {
+ $build = [
+ '#cache' => [
+ 'contexts' => [
+ 'user.permissions',
+ 'route',
+ ],
+ ],
+ ];
// Check if the user has the required permission.
if (!$this->currentUser->hasPermission('access responsive preview')) {
- return [
- '#cache' => [
- 'contexts' => ['user.permissions'],
- ],
- ];
+ return $build;
}
$url = NULL;
@@ -97,24 +85,12 @@ final class ResponsiveIcons extends TopBarItemBase implements ContainerFactoryPl
$url = $this->responsivePreview->getPreviewUrl();
}
catch (\InvalidArgumentException $e) {
- return [
- '#cache' => [
- 'contexts' => ['user.permissions'],
- ],
- ];
+ return $build;
}
- $cache_contexts = ['user.permissions', 'route', 'url.path'];
-
if ($url) {
- return $this->buildResponsivePreviewNavigation($url, $cache_contexts);
+ return $this->buildResponsivePreviewNavigation($url);
}
-
- return [
- '#cache' => [
- 'contexts' => $cache_contexts,
- ],
- ];
}
/**
@@ -128,11 +104,15 @@ final class ResponsiveIcons extends TopBarItemBase implements ContainerFactoryPl
* @return array
* A render array for the responsive preview navigation.
*/
- protected function buildResponsivePreviewNavigation(string $url, array $cache_contexts): array {
+ protected function buildResponsivePreviewNavigation(string $url): array {
return [
'#theme' => 'responsive_preview_navigation',
'#cache' => [
- 'contexts' => $cache_contexts,
+ 'contexts' => [
+ 'user.permissions',
+ 'route',
+ ],
+ 'tags' => ['config:node_type_list'],
],
'#attached' => [
'library' => [
@@ -161,40 +141,40 @@ final class ResponsiveIcons extends TopBarItemBase implements ContainerFactoryPl
*/
protected function getResponsivePreviewItems(): array {
return [
- [
- '#type' => 'html_tag',
- '#tag' => 'button',
- '#value' => $this->t('Desktop'),
- '#attributes' => [
- 'data-responsive-preview-name' => 'desktop',
- 'data-responsive-preview-width' => 1280,
- 'data-responsive-preview-height' => 768,
- 'data-responsive-preview-dppx' => 1.0,
- 'data-responsive-preview-orientation' => 'landscape',
- 'class' => [
- 'responsive-preview-device',
- 'responsive-preview-icon',
- 'device-icon-desktop',
+ [
+ '#type' => 'html_tag',
+ '#tag' => 'button',
+ '#value' => $this->t('Desktop'),
+ '#attributes' => [
+ 'data-responsive-preview-name' => 'desktop',
+ 'data-responsive-preview-width' => 1280,
+ 'data-responsive-preview-height' => 768,
+ 'data-responsive-preview-dppx' => 1.0,
+ 'data-responsive-preview-orientation' => 'landscape',
+ 'class' => [
+ 'responsive-preview-device',
+ 'responsive-preview-icon',
+ 'device-icon-desktop',
+ ],
],
],
- ],
- [
- '#type' => 'html_tag',
- '#tag' => 'button',
- '#value' => $this->t('Mobile'),
- '#attributes' => [
- 'data-responsive-preview-name' => 'mobile',
- 'data-responsive-preview-width' => 768,
- 'data-responsive-preview-height' => 1280,
- 'data-responsive-preview-dppx' => 2,
- 'data-responsive-preview-orientation' => 'portrait',
- 'class' => [
- 'responsive-preview-device',
- 'responsive-preview-icon',
- 'device-icon-mobile',
+ [
+ '#type' => 'html_tag',
+ '#tag' => 'button',
+ '#value' => $this->t('Mobile'),
+ '#attributes' => [
+ 'data-responsive-preview-name' => 'mobile',
+ 'data-responsive-preview-width' => 768,
+ 'data-responsive-preview-height' => 1280,
+ 'data-responsive-preview-dppx' => 2,
+ 'data-responsive-preview-orientation' => 'portrait',
+ 'class' => [
+ 'responsive-preview-device',
+ 'responsive-preview-icon',
+ 'device-icon-mobile',
+ ],
],
],
- ],
];
}
--
GitLab
From bbf0bd2ef18ffd05bcf290767dea49ecac74fda3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pablo=20L=C3=B3pez?= <pablo.lopez@lullabot.com>
Date: Wed, 22 Jan 2025 10:06:25 +0100
Subject: [PATCH 09/10] Issue #3489112: Integrate responsive preview with
Navigation top bar
---
.../src/Plugin/TopBarItem/ResponsiveIcons.php | 1 -
1 file changed, 1 deletion(-)
diff --git a/modules/responsive_preview_navigation/src/Plugin/TopBarItem/ResponsiveIcons.php b/modules/responsive_preview_navigation/src/Plugin/TopBarItem/ResponsiveIcons.php
index 8a90fde..9fc93a9 100644
--- a/modules/responsive_preview_navigation/src/Plugin/TopBarItem/ResponsiveIcons.php
+++ b/modules/responsive_preview_navigation/src/Plugin/TopBarItem/ResponsiveIcons.php
@@ -80,7 +80,6 @@ class ResponsiveIcons extends TopBarItemBase implements ContainerFactoryPluginIn
return $build;
}
- $url = NULL;
try {
$url = $this->responsivePreview->getPreviewUrl();
}
--
GitLab
From bead32ce950c006356668432a800a4d181ef1d3d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pablo=20L=C3=B3pez?= <pablo.lopez@lullabot.com>
Date: Wed, 22 Jan 2025 10:25:44 +0100
Subject: [PATCH 10/10] Issue #3489112: Integrate responsive preview with
Navigation top bar
---
.../src/Plugin/TopBarItem/ResponsiveIcons.php | 2 ++
1 file changed, 2 insertions(+)
diff --git a/modules/responsive_preview_navigation/src/Plugin/TopBarItem/ResponsiveIcons.php b/modules/responsive_preview_navigation/src/Plugin/TopBarItem/ResponsiveIcons.php
index 9fc93a9..79387ab 100644
--- a/modules/responsive_preview_navigation/src/Plugin/TopBarItem/ResponsiveIcons.php
+++ b/modules/responsive_preview_navigation/src/Plugin/TopBarItem/ResponsiveIcons.php
@@ -90,6 +90,8 @@ class ResponsiveIcons extends TopBarItemBase implements ContainerFactoryPluginIn
if ($url) {
return $this->buildResponsivePreviewNavigation($url);
}
+
+ return $build;
}
/**
--
GitLab