Added stylesheet

josex2r · Feb 23, 2016 · d6f41d9 · d6f41d9
1 parent 500c984
commit d6f41d9
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 42 deletions.
diff --git 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
@@ -8,6 +8,7 @@
 
 		<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" type="text/css" media="screen" />
 		<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
+		<link rel="stylesheet" href="dist/jquery.slotmachine.css" type="text/css" media="screen" />
 
 		<script type="text/javascript" src="//code.jquery.com/jquery-2.1.1.min.js"></script>
 		<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

diff --git 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
@@ -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,<svg version="1.1" xmlns="http:// www.w3.org/2000/svg" width="0" height="0"><mask id="slotMachineFadeMask" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox"><linearGradient id="slotMachineFadeGradient" gradientUnits="objectBoundingBox" x="0" y="0"><stop stop-color="white" stop-opacity="0" offset="0"></stop><stop stop-color="white" stop-opacity="1" offset="0.25"></stop><stop stop-color="white" stop-opacity="1" offset="0.75"></stop><stop stop-color="white" stop-opacity="0" offset="1"></stop></linearGradient><rect x="0" y="-1" width="1" height="1" transform="rotate(90)" fill="url(#slotMachineFadeMask)"></rect></mask></svg>#slotMachineFadeMask");
+}
diff --git 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 `<svg version="1.1" xmlns="http:// www.w3.org/2000/svg" width="0" height="0"><filter id="slotMachineBlurFilter${blur}"><feGaussianBlur stdDeviation="${blur}" /></filter></svg>#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 = '<svg version="1.1" xmlns="http:// www.w3.org/2000/svg" width="0" height="0">' +
-        '<mask id="slotMachineFadeMask" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">' +
-        '<linearGradient id="slotMachineFadeGradient" gradientUnits="objectBoundingBox" x="0" y="0">' +
-        '<stop stop-color="white" stop-opacity="0" offset="0"></stop>' +
-        '<stop stop-color="white" stop-opacity="1" offset="0.25"></stop>' +
-        '<stop stop-color="white" stop-opacity="1" offset="0.75"></stop>' +
-        '<stop stop-color="white" stop-opacity="0" offset="1"></stop>' +
-        '</linearGradient>' +
-        '<rect x="0" y="-1" width="1" height="1" transform="rotate(90)" fill="url(#slotMachineFadeGradient)"></rect>' +
-        '</mask>' +
-        '</svg>#slotMachineFadeMask';
-
-    // CSS classes
-    $('body').append('<style>' +
-        `.${FX_NO_TRANSITION}{-webkit-transition: none !important;-moz-transition: none !important;-o-transition: none !important;-ms-transition: none !important;transition: none !important;}` +
-        `.${FX_FAST}{${getBlurStyle(5)}}` +
-        `.${FX_NORMAL}{${getBlurStyle(3)}}` +
-        `.${FX_SLOW}{${getBlurStyle(2)}}` +
-        `.${FX_TURTLE}{${getBlurStyle(1)}}` +
-        `.${FX_GRADIENT}{` +
-        '-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,${slotMachineFadeMaskString}");` +
-        '}' +
-        '</style>');
-
-});
-
 class Timer {
     constructor (cb, delay) {
         this.cb = cb;