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, type: String,
default: '', default: '',
}, },
// form_fields: [Field],
form_fields: { form_fields: {
type: [FieldSchema], type: [FieldSchema],
}, },

View file

@ -58,7 +58,6 @@ var FormSubmissionSchema = new Schema({
form_fields: { form_fields: {
type: [Schema.Types.Mixed], type: [Schema.Types.Mixed],
}, },
// form_fields: [Field],
form: { form: {
type: Schema.Types.ObjectId, type: Schema.Types.ObjectId,
@ -83,7 +82,7 @@ var FormSubmissionSchema = new Schema({
type: Schema.Types.Mixed, type: Schema.Types.Mixed,
}, },
timeElapsed: { //time (in seconds) it took for user to submit form timeElapsed: {
type: Number, type: Number,
}, },
percentageComplete: { percentageComplete: {
@ -149,14 +148,14 @@ FormSubmissionSchema.pre('save', function (next) {
_generatedDemo[propertyName] = currField.fieldValue+''; _generatedDemo[propertyName] = currField.fieldValue+'';
}else if(propertyName === 'DOB'){ }else if(propertyName === 'DOB'){
var date = new Date(currField.fieldValue); var date = new Date(currField.fieldValue);
_generatedDemo['dateOfBirth'] = date.getDate()+''; _generatedDemo.dateOfBirth = date.getDate()+'';
_generatedDemo['yearOfBirth'] = date.getFullYear()+''; _generatedDemo.yearOfBirth = date.getFullYear()+'';
_generatedDemo['monthOfBirth'] = date.getMonth()+''; _generatedDemo.monthOfBirth = date.getMonth()+'';
} }
} }
var currDate = new Date(); var currDate = new Date();
var dateString = currDate.toISOString().split('T')[0] + ' ' + currDate.toISOString().split('T')[1].slice(0,8); 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; 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) { if(scope.$first && !scope.$last) {
scope.$evalAsync(function () { scope.$evalAsync(function () {
// console.log(Date.now());
$rootScope.$broadcast(broadcastMessage+' Started'); $rootScope.$broadcast(broadcastMessage+' Started');
}); });
}else if(scope.$last) { }else if(scope.$last) {
scope.$evalAsync(function () { scope.$evalAsync(function () {
// element.ready(function () { // console.log(broadcastMessage+'Finished');
console.log(broadcastMessage+'Finished'); $rootScope.$broadcast(broadcastMessage+' Finished');
// console.log(Date.now());
$rootScope.$broadcast(broadcastMessage+' Finished');
// });
}); });
} }
} }

View file

@ -23,13 +23,31 @@ angular.module('forms').directive('submitFormDirective', ['$http', '$timeout', '
TimeCounter.startClock(); TimeCounter.startClock();
$scope.exitStartPage = function(){
$scope.myform.startPage.showStart = false; /*
if($scope.myform.form_fields.length > 0){ ** Field Controls
$scope.selected._id = $scope.myform.form_fields[0]._id; */
$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(){ $scope.nextField = function(){
if($scope.selected.index < $scope.myform.form_fields.length-1){ if($scope.selected.index < $scope.myform.form_fields.length-1){
$scope.selected.index++; $scope.selected.index++;
@ -44,20 +62,7 @@ angular.module('forms').directive('submitFormDirective', ['$http', '$timeout', '
$scope.setActiveField($scope.selected._id, $scope.selected.index); $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.hideOverlay = function(){
$scope.selected = { $scope.selected = {
_id: '', _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(){ $scope.submitForm = function(){
var _timeElapsed = TimeCounter.stopClock(); var _timeElapsed = TimeCounter.stopClock();

View file

@ -7,9 +7,7 @@
ng-model-options="{ debounce: 250 }" ng-model-options="{ debounce: 250 }"
value="field.fieldValue" value="field.fieldValue"
ng-required="field.required" ng-required="field.required"
ng-disabled="field.disabled" changeFocus ng-disabled="field.disabled">
focus-up-id="focusUpButton"
focus-down-id="focusDownButton">
</div> </div>
<br> <br>
<div class="col-xs-12"> <div class="col-xs-12">

View file

@ -4,11 +4,11 @@
<h2 class="text-center col-xs-9">{{field.title}} </h2> <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 class="col-xs-1"><i class="fa fa-quote-right fa-1"></i></div>
</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> <p class="col-xs-12">{{field.description}} </p>
<br> <br>
<button class="btn btn-info col-xs-6 col-xs-offset-3" style="font-size: 1.3em;"> <button class="btn btn-info col-xs-6 col-xs-offset-3" style="font-size: 1.3em;" ng-focus="setActiveField(field._id, index)">
Continue Continue
</button> </button>
</div> </div>
</div> </div>

View file

@ -8,14 +8,13 @@
</h3> </h3>
</div> </div>
<div class="col-xs-12 field-input"> <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" type="text"
class="text-field-input" class="text-field-input"
ng-model="field.fieldValue" ng-model="field.fieldValue"
ng-model-options="{ debounce: 250 }" ng-model-options="{ debounce: 250 }"
value="field.fieldValue" value="field.fieldValue"
ng-required="field.required" ng-required="field.required"
ng-disabled="field.disabled" ng-disabled="field.disabled">
changeFocus focus-up-id="focusUpButton" focus-down-id="focusDownButton">
</div> </div>
</div> </div>

View file

@ -2,6 +2,7 @@
<section class="overlay submitform" ng-if="selected.index" ng-click="hideOverlay()"></section> <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 ng-show="!myform.submitted && myform.startPage.showStart" class="form-submitted">
<div class="field row text-center"> <div class="field row text-center">
<div class="col-xs-12 text-center"> <div class="col-xs-12 text-center">
@ -21,14 +22,13 @@
</p> </p>
</div> </div>
<div class="row form-actions"> <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"> <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> <a style="color:white; font-size: 1.6em; text-decoration: none;">Continue to Form</a>
</button> </button>
<!-- </p> -->
</div> </div>
</div> </div>
<!-- Form Fields View -->
<div ng-show="!myform.submitted && !myform.startPage.showStart" data-ng-init="initFocus()"> <div ng-show="!myform.submitted && !myform.startPage.showStart" data-ng-init="initFocus()">
<div class="field row" style="padding-bottom:5em;"> <div class="field row" style="padding-bottom:5em;">
<div class="col-sm-10 col-sm-offset-1"> <div class="col-sm-10 col-sm-offset-1">
@ -38,8 +38,8 @@
</div> </div>
<div class="row"> <div class="row">
<form name="myForm" class="submission-form col-sm-12 col-md-offset-1 col-md-10"> <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"> <div ng-repeat="field in myform.form_fields" ng-if="!field.deletePreserved">
<field-directive field="field" design="myform.design" index="$index" focus-on="selected._id == field._id"> <field-directive field="field" design="myform.design" index="$index" ng-class="{activeField: selected._id == field._id }" class="row field-directive">
</field-directive> </field-directive>
</div> </div>
</form> </form>
@ -79,6 +79,7 @@
</section> </section>
</div> </div>
<!-- End Page View -->
<div ng-show="myform.submitted" class="form-submitted"> <div ng-show="myform.submitted" class="form-submitted">
<div class="field row text-center"> <div class="field row text-center">