got scrolling to work for rating
This commit is contained in:
parent
d1cd1dc29a
commit
29dc7da106
52
public/dist/application.js
vendored
52
public/dist/application.js
vendored
File diff suppressed because one or more lines are too long
8
public/dist/application.min.js
vendored
8
public/dist/application.min.js
vendored
File diff suppressed because one or more lines are too long
|
@ -7,11 +7,10 @@ angular.module('forms').directive('onEnterKey', ['$rootScope', function($rootSco
|
||||||
$element.bind('keydown keypress', function(event) {
|
$element.bind('keydown keypress', function(event) {
|
||||||
var keyCode = event.which || event.keyCode;
|
var keyCode = event.which || event.keyCode;
|
||||||
if(keyCode === 13) {
|
if(keyCode === 13) {
|
||||||
|
event.preventDefault();
|
||||||
$rootScope.$apply(function() {
|
$rootScope.$apply(function() {
|
||||||
$rootScope.$eval($attrs.onEnterKey);
|
$rootScope.$eval($attrs.onEnterKey);
|
||||||
});
|
});
|
||||||
|
|
||||||
event.preventDefault();
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,3 +1,18 @@
|
||||||
/**
|
'use strict';
|
||||||
* Created by polydaic_mac on 2016-05-13.
|
|
||||||
*/
|
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);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}]);
|
||||||
|
|
|
@ -89,8 +89,8 @@ angular.module('forms').directive('submitFormDirective', ['$http', 'TimeCounter'
|
||||||
//console.log($scope.selected);
|
//console.log($scope.selected);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
//console.log('field_id: '+field_id);
|
console.log('field_id: '+field_id);
|
||||||
//console.log('field_index: '+field_index);
|
console.log('field_index: '+field_index);
|
||||||
//console.log($scope.selected);
|
//console.log($scope.selected);
|
||||||
|
|
||||||
$scope.selected._id = field_id;
|
$scope.selected._id = field_id;
|
||||||
|
@ -99,11 +99,18 @@ angular.module('forms').directive('submitFormDirective', ['$http', 'TimeCounter'
|
||||||
if(animateScroll){
|
if(animateScroll){
|
||||||
$scope.noscroll=true;
|
$scope.noscroll=true;
|
||||||
setTimeout(function() {
|
setTimeout(function() {
|
||||||
$document.scrollToElement(angular.element('.activeField'), -10, 200).then(function(){
|
$document.scrollToElement(angular.element('.activeField'), -10, 200).then(function() {
|
||||||
$scope.noscroll = false;
|
$scope.noscroll = false;
|
||||||
|
setTimeout(function() {
|
||||||
|
if (document.querySelectorAll('.activeField .focusOn')[0]) {
|
||||||
|
console.log(document.querySelectorAll('.activeField .focusOn')[0]);
|
||||||
document.querySelectorAll('.activeField .focusOn')[0].focus();
|
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;
|
selected_id = $scope.myform.form_fields[selected_index]._id;
|
||||||
$rootScope.setActiveField(selected_id, selected_index, true);
|
$rootScope.setActiveField(selected_id, selected_index, true);
|
||||||
} else if($scope.selected.index === $scope.myform.form_fields.length-1) {
|
} else if($scope.selected.index === $scope.myform.form_fields.length-1) {
|
||||||
|
console.log('Second last element');
|
||||||
selected_index = $scope.selected.index+1;
|
selected_index = $scope.selected.index+1;
|
||||||
selected_id = 'submit_field';
|
selected_id = 'submit_field';
|
||||||
$rootScope.setActiveField(selected_id, selected_index, true);
|
$rootScope.setActiveField(selected_id, selected_index, true);
|
||||||
|
|
|
@ -12,13 +12,16 @@
|
||||||
<div class="col-xs-12 field-input">
|
<div class="col-xs-12 field-input">
|
||||||
<div class="control-group input-append">
|
<div class="control-group input-append">
|
||||||
<input ng-focus="setActiveField(field._id, index, true)"
|
<input ng-focus="setActiveField(field._id, index, true)"
|
||||||
ng-style="{'color': design.colors.answerColor, 'border-color': design.colors.answerColor}"
|
:ng-style="{'color': design.colors.answerColor, 'border-color': design.colors.answerColor}"
|
||||||
ng-class="{ 'no-border': !!field.fieldValue }"
|
ng-class="{ 'no-border': !!field.fieldValue }"
|
||||||
ui-date="dateOptions"
|
ui-date="dateOptions"
|
||||||
ng-model="field.fieldValue"
|
ng-model="field.fieldValue"
|
||||||
ng-model-options="{ debounce: 250 }"
|
ng-model-options="{ debounce: 250 }"
|
||||||
ng-required="field.required"
|
ng-required="field.required"
|
||||||
ng-disabled="field.disabled">
|
ng-disabled="field.disabled"
|
||||||
|
placeholder="MM/DD/YYYY"
|
||||||
|
on-enter-key="nextField()"
|
||||||
|
ng-change="$root.nextField()">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -19,8 +19,8 @@
|
||||||
<ui-select-match placeholder="Type or select an option">
|
<ui-select-match placeholder="Type or select an option">
|
||||||
{{$select.selected.option_value}}
|
{{$select.selected.option_value}}
|
||||||
</ui-select-match>
|
</ui-select-match>
|
||||||
<ui-select-choices
|
<ui-select-choices repeat="option in field.fieldOptions | filter: $select.search"
|
||||||
repeat="option in field.fieldOptions | filter: $select.search"
|
ng-click="$root.nextField()"
|
||||||
ng-class="{'active': option.option_value === field.fieldValue }">
|
ng-class="{'active': option.option_value === field.fieldValue }">
|
||||||
<span ng-bind-html="option.option_value | highlight: $select.search"></span>
|
<span ng-bind-html="option.option_value | highlight: $select.search"></span>
|
||||||
</ui-select-choices>
|
</ui-select-choices>
|
||||||
|
|
|
@ -1,5 +1,4 @@
|
||||||
<div class="field row radio legal"
|
<div class="field row radio legal"
|
||||||
ng-click="setActiveField(field._id, index, true)"
|
|
||||||
on-enter-key="chooseDefaultOption('legal')">
|
on-enter-key="chooseDefaultOption('legal')">
|
||||||
<div class="col-xs-12 field-title" ng-style="{'color': design.colors.questionColor}">
|
<div class="col-xs-12 field-title" ng-style="{'color': design.colors.questionColor}">
|
||||||
<h3>
|
<h3>
|
||||||
|
@ -16,30 +15,35 @@
|
||||||
<div class="col-xs-12 field-input container">
|
<div class="col-xs-12 field-input container">
|
||||||
<div class="row-fluid">
|
<div class="row-fluid">
|
||||||
<label class="btn col-xs-5"
|
<label class="btn col-xs-5"
|
||||||
ng-class="{activeBtn: field.fieldValue == 'true'}">
|
ng-class="{activeBtn: field.fieldValue == 'true'}"
|
||||||
<input ng-focus="setActiveField(field._id, index, true)"
|
ng-click="nextField()">
|
||||||
class="focusOn"
|
<input class="focusOn"
|
||||||
ng-style="{'color': design.colors.answerColor, 'border-color': design.colors.answerColor}"
|
ng-style="{'color': design.colors.answerColor, 'border-color': design.colors.answerColor}"
|
||||||
type="radio"
|
type="radio" value="true"
|
||||||
value="true"
|
|
||||||
ng-model="field.fieldValue"
|
ng-model="field.fieldValue"
|
||||||
ng-model-options="{ debounce: 250 }"
|
ng-model-options="{ debounce: 250 }"
|
||||||
ng-required="field.required"
|
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>
|
<span> I accept </span>
|
||||||
</label>
|
</label>
|
||||||
<label class="btn col-xs-5 col-xs-offset-1"
|
<label class="btn col-xs-5 col-xs-offset-1"
|
||||||
ng-class="{activeBtn: field.fieldValue == 'false'}">
|
ng-class="{activeBtn: field.fieldValue == 'false'}"
|
||||||
<input ng-focus="setActiveField(field._id, index, true)"
|
ng-click="nextField()">
|
||||||
|
<input class="focusOn"
|
||||||
ng-style="{'color': design.colors.answerColor, 'border-color': design.colors.answerColor}"
|
ng-style="{'color': design.colors.answerColor, 'border-color': design.colors.answerColor}"
|
||||||
type="radio"
|
type="radio" value="false"
|
||||||
value="false"
|
|
||||||
ng-model="field.fieldValue"
|
ng-model="field.fieldValue"
|
||||||
ng-model-options="{ debounce: 250 }"
|
ng-model-options="{ debounce: 250 }"
|
||||||
ng-required="field.required"
|
ng-required="field.required"
|
||||||
ng-select="$root.nextField()"
|
ng-disabled="field.disabled"
|
||||||
ng-disabled="field.disabled"/>
|
ng-change="$root.nextField()"/>
|
||||||
|
<div class="letter" style="float:left">
|
||||||
|
N
|
||||||
|
</div>
|
||||||
<span>I don't accept </span>
|
<span>I don't accept </span>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,5 +1,4 @@
|
||||||
<div class="field row radio"
|
<div class="field row radio"
|
||||||
ng-click="setActiveField(field._id, index, true)"
|
|
||||||
ng-if="field.fieldOptions.length > 0"
|
ng-if="field.fieldOptions.length > 0"
|
||||||
on-enter-key="chooseDefaultOption()">
|
on-enter-key="chooseDefaultOption()">
|
||||||
<div class="col-xs-12 field-title" ng-style="{'color': design.colors.questionColor}">
|
<div class="col-xs-12 field-title" ng-style="{'color': design.colors.questionColor}">
|
||||||
|
@ -13,11 +12,15 @@
|
||||||
</h3>
|
</h3>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-xs-12 field-input">
|
<div class="col-xs-12 field-input">
|
||||||
|
|
||||||
<div ng-repeat="option in field.fieldOptions" class="row-fluid">
|
<div ng-repeat="option in field.fieldOptions" class="row-fluid">
|
||||||
<label class="btn col-xs-4"
|
<label class="btn col-xs-4"
|
||||||
style="margin: 0.5em; padding-left:30px"
|
style="margin: 0.5em; padding-left:30px"
|
||||||
ng-click="$root.nextField()"
|
ng-click="nextField()"
|
||||||
ng-class="{activeBtn: field.fieldValue == field.fieldOptions[$index].option_value}">
|
ng-class="{activeBtn: field.fieldValue == field.fieldOptions[$index].option_value}">
|
||||||
|
<div class="letter" style="float:left">
|
||||||
|
{{$index}}
|
||||||
|
</div>
|
||||||
<input ng-style="{'color': design.colors.answerColor, 'border-color': design.colors.answerColor}"
|
<input ng-style="{'color': design.colors.answerColor, 'border-color': design.colors.answerColor}"
|
||||||
type="radio" class="focusOn"
|
type="radio" class="focusOn"
|
||||||
value="{{option.option_value}}"
|
value="{{option.option_value}}"
|
||||||
|
|
|
@ -1,5 +1,4 @@
|
||||||
<div class="textfield field row"
|
<div class="textfield field row"
|
||||||
ng-click="setActiveField(field._id, index, true)"
|
|
||||||
on-enter-key="chooseDefaultOption('rating')">
|
on-enter-key="chooseDefaultOption('rating')">
|
||||||
<div class="col-xs-12 field-title" ng-style="{'color': design.colors.questionColor}">
|
<div class="col-xs-12 field-title" ng-style="{'color': design.colors.questionColor}">
|
||||||
<h3>
|
<h3>
|
||||||
|
@ -12,11 +11,11 @@
|
||||||
</h3>
|
</h3>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-xs-12 field-input">
|
<div class="col-xs-12 field-input">
|
||||||
<input-stars max="5" ng-focus="setActiveField(field._id, index, true)"
|
<input-stars max="5"
|
||||||
|
on-star-click="$root.nextField()"
|
||||||
icon-full="fa-star"
|
icon-full="fa-star"
|
||||||
icon-base="fa fa-3x"
|
icon-base="fa fa-3x"
|
||||||
icon-empty="fa-star-o"
|
icon-empty="fa-star-o"
|
||||||
ng-init="field.fieldValue = 1"
|
|
||||||
ng-model="field.fieldValue"
|
ng-model="field.fieldValue"
|
||||||
ng-model-options="{ debounce: 250 }"
|
ng-model-options="{ debounce: 250 }"
|
||||||
ng-required="field.required"
|
ng-required="field.required"
|
||||||
|
|
|
@ -10,15 +10,15 @@
|
||||||
</h3>
|
</h3>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-xs-12 field-input">
|
<div class="col-xs-12 field-input">
|
||||||
<textarea class="textarea" type="text"
|
<textarea class="textarea focusOn" type="text"
|
||||||
ng-model="field.fieldValue"
|
ng-model="field.fieldValue"
|
||||||
ng-model-options="{ debounce: 250 }"
|
ng-model-options="{ debounce: 250 }"
|
||||||
ng-class="{ 'no-border': !!field.fieldValue }"
|
ng-class="{ 'no-border': !!field.fieldValue }"
|
||||||
value="{{field.fieldValue}}"
|
value="{{field.fieldValue}}"
|
||||||
class="focusOn"
|
|
||||||
ng-required="field.required"
|
ng-required="field.required"
|
||||||
ng-disabled="field.disabled"
|
ng-disabled="field.disabled"
|
||||||
ng-focus="setActiveField(field._id, index, true)">
|
ng-focus="setActiveField(field._id, index, true)"
|
||||||
|
on-enter-key="nextField()">
|
||||||
</textarea>
|
</textarea>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -58,26 +58,27 @@ class="row field-directive">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="row form-actions" id="submit_field"
|
<div class="row form-actions" id="submit_field"
|
||||||
ng-click="setActiveField('submit_field', myform.form_fields.length)"
|
ng-click="setActiveField('submit_field', myform.form_fields.length)"
|
||||||
ng-class="{activeField: selected._id == 'submit_field' }"
|
ng-class="{activeField: selected._id == 'submit_field' }"
|
||||||
ng-style="{ 'background-color':myform.design.colors.buttonColor}"
|
ng-style="{ 'background-color':myform.design.colors.buttonColor}"
|
||||||
style="border-top: 1px solid #ddd; margin-right: -13% ;margin-left: -13%; padding-bottom: 50vh;">
|
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)"
|
<button ng-focus="setActiveField('submit_field', myform.form_fields.length)"
|
||||||
class="Button btn col-sm-2 col-xs-4"
|
class="Button btn col-sm-2 col-xs-4 focusOn"
|
||||||
v-busy="loading" v-busy-label="Please wait" v-pressable
|
v-busy="loading" v-busy-label="Please wait" v-pressable
|
||||||
ng-disabled="loading || forms.myForm.$invalid"
|
ng-disabled="loading || forms.myForm.$invalid"
|
||||||
ng-click="submitForm()"
|
ng-click="submitForm()"
|
||||||
ng-style="{'background-color':myform.design.colors.buttonColor, 'color':myform.design.colors.buttonTextColor}"
|
ng-style="{'background-color':myform.design.colors.buttonColor, 'color':myform.design.colors.buttonTextColor}"
|
||||||
style="font-size: 1.6em; margin-left: 1em; margin-top: 1em;">
|
style="font-size: 1.6em; margin-left: 1em; margin-top: 1em;">
|
||||||
Submit
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<div class="col-sm-2 col-xs-6" style="font-size: 75%; margin-top:2.5em">
|
Submit
|
||||||
<small>
|
</button>
|
||||||
press ENTER
|
|
||||||
</small>
|
<div class="col-sm-2 col-xs-6" style="font-size: 75%; margin-top:3.25em">
|
||||||
</div>
|
<small>
|
||||||
|
press ENTER
|
||||||
|
</small>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<section ng-if="!myform.hideFooter" class="navbar navbar-fixed-bottom"
|
<section ng-if="!myform.hideFooter" class="navbar navbar-fixed-bottom"
|
||||||
|
|
Loading…
Reference in a new issue