Merge pull request #2234 from thostetler/bibcode-copy-btn

Author: thostetler

src/js/widgets/abstract/templates/abstract_template.html

@@ -152,17 +152,22 @@ <h4 class="sr-only">Abstract</h4>
 
   <dt>Bibcode:</dt>
   <dd>
-    <a href="#abs/{{bibcode}}/abstract">
+    <button 
+    class="btn btn-link copy-btn" 
+    style="padding: 0px" 
+    id="abs-bibcode-copy" 
+    data-clipboard-text="{{bibcode}}" 
+    aria-label="copy bibcode">
       {{ bibcode }}
-    </a>
-    <i
-      class="icon-help"
-      aria-hidden="true"
-      data-toggle="popover"
-      data-container="body"
-      aria-hidden="true"
-      data-content="The bibcode is assigned by the ADS as a unique identifier for the paper."
-    ></i>
+      <i
+        class="icon-help"
+        aria-hidden="true"
+        data-toggle="popover"
+        data-container="body"
+        data-content="The bibcode is assigned by the ADS as a unique identifier for the paper."
+      ></i>
+    </button>
+    <span id="abs-bibcode-copy-msg" class="text-info" style="display: none;">Copied!</span>
   </dd>
 
   {{#if keyword}}

src/js/widgets/abstract/widget.js

@@ -5,6 +5,7 @@ define([
   'marionette',
   'js/components/api_request',
   'js/components/api_targets',
+  'clipboard',
   'backbone',
   'jquery',
   'underscore',
@@ -22,6 +23,7 @@ define([
   Marionette,
   ApiRequest,
   ApiTargets,
+  Clipboard,
   Backbone,
   $,
   _,
@@ -264,6 +266,17 @@ define([
       );
     },
 
+    copyBibcode() {
+      if (!this.bibcodeClipboard) {
+        this.bibcodeClipboard = new Clipboard('#abs-bibcode-copy');
+        this.bibcodeClipboard.on('success', () => {
+          $('#abs-bibcode-copy-msg')
+            .show()
+            .fadeOut(1000);
+        });
+      }
+    },
+
     onRender: function() {
       this.$('.icon-help').popover({
         trigger: 'hover',
@@ -284,6 +297,7 @@ define([
           this.$('.s-abstract-text', this.el).get(0),
         ]);
       }
+      this.copyBibcode();
     },
   });
 

src/js/wraps/abstract_page_manager/abstract-page-layout.html

@@ -20,7 +20,6 @@
                 <div class="main-content-container s-main-content-container" id="main-content" tabindex="-1">
                     <div class="print-visible"><h2 style="margin-left:6.1%;">NASA/ADS</h2> </div>
 
-                    <div id="abstract-title-container" class="s-abstract-title-container"></div>
                     <div id="current-subview">
                         <div data-widget="ShowAbstract"/>
                         <div data-widget="ShowCitations"/>

src/styles/sass/ads-sass/abstract-page-widgets.scss

@@ -327,3 +327,19 @@ $sciencewise-color: rgb(179, 27, 27);
     }
   }
 }
+
+.copy-btn {
+  text-decoration: none !important;
+
+  &:any-link {
+    text-decoration: none !important;
+  }
+
+  &:hover::after {
+    font-family: 'FontAwesome';
+    content: '\f0ea';
+    text-decoration: inherit;
+    color: black;
+    margin-left: 3px;
+  }
+}