Encapsulate directive functions in anonymous functions - avoid the global namespace

This commit is contained in:
Kevin Gisi
2015-06-21 23:52:08 -04:00
parent b4c4b891a1
commit 78b424e247
10 changed files with 278 additions and 258 deletions

View File

@@ -1,23 +1,25 @@
'use strict'; 'use strict';
angular (function(){
.module('habitrpg') angular
.directive('focusMe', focusMe); .module('habitrpg')
.directive('focusMe', focusMe);
focusMe.$inject = [ focusMe.$inject = [
'$timeout', '$timeout',
'$parse' '$parse'
]; ];
function focusMe($timeout, $parse) { function focusMe($timeout, $parse) {
return { return {
link: function(scope, element, attrs) { link: function(scope, element, attrs) {
var model = $parse(attrs.focusMe); var model = $parse(attrs.focusMe);
scope.$watch(model, function(value) { scope.$watch(model, function(value) {
$timeout(function() { $timeout(function() {
element[0].focus(); element[0].focus();
});
}); });
}); }
} }
} }
} }());

View File

@@ -1,44 +1,46 @@
'use strict'; 'use strict';
angular (function(){
.module('habitrpg') angular
.directive('fromNow', fromNow); .module('habitrpg')
.directive('fromNow', fromNow);
fromNow.$inject = [ fromNow.$inject = [
'$interval', '$interval',
'$timeout' '$timeout'
]; ];
function fromNow($interval, $timeout) { function fromNow($interval, $timeout) {
return function(scope, element, attr){ return function(scope, element, attr){
var interval, timeout; var interval, timeout;
var updateText = function(){ var updateText = function(){
element.text(moment(scope.message.timestamp).fromNow()); element.text(moment(scope.message.timestamp).fromNow());
}; };
var setupInterval = function() { var setupInterval = function() {
if(interval) $interval.cancel(interval); if(interval) $interval.cancel(interval);
if(timeout) $timeout.cancel(timeout); if(timeout) $timeout.cancel(timeout);
var diff = moment().diff(scope.message.timestamp, 'minute'); var diff = moment().diff(scope.message.timestamp, 'minute');
if(diff < 60) { if(diff < 60) {
// Update every minute // Update every minute
interval = $interval(updateText, 60000, false); interval = $interval(updateText, 60000, false);
timeout = $timeout(setupInterval, diff * 60000); timeout = $timeout(setupInterval, diff * 60000);
} else { } else {
// Update every hour // Update every hour
interval = $interval(updateText, 3600000, false); interval = $interval(updateText, 3600000, false);
} }
}; };
updateText(); updateText();
setupInterval(); setupInterval();
scope.$on('$destroy', function() { scope.$on('$destroy', function() {
if(interval) $interval.cancel(interval); if(interval) $interval.cancel(interval);
if(timeout) $timeout.cancel(timeout); if(timeout) $timeout.cancel(timeout);
}); });
}
} }
} }());

View File

@@ -1,61 +1,63 @@
'use strict'; 'use strict';
angular (function(){
.module('habitrpg') angular
.directive('habitrpgTasks', habitrpgTasks); .module('habitrpg')
.directive('habitrpgTasks', habitrpgTasks);
habitrpgTasks.$inject = [ habitrpgTasks.$inject = [
'$rootScope', '$rootScope',
'User' 'User'
]; ];
function habitrpgTasks($rootScope, User) { function habitrpgTasks($rootScope, User) {
return { return {
restrict: 'EA', restrict: 'EA',
templateUrl: 'templates/habitrpg-tasks.html', templateUrl: 'templates/habitrpg-tasks.html',
//transclude: true, //transclude: true,
//scope: { //scope: {
// main: '@', // true if it's the user's main list // main: '@', // true if it's the user's main list
// obj: '=' // obj: '='
//}, //},
link: function(scope, element, attrs) { link: function(scope, element, attrs) {
// $scope.obj needs to come from controllers, so we can pass by ref // $scope.obj needs to come from controllers, so we can pass by ref
scope.main = attrs.main; scope.main = attrs.main;
scope.modal = attrs.modal; scope.modal = attrs.modal;
var dailiesView; var dailiesView;
if(User.user.preferences.dailyDueDefaultView) { if(User.user.preferences.dailyDueDefaultView) {
dailiesView = "remaining"; dailiesView = "remaining";
} else { } else {
dailiesView = "all"; 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"
} }
]; $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"
}
];
}
} }
} }
} }());

View File

