added field focus controls
This commit is contained in:
parent
f7ba6a2df6
commit
16a80fbcfc
|
@ -45,7 +45,8 @@ angular.module('forms').directive('fieldDirective', ['$templateCache', '$http',
|
||||||
scope: {
|
scope: {
|
||||||
field: '=',
|
field: '=',
|
||||||
required: '&',
|
required: '&',
|
||||||
design: '='
|
design: '=',
|
||||||
|
index: '=',
|
||||||
},
|
},
|
||||||
link: function(scope, element) {
|
link: function(scope, element) {
|
||||||
scope.setActiveField = $rootScope.setActiveField;
|
scope.setActiveField = $rootScope.setActiveField;
|
||||||
|
|
31
public/modules/forms/directives/focus-on.client.directive.js
Normal file
31
public/modules/forms/directives/focus-on.client.directive.js
Normal file
|
@ -0,0 +1,31 @@
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
angular.module('forms').directive('focusOn',function() {
|
||||||
|
return {
|
||||||
|
restrict : 'A',
|
||||||
|
link : function($scope, $element, $attr) {
|
||||||
|
$scope.$watch($attr.focusOn,function(focusVal) {
|
||||||
|
// console.log($element);
|
||||||
|
if(focusVal === true) {
|
||||||
|
setTimeout(function() {
|
||||||
|
var $input_element;
|
||||||
|
|
||||||
|
if($element[0].querySelector('input')){
|
||||||
|
$input_element = $element[0].querySelector('input');
|
||||||
|
}else if($element[0].querySelector('select')){
|
||||||
|
$input_element = $element[0].querySelector('select');
|
||||||
|
}else if($element[0].querySelector('textarea')){
|
||||||
|
$input_element = $element[0].querySelector('textarea');
|
||||||
|
}else if($element[0].querySelector('.angular-input-stars')){
|
||||||
|
$input_element = $element[0].querySelector('.angular-input-stars');
|
||||||
|
}
|
||||||
|
// $('body').animate({
|
||||||
|
// scrollTop: $input_element.offset().top
|
||||||
|
// });
|
||||||
|
$input_element.focus();
|
||||||
|
},50);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
|
@ -9,24 +9,52 @@ angular.module('forms').directive('submitFormDirective', ['$http', '$timeout', '
|
||||||
myform:'='
|
myform:'='
|
||||||
},
|
},
|
||||||
controller: function($scope){
|
controller: function($scope){
|
||||||
angular.element(document).ready(function() {
|
// angular.element(document).ready(function() {
|
||||||
$scope.error = '';
|
$scope.error = '';
|
||||||
$scope.selected = null;
|
$scope.selected = {
|
||||||
|
_id: $scope.myform.form_fields[0]._id,
|
||||||
|
index: 0,
|
||||||
|
};
|
||||||
|
|
||||||
$scope.submitted = false;
|
$scope.submitted = false;
|
||||||
|
|
||||||
TimeCounter.startClock()
|
TimeCounter.startClock()
|
||||||
|
|
||||||
$scope.exitStartPage = function(){
|
$scope.exitStartPage = function(){
|
||||||
$scope.myform.startPage.showStart = false;
|
$scope.myform.startPage.showStart = false;
|
||||||
}
|
|
||||||
$rootScope.setActiveField = function (field_id) {
|
|
||||||
$scope.selected = field_id;
|
|
||||||
};
|
};
|
||||||
$scope.hideOverlay = function (){
|
|
||||||
|
$scope.nextField = function(){
|
||||||
|
if($scope.selected.index < $scope.myform.form_fields.length){
|
||||||
|
$scope.selected.index++;
|
||||||
|
$scope.selected._id = $scope.myform.form_fields[$scope.selected.index]._id;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
$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 = function(field_id, field_index) {
|
||||||
|
if($scope.selected === null){
|
||||||
|
$scope.selected = {
|
||||||
|
_id: '',
|
||||||
|
index: 0,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
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;
|
||||||
|
};
|
||||||
|
$scope.hideOverlay = function(){
|
||||||
$scope.selected = null;
|
$scope.selected = null;
|
||||||
};
|
};
|
||||||
|
|
||||||
$scope.submit = function(){
|
$scope.submitForm = function(){
|
||||||
var _timeElapsed = TimeCounter.stopClock();
|
var _timeElapsed = TimeCounter.stopClock();
|
||||||
|
|
||||||
var form = _.cloneDeep($scope.myform);
|
var form = _.cloneDeep($scope.myform);
|
||||||
|
@ -34,7 +62,6 @@ angular.module('forms').directive('submitFormDirective', ['$http', '$timeout', '
|
||||||
|
|
||||||
// console.log('percentageComplete: '+$filter('formValidity')($scope.myform)/$scope.myform.visible_form_fields.length*100+'%');
|
// console.log('percentageComplete: '+$filter('formValidity')($scope.myform)/$scope.myform.visible_form_fields.length*100+'%');
|
||||||
form.percentageComplete = $filter('formValidity')($scope.myform)/$scope.myform.visible_form_fields.length*100;
|
form.percentageComplete = $filter('formValidity')($scope.myform)/$scope.myform.visible_form_fields.length*100;
|
||||||
console.log(form.percentageComplete)
|
|
||||||
delete form.visible_form_fields;
|
delete form.visible_form_fields;
|
||||||
|
|
||||||
$scope.authentication = Auth;
|
$scope.authentication = Auth;
|
||||||
|
@ -62,7 +89,7 @@ angular.module('forms').directive('submitFormDirective', ['$http', '$timeout', '
|
||||||
return field;
|
return field;
|
||||||
}).value();
|
}).value();
|
||||||
};
|
};
|
||||||
});
|
// });
|
||||||
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
|
@ -1,10 +1,10 @@
|
||||||
<div class="field row" ng-click="setActiveField(field._id)" ng-if="field.fieldOptions.length > 0">
|
<div class="field row" ng-click="setActiveField(field._id, index)" ng-if="field.fieldOptions.length > 0">
|
||||||
<div class="col-xs-12 field-title field-title">{{field.title}} <span class="required-error" ng-show="field.required && !field.fieldValue">(* required)</span> </div>
|
<div class="col-xs-12 field-title field-title">{{field.title}} <span class="required-error" ng-show="field.required && !field.fieldValue">(* required)</span> </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 btn-info col-xs-3">
|
<label class="btn btn-info col-xs-3">
|
||||||
<input ng-focus="setActiveField(field._id)" ng-style="{'color': design.colors.answerColor}"
|
<input ng-focus="setActiveField(field._id, index)" ng-style="{'color': design.colors.answerColor}"
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
value="{{option.option_id}}"
|
value="{{option.option_id}}"
|
||||||
ng-model="field.fieldValue"
|
ng-model="field.fieldValue"
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
<div class="field row" ng-click="setActiveField(field._id)">
|
<div class="field row" ng-click="setActiveField(field._id, index)">
|
||||||
<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>
|
||||||
<span class="fa fa-angle-double-right"></span>
|
<span class="fa fa-angle-double-right"></span>
|
||||||
|
@ -8,7 +8,7 @@
|
||||||
</div>
|
</div>
|
||||||
<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)" ng-style="{'color': design.colors.answerColor, 'border-color': design.colors.answerColor}" ui-date="dateOptions" ng-model="field.fieldValue" ng-model-options="{ debounce: 250 }" ng-required="field.required" ng-disabled="field.disabled">
|
<input ng-focus="setActiveField(field._id, index)" ng-style="{'color': design.colors.answerColor, 'border-color': design.colors.answerColor}" ui-date="dateOptions" ng-model="field.fieldValue" ng-model-options="{ debounce: 250 }" ng-required="field.required" ng-disabled="field.disabled">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
<div class="field row dropdown" ng-click="setActiveField(field._id)" ng-if="field.fieldOptions.length > 0">
|
<div class="field row dropdown" ng-click="setActiveField(field._id, index)" ng-if="field.fieldOptions.length > 0">
|
||||||
<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>
|
||||||
<span class="fa fa-angle-double-right"></span>
|
<span class="fa fa-angle-double-right"></span>
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
<div class="field row" ng-click="setActiveField(field._id)">
|
<div class="field row" ng-click="setActiveField(field._id, index)">
|
||||||
<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-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 class="col-xs-12 field-input">
|
||||||
<input ng-focus="setActiveField(field._id)" ng-style="{'color': design.colors.answerColor, 'border-color': design.colors.answerColor}" type="email"
|
<input ng-focus="setActiveField(field._id, index)" ng-style="{'color': design.colors.answerColor, 'border-color': design.colors.answerColor}" type="email"
|
||||||
class="text-field-input"
|
class="text-field-input"
|
||||||
placeholder="email@example.com"
|
placeholder="email@example.com"
|
||||||
value="{{field.fieldValue}}"
|
value="{{field.fieldValue}}"
|
||||||
|
|
|
@ -1 +1 @@
|
||||||
<input ng-focus="setActiveField(field._id)" 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)" 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">
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
<div class="field row radio legal" ng-click="setActiveField(field._id)">
|
<div class="field row radio legal" ng-click="setActiveField(field._id, index)">
|
||||||
<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>{{field.title}} <span class="required-error" ng-show="field.required && !field.fieldValue">*(required)</span></h3>
|
<h3>{{field.title}} <span class="required-error" ng-show="field.required && !field.fieldValue">*(required)</span></h3>
|
||||||
<br>
|
<br>
|
||||||
|
@ -7,11 +7,11 @@
|
||||||
<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)" 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)" 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">
|
||||||
<input ng-focus="setActiveField(field._id)" 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)" 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>
|
<span>I don't accept </span>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<div class="field row" ng-click="setActiveField(field._id)">
|
<div class="field row" ng-click="setActiveField(field._id, index)">
|
||||||
<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-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 class="col-xs-12 field-input">
|
||||||
<input ng-focus="setActiveField(field._id)" ng-style="{'color': design.colors.answerColor, 'border-color': design.colors.answerColor}" type="url" class="text-field-input" placeholder="https://example.com/something" value="{{field.fieldValue}}" ng-model="field.fieldValue" ng-model-options="{ debounce: 250 }" ng-required="field.required" ng-disabled="field.disabled"/>
|
<input ng-focus="setActiveField(field._id, index)" ng-style="{'color': design.colors.answerColor, 'border-color': design.colors.answerColor}" type="url" class="text-field-input" placeholder="https://example.com/something" value="{{field.fieldValue}}" ng-model="field.fieldValue" ng-model-options="{ debounce: 250 }" ng-required="field.required" ng-disabled="field.disabled"/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
<div class="field row textfield natural" ng-click="setActiveField(field._id)">
|
<div class="field row textfield natural" ng-click="setActiveField(field._id, index)">
|
||||||
<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-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 class="col-xs-12 field-input">
|
||||||
<input ng-focus="setActiveField(field._id)" ng-style="{'color': design.colors.answerColor, 'border-color': design.colors.answerColor}" type="text"
|
<input ng-focus="setActiveField(field._id, index)" ng-style="{'color': design.colors.answerColor, 'border-color': design.colors.answerColor}" type="text"
|
||||||
class="text-field-input"
|
class="text-field-input"
|
||||||
ng-model="field.fieldValue"
|
ng-model="field.fieldValue"
|
||||||
ng-model-options="{ debounce: 250 }"
|
ng-model-options="{ debounce: 250 }"
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<div class="field row" ng-click="setActiveField(field._id)">
|
<div class="field row" ng-click="setActiveField(field._id, index)">
|
||||||
<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-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 class="col-xs-12 field-input">
|
||||||
<input ng-focus="setActiveField(field._id)" ng-style="{'color': design.colors.answerColor, 'border-color': design.colors.answerColor}" type="number" class="text-field-input" placeholder="" value="{{field.fieldValue}}" ng-model="field.fieldValue" ng-model-options="{ debounce: 250 }" ng-required="field.required" ng-disabled="field.disabled"/>
|
<input ng-focus="setActiveField(field._id, index)" ng-style="{'color': design.colors.answerColor, 'border-color': design.colors.answerColor}" type="number" class="text-field-input" placeholder="" value="{{field.fieldValue}}" ng-model="field.fieldValue" ng-model-options="{ debounce: 250 }" ng-required="field.required" ng-disabled="field.disabled"/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<div class="field row" ng-click="setActiveField(field._id)">
|
<div class="field row" ng-click="setActiveField(field._id, index)">
|
||||||
<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-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 class="col-xs-12 field-input">
|
||||||
<input ng-focus="setActiveField(field._id)" 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)" 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>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,9 +1,9 @@
|
||||||
<div class="field row radio" ng-click="setActiveField(field._id)" ng-if="field.fieldOptions.length > 0">
|
<div class="field row radio" ng-click="setActiveField(field._id, index)" 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-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 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" style="margin: 0.5em; padding-left:30px" ng-class="{activeBtn: field.fieldValue == field.fieldOptions[$index].option_id}">
|
<label class="btn" style="margin: 0.5em; padding-left:30px" ng-class="{activeBtn: field.fieldValue == field.fieldOptions[$index].option_id}">
|
||||||
<input ng-focus="setActiveField(field._id)" ng-style="{'color': design.colors.answerColor, 'border-color': design.colors.answerColor}"
|
<input ng-focus="setActiveField(field._id, index)" ng-style="{'color': design.colors.answerColor, 'border-color': design.colors.answerColor}"
|
||||||
type="radio"
|
type="radio"
|
||||||
value="{{option.option_value}}"
|
value="{{option.option_value}}"
|
||||||
ng-model="field.fieldValue"
|
ng-model="field.fieldValue"
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
<div class="textfield field row" ng-click="setActiveField(field._id)">
|
<div class="textfield field row" ng-click="setActiveField(field._id, index)">
|
||||||
<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>
|
||||||
<span class="fa fa-angle-double-right"></span>
|
<span class="fa fa-angle-double-right"></span>
|
||||||
|
@ -7,7 +7,7 @@
|
||||||
</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)"
|
<input-stars max="5" ng-focus="setActiveField(field._id, index)"
|
||||||
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"
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
<div class="statement field row" ng-click="setActiveField(field._id)">
|
<div class="statement field row" ng-click="setActiveField(field._id, index)">
|
||||||
<div class="row field-title field-title">
|
<div class="row field-title field-title">
|
||||||
<div class="col-xs-1"><i class="fa fa-quote-left fa-1"></i></div>
|
<div class="col-xs-1"><i class="fa fa-quote-left fa-1"></i></div>
|
||||||
<h2 class="text-center col-xs-9">{{field.title}} </h2>
|
<h2 class="text-center col-xs-9">{{field.title}} </h2>
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
<div class="field row" ng-click="setActiveField(field._id)">
|
<div class="field row" ng-click="setActiveField(field._id, index)">
|
||||||
<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-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 class="col-xs-12 field-input">
|
||||||
<textarea type="text" ng-model="field.fieldValue" ng-model-options="{ debounce: 250 }" value="{{field.fieldValue}}" ng-required="field.required" ng-disabled="field.disabled"></textarea>
|
<textarea type="text" ng-model="field.fieldValue" ng-model-options="{ debounce: 250 }" value="{{field.fieldValue}}" ng-required="field.required" ng-disabled="field.disabled"></textarea>
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
<div class="textfield field row" ng-click="setActiveField(field._id)">
|
<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}">
|
<div class="col-xs-12 field-title" ng-style="{'color': design.colors.questionColor}" ng-style="{'color': design.colors.questionColor}">
|
||||||
<h3>
|
<h3>
|
||||||
<span class="fa fa-angle-double-right"></span> {{field.title}}
|
<span class="fa fa-angle-double-right"></span> {{field.title}}
|
||||||
|
@ -8,7 +8,7 @@
|
||||||
</h3>
|
</h3>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-xs-12 field-input">
|
<div class="col-xs-12 field-input">
|
||||||
<input ng-focus="setActiveField(field._id)" ng-style="{'color': design.colors.answerColor, 'border-color': design.colors.answerColor}"
|
<input ng-focus="setActiveField(field._id, index)" ng-style="{'color': design.colors.answerColor, 'border-color': design.colors.answerColor}"
|
||||||
type="text"
|
type="text"
|
||||||
class="text-field-input"
|
class="text-field-input"
|
||||||
ng-model="field.fieldValue"
|
ng-model="field.fieldValue"
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
<div class="field row radio" ng-click="setActiveField(field._id)">
|
setActiveField(field._id, index)<div class="field row radio" ng-click="setActiveField(field._id, index)">
|
||||||
<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 class="row">
|
<h3 class="row">
|
||||||
<span class="fa fa-angle-double-right"></span> {{field.title}}
|
<span class="fa fa-angle-double-right"></span> {{field.title}}
|
||||||
|
@ -14,12 +14,12 @@
|
||||||
<div class="col-xs-12 field-input">
|
<div class="col-xs-12 field-input">
|
||||||
<div class="row-fluid">
|
<div class="row-fluid">
|
||||||
<label class="btn btn-success col-xs-3">
|
<label class="btn btn-success col-xs-3">
|
||||||
<input ng-focus="setActiveField(field._id)" type="radio" value="true" ng-model="field.fieldValue" ng-model-options="{ debounce: 250 }" ng-required="field.required" ng-disabled="field.disabled" ng-init="field.fieldValue = true"/>
|
<input ng-focus="setActiveField(field._id, index)" type="radio" value="true" ng-model="field.fieldValue" ng-model-options="{ debounce: 250 }" ng-required="field.required" ng-disabled="field.disabled" ng-init="field.fieldValue = true"/>
|
||||||
<span>Yes</span>
|
<span>Yes</span>
|
||||||
</label>
|
</label>
|
||||||
|
|
||||||
<label class="btn btn-danger col-xs-3">
|
<label class="btn btn-danger col-xs-3">
|
||||||
<input ng-focus="setActiveField(field._id)" 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)" type="radio" value="false" ng-model="field.fieldValue" ng-model-options="{ debounce: 250 }" ng-required="field.required" ng-disabled="field.disabled"/>
|
||||||
<span>No</span>
|
<span>No</span>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -38,8 +38,8 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<form name="myForm" class="submission-form col-sm-12 col-md-offset-1 col-md-10">
|
<form name="myForm" 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" ng-class="{activeField: selected == field._id }" class="row field-directive">
|
<div ng-repeat="field in myform.form_fields" ng-if="!field.deletePreserved" ng-class="{activeField: selected._id == field._id }" class="row field-directive">
|
||||||
<field-directive field="field" design="myform.design">
|
<field-directive field="field" design="myform.design" index="$index" focus-on="selected._id == field._id">
|
||||||
</field-directive>
|
</field-directive>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
|
@ -48,22 +48,40 @@
|
||||||
<hr>
|
<hr>
|
||||||
|
|
||||||
<div class="row form-actions">
|
<div class="row form-actions">
|
||||||
<button class="btn btn-success col-sm-2 col-sm-offset-5" type="button" ng-disabled="mymyform.$invalid" ng-click="submit()" style="font-size: 1.6em;">
|
<button class="btn btn-success col-sm-2 col-sm-offset-5" type="button" ng-disabled="myform.$invalid" ng-click="submitForm()" style="font-size: 1.6em;">
|
||||||
Submit
|
Submit
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<section ng-if="!myform.hideFooter" class="navbar navbar-fixed-bottom" style="background-color:rgba(242,242,242,0.5); padding-top:15px;">
|
||||||
|
<div class="container" >
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-xs-4 col-xs-offset-4 col-sm-4 col-sm-offset-4 text-center col-md-3 col-md-offset-0" ng-show="!myform.submitted">
|
||||||
|
<p class="lead">{{myform | formValidity}} out of {{myform.visible_form_fields.length}} answered</p>
|
||||||
|
</div>
|
||||||
|
<div class="hidden-xs hidden-sm col-md-6 col-md-offset-3 row">
|
||||||
|
<div class="col-md-4 col-md-offset-2" ng-if="!authentication.isAuthenticated()">
|
||||||
|
<a href="/#!/forms" class="btn btn-default">Create a NodeForm</a>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-4 col-md-offset-2" ng-if="authentication.isAuthenticated()" class="hidden-sm hidden-xs">
|
||||||
|
<a href="/#!/forms/{{myform._id}}/admin" class="btn btn-default">Edit this NodeForm</a>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-1 col-md-offset-2" style="padding-left:5px" class="hidden-sm hidden-xs">
|
||||||
|
<div class="btn btn-info" id="focusDownButton" ng-click="nextField()">\/</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-1" class="hidden-sm hidden-xs">
|
||||||
|
<div class="btn btn-info" id="focusUpButton" ng-click="prevField()">/\</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div ng-show="myform.submitted" class="form-submitted">
|
<div ng-show="myform.submitted" class="form-submitted">
|
||||||
|
|
||||||
<!-- <div class="field row">
|
|
||||||
<div class="col-sm-11 col-sm-offset-1"><h1>{{ myform.title }}</h1>
|
|
||||||
<hr>
|
|
||||||
</div>
|
|
||||||
</div> -->
|
|
||||||
|
|
||||||
<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!<br><br> Please take a seat and wait for your number to be called!</div>
|
<div class="col-xs-6 col-xs-offset-3 text-center">Form entry successfully submitted!</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row form-actions">
|
<div class="row form-actions">
|
||||||
<p class="text-center col-xs-4 col-xs-offset-4">
|
<p class="text-center col-xs-4 col-xs-offset-4">
|
||||||
|
@ -71,10 +89,5 @@
|
||||||
<a ng-click="reloadForm()" style="color:white; font-size: 1.6em; text-decoration: none;" > Go back to Form</a>
|
<a ng-click="reloadForm()" style="color:white; font-size: 1.6em; text-decoration: none;" > Go back to Form</a>
|
||||||
</button>
|
</button>
|
||||||
</p>
|
</p>
|
||||||
<!-- <p class="text-center col-xs-2" ng-if="authentication.isAuthenticated()">
|
|
||||||
<button class="btn btn-caution left" type="button">
|
|
||||||
<a href="/#!/forms/{{myform._id}}/admin" style="color:white; font-size: 1.6em; text-decoration: none;">Edit Form</a>
|
|
||||||
</button>
|
|
||||||
</p> -->
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
|
@ -2,28 +2,5 @@
|
||||||
|
|
||||||
<submit-form-directive myform="myform"></submit-form-directive>
|
<submit-form-directive myform="myform"></submit-form-directive>
|
||||||
|
|
||||||
<section ng-if="!myform.hideFooter" class="navbar navbar-fixed-bottom" style="background-color:rgba(242,242,242,0.5); padding-top:15px;">
|
|
||||||
<div class="container" >
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-xs-4 col-xs-offset-4 col-sm-4 col-sm-offset-4 text-center col-md-3 col-md-offset-0" ng-show="!myform.submitted">
|
|
||||||
<p class="lead">{{myform | formValidity}} out of {{myform.visible_form_fields.length}} answered</p>
|
|
||||||
</div>
|
|
||||||
<div class="hidden-xs hidden-sm col-md-6 col-md-offset-3 row">
|
|
||||||
<div class="col-md-4 col-md-offset-2" ng-if="!authentication.isAuthenticated()">
|
|
||||||
<a href="/#!/forms" class="btn btn-default">Create a NodeForm</a>
|
|
||||||
</div>
|
|
||||||
<div class="col-md-4 col-md-offset-2" ng-if="authentication.isAuthenticated()" class="hidden-sm hidden-xs">
|
|
||||||
<a href="/#!/forms/{{myform._id}}/admin" class="btn btn-default">Edit this NodeForm</a>
|
|
||||||
</div>
|
|
||||||
<div class="col-md-1 col-md-offset-2" style="padding-left:5px" class="hidden-sm hidden-xs">
|
|
||||||
<div class="btn btn-info" id="focusDownButton">\/</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-md-1" class="hidden-sm hidden-xs">
|
|
||||||
<div class="btn btn-info" id="focusUpButton">/\</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue