Commit dc4b9bd7 authored by Thomas Löffler's avatar Thomas Löffler
Browse files

Add composer package name into detail view

* Show composer how to install
* Click to copy to clipboard
parent 2d745a49
Pipeline #5238 passed with stages
in 7 minutes and 27 seconds
<html xmlns:f="" data-namespace-typo3-fluid="true">
<kbd style="cursor: pointer;" onclick="copyToClipboard(this);" class="small">composer req {composerName}</kbd>
......@@ -33,7 +33,7 @@
<f:if condition="{extension.composerPackageName}">
<f:if condition="{extension.composerName}">
<div class="card bgWhite">
<div class="card-header" role="tab" id="headingTwo">
<h5 class="mb-0">
......@@ -49,7 +49,7 @@
Go to your folder where the root composer.json file is located
Type: <code>composer require {extension.composerPackageName}</code> to get the latest version that runs on
Type: <f:render partial="ComposerNameWithClipboard" arguments="{composerName: extension.composerName}" /> to get the latest version that runs on
your TYPO3 version.
......@@ -94,6 +94,12 @@
<f:render partial="VersionSupportForTypo3" arguments="{version: extension.lastVersion}" />
<f:if condition="{extension.composerName}">
<p class="mb-3">
<h3>Composer support</h3>
<f:render partial="ComposerNameWithClipboard" arguments="{composerName: extension.composerName}" />
<f:if condition="{extension.tags}">
<p class="tags">
......@@ -55,3 +55,66 @@ jQuery(document).ready(function ($) {
function copyToClipboard(el) {
const text = $(el).text();
if (text) {
let aux = document.createElement("input");
aux.setAttribute("value", text);
// options
icon: "success",
title: "Copied to clipboard",
message: "Composer require command is in your clipboard now"
}, {
// settings
element: "body",
position: "fixed",
type: "success",
allow_dismiss: true,
newest_on_top: false,
showProgressbar: false,
placement: {
from: "top",
align: "center"
offset: 20,
spacing: 10,
z_index: 9000,
delay: 5000,
timer: 1000,
width: '50%',
url_target: "_blank",
mouse_over: null,
animate: {
enter: "animated fadeInDown",
exit: "animated fadeOutUp"
onShow: null,
onShown: null,
onClose: null,
onClosed: null,
icon_type: "class",
template: [
'<div class="col-sm-9" data-notify="container">',
'<div class="alert alert-{0}" role="alert">',
'<button type="button" aria-hidden="true" class="close" data-notify="dismiss">&times;</button>',
'<strong class="alert-heading" data-notify="title"><i class="fa fa-clipboard"></i> {1}</strong> ',
'<span class="mb-0" data-notify="message">{2}</span>',
'<div class="progress" data-notify="progressbar">',
'<div class="progress-bar progress-bar-{0}" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>',
'<a href="{3}" target="{4}" data-notify="url"></a>',
return false;
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment