Skip to content
Permalink
Browse files

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

…gress with #260
  • Loading branch information...
thednp committed Jan 9, 2019
1 parent ac6a6e0 commit 1d797a2ba7896758378f92f3d20172183c68f152
Showing with 158 additions and 19 deletions.
  1. +119 −17 dist/bootstrap-native-v4.js
  2. +1 −1 dist/bootstrap-native-v4.min.js
  3. +2 −0 lib/V4/utils.js
  4. +36 −1 v4.html
@@ -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
};
}));
Oops, something went wrong.

0 comments on commit 1d797a2

Please sign in to comment.
You can’t perform that action at this time.