diff --git a/gulpfile.js b/gulpfile.js index 905c553..8ca244a 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -20,6 +20,7 @@ var lessFiles = [ var cssPath = path.join(__dirname, 'examples', 'css'), distPath = 'dist'; +var themePath = path.join(__dirname, 'dist', 'themes'); gulp.task('jshint', function() { return gulp.src(srcFile) @@ -50,13 +51,20 @@ gulp.task('less', function() { .pipe(gulp.dest(cssPath)); }); +gulp.task('themes', function() { + return gulp.src(['themes/*.less', '!themes/variables.less']) + .pipe(less()) + .pipe(gulp.dest(themePath)); +}); + gulp.task('build', function() { - runSequence('jshint', 'test', 'uglify'); + runSequence('jshint', 'test', 'themes', 'uglify'); }); gulp.task('watch', function() { gulp.watch(srcFile, ['jshint']); gulp.watch(lessFiles, ['less']); + gulp.watch(themeLessFiles, ['themes']); }); gulp.task('default', ['build']); diff --git a/jquery.barrating.js b/jquery.barrating.js index f25c264..da09cbe 100644 --- a/jquery.barrating.js +++ b/jquery.barrating.js @@ -21,8 +21,14 @@ // wrap element in a wrapper div var wrapElement = function() { + var classes = [self.options.wrapperClass]; + + if (self.options.theme !== '') { + classes.push('br-theme-' + self.options.theme); + } + self.$elem.wrap($('
', { - 'class': self.options.wrapperClass + 'class': classes.join(' ') })); }; @@ -388,6 +394,7 @@ }; $.fn.barrating.defaults = { + theme:'', initialRating:null, // initial rating showValues:false, // display rating values on the bars? showSelectedRating:true, // append a div with a rating to the widget? diff --git a/test/jquery.barrating-spec.js b/test/jquery.barrating-spec.js index ddb6de0..b169c4a 100644 --- a/test/jquery.barrating-spec.js +++ b/test/jquery.barrating-spec.js @@ -37,6 +37,7 @@ describe('bar rating plugin on init with custom options', function () { showValues: false }); expect(BarRating.options).to.be.a('object'); + expect(BarRating.options.theme).to.equal(''); expect(BarRating.options.initialRating).to.equal(null); expect(BarRating.options.showValues).to.equal(false); expect(BarRating.options.showSelectedRating).to.equal(true); @@ -105,6 +106,27 @@ describe('bar rating plugin on show', function () { }); +describe('bar rating themes', function() { + + before(function () { + createSelect(); + }); + + after(function () { + $('#rating').barrating('destroy'); + destroySelect(); + }); + + it('should set the theme class', function() { + $('#rating').barrating({ + theme: 'bootstrap-stars' + }); + + expect($('.br-wrapper').hasClass('br-theme-bootstrap-stars')).to.be.true; + }); + +}); + describe('bar rating plugin on show and rating selected', function () { diff --git a/themes/bootstrap-stars.less b/themes/bootstrap-stars.less new file mode 100644 index 0000000..0ee14f3 --- /dev/null +++ b/themes/bootstrap-stars.less @@ -0,0 +1,34 @@ +@import "variables.less"; + +.br-theme-bootstrap-stars { + + .br-widget { + height: 28px; + + a { + font: normal normal normal 18px/1 'Glyphicons Halflings'; + text-rendering: auto; + -webkit-font-smoothing: antialiased; + text-decoration: none; + margin-right: 2px; + } + + a:after { + content: '\e006'; + color: @star-default; + } + + a.br-active:after { + color: @star-active; + } + + a.br-selected:after { + color: @star-selected; + } + + .br-current-rating { + display: none; + } + } + +} \ No newline at end of file diff --git a/themes/css-stars.less b/themes/css-stars.less new file mode 100644 index 0000000..f2026c3 --- /dev/null +++ b/themes/css-stars.less @@ -0,0 +1,36 @@ +@import "variables.less"; + +.br-theme-css-stars { + + .br-widget { + height: 28px; + + a { + text-decoration: none; + height: 18px; + width: 18px; + float: left; + font-size: 23px; + margin-right: 2px; + } + + a:after { + content: "\2605"; + position: absolute; + color: @star-default; + } + + a.br-active:after { + color: @star-active; + } + + a.br-selected:after { + color: @star-selected; + } + + .br-current-rating { + display: none; + } + } + +} \ No newline at end of file diff --git a/themes/fontawesome-stars.less b/themes/fontawesome-stars.less new file mode 100644 index 0000000..2a1a3f3 --- /dev/null +++ b/themes/fontawesome-stars.less @@ -0,0 +1,34 @@ +@import "variables.less"; + +.br-theme-fontawesome-stars { + + .br-widget { + height: 28px; + + a { + font: normal normal normal 18px/1 FontAwesome; + text-rendering: auto; + -webkit-font-smoothing: antialiased; + text-decoration: none; + margin-right: 2px; + } + + a:after { + content: '\f005'; + color: @star-default; + } + + a.br-active:after { + color: @star-active; + } + + a.br-selected:after { + color: @star-selected; + } + + .br-current-rating { + display: none; + } + } + +} \ No newline at end of file diff --git a/themes/variables.less b/themes/variables.less new file mode 100644 index 0000000..5f409b5 --- /dev/null +++ b/themes/variables.less @@ -0,0 +1,4 @@ +// Stars +@star-default: #ddd; +@star-active: #ffdf88; +@star-selected: #ffdf88; \ No newline at end of file