diff --git a/test/spec/directives/focus-element.directive.js b/test/spec/directives/focus-element.directive.js new file mode 100644 index 0000000000..718d0efed4 --- /dev/null +++ b/test/spec/directives/focus-element.directive.js @@ -0,0 +1,30 @@ +'use strict'; + +describe('focusElement Directive', function() { + var elementToFocus, scope; + + beforeEach(module('habitrpg')); + + beforeEach(inject(function($rootScope, $compile) { + scope = $rootScope.$new(); + + scope.focusThisLink = false; + var element = ''; + + elementToFocus = $compile(element)(scope); + scope.$digest(); + })); + + it('places focus on the element it is applied to when the expression it binds to evaluates to true', inject(function($timeout) { + var focusSpy = sandbox.spy(); + + elementToFocus.appendTo(document.body); + elementToFocus.on('focus', focusSpy); + scope.focusThisLink = true; + scope.$digest(); + + $timeout.flush(); + expect(document.activeElement.dataset.focusElement).to.eql("focusThisLink"); + expect(focusSpy).to.have.been.called; + })); +}); diff --git a/test/spec/directives/focus-me.directive.spec.js b/test/spec/directives/focus-me.directive.spec.js deleted file mode 100644 index c91b36a2f3..0000000000 --- a/test/spec/directives/focus-me.directive.spec.js +++ /dev/null @@ -1,28 +0,0 @@ -'use strict'; - -describe('focusMe Directive', function() { - var element, scope; - - beforeEach(module('habitrpg')); - - beforeEach(inject(function($rootScope, $compile) { - scope = $rootScope.$new(); - - element = ""; - - element = $compile(element)(scope); - scope.$digest(); - })); - - it('focuses the element when appended to the DOM', function() { - inject(function($timeout) { - var focusSpy = sandbox.spy(); - - element.appendTo(document.body); - element.on('focus', focusSpy); - - $timeout.flush(); - expect(focusSpy).to.have.been.called; - }); - }); -}); diff --git a/website/public/js/directives/task-focus.directive.js b/website/public/js/directives/focus-element.directive.js similarity index 68% rename from website/public/js/directives/task-focus.directive.js rename to website/public/js/directives/focus-element.directive.js index 00faf89259..bf9a52da4b 100644 --- a/website/public/js/directives/task-focus.directive.js +++ b/website/public/js/directives/focus-element.directive.js @@ -3,18 +3,18 @@ (function(){ angular .module('habitrpg') - .directive('taskFocus', taskFocus); + .directive('focusElement', focusElement); - taskFocus.$inject = ['$timeout']; + focusElement.$inject = ['$timeout']; /** * Directive that places focus on the element it is applied to when the * expression it binds to evaluates to true. */ - function taskFocus($timeout) { + function focusElement($timeout) { return function($scope, elem, attrs) { - $scope.$watch(attrs.taskFocus, function(newVal) { + $scope.$watch(attrs.focusElement, function(newVal) { if (newVal) { $timeout(function() { elem[0].focus(); diff --git a/website/public/js/directives/focus-me.directive.js b/website/public/js/directives/focus-me.directive.js deleted file mode 100644 index 0fdec0e390..0000000000 --- a/website/public/js/directives/focus-me.directive.js +++ /dev/null @@ -1,25 +0,0 @@ -'use strict'; - -(function(){ - angular - .module('habitrpg') - .directive('focusMe', focusMe); - - focusMe.$inject = [ - '$timeout', - '$parse' - ]; - - function focusMe($timeout, $parse) { - return { - link: function($scope, element, attrs) { - var model = $parse(attrs.focusMe); - $scope.$watch(model, function(value) { - $timeout(function() { - element[0].focus(); - }); - }); - } - } - } -}()); diff --git a/website/public/manifest.json b/website/public/manifest.json index 227d42c2e0..f524198269 100644 --- a/website/public/manifest.json +++ b/website/public/manifest.json @@ -60,7 +60,6 @@ "js/directives/close-menu.directive.js", "js/directives/expand-menu.directive.js", - "js/directives/focus-me.directive.js", "js/directives/from-now.directive.js", "js/directives/habitrpg-tasks.directive.js", "js/directives/hrpg-sort-checklist.directive.js", @@ -68,7 +67,7 @@ "js/directives/hrpg-sort-tasks.directive.js", "js/directives/popover-html-popup.directive.js", "js/directives/popover-html.directive.js", - "js/directives/task-focus.directive.js", + "js/directives/focus-element.directive.js", "js/directives/when-scrolled.directive.js", "js/controllers/authCtrl.js", diff --git a/website/views/options/social/index.jade b/website/views/options/social/index.jade index 6fd7245503..0b0c6b7693 100644 --- a/website/views/options/social/index.jade +++ b/website/views/options/social/index.jade @@ -127,7 +127,7 @@ script(type='text/ng-template', id='modals/copyChatToDo.html') .form-group input.form-control(type='text',ng-model='text', ng-model-options="{debounce: 1000}") .form-group - textarea.form-control(rows='5',ng-model='notes', ng-model-options="{debounce: 1000}", focus-me) + textarea.form-control(rows='5',ng-model='notes', ng-model-options="{debounce: 1000}", focus-element='true') hr diff --git a/website/views/shared/modals/members.jade b/website/views/shared/modals/members.jade index 0aa4be1c34..930c0caccd 100644 --- a/website/views/shared/modals/members.jade +++ b/website/views/shared/modals/members.jade @@ -47,7 +47,7 @@ script(type='text/ng-template', id='modals/private-message.html') .modal-header h4=env.t('pmHeading', {name: "{{profile.profile.name}}"}) .modal-body - textarea.form-control(type='text',rows='5',ui-keydown='{"meta-enter":"sendPrivateMessage(profile._id, _message)"}',placeholder=env.t('needsTextPlaceholder'),ng-model='_message', focus-me) + textarea.form-control(type='text',rows='5',ui-keydown='{"meta-enter":"sendPrivateMessage(profile._id, _message)"}',placeholder=env.t('needsTextPlaceholder'),ng-model='_message', focus-element='true') include ../formatting-help .modal-footer //- Due to a quirk in Bootstrap UI, we need to wrap this so the tooltip can diff --git a/website/views/shared/tasks/task_view/add_new.jade b/website/views/shared/tasks/task_view/add_new.jade index aee14a33b6..c3b06c886c 100644 --- a/website/views/shared/tasks/task_view/add_new.jade +++ b/website/views/shared/tasks/task_view/add_new.jade @@ -1,6 +1,6 @@ form.task-add(name='new{{list.type}}form', ng-hide='obj._locked', ng-submit='addTask(obj[list.type+"s"],list)', novalidate) - textarea(rows='6', task-focus='list.bulk && list.focus', ng-model='list.newTask', placeholder='{{list.placeHolderBulk}}', ng-if='list.bulk', ui-keydown='{"meta-enter ctrl-enter":"addTask(obj[list.type+\'s\'],list)"}', required) - input(type='text', task-focus='!list.bulk && list.focus', ng-model='list.newTask', placeholder='{{list.placeHolder}}', ng-if='!list.bulk', required) + textarea(rows='6', focus-element='list.bulk && list.focus', ng-model='list.newTask', placeholder='{{list.placeHolderBulk}}', ng-if='list.bulk', ui-keydown='{"meta-enter ctrl-enter":"addTask(obj[list.type+\'s\'],list)"}', required) + input(type='text', focus-element='!list.bulk && list.focus', ng-model='list.newTask', placeholder='{{list.placeHolder}}', ng-if='!list.bulk', required) button(type='submit', ng-disabled='new{{list.type}}form.$invalid') div.empty-task-notification( ng-show='new{{list.type}}form.$invalid', tooltip=env.t("emptyTask") ) span.glyphicon.glyphicon-plus