You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Part of the code I used to get the screenshot. The @index part need to be taken out.
<% if on_show? %> <% if field.value.blank? and dash_if_blank %>
—
<% else %><divclass="flex"><%if@index.in?([1,5])%><spanclass="flex-1"><%=content%></span><ahref="javascript:void(0)" class=" text-xs"><%=helpers.svg'heroicons/outline/clipboard',class: "h-4 inline"%> click to copy
</a><%end%></div><%end%>
This is a JS controller we use on avohq.io (on the hero section)
import{Controller}from'@hotwired/stimulus'exportdefaultclassextendsController{statictargets=['trigger']copy(){constinitialContent=this.triggerTarget.innerHTMLconststr=this.context.element.dataset.text/* ——— Derived from: https://hackernoon.com/copying-text-to-clipboard-with-javascript-df4d4988697f improved to add iOS device compatibility——— */constel=document.createElement('textarea');// Create a <textarea> elementletstoreContentEditable=el.contentEditable;letstoreReadOnly=el.readOnly;el.value=str;// Set its value to the string that you want copiedel.contentEditable=true;el.readOnly=false;el.setAttribute('readonly',false);// Make it readonly false for iOS compatabilityel.setAttribute('contenteditable',true);// Make it editable for iOSel.style.position='absolute';el.style.left='-9999px';// Move outside the screen to make it invisibledocument.body.appendChild(el);// Append the <textarea> element to the HTML documentconstselected=document.getSelection().rangeCount>0// Check if there is any content selected previously
? document.getSelection().getRangeAt(0)// Store selection if found
: false;// Mark as false to know no selection existed beforeel.select();// Select the <textarea> contentel.setSelectionRange(0,999999);document.execCommand('copy');// Copy - only works as a result of a user action (e.g. click events)document.body.removeChild(el);// Remove the <textarea> elementif(selected){// If a selection existed before copyingdocument.getSelection().removeAllRanges();// Unselect everything on the HTML documentdocument.getSelection().addRange(selected);// Restore the original selection}el.contentEditable=storeContentEditable;el.readOnly=storeReadOnly;consttarget=this.triggerTargettarget.innerHTML='Copied 👌'target.classList.add('transition','opacity-80','bg-green-100')setTimeout(()=>{target.innerHTML=initialContenttarget.classList.remove('opacity-80','bg-green-100')},1500);}}
The text was updated successfully, but these errors were encountered:
This can be an option for existing fields ( like text, text_area and some more text related fields) where click_to_copy: true makes that clipboard button appear.
Feature
We'd love to have a Click to copy field option.
Similar PR #2771
Current workarounds
Custom field.
Screenshots or screen recordings
Additional context
Part of the code I used to get the screenshot. The
@index
part need to be taken out.This is a JS controller we use on avohq.io (on the hero section)
The text was updated successfully, but these errors were encountered: