41b27825db55ab0699dacce3c18c34cf791e6428
hiram
  Sat Sep 7 23:49:38 2024 -0700
correctly manipulate the copy to clipboard link refs #32596

diff --git src/hg/htdocs/assemblySearch.html src/hg/htdocs/assemblySearch.html
index 3394cb3..7854364 100755
--- src/hg/htdocs/assemblySearch.html
+++ src/hg/htdocs/assemblySearch.html
@@ -1,127 +1,132 @@
 <!DOCTYPE HTML>
 <!--#set var="TITLE" value="Genome Assembly Search" -->
 <!--#set var="ROOT" value="" -->
 
 <!--#include virtual='$ROOT/inc/gbPageStartHardcoded.html' -->
 
 <link rel="stylesheet" type="text/css" href="<!--#echo var='ROOT' -->/style/assemblySearch.css">
 
     <h1>Genome assembly search and request</h1>
 <hr>
     <form id="searchForm">
         <div class="formDiv"> <!-- the entire form element -->
         <div>	<!-- container div for search box and submit/clear buttons -->
         <label for="searchBox">Enter search term(s) to find assembly:</label>
         <input type="text" id="searchBox" placeholder="e.g.: white rhino* -southern" name="searchBox" required>
         <div class="submitContainer">
            <button id="submitSearch" type="submit">Search</button>
            <div id="loadingSpinner" class="spinner"></div>
         </div>
         <button type="button" id="clearSearch">Clear</button>&nbsp;-
         <button type="button" id="advancedSearchButton">Show advanced search options</button>
            <!-- mouse over this text to see pop-up help message -->
            <span class="searchTip">Advanced search help
       <span class="searchTiptext"> <!-- hidden span for pop-up help message -->
 <ol id="searchTipList" class="noBullets">
 <li> + (plus) sign before <b>+word</b> to force included in result</li>
 <li> - (minus) sign before <b>-word</b> to exclude word from result</li>
 <li> * (asterisk) character at end of <b>word*</b> to make the word be a prefix search</li>
 <li> enclose "words in quotes" to form a phrase for the search</li>
 <li> all searches are case insensitive</li>
 <li> single word searches become prefix searches if the word does not match by itself </li>
 <!-- javaScript will add an extra element in debug mode
      to show the API reference -->
 </ol>
 </span> <!-- a hidden span for a pop-up help message -->
            </span>
-        <span id="shareThisSearch">
-          <a href="assemblySearch.html">Share this search</a>
-        </span>
         <!-- URL argument maxItemsOutput to html page can change this -->
         <input type="hidden" id="maxItemsOutput" value="500">
         </div> <!-- container div for search box and submit/clear buttons -->
         <div id="advancedSearchOptions" class="radioGroupContainer">
            <div class="radioGroup">
              <fieldset class="colVertical" onchange="optionsChange(event)">
              <legend>Assembly view/request</legend>
            <label><input type="checkbox" id="mustExist" onclick="atLeastOneCheckBoxOn(this)" name="mustExist" value="mustExist" checked>
               In available browsers
            </label><br>
            <label><input type="checkbox" id="notExist" onclick="atLeastOneCheckBoxOn(this)" name="notExist" value="notExist" checked>
               Can be requested
            </label>
              </fieldset>
            </div>
            <div class="radioGroup">
               <fieldset class="colVertical" onchange="optionsChange(event)">
               <legend>Assembly status</legend>
               <label><input type="radio" name="asmStatus" value="latest" id="statusLatest"> Latest</label>
               <label><input type="radio" name="asmStatus" value="replaced" id="statusReplaced"> Replaced</label>
               <label><input type="radio" name="asmStatus" value="suppressed" id="statusSuppressed"> Suppressed</label>
               <label><input type="radio" name="asmStatus" value="statusAny" id="statusAny" checked> Any status</label>
               </fieldset>
            </div>
            <div class="radioGroup">
               <fieldset class="colVertical" onchange="optionsChange(event)">
               <legend>RefSeq category</legend>
               <label><input type="radio" name="refSeqCategory" value="reference" id="refSeqReference"> Reference</label>
               <label><input type="radio" name="refSeqCategory" value="representative" id="refSeqRepresentative"> Representative</label>
               <label><input type="radio" name="refSeqCategory" value="refSeqAny" id="refSeqAny" checked> Any category</label>
               </fieldset>
            </div>
            <div class="radioGroup">
               <fieldset class="colVertical" onchange="optionsChange(event)">
               <legend>Assembly level</legend>
               <label><input type="radio" name="asmLevel" value="complete" id="asmLevelComplete"> Complete</label>
               <label><input type="radio" name="asmLevel" value="chromosome" id="asmLevelChromosome"> Chromosome</label>
               <label><input type="radio" name="asmLevel" value="scaffold" id="asmLevelScaffold"> Scaffold</label>
               <label><input type="radio" name="asmLevel" value="contig" id="asmLevelContig"> Contig</label>
               <label><input type="radio" name="asmLevel" value="asmLevelAny" id="asmLevelAny" checked> Any level</label>
               </fieldset>
            </div>
            <div class="radioGroup">
               <fieldset class="colVertical" onchange="optionsChange(event)">
               <label><input type="radio" name="wordMatch" value="anyWord" id="anyWord"> May match any word</label>
               <label><input type="radio" name="wordMatch" value="allWords" id="allWords" checked> Must match all words</label>
               </fieldset>
            </div>
         </div>	<!-- the radioGroupContainer -->
         </div> <!-- the entire form element -->
     </form>
     <div>	<!-- search results status line -->
     <span id="resultCounts">&nbsp;</span>
     <span id="measureTiming">- <em>search time: </em><span id="elapsedTime">0 milliseconds</span>.</span>
     </div>	<!-- search results status line -->
