Use DIV and not A for vin element

This commit is contained in:
2026-02-20 19:46:55 -05:00
parent a89f9881a6
commit f163f6518b
4 changed files with 7 additions and 10 deletions

View File

@@ -6,7 +6,7 @@
<div class="vehicle_vin attribute"> <div class="vehicle_vin attribute">
<div class="label"><%=t(:field_vin)%>:</div> <div class="label"><%=t(:field_vin)%>:</div>
<div class="value" id="vin"> <div class="value" id="vin">
<a href="#" id="copyLink" onclick="handleCopy(event)"><%=split_vin[0] if split_vin%><b><%=split_vin[1] if split_vin%></b></a> <div id="copyLink" onclick="handleCopy(event)"><%=split_vin[0] if split_vin%><b><%=split_vin[1] if split_vin%></b></div>
</div> </div>
</div> </div>

View File

@@ -19,7 +19,7 @@
<tr> <tr>
<th><%= t(:field_vin) %></th> <th><%= t(:field_vin) %></th>
<td> <td>
<a href="#" onclick="handleCopy(event)"><%= @vin[0] if @vin %><b><%=@vin[1] if @vin%></b></a> <div onclick="handleCopy(event)"><%= @vin[0] if @vin %><b><%=@vin[1] if @vin%></b></div>
</td> </td>
</tr> </tr>

View File

@@ -17,7 +17,7 @@
</div> </div>
<div class="label-sub"> <div class="label-sub">
<a href="#" onclick="handleCopy(event)"><%= vehicle.vin.scan(/.{1,9}/)[0] if vehicle.vin %><b><%=vehicle.vin.scan(/.{1,9}/)[1] if vehicle.vin%></b></a> <div onclick="handleCopy(event)"><%= vehicle.vin.scan(/.{1,9}/)[0] if vehicle.vin %><b><%=vehicle.vin.scan(/.{1,9}/)[1] if vehicle.vin%></b></div>
<% if show_customer %> <% if show_customer %>
<br/> <br/>
<%= vehicle.customer %> <%= vehicle.customer %>

View File

@@ -1,12 +1,9 @@
async function handleCopy(event) { async function handleCopy(event) {
console.log("Copy link clicked"); console.log("Copy link clicked");
// 1. Prevent the link from actually navigating
event.preventDefault();
let text; let text;
let link; let link;
// 2. Grab the text from our clicked link // Grab the text from our clicked link
if(event.target.tagName.toLowerCase() === 'b'){ if(event.target.tagName.toLowerCase() === 'b'){
text = event.target.parentElement.innerText; text = event.target.parentElement.innerText;
link = event.target.parentElement; link = event.target.parentElement;
@@ -16,15 +13,15 @@ async function handleCopy(event) {
} }
try { try {
// 3. Write to clipboard // Write to clipboard
await navigator.clipboard.writeText(text); await navigator.clipboard.writeText(text);
// 4. Update the UI to show it worked // Update the UI to show it worked
const originalText = link.innerText; const originalText = link.innerText;
link.innerHTML = "<b>Copied!</b>"; link.innerHTML = "<b>Copied!</b>";
link.style.color = "#4CAF50"; // Turn green link.style.color = "#4CAF50"; // Turn green
// 5. Reset after 2 seconds // Reset after 2 seconds
setTimeout(() => { setTimeout(() => {
// Check if the text is long enough to prevent errors // Check if the text is long enough to prevent errors
if (originalText.length >= 8) { if (originalText.length >= 8) {