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
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
|
/*!
* Piwik - Web Analytics
*
* @link http://piwik.org
* @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
*/
(function($) {
$(document).ready(function() {
var donateAmounts = [0, 30, 60, 90, 120];
// returns the space between each donation amount in the donation slider
var getTickWidth = function(slider)
{
var effectiveSliderWidth = $('.slider-range', slider).width() - $('.slider-position', slider).width();
return effectiveSliderWidth / (donateAmounts.length - 1);
};
// returns the position index on a slider based on a x coordinate value
var getPositionFromPageCoord = function(slider, pageX)
{
return Math.round((pageX - $('.slider-range', slider).offset().left) / getTickWidth(slider));
};
// set's the correct amount text & smiley face image based on the position of the slider
var setSmileyFaceAndAmount = function(slider, pos)
{
// set text yearly amount
$('.slider-donate-amount', slider).text('$' + donateAmounts[pos] + '/' + _pk_translate('General_YearShort_js'));
// set the right smiley face
$('.slider-smiley-face').attr('src', 'themes/default/images/smileyprog_' + pos + '.png');
// set the hidden option input for paypal
var option = Math.max(1, pos);
$('.piwik-donate-call input[name=os0]').val("Option " + option);
};
// move's a slider's position to a specific spot
var moveSliderPosition = function(slider, to)
{
// make sure 'to' is valid
if (to < 0)
{
to = 0;
}
else if (to >= donateAmounts.length)
{
to = donateAmounts.length - 1;
}
// set the slider position
var left = to * getTickWidth(slider);
if (left == 0)
{
left = -1; // at position 0 we move one pixel left to cover up some of slider bar
}
$('.slider-position', slider).css({
left: left + 'px'
});
// reset the smiley face & amount based on the new position
setSmileyFaceAndAmount(slider, to);
};
// when a slider is clicked, set the amount & smiley face appropriately
$('body').on('click', '.piwik-donate-slider>.slider-range', function(e) {
var slider = $(this).parent(),
currentPageX = $('.slider-position', this).offset().left,
currentPos = getPositionFromPageCoord(slider, currentPageX),
pos = getPositionFromPageCoord(slider, e.pageX);
// if the closest position is the current one, use the other position since
// the user obviously wants to move the slider.
if (currentPos == pos)
{
// if click is to right, go forward one, else backwards one
if (e.pageX > currentPageX)
{
++pos;
}
else
{
--pos;
}
}
moveSliderPosition(slider, pos);
});
// when the smiley icon is clicked, move the position up one to demonstrate how to use the slider
$('body').on('click', '.piwik-donate-slider .slider-smiley-face,.piwik-donate-slider .slider-donate-amount',
function(e) {
var slider = $(this).closest('.piwik-donate-slider'),
currentPageX = $('.slider-position', slider).offset().left,
currentPos = getPositionFromPageCoord(slider, currentPageX);
moveSliderPosition(slider, currentPos + 1);
}
);
// stores the current slider being dragged
var draggingSlider = false;
// start dragging on mousedown for a slider's position bar
$('body').on('mousedown', '.piwik-donate-slider .slider-position', function () {
draggingSlider = $(this).parent().parent();
});
// move the slider position if currently dragging when the mouse moves anywhere over the entire page
$('body').on('mousemove', function(e) {
if (draggingSlider)
{
var slider = draggingSlider.find('.slider-range'),
sliderPos = slider.find('.slider-position'),
left = e.pageX - slider.offset().left;
// only move slider if the mouse x-coord is still on the slider (w/ some padding for borders)
if (left <= slider.width() - sliderPos.width() + 2
&& left >= -2)
{
sliderPos.css({left: left + 'px'});
var closestPos = Math.round(left / getTickWidth(draggingSlider));
setSmileyFaceAndAmount(draggingSlider, closestPos);
}
}
});
// stop dragging and normalize a slider's position on mouseup over the entire page
$('body').on('mouseup', function() {
if (draggingSlider)
{
var sliderPos = $('.slider-position', draggingSlider),
slider = sliderPos.parent();
if (sliderPos.length)
{
// move the slider to the nearest donation amount position
var pos = getPositionFromPageCoord(draggingSlider, sliderPos.offset().left);
moveSliderPosition(draggingSlider, pos);
}
draggingSlider = false; // stop dragging
}
});
// event for programatically changing the position
$('body').on('piwik:changePosition', '.piwik-donate-slider', function(e, data) {
moveSliderPosition(this, data.position);
});
});
}(jQuery));
|
