@textback/notification-widget 2.0.1-103212 → 2.0.1-103341

Sign up to get free protection for your applications and to get access to all the features.
package/views/sdk.html CHANGED
@@ -1,126 +1,132 @@
1
1
  <!DOCTYPE html>
2
2
  <html>
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
6
  <title>SDK Test</title>
7
7
 
8
8
  <style>
9
- button {
10
- margin-right: 10px;
11
- }
9
+ button {
10
+ margin-right: 10px;
11
+ }
12
12
 
13
- .tb-buttons,
14
- .tb-btn-wrapper,
15
- .tb-btn {
16
- box-sizing: border-box;
17
- text-align: center;
18
- }
13
+ .tb-buttons,
14
+ .tb-btn-wrapper,
15
+ .tb-btn {
16
+ box-sizing: border-box;
17
+ text-align: center;
18
+ }
19
19
 
20
- .tb-btn-wrapper {
21
- position: relative;
22
- display: inline-block;
23
- }
20
+ .tb-btn-wrapper {
21
+ position: relative;
22
+ display: inline-block;
23
+ }
24
24
 
25
- .tb-btn-tooltip {
26
- position: absolute;
27
- opacity: 0;
28
- visibility: hidden;
25
+ .tb-btn-tooltip {
26
+ position: absolute;
27
+ opacity: 0;
28
+ visibility: hidden;
29
29
 
30
- background-color: rgba(255, 255, 255, 0.9);
31
- padding: 5px 7px;
32
- border-radius: 3px;
33
- color: #6f7b8a;
34
- font-size: 10px;
35
- z-index: 10;
36
- top: 52px;
37
- box-shadow: 0 2px 4px 1px rgba(0, 0, 0, 0.2);
38
- transition: opacity 0.4s;
39
- }
30
+ background-color: rgba(255, 255, 255, 0.9);
31
+ padding: 5px 7px;
32
+ border-radius: 3px;
33
+ color: #6f7b8a;
34
+ font-size: 10px;
35
+ z-index: 10;
36
+ top: 52px;
37
+ box-shadow: 0 2px 4px 1px rgba(0, 0, 0, 0.2);
38
+ transition: opacity 0.4s;
39
+ }
40
40
 
41
- .tb-btn-tooltip:before, .tb-btn-tooltip:after {
42
- content: ' ';
43
- height: 0;
44
- position: absolute;
45
- width: 0;
46
- border: 10px solid transparent;
47
- }
41
+ .tb-btn-tooltip:before,
42
+ .tb-btn-tooltip:after {
43
+ content: " ";
44
+ height: 0;
45
+ position: absolute;
46
+ width: 0;
47
+ border: 10px solid transparent;
48
+ }
48
49
 
49
- .tb-btn-tooltip:before {
50
- position: absolute;
51
- top: -19px;
52
- left: 70px;
53
- z-index: 2;
54
- border-bottom-color: #fff;
55
- }
50
+ .tb-btn-tooltip:before {
51
+ position: absolute;
52
+ top: -19px;
53
+ left: 70px;
54
+ z-index: 2;
55
+ border-bottom-color: #fff;
56
+ }
56
57
 
57
- .tb-btn-tooltip:after {
58
- position: absolute;
59
- top: -25px;
60
- left: 67px;
61
- z-index: 1;
62
- border: 13px solid transparent;
63
- border-bottom-color: rgba(0, 0, 0, 0.05);
64
- }
58
+ .tb-btn-tooltip:after {
59
+ position: absolute;
60
+ top: -25px;
61
+ left: 67px;
62
+ z-index: 1;
63
+ border: 13px solid transparent;
64
+ border-bottom-color: rgba(0, 0, 0, 0.05);
65
+ }
65
66
 
