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

got scrolling to work for rating

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

56
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

3
public/modules/forms/directives/on-enter-key.client.directive.js
View file

@ -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();
} }
}); });
} }

21
public/modules/forms/directives/on-key-press.client.directive.js
View file

@ -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);
});
}
});
}
};
}]);

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

@ -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;
document.querySelectorAll('.activeField .focusOn')[0].focus(); 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; 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);

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

@ -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>

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

@ -19,9 +19,9 @@
<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>
</ui-select> </ui-select>

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

@ -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()">
ng-style="{'color': design.colors.answerColor, 'border-color': design.colors.answerColor}" <input class="focusOn"
type="radio" ng-style="{'color': design.colors.answerColor, 'border-color': design.colors.answerColor}"
value="false" type="radio" 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>

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

@ -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,12 +12,16 @@
</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}">
<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" type="radio" class="focusOn"
value="{{option.option_value}}" value="{{option.option_value}}"
ng-model="field.fieldValue" ng-model="field.fieldValue"

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

@ -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,16 +11,16 @@
</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"
icon-full="fa-star" on-star-click="$root.nextField()"
icon-base="fa fa-3x" icon-full="fa-star"
icon-empty="fa-star-o" icon-base="fa fa-3x"
ng-init="field.fieldValue = 1" icon-empty="fa-star-o"
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"
class="angular-input-stars focusOn"> class="angular-input-stars focusOn">
</input-stars> </input-stars>
</div> </div>
</div> </div>

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

@ -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>

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

@ -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"