publication quotations

assets/js/theme/design-system/clickToCopy.js

+class ClickToCopy {
+    constructor (button) {
+        this.button = button;
+        this.text = this.button.getAttribute('data-click-to-copy');
+        this.timeout = null;
+        this.listen();
+    }
+
+    listen () {
+        this.button.addEventListener('click', this.copy.bind(this));
+
+        this.button.addEventListener('keydown', (event) => {
+            if (event.key === 'Enter') {
+                this.copy();
+            }
+        });
+    }
+
+    copy () {
+        navigator.clipboard.writeText(this.text).then(() => {
+            this.button.classList.add('is-copied');
+            clearTimeout(this.timeout);
+            setTimeout(() => {
+                this.button.classList.remove('is-copied');
+            }, 3000);
+        });
+    }
+}
+
+// Selectors
+(function () {
+    const clickToCopy = document.querySelectorAll("[data-click-to-copy]");
+    clickToCopy.forEach(button => {
+        new ClickToCopy(button);
+    })
+})();
\ No newline at end of file

assets/js/theme/index.js

 import './body.js';
+import './design-system/clickToCopy';
 import './design-system/dropdowns';
 import './design-system/font';
 import './design-system/mainMenu';

assets/sass/_theme/design-system/typography.sass

@@ -265,7 +265,7 @@ a,
         @include icon-block(eye, after)
     &:hover
         background: $btn-hover-background
-
+    
 .link-more
     @include link
     @include icon(arrow, before)
@@ -291,6 +291,13 @@ sup
     font-size: 60%
     margin-left: px2rem(2)
 
+[data-click-to-copy]
+    cursor: pointer
+    @include icon(copy, after)
+    &.is-copied
+        @include icon(caret-bottom, after)
+
+
 *:focus-visible
     outline-color: inherit
     outline-offset: 5px

assets/sass/_theme/sections/publications.sass

@@ -28,7 +28,6 @@
         @include media-breakpoint-up(desktop)
             @include grid(3)
             align-items: baseline
-
         a
             @include h3
             grid-column: 1 / 3
@@ -56,6 +55,7 @@
             @include media-breakpoint-up(desktop)
             grid-column: 1 / 9
         .document-sidebar
+            margin-bottom: $spacing3
             @include media-breakpoint-up(desktop)
                 grid-column: 9 / 13
                 order: 2
@@ -67,25 +67,43 @@
                     align-items: center
                     display: flex
                     gap: $spacing1
+                    .name
+                        @include signature
                     .avatar
                         margin-bottom: 0
             > * + *
                 margin-top: $spacing3
     .links
-        display: flex
-        flex-wrap: wrap
-        gap: $spacing0
-        @include media-breakpoint-up(xxl)
-            gap: $spacing0 $grid-gutter
         &:not(:first-child)
             margin-top: $spacing3
-        > a
-            width: 100%
-            @include media-breakpoint-up(xl)
-                width: col(4, 8)
+        nav
+            margin-top: $spacing1
+            @include grid(2, desktop)
+            @include grid(4, xxl)
             @include media-breakpoint-up(xxl)
-                width: col(2, 8)
+                grid-gap: $spacing0 $grid-gutter
+            @include media-breakpoint-down(xxl)
+                grid-gap: $spacing0
+            > a
+                width: 100%
+                display: block
+                @include media-breakpoint-down(desktop)
+                    margin-bottom: $spacing1
+    .quotations
+        margin-top: $spacing3
+        > div
+            margin-top: $spacing1
+            @include grid(1)
+            @include grid(2, md, $spacing1)
+            @include media-breakpoint-down(md)
+                row-gap: $spacing1
 
+        .quotation
+            a
+                display: block
+            p
+                @include meta
+                margin-top: $spacing0
     .block-siblings-navigation
         .block-content
             padding-left: 0 !important

i18n/fr.yml

@@ -66,6 +66,9 @@ commons:
     play: Démarrer le carousel
     prev: Aller à l'élément précédent
     slideX: Aller au slide %s
+  click_to_copy:
+    aria_label: Cliquez pour copier {{ .description }}
+    button_title: Cliquez pour copier
   close: Fermer
   contact:
     address: Adresse

layouts/partials/publications/links.html

 {{ if gt .Params.links 0 }}
-  <div class="links">
-    {{ range .Params.links }}
-      <a href="{{ .url }}" target="_blank" rel="noopener" class="link-btn">{{ .label }}</a>
-    {{ end }}
+<div class="links">
+    <h2 class="h5">Téléchargements</h2>
+    <nav>
+      {{ range .Params.links }}
+        <a href="{{ .url }}" target="_blank" rel="noopener" class="link-btn">{{ .label }}</a>
+      {{ end }}
+    </nav>
   </div>
 {{ end }}
\ No newline at end of file

layouts/partials/publications/quotations.html

+{{ if gt .Params.citations 0 }}
+<div class="quotations">
+    <h2 class="h5">Citations</h2>
+    <div>
+      {{ range .Params.citations }}
+        <div class="quotation">
+          <a data-click-to-copy="{{- partial "PrepareText" .content -}}" role="button" title="{{ i18n "commons.click_to_copy.button_title" }}" aria-label="{{ i18n "commons.click_to_copy.aria_label" (dict "description" .label )}}" tabindex="0">{{ .label }}</a>
+          <p>{{ partial "PrepareHTML" .content }}</p>
+        </div>
+      {{ end }}
+    </div>
+  </div>
+{{ end }}
\ No newline at end of file

layouts/publications/single.html

@@ -19,6 +19,7 @@
         {{ with .Params.citation_full }}
           <p>{{ partial "PrepareHTML" . }}</p>
         {{ end }}
+        {{ partial "publications/quotations.html" . }}
         {{ partial "publications/links.html" . }}
       </div>
       {{ partial "commons/siblings-navigation.html" . }}