66
- .tb-btn {
67
- text-decoration: none;
68
- display: inline-block;
69
- width: 150px;
70
- padding: 10px 25px;
71
- margin-top: 5px;
72
- margin-bottom: 5px;
73
- border-radius: 25px;
74
- color: #fff !important;
75
- font-size: 15px;
76
- font-family: 'Open Sans', 'Droid Sans', Arial, sans-serif;
77
- line-height: 17px;
78
- transition: box-shadow 0.4s;
79
- }
67
+ .tb-btn {
68
+ text-decoration: none;
69
+ display: inline-block;
70
+ width: 150px;
71
+ padding: 10px 25px;
72
+ margin-top: 5px;
73
+ margin-bottom: 5px;
74
+ border-radius: 25px;
75
+ color: #fff !important;
76
+ font-size: 15px;
77
+ font-family: "Open Sans", "Droid Sans", Arial, sans-serif;
78
+ line-height: 17px;
79
+ transition: box-shadow 0.4s;
80
+ }
80
81
 
81
- .tb-btn img {
82
- width: 30px;
83
- height: 30px;
84
- display: inline-block;
85
- margin: -10px 0px -10px -15px;
86
- }
82
+ .tb-btn img {
83
+ width: 30px;
84
+ height: 30px;
85
+ display: inline-block;
86
+ margin: -10px 0px -10px -15px;
87
+ }
87
88
 
88
- .tb-btn:hover {
89
- box-shadow: 0 2px 4px 1px rgba(0, 0, 0, 0.4);
90
- }
89
+ .tb-btn:hover {
90
+ box-shadow: 0 2px 4px 1px rgba(0, 0, 0, 0.4);
91
+ }
91
92
 
92
- .tb-btn:hover + .tb-btn-tooltip {
93
- opacity: 1;
94
- visibility: visible;
95
- }
93
+ .tb-btn:hover + .tb-btn-tooltip {
94
+ opacity: 1;
95
+ visibility: visible;
96
+ }
96
97
 
97
- .tb-btn.tb-vk {
98
- background-color: #45668e;
99
- }
100
- .tb-btn.tb-tg {
101
- background-color: #1E96C8;
102
- }
103
- .tb-btn.tb-facebook {
104
- background-color: #3b5998;
105
- }
106
- .tb-btn.tb-viber {
107
- background-color: #59267c;
108
- }
109
- .tb-btn.tb-whatsapp {
110
- background-color: #189d0e;
111
- }
112
- .tb-btn.tb-whatsappb {
113
- background-color: #189d0e;
114
- }
98
+ .tb-btn.tb-vk {
99
+ background-color: #45668e;
100
+ }
101
+ .tb-btn.tb-tg {
102
+ background-color: #1e96c8;
103
+ }
104
+ .tb-btn.tb-facebook {
105
+ background-color: #3b5998;
106
+ }
107
+ .tb-btn.tb-viber {
108
+ background-color: #59267c;
109
+ }
110
+ .tb-btn.tb-whatsapp {
111
+ background-color: #189d0e;
112
+ }
113
+ .tb-btn.tb-whatsappb {
114
+ background-color: #189d0e;
115
+ }
115
116
  </style>
116
117
 
117
118
  <!-- <link rel="stylesheet" href="/views/tilda.css"> -->
118
- </head>
119
- <body>
119
+ </head>
120
+ <body>
121
+ <tb-notification-widget
122
+ widget-id="7c235bba-dd4e-9185-97e1-018f834cdc4f"
123
+ api-path="https://api.textback.io/api"
124
+ >
125
+ </tb-notification-widget>
120
126
  <div class="container-fluid">
121
- <div class="row-fluid">
122
- <div class="col-lg-12">
123
- <!-- <h1>Buttons</h1>
127
+ <div class="row-fluid">
128
+ <div class="col-lg-12">
129
+ <!-- <h1>Buttons</h1>
124
130
  <div>
125
131
  <button type="button" id="sign_tg" class="btn btn-primary">Telegram</button>
126
132
  <button type="button" id="sign_vk" class="btn btn-small btn-white">VKontakte</button>
@@ -133,142 +139,180 @@
133
139
  <div>
134
140
  <button type="button" id="sign_random" class="btn btn-lg btn-white"><i class="fa fa-refresh"></i>&nbsp;&nbsp;Subscribe to random messenger</button>
135
141
  </div> -->
