From 78b424e247f12ead8ec0d2cc0b5511c945c88a7f Mon Sep 17 00:00:00 2001 From: Kevin Gisi Date: Sun, 21 Jun 2015 23:52:08 -0400 Subject: [PATCH] Encapsulate directive functions in anonymous functions - avoid the global namespace --- .../js/directives/focus-me.directive.js | 34 +++--- .../js/directives/from-now.directive.js | 68 +++++------ .../js/directives/habitrpg-tasks.directive.js | 108 +++++++++--------- .../hrpg-sort-checklist.directive.js | 52 +++++---- .../js/directives/hrpg-sort-tags.directive.js | 46 ++++---- .../directives/hrpg-sort-tasks.directive.js | 56 ++++----- .../popover-html-popup.directive.js | 78 +++++++------ .../js/directives/popover-html.directive.js | 28 ++--- .../js/directives/task-focus.directive.js | 38 +++--- .../js/directives/when-scrolled.directive.js | 28 ++--- 10 files changed, 278 insertions(+), 258 deletions(-) diff --git a/website/public/js/directives/focus-me.directive.js b/website/public/js/directives/focus-me.directive.js index e2fd96657c..da0bd20681 100644 --- a/website/public/js/directives/focus-me.directive.js +++ b/website/public/js/directives/focus-me.directive.js @@ -1,23 +1,25 @@ 'use strict'; -angular - .module('habitrpg') - .directive('focusMe', focusMe); +(function(){ + angular + .module('habitrpg') + .directive('focusMe', focusMe); -focusMe.$inject = [ - '$timeout', - '$parse' -]; + 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(); + 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/js/directives/from-now.directive.js b/website/public/js/directives/from-now.directive.js index 37b61a2b90..83ddae3b61 100644 --- a/website/public/js/directives/from-now.directive.js +++ b/website/public/js/directives/from-now.directive.js @@ -1,44 +1,46 @@ 'use strict'; -angular - .module('habitrpg') - .directive('fromNow', fromNow); +(function(){ + angular + .module('habitrpg') + .directive('fromNow', fromNow); -fromNow.$inject = [ - '$interval', - '$timeout' -]; + fromNow.$inject = [ + '$interval', + '$timeout' + ]; -function fromNow($interval, $timeout) { - return function(scope, element, attr){ - var interval, timeout; + function fromNow($interval, $timeout) { + return function(scope, element, attr){ + var interval, timeout; - var updateText = function(){ - element.text(moment(scope.message.timestamp).fromNow()); - }; + var updateText = function(){ + element.text(moment(scope.message.timestamp).fromNow()); + }; - var setupInterval = function() { - if(interval) $interval.cancel(interval); - if(timeout) $timeout.cancel(timeout); + var setupInterval = function() { + if(interval) $interval.cancel(interval); + if(timeout) $timeout.cancel(timeout); - var diff = moment().diff(scope.message.timestamp, 'minute'); + var diff = moment().diff(scope.message.timestamp, 'minute'); - if(diff < 60) { - // Update every minute - interval = $interval(updateText, 60000, false); - timeout = $timeout(setupInterval, diff * 60000); - } else { - // Update every hour - interval = $interval(updateText, 3600000, false); - } - }; + if(diff < 60) { + // Update every minute + interval = $interval(updateText, 60000, false); + timeout = $timeout(setupInterval, diff * 60000); + } else { + // Update every hour + interval = $interval(updateText, 3600000, false); + } + }; - updateText(); - setupInterval(); + updateText(); + setupInterval(); - scope.$on('$destroy', function() { - if(interval) $interval.cancel(interval); - if(timeout) $timeout.cancel(timeout); - }); + scope.$on('$destroy', function() { + if(interval) $interval.cancel(interval); + if(timeout) $timeout.cancel(timeout); + }); + } } -} +}()); diff --git a/website/public/js/directives/habitrpg-tasks.directive.js b/website/public/js/directives/habitrpg-tasks.directive.js index 10aa7f424c..9708c58f9e 100644 --- a/website/public/js/directives/habitrpg-tasks.directive.js +++ b/website/public/js/directives/habitrpg-tasks.directive.js @@ -1,61 +1,63 @@ 'use strict'; -angular - .module('habitrpg') - .directive('habitrpgTasks', habitrpgTasks); +(function(){ + angular + .module('habitrpg') + .directive('habitrpgTasks', habitrpgTasks); -habitrpgTasks.$inject = [ - '$rootScope', - 'User' -]; + habitrpgTasks.$inject = [ + '$rootScope', + 'User' + ]; -function habitrpgTasks($rootScope, User) { - return { - restrict: 'EA', - templateUrl: 'templates/habitrpg-tasks.html', - //transclude: true, - //scope: { - // main: '@', // true if it's the user's main list - // obj: '=' - //}, - link: function(scope, element, attrs) { - // $scope.obj needs to come from controllers, so we can pass by ref - scope.main = attrs.main; - scope.modal = attrs.modal; - var dailiesView; - if(User.user.preferences.dailyDueDefaultView) { - dailiesView = "remaining"; - } else { - dailiesView = "all"; - } - $rootScope.lists = [ - { - header: window.env.t('habits'), - type: 'habit', - placeHolder: window.env.t('newHabit'), - placeHolderBulk: window.env.t('newHabitBulk'), - view: "all" - }, { - header: window.env.t('dailies'), - type: 'daily', - placeHolder: window.env.t('newDaily'), - placeHolderBulk: window.env.t('newDailyBulk'), - view: dailiesView - }, { - header: window.env.t('todos'), - type: 'todo', - placeHolder: window.env.t('newTodo'), - placeHolderBulk: window.env.t('newTodoBulk'), - view: "remaining" - }, { - header: window.env.t('rewards'), - type: 'reward', - placeHolder: window.env.t('newReward'), - placeHolderBulk: window.env.t('newRewardBulk'), - view: "all" + function habitrpgTasks($rootScope, User) { + return { + restrict: 'EA', + templateUrl: 'templates/habitrpg-tasks.html', + //transclude: true, + //scope: { + // main: '@', // true if it's the user's main list + // obj: '=' + //}, + link: function(scope, element, attrs) { + // $scope.obj needs to come from controllers, so we can pass by ref + scope.main = attrs.main; + scope.modal = attrs.modal; + var dailiesView; + if(User.user.preferences.dailyDueDefaultView) { + dailiesView = "remaining"; + } else { + dailiesView = "all"; } - ]; + $rootScope.lists = [ + { + header: window.env.t('habits'), + type: 'habit', + placeHolder: window.env.t('newHabit'), + placeHolderBulk: window.env.t('newHabitBulk'), + view: "all" + }, { + header: window.env.t('dailies'), + type: 'daily', + placeHolder: window.env.t('newDaily'), + placeHolderBulk: window.env.t('newDailyBulk'), + view: dailiesView + }, { + header: window.env.t('todos'), + type: 'todo', + placeHolder: window.env.t('newTodo'), + placeHolderBulk: window.env.t('newTodoBulk'), + view: "remaining" + }, { + header: window.env.t('rewards'), + type: 'reward', + placeHolder: window.env.t('newReward'), + placeHolderBulk: window.env.t('newRewardBulk'), + view: "all" + } + ]; + } } } -} +}()); diff --git a/website/public/js/directives/hrpg-sort-checklist.directive.js b/website/public/js/directives/hrpg-sort-checklist.directive.js index 52211e8cd4..8f50be02ce 100644 --- a/website/public/js/directives/hrpg-sort-checklist.directive.js +++ b/website/public/js/directives/hrpg-sort-checklist.directive.js @@ -1,30 +1,32 @@ 'use strict'; -angular - .module('habitrpg') - .directive('hrpgSortChecklist', hrpgSortChecklist); +(function(){ + angular + .module('habitrpg') + .directive('hrpgSortChecklist', hrpgSortChecklist); -hrpgSortChecklist.$inject = [ - 'User' -]; + hrpgSortChecklist.$inject = [ + 'User' + ]; -function hrpgSortChecklist(User) { - return function($scope, element, attrs, ngModel) { - $(element).sortable({ - axis: "y", - distance: 5, - start: function (event, ui) { - ui.item.data('startIndex', ui.item.index()); - }, - stop: function (event, ui) { - var task = angular.element(ui.item[0]).scope().task; - var startIndex = ui.item.data('startIndex'); - $scope.swapChecklistItems( - task, - startIndex, - ui.item.index() - ); - } - }); + function hrpgSortChecklist(User) { + return function($scope, element, attrs, ngModel) { + $(element).sortable({ + axis: "y", + distance: 5, + start: function (event, ui) { + ui.item.data('startIndex', ui.item.index()); + }, + stop: function (event, ui) { + var task = angular.element(ui.item[0]).scope().task; + var startIndex = ui.item.data('startIndex'); + $scope.swapChecklistItems( + task, + startIndex, + ui.item.index() + ); + } + }); + } } -} +}()); diff --git a/website/public/js/directives/hrpg-sort-tags.directive.js b/website/public/js/directives/hrpg-sort-tags.directive.js index 3eac5fe0a6..5b42bc778f 100644 --- a/website/public/js/directives/hrpg-sort-tags.directive.js +++ b/website/public/js/directives/hrpg-sort-tags.directive.js @@ -1,27 +1,29 @@ 'use strict'; -angular - .module('habitrpg') - .directive('hrpgSortTags', hrpgSortTags); +(function(){ + angular + .module('habitrpg') + .directive('hrpgSortTags', hrpgSortTags); -hrpgSortTags.$inject = [ - 'User' -]; + hrpgSortTags.$inject = [ + 'User' + ]; -function hrpgSortTags(User) { - return function($scope, element, attrs, ngModel) { - $(element).sortable({ - start: function (event, ui) { - ui.item.data('startIndex', ui.item.index()); - }, - stop: function (event, ui) { - User.user.ops.sortTag({ - query: { - from: ui.item.data('startIndex'), - to:ui.item.index() - } - }); - } - }); + function hrpgSortTags(User) { + return function($scope, element, attrs, ngModel) { + $(element).sortable({ + start: function (event, ui) { + ui.item.data('startIndex', ui.item.index()); + }, + stop: function (event, ui) { + User.user.ops.sortTag({ + query: { + from: ui.item.data('startIndex'), + to:ui.item.index() + } + }); + } + }); + } } -} +}()); diff --git a/website/public/js/directives/hrpg-sort-tasks.directive.js b/website/public/js/directives/hrpg-sort-tasks.directive.js index 0e18091cf2..820fccfbe8 100644 --- a/website/public/js/directives/hrpg-sort-tasks.directive.js +++ b/website/public/js/directives/hrpg-sort-tasks.directive.js @@ -1,32 +1,34 @@ 'use strict'; -angular - .module('habitrpg') - .directive('hrpgSortTasks', hrpgSortTasks); +(function(){ + angular + .module('habitrpg') + .directive('hrpgSortTasks', hrpgSortTasks); -hrpgSortTasks.$inject = [ - 'User' -]; + hrpgSortTasks.$inject = [ + 'User' + ]; -function hrpgSortTasks(User) { - return function($scope, element, attrs, ngModel) { - $(element).sortable({ - axis: "y", - distance: 5, - start: function (event, ui) { - ui.item.data('startIndex', ui.item.index()); - }, - stop: function (event, ui) { - var task = angular.element(ui.item[0]).scope().task; - var startIndex = ui.item.data('startIndex'); - User.user.ops.sortTask({ - params: { id: task.id }, - query: { - from: startIndex, - to: ui.item.index() - } - }); - } - }); + function hrpgSortTasks(User) { + return function($scope, element, attrs, ngModel) { + $(element).sortable({ + axis: "y", + distance: 5, + start: function (event, ui) { + ui.item.data('startIndex', ui.item.index()); + }, + stop: function (event, ui) { + var task = angular.element(ui.item[0]).scope().task; + var startIndex = ui.item.data('startIndex'); + User.user.ops.sortTask({ + params: { id: task.id }, + query: { + from: startIndex, + to: ui.item.index() + } + }); + } + }); + } } -} +}()); diff --git a/website/public/js/directives/popover-html-popup.directive.js b/website/public/js/directives/popover-html-popup.directive.js index 555a7019d1..d4f76a1267 100644 --- a/website/public/js/directives/popover-html-popup.directive.js +++ b/website/public/js/directives/popover-html-popup.directive.js @@ -1,45 +1,47 @@ 'use strict'; -angular - .module('habitrpg') - .directive('popoverHtmlPopup', popoverHtmlPopup) - .run(loadPopupTemplate); +(function(){ + angular + .module('habitrpg') + .directive('popoverHtmlPopup', popoverHtmlPopup) + .run(loadPopupTemplate); -popoverHtmlPopup.$inject = [ - '$sce' -]; + popoverHtmlPopup.$inject = [ + '$sce' + ]; -function popoverHtmlPopup($sce) { - return { - restrict: 'EA', - replace: true, - scope: { title: '@', content: '@', placement: '@', animation: '&', isOpen: '&' }, - link: function(scope, element, attrs) { - scope.$watch('content', function(value, oldValue) { - scope.unsafeContent = $sce.trustAsHtml(scope.content); - }); - }, - templateUrl: 'template/popover/popover-html.html' - }; -} + function popoverHtmlPopup($sce) { + return { + restrict: 'EA', + replace: true, + scope: { title: '@', content: '@', placement: '@', animation: '&', isOpen: '&' }, + link: function(scope, element, attrs) { + scope.$watch('content', function(value, oldValue) { + scope.unsafeContent = $sce.trustAsHtml(scope.content); + }); + }, + templateUrl: 'template/popover/popover-html.html' + }; + } -/* - * TODO: Review whether it's appropriate to be seeding this into the - * templateCache like this. Feel like this might be an antipattern? - */ + /* + * TODO: Review whether it's appropriate to be seeding this into the + * templateCache like this. Feel like this might be an antipattern? + */ -loadPopupTemplate.$inject = [ - '$templateCache' -]; + loadPopupTemplate.$inject = [ + '$templateCache' + ]; -function loadPopupTemplate($templateCache) { - $templateCache.put("template/popover/popover-html.html", - "
\n" + - "
\n" + - "\n" + - "
\n" + - "

\n" + - "
\n" + - "
\n" + - "
\n"); -} + function loadPopupTemplate($templateCache) { + $templateCache.put("template/popover/popover-html.html", + "
\n" + + "
\n" + + "\n" + + "
\n" + + "

\n" + + "
\n" + + "
\n" + + "
\n"); + } +}()); diff --git a/website/public/js/directives/popover-html.directive.js b/website/public/js/directives/popover-html.directive.js index 0462d99a31..56e71465a0 100644 --- a/website/public/js/directives/popover-html.directive.js +++ b/website/public/js/directives/popover-html.directive.js @@ -1,17 +1,19 @@ 'use strict'; -angular - .module('habitrpg') - .directive('popoverHtml', popoverHtml); +(function(){ + angular + .module('habitrpg') + .directive('popoverHtml', popoverHtml); -popoverHtml.$inject = [ - '$compile', - '$timeout', - '$parse', - '$window', - '$tooltip' -]; + popoverHtml.$inject = [ + '$compile', + '$timeout', + '$parse', + '$window', + '$tooltip' + ]; -function popoverHtml($compile, $timeout, $parse, $window, $tooltip) { - return $tooltip('popoverHtml', 'popover', 'click'); -} + function popoverHtml($compile, $timeout, $parse, $window, $tooltip) { + return $tooltip('popoverHtml', 'popover', 'click'); + } +}()); diff --git a/website/public/js/directives/task-focus.directive.js b/website/public/js/directives/task-focus.directive.js index 391e42b7fe..ae6a30c84b 100644 --- a/website/public/js/directives/task-focus.directive.js +++ b/website/public/js/directives/task-focus.directive.js @@ -1,24 +1,26 @@ 'use strict'; -angular - .module('habitrpg') - .directive('taskFocus', taskFocus); +(function(){ + angular + .module('habitrpg') + .directive('taskFocus', taskFocus); -taskFocus.$inject = ['$timeout']; + taskFocus.$inject = ['$timeout']; -/** - * Directive that places focus on the element it is applied to when the - * expression it binds to evaluates to true. - */ + /** + * Directive that places focus on the element it is applied to when the + * expression it binds to evaluates to true. + */ -function taskFocus($timeout) { - return function(scope, elem, attrs) { - scope.$watch(attrs.taskFocus, function(newVal) { - if (newVal) { - $timeout(function() { - elem[0].focus(); - }, 0, false); - } - }); + function taskFocus($timeout) { + return function(scope, elem, attrs) { + scope.$watch(attrs.taskFocus, function(newVal) { + if (newVal) { + $timeout(function() { + elem[0].focus(); + }, 0, false); + } + }); + } } -} +}()); diff --git a/website/public/js/directives/when-scrolled.directive.js b/website/public/js/directives/when-scrolled.directive.js index 3a063ca439..5fa0cbb998 100644 --- a/website/public/js/directives/when-scrolled.directive.js +++ b/website/public/js/directives/when-scrolled.directive.js @@ -1,17 +1,19 @@ 'use strict'; -angular - .module('habitrpg') - .directive('whenScrolled', whenScrolled); +(function(){ + angular + .module('habitrpg') + .directive('whenScrolled', whenScrolled); -function whenScrolled() { - return function(scope, elm, attr) { - var raw = elm[0]; + function whenScrolled() { + return function(scope, elm, attr) { + var raw = elm[0]; - elm.bind('scroll', function() { - if (raw.scrollTop + raw.offsetHeight >= raw.scrollHeight) { - scope.$apply(attr.whenScrolled); - } - }); - }; -} + elm.bind('scroll', function() { + if (raw.scrollTop + raw.offsetHeight >= raw.scrollHeight) { + scope.$apply(attr.whenScrolled); + } + }); + }; + } +}());