[Patchew-devel] [PATCH] add copy to clipboard button next to search

[Caio Carrara]

On Mon, Nov 26, 2018 at 01:36:25PM +0100, Paolo Bonzini wrote:
> This can be useful to copy and paste into the patchew-cli command line.
> 
> Fixes issue #88.
> 
> Signed-off-by: Paolo Bonzini <pbonzini at redhat.com>

Reviewed-by: Caio Carrara <ccarrara at redhat.com>

> ---
>  static/css/base.css     | 11 +++++++++--
>  static/js/patchew.js    | 23 +++++++++++++++++++++++
>  www/templates/base.html |  7 +++++--
>  3 files changed, 37 insertions(+), 4 deletions(-)
> 
> diff --git a/static/css/base.css b/static/css/base.css
> index 9e04f50..a8c66c0 100644
> --- a/static/css/base.css
> +++ b/static/css/base.css
> @@ -65,14 +65,21 @@ h1, h2, h3, .h1, .h2, .h3 {
>      color: #666;
>  }
>  
> -.search-help {
> +.form-glyph-action {
>      color: #ccc;
> +    border: 0;
> +    background: none;
> +    padding: 0px 3px;
>  }
>  
> -.search-help:hover {
> +.form-glyph-action:hover {
>      color: #aaa;
>  }
>  
> +.form-glyph-action:active {
> +    color: #23527c;
> +    padding: 0px 3px;
> +
>  .search-form .form-group {
>      width: 600px;
>  }
> diff --git a/static/js/patchew.js b/static/js/patchew.js
> index a982de5..ce45abd 100644
> --- a/static/js/patchew.js
> +++ b/static/js/patchew.js
> @@ -20,3 +20,26 @@ function add_fixed_scroll_events()
>                            $(window).scrollTop() + 10 >= pre_fixed.offset().top + pre_fixed.height());
>      })
>  }
> +
> +function copy_to_clipboard(input) {
> +    if (input.value == '') {
> +        return;
> +    }
> +
> +    var origSelectionStart = input.selectionStart;
> +    var origSelectionEnd = input.selectionEnd;
> +    var origFocus = typeof document.activeElement.focus === "function" ? document.activeElement : null;
> +
> +    // copy the selection.  Note that the old selection is not restored unless
> +    // an error happens, to give the user feedback that the copy has happened.
> +    input.focus();
> +    input.setSelectionRange(0, input.value.length);
> +    try {
> +       document.execCommand("copy");
> +    } catch(e) {
> +        input.setSelectionRange(origSelectionStart, origSelectionEnd);
> +        if (origFocus) {
> +            origFocus.focus();
> +        }
> +    }
> +}
> diff --git a/www/templates/base.html b/www/templates/base.html
> index 89dabcf..850317f 100644
> --- a/www/templates/base.html
> +++ b/www/templates/base.html
> @@ -63,9 +63,12 @@ crossorigin="anonymous"/>
>          <ul class="nav navbar-nav navbar-right">
>              <form class="navbar-form navbar-left search-form" role="search" method="GET" action="{% url 'search' %}">
>                  <div class="form-group">
> -                    <input type="text" class="form-control" name="q" placeholder="Search" value="{{ search }}">
> +                    <input type="text" class="form-control" id="q" name="q" placeholder="Search" value="{{ search }}">
>                  </div>
> -                <a href="{% url "search_help" %}"><span class="glyphicon glyphicon-question-sign search-help"></span></a>
> +                <button type="button" class="form-glyph-action" aria-label="Copy to clipboard"
> +				onclick="copy_to_clipboard(document.getElementById('q')); return 0"><span
> +				class="fa fa-paste"></span></button>
> +                <a href="{% url "search_help" %}" class="form-glyph-action"><span class="glyphicon glyphicon-question-sign"></span></a>
>              </form>
>              <div class="btn-group user-button">
>                  {% if request.user.is_authenticated %}
> -- 
> 2.19.1
> 
> _______________________________________________
> Patchew-devel mailing list
> Patchew-devel at redhat.com
> https://www.redhat.com/mailman/listinfo/patchew-devel

-- 
Caio Carrara
Software Engineer, Virt Team - Red Hat
ccarrara at redhat.com