fixed scrolling bug for prev/nextField buttons

This commit is contained in:
David Baldwynn 2015-11-12 11:45:25 -08:00
parent 5d9455a736
commit aa72e1ac3c
9 changed files with 51 additions and 76 deletions

View file

@ -60,7 +60,6 @@ var FormSchema = new Schema({
type: String,
default: '',
},
// form_fields: [Field],
form_fields: {
type: [FieldSchema],
},

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

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