krikkert/habitica
1
0
Fork 0
mirror of https://github.com/HabitRPG/habitica.git synced 2025-12-19 07:37:25 +01:00
Code Issues Packages Projects Releases Wiki Activity

Split directives into separate files

Browse Source
This commit is contained in:
Kevin Gisi
2015-06-08 04:13:55 -04:00
parent e0794b1f08
commit 7ef98ff7e2
12 changed files with 319 additions and 198 deletions
Download Patch File Download Diff File Expand all files Collapse all files

197
website/public/js/directives/directives.js
View File

@@ -1,197 +0,0 @@
'use strict';
/**
* Directive that places focus on the element it is applied to when the expression it binds to evaluates to true.
*/
habitrpg.directive('taskFocus',
['$timeout',
function($timeout) {
return function(scope, elem, attrs) {
scope.$watch(attrs.taskFocus, function(newval) {
if ( newval ) {
$timeout(function() {
elem[0].focus();
}, 0, false);
}
});
};
}
]);
habitrpg.directive('whenScrolled', function() {
return function(scope, elm, attr) {
var raw = elm[0];
elm.bind('scroll', function() {
if (raw.scrollTop + raw.offsetHeight >= raw.scrollHeight) {
scope.$apply(attr.whenScrolled);
}
});
};
});
habitrpg
.directive('habitrpgTasks', ['$rootScope', 'User', function($rootScope, User) {
return {
restrict: 'EA',
templateUrl: 'templates/habitrpg-tasks.html',
//transclude: true,
//scope: {
// main: '@', // true if it's the user's main list
// obj: '='
//},
controller: ['$scope', '$rootScope', function($scope, $rootScope){
$scope.editTask = function(task){
task._editing = !task._editing;
task._tags = User.user.preferences.tagsCollapsed;
task._advanced = User.user.preferences.advancedCollapsed;
if($rootScope.charts[task.id]) $rootScope.charts[task.id] = false;
};
}],
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"
}
];
}
}
}]);
habitrpg.directive('fromNow', ['$interval', function($interval){
return function(scope, element, attr){
var updateText = function(){ element.text(moment(scope.message.timestamp).fromNow()) };
updateText();
// Update the counter every 60secs if was sent less than one hour ago otherwise every hour
// OPTIMIZATION, every time the interval is run, update the interval time
var intervalTime = moment().diff(scope.message.timestamp, 'minute') < 60 ? 60000 : 3600000;
var interval = $interval(function(){ updateText() }, intervalTime, false);
scope.$on('$destroy', function() {
$interval.cancel(interval);
});
}
}]);
habitrpg.directive('hrpgSortTasks', ['User', function(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,
startIndex = ui.item.data('startIndex');
User.user.ops.sortTask({ params: {id: task.id}, query: {from: startIndex, to: ui.item.index()} });
}
});
}
}]);
habitrpg.directive('hrpgSortChecklist', ['User', function(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,
startIndex = ui.item.data('startIndex');
//$scope.saveTask(task, true);
$scope.swapChecklistItems(task, startIndex, ui.item.index());
}
});
}
}]);
habitrpg.directive('hrpgSortTags', ['User', function(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() }});
}
});
}
}]);
habitrpg
.directive( 'popoverHtmlPopup', ['$sce', function($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'
};
}])
.directive( 'popoverHtml', [ '$compile', '$timeout', '$parse', '$window', '$tooltip',
function ( $compile, $timeout, $parse, $window, $tooltip ) {
return $tooltip( 'popoverHtml', 'popover', 'click' );
}
])
.run(["$templateCache", function($templateCache) {
$templateCache.put("template/popover/popover-html.html",
"<div class=\"popover {{placement}}\" ng-class=\"{ in: isOpen(), fade: animation() }\">\n" +
" <div class=\"arrow\"></div>\n" +
"\n" +
" <div class=\"popover-inner\">\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>\n" +
"</div>\n");
}]);
habitrpg.directive('focusMe', ['$timeout', '$parse', function($timeout, $parse) {
return {
link: function(scope, element, attrs) {
var model = $parse(attrs.focusMe);
scope.$watch(model, function(value) {
$timeout(function() {
element[0].focus();
});
});
}
};
}]);

