Replace sweetalert with alertify

gulpfile.js

@@ -35,7 +35,6 @@ elixir(function (mix) {
       'resources/assets/css/**/*.css',
       'node_modules/font-awesome/css/font-awesome.min.css',
       'node_modules/rangeslider.js/dist/rangeslider.css',
-      'node_modules/sweetalert/dist/sweetalert.css'
     ], 'public/css/vendors.css', './');
 
   mix.version(['css/vendors.css', 'css/app.css', 'js/vendors.js', 'js/main.js']);

package.json

@@ -14,6 +14,7 @@
     "url": "https://github.com/phanan/koel"
   },
   "dependencies": {
+    "alertify.js": "^1.0.12",
     "babel-plugin-lodash": "^2.2.1",
     "babel-plugin-transform-runtime": "^6.3.13",
     "babel-polyfill": "^6.9.1",
@@ -39,7 +40,6 @@
     "rangeslider.js": "^2.2.1",
     "select": "^1.0.6",
     "sinon": "^1.17.2",
-    "sweetalert": "^1.1.3",
     "vue": "^2.0.1",
     "vue-hot-reload-api": "^1.3.2",
     "vueify": "^9.1.0",

resources/assets/js/components/main-wrapper/main-content/playlist.vue

@@ -37,9 +37,7 @@
 </template>
 
 <script>
-import swal from 'sweetalert'
-
-import { pluralize, event } from '../../../utils'
+import { pluralize, event, alerts } from '../../../utils'
 import { playlistStore, sharedStore } from '../../../stores'
 import { playback, download } from '../../../services'
 import router from '../../../router'
@@ -94,13 +92,7 @@ export default {
         return
       }
 
-      swal({
-        title: 'Are you sure?',
-        text: 'Once it’s gone, it’s gone, and there’s no turning back.',
-        type: 'warning',
-        showCancelButton: true,
-        confirmButtonText: 'Yes, go ahead'
-      }, this.del)
+      alerts.confirm('Are you sure? This is a one-way street!', this.del)
     },
 
     /**

resources/assets/js/components/main-wrapper/main-content/profile.vue

@@ -105,7 +105,6 @@
 
 <script>
 import $ from 'jquery'
-import swal from 'sweetalert'
 
 import { userStore, preferenceStore, sharedStore } from '../../../stores'
 import { forceReloadWindow } from '../../../utils'
@@ -139,13 +138,6 @@ export default {
       userStore.updateProfile(this.pwd).then(() => {
         this.pwd = ''
         this.confirmPwd = ''
-
-        swal({
-          title: 'Done!',
-          text: 'Profile saved.',
-          type: 'success',
-          allowOutsideClick: true
-        })
       })
     },
 

resources/assets/js/components/main-wrapper/main-content/settings.vue

@@ -24,10 +24,8 @@
 </template>
 
 <script>
-import swal from 'sweetalert'
-
 import { settingStore, sharedStore } from '../../../stores'
-import { parseValidationError, forceReloadWindow, showOverlay, hideOverlay } from '../../../utils'
+import { parseValidationError, forceReloadWindow, showOverlay, hideOverlay, alerts } from '../../../utils'
 import router from '../../../router'
 
 export default {
@@ -54,15 +52,8 @@ export default {
   methods: {
     confirmThenSave () {
       if (this.shouldWarn) {
-        swal({
-          title: 'Be careful!',
-          text: 'Changing the media path will essentially remove all existing data – songs, artists, \
-          albums, favorites, everything – and empty your playlists!',
-          type: 'warning',
-          showCancelButton: true,
-          confirmButtonText: 'I know. Go ahead.',
-          confirmButtonColor: '#c34848'
-        }, this.save)
+        alerts.confirm('Warning: Changing the media path will essentially remove all existing data – songs, artists, \
+          albums, favorites, everything – and empty your playlists! Sure you want to proceed?', this.save)
       } else {
         this.save()
       }
@@ -86,13 +77,7 @@ export default {
         }
 
         hideOverlay()
-
-        swal({
-          title: 'Something went wrong',
-          text: msg,
-          type: 'error',
-          allowOutsideClick: true
-        })
+        alerts.error(msg)
       })
     }
   }

resources/assets/js/components/shared/user-item.vue

@@ -23,10 +23,9 @@
 </template>
 
 <script>
-import swal from 'sweetalert'
-
 import { userStore } from '../../stores'
 import router from '../../router'
+import { alerts } from '../../utils'
 
 export default {
   props: ['user'],
@@ -67,14 +66,7 @@ export default {
      * Kill off the freaking user.
      */
     del () {
-      swal({
-        title: 'Hey…',
-        text: `You’re about to unperson ${this.user.name}. Are you sure?`,
-        type: 'warning',
-        showCancelButton: true,
-        confirmButtonText: 'Certainly',
-        cancelButtonText: 'Oops'
-      }, () => {
+      alerts.confirm(`You’re about to unperson ${this.user.name}. Are you sure?`, () => {
         userStore.destroy(this.user).then(() => {
           this.$destroy(true)
         })

resources/assets/js/stores/favorite.js

@@ -2,6 +2,7 @@ import { each, map, difference, union } from 'lodash'
 import NProgress from 'nprogress'
 
 import { http } from '../services'
+import { alerts } from '../utils'
 
 export const favoriteStore = {
   state: {
@@ -43,7 +44,10 @@ export const favoriteStore = {
     NProgress.start()
 
     return new Promise((resolve, reject) => {
-      http.post('interaction/like', { song: song.id }, data => resolve(data), r => reject(r))
+      http.post('interaction/like', { song: song.id }, data => {
+        // We don't really need to notify just for one song.
+        resolve(data)
+      }, r => reject(r))
     })
   },
 
@@ -88,7 +92,10 @@ export const favoriteStore = {
     NProgress.start()
 
     return new Promise((resolve, reject) => {
-      http.post('interaction/batch/like', { songs: map(songs, 'id') }, data => resolve(data), r => reject(r))
+      http.post('interaction/batch/like', { songs: map(songs, 'id') }, data => {
+        alerts.success(`Added ${songs.length} song${songs.length === 1 ? '' : 's'} into Favorites.`)
+        resolve(data)
+      }, r => reject(r))
     })
   },
 
@@ -106,7 +113,10 @@ export const favoriteStore = {
     NProgress.start()
 
     return new Promise((resolve, reject) => {
-      http.post('interaction/batch/unlike', { songs: map(songs, 'id') }, data => resolve(data), r => reject(r))
+      http.post('interaction/batch/unlike', { songs: map(songs, 'id') }, data => {
+        alerts.success(`Removed ${songs.length} song${songs.length === 1 ? '' : 's'} from Favorites.`)
+        resolve(data)
+      }, r => reject(r))
     })
   }
 }

resources/assets/js/stores/playlist.js

@@ -3,6 +3,7 @@ import NProgress from 'nprogress'
 
 import stub from '../stubs/playlist'
 import { http } from '../services'
+import { alerts } from '../utils'
 import { songStore } from '.'
 
 export const playlistStore = {
@@ -104,6 +105,7 @@ export const playlistStore = {
         playlist.songs = songs
         this.objectifySongs(playlist)
         this.add(playlist)
+        alerts.success(`Created playlist "${playlist.name}".`)
         resolve(playlist)
       }, r => reject(r))
     })
@@ -120,6 +122,7 @@ export const playlistStore = {
     return new Promise((resolve, reject) => {
       http.delete(`playlist/${playlist.id}`, {}, data => {
         this.remove(playlist)
+        alerts.success(`Deleted playlist "${playlist.name}".`)
         resolve(data)
       }, r => reject(r))
     })
@@ -132,8 +135,6 @@ export const playlistStore = {
    * @param {Array.<Object>}  songs
    */
   addSongs (playlist, songs) {
-    NProgress.start()
-
     return new Promise((resolve, reject) => {
       const count = playlist.songs.length
       playlist.songs = union(playlist.songs, songs)
@@ -143,8 +144,13 @@ export const playlistStore = {
         return
       }
 
+      NProgress.start()
+
       http.put(`playlist/${playlist.id}/sync`, { songs: map(playlist.songs, 'id') },
-        data => resolve(playlist),
+        data => {
+          alerts.success(`Added ${songs.length} song${songs.length === 1 ? '' : 's'} into &quot;${playlist.name}&quot;.`)
+          resolve(playlist)
+        },
         r => reject(r)
       )
     })
@@ -163,7 +169,10 @@ export const playlistStore = {
 
     return new Promise((resolve, reject) => {
       http.put(`playlist/${playlist.id}/sync`, { songs: map(playlist.songs, 'id') },
-        data => resolve(playlist),
+        data => {
+          alerts.success(`Removed ${songs.length} song${songs.length === 1 ? '' : 's'} from &quot;${playlist.name}&quot;.`)
+          resolve(playlist)
+        },
         r => reject(r)
       )
     })

resources/assets/js/stores/setting.js

@@ -1,4 +1,5 @@
 import { http } from '../services'
+import { alerts } from '../utils'
 import stub from '../stubs/settings'
 
 export const settingStore = {
@@ -18,7 +19,10 @@ export const settingStore = {
 
   update () {
     return new Promise((resolve, reject) => {
-      http.post('settings', this.all, data => resolve(data), r => reject(r))
+      http.post('settings', this.all, data => {
+        alerts.success('Settings saved.')
+        resolve(data)
+      }, r => reject(r))
     })
   }
 }

resources/assets/js/stores/song.js

@@ -1,7 +1,7 @@
 import Vue from 'vue'
 import { without, map, take, remove, orderBy, each, union } from 'lodash'
 
-import { secondsToHis } from '../utils'
+import { secondsToHis, alerts } from '../utils'
 import { http, ls } from '../services'
 import { sharedStore, favoriteStore, albumStore, artistStore } from '.'
 import stub from '../stubs/song'
@@ -204,6 +204,7 @@ export const songStore = {
         songs: map(songs, 'id')
       }, songs => {
         each(songs, song => this.syncUpdatedSong(song))
+        alerts.success(`Updated ${songs.length} song${songs.length === 1 ? '' : 's'}.`)
         resolve(songs)
       }, r => reject(r))
     })

resources/assets/js/stores/user.js

@@ -4,6 +4,7 @@ import Vue from 'vue'
 import NProgress from 'nprogress'
 
 import { http } from '../services'
+import { alerts } from '../utils'
 import stub from '../stubs/user'
 
 export const userStore = {
@@ -132,6 +133,7 @@ export const userStore = {
         email: this.current.email
       }, () => {
         this.setAvatar()
+        alerts.success('Profile updated.')
         resolve(this.current)
       },
       r => reject(r))
@@ -152,6 +154,7 @@ export const userStore = {
       http.post('user', { name, email, password }, user => {
         this.setAvatar(user)
         this.all.unshift(user)
+        alerts.success(`New user "${name}" created.`)
         resolve(user)
       }, r => reject(r))
     })
@@ -174,6 +177,7 @@ export const userStore = {
         user.name = name
         user.email = email
         user.password = ''
+        alerts.success('User profile updated.')
         resolve(user)
       }, r => reject(r))
     })
@@ -190,6 +194,7 @@ export const userStore = {
     return new Promise((resolve, reject) => {
       http.delete(`user/${user.id}`, {}, data => {
         this.all = without(this.all, user)
+        alerts.success(`User "${user.name}" deleted.`)
 
         // Mama, just killed a man
         // Put a gun against his head

resources/assets/js/utils/alerts.js

@@ -0,0 +1,37 @@
+import alertify from 'alertify.js'
+
+const alerts = {
+  alert (msg) {
+    alertify.alert(msg)
+  },
+
+  confirm (msg, okFunc, cancelFunc = null) {
+    alertify.confirm(msg, okFunc, cancelFunc)
+  },
+
+  log (msg, type, cb = null) {
+    alertify.logPosition('top right')
+    alertify.closeLogOnClick(true)
+    switch (type) {
+      case 'success':
+        alertify.success(msg, cb)
+        break
+      case 'error':
+        alertify.error(msg, cb)
+        break
+      default:
+        alertify.log(msg, cb)
+        break
+    }
+  },
+
+  success (msg, cb = null) {
+    return this.log(msg, 'success', cb)
+  },
+
+  error (msg, cb = null) {
+    return this.log(msg, 'error', cb)
+  }
+}
+
+export { alerts }

resources/assets/js/utils/index.js

@@ -1,3 +1,4 @@
+export * from './alerts'
 export * from './filters'
 export * from './formatters'
 export * from './supports'

resources/assets/sass/app.scss

@@ -6,6 +6,6 @@
 
 @import "vendor/_plyr.scss";
 @import "vendor/_nprogress.scss";
-@import "vendor/_sweetalert.scss";
+@import "vendor/_alertify.scss";
 
 @import "partials/_shared.scss";

resources/assets/sass/vendor/_alertify.scss

@@ -0,0 +1,19 @@
+.alertify {
+  font-family: $fontFamily;
+  font-weight: $fontWeight_UltraThin;
+  background-color: rgba(0, 0, 0, .7);
+  z-index: 9999;
+
+  .dialog > div {
+    border-radius: 3px;
+  }
+}
+
+.alertify-logs {
+  font-family: $fontFamily;
+  font-weight: $fontWeight_UltraThin;
+
+  .show {
+    border-radius: 3px;
+  }
+}

resources/assets/sass/vendor/_sweetalert.scss

@@ -1,23 +0,0 @@
-.sweet-alert {
-  font-family: $fontFamily;
-
-  fieldset input {
-    display: none !important;
-  }
-
-  h2 {
-    font-weight: $fontWeight_UltraThin;
-  }
-
-  p {
-    font-size: 1.1rem;
-    line-height: 1.8rem;
-  }
-
-  button {
-    box-shadow: none !important;
-    font-family: $fontFamily;
-    font-weight: $fontWeight_Thin;
-    font-size: 1.1rem;
-  }
-}