diff --git a/LICENSE.txt b/LICENSE.txt new file mode 100644 index 00000000..babac6d0 --- /dev/null +++ b/LICENSE.txt @@ -0,0 +1,21 @@ +The MIT License + +Copyright (c) 2010 Washington Botelho dos Santos + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in +all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN +THE SOFTWARE. \ No newline at end of file diff --git a/README b/README deleted file mode 100644 index 05526647..00000000 --- a/README +++ /dev/null @@ -1,46 +0,0 @@ -/** - * jQuery Raty - A Star Rating Plugin - http://wbotelhos.com/raty - * -------------------------------------------------------------------------- - * - * Licensed under The MIT License - * - * @version 0.4 - * @since 11.06.2010 - * @author Washington Botelho dos Santos - * @link http://wbotelhos.com/raty - * @twitter http://twitter.com/wbotelhos - * @license http://www.opensource.org/licenses/mit-license.php MIT - * @package jQuery Plugins - * - * Thanks to: - * -------------------------------------------------------------------------- - * @glbenz - * @franciscosouza - * - * Usage (default values): - * -------------------------------------------------------------------------- - * $('div#star').raty({ - * hintList: ['bad', 'poor', 'regular', 'good', 'gorgeous'], // A hint information for default 5 stars. - * number: 5, // Number of star. - * path: 'img, // Path of images. - * readOnly: false, // read-only or not. - * scoreName: 'score', // The name of target score. - * showHalf: false, // Active the half star. - * starHalf: 'star-half.png', // The image of the half star. - * start: 0, // Start with a score value. - * starOff: 'star-off.png', // The image of the off star. - * starOn: 'star-on.png' // The image of the on star. - * //onClick: function() { alert('clicked!'); } // A default function can to be setted here. - * }); - * - *
- * - * Public functions: - * -------------------------------------------------------------------------- - * $.fn.raty.start(3); // Starting the rating with 3 stars later. - * $.fn.raty.readOnly(true); // Adjusts the rating for read-only later. - * $.fn.raty.click(2); // Click in a star later. - * - * Should come after the current raty and before the anothers one. Because it takes the last called raty. - * - */ \ No newline at end of file diff --git a/README.txt b/README.txt new file mode 100644 index 00000000..d3f97938 --- /dev/null +++ b/README.txt @@ -0,0 +1,53 @@ +/** + * jQuery Raty - A Star Rating Plugin - http://wbotelhos.com/raty + * -------------------------------------------------------------------------- + * + * jQuery Raty is a plugin that generates a customizable star rating automatically. + * + * Licensed under The MIT License + * + * @version 0.5 + * @since 11.06.2010 + * @author Washington Botelho dos Santos + * @link http://wbotelhos.com/raty + * @twitter http://twitter.com/wbotelhos + * @license http://www.opensource.org/licenses/mit-license.php MIT + * @package jQuery Plugins + * + * Thanks to: + * -------------------------------------------------------------------------- + * @glbenz + * @franciscosouza + * + * Usage (default values): + * -------------------------------------------------------------------------- + * $('div#star').raty({ + * cancelHint: 'cancel this rate!', // The hint information. + * cancelOff: 'cancel-off.png' // Name of the cancel image off. + * cancelOn: 'cancel-on.png' // Name of the cancel image on. + * cancelPlace: 'left', // Position of the cancel button. + * hintList: ['bad', 'poor', 'regular', 'good', 'gorgeous'], // A hint information for default 5 stars. + * number: 5, // Number of star. + * path: 'img, // Path of images. + * readOnly: false, // read-only or not. + * scoreName: 'score', // The name of target score. + * showCancel: false, // If will be showed a button to cancel the rate. + * showHalf: false, // Active the half star. + * starHalf: 'star-half.png', // The image of the half star. + * start: 0, // Start with a score value. + * starOff: 'star-off.png', // Name of the star image on. + * starOn: 'star-on.png' // Name of the star image on. + * //onClick: function() { alert('clicked!'); } // A default function can to be setted here. + * }); + * + *
+ * + * Public functions: + * -------------------------------------------------------------------------- + * $.fn.raty.start(3); // Starting the rating with 3 stars later. + * $.fn.raty.readOnly(true); // Adjusts the rating for read-only later. + * $.fn.raty.click(2); // Click in a star later. + * + * Should come after the current raty and before the anothers one. Because it takes the last called raty. + * + */ \ No newline at end of file diff --git a/changelog.txt b/changelog.txt index 19ecaaed..447d7a94 100644 --- a/changelog.txt +++ b/changelog.txt @@ -2,6 +2,13 @@ * jQuery Raty - A Star Rating Plugin - http://wbotelhos.com/raty * -------------------------------------------------------------------------- * + * 07.08.2010 + * - Now you can put a cancel button to cancel your rating; + * - Choose the cancel image off; + * - Choose the cancel image on; + * - Choose de left or right side position for the cancel button; + * - Change de hint of the cancel button. + * * 07.02.2010 * - Added support to display half star. * diff --git a/img/cancel-off.png b/img/cancel-off.png new file mode 100644 index 00000000..a3031f05 Binary files /dev/null and b/img/cancel-off.png differ diff --git a/img/cancel-on.png b/img/cancel-on.png new file mode 100644 index 00000000..08f24936 Binary files /dev/null and b/img/cancel-on.png differ diff --git a/index.html b/index.html index c232c639..287152a4 100644 --- a/index.html +++ b/index.html @@ -6,10 +6,9 @@ jQuery Raty - A Star Rating Plugin - - + - + - - + span#version { + color: #777; + font: 10px verdana; + } + -
jQuery Raty - A Star Rating Plugin
+
jQuery Raty - A Star Rating Plugin (current version: 0.5)
-
+
buy me a coffee

