├── .gitattributes ├── .gitignore ├── CONTRIBUTING.md ├── Gruntfile.js ├── LICENSE ├── README.md ├── dist └── Notifier.min.js ├── index.html ├── package.json └── src └── Notifier.js /.gitattributes: -------------------------------------------------------------------------------- 1 | *.html linguist-vendored -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | package-lock.json 3 | yarn.lock -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | When contributing to this repository, please first discuss the change you wish to make via issue, 4 | email, or any other method with the owners of this repository before making a change. 5 | 6 | ## Pull Request Process 7 | 8 | 1. Ensure any install or build dependencies are removed before the end of the layer when doing a 9 | build. 10 | 2. Update the documentation with the details of changes to the usage and behavior. 11 | 3. Increase the version numbers in every file where the version number is present to the new version that this 12 | Pull Request would represent. The versioning scheme we use is [SemVer](http://semver.org/). 13 | 4. You may merge the Pull Request in once you have the sign-off of two other developers, or if you 14 | do not have permission to do that, you may request the second reviewer to merge it for you. 15 | -------------------------------------------------------------------------------- /Gruntfile.js: -------------------------------------------------------------------------------- 1 | module.exports = function(grunt) { 2 | grunt.initConfig({ 3 | babel: { 4 | options: { 5 | sourceMap: false, 6 | comments: false, 7 | sourceType: "unambiguous", 8 | presets: ['@babel/preset-env', 'minify'] 9 | }, 10 | dist: { 11 | files: { 12 | 'dist/Notifier.min.js': 'src/Notifier.js' 13 | } 14 | } 15 | } 16 | }); 17 | 18 | grunt.loadNpmTasks('grunt-babel'); 19 | grunt.registerTask('build', ['babel']); 20 | }; -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Javier Sanahuja 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Notifier.js 2 | Vanilla Javascript html notifications manager 3 | 4 | [Full documentation and examples here](https://www.sowecms.com/demos/Notifier.js) -------------------------------------------------------------------------------- /dist/Notifier.min.js: -------------------------------------------------------------------------------- 1 | function _typeof(a){"@babel/helpers - typeof";return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(a){return typeof a}:function(a){return a&&"function"==typeof Symbol&&a.constructor===Symbol&&a!==Symbol.prototype?"symbol":typeof a},_typeof(a)}(function(a,b){"function"==typeof define&&define.amd?define([],b):"object"===("undefined"==typeof exports?"undefined":_typeof(exports))?module.exports=b():a.Notifier=b()})(this,function(){var a={autopush:!0,zindex:9999,default_time:4500,vanish_time:300,fps:30,position:"bottom-right",direction:"bottom",success:{classes:"notifyjs-success",textColor:"#155724",borderColor:"#c3e6cb",backgroundColor:"#d4edda",progressColor:"#155724",iconColor:"#155724",icon:""},error:{classes:"notifyjs-danger",textColor:"#721c24",borderColor:"#f5c6cb",backgroundColor:"#f8d7da",progressColor:"#721c24",iconColor:"#721c24",icon:""},warning:{classes:"notifyjs-warning",textColor:"#856404",borderColor:"#fff3cd",backgroundColor:"#ffeeba",progressColor:"#856404",iconColor:"#856404",icon:""},info:{classes:"notifyjs-info",textColor:"#0c5460",borderColor:"#d1ecf1",backgroundColor:"#bee5eb",progressColor:"#0c5460",iconColor:"#0c5460",icon:""}},b=function(a,b,c,d,e,f,g){switch(this.pushed=!1,this.element=document.createElement("div"),this.element.className=c.classes||"",this.element.style.display="none",this.element.style.position="relative",this.element.style.padding="1em 2em 1em 2.5em",a.options.direction){case"top":this.element.style.marginTop="0.5em";break;case"bottom":default:this.element.style.marginBottom="0.5em";}if(this.element.style.width="100%",this.element.style.borderWidth="1px",this.element.style.borderStyle="solid",this.element.style.borderColor=c.borderColor,this.element.style.boxSizing="border-box",this.element.style.backgroundColor=c.backgroundColor,"undefined"!=typeof c.icon){var h=document.createElement("div");h.style.position="absolute",h.style.top="50%",h.style.left="10px",h.style.transform="translateY(-50%)",h.innerHTML=c.icon,-1==c.icon.indexOf("=c&&("function"==typeof g&&g(),k.clear())},b)}},this.clear=function(){if(k.pushed){var a=1e3/f,b=1;"undefined"!=typeof k.interval&&clearInterval(k.interval),k.interval=setInterval(function(){b-=1/(e/a),k.element.style.opacity=b,0>=b&&(clearInterval(k.interval),k.destroy())},a)}},this.destroy=function(){k.pushed&&(k.pushed=!1,"undefined"!=typeof k.interval&&clearInterval(k.interval),a.container.removeChild(k.element))}};return function Notifier(c){if(this.options=Object.assign({},a),this.options=Object.assign(this.options,c),this.container=document.getElementById("notifyjs-container-"+this.options.position),null===this.container){switch(this.container=document.createElement("div"),this.container.id="notifyjs-container-"+this.options.position,this.container.style.zIndex=this.options.zindex,this.container.style.position="fixed",this.container.style.maxWidth="304px",this.container.style.width="100%",this.options.position){case"top-left":this.container.style.top=0,this.container.style.left="0.5em";break;case"top-right":this.container.style.top=0,this.container.style.right="0.5em";break;case"bottom-left":this.container.style.bottom=0,this.container.style.left="0.5em";break;case"bottom-right":default:this.container.style.bottom=0,this.container.style.right="0.5em";}document.getElementsByTagName("body")[0].appendChild(this.container)}this.notify=function(a,c,d,e){if("undefined"==typeof this.options[a])return void console.error("Notify.js: Error, undefined '"+a+"' notification type");"undefined"==typeof d&&(d=this.options.default_time);var f=new b(this,c,this.options[a],d,this.options.vanish_time,this.options.fps,e);return this.options.autopush&&f.push(),f}}}); 2 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 3 | 4 | 5 | 6 | 7 | 9 | 10 | 12 | 15 | 18 | 19 | 20 | 21 | 22 | 122 | 123 | 124 | 125 | 126 | 172 | 173 |
174 |
175 |
176 |

