reupload
This commit is contained in:
301
public/web/shella/scripts/module.notifications.js
Normal file
301
public/web/shella/scripts/module.notifications.js
Normal file
@@ -0,0 +1,301 @@
|
||||
theme.Notifications = function() {
|
||||
|
||||
function Notifications() {
|
||||
this.selectors = {
|
||||
elems: '.js-notification'
|
||||
};
|
||||
|
||||
this.settings = {
|
||||
close_limit: 40,
|
||||
translate_limit: 50,
|
||||
opacity_limit: 0.4
|
||||
};
|
||||
|
||||
this.load();
|
||||
};
|
||||
|
||||
Notifications.prototype = $.extend({}, Notifications.prototype, {
|
||||
load: function() {
|
||||
var _ = this,
|
||||
dif;
|
||||
|
||||
$body.on('mousedown', this.selectors.elems, function(e) {
|
||||
if(e.target.tagName === 'A' || $(e.target).parents('[data-js-action]').length) {
|
||||
return;
|
||||
}
|
||||
|
||||
_.is_holded = true;
|
||||
|
||||
var $this = $(this),
|
||||
start_posX = e.screenX;
|
||||
|
||||
dif = 0;
|
||||
|
||||
$this.addClass('animate');
|
||||
setTimeout(function () {
|
||||
$this.addClass('pressed');
|
||||
}, 0);
|
||||
|
||||
$body.on('mousemove.notification', function(e) {
|
||||
var posX = e.screenX,
|
||||
set_posX = Math.min(start_posX + _.settings.translate_limit, Math.max(start_posX - _.settings.translate_limit, posX));
|
||||
|
||||
dif = set_posX - start_posX;
|
||||
|
||||
$this.removeClass('animate');
|
||||
|
||||
setTimeout(function () {
|
||||
$this.css({
|
||||
transform: 'translateX(' + dif + 'px) scale(0.95)',
|
||||
opacity: Math.max((_.settings.translate_limit - Math.abs(dif)) / _.settings.translate_limit, _.settings.opacity_limit)
|
||||
});
|
||||
}, 0);
|
||||
|
||||
setTimeout(function () {
|
||||
$this.addClass('animate');
|
||||
}, 0);
|
||||
});
|
||||
|
||||
$body.one('mouseup.notification', function() {
|
||||
$this.trigger('mouseup');
|
||||
});
|
||||
|
||||
e.preventDefault();
|
||||
return false;
|
||||
});
|
||||
|
||||
$body.on('mouseup', this.selectors.elems, function() {
|
||||
var $this = $(this);
|
||||
|
||||
_.is_holded = false;
|
||||
|
||||
$body.unbind('mousemove.notification mouseup.notification');
|
||||
|
||||
setTimeout(function () {
|
||||
if(Math.abs(dif) > _.settings.close_limit) {
|
||||
var $notification = $this.find('[data-js-notification-inner]'),
|
||||
$btn_close = $notification.find('[data-js-action="close"]').first();
|
||||
|
||||
if($notification.hasClass('d-none')) {
|
||||
return;
|
||||
}
|
||||
|
||||
$this.one('transitionend', function() {
|
||||
dif = 0;
|
||||
|
||||
$this.trigger('mouseup').trigger('transitionend');
|
||||
|
||||
$btn_close.trigger('click');
|
||||
$notification.trigger('transitionend');
|
||||
|
||||
$this.trigger('onpressedend');
|
||||
});
|
||||
|
||||
$this.css({
|
||||
transform: 'translateX(' + (dif + 20) + 'px) scale(0.95)',
|
||||
opacity: 0
|
||||
});
|
||||
} else {
|
||||
$this.removeClass('pressed');
|
||||
|
||||
$this.one('transitionend' ,function () {
|
||||
$this.removeClass('animate');
|
||||
$this.trigger('onpressedend');
|
||||
});
|
||||
|
||||
$this.css({
|
||||
transform: '',
|
||||
opacity: ''
|
||||
});
|
||||
}
|
||||
|
||||
if($this.css('transition-duration') === '0s') {
|
||||
$this.trigger('transitionend');
|
||||
}
|
||||
}, 0);
|
||||
});
|
||||
|
||||
$body.on('close', this.selectors.elems, function() {
|
||||
var $this = $(this);
|
||||
|
||||
$body.unbind('mousemove.notification');
|
||||
$this.trigger('mouseup').trigger('transitionend');
|
||||
});
|
||||
},
|
||||
_cookies: function($container) {
|
||||
var _ = this,
|
||||
$notification = $container.find('.js-notification-cookies');
|
||||
|
||||
if($notification.length) {
|
||||
var $btn_close = $notification.find('[data-js-action="close"]'),
|
||||
cookie = $.cookie('notification-cookies'),
|
||||
show_once = $notification.attr('data-js-show-once'),
|
||||
delay = +$notification.attr('data-js-delay'),
|
||||
cookies_life = +$notification.attr('data-js-cookies-life');
|
||||
|
||||
if(cookie !== 'off') {
|
||||
setTimeout(function () {
|
||||
_._show($notification, function () {
|
||||
$btn_close.one('click', function() {
|
||||
if(show_once === 'true') {
|
||||
var date = new Date(),
|
||||
timer = 24 * 60 * 60 * 1000 * cookies_life;
|
||||
|
||||
date.setTime(date.getTime() + timer);
|
||||
|
||||
$.cookie('notification-cookies', 'off', {
|
||||
expires: date,
|
||||
path: '/'
|
||||
});
|
||||
}
|
||||
|
||||
$(this).off();
|
||||
|
||||
_._hide($notification, function () {
|
||||
$notification.remove();
|
||||
});
|
||||
});
|
||||
});
|
||||
}, delay * 1000);
|
||||
}
|
||||
|
||||
return $btn_close;
|
||||
}
|
||||
},
|
||||
_products: function($container) {
|
||||
var _ = this,
|
||||
$notification = $container.find('.js-notification-products');
|
||||
|
||||
if(!$notification.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
var $btns_close = $notification.find('[data-js-action="close"]'),
|
||||
$items = $notification.find('[data-js-notification-products-item]'),
|
||||
delay = +$notification.attr('data-js-delay'),
|
||||
interval_min = +$notification.attr('data-js-interval-min'),
|
||||
interval_max = +$notification.attr('data-js-interval-max'),
|
||||
max_time_life = +$notification.attr('data-js-max-time-life'),
|
||||
$current_item,
|
||||
interval_random,
|
||||
max_time_life_interval;
|
||||
|
||||
function randomInteger(min, max) {
|
||||
return Math.round(min - 0.5 + Math.random() * (max - min + 1));
|
||||
};
|
||||
|
||||
function hide() {
|
||||
_._hide($notification, function () {
|
||||
autoplay();
|
||||
});
|
||||
};
|
||||
|
||||
function autoplay() {
|
||||
clearInterval(max_time_life_interval);
|
||||
if(!$notification.hasClass('d-none') || _.is_holded) {
|
||||
if(_.is_holded) {
|
||||
$notification.parents('.js-notification').one('onpressedend', function() {
|
||||
hide();
|
||||
});
|
||||
} else if($notification.is(':hover')) {
|
||||
$notification.one('mouseleave', function() {
|
||||
hide();
|
||||
});
|
||||
} else {
|
||||
hide();
|
||||
}
|
||||
} else {
|
||||
$current_item = $items.eq(randomInteger(0, $items.length - 1));
|
||||
interval_random = randomInteger(interval_min, interval_max);
|
||||
|
||||
$items.addClass('d-none');
|
||||
$current_item.removeClass('d-none');
|
||||
|
||||
_._show($notification, function () {
|
||||
setTimeout(function () {
|
||||
autoplay();
|
||||
}, interval_random * 1000);
|
||||
|
||||
if(max_time_life !== 0) {
|
||||
max_time_life_interval = setTimeout(function () {
|
||||
_._hide($notification);
|
||||
}, max_time_life * 1000);
|
||||
}
|
||||
}, function(onVisible) {
|
||||
onVisible();
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
setTimeout(function () {
|
||||
autoplay();
|
||||
}, delay * 1000);
|
||||
|
||||
$btns_close.on('click', function() {
|
||||
_._hide($notification);
|
||||
});
|
||||
|
||||
return $btns_close;
|
||||
},
|
||||
_show: function ($notification, callback, beforeShow) {
|
||||
$notification.unbind('transitionend');
|
||||
|
||||
if(callback) {
|
||||
$notification.one('transitionend', function () {
|
||||
callback();
|
||||
});
|
||||
}
|
||||
|
||||
$notification.removeClass('d-none');
|
||||
$notification.addClass('animate');
|
||||
|
||||
function onVisible() {
|
||||
setTimeout(function () {
|
||||
$notification.addClass('visible');
|
||||
}, 0);
|
||||
|
||||
if($notification.css('transition-duration') === '0s') {
|
||||
$notification.trigger('transitionend');
|
||||
}
|
||||
};
|
||||
|
||||
if(beforeShow) {
|
||||
beforeShow(onVisible);
|
||||
} else {
|
||||
onVisible();
|
||||
}
|
||||
},
|
||||
_hide: function ($notification, callback) {
|
||||
$notification.unbind('transitionend');
|
||||
|
||||
$notification.one('transitionend', function () {
|
||||
$notification.addClass('d-none').removeClass('animate').removeAttr('style');
|
||||
|
||||
$notification.parents('.js-notification').trigger('close');
|
||||
|
||||
if(callback) {
|
||||
callback();
|
||||
}
|
||||
});
|
||||
|
||||
$notification.removeClass('visible');
|
||||
|
||||
if($notification.css('transition-duration') === '0s') {
|
||||
$notification.trigger('transitionend');
|
||||
}
|
||||
},
|
||||
init: function ($container) {
|
||||
this._products($container);
|
||||
this._cookies($container);
|
||||
},
|
||||
destroy: function ($container) {
|
||||
$container.find('.js-notification-cookies, .js-notification-products').find('[data-js-action="close"]').off();
|
||||
}
|
||||
});
|
||||
|
||||
theme.Notifications = new Notifications;
|
||||
};
|
||||
|
||||
$(function() {
|
||||
theme.Notifications();
|
||||
});
|
||||
Reference in New Issue
Block a user