Laravel - Languages (Easy Copy String)

by Daniel Gualberto

HTML

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<div class="container py-3">

  <div class="input-group mb-3">
    <div class="input-group-prepend">
      <label class="input-group-text" for="selectMarks">Aspas</label>
    </div>
    <select class="custom-select" id="selectMarks">
      <option value="'">Simples '</option>
      <option value='"'>Duplas "</option>
    </select>
  </div>

  <div class="input-group mb-3">
    <div class="input-group-prepend">
      <label class="input-group-text" for="selectType">Tipo</label>
    </div>
    <select class="custom-select" id="selectType">
      <option value="String">String</option>
      <option value="Code">Code</option>
    </select>
  </div>

  <div class="input-group mb-3">
    <div class="input-group-prepend">
      <label class="input-group-text" for="selectPrefix">Prefixo</label>
    </div>
    <select class="custom-select" id="selectPrefix">
      <option value="auth">Auth</option>
      <option value="pagination">Pagination</option>
      <option value="passwords">Passwords</option>
      <option value="system" selected>System</option>
      <option value="validation">Validation</option>
    </select>
  </div>

  <div class="input-group mb-3">
    <div class="input-group-prepend">
      <span class="input-group-text" id="inputVariable-addon">Variável</span>
    </div>
    <input type="text" class="form-control" placeholder="Variable" aria-label="Variable" aria-describedby="inputVariable-addon" id="inputVariable">
    <div class="input-group-append">
      <button id="copyButton" class="btn...

CSS

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

JavaScript

document.getElementById("copyButton").addEventListener("click", function() {
  const selectMarks = document.getElementById("selectMarks").value;
  const selectType = document.getElementById("selectType").value;
  const selectPrefix = document.getElementById("selectPrefix").value;
  const inputVariable = document.getElementById("inputVariable").value;

  let result = "";

  if (selectType === "String") {
    result = `{{__(${selectMarks}${selectPrefix}.${inputVariable}${selectMarks})}}`;
  } else if (selectType === "Code") {
    result = `__(${selectMarks}${selectPrefix}.${inputVariable}${selectMarks})`;
  }

  // Copie o resultado para a área de transferência
  const textarea = document.createElement("textarea");
  textarea.value = result;
  document.body.appendChild(textarea);
  textarea.select();
  document.execCommand("copy");
  document.body.removeChild(textarea);

  // Exibir o toast
  const copiedToast = new bootstrap.Toast(document.getElementById("copiedToast"));
  copiedToast.show();
});