1 |
|
2 | <p align="center">
|
3 | <a href="https://jaywcjlove.github.io/iNotify">
|
4 | <img alt="iNotify demo preview" src="https://github.com/jaywcjlove/iNotify/blob/master/website/assets/iNotify.png?raw=true">
|
5 | </a>
|
6 | </p>
|
7 |
|
8 | <p align="center">
|
9 | <a href="https://github.com/jaywcjlove/iNotify/issues">
|
10 | <img src="https://img.shields.io/github/issues/jaywcjlove/iNotify.svg">
|
11 | </a>
|
12 | <a href="https://github.com/jaywcjlove/iNotify/network">
|
13 | <img src="https://img.shields.io/github/forks/jaywcjlove/iNotify.svg">
|
14 | </a>
|
15 | <a href="https://github.com/jaywcjlove/iNotify/stargazers">
|
16 | <img src="https://img.shields.io/github/stars/jaywcjlove/iNotify.svg">
|
17 | </a>
|
18 | <a href="https://github.com/jaywcjlove/iNotify/releases">
|
19 | <img src="https://img.shields.io/github/release/jaywcjlove/iNotify.svg">
|
20 | </a>
|
21 | <a href="https://www.npmjs.com/package/@wcjiang/notify">
|
22 | <img src="https://img.shields.io/npm/v/@wcjiang/notify.svg">
|
23 | </a>
|
24 | <a href="./README-zh.md">
|
25 | <img src="https://jaywcjlove.github.io/sb/lang/chinese.svg">
|
26 | </a>
|
27 | </p>
|
28 |
|
29 |
|
30 |
|
31 | JS achieve the browser title flashing, scrolling, voice prompts, Chrome/Safari/FireFox/IE notice. has no dependencies. It not interfere with any JavaScript libraries or frameworks. has a reasonable footprint 5.05kb (gzipped: 1.75kb),Official document [demo preview](https://jaywcjlove.github.io/iNotify)。
|
32 |
|
33 | ## Installation
|
34 |
|
35 | You will need Node.js installed on your system.
|
36 |
|
37 | ```bash
|
38 | # v2.x
|
39 | $ npm install @wcjiang/notify --save
|
40 | # v1.x
|
41 | $ npm install title-notify --save
|
42 | ```
|
43 |
|
44 | > ⚠️: open in server. You can use [ssr](https://github.com/jaywcjlove/ssr) to quickly create a service..
|
45 |
|
46 | ## Using
|
47 |
|
48 | ```js
|
49 | import Notify from '@wcjiang/notify';
|
50 |
|
51 | const notify = new Notify({
|
52 | message: 'There is message.', // page title.
|
53 | effect: 'flash', // flash | scroll, Flashing or scrolling
|
54 | openurl:'https://github.com/jaywcjlove/iNotify', // Click on the pop-up window to open the connection address
|
55 | onclick: () => { // Click on the pop-up window trip event
|
56 | // Programmatically closes a notification.
|
57 | notify.close();
|
58 | console.log('---')
|
59 | },
|
60 | // Optional playback sound
|
61 | audio:{
|
62 | // You can use arrays to pass sound files in multiple formats.
|
63 | file: ['msg.mp4','msg.mp3','msg.wav']
|
64 | // The following is also work.
|
65 | // file: 'msg.mp4'
|
66 | },
|
67 | // Title flashing, or scrolling speed
|
68 | interval: 1000,
|
69 | // Optional, default green background white text. Favicon
|
70 | updateFavicon:{
|
71 | // favicon font color
|
72 | textColor: '#fff',
|
73 | // Background color, set the background color to be transparent, set the value to "transparent"
|
74 | backgroundColor: '#2F9A00'
|
75 | },
|
76 | // Optional chrome browser notifications,
|
77 | // The default is not to fill in the following content
|
78 | notification:{
|
79 | title:'Notification!', // Set notification title
|
80 | icon:'', // Set notification icon, The default is Favicon
|
81 | body:'You have a new message!', // Set message content
|
82 | }
|
83 | });
|
84 |
|
85 | notify.player();
|
86 | ```
|
87 |
|
88 | Or manually download and link **notify.js** in your HTML, It can also be downloaded via [UNPKG](https://unpkg.com/@wcjiang/notify/dist/):
|
89 |
|
90 | ```html
|
91 | <script src="https://unpkg.com/@wcjiang/notify/dist/notify.min.js"></script>
|
92 | <script type="text/javascript">
|
93 | var notify = new Notify({
|
94 | effect: 'flash',
|
95 | interval: 500,
|
96 | });
|
97 | notify.setFavicon('1');
|
98 | </script>
|
99 | ```
|
100 |
|
101 | ## option
|
102 |
|
103 | - **message**: String, page title
|
104 | - **effect**: String, flash | scroll | favicon, Flashing or scrolling
|
105 | - **audio**: Optional playback sound
|
106 | - **file**: String/Array, You can use arrays to pass sound files in multiple formats.
|
107 | - **interval**: Number, Title flashing, or scrolling speed.
|
108 | - **openurl**: String, Click on the pop-up window to open the connection address
|
109 | - **onclick**: Function, Click on the pop-up window trip event
|
110 | - **updateFavicon**: Optional, default green background white text. Favicon
|
111 | - **textColor**: String, favicon font color.
|
112 | - **backgroundColor**: Background color, set the background color to be transparent, set the value to "transparent"
|
113 | - **notification**: Optional chrome browser notifications, The default is not to fill in the following content
|
114 | - **title**: Set notification title `iNotify`
|
115 | - **icon**: Set notification icon, The default is Favicon
|
116 | - **body**: Set message content
|
117 |
|
118 | ## isPermission
|
119 |
|
120 | Determine if the browser bulletin notification is blocked.
|
121 |
|
122 | ```js
|
123 | iNotify.isPermission()
|
124 | ```
|
125 |
|
126 | ## Sound Settings
|
127 |
|
128 | ### player
|
129 |
|
130 | Play sound.
|
131 |
|
132 | ```js
|
133 | iNotify.player()
|
134 | ```
|
135 |
|
136 | ### loopPlay
|
137 |
|
138 | Loop the sound.
|
139 |
|
140 | ```js
|
141 | iNotify.loopPlay()
|
142 | ```
|
143 |
|
144 | ### stopPlay
|
145 |
|
146 | Stop playing sound.
|
147 |
|
148 | ```js
|
149 | iNotify.stopPlay()
|
150 | ```
|
151 |
|
152 | ### setURL
|
153 |
|
154 | Set the playback sound URL.
|
155 |
|
156 | ```js
|
157 | iNotify.setURL('msg.mp3') // Set one
|
158 | iNotify.setURL(['msg.mp3','msg.ogg','msg.mp4']) // Set multiple
|
159 | ```
|
160 |
|
161 | ## title
|
162 |
|
163 | The latest version does not play the title blinking animation by default. After initialization, you need to call the `setTitle(true)` method to play the title animation.
|
164 |
|
165 | ### setTitle
|
166 |
|
167 | Set the title.
|
168 |
|
169 | ```js
|
170 | iNotify.setTitle(true) // Play animation
|
171 | iNotify.setTitle('New title') // Flashing new title
|
172 | iNotify.setTitle() // Clear Blinking Show original title
|
173 | ```
|
174 |
|
175 | ### setInterval
|
176 |
|
177 | Set time interval.
|
178 |
|
179 | ```js
|
180 | iNotify.setInterval(2000)
|
181 | ```
|
182 |
|
183 | ### close
|
184 |
|
185 | Programmatically closes a notification.
|
186 |
|
187 | ```js
|
188 | iNotify.close();
|
189 | ```
|
190 |
|
191 | ### addTimer
|
192 |
|
193 | Add counter
|
194 |
|
195 | ```js
|
196 | iNotify.addTimer()
|
197 | ```
|
198 |
|
199 | ### clearTimer
|
200 |
|
201 | Clear counter.
|
202 |
|
203 | ```js
|
204 | iNotify.clearTimer()
|
205 | ```
|
206 |
|
207 | ## Favicon Notice
|
208 |
|
209 | ### setFavicon
|
210 |
|
211 | Set `icon` to display numbers or text
|
212 |
|
213 | ```js
|
214 | iNotify.setFavicon(10)
|
215 | ```
|
216 |
|
217 | ### setFaviconColor
|
218 |
|
219 | Set `icon` display text color
|
220 |
|
221 | ```js
|
222 | iNotify.setFaviconColor('#0043ff')
|
223 | ```
|
224 |
|
225 | ### setFaviconBackgroundColor
|
226 |
|
227 | Set `icon` to display text color
|
228 |
|
229 | ```js
|
230 | iNotify.setFaviconBackgroundColor('#0043ff')
|
231 | // Set font and background color
|
232 | iNotify.setFaviconColor('#f5ff00').setFaviconBackgroundColor('red');
|
233 | ```
|
234 |
|
235 | ### faviconClear
|
236 |
|
237 | Clear digital display original `icon`.
|
238 |
|
239 | ```js
|
240 | iNotify.faviconClear()
|
241 | ```
|
242 |
|
243 | ## Chrome Notice
|
244 |
|
245 | ### notify
|
246 |
|
247 | The chrome notification pops up, and the parameters are not passed as default values...
|
248 |
|
249 | ```js
|
250 | iNotify.notify();
|
251 | iNotify.notify({
|
252 | title: 'New notice',
|
253 | body: 'Thunder, it’s raining...',
|
254 | openurl: 'https://jaywcjlove.github.io',
|
255 | onclick: function() {
|
256 | console.log('on click')
|
257 | },
|
258 | onshow: function() {
|
259 | console.log('on show')
|
260 | },
|
261 | });
|
262 | ```
|
263 |
|
264 | - `title` The notification title that will be displayed.
|
265 | - `dir` The direction of the text; its value can be auto (auto), ltr (left to right), or rtl (right to left).
|
266 | - `icon` The URL of a picture that will be used to display the icon for the notification.
|
267 | - `body` A string that is additionally displayed in the notification.
|
268 | - `openurl` Click to open the specified URL.
|
269 | - `onclick` Triggered whenever the user clicks on the notification.
|
270 | - `onshow` Triggered when the notification is displayed.
|
271 | - `onerror` Triggered whenever a notification encounters an error.
|
272 | - `onclose` Triggered when the user closes the notification.
|
273 |
|
274 | ## Other
|
275 |
|
276 | `iNotify.init().title;` Get the title.
|
277 |
|
278 | ## Example
|
279 |
|
280 | ### Example 1
|
281 |
|
282 | ```js
|
283 | function iconNotify(num){
|
284 | if(!notify) {
|
285 | var notify = new Notify({
|
286 | effect: 'flash',
|
287 | interval: 500
|
288 | });
|
289 | }
|
290 | if(num===0){
|
291 | notify.faviconClear()
|
292 | notify.setTitle();
|
293 | } else if (num < 100){
|
294 | notify.setFavicon(num)
|
295 | notify.setTitle('There is new message!');
|
296 | } else if (num > 99){
|
297 | notify.setFavicon('..')
|
298 | notify.setTitle('There is new message!');
|
299 | }
|
300 | }
|
301 | ```
|
302 |
|
303 | ### Example 2
|
304 |
|
305 | ```js
|
306 | var notify = new Notify({
|
307 | effect: 'flash',
|
308 | interval: 500,
|
309 | });
|
310 | notify.setFavicon('1');
|
311 | ```
|
312 |
|
313 | ### Example 3
|
314 |
|
315 | ```js
|
316 | var iN = new Notify({
|
317 | effect: 'flash',
|
318 | interval: 500,
|
319 | message: 'There is new message!',
|
320 | updateFavicon:{ // Optional, default green background white
|
321 | textColor: '#fff',// favicon font color
|
322 | backgroundColor: '#2F9A00', // favicon background color
|
323 | }
|
324 | }).setFavicon(10);
|
325 | ```
|
326 |
|
327 | ### Example 4
|
328 |
|
329 | ```js
|
330 | var iN = new Notify().setFavicon(5);
|
331 | ```
|
332 |
|
333 | ### Example 5
|
334 |
|
335 | ```js
|
336 | var iN = new Notify({
|
337 | effect: 'flash',
|
338 | interval: 500,
|
339 | message: "There is new message!",
|
340 | audio:{
|
341 | file: 'msg.mp4',
|
342 | }
|
343 | }).setFavicon(10).player();
|
344 | ```
|
345 |
|
346 | ### Example 6
|
347 |
|
348 | ```js
|
349 | var iN = new Notify({
|
350 | effect: 'flash',
|
351 | interval: 500,
|
352 | message: 'There is new message!',
|
353 | audio:{
|
354 | file: 'msg.mp4', // You can use arrays to pass sound files in multiple formats.
|
355 | },
|
356 | notification:{
|
357 | title: 'Notification!', // Set notification title
|
358 | icon: '', // Set notification icon, The default is Favicon
|
359 | body: 'You have a new message!', // Set message content
|
360 | }
|
361 | }).setFavicon(10).player();
|
362 |
|
363 | // The chrome notification pops up, and the parameters are not passed as default values...
|
364 | iN.notify();
|
365 |
|
366 | iN.notify({
|
367 | title: 'Notification!', // Set notification title
|
368 | body: 'You have a new message!', // Set message content
|
369 | });
|
370 | ```
|
371 |
|
372 | ### Example 7
|
373 |
|
374 | ```js
|
375 | var iN = new Notify({
|
376 | effect: 'flash',
|
377 | interval: 500,
|
378 | message: 'There is new message!',
|
379 | audio:{
|
380 | file: ['msg.mp4', 'msg.mp3', 'msg.wav']
|
381 | },
|
382 | notification:{
|
383 | title: 'Notification!', // Set notification title
|
384 | body: 'You have a new message!', // Set message content
|
385 | }
|
386 | })
|
387 |
|
388 |
|
389 | iN.setFavicon(10).player();
|
390 |
|
391 | var n = new Notify()
|
392 | n.init({
|
393 | effect: 'flash',
|
394 | interval: 500,
|
395 | message: 'There is new message!',
|
396 | audio:{
|
397 | file: ['openSub.mp4', 'openSub.mp3', 'openSub.wav'],
|
398 | },
|
399 | notification:{
|
400 | title:'Notification!',
|
401 | icon: '',
|
402 | body:'You have a new message!',
|
403 | }
|
404 | })
|
405 |
|
406 | n.setFavicon(10).player();
|
407 | ```
|
408 |
|
409 | ## License
|
410 |
|
411 | [MIT © Kenny Wong](https://github.com/jaywcjlove/iNotify/blob/master/MIT-LICENSE)
|