Skip to content

Commit

Permalink
Merge pull request #3 from danie-ramdhani/dev
Browse files Browse the repository at this point in the history 
Add marginWidth in options
  • Loading branch information
@danie-ramdhani
danie-ramdhani authored Mar 23, 2024
2 parents b140f65 + a2a3a21 commit 50e3887
Show file tree
Hide file tree
Showing 4 changed files with 41 additions and 18 deletions.
2 changes: 1 addition & 1 deletion dist/toast-notification.min.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

47 changes: 30 additions & 17 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,6 +95,7 @@
duration: event.detail.duration,
closeButton: event.detail.closeButton,
position: event.detail.position,
marginWidth: event.detail.marginWidth,
redirect: event.detail.redirect,
progressBar: event.detail.progressBar,
// root: document.getElementById("toast-container"),
Expand Down Expand Up @@ -129,47 +130,48 @@ <h1 class="mb-4 text-4xl font-bold capitalize">toast notification</h1>
progressBar: {},
position: {},
}
}"
x-init="()=>{
data.classList = 'text-black bg-gradient-to-t from-emerald-400 via-sky-100 to-cyan-300 dark:text-white dark:bg-gradient-to-tl dark:from-slate-600 dark:via-neutral-800 dark:to-stone-300';
data.icon = '🍞';
// data.duration = 5;
}"
class="flex flex-wrap gap-4"
>
<div
class="flex flex-col w-full gap-2 px-2 overflow-y-auto font-semibold capitalize max-h-96 md:w-5/12"
>
<label class="flex flex-col">
<span>class list</span>
<span class="text-xl underline">class list</span>
<input
type="text"
x-model="data.classList"
x-model.fill="data.classList"
value="text-black bg-gradient-to-t from-emerald-400 via-sky-100 to-cyan-300 dark:text-white dark:bg-gradient-to-tl dark:from-slate-600 dark:via-neutral-800 dark:to-stone-300"
placeholder="toast class list"
/>
</label>
<label class="flex flex-col">
<span>title</span>
<span class="text-xl underline">title</span>
<input
type="text"
x-model="data.title"
placeholder="title"
/>
</label>
<label class="flex flex-col">
<span>message</span>
<span class="text-xl underline">message</span>
<input
type="text"
x-model="data.message"
placeholder="message"
/>
</label>
<label class="flex flex-col">
<span>icon</span>
<input type="text" x-model="data.icon" placeholder="icon" />
<span class="text-xl underline">icon</span>
<input
type="text"
x-model.fill="data.icon"
value="🍞"
placeholder="icon"
/>
</label>
<label class="flex flex-col">
<span>duration (in seconds)</span>
<span class="text-xl underline">duration (in seconds)</span>
<input
type="number"
max="1000"
Expand All @@ -180,7 +182,7 @@ <h1 class="mb-4 text-4xl font-bold capitalize">toast notification</h1>
/>
</label>
<div>
<span>close button</span>
<span class="text-xl underline">close button</span>
<div class="flex flex-row gap-2">
<label class="flex flex-row items-center gap-1">
<input
Expand All @@ -202,22 +204,24 @@ <h1 class="mb-4 text-4xl font-bold capitalize">toast notification</h1>
</div>
<div class="flex flex-row flex-wrap w-full gap-2">
<label class="flex flex-col">
<span>position x</span>
<span class="text-xl underline">position x</span>
<select x-model="data.position.x">
<option value="right">right (default)</option>
<option value="center">center</option>
<option value="left">left</option>
</select>
</label>
<label class="flex flex-col">
<span>position y</span>
<span class="text-xl underline">position y</span>
<select x-model="data.position.y">
<option value="bottom">bottom (default)</option>
<option value="top">top</option>
</select>
</label>
<label class="flex flex-col">
<span>position z (z-index)</span>
<span class="text-xl underline"
>position z (z-index)</span
>
<input
type="number"
min="1"
Expand All @@ -226,6 +230,15 @@ <h1 class="mb-4 text-4xl font-bold capitalize">toast notification</h1>
/>
</label>
</div>
<label class="flex flex-col">
<span class="text-xl underline">Margin Width</span>
<input
type="text"
x-model.fill="data.marginWidth"
value="20px"
placeholder="Margin X"
/>
</label>
<div>
<span class="text-xl underline">redirect</span>
<div class="flex flex-row gap-2">
Expand Down Expand Up @@ -317,7 +330,7 @@ <h1 class="mb-4 text-4xl font-bold capitalize">toast notification</h1>
<h3 class="mb-4 text-xl">Generated code:</h3>
<code class="select-all">
<span class="block"
><span class="text-sky-400">var</span>
><span class="text-sky-400">const</span>
<span class="text-cyan-400"
>createToastNotification</span
>
Expand Down
5 changes: 5 additions & 0 deletions src/toast-notification.esm.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ export function ToastNotification() {
y: preferences.position && ['bottom', 'top'].includes(preferences.position.y) ? preferences.position.y : 'bottom',
z: preferences.position && preferences.position.z ? preferences.position.z : 50,
},
marginWidth: preferences.marginWidth,
redirect:
preferences.redirect && typeof preferences.redirect == 'string'
? preferences.redirect
Expand Down Expand Up @@ -131,6 +132,10 @@ export function ToastNotification() {
toastWrapper.style.transitionProperty = 'all';
toastWrapper.style.transitionTimingFunction = 'cubic-bezier(0.4, 0, 0.2, 1)';
toastWrapper.style.transitionDuration = `${transitionDuration}ms`;
if (options.marginWidth) {
toastWrapper.style.marginLeft = options.marginWidth;
toastWrapper.style.marginRight = options.marginWidth;
}
toastWrapper.appendChild(toastBody);

const createElement = () => {
Expand Down
5 changes: 5 additions & 0 deletions src/toast-notification.umd.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@
y: preferences.position && ['bottom', 'top'].includes(preferences.position.y) ? preferences.position.y : 'bottom',
z: preferences.position && preferences.position.z ? preferences.position.z : 50,
},
marginWidth: preferences.marginWidth,
redirect:
preferences.redirect && typeof preferences.redirect == 'string'
? preferences.redirect
Expand Down Expand Up @@ -142,6 +143,10 @@
toastWrapper.style.transitionProperty = 'all';
toastWrapper.style.transitionTimingFunction = 'cubic-bezier(0.4, 0, 0.2, 1)';
toastWrapper.style.transitionDuration = `${transitionDuration}ms`;
if (options.marginWidth) {
toastWrapper.style.marginLeft = options.marginWidth;
toastWrapper.style.marginRight = options.marginWidth;
}
toastWrapper.appendChild(toastBody);

const createElement = () => {
Expand Down

0 comments on commit 50e3887

Please sign in to comment.