├── _config.yml ├── image ├── bg.jpg ├── eror.png ├── kustom.png ├── sukses.png └── peringatan.png ├── style.css ├── README.md ├── index.html ├── notifikasi ├── cssnotifikasi.css ├── tampilnotifikasi.js └── jsnotifikasi.js └── js.js /_config.yml: -------------------------------------------------------------------------------- 1 | theme: jekyll-theme-cayman -------------------------------------------------------------------------------- /image/bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wafarifki/htmlnotifikasi/HEAD/image/bg.jpg -------------------------------------------------------------------------------- /image/eror.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wafarifki/htmlnotifikasi/HEAD/image/eror.png -------------------------------------------------------------------------------- /image/kustom.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wafarifki/htmlnotifikasi/HEAD/image/kustom.png -------------------------------------------------------------------------------- /image/sukses.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wafarifki/htmlnotifikasi/HEAD/image/sukses.png -------------------------------------------------------------------------------- /image/peringatan.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wafarifki/htmlnotifikasi/HEAD/image/peringatan.png -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | background: #f5f5f5; 5 | color: #404040; 6 | } 7 | 8 | .kiri { 9 | float: left; 10 | margin-left: 6%; 11 | margin-right: 2%; 12 | } 13 | 14 | .kanan { 15 | float: right; 16 | margin-right: 2%; 17 | margin-left: 6%; 18 | } 19 | 20 | .tombolsukses { 21 | background: #519872; 22 | color: #f5f5f5; 23 | padding: 10px; 24 | font-weight: bold; 25 | box-shadow: none; 26 | border: none; 27 | outline: none; 28 | border-radius: 10px; 29 | } 30 | 31 | .tombolsukses:hover { 32 | background: #3d835d; 33 | color: #f5f5f5; 34 | padding: 10px; 35 | font-weight: bold; 36 | box-shadow: none; 37 | border: none; 38 | outline: none; 39 | border-radius: 10px; 40 | cursor: pointer; 41 | } 42 | 43 | .tombolerror { 44 | background: #d92027; 45 | color: #f5f5f5; 46 | padding: 10px; 47 | font-weight: bold; 48 | box-shadow: none; 49 | border: none; 50 | outline: none; 51 | border-radius: 10px; 52 | } 53 | 54 | .tombolerror:hover { 55 | background: #900d0d; 56 | color: #f5f5f5; 57 | padding: 10px; 58 | font-weight: bold; 59 | box-shadow: none; 60 | border: none; 61 | outline: none; 62 | border-radius: 10px; 63 | cursor: pointer; 64 | } 65 | 66 | .tombolperingatan { 67 | background: #ffa931; 68 | color: #f5f5f5; 69 | padding: 10px; 70 | font-weight: bold; 71 | box-shadow: none; 72 | border: none; 73 | font-size: 12.2px; 74 | outline: none; 75 | border-radius: 10px; 76 | } 77 | 78 | .tombolperingatan:hover { 79 | background: #e49425; 80 | color: #f5f5f5; 81 | padding: 10px; 82 | font-weight: bold; 83 | box-shadow: none; 84 | border: none; 85 | font-size: 12.2px; 86 | outline: none; 87 | border-radius: 10px; 88 | cursor: pointer; 89 | } 90 | 91 | .tombolkustom { 92 | background: #336d88; 93 | color: #f5f5f5; 94 | padding: 10px; 95 | font-weight: bold; 96 | box-shadow: none; 97 | border: none; 98 | font-size: 12.2px; 99 | outline: none; 100 | border-radius: 10px; 101 | } 102 | 103 | .tombolkustom:hover { 104 | background: #383e56; 105 | color: #f5f5f5; 106 | padding: 10px; 107 | font-weight: bold; 108 | box-shadow: none; 109 | border: none; 110 | font-size: 12.2px; 111 | outline: none; 112 | border-radius: 10px; 113 | cursor: pointer; 114 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # htmlnotifikasi 2 | ini adalah project saya yang kedua, yaitu html notifikasi. html notifikasi adalah library untuk menampilkan toast notifikasi 3 | 4 | demo : https://wafarifki.github.io/htmlnotifikasi 5 | 6 | #Instruksi Instalasi
7 | Tambahkan cssnotifikasi.css di header website anda. (Wajib) 8 | 9 | Tambahkan jsnotifikasi.js tepat sebelum tag body. (Wajib) 10 | 11 | Tambahkan tampilnotifikasi.js tepat sebelum tag body. (Wajib) 12 | 13 | 14 | edit file tampilnotifikasi.js untuk mengatur notifikasi anda. 15 | 16 | edit file cssnotifikasi.css untuk mengatur gaya notifikasi anda, 17 | anda bisa mengubah ikon default notifikasi. 18 | 19 | #Informasi 20 | 21 | judulnotifikasi: judul notifikasi anda 22 | 23 | text: isi notifikasi anda 24 | 25 | ikon: ikon notifikasi anda 26 | 27 | transisi: pengaturan efek notifikasi, terdapat beberapa pilihan efek diantaranya slide efek, fade efek, plain efek 28 | 29 | AutoTutup: otomatis menutup notifikasi, true untuk iya, false untuk tidak 30 | 31 | hideAfter: atur berapa lama notifikasi anda tampil, atur waktu dengan format milisecond 32 | 33 | posisi: atur posisi notifikasi anda 34 | 35 | textAlign: atur perataan teks notifikasi anda, terdapat beberapa pilihan perataan teks notifikasi diantaranya left, center, right 36 | 37 | loader: tampilkan efek loading, true untuk menampilkan, false untuk menyembunyikan 38 | 39 | loaderBg: warna loading, harus menggunakan hexcolor code, temukan lebih banyak warna di https://colorhunt.co 40 | 41 | # Let's connect with me! 42 |

