beenull/tellform
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

added scrolling focus to form submit view

Browse source
This commit is contained in:
David Baldwynn 2016-04-21 12:10:12 -04:00
parent 822ff0df5c
commit 40a1cedf42
20 changed files with 216 additions and 155 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
:
View file

@ -1,31 +0,0 @@
<div class="textfield field row" ng-click="setActiveField(field._id, index)">
<div class="col-xs-12 field-title" ng-style="{'color': design.colors.questionColor}" ng-style="{'color': design.colors.questionColor}">
<h3>
<span class="fa fa-angle-double-right"></span> {{field.title}}
<span class="required-error" ng-show="field.required && !field.fieldValue">
*(required)
</span>
</h3>
</div>
<div class="col-xs-12 field-input">
<input ng-style="{'color': design.colors.answerColor, 'border-color': design.colors.answerColor}"
ng-focus="setActiveField(field._id, index)"
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">
</div>
<div ng-show="field.required && field.fieldValue" class="col-xs-12 field-input">
<div class="btn btn-lg btn-default disabled">
<div class="btn btn-sm btn-primary">
OK <i class="fa fa-check"></i>
</div>
<small>
press ENTER
</small>
</div>
</div>
</div>

132
public/dist/application.js vendored
View file

File diff suppressed because one or more lines are too long

8
public/dist/application.min.js vendored
View file

File diff suppressed because one or more lines are too long

102
public/modules/forms/directives/submit-form.client.directive.js
View file

