fixed scrolling bug for prev/nextField buttons
This commit is contained in:
parent
5d9455a736
commit
aa72e1ac3c
|
@ -60,7 +60,6 @@ var FormSchema = new Schema({
|
|||
type: String,
|
||||
default: '',
|
||||
},
|
||||
// form_fields: [Field],
|
||||
form_fields: {
|
||||
type: [FieldSchema],
|
||||
},
|
||||
|
|
|
@ -58,7 +58,6 @@ var FormSubmissionSchema = new Schema({
|
|||
form_fields: {
|
||||
type: [Schema.Types.Mixed],
|
||||
},
|
||||
// form_fields: [Field],
|
||||
|
||||
form: {
|
||||
type: Schema.Types.ObjectId,
|
||||
|
@ -83,7 +82,7 @@ var FormSubmissionSchema = new Schema({
|
|||
type: Schema.Types.Mixed,
|
||||
},
|
||||
|
||||
timeElapsed: { //time (in seconds) it took for user to submit form
|
||||
timeElapsed: {
|
||||
type: Number,
|
||||
},
|
||||
percentageComplete: {
|
||||
|
@ -149,14 +148,14 @@ FormSubmissionSchema.pre('save', function (next) {
|
|||
_generatedDemo[propertyName] = currField.fieldValue+'';
|
||||
}else if(propertyName === 'DOB'){
|
||||
var date = new Date(currField.fieldValue);
|
||||
_generatedDemo['dateOfBirth'] = date.getDate()+'';
|
||||
_generatedDemo['yearOfBirth'] = date.getFullYear()+'';
|
||||
_generatedDemo['monthOfBirth'] = date.getMonth()+'';
|
||||
_generatedDemo.dateOfBirth = date.getDate()+'';
|
||||
_generatedDemo.yearOfBirth = date.getFullYear()+'';
|
||||
_generatedDemo.monthOfBirth = date.getMonth()+'';
|
||||
}
|
||||
}
|
||||
var currDate = new Date();
|
||||
var dateString = currDate.toISOString().split('T')[0] + ' ' + currDate.toISOString().split('T')[1].slice(0,8);
|
||||
_generatedDemo['lastUpdateDate'] = currDate.toISOString();
|
||||
_generatedDemo.lastUpdateDate = currDate.toISOString();
|
||||
return _generatedDemo;
|
||||
};
|
||||
|
||||
|
|
|
@ -1,32 +0,0 @@
|
|||
'use strict';
|
||||
|
||||
angular.module('forms').directive('focusOn',function() {
|
||||
return {
|
||||
restrict : 'A',
|
||||
link : function($scope, $element, $attr) {
|
||||
$scope.$watch($attr.focusOn,function(focusVal) {
|
||||
if(focusVal === true) {
|
||||
var $input_element;
|
||||
|
||||
if($element[0].querySelector('input')){
|
||||
$input_element = $element[0].querySelector('input');
|
||||
}else if($element[0].querySelector('select')){
|
||||
$input_element = $element[0].querySelector('select');
|
||||
}else if($element[0].querySelector('textarea')){
|
||||
$input_element = $element[0].querySelector('.textarea');
|
||||
}else if($element[0].querySelector('.angular-input-stars')){
|
||||
$input_element = $element[0].querySelector('.angular-input-stars');
|
||||
}else{
|
||||
return;
|
||||
}
|
||||
setTimeout(function() {
|
||||
console.log($('.activeField'));
|
||||
$('html, body').animate({
|
||||
scrollTop: $('.activeField').offset().top
|
||||
},400);
|
||||
}, 0);
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
});
|
|
@ -14,16 +14,12 @@ angular.module('forms').directive('onFinishRender', function ($rootScope, $timeo
|
|||
|
||||
if(scope.$first && !scope.$last) {
|
||||
scope.$evalAsync(function () {
|
||||
// console.log(Date.now());
|
||||
$rootScope.$broadcast(broadcastMessage+' Started');
|
||||
});
|
||||
}else if(scope.$last) {
|
||||
scope.$evalAsync(function () {
|
||||
// element.ready(function () {
|
||||
console.log(broadcastMessage+'Finished');
|
||||
// console.log(Date.now());
|
||||
$rootScope.$broadcast(broadcastMessage+' Finished');
|
||||
// });
|
||||
// console.log(broadcastMessage+'Finished');
|
||||
$rootScope.$broadcast(broadcastMessage+' Finished');
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
@ -23,13 +23,31 @@ angular.module('forms').directive('submitFormDirective', ['$http', '$timeout', '
|
|||
|
||||
TimeCounter.startClock();
|
||||
|
||||
$scope.exitStartPage = function(){
|
||||
$scope.myform.startPage.showStart = false;
|
||||
if($scope.myform.form_fields.length > 0){
|
||||
$scope.selected._id = $scope.myform.form_fields[0]._id;
|
||||
|
||||
/*
|
||||
** Field Controls
|
||||
*/
|
||||
$scope.setActiveField = function(field_id, field_index) {
|
||||
if($scope.selected === null){
|
||||
$scope.selected = {
|
||||
_id: '',
|
||||
index: 0,
|
||||
};
|
||||
}
|
||||
// console.log('field_id: '+field_id);
|
||||
// console.log('field_index: '+field_index);
|
||||
// console.log($scope.selected);
|
||||
|
||||
$scope.selected._id = field_id;
|
||||
$scope.selected.index = field_index;
|
||||
setTimeout(function() {
|
||||
$('html, body').animate({
|
||||
scrollTop: $('.activeField').offset().top
|
||||
},350);
|
||||
}, 10);
|
||||
};
|
||||
|
||||
|
||||
$scope.nextField = function(){
|
||||
if($scope.selected.index < $scope.myform.form_fields.length-1){
|
||||
$scope.selected.index++;
|
||||
|
@ -44,20 +62,7 @@ angular.module('forms').directive('submitFormDirective', ['$http', '$timeout', '
|
|||
$scope.setActiveField($scope.selected._id, $scope.selected.index);
|
||||
}
|
||||
};
|
||||
|
||||
$rootScope.setActiveField = function(field_id, field_index) {
|
||||
if($scope.selected === null){
|
||||
$scope.selected = {
|
||||
_id: '',
|
||||
index: 0,
|
||||
};
|
||||
}
|
||||
console.log('field_id: '+field_id);
|
||||
console.log('field_index: '+field_index);
|
||||
console.log($scope.selected);
|
||||
$scope.selected._id = field_id;
|
||||
$scope.selected.index = field_index;
|
||||
};
|
||||
|
||||
$scope.hideOverlay = function(){
|
||||
$scope.selected = {
|
||||
_id: '',
|
||||
|
@ -65,6 +70,16 @@ angular.module('forms').directive('submitFormDirective', ['$http', '$timeout', '
|
|||
};
|
||||
};
|
||||
|
||||
/*
|
||||
** Form Display Functions
|
||||
*/
|
||||
$scope.exitStartPage = function(){
|
||||
$scope.myform.startPage.showStart = false;
|
||||
if($scope.myform.form_fields.length > 0){
|
||||
$scope.selected._id = $scope.myform.form_fields[0]._id;
|
||||
}
|
||||
};
|
||||
|
||||
$scope.submitForm = function(){
|
||||
var _timeElapsed = TimeCounter.stopClock();
|
||||
|
||||
|
|
|
@ -7,9 +7,7 @@
|
|||
ng-model-options="{ debounce: 250 }"
|
||||
value="field.fieldValue"
|
||||
ng-required="field.required"
|
||||
ng-disabled="field.disabled" changeFocus
|
||||
focus-up-id="focusUpButton"
|
||||
focus-down-id="focusDownButton">
|
||||
ng-disabled="field.disabled">
|
||||
</div>
|
||||
<br>
|
||||
<div class="col-xs-12">
|
||||
|
|
|
@ -4,11 +4,11 @@
|
|||
<h2 class="text-center col-xs-9">{{field.title}} </h2>
|
||||
<div class="col-xs-1"><i class="fa fa-quote-right fa-1"></i></div>
|
||||
</div>
|
||||
<div class="row field-title field-input" ng-focus="setActiveField(field._id, index)">
|
||||
<div class="row field-title field-input">
|
||||
<p class="col-xs-12">{{field.description}} </p>
|
||||
<br>
|
||||
<button class="btn btn-info col-xs-6 col-xs-offset-3" style="font-size: 1.3em;">
|
||||
Continue
|
||||
<button class="btn btn-info col-xs-6 col-xs-offset-3" style="font-size: 1.3em;" ng-focus="setActiveField(field._id, index)">
|
||||
Continue
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -8,14 +8,13 @@
|
|||
</h3>
|
||||
</div>
|
||||
<div class="col-xs-12 field-input">
|
||||
<input ng-focus="setActiveField(field._id, index)" ng-style="{'color': design.colors.answerColor, 'border-color': design.colors.answerColor}"
|
||||
<input ng-style="{'color': design.colors.answerColor, 'border-color': design.colors.answerColor}"
|
||||
type="text"
|
||||
class="text-field-input"
|
||||
ng-model="field.fieldValue"
|
||||
ng-model-options="{ debounce: 250 }"
|
||||
value="field.fieldValue"
|
||||
ng-required="field.required"
|
||||
ng-disabled="field.disabled"
|
||||
changeFocus focus-up-id="focusUpButton" focus-down-id="focusDownButton">
|
||||
ng-disabled="field.disabled">
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -2,6 +2,7 @@
|
|||
|
||||
<section class="overlay submitform" ng-if="selected.index" ng-click="hideOverlay()"></section>
|
||||
|
||||
<!-- Start Page View -->
|
||||
<div ng-show="!myform.submitted && myform.startPage.showStart" class="form-submitted">
|
||||
<div class="field row text-center">
|
||||
<div class="col-xs-12 text-center">
|
||||
|
@ -21,14 +22,13 @@
|
|||
</p>
|
||||
</div>
|
||||
<div class="row form-actions">
|
||||
<!-- <p class="col-sm-2 col-sm-offset-5"> -->
|
||||
<button ng-click="exitStartPage()" class="btn btn-info col-sm-4 col-sm-offset-4" type="button">
|
||||
<a style="color:white; font-size: 1.6em; text-decoration: none;">Continue to Form</a>
|
||||
</button>
|
||||
<!-- </p> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Form Fields View -->
|
||||
<div ng-show="!myform.submitted && !myform.startPage.showStart" data-ng-init="initFocus()">
|
||||
<div class="field row" style="padding-bottom:5em;">
|
||||
<div class="col-sm-10 col-sm-offset-1">
|
||||
|
@ -38,8 +38,8 @@
|
|||
</div>
|
||||
<div class="row">
|
||||
<form name="myForm" class="submission-form col-sm-12 col-md-offset-1 col-md-10">
|
||||
<div ng-repeat="field in myform.form_fields" ng-if="!field.deletePreserved" ng-class="{activeField: selected._id == field._id }" class="row field-directive">
|
||||
<field-directive field="field" design="myform.design" index="$index" focus-on="selected._id == field._id">
|
||||
<div ng-repeat="field in myform.form_fields" ng-if="!field.deletePreserved">
|
||||
<field-directive field="field" design="myform.design" index="$index" ng-class="{activeField: selected._id == field._id }" class="row field-directive">
|
||||
</field-directive>
|
||||
</div>
|
||||
</form>
|
||||
|
@ -79,6 +79,7 @@
|
|||
</section>
|
||||
</div>
|
||||
|
||||
<!-- End Page View -->
|
||||
<div ng-show="myform.submitted" class="form-submitted">
|
||||
|
||||
<div class="field row text-center">
|
||||
|
|
Loading…
Reference in a new issue