Adding a beta version of new component **TOAST**, check details & pro…

…gress with #260
thednp · Jan 9, 2019 · f9858f1 · f9858f1
1 parent cb2501a
commit f9858f1
Show file tree

Hide file tree

Showing 3 changed files with 156 additions and 19 deletions.
diff --git a/dist/bootstrap-native-v4.js b/dist/bootstrap-native-v4.js
@@ -18,6 +18,7 @@
     root.Popover = bsn.Popover;
     root.ScrollSpy = bsn.ScrollSpy;
     root.Tab = bsn.Tab;
+    root.Toast = bsn.Toast;
     root.Tooltip = bsn.Tooltip;
   }
 }(this, function () {
@@ -51,8 +52,10 @@
     stringScrollSpy = 'ScrollSpy',
     stringTab       = 'Tab',
     stringTooltip   = 'Tooltip',
+    stringToast     = 'Toast',
 
     // options DATA API
+    dataAutohide      = 'data-autohide',
     databackdrop      = 'data-backdrop',
     dataKeyboard      = 'data-keyboard',
     dataTarget        = 'data-target',
@@ -1623,6 +1626,104 @@
   supports[push]( [ stringTab, Tab, '['+dataToggle+'="tab"]' ] );
 
 
+  /* Native Javascript for Bootstrap 4 | Toast
+  ---------------------------------------------*/
+
+  // TOAST DEFINITION
+  // ==================
+  var Toast = function( element,options ) {
+
+    // initialization element
+    element = queryElement(element);
+
+    // set options
+    options = options || {};
+
+    // DATA API
+    var animationData = element[getAttribute](dataAnimation),
+        autohideData = element[getAttribute](dataAutohide),
+        delayData = element[getAttribute](dataDelay),
+
+        // strings
+        component = 'toast',
+        autohide = 'autohide',
+        animation = 'animation',
+        showing = 'showing',
+        hide = 'hide',
+        fade = 'fade';
+
+    // set instance options
+    this[animation] = options[animation] === false || animationData === 'false' ? 0 : 1; // true by default
+    this[autohide] = options[autohide] === false || autohideData === 'false' ? 0 : 1; // true by default
+    this[delay] = parseInt(options[delay] || delayData) || 500; // 500ms default
+
+    // bind,toast and timer
+    var self = this, timer = 0,
+        // get the toast element
+        toast = getClosest(element,'.toast');
+
+    // private methods
+    // animation complete
+    var showComplete = function() {
+        removeClass( toast, showing );
+        addClass( toast, showClass );
+        bootstrapCustomEvent.call(toast, shownEvent, component);
+        if (self[autohide]) { self.hide(); }
+      },
+      hideComplete = function() {
+        addClass( toast, hide );
+        bootstrapCustomEvent.call(toast, hiddenEvent, component);
+      },
+      close = function() {
+        removeClass( toast,showClass );
+        self[animation] ? emulateTransitionEnd(toast, hideComplete) : hideComplete();
+      };
+
+    // public methods
+    this.show = function() {
+      if (toast) {
+        bootstrapCustomEvent.call(toast, showEvent, component);
+        self[animation] && addClass( toast,fade );
+        removeClass( toast,hide);
+        addClass( toast,showing);
+
+        self[animation] ? emulateTransitionEnd(toast, showComplete) : showComplete();
+      }
+    };
+    this.hide = function(noTimer) {
+      if (toast && hasClass(toast,showClass)) {
+        bootstrapCustomEvent.call(toast, hideEvent, component);
+
+        if (noTimer) {
+          close();
+        } else {
+          timer = setTimeout( close, self[delay]);
+        }
+      }
+    };
+    this.dispose = function() {
+      clearTimeout(timer); timer = null;
+      if ( toast && hasClass(toast,showClass) ) {
+        removeClass( toast,showClass );
+      }
+      off(element, clickEvent, self.hide);
+      element[stringToast] = null;
+      element = null;
+      toast = null;
+    };
+
+    // init
+    if ( !(stringToast in element) ) { // prevent adding event handlers twice
+      on(element, clickEvent, self.hide);
+    }
+    element[stringToast] = self;
+  };
+
+  // TOAST DATA API
+  // =================
+  supports[push]( [ stringToast, Toast, '['+dataDismiss+'="toast"]' ] );
+
+
   /* Native Javascript for Bootstrap 4 | Tooltip
   ---------------------------------------------*/
 
@@ -1761,23 +1862,23 @@
   supports[push]( [ stringTooltip, Tooltip, '['+dataToggle+'="tooltip"]' ] );
 
 
-
-  /* Native Javascript for Bootstrap 4 | Initialize Data API
-  --------------------------------------------------------*/
-  var initializeDataAPI = function( constructor, collection ){
-      for (var i=0, l=collection[length]; i<l; i++) {
-        new constructor(collection[i]);
-      }
-    },
-    initCallback = BSN.initCallback = function(lookUp){
-      lookUp = lookUp || DOC;
-      for (var i=0, l=supports[length]; i<l; i++) {
-        initializeDataAPI( supports[i][1], lookUp[querySelectorAll] (supports[i][2]) );
-      }
-    };
-
-  // bulk initialize all components
-  DOC[body] ? initCallback() : on( DOC, 'DOMContentLoaded', function(){ initCallback(); } );
+
+  /* Native Javascript for Bootstrap 4 | Initialize Data API
+  --------------------------------------------------------*/
+  var initializeDataAPI = function( constructor, collection ){
+      for (var i=0, l=collection[length]; i<l; i++) {
+        new constructor(collection[i]);
+      }
+    },
+    initCallback = BSN.initCallback = function(lookUp){
+      lookUp = lookUp || DOC;
+      for (var i=0, l=supports[length]; i<l; i++) {
+        initializeDataAPI( supports[i][1], lookUp[querySelectorAll] (supports[i][2]) );
+      }
+    };
+
+  // bulk initialize all components
+  DOC[body] ? initCallback() : on( DOC, 'DOMContentLoaded', function(){ initCallback(); } );
 
   return {
     Alert: Alert,
@@ -1789,6 +1890,7 @@
     Popover: Popover,
     ScrollSpy: ScrollSpy,
     Tab: Tab,
+    Toast: Toast,
     Tooltip: Tooltip
   };
 }));