updated ui-select fork

bower.json

@@ -27,18 +27,19 @@
     "angular-bootstrap-colorpicker": "~3.0.19",
     "angular-ui-router-tabs": "~1.7.0",
     "angular-scroll": "^1.0.0",
-    "ui-select": "angular-ui-select#^0.16.1",
     "angular-sanitize": "^1.5.3",
     "v-button": "^1.1.1",
     "angular-busy": "^4.1.3",
     "angular-input-stars": "https://github.com/whitef0x0/angular-input-stars.git#master",
     "raven-js": "^3.0.4",
     "tableExport.jquery.plugin": "^1.5.1",
-    "js-yaml": "^3.6.1"
+    "js-yaml": "^3.6.1",
+    "angular-ui-select": "whitef0x0/ui-select#compiled"
   },
   "resolutions": {
     "angular-bootstrap": "^0.14.0",
-    "angular": "1.4.x"
+    "angular": "1.4.x",
+    "angular-ui-select": "compiled"
   },
   "overrides": {
     "BOWER-PACKAGE": {

public/modules/forms/css/form.css

@@ -237,12 +237,6 @@ form .row.field {
 	form .row.field.dropdown > .field-input input:focus {
 		border: none;
 	}
-    
-		form .row.field.dropdown > .field-input .ui-select-match {
-        	border: 0 grey solid;
-        	border-width: 0 0 2px 0;
-			border-radius: 5px;
-		}		
 
 	   	form .dropdown > .field-input .ui-select-choices-row-inner {
 			border-radius: 3px;

public/modules/forms/directives/on-enter-key.client.directive.js

@@ -1,13 +1,51 @@
 'use strict';
 
-angular.module('forms').directive('onEnterOrTabKey', ['$rootScope', function($rootScope){
+//TODO: DAVID: Need to refactor this
+angular.module('forms').directive('onEnterKey', ['$rootScope', function($rootScope){
+	return {
+		restrict: 'A',
+		link: function($scope, $element, $attrs) {
+			$element.bind('keydown keypress', function(event) {
+
+				var keyCode = event.which || event.keyCode;
+
+				var onEnterKeyDisabled = false;
+				if($attrs.onEnterKeyDisabled !== null) onEnterKeyDisabled = $attrs.onEnterKeyDisabled;
+
+				if(keyCode === 13 && !event.shiftKey && !onEnterKeyDisabled) {
+					event.preventDefault();
+					$rootScope.$apply(function() {
+						$rootScope.$eval($attrs.onEnterKey);
+					});
+				}
+			});
+		}
+	};
+}]).directive('onTabKey', ['$rootScope', function($rootScope){
+	return {
+		restrict: 'A',
+		link: function($scope, $element, $attrs) {
+			$element.bind('keydown keypress', function(event) {
+
+				var keyCode = event.which || event.keyCode;
+
+				if(keyCode === 9 && !event.shiftKey) {
+
+					event.preventDefault();
+					$rootScope.$apply(function() {
+						$rootScope.$eval($attrs.onTabKey);
+					});
+				}
+			});
+		}
+	};
+}]).directive('onEnterOrTabKey', ['$rootScope', function($rootScope){
 	return {
 		restrict: 'A',
 		link: function($scope, $element, $attrs) {
 			$element.bind('keydown keypress', function(event) {
 
 				var keyCode = event.which || event.keyCode;
-				console.log('keyCode is: '+keyCode);
 
 				if((keyCode === 13 || keyCode === 9) && !event.shiftKey) {
 					event.preventDefault();
@@ -18,4 +56,21 @@ angular.module('forms').directive('onEnterOrTabKey', ['$rootScope', function($ro
 			});
 		}
 	};
+}]).directive('onTabAndShiftKey', ['$rootScope', function($rootScope){
+	return {
+		restrict: 'A',
+		link: function($scope, $element, $attrs) {
+			$element.bind('keydown keypress', function(event) {
+
+				var keyCode = event.which || event.keyCode;
+
+				if(keyCode === 9 && event.shiftKey) {
+					event.preventDefault();
+					$rootScope.$apply(function() {
+						$rootScope.$eval($attrs.onTabAndShiftKey);
+					});
+				}
+			});
+		}
+	};
 }]);

public/modules/forms/directives/submit-form.client.directive.js

@@ -106,12 +106,15 @@ angular.module('forms').directive('submitFormDirective', ['$http', 'TimeCounter'
                             $document.scrollToElement(angular.element('.activeField'), -10, 200).then(function() {
 								$scope.noscroll = false;
 								setTimeout(function() {
-									if (document.querySelectorAll('.activeField .focusOn')[0]) {
+									if (document.querySelectorAll('.activeField .focusOn').length) {
-										//console.log(document.querySelectorAll('.activeField .focusOn')[0]);
+										//Handle default case
 										document.querySelectorAll('.activeField .focusOn')[0].focus();
-									} else {
+									} else if(document.querySelectorAll('.activeField input').length) {
-										//console.log(document.querySelectorAll('.activeField input')[0]);
+										//Handle case for rating input
 										document.querySelectorAll('.activeField input')[0].focus();
+									} else {
+										//Handle case for dropdown input
+										document.querySelectorAll('.activeField .selectize-input')[0].focus();
 									}
 								});
                             });
@@ -119,7 +122,7 @@ angular.module('forms').directive('submitFormDirective', ['$http', 'TimeCounter'
                     }else {
 						setTimeout(function() {
 							if (document.querySelectorAll('.activeField .focusOn')[0]) {
-								//console.log(document.querySelectorAll('.activeField .focusOn')[0]);
+								//FIXME: DAVID: Figure out how to set focus without scroll movement in HTML Dom
 								document.querySelectorAll('.activeField .focusOn')[0].focus();
 							} else {
 								document.querySelectorAll('.activeField input')[0].focus();
@@ -163,11 +166,11 @@ angular.module('forms').directive('submitFormDirective', ['$http', 'TimeCounter'
                     }
                 };
 
-				$scope.goToInvalid = function() {
+				$rootScope.goToInvalid = $scope.goToInvalid = function() {
 					document.querySelectorAll('.ng-invalid.focusOn')[0].focus();
 				};
 
-				$scope.submitForm = function() {
+				$rootScope.goToInvalid = $scope.submitForm = function() {
 					var _timeElapsed = TimeCounter.stopClock();
 					$scope.loading = true;
 					var form = _.cloneDeep($scope.myform);

public/modules/forms/views/directiveViews/field/date.html

@@ -15,8 +15,7 @@
     </div>
     <div class="col-xs-12 field-input">
         <div class="control-group input-append">
-            <input ng-focus="setActiveField(field._id, index, true)"
+            <input class="focusOn"
-				   class="focusOn"
 				   ng-style="{'color': design.colors.answerColor, 'border-color': design.colors.answerColor}"
 				   ng-class="{ 'no-border': !!field.fieldValue }"
 				   ui-date="dateOptions"
@@ -25,7 +24,9 @@
 				   ng-required="field.required"
 				   ng-disabled="field.disabled"
 				   placeholder="MM/DD/YYYY"
-				   on-enter-or-tab-key="nextField()"
+				   ng-focus="setActiveField(field._id, index, true)"
+				   on-tab-key="nextField()"
+				   on-tab-and-shift-key="prevField()"
 				   ng-change="$root.nextField()">
         </div>
     </div>

public/modules/forms/views/directiveViews/field/dropdown.html

@@ -1,5 +1,4 @@
 <div class="field row dropdown"
-	 ng-click="setActiveField(field._id, index, true)"
 	 ng-if="field.fieldOptions.length > 0">
     <div class="col-xs-12 field-title" ng-style="{'color': design.colors.questionColor}">
 	    <h3>
@@ -17,11 +16,15 @@
     <div class="col-xs-12 field-input">
 		<ui-select ng-model="field.fieldValue"
                 theme="selectize"
+			    search-enabled="true"
+			    search-by="option_value"
+			    set-search-to-answer="true"
 				ng-required="field.required"
 				ng-disabled="field.disabled"
+			    on-tab-and-shift-key="prevField()"
+			    on-tab-key="nextField()"
 				ng-change="$root.nextField()">
 			<ui-select-match placeholder="Type or select an option">
-				{{$select.selected.option_value}}
 			</ui-select-match>
 			<ui-select-choices repeat="option in field.fieldOptions | filter: $select.search"
 							   ng-class="{'active': option.option_value === field.fieldValue }">

public/modules/forms/views/directiveViews/field/file.html

@@ -1,38 +0,0 @@
-<div class="field row" ng-if="form.autofillPDFs" ng-click="setActiveField(field._id, index, true)">
-	<div class="col-xs-12 field-title" ng-style="{'color': design.colors.questionColor}">
-		<h3>
-			<small class="field-number">
-				{{index+1}}
-				<i class="fa fa-angle-double-right" aria-hidden="true"></i>
-			</small>
-			{{field.title}}
-			<span class="required-error" ng-show="!field.required">optional</span>
-		</h3>
-	</div>
-    <div class="col-sm-8 field-input">
-        <div class="input-group ">
-            <div tabindex="-1" class="form-control file-caption">
-                <span class="file-caption-ellipsis" ng-if="!form.pdf">…</span>
-                <div class="file-caption-name" ng-if="form.pdf">
-                    {{field.file.originalname}}
-                </div>
-            </div>
-            <div class="input-group-btn">
-                <button type="button"  ng-if="field.file" ng-click="removeFile(field);" title="Clear selected files" class="btn btn-danger fileinput-remove fileinput-remove-button">
-                    <i class="glyphicon glyphicon-trash"  ></i> 
-                    Delete
-                </button>
-
-                <button type="button" ng-if="field.fileLoading" title="Abort ongoing upload" class="btn btn-default" ng-click="cancelFileUpload(field)">
-                    <i class="glyphicon glyphicon-ban-circle"></i> 
-                    Cancel
-                </button>
-
-                <div class="btn btn-success btn-file" ngf-select ngf-change="uploadPDF($files)" ng-if="!field.file"> 
-                    <i class="glyphicon glyphicon-upload"></i>
-                    Upload your File
-                </div>
-            </div>
-        </div>
-    </div>
-</div>

public/modules/forms/views/directiveViews/field/legal.html

@@ -14,7 +14,9 @@
     	<p class="col-xs-12">{{field.description}}</p>
     </div>
     <div class="col-xs-12 field-input container">
-		<div class="row-fluid">
+		<div class="row-fluid"
+			 on-enter-or-tab-key="nextField()"
+			 on-tab-and-shift-key="prevField()">
             <label class="btn col-md-5 col-xs-12"
 				   ng-class="{activeBtn: field.fieldValue == 'true'}">
                 <input class="focusOn"

public/modules/forms/views/directiveViews/field/rating.html

@@ -25,6 +25,9 @@
 					 ng-model-options="{ debounce: 250 }"
 					 ng-required="field.required"
 					 ng-disabled="field.disabled"
+					 on-enter-or-tab-key="nextField()"
+					 on-tab-and-shift-key="prevField()"
+					 ng-focus="setActiveField(field._id, index, true)"
 					 class="angular-input-stars focusOn">
 		</input-stars>
     </div>

public/modules/forms/views/directiveViews/field/statement.html

@@ -1,5 +1,6 @@
 <div class="statement field row"
-	 on-enter-or-tab-key="$root.nextField()"
+	 on-enter-or-tab-key="nextField()"
+	 on-tab-and-shift-key="prevField()"
 	 ng-focus="setActiveField(field._id, index, true)">
     <div class="row field-title field-title">
     	<div class="col-xs-1"><i class="fa fa-quote-left fa-1"></i></div>

public/modules/forms/views/directiveViews/field/textarea.html

@@ -1,5 +1,4 @@
-<div class="field row" ng-click="setActiveField(field._id, index, true)"
+<div class="field row" ng-click="setActiveField(field._id, index, true)">
-	 ng-focus="setActiveField(field._id, index, true)">
     <div class="col-xs-12 field-title" ng-style="{'color': design.colors.questionColor}">
 		<h3>
 			<small class="field-number">
@@ -22,8 +21,9 @@
 			value="{{field.fieldValue}}"
 			ng-required="field.required"
 			ng-disabled="field.disabled"
-			ng-focus="setActiveField(field._id, index, true)"
+		    ng-focus="setActiveField(field._id, index, true)"
-			on-enter-or-tab-key="nextField()"
+		    on-enter-or-tab-key="nextField()"
+		    on-tab-and-shift-key="prevField()"
 			style="border: none; border-left: lightgrey dashed 2px;">
 		</textarea>
 	</div>

public/modules/forms/views/directiveViews/field/textfield.html

@@ -20,20 +20,21 @@
     </div>
     <div class="col-xs-12 field-input">
 		<input ng-style="{'color': design.colors.answerColor, 'border-color': design.colors.answerColor}" 
-            ng-focus="setActiveField(field._id, index, true)"
 			name="{{field.fieldType}}{{index}}"
             type="{{field.input_type}}"
 		   	ng-pattern="field.validateRegex"
 			placeholder="{{field.placeholder}}"
 			ng-class="{ 'no-border': !!field.fieldValue }"
-            class="focusOn text-field-input" 
+            class="focusOn text-field-input"
 			ng-model="field.fieldValue" 
 			ng-model-options="{ debounce: 250 }"  
-			value="field.fieldValue" 
+			value="field.fieldValue"
+		    ng-focus="setActiveField(field._id, index, true)"
+		   	on-enter-or-tab-key="nextField()"
+		   	on-tab-and-shift-key="prevField()"
 			ng-required="field.required"
 			ng-disabled="field.disabled"
-	        aria-describedby="inputError2Status"
+	        aria-describedby="inputError2Status">
-    		on-enter-or-tab-key="nextField()">
     </div>
     <div class="col-xs-12">        
         <div ng-show="forms.myForm.{{field.fieldType}}{{index}}.$invalid && !!forms.myForm.{{field.fieldType}}{{index}}.$viewValue " class="alert alert-danger" role="alert">

public/modules/forms/views/directiveViews/field/yes_no.html

@@ -1,6 +1,6 @@
 <div class="field row radio"
 	 	ng-click="setActiveField(field._id, index, true)"
-	 	on-enter-or-tab-key="nextField()"
+	 	on-tab-and-shift-key="prevField()"
 	 	key-to-truthy key-char-truthy="y" key-char-falsey="n" field="field">
     <div class="col-xs-12 field-title" ng-style="{'color': design.colors.questionColor}">
         <h3 class="row">
@@ -25,8 +25,8 @@
                 <input type="radio" value="true" 
 					class="focusOn"
                     style="opacity: 0; margin-left: 0px;"
-					ng-focus="setActiveField(field._id, index, true)"	
+					ng-model="field.fieldValue"
-					ng-model="field.fieldValue" 
+				    ng-focus="setActiveField(field._id, index, true)"
 					ng-model-options="{ debounce: 250 }" 
 					ng-required="field.required" 
 					ng-change="$root.nextField()"
@@ -45,8 +45,7 @@
 	
                 <input type="radio" value="false" 
 			        style="opacity:0; margin-left:0px;"
-			        ng-focus="setActiveField(field._id, index, true)"
+			        ng-model="field.fieldValue"
-			        ng-model="field.fieldValue" 
 			        ng-model-options="{ debounce: 250 }" 
 			        ng-required="field.required" 
 			        ng-change="$root.nextField()"

public/modules/forms/views/directiveViews/form/submit-form.client.view.html

@@ -75,8 +75,10 @@ ng-style="{'color':button.color}">
 	<button ng-if="!forms.myForm.$invalid"
 		class="Button btn col-sm-2 col-xs-8 focusOn"
 		v-busy="loading" v-busy-label="Please wait" v-pressable
-		ng-disabled="loading"
+		ng-disabled="loading || forms.myForm.$invalid"
 		ng-click="submitForm()"
+		on-enter-key="submitForm()"
+		on-enter-key-disabled="loading || forms.myForm.$invalid"
 		ng-style="{'background-color':myform.design.colors.buttonColor, 'color':myform.design.colors.buttonTextColor}"
 		style="font-size: 1.6em; margin-left: 1em; margin-top: 1em;">
 
@@ -84,8 +86,10 @@ ng-style="{'color':button.color}">
 	</button>
 
 	<button ng-if="forms.myForm.$invalid"
-			class="Button btn col-sm-2 col-xs-8"
+			class="Button btn col-sm-2 col-xs-8 focusOn"
 			ng-click="goToInvalid()"
+			on-enter-key="goToInvalid()"
+			on-enter-key-disabled="!forms.myForm.$invalid"
 			style="font-size: 1.6em; margin-left: 1em; margin-top: 1em; background-color:#990000; color:white">
 		Review
 	</button>