templates/_partials/courses/_share.html.twig line 1

Open in your IDE?
  1. {% if app.user %}
  2. <span class="curso-compartir" data-actividad-id="{{ actividad.id }}" data-actividad-tipo="{{ tipo }}"></span>
  4. <div id="sharePopup" class="share-popup">
  5. <div class="share-popup-content">
  6. <span class="share-close">&times;</span>
  7. <h3>Compartir curso</h3>
  8. <div class="share-buttons">
  9. <a href="#" class="share-button share-whatsapp" data-share="whatsapp">
  10. <i class="fab fa-whatsapp"></i>
  11. </a>
  12. <a href="#" class="share-button share-telegram" data-share="telegram">
  13. <i class="fab fa-telegram"></i>
  14. </a>
  15. <a href="#" class="share-button share-facebook" data-share="facebook">
  16. <i class="fab fa-facebook"></i>
  17. </a>
  18. <a href="#" class="share-button share-twitter" data-share="twitter">
  19. <i class="fab fa-twitter"></i>
  20. </a>
  21. <a href="#" class="share-button share-linkedin" data-share="linkedin">
  22. <i class="fab fa-linkedin"></i>
  23. </a>
  24. <a href="#" class="share-button share-email" data-share="email">
  25. <i class="fas fa-envelope"></i>
  26. </a>
  27. <a href="#" class="share-button share-copy" data-share="copy">
  28. <i class="fas fa-copy"></i>
  29. </a>
  30. </div>
  31. </div>
  32. </div>
  34. <script>
  35. document.addEventListener('DOMContentLoaded', function() {
  36. // Inicializar botón de compartir
  37. const compartirBtn = document.querySelector('.curso-compartir[data-actividad-id="{{ actividad.id }}"][data-actividad-tipo="{{ tipo }}"]');
  38. const sharePopup = document.getElementById('sharePopup');
  39. const closeBtn = document.querySelector('.share-close');
  41. if (compartirBtn) {
  42. compartirBtn.addEventListener('click', function(e) {
  43. e.preventDefault();
  44. sharePopup.style.display = 'block';
  45. });
  46. }
  48. // Cerrar el popup al hacer clic en la X
  49. if (closeBtn) {
  50. closeBtn.addEventListener('click', function() {
  51. sharePopup.style.display = 'none';
  52. });
  53. }
  55. // Cerrar el popup al hacer clic fuera del contenido
  56. window.addEventListener('click', function(event) {
  57. if (event.target === sharePopup) {
  58. sharePopup.style.display = 'none';
  59. }
  60. });
  62. // Funcionalidad de compartir
  63. const shareButtons = document.querySelectorAll('.share-button');
  64. const pageUrl = window.location.href;
  65. const pageTitle = document.getElementById('course_name').innerText;
  67. shareButtons.forEach(button => {
  68. button.addEventListener('click', function(e) {
  69. e.preventDefault();
  70. const shareType = this.getAttribute('data-share');
  72. switch(shareType) {
  73. case 'whatsapp':
  74. window.open(`https://api.whatsapp.com/send?text=${encodeURIComponent(pageTitle + ' ' + pageUrl)}`, '_blank');
  75. break;
  76. case 'telegram':
  77. window.open(`https://t.me/share/url?url=${encodeURIComponent(pageUrl)}&text=${encodeURIComponent(pageTitle)}`, '_blank');
  78. break;
  79. case 'facebook':
  80. window.open(`https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(pageUrl)}`, '_blank');
  81. break;
  82. case 'twitter':
  83. window.open(`https://twitter.com/intent/tweet?url=${encodeURIComponent(pageUrl)}&text=${encodeURIComponent(pageTitle)}`, '_blank');
  84. break;
  85. case 'linkedin':
  86. window.open(`https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(pageUrl)}`, '_blank');
  87. break;
  88. case 'email':
  89. window.location.href = `mailto:?subject=${encodeURIComponent(pageTitle)}&body=${encodeURIComponent(pageUrl)}`;
  90. break;
  91. case 'copy':
  92. navigator.clipboard.writeText(pageUrl).then(() => {
  93. // Mostrar mensaje de éxito
  94. const copyButton = document.querySelector('.share-copy');
  95. const originalIcon = copyButton.innerHTML;
  96. copyButton.innerHTML = '<i class="fas fa-check"></i>';
  98. setTimeout(() => {
  99. copyButton.innerHTML = originalIcon;
  100. }, 2000);
  101. });
  102. break;
  103. }
  104. });
  105. });
  106. });
  107. </script>
  108. {% endif %}