ClipboardJS allows for Flash-less copying into a device's clipboard.
Here are hints on implementing it in a Symfony setup with Wepback Encore already in place.
In the Symfony project's root directory run:
npm install clipboard --save
In /webpack.config.js
, add this line:
// ...
/** SomeSite assets */
encoreFactory('someSite')
//.addEntry('someEntry', './assets/someSite/js/index.js')
.copyFiles([
// ...
{ from: './node_modules/jquery/dist', pattern: /jquery.min.js/, to: 'jquery.min.js' },
// ...
])
;
To see effects live, you may run yarn watch
or npm run watch
(see more)
Here is an example implementation for your template file:
{% block content %}
<div class="row">
<div class="col-md-12">
<h4>Time for breakfast in bed</h4>
</div>
<div class="col-md-12">
<p>
Keep calm and...
</p>
<!-- Target for clipboard copying -->
{% set breakfastUrl = 'https://www.bbcgoodfood.com/recipes/collection/breakfast-recipes' %}
<input class="col-md-5" id="breakfast-url" value="{{ breakfastUrl }}" />
<!-- Trigger for clipboard copying -->
<button class="btn" id="copy-button" data-clipboard-target="#breakfast-url" title="Copy to clipboard"><i class="mdi mdi-clipboard-text" alt="Copy to clipboard"></i></button>
<a class="btn" href="{{ breakfast-url }}" target="_blank" title="Open breakfast recipe ideas."><i class="mdi mdi-bed" alt="Bed icon"></i></a>
</div>
</div>
{% endblock %}
{% block js %}
<script src="{{ asset('build/someSite/clipboard.min.js') }}"></script>
<script>
new ClipboardJS('#copy-button')
</script>
{% endblock %}