WordPress theme about sweetalert2-themes HOT 4 CLOSED

Hi @limonte,

I'll work on a PR this week. Finally found the time. I'll probably have some questions but hopefully not many.

One question that doesn't seem possible, can a theme define default JS settings? For example, the default animation class if none is set (WordPress fades in from the bottom).

I'll share some code here as well in case someone ends up here looking how to make it look right inside WordPress. For the offset question above, it looks like I will use something like this (the left nav panel can be dynamic, so it should calculate each time):

this.notify = Swal.mixin({
	toast: true,
	position: 'rtl' === document.dir ? 'bottom-end' : 'bottom-start',
	showConfirmButton: false,
	timer: 3000,
	onBeforeOpen: (toast) => {
		
		// Offset the toast message based on the admin menu width
		let dir = 'rtl' === document.dir ? 'right' : 'left'
		toast.parentElement.style[dir] = document.getElementById('adminmenu').offsetWidth + 'px'
	}
})

from sweetalert2-themes.

I'll work on a PR this week. Finally found the time. I'll probably have some questions but hopefully not many.

I'm here to answer any of your questions!

One question that doesn't seem possible, can a theme define default JS settings? For example, the default animation class if none is set (WordPress fades in from the bottom).

Yes, just redefine $swal2-show-animation and $swal2-hide-animation variables, we did the same in Bootstrap theme: https://github.com/sweetalert2/sweetalert2-themes/blob/master/bootstrap-4/bootstrap-4.scss#L169

You can find the list of all SCSS vriables here: https://github.com/sweetalert2/sweetalert2/blob/master/src/variables.scss

For the offset question above, it looks like I will use something like this (the left nav panel can be dynamic, so it should calculate each time):

Yup, exactly. Except this line isn't needed:

position: 'rtl' === document.dir ? 'bottom-end' : 'bottom-start',

start and end are handled with the document direction in mind.

from sweetalert2-themes.

Hey @KevinBatdorf and thank you for opening this request!

WordPress has toast style notifications now that might be a useful theme to some. I can probably work on this if there is interest.

Totally agree. It looks quite similar to the existing Dark theme, take a look at its implementation: https://github.com/sweetalert2/sweetalert2-themes/blob/master/dark/dark.scss

Here's how to start a new theme: https://github.com/sweetalert2/sweetalert2-themes#contributing

Let me know if you're willing to send a PR.

Also, is it possible to provide a dynamic offset like in this photo?

This can be achieved by using customClass with a class with desired margins, something like this:

Swal.fire({
  ...
  position: 'bottom-left',
  customClass: {
    container: 'offset-left' 
  }
})

.offset-left {
  margn-left: 200px;
}

from sweetalert2-themes.

🎉 This issue has been resolved in version 3.1.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

from sweetalert2-themes.