fixed issues with dropdown halfway
This commit is contained in:
parent
4bc3d163cf
commit
349b7bf3fb
119
public/dist/application.js
vendored
119
public/dist/application.js
vendored
File diff suppressed because one or more lines are too long
2
public/dist/application.min.css
vendored
2
public/dist/application.min.css
vendored
File diff suppressed because one or more lines are too long
8
public/dist/application.min.js
vendored
8
public/dist/application.min.js
vendored
File diff suppressed because one or more lines are too long
|
@ -334,7 +334,10 @@ div.config-form .row.field {
|
||||||
width: 80%;
|
width: 80%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/*Override Select UI*/
|
||||||
|
.ui-select-choices.ui-select-dropdown.selectize-dropdown {
|
||||||
|
top:2em!important;;
|
||||||
|
}
|
||||||
|
|
||||||
.current-fields .tool-panel > .panel-default:hover {
|
.current-fields .tool-panel > .panel-default:hover {
|
||||||
border-color: #9d9d9d;
|
border-color: #9d9d9d;
|
||||||
|
|
|
@ -8,17 +8,19 @@ angular.module('forms').directive('keyToOption', function(){
|
||||||
},
|
},
|
||||||
link: function($scope, $element, $attrs) {
|
link: function($scope, $element, $attrs) {
|
||||||
$element.bind('keydown keypress', function(event) {
|
$element.bind('keydown keypress', function(event) {
|
||||||
console.log('keypress');
|
|
||||||
|
|
||||||
var keyCode = event.which || event.keyCode;
|
var keyCode = event.which || event.keyCode;
|
||||||
var index = parseInt(String.fromCharCode(keyCode))-1;
|
var index = parseInt(String.fromCharCode(keyCode))-1;
|
||||||
console.log($scope.field);
|
console.log($scope.field);
|
||||||
|
|
||||||
|
|
||||||
if (index < $scope.field.fieldOptions.length) {
|
if (index < $scope.field.fieldOptions.length) {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
$scope.$apply(function () {
|
$scope.$apply(function () {
|
||||||
$scope.field.fieldValue = $scope.field.fieldOptions[index].option_value;
|
$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);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -53,25 +53,25 @@ angular.module('forms').directive('submitFormDirective', ['$http', 'TimeCounter'
|
||||||
|
|
||||||
if(!$scope.noscroll){
|
if(!$scope.noscroll){
|
||||||
//Focus on submit button
|
//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_index = $scope.selected.index+1;
|
||||||
field_id = 'submit_field';
|
field_id = 'submit_field';
|
||||||
$scope.setActiveField(field_id, field_index, false);
|
$scope.setActiveField(field_id, field_index, false);
|
||||||
}
|
}
|
||||||
//Focus on field above submit button
|
//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){
|
if($scope.fieldTop > 200){
|
||||||
field_index = $scope.selected.index-1;
|
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);
|
$scope.setActiveField(field_id, field_index, false);
|
||||||
}
|
}
|
||||||
}else if( $scope.fieldBottom < 0){
|
}else if( $scope.fieldBottom < 0){
|
||||||
field_index = $scope.selected.index+1;
|
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);
|
$scope.setActiveField(field_id, field_index, false);
|
||||||
}else if ( $scope.selected.index !== 0 && $scope.fieldTop > 0) {
|
}else if ( $scope.selected.index !== 0 && $scope.fieldTop > 0) {
|
||||||
field_index = $scope.selected.index-1;
|
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);
|
$scope.setActiveField(field_id, field_index, false);
|
||||||
}
|
}
|
||||||
//console.log('$scope.selected.index: '+$scope.selected.index);
|
//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
|
** Field Controls
|
||||||
*/
|
*/
|
||||||
|
@ -103,27 +107,37 @@ angular.module('forms').directive('submitFormDirective', ['$http', 'TimeCounter'
|
||||||
$scope.noscroll = false;
|
$scope.noscroll = false;
|
||||||
setTimeout(function() {
|
setTimeout(function() {
|
||||||
if (document.querySelectorAll('.activeField .focusOn')[0]) {
|
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();
|
document.querySelectorAll('.activeField .focusOn')[0].focus();
|
||||||
} else {
|
} else {
|
||||||
|
//console.log(document.querySelectorAll('.activeField input')[0]);
|
||||||
document.querySelectorAll('.activeField input')[0].focus();
|
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(){
|
$rootScope.nextField = $scope.nextField = function(){
|
||||||
//console.log('nextfield');
|
//console.log('nextfield');
|
||||||
//console.log($scope.selected.index);
|
//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;
|
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_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);
|
$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');
|
console.log('Second last element');
|
||||||
selected_index = $scope.selected.index+1;
|
selected_index = $scope.selected.index+1;
|
||||||
selected_id = 'submit_field';
|
selected_id = 'submit_field';
|
||||||
|
@ -134,7 +148,7 @@ angular.module('forms').directive('submitFormDirective', ['$http', 'TimeCounter'
|
||||||
$rootScope.prevField = $scope.prevField = function(){
|
$rootScope.prevField = $scope.prevField = function(){
|
||||||
if($scope.selected.index > 0){
|
if($scope.selected.index > 0){
|
||||||
var selected_index = $scope.selected.index - 1;
|
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);
|
$scope.setActiveField(selected_id, selected_index, true);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
@ -144,8 +158,8 @@ angular.module('forms').directive('submitFormDirective', ['$http', 'TimeCounter'
|
||||||
*/
|
*/
|
||||||
$scope.exitStartPage = function(){
|
$scope.exitStartPage = function(){
|
||||||
$scope.myform.startPage.showStart = false;
|
$scope.myform.startPage.showStart = false;
|
||||||
if($scope.myform.form_fields.length > 0){
|
if($scope.myform.visible_form_fields.length > 0){
|
||||||
$scope.selected._id = $scope.myform.form_fields[0]._id;
|
$scope.selected._id = $scope.myform.visible_form_fields[0]._id;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
<div class="field row dropdown"
|
<div class="field row dropdown"
|
||||||
ng-click="setActiveField(field._id, index, true)"
|
ng-click="setActiveField(field._id, index, true)"
|
||||||
|
key-to-option field="field" type="dropdown"
|
||||||
ng-if="field.fieldOptions.length > 0">
|
ng-if="field.fieldOptions.length > 0">
|
||||||
<div class="col-xs-12 field-title" ng-style="{'color': design.colors.questionColor}">
|
<div class="col-xs-12 field-title" ng-style="{'color': design.colors.questionColor}">
|
||||||
<h3>
|
<h3>
|
||||||
|
@ -11,18 +12,22 @@
|
||||||
<span class="required-error" ng-show="!field.required">optional</span>
|
<span class="required-error" ng-show="!field.required">optional</span>
|
||||||
</h3>
|
</h3>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-xs-12 field-input ">
|
<div class="col-xs-12 field-input">
|
||||||
<ui-select ng-model="field.fieldValue"
|
<ui-select ng-model="field.fieldValue"
|
||||||
theme="selectize"
|
theme="selectize"
|
||||||
ng-model-options="{ debounce: 250 }"
|
ng-model-options="{ debounce: 250 }"
|
||||||
ng-required="field.required"
|
ng-required="field.required"
|
||||||
ng-disabled="field.disabled"
|
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">
|
<ui-select-match placeholder="Type or select an option">
|
||||||
{{$select.selected.option_value}}
|
{{$select.selected.option_value}}
|
||||||
</ui-select-match>
|
</ui-select-match>
|
||||||
<ui-select-choices repeat="option in field.fieldOptions | filter: $select.search"
|
<ui-select-choices repeat="option in field.fieldOptions | filter: $select.search"
|
||||||
ng-class="{'active': option.option_value === field.fieldValue }">
|
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>
|
<span ng-bind-html="option.option_value | highlight: $select.search"></span>
|
||||||
</ui-select-choices>
|
</ui-select-choices>
|
||||||
</ui-select>
|
</ui-select>
|
||||||
|
|
Loading…
Reference in a new issue