Similar change with less user-facing differences

Instead of using a textarea, we make the div containing the citation select on click. Also, fixed some issues with including two copies of jquery and bootstrap, which were causing the modal to fire twice. This commit also introduces a `main.js` file for keeping together miscellaneous JS that is used on multiple pages.
ctn-waterloo · Mar 3, 2016 · 81b234a · 81b234a
1 parent 7db6a31
commit 81b234a
Show file tree

Hide file tree

Showing 4 changed files with 87 additions and 84 deletions.
diff --git a/ctn_waterloo/static/css/main.css b/ctn_waterloo/static/css/main.css
@@ -392,38 +392,29 @@ h6 {
 
 /* Citation modal popup stuff */
 
-textarea {
-  width: 100%;
-  resize: none;
-  /* make 100% width account for scrollbar (CSS 3) */
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-}
-
-.tab-pane button {
-  margin-bottom: 10px;
+.tab-content > .tab-pane {
+    cursor: pointer;
 }
 
 /* make list.js pagination like bootstrap pagination */
 
 .pagination ul>li:first-child>.page>a, .pagination ul>li:first-child>.page>span {
-  border-left-width: 1px;
-  -webkit-border-top-left-radius: 4px;
-  -moz-border-radius-topleft: 4px;
-  border-top-left-radius: 4px;
-  -webkit-border-bottom-left-radius: 4px;
-  -moz-border-radius-bottomleft: 4px;
-  border-bottom-left-radius: 4px;
+   border-left-width: 1px;
+   -webkit-border-top-left-radius: 4px;
+   -moz-border-radius-topleft: 4px;
+   border-top-left-radius: 4px;
+   -webkit-border-bottom-left-radius: 4px;
+   -moz-border-radius-bottomleft: 4px;
+   border-bottom-left-radius: 4px;
 }
 
 .pagination ul>li:last-child>.page>a, .pagination ul>li:last-child>.page>span {
-  -webkit-border-top-right-radius: 4px;
-  -moz-border-radius-topright: 4px;
-  border-top-right-radius: 4px;
-  -webkit-border-bottom-right-radius: 4px;
-  -moz-border-radius-bottomright: 4px;
-  border-bottom-right-radius: 4px;
+   -webkit-border-top-right-radius: 4px;
+   -moz-border-radius-topright: 4px;
+   border-top-right-radius: 4px;
+   -webkit-border-bottom-right-radius: 4px;
+   -moz-border-radius-bottomright: 4px;
+   border-bottom-right-radius: 4px;
 }
 
 .pagination ul>li>.page>a, .pagination ul>li>.page>span {

diff --git a/ctn_waterloo/static/js/main.js b/ctn_waterloo/static/js/main.js
@@ -0,0 +1,52 @@
+// Miscellaneous JavaScript used on multiple pages
+
+/**
+ * Selects the text in a div so the user can easily copy it to the clipboard.
+ * @param {Object} div
+ */
+function selectdiv(div) {
+    var doc = document;
+    var text = doc.getElementById(div)
+    var range;
+
+    if (doc.body.createTextRange) {
+        range = doc.body.createTextRange();
+        range.moveToElementText(text);
+        range.select();
+    } else if (window.getSelection) {
+        var selection = window.getSelection();
+        range = doc.createRange();
+        range.selectNodeContents(text);
+        selection.removeAllRanges();
+        selection.addRange(range);
+    }
+}
+
+/**
+ * Shows the modal with the given citekey, and switches to the given tab.
+ * @param {string} citekey
+ * @param {string} tab
+ */
+function showmodaltab(citekey, tab) {
+    var m = $("#" + citekey + "cite");
+    var t = m.find('a[href="#' + citekey + tab + '"]');
+    m.modal('show');
+    t.tab('show');
+}
+
+// Don't reload the page when clicking on an anchor link
+(function($) {
+    $('a[href="#"]').click(function(e) {
+        e.preventDefault();
+    });
+})(jQuery);
+
+// Hook up all the tooltips
+(function($) {
+    $('[data-tooltip]').tooltip();
+})(jQuery);
+
+// Use $ for inline math
+MathJax.Hub.Config({
+    "tex2jax": { inlineMath: [ [ '$', '$' ] ] }
+});
diff --git a/ctn_waterloo/templates/base.html b/ctn_waterloo/templates/base.html
@@ -7,55 +7,29 @@
   </span>
 {%- endmacro -%}
 {% macro citation_box(pub, class="modal hide fade") -%}
-  <div id="{{ pub.citekey }}cite" class="{{ class }}" tabindex="-1"
-       role="dialog" aria-labelledby="Cite this paper" aria-hidden="true">
+  <div id="{{ pub.citekey }}cite" class="{{ class }}" tabindex="-1" role="dialog" aria-labelledby="Cite this paper" aria-hidden="true">
     <div class="modal-header">
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
       <h3 id="title">Cite "{{ pub.title }}"</h3>
     </div>
     <div class="modal-body">
       <ul class="nav nav-tabs" id="cite">
-        <li class="active"><a href="#{{ pub.citekey }}pt" id="pt" data-toggle="tab">Plain text</a></li>
-        <li><a href="#{{ pub.citekey }}bt" id="bt" data-toggle="tab">BibTeX</a></li>
+        <li class="active"><a href="#{{ pub.citekey }}pt" data-toggle="tab">Plain text</a></li>
+        <li><a href="#{{ pub.citekey }}bt" data-toggle="tab">BibTeX</a></li>
       </ul>
       <div class="tab-content">
-        <div class="tab-pane active" id="{{ pub.citekey }}pt">
-          <textarea readonly rows="10" id="pt">{{ pub.cite_plain }}</textarea>
-          <button class="btn" onclick="{{ pub.citekey }}_select_all('pt');"> Select All </button>
+        <div class="tab-pane active" id="{{ pub.citekey }}pt" onclick="selectdiv('{{ pub.citekey }}pt')">
+          <p>{{ pub.cite_plain }}</p>
         </div>
-        <div class="tab-pane" id="{{ pub.citekey }}bt">
-          <textarea readonly rows="10" id="bt">{{ pub.cite_bibtex }}</textarea>
-          <span style="float: left;">
-            <button class="btn" onclick="{{ pub.citekey }}_select_all('bt');"> Select All </button>
-          </span>
-          <span style="float: right;">
-            <a href="https://raw.githubusercontent.com/ctn-waterloo/website/master/ctn_waterloo/content/publications/{{ pub.citekey }}.bib" style="margin-right:20px;">Raw</a>
-          </span>
+        <div class="tab-pane" id="{{ pub.citekey }}bt" onclick="selectdiv('{{ pub.citekey }}bt')">
+          <p><pre>{{ pub.cite_bibtex }}</pre></p>
         </div>
       </div>
       <div class="modal-footer">
         <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
       </div>
     </div>
   </div>
-
-  <script type="text/javascript">
-    var {{ pub.citekey }}_target_tab = ''
-    function {{ pub.citekey }}_show_tab(id) {
-      {{ pub.citekey }}_target_tab = id
-    }
-
-    $('#{{ pub.citekey }}cite').on('show.bs.modal', function (event) {
-      var target_tab = {{ pub.citekey }}_target_tab
-      if (target_tab) {
-        $(this).find('a#' + target_tab).tab('show')
-      }
-    })
-
-    function {{ pub.citekey }}_select_all(id) {
-      $('#{{ pub.citekey }}cite textarea#' + id).select();
-    }
-  </script>
 {%- endmacro -%}
 <!DOCTYPE html>
 <!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
@@ -73,13 +47,9 @@ <h3 id="title">Cite "{{ pub.title }}"</h3>
     <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
     <link type="text/plain" rel="author" href="/humans.txt">
 
-    <!-- JQuery (must be before bootstrap.js) -->
-    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
-
     <!-- Bootstrap -->
     <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
     <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet">
-    <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
 
     <link href="//fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css">
     <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
@@ -159,26 +129,12 @@ <h3 id="title">Cite "{{ pub.title }}"</h3>
       </div>
     </footer>
 
-    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
-    <script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
-    <script type="text/javascript">
-      (function($) {
-        $('a[href="#"]').click(function(e) {
-          e.preventDefault();
-       });
-      })(jQuery);
-      (function($) {
-        $('[data-tooltip]').tooltip();
-      })(jQuery);
-    </script>
-    <script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
-    <script type="text/javascript">
-      MathJax.Hub.Config({
-        "tex2jax": { inlineMath: [ [ '$', '$' ] ] }
-      });
-    </script>
+    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
+    <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
+    <script type="text/javascript" src="//cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
     <script src="{{ url_for('static', filename='js/list.min.js') }}"></script>
     <script src="{{ url_for('static', filename='js/list.paging.min.js') }}"></script>
+    <script src="{{ url_for('static', filename='js/main.js') }}"></script>
     {% block extrajs %}{% endblock extrajs %}
     <script>
       (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){

diff --git a/ctn_waterloo/templates/publications_page.html b/ctn_waterloo/templates/publications_page.html
@@ -51,11 +51,15 @@ <h4>{{ publication.type }}</h4>
         {% endfor %}
       </dl>
       <h4>Cite</h4>
-      <p><a href="#{{ publication.citekey }}cite" data-toggle="modal"
-            onclick="{{ publication.citekey }}_show_tab('pt');"> Plain text </a></p>
-      <p><a href="#{{ publication.citekey }}cite" data-toggle="modal"
-            onclick="{{ publication.citekey }}_show_tab('bt');"> BibTeX </a></p>
-      <p> {{ github(publication, extension="bib", spanclass="rightcol-link") }} </p>
+      <p>
+        <a href="#{{ publication.citekey }}cite"  onclick="showmodaltab('{{ publication.citekey }}', 'pt');">Plain text</a>
+      </p>
+      <p>
+        <a href="#{{ publication.citekey }}cite" onclick="showmodaltab('{{ publication.citekey }}', 'bt');">BibTeX</a>
+      </p>
+      <p>
+        {{ github(publication, extension="bib", spanclass="rightcol-link") }}
+      </p>
     </div>
   </div>
   {{ citation_box(publication) }}