mason/markers/external_links.mas

   1 <%doc>
   2 Call this page when using is marker_name
   3 </%doc>
   4
   5 <%args>
   6 $marker_name
   7 $title
   8 $collapsible
   9 </%args>
  10
  11
  12 <style>
  13     #external-links-list {
  14         list-style-type: none;
  15     }
  16 </style>
  17
  18
  19 <div id="external-links">
  20     <li id="external-links-list"></li>
  21 </div>
  22
  23
  24 <& /instance/external_link_sources.mas &>
  25 <script defer>
  26
  27     /**
  28      * on ready: get the marker props
  29      */
  30     jQuery(document).ready(function() {
  31         getProps();
  32         flankingSeq();
  33     });
  34
  35     /**
  36      * Get the marker props for the current marker name
  37      */
  38     function getProps() {
  39       jQuery.ajax( {
  40         type: 'GET',
  41         url: '/marker/prop/get',
  42         data: { marker_name: "<% $marker_name %>" },
  43         success: function(response) {
  44             let props = [];
  45             if ( response ) {
  46                 for ( let i = 0; i < response.length; i++ ) {
  47                     props.push(response[i]);
  48                 }
  49             }
  50             renderLinks(props);
  51         },
  52         error: function(response) {
  53             console.log("Could not load marker props");
  54             console.log(response);
  55         }
  56       });
  57     }
  58
  59     /**
  60      * Generate the external links HTML
  61      * @param  {Object[]} props A list of marker_name props
  62      */
  63     function renderLinks(props) {
  64         let html = "<table style=\"border-spacing: 10px; border-collapse: separate;\">";
  65         for ( let i = 0; i < props.length; i++ ) {
  66             let prop = props[i];
  67             let url = prop.url;
  68             let type_name = prop.type_name;
  69             let marker_name = prop.marker_name;
  70             let xref_name = prop.xref_name;
  71             html += "<tr><td><a href='" + url + xref_name + "' target='_new'>" + xref_name + "</a><td>" + type_name;
  72         }
  73         html += "</table>";
  74         jQuery("#external-links-list").html(html);
  75     }
  76
  77     /**
  78      * Generate the link for marker flanking sequence
  79      */
  80
  81     function flankingSeq() {
  82         let html = "<ul></ul>";
  83         jQuery("#external-links-list").html(html);
  84         console.log("Made it here");
  85     }
  86
  87 </script>