got scrolling to work for rating

This commit is contained in:
David Baldwynn 2016-05-13 16:52:28 -07:00
parent d1cd1dc29a
commit 29dc7da106
12 changed files with 150 additions and 92 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -7,11 +7,10 @@ angular.module('forms').directive('onEnterKey', ['$rootScope', function($rootSco
$element.bind('keydown keypress', function(event) {
var keyCode = event.which || event.keyCode;
if(keyCode === 13) {
event.preventDefault();
$rootScope.$apply(function() {
$rootScope.$eval($attrs.onEnterKey);
});
event.preventDefault();
}
});
}

View file

@ -1,3 +1,18 @@
/**
* Created by polydaic_mac on 2016-05-13.
*/
'use strict';
angular.module('forms').directive('onKeyPress', ['$rootScope', function($rootScope){
return {
restrict: 'A',
link: function($scope, $element, $attrs) {
$element.bind('keydown keypress', function(event) {
var keyCode = event.which || event.keyCode;
if(keyCode === String.fromCharCode($attrs.keyPressChar)) {
event.preventDefault();
$rootScope.$apply(function() {
$rootScope.$eval($attrs.onKeyPress);
});
}
});
}
};
}]);

View file

@ -89,8 +89,8 @@ angular.module('forms').directive('submitFormDirective', ['$http', 'TimeCounter'
//console.log($scope.selected);
return;
}
//console.log('field_id: '+field_id);
//console.log('field_index: '+field_index);
console.log('field_id: '+field_id);
console.log('field_index: '+field_index);
//console.log($scope.selected);
$scope.selected._id = field_id;
@ -99,11 +99,18 @@ angular.module('forms').directive('submitFormDirective', ['$http', 'TimeCounter'
if(animateScroll){
$scope.noscroll=true;
setTimeout(function() {
$document.scrollToElement(angular.element('.activeField'), -10, 200).then(function(){
$scope.noscroll = false;
document.querySelectorAll('.activeField .focusOn')[0].focus();
$document.scrollToElement(angular.element('.activeField'), -10, 200).then(function() {
$scope.noscroll = false;
setTimeout(function() {
if (document.querySelectorAll('.activeField .focusOn')[0]) {
console.log(document.querySelectorAll('.activeField .focusOn')[0]);
document.querySelectorAll('.activeField .focusOn')[0].focus();
} else {
document.querySelectorAll('.activeField input')[0].focus();
}
});
});
}, 20);
});
}
};
@ -117,6 +124,7 @@ angular.module('forms').directive('submitFormDirective', ['$http', 'TimeCounter'
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) {
console.log('Second last element');
selected_index = $scope.selected.index+1;
selected_id = 'submit_field';
$rootScope.setActiveField(selected_id, selected_index, true);

View file

@ -12,13 +12,16 @@
<div class="col-xs-12 field-input">
<div class="control-group input-append">
<input ng-focus="setActiveField(field._id, index, true)"
ng-style="{'color': design.colors.answerColor, 'border-color': design.colors.answerColor}"
ng-class="{ 'no-border': !!field.fieldValue }"
ui-date="dateOptions"
ng-model="field.fieldValue"
ng-model-options="{ debounce: 250 }"
ng-required="field.required"
ng-disabled="field.disabled">
:ng-style="{'color': design.colors.answerColor, 'border-color': design.colors.answerColor}"
ng-class="{ 'no-border': !!field.fieldValue }"
ui-date="dateOptions"
ng-model="field.fieldValue"
ng-model-options="{ debounce: 250 }"
ng-required="field.required"
ng-disabled="field.disabled"
placeholder="MM/DD/YYYY"
on-enter-key="nextField()"
ng-change="$root.nextField()">
</div>
</div>
</div>

View file

@ -19,9 +19,9 @@
<ui-select-match placeholder="Type or select an option">
{{$select.selected.option_value}}
</ui-select-match>
<ui-select-choices
repeat="option in field.fieldOptions | filter: $select.search"
ng-class="{'active': option.option_value === field.fieldValue }">
<ui-select-choices repeat="option in field.fieldOptions | filter: $select.search"
ng-click="$root.nextField()"
ng-class="{'active': option.option_value === field.fieldValue }">
<span ng-bind-html="option.option_value | highlight: $select.search"></span>
</ui-select-choices>
</ui-select>

View file

@ -1,5 +1,4 @@
<div class="field row radio legal"
ng-click="setActiveField(field._id, index, true)"
on-enter-key="chooseDefaultOption('legal')">
<div class="col-xs-12 field-title" ng-style="{'color': design.colors.questionColor}">
<h3>
@ -16,30 +15,35 @@
<div class="col-xs-12 field-input container">
<div class="row-fluid">
<label class="btn col-xs-5"
ng-class="{activeBtn: field.fieldValue == 'true'}">
<input ng-focus="setActiveField(field._id, index, true)"
class="focusOn"
ng-class="{activeBtn: field.fieldValue == 'true'}"
ng-click="nextField()">
<input class="focusOn"
ng-style="{'color': design.colors.answerColor, 'border-color': design.colors.answerColor}"
type="radio"
value="true"
type="radio" value="true"
ng-model="field.fieldValue"
ng-model-options="{ debounce: 250 }"
ng-required="field.required"
ng-change="$root.nextField()"
ng-disabled="field.disabled"/>
ng-disabled="field.disabled"
ng-change="$root.nextField()"/>
<div class="letter" style="float:left">
Y
</div>
<span> I accept </span>
</label>
<label class="btn col-xs-5 col-xs-offset-1"
ng-class="{activeBtn: field.fieldValue == 'false'}">
<input ng-focus="setActiveField(field._id, index, true)"
ng-style="{'color': design.colors.answerColor, 'border-color': design.colors.answerColor}"
type="radio"
value="false"
ng-class="{activeBtn: field.fieldValue == 'false'}"
ng-click="nextField()">
<input class="focusOn"
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-select="$root.nextField()"
ng-disabled="field.disabled"/>
ng-required="field.required"
ng-disabled="field.disabled"
ng-change="$root.nextField()"/>
<div class="letter" style="float:left">
N
</div>
<span>I don't accept </span>
</label>
</div>

View file

@ -1,5 +1,4 @@
<div class="field row radio"
ng-click="setActiveField(field._id, index, true)"
ng-if="field.fieldOptions.length > 0"
on-enter-key="chooseDefaultOption()">
<div class="col-xs-12 field-title" ng-style="{'color': design.colors.questionColor}">
@ -13,12 +12,16 @@
</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-click="$root.nextField()"
ng-click="nextField()"
ng-class="{activeBtn: field.fieldValue == field.fieldOptions[$index].option_value}">
<input ng-style="{'color': design.colors.answerColor, 'border-color': design.colors.answerColor}"
<div class="letter" style="float:left">
{{$index}}
</div>
<input ng-style="{'color': design.colors.answerColor, 'border-color': design.colors.answerColor}"
type="radio" class="focusOn"
value="{{option.option_value}}"
ng-model="field.fieldValue"

View file

@ -1,5 +1,4 @@
<div class="textfield field row"
ng-click="setActiveField(field._id, index, true)"
on-enter-key="chooseDefaultOption('rating')">
<div class="col-xs-12 field-title" ng-style="{'color': design.colors.questionColor}">
<h3>
@ -12,16 +11,16 @@
</h3>
</div>
<div class="col-xs-12 field-input">
<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"
ng-init="field.fieldValue = 1"
ng-model="field.fieldValue"
ng-model-options="{ debounce: 250 }"
ng-required="field.required"
ng-disabled="field.disabled"
class="angular-input-stars focusOn">
<input-stars max="5"
on-star-click="$root.nextField()"
icon-full="fa-star"
icon-base="fa fa-3x"
icon-empty="fa-star-o"
ng-model="field.fieldValue"
ng-model-options="{ debounce: 250 }"
ng-required="field.required"
ng-disabled="field.disabled"
class="angular-input-stars focusOn">
</input-stars>
</div>
</div>

View file

@ -10,15 +10,15 @@
</h3>
</div>
<div class="col-xs-12 field-input">
<textarea class="textarea" type="text"
<textarea class="textarea focusOn" type="text"
ng-model="field.fieldValue"
ng-model-options="{ debounce: 250 }"
ng-class="{ 'no-border': !!field.fieldValue }"
value="{{field.fieldValue}}"
class="focusOn"
ng-required="field.required"
ng-required="field.required"
ng-disabled="field.disabled"
ng-focus="setActiveField(field._id, index, true)">
ng-focus="setActiveField(field._id, index, true)"
on-enter-key="nextField()">
</textarea>
</div>
</div>

View file

@ -58,26 +58,27 @@ class="row field-directive">
</div>
<div class="row form-actions" id="submit_field"
ng-click="setActiveField('submit_field', myform.form_fields.length)"
ng-class="{activeField: selected._id == 'submit_field' }"
ng-style="{ 'background-color':myform.design.colors.buttonColor}"
style="border-top: 1px solid #ddd; margin-right: -13% ;margin-left: -13%; padding-bottom: 50vh;">
ng-click="setActiveField('submit_field', myform.form_fields.length)"
ng-class="{activeField: selected._id == 'submit_field' }"
ng-style="{ 'background-color':myform.design.colors.buttonColor}"
style="border-top: 1px solid #ddd; margin-right: -13% ;margin-left: -13%; padding-bottom: 100vh;">
<button ng-focus="setActiveField('submit_field', myform.form_fields.length)"
class="Button btn col-sm-2 col-xs-4"
v-busy="loading" v-busy-label="Please wait" v-pressable
ng-disabled="loading || forms.myForm.$invalid"
ng-click="submitForm()"
ng-style="{'background-color':myform.design.colors.buttonColor, 'color':myform.design.colors.buttonTextColor}"
style="font-size: 1.6em; margin-left: 1em; margin-top: 1em;">
Submit
</button>
<button ng-focus="setActiveField('submit_field', myform.form_fields.length)"
class="Button btn col-sm-2 col-xs-4 focusOn"
v-busy="loading" v-busy-label="Please wait" v-pressable
ng-disabled="loading || forms.myForm.$invalid"
ng-click="submitForm()"
ng-style="{'background-color':myform.design.colors.buttonColor, 'color':myform.design.colors.buttonTextColor}"
style="font-size: 1.6em; margin-left: 1em; margin-top: 1em;">
<div class="col-sm-2 col-xs-6" style="font-size: 75%; margin-top:2.5em">
<small>
press ENTER
</small>
</div>
Submit
</button>
<div class="col-sm-2 col-xs-6" style="font-size: 75%; margin-top:3.25em">
<small>
press ENTER
</small>
</div>
</div>
<section ng-if="!myform.hideFooter" class="navbar navbar-fixed-bottom"