tyler.durden/icingaweb2
1
0
Fork 0
mirror of https://github.com/Icinga/icingaweb2.git synced 2025-07-28 16:24:04 +02:00
Code Issues Packages Projects Releases Wiki Activity

Move javascript behaviors into separate classes

Browse Source
This commit is contained in:
Matthias Jentsch 2014-09-10 10:45:34 +02:00
parent 5d2e849491
commit f58da73e2d
6 changed files with 204 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
library/Icinga/Web/JavaScript.php
View File

@ -22,7 +22,10 @@ class JavaScript
'js/icinga/history.js',
'js/icinga/module.js',
'js/icinga/timezone.js',
'js/icinga/behavior/tooltip.js'
'js/icinga/behavior/tooltip.js',
'js/icinga/behavior/sparkline.js',
'js/icinga/behavior/tristate.js',
'js/icinga/behavior/navigation.js'
);
protected static $vendorFiles = array(

75
public/js/icinga/behavior/navigation.js Normal file
View File

@ -0,0 +1,75 @@
// {{{ICINGA_LICENSE_HEADER}}}
// {{{ICINGA_LICENSE_HEADER}}}
(function(Icinga, $) {
"use strict";
var activeMenuId;
Icinga.Behaviors = Icinga.Behaviors || {};
var Navigation = function (icinga) {
this.icinga = icinga;
};
Navigation.prototype.apply = function(el) {
// restore menu state
if (activeMenuId) {
$('[role="navigation"] li.active', el).removeClass('active');
var $selectedMenu = $('#' + activeMenuId, el);
var $outerMenu = $selectedMenu.parent().closest('li');
if ($outerMenu.size()) {
$selectedMenu = $outerMenu;
}
$selectedMenu.addClass('active');
} else {
// store menu state
var $menus = $('[role="navigation"] li.active', el);
if ($menus.size()) {
activeMenuId = $menus[0].id;
}
}
};
Navigation.prototype.bind = function() {
$(document).on('click', 'a', { self: this }, this.linkClicked);
$(document).on('click', 'tr[href]', { self: this }, this.linkClicked);
};
Navigation.prototype.unbind = function() {
$(document).off('click', 'a', this.linkClicked);
$(document).off('click', 'tr[href]', this.linkClicked);
};
Navigation.prototype.linkClicked = function(event) {
var $a = $(this);
var href = $a.attr('href');
var isMenuLink = $a.closest('#menu').length > 0;
var $li;
var icinga = event.data.self.icinga;
if (href.match(/#/)) {
$li = $a.closest('li');
if (isMenuLink) {
activeMenuId = $($li).attr('id');
}
} else {
if (isMenuLink) {
activeMenuId = $(event.target).closest('li').attr('id');
}
}
if (isMenuLink) {
var $menu = $('#menu');
// update target url of the menu container to the clicked link
var menuDataUrl = icinga.utils.parseUrl($menu.data('icinga-url'));
menuDataUrl = icinga.utils.addUrlParams(menuDataUrl.path, { url: href });
$menu.data('icinga-url', menuDataUrl);
}
};
Icinga.Behaviors.Navigation = Navigation;
}) (Icinga, jQuery);

58
public/js/icinga/behavior/sparkline.js Normal file
View File

@ -0,0 +1,58 @@
// {{{ICINGA_LICENSE_HEADER}}}
// {{{ICINGA_LICENSE_HEADER}}}
(function(Icinga, $) {
"use strict";
Icinga.Behaviors = Icinga.Behaviors || {};
var Sparkline = function (icinga) {
this.icinga = icinga;
};
Sparkline.prototype.apply = function(el) {
var self = this, icinga = this.icinga;
$('span.sparkline', el).each(function(i, element) {
// read custom options
var $spark = $(element);
var labels = $spark.attr('labels').split('|');
var formatted = $spark.attr('formatted').split('|');
var tooltipChartTitle = $spark.attr('sparkSparklineChartTitle') || '';
var format = $spark.attr('tooltipformat');
var hideEmpty = $spark.attr('hideEmptyLabel') === 'true';
$spark.sparkline(
'html',
{
enableTagOptions: true,
tooltipFormatter: function (sparkline, options, fields) {
var out = format;
if (hideEmpty && fields.offset === 3) {
return '';
}
var replace = {
title: tooltipChartTitle,
label: labels[fields.offset] ? labels[fields.offset] : fields.offset,
formatted: formatted[fields.offset] ? formatted[fields.offset] : '',
value: fields.value,
percent: Math.round(fields.percent * 100) / 100
};
$.each(replace, function(key, value) {
out = out.replace('{{' + key + '}}', value);
});
return out;
}
});
});
};
Sparkline.prototype.bind = function() {
};
Sparkline.prototype.unbind = function() {
};
Icinga.Behaviors.Sparkline = Sparkline;
}) (Icinga, jQuery);

9
public/js/icinga/behavior/tooltip.js
View File

@ -7,13 +7,14 @@
Icinga.Behaviors = Icinga.Behaviors || {};
var Tooltip = function () {
var Tooltip = function (icinga) {
this.icinga = icinga;
this.mouseX = 0;
this.mouseY = 0;
};
Tooltip.prototype.apply = function(el) {
var self = this;
var self = this, icinga = this.icinga;
$('[title]').each(function () {
var $el = $(this);
@ -27,11 +28,11 @@
// migrate or remove all orphaned tooltips
$('.tipsy').each(function () {
var arrow = $('.tipsy-arrow', this)[0];
if (!Icinga.utils.elementsOverlap(arrow, $('#main')[0])) {
if (!icinga.utils.elementsOverlap(arrow, $('#main')[0])) {
$(this).remove();
return;
}
if (!Icinga.utils.elementsOverlap(arrow, el)) {
if (!icinga.utils.elementsOverlap(arrow, el)) {
return;
}
var title = $(this).find('.tipsy-inner').html();

62
public/js/icinga/behavior/tristate.js Normal file
View File

@ -0,0 +1,62 @@
// {{{ICINGA_LICENSE_HEADER}}}
// {{{ICINGA_LICENSE_HEADER}}}
(function(Icinga, $) {
"use strict";
Icinga.Behaviors = Icinga.Behaviors || {};
var Tristate = function (icinga) {
this.icinga = icinga;
};
Tristate.prototype.apply = function(el) {
var self = this, icinga = this.icinga;
};
Tristate.prototype.bind = function() {
// Toggle all triStateButtons
$(document).on('click', 'div.tristate .tristate-dummy', { self: this }, this.clickTriState);
};
Tristate.prototype.unbind = function() {
$(document).off('click', 'div.tristate .tristate-dummy', this.clickTriState);
};
Tristate.prototype.clickTriState = function (event) {
var self = event.data.self;
var $tristate = $(this);
var triState = parseInt($tristate.data('icinga-tristate'), 10);
// load current values
var old = $tristate.data('icinga-old').toString();
var value = $tristate.parent().find('input:radio:checked').first().prop('checked', false).val();
// calculate the new value
if (triState) {
// 1 => 0
// 0 => unchanged
// unchanged => 1
value = value === '1' ? '0' : (value === '0' ? 'unchanged' : '1');
} else {
// 1 => 0
// 0 => 1
value = value === '1' ? '0' : '1';
}
// update form value
$tristate.parent().find('input:radio[value="' + value + '"]').prop('checked', true);
// update dummy
if (value !== old) {
$tristate.parent().find('b.tristate-changed').css('visibility', 'visible');
} else {
$tristate.parent().find('b.tristate-changed').css('visibility', 'hidden');
}
self.icinga.ui.setTriState(value.toString(), $tristate);
};
Icinga.Behaviors.Tristate = Tristate;
}) (Icinga, jQuery);

110
public/js/icinga/events.js
View File

@ -10,8 +10,6 @@
'use strict';
var activeMenuId;
Icinga.Events = function (icinga) {
this.icinga = icinga;
@ -82,61 +80,11 @@
$('input.autofocus', el).focus();
// replace all sparklines
$('span.sparkline', el).each(function(i, element) {
// read custom options
var $spark = $(element);
var labels = $spark.attr('labels').split('|');
var formatted = $spark.attr('formatted').split('|');
var tooltipChartTitle = $spark.attr('sparkTooltipChartTitle') || '';
var format = $spark.attr('tooltipformat');
var hideEmpty = $spark.attr('hideEmptyLabel') === 'true';
$spark.sparkline(
'html',
{
enableTagOptions: true,
tooltipFormatter: function (sparkline, options, fields) {
var out = format;
if (hideEmpty && fields.offset === 3) {
return '';
}
var replace = {
title: tooltipChartTitle,
label: labels[fields.offset] ? labels[fields.offset] : fields.offset,
formatted: formatted[fields.offset] ? formatted[fields.offset] : '',
value: fields.value,
percent: Math.round(fields.percent * 100) / 100
};
$.each(replace, function(key, value) {
out = out.replace('{{' + key + '}}', value);
});
return out;
}
});
});
var searchField = $('#menu input.search', el);
// Remember initial search field value if any
if (searchField.length && searchField.val().length) {
this.searchValue = searchField.val();
}
// restore menu state
if (activeMenuId) {
$('[role="navigation"] li.active', el).removeClass('active');
var $selectedMenu = $('#' + activeMenuId, el);
var $outerMenu = $selectedMenu.parent().closest('li');
if ($outerMenu.size()) {
$selectedMenu = $outerMenu;
}
$selectedMenu.addClass('active');
} else {
// store menu state
var $menus = $('[role="navigation"] li.active', el);
if ($menus.size()) {
activeMenuId = $menus[0].id;
}
}
},
/**
@ -178,8 +126,6 @@
$(document).on('keyup', '#menu input.search', {self: this}, this.autoSubmitSearch);
$(document).on('mouseenter', '.historycolorgrid td', this.historycolorgridHover);
$(document).on('mouseleave', '.historycolorgrid td', this.historycolorgidUnhover);
$(document).on('mouseenter', 'li.dropdown', this.dropdownHover);
$(document).on('mouseleave', 'li.dropdown', {self: this}, this.dropdownLeave);
@ -187,14 +133,11 @@
$(document).on('mouseleave', '#sidebar', { self: this }, this.leaveSidebar);
$(document).on('click', '.tree .handle', { self: this }, this.treeNodeToggle);
// Toggle all triStateButtons
$(document).on('click', 'div.tristate .tristate-dummy', { self: this }, this.clickTriState);
// TBD: a global autocompletion handler
// $(document).on('keyup', 'form.auto input', this.formChangeDelayed);
// $(document).on('change', 'form.auto input', this.formChanged);
// $(document).on('change', 'form.auto select', this.submitForm);
},
menuTitleHovered: function (event) {
@ -301,14 +244,6 @@
icinga.ui.fixControls();
},
historycolorgridHover: function () {
$(this).addClass('hover');
},
historycolorgidUnhover: function() {
$(this).removeClass('hover');
},
autoSubmitSearch: function(event) {
var self = event.data.self;
if ($('#menu input.search').val() === self.searchValue) {
@ -322,39 +257,6 @@
return event.data.self.submitForm(event, true);
},
clickTriState: function (event) {
var self = event.data.self;
var $tristate = $(this);
var triState = parseInt($tristate.data('icinga-tristate'), 10);
// load current values
var old = $tristate.data('icinga-old').toString();
var value = $tristate.parent().find('input:radio:checked').first().prop('checked', false).val();
// calculate the new value
if (triState) {
// 1 => 0
// 0 => unchanged
// unchanged => 1
value = value === '1' ? '0' : (value === '0' ? 'unchanged' : '1');
} else {
// 1 => 0
// 0 => 1
value = value === '1' ? '0' : '1';
}
// update form value
$tristate.parent().find('input:radio[value="' + value + '"]').prop('checked', true);
// update dummy
if (value !== old) {
$tristate.parent().find('b.tristate-changed').css('visibility', 'visible');
} else {
$tristate.parent().find('b.tristate-changed').css('visibility', 'hidden');
}
self.icinga.ui.setTriState(value.toString(), $tristate);
},
/**
*
*/
@ -557,7 +459,6 @@
$li = $a.closest('li');
$('#menu .active').removeClass('active');
$li.addClass('active');
activeMenuId = $($li).attr('id');
if ($li.hasClass('hover')) {
$li.removeClass('hover');
}
@ -583,9 +484,6 @@
return false;
}
} else {
if (isMenuLink) {
activeMenuId = $(event.target).closest('li').attr('id');
}
$target = self.getLinkTargetFor($a);
}
@ -593,11 +491,6 @@
icinga.loader.loadUrl(href, $target);
if (isMenuLink) {
// update target url of the menu container to the clicked link
var menuDataUrl = icinga.utils.parseUrl($('#menu').data('icinga-url'));
menuDataUrl = icinga.utils.addUrlParams(menuDataUrl.path, { url: href });
$('#menu').data('icinga-url', menuDataUrl);
// Menu links should remove all but the first layout column
icinga.ui.layout1col();
}
@ -682,11 +575,8 @@
$(document).off('submit', 'form', this.submitForm);
$(document).off('click', 'button', this.submitForm);
$(document).off('change', 'form select.autosubmit', this.submitForm);
$(document).off('mouseenter', '.historycolorgrid td', this.historycolorgridHover);
$(document).off('mouseleave', '.historycolorgrid td', this.historycolorgidUnhover);
$(document).off('mouseenter', 'li.dropdown', this.dropdownHover);
$(document).off('mouseleave', 'li.dropdown', this.dropdownLeave);
$(document).off('click', 'div.tristate .tristate-dummy', this.clickTriState);
},
destroy: function() {