23
website/public/js/directives/focus-me.directive.js Normal file
View File

@@ -0,0 +1,23 @@
'use strict';
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();
});
});
}
}
}

25
website/public/js/directives/from-now.directive.js Normal file
View File

@@ -0,0 +1,25 @@
'use strict';
angular
.module('habitrpg')
.directive('fromNow', fromNow);
fromNow.$inject = [
'$interval'
];
function fromNow($interval) {
return function(scope, element, attr){
var updateText = function(){
element.text(moment(scope.message.timestamp).fromNow())
};
updateText();
// Update the counter every 60secs if was sent less than one hour ago otherwise every hour
// OPTIMIZATION, every time the interval is run, update the interval time
var intervalTime = moment().diff(scope.message.timestamp, 'minute') < 60 ? 60000 : 3600000;
var interval = $interval(function(){ updateText() }, intervalTime, false);
scope.$on('$destroy', function() {
$interval.cancel(interval);
});
}
}

69
website/public/js/directives/habitrpg-tasks.directive.js Normal file
View File

@@ -0,0 +1,69 @@
'use strict';
angular
.module('habitrpg')
.directive('habitrpgTasks', habitrpgTasks);
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: '='
//},
controller: ['$scope', '$rootScope', function($scope, $rootScope){
$scope.editTask = function(task){
task._editing = !task._editing;
task._tags = User.user.preferences.tagsCollapsed;
task._advanced = User.user.preferences.advancedCollapsed;
if($rootScope.charts[task.id]) $rootScope.charts[task.id] = false;
};
}],
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"
}
];
}
}
}

30
website/public/js/directives/hrpg-sort-checklist.directive.js Normal file
View File

@@ -0,0 +1,30 @@
'use strict';
angular
.module('habitrpg')
.directive('hrpgSortChecklist', hrpgSortChecklist);
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()
);
}
});
}
}

27
website/public/js/directives/hrpg-sort-tags.directive.js Normal file
View File

@@ -0,0 +1,27 @@
'use strict';
angular
.module('habitrpg')
.directive('hrpgSortTags', hrpgSortTags);
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()
}
});
}
});
}
}

32
website/public/js/directives/hrpg-sort-tasks.directive.js Normal file
View File

@@ -0,0 +1,32 @@
'use strict';
angular
.module('habitrpg')
.directive('hrpgSortTasks', hrpgSortTasks);
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()
}
});
}
});
}
}

45
website/public/js/directives/popover-html-popup.directive.js Normal file
View File

@@ -0,0 +1,45 @@
'use strict';
angular
.module('habitrpg')
.directive('popoverHtmlPopup', popoverHtmlPopup)
.run(loadPopupTemplate);
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'
};
}
/*
* 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'
];
function loadPopupTemplate($templateCache) {
$templateCache.put("template/popover/popover-html.html",
"<div class=\"popover {{placement}}\" ng-class=\"{ in: isOpen(), fade: animation() }\">\n" +
" <div class=\"arrow\"></div>\n" +
"\n" +
" <div class=\"popover-inner\">\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>\n" +
"</div>\n");
}

17
website/public/js/directives/popover-html.directive.js Normal file
View File

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

24
website/public/js/directives/task-focus.directive.js Normal file
View File

@@ -0,0 +1,24 @@
'use strict';
angular
.module('habitrpg')
.directive('taskFocus', taskFocus);
taskFocus.$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) {
return function(scope, elem, attrs) {
scope.$watch(attrs.taskFocus, function(newVal) {
if (newVal) {
$timeout(function() {
elem[0].focus();
}, 0, false);
}
});
}
}

17
website/public/js/directives/when-scrolled.directive.js Normal file
View File

@@ -0,0 +1,17 @@
'use strict';
angular
.module('habitrpg')
.directive('whenScrolled', whenScrolled);
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);
}
});
};
}

11
website/public/manifest.json
View File

@@ -50,7 +50,16 @@
"js/filters/filters.js",
"js/directives/directives.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",
"js/directives/hrpg-sort-tags.directive.js",
"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/when-scrolled.directive.js",
"js/controllers/authCtrl.js",
"js/controllers/notificationCtrl.js",