angular-hotkeys
angular-hotkeys copied to clipboard
chieffancypants
Integration with Angular UI-Router
hi,
this is great project, but as most of us use Angular UI Router, is there a way to integrate with it instead of Angular Default Router?
thanks in advanced.
I figured this question would come up, but I simply don't have any experience with the UI Router, nor am I using it in production, so it would be tough for me to support it. I'm happy to review/accept PRs from someone with more experience in it.
I believe this pull request (partially) satisfies the request: https://github.com/chieffancypants/angular-hotkeys/pull/9
+1
Excerpts from César Hernández's message of 2014-06-06 13:54:28 -0500:
+1
Reply to this email directly or view it on GitHub: https://github.com/chieffancypants/angular-hotkeys/issues/5#issuecomment-45372023
Hello,
Most of you probably already figured this out, but just in case you need to go from a detail page to the next/previous one. This is based on ui-router's official sample (http://angular-ui.github.io/ui-router/sample/#/), and "contacts.detail" has been replaced with "pages.detail" (http://angular-ui.github.io/ui-router/sample/states.js). Anyway, this is what I have in my "pages.detail" controller :
// SEE contacts.detail IN UI-ROUTER EXAMPLE
.state('pages.detail', {
url: '/{pageID:[0-9]{1,4}}',
views: {
'': {
templateUrl: 'pages.detail.html',
controller: ['$scope', '$stateParams',
function page_detail_function ( $scope, $stateParams) {
// $scope.contact = utils.findById($scope.contacts, $stateParams.contactId);
$scope.pageID = $stateParams.pageID;
$rootScope.pageID = $scope.pageID;
}]
},
// ....
// ID OF PAGE CALLED
$scope.pageID = $stateParams.pageID; // ui-router
pageID = $scope.pageID;
pageIDasInt = intval(pageID);
// ...
// CALCULATE PREV AND NEXT PAGES IDS
function getPrevNextPages(pageID)
{
// mainarrayData.OrdersArray.Products : THE JSON OBJECT I USE FOR DETAIL PAGES (originally contacts.json), REPLACE WITH YOURS
pagesArray = Object.keys(mainarrayData.OrdersArray.Products);
$.each(pagesArray, function(key, value) {
if(value === pageID)
{
currentKey = key;
}
});
previousPageID = pagesArray[currentKey - 1];
nextPageID = pagesArray[currentKey + 1];
arrayOfResults['previousPageID'] = previousPageID;
arrayOfResults['nextPageID'] = nextPageID;
return(arrayOfResults);
}
// -------- EOF - CALCULATE PREV AND NEXT PAGES IDS
arrayOfResults = [];
arrayOfResults = getPrevNextPages(pageID);
previousPageID = arrayOfResults['previousPageID'];
nextPageID = arrayOfResults['nextPageID'];
firstPage = pagesArray[0];
console.log('---> firstPage : ');
console.log(firstPage);
lastPage = (pagesArray.length)-1;
console.log('---> lastPage : ');
console.log(lastPage);
// INFINITE LOOP - IF LAST OR NEXT UNDEFINED, SET LAST TO FIRST, AND FIRST TO LAST
if (typeof(previousPageID) == "undefined") {
console.log('---> previousPageID IS UNDEFINED : ');
previousPageID = lastPage;
// DEBUGGING previousPageID
console.log('---> previousPageID NOW IS : ');
console.log(previousPageID);
};
if (typeof(nextPageID) == "undefined") {
console.log('---> nextPageID IS UNDEFINED : ');
nextPageID = firstPage;
// DEBUGGING nextPageID
console.log('---> nextPageID NOW IS : ');
console.log(nextPageID);
};
// -------- EOF - INFINITE LOOP - IF LAST OR NEXT UNDEFINED, SET LAST TO FIRST, AND FIRST TO LAST
$rootScope.previousPageID = previousPageID || '';
$rootScope.nextPageID = nextPageID || '';
$rootScope.typeOfPreviousPageID = typeof(previousPageID) || '';
$rootScope.typeOfNextPageID = typeof(nextPageID) || '';
$rootScope.pagesArray = pagesArray;
// ANGULAR HOTKEYS SETTINGS FOR GOING TO NEXT PAGE / PREV PAGE THROUGH KEYBOARD
hotkeys.add({
combo: 'right',
description: 'Next page',
callback: function() {
$state.go("pages.detail",{pageID:nextPageID});
}
});
hotkeys.add({
combo: 'left',
description: 'Previous page',
callback: function() {
$state.go("pages.detail",{pageID:previousPageID});
}
});
// -------- EOF - ANGULAR HOTKEYS SETTINGS FOR GOING TO NEXT PAGE / PREV PAGE THROUGH KEYBOARD
@rmariuzzo Do you mean #9? It was incomplete. I merged the code into a branch so others could help and participate but it's still in a pretty broken state. Essentially, all the current tests should also pass when using ui-router, so any help you can provide would be amazing!
@chieffancypants, good! I will check it out to collaborate and add that feature. I will also make sure all test passes.
