fixed issues with dropdown halfway

This commit is contained in:
David Baldwynn 2016-05-19 21:38:05 -07:00
parent 4bc3d163cf
commit 349b7bf3fb
7 changed files with 119 additions and 100 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -334,7 +334,10 @@ div.config-form .row.field {
width: 80%;
}
/*Override Select UI*/
.ui-select-choices.ui-select-dropdown.selectize-dropdown {
top:2em!important;;
}
.current-fields .tool-panel > .panel-default:hover {
border-color: #9d9d9d;

View file

@ -8,17 +8,19 @@ angular.module('forms').directive('keyToOption', function(){
},
link: function($scope, $element, $attrs) {
$element.bind('keydown keypress', function(event) {
console.log('keypress');
var keyCode = event.which || event.keyCode;
var index = parseInt(String.fromCharCode(keyCode))-1;
console.log($scope.field);
if (index < $scope.field.fieldOptions.length) {
event.preventDefault();
$scope.$apply(function () {
$scope.field.fieldValue = $scope.field.fieldOptions[index].option_value;
if($attrs.type === 'dropdown'){
//$select.selected.option_value = $scope.field.fieldOptions[index].option_value;
}
console.log($scope);
});
}

View file

@ -53,25 +53,25 @@ angular.module('forms').directive('submitFormDirective', ['$http', 'TimeCounter'
if(!$scope.noscroll){
//Focus on submit button
if( $scope.selected.index === $scope.myform.form_fields.length-1 && $scope.fieldBottom < 200){
if( $scope.selected.index === $scope.myform.visible_form_fields.length-1 && $scope.fieldBottom < 200){
field_index = $scope.selected.index+1;
field_id = 'submit_field';
$scope.setActiveField(field_id, field_index, false);
}
//Focus on field above submit button
else if($scope.selected.index === $scope.myform.form_fields.length){
else if($scope.selected.index === $scope.myform.visible_form_fields.length){
if($scope.fieldTop > 200){
field_index = $scope.selected.index-1;
field_id = $scope.myform.form_fields[field_index]._id;
field_id = $scope.myform.visible_form_fields[field_index]._id;
$scope.setActiveField(field_id, field_index, false);
}
}else if( $scope.fieldBottom < 0){
field_index = $scope.selected.index+1;
field_id = $scope.myform.form_fields[field_index]._id;
field_id = $scope.myform.visible_form_fields[field_index]._id;
$scope.setActiveField(field_id, field_index, false);
}else if ( $scope.selected.index !== 0 && $scope.fieldTop > 0) {
field_index = $scope.selected.index-1;
field_id = $scope.myform.form_fields[field_index]._id;
field_id = $scope.myform.visible_form_fields[field_index]._id;
$scope.setActiveField(field_id, field_index, false);
}
//console.log('$scope.selected.index: '+$scope.selected.index);
@ -80,6 +80,10 @@ angular.module('forms').directive('submitFormDirective', ['$http', 'TimeCounter'
}
};
$rootScope.setDropdownOption = function(){
console.log('setDropdownOption index: ');
};
/*
** Field Controls
*/
@ -103,27 +107,37 @@ angular.module('forms').directive('submitFormDirective', ['$http', 'TimeCounter'
$scope.noscroll = false;
setTimeout(function() {
if (document.querySelectorAll('.activeField .focusOn')[0]) {
console.log(document.querySelectorAll('.activeField .focusOn')[0]);
//console.log(document.querySelectorAll('.activeField .focusOn')[0]);
document.querySelectorAll('.activeField .focusOn')[0].focus();
} else {
//console.log(document.querySelectorAll('.activeField input')[0]);
document.querySelectorAll('.activeField input')[0].focus();
}
});
});
});
}
}else {
setTimeout(function() {
if (document.querySelectorAll('.activeField .focusOn')[0]) {
//console.log(document.querySelectorAll('.activeField .focusOn')[0]);
document.querySelectorAll('.activeField .focusOn')[0].focus();
} else {
document.querySelectorAll('.activeField input')[0].focus();
}
});
}
};
$rootScope.nextField = $scope.nextField = function(){
//console.log('nextfield');
//console.log($scope.selected.index);
//console.log($scope.myform.form_fields.length-1);
//console.log($scope.myform.visible_form_fields.length-1);
var selected_index, selected_id;
if($scope.selected.index < $scope.myform.form_fields.length-1){
if($scope.selected.index < $scope.myform.visible_form_fields.length-1){
selected_index = $scope.selected.index+1;
selected_id = $scope.myform.form_fields[selected_index]._id;
selected_id = $scope.myform.visible_form_fields[selected_index]._id;
$rootScope.setActiveField(selected_id, selected_index, true);
} else if($scope.selected.index === $scope.myform.form_fields.length-1) {
} else if($scope.selected.index === $scope.myform.visible_form_fields.length-1) {
console.log('Second last element');
selected_index = $scope.selected.index+1;
selected_id = 'submit_field';
@ -134,7 +148,7 @@ angular.module('forms').directive('submitFormDirective', ['$http', 'TimeCounter'
$rootScope.prevField = $scope.prevField = function(){
if($scope.selected.index > 0){
var selected_index = $scope.selected.index - 1;
var selected_id = $scope.myform.form_fields[selected_index]._id;
var selected_id = $scope.myform.visible_form_fields[selected_index]._id;
$scope.setActiveField(selected_id, selected_index, true);
}
};
@ -144,8 +158,8 @@ angular.module('forms').directive('submitFormDirective', ['$http', 'TimeCounter'
*/
$scope.exitStartPage = function(){
$scope.myform.startPage.showStart = false;
if($scope.myform.form_fields.length > 0){
$scope.selected._id = $scope.myform.form_fields[0]._id;
if($scope.myform.visible_form_fields.length > 0){
$scope.selected._id = $scope.myform.visible_form_fields[0]._id;
}
};

View file

@ -1,5 +1,6 @@
<div class="field row dropdown"
ng-click="setActiveField(field._id, index, true)"
key-to-option field="field" type="dropdown"
ng-if="field.fieldOptions.length > 0">
<div class="col-xs-12 field-title" ng-style="{'color': design.colors.questionColor}">
<h3>
@ -11,18 +12,22 @@
<span class="required-error" ng-show="!field.required">optional</span>
</h3>
</div>
<div class="col-xs-12 field-input ">
<ui-select ng-model="field.fieldValue"
<div class="col-xs-12 field-input">
<ui-select ng-model="field.fieldValue"
theme="selectize"
ng-model-options="{ debounce: 250 }"
ng-required="field.required"
ng-disabled="field.disabled"
ng-change="$root.nextField()">
ng-change="$root.nextField()"
on-enter-key="setDropdownOption()">
<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 }">
<div class="letter" style="float:left">
{{$index + 1}}
</div>
<span ng-bind-html="option.option_value | highlight: $select.search"></span>
</ui-select-choices>
</ui-select>