Documentation

177 |
178 |
179 | 180 |
181 |

Notifier

182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 196 | 197 | 198 | 199 | 200 | 203 | 204 | 213 | 214 | 215 |
MethodTypeDescription
193 | constructor(options) 195 | Instances the notifications manager with the given options.
201 | notify(type, msg, time, callback) 202 | Notification 205 | Creates a new Notification object of the type type with the 206 | message msg. The notification will be shown (on push) 208 | for time miliseconds or 209 | default_time if not specified. The callback will 210 | be called right before the gracefully vanish (on clear). 212 |
216 | 217 |

Notifier Options

218 | 219 | 220 | 221 | 222 | 223 | 224 | 225 | 226 | 227 | 228 | 229 | 233 | 234 | 235 | 236 | 237 | 238 | 242 | 243 | 244 | 245 | 246 | 247 | 251 | 252 | 253 | 257 | 258 | 259 | 263 | 264 | 265 | 266 | 267 | 268 | 272 | 273 | 274 | 275 | 276 | 277 | 281 | 282 | 283 | 284 | 285 | 286 | 290 | 291 | 292 | 293 | 294 | 295 | 299 | 300 | 306 | 309 | 310 | 311 |
AttributeTypeDefaultDescription
230 | autopush 231 | Optional 232 | BooleantrueWhether the notifier has to automatically push notifications (on creation) or not.
239 | position 240 | Optional 241 | stringbottom-rightScreen position of the notification. Allows top-left, top-right, bottom-left and bottom-right.
248 | direction 249 | Optional 250 | stringbottomThe direction the notifications will be stacked: 254 |

top: The latest notification will show on top.

255 |

bottom: The latest notification will show at bottom.

