Commit affcace9 authored by Pierre Smeyers's avatar Pierre Smeyers
Browse files

Merge branch 'fix/copy-to-clipboard' into 'master' 

fix: copy to clipboad (double \n on FF)

See merge request to-be-continuous/kicker!141
parents 6632f49d 096806f8

src/app/gitlab-ci/gitlab-ci.component.css

+8 −4
Original line number Diff line number Diff line 
:host  {

  position: relative;

}

code {

  display: block;

  font-family: monospace;

  white-space: nowrap;
@@ -26,10 +29,11 @@ pre { 
textarea.code {

  white-space: pre;

}

.bd-clipboard {

  position: relative;

  display: block;

  float: right;

.btn-clipboard {

  position: absolute;

  z-index: 1;

  top: 10px;

  right: 10px;

}

.btn-clipboard {

  background-color: white;

src/app/gitlab-ci/gitlab-ci.component.html

+68 −69
Original line number Diff line number Diff line 
<div class="bd-clipboard">

<button class="btn-clipboard btn btn-sm btn-secondary" placement="top" ngbTooltip="Copy to clipboard"

        id="copy-yaml-to-clipboard" (click)="copyToClipboard()">Copy

</button>

</div>

<code id="gitlab-ci-content">

  <div id="gitlab-ci-includes" [class.hide]="!hasIncludes()">

    <pre class="comment"># included templates</pre>

    <span class="key">include</span>:
@@ -73,5 +72,5 @@ 
      <pre>  - production</pre>

      </div>

  </div>

<br/>

<div id="gitlab-ci-jobs"></div>
 


</code>

src/app/gitlab-ci/gitlab-ci.component.ts

+4 −38
Original line number Diff line number Diff line
@@ -9,7 +9,8 @@ import {MatomoTracker} from 'ngx-matomo'; 
})

export class GitlabCiComponent {

  @Input() templates: Template[];

  @ViewChild('#copy-yaml-to-clipboard') copyButtonRef: ElementRef;

  // @ViewChild('#copy-yaml-to-clipboard') copyButtonRef: ElementRef;

  // @ViewChild('#gitlab-ci-content') yamlContent: ElementRef;



  constructor(

    private hostRef: ElementRef,
@@ -69,44 +70,9 @@ export class GitlabCiComponent { 


  copyToClipboard() {

    // select

    const node = this.hostRef.nativeElement;

    // @ts-ignore

    if (document.body.createTextRange) {

      // @ts-ignore

      const range = document.body.createTextRange();

      range.moveToElementText(node);

      range.select();

    } else if (window.getSelection) {

      const selection = window.getSelection();

      selection.removeAllRanges();

      const range = document.createRange();

      range.selectNodeContents(node);

      selection.addRange(range);

    } else {

      console.warn('Could not select text in node: Unsupported browser.');

      return;

    }



    const node = document.getElementById('gitlab-ci-content');

    // copy to clipboard

    document.execCommand('copy');



    // TODO: update tooltip

    // $(this)

    //   .attr('title', 'Copied!')

    //   .tooltip('_fixTitle')

    //   .tooltip('show')

    //   .attr('title', 'Copy to clipboard')

    //   .tooltip('_fixTitle');



    // unselect

    // @ts-ignore

    if (document.body.createTextRange) {

      // @ts-ignore

      document.selection.empty();

    } else if (window.getSelection) {

      window.getSelection().removeAllRanges();

    }



    navigator.clipboard.writeText(node.innerText);

    // Matomo tracking

    this.matomoTracker.trackEvent('kicker', 'copy-yaml');

  }