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

fixed input focusing bug

Browse source
This commit is contained in:
David Baldwynn 2016-04-21 19:48:59 -04:00
parent f08648c70e
commit c84e90483e
17 changed files with 89 additions and 71 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
app/models/form.server.model.js
View file

@ -128,17 +128,17 @@ var FormSchema = new Schema({
questionColor: { questionColor: {
type: String, type: String,
match: [/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/], match: [/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/],
default: '#333', default: '#333'
}, },
answerColor: { answerColor: {
type: String, type: String,
match: [/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/], match: [/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/],
default: '#333', default: '#333'
}, },
buttonColor: { buttonColor: {
type: String, type: String,
match: [/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/] match: [/^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/],
default: '#fff', default: '#fff'
}, },
buttonTextColor: { buttonTextColor: {
type: String, type: String,

25
public/dist/application.js vendored
View file

File diff suppressed because one or more lines are too long

4
public/dist/application.min.css 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/core/css/core.css
View file

@ -46,9 +46,6 @@ body {
border: none; border: none;
} }
.content {
margin-top: 70px;
}
.undecorated-link:hover { .undecorated-link:hover {
text-decoration: none; text-decoration: none;
} }

30
public/modules/forms/css/form.css
View file

@ -22,13 +22,22 @@
} }
.container.admin-form { .container.admin-form {
margin-top: 70px; margin-top: 70px;
} }
form input { .public-form input, .public-form textarea {
background-color: rgba(0,0,0,0); background-color: rgba(0,0,0,0);
border: 2px dashed #ddd!important;
}
.public-form input:focus, .public-form textarea:focus {
border: 2px dashed #ddd!important;
outline: none;
}
.public-form input.no-border, .public-form textarea.no-border {
border: none!important;
} }
section.content p.breakwords { section.content p.breakwords {
word-break: break-all; word-break: break-all;
@ -176,23 +185,17 @@ form .row.field {
padding: 0.45em 0.9em; padding: 0.45em 0.9em;
width: 100%; width: 100%;
line-height: 160%; line-height: 160%;
border: 3px dashed #ddd;
} }
form .field-input > input.hasDatepicker{ form .field-input > input.hasDatepicker{
padding: 0.45em 0.9em; padding: 0.45em 0.9em;
width: 50%; width: 50%;
line-height: 160%; line-height: 160%;
border: 3px dashed #ddd;
} }
form .field-input > input.text-field-input{ form .field-input > input.text-field-input{
padding: 0.45em 0.9em; padding: 0.45em 0.9em;
width: 100%; width: 100%;
line-height: 160%; line-height: 160%;
border: 2px dashed #ddd!important;
}
form .field-input > input.text-field-input:focus{
border: 0;
} }
form .required-error{ form .required-error{
color: #ddd; color: #ddd;
@ -374,10 +377,17 @@ div.config-form .row.field {
} }
/* Styles for form list view (/forms) */ /* Styles for form list view (/forms) */
section > section.public-form { section.public-form {
padding: 0 10% 0 10%; padding: 0 10% 0 10%;
} }
section.public-form .form-submitted {
height: 100vh;
}
section.public-form .btn {
border: 1px solid;
}
.form-item { .form-item {
text-align: center; text-align: center;
border-bottom: 6px inset #ccc; border-bottom: 6px inset #ccc;

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

@ -94,6 +94,7 @@ angular.module('forms').directive('submitFormDirective', ['$http', 'TimeCounter'
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();
}); });
}, 20); }, 20);
} }

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

@ -10,6 +10,7 @@
<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 }"
ui-date="dateOptions" ui-date="dateOptions"
ng-model="field.fieldValue" ng-model="field.fieldValue"
ng-model-options="{ debounce: 250 }" ng-model-options="{ debounce: 250 }"

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

@ -7,7 +7,9 @@
<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">
<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"/> <input ng-focus="setActiveField(field._id, index, true)"
class="focusOn"
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> <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">

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

@ -4,8 +4,9 @@
<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" style="margin: 0.5em; padding-left:30px" ng-class="{activeBtn: field.fieldValue == field.fieldOptions[$index].option_id}"> <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, 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}"
type="radio" type="radio"
class="focusOn"
value="{{option.option_value}}" value="{{option.option_value}}"
ng-model="field.fieldValue" ng-model="field.fieldValue"
ng-model-options="{ debounce: 250 }" ng-model-options="{ debounce: 250 }"

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

