Copy to clipboard

Create a button and copies the indicated content to the clipboard

GCWeb implementation plan

Todo and for future consideration

Sponsor:

How to implement

Default

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus sem eros, consectetur posuere velit blandit vitae. Suspendisse quam nibh, suscipit vel turpis non, dignissim pellentesque ligula. Pellentesque et aliquam enim, vel convallis justo.

Nam feugiat:

• eros eget tempor lacinia,
• sapien purus imperdiet nibh,
• nec rhoncus justo tellus euismod ex.

<span class="test">test this</span>

<div class="wb-clipboard">
    <p>Lorem <a href="https://wet-boew.github.io/wet-boew-styleguide/index-en.html">ipsum dolor sit</a> amet, consectetur adipiscing elit. Vivamus luctus sem eros, consectetur posuere velit blandit vitae. Suspendisse quam nibh, suscipit vel turpis non, dignissim pellentesque ligula. Pellentesque et aliquam enim, vel convallis justo.</p>
    <p>Nam feugiat:</p>
    <ul>
        <li>eros eget tempor lacinia, </li>
        <li>sapien purus imperdiet nibh, </li>
        <li>nec rhoncus justo tellus euismod ex. </li>
    </ul>
    <p><pre><code><span class="test">test this</span></code></pre></p>
    <div class="row hidden">
        <div class="col-sm-2">
            <img src="../../images/playbutton.png" alt="" class="img-responsive">
        </div>
    </div>
</div>

Textarea (default)

<form id="form1" class="form-horizontal" role="form" method="get" action="#">
    <fieldset class="legend-brdr-bttm">
        <div class="form-group">
            <label for="Textarea1" class="col-sm-1 control-label">Textarea</label>
            <div class="col-sm-12">
                <textarea id="Textarea1" class="form-control full-width wb-clipboard" rows="3" cols="132">In sed velit accumsan nisi pellentesque rhoncus et nec est. Sed ultricies, lectus id pulvinar sagittis, magna turpis imperdiet lectus, vel condimentum lacus lectus eu felis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Pellentesque ac semper mi. Nulla id quam nec nisi sagittis maximus sed at sapien. Donec nec felis eget tellus tincidunt luctus ac vitae orci. Nullam sit amet nisl dictum, tincidunt magna sit amet, lacinia sapien.</textarea>
            </div>
        </div>
    </fieldset>
</form>

Input (default)

<form id="form2" class="form-horizontal" role="form" method="get" action="#">
    <fieldset class="legend-brdr-bttm">
        <div class="form-group">
            <label for="textinput1" class="col-sm-2">text input</label>
            <div class="col-sm-12">
                <input id="textinput1" class="form-control wb-clipboard full-width" type="text"
                    value="Vestibulum posuere neque at odio porta, varius aliquam turpis volutpat. Quisque sapien purus, vehicula sit amet tristique nec, ornare in purus.">
            </div>
        </div>
    </fieldset>
</form>

Formatting

Copy area with the border removed, and the copy area font style and button style changed.

<div class="wb-clipboard" data-wb-clipboard='{"noTextStyle": true, "border": false, "copyBtnStyle": "btn btn-primary wb-clipboard-btn", "copiedBtnStyle": "btn btn-info wb-clipboard-btn"}'>
    <p>In maximus orci quis ex maximus, sed rhoncus arcu ullamcorper. Mauris tincidunt sodales magna vitae luctus. Cras cursus dapibus arcu sed commodo. In enim diam, molestie in mattis nec, hendrerit et sapien. Curabitur nec lorem dapibus, egestas diam vitae, sollicitudin erat.</p>
</div>

Custom copy area start/end text

Change the hidden text surrounding the copyable area. Allows different values for before and after the content is copied.

<div class="wb-clipboard" data-wb-clipboard='{"clipStartText": "clipped content starts here", "clipEndText": "clipped content ends here", "copiedStartText": "copied content starts here", "copiedEndText": "copied content ends here"}'>
    <p>Quisque rhoncus tortor nibh, non cursus purus vulputate a. Ut ac nisi enim. Donec eu libero dui. Aenean in augue velit. Vestibulum at tellus fermentum lacus viverra mollis. Vestibulum ut fringilla lacus. Nullam cursus, elit quis vehicula maximus, tortor sem bibendum sem, ac rutrum est libero et nisl.</p>
</div>

Deactivate clipboard button

<div class="wb-clipboard" data-wb-clipboard='{"noButton": true}'>
    <p>Sed fermentum ante ipsum, nec pulvinar dui maximus at. Sed euismod nisl urna, in pretium elit ornare vel. Nunc pharetra commodo enim, et molestie nulla volutpat eu. Duis pulvinar vulputate tortor, quis venenatis libero pharetra nec. Nulla convallis eu turpis quis dignissim. In fermentum porta fringilla. Nulla vel ante a erat efficitur placerat. Curabitur gravida finibus erat a rutrum.</p>
</div>

Custom button

<div id="copy-area-1" class="wb-clipboard" data-wb-clipboard='{"noButton": true}'>
    <p>Suspendisse potenti. Praesent purus metus, consectetur ultrices vestibulum pellentesque, dictum vel lectus. Praesent a eros massa. Cras quis mauris ultricies, rhoncus nisi ac, dictum dui. Integer interdum nunc vitae orci vestibulum, eget congue ligula pulvinar. Curabitur neque nisl, maximus in tempor ut, bibendum nec ante.</p>
