upkeep.

README.md

@@ -36,6 +36,11 @@ Bert hit the gym since v1.0 came out and has dropped some fat and put on a bit o
 
 Despite having totally ripped abs now—and aside from the changes to defaults mentioned above—Bert's API is 100% backwards compatible. Bert doesn't forget where he came from. Represent.
 
+
+#### Changes & Deprecations in v3.x
+Bert has shed `jQuery`. Bert is now using a [Bootstrap Icons](https://github.com/twbs/icons) for it's default icons. Don't forget to add them as a dependency. [Instructions for installation are found here](https://icons.getbootstrap.com/#install)
+
+
 #### Basic Usage
 There are two ways to display messages with Bert. The classic way, passing a message, type, and style:
 
@@ -51,14 +56,14 @@ Bert.alert({
   message: 'Ernie — Rubber Duckie',
   type: 'info',
   style: 'growl-top-right',
-  icon: 'fas fa-music'
+  icon: 'bi bi-music-note-beamed'
 });
 ```
 
 It's important to point out that the Classic version has also picked up support for adding an icon, but requires that you specify all arguments before it:
 
 ```
-Bert.alert( 'Ernie, pick up your rubber duckies, now!', 'danger', 'fixed-top', 'fas fa-frown-open' );
+Bert.alert( 'Ernie, pick up your rubber duckies, now!', 'danger', 'fixed-top', 'bi bi-emoji-frown' );
 ```
 
 #### API & Defaults
@@ -82,11 +87,11 @@ Bert wants to make sure that your users know how angry (or happy) he is about wh
 
 
 - `Bert.icons` (based on the type passed to Bert)
-  - `default`: `'fas fa-bell'`,
-  - `success`: `'fas fa-check'`,
-  - `info`: `'fas fa-info'`,
-  - `warning`: `'fas fa-exclamation-triangle'`,
-  - `danger`: `'fas fa-times'`
+  - `default`: `'bi bi-bell'`,
+  - `success`: `'bi bi-check'`,
+  - `info`: `'bi bi-info'`,
+  - `warning`: `'bi bi-exclamation-triangle'`,
+  - `danger`: `'bi bi-x'`
 
 If you'd like (recommended), you can set any of the values above as defaults, along with a few other settings:
 
@@ -101,7 +106,7 @@ Bert.defaults = {
   // Accepts: default, success, info, warning, danger.
 };
 ```
-To add new types and styles, you can call `Bert.types.push( '<type>' )` or `Bert.styles.push( '<style>' )` from anywhere on the client. To change the icon used for one of the pre-defined types, you can call `Bert.icons.<type> = 'fas fa-icon-name'`, or add a new one by calling `Bert.icons[ 'new-type' ] = 'fas fa-icon-name'`. **Heads up**: The `fas` part is defining which sub-library of FontAwesome you're using (solid, regular, and light). Again, Bert _DOES NOT_ load FontAwesome for you, so which classes you use will be dependent on which version of the library you load on your own.
+To add new types and styles, you can call `Bert.types.push( '<type>' )` or `Bert.styles.push( '<style>' )` from anywhere on the client. To change the icon used for one of the pre-defined types, you can call `Bert.icons.<type> = 'bi bi-icon-name'`, or add a new one by calling `Bert.icons[ 'new-type' ] = 'bi bi-icon-name'`. **Heads up**: The `fas` part is defining which sub-library of FontAwesome you're using (solid, regular, and light). Again, Bert _DOES NOT_ load FontAwesome for you, so which classes you use will be dependent on which version of the library you load on your own.
 
 To set a new default, just call `Bert.defaults.<setting>` in your client code. For example, to change Bert's hide delay (how long Bert stays on screen), you can set `Bert.defaults.hideDelay = 2000`. Here, this would make Bert's alerts go away after two seconds instead of three and a half.
 
@@ -145,7 +150,7 @@ Bert.alert({
   style: 'growl-bottom-right',
   title: 'Game Added',
   message: 'Final Fantasy VII',
-  icon: 'fas fa-gamepad'
+  icon: 'bi bi-controller'
 });
 ```
 The value of `type` simply gets added to Bert as a CSS class, so we can tweak the colors just by adding a little CSS on the client:

bert.js

@@ -1,3 +1,11 @@
+/**
+ * Set a timer to delay execution of subsequent items
+ * @param {number} ms
+ */
+function delay(ms) {
+  return new Promise(resolve => setTimeout(resolve, ms));
+}
+
 class BertAlert {
   constructor() {
     this.styles = [
@@ -17,12 +25,13 @@ class BertAlert {
       'danger'
     ];
 
+
     this.icons = {
-      default: 'fas fa-bell',
-      success: 'fas fa-check',
-      info: 'fas fa-info',
-      warning: 'fas fa-exclamation-triangle',
-      danger: 'fas fa-times'
+      default: 'bi bi-bell',
+      success: 'bi bi-check',
+      info: 'bi bi-info',
+      warning: 'bi bi-exclamation-triangle',
+      danger: 'bi bi-x'
     };
 
     this.defaults = {
@@ -42,7 +51,9 @@ class BertAlert {
   }
 
   isVisible() {
-    return $( '.bert-alert' ).hasClass( 'show' );
+    // return $( '.bert-alert' ).hasClass( 'show' );
+    const el = document.getElementsByClassName('bert-alert')[0];
+    return el.classList.contains('show');
   }
 
   handleAlert( alert ) {
@@ -53,8 +64,12 @@ class BertAlert {
   }
 
   registerClickHandler() {
-    $( '.bert-alert' ).off( 'click' );
-    $( '.bert-alert' ).on( 'click', () => { this.hide(); } );
+
+    // $( '.bert-alert' ).off( 'click' );
+    // $( '.bert-alert' ).on( 'click', () => { this.hide(); } );
+    const el = document.getElementsByClassName('bert-alert')[0];
+    el.removeEventListener('click', () => {});
+    el.addEventListener('click', () => { this.hide(); } );
   }
 
   bertTimer() {
@@ -64,18 +79,34 @@ class BertAlert {
   }
 
   show() {
-    $( '.bert-alert' ).addClass( 'show' ).delay( 25 ).queue( () => {
-      $( '.bert-alert' ).addClass( 'animate' ).dequeue();
-    });
+    // $( '.bert-alert' ).addClass( 'show' ).delay( 25 ).queue( () => {
+    //   $( '.bert-alert' ).addClass( 'animate' ).dequeue();
+    // });
+
+    const el = document.getElementsByClassName('bert-alert')[0];
+    el.classList.add('show');
+    delay(25).then(() => el.classList.add('animate'))
   }
 
   hide() {
-    $( '.bert-alert' ).removeClass( 'animate' );
-    setTimeout( () => {
-      $( '.bert-alert' ).removeClass( 'show' );
-      $( '.bert-icon').remove();
+    // $( '.bert-alert' ).removeClass( 'animate' );
+    // setTimeout( () => {
+    //   $( '.bert-alert' ).removeClass( 'show' );
+    //   $( '.bert-icon').remove();
+    //   Session.set( 'bertAlert', null );
+    // }, 300 );
+    const el = document.getElementsByClassName('bert-alert')[0];
+    el.classList.remove('animate');
+    delay(300).then(() => {
+      el.classList.remove('show');
+      const el2 = document.getElementsByClassName('bert-icon')[0];
+      if (el2.parentNode !== null) {
+        el2.parentNode.removeChild(el2);
+      }
       Session.set( 'bertAlert', null );
-    }, 300 );
+    })
+
+
   }
 
   setBertOnSession( alert ) {

package.js

@@ -1,16 +1,16 @@
 Package.describe({
   name: "themeteorchef:bert",
-  version: "2.2.2",
+  version: "3.0.0",
   summary: "A client side, multi-style alerts system for Meteor.",
   git: "http://github.com/themeteorchef/bert",
   documentation: "README.md",
 });
 
 Package.onUse(function (api) {
-  api.versionsFrom("1.2.0.2");
+  api.versionsFrom("2.6");
 
   api.use(
-    ["ecmascript", "templating", "session", "jquery", "fourseven:scss@4.12.0"],
+    ["ecmascript", "templating", "session", "fourseven:scss@4.15.0"],
     "client"
   );
 

tests/client.js

@@ -122,10 +122,10 @@ Tinytest.addAsync( 'Bert can set a growl-bottom-right message', function ( test,
 });
 
 Tinytest.addAsync( 'Bert can set a custom icon', function ( test, next ) {
-  Bert.alert( 'Testing 123', 'default', 'fixed-top', 'fa-amazon' );
+  Bert.alert( 'Testing 123', 'default', 'fixed-top', 'bi bi-balloon' );
 
   Meteor.setTimeout( function() {
-    var hasClass = $( '.bert-alert i' ).hasClass( 'fa-amazon' );
+    var hasClass = $( '.bert-alert i' ).hasClass( 'bi bi-balloon' );
     test.equal( hasClass, true );
     next();
   }, 500 );
@@ -137,7 +137,7 @@ Tinytest.addAsync( 'Bert can set a complex message', function ( test, next ) {
     message: 'Artist — Song Name',
     type: 'info',
     style: 'growl-top-right',
-    icon: 'fa-music'
+    icon: 'bi bi-music-note-beamed'
   });
 
   Meteor.setTimeout( function() {
@@ -146,7 +146,7 @@ Tinytest.addAsync( 'Bert can set a complex message', function ( test, next ) {
       message: $( '.bert-alert .bert-content p' ).text(),
       type: $( '.bert-alert' ).hasClass( 'info' ),
       style: $( '.bert-alert' ).hasClass( 'growl-top-right' ),
-      icon: $( '.bert-alert i' ).hasClass( 'fa-music' )
+      icon: $( '.bert-alert i' ).hasClass( 'bi bi-music-note-beamed' )
     };
 
     test.equal( alert.title, 'Now Playing' );