diff options
| -rw-r--r-- | gn2/wqflask/templates/gnqa_answer.html | 87 | ||||
| -rw-r--r-- | gn2/wqflask/templates/pubmed_modal.html | 78 |
2 files changed, 159 insertions, 6 deletions
diff --git a/gn2/wqflask/templates/gnqa_answer.html b/gn2/wqflask/templates/gnqa_answer.html index aad804ad..fea487b9 100644 --- a/gn2/wqflask/templates/gnqa_answer.html +++ b/gn2/wqflask/templates/gnqa_answer.html @@ -126,8 +126,27 @@ outline: none; <div id="collapse{{reference.doc_id}}" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading{{reference.doc_id}}"> <div class="panel-body"> + + <div> + </div> + {% if reference.pubmed %} + + <div style="margin: 5px;color:#3071a9;cursor: pointer;" > + + <button type="button" data-toggle="modal" data-target=".bd-pubmed-modal-lg-{{reference.doc_id}}" style="border:none;text-decoration:underline;outline: none;padding:5px;margin-left:25px;background: transparent;"> + <span><b>See PubMed Info</b></span> + </button> + </div> + + + <div> + {% include 'pubmed_modal.html' %} + </div> + + + {% endif %} - <p>{{reference.comboTxt}}</p> + <p class="node-references">{{reference.comboTxt}}</p> <div class="rating" style="margin-right:20px;padding:5px;text-align: right;" data-doc-id="{{reference.doc_id}}" data-task-id="{{task_id['task_id']}}"> <button class="btn" id="green" data-toggle="tooltip" data-placement="top" title="rate this reference +1 "><i class="fa fa-thumbs-up fa-lg" aria-hidden="true"></i></button> @@ -142,9 +161,6 @@ outline: none; {% else %} - - - <div class="panel-heading" role="tab" id="heading{{reference.doc_id}}"> <h4 class="panel-title"> @@ -158,9 +174,34 @@ outline: none; <div id="collapse{{reference.doc_id}}" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading{{reference.doc_id}}"> + <div class="panel-body"> + + + {% if reference.pubmed %} + + + <div style="margin: 5px;color:#3071a9;cursor: pointer;" > + + <button type="button" data-toggle="modal" data-target=".bd-pubmed-modal-lg-{{reference.doc_id}}" style="border:none;text-decoration:underline;outline: none;padding:5px;margin-left:25px;background: transparent;"> + <span><b>See PubMed Info</b></span> + </button> + </div> + + + + <div> + {% include 'pubmed_modal.html' %} + + </div> + + + + {% endif %} + + - <p>{{reference.comboTxt}}</p> + <p class="node-references">{{reference.comboTxt}}</p> <div class="rating" style="margin-right:20px;padding:5px;text-align: right;" data-doc-id="{{reference.doc_id}}" data-task-id="{{task_id['task_id']}}"> <button class="btn" id="green" data-toggle="tooltip" data-placement="top" title="rate this reference +1 "><i class="fa fa-thumbs-up fa-lg" aria-hidden="true"></i></button> @@ -202,7 +243,6 @@ $('.panel-collapse').on('show.bs.collapse', function () { document.addEventListener('DOMContentLoaded', function() { const GN_SERVER_URL = {{gn_server_url|tojson}} - console.log(GN_SERVER_URL) $('#globalsearchform').hide() $('#gnqna_search_home').show() $('footer').hide() @@ -255,5 +295,40 @@ if(likeBtn.hasClass("blue")){ }) </script> + +<script src="{{ url_for('js', filename='linkify/linkify.min.js') }}" type="text/javascript"></script> +<script src="{{ url_for('js', filename='linkify/linkify-html.min.js') }}" type="text/javascript"></script> + + +<script type="text/javascript"> + + +const nodeLinkify = (node_list)=>{ +node_list.forEach((node)=>{ + node.innerHTML = linkifyHtml(node.innerHTML, { + target:{ + url:"_blank", + email:null + } + }) +}) +} + + nodeLinkify(document.querySelectorAll(".pubmed-abstract")) + + nodeLinkify(document.querySelectorAll(".node-references")) + +var coll = document.getElementsByClassName("collapsible-btn"); +for (var i = 0; i < coll.length; i++) { + coll[i].addEventListener("click", function() { + + this.classList.toggle("active-btn"); + }); +} + + + +</script> + {% endblock %} diff --git a/gn2/wqflask/templates/pubmed_modal.html b/gn2/wqflask/templates/pubmed_modal.html new file mode 100644 index 00000000..f1bb05cb --- /dev/null +++ b/gn2/wqflask/templates/pubmed_modal.html @@ -0,0 +1,78 @@ + +<style type="text/css"> + + .collapsible-btn:after { + content: '\02795'; /* Unicode character for "plus" sign (+) */ + font-size: 13px; + color: white; + float: right; + margin-left: 5px; +} + +.active-btn, .collapsible-btn:hover { + background-color: #ccc; +} + + + +.active-btn:after { + content: "\2796"; /* Unicode character for "minus" sign (-) */ +} + + + +</style> +<div> + <div class="modal fade bd-pubmed-modal-lg-{{reference.doc_id}} " id="pubmedModal-{{reference.doc_id}}" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel-{{reference.doc_id}}" aria-hidden="true"> + <div class="modal-dialog modal-lg" role="document" > + <div class="modal-content"> + <div class="modal-header"> + + <div style='line-height:2.6rem;line-height: 1.4;font-weight: 700;font-family: "Merriweather","Georgia","Cambria","Times New Roman","Times",serif;'> + + <h2 class="modal-title" id="pubmedModalLabel-{{reference.doc_id}}" style="font-weight: bold">{{reference.pubmed[0].get('title')}}</h2> + </div> + + + + <div> + <p style="margin: 12px;"> + <span><b>Authors:</b></span> + <button class="btn btn-primary collapsible-btn" type="button" data-toggle="collapse" data-target="#collapseExample-{{reference.doc_id}}" aria-expanded="false" aria-controls="collapseExample-{{reference.doc_id}}" style="color:white;"> + Expand + </button> + </p> + <div class="collapse" id="collapseExample-{{reference.doc_id}}"> + <div style="color:#0071bc; padding: 15px;" class="card card-body"> + {{reference.pubmed[0].get('authors')}} + </div> + </div> + + </div> + + <h3 style="font-weight: bold;"> PMID:{{reference.pubmed[0].get('pub_id')}}</h3> + + </div> + <div class="modal-body"> + <h3 style="font-weight:bold"> + Abstract + </h3> + <div style="font-size:1.7rem;padding: 0 2rem;margin: 0 auto;" class="pubmed-abstract"> + <div >{{reference.pubmed[0].get('abstract')|safe}} + + </div> + + </div> + </div> + <div class="modal-footer" style="font-weight:bold;text-decoration: underline;"> + <a href="{{reference.pubmed[0].get('source')}}" target="_blank" style="float:left;">See full Article on Pubmed</a> + </div> + </div> + </div> +</div> +</div> + + + + + |