</div>
<button class="btn btn-default wb-clipboard-btn" data-wb-clipboard='{"copyAreaId": "copy-area-1"}'><span class="fa fa-files-o fa-lg mrgn-rght-sm"></span>Copy to clipboard</button>

custom button text

<div class="wb-clipboard" contenteditable="true" data-wb-clipboard='{"btnAlign": "left", "copyBtn": "Custom button text", "copiedBtn": "Custom copied text"}'>
        <p>Suspendisse a purus in tellus placerat facilisis. Nulla interdum consectetur metus, eu varius sapien luctus sit amet. In eleifend cursus ante at iaculis. Nullam mauris justo, sollicitudin in sem at, varius ornare lacus. Praesent bibendum, turpis id mattis vehicula, turpis enim feugiat elit, eu interdum nibh arcu in ipsum.</p>
    </div>

reset button

Create a button that can reset the state of all the copy areas on the page. resetFocusOut can be toggled so that clicking anywhere on the page will also reset all the copy areas on the page.

<button class="btn btn-default wb-clipboard-btn" data-wb-clipboard='{"resetBtn": true, "resetFocusOut": true}'>Reset all copy to clipboard buttons (data)</button>

<button id="testResetBtn" class="btn btn-default">Reset all copy to clipboard buttons (trigger)</button>
<script>
    $("#testResetBtn").click(function() {
        $(this).trigger("reset.wb-clipboard");
    });
</script>

copy on a pre tag

<div class="wb-clipboard">
    <p>Lorem <a href="https://wet-boew.github.io/wet-boew-styleguide/index-en.html">ipsum dolor sit</a> amet, consectetur adipiscing elit. Vivamus luctus sem eros, consectetur posuere velit blandit vitae. Suspendisse quam nibh, suscipit vel turpis non, dignissim pellentesque ligula. Pellentesque et aliquam enim, vel convallis justo.</p>
    <p>Nam feugiat:</p>
    <ul>
        <li>eros eget tempor lacinia, </li>
        <li>sapien purus imperdiet nibh, </li>
        <li>nec rhoncus justo tellus euismod ex. </li>
    </ul>
    <p><pre><code><span class="test">test this</span></code></pre></p>
    <div class="row hidden">
        <div class="col-sm-2">
            <img src="../../images/playbutton.png" alt="" class="img-responsive">
        </div>
    </div>
</div>

<pre class="prettyprint wb-clipboard"><code>&lt;div class=&quot;wb-clipboard&quot;&gt;
    &lt;p&gt;Lorem &lt;a href=&quot;https://wet-boew.github.io/wet-boew-styleguide/index-en.html&quot;&gt;ipsum dolor sit&lt;/a&gt; amet, consectetur adipiscing elit. Vivamus luctus sem eros, consectetur posuere velit blandit vitae. Suspendisse quam nibh, suscipit vel turpis non, dignissim pellentesque ligula. Pellentesque et aliquam enim, vel convallis justo.&lt;/p&gt;
    &lt;p&gt;Nam feugiat:&lt;/p&gt;
    &lt;ul&gt;
        &lt;li&gt;eros eget tempor lacinia, &lt;/li&gt;
        &lt;li&gt;sapien purus imperdiet nibh, &lt;/li&gt;
        &lt;li&gt;nec rhoncus justo tellus euismod ex. &lt;/li&gt;
    &lt;/ul&gt;
    &lt;p&gt;&lt;pre&gt;&lt;code&gt;&lt;span class=&quot;test&quot;&gt;test this&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/p&gt;
    &lt;div class=&quot;row hidden&quot;&gt;
        &lt;div class=&quot;col-sm-2&quot;&gt;
            &lt;img src=&quot;../../images/playbutton.png&quot; alt=&quot;&quot; class=&quot;img-responsive&quot;&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;</code></pre>

Inline clipboard

The quick brown fox jumped over the lazy dog

<p>The quick brown fox <span class="wb-clipboard">jumped over</span> the lazy dog</p>

<div class="wb-clipboard" data-wb-clipboard='{"noButton": true}'></div>

<div class="wb-clipboard" data-wb-clipboard='{"btnAlign": "right"}'></div>

<div class="wb-clipboard" data-wb-clipboard='{"border": false}'></div>

<div class="wb-clipboard" data-wb-clipboard='{"clipStartText": "Start of clipboard text"}'></div>

<div class="wb-clipboard" data-wb-clipboard='{"clipEndText": "End of clipboard text"}'></div>

<div class="wb-clipboard" data-wb-clipboard='{"copyStartText": "Start of copied text"}'></div>

<div class="wb-clipboard" data-wb-clipboard='{"copyEndText": "End of copied text"}'></div>

<div class="wb-clipboard" data-wb-clipboard='{"copyBtnStyle": "mrgn-tp-sm btn btn-default"}'></div>

<div class="wb-clipboard" data-wb-clipboard='{"copyBtn": "Copy to clipboard"}'></div>

<div class="wb-clipboard" data-wb-clipboard='{"copiedBtnStyle": "mrgn-tp-sm btn btn-success"}'></div>

<div class="wb-clipboard" data-wb-clipboard='{"copiedBtn": "Copied"}'></div>

<button class="btn btn-default wb-clipboard-btn" data-wb-clipboard='{"resetBtn": true}'>Reset all copy to clipboard buttons</button>

<div class="wb-clipboard" data-wb-clipboard='{"resetFocusOut": true}'></div>

<div class="wb-clipboard" data-wb-clipboard='{"selectAllContent": true}'></div>