-
Notifications
You must be signed in to change notification settings - Fork 469
/
munin-nodeview-timerangeswitch.js
121 lines (101 loc) · 3.47 KB
/
munin-nodeview-timerangeswitch.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
/**
* Nodeview - Time range switch
* Quickly change time range for every graph in the column
*/
$(document).ready(function() {
$('.timeRangeSwitch').find('ul > li').click(function() {
if ($(this).hasClass('selected'))
return;
var currentRange = $(this).parent().find('.selected').first().text();
var newRange = $(this).text();
// Remove "selected" attribute
$(this).parent().find('li').removeClass('selected');
// Add "selected" class to this
$(this).addClass('selected');
var thisRSIndex = $(this).parent().parent().index();
// Replace src attribute of current column
var images = $("img[data-col='" + thisRSIndex + "']");
images.each(function() {
var src = $(this).attr('src');
$(this).attr('src', src.replace('-' + currentRange + '.', '-' + newRange + '.'));
});
// Remplace data-original attribute (when using DYN_IMAGES)
var dynImages = $("img[data-original][data-col='" + thisRSIndex + "']");
dynImages.each(function() {
var originalSrc = $(this).attr('data-original');
$(this).attr('data-original', originalSrc.replace('-' + currentRange + '.', '-' + newRange + '.'));
});
// Tell that the image is loading
images.each(function() {
setImageLoading($(this), true);
});
updateURL();
});
// Keep it on top of window on scroll
var timeRangeSwitchContainer = $('.timeRangeSwitchContainer');
var header = $('#header');
$(window).scroll(function() {
if ($(this).scrollTop() > header.height())
timeRangeSwitchContainer.addClass('timeRangeFixed');
else
timeRangeSwitchContainer.removeClass('timeRangeFixed');
});
// There's a problem with CSS where time range switches do not wrap
// on special resolutions. Let's fix it here
$(window).resize(function() {
var availableWidth = $('#content').width();
if ($('.timeRangeSwitch').first().outerWidth(true)*2 > availableWidth)
$('.timeRangeSwitch').css('display', 'block');
else
$('.timeRangeSwitch').css('display', 'inline-block');
});
// Check if URL contains stuff like ?1=day&2=month
var urlParams = getURLParams();
if ('1' in urlParams)
setTimeRange(0, urlParams['1']);
if ('2' in urlParams)
setTimeRange(1, urlParams['2']);
});
/**
* Update current time range
* @param columnIndex 0/1
* @param val hour/day/...
*/
function setTimeRange(columnIndex, val) {
$($('.timeRangeSwitch').find('ul')[columnIndex]).children().each(function() {
if ($(this).text() == val)
$(this).click();
});
}
/**
* Time ranges are added to URL whenever they change so they are kept when
* refreshing the page / copy-pasting URL
*/
function updateURL() {
var uls = $('.timeRangeSwitch').find('ul');
var firstTR = $(uls[0]).find('.selected').text();
var secondTR = $(uls[1]).find('.selected').text();
var qs = new Querystring();
// Set 1 & 2 params
qs.set('1', firstTR);
qs.set('2', secondTR);
// Get result as URL-ready string
var url = $.param(qs.params);
var pageName = $(document).find('title').text();
window.history.replaceState('', pageName, '?' + url);
}
/**
* Returns an array of the parameters sitting in the URL
* Source: http://stackoverflow.com/posts/2880929/revisions
*/
function getURLParams() {
var match,
pl = /\+/g, // Regex for replacing addition symbol with a space
search = /([^&=]+)=?([^&]*)/g,
decode = function (s) { return decodeURIComponent(s.replace(pl, " ")); },
query = window.location.search.substring(1);
var urlParams = {};
while (match = search.exec(query))
urlParams[decode(match[1])] = decode(match[2]);
return urlParams;
}