136
- <div class="tb-buttons">
137
- <div class="tb-btn-wrapper" id="tb-link">
138
- <a href="#" id="sign_tg" class="tb-btn tb-tg">
139
- <img src="//cdn.jsdelivr.net/npm/@textback/notification-widget@latest/src/widget/icons/icon_tg.svg" alt="">
140
- Telegram
141
- </a>
142
- <div class="tb-btn-tooltip">
143
- Нажмите "<strong>Start</strong>" в приложении Telegram
144
- </div>
145
- </div>
146
- <div class="tb-btn-wrapper" id="tb-link">
147
- <a href="#" id="sign_vk" class="tb-btn tb-vk">
148
- <img src="//cdn.jsdelivr.net/npm/@textback/notification-widget@latest/src/widget/icons/icon_vk.svg" alt="">
149
- VK
150
- </a>
151
- <div class="tb-btn-tooltip">
152
- Нажмите "<strong>Разрешить</strong>" во всплывающем окне
153
- </div>
154
- </div>
155
- <div class="tb-btn-wrapper" id="tb-link">
156
- <a href="#" id="sign_fb" class="tb-btn tb-facebook">
157
- <img src="//cdn.jsdelivr.net/npm/@textback/notification-widget@latest/src/widget/icons/icon_facebook.svg" alt="">
158
- Facebook
159
- </a>
160
- <div class="tb-btn-tooltip">
161
- Нажмите "<strong>Начать</strong>" в Facebook Messenger
162
- </div>
163
- </div>
164
- <div class="tb-btn-wrapper" id="tb-link">
165
- <a href="#" id="sign_viber" class="tb-btn tb-viber">
166
- <img src="//cdn.jsdelivr.net/npm/@textback/notification-widget@latest/src/widget/icons/icon_viber.svg" alt="">
167
- Viber
168
- </a>
169
- <div class="tb-btn-tooltip">
170
- У вас должно быть установлено <strong>Viber Desktop приложение</strong>
171
- </div>
172
- </div>
173
- <div class="tb-btn-wrapper" id="tb-link">
174
- <a href="#" id="sign_wa" class="tb-btn tb-whatsapp">
175
- <img src="//cdn.jsdelivr.net/npm/@textback/notification-widget@latest/src/widget/icons/icon_whatsapp.svg" alt="">
176
- WhatsApp
177
- </a>
178
- <div class="tb-btn-tooltip">
179
- Отправьте <strong>предзаполненный текст</strong> в WhatsApp без изменений
180
- </div>
181
- </div>
182
- <div class="tb-btn-wrapper" id="tb-link">
183
- <a href="#" id="sign_wab" class="tb-btn tb-whatsapp">
184
- <img src="//cdn.jsdelivr.net/npm/@textback/notification-widget@latest/src/widget/icons/icon_whatsappb.svg" alt="">
185
- WhatsApp
186
- </a>
187
- <div class="tb-btn-tooltip">
188
- Отправьте <strong>предзаполненный текст</strong> в WhatsApp без изменений
189
- </div>
190
- </div>
191
- </div>
192
-
193
- <!-- <script src="https://zapier.com/zapbook/embed/widget.js?services=TextBack&container=true&limit=10"></script> -->
142
+ <div class="tb-buttons">
143
+ <div class="tb-btn-wrapper" id="tb-link">
144
+ <a href="#" id="sign_tg" class="tb-btn tb-tg">
145
+ <img
146
+ src="//cdn.jsdelivr.net/npm/@textback/notification-widget@latest/src/widget/icons/icon_tg.svg"
147
+ alt=""
148
+ />
149
+ Telegram
150
+ </a>
151
+ <div class="tb-btn-tooltip">
152
+ Нажмите "<strong>Start</strong>" в приложении Telegram
153
+ </div>
154
+ </div>
155
+ <div class="tb-btn-wrapper" id="tb-link">
156
+ <a href="#" id="sign_vk" class="tb-btn tb-vk">
157
+ <img
158
+ src="//cdn.jsdelivr.net/npm/@textback/notification-widget@latest/src/widget/icons/icon_vk.svg"
159
+ alt=""
160
+ />
161
+ VK
162
+ </a>
163
+ <div class="tb-btn-tooltip">
164
+ Нажмите "<strong>Разрешить</strong>" во всплывающем окне
165
+ </div>
166
+ </div>
167
+ <div class="tb-btn-wrapper" id="tb-link">
168
+ <a href="#" id="sign_fb" class="tb-btn tb-facebook">
169
+ <img
170
+ src="//cdn.jsdelivr.net/npm/@textback/notification-widget@latest/src/widget/icons/icon_facebook.svg"
171
+ alt=""
172
+ />
173
+ Facebook
174
+ </a>
175
+ <div class="tb-btn-tooltip">
176
+ Нажмите "<strong>Начать</strong>" в Facebook Messenger
177
+ </div>
194
178
  </div>