@@ -1,30 +1,32 @@
'use strict'; 'use strict';
angular (function(){
.module('habitrpg') angular
.directive('hrpgSortChecklist', hrpgSortChecklist); .module('habitrpg')
.directive('hrpgSortChecklist', hrpgSortChecklist);
hrpgSortChecklist.$inject = [ hrpgSortChecklist.$inject = [
'User' 'User'
]; ];
function hrpgSortChecklist(User) { function hrpgSortChecklist(User) {
return function($scope, element, attrs, ngModel) { return function($scope, element, attrs, ngModel) {
$(element).sortable({ $(element).sortable({
axis: "y", axis: "y",
distance: 5, distance: 5,
start: function (event, ui) { start: function (event, ui) {
ui.item.data('startIndex', ui.item.index()); ui.item.data('startIndex', ui.item.index());
}, },
stop: function (event, ui) { stop: function (event, ui) {
var task = angular.element(ui.item[0]).scope().task; var task = angular.element(ui.item[0]).scope().task;
var startIndex = ui.item.data('startIndex'); var startIndex = ui.item.data('startIndex');
$scope.swapChecklistItems( $scope.swapChecklistItems(
task, task,
startIndex, startIndex,
ui.item.index() ui.item.index()
); );
} }
}); });
}
} }
} }());

View File

@@ -1,27 +1,29 @@
'use strict'; 'use strict';
angular (function(){
.module('habitrpg') angular
.directive('hrpgSortTags', hrpgSortTags); .module('habitrpg')
.directive('hrpgSortTags', hrpgSortTags);
hrpgSortTags.$inject = [ hrpgSortTags.$inject = [
'User' 'User'
]; ];
function hrpgSortTags(User) { function hrpgSortTags(User) {
return function($scope, element, attrs, ngModel) { return function($scope, element, attrs, ngModel) {
$(element).sortable({ $(element).sortable({
start: function (event, ui) { start: function (event, ui) {
ui.item.data('startIndex', ui.item.index()); ui.item.data('startIndex', ui.item.index());
}, },
stop: function (event, ui) { stop: function (event, ui) {
User.user.ops.sortTag({ User.user.ops.sortTag({
query: { query: {
from: ui.item.data('startIndex'), from: ui.item.data('startIndex'),
to:ui.item.index() to:ui.item.index()
} }
}); });
} }
}); });
}
} }
} }());

View File

@@ -1,32 +1,34 @@
'use strict'; 'use strict';
angular (function(){
.module('habitrpg') angular
.directive('hrpgSortTasks', hrpgSortTasks); .module('habitrpg')
.directive('hrpgSortTasks', hrpgSortTasks);
hrpgSortTasks.$inject = [ hrpgSortTasks.$inject = [
'User' 'User'
]; ];
function hrpgSortTasks(User) { function hrpgSortTasks(User) {
return function($scope, element, attrs, ngModel) { return function($scope, element, attrs, ngModel) {
$(element).sortable({ $(element).sortable({
axis: "y", axis: "y",
distance: 5, distance: 5,
start: function (event, ui) { start: function (event, ui) {
ui.item.data('startIndex', ui.item.index()); ui.item.data('startIndex', ui.item.index());
}, },
stop: function (event, ui) { stop: function (event, ui) {
var task = angular.element(ui.item[0]).scope().task; var task = angular.element(ui.item[0]).scope().task;
var startIndex = ui.item.data('startIndex'); var startIndex = ui.item.data('startIndex');
User.user.ops.sortTask({ User.user.ops.sortTask({
params: { id: task.id }, params: { id: task.id },
query: { query: {
from: startIndex, from: startIndex,
to: ui.item.index() to: ui.item.index()
} }
}); });
} }
}); });
}
} }
} }());

View File

