Added themes for basic stars in flavors for css, fontawesome and boot…

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']);

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($('<div />', {
-                    '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?

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 () {
 

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;
+    }
+  }
+
+}

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;
+    }
+  }
+
+}

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;
+    }
+  }
+
+}

themes/variables.less

@@ -0,0 +1,4 @@
+// Stars
+@star-default: #ddd;
+@star-active: #ffdf88;
+@star-selected: #ffdf88;