179
+ <div class="tb-btn-wrapper" id="tb-link">
180
+ <a href="#" id="sign_viber" class="tb-btn tb-viber">
181
+ <img
182
+ src="//cdn.jsdelivr.net/npm/@textback/notification-widget@latest/src/widget/icons/icon_viber.svg"
183
+ alt=""
184
+ />
185
+ Viber
186
+ </a>
187
+ <div class="tb-btn-tooltip">
188
+ У вас должно быть установлено
189
+ <strong>Viber Desktop приложение</strong>
190
+ </div>
191
+ </div>
192
+ <div class="tb-btn-wrapper" id="tb-link">
193
+ <a href="#" id="sign_wa" class="tb-btn tb-whatsapp">
194
+ <img
195
+ src="//cdn.jsdelivr.net/npm/@textback/notification-widget@latest/src/widget/icons/icon_whatsapp.svg"
196
+ alt=""
197
+ />
198
+ WhatsApp
199
+ </a>
200
+ <div class="tb-btn-tooltip">
201
+ Отправьте <strong>предзаполненный текст</strong> в WhatsApp без
202
+ изменений
203
+ </div>
204
+ </div>
205
+ <div class="tb-btn-wrapper" id="tb-link">
206
+ <a href="#" id="sign_wab" class="tb-btn tb-whatsapp">
207
+ <img
208
+ src="//cdn.jsdelivr.net/npm/@textback/notification-widget@latest/src/widget/icons/icon_whatsappb.svg"
209
+ alt=""
210
+ />
211
+ WhatsApp
212
+ </a>
213
+ <div class="tb-btn-tooltip">
214
+ Отправьте <strong>предзаполненный текст</strong> в WhatsApp без
215
+ изменений
216
+ </div>
217
+ </div>
218
+ </div>
219
+
220
+ <!-- <script src="https://zapier.com/zapbook/embed/widget.js?services=TextBack&container=true&limit=10"></script> -->
195
221
  </div>
222
+ </div>
196
223
  </div>
197
224
 
198
225
  <script>
199
- var TextBack = {
200
- someProp: 123,
201
- };
226
+ var TextBack = {
227
+ someProp: 123,
228
+ };
202
229
  </script>
203
230
 
204
-
205
-
206
- <script src="//cdn.jsdelivr.net/npm/@textback/notification-widget@latest/build/sdk.js"></script>
207
- <!-- <script src="/build/sdk.js"></script> -->
231
+ <!-- <script src="//cdn.jsdelivr.net/npm/@textback/notification-widget@latest/build/sdk.js"></script> -->
232
+ <script src="/build/sdk.js"></script>
208
233
 
209
234
  <script type="text/javascript">
210
- var config = {
211
- widgetId: 'a74bf35b-bbef-482d-b4aa-0c6795021806',
212
- apiPath: 'https://tb-apisrv-dev.textback.io/api',
213
- };
235
+ var config = {
236
+ widgetId: "7c235bba-dd4e-9185-97e1-018f834cdc4f",
237
+ apiPath: "https://tb-apisrv-dev.textback.io/api",
238
+ };
214
239
 
215
- var off = TextBack.SDK.on('widget.init', function(event) {
216
- console.log(`First widget has been initialized. ${event.widgetId}`);
217
- off();
218
- });
240
+ var off = TextBack.SDK.on("widget.init", function (event) {
241
+ console.log(`First widget has been initialized. ${event.widgetId}`);
242
+ off();
243
+ });
219
244
 
220
- TextBack.SDK.on('subscription.start', function(event) {
221
- console.log('subscription.start', event);
222
- });
245
+ TextBack.SDK.on("subscription.start", function (event) {
246
+ console.log("subscription.start", event);
247
+ });
223
248
 