@@ -200,7 +175,7 @@
$('#star').raty();

- <div id="fixed"></div> + <div id="star"></div>
Started with a score and read only value:
@@ -208,8 +183,8 @@
$('#fixed').raty({
-   readOnly: true,
-   start: 2
+   readOnly:  true,
+   start:     2
});

<div id="fixed"></div> @@ -220,8 +195,8 @@
$('#custom').raty({
-   scoreName: 'entity.score',
-   number: 10
+   scoreName:  'entity.score',
+   number:     10
});

<div id="custom"></div> @@ -258,27 +233,72 @@
$('#half').raty({
-   start: 3.3,
-   showHalf: true
+   start:     3.3,
+   showHalf:  true
});

<div id="half"></div>
+
With a default cancel button:
+
+ +
+ $('#cancel').raty({
+   showCancel: true
+ });

+ + <div id="cancel"></div> +
+ +
With a custom cancel button:
+
+ +
+ $('#cancel-custom').raty({
+   cancelHint:   'remove my rating!',
+   cancelPlace:  'right',
+   showCancel:   true
+ });

+ + <div id="cancel-custom"></div> +
+
Default options:
- hintList:   ['bad', 'poor', 'regular', 'good', 'gorgeous']
- number:     5
- path:       'img/'
- readOnly:   false
- scoreName:  'score'
- showHalf:   false,
- starHalf:   'star-half.png',
- start:      0
- starOff:    'star-off.png'
- starOn:     'star-on.png'
- //onClick:    function() { alert('clicked!'); } + cancelHint:   'cancel this rating!'
+
The hint information.
+ cancelOff:    'cancel-off.png'
+
Name of the cancel image off.
+ cancelOn:     'cancel-on.png'
+
Name of the cancel image on.
+ cancelPlace:  'left'
+
Position of the cancel button.
+ hintList:     ['bad', 'poor', 'regular', 'good', 'gorgeous']
+
List of names that will be used as a hint on each star.
+ number:       5
+
Number of stars that will be presented.
+ path:         'img/'
+
Path where are the images of the stars.
+ readOnly:     false
+
If the stars will be read-only.
+ scoreName:    'score'
+
Name of the hidden field that holds the score value.
+ showCancel:   false
+
If will be showed a button to cancel the rating.
+ showHalf:     false
+
If will show half star if come a float number as score.
+ starHalf:     'star-half.png'
+
The name of the half star image.
+ start:        0
+
Number of stars to be selected.
+ starOff:      'star-off.png'
+
Name of the star image off.
+ starOn:       'star-on.png'
+
Name of the star image on.
+ //onClick:    function() { alert('clicked!'); } +
Function that returns the selected value.
Public functions: *
@@ -304,4 +324,59 @@
+ + \ No newline at end of file diff --git a/js/jquery.raty.js b/js/jquery.raty.js index 322c4063..08e66156 100755 --- a/js/jquery.raty.js +++ b/js/jquery.raty.js @@ -2,9 +2,11 @@ * jQuery Raty - A Star Rating Plugin - http://wbotelhos.com/raty * -------------------------------------------------------------------------- * + * jQuery Raty is a plugin that generates a customizable star rating automatically. + * * Licensed under The MIT License * - * @version 0.4 + * @version 0.5 * @since 11.06.2010 * @author Washington Botelho dos Santos * @link http://wbotelhos.com/raty @@ -14,29 +16,34 @@ * * Usage (default values): * -------------------------------------------------------------------------- - * $('div#star').raty({ - * hintList: ['bad', 'poor', 'regular', 'good', 'gorgeous'], // A hint information for default 5 stars. - * number: 5, // Number of star. - * path: 'img, // Path of images. - * readOnly: false, // read-only or not. - * scoreName: 'score', // The name of target score. - * showHalf: false, // Active the half star. - * starHalf: 'star-half.png', // The image of the half star. - * start: 0, // Start with a score value. - * starOff: 'star-off.png', // The image of the off star. - * starOn: 'star-on.png' // The image of the on star. - * //onClick: function() { alert('clicked!'); } // A default function can to be setted here. +* $('div#star').raty({ + * cancelHint: 'cancel this rating!', // The hint information. + * cancelOff: 'cancel-off.png' // The image of the off cancel. + * cancelOn: 'cancel-on.png' // The image of the on cancel. + * cancelPlace: 'left', // Position of the cancel button. + * hintList: ['bad', 'poor', 'regular', 'good', 'gorgeous'], // A hint information for default 5 stars. + * number: 5, // Number of star. + * path: 'img, // Path of images. + * readOnly: false, // read-only or not. + * scoreName: 'score', // The name of target score. + * showCancel: false, // If will be showed a button to cancel the rating. + * showHalf: false, // Active the half star. + * starHalf: 'star-half.png', // The image of the half star. + * start: 0, // Start with a score value. + * starOff: 'star-off.png', // The image of the off star. + * starOn: 'star-on.png' // The image of the on star. + * //onClick: function() { alert('clicked!'); } // A default function can to be setted here. * }); * - *
- * + *
+ * * Public functions: * -------------------------------------------------------------------------- - * $.fn.raty.start(3); // Starting the rating with 3 stars later. - * $.fn.raty.readOnly(true); // Adjusts the rating for read-only later. - * $.fn.raty.click(2); // Click in a star later. + * $.fn.raty.start(3); // Starting the rating with 3 stars later. + * $.fn.raty.readOnly(true); // Adjusts the rating for read-only later. + * $.fn.raty.click(2); // Click in a star later. * - * Should come after the current raty and before the anothers one. Because it takes the last called raty. + * Should come after the current raty and before the anothers one. Because it takes the last called raty. * */ @@ -56,26 +63,28 @@ if (options.number > 20) { options.number = 20; } - + if (options.path.substring(options.path.length - 1, options.path.length) != '/') { options.path += '/'; } - + // TODO: Using var for values that will be used into a function later (live/bind), to keep the current value and not the last one. Why, Mr. Anderson? Why? - var containerId = $this.attr('id'); - var path = options.path; - var showHalf = options.showHalf; - var starHalf = options.starHalf; - var starOff = options.starOff; - var starOn = options.starOn; - var onClick = options.onClick; - - var start = 0; + var containerId = $this.attr('id'), + path = options.path, + cancelOff = options.cancelOff, + cancelOn = options.cancelOn, + showHalf = options.showHalf, + starHalf = options.starHalf, + starOff = options.starOff, + starOn = options.starOn, + onClick = options.onClick, + start = 0, + hint = ''; + if (!isNaN(options.start) && options.start > 0) { start = (options.start > options.number) ? options.number : options.start; } - var hint = ''; for (var i = 1; i <= options.number; i++) { hint = (options.number <= options.hintList.length && options.hintList[i - 1] !== null) ? options.hintList[i - 1] : i; // Avoids a nonexistent index (undefined) and ensures that the hint will be applied, it means different from null. Otherwise applies the current number. @@ -86,16 +95,14 @@ .append((i < options.number) ? ' ' : ''); } - $this - .css('width', options.number * 20) // star: 16px and space 4px. A little bit more for safety Unbuntu's FF. - .append(''); + $this.append(''); $('#' + containerId + '-score').val(start); if (showHalf) { - var score = $('input#' + containerId + '-score').val(); // [x ... x.25] || [x.26 ... x.75] || [x.76 ... (x + 1)] - var rounded = Math.ceil(score); // (x + 1) - var diff = (rounded - score).toFixed(1); // [0.9 ... 0.8] || [0.7 ... 0.3] || [0.2 ... 0] + var score = $('input#' + containerId + '-score').val(), // [x ... x.25] || [x.26 ... x.75] || [x.76 ... (x + 1)] + rounded = Math.ceil(score), // (x + 1) + diff = (rounded - score).toFixed(1); // [0.9 ... 0.8] || [0.7 ... 0.3] || [0.2 ... 0] if (diff >= 0.3 && diff <= 0.7) { // 3.5 In the center interval the score is with a next star. rounded = rounded - 0.5; // 3 . half @@ -108,8 +115,38 @@ } if (!options.readOnly) { + if (options.showCancel) { + var cancel = 'x'; + + if (options.cancelPlace == 'left') { + $this.prepend(cancel + ' '); + } else { + $this.append(' ').append(cancel); + } + + $this.css('width', options.number * 20 + 20); + + $('#' + containerId + ' img.button-cancel') + .live('mouseenter', function() { + $(this).attr('src', path + cancelOn); + $('img.' + containerId).attr('src', path + starOff); + }) + .live('mouseleave', function() { + $(this).attr('src', path + cancelOff); + $('img.' + containerId).trigger('mouseout'); + }) + .live('click', function() { + $('input#' + containerId + '-score').val(0); + if (onClick) { + onClick(this.alt); + } + }); + } else { + $this.css('width', options.number * 20); + } - $('img.' + containerId).live('mouseenter', function() { + $('img.' + containerId) + .live('mouseenter', function() { var qtyStar = $('img.' + containerId).length; for (var i = 1; i <= qtyStar; i++) { @@ -119,20 +156,16 @@ $('img#' + containerId + '-' + i).attr('src', path + starOff); } } - }); - - $('img.' + containerId).live('click', function() { + }) + .live('click', function() { $('input#' + containerId + '-score').val(this.alt); - if (onClick) { onClick(this.alt); } }); $this.live('mouseleave', function() { - var id = $(this).attr('id'); - var qtyStar = $('img.' + id).length; - var score = $('input#' + id + '-score').val(); + var id = $(this).attr('id'), qtyStar = $('img.' + id).length, score = $('input#' + id + '-score').val(); for (var i = 1; i <= qtyStar; i++) { if (i <= score) { @@ -143,9 +176,7 @@ } if (showHalf) { - var score = $('input#' + id + '-score').val(); - var rounded = Math.ceil(score); - var diff = (rounded - score).toFixed(1); + var score = $('input#' + id + '-score').val(), rounded = Math.ceil(score), diff = (rounded - score).toFixed(1); if (diff >= 0.3 && diff <= 0.7) { rounded = rounded - 0.5; @@ -165,11 +196,16 @@ }; $.fn.raty.defaults = { + cancelHint: 'cancel this rating!', + cancelOff: 'cancel-off.png', + cancelOn: 'cancel-on.png', + cancelPlace: 'left', hintList: ['bad', 'poor', 'regular', 'good', 'gorgeous'], number: 5, path: 'img/', readOnly: false, scoreName: 'score', + showCancel: false, showHalf: false, starHalf: 'star-half.png', start: 0, @@ -247,8 +283,8 @@ }; function initialize(start) { - var id = $this.attr('id'); - var qtyStar = $('img.' + id).length; + var id = $this.attr('id'), + qtyStar = $('img.' + id).length; $('input#' + id + '-score').val(start); for (var i = 1; i <= qtyStar; i++) {