Merge pull request #2835 from BernieHuang2008/auto-copy

[feature] added a "copy" button in `search url` sidebar.

searx/static/themes/simple/src/js/main/results.js

@@ -16,6 +16,8 @@
           }
         ));
 
+    d.querySelector('#search_url button#copy_url').style.display = "block";
+
     searxng.on('.btn-collapse', 'click', function () {
       var btnLabelCollapsed = this.getAttribute('data-btn-text-collapsed');
       var btnLabelNotCollapsed = this.getAttribute('data-btn-text-not-collapsed');
@@ -41,6 +43,12 @@
       }
     });
 
+    searxng.on('#copy_url', 'click', function () {
+      var target = this.parentElement.querySelector('pre');
+      navigator.clipboard.writeText(target.innerText);
+      this.innerText = this.dataset.copiedText;
+    });
+
     searxng.selectImage = function (resultElement) {
       /* eslint no-unused-vars: 0 */
       if (resultElement) {

searx/static/themes/simple/src/less/style.less

@@ -729,9 +729,18 @@ summary.title {
 #search_url {
   div.selectable_url {
     pre {
+      float: left;
       width: 200em;
     }
   }
+
+  button#copy_url {
+    float: right;
+    padding: 0.4rem;
+    margin-left: 0.5rem;
+    border-radius: 0.3rem;
+    display: none;    // will be shown by JS.
+  }
 }
 
 #links_on_top {

searx/templates/simple/elements/search_url.html

@@ -1,6 +1,7 @@
 <div id="search_url" role="complementary" aria-labelledby="search_url-title">
   <details class="sidebar-collapsable">
     <summary class="title" id="search_url-title">{{ _('Search URL') }}</summary>
+    <button id="copy_url" type="submit" data-copied-text="{{ _('Copied') }}">{{ _('Copy') }}</button>
     <div class="selectable_url">
       <pre>{{ url_for('search', _external=True) }}?q={{ q|urlencode }}&amp;language={{ current_language }}&amp;time_range={{ time_range }}&amp;safesearch={{ safesearch }}
         {%- if pageno > 1 -%}