diff --git a/modules/project_browser_source_example/src/Plugin/ProjectBrowserSource/ProjectBrowserSourceExample.php b/modules/project_browser_source_example/src/Plugin/ProjectBrowserSource/ProjectBrowserSourceExample.php
index 75b1be393e546a5be96dbfca70bc2e020eeaa705..c003e7b28c491f8fdcd52f826944a065e6b8fbf2 100644
--- a/modules/project_browser_source_example/src/Plugin/ProjectBrowserSource/ProjectBrowserSourceExample.php
+++ b/modules/project_browser_source_example/src/Plugin/ProjectBrowserSource/ProjectBrowserSourceExample.php
@@ -2,6 +2,7 @@
namespace Drupal\project_browser_source_example\Plugin\ProjectBrowserSource;
+use Drupal\Core\Extension\ModuleExtensionList;
use Drupal\project_browser\Plugin\ProjectBrowserSourceBase;
use Drupal\project_browser\ProjectBrowser\Project;
use Drupal\project_browser\ProjectBrowser\ProjectsResultsPage;
@@ -30,12 +31,15 @@ class ProjectBrowserSourceExample extends ProjectBrowserSourceBase {
* The plugin implementation definition.
* @param \Symfony\Component\HttpFoundation\RequestStack $requestStack
* The request from the browser.
+ * @param \Drupal\Core\Extension\ModuleExtensionList $moduleExtensionList
+ * The module extension list.
*/
public function __construct(
array $configuration,
$plugin_id,
$plugin_definition,
protected readonly RequestStack $requestStack,
+ protected ModuleExtensionList $moduleExtensionList,
) {
parent::__construct($configuration, $plugin_id, $plugin_definition);
}
@@ -49,6 +53,7 @@ class ProjectBrowserSourceExample extends ProjectBrowserSourceBase {
$plugin_id,
$plugin_definition,
$container->get('request_stack'),
+ $container->get('extension.list.module'),
);
}
@@ -155,6 +160,42 @@ class ProjectBrowserSourceExample extends ProjectBrowserSourceBase {
// Images: Array of images using the same structure as $logo, above.
images: [],
);
+ // @phpstan-ignore-next-line
+ $pb_path = $this->moduleExtensionList->getPath('project_browser');
+ $projects[] = new Project(
+ id: $project_from_source['identifier'] . '2',
+ logo: $logo,
+ // Maybe the source won't have all fields, but we still need to
+ // populate the values of all the properties.
+ isCompatible: TRUE,
+ isMaintained: TRUE,
+ isCovered: TRUE,
+ isActive: TRUE,
+ starUserCount: 0,
+ projectUsageTotal: 0,
+ machineName: $project_from_source['unique_name'] . '2',
+ body: [
+ 'summary' => $project_from_source['short_description'] . ' (different commands)',
+ 'value' => $project_from_source['long_description'] . ' (different commands)',
+ ],
+ title: 'A project with different commands',
+ // Status: 1 enabled / 0 disabled.
+ status: 1,
+ changed: $project_from_source['updated_at'],
+ created: $project_from_source['created_at'],
+ author: $author,
+ composerNamespace: $project_from_source['composer_namespace'],
+ categories: $categories,
+ // Images: Array of images using the same structure as $logo, above.
+ images: [],
+ type: 'different-commands',
+ commands: "<b>Steps to doing this thing</b>
+ <p>You can do it!</p>
+ <div class=\"command-box\">
+ <input id=\"{$project_from_source['identifier']}-download-command\" value=\"composer require {$project_from_source['unique_name'] }\" readonly=\"\">
+ <button data-copy-command><img src=\"/{$pb_path}/images/copy-icon.svg\" alt=\"Copy steps for {$project_from_source['identifier']}\"/></button>
+ </div>",
+ );
}
// Return one page of results. The first parameter is the total number of
diff --git a/project_browser.libraries.yml b/project_browser.libraries.yml
index 351181ad81547644b068f7c72df47c5a0ea498b0..af1f1f0764f127572eb586f69fb60b5e229c8d61 100644
--- a/project_browser.libraries.yml
+++ b/project_browser.libraries.yml
@@ -12,6 +12,7 @@ svelte:
- core/drupal.debounce
- core/drupal.dialog
- core/drupal.announce
+ - core/once
- project_browser/project_browser
project_browser:
diff --git a/src/ProjectBrowser/Project.php b/src/ProjectBrowser/Project.php
index 49ba0ca3f16963d994d78ac498f930132550ec1f..74df556f349937d1348fa837e96c938bd8a3a86f 100644
--- a/src/ProjectBrowser/Project.php
+++ b/src/ProjectBrowser/Project.php
@@ -4,6 +4,7 @@ namespace Drupal\project_browser\ProjectBrowser;
use Drupal\Component\Utility\Html;
use Drupal\Component\Utility\Unicode;
+use Drupal\Component\Utility\Xss;
/**
* Defines a single Project.
@@ -53,6 +54,26 @@ class Project implements \JsonSerializable {
* Images of the project.
* @param array $warnings
* Warnings for the project.
+ * @param string $type
+ * The project type. Defaults to 'module:drupalorg' to indicate modules from
+ * D.O., but may be changed to anything else that could helpfully identify
+ * a project type.
+ * @param string|bool $commands
+ * When FALSE, the project browser UI will not provide a "View Commands"
+ * button for the project UNLESS the type 'module:drupalorg', in which case
+ * it displays Svelte-generated install instructions.
+ * When it is a string and NOT 'module:drupalorg', that string will become
+ * the contents of the "View Commands" popup.
+ * To include a paste-able command that includes a copy button, use this
+ * markup structure:
+ * @code
+ * <div class="command-box">
+ * <input value="THE_COMMAND_TO_BE_COPIED" readonly="" />
+ * <button data-copy-command>
+ * <img src="/PATH_TO_PROJECT_BROWSER/images/copy-icon.svg\" alt="ALT TEXT"/>
+ * </button>
+ * </div>
+ * @endcode
*/
public function __construct(
public string $id,
@@ -75,6 +96,8 @@ class Project implements \JsonSerializable {
public array $categories = [],
public array $images = [],
public array $warnings = [],
+ public string $type = 'module:drupalorg',
+ public string|bool $commands = FALSE,
) {
$this->setSummary($body);
}
@@ -135,6 +158,8 @@ class Project implements \JsonSerializable {
'changed' => $this->changed,
'created' => $this->created,
'selector_id' => $this->getSelectorId(),
+ 'type' => $this->type,
+ 'commands' => Xss::filter($this->commands, [...Xss::getAdminTagList(), 'input', 'button']),
];
}
diff --git a/sveltejs/css/claro.css b/sveltejs/css/claro.css
index d6bca4dd0fbc152593fc743a3bd62d23b19ba84c..0adf3d560e906b455dba0a4f44333e5cc3c78da7 100644
--- a/sveltejs/css/claro.css
+++ b/sveltejs/css/claro.css
@@ -32,6 +32,7 @@
padding-inline: 1rem 0.25rem;
}
.project-browser-popup .copied-action {
+ position: absolute;
z-index: 1;
right: -18px;
width: fit-content;
diff --git a/sveltejs/public/build/bundle.js b/sveltejs/public/build/bundle.js
index cdae5fdb3a9fb43b536867f2c4fcefbfd8fb3561..a6faced07b6d5205aa1ed7267371cc23a7871558 100644
Binary files a/sveltejs/public/build/bundle.js and b/sveltejs/public/build/bundle.js differ
diff --git a/sveltejs/public/build/bundle.js.map b/sveltejs/public/build/bundle.js.map
index bf947ccf70fa162466436c8fb9b1add946174626..e9d7a93e4517405cb95e552ee052a1f0303bbe05 100644
Binary files a/sveltejs/public/build/bundle.js.map and b/sveltejs/public/build/bundle.js.map differ
diff --git a/sveltejs/src/Project/ActionButton.svelte b/sveltejs/src/Project/ActionButton.svelte
index b71951961c68a32ccb45a8344a59b0d7faa3bc52..e92b4627c0ffa4bc8cf6b922d060bd4c5c7edcaa 100644
--- a/sveltejs/src/Project/ActionButton.svelte
+++ b/sveltejs/src/Project/ActionButton.svelte
@@ -224,7 +224,7 @@
{showStatus}
/>
{/if}
- {:else}
+ {:else if project.type === 'module:drupalorg' || project.commands}
<ProjectButtonBase
click={() => openPopup(getCommandsPopupMessage(project), project)}
>{Drupal.t('View Commands')}
diff --git a/sveltejs/src/ProjectBrowser.svelte b/sveltejs/src/ProjectBrowser.svelte
index aeb73acc29021813d43f26495af4d8f3a9f2c075..5de0db2492acfb1f6eea8e9077124289c2a5efe6 100644
--- a/sveltejs/src/ProjectBrowser.svelte
+++ b/sveltejs/src/ProjectBrowser.svelte
@@ -176,7 +176,7 @@
}
await load($page);
- const focus = document.getElementById(element);
+ const focus = element ? document.getElementById(element) : false;
if (focus) {
focus.focus();
$focusedElement = '';
diff --git a/sveltejs/src/popup.js b/sveltejs/src/popup.js
index a327a7c120d3d36e94f97c6255c9bdbbec963ce1..c6d80261a19e651b0e9609242082a4f98179ac79 100644
--- a/sveltejs/src/popup.js
+++ b/sveltejs/src/popup.js
@@ -1,96 +1,117 @@
import { FULL_MODULE_PATH, ORIGIN_URL } from './constants';
// cspell:ignore dont
+const { once, Drupal } = window;
-export const copyCommand = (cmd, project) => {
- const getCopyElements = () => {
- const getCopyElement = (suffix) => document.querySelector(`#${project.project_machine_name}-${suffix}`)
- const action = ['Download', 'Install'].includes(cmd) ? cmd.toLowerCase() : 'install-drush';
- return [
- getCopyElement(`${action}-command`),
- getCopyElement(`copied-${action}`),
- ]
- }
- const [copiedCommand, copyReceipt] = getCopyElements();
-
- copiedCommand.select();
- // For mobile devices.
- copiedCommand.setSelectionRange(0, 99999);
- navigator.clipboard.writeText(copiedCommand.value);
- copyReceipt.style.opacity = '1';
+/**
+ * Finds [data-copy-command] buttons and adds copy functionality to them.
+ */
+const enableCopyButtons = () => {
setTimeout(() => {
- copyReceipt.style.transition = 'opacity 0.3s';
- copyReceipt.style.opacity = '0';
- }, 1000);
-};
+ once('copyButton', '[data-copy-command]').forEach((copyButton) => {
+ // If clipboard is not supported (likely due to non-https), then hide the
+ // button and do not bother with event listeners
+ if (!navigator.clipboard) {
+ // copyButton.hidden = true;
+ // return;
+ }
+ copyButton.addEventListener('click', (e) => {
+ // The copy button must be contained in a div
+ const container = e.target.closest('div');
+ // The only <input> within the parent dive should have its value set
+ // to the command that should be copied.
+ const input = container.querySelector('input');
+
+ // Make the input value the selected text
+ input.select()
+ input.setSelectionRange(0, 99999);
+ navigator.clipboard.writeText(input.value);
+ Drupal.announce(Drupal.t('Copied text to clipboard'));
+
+ // Create a "receipt" that will visually show the text has been copied.
+ const receipt = document.createElement('div')
+ receipt.textContent = Drupal.t('Copied')
+ receipt.classList.add('copied-action')
+ receipt.style.opacity = '1';
+ input.insertAdjacentElement('afterend', receipt)
+ // eslint-disable-next-line max-nested-callbacks
+ setTimeout(() => {
+ // Remove the receipt after 1 second.
+ receipt.remove()
+ }, 1000);
+ })
+ })
+ })
+}
export const getCommandsPopupMessage = (project) => {
- const download = Drupal.t('Download');
- const composerText = Drupal.t(
- 'The !use_composer_open recommended way!close to download any Drupal module is with !get_composer_open Composer!close.',
- {
- '!close': '</a>',
- '!use_composer_open':
- '<a href="https://www.drupal.org/docs/develop/using-composer/using-composer-to-install-drupal-and-manage-dependencies#managing-contributed" target="_blank" rel="noreferrer noopener">',
- '!get_composer_open':
- '<a href="https://getcomposer.org/" target="_blank" rel="noopener noreferrer">',
- },
- );
- const composerExistsText = Drupal.t(
- "If you already manage your Drupal application dependencies with Composer, run the following from the command line in your application's Composer root directory",
- );
- const infoText = Drupal.t('This will download the module to your codebase.');
- const composerDontWorkText = Drupal.t(
- "Didn't work? !learn_open Learn how to troubleshoot Composer!close",
- {
- '!learn_open':
- '<a href="https://getcomposer.org/doc/articles/troubleshooting.md" target="_blank" rel="noopener noreferrer">',
- '!close': '</a>',
- },
- );
- const downloadModuleText = Drupal.t(
- 'If you cannot use Composer, you may !dl_manually_open download the module manually through your browser!close',
- {
- '!dl_manually_open':
- '<a href="https://www.drupal.org/docs/user_guide/en/extend-module-install.html#s-using-the-administrative-interface" target="_blank" rel="noreferrer">',
- '!close': '</a>',
- },
- );
- const install = Drupal.t('Install');
- const installText = Drupal.t(
- 'Go to the !module_page_open Extend page!close (admin/modules), check the box next to each module you wish to enable, then click the Install button at the bottom of the page.',
- {
- '!module_page_open': `<a href="${ORIGIN_URL}/admin/modules" target="_blank" rel="noopener noreferrer">`,
- '!close': '</a>',
- },
- );
- const drushText = Drupal.t(
- 'Alternatively, you can use !drush_openDrush!close to install it via the command line',
- {
- '!drush_open': '<a href="https://www.drush.org/latest/" target="_blank" rel="noopener noreferrer">',
- '!close': '</a>',
- },
- );
- const installDrush = Drupal.t(
- 'If Drush is not installed, this will add the tool to your codebase',
- );
- const copied = Drupal.t('Copied!');
- const downloadAlt = Drupal.t('Copy the download command');
- const installAlt = Drupal.t('Copy the install command');
- const drushAlt = Drupal.t('Copy the install Drush command');
- const copyIcon = `${FULL_MODULE_PATH}/images/copy-icon.svg`;
- const makeButton = (altText, action) => `<button id="${action}-btn"><img src="${copyIcon}" alt="${altText}"/></button>
- <div id="${project.project_machine_name}-copied-${action}" class="copied-action">${copied}</div>`
- const downloadCopyButton = navigator.clipboard ? makeButton(downloadAlt, 'download') : '';
- const installCopyButton = navigator.clipboard ? makeButton(installAlt, 'install') : '';
- const installDrushCopyButton = navigator.clipboard ? makeButton(drushAlt, 'install-drush') : '';
+ // @todo move the message provided in this condition to the 'commands'
+ // property of the project definition.
+ if (project.type === 'module:drupalorg') {
+ const download = Drupal.t('Download');
+ const composerText = Drupal.t(
+ 'The !use_composer_open recommended way!close to download any Drupal module is with !get_composer_open Composer!close.',
+ {
+ '!close': '</a>',
+ '!use_composer_open':
+ '<a href="https://www.drupal.org/docs/develop/using-composer/using-composer-to-install-drupal-and-manage-dependencies#managing-contributed" target="_blank" rel="noreferrer noopener">',
+ '!get_composer_open':
+ '<a href="https://getcomposer.org/" target="_blank" rel="noopener noreferrer">',
+ },
+ );
+ const composerExistsText = Drupal.t(
+ "If you already manage your Drupal application dependencies with Composer, run the following from the command line in your application's Composer root directory",
+ );
+ const infoText = Drupal.t('This will download the module to your codebase.');
+ const composerDontWorkText = Drupal.t(
+ "Didn't work? !learn_open Learn how to troubleshoot Composer!close",
+ {
+ '!learn_open':
+ '<a href="https://getcomposer.org/doc/articles/troubleshooting.md" target="_blank" rel="noopener noreferrer">',
+ '!close': '</a>',
+ },
+ );
+ const downloadModuleText = Drupal.t(
+ 'If you cannot use Composer, you may !dl_manually_open download the module manually through your browser!close',
+ {
+ '!dl_manually_open':
+ '<a href="https://www.drupal.org/docs/user_guide/en/extend-module-install.html#s-using-the-administrative-interface" target="_blank" rel="noreferrer">',
+ '!close': '</a>',
+ },
+ );
+ const install = Drupal.t('Install');
+ const installText = Drupal.t(
+ 'Go to the !module_page_open Extend page!close (admin/modules), check the box next to each module you wish to enable, then click the Install button at the bottom of the page.',
+ {
+ '!module_page_open': `<a href="${ORIGIN_URL}/admin/modules" target="_blank" rel="noopener noreferrer">`,
+ '!close': '</a>',
+ },
+ );
+ const drushText = Drupal.t(
+ 'Alternatively, you can use !drush_openDrush!close to install it via the command line',
+ {
+ '!drush_open': '<a href="https://www.drush.org/latest/" target="_blank" rel="noopener noreferrer">',
+ '!close': '</a>',
+ },
+ );
+ const installDrush = Drupal.t(
+ 'If Drush is not installed, this will add the tool to your codebase',
+ );
+ const downloadAlt = Drupal.t('Copy the download command');
+ const installAlt = Drupal.t('Copy the install command');
+ const drushAlt = Drupal.t('Copy the install Drush command');
+ const copyIcon = `${FULL_MODULE_PATH}/images/copy-icon.svg`;
+ const makeButton = (altText, action) => `<button data-copy-command id="${action}-btn"><img src="${copyIcon}" alt="${altText}"/></button>`
+ const downloadCopyButton = makeButton(downloadAlt, 'download');
+ const installCopyButton = makeButton(installAlt, 'install');
+ const installDrushCopyButton = makeButton(drushAlt, 'install-drush');
- const div = document.createElement('div');
- div.classList.add('window');
- div.innerHTML = `<h3>1. ${download}</h3>
+ const div = document.createElement('div');
+ div.classList.add('window');
+ div.innerHTML = `<h3>1. ${download}</h3>
<p>${composerText}</p>
<p>${composerExistsText}:</p>
<div class="command-box">
- <input id="${project.project_machine_name}-download-command" value="composer require ${project.composer_namespace}" readonly/>
+ <input value="composer require ${project.composer_namespace}" readonly/>
${downloadCopyButton}
</div>
@@ -101,14 +122,14 @@ export const getCommandsPopupMessage = (project) => {
<p>${installText}</p>
<p>${drushText}:</p>
<div class="command-box">
- <input id="${project.project_machine_name}-install-command" value="drush pm:install ${project.project_machine_name}" readonly/>
+ <input value="drush pm:install ${project.project_machine_name}" readonly/>
${installCopyButton}
</div>
</div>
<p>${installDrush}:</p>
<div class="command-box">
- <input id="${project.project_machine_name}-install-drush-command" value="composer require drush/drush" readonly/>
+ <input value="composer require drush/drush" readonly/>
${installDrushCopyButton}
</div>
<style>
@@ -118,21 +139,23 @@ export const getCommandsPopupMessage = (project) => {
border: 1px solid;
}
</style>`;
- if (navigator.clipboard) {
- [['download', 'Download'], ['install', 'Install'], ['install-drush', 'Drush']].forEach(([id, command]) => {
- div.querySelector(`#${id}-btn`).addEventListener('click', () => {
- copyCommand(command, project);
- });
- });
+ enableCopyButtons();
+ return div;
+ }
+ if (project.commands) {
+ const div = document.createElement('div');
+ div.innerHTML = project.commands;
+ enableCopyButtons();
+ return div;
}
- return div;
+
};
export const openPopup = (getMessage, project) => {
const message = typeof getMessage === 'function' ? getMessage() : getMessage;
const popupModal = Drupal.dialog(message, {
title: project.title,
- dialogClass: 'project-browser-popup',
+ classes: {'ui-dialog': 'project-browser-popup'},
width: '50rem',
});
popupModal.showModal();
diff --git a/tests/modules/project_browser_test/project_browser_test.info.yml b/tests/modules/project_browser_test/project_browser_test.info.yml
index ccb21531ef1ae4b3e4fe4e1cbd8cdb957d1df14c..bdeba4dcba4b2a674186231989460cd6693b4a05 100644
--- a/tests/modules/project_browser_test/project_browser_test.info.yml
+++ b/tests/modules/project_browser_test/project_browser_test.info.yml
@@ -1,6 +1,6 @@
name: Project Browser test
type: module
description: 'Support module for testing Project Browser.'
-core_version_requirement: ^9 || ^10
+package: Testing
dependencies:
- project_browser:project_browser
diff --git a/tests/src/FunctionalJavascript/ProjectBrowserUiTest.php b/tests/src/FunctionalJavascript/ProjectBrowserUiTest.php
index ba9a61eb35f3e994ff02871186a6d6cc0d2042be..174ef53b3f6901c17c17521c85af6bdcd99cb942 100644
--- a/tests/src/FunctionalJavascript/ProjectBrowserUiTest.php
+++ b/tests/src/FunctionalJavascript/ProjectBrowserUiTest.php
@@ -200,18 +200,18 @@ class ProjectBrowserUiTest extends WebDriverTestBase {
$this->getSession()->executeScript('navigator.clipboard = true');
$this->assertTrue($assert_session->waitForText('By Hel Vetica'));
$this->clickWithWait('#project-browser .project__action_button');
- $allowed_html_field = $assert_session->fieldExists('helvetica-download-command');
- $this->assertTrue($allowed_html_field->hasAttribute('readonly'));
- $allowed_html_field = $assert_session->fieldExists('helvetica-install-command');
- $this->assertTrue($allowed_html_field->hasAttribute('readonly'));
+ $require_command = $assert_session->waitForElement('css', 'input[value="composer require drupal/helvetica"]');
+ $this->assertTrue($require_command->hasAttribute('readonly'));
+ $install_command = $assert_session->waitForElement('css', 'input[value="drush pm:install helvetica"]');
+ $this->assertTrue($install_command->hasAttribute('readonly'));
// Tests alt text for copy command image.
- $download_command = $page->find('css', '#download-btn img');
- $this->assertEquals('Copy the download command', $download_command->getAttribute('alt'));
+ $download_commands = $page->findAll('css', '.command-box img');
+ $this->assertEquals('Copy the download command', $download_commands[0]->getAttribute('alt'));
$install_command = $page->find('css', '#install-btn img');
- $this->assertEquals('Copy the install command', $install_command->getAttribute('alt'));
+ $this->assertEquals('Copy the install command', $download_commands[1]->getAttribute('alt'));
$install_command = $page->find('css', '#install-drush-btn img');
- $this->assertEquals('Copy the install Drush command', $install_command->getAttribute('alt'));
+ $this->assertEquals('Copy the install Drush command', $download_commands[2]->getAttribute('alt'));
}
/**