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,
|
type: String,
|
||||||
default: '',
|
default: '',
|
||||||
},
|
},
|
||||||
// form_fields: [Field],
|
|
||||||
form_fields: {
|
form_fields: {
|
||||||
type: [FieldSchema],
|
type: [FieldSchema],
|
||||||
},
|
},
|
||||||
|
|
|
@ -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;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -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) {
|
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');
|
|
||||||
// });
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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();
|
||||||
|
|
||||||
|
|
|
@ -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">
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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">
|
||||||
|
|
Loading…
Reference in a new issue