publications: Add citation feature + improvements (#302 #310 #205 #286)

* Add citation feature (#302)
* Remove detail button since all pub. titles are now linked (#310)
* Optimize order of pub. buttons and add more button options (#205)
* Use noopener for external URLs that open in new tabs (#286)

archetypes/publication.md

@@ -39,11 +39,14 @@ selected = false
 
 # Links (optional)
 url_pdf = ""
+url_preprint = ""
 url_code = ""
 url_dataset = ""
 url_project = ""
 url_slides = ""
 url_video = ""
+url_poster = ""
+url_source = ""
 
 # Featured image
 # Place your image in the `static/img/` folder and reference its filename below, e.g. `image = "example.jpg"`.

exampleSite/content/publication/clothing-search.md

@@ -16,6 +16,9 @@ url_pdf = "http://eprints.soton.ac.uk/352095/1/Cushen-IMV2013.pdf"
 url_project = "project/deep-learning/"
 url_slides = "#"
 url_video = "#"
+url_poster = "#"
+url_preprint = "http://eprints.soton.ac.uk/352095/1/Cushen-IMV2013.pdf"
+url_source = "#"
 
 [[url_custom]]
 name = "Custom Link"

exampleSite/static/files/citations/clothing-search.bib

@@ -0,0 +1,8 @@
+@inproceedings{cushen2013mobile,
+  title={Mobile visual clothing search},
+  author={Cushen, George A and Nixon, Mark S},
+  booktitle={IEEE International Conference on Multimedia and Expo Workshops},
+  pages={1--6},
+  year={2013},
+  organization={IEEE}
+}

i18n/en.yaml

@@ -16,12 +16,15 @@
 
 # Buttons
 
-- id: btn_details
-  translation: Details
+- id: btn_preprint
+  translation: Preprint
 
 - id: btn_pdf
   translation: PDF
 
+- id: btn_cite
+  translation: Cite
+
 - id: btn_slides
   translation: Slides
 
@@ -37,6 +40,18 @@
 - id: btn_project
   translation: Project
 
+- id: btn_poster
+  translation: Poster
+
+- id: btn_source
+  translation: Source Document
+
+- id: btn_copy
+  translation: Copy
+
+- id: btn_download
+  translation: Download
+
 # About widget
 
 - id: interests

layouts/partials/css/academic.css

@@ -201,6 +201,26 @@ small,
   font-size: .75em;
 }
 
+/*************************************************
+ *  Modals.
+ **************************************************/
+
+.modal-header .close {
+  font-size: 40px; /* Bigger cross. */
+  height: 30px; /* Remove icon's vertical spacing. */
+  overflow-y: hidden;
+  position: relative;
+  top: -5px;
+}
+
+.modal-content pre {
+  margin: 0;
+}
+
+#modal-error {
+  color: red;
+}
+
 /*************************************************
  *  Home Sections
  **************************************************/

layouts/partials/footer_container.html

@@ -19,3 +19,27 @@
     </p>
   </div>
 </footer>
+
+<!-- Citation modal -->
+<div id="modal" class="modal fade" role="dialog">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <button type="button" class="close btn-large" data-dismiss="modal">&times;</button>
+        <h4 class="modal-title">{{ i18n "btn_cite" }}</h4>
+      </div>
+      <div>
+        <pre><code class="modal-body tex"></code></pre>
+      </div>
+      <div class="modal-footer">
+        <a class="btn btn-primary btn-outline js-copy-cite" href="#" target="_blank">
+          <i class="fa fa-copy"></i> {{ i18n "btn_copy" }}
+        </a>
+        <a class="btn btn-primary btn-outline js-download-cite" href="#" target="_blank">
+          <i class="fa fa-download"></i> {{ i18n "btn_download" }}
+        </a>
+        <div id="modal-error"></div>
+      </div>
+    </div>
+  </div>
+</div>

layouts/partials/publication_links.html

@@ -1,33 +1,32 @@
 {{ $is_list := .is_list }}
 {{ $ := .content }}
 
-{{ if $is_list }}
-<a class="btn btn-primary btn-outline btn-xs" href="{{ $.Permalink }}">
-  {{ i18n "btn_details" }}
+{{ with $.Params.url_preprint }}
+<a class="btn btn-primary btn-outline{{ if $is_list }} btn-xs{{end}}" href="{{ . | absURL }}" target="_blank" rel="noopener">
+  {{ i18n "btn_preprint" }}
 </a>
 {{ end }}
 {{ with $.Params.url_pdf }}
-<a class="btn btn-primary btn-outline{{ if $is_list }} btn-xs{{end}}" href="{{ . | absURL }}" target="_blank">
+<a class="btn btn-primary btn-outline{{ if $is_list }} btn-xs{{end}}" href="{{ . | absURL }}" target="_blank" rel="noopener">
   {{ i18n "btn_pdf" }}
 </a>
 {{ end }}
-{{ with $.Params.url_slides }}
-<a class="btn btn-primary btn-outline{{ if $is_list }} btn-xs{{end}}" href="{{ . | absURL }}" target="_blank">
-  {{ i18n "btn_slides" }}
-</a>
-{{ end }}
-{{ with $.Params.url_video }}
-<a class="btn btn-primary btn-outline{{ if $is_list }} btn-xs{{end}}" href="{{ . | absURL }}" target="_blank">
-  {{ i18n "btn_video" }}
-</a>
+{{/* TODO: After Hugo v0.30 released, use fileExists function here. */}}
+{{ $directory := "static/files/citations/" }}
+{{ $filename := printf "%s.bib" $.File.TranslationBaseName }}
+{{ if (where (readDir $directory) "Name" $filename) }}
+<button type="button" class="btn btn-primary btn-outline{{ if $is_list }} btn-xs{{end}} js-cite-modal"
+        data-filename="{{ printf "files/citations/%s.bib" $.File.TranslationBaseName | relURL }}">
+  {{ i18n "btn_cite" }}
+</button>
 {{ end }}
 {{ with $.Params.url_code }}
-<a class="btn btn-primary btn-outline{{ if $is_list }} btn-xs{{end}}" href="{{ . | absURL }}" target="_blank">
+<a class="btn btn-primary btn-outline{{ if $is_list }} btn-xs{{end}}" href="{{ . | absURL }}" target="_blank" rel="noopener">
   {{ i18n "btn_code" }}
 </a>
 {{ end }}
 {{ with $.Params.url_dataset }}
-<a class="btn btn-primary btn-outline{{ if $is_list }} btn-xs{{end}}" href="{{ . | absURL }}" target="_blank">
+<a class="btn btn-primary btn-outline{{ if $is_list }} btn-xs{{end}}" href="{{ . | absURL }}" target="_blank" rel="noopener">
   {{ i18n "btn_dataset" }}
 </a>
 {{ end }}
@@ -36,8 +35,28 @@
   {{ i18n "btn_project" }}
 </a>
 {{ end }}
+{{ with $.Params.url_poster }}
+<a class="btn btn-primary btn-outline{{ if $is_list }} btn-xs{{end}}" href="{{ . | absURL }}" target="_blank" rel="noopener">
+  {{ i18n "btn_poster" }}
+</a>
+{{ end }}
+{{ with $.Params.url_slides }}
+<a class="btn btn-primary btn-outline{{ if $is_list }} btn-xs{{end}}" href="{{ . | absURL }}" target="_blank" rel="noopener">
+  {{ i18n "btn_slides" }}
+</a>
+{{ end }}
+{{ with $.Params.url_video }}
+<a class="btn btn-primary btn-outline{{ if $is_list }} btn-xs{{end}}" href="{{ . | absURL }}" target="_blank" rel="noopener">
+  {{ i18n "btn_video" }}
+</a>
+{{ end }}
+{{ with $.Params.url_source }}
+<a class="btn btn-primary btn-outline{{ if $is_list }} btn-xs{{end}}" href="{{ . | absURL }}" target="_blank" rel="noopener">
+  {{ i18n "btn_source" }}
+</a>
+{{ end }}
 {{ range $.Params.url_custom }}
-<a class="btn btn-primary btn-outline{{ if $is_list }} btn-xs{{end}}" href="{{ .url | absURL }}" target="_blank">
+<a class="btn btn-primary btn-outline{{ if $is_list }} btn-xs{{end}}" href="{{ .url | absURL }}" target="_blank" rel="noopener">
   {{ .name }}
 </a>
 {{ end }}

static/js/hugo-academic.js

@@ -269,6 +269,40 @@
       // window.addEventListener('hashchange', filter_publications, false);
     }
 
+    // Load citation modal on 'Cite' click.
+    $('.js-cite-modal').click(function(e) {
+      e.preventDefault();
+      let filename = $(this).attr('data-filename');
+      let modal = $('#modal');
+      modal.find('.modal-body').load( filename , function( response, status, xhr ) {
+        if ( status == 'error' ) {
+          let msg = "Error: ";
+          $('#modal-error').html( msg + xhr.status + " " + xhr.statusText );
+        } else {
+          $('.js-download-cite').attr('href', filename);
+        }
+      });
+      modal.modal('show');
+    });
+
+    // Copy citation text on 'Copy' click.
+    $('.js-copy-cite').click(function(e) {
+      e.preventDefault();
+      // Get selection.
+      let range = document.createRange();
+      let code_node = document.querySelector('#modal .modal-body');
+      range.selectNode(code_node);
+      window.getSelection().addRange(range);
+      try {
+        // Execute the copy command.
+        document.execCommand('copy');
+      } catch(e) {
+        console.log('Error: citation copy failed.');
+      }
+      // Remove selection.
+      window.getSelection().removeRange(range);
+    });
+
     // Initialise Google Maps if necessary.
     initMap();
   });