From 11a65c985806b09777106f9f3dbab374c990de17 Mon Sep 17 00:00:00 2001 From: David Baldwynn Date: Mon, 11 Apr 2016 22:14:38 -0400 Subject: [PATCH] refined scrolling aniamtions --- : | 31 +++++++++++++ public/modules/forms/css/form.css | 16 ++++--- .../on-enter-key.client.directive.js | 20 +++++++++ .../submit-form.client.directive.js | 29 ++++++------ .../views/directiveViews/field/textfield.html | 18 +++++++- .../form/submit-form.client.view.html | 45 ++++++++++++------- public/populate_template_cache.js | 4 +- 7 files changed, 127 insertions(+), 36 deletions(-) create mode 100644 : create mode 100644 public/modules/forms/directives/on-enter-key.client.directive.js diff --git a/: b/: new file mode 100644 index 00000000..23b25239 --- /dev/null +++ b/: @@ -0,0 +1,31 @@ +
+
+

+ {{field.title}} + + *(required) + +

+
+
+ +
+
+
+
+ OK +
+ + press ENTER + +
+
+
diff --git a/public/modules/forms/css/form.css b/public/modules/forms/css/form.css index 098f236c..b0f43429 100644 --- a/public/modules/forms/css/form.css +++ b/public/modules/forms/css/form.css @@ -20,7 +20,7 @@ right: 0; bottom: 0; } - +` section.public-form { margin-top: -70px; } @@ -76,6 +76,11 @@ section.content p.breakwords { border-width: 1px 0; } +div.form-fields { + position: relative; + margin-top: 25vh; +} + div.form-submitted > .field.row { padding-bottom: 10%; padding-top: 2%; @@ -96,7 +101,7 @@ form .accordion-edit { /* Styles for form submission view (/forms/:formID) */ form .row.field { - padding: 1em 0 3em 0; + padding: 1em 0 0em 0; width: inherit; } form .row.field > .field-title { @@ -422,8 +427,10 @@ section > section.public-form { .activeField { z-index: 11; position: relative; - display: inline-block; background-color: transparent; +} +.activeField.field-directive { + display: inline-block; border-radius: 7px; width: 100%; border: 25px transparent solid; @@ -432,7 +439,6 @@ section > section.public-form { background-color: transparent; } - .form-item:hover, .form-item.create-new:hover { border-bottom: 8px inset #ccc; background-color: #d9d9d9; @@ -473,4 +479,4 @@ section > section.public-form { } .form-item.create-new .details-row small { font-size: 0.95em; - } \ No newline at end of file + } diff --git a/public/modules/forms/directives/on-enter-key.client.directive.js b/public/modules/forms/directives/on-enter-key.client.directive.js new file mode 100644 index 00000000..6a30cb0c --- /dev/null +++ b/public/modules/forms/directives/on-enter-key.client.directive.js @@ -0,0 +1,20 @@ +'use strict' + +angular.module('forms').directive('onEnterKey', ['$rootScope', function($rootScope){ + return { + restrict: 'A', + link: function($scope, $element, $attrs) { + $element.bind("keydown keypress", function(event) { + var keyCode = event.which || event.keyCode; + console.log($attrs.onEnterKey); + if(keyCode === 13) { + $rootScope.$apply(function() { + $rootScope.$eval($attrs.onEnterKey); + }); + + event.preventDefault(); + } + }); + } + }; +}]); diff --git a/public/modules/forms/directives/submit-form.client.directive.js b/public/modules/forms/directives/submit-form.client.directive.js index dfc0e122..5d545efc 100644 --- a/public/modules/forms/directives/submit-form.client.directive.js +++ b/public/modules/forms/directives/submit-form.client.directive.js @@ -21,8 +21,8 @@ angular.module('forms').directive('submitFormDirective', ['$http', 'TimeCounter' $scope.error = ''; $scope.selected = { - _id: '', - index: null, + _id: $scope.myform.form_fields[0]._id, + index: 0, }; //Reset Timer @@ -32,13 +32,10 @@ angular.module('forms').directive('submitFormDirective', ['$http', 'TimeCounter' /* ** Field Controls */ - $rootScope.setActiveField = function(field_id, field_index) { + $scope.setActiveField = $rootScope.setActiveField = function(field_id, field_index) { if($scope.selected === null){ - $scope.selected = { - _id: '', - index: 0, - }; - } + return; + } console.log('field_id: '+field_id); console.log('field_index: '+field_index); console.log($scope.selected); @@ -52,14 +49,20 @@ angular.module('forms').directive('submitFormDirective', ['$http', 'TimeCounter' }, 10); }; - $scope.nextField = function(){ - if($scope.selected.index < $scope.myform.form_fields.length-1){ + $rootScope.nextField = $scope.nextField = function(){ + console.log($scope.selected.index) + console.log($scope.myform.form_fields.length-1); + if($scope.selected.index < $scope.myform.form_fields.length-1){ $scope.selected.index++; $scope.selected._id = $scope.myform.form_fields[$scope.selected.index]._id; $rootScope.setActiveField($scope.selected._id, $scope.selected.index); - } + } else if($scope.selected.index === $scope.myform.form_fields.length-1) { + $scope.selected.index++; + $scope.selected._id = 'submit_field'; + $rootScope.setActiveField($scope.selected._id, $scope.selected.index); + } }; - $scope.prevField = function(){ + $rootScope.prevField = $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; @@ -112,4 +115,4 @@ angular.module('forms').directive('submitFormDirective', ['$http', 'TimeCounter' } }; } -]); \ No newline at end of file +]); diff --git a/public/modules/forms/views/directiveViews/field/textfield.html b/public/modules/forms/views/directiveViews/field/textfield.html index 4a6a30ba..15d016b8 100755 --- a/public/modules/forms/views/directiveViews/field/textfield.html +++ b/public/modules/forms/views/directiveViews/field/textfield.html @@ -16,6 +16,22 @@ ng-model-options="{ debounce: 250 }" value="field.fieldValue" ng-required="field.required" - ng-disabled="field.disabled"> + ng-disabled="field.disabled" + on-enter-key="nextField()"> +
+
+
+ + OK +
+
+ + press ENTER + +
+
+
diff --git a/public/modules/forms/views/directiveViews/form/submit-form.client.view.html b/public/modules/forms/views/directiveViews/form/submit-form.client.view.html index 88f776b6..5f77434a 100755 --- a/public/modules/forms/views/directiveViews/form/submit-form.client.view.html +++ b/public/modules/forms/views/directiveViews/form/submit-form.client.view.html @@ -1,4 +1,4 @@ -
+
@@ -34,7 +34,7 @@
-
+
@@ -50,21 +50,36 @@
-
-
- + +
+ + press ENTER + +
-
+
-
+

{{myform | formValidity}} out of {{myform.visible_form_fields.length}} answered

-
+
-
+
Form entry successfully submitted!
diff --git a/public/populate_template_cache.js b/public/populate_template_cache.js index ebb5a344..dd1809d4 100644 --- a/public/populate_template_cache.js +++ b/public/populate_template_cache.js @@ -76,7 +76,7 @@ angular.module('NodeForm.templates', []).run(['$templateCache', function($templa "

{{field.title}} *(required)

"); $templateCache.put("../public/modules/forms/views/directiveViews/field/textfield.html", - "

{{field.title}} *(required)

"); + "

{{field.title}} *(required)

OK
press ENTER
"); $templateCache.put("../public/modules/forms/views/directiveViews/field/yes_no.html", "

{{field.title}} *(required)

{{field.description}}


"); $templateCache.put("../public/modules/forms/views/directiveViews/form/configure-form.client.view.html", @@ -294,7 +294,7 @@ angular.module('NodeForm.templates', []).run(['$templateCache', function($templa $templateCache.put("../public/modules/forms/views/directiveViews/form/edit-submissions-form.client.view.html", "
#{{value.title}}OscarEMR User ProfilePercentage CompleteTime ElapsedDeviceLocationIP AddressDate Submitted (UTC)Generated PDF
{{$index+1}}{{field.fieldValue}}User Profile #{{row.oscarDemoNum}}{{row.percentageComplete}}%{{row.timeElapsed}}{{row.device.name}}, {{row.device.type}}{{row.geoLocation.city}}, {{row.geoLocation.country}}{{row.ipAddr}}{{row.created | date:'yyyy-MM-dd HH:mm:ss'}}Generated PDF
"); $templateCache.put("../public/modules/forms/views/directiveViews/form/submit-form.client.view.html", - "

{{myform.startPage.introTitle}}

{{myform.startPage.introParagraph}}

{{myform | formValidity}} out of {{myform.visible_form_fields.length}} answered

Create a TellForm
Edit this TellForm
Form entry successfully submitted!

"); + "

{{myform.startPage.introTitle}}

{{myform.startPage.introParagraph}}

press ENTER

{{myform | formValidity}} out of {{myform.visible_form_fields.length}} answered

Create a TellForm
Edit this TellForm
Form entry successfully submitted!

"); $templateCache.put("../public/modules/users/views/authentication/access-denied.client.view.html", "

You need to be logged in to access this page

Login
"); $templateCache.put("../public/modules/users/views/authentication/signin.client.view.html",