updated ui-select fork

This commit is contained in:
David Baldwynn 2016-06-04 03:53:51 -07:00
parent 083ea1070c
commit 23c53eb365
16 changed files with 283 additions and 249 deletions

View file

@ -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": {

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -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;

View file

@ -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);
});
}
});
}
};
}]);

View file

@ -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]) {
//console.log(document.querySelectorAll('.activeField .focusOn')[0]);
if (document.querySelectorAll('.activeField .focusOn').length) {
//Handle default case
document.querySelectorAll('.activeField .focusOn')[0].focus();
} else {
//console.log(document.querySelectorAll('.activeField input')[0]);
} else if(document.querySelectorAll('.activeField input').length) {
//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);

View file

@ -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)"
class="focusOn"
<input 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>

View file

@ -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 }">

View file

@ -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>

View file

@ -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"

View file

@ -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>

View file

@ -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>

View file

@ -1,5 +1,4 @@
<div class="field row" ng-click="setActiveField(field._id, index, true)"
ng-focus="setActiveField(field._id, index, true)">
<div class="field row" 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">
@ -22,8 +21,9 @@
value="{{field.fieldValue}}"
ng-required="field.required"
ng-disabled="field.disabled"
ng-focus="setActiveField(field._id, index, true)"
on-enter-or-tab-key="nextField()"
ng-focus="setActiveField(field._id, index, true)"
on-enter-or-tab-key="nextField()"
on-tab-and-shift-key="prevField()"
style="border: none; border-left: lightgrey dashed 2px;">
</textarea>
</div>

View file

@ -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"
on-enter-or-tab-key="nextField()">
aria-describedby="inputError2Status">
</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">

View file

@ -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()"

View file

@ -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>