Merge branch 'feature/add-composer-package-in-detail-view' into 'develop'

Add composer package name into detail view See merge request t3o/ter!369

Merge branch 'feature/add-composer-package-in-detail-view' into 'develop'
Add composer package name into detail view See merge request t3o/ter!369
c422e563 · Tomas Norre Mikkelsen · 2d745a49 · dc4b9bd7 · c422e563 · c422e563
Commit c422e563 authored Sep 14, 2018 by Tomas Norre Mikkelsen
4 changed files
--- a/html/typo3conf/ext/ter_fe2/Resources/Private/Partials/ComposerNameWithClipboard.html
+++ b/html/typo3conf/ext/ter_fe2/Resources/Private/Partials/ComposerNameWithClipboard.html
+<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
+<kbd style="cursor: pointer;" onclick="copyToClipboard(this);" class="small">composer req {composerName}</kbd>
+</html>
--- a/html/typo3conf/ext/ter_fe2/Resources/Private/Partials/InstallationHowTo.html
+++ b/html/typo3conf/ext/ter_fe2/Resources/Private/Partials/InstallationHowTo.html
@@ -33,7 +33,7 @@
            </div>
        </div>
    </div>
-    <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
                        </li>
                        <li>
-                            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.
                        </li>
                    </ol>

--- a/html/typo3conf/ext/ter_fe2/Resources/Private/Templates/Extension/Show.html
+++ b/html/typo3conf/ext/ter_fe2/Resources/Private/Templates/Extension/Show.html
@@ -94,6 +94,12 @@
                        <h3>
                            <f:render partial="VersionSupportForTypo3" arguments="{version: extension.lastVersion}" />
                        </h3>
+                        <f:if condition="{extension.composerName}">
+                        <p class="mb-3">
+                            <h3>Composer support</h3>
+                            <f:render partial="ComposerNameWithClipboard" arguments="{composerName: extension.composerName}" />
+                        </p>
+                        </f:if>
                        <f:if condition="{extension.tags}">
                            <h3>Tags</h3>
                            <p class="tags">

--- a/html/typo3conf/ext/ter_fe2/Resources/Public/Javascript/Default.js
+++ b/html/typo3conf/ext/ter_fe2/Resources/Public/Javascript/Default.js
@@ -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);
+        document.body.appendChild(aux);
+        aux.select();
+        document.execCommand("copy");
+        document.body.removeChild(aux);
+
+        $.notify({
+            // 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>',
+                '</div>',
+                '<a href="{3}" target="{4}" data-notify="url"></a>',
+                '</div>',
+                '</div>'
+            ].join('')
+        });
+    }
+
+    return false;
+}