Release 0.5.1

Changes:
 - The whole code base rewritten to the object-oriented architecture using CoffeeScript
 - Fixed wrong selection drawing when the end of selection range has been put at the beginning of an element [Bugfix]
 - default CSS class for the start marker changed from 'jcs-beginning-marker' to 'jcs-start-marker'
 - renamed the configuration option for a content origin transformation from 'contextOrigin' to 'contentOrigin'

Gruntfile.js

@@ -7,6 +7,7 @@ module.exports = function(grunt) {
 	var DEMO_DIR = BASE_DIR + 'demo/';
 	var ANY_SUB_DIR = '**/';
 	var ANY_JS_FILE = '*.js';
+	var ANY_COFFEE_FILE = '*.coffee';
 
 	grunt.initConfig({
 		pkg: grunt.file.readJSON('package.json'),
@@ -26,15 +27,24 @@ module.exports = function(grunt) {
 					port: 8003,
 					hostname: 'localhost'
 				}
-			},
-			server: {
-				options: {
-					keepalive: false,
-					port: 8004,
-					hostname: 'localhost'
-				}
 			}
 		},
+		coffee: {
+			compile: {
+				files: [
+					{
+						src: [
+								SRC_DIR + 'CustomSelection.coffee',
+								SRC_DIR + ANY_SUB_DIR + ANY_COFFEE_FILE
+						],
+						dest: DIST_DIR + 'all-coffee.js'
+					}
+				]
+			}
+		},
+		clean: {
+			coffeeBuild: [DIST_DIR + 'all-coffee.js']
+		},
 		concat: {
 			options: {
 				banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' +
@@ -44,7 +54,7 @@ module.exports = function(grunt) {
 				files: [
 					{
 						src: [
-								SRC_DIR + 'CustomSelection.js',
+								DIST_DIR + 'all-coffee.js',
 								SRC_DIR + ANY_SUB_DIR + ANY_JS_FILE
 						],
 						dest: DIST_DIR + 'jquery.custom-selection.js'
@@ -66,26 +76,16 @@ module.exports = function(grunt) {
 					}
 				]
 			}
-		},
-		webdriver: {
-			options: {
-				desiredCapabilities: {
-					browserName: 'chrome'
-				}
-			},
-			customSelection: {
-				tests: ['test/e2e/*.js']
-			}
 		}
 	});
 
 	grunt.loadNpmTasks('grunt-contrib-jshint');
+	grunt.loadNpmTasks('grunt-contrib-clean');
 	grunt.loadNpmTasks('grunt-contrib-connect');
 	grunt.loadNpmTasks('grunt-contrib-concat');
 	grunt.loadNpmTasks('grunt-contrib-uglify');
-	grunt.loadNpmTasks('grunt-webdriver');
+	grunt.loadNpmTasks('grunt-contrib-coffee');
 
-	grunt.registerTask('dist', ['jshint', 'concat:build', 'uglify:build']);
+	grunt.registerTask('dist', ['jshint', 'coffee:compile', 'concat:build', 'uglify:build', 'clean:coffeeBuild']);
 	grunt.registerTask('server', ['connect:serverKeepAlive']);
-	grunt.registerTask('e2e', ['concat:build', 'uglify:build', 'connect:server', 'webdriver']);
 };

README.md

@@ -7,9 +7,6 @@ Using native text selection causes displaying CAB bar (Android) or actions butto
 - Apache Cordova / PhoneGap
 - mobile website
 
-## Warning: Unstable ##
-Custom Selection is still unstable and should not be used in production.
-
 ## Usage ##
 
 1. Include dependencies:
@@ -32,25 +29,59 @@ Custom Selection is still unstable and should not be used in production.
 
 ### Initialization
 
-		var iframe = $('iframe')[0];
-		$(iframe.contentDocument.body).customSelection({
-			startMarker: $('.selection-marker-start'),
-			endMarker: $('.selection-marker-end'),
-			onSelectionChange: function(range) {},
-			contextOrigin: {
-				scale: 0.7,
-				offsetX: 100,
-				offsetY: 35
-			}
-		});
+Example advanced initialization via jQuery plugin:
+
+	var iframeBody = $('iframe')[0].contentDocument.body;
+	var options = {
+		startMarker: $('.selection-marker-start'),
+		endMarker: $('.selection-marker-end'),
+		onSelectionChange: function(range) {},
+		contentOrigin: {
+			scale: 0.7,
+			offsetX: 100,
+			offsetY: 35
+		}
+	};
+	$(iframeBody).customSelection(options);
+		
+The same effect we can accomplish using classic object-oriented API:
+
+	var customSelection = new CustomSelection(iframeBody, options);
 
 ### Refreshing
 
