Skip to content

Commit 879e68c

Browse files
arkada38arkada38
committed
Adding WhatsApp Direct
1 parent 299cd4e commit 879e68c

File tree

10 files changed

+149
-0
lines changed

10 files changed

+149
-0
lines changed

‎projects/index.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,9 @@ <h1>{{ page.title }}</h1>
1010
<span class="badge badge-dark">rust</span>
1111
<span class="badge badge-dark">wasm</span>
1212
</a>
13+
<a href="whatsapp_direct/" class="list-group-item list-group-item-action">WhatsApp Direct
14+
<span class="badge badge-dark">Vue.js</span>
15+
</a>
1316
<a href="wonder_flowers/" class="list-group-item list-group-item-action">Flowers delivery
1417
<span class="badge badge-dark">Vue.js</span>
1518
</a>

‎projects/whatsapp_direct/icon-128.png‎

6.02 KB
Loading

‎projects/whatsapp_direct/icon-256.png‎

13.1 KB
Loading

‎projects/whatsapp_direct/icon-512.png‎

25.7 KB
Loading

‎projects/whatsapp_direct/icon-96.png‎

4.69 KB
Loading

‎projects/whatsapp_direct/index.html‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
8+
<link rel="manifest" href="manifest.json" />
9+
<title>WhatsApp Direct</title>
10+
11+
<link rel="icon" href="icon-512.png" sizes="512x512" />
12+
<link rel="icon" href="icon-256.png" sizes="256x256" />
13+
<link rel="icon" href="icon-128.png" sizes="128x128" />
14+
<link rel="icon" href="icon-96.png" sizes="96x96" />
15+
16+
<!-- Bootstrap -->
17+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
18+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
19+
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
20+
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
21+
22+
<script src="https://unpkg.com/vue/dist/vue.js"></script>
23+
</head>
24+
25+
<body>
26+
<div id="app" class="container">
27+
<h1>Прямая связь WhatsApp</h1>
28+
29+
<div class="row">
30+
<div class="col-sm">
31+
<div class="card">
32+
<div class="card-body">
33+
<label>Номер телефона:</label>
34+
<div class="input-group mb-3">
35+
<input type="tel" class="form-control" v-model="tel" v-on:input="saveTel()">
36+
<div class="input-group-append">
37+
<button class="btn btn-outline-secondary" type="button" v-on:click="clearTel()">X</button>
38+
</div>
39+
</div>
40+
41+
<label>Сообщение (необязательно):</label>
42+
<div class="input-group mb-3">
43+
<input class="form-control" v-model="message" v-on:input="saveMessage()">
44+
<div class="input-group-append">
45+
<button class="btn btn-outline-secondary" type="button" v-on:click="clearMessage()">X</button>
46+
</div>
47+
</div>
48+
49+
<button type="button" class="btn btn-outline-primary btn-block" v-on:click="send">
50+
Открыть в WhatsApp
51+
</button>
52+
</div>
53+
</div>
54+
</div>
55+
<div class="col-sm">
56+
<p>
57+
Телефонный номер переводится в числовой формат автоматически (удаляются все лишние символы, остаются только цифры).
58+
</p>
59+
<p>
60+
Если номер телефона начинается на
61+
<mark>0</mark>, то телефонному номеру автоматически присваивается код страны
62+
<mark>+66</mark>.
63+
</p>
64+
</div>
65+
</div>
66+
</div>
67+
68+
<script src="script.js"></script>
69+
<script src="serviceworker.js"></script>
70+
</body>
71+
72+
</html>

‎projects/whatsapp_direct/manifest.json‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
{
2+
"name": "WhatsApp Direct",
3+
"short_name": "WhatsApp Direct",
4+
"description": "Send message without adding contact",
5+
"start_url": "/projects/whatsapp_direct/",
6+
"background_color": "#000000",
7+
"theme_color": "aliceblue",
8+
"display": "standalone",
9+
"icons": [
10+
{
11+
"src": "icon-96.png",
12+
"sizes": "96x96",
13+
"type": "image/png"
14+
},
15+
{
16+
"src": "icon-128.png",
17+
"sizes": "128x128",
18+
"type": "image/png"
19+
},
20+
{
21+
"src": "icon-256.png",
22+
"sizes": "256x256",
23+
"type": "image/png"
24+
},
25+
{
26+
"src": "icon-512.png",
27+
"sizes": "512x512",
28+
"type": "image/png"
29+
}
30+
]
31+
}

‎projects/whatsapp_direct/script.js‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
var app = new Vue({
2+
el: '#app',
3+
data: {
4+
tel: localStorage.getItem('tel') === null ? '' : localStorage.getItem('tel'),
5+
message: localStorage.getItem('message') === null ? 'Здравствуйте, ' : localStorage.getItem('message')
6+
},
7+
computed: {
8+
tel_numeric: function () {
9+
var numbers = this.tel.replace(/\D/g,'')
10+
11+
if (numbers.charAt(0) == "0")
12+
numbers = numbers.replace("0", "66")
13+
14+
return numbers
15+
},
16+
message_encoded: function () {
17+
return encodeURI(this.message).replace(/%5B/g, '[').replace(/%5D/g, ']')
18+
}
19+
},
20+
methods: {
21+
send: function () {
22+
window.location.href = 'https://api.whatsapp.com/send?phone=' + this.tel_numeric + '&text=' + this.message_encoded
23+
},
24+
saveTel: function() {
25+
localStorage.setItem('tel', this.tel)
26+
},
27+
saveMessage: function() {
28+
localStorage.setItem('message', this.message)
29+
},
30+
clearTel: function () {
31+
this.tel = ''
32+
this.saveTel()
33+
},
34+
clearMessage: function () {
35+
this.message = ''
36+
this.saveMessage()
37+
}
38+
}
39+
})

‎projects/whatsapp_direct/serviceworker.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
if ('serviceWorker' in navigator) {
2+
navigator.serviceWorker.register('sw.js');
3+
}

‎projects/whatsapp_direct/sw.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
self.addEventListener('fetch', function(event) {});

0 commit comments

Comments
 (0)