301 lines
10 KiB
JavaScript
301 lines
10 KiB
JavaScript
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();
|
|
}); |