Open adriallongarriu opened 4 months ago
It is much nicer than the workaround I have used 😅
CRUD::field('name')->type('text')->suffix('<button type="button" class="backpack-copy"><i class="lar la-clipboard"></i></button>')
and then created a clipboard.js
file with
$(".backpack-copy").on("click", function () {
const value = $(this).closest('.input-group').find('input').val();
if (value) {
navigator.clipboard.writeText(value);
}
});
and added it to the CRUD with
Widget::add()->type('script')->content(basset(base_path('resources/js/admin/clipboard.js')));
Update Just realised you have created a column, not a field.
Hey @adriallongarriu Thanks for coming up with this cool little useful feature. I appreciate your effort & the idea.
Hey @tabacitu @pxpm How do find the implementation?
Thanks @adriallongarriu for the PR 🙏
I like the copy feature. I've need it myself, and as @o15a3d4l11s2 showed, he also probably needed it in other contexts.
I am just not sure about the implementation. Should we add this as a new column, or add the copy ability to existing columns ?
I think the later is the most appropriate, as for example you can have a date
column with a specific format, and when you copy you expect to copy the formatted date. Or in an upload
copy the asset url, not only the displayed text.
I am postponing this decision to v7.
Cheers
WHY
I need a be able to copy the content of the column to the clipboard. Basically is a text column with an icon and on click the span copy the content to the clipboard. Maybe this can be and optional parameter on the basic column text buy for now i created a separated column. Using a column this can be used in lists and in show view. On click show a Noty to the user to report whether it was able to be copied or not
HOW
How did you achieve that, in technical terms?
Use javascript to copy text to clipboard using
await navigator.clipboard.writeText(text);
Is it a breaking change?
No
How can we test the before & after?
Note: on localhost only show the error message. To work need https otherwise the browser will block the action.