added basic AngularJS 1.x integration

README.md

@@ -35,6 +35,25 @@ $(function() {
 });
 ```
 
+## How to use JCF with AngularJS 1.x
+
+To use this script with Angular you still need to attach all scripts above (including jQuery) and also attach directive:
+
+```js
+<script src="js/jcf.angular.js"></script>
+```
+
+When the directive is connected as dependency in your app you can add `jcf` attribute to the form field and such element will be customized:
+```html
+<!-- customize select: -->
+<select jcf>
+    ...
+</select>
+
+<!-- customize range input with specific options: -->
+<input type="range" jcf='{"orientation": "vertical"}'>
+```
+
 ## General API Information
 
 Global `jcf` object has several methods to control custom form elements on the page:

css/theme-minimal/jcf.css

@@ -344,6 +344,7 @@ body > .jcf-select-drop.jcf-drop-flipped {
 	display: block;
 	padding: 5px 9px;
 	color: #656565;
+	min-height: 14px;
 	height: 1%;
 }
 .jcf-list .jcf-disabled {

js/jcf.angular.js

@@ -0,0 +1,19 @@
+/*
+ * JCF directive for basic AngularJS 1.x integration
+ */
+angular.module('jcf', []).directive('jcf', function() {
+	return {
+		restrict: 'A',
+		link: function (scope, element, attrs) {
+			jcf.replace(element);
+
+			scope.$watch(attrs.ngModel, function(newValue) {
+				jcf.refresh(element);
+			});
+
+			scope.$on('$destroy', function() {
+				jcf.destroy(element);
+			});
+		}
+	}
+});

js/jcf.js

@@ -286,11 +286,13 @@
 			// add module to list
 			var Module = function(options) {
 				// save instance to collection
-				options.element.data(commonOptions.dataKey, this);
+				if (!options.element.data(commonOptions.dataKey)) {
+					options.element.data(commonOptions.dataKey, this);
+				}
 				customInstances.push(this);
 
 				// save options
-				this.options = $.extend({}, commonOptions, this.options, options.element.data(commonOptions.optionsKey), options);
+				this.options = $.extend({}, commonOptions, this.options, getInlineOptions(options.element), options);
 
 				// bind event handlers to instance
 				this.bindHandlers();
@@ -299,6 +301,22 @@
 				this.init.apply(this, arguments);
 			};
 
+			// parse options from HTML attribute
+			var getInlineOptions = function(element) {
+				var dataOptions = element.data(commonOptions.optionsKey),
+					attrOptions = element.attr(commonOptions.optionsKey);
+
+				if (dataOptions) {
+					return dataOptions;
+				} else if (attrOptions) {
+					try {
+						return $.parseJSON(attrOptions);
+					} catch (e) {
+						// ignore invalid attributes
+					}
+				}
+			};
+
 			// set proto as prototype for new module
 			Module.prototype = proto;
 

js/jcf.range.js

@@ -444,9 +444,15 @@
 			return percent * 100;
 		},
 		getSliderValue: function() {
-			var result = [];
+			var result = [],
+				self = this;
+
 			$.each(this.values, function(index, value) {
-				result.push(parseFloat(value) || 0);
+				if (index > 0) {
+					result.push(parseFloat(value) || 0);
+				} else {
+					result.push(parseFloat(self.realElement.val()) || 0);
+				}
 			});
 			return result;
 		},

js/jcf.textarea.js

@@ -70,6 +70,12 @@
 				'jcf-pointermove': this.onResizeMove,
 				'jcf-pointerup': this.onResizeRelease
 			});
+
+			// restore focus
+			if (this.isFocused) {
+				this.focusedDrag = true;
+				this.realElement.focus();
+			}
 		},
 		onResizeMove: function(e) {
 			var newWidth = e.pageX + this.dragData.innerOffsetLeft - this.dragData.areaOffset.left,
@@ -81,13 +87,20 @@
 
 			// resize textarea and refresh scrollbars
 			this.realElement.innerWidth(newWidth - widthDiff).innerHeight(newHeight);
-			this.refreshCustomScrollbars();
+			this.scrollable.rebuildScrollbars();
+
+			// restore focus
+			if (this.focusedDrag) {
+				this.realElement.focus();
+			}
 		},
 		onResizeRelease: function() {
 			this.doc.off({
 				'jcf-pointermove': this.onResizeMove,
 				'jcf-pointerup': this.onResizeRelease
 			});
+
+			delete this.focusedDrag;
 		},
 		onFocus: function() {
 			this.isFocused = true;
@@ -103,17 +116,17 @@
 			this.refreshCustomScrollbars();
 		},
 		refreshCustomScrollbars: function() {
-			// refresh custom scrollbars
 			if (this.isFocused) {
 				this.scrollable.redrawScrollbars();
 			} else {
-				this.scrollable.refresh();
+				this.scrollable.rebuildScrollbars();
 			}
 		},
 		refresh: function() {
 			// refresh custom scroll position
 			var isDisabled = this.realElement.is(':disabled');
 			this.fakeElement.toggleClass(this.options.disabledClass, isDisabled);
+			this.refreshCustomScrollbars();
 		},
 		destroy: function() {
 			// destroy custom scrollbar