@ -16,7 +16,7 @@
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"> class="angular-input-stars focusOn">
</input-stars> </input-stars>
</div> </div>
</div> </div>

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

@ -7,11 +7,10 @@
<p class="col-xs-12" ng-if="field.description.length">{{field.description}} </p> <p class="col-xs-12" ng-if="field.description.length">{{field.description}} </p>
<br> <br>
<div class="col-xs-offset-1 col-xs-11"> <div class="col-xs-offset-1 col-xs-11">
<button class="btn btn-info" <button class="btn focusOn"
style="font-size: 1.3em;" ng-style="{'font-size': '1.3em', 'background-color':design.colors.buttonColor, 'color':design.colors.buttonTextColor}"
ng-style="{'background-color':myform.design.colors.buttonColor, 'color':myform.design.colors.buttonTextColor}" ng-focused="setActiveField(field._id, index, true)"
ng-focused="setActiveField(field._id, index, true)" ng-click="$root.nextField()">
ng-click="$root.nextField()">
Continue Continue
</button> </button>
</div> </div>

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

@ -4,8 +4,10 @@
<textarea class="textarea" type="text" <textarea class="textarea" type="text"
ng-model="field.fieldValue" ng-model="field.fieldValue"
ng-model-options="{ debounce: 250 }" ng-model-options="{ debounce: 250 }"
value="{{field.fieldValue}}" ng-class="{ 'no-border': !!field.fieldValue }"
ng-required="field.required" value="{{field.fieldValue}}"
class="focusOn"
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)">
</textarea> </textarea>
@ -13,11 +15,11 @@
</div> </div>
<div class="col-xs-12 row"> <div class="col-xs-12 row">
<div class="btn btn-lg btn-default row-fluid" <div class="btn btn-lg btn-default row-fluid"
style="padding: 4px; margin-top:8px;"> style="padding: 4px; margin-top:8px; background: rgba(255,255,255,0.5)">
<button ng-disabled="!field.fieldValue" <button ng-disabled="!field.fieldValue"
ng-click="$root.nextField()" ng-click="$root.nextField()"
ng-style="{'background-color':myform.design.colors.buttonColor, 'color':myform.design.colors.buttonTextColor}" ng-style="{'background-color':design.colors.buttonColor, 'color':design.colors.buttonTextColor}"
class="btn col-sm-5 col-xs-5"> class="btn col-sm-5 col-xs-5">
OK <i class="fa fa-check"></i> OK <i class="fa fa-check"></i>

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

@ -12,7 +12,8 @@
ng-focus="setActiveField(field._id, index, true)" ng-focus="setActiveField(field._id, index, true)"
type="{{field.input_type}}" type="{{field.input_type}}"
placeholder="{{field.placeholder}}" placeholder="{{field.placeholder}}"
class="text-field-input" ng-class="{ 'no-border': !!field.fieldValue }"
class="focusOn 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"
@ -23,9 +24,9 @@
</div> </div>
<div class="col-xs-12 row"> <div class="col-xs-12 row">
<div class="btn btn-lg btn-default row-fluid" <div class="btn btn-lg btn-default row-fluid"
style="padding: 4px; margin-top:8px;"> style="padding: 4px; margin-top:8px; background: rgba(255,255,255,0.5)">
<button ng-disabled="!field.fieldValue" <button ng-disabled="!field.fieldValue"
ng-style="{'background-color':myform.design.colors.buttonColor, 'color':myform.design.colors.buttonTextColor}" ng-style="{'background-color':design.colors.buttonColor, 'color':design.colors.buttonTextColor}"
ng-click="$root.nextField()" ng-click="$root.nextField()"
class="btn col-sm-5 col-xs-5"> class="btn col-sm-5 col-xs-5">

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

