Merge branch 'release/0.0.2'

Gruntfile.js

@@ -9,7 +9,7 @@ module.exports = function (grunt) {
   // Project configuration.
   grunt.initConfig({
     // Metadata.
-    pkg: grunt.file.readJSON('package.json'),
+    pkg: grunt.file.readJSON('_unified_manifest.json'),
     banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' +
       '<%= grunt.template.today("yyyy-mm-dd") %>\n' +
       '<%= pkg.homepage ? "* " + pkg.homepage + "\\n" : "" %>' +

README.md

@@ -147,6 +147,42 @@ The descriptors can be combined by space-separating them, e.g.:
 - `'top right'`
 - etc.
 
+#### Flip
+
+Cursors can be flipped horizontally, vertically, or in both directions, by setting the `flip` option:
+
+```javascript
+// Horizontal flip
+$('body').awesomeCursor('pencil', {
+  flip: 'horizontal'
+});
+
+// Vertical flip
+$('body').awesomeCursor('pencil', {
+  flip: 'vertical'
+});
+
+// Horizontal and Vertical flip
+$('body').awesomeCursor('pencil', {
+  flip: 'both'
+});
+```
+
+```javascript
+$('body').awesomeCursor('pencil', {
+  hotspot: [0, 17]
+});
+```
+
+Or, using a string descriptor:
+
+```javascript
+$('body').awesomeCursor('pencil', {
+  hotspot: 'bottom left'
+});
+```
+
+
 ## Examples
 
 ```javascript
@@ -164,6 +200,14 @@ $('body').awesomeCursor('location-arrow', {
   hotspot: 'top right',
   size: 48
 });
+
+// Set the cursor to be a horizontally flipped version of the location arrow
+$('body').awesomeCursor('location-arrow', {
+  color: '#0050FF',
+  hotspot: 'top right',
+  size: 48,
+  flip: 'horizontal'
+});
 ```
 
 ## Browser Support
@@ -189,4 +233,5 @@ See [CONTRIBUTING.md](https://github.com/jwarby/jquery-awesome-cursor/blob/maste
 
 ## Release History
 
+- `v0.0.2` - `17th Nov 2014` - Add the `flip` option to allow cursors to be flipped horizontally, vertically, or in both directions
 - `v0.0.1` - `10th Nov 2014` - First version

_unified_manifest.json

@@ -1,6 +1,6 @@
 {
   "name": "jquery-awesome-cursor",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "jQuery plugin for using FontAwesome icons as custom CSS cursors",
   "keywords": [
     "jquery-plugin",

awesome-cursor.jquery.json

@@ -1,6 +1,6 @@
 {
   "name": "jquery-awesome-cursor",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "jQuery plugin for using FontAwesome icons as custom CSS cursors",
   "keywords": [
     "jquery-plugin",

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "jquery-awesome-cursor",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "jQuery plugin for using FontAwesome icons as custom CSS cursors",
   "keywords": [
     "jquery-plugin",

dist/jquery.awesome-cursor.js

@@ -1,4 +1,4 @@
-/*! jquery-awesome-cursor - v0.0.0 - 2014-11-10
+/*! jquery-awesome-cursor - v0.0.2 - 2014-11-17
 * https://jwarby.github.io/jquery-awesome-cursor
 * Copyright (c) 2014 James Warwood; Licensed MIT */
 ;(function(global, factory) {
@@ -118,6 +118,17 @@
 
       context = canvas.getContext('2d');
 
+      // Check flip option
+      if (options.flip === 'horizontal' || options.flip === 'both') {
+        context.translate(canvas.width, 0);//canvas.height / 2);
+        context.scale(-1, 1);
+      }
+
+      if (options.flip === 'vertical' || options.flip === 'both') {
+        context.translate(0, canvas.height);
+        context.scale(1, -1);
+      }
+
       context.fillStyle = options.color;
       context.font = options.size + 'px FontAwesome';
       context.textAlign = 'center';
@@ -143,6 +154,7 @@
   $.fn.awesomeCursor.defaults = {
     color: '#000000',
     size: 18,
-    hotspot: [0, 0]
+    hotspot: [0, 0],
+    flip: ''
   };
 });

package.json

@@ -1,6 +1,6 @@
 {
   "name": "jquery-awesome-cursor",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "jQuery plugin for using FontAwesome icons as custom CSS cursors",
   "keywords": [
     "jquery-plugin",

src/jquery.awesome-cursor.js

@@ -115,6 +115,17 @@
 
       context = canvas.getContext('2d');
 
+      // Check flip option
+      if (options.flip === 'horizontal' || options.flip === 'both') {
+        context.translate(canvas.width, 0);//canvas.height / 2);
+        context.scale(-1, 1);
+      }
+
+      if (options.flip === 'vertical' || options.flip === 'both') {
+        context.translate(0, canvas.height);
+        context.scale(1, -1);
+      }
+
       context.fillStyle = options.color;
       context.font = options.size + 'px FontAwesome';
       context.textAlign = 'center';
@@ -140,6 +151,7 @@
   $.fn.awesomeCursor.defaults = {
     color: '#000000',
     size: 18,
-    hotspot: [0, 0]
+    hotspot: [0, 0],
+    flip: ''
   };
 });

test/jquery-awesome-cursor_test.js

@@ -336,4 +336,52 @@
           start();
       });
   }, true);
+
+  browserOnlyTest('can flip a cursor horizontally', function() {
+    expect(1);
+
+    $('body')
+      .awesomeCursor('pencil', {
+        color: 'red',
+        size: 18,
+        flip: 'horizontal'
+      })
+      .cursorMatchesImage(
+        'expected/red-pencil-flip-h-18.png', function(matches) {
+          ok(matches);
+          start();
+      });
+  }, true);
+
+  browserOnlyTest('can flip a cursor vertically', function() {
+    expect(1);
+
+    $('body')
+      .awesomeCursor('flag-checkered', {
+        color: '#00ff00',
+        size: 18,
+        flip: 'vertical'
+      })
+      .cursorMatchesImage(
+        'expected/lime-flag-flip-v-18.png', function(matches) {
+          ok(matches);
+          start();
+      });
+  }, true);
+
+  browserOnlyTest('can flip a cursor vertically and horizontally', function() {
+    expect(1);
+
+    $('body')
+      .awesomeCursor('globe', {
+        color: 'black',
+        size: 32,
+        flip: 'both'
+      })
+      .cursorMatchesImage(
+        'expected/black-globe-flip-b-32.png', function(matches) {
+          ok(matches);
+          start();
+      });
+  }, true);
 }(this, jQuery));