Skip to content

Commit

Permalink
Merge pull request #139 from lubber-de/toast_enhancements
Browse files Browse the repository at this point in the history 
[Toast] Progressbar, closeEasing, Bugfixing, message support
  • Loading branch information
Sean authored Oct 10, 2018
2 parents b69ae5a + 91dff06 commit 409e533
Show file tree
Hide file tree
Showing 7 changed files with 392 additions and 51 deletions.
79 changes: 75 additions & 4 deletions dist/components/toast.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@
transform: translate(-50%, 0%);
top: 0.85714286em;
}

.ui.bottom.right.toast-container {
bottom: 0.85714286em;
right: 0.85714286em;
Expand Down Expand Up @@ -60,19 +61,45 @@
padding: 0.78571429em 1em;
margin: 0 0 6px;
color: rgba(255, 255, 255, 0.9);
opacity: 0.8;
}

.floating.toast,
.hoverfloating.toast:hover {
box-shadow: 0 2px 4px 0 rgba(34,36,38,.12), 0 2px 10px 0 rgba(34,36,38,.15);
}

.hoverfloating.message:hover {
box-shadow: 0px 0px 0px 1px rgba(34, 36, 38, 0.22) inset, 0px 2px 4px 0px rgba(34, 36, 38, 0.12), 0px 2px 10px 0px rgba(34, 36, 38, 0.15);
}

.toast-container .message {
display: flex !important;
}

.toast-container .compact.message {
width: 300px;
}

.toast-box .toast {
display: block;
}

.toast-container .message,
.toast:hover {
opacity: 1;
cursor: pointer;
}

.visible.toast-box,
.animating.toast,
.visible.toast {
display: block;
}
.toast > .icon {
margin-right: 0.6em;

.icon.toast .content {
padding-left: 3em;
}

.toast > .content > .title {
font-weight: bold;
}
Expand All @@ -89,6 +116,18 @@
background-color: #DB2828;
}

.info.toast-box .attached.progress .bar {
background: #12a1bf !important;
}
.warning.toast-box .attached.progress .bar {
background: #cf9b0d !important;
}
.success.toast-box .attached.progress .bar {
background: #15792d !important;
}
.error.toast-box .attached.progress .bar {
background: #9c1a1a !important;
}
/*--------------
Icon
---------------*/
Expand All @@ -97,9 +136,41 @@
display: inline-block;
vertical-align: middle;
font-size: 1.5em;
opacity: 0.8;
position: absolute;
}

.icon.toast > .content {
display: inline-block;
vertical-align: middle;
}

/*---------------
Progress Bar
----------------*/

.toast-box .attached.progress .bar {
min-width: 0%;
}

.toast-box .active.progress .bar::after {
-webkit-animation: progress-active 2s ease infinite !important;
animation: progress-active 2s ease infinite !important;
}

.toast-box {
margin-bottom: 6px;
}

.toast-box .toast,
.toast-box .message {
margin-bottom: 0;
}

.toast-box .bottom.attached.progress {
margin: -3px 0 6px;
}

.toast-box .top.attached.progress {
margin: 6px 0 -3px;
}