@ -15,8 +15,9 @@
<div class="row"> <div class="row">
<label class="btn btn-default col-md-2 col-sm-3 col-xs-4" <label class="btn btn-default col-md-2 col-sm-3 col-xs-4"
style="background: rgba(0,0,0,0.1); text-align:left;"> style="background: rgba(0,0,0,0.1); text-align:left;">
<input type="radio" value="true" <input type="radio" value="true"
style="opacity: 0; margin-left: 0px;" class="focusOn"
style="opacity: 0; margin-left: 0px;"
ng-focus="setActiveField(field._id, index, true)" ng-focus="setActiveField(field._id, index, true)"
ng-model="field.fieldValue" ng-model="field.fieldValue"
ng-model-options="{ debounce: 250 }" ng-model-options="{ debounce: 250 }"

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

@ -6,7 +6,7 @@ class="form-submitted"
style="padding-top: 35vh;"> style="padding-top: 35vh;">
<div class="row"> <div class="row">
<div class="col-xs-12 text-center" style="overflow-wrap: break-word;"> <div class="col-xs-12 text-center" style="overflow-wrap: break-word;">
<h1 style="font-weight: 400; font-size: 25px;"> <h1 style="font-weight: 400; nont-size: 25px;">
{{myform.startPage.introTitle}} {{myform.startPage.introTitle}}
</h1> </h1>
</div> </div>
@ -39,7 +39,8 @@ ng-style="{'color':button.color}">
</div> </div>
<!-- Form Fields View --> <!-- Form Fields View -->
<div class="form-fields" ng-show="!myform.submitted && !myform.startPage.showStart"> <div class="form-fields" ng-show="!myform.submitted && !myform.startPage.showStart"
ng-style="{ 'border-color': myform.design.colors.buttonTextColor }">
<div class="row"> <div class="row">
<form name="myForm" <form name="myForm"
du-scroll-container du-scroll-container
@ -61,10 +62,11 @@ class="row field-directive">
<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}"
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: 50vh;">
<button ng-focus="setActiveField('submit_field', myform.form_fields.length)" <button ng-focus="setActiveField('submit_field', myform.form_fields.length)"
class="Button btn" class="Button btn col-sm-2 col-xs-4"
v-busy="loading" v-busy-label="Please wait" v-pressable v-busy="loading" v-busy-label="Please wait" v-pressable
ng-disabled="loading" ng-disabled="loading"
ng-click="submitForm()" ng-click="submitForm()"
@ -73,7 +75,7 @@ style="font-size: 1.6em; margin-left: 1em; margin-top: 1em;">
Submit Submit
</button> </button>
<div class="col-sm-2" style="font-size: 75%; margin-top:2.5em"> <div class="col-sm-2 col-xs-6" style="font-size: 75%; margin-top:2.5em">
<small> <small>
press ENTER press ENTER
</small> </small>
@ -81,8 +83,7 @@ press ENTER
</div> </div>
<section ng-if="!myform.hideFooter" class="navbar navbar-fixed-bottom" <section ng-if="!myform.hideFooter" class="navbar navbar-fixed-bottom"
style="padding-top:15px; border-top: 2px grey solid" ng-style="{ 'background-color':myform.design.colors.buttonColor, 'padding-top': '15px', 'border-top': '2px '+ myform.design.colors.buttonTextColor +' solid', 'color':myform.design.colors.buttonTextColor}">
ng-style="{'background-color':myform.design.colors.buttonColor, 'border-color':myform.design.colors.buttonTextColor, 'color':myform.design.colors.buttonTextColor}">
<div class="container-fluid"> <div class="container-fluid">
<div class="row"> <div class="row">
<div class="col-sm-5 col-md-6 col-xs-5" ng-show="!myform.submitted"> <div class="col-sm-5 col-md-6 col-xs-5" ng-show="!myform.submitted">
@ -124,7 +125,8 @@ press ENTER
<!-- End Page View --> <!-- End Page View -->
<div ng-if="myform.submitted && !loading" class="form-submitted" <div ng-if="myform.submitted && !loading" class="form-submitted"
ng-style="{'color':myform.design.colors.buttonTextColor}"> ng-style="{'color':myform.design.colors.buttonTextColor}"
style="padding-top: 5vh;">
<div class="field row text-center"> <div class="field row text-center">
<div class="col-xs-6 col-xs-offset-3 text-center">Form entry successfully submitted!</div> <div class="col-xs-6 col-xs-offset-3 text-center">Form entry successfully submitted!</div>

24
public/populate_template_cache.js
View file

File diff suppressed because one or more lines are too long