224
- TextBack.SDK.initWidget(config).then( function(widget) {
225
- // Facebook
226
- document.getElementById('sign_fb').addEventListener('click', function(event) {
227
- event.preventDefault();
228
- widget.subscribe('fb');
249
+ TextBack.SDK.initWidget(config).then(
250
+ function (widget) {
251
+ // Facebook
252
+ document
253
+ .getElementById("sign_fb")
254
+ .addEventListener("click", function (event) {
255
+ event.preventDefault();
256
+ widget.subscribe("fb");
229
257
  });
230
258
 
231
- // Telegram
232
- document.getElementById('sign_tg').addEventListener('click', function(event) {
233
- event.preventDefault();
234
- widget.subscribe('tg');
259
+ // Telegram
260
+ document
261
+ .getElementById("sign_tg")
262
+ .addEventListener("click", function (event) {
263
+ event.preventDefault();
264
+ widget.subscribe("tg");
235
265
  });
236
266
 
237
- // VKontakte
238
- document.getElementById('sign_vk').addEventListener('click', function(event) {
239
- event.preventDefault();
240
- widget.subscribe('vk');
267
+ // VKontakte
268
+ document
269
+ .getElementById("sign_vk")
270
+ .addEventListener("click", function (event) {
271
+ event.preventDefault();
272
+ widget.subscribe("vk");
241
273
  });
242
274
 
243
- // Viber
244
- document.getElementById('sign_viber').addEventListener('click', function(event) {
245
- event.preventDefault();
246
- widget.subscribe('viber');
275
+ // Viber
276
+ document
277
+ .getElementById("sign_viber")
278
+ .addEventListener("click", function (event) {
279
+ event.preventDefault();
280
+ widget.subscribe("viber");
247
281
  });
248
282
 
249
- // WhatsApp
250
- document.getElementById('sign_wa').addEventListener('click', function(event) {
251
- event.preventDefault();
252
- widget.subscribe('whatsapp');
283
+ // WhatsApp
284
+ document
285
+ .getElementById("sign_wa")
286
+ .addEventListener("click", function (event) {
287
+ event.preventDefault();
288
+ widget.subscribe("whatsapp");
253
289
  });
254
290
 
255
- // WhatsApp Business
256
- document.getElementById('sign_wab').addEventListener('click', function(event) {
257
- event.preventDefault();
258
- widget.subscribe('whatsappb');
291
+ // WhatsApp Business
292
+ document
293
+ .getElementById("sign_wab")
294
+ .addEventListener("click", function (event) {
295
+ event.preventDefault();
296
+ widget.subscribe("whatsappb");
259
297
  });
260
- }, function(err) {
261
- console.log('error', err)
262
- });
298
+ },
299
+ function (err) {
300
+ console.log("error", err);
301
+ }
302
+ );
263
303
 
264
- // TextBack.SDK.getWidget(config.widgetId).then(function(widget){
265
- // // Random
266
- // document.getElementById('sign_random').addEventListener('click', function(event) {
267
- // var channels = widget.getEnabledChannels();
268
- // var channelIndexToSubscribe = Math.floor(Math.random() * channels.length);
269
- // widget.subscribe(channels[channelIndexToSubscribe].channel);
270
- // });
271
- // });
304
+ TextBack.SDK.getWidget(config.widgetId).then(function (widget) {
305
+ // Random
306
+ document
307
+ .getElementById("sign_random")
308
+ .addEventListener("click", function (event) {
309
+ var channels = widget.getEnabledChannels();
310
+ var channelIndexToSubscribe = Math.floor(
311
+ Math.random() * channels.length
312
+ );
313
+ widget.subscribe(channels[channelIndexToSubscribe].channel);
314
+ });
315
+ });
272
316
  </script>
273
- </body>
317
+ </body>
274
318
  </html>
package/webpack.dev.js CHANGED
@@ -2,8 +2,9 @@ const merge = require('webpack-merge');
2
2
  const common = require('./webpack.common.js');
3
3
 
4
4
  module.exports = merge(common, {
5
- devtool: 'eval-source-map',
6
- watch: true,
5
+ mode: 'development',
6
+ devtool: 'eval-source-map',
7
+ watch: true,
7
8
  /*devServer: {
8
9
  contentBase: './build',
9
10
  port: 8081,