diff --git a/Gruntfile.js b/Gruntfile.js index f6bacd8..fae08fe 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -58,9 +58,13 @@ module.exports = function(grunt) { files: 'Gruntfile.js', tasks: ['eslint'] }, - src: { + js: { files: 'src/**/*.js', - tasks: ['babel', 'concat', 'qunit'] + tasks: ['babel', 'concat'] + }, + css: { + files: 'src/**/*.css', + tasks: ['autoprefixer', 'cssmin'] }, test: { files: 'test/**/*.js', @@ -78,6 +82,23 @@ module.exports = function(grunt) { 'tmp/jquery.<%= pkg.name %>.js': 'src/jquery.<%= pkg.name %>.js' } } + }, + autoprefixer: { + options: { + browsers: ['last 10 versions', 'ie 8', 'ie 9'] + }, + dist: { + files: { + 'dist/jquery.<%= pkg.name %>.css': 'src/jquery.<%= pkg.name %>.css' + } + }, + }, + cssmin: { + target: { + files: { + 'dist/jquery.<%= pkg.name %>.min.css': 'dist/jquery.<%= pkg.name %>.css' + } + }, } }); @@ -89,11 +110,13 @@ module.exports = function(grunt) { grunt.loadNpmTasks('grunt-eslint'); grunt.loadNpmTasks('grunt-contrib-watch'); grunt.loadNpmTasks('grunt-babel'); + grunt.loadNpmTasks('grunt-autoprefixer'); + grunt.loadNpmTasks('grunt-contrib-cssmin'); // Default task. - grunt.registerTask('default', ['eslint', 'clean', 'babel', 'concat', 'qunit', 'uglify']); + grunt.registerTask('default', ['eslint', 'clean', 'babel', 'concat', 'autoprefixer', 'cssmin', 'qunit', 'uglify']); // Travis CI task. - grunt.registerTask('travis', ['eslint', 'clean', 'babel', 'concat', 'qunit', 'uglify']); + grunt.registerTask('travis', ['eslint', 'clean', 'babel', 'concat', 'autoprefixer', 'cssmin', 'qunit', 'uglify']); }; diff --git a/index.html b/index.html index 0b350aa..886d163 100644 --- a/index.html +++ b/index.html @@ -8,6 +8,7 @@ + diff --git a/package.json b/package.json index b1f34a2..bfdbb19 100644 --- a/package.json +++ b/package.json @@ -22,9 +22,11 @@ "eslint": "^1.10.3", "eslint-plugin-babel": "^3.0.0", "grunt": ">=0.4.5", + "grunt-autoprefixer": "^3.0.4", "grunt-babel": "^6.0.0", "grunt-contrib-clean": ">=0.4.0", "grunt-contrib-concat": ">=0.3.0", + "grunt-contrib-cssmin": "^0.14.0", "grunt-contrib-qunit": ">=0.2.0", "grunt-contrib-uglify": ">=0.2.0", "grunt-contrib-watch": ">=0.4.0", diff --git a/src/jquery.slotmachine.css b/src/jquery.slotmachine.css new file mode 100644 index 0000000..7b0864c --- /dev/null +++ b/src/jquery.slotmachine.css @@ -0,0 +1,24 @@ +.slotMachineNoTransition { + transition: none !important; +} + +.slotMachineBlurFast { + filter: blur(5px); +} + +.slotMachineBlurMedium { + filter: blur(3px); +} + +.slotMachineBlurSlow { + filter: blur(2px); +} + +.slotMachineBlurTurtle { + filter: blur(1px); +} + +.slotMachineGradient { + -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0,0,0,0)), color-stop(25%, rgba(0,0,0,1)), color-stop(75%, rgba(0,0,0,1)), color-stop(100%, rgba(0,0,0,0)) ); + mask: url("data:image/svg+xml;utf8,#slotMachineFadeMask"); +} diff --git a/src/jquery.slotmachine.js b/src/jquery.slotmachine.js index 15b03cf..dfa8943 100644 --- a/src/jquery.slotmachine.js +++ b/src/jquery.slotmachine.js @@ -26,44 +26,6 @@ const pluginName = 'slotMachine', FX_GRADIENT = 'slotMachineGradient', FX_STOP = FX_GRADIENT; -// Set required styles, filters and masks -$(document).ready(function documentReady() { - - function getSvgFilter (blur) { - return `#slotMachineBlurFilter${blur}`; - } - - function getBlurStyle (amount) { - return `-webkit-filter: blur(${amount}px);-moz-filter: blur(${amount}px);-o-filter: blur(${amount}px);-ms-filter: blur(${amount}px);filter: blur(${amount}px);filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius="${amount}");filter: url("data:image/svg+xml;utf8,${getSvgFilter(amount)}");`; - } - - const slotMachineFadeMaskString = '' + - '' + - '' + - '' + - '' + - '' + - '' + - '' + - '' + - '' + - '#slotMachineFadeMask'; - - // CSS classes - $('body').append(''); - -}); - class Timer { constructor (cb, delay) { this.cb = cb;