├── LICENSE
├── README.md
└── src
├── 3hz2qvGHEaRVRD7fMHD2.css
├── JnC3tgADSagnwv7FrUJq.css
└── all.js
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2022 Devanka
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 | # NOTIPIN
2 | ### Ganti Alert, Confirm, & Prompt kamu menjadi lebih menarik versi Notipin!
3 | Sesuai keterangannya, notifin menghadirkan 3 jenis interaction box yang dapat digunakan. Yuk, simak cara pemakaiannya!
4 |
5 | ## DAFTAR ISI
6 | - [Instalasi](#instalasi)
7 | - [Cara Pakai](#penggunaan)
8 | - [Confirm](#confirm)
9 | - [Alert](#alert)
10 | - [Prompt](#prompt)
11 | - [File Input | ***NEW*** v1.25.10](#file-input)
12 | - [Custom Design](#kostumisasi-opsional)
13 | - [Custom Template](#template-warna-sendiri)
14 | - [Custom Fonts](#ganti-font-notipin)
15 | - [Fully Custom CSS](#full-mentahan-tanpa-css)
16 | - [Change Log](#change-log)
17 |
18 | ## INSTALASI
19 | > Terima kasih kepada mas [Frans Allen](https://github.com/fransallen) yang telah menyediakan [statically.io](https://statically.io/) untuk meng-*generate* CDN dari github.
20 |
21 | ### Versi: 1.26.00
22 |
23 | Letakkan tag script ini pada bagian sebelum penutup tag body
24 | ```html
25 |
26 | ```
27 | > Silakan update ke versi 1.26.00 jika menggunakan versi lama agar bisa menggunakan fitur-fitur terbaru dan mendapat perbaikan bug dari versi sebelum-sebelumnya.
28 | ## PENGGUNAAN
29 | Kita cukup gunakan interaksi yang akan dipakai.
30 | contoh: ```Notipin.Alert({msg: "Selamat Datang!"});```
31 | Tidak perlu menggunakan semua opsi, cukup pilih satu atau beberapa yang ingin dipakai seperti msg, type, mode atau yang lainnya.
32 | > Kapitalisasi juga berpengaruh ya.. Selamat mencoba!
33 |
34 | ***Khusus pengguna 1.26 ke atas, alert bisa menggunakan 1 parameter non object.***
35 | contoh: ```Notipin.Alert('Selamat Datang!');```
36 |
37 | > ### CONFIRM
38 | ```javascript
39 | Notipin.Confirm({
40 | msg: "TEKS KAMU DI SINI", // Pesan kamu
41 | yes: "OKE", // Tulisan di tombol 'Yes'
42 | no: "BATAL", // Tulisan di tombol 'No'
43 | onYes: () => { /* Kode di sini */ },
44 | onNo: () => { /* Kode di sini */ },
45 | type: "NORMAL",
46 | mode: "LIGHT",
47 | })
48 | /* keterangan:
49 | "msg" wajib digunakan
50 | "yes" tidak wajib - default tulisan: "OK"
51 | "no" tidak wajib - default tulisan: "CANCEL"
52 | "onYes & onNo" tidak wajib - default tidak terjadi apa-apa
53 | "type" tidak wajib - pilihan: normal, danger, info, blue - default normal
54 | "mode" tidak wajib - pilihan: light, dark - default light
55 | */
56 | ```
57 | > ### ALERT
58 | ```javascript
59 | Notipin.Alert({
60 | msg: "TEKS KAMU DI SINI", // Pesan kamu
61 | yes: "OKE", // Tulisan di tombol 'Yes'
62 | onYes: () => { /* Kode di sini */ },
63 | type: "NORMAL",
64 | mode: "LIGHT",
65 | })
66 | /* keterangan:
67 | "msg" wajib digunakan
68 | "yes" tidak wajib - default tulisan: "OK"
69 | "onYes" tidak wajib - default tidak terjadi apa-apa
70 | "type" tidak wajib - pilihan: normal, danger, info, blue - default normal
71 | "mode" tidak wajib - pilihan: light, dark - default light
72 | */
73 | ```
74 | > ### PROMPT
75 | ```javascript
76 | Notipin.Prompt({
77 | msg: "TEKS KAMU DI SINI", // Pesan kamu
78 | placeholder: "Tulis Sesuatu..",
79 | max: 0, // Maksimal karakter (integer)
80 | textarea: false, // tag element (boolean)
81 | yes: "OKE", // Tulisan di tombol 'Yes'
82 | no: "BATAL", // Tulisan di tombol 'No'
83 | onYes: (res) => { /* Kode di sini */ },
84 | onNo: (res) => { /* Kode di sini */ },
85 | type: "NORMAL",
86 | mode: "LIGHT",
87 | })
88 | /* keterangan:
89 | "msg" wajib digunakan
90 | "placeholder" tidak wajib - default: 'Type Here'
91 |
92 | "max" tidak wajib - default: 0 (unset/unlimited)
93 | - jika diisi, gunakan integer -
94 |
95 | "textarea" tidak wajib - pilihan: false, true
96 | - jika diisi, gunakan boolean -
97 | - false: akan menggunakan tag 'input' -
98 | - true: akan menggunakan tag 'textarea' -
99 |
100 | "yes" tidak wajib - default: "OK"
101 | "no" tidak wajib - default: "CANCEL"
102 |
103 | "onYes & onNo" tidak wajib - default tidak terjadi apa-apa
104 | - gunakan parameter untuk mengambil hasil isiannya -
105 | - contoh onYes: (res) => console.log(res) -
106 |
107 | "type" tidak wajib - pilihan: normal, danger, info, blue - default normal
108 | "mode" tidak wajib - pilihan: light, dark - default light
109 | */
110 | ```
111 | > ### FILE INPUT
112 | ```javascript
113 | Notipin.File({
114 | msg: "TEKS KAMU DI SINI", // Pesan kamu
115 | accept: "ALL", // Tipe File (ex: "image/*")
116 | yes: "OKE", // Tulisan di tombol 'Yes'
117 | no: "BATAL", // Tulisan di tombol 'No'
118 | onYes: (file) => { /* Kode di sini */ },
119 | onNo: (file) => { /* Kode di sini */ },
120 | type: "NORMAL",
121 | mode: "LIGHT",
122 | })
123 | /* keterangan:
124 | "msg" wajib digunakan
125 |
126 | "yes" tidak wajib - default: "OK"
127 | "no" tidak wajib - default: "CANCEL"
128 |
129 | "accept" tidak wajib - default: semua jenis file
130 | - tambahkan jika ingin menentukan tipe file
131 | - contoh: "image/*", "audio/*", atau tipe lain
132 |
133 | "onYes & onNo" tidak wajib - default tidak terjadi apa-apa
134 | - gunakan parameter untuk mengambil hasil filenya -
135 | - contoh..
136 | onYes: (file) => {
137 | upload(file);
138 | console.log("Berhasil Mengunggah " + file.name)
139 | }
140 |
141 | "type" tidak wajib - pilihan: normal, danger, info, blue - default normal
142 | "mode" tidak wajib - pilihan: light, dark - default light
143 | */
144 | ```
145 | ## KOSTUMISASI (OPSIONAL)
146 | > ### TEMPLATE WARNA SENDIRI
147 | > Setelah Meletakkan Script Instalasi, jalankan
148 | > ```javascript
149 | > Notipin.custom();
150 | > ```
151 | > Template ini bisa digunakan di dalam file css atau di dalam tag style:
152 | > ```css
153 | > :root {
154 | > --notifinBg: #warna;
155 | > --notifinBoxLight: #warna;
156 | > --notifinBoxDark: #warna;
157 | >
158 | > --notifinMainLightNormal: #warna;
159 | > --notifinMainLightDanger: #warna;
160 | > --notifinMainLightInfo: #warna;
161 | > --notifinMainLightBlue: #warna;
162 | >
163 | > --notifinMsgLight: #warna;
164 | > --notifinMsgDark: #warna;
165 | > --notifinBtnText: #warna;
166 | > --notifinBtnBgNo: #warna;
167 | >
168 | > --notifinSymbolNormal: #warna;
169 | > --notifinSymbolDanger: #warna;
170 | > --notifinSymbolInfo: #warna;
171 | > --notifinSymbolBlue: #warna;
172 | >
173 | > --notifinBtnAlert: #warna;
174 | > }
175 | > ```
176 |
177 | > ### FULL MENTAHAN TANPA CSS
178 | > Setelah Meletakkan Script Instalasi, jalankan
179 | > ```javascript
180 | > Notipin.fullCustom();
181 | > ```
182 | > Dengan begitu, kalian bisa bebas sesuka hati untuk mendesain setiap elementnya. Berikut list element yang ada di dalam Notipin beserta urutuannya:
183 | > ```scss
184 | > div.Notipin {
185 | > div.box {
186 | > div.symbol { }
187 | > div.msg { }
188 | > input { }
189 | > textarea { }
190 | > div.buttons {
191 | > div.btn.confirm.no { }
192 | > div.btn.confirm.yes { }
193 | > }
194 | > }
195 | > }
196 | > ```
197 |
198 | > ### GANTI FONT NOTIPIN
199 | > Jalankan setelah meletekan script instalasi:
200 | >
201 | > 1. Contoh Jika 1 Font
202 | > ```javascript
203 | > Notipin.font("Nama Font");
204 | > ```
205 | > 2. Contoh Jika Lebih Dari 1 Font
206 | > ```javascript
207 | > Notipin.font(["Font 1", "Font 2", "Font 3"]);
208 | > ```
209 | > Pastikan fontnya sudah diimport terlebih dahulu ya
210 |
211 | [SUBSCRIBE DEVANKA761 :V](https://www.youtube.com/c/RG761)
212 |
213 | My Other Projects:
214 | 1. [Font Awesome Pro](https://devanka761.github.io/font-awesome-pro)
215 | 2. [D-Audio (Custom Audio Tag Design)](https://github.com/devanka761/d-audio)
216 | 3. [Kirimin (Live Chat App)](https://github.com/devanka761/chat-app)
217 | 4. [Ucapin (Kartu Ucapan)](https://github.com/devanka761/ucapin)
218 | 5. [Notipin (Custom Alert, Confirm, Prompt)](https://github.com/devanka761/notipin)
219 |
220 | ## CHANGE LOG
221 | - v1.0.0 (No Longer Maintained)
222 | - First Creation of Custom Alert, Confirm, Prompt
223 | - First Feature of Customize Color Template
224 | - v1.21.04
225 | - Redesign All Type
226 | - Added Fully Customize CSS
227 | - Minor Bugs Fixed
228 | - v1.24.49
229 | - Added Custom Fonts
230 | - Use Callback on *onNo* function at Custom Prompt
231 | - Options to choose between textarea or input on Custom Prompt
232 | - Major & Minor Bugs Fixed
233 | - v1.25.10
234 | - Added Custom File Input
235 | - Optimize Mobile Friendly
236 | - Minor Bugs Fixed
237 | - v1.26.00
238 | - Alert is now working like default js's alert (without object)
239 | - Minor Bugs Fixed
240 | - Please request new features for upcoming update
--------------------------------------------------------------------------------
/src/3hz2qvGHEaRVRD7fMHD2.css:
--------------------------------------------------------------------------------
1 | .Notipin{z-index:10;position:fixed;top:0;right:0;bottom:0;left:0;background-color:var(--notifinBg);display:flex;justify-content:center;align-items:center}.Notipin .box{padding:25px;background-color:var(--notifinBoxLight);border-radius:10px;border:3px solid var(--notifinMainLightNormal);width:calc(90vw - (25px + 3px));max-width:300px;display:flex;flex-direction:column;align-items:center;justify-content:center;animation:popin 0.2s forwards}.Notipin.dark .box{background-color:var(--notifinBoxDark)}.Notipin .box.fade{animation:popout 0.3s forwards}.Notipin .box .symbol{font-size:72px;color:var(--notifinMainLightNormal)}.Notipin.dark .box .symbol{color:var(--notifinMsgDark)}.Notipin .box .msg{color:var(--notifinMsgLight);margin:20px 0;text-align:center}.Notipin.dark .box .msg{color:var(--notifinMsgDark)}.Notipin .box .field{width:100%;display:flex;margin:0}.Notipin .box .field input,.Notipin .box .field textarea{width:100%;margin:10px 5px;padding:10px;border:none;border-radius:5px;outline:none;background-color:white;color:var(--notifinMsgLight)}.Notipin .box textarea::-webkit-scrollbar{width:7px}.Notipin .box textarea::-webkit-scrollbar-track{background-color:var(--notifinMsgLight)}.Notipin .box textarea::-webkit-scrollbar-thumb{background-color:var(--notifinMsgDark)}.Notipin .box input{text-align:center}.Notipin .box textarea::placeholder{text-align:center}.Notipin .box textarea{resize:none;text-align:justify}.Notipin.dark .box input,.Notipin.dark .box textarea{background-color:black;color:var(--notifinMsgDark)}.Notipin .box .buttons{display:flex;width:100%;max-width:300px}.Notipin .box .buttons .btn{color:var(--notifinBtnText);padding:7px 0;border:none;border-radius:4px;font-weight:bold;width:100%;margin:0 5px;cursor:pointer}.Notipin .box .buttons .btn:hover{opacity:0.75}.Notipin .box .buttons .btn:active{transform:scale(0.95)}.Notipin .box .buttons .btn.no{background-color:var(--notifinBtnBgNo)}.Notipin .box .buttons .btn.confirm.yes{background-color:var(--notifinMainLightNormal)}.Notipin.danger .box{border:3px solid var(--notifinMainLightDanger)}.Notipin.danger .box .symbol{color:var(--notifinSymbolDanger)}.Notipin.danger .box .btn.confirm.yes{background-color:var(--notifinMainLightDanger)}.Notipin.info .box{border:3px solid var(--notifinMainLightInfo)}.Notipin.info .box .symbol{color:var(--notifinSymbolInfo)}.Notipin.info .box .btn.confirm.yes{background-color:var(--notifinMainLightInfo)}.Notipin.blue .box{border:3px solid var(--notifinMainLightBlue)}.Notipin.blue .box .symbol{color:var(--notifinSymbolBlue)}.Notipin.blue .box .btn.confirm.yes{background-color:var(--notifinMainLightBlue)}.Notipin .box .btn.alert.yes{background-color:var(--notifinBtnAlert)}@keyframes popin{0%{opacity:0;transform:scale(2)}100%{opacity:1;transform:scale(1)}}@keyframes popout{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(0)}}
--------------------------------------------------------------------------------
/src/JnC3tgADSagnwv7FrUJq.css:
--------------------------------------------------------------------------------
1 | :root{--notifinBg:transparent;--notifinBoxLight:#dedededd;--notifinBoxDark:#333333dd;--notifinMainLightNormal:#fa0;--notifinMainLightDanger:#d55;--notifinMainLightInfo:#8c8;--notifinMainLightBlue:#8ac;--notifinMsgLight:#2b2b2b;--notifinMsgDark:#eee;--notifinBtnText:#fff;--notifinBtnBgNo:#1a1a1a;--notifinSymbolNormal:#fa0;--notifinSymbolDanger:#fa0;--notifinSymbolInfo:#fa0;--notifinSymbolBlue:#8ac;--notifinBtnAlert:#1a1a1a}
--------------------------------------------------------------------------------
/src/all.js:
--------------------------------------------------------------------------------
1 | (function(r,o){const c=z,Y=r();while(!![]){try{const R=-parseInt(c(0x128))/(-0xe76+0x251e+0x78d*-0x3)*(parseInt(c(0xee))/(0x2e2*-0x9+0x206c+0x678*-0x1))+parseInt(c(0x11f))/(-0x281+0xb*0x21e+-0x14c6*0x1)*(parseInt(c(0x106))/(-0x845+-0x26d5+0x2f1e))+-parseInt(c(0xe8))/(-0x1*-0x17c7+0x18a9+-0x306b)*(parseInt(c(0x103))/(0xfd6+0x2*-0x2e4+-0xa08))+-parseInt(c(0x10a))/(0xc65+-0xd9c+0x2*0x9f)+-parseInt(c(0xf3))/(0x1d63*0x1+0x49*0x83+-0x2*0x215b)*(-parseInt(c(0x122))/(0xc76+0x1065+-0x1cd2))+parseInt(c(0x11a))/(-0x1b2+-0x104a+-0x1*-0x1206)*(-parseInt(c(0x10d))/(0x1372+0xc7*-0x2e+-0x105b*-0x1))+parseInt(c(0x12b))/(0x1*0x24f2+-0x52a*0x3+-0x224*0xa)*(parseInt(c(0xf5))/(0x2*0xaa6+-0x2be+0x1*-0x1281));if(R===o)break;else Y['push'](Y['shift']());}catch(t){Y['push'](Y['shift']());}}}(D,-0x11*-0x84ef+-0x81f76+0x53a21));function z(r,o){const Y=D();return z=function(R,t){R=R-(0x7*0x2c2+0x13c8+0x23f*-0x11);let m=Y[R];return m;},z(r,o);}const Notipin={'Confirm'(o){const f=z,Y={};Y[f(0xf8)]='',Y['yes']=f(0x10b),Y['no']='CANCEL',Y[f(0x12d)]='NORMAL',Y[f(0x107)]=f(0xe7),Y[f(0xf4)]=()=>{},Y[f(0x111)]=()=>{},o=Object['assign']({},Y,o);const R='\x0a\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20\x20