Add clipboard changes

Adds a new clipboard entry for the access key copy button and accompanying HTML, and some modifications to allow the CSS to be extended to function on the new button.
HEPData · Jan 14, 2025 · 00bb25b · 00bb25b
1 parent c6bb6c7
commit 00bb25b
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 8 deletions.
diff --git a/hepdata/modules/records/assets/js/hepdata_common.js b/hepdata/modules/records/assets/js/hepdata_common.js
@@ -236,9 +236,10 @@ HEPDATA.render_associated_files = function (associated_files, placement) {
 HEPDATA.setup_clipboard = function () {
   if (HEPDATA.clipboard == undefined) {
     HEPDATA.clipboard = new ClipboardJS('.copy-btn');
+    HEPDATA.observer_clipboard = new ClipboardJS('.observer-copy-btn');
     HEPDATA.cite_clipboard = new ClipboardJS('.cite-copy-btn')
 
-    const clipboards = [HEPDATA.clipboard, HEPDATA.cite_clipboard];
+    const clipboards = [HEPDATA.clipboard, HEPDATA.cite_clipboard, HEPDATA.observer_clipboard];
 
     toastr.options.timeOut = 3000;
 

diff --git a/hepdata/modules/records/templates/hepdata_records/components/resource_details.html b/hepdata/modules/records/templates/hepdata_records/components/resource_details.html
@@ -13,8 +13,8 @@ <h4>
 
         {% if ctx.mode != 'sandbox' %}
             <div class="pull-right" id="data_link_container">
-                <input id="direct_data_link" value="{{ ctx.resource_url }}" disabled>
-                <button class="btn btn-small copy-btn" data-clipboard-text="{{ ctx.resource_url }}">
+                <input id="direct_data_link" class="data_link" value="{{ ctx.resource_url }}" disabled>
+                <button class="btn btn-small copy-btn copy-btn-style" data-clipboard-text="{{ ctx.resource_url }}">
                     <i class="fa fa-copy" alt="Copy to clipboard"></i>
                 </button>
             </div>

diff --git a/hepdata/modules/records/templates/hepdata_records/components/table_details.html b/hepdata/modules/records/templates/hepdata_records/components/table_details.html
@@ -79,8 +79,8 @@ <h4>
                     </div>
 
                     <div class="pull-right" id="data_link_container">
-                        <input id="direct_data_link" value="" disabled>
-                        <button class="btn btn-small copy-btn" data-clipboard-text="">
+                        <input id="direct_data_link" class="data_link" value="" disabled>
+                        <button class="btn btn-small copy-btn copy-btn-style" data-clipboard-text="">
                             <i class="fa fa-copy" alt="Copy to clipboard"></i>
                         </button>
                     </div>

diff --git a/hepdata/modules/records/templates/hepdata_records/publication_record.html b/hepdata/modules/records/templates/hepdata_records/publication_record.html
@@ -156,6 +156,18 @@
                                   class="fa fa-line-chart"></span> {{ analysis.type }}{% if analysis.type == 'rivet' %} Analysis{% endif %}</a></div></li>
                               {% endfor %}
                             </ul>
+                          {% if ctx.observer_key %}
+                            {% set access_url = ctx.site_url ~ '/record/' ~ ctx.recid ~ '?observer_key=' ~ ctx.observer_key %}
+                            <div class="pull-left">
+                              Access Key URL:
+                              <div id="data_link_container">
+                                <input id="observer_data_link" class="data_link" value="{{ access_url }}" disabled>
+                                <button class="btn btn-small observer-copy-btn copy-btn-style" data-clipboard-text="{{ access_url }}">
+                                    <i class="fa fa-copy" alt="Copy to clipboard"></i>
+                                </button>
+                              </div>
+                            </div>
+                          {% endif %}
                         </div>
                     </div>
 

diff --git a/hepdata/modules/theme/assets/scss/record.scss b/hepdata/modules/theme/assets/scss/record.scss
@@ -1030,21 +1030,20 @@ g.node {
   border-radius: 3px;
   height: 34px;
 
-  #direct_data_link {
+  .data_link {
     border: none;
     background: transparent;
     padding-left: 10px;
     font-size: .7em;
     color: $navy;
   }
 
-  .copy-btn {
+  .copy-btn-style {
     background: white;
     border-left: 1px solid #ccc;
     border-radius: 0;
     padding: 5px 12px;
   }
-
 }
 
 .toast-success {