add share buttons
This commit is contained in:
@@ -4,7 +4,7 @@
|
||||
<modelVersion>4.0.0</modelVersion>
|
||||
<groupId>de.champonthis</groupId>
|
||||
<artifactId>abi</artifactId>
|
||||
<version>0.3.4</version>
|
||||
<version>0.3.5</version>
|
||||
<name>abi</name>
|
||||
|
||||
<parent>
|
||||
|
||||
@@ -312,6 +312,67 @@
|
||||
:class="{'btn-danger': !committed, 'btn-danger disabled': committed == 'NO', 'btn-outline-danger opacity-75' : committed == 'YES', 'disabled': working}"
|
||||
@click="submitCommit('NO')">Nein, ich bin nicht dabei</button>
|
||||
</div>
|
||||
|
||||
<!-- Share Buttons -->
|
||||
<div class="border-top pt-3 mt-3 mb-3">
|
||||
<h6 class="text-muted mb-3">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"
|
||||
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
|
||||
stroke-linejoin="round" class="me-1">
|
||||
<circle cx="18" cy="5" r="3"></circle>
|
||||
<circle cx="6" cy="12" r="3"></circle>
|
||||
<circle cx="18" cy="19" r="3"></circle>
|
||||
<line x1="8.59" y1="13.51" x2="15.42" y2="17.49"></line>
|
||||
<line x1="15.41" y1="6.51" x2="8.59" y2="10.49"></line>
|
||||
</svg>
|
||||
Teile diese Seite mit Anderen aus unserem Jahrgang:
|
||||
</h6>
|
||||
<div class="d-flex flex-wrap gap-1">
|
||||
<button type="button"
|
||||
class="btn btn-outline-secondary p-2 d-flex align-items-center justify-content-center"
|
||||
@click="shareViaEmail()" title="Per E-Mail teilen">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"
|
||||
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
|
||||
stroke-linejoin="round">
|
||||
<path
|
||||
d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z">
|
||||
</path>
|
||||
<polyline points="22,6 12,13 2,6"></polyline>
|
||||
</svg>
|
||||
</button>
|
||||
<button type="button"
|
||||
class="btn btn-outline-success p-2 d-flex align-items-center justify-content-center"
|
||||
@click="shareViaWhatsApp()" title="Per WhatsApp teilen">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 640 640" fill="currentColor">
|
||||
<path d="M476.9 161.1C435 119.1 379.2 96 319.9 96C197.5 96 97.9 195.6 97.9 318C97.9 357.1 108.1 395.3 127.5 429L96 544L213.7 513.1C246.1 530.8 282.6 540.1 319.8 540.1L319.9 540.1C442.2 540.1 544 440.5 544 318.1C544 258.8 518.8 203.1 476.9 161.1zM319.9 502.7C286.7 502.7 254.2 493.8 225.9 477L219.2 473L149.4 491.3L168 423.2L163.6 416.2C145.1 386.8 135.4 352.9 135.4 318C135.4 216.3 218.2 133.5 320 133.5C369.3 133.5 415.6 152.7 450.4 187.6C485.2 222.5 506.6 268.8 506.5 318.1C506.5 419.9 421.6 502.7 319.9 502.7zM421.1 364.5C415.6 361.7 388.3 348.3 383.2 346.5C378.1 344.6 374.4 343.7 370.7 349.3C367 354.9 356.4 367.3 353.1 371.1C349.9 374.8 346.6 375.3 341.1 372.5C308.5 356.2 287.1 343.4 265.6 306.5C259.9 296.7 271.3 297.4 281.9 276.2C283.7 272.5 282.8 269.3 281.4 266.5C280 263.7 268.9 236.4 264.3 225.3C259.8 214.5 255.2 216 251.8 215.8C248.6 215.6 244.9 215.6 241.2 215.6C237.5 215.6 231.5 217 226.4 222.5C221.3 228.1 207 241.5 207 268.8C207 296.1 226.9 322.5 229.6 326.2C232.4 329.9 268.7 385.9 324.4 410C359.6 425.2 373.4 426.5 391 423.9C401.7 422.3 423.8 410.5 428.4 397.5C433 384.5 433 373.4 431.6 371.1C430.3 368.6 426.6 367.2 421.1 364.5z"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button type="button"
|
||||
class="btn btn-outline-info p-2 d-flex align-items-center justify-content-center"
|
||||
@click="shareViaTelegram()" title="Per Telegram teilen">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 640 640" fill="currentColor">
|
||||
<path d="M320 72C183 72 72 183 72 320C72 457 183 568 320 568C457 568 568 457 568 320C568 183 457 72 320 72zM435 240.7C431.3 279.9 415.1 375.1 406.9 419C403.4 437.6 396.6 443.8 390 444.4C375.6 445.7 364.7 434.9 350.7 425.7C328.9 411.4 316.5 402.5 295.4 388.5C270.9 372.4 286.8 363.5 300.7 349C304.4 345.2 367.8 287.5 369 282.3C369.2 281.6 369.3 279.2 367.8 277.9C366.3 276.6 364.2 277.1 362.7 277.4C360.5 277.9 325.6 300.9 258.1 346.5C248.2 353.3 239.2 356.6 231.2 356.4C222.3 356.2 205.3 351.4 192.6 347.3C177.1 342.3 164.7 339.6 165.8 331C166.4 326.5 172.5 322 184.2 317.3C256.5 285.8 304.7 265 328.8 255C397.7 226.4 412 221.4 421.3 221.2C423.4 221.2 427.9 221.7 430.9 224.1C432.9 225.8 434.1 228.2 434.4 230.8C434.9 234 435 237.3 434.8 240.6z"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button type="button"
|
||||
class="btn btn-outline-secondary p-2 d-flex align-items-center justify-content-center"
|
||||
@click="copyLink()" title="Link kopieren">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"
|
||||
fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
|
||||
stroke-linejoin="round">
|
||||
<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71">
|
||||
</path>
|
||||
<path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71">
|
||||
</path>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div x-show="shareMsg" class="alert alert-success alert-dismissible fade show mt-2 py-2"
|
||||
role="alert">
|
||||
<small x-text="shareMsg"></small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex mt-2">
|
||||
<button type="button" class="btn btn-outline-secondary flex-fill"
|
||||
:class="{'disabled': working}" @click="setStep(3)">
|
||||
@@ -468,6 +529,7 @@
|
||||
editingContactIndex: -1,
|
||||
editingContactData: { email: '', phone: '' },
|
||||
committed: '[[${committed}]]',
|
||||
shareMsg: '',
|
||||
|
||||
init() {
|
||||
const isDarkApplied = document.documentElement.getAttribute('data-bs-theme') === 'dark';
|
||||
@@ -760,6 +822,62 @@
|
||||
this.stepMsgType = 'danger';
|
||||
}
|
||||
this.working = false;
|
||||
},
|
||||
|
||||
getShareUrl() {
|
||||
return window.location.origin + window.location.pathname;
|
||||
},
|
||||
|
||||
getShareText() {
|
||||
return '20 Jahre Abitur 2007 - Lukas und Max haben ne kleine App gebaut um Kontakte für ein 20-Jahre Abi 2007 treffen zu sammeln. Trage dich gerne ein und schick den Link weiter';
|
||||
},
|
||||
|
||||
shareViaEmail() {
|
||||
const subject = encodeURIComponent('20 Jahre Abitur 2007');
|
||||
const body = encodeURIComponent(this.getShareText() + '\n\n' + this.getShareUrl());
|
||||
window.location.href = `mailto:?subject=${subject}&body=${body}`;
|
||||
},
|
||||
|
||||
shareViaWhatsApp() {
|
||||
const text = encodeURIComponent(this.getShareText() + '\n' + this.getShareUrl());
|
||||
window.open(`https://wa.me/?text=${text}`, '_blank');
|
||||
},
|
||||
|
||||
shareViaTelegram() {
|
||||
const text = encodeURIComponent(this.getShareText());
|
||||
const url = encodeURIComponent(this.getShareUrl());
|
||||
window.open(`https://t.me/share/url?url=${url}&text=${text}`, '_blank');
|
||||
},
|
||||
|
||||
async copyLink() {
|
||||
try {
|
||||
await navigator.clipboard.writeText(this.getShareUrl());
|
||||
this.shareMsg = 'Link wurde in die Zwischenablage kopiert!';
|
||||
setTimeout(() => {
|
||||
this.shareMsg = '';
|
||||
}, 3000);
|
||||
} catch (err) {
|
||||
// Fallback for older browsers
|
||||
const textArea = document.createElement('textarea');
|
||||
textArea.value = this.getShareUrl();
|
||||
textArea.style.position = 'fixed';
|
||||
textArea.style.left = '-999999px';
|
||||
document.body.appendChild(textArea);
|
||||
textArea.select();
|
||||
try {
|
||||
document.execCommand('copy');
|
||||
this.shareMsg = 'Link wurde in die Zwischenablage kopiert!';
|
||||
setTimeout(() => {
|
||||
this.shareMsg = '';
|
||||
}, 3000);
|
||||
} catch (err) {
|
||||
this.shareMsg = 'Fehler beim Kopieren des Links.';
|
||||
setTimeout(() => {
|
||||
this.shareMsg = '';
|
||||
}, 3000);
|
||||
}
|
||||
document.body.removeChild(textArea);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user