256 |
260 | zindex 261 | Optional 262 | int9999The CSS z-index the notifications container should have
269 | default_time 270 | Optional 271 | number [Int]4500Number of miliseconds the notification will be visible if not specified.
278 | vanish_time 279 | Optional 280 | number [Int]300Miliseconds the notification vanish animation will take.
287 | fps 288 | Optional 289 | number [Int]30Frames per second of progress and vanish animations.
296 | <type> 297 | Optional 298 | Notification Type 301 | success, 302 | error, 303 | warning, 304 | info 305 | 307 | You can define your own notification types or override existing ones. See Notification Type or the Example 4. 308 |
312 | 313 |

Notification

314 | 315 | 316 | 317 | 318 | 319 | 320 | 321 | 322 | 323 | 324 | 327 | 328 | 329 | 330 | 331 | 334 | 335 | 336 | 337 | 338 | 341 | 342 | 344 | 345 | 346 |
MethodTypeDescription
325 | push() 326 | voidDisplays the notification.
332 | clear() 333 | voidVanishes the notification gracefully.
339 | destroy() 340 | voidDestroys the notification. Note it will not trigger the 343 | callback.
347 | 348 |

Notification Type

349 | 350 | 351 | 352 | 353 | 354 | 355 | 356 | 357 | 358 | 359 | 362 | 363 | 364 | 365 | 366 | 369 | 370 | 376 | 377 | 378 | 381 | 382 | 383 | 384 | 385 | 388 | 389 | 390 | 391 | 392 | 395 | 396 | 397 | 398 | 399 | 402 | 403 | 404 | 405 | 406 | 409 | 410 | 411 | 412 | 413 | 416 | 417 | 418 | 419 | 420 |
AttributeTypeDescription
360 | classes 361 | stringCSS classes that will be added to the notification.
367 | icon 368 | string 371 |

HTML containing the icon. Something like:

372 |

<svg ...></svg>

373 |

<img ... />

374 |

<i ...></i>

375 |
379 | textColor 380 | stringText color of the notification.
386 | borderColor 387 | stringBorder color of the notification.
393 | backgroundColor 394 | stringBackground color of the notification.
400 | progressColor 401 | stringProgress bar color.
407 | iconColor 408 | stringIcon color. This only applies for inline <svg> tags in icon.
414 | iconClasses 415 | stringCSS classes that will be added to the icon.
421 |
422 |
423 |
424 |
425 |
426 |

Examples

427 | 449 |
450 |
451 |
452 |
453 | 454 |
455 |

Example 1: Push notifications

456 |

push your notification using the type according to 457 | the message.

458 | 459 | 460 | 461 | 462 | 463 | 464 |
465 |
Code:
466 | 
<script src="dist/Notifier.min.js"></script>
467 | <script>
468 |     (function () {
469 |         var notifier = new Notifier();
470 | 
471 |         // Success 
472 |         document.getElementById("ex1notify1").onclick = function () {
473 |             notifier.notify("success", "Successfully logged in!");
474 |         };
475 | 
476 |         // Info 
477 |         document.getElementById("ex1notify2").onclick = function () {
478 |             notifier.notify("info", "New message from <a href=\"https://github.com/jsanahuja/\" target=\"_new\">jsanahuja</a> received!");
479 |         };
480 | 
481 |         // Warning
482 |         document.getElementById("ex1notify3").onclick = function () {
483 |             notifier.notify("warning", "Flood is not permitted, your chat will be temporary disabled");
484 |         };
485 | 
486 |         // Error
487 |         document.getElementById("ex1notify4").onclick = function () {
488 |             notification = notifier.notify("error", "Invalid username or password");
489 |         };
490 | 
491 |     })();
492 | </script>
493 |
494 |
495 |
496 | 497 |
498 |

Example 2: Push, Clear and Destroy notifications

499 |

Set the autopush to false and push your notification and clear or 500 | destroy them prematurely.