@ -8,15 +8,16 @@ angular.module('forms').directive('submitFormDirective', ['$http', 'TimeCounter'
scope: {
myform:'='
},
controller: function($document, $scope){
controller: function($document, $window, $scope){
$scope.authentication = $rootScope.authentication;
$scope.form_fields_count = $scope.myform.visible_form_fields.filter(function(field){
if(field.fieldType === 'statement' || field.fieldType === 'rating'){
return false;
}
return true;
}).length;
$scope.noscroll = false;
$scope.form_fields_count = $scope.myform.visible_form_fields.filter(function(field){
if(field.fieldType === 'statement' || field.fieldType === 'rating'){
return false;
}
return true;
}).length;
$scope.reloadForm = function(){
//Reset Form
@ -36,46 +37,89 @@ angular.module('forms').directive('submitFormDirective', ['$http', 'TimeCounter'
//Reset Timer
TimeCounter.restartClock();
};
$window.onscroll = function(){
$scope.scrollPos = document.body.scrollTop || document.documentElement.scrollTop || 0;
var elemBox = document.getElementsByClassName('activeField')[0].getBoundingClientRect();
$scope.fieldTop = elemBox.top;
$scope.fieldBottom = elemBox.bottom;
//fieldbottom<173
//fieldTop>173
if(!$scope.noscroll){
//Focus on submit button
if( $scope.selected.index === $scope.myform.form_fields.length-1 && $scope.fieldBottom < 200){
var field_index = $scope.selected.index+1;
var field_id = 'submit_field';
$scope.setActiveField(field_id, field_index, false);
}
//Focus on field above submit button
else if($scope.selected.index === $scope.myform.form_fields.length){
if($scope.fieldTop > 200){
var field_index = $scope.selected.index-1;
var field_id = $scope.myform.form_fields[field_index]._id;
$scope.setActiveField(field_id, field_index, false);
}
}else if( $scope.fieldBottom < 0){
var field_index = $scope.selected.index+1;
var field_id = $scope.myform.form_fields[field_index]._id;
$scope.setActiveField(field_id, field_index, false);
}else if ( $scope.selected.index !== 0 && $scope.fieldTop > 0) {
var field_index = $scope.selected.index-1;
var field_id = $scope.myform.form_fields[field_index]._id;
$scope.setActiveField(field_id, field_index, false);
}
console.log('$scope.selected.index: '+$scope.selected.index);
console.log('scroll pos: '+$scope.scrollPos+' fieldTop: '+$scope.fieldTop+' fieldBottom: '+$scope.fieldBottom);
$scope.$apply();
}
};
/*
** Field Controls
*/
$scope.setActiveField = $rootScope.setActiveField = function(field_id, field_index) {
$scope.setActiveField = $rootScope.setActiveField = function(field_id, field_index, animateScroll) {
if($scope.selected === null || $scope.selected._id === field_id){
return;
}
console.log('not scrolling');
console.log($scope.selected);
return;
}
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() {
angular.element('html, body').animate({
scrollTop: angular.element('.activeField').offset().top
},200);
}, 10);
if(animateScroll){
$scope.noscroll=true;
setTimeout(function() {
$document.scrollToElement(angular.element('.activeField'), 0, 200).then(function(){
$scope.noscroll = false;
});
}, 20);
}
};
$rootScope.nextField = $scope.nextField = function(){
console.log($scope.selected.index);
console.log($scope.myform.form_fields.length-1);
//console.log($scope.selected.index);
//console.log($scope.myform.form_fields.length-1);
if($scope.selected.index < $scope.myform.form_fields.length-1){
$scope.selected.index++;
$scope.selected._id = $scope.myform.form_fields[$scope.selected.index]._id;
$rootScope.setActiveField($scope.selected._id, $scope.selected.index);
var selected_index = $scope.selected.index+1;
var selected_id = $scope.myform.form_fields[selected_index]._id;
$rootScope.setActiveField(selected_id, selected_index, true);
} else if($scope.selected.index === $scope.myform.form_fields.length-1) {
$scope.selected.index++;
$scope.selected._id = 'submit_field';
$rootScope.setActiveField($scope.selected._id, $scope.selected.index);
var selected_index = $scope.selected.index+1;
var selected_id = 'submit_field';
$rootScope.setActiveField(selected_id, selected_index, true);
}
};
$rootScope.prevField = $scope.prevField = function(){
if($scope.selected.index > 0){
$scope.selected.index = $scope.selected.index - 1;
$scope.selected._id = $scope.myform.form_fields[$scope.selected.index]._id;
$rootScope.setActiveField($scope.selected._id, $scope.selected.index);
var selected_index = $scope.selected.index - 1;
var selected_id = $scope.myform.form_fields[selected_index]._id;
$scope.setActiveField(selected_id, selected_index, true);
}
};

4
public/modules/forms/views/directiveViews/field/date.html
View file

@ -1,4 +1,4 @@
<div class="field row" ng-click="setActiveField(field._id, index)">
<div class="field row" ng-click="setActiveField(field._id, index, true)">
<div class="col-xs-12 field-title" ng-style="{'color': design.colors.questionColor}">
<h3>
<span class="fa fa-angle-double-right"></span>
@ -8,7 +8,7 @@
</div>
<div class="col-xs-12 field-input">
<div class="control-group input-append">
<input ng-focus="setActiveField(field._id, index)"
<input ng-focus="setActiveField(field._id, index, true)"
ng-style="{'color': design.colors.answerColor, 'border-color': design.colors.answerColor}"
ui-date="dateOptions"
ng-model="field.fieldValue"

4
public/modules/forms/views/directiveViews/field/dropdown.html
View file

@ -1,4 +1,4 @@
<div class="field row dropdown" ng-click="setActiveField(field._id, index)" ng-if="field.fieldOptions.length > 0">
<div class="field row dropdown" ng-click="setActiveField(field._id, index, true)" ng-if="field.fieldOptions.length > 0">
<div class="col-xs-12 field-title" ng-style="{'color': design.colors.questionColor}">
<h3>
<span class="fa fa-angle-double-right"></span>
@ -12,7 +12,7 @@
ng-model-options="{ debounce: 250 }"
ng-required="field.required"
ng-disabled="field.disabled"
ng-focus="setActiveField(field._id, index)">
ng-focus="setActiveField(field._id, index, true)">
<ui-select-match placeholder="Type or select an option">
{{$select.selected.option_value}}
</ui-select-match>

4
public/modules/forms/views/directiveViews/field/file.html
View file

@ -1,4 +1,4 @@
<div class="field row" ng-if="form.autofillPDFs" ng-click="setActiveField(field._id, index)">
<div class="field row" ng-if="form.autofillPDFs" ng-click="setActiveField(field._id, index, true)">
<div class="col-sm-4 field-title">
<h5>{{field.title}} <span class="required-error" ng-show="field.required && field.fieldValue == 0">(* required)</span></h5>
</div>
@ -28,4 +28,4 @@
</div>
</div>
</div>
</div>
</div>

2
public/modules/forms/views/directiveViews/field/hidden.html
View file

@ -1 +1 @@
<input ng-focus="setActiveField(field._id, index)" ng-style="{'color': design.colors.answerColor, 'border-color': design.colors.answerColor}" type="hidden" ng-model="field.fieldValue" ng-model-options="{ debounce: 250 }" value="{{field.fieldValue}}" ng-disabled="field.disabled">
<input ng-focus="setActiveField(field._id, index, true)" ng-style="{'color': design.colors.answerColor, 'border-color': design.colors.answerColor}" type="hidden" ng-model="field.fieldValue" ng-model-options="{ debounce: 250 }" value="{{field.fieldValue}}" ng-disabled="field.disabled">

6
public/modules/forms/views/directiveViews/field/legal.html
View file

@ -1,4 +1,4 @@
<div class="field row radio legal" ng-click="setActiveField(field._id, index)">
<div class="field row radio legal" ng-click="setActiveField(field._id, index, true)">
<div class="col-xs-12 field-title" ng-style="{'color': design.colors.questionColor}">
<h3>{{field.title}} <span class="required-error" ng-show="field.required && !field.fieldValue">*(required)</span></h3>
<br>
@ -7,11 +7,11 @@
<div class="col-xs-12 field-input container">
<div class="row-fluid">
<label class="btn col-xs-5">
<input ng-focus="setActiveField(field._id, index)" ng-style="{'color': design.colors.answerColor, 'border-color': design.colors.answerColor}" type="radio" value="true" ng-model="field.fieldValue" ng-model-options="{ debounce: 250 }" ng-required="field.required" ng-disabled="field.disabled"/>
<input ng-focus="setActiveField(field._id, index, true)" ng-style="{'color': design.colors.answerColor, 'border-color': design.colors.answerColor}" type="radio" value="true" ng-model="field.fieldValue" ng-model-options="{ debounce: 250 }" ng-required="field.required" ng-disabled="field.disabled"/>
<span> I accept </span>
</label>
<label class="btn col-xs-5 col-xs-offset-1">
<input ng-focus="setActiveField(field._id, index)" ng-style="{'color': design.colors.answerColor, 'border-color': design.colors.answerColor}" type="radio" value="false" ng-model="field.fieldValue" ng-model-options="{ debounce: 250 }" ng-required="field.required" ng-disabled="field.disabled"/>
<input ng-focus="setActiveField(field._id, index, true)" ng-style="{'color': design.colors.answerColor, 'border-color': design.colors.answerColor}" type="radio" value="false" ng-model="field.fieldValue" ng-model-options="{ debounce: 250 }" ng-required="field.required" ng-disabled="field.disabled"/>
<span>I don't accept </span>
</label>
</div>

4
public/modules/forms/views/directiveViews/field/natural.html
View file

@ -1,7 +1,7 @@
<div class="field row textfield natural" ng-click="setActiveField(field._id, index)">
<div class="field row textfield natural" ng-click="setActiveField(field._id, index, true)">
<div class="col-xs-12 field-title" ng-style="{'color': design.colors.questionColor}"><h3><span class="fa fa-angle-double-right"></span> {{field.title}} <span class="required-error" ng-show="field.required && !field.fieldValue">*(required)</span></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}" type="text"
<input ng-focus="setActiveField(field._id, index, true)" 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 }"

6
public/modules/forms/views/directiveViews/field/number.html
View file

@ -1,7 +1,7 @@
<div class="field row" ng-click="setActiveField(field._id, index)">
<div class="field row" ng-click="setActiveField(field._id, index, true)">
<div class="col-xs-12 field-title" ng-style="{'color': design.colors.questionColor}"><h3><span class="fa fa-angle-double-right"></span> {{field.title}} <span class="required-error" ng-show="field.required && !field.fieldValue">*(required)</span></h3></div>
<div class="col-xs-12 field-input">
<input ng-focus="setActiveField(field._id, index)"
<input ng-focus="setActiveField(field._id, index, true)"
ng-style="{'color': design.colors.answerColor, 'border-color': design.colors.answerColor}"
type="number"
class="text-field-input"
@ -11,7 +11,7 @@
ng-model-options="{ debounce: 250 }"
ng-required="field.required"
ng-disabled="field.disabled"
ng-focus="setActiveField(field._id, index)"/>
ng-focus="setActiveField(field._id, index, true)"/>
</div>
</div>
<div class="col-xs-12 row">

4
public/modules/forms/views/directiveViews/field/password.html
View file

@ -1,6 +1,6 @@
<div class="field row" ng-click="setActiveField(field._id, index)">
<div class="field row" ng-click="setActiveField(field._id, index, true)">
<div class="col-xs-12 field-title" ng-style="{'color': design.colors.questionColor}"><h3><span class="fa fa-angle-double-right"></span> {{field.title}} <span class="required-error" ng-show="field.required && !field.fieldValue">*(required)</span></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}" type="password" class="text-field-input" ng-model="field.fieldValue" ng-model-options="{ debounce: 250 }" value="{{field.fieldValue}}" ng-required="field.required" ng-disabled="field.disabled">
<input ng-focus="setActiveField(field._id, index, true)" ng-style="{'color': design.colors.answerColor, 'border-color': design.colors.answerColor}" type="password" class="text-field-input" ng-model="field.fieldValue" ng-model-options="{ debounce: 250 }" value="{{field.fieldValue}}" ng-required="field.required" ng-disabled="field.disabled">
</div>
</div>

4
public/modules/forms/views/directiveViews/field/radio.html
View file

@ -1,9 +1,9 @@
<div class="field row radio" ng-click="setActiveField(field._id, index)" ng-if="field.fieldOptions.length > 0">
<div class="field row radio" ng-click="setActiveField(field._id, index, true)" ng-if="field.fieldOptions.length > 0">
<div class="col-xs-12 field-title" ng-style="{'color': design.colors.questionColor}"><h3><span class="fa fa-angle-double-right"></span> {{field.title}} <span class="required-error" ng-show="field.required && !field.fieldValue">*(required)</span></h3></div>
<div class="col-xs-12 field-input">
<div ng-repeat="option in field.fieldOptions" class="row-fluid">
<label class="btn col-xs-4" style="margin: 0.5em; padding-left:30px" ng-class="{activeBtn: field.fieldValue == field.fieldOptions[$index].option_id}">
<input ng-focus="setActiveField(field._id, index)"
<input ng-focus="setActiveField(field._id, index, true)"
ng-style="{'color': design.colors.answerColor, 'border-color': design.colors.answerColor}"
type="radio"
value="{{option.option_value}}"

4
public/modules/forms/views/directiveViews/field/rating.html
View file

@ -1,4 +1,4 @@
<div class="textfield field row" ng-click="setActiveField(field._id, index)">
<div class="textfield field row" ng-click="setActiveField(field._id, index, true)">
<div class="col-xs-12 field-title" ng-style="{'color': design.colors.questionColor}">
<h3>
<span class="fa fa-angle-double-right"></span>
@ -7,7 +7,7 @@
</h3>
</div>
<div class="col-xs-12 field-input">
<input-stars max="5" ng-focus="setActiveField(field._id, index)"
<input-stars max="5" ng-focus="setActiveField(field._id, index, true)"
icon-full="fa-star"
icon-base="fa fa-3x"
icon-empty="fa-star-o"

6
public/modules/forms/views/directiveViews/field/statement.html
View file

@ -1,4 +1,4 @@
<div class="statement field row" ng-click="setActiveField(field._id, index)">
<div class="statement field row" ng-click="setActiveField(field._id, index, true)">
<div class="row field-title field-title">
<div class="col-xs-1"><i class="fa fa-quote-left fa-1"></i></div>
<h2 class="text-left col-xs-9">{{field.title}} </h2>
@ -9,8 +9,8 @@
<div class="col-xs-offset-1 col-xs-11">
<button class="btn btn-info"
style="font-size: 1.3em;"
ng-focus="setActiveField(field._id, index)"
ng-click="nextField()">
ng-focus="setActiveField(field._id, index, true)"
ng-click="$root.nextField()">
Continue
</button>
</div>

4
public/modules/forms/views/directiveViews/field/textarea.html
View file

@ -1,4 +1,4 @@
<div class="field row" ng-click="setActiveField(field._id, index)">
<div class="field row" ng-click="setActiveField(field._id, index, true)">
<div class="col-xs-12 field-title" ng-style="{'color': design.colors.questionColor}"><h3><span class="fa fa-angle-double-right"></span> {{field.title}} <span class="required-error" ng-show="field.required && !field.fieldValue">*(required)</span></h3></div>
<div class="col-xs-12 field-input">
<textarea class="textarea" type="text"
@ -7,7 +7,7 @@
value="{{field.fieldValue}}"
ng-required="field.required"
ng-disabled="field.disabled"
ng-focus="setActiveField(field._id, index)">
ng-focus="setActiveField(field._id, index, true)">
</textarea>
</div>
</div>

4
public/modules/forms/views/directiveViews/field/textfield.html
View file

@ -1,4 +1,4 @@
<div class="textfield field row" ng-click="setActiveField(field._id, index)">
<div class="textfield field row" ng-click="setActiveField(field._id, index, true)">
<div class="col-xs-12 field-title" ng-style="{'color': design.colors.questionColor}" ng-style="{'color': design.colors.questionColor}">
<h3>
<span class="fa fa-angle-double-right"></span> {{field.title}}
@ -9,7 +9,7 @@
</div>
<div class="col-xs-12 field-input">
<input ng-style="{'color': design.colors.answerColor, 'border-color': design.colors.answerColor}"
ng-focus="setActiveField(field._id, index)"
ng-focus="setActiveField(field._id, index, true)"
type="{{field.input_type}}"
placeholder="{{field.placeholder}}"
class="text-field-input"

6
public/modules/forms/views/directiveViews/field/yes_no.html
View file

@ -1,4 +1,4 @@
<div class="field row radio" ng-click="setActiveField(field._id, index)">
<div class="field row radio" ng-click="setActiveField(field._id, index, true)">
<div class="col-xs-12 field-title" ng-style="{'color': design.colors.questionColor}">
<h3 class="row">
<span class="fa fa-angle-double-right"></span> {{field.title}}
@ -17,7 +17,7 @@
style="background: rgba(0,0,0,0.1); text-align:left;">
<input type="radio" value="true"
style="opacity: 0; margin-left: 0px;"
ng-focus="setActiveField(field._id, index)"
ng-focus="setActiveField(field._id, index, true)"
ng-model="field.fieldValue"
ng-model-options="{ debounce: 250 }"
ng-required="field.required"
@ -36,7 +36,7 @@
<input type="radio" value="false"
style="opacity:0; margin-left:0px;"
ng-focus="setActiveField(field._id, index)"
ng-focus="setActiveField(field._id, index, true)"
ng-model="field.fieldValue"
ng-model-options="{ debounce: 250 }"
ng-required="field.required"

6
public/modules/forms/views/directiveViews/form/submit-form.client.view.html
View file

@ -40,11 +40,15 @@
<!-- Form Fields View -->
<div class="form-fields" cg-busy="{promise:submitPromise,message:'Submitting form...',wrapperClass:'busy-submitting-wrapper',backdrop:true}" ng-show="!myform.submitted && !myform.startPage.showStart">
<div class="row">
<form name="myForm" novalidate class="submission-form col-sm-12 col-md-offset-1 col-md-10">
<form name="myForm"
du-scroll-container
novalidate
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"
data-index="{{$index}}"
data-id="{{field._id}}"
du-scrollspy
ng-class="{activeField: selected._id == field._id }"
class="row field-directive">
<field-directive field="field" design="myform.design" index="$index">

30
public/populate_template_cache.js
View file

File diff suppressed because one or more lines are too long