43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 |

51 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Notifikasi Html Css Javascript 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |

Notifkasi Html, Css, Javascript

17 |

Build by Wafa Rifqi Anafin

18 |
19 | 20 |
21 |

Instruksi Instalasi

22 |
23 |

Tambahkan 24 | cssnotifikasi.css di header website anda. 25 | (Wajib) 26 |

27 |

Tambahkan 28 | jsnotifikasi.js tepat sebelum tag body. 29 | (Wajib) 30 |

31 |

Tambahkan 32 | tampilnotifikasi.js tepat sebelum tag body. 33 | (Wajib) 34 |

35 |
36 |

edit file 37 | tampilnotifikasi.js untuk mengatur notifikasi anda.

38 |

edit file 39 | cssnotifikasi.css untuk mengatur gaya notifikasi anda, 40 |
anda bisa mengubah ikon default notifikasi.

41 |
42 | 43 | 44 |

45 | 46 | 47 |

48 | 49 |
50 | 51 |
52 |

Informasi

53 |
54 |

judulnotifikasi : judul notifikasi anda

55 |

text: isi notifikasi anda

56 |

ikon: ikon notifikasi anda

57 |

transisi: pengaturan efek notifikasi, terdapat beberapa pilihan efek diantaranya slide efek, fade efek, plain efek

58 |

AutoTutup: otomatis menutup notifikasi, true untuk iya, false untuk tidak

59 |

hideAfter : atur berapa lama notifikasi anda tampil, atur waktu dengan format milisecond 60 |

61 |

posisi: atur posisi notifikasi anda

62 | 63 |

textAlign: atur perataan teks notifikasi anda, terdapat beberapa pilihan perataan teks notifikasi diantaranya left, center, right

64 | 65 |

loader: tampilkan efek loading, true untuk menampilkan, false untuk menyembunyikan 66 |

67 | 68 |

loaderBg: warna loading, harus menggunakan hexcolor code, temukan lebih banyak warna di https://colorhunt.co

