vesta/web/js/events.js
2016-10-28 17:55:58 +03:00

472 lines
15 KiB
JavaScript

// Init kinda namespace object
var VE = { // Vesta Events object
core: {}, // core functions
navigation: {
state: {
active_menu: 1,
menu_selector: '.l-stat__col',
menu_active_selector: '.l-stat__col--active'
}
}, // menu and element navigation functions
notifications: {},
callbacks: { // events callback functions
click: {},
mouseover: {},
mouseout: {},
keypress: {}
},
helpers: {}, // simple handy methods
tmp: {
sort_par: 'sort-name',
sort_direction: -1,
sort_as_int: 0,
form_changed: 0,
search_activated: 0,
search_display_interval: 0,
search_hover_interval: 0
}
};
/*
* Main method that invokes further event processing
* @param root is root HTML DOM element that. Pass HTML DOM Element or css selector
* @param event_type (eg: click, mouseover etc..)
*/
VE.core.register = function(root, event_type) {
var root = !root ? 'body' : root; // if elm is not passed just bind events to body DOM Element
var event_type = !event_type ? 'click' : event_type; // set event type to "click" by default
$(root).bind(event_type, function(evt) {
var elm = $(evt.target);
VE.core.dispatch(evt, elm, event_type); // dispatch captured event
});
}
/*
* Dispatch event that was previously registered
* @param evt related event object
* @param elm that was catched
* @param event_type (eg: click, mouseover etc..)
*/
VE.core.dispatch = function(evt, elm, event_type) {
if ('undefined' == typeof VE.callbacks[event_type]) {
return VE.helpers.warn('There is no corresponding object that should contain event callbacks for "'+event_type+'" event type');
}
// get class of element
var classes = $(elm).attr('class');
// if no classes are attached, then just stop any further processings
if (!classes) {
return; // no classes assigned
}
// split the classes and check if it related to function
$(classes.split(/\s/)).each(function(i, key) {
VE.callbacks[event_type][key] && VE.callbacks[event_type][key](evt, elm);
});
}
//
// CALLBACKS
//
/*
* Suspend action
*/
VE.callbacks.click.do_suspend = function(evt, elm) {
var ref = elm.hasClass('actions-panel') ? elm : elm.parents('.actions-panel');
var url = $('input[name="suspend_url"]', ref).val();
var dialog_elm = ref.find('.confirmation-text-suspention');
VE.helpers.createConfirmationDialog(dialog_elm, '', url);
}
/*
* Unsuspend action
*/
VE.callbacks.click.do_unsuspend = function(evt, elm) {
var ref = elm.hasClass('actions-panel') ? elm : elm.parents('.actions-panel');
var url = $('input[name="unsuspend_url"]', ref).val();
var dialog_elm = ref.find('.confirmation-text-suspention');
VE.helpers.createConfirmationDialog(dialog_elm, '', url);
}
/*
* Delete action
*/
VE.callbacks.click.do_delete = function(evt, elm) {
var ref = elm.hasClass('actions-panel') ? elm : elm.parents('.actions-panel');
var url = $('input[name="delete_url"]', ref).val();
var dialog_elm = ref.find('.confirmation-text-delete');
VE.helpers.createConfirmationDialog(dialog_elm, '', url);
}
/*
* Create dialog box on the fly
* @param elm Element which contains the dialog contents
* @param dialog_title
* @param confirmed_location_url URL that will be redirected to if user hit "OK"
* @param custom_config Custom configuration parameters passed to dialog initialization (optional)
*/
VE.helpers.createConfirmationDialog = function(elm, dialog_title, confirmed_location_url, custom_config) {
var custom_config = !custom_config ? {} : custom_config;
var config = {
modal: true,
//autoOpen: true,
resizable: false,
width: 360,
title: dialog_title,
close: function() {
$(this).dialog("destroy");
},
buttons: {
"OK": function(event, ui) {
location.href = confirmed_location_url;
},
Cancel: function() {
$(this).dialog("close");
}
},
create:function () {
$(this).closest(".ui-dialog")
.find(".ui-button:first")
.addClass("submit");
$(this).closest(".ui-dialog")
.find(".ui-button")
.eq(1) // the first button
.addClass("cancel");
}
}
var reference_copied = $(elm[0]).clone();
console.log(reference_copied);
config = $.extend(config, custom_config);
$(reference_copied).dialog(config);
}
/*
* Simple debug output
*/
VE.helpers.warn = function(msg) {
alert('WARNING: ' + msg);
}
VE.helpers.extendPasswordFields = function() {
var references = ['.password'];
$(document).ready(function() {
$(references).each(function(i, ref) {
VE.helpers.initAdditionalPasswordFieldElements(ref);
});
});
}
VE.helpers.initAdditionalPasswordFieldElements = function(ref) {
var enabled = $.cookie('hide_passwords') == '1' ? true : false;
if (enabled) {
VE.helpers.hidePasswordFieldText(ref);
}
$(ref).prop('autocomplete', 'off');
var enabled_html = enabled ? '' : 'show-passwords-enabled-action';
var html = '<span class="hide-password"><img class="toggle-psw-visibility-icon ' + enabled_html + '" onClick="VE.helpers.toggleHiddenPasswordText(\'' + ref + '\', this)" src="/images/toggle_password.png" /></span>';
$(ref).after(html);
}
VE.helpers.hidePasswordFieldText = function(ref) {
$.cookie('hide_passwords', '1', { expires: 365, path: '/' });
$(ref).prop('type', 'password');
}
VE.helpers.revealPasswordFieldText = function(ref) {
$.cookie('hide_passwords', '0', { expires: 365, path: '/' });
$(ref).prop('type', 'text');
}
VE.helpers.toggleHiddenPasswordText = function(ref, triggering_elm) {
$(triggering_elm).toggleClass('show-passwords-enabled-action');
if ($(ref).prop('type') == 'text') {
VE.helpers.hidePasswordFieldText(ref);
}
else {
VE.helpers.revealPasswordFieldText(ref);
}
}
VE.helpers.refresh_timer = {
speed: 50,
degr: 180,
right: 0,
left: 0,
periodical: 0,
first: 1,
start: function(){
this.periodical = setInterval(function(){VE.helpers.refresh_timer.turn()}, this.speed);
},
stop: function(){
clearTimeout(this.periodical);
},
turn: function(){
this.degr += 1;
if (this.first && this.degr >= 361){
this.first = 0;
this.degr = 180;
this.left.css({'-webkit-transform': 'rotate(180deg)'});
this.left.css({'transform': 'rotate(180deg)'});
this.left.children('.loader-half').addClass('dark');
}
if (!this.first && this.degr >= 360){
this.first = 1;
this.degr = 180;
this.left.css({'-webkit-transform': 'rotate(0deg)'});
this.right.css({'-webkit-transform': 'rotate(180deg)'});
this.left.css({'transform': 'rotate(0deg)'});
this.right.css({'transform': 'rotate(180deg)'});
this.left.children('.loader-half').removeClass('dark');
this.stop();
location.reload();
}
if (this.first){
this.right.css({'-webkit-transform': 'rotate('+this.degr+'deg)'});
this.right.css({'transform': 'rotate('+this.degr+'deg)'});
}
else{
this.left.css({'-webkit-transform': 'rotate('+this.degr+'deg)'});
this.left.css({'transform': 'rotate('+this.degr+'deg)'});
}
}
}
VE.navigation.enter_focused = function() {
if($('.units').hasClass('active')){
location.href=($('.units.active .l-unit.focus .actions-panel__col.actions-panel__edit a').attr('href'));
} else {
if($(VE.navigation.state.menu_selector + '.focus a').attr('href')){
location.href=($(VE.navigation.state.menu_selector + '.focus a').attr('href'));
}
}
}
VE.navigation.move_focus_left = function(){
var index = parseInt($(VE.navigation.state.menu_selector).index($(VE.navigation.state.menu_selector+'.focus')));
if(index == -1)
index = parseInt($(VE.navigation.state.menu_selector).index($(VE.navigation.state.menu_active_selector)));
if($('.units').hasClass('active')){
$('.units').removeClass('active');
if(VE.navigation.state.active_menu == 0){
$('.l-menu').addClass('active');
} else {
$('.l-stat').addClass('active');
}
index++;
}
$(VE.navigation.state.menu_selector).removeClass('focus');
if(index > 0){
$($(VE.navigation.state.menu_selector)[index-1]).addClass('focus');
} else {
VE.navigation.switch_menu('last');
}
}
VE.navigation.move_focus_right = function(){
var max_index = $(VE.navigation.state.menu_selector).length-1;
var index = parseInt($(VE.navigation.state.menu_selector).index($(VE.navigation.state.menu_selector+'.focus')));
if(index == -1)
index = parseInt($(VE.navigation.state.menu_selector).index($(VE.navigation.state.menu_active_selector))) || 0;
$(VE.navigation.state.menu_selector).removeClass('focus');
if($('.units').hasClass('active')){
$('.units').removeClass('active');
if(VE.navigation.state.active_menu == 0){
$('.l-menu').addClass('active');
} else {
$('.l-stat').addClass('active');
}
index--;
}
if(index < max_index){
$($(VE.navigation.state.menu_selector)[index+1]).addClass('focus');
} else {
VE.navigation.switch_menu('first');
}
}
VE.navigation.move_focus_down = function(){
var max_index = $('.units .l-unit:not(.header)').length-1;
var index = parseInt($('.units .l-unit').index($('.units .l-unit.focus')));
if($('.l-menu').hasClass('active') || $('.l-stat').hasClass('active')){
$('.l-menu').removeClass('active');
$('.l-stat').removeClass('active');
$('.units').addClass('active');
index--;
if(index == -2)
index = -1;
}
if(index < max_index){
$('.units .l-unit.focus').removeClass('focus');
$($('.units .l-unit:not(.header)')[index+1]).addClass('focus');
$('html, body').animate({
scrollTop: $('.units .l-unit.focus').offset().top - 200
}, 80);
}
}
VE.navigation.move_focus_up = function(){
var index = parseInt($('.units .l-unit:not(.header)').index($('.units .l-unit.focus')));
if(index == -1)
index = 0;
if($('.l-menu').hasClass('active') || $('.l-stat').hasClass('active')){
$('.l-menu').removeClass('active');
$('.l-stat').removeClass('active');
$('.units').addClass('active');
index++;
}
if(index > 0){
$('.units .l-unit.focus').removeClass('focus');
$($('.units .l-unit:not(.header)')[index-1]).addClass('focus');
$('html, body').animate({
scrollTop: $('.units .l-unit.focus').offset().top - 200
}, 80);
}
}
VE.navigation.switch_menu = function(position){
position = position || 'first'; // last
if(VE.navigation.state.active_menu == 0){
VE.navigation.state.active_menu = 1;
VE.navigation.state.menu_selector = '.l-stat__col';
VE.navigation.state.menu_active_selector = '.l-stat__col--active';
$('.l-menu').removeClass('active');
$('.l-stat').addClass('active');
if(position == 'first'){
$($(VE.navigation.state.menu_selector)[0]).addClass('focus');
} else {
var max_index = $(VE.navigation.state.menu_selector).length-1;
$($(VE.navigation.state.menu_selector)[max_index]).addClass('focus');
}
} else {
VE.navigation.state.active_menu = 0;
VE.navigation.state.menu_selector = '.l-menu__item';
VE.navigation.state.menu_active_selector = '.l-menu__item--active';
$('.l-menu').addClass('active');
$('.l-stat').removeClass('active');
if(position == 'first'){
$($(VE.navigation.state.menu_selector)[0]).addClass('focus');
} else {
var max_index = $(VE.navigation.state.menu_selector).length-1;
$($(VE.navigation.state.menu_selector)[max_index]).addClass('focus');
}
}
}
VE.notifications.get_list = function(){
/// TODO get notifications only once
$.ajax({
url: "/list/notifications/?ajax=1",
dataType: "json"
}).done(function(data) {
var acc = [];
$.each(data, function(i, elm){
var tpl = Tpl.get('notification', 'WEB');
if(elm.ACK == 'no')
tpl.set(':UNSEEN', 'unseen');
else
tpl.set(':UNSEEN', '');
tpl.set(':ID', elm.ID);
tpl.set(':TYPE', elm.TYPE);
tpl.set(':TOPIC', elm.TOPIC);
tpl.set(':NOTICE', elm.NOTICE);
acc.push(tpl.finalize());
});
if(!Object.keys(data).length){
var tpl = Tpl.get('notification_empty', 'WEB');
acc.push(tpl.finalize());
}
$('.notification-container').html(acc.done()).show();
$('.notification-container .mark-seen').click(function(event){
// VE.notifications.mark_seen($(event.target).attr('id').replace("notification-", ""));
VE.notifications.delete($(event.target).attr('id').replace("notification-", ""));
});
});
}
VE.notifications.delete = function(id){
$('#notification-'+id).parents('li').hide();
$.ajax({
url: "/delete/notification/?delete=1&notification_id="+id+"&token="+$('#token').attr('token')
});
if($('.notification-container li:visible').length == 0)
$('.l-profile__notifications').removeClass('updates').removeClass('active');
}
VE.notifications.mark_seen = function(id){
$('#notification-'+id).parents('li').removeClass('unseen');
$.ajax({
url: "/delete/notification/?notification_id="+id+"&token="+$('#token').attr('token')
});
if($('.notification-container .unseen').length == 0)
$('.l-profile__notifications').removeClass('updates');
}
VE.navigation.init = function(){
if($('.l-menu__item.l-menu__item--active').length){
// VE.navigation.switch_menu();
VE.navigation.state.active_menu = 0;
VE.navigation.state.menu_selector = '.l-menu__item';
VE.navigation.state.menu_active_selector = '.l-menu__item--active';
$('.l-menu').addClass('active');
$('.l-stat').removeClass('active');
} else {
$('.l-stat').addClass('active');
}
}
VE.navigation.shortcut = function(elm){
var action = elm.attr('key-action');
if(action == 'js'){
var e = elm.find('.data-controls');
VE.core.dispatch(true, e, 'click');
}
if(action == 'href') {
location.href=elm.find('a').attr('href');
}
}
VE.helpers.extendPasswordFields();