-		$(iframe.contentDocument.body).refreshCustomSelection({
-			scale: 0.8,
-			offsetX: 80,
-			offsetY: 25
-		)};
+Refreshes the selection drawing and the markers position. Useful after a screen resize or change of the iframe scale.
+
+	var contentOrigin = {
+        scale: 0.8,
+        offsetX: 80,
+        offsetY: 25
+    };
+	$(iframeBody).refreshCustomSelection(contentOrigin);
+
+or 
+
+	customSelection.refresh(contentOrigin);
+
+### Clearing
+
+Clears current selection and calls `onSelectionChange` callback with an empty range.
+
+	$(iframeBody).clearCustomSelection();
+
+or
+
+	customSelection.clear();
+
+### Disabling
+
+Disables Custom Selection and restores a native text selection. It is possible to re-enable Custom Selection using a next initialization.
+
+	$(iframeBody).disableCustomSelection();
+
+or
+
+	customSelection.destroy();
 
 ## Acknowledgements ##
 

bower.json

@@ -1,7 +1,7 @@
 {
 	"name": "jquery-custom-selection",
 	"description": "Overriding native text selection in HTML on mobile devices",
-	"version": "0.5.0",
+	"version": "0.5.1",
 	"main": "dist/jquery.custom-selection.min.js",
 	"ignore": [
 		"demo",

demo/css/style.css

@@ -41,7 +41,7 @@ aside.right {
     font-family: sans-serif;
     font-size: 12px;
     height: 300px;
-    margin: 0 0 10px 0;
+    margin: 10px 0 0 0;
     padding: 5px 6px;
     text-align: center;
     width: 200px;
@@ -77,12 +77,16 @@ aside.right {
 	color: white;
 	font-family: sans-serif;
 	font-size: 12px;
-	height: 50px;
+	height: 100px;
 	margin: 0 0 10px 0;
 	padding: 5px 6px;
 	text-align: center;
 	width: 200px;
 }
+.settings button {
+	margin-bottom: 4px;
+	width: 140px;
+}
 
 .touch_status {
 	display: inline-block;
@@ -94,7 +98,7 @@ aside.right {
 	color: #CFF09E;
 	font-family: sans-serif;
 	font-size: 12px;
-	height: 416px;
+	height: 336px;
 	overflow: auto;
 	padding: 12px;
 	right: 0;

demo/js/main.js

@@ -4,13 +4,11 @@ $(function() {
 
 	var $content;
 	var $iframe = $('#main-frame');
-	var iframeOffset;
 
 	window.dConsole(window);
 
 	$iframe.bind('load', function() {
 		$content = $(this.contentWindow.document).find('.content');
-		iframeOffset = $iframe.offset();
 		window.enableSelection();
 
 	});
@@ -22,22 +20,35 @@ $(function() {
 			startMarker: $('.start-marker'),
 			endMarker: $('.end-marker'),
 			markerShiftY: 40,
-			contextOrigin: {
-				offsetY: iframeOffset.top + IFRAME_BORDER_WIDTH * IFRAME_SCALE,
-				offsetX: iframeOffset.left + IFRAME_BORDER_WIDTH * IFRAME_SCALE,
-				scale: IFRAME_SCALE
-			}
+			contentOrigin: getContentOriginTransformation()
 		});
-		$('.settings .button-enable').attr('disabled', true);
-		$('.settings .button-disable').attr('disabled', false);
+		$('.settings button.button-enable').attr('disabled', true);
+		$('.settings button:not(.button-enable)').attr('disabled', false);
 	};
 
 	window.disableSelection = function() {
 		$content.disableCustomSelection();
-		$('.settings .button-enable').attr('disabled', false);
-		$('.settings .button-disable').attr('disabled', true);
+		$('.settings button.button-enable').attr('disabled', false);
+		$('.settings button:not(.button-enable)').attr('disabled', true);
 	};
 
+	window.refreshSelection = function() {
+		$content.refreshCustomSelection(getContentOriginTransformation());
+	};
+
+	window.clearSelection = function() {
+		$content.clearCustomSelection();
+	};
+
+	function getContentOriginTransformation() {
+		var iframeOffset = $iframe.offset();
+		return {
+			offsetY: iframeOffset.top + IFRAME_BORDER_WIDTH * IFRAME_SCALE,
+			offsetX: iframeOffset.left + IFRAME_BORDER_WIDTH * IFRAME_SCALE,
+			scale: IFRAME_SCALE
+		};
+	}
+
 	function onSelectionChange(range) {
 		$('.selected-text-status').text(range.toString());
 	}