fivestar.js
3.04 KB
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
/**
* @file
*
* Fivestar JavaScript behaviors integration.
*/
/**
* Create a degradeable star rating interface out of a simple form structure.
*
* Originally based on the Star Rating jQuery plugin by Wil Stuckey:
* http://sandbox.wilstuckey.com/jquery-ratings/
*/
(function($){ // Create local scope.
Drupal.behaviors.fivestar = {
attach: function (context) {
$(context).find('div.fivestar-form-item').once('fivestar', function() {
var $this = $(this);
var $container = $('<div class="fivestar-widget clearfix"></div>');
var $select = $('select', $this);
// Setup the cancel button
var $cancel = $('option[value="0"]', $this);
if ($cancel.length) {
$('<div class="cancel"><a href="#0" title="' + $cancel.text() + '">' + $cancel.text() + '</a></div>')
.appendTo($container);
}
// Setup the rating buttons
var $options = $('option', $this).not('[value="-"], [value="0"]');
var index = -1;
$options.each(function(i, element) {
var classes = 'star-' + (i+1);
classes += (i + 1) % 2 == 0 ? ' even' : ' odd';
classes += i == 0 ? ' star-first' : '';
classes += i + 1 == $options.length ? ' star-last' : '';
$('<div class="star"><a href="#' + element.value + '" title="' + element.text + '">' + element.text + '</a></div>')
.addClass(classes)
.appendTo($container);
if (element.value == $select.val()) {
index = i + 1;
}
});
if (index != -1) {
$container.find('.star').slice(0, index).addClass('on');
}
$container.addClass('fivestar-widget-' + ($options.length));
$container.find('a')
.bind('click', $this, Drupal.behaviors.fivestar.rate)
.bind('mouseover', $this, Drupal.behaviors.fivestar.hover);
$container.bind('mouseover mouseout', $this, Drupal.behaviors.fivestar.hover);
// Attach the new widget and hide the existing widget.
$select.after($container).css('display', 'none');
// Allow other modules to modify the widget.
Drupal.attachBehaviors($this);
});
},
rate: function(event) {
var $this = $(this);
var $widget = event.data;
var value = this.hash.replace('#', '');
$('select', $widget).val(value).change();
var $this_star = (value == 0) ? $this.parent().parent().find('.star') : $this.closest('.star');
$this_star.prevAll('.star').andSelf().addClass('on');
$this_star.nextAll('.star').removeClass('on');
if(value==0){
$this_star.removeClass('on');
}
event.preventDefault();
},
hover: function(event) {
var $this = $(this);
var $widget = event.data;
var $target = $(event.target);
var $stars = $('.star', $this);
if (event.type == 'mouseover') {
var index = $stars.index($target.parent());
$stars.each(function(i, element) {
if (i <= index) {
$(element).addClass('hover');
} else {
$(element).removeClass('hover');
}
});
} else {
$stars.removeClass('hover');
}
}
};
})(jQuery);