69 | 70 |
71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | -------------------------------------------------------------------------------- /notifikasi/cssnotifikasi.css: -------------------------------------------------------------------------------- 1 | .jq-notifikasi-wrap { 2 | display: block; 3 | position: fixed; 4 | width: 230px; 5 | pointer-events: none !important; 6 | margin: 0; 7 | padding: 0; 8 | letter-spacing: normal; 9 | z-index: 989898 !important; 10 | } 11 | 12 | .jq-notifikasi-wrap * { 13 | margin: 0; 14 | padding: 0; 15 | } 16 | 17 | .jq-notifikasi-wrap.bottom-left { 18 | bottom: 20px; 19 | left: 20px; 20 | } 21 | 22 | .jq-notifikasi-wrap.bottom-right { 23 | bottom: 20px; 24 | right: 40px; 25 | } 26 | 27 | .jq-notifikasi-wrap.top-left { 28 | top: 20px; 29 | left: 20px; 30 | } 31 | 32 | .jq-notifikasi-wrap.top-right { 33 | top: 20px; 34 | right: 40px; 35 | } 36 | 37 | .jq-notifikasi-single { 38 | display: block; 39 | width: 100%; 40 | padding: 10px; 41 | margin: 0 0 5px; 42 | border-radius: 6px; 43 | font-size: 12px; 44 | font-family: arial, sans-serif; 45 | line-height: 17px; 46 | position: relative; 47 | pointer-events: all !important; 48 | background-color: #444444; 49 | color: white; 50 | } 51 | 52 | .jq-notifikasi-single h2 { 53 | font-family: arial, sans-serif; 54 | font-size: 14px; 55 | margin: 0 0 7px; 56 | background: none; 57 | color: inherit; 58 | line-height: inherit; 59 | letter-spacing: normal; 60 | } 61 | 62 | .jq-notifikasi-single a { 63 | color: #eee; 64 | text-decoration: none; 65 | font-weight: bold; 66 | border-bottom: 1px solid white; 67 | padding-bottom: 3px; 68 | font-size: 12px; 69 | } 70 | 71 | .jq-notifikasi-single ul { 72 | margin: 0 0 0 15px; 73 | background: none; 74 | padding: 0; 75 | } 76 | 77 | .jq-notifikasi-single ul li { 78 | list-style-type: disc !important; 79 | line-height: 17px; 80 | background: none; 81 | margin: 0; 82 | padding: 0; 83 | letter-spacing: normal; 84 | } 85 | 86 | .close-jq-notifikasi-single { 87 | position: absolute; 88 | top: 3px; 89 | right: 7px; 90 | font-size: 14px; 91 | cursor: pointer; 92 | } 93 | 94 | .jq-notifikasi-loader { 95 | display: block; 96 | position: absolute; 97 | top: -2px; 98 | height: 5px; 99 | width: 0; 100 | left: 0; 101 | border-radius: 5px; 102 | background: red; 103 | } 104 | 105 | .jq-notifikasi-loaded { 106 | width: 100%; 107 | } 108 | 109 | .jq-has-ikon { 110 | padding: 10px 10px 10px 50px; 111 | background-repeat: no-repeat; 112 | background-position: 10px; 113 | } 114 | 115 | .jq-ikon-kustom { 116 | background-image: url("https://raw.githubusercontent.com/wafarifki/htmlnotifikasi/master/image/kustom.png"); 117 | /*gambar ikon notifikasi*/ 118 | background-color: #31708f; 119 | /*warna background notifikasi*/ 120 | color: #d9edf7; 121 | /*warna teks notifikasi*/ 122 | } 123 | 124 | .jq-ikon-peringatan { 125 | background-image: url("https://raw.githubusercontent.com/wafarifki/htmlnotifikasi/master/image/peringatan.png"); 126 | /*gambar ikon notifikasi*/ 127 | background-color: #8a6d3b; 128 | /*warna background notifikasi*/ 129 | color: #fcf8e3; 130 | /*warna teks notifikasi*/ 131 | } 132 | 133 | .jq-ikon-eror { 134 | background-image: url("https://raw.githubusercontent.com/wafarifki/htmlnotifikasi/master/image/eror.png"); 135 | /*gambar ikon notifikasi*/ 136 | background-color: #a94442; 137 | /*warna background notifikasi*/ 138 | color: #f2dede; 139 | /*warna teks notifikasi*/ 140 | } 141 | 142 | .jq-ikon-sukses { 143 | background-image: url("https://raw.githubusercontent.com/wafarifki/htmlnotifikasi/master/image/sukses.png"); 144 | /*gambar ikon notifikasi*/ 145 | background-color: #3c763d; 146 | /*warna background notifikasi*/ 147 | color: #dff0d8; 148 | /*warna teks notifikasi*/ 149 | } 150 | -------------------------------------------------------------------------------- /js.js: -------------------------------------------------------------------------------- 1 | function sukses() { 2 | $.notifikasi({ 3 | judulnotifikasi: 'Notifikasi Sukses', // judul notifikasi 4 | text: "ini adalah contoh notifikasi sukses", // isi notifikasi 5 | ikon: 'sukses', // Tipe ikon sukses, error, peringatan, kustom 6 | transisi: 'slide', // tipe transisi slide, fade, plain 7 | AutoTutup: true, // ijinkan notifikasi menutup dengan otomatis. true untuk iya, false untuk tidak 8 | hideAfter: 5000, // ijinkan notifikasi menutup dengan otomatis berdasarkan pengaturan waktu milisecond 9 | posisi: { 10 | left: 'auto', 11 | right: 80, 12 | top: 'auto', 13 | bottom: 60 14 | }, // atur posisi notifikasi 15 | textAlign: 'left', // perataan isi teks. left, center, right 16 | loader: true, // tampilkan loading notifikasi. true untuk iya, false untuk tidak 17 | loaderBg: '#99b898', // kode warna untuk loading notifikasi, temukan lebih banyak warna di https://colorhunt.co 18 | }); 19 | } 20 | 21 | function eror() { 22 | $.notifikasi({ 23 | judulnotifikasi: 'Notifikasi Error', // judul notifikasi 24 | text: "Ini adalah contoh notifikasi error", // isi notifikasi 25 | ikon: 'eror', // Tipe ikon sukses, error, peringatan, kustom 26 | transisi: 'slide', // tipe transisi slide, fade, plain 27 | AutoTutup: true, // ijinkan notifikasi menutup dengan otomatis. true untuk iya, false untuk tidak 28 | hideAfter: 5000, // ijinkan notifikasi menutup dengan otomatis berdasarkan pengaturan waktu milisecond 29 | posisi: { 30 | left: 'auto', 31 | right: 80, 32 | top: 'auto', 33 | bottom: 60 34 | }, // atur posisi notifikasi 35 | textAlign: 'left', // perataan isi teks. left, center, right 36 | loader: true, // tampilkan loading notifikasi. true untuk iya, false untuk tidak 37 | loaderBg: '#99b898', // kode warna untuk loading notifikasi, temukan lebih banyak warna di https://colorhunt.co 38 | }); 39 | } 40 | 41 | function peringatan() { 42 | $.notifikasi({ 43 | judulnotifikasi: 'Notifikasi Peringatan', // judul notifikasi 44 | text: "Ini adalah contoh notifikasi Peringatan", // isi notifikasi 45 | ikon: 'peringatan', // Tipe ikon sukses, error, peringatan, kustom 46 | transisi: 'slide', // tipe transisi slide, fade, plain 47 | AutoTutup: true, // ijinkan notifikasi menutup dengan otomatis. true untuk iya, false untuk tidak 48 | hideAfter: 5000, // ijinkan notifikasi menutup dengan otomatis berdasarkan pengaturan waktu milisecond 49 | posisi: { 50 | left: 'auto', 51 | right: 80, 52 | top: 'auto', 53 | bottom: 60 54 | }, // atur posisi notifikasi 55 | textAlign: 'left', // perataan isi teks. left, center, right 56 | loader: true, // tampilkan loading notifikasi. true untuk iya, false untuk tidak 57 | loaderBg: '#99b898', // kode warna untuk loading notifikasi, temukan lebih banyak warna di https://colorhunt.co 58 | }); 59 | } 60 | 61 | function kustom() { 62 | $.notifikasi({ 63 | judulnotifikasi: 'Notifikasi Kustom', // judul notifikasi 64 | text: "Ini adalah contoh notifikasi Kustom", // isi notifikasi 65 | ikon: 'kustom', // Tipe ikon sukses, error, peringatan, kustom 66 | transisi: 'slide', // tipe transisi slide, fade, plain 67 | AutoTutup: true, // ijinkan notifikasi menutup dengan otomatis. true untuk iya, false untuk tidak 68 | hideAfter: 5000, // ijinkan notifikasi menutup dengan otomatis berdasarkan pengaturan waktu milisecond 69 | posisi: { 70 | left: 'auto', 71 | right: 80, 72 | top: 'auto', 73 | bottom: 60 74 | }, // atur posisi notifikasi 75 | textAlign: 'left', // perataan isi teks. left, center, right 76 | loader: true, // tampilkan loading notifikasi. true untuk iya, false untuk tidak 77 | loaderBg: '#99b898', // kode warna untuk loading notifikasi, temukan lebih banyak warna di https://colorhunt.co 78 | }); 79 | } -------------------------------------------------------------------------------- /notifikasi/tampilnotifikasi.js: -------------------------------------------------------------------------------- 1 | var myVar = setInterval(myTimer, 2000); // timer notifikasi, atur timer dengan milisecond 2 | 3 | function myTimer() { 4 | $.notifikasi({ 5 | judulnotifikasi: 'Notifikasi Sukses', // judul notifikasi 6 | text: "ini adalah contoh notifikasi sukses", // isi notifikasi 7 | ikon: 'sukses', // Tipe ikon sukses, error, peringatan, kustom 8 | transisi: 'slide', // tipe transisi slide, fade, plain 9 | AutoTutup: true, // ijinkan notifikasi menutup dengan otomatis. true untuk iya, false untuk tidak 10 | hideAfter: 5000, // ijinkan notifikasi menutup dengan otomatis berdasarkan pengaturan waktu milisecond 11 | posisi: { 12 | left: 'auto', 13 | right: 70, 14 | top: 'auto', 15 | bottom: 60 16 | }, // atur posisi notifikasi 17 | textAlign: 'left', // perataan isi teks. left, center, right 18 | loader: true, // tampilkan loading notifikasi. true untuk iya, false untuk tidak 19 | loaderBg: '#99b898', // kode warna untuk loading notifikasi, temukan lebih banyak warna di https://colorhunt.co 20 | }); 21 | clearInterval(myVar); 22 | } 23 | 24 | var myVar2 = setInterval(myTimer2, 7000); // timer notifikasi, atur timer dengan milisecond 25 | 26 | function myTimer2() { 27 | $.notifikasi({ 28 | judulnotifikasi: 'Notifikasi Error', // judul notifikasi 29 | text: "Ini adalah contoh notifikasi error", // isi notifikasi 30 | ikon: 'eror', // Tipe ikon sukses, error, peringatan, kustom 31 | transisi: 'slide', // tipe transisi slide, fade, plain 32 | AutoTutup: true, // ijinkan notifikasi menutup dengan otomatis. true untuk iya, false untuk tidak 33 | hideAfter: 5000, // ijinkan notifikasi menutup dengan otomatis berdasarkan pengaturan waktu milisecond 34 | posisi: { 35 | left: 'auto', 36 | right: 70, 37 | top: 'auto', 38 | bottom: 60 39 | }, // atur posisi notifikasi 40 | textAlign: 'left', // perataan isi teks. left, center, right 41 | loader: true, // tampilkan loading notifikasi. true untuk iya, false untuk tidak 42 | loaderBg: '#99b898', // kode warna untuk loading notifikasi, temukan lebih banyak warna di https://colorhunt.co 43 | }); 44 | clearInterval(myVar2); 45 | } 46 | 47 | var myVar3 = setInterval(myTimer3, 12000); // timer notifikasi, atur timer dengan milisecond 48 | 49 | function myTimer3() { 50 | $.notifikasi({ 51 | judulnotifikasi: 'Notifikasi Peringatan', // judul notifikasi 52 | text: "Ini adalah contoh notifikasi Peringatan", // isi notifikasi 53 | ikon: 'peringatan', // Tipe ikon sukses, error, peringatan, kustom 54 | transisi: 'slide', // tipe transisi slide, fade, plain 55 | AutoTutup: true, // ijinkan notifikasi menutup dengan otomatis. true untuk iya, false untuk tidak 56 | hideAfter: 5000, // ijinkan notifikasi menutup dengan otomatis berdasarkan pengaturan waktu milisecond 57 | posisi: { 58 | left: 'auto', 59 | right: 70, 60 | top: 'auto', 61 | bottom: 60 62 | }, // atur posisi notifikasi 63 | textAlign: 'left', // perataan isi teks. left, center, right 64 | loader: true, // tampilkan loading notifikasi. true untuk iya, false untuk tidak 65 | loaderBg: '#99b898', // kode warna untuk loading notifikasi, temukan lebih banyak warna di https://colorhunt.co 66 | }); 67 | clearInterval(myVar3); 68 | } 69 | 70 | var myVar4 = setInterval(myTimer4, 18000); // timer notifikasi, atur timer dengan milisecond 71 | 72 | function myTimer4() { 73 | $.notifikasi({ 74 | judulnotifikasi: 'Notifikasi Kustom', // judul notifikasi 75 | text: "Ini adalah contoh notifikasi Kustom", // isi notifikasi 76 | ikon: 'kustom', // Tipe ikon sukses, error, peringatan, kustom 77 | transisi: 'slide', // tipe transisi slide, fade, plain 78 | AutoTutup: true, // ijinkan notifikasi menutup dengan otomatis. true untuk iya, false untuk tidak 79 | hideAfter: 5000, // ijinkan notifikasi menutup dengan otomatis berdasarkan pengaturan waktu milisecond 80 | posisi: { 81 | left: 'auto', 82 | right: 70, 83 | top: 'auto', 84 | bottom: 60 85 | }, // atur posisi notifikasi 86 | textAlign: 'left', // perataan isi teks. left, center, right 87 | loader: true, // tampilkan loading notifikasi. true untuk iya, false untuk tidak 88 | loaderBg: '#99b898', // kode warna untuk loading notifikasi, temukan lebih banyak warna di https://colorhunt.co 89 | }); 90 | clearInterval(myVar4); 91 | } -------------------------------------------------------------------------------- /notifikasi/jsnotifikasi.js: -------------------------------------------------------------------------------- 1 | if (typeof Object.create !== 'function') { 2 | Object.create = function(obj) { 3 | function F() {} 4 | F.prototype = obj; 5 | return new F(); 6 | }; 7 | } 8 | 9 | (function($, window, document, undefined) { 10 | 11 | "use strict"; 12 | 13 | var Toast = { 14 | 15 | _posisiClasses: [ 16 | 'bottom-left', 17 | 'bottom-right', 18 | 'top-right', 19 | 'top-left', 20 | 'bottom-center', 21 | 'top-center', 22 | 'mid-center' 23 | ], 24 | _defaultikons: [ 25 | 'sukses', 'eror', 'peringatan', 'kustom' 26 | ], 27 | 28 | init: function(options, elem) { 29 | this.prepareOptions(options, $.notifikasi.options); 30 | this.process(); 31 | }, 32 | 33 | prepareOptions: function(options, options_to_extend) { 34 | var _options = {}; 35 | if ((typeof options === 'string') || (options instanceof Array)) { 36 | _options.text = options; 37 | } else { 38 | _options = options; 39 | } 40 | this.options = $.extend({}, options_to_extend, _options); 41 | }, 42 | 43 | process: function() { 44 | this.setup(); 45 | this.addToDom(); 46 | this.posisi(); 47 | this.bindToast(); 48 | this.animate(); 49 | }, 50 | 51 | setup: function() { 52 | 53 | var _toastContent = ''; 54 | 55 | this._toastEl = this._toastEl || $( 56 | '
', { class: 'jq-notifikasi-single' } 57 | ); 58 | 59 | // For the loader on top 60 | _toastContent += ''; 61 | 62 | if (this.options.AutoTutup) { 63 | _toastContent += '×'; 64 | }; 65 | 66 | if (this.options.text instanceof Array) { 67 | 68 | if (this.options.judulnotifikasi) { 69 | _toastContent += '

' + this.options.judulnotifikasi + '

'; 70 | }; 71 | 72 | _toastContent += ''; 79 | 80 | } else { 81 | if (this.options.judulnotifikasi) { 82 | _toastContent += '

' + this.options.judulnotifikasi + '

'; 83 | }; 84 | _toastContent += this.options.text; 85 | } 86 | 87 | this 88 | ._toastEl 89 | .html(_toastContent); 90 | 91 | if (this.options.bgColor !== false) { 92 | this 93 | ._toastEl 94 | .css("background-color", this.options.bgColor); 95 | }; 96 | 97 | if (this.options.textColor !== false) { 98 | this 99 | ._toastEl 100 | .css("color", this.options.textColor); 101 | }; 102 | 103 | if (this.options.textAlign) { 104 | this 105 | ._toastEl 106 | .css('text-align', this.options.textAlign); 107 | } 108 | 109 | if (this.options.ikon !== false) { 110 | this 111 | ._toastEl 112 | .addClass('jq-has-ikon'); 113 | 114 | if ($.inArray(this.options.ikon, this._defaultikons) !== -1) { 115 | this 116 | ._toastEl 117 | .addClass('jq-ikon-' + this.options.ikon); 118 | }; 119 | }; 120 | 121 | if (this.options.class !== false) { 122 | this 123 | ._toastEl 124 | .addClass(this.options.class) 125 | } 126 | }, 127 | 128 | posisi: function() { 129 | if ((typeof this.options.posisi === 'string') && ($.inArray(this.options.posisi, this._posisiClasses) !== -1)) { 130 | 131 | if (this.options.posisi === 'bottom-center') { 132 | this 133 | ._container 134 | .css({ 135 | left: ($(window).outerWidth() / 2) - this 136 | ._container 137 | .outerWidth() / 2, 138 | bottom: 20 139 | }); 140 | } else if (this.options.posisi === 'top-center') { 141 | this 142 | ._container 143 | .css({ 144 | left: ($(window).outerWidth() / 2) - this 145 | ._container 146 | .outerWidth() / 2, 147 | top: 20 148 | }); 149 | } else if (this.options.posisi === 'mid-center') { 150 | this 151 | ._container 152 | .css({ 153 | left: ($(window).outerWidth() / 2) - this 154 | ._container 155 | .outerWidth() / 2, 156 | top: ($(window).outerHeight() / 2) - this 157 | ._container 158 | .outerHeight() / 2 159 | }); 160 | } else { 161 | this 162 | ._container 163 | .addClass(this.options.posisi); 164 | } 165 | 166 | } else if (typeof this.options.posisi === 'object') { 167 | this 168 | ._container 169 | .css({ 170 | top: this.options.posisi.top ? 171 | this.options.posisi.top : 'auto', 172 | bottom: this.options.posisi.bottom ? 173 | this.options.posisi.bottom : 'auto', 174 | left: this.options.posisi.left ? 175 | this.options.posisi.left : 'auto', 176 | right: this.options.posisi.right ? 177 | this.options.posisi.right : 'auto' 178 | }); 179 | } else { 180 | this 181 | ._container 182 | .addClass('bottom-left'); 183 | } 184 | }, 185 | 186 | bindToast: function() { 187 | 188 | var that = this; 189 | 190 | this 191 | ._toastEl 192 | .on('afterShown', function() { 193 | that.processLoader(); 194 | }); 195 | 196 | this 197 | ._toastEl 198 | .find('.close-jq-notifikasi-single') 199 | .on('click', function(e) { 200 | 201 | e.preventDefault(); 202 | 203 | if (that.options.transisi === 'fade') { 204 | that 205 | ._toastEl 206 | .trigger('beforeHide'); 207 | that 208 | ._toastEl 209 | .fadeOut(function() { 210 | that 211 | ._toastEl 212 | .trigger('afterHidden'); 213 | }); 214 | } else if (that.options.transisi === 'slide') { 215 | that 216 | ._toastEl 217 | .trigger('beforeHide'); 218 | that 219 | ._toastEl 220 | .slideUp(function() { 221 | that 222 | ._toastEl 223 | .trigger('afterHidden'); 224 | }); 225 | } else { 226 | that 227 | ._toastEl 228 | .trigger('beforeHide'); 229 | that 230 | ._toastEl 231 | .hide(function() { 232 | that 233 | ._toastEl 234 | .trigger('afterHidden'); 235 | }); 236 | } 237 | }); 238 | 239 | if (typeof this.options.beforeShow == 'function') { 240 | this 241 | ._toastEl 242 | .on('beforeShow', function() { 243 | that 244 | .options 245 | .beforeShow(); 246 | }); 247 | }; 248 | 249 | if (typeof this.options.afterShown == 'function') { 250 | this 251 | ._toastEl 252 | .on('afterShown', function() { 253 | that 254 | .options 255 | .afterShown(); 256 | }); 257 | }; 258 | 259 | if (typeof this.options.beforeHide == 'function') { 260 | this 261 | ._toastEl 262 | .on('beforeHide', function() { 263 | that 264 | .options 265 | .beforeHide(); 266 | }); 267 | }; 268 | 269 | if (typeof this.options.afterHidden == 'function') { 270 | this 271 | ._toastEl 272 | .on('afterHidden', function() { 273 | that 274 | .options 275 | .afterHidden(); 276 | }); 277 | }; 278 | }, 279 | 280 | addToDom: function() { 281 | 282 | var _container = $('.jq-notifikasi-wrap'); 283 | 284 | if (_container.length === 0) { 285 | 286 | _container = $('
', { 287 | class: "jq-notifikasi-wrap", 288 | role: "alert", 289 | "aria-live": "polite" 290 | }); 291 | 292 | $('body').append(_container); 293 | 294 | } else if (!this.options.stack || isNaN(parseInt(this.options.stack, 10))) { 295 | _container.empty(); 296 | } 297 | 298 | _container 299 | .find('.jq-notifikasi-single:hidden') 300 | .remove(); 301 | 302 | _container.append(this._toastEl); 303 | 304 | if (this.options.stack && !isNaN(parseInt(this.options.stack), 10)) { 305 | 306 | var _prevToastCount = _container 307 | .find('.jq-notifikasi-single') 308 | .length, 309 | _extToastCount = _prevToastCount - this.options.stack; 310 | 311 | if (_extToastCount > 0) { 312 | $('.jq-notifikasi-wrap') 313 | .find('.jq-notifikasi-single') 314 | .slice(0, _extToastCount) 315 | .remove(); 316 | }; 317 | 318 | } 319 | 320 | this._container = _container; 321 | }, 322 | 323 | canAutoHide: function() { 324 | return (this.options.hideAfter !== false) && !isNaN( 325 | parseInt(this.options.hideAfter, 10) 326 | ); 327 | }, 328 | 329 | processLoader: function() { 330 | // Show the loader only, if auto-hide is on and loader is demanded 331 | if (!this.canAutoHide() || this.options.loader === false) { 332 | return false; 333 | } 334 | 335 | var loader = this 336 | ._toastEl 337 | .find('.jq-notifikasi-loader'); 338 | 339 | // 400 is the default time that jquery uses for fade/slide Divide by 1000 for 340 | // milliseconds to seconds conversion 341 | var transitionTime = (this.options.hideAfter - 400) / 1000 + 's'; 342 | var loaderBg = this.options.loaderBg; 343 | 344 | var style = loader.attr('style') || ''; 345 | style = style.substring(0, style.indexOf('-webkit-transition')); // Remove the last transition definition 346 | 347 | style += '-webkit-transition: width ' + transitionTime + ' ease-in; \ 348 | ' + 349 | ' -o-transition: width ' + transitionTime + ' ease-in; \ 350 | ' + 351 | ' transition: width ' + transitionTime + ' ease-in; \ 352 | b' + 353 | 'ackground-color: ' + loaderBg + ';'; 354 | 355 | loader 356 | .attr('style', style) 357 | .addClass('jq-notifikasi-loaded'); 358 | }, 359 | 360 | animate: function() { 361 | 362 | var that = this; 363 | 364 | this 365 | ._toastEl 366 | .hide(); 367 | 368 | this 369 | ._toastEl 370 | .trigger('beforeShow'); 371 | 372 | if (this.options.transisi.toLowerCase() === 'fade') { 373 | this 374 | ._toastEl 375 | .fadeIn(function() { 376 | that 377 | ._toastEl 378 | .trigger('afterShown'); 379 | }); 380 | } else if (this.options.transisi.toLowerCase() === 'slide') { 381 | this 382 | ._toastEl 383 | .slideDown(function() { 384 | that 385 | ._toastEl 386 | .trigger('afterShown'); 387 | }); 388 | } else { 389 | this 390 | ._toastEl 391 | .show(function() { 392 | that 393 | ._toastEl 394 | .trigger('afterShown'); 395 | }); 396 | } 397 | 398 | if (this.canAutoHide()) { 399 | 400 | var that = this; 401 | 402 | window.setTimeout(function() { 403 | 404 | if (that.options.transisi.toLowerCase() === 'fade') { 405 | that 406 | ._toastEl 407 | .trigger('beforeHide'); 408 | that 409 | ._toastEl 410 | .fadeOut(function() { 411 | that 412 | ._toastEl 413 | .trigger('afterHidden'); 414 | }); 415 | } else if (that.options.transisi.toLowerCase() === 'slide') { 416 | that 417 | ._toastEl 418 | .trigger('beforeHide'); 419 | that 420 | ._toastEl 421 | .slideUp(function() { 422 | that 423 | ._toastEl 424 | .trigger('afterHidden'); 425 | }); 426 | } else { 427 | that 428 | ._toastEl 429 | .trigger('beforeHide'); 430 | that 431 | ._toastEl 432 | .hide(function() { 433 | that 434 | ._toastEl 435 | .trigger('afterHidden'); 436 | }); 437 | } 438 | 439 | }, this.options.hideAfter); 440 | }; 441 | }, 442 | 443 | reset: function(resetWhat) { 444 | 445 | if (resetWhat === 'all') { 446 | $('.jq-notifikasi-wrap').remove(); 447 | } else { 448 | this 449 | ._toastEl 450 | .remove(); 451 | } 452 | 453 | }, 454 | 455 | update: function(options) { 456 | this.prepareOptions(options, this.options); 457 | this.setup(); 458 | this.bindToast(); 459 | } 460 | }; 461 | 462 | $.notifikasi = function(options) { 463 | var toast = Object.create(Toast); 464 | toast.init(options, this); 465 | 466 | return { 467 | 468 | reset: function(what) { 469 | toast.reset(what); 470 | }, 471 | 472 | update: function(options) { 473 | toast.update(options); 474 | } 475 | } 476 | }; 477 | 478 | $.notifikasi.options = { 479 | text: '', 480 | judulnotifikasi: '', 481 | transisi: 'fade', 482 | AutoTutup: true, 483 | hideAfter: 3000, 484 | loader: true, 485 | loaderBg: '#9EC600', 486 | stack: 5, 487 | posisi: 'bottom-left', 488 | bgColor: false, 489 | textColor: false, 490 | textAlign: 'left', 491 | ikon: false, 492 | beforeShow: function() {}, 493 | afterShown: function() {}, 494 | beforeHide: function() {}, 495 | afterHidden: function() {} 496 | }; 497 | 498 | })(jQuery, window, document); 499 | --------------------------------------------------------------------------------