├── .gitignore
├── Gruntfile.js
├── demo
├── css
│ ├── demo.css
│ └── reset.css
├── js
│ └── demo.js
└── index.html
├── jquery.ratyli.min.js
├── README.md
├── jquery.ratyli.js
└── LICENSE
/.gitignore:
--------------------------------------------------------------------------------
1 | .idea/
2 | node_modules/
3 |
--------------------------------------------------------------------------------
/Gruntfile.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | module.exports = function(grunt) {
4 |
5 | grunt.initConfig({
6 | connect: {
7 | server: {
8 | options: {
9 | port: 9000,
10 | base: '',
11 | }
12 | }
13 | },
14 | uglify: {
15 | target: {
16 | banner: 'Ratyli: jquery rating plugin - (c) 2015 Peter Varga [info@vargapeter.com] - released under the Apache 2.0 license',
17 | files: {
18 | 'jquery.ratyli.min.js': ['jquery.ratyli.js']
19 | }
20 | }
21 | },
22 | watch: {
23 | files: ['jquery.ratyli.js'],
24 | tasks: ['uglify']
25 | }
26 | });
27 |
28 |
29 |
30 | grunt.loadNpmTasks('grunt-contrib-watch');
31 | grunt.loadNpmTasks('grunt-contrib-connect');
32 | grunt.loadNpmTasks('grunt-contrib-uglify');
33 |
34 | grunt.registerTask('default', ['connect','watch']);
35 | };
--------------------------------------------------------------------------------
/demo/css/demo.css:
--------------------------------------------------------------------------------
1 | /* No CSS needed, but you can pimp the container and the signs as you wish. */
2 |
3 |
4 | /* all sign style */
5 | .ratyli .rate{color: #ccc; font-size: 24px;}
6 |
7 | /* empty sign style */
8 | .ratyli .rate-empty{color: #666;}
9 |
10 | /* full sign style after rating*/
11 | .ratyli.rated .rate-full{color: #fe5845;}
12 |
13 | /* active signs (hover)*/
14 | .ratyli .rate-active{color: #a94039;}
15 |
16 |
17 |
18 | /* layout styles (only for demo)*/
19 | body{font-family: sans-serif; background:#222; }
20 | h1{color:#00dd9a; text-align:center; font-size:24px; margin:30px 0;}
21 | h2{color:#fe5845; font-weight:300; font-size:16px; margin:15px 0;}
22 | p{clear:both; color: #ccc; text-align:center; padding:50px 0;}
23 | footer p{font-size: 80%}
24 | a{color:#00dd9a}
25 | .demo{float:left; width:18%; padding:30px 1%; text-align:center;}
26 | @media screen and (max-width: 920px) {
27 | .demo{float:none; width:90%; padding:20px 5%;}
28 | }
29 |
30 |
31 |
--------------------------------------------------------------------------------
/demo/css/reset.css:
--------------------------------------------------------------------------------
1 | /* http://meyerweb.com/eric/tools/css/reset/
2 | v2.0 | 20110126
3 | License: none (public domain)
4 | */
5 |
6 | html, body, div, span, applet, object, iframe,
7 | h1, h2, h3, h4, h5, h6, p, blockquote, pre,
8 | a, abbr, acronym, address, big, cite, code,
9 | del, dfn, em, img, ins, kbd, q, s, samp,
10 | small, strike, strong, sub, sup, tt, var,
11 | b, u, i, center,
12 | dl, dt, dd, ol, ul, li,
13 | fieldset, form, label, legend,
14 | table, caption, tbody, tfoot, thead, tr, th, td,
15 | article, aside, canvas, details, embed,
16 | figure, figcaption, footer, header, hgroup,
17 | menu, nav, output, ruby, section, summary,
18 | time, mark, audio, video {
19 | margin: 0;
20 | padding: 0;
21 | border: 0;
22 | font-size: 100%;
23 | font: inherit;
24 | vertical-align: baseline;
25 | }
26 | /* HTML5 display-role reset for older browsers */
27 | article, aside, details, figcaption, figure,
28 | footer, header, hgroup, menu, nav, section {
29 | display: block;
30 | }
31 | body {
32 | line-height: 1;
33 | }
34 | ol, ul {
35 | list-style: none;
36 | }
37 | blockquote, q {
38 | quotes: none;
39 | }
40 | blockquote:before, blockquote:after,
41 | q:before, q:after {
42 | content: '';
43 | content: none;
44 | }
45 | table {
46 | border-collapse: collapse;
47 | border-spacing: 0;
48 | }
--------------------------------------------------------------------------------
/demo/js/demo.js:
--------------------------------------------------------------------------------
1 | /* GitHub: https://github.com/peet86/Ratyli */
2 |
3 | $(function() {
4 | // Default
5 | $("#demo1 .ratyli").ratyli();
6 |
7 | // Configure with Datasets
8 | $("#demo2 .ratyli").ratyli();
9 |
10 | // Configure with JS
11 | $("#demo3 .ratyli").ratyli({rate:3,max:7});
12 |
13 | // Custom Signs
14 | $("#demo4 .ratyli").ratyli();
15 |
16 | // Font Awesome Signs
17 | $("#demo5 .ratyli").ratyli({
18 | full:"",
19 | empty:"",
20 |
21 | });
22 |
23 | // Rated Callback
24 | $("#demo6 .ratyli").ratyli({
25 | onRated:function(value,init){
26 | // rating callback
27 | if(!init) alert(value); // prevent run at init
28 | },
29 | });
30 |
31 | // Sign Callbacks:
32 | $("#demo7 .ratyli").ratyli({
33 | onSignClick:function(value,target){
34 | // sign click event callback
35 | alert("clicked: "+target);
36 | },
37 | onSignEnter:function(value,target){
38 | // sign mouseenter event callback
39 | console.log("enter : "+value);
40 | },
41 | onSignLeave:function(value,target){
42 | // sign mouseleave event callback
43 | console.log("leave : "+target);
44 | },
45 | });
46 |
47 | // Custom cursor
48 | $("#demo8 .ratyli").ratyli({cursor:"crosshair"});
49 |
50 | // Disabled
51 | $("#demo9 .ratyli").ratyli({disable:true});
52 |
53 | // Unrateable
54 | $("#demo10 .ratyli").ratyli({unrateable:true});
55 |
56 |
57 | });
--------------------------------------------------------------------------------
/jquery.ratyli.min.js:
--------------------------------------------------------------------------------
1 | !function(a){a.ratyli=function(b,c){var d=this;d.$el=a(b),d.el=b,d.$el.data("ratyli",d),d.init=function(){d.options=a.extend({},a.ratyli.defaultOptions,c),d.options=a.extend({},d.options,d.$el.data()),d.set(d.options.rate,!0),d.$el.on("click","> *",function(b){if(!d.options.disable){var c=b.target;"SPAN"!=c.tagName&&(c=c.parentNode),d.options.onSignClick.call(d,c);var e=a(c).prevAll().length+1;d.set(e)}}),d.$el.on("mouseenter","> *",function(b){var c=b.target;"SPAN"!=c.tagName&&(c=c.parentNode),d.options.disable||(a(c).addClass("rate-active"),a(c).prevAll().addClass("rate-active")),d.options.onSignEnter.apply(null,[d.options.rate,c])}),d.$el.on("mouseleave","> *",function(b){var c=b.target;"SPAN"!=c.tagName&&(c=c.parentNode),d.options.disable||(a(c).removeClass("rate-active"),a(c).prevAll().removeClass("rate-active")),d.options.onSignLeave.apply(null,[d.options.rate,c])})},d.set=function(a,b){(0>a||a%1!=0||a>d.options.ratemax)&&(a=0),1!=a||1!=d.options.rate||1!=d.options.unrateable||b||(a=0),d.options.rate=a,d.$el.html(""),0!=d.options.rate&&d.$el.attr("data-rate",d.options.rate),d.$el.attr("data-ratemax",d.options.ratemax);for(var c=0;c
` tag: 24 | ```html 25 | 26 | ``` 27 | 28 | 29 | ### CSS 30 | No CSS required, but you can pimp your ratings with these CSS selectors: 31 | ```css 32 | .ratyli{} /* container style*/ 33 | .ratyli.rated{} /* container style after rating*/ 34 | .ratyli .rate{} /* sign style*/ 35 | .ratyli .rate-active{} /* sign hover style */ 36 | .ratyli .rate-full{} /* full sign style */ 37 | .ratyli .rate-empty{} /* empty sign style */ 38 | /*etc..*/ 39 | ``` 40 | Check the demo and play with the examples: 41 | http://codepen.io/peet86/pen/LEzrYy (CodePen) 42 | 43 | ### Font Awesome 44 | You can use the amazing Font Awesome icons as rating signs easily: 45 | ```js 46 | $(".ratyli").ratyli({ 47 | full:"", 48 | empty:"", 49 | }); 50 | ``` 51 | 52 | ### Updates 53 | 54 | #### v0.3 (24.11.2015) 55 | - unrateable attribute 56 | - html5 data-rate and data-ratemax attributes 57 | - other small fixes 58 | 59 | #### v0.2.1 (09.02.2015) 60 | - rated CSS selector fix 61 | 62 | #### v0.2 (09.02.2015) 63 | - Font Awesome fix 64 | - interactive parameter replaced with disabled 65 | 66 | ## Notes 67 | * Requires jQuery 1.7+. 68 | * Works in all A-grade browsers and IE9+. 69 | * The name inspired by the famous hungarian food: Ratyli. ;) 70 | 71 | ## License 72 | This plugin is available under Apache 2.0 license. 73 | 74 | -------------------------------------------------------------------------------- /demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 |
5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
77 |