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

got keyboard controls working for yes/no, legal statement and multiple choice

Browse source 
modified:   public/dist/application.js
	modified:   public/dist/application.min.js
	deleted:    public/modules/forms/directives/on-key-press.js

	modified:   public/dist/application.js
	modified:   public/dist/application.min.js
	new file:   public/modules/forms/directives/key-to-option.client.directive.js
	new file:   public/modules/forms/directives/key-to-truthy.client.directive.js
	deleted:    public/modules/forms/directives/on-key-press.client.directive.js
	modified:   public/modules/forms/views/directiveViews/field/legal.html
	modified:   public/modules/forms/views/directiveViews/field/radio.html
	modified:   public/modules/forms/views/directiveViews/field/rating.html
	modified:   public/modules/forms/views/directiveViews/field/yes_no.html
This commit is contained in:
David Baldwynn 2016-05-13 18:55:48 -07:00
parent 86580351d7
commit 0dfcb0b443
9 changed files with 139 additions and 57 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

87
public/dist/application.js vendored
View file

File diff suppressed because one or more lines are too long

6
public/dist/application.min.js vendored
View file

File diff suppressed because one or more lines are too long

28
public/modules/forms/directives/key-to-option.client.directive.js Normal file
View file

@ -0,0 +1,28 @@
'use strict';
angular.module('forms').directive('keyToOption', function(){
return {
restrict: 'A',
scope: {
field: '='
},
link: function($scope, $element, $attrs) {
$element.bind('keydown keypress', function(event) {
console.log('keypress');
var keyCode = event.which || event.keyCode;
var index = parseInt(String.fromCharCode(keyCode))-1;
console.log($scope.field);
if (index < $scope.field.fieldOptions.length) {
event.preventDefault();
$scope.$apply(function () {
$scope.field.fieldValue = $scope.field.fieldOptions[index].option_value;
});
}
});
}
};
});

30
public/modules/forms/directives/key-to-truthy.client.directive.js Normal file
View file

@ -0,0 +1,30 @@
'use strict';
angular.module('forms').directive('keyToTruthy', ['$rootScope', function($rootScope){
return {
restrict: 'A',
scope: {
field: '='
},
link: function($scope, $element, $attrs) {
$element.bind('keydown keypress', function(event) {
var keyCode = event.which || event.keyCode;
var truthyKeyCode = $attrs.keyCharTruthy.charCodeAt(0) - 32;
var falseyKeyCode = $attrs.keyCharFalsey.charCodeAt(0) - 32;
if(keyCode === truthyKeyCode ) {
event.preventDefault();
$scope.$apply(function() {
$scope.field.fieldValue = 'true';
});
}else if(keyCode === falseyKeyCode){
event.preventDefault();
$scope.$apply(function() {
$scope.field.fieldValue = 'false';
});
}
});
}
};
}]);

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

@ -1,18 +0,0 @@
'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);
});
}
});
}
};
}]);

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

@ -1,5 +1,6 @@
<div class="field row radio legal"
on-enter-key="chooseDefaultOption('legal')">
on-enter-key="nextField()"
key-to-truthy key-char-truthy="y" key-char-falsey="n" field="field">
<div class="col-xs-12 field-title" ng-style="{'color': design.colors.questionColor}">
<h3>
<small class="field-number">
@ -15,8 +16,7 @@
<div class="col-xs-12 field-input container">
<div class="row-fluid">
<label class="btn col-md-5 col-xs-12"
ng-class="{activeBtn: field.fieldValue == 'true'}"
ng-click="nextField()">
ng-class="{activeBtn: field.fieldValue == 'true'}">
<input class="focusOn"
ng-style="{'color': design.colors.answerColor, 'border-color': design.colors.answerColor}"
type="radio" value="true"
@ -31,8 +31,7 @@
<span> I accept </span>
</label>
<label class="btn col-md-5 col-md-offset-1 col-xs-12"
ng-class="{activeBtn: field.fieldValue == 'false'}"
ng-click="nextField()">
ng-class="{activeBtn: field.fieldValue == 'false'}">
<input class="focusOn"
ng-style="{'color': design.colors.answerColor, 'border-color': design.colors.answerColor}"
type="radio" value="false"

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

@ -1,6 +1,7 @@
<div class="field row radio"
ng-if="field.fieldOptions.length > 0"
on-enter-key="chooseDefaultOption()">
on-enter-key="nextField()"
key-to-option field="field"
ng-if="field.fieldOptions.length > 0">
<div class="col-xs-12 field-title" ng-style="{'color': design.colors.questionColor}">
<h3>
<small class="field-number">
@ -15,11 +16,10 @@
<div ng-repeat="option in field.fieldOptions" class="row-fluid">
<label class="btn col-md-4 col-xs-12 col-sm-12"
style="margin: 0.5em; padding-left:30px"
ng-click="nextField()"
style="margin: 0.5em; padding-left:30px"
ng-class="{activeBtn: field.fieldValue == field.fieldOptions[$index].option_value}">
<div class="letter" style="float:left">
{{$index}}
{{$index+1}}
</div>
<input ng-style="{'color': design.colors.answerColor, 'border-color': design.colors.answerColor}"
type="radio" class="focusOn"

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

@ -1,5 +1,5 @@
<div class="textfield field row"
on-enter-key="chooseDefaultOption('rating')">
on-enter-key="nextField()">
<div class="col-xs-12 field-title" ng-style="{'color': design.colors.questionColor}">
<h3>
<small class="field-number">

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

@ -1,5 +1,7 @@
<div class="field row radio" ng-click="setActiveField(field._id, index, true)"
on-enter-key="chooseDefaultOption('yes_no')">
<div class="field row radio"
ng-click="setActiveField(field._id, index, true)"
on-enter-key="nextField()"
key-to-truthy key-char-truthy="y" key-char-falsey="n" field="field">
<div class="col-xs-12 field-title" ng-style="{'color': design.colors.questionColor}">
<h3 class="row">
<small class="field-number">