Added partial key navigation (desktop version)

This commit is contained in:
Giulio Cesare Solaroli 2015-01-04 18:50:50 +01:00
parent 433f6a7efd
commit 2854b9f9c4
2 changed files with 110 additions and 25 deletions

View File

@ -34,7 +34,7 @@ Clipperz.PM.UI.Components.Cards.List = React.createClass({
}, },
handleClick: function (anEvent) { handleClick: function (anEvent) {
MochiKit.Signal.signal(Clipperz.Signal.NotificationCenter, 'cardSelected', {'reference':anEvent.currentTarget.dataset.reference, 'label':anEvent.currentTarget.dataset.label}); MochiKit.Signal.signal(Clipperz.Signal.NotificationCenter, 'selectCard', {'reference':anEvent.currentTarget.dataset.reference, 'label':anEvent.currentTarget.dataset.label});
}, },
renderItem: function (anItem) { renderItem: function (anItem) {

View File

@ -45,6 +45,8 @@ Clipperz.PM.UI.MainController = function() {
this._hasKeyboard = this._isDesktop; this._hasKeyboard = this._isDesktop;
this._recordsInfo = null; this._recordsInfo = null;
this._selectedCards = null;
this._selectedCardInfo = null; this._selectedCardInfo = null;
this._closeMaskAction = null; this._closeMaskAction = null;
@ -65,7 +67,7 @@ Clipperz.PM.UI.MainController = function() {
'selectAllCards', 'selectRecentCards', 'search', 'tagSelected', 'selectUntaggedCards', 'selectAllCards', 'selectRecentCards', 'search', 'tagSelected', 'selectUntaggedCards',
'refreshCardEditDetail', 'refreshCardEditDetail',
'saveCardEdits', 'cancelCardEdits', 'saveCardEdits', 'cancelCardEdits',
'cardSelected', 'selectCard',
'addCardClick', 'addCardClick',
'deleteCard', 'toggleArchiveCard', 'cloneCard', 'editCard', 'deleteCard', 'toggleArchiveCard', 'cloneCard', 'editCard',
'addTag', 'removeTag', 'addTag', 'removeTag',
@ -457,7 +459,7 @@ console.log("THE BROWSER IS OFFLINE");
updateSelectedCard: function (someInfo, shouldShowLoading) { updateSelectedCard: function (someInfo, shouldShowLoading) {
var deferredResult; var deferredResult;
var showLoading = typeof shouldShowLoading !== 'undefined' ? shouldShowLoading : true; var showLoading = typeof(shouldShowLoading) !== 'undefined' ? shouldShowLoading : true;
if (someInfo == null) { if (someInfo == null) {
this.setPageProperties('mainPage', 'selectedCard', {}); this.setPageProperties('mainPage', 'selectedCard', {});
@ -530,6 +532,7 @@ console.log("THE BROWSER IS OFFLINE");
resetRecordsInfo: function () { resetRecordsInfo: function () {
this._recordsInfo = null; this._recordsInfo = null;
this._selectedCards = null;
}, },
getRecordsInfo: function (cardInfo, shouldIncludeArchivedCards) { getRecordsInfo: function (cardInfo, shouldIncludeArchivedCards) {
@ -547,6 +550,17 @@ console.log("THE BROWSER IS OFFLINE");
return deferredResult; return deferredResult;
}, },
//............................................................................
selectedCards: function () {
return this._selectedCards;
},
setSelectedCards: function (aValue) {
this._selectedCards = aValue;
return this._selectedCards;
},
//---------------------------------------------------------------------------- //----------------------------------------------------------------------------
updateSelectedCards: function (shouldIncludeArchivedCards, aFilter) { updateSelectedCards: function (shouldIncludeArchivedCards, aFilter) {
@ -605,6 +619,7 @@ console.log("THE BROWSER IS OFFLINE");
deferredResult.addMethod(this, 'setPageProperties', 'mainPage', 'cards'); deferredResult.addMethod(this, 'setPageProperties', 'mainPage', 'cards');
deferredResult.addCallback(MochiKit.Base.bind(function (someCards) { deferredResult.addCallback(MochiKit.Base.bind(function (someCards) {
this.setSelectedCards(someCards);
if (!this.isSelectedCardStillVisible(someCards)) { if (!this.isSelectedCardStillVisible(someCards)) {
this.updateSelectedCard(null); this.updateSelectedCard(null);
}; };
@ -976,20 +991,20 @@ console.log("THE BROWSER IS OFFLINE");
isSelectionPanelHidable: function () { isSelectionPanelHidable: function () {
var result; var result;
if (this.mediaQueryStyle() == 'extra-wide') { if (this.mediaQueryStyle() == 'extra-wide') {
result = false; result = false;
} else { } else {
result = true; result = true;
} }
return result; return result;
}, },
isSelectionPanelOpen: function () { isSelectionPanelOpen: function () {
return this._isSelectionPanelOpen; return this._isSelectionPanelOpen;
}, },
toggleSelectionPanel_handler: function (anEvent) { toggleSelectionPanel_handler: function (anEvent) {
if (this.isSelectionPanelHidable() == true) { if (this.isSelectionPanelHidable() == true) {
this._isSelectionPanelOpen = !this._isSelectionPanelOpen; this._isSelectionPanelOpen = !this._isSelectionPanelOpen;
@ -997,23 +1012,97 @@ console.log("THE BROWSER IS OFFLINE");
this.refreshCurrentPage(); this.refreshCurrentPage();
} }
}, },
isSettingsPanelOpen: function () { isSettingsPanelOpen: function () {
return this._isSettingsPanelOpen; return this._isSettingsPanelOpen;
}, },
toggleSettingsPanel_handler: function (anEvent) { toggleSettingsPanel_handler: function (anEvent) {
this._isSettingsPanelOpen = !this._isSettingsPanelOpen; this._isSettingsPanelOpen = !this._isSettingsPanelOpen;
this.setCloseMaskAction(MochiKit.Base.method(this, 'toggleSettingsPanel_handler')); this.setCloseMaskAction(MochiKit.Base.method(this, 'toggleSettingsPanel_handler'));
this.refreshCurrentPage(); this.refreshCurrentPage();
}, },
resetCardSelection: function () { //----------------------------------------------------------------------------
selectedCardInfo: function () {
return this._selectedCardInfo;
},
selectedCardIndex: function () {
var selectedCardInfo;
var result;
result = -1;
selectedCardInfo = this.selectedCardInfo();
if (selectedCardInfo != null) {
var selectedCards;
var reference;
var i, c;
selectedCards = this.selectedCards();
reference = selectedCardInfo['reference'];
c = selectedCards.length;
i = 0;
while (i<c && result == -1) {
if (selectedCards[i]['_reference'] == reference) {
result = i;
} else {
i++;
}
}
}
return result;
},
cardInfoAtIndex: function (anIndex) {
var card;
console.log("CARD INFO AT INDEX", anIndex);
card = this.selectedCards()[anIndex];
return {
'label': card['label'],
'reference': card['_reference']
};
},
previousCardInfo: function () {
var currentIndex;
var nextIndex;
currentIndex = this.selectedCardIndex();
if (currentIndex == -1) {
nextIndex = this.selectedCards().length - 1;
} else {
nextIndex = Math.max(currentIndex - 1, 0);
}
return this.cardInfoAtIndex(nextIndex);
},
nextCardInfo: function () {
var currentIndex;
var nextIndex;
currentIndex = this.selectedCardIndex();
if (currentIndex == -1) {
nextIndex = 0;
} else {
nextIndex = Math.min(currentIndex + 1, this.selectedCards().length - 1);
}
return this.cardInfoAtIndex(nextIndex);
},
//............................................................................
resetSelectedCard: function () {
this._selectedCardInfo = null; this._selectedCardInfo = null;
}, },
cardSelected_handler: function (someInfo) { selectCard_handler: function (someInfo) {
this._selectedCardInfo = someInfo; this._selectedCardInfo = someInfo;
this.refreshSelectedCards(); this.refreshSelectedCards();
this.updateSelectedCard(someInfo); this.updateSelectedCard(someInfo);
@ -1023,6 +1112,8 @@ console.log("THE BROWSER IS OFFLINE");
this.updateSelectedCard({'reference':aRecordReference}, false); this.updateSelectedCard({'reference':aRecordReference}, false);
}, },
//----------------------------------------------------------------------------
saveChanges: function () { saveChanges: function () {
// TODO: handle errors while savings // TODO: handle errors while savings
return Clipperz.Async.callbacks("MainController.saveChanges", [ return Clipperz.Async.callbacks("MainController.saveChanges", [
@ -1165,7 +1256,7 @@ console.log("THE BROWSER IS OFFLINE");
MochiKit.Base.method(this, 'saveChanges'), MochiKit.Base.method(this, 'saveChanges'),
function (aValue) { function (aValue) {
MochiKit.Signal.signal(Clipperz.Signal.NotificationCenter, 'cardSelected', cardInfo); MochiKit.Signal.signal(Clipperz.Signal.NotificationCenter, 'selectCard', cardInfo);
}, },
function (aValue) { return cardInfo['reference']; }, function (aValue) { return cardInfo['reference']; },
@ -1232,19 +1323,19 @@ console.log("THE BROWSER IS OFFLINE");
//============================================================================ //============================================================================
selectAllCards_handler: function () { selectAllCards_handler: function () {
this.resetCardSelection(); this.resetSelectedCard();
this.setFilter('ALL'); this.setFilter('ALL');
return this.refreshSelectedCards(); return this.refreshSelectedCards();
}, },
selectRecentCards_handler: function () { selectRecentCards_handler: function () {
this.resetCardSelection(); this.resetSelectedCard();
this.setFilter('RECENT'); this.setFilter('RECENT');
return this.refreshSelectedCards(); return this.refreshSelectedCards();
}, },
search_handler: function (aValue) { search_handler: function (aValue) {
this.resetCardSelection(); this.resetSelectedCard();
if (aValue == "") { if (aValue == "") {
this.setFilter('ALL'); this.setFilter('ALL');
@ -1257,13 +1348,13 @@ console.log("THE BROWSER IS OFFLINE");
}, },
tagSelected_handler: function (aTag) { tagSelected_handler: function (aTag) {
this.resetCardSelection(); this.resetSelectedCard();
this.setFilter('TAG', aTag); this.setFilter('TAG', aTag);
return this.refreshSelectedCards(); return this.refreshSelectedCards();
}, },
selectUntaggedCards_handler: function () { selectUntaggedCards_handler: function () {
this.resetCardSelection(); this.resetSelectedCard();
this.setFilter('UNTAGGED'); this.setFilter('UNTAGGED');
return this.refreshSelectedCards(); return this.refreshSelectedCards();
}, },
@ -1348,27 +1439,21 @@ console.log("THE BROWSER IS OFFLINE");
focusOnSearch: function (anEvent) { focusOnSearch: function (anEvent) {
anEvent.preventDefault(); anEvent.preventDefault();
// TODO: show selection panel, if it is hidden
// if (! this.isSelectionPanelVisible()) {
MochiKit.Signal.signal(Clipperz.Signal.NotificationCenter, 'toggleSelectionPanel'); MochiKit.Signal.signal(Clipperz.Signal.NotificationCenter, 'toggleSelectionPanel');
// }
MochiKit.DOM.getElement('searchValue').focus(); MochiKit.DOM.getElement('searchValue').focus();
}, },
exitSearch_handler: function (anEvent) { exitSearch_handler: function (anEvent) {
// TODO: hide selection panel, if it is overlaying
MochiKit.Signal.signal(Clipperz.Signal.NotificationCenter, 'toggleSelectionPanel'); MochiKit.Signal.signal(Clipperz.Signal.NotificationCenter, 'toggleSelectionPanel');
MochiKit.DOM.getElement('searchValue').blur(); MochiKit.DOM.getElement('searchValue').blur();
}, },
selectPreviousCard: function () { selectPreviousCard: function () {
console.log("select PREVIOUS card"); MochiKit.Signal.signal(Clipperz.Signal.NotificationCenter, 'selectCard', this.previousCardInfo());
}, },
selectNextCard: function () { selectNextCard: function () {
console.log("select NEXT card"); MochiKit.Signal.signal(Clipperz.Signal.NotificationCenter, 'selectCard', this.nextCardInfo());
}, },
//============================================================================ //============================================================================