501 | 502 | 503 | 504 | 505 | 506 |
507 |
Code:
508 | 
<script src="dist/Notifier.min.js"></script>
509 | <script>
510 |     (function(){
511 |         var notifier = new Notifier({
512 |             autopush: false
513 |         });
514 | 
515 |         var notifications = [];
516 | 
517 |         // Push 10 notifications
518 |         document.getElementById("ex2notify1").onclick = function () {
519 |             for(var i = 0; i < 10; i++){
520 |                 var notification = notifier.notify("info", "Notification "+ i);
521 |                 notification.push();
522 |                 notifications.push(notification);
523 |             }
524 |         };
525 | 
526 |         // Clear all notifications
527 |         document.getElementById("ex2notify2").onclick = function () {
528 |             for(var i = 0; i < notifications.length; i++){
529 |                 notifications[i].clear();
530 |             }
531 |             notifications = [];
532 |         };
533 | 
534 |         // Destroy all notifications
535 |         document.getElementById("ex2notify3").onclick = function () {
536 |             for(var i = 0; i < notifications.length; i++){
537 |                 notifications[i].destroy();
538 |             }
539 |             notifications = [];
540 |         };
541 |     })();
542 | </script>
543 |
544 |
545 |
546 | 547 |
548 |

Example 3: Using the callback

549 |

Set a callback to trigger actions after the notification.

550 | 551 | 552 | 553 | 554 |
555 |
Code:
556 | 
<script src="dist/Notifier.min.js"></script>
557 | <script>
558 |     (function(){
559 |         var notifier = new Notifier();
560 | 
561 |         var notification = null,
562 |             counter = 0;
563 | 
564 |         // Start loop
565 |         document.getElementById("ex3notify1").onclick = function () {
566 |             if (notification !== null) {
567 |                 return;
568 |             }
569 |             var callback = function () {
570 |                 counter++;
571 |                 notification = notifier.notify("info", "This is the notification #" + counter, 3500, callback);
572 |             }
573 |             callback();
574 |         };
575 | 
576 |         // Destroy notification. Clearing it would call the callback!
577 |         document.getElementById("ex3notify2").onclick = function () {
578 |             if (notification === null) {
579 |                 return;
580 |             }
581 |             notification.destroy();
582 |             notification = null;
583 |         };
584 |     })();
585 | </script>
586 |
587 |
588 |
589 | 590 |
591 |

Example 4: Define your own styles

592 |

Use the <type> option to define your own styles

593 | 594 | 601 | 606 | 613 | 614 |

All the icons, including the ones of this example, used by Notifier.js were taken 616 | from open-iconic