@@ -1,45 +1,47 @@
'use strict'; 'use strict';
angular (function(){
.module('habitrpg') angular
.directive('popoverHtmlPopup', popoverHtmlPopup) .module('habitrpg')
.run(loadPopupTemplate); .directive('popoverHtmlPopup', popoverHtmlPopup)
.run(loadPopupTemplate);
popoverHtmlPopup.$inject = [ popoverHtmlPopup.$inject = [
'$sce' '$sce'
]; ];
function popoverHtmlPopup($sce) { function popoverHtmlPopup($sce) {
return { return {
restrict: 'EA', restrict: 'EA',
replace: true, replace: true,
scope: { title: '@', content: '@', placement: '@', animation: '&', isOpen: '&' }, scope: { title: '@', content: '@', placement: '@', animation: '&', isOpen: '&' },
link: function(scope, element, attrs) { link: function(scope, element, attrs) {
scope.$watch('content', function(value, oldValue) { scope.$watch('content', function(value, oldValue) {
scope.unsafeContent = $sce.trustAsHtml(scope.content); scope.unsafeContent = $sce.trustAsHtml(scope.content);
}); });
}, },
templateUrl: 'template/popover/popover-html.html' templateUrl: 'template/popover/popover-html.html'
}; };
} }
/* /*
* TODO: Review whether it's appropriate to be seeding this into the * TODO: Review whether it's appropriate to be seeding this into the
* templateCache like this. Feel like this might be an antipattern? * templateCache like this. Feel like this might be an antipattern?
*/ */
loadPopupTemplate.$inject = [ loadPopupTemplate.$inject = [
'$templateCache' '$templateCache'
]; ];
function loadPopupTemplate($templateCache) { function loadPopupTemplate($templateCache) {
$templateCache.put("template/popover/popover-html.html", $templateCache.put("template/popover/popover-html.html",
"<div class=\"popover {{placement}}\" ng-class=\"{ in: isOpen(), fade: animation() }\">\n" + "<div class=\"popover {{placement}}\" ng-class=\"{ in: isOpen(), fade: animation() }\">\n" +
" <div class=\"arrow\"></div>\n" + " <div class=\"arrow\"></div>\n" +
"\n" + "\n" +
" <div class=\"popover-inner\">\n" + " <div class=\"popover-inner\">\n" +
" <h3 class=\"popover-title\" ng-bind=\"title\" ng-show=\"title\"></h3>\n" + " <h3 class=\"popover-title\" ng-bind=\"title\" ng-show=\"title\"></h3>\n" +
" <div class=\"popover-content\" ng-bind-html=\"unsafeContent\" style=\"word-wrap: break-word\"> </div>\n" + " <div class=\"popover-content\" ng-bind-html=\"unsafeContent\" style=\"word-wrap: break-word\"> </div>\n" +
" </div>\n" + " </div>\n" +
"</div>\n"); "</div>\n");
} }
}());

View File

@@ -1,17 +1,19 @@
'use strict'; 'use strict';
angular (function(){
.module('habitrpg') angular
.directive('popoverHtml', popoverHtml); .module('habitrpg')
.directive('popoverHtml', popoverHtml);
popoverHtml.$inject = [ popoverHtml.$inject = [
'$compile', '$compile',
'$timeout', '$timeout',
'$parse', '$parse',
'$window', '$window',
'$tooltip' '$tooltip'
]; ];
function popoverHtml($compile, $timeout, $parse, $window, $tooltip) { function popoverHtml($compile, $timeout, $parse, $window, $tooltip) {
return $tooltip('popoverHtml', 'popover', 'click'); return $tooltip('popoverHtml', 'popover', 'click');
} }
}());

View File

@@ -1,24 +1,26 @@
'use strict'; 'use strict';
angular (function(){
.module('habitrpg') angular
.directive('taskFocus', taskFocus); .module('habitrpg')
.directive('taskFocus', taskFocus);
taskFocus.$inject = ['$timeout']; taskFocus.$inject = ['$timeout'];
/** /**
* Directive that places focus on the element it is applied to when the * Directive that places focus on the element it is applied to when the
* expression it binds to evaluates to true. * expression it binds to evaluates to true.
*/ */
function taskFocus($timeout) { function taskFocus($timeout) {
return function(scope, elem, attrs) { return function(scope, elem, attrs) {
scope.$watch(attrs.taskFocus, function(newVal) { scope.$watch(attrs.taskFocus, function(newVal) {
if (newVal) { if (newVal) {
$timeout(function() { $timeout(function() {
elem[0].focus(); elem[0].focus();
}, 0, false); }, 0, false);
} }
}); });
}
} }
} }());

View File

@@ -1,17 +1,19 @@
'use strict'; 'use strict';
angular (function(){
.module('habitrpg') angular
.directive('whenScrolled', whenScrolled); .module('habitrpg')
.directive('whenScrolled', whenScrolled);
function whenScrolled() { function whenScrolled() {
return function(scope, elm, attr) { return function(scope, elm, attr) {
var raw = elm[0]; var raw = elm[0];
elm.bind('scroll', function() { elm.bind('scroll', function() {
if (raw.scrollTop + raw.offsetHeight >= raw.scrollHeight) { if (raw.scrollTop + raw.offsetHeight >= raw.scrollHeight) {
scope.$apply(attr.whenScrolled); scope.$apply(attr.whenScrolled);
} }
}); });
}; };
} }
}());