feat(sortable): use angular-ui-sortable instead of jqueryui directly

This commit is contained in:
Tyler Renelle 2014-08-19 14:35:10 -06:00
parent ba8cda2e51
commit 750135b673
6 changed files with 27 additions and 31 deletions

View file

@ -16,7 +16,6 @@
"dependencies": {
"jquery": "~2.1.0",
"jquery.cookie": "~1.4.0",
"jquery-ui": "~1.10.3",
"angular": "1.3.0-beta.11",
"angular-ui": "~0.4.0",
"angular-sanitize": "1.3.0-beta.11",
@ -40,9 +39,13 @@
"swagger-ui": "git://github.com/wordnik/swagger-ui.git",
"ngInfiniteScroll": "1.0.0",
"jquery-colorbox": "~1.4.36",
"pnotify": "~1.3.1"
"pnotify": "~1.3.1",
"angular-ui-sortable": "~0.12.10"
},
"devDependencies": {
"angular-mocks": "1.3.0-beta.11"
},
"resolutions": {
"angular": "1.3.0-beta.11"
}
}

View file

@ -3,7 +3,7 @@
window.habitrpg = angular.module('habitrpg',
['ngResource', 'ngSanitize', 'userServices', 'groupServices', 'memberServices', 'challengeServices',
'authServices', 'notificationServices', 'guideServices', 'authCtrl',
'ui.bootstrap', 'ui.keypress', 'ui.router', 'chieffancypants.loadingBar', 'At', 'pasvaz.bindonce', 'infinite-scroll', 'ui.select2'])
'ui.bootstrap', 'ui.keypress', 'ui.router', 'chieffancypants.loadingBar', 'At', 'pasvaz.bindonce', 'infinite-scroll', 'ui.select2', 'ui.sortable'])
// @see https://github.com/angular-ui/ui-router/issues/110 and https://github.com/HabitRPG/habitrpg/issues/1705
// temporary hack until they have a better solution

View file

@ -84,6 +84,21 @@ habitrpg.controller("TasksCtrl", ['$scope', '$rootScope', '$location', 'User','N
});
};
$scope.sortableOptions = {
// Because we're manually handling sorting via splice (index.coffee#user.ops), we cancel jQuery UI
update: function(e,ui) {
ui.item.sortable.cancel();
},
stop: function(e, ui) {
User.user.ops.sortTask({
params: {id: ui.item.scope().task.id},
query: {from: ui.item.sortable.index, to:ui.item.sortable.dropindex}
});
},
axis: 'y',
//distance: 5
};
/*
------------------------
To-Dos
@ -177,5 +192,4 @@ habitrpg.controller("TasksCtrl", ['$scope', '$rootScope', '$location', 'User','N
$.getScript('//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js');
(window.adsbygoogle = window.adsbygoogle || []).push({});
}
}]);

View file

@ -40,28 +40,6 @@ habitrpg.directive('whenScrolled', function() {
};
});
/**
* Add sortable
*/
habitrpg.directive('habitrpgSortable', ['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 taskType = angular.element(ui.item[0]).scope().task.type + 's';
var startIndex = ui.item.data('startIndex');
var task = User.user[taskType][startIndex];
User.user.ops.sortTask({params:{id:task.id},query:{from:startIndex, to:ui.item.index()}});
}
});
}
}]);
habitrpg
.directive('habitrpgTasks', ['$rootScope', 'User', function($rootScope, User) {
return {

View file

@ -26,10 +26,11 @@
"bower_components/angular-bootstrap/ui-bootstrap-tpls.js",
"bower_components/bootstrap/dist/js/bootstrap.js",
"bower_components/jquery-ui/ui/minified/jquery.ui.core.min.js",
"bower_components/jquery-ui/ui/minified/jquery.ui.widget.min.js",
"bower_components/jquery-ui/ui/minified/jquery.ui.mouse.min.js",
"bower_components/jquery-ui/ui/minified/jquery.ui.sortable.min.js",
"bower_components/jquery-ui/ui/minified/core.min.js",
"bower_components/jquery-ui/ui/minified/widget.min.js",
"bower_components/jquery-ui/ui/minified/mouse.min.js",
"bower_components/jquery-ui/ui/minified/sortable.min.js",
"bower_components/angular-ui-sortable/sortable.min.js",
"bower_components/habitrpg-shared/dist/habitrpg-shared.js",

View file

@ -30,7 +30,7 @@ script(id='templates/habitrpg-tasks.html', type="text/ng-template")
hr
// Actual List
ul(class='{{list.type}}s main-list', ng-show='obj[list.type + "s"].length > 0', habitrpg-sortable)
ul(class='{{list.type}}s main-list', ng-show='obj[list.type + "s"].length > 0', ui-sortable='sortableOptions', ng-model='obj[list.type + "s"]')
include ./task
// Static Rewards