617 | 618 |
619 |
Code:
620 | 
<script src="dist/Notifier.min.js"></script>
621 | <script>
622 |     (function(){
623 |         var notifier = new Notifier({
624 |             watch: {
625 |                 textColor: "#24292e",
626 |                 borderColor: "#c4c8cc",
627 |                 backgroundColor: "#fafbfc",
628 |                 progressColor: "#24292e",
629 |                 iconColor: "#24292e",
630 |                 icon: "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"8\" height=\"8\" viewBox=\"0 0 8 8\"><path d=\"M4.03 0c-2.53 0-4.03 3-4.03 3s1.5 3 4.03 3c2.47 0 3.97-3 3.97-3s-1.5-3-3.97-3zm-.03 1c1.11 0 2 .9 2 2 0 1.11-.89 2-2 2-1.1 0-2-.89-2-2 0-1.1.9-2 2-2zm0 1c-.55 0-1 .45-1 1s.45 1 1 1 1-.45 1-1c0-.1-.04-.19-.06-.28-.08.16-.24.28-.44.28-.28 0-.5-.22-.5-.5 0-.2.12-.36.28-.44-.09-.03-.18-.06-.28-.06z\" transform=\"translate(0 1)\" /></svg>"
631 |             },
632 |             star: {
633 |                 textColor: "#24292e",
634 |                 borderColor: "#c4c8cc",
635 |                 backgroundColor: "#fafbfc",
636 |                 progressColor: "#24292e",
637 |                 iconColor: "#24292e",
638 |                 icon: "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"8\" height=\"8\" viewBox=\"0 0 8 8\"><path d=\"M4 0l-1 3h-3l2.5 2-1 3 2.5-2 2.5 2-1-3 2.5-2h-3l-1-3z\" /></svg>"
639 |             },
640 |             fork: {
641 |                 textColor: "#24292e",
642 |                 borderColor: "#c4c8cc",
643 |                 backgroundColor: "#fafbfc",
644 |                 progressColor: "#24292e",
645 |                 iconColor: "#24292e",
646 |                 icon: "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"8\" height=\"8\" viewBox=\"0 0 8 8\"><path d=\"M1.5 0c-.83 0-1.5.67-1.5 1.5 0 .66.41 1.2 1 1.41v2.19c-.59.2-1 .75-1 1.41 0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5c0-.6-.34-1.1-.84-1.34.09-.09.21-.16.34-.16h2c.82 0 1.5-.68 1.5-1.5v-.59c.59-.2 1-.75 1-1.41 0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5c0 .66.41 1.2 1 1.41v.59c0 .28-.22.5-.5.5h-2c-.17 0-.35.04-.5.09v-1.19c.59-.2 1-.75 1-1.41 0-.83-.67-1.5-1.5-1.5z\" /></svg>"
647 |             }
648 |         });
649 |     
650 |     
651 |         document.getElementById("ex4notify1").onclick = function () {
652 |             notifier.notify("watch", "Watched!");
653 |         };
654 |         document.getElementById("ex4notify2").onclick = function () {
655 |             notifier.notify("star", "Starred!");
656 |         };
657 |         document.getElementById("ex4notify3").onclick = function () {
658 |             notifier.notify("fork", "Forked!");
659 |         };
660 |     })();
661 | </script>
662 |
663 |
664 |
665 | 666 |
667 |

Example 5: Position the notifications and set the stack direction

668 |

Use the position and direction options to change it.