+    <div id=urlCopyLink>	<!-- copy link to share this search -->
+        <b>Share link to this search:&nbsp;</b>
+        <span id="urlText0" style="display:none">https://assemblySearch.html</span>
+        <span class="copyLinkSpan" data-target="urlText0">
+            <button onclick="copyToClipboard(event)" id="copyIcon0" class="copyLink" type="button" title="Copy URL to clipboard" data-target="urlText0">
+<svg style="width:0.9em" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+<!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --> <path d="M502.6 70.63l-61.25-61.25C435.4 3.371 427.2 0 418.7 0H255.1c-35.35 0-64 28.66-64 64l.0195 256C192 355.4 220.7 384 256 384h192c35.2 0 64-28.8 64-64V93.25C512 84.77 508.6 76.63 502.6 70.63zM464 320c0 8.836-7.164 16-16 16H255.1c-8.838 0-16-7.164-16-16L239.1 64.13c0-8.836 7.164-16 16-16h128L384 96c0 17.67 14.33 32 32 32h47.1V320zM272 448c0 8.836-7.164 16-16 16H63.1c-8.838 0-16-7.164-16-16L47.98 192.1c0-8.836 7.164-16 16-16H160V128H63.99c-35.35 0-64 28.65-64 64l.0098 256C.002 483.3 28.66 512 64 512h192c35.2 0 64-28.8 64-64v-32h-47.1L272 448z"></path></svg>&nbsp;Copy</button></span>
+    </div>	<!-- copy link to share this search -->
     <hr>
     <table id="dataTable" class="dataTable sorttable fifthRowHighlight" style="border: 1px solid black; display:block; max-width:1300px; position:sticky; top:0;">
         <colgroup id='colDefinitions'>
           <col id='viewReq' style="width: 10%">
           <col id='comName' style="width: 10%">
           <col id='sciName' style="width: 10%">
           <col id='asmId' style="width: 15%">
           <col id='year' style="width: 5%">
           <col id='clade' style="width: 8%">
           <col id='description' style="width: 30%">
           <col id='status' style="width: 12%">
         </colgroup>
         <thead style="position:sticky; top:0; border:1px solid #ddd; width:100%" id="tableHeader">
          <!-- table header rows are filled in by javaScript since they can
               be altered by the sorttable system and need to be refreshed -->
          <tr><td>&nbsp;</td></tr>
         </thead>
         <tbody id="tableBody"></tbody>
     </table>
     </hr>
     <div id="metaData">
     </div>
     </hr>
 
 
 <hr />
 <!--#include virtual='$ROOT/inc/garModal.html' -->
 </div><!-- closing gbsPage from gbPageStartHardcoded.html -->
 </div><!-- closing container-fluid from gbPageStartHardcoded.html -->
 <!--#include virtual="$ROOT/inc/gbFooterHardcoded.html"-->
 <script src="<!--#echo var='ROOT' -->/js/assemblySearch.js"></script>
 <script src="<!--#echo var='ROOT' -->/js/sorttable.js"></script>
 </body></html>