73 changes: 64 additions & 9 deletions dist/components/toast.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,10 @@ $.fn.toast = function(parameters) {
moduleNamespace = namespace + '-module',

$module = $(this),
$toastBox = $('<div/>',{'class':settings.className.box+' '+settings.class}),
$toast = $('<div/>'),
$progress = $('<div/>',{'class':settings.className.progress}),
$progressBar = $('<div/>',{'class':'bar'}),

$close = $module.find(selector.close),
$context = (settings.context)
Expand All @@ -74,7 +77,7 @@ $.fn.toast = function(parameters) {
module.bind.events();

if(settings.displayTime > 0) {
setTimeout(module.close, settings.displayTime);
module.closeTimer = setTimeout(module.close, settings.displayTime+(settings.showProgress ? 300 : 0));
}
module.show();
},
Expand All @@ -97,6 +100,9 @@ $.fn.toast = function(parameters) {
},

close: function(callback) {
if(module.closeTimer) {
clearTimeout(module.closeTimer);
}
callback = callback || function(){};
module.remove.visible();
module.unbind.events();
Expand All @@ -106,14 +112,14 @@ $.fn.toast = function(parameters) {

create: {
container: function() {
module.verbose('Creating container')
module.verbose('Creating container');
$context.append('<div class="ui ' + settings.position + ' ' + className.container + '"></div>');
},
toast: function() {
var $content = $('<div/>').addClass(className.content);
module.verbose('Creating toast')
module.verbose('Creating toast');

if (settings.showIcon) {
if (settings.showIcon && settings.icons[settings.class]) {
var $icon = $('<i/>').addClass(settings.icons[settings.class] + ' ' + className.icon);

$toast
Expand All @@ -138,12 +144,30 @@ $.fn.toast = function(parameters) {
.addClass(settings.class + ' ' + className.toast)
.append($content)
;

$toast.css('opacity', settings.opacity);
$toast = $toastBox.append($toast);
if(settings.showProgress && settings.displayTime > 0){
$progress
.addClass(settings.class)
.append($progressBar);
if ($progress.hasClass('top')) {
$toast.prepend($progress);
} else {
$toast.append($progress);
}
$progressBar.css('transition','width '+(settings.displayTime/1000)+'s linear');
$progressBar.width(settings.progressUp?'0%':'100%');
setTimeout(function() {
if(typeof $progress !== 'undefined'){
$progressBar.width(settings.progressUp?'100%':'0%');
}
},300);
}
if (settings.newestOnTop) {
$toast.prependTo(module.get.container());
}
else {
$toast.appendTo(module.get.container())
$toast.appendTo(module.get.container());
}
}
},
Expand Down Expand Up @@ -204,6 +228,16 @@ $.fn.toast = function(parameters) {
duration : settings.transition.hideDuration,
debug : settings.debug,
verbose : settings.verbose,

onBeforeHide: function(callback){
callback = $.isFunction(callback)?callback : function(){};
if(settings.transition.closeEasing !== ''){
$toast.css('opacity',0);
$toast.slideUp(500,settings.transition.closeEasing,callback);
} else {
callback.call($toast);
}
},
onComplete : function() {
module.destroy();
callback.call($toast, element);
Expand All @@ -220,7 +254,7 @@ $.fn.toast = function(parameters) {

has: {
container: function() {
module.verbose('Determining if there is already a container')
module.verbose('Determining if there is already a container');
return ($context.find(module.helpers.toClass(settings.position) + selector.container).length > 0);
}
},
Expand All @@ -246,7 +280,7 @@ $.fn.toast = function(parameters) {
event: {
click: function() {
settings.onClick.call($toast, element);
module.close()
module.close();
}
},

Expand Down Expand Up @@ -469,13 +503,17 @@ $.fn.toast.settings = {
displayTime : 3000, // set to zero to require manually dismissal, otherwise hides on its own
showIcon : true,
newestOnTop : false,
showProgress : false,
progressUp : true, //if false, the bar will start at 100% and decrease to 0%
opacity : 1,

// transition settings
transition : {
showMethod : 'scale',
showDuration : 500,
hideMethod : 'scale',
hideDuration : 500
hideDuration : 500,
closeEasing : 'easeOutBounce' //Set to empty string to stack the closed toast area immediately (old behaviour)
},

error: {
Expand All @@ -485,6 +523,8 @@ $.fn.toast.settings = {

className : {
container : 'toast-container',
box : 'toast-box',
progress : 'ui bottom attached active progress',
toast : 'ui toast',
icon : 'icon',
visible : 'visible',
Expand All @@ -501,6 +541,7 @@ $.fn.toast.settings = {

selector : {
container : '.toast-container',
box : '.toast-box',
toast : '.ui.toast'
},

Expand All @@ -513,5 +554,19 @@ $.fn.toast.settings = {
onRemove : function(){},
};

$.extend( $.easing, {
easeOutBounce: function (x, t, b, c, d) {
if ((t/=d) < (1/2.75)) {
return c*(7.5625*t*t) + b;
} else if (t < (2/2.75)) {
return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
} else if (t < (2.5/2.75)) {
return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
} else {
return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
}
}
});


})( jQuery, window, document );
21 changes: 16 additions & 5 deletions dist/components/transition.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -779,11 +779,22 @@ $.fn.transition = function() {
element.blur(); // IE will trigger focus change if element is not blurred before hiding
module.remove.display();
module.remove.visible();
module.set.hidden();
module.force.hidden();
settings.onHide.call(element);
settings.onComplete.call(element);
// module.repaint();
if($.isFunction(settings.onBeforeHide)){
settings.onBeforeHide.call(element,function(){
module.hideNow();
});
} else {
module.hideNow();
}

},

hideNow: function() {
module.set.hidden();
module.force.hidden();
settings.onHide.call(element);
settings.onComplete.call(element);
// module.repaint();
},

show: function(display) {
Expand Down
Loading

0 comments on commit 409e533

Please sign in to comment.