669 | 670 | 671 | 672 | 673 | 674 | 675 |
676 |
Code:
677 | 
<script src="dist/Notifier.min.js"></script>
678 | <script>
679 |     (function(){
680 |         var notifierTR = new Notifier({
681 |             position: 'top-right',
682 |             direction: 'top'
683 |         });
684 |         var notifierTL = new Notifier({
685 |             position: 'top-left',
686 |             direction: 'top'
687 |         });
688 |         var notifierBL = new Notifier({
689 |             position: 'bottom-left',
690 |             direction: 'bottom'
691 |         });
692 |         var notifierBR = new Notifier({
693 |             position: 'bottom-right',
694 |             direction: 'bottom'
695 |         });
696 | 
697 |         document.getElementById("ex5notify1").onclick = function () {
698 |             notifierTL.notify("info", "I am on TOP LEFT!");
699 |         };
700 |         document.getElementById("ex5notify2").onclick = function () {
701 |             notifierTR.notify("info", "I am on TOP RIGHT!");
702 |         };
703 |         document.getElementById("ex5notify3").onclick = function () {
704 |             notifier.notify("info", "I am on BOTTOM LEFT!");
705 |         };
706 |         document.getElementById("ex5notify4").onclick = function () {
707 |             notifier.notify("info", "I am on BOTTOM RIGHT!");
708 |         };
709 |     })();
710 | </script>
711 |
712 |
713 |
714 |
715 |
716 |
717 | 718 | 719 | 733 | 734 | 735 | 903 | 904 | 905 | 906 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@jsanahuja/notifierjs", 3 | "description": "Instagram Feed without access token. Not using the Instagram API", 4 | "homepage": "https://github.com/jsanahuja/Notifierjs", 5 | "version": "1.2.4", 6 | "keywords": [ 7 | "notifier", 8 | "notification", 9 | "notifier", 10 | "notify", 11 | "javascript", 12 | "vanilla" 13 | ], 14 | "publishConfig": { 15 | "registry": "https://npm.pkg.github.com/" 16 | }, 17 | "author": { 18 | "name": "Javier Sanahuja", 19 | "email": "bannss1@gmail.com" 20 | }, 21 | "repository": { 22 | "type": "git", 23 | "url": "https://github.com/jsanahuja/Notifierjs.git" 24 | }, 25 | "license": "MIT", 26 | "scripts": { 27 | "build": "grunt build" 28 | }, 29 | "devDependencies": { 30 | "@babel/core": "^7.8.3", 31 | "@babel/preset-env": "^7.8.3", 32 | "babel-preset-minify": "^0.5.1", 33 | "grunt": "^1.0.4", 34 | "grunt-babel": "^8.0.0" 35 | }, 36 | "main": "dist/Notifier.min.js", 37 | "module": "dist/Notifier.min.js" 38 | } 39 | -------------------------------------------------------------------------------- /src/Notifier.js: -------------------------------------------------------------------------------- 1 | (function(root, factory) { 2 | if (typeof define === "function" && define.amd) { 3 | define([], factory); 4 | } else if (typeof exports === "object") { 5 | module.exports = factory(); 6 | } else { 7 | root.Notifier = factory(); 8 | } 9 | }(this, function() { 10 | var defaults = { 11 | autopush: true, 12 | zindex: 9999, 13 | default_time: 4500, 14 | vanish_time: 300, 15 | fps: 30, 16 | position: 'bottom-right', 17 | direction: 'bottom', 18 | success: { 19 | classes: 'notifyjs-success', 20 | textColor: "#155724", 21 | borderColor: "#c3e6cb", 22 | backgroundColor: "#d4edda", 23 | progressColor: "#155724", 24 | iconColor: "#155724", 25 | // iconClasses: "", 26 | icon: '' 27 | }, 28 | error: { 29 | classes: 'notifyjs-danger', 30 | textColor: "#721c24", 31 | borderColor: "#f5c6cb", 32 | backgroundColor: "#f8d7da", 33 | progressColor: "#721c24", 34 | iconColor: "#721c24", 35 | // iconClasses: "", 36 | icon: '' 37 | }, 38 | warning: { 39 | classes: 'notifyjs-warning', 40 | textColor: "#856404", 41 | borderColor: "#fff3cd", 42 | backgroundColor: "#ffeeba", 43 | progressColor: "#856404", 44 | iconColor: "#856404", 45 | // iconClasses: "", 46 | icon: '' 47 | }, 48 | info: { 49 | classes: 'notifyjs-info', 50 | textColor: "#0c5460", 51 | borderColor: "#d1ecf1", 52 | backgroundColor: "#bee5eb", 53 | progressColor: "#0c5460", 54 | iconColor: "#0c5460", 55 | // iconClasses: "", 56 | icon: '' 57 | } 58 | }; 59 | 60 | var Notification = function(notifier, msg, type, time, vanish, fps, callback) { 61 | this.pushed = false; 62 | 63 | // Notification 64 | this.element = document.createElement('div'); 65 | this.element.className = type.classes || ""; 66 | this.element.style.display = "none"; 67 | this.element.style.position = "relative"; 68 | this.element.style.padding = "1em 2em 1em 2.5em"; 69 | switch(notifier.options.direction){ 70 | case "top": 71 | this.element.style.marginTop = "0.5em"; 72 | break; 73 | case "bottom": 74 | default: 75 | this.element.style.marginBottom = "0.5em"; 76 | break; 77 | } 78 | this.element.style.width = "100%"; 79 | this.element.style.borderWidth = "1px"; 80 | this.element.style.borderStyle = "solid"; 81 | this.element.style.borderColor = type.borderColor; 82 | this.element.style.boxSizing = "border-box"; 83 | this.element.style.backgroundColor = type.backgroundColor; 84 | 85 | // Icon 86 | if(typeof type.icon !== "undefined"){ 87 | var icon = document.createElement('div'); 88 | icon.style.position = "absolute"; 89 | icon.style.top = "50%"; 90 | icon.style.left = "10px"; 91 | icon.style.transform = "translateY(-50%)"; 92 | icon.innerHTML = type.icon; 93 | if(type.icon.indexOf("