clipboard-polyfill Copy to Clipboard Part of Quoted Text

clipboard-polyfill-copy-to-clipboard-part-of-quoted-text.markdown

clipboard-polyfill Copy to Clipboard Part of Quoted Text

A Pen by Tom Elam on CodePen.

License.

index.html

<h1>Neque porro quisquam est qui dolorem ipsum quia</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc lectus sapien, tincidunt vitae semper a, auctor at
    justo. Aenean vitae porta ligula. Aenean condimentum venenatis tellus, ac laoreet augue imperdiet eu. Nam volutpat
    aliquet facilisis. Nunc
    vitae velit sit amet elit porta tristique. Phasellus pretium nibh sed consequat consectetur. Suspendisse
    ullamcorper vitae urna sit amet condimentum. Donec tempor gravida eleifend. Maecenas sit amet mauris maximus,
    pretium elit vel, auctor est. Aenean
    purus risus, porttitor eget tristique et, rhoncus non sapien. Nunc sed dolor vulputate, fermentum urna vitae,
    venenatis lectus. Etiam ac venenatis nisi. Pellentesque tincidunt iaculis feugiat. Nam rutrum orci eu lacus semper,
    varius aliquam sem iaculis.
    Duis ut nibh vel sapien varius congue sit amet a turpis. Phasellus gravida consectetur dictum.</p>
<p class="quote quote-primary">
    <span class="qoute-content">
        Praesent convallis arcu rutrum nibh aliquet efficitur. Maecenas convallis dui vel ante
        vestibulum, ac volutpat justo scelerisque. Donec ultricies vestibulum fringilla. Maecenas in eleifend nisi,
        eget
        maximus justo. Nunc vulputate tellus eget sapien efficitur,
        ut luctus urna hendrerit.
    </span>
    <button class="copy copy-primary" type="button">
        copy
    </button>
</p>
<p>Suspendisse cursus dolor sed justo efficitur, in euismod diam tempor. Sed accumsan pellentesque urna vel dignissim.
    Nullam accumsan eget nulla eu interdum. Phasellus in vestibulum mi, nec consectetur purus. Sed ultrices, ligula vel
    aliquet lobortis, mauris
    orci feugiat nibh, et convallis ante metus vitae orci. Pellentesque id facilisis leo. Curabitur id elit molestie,
    placerat tortor eu, maximus dolor. Pellentesque nec lacus eget diam vehicula commodo in nec libero. Curabitur sit
    amet mollis justo, id
    egestas lorem. Integer efficitur elit quis orci lacinia, nec sodales metus malesuada.</p>
<p class="quote quote-danger">
    <span class="qoute-content">Maecenas a consequat augue. Praesent eget justo venenatis, fermentum elit quis,
        eleifend
        tortor. Sed massa nunc, commodo fermentum massa non, mattis consequat elit. Pellentesque sed tortor hendrerit
        ante
        scelerisque posuere id at risus. Vestibulum ornare
        neque nec enim ullamcorper, sed malesuada lacus scelerisque. Aliquam a dolor eu massa lacinia rhoncus vitae non
        turpis.
    </span>
    <button class="copy copy-danger" type="button">
        copy
    </button>
</p>

<p><b>Warning:</b> In this example used <b><a href="https://github.com/lgarron/clipboard-polyfill" target="_blank">clipboard-polyfill</a></b> for copy text to clipboard but you can not preview on this page (code pen limitations). You can run on local or web hosting.</p>

script.js

$(document).on('click', '.quote .copy', function(){
    // copyto clipboard
    clipboard.writeText($(this).parent('p').find('.qoute-content').text());
  
    // demo alert
    window.alert($(this).parent('p').find('.qoute-content').text());
});

scripts

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard-polyfill/2.7.0/clipboard-polyfill.js"></script>
<script src="https://cdn.jsdelivr.net/npm/clipboard-polyfill@2.7.0/build/clipboard-polyfill.min.js"></script>

style.css

@import url('https://fonts.googleapis.com/css?family=Poppins');

/** UI Color Variables **/
:root {
    /* Colors */
    --primary-dark: #303f9f;
    --primary-light: #0099CC;

    --info-dark: #33b5e5;
    --info-light: #45cafc;

    --success-dark: #007E33;
    --success-light: #00C851;

    --warning-dark: #FF8800;
    --warning-light: #ffbb33;

    --danger-dark: #CC0000;
    --danger-light: #ff4444;

    --dirty-white: #fafafa;
    --dirty-white-dark: #eeeeee;
    --snow-white: #ffffff;

    /* Padding */
    --quote-padding: 5px;
    --quote-copy-padding: 5px 10px;
    --qoute-border-thickness: 2px;
}

body {
    font-family: 'Poppins';
    font-size: 15px;
}

p {
    padding: var(--quote-padding);
}

.quote {
    padding: var(--quote-padding);
}

.quote-primary {
    border: var(--qoute-border-thickness) solid var(--primary-light);
}

.quote-info {
    border: var(--qoute-border-thickness) solid var(--info-light);
}

.quote-success {
    border: var(--qoute-border-thickness) solid var(--success-light);
}

.quote-warning {
    border: var(--qoute-border-thickness) solid var(--warning-light);
}

.quote-danger {
    border: var(--qoute-border-thickness) solid var(--danger-light);
}

.copy {
    float: right;
    margin-top: 20px;
    margin-right: 10px;
    border: none;
    cursor: pointer;
    padding: var(--quote-copy-padding);
    color: var(--dirty-white);
}

.copy:hover {
    opacity: .9;
}

.copy-primary {
    background-color: var(--primary-light);
}

.copy-info {
    background-color: var(--info-light);
}

.copy-success {
    background-color: var(--success-light);
}

.copy-warning {
    background-color: var(--warning-light);
}

.copy-danger {
    background-color: var(--danger-light);
}