mirror of
https://github.com/the-djmaze/snappymail.git
synced 2026-08-30 20:49:20 +03:00
Gmail like message list navigation (#70)
This commit is contained in:
RainLoop Team
parent
da88e0d2b5
commit
fbf17aa6f3
14 changed files with 556 additions and 543 deletions
|
|
@ -18,24 +18,33 @@ function Selector(oKoList, oKoSelectedItem,
|
|||
return _.filter(this.list(), function (oItem) {
|
||||
return oItem.checked();
|
||||
});
|
||||
}, this);
|
||||
}, this).extend({'rateLimit': 0});
|
||||
|
||||
this.isListChecked = ko.computed(function () {
|
||||
return 0 < this.listChecked().length;
|
||||
}, this);
|
||||
|
||||
this.lastSelectedItem = ko.observable(null);
|
||||
this.focusedItem = ko.observable(null);
|
||||
this.selectedItem = oKoSelectedItem;
|
||||
this.selectedItemUseCallback = true;
|
||||
|
||||
this.itemSelectedTrottle = _.throttle(_.bind(this.itemSelected, this), 300);
|
||||
|
||||
this.listChecked.subscribe(function (aItems) {
|
||||
if (0 < aItems.length)
|
||||
{
|
||||
this.selectedItem(null);
|
||||
if (null === this.selectedItem())
|
||||
{
|
||||
this.selectedItem.valueHasMutated();
|
||||
}
|
||||
else
|
||||
{
|
||||
this.selectedItem(null);
|
||||
}
|
||||
}
|
||||
else if (this.bAutoSelect && this.lastSelectedItem())
|
||||
else if (this.bAutoSelect && this.focusedItem())
|
||||
{
|
||||
this.selectedItem(this.lastSelectedItem());
|
||||
this.selectedItem(this.focusedItem());
|
||||
}
|
||||
}, this);
|
||||
|
||||
|
|
@ -43,17 +52,21 @@ function Selector(oKoList, oKoSelectedItem,
|
|||
|
||||
if (oItem)
|
||||
{
|
||||
if (this.bAutoSelect)
|
||||
{
|
||||
this.lastSelectedItem(oItem);
|
||||
}
|
||||
|
||||
if (this.isListChecked())
|
||||
{
|
||||
_.each(this.listChecked(), function (oSubItem) {
|
||||
oSubItem.checked(false);
|
||||
});
|
||||
}
|
||||
|
||||
if (this.selectedItemUseCallback)
|
||||
{
|
||||
this.itemSelectedTrottle(oItem);
|
||||
}
|
||||
}
|
||||
else if (this.selectedItemUseCallback)
|
||||
{
|
||||
this.itemSelected(null);
|
||||
}
|
||||
|
||||
}, this);
|
||||
|
|
@ -96,37 +109,12 @@ function Selector(oKoList, oKoSelectedItem,
|
|||
|
||||
this.sLastUid = '';
|
||||
this.oCallbacks = {};
|
||||
this.iSelectTimer = 0;
|
||||
|
||||
this.bUseKeyboard = true;
|
||||
this.bAutoSelect = true;
|
||||
|
||||
this.emptyFunction = function () {};
|
||||
|
||||
this.useItemSelectCallback = true;
|
||||
|
||||
this.selectedItem.subscribe(function (oItem) {
|
||||
|
||||
if (oItem)
|
||||
{
|
||||
this.sLastUid = this.getItemUid(oItem);
|
||||
this.focusedItem(oItem);
|
||||
}
|
||||
|
||||
if (this.useItemSelectCallback)
|
||||
{
|
||||
if (oItem)
|
||||
{
|
||||
this.selectItemCallbacks(oItem);
|
||||
}
|
||||
else
|
||||
{
|
||||
this.selectItemCallbacks(null);
|
||||
}
|
||||
}
|
||||
|
||||
}, this);
|
||||
|
||||
this.focusedItem.subscribe(function (oItem) {
|
||||
if (oItem)
|
||||
{
|
||||
|
|
@ -135,47 +123,55 @@ function Selector(oKoList, oKoSelectedItem,
|
|||
}, this);
|
||||
|
||||
var
|
||||
aCache = [],
|
||||
aCheckedCache = [],
|
||||
mFocused = null,
|
||||
mSelected = null
|
||||
;
|
||||
|
||||
this.list.subscribe(function () {
|
||||
this.list.subscribe(function (aItems) {
|
||||
|
||||
var self = this, aItems = this.list();
|
||||
var self = this;
|
||||
if (Utils.isArray(aItems))
|
||||
{
|
||||
_.each(aItems, function (oItem) {
|
||||
|
||||
if (oItem.checked())
|
||||
if (oItem)
|
||||
{
|
||||
aCheckedCache.push(self.getItemUid(oItem));
|
||||
var sUid = self.getItemUid(oItem);
|
||||
|
||||
aCache.push(sUid);
|
||||
if (oItem.checked())
|
||||
{
|
||||
aCheckedCache.push(sUid);
|
||||
}
|
||||
if (null === mFocused && oItem.focused())
|
||||
{
|
||||
mFocused = sUid;
|
||||
}
|
||||
if (null === mSelected && oItem.selected())
|
||||
{
|
||||
mSelected = sUid;
|
||||
}
|
||||
}
|
||||
|
||||
if (null === mFocused && oItem.focused())
|
||||
{
|
||||
mFocused = self.getItemUid(oItem);
|
||||
}
|
||||
|
||||
if (null === mSelected && oItem.selected())
|
||||
{
|
||||
mSelected = self.getItemUid(oItem);
|
||||
}
|
||||
|
||||
});
|
||||
}
|
||||
}, this, 'beforeChange');
|
||||
|
||||
this.list.subscribe(function (aItems) {
|
||||
|
||||
this.useItemSelectCallback = false;
|
||||
|
||||
var
|
||||
self = this,
|
||||
oTemp = null,
|
||||
bGetNext = false,
|
||||
aUids = [],
|
||||
mNextFocused = mFocused,
|
||||
bChecked = false,
|
||||
bSelected = false,
|
||||
iLen = 0
|
||||
;
|
||||
|
||||
this.selectedItemUseCallback = false;
|
||||
|
||||
this.focusedItem(null);
|
||||
this.selectedItem(null);
|
||||
|
||||
|
|
@ -184,15 +180,9 @@ function Selector(oKoList, oKoSelectedItem,
|
|||
iLen = aCheckedCache.length;
|
||||
|
||||
_.each(aItems, function (oItem) {
|
||||
|
||||
|
||||
var sUid = self.getItemUid(oItem);
|
||||
|
||||
if (0 < iLen && -1 < Utils.inArray(sUid, aCheckedCache))
|
||||
{
|
||||
bChecked = true;
|
||||
oItem.checked(true);
|
||||
iLen--;
|
||||
}
|
||||
aUids.push(sUid);
|
||||
|
||||
if (null !== mFocused && mFocused === sUid)
|
||||
{
|
||||
|
|
@ -200,28 +190,84 @@ function Selector(oKoList, oKoSelectedItem,
|
|||
mFocused = null;
|
||||
}
|
||||
|
||||
if (0 < iLen && -1 < Utils.inArray(sUid, aCheckedCache))
|
||||
{
|
||||
bChecked = true;
|
||||
oItem.checked(true);
|
||||
iLen--;
|
||||
}
|
||||
|
||||
if (!bChecked && null !== mSelected && mSelected === sUid)
|
||||
{
|
||||
bSelected = true;
|
||||
self.selectedItem(oItem);
|
||||
mSelected = null;
|
||||
}
|
||||
});
|
||||
|
||||
this.selectedItemUseCallback = true;
|
||||
|
||||
if (!bChecked && !bSelected && this.bAutoSelect)
|
||||
{
|
||||
if (self.focusedItem())
|
||||
{
|
||||
self.selectedItem(self.focusedItem());
|
||||
}
|
||||
else if (0 < aItems.length)
|
||||
{
|
||||
if (null !== mNextFocused)
|
||||
{
|
||||
bGetNext = false;
|
||||
mNextFocused = _.find(aCache, function (sUid) {
|
||||
if (bGetNext && -1 < Utils.inArray(sUid, aUids))
|
||||
{
|
||||
return sUid;
|
||||
}
|
||||
else if (mNextFocused === sUid)
|
||||
{
|
||||
bGetNext = true;
|
||||
}
|
||||
return false;
|
||||
});
|
||||
|
||||
if (mNextFocused)
|
||||
{
|
||||
oTemp = _.find(aItems, function (oItem) {
|
||||
return mNextFocused === self.getItemUid(oItem);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
self.selectedItem(oTemp || null);
|
||||
self.focusedItem(self.selectedItem());
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.useItemSelectCallback = true;
|
||||
|
||||
aCache = [];
|
||||
aCheckedCache = [];
|
||||
mFocused = null;
|
||||
mSelected = null;
|
||||
|
||||
}, this);
|
||||
|
||||
this.selectItemCallbacksThrottle = _.debounce(this.selectItemCallbacks, 300);
|
||||
}
|
||||
|
||||
Selector.prototype.selectItemCallbacks = function (oItem)
|
||||
Selector.prototype.itemSelected = function (oItem)
|
||||
{
|
||||
(this.oCallbacks['onItemSelect'] || this.emptyFunction)(oItem);
|
||||
if (this.isListChecked())
|
||||
{
|
||||
if (!oItem)
|
||||
{
|
||||
(this.oCallbacks['onItemSelect'] || this.emptyFunction)(oItem || null);
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
if (oItem)
|
||||
{
|
||||
(this.oCallbacks['onItemSelect'] || this.emptyFunction)(oItem);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
Selector.prototype.goDown = function (bForceSelect)
|
||||
|
|
@ -255,7 +301,7 @@ Selector.prototype.init = function (oContentVisible, oContentScrollable, sKeySco
|
|||
}
|
||||
})
|
||||
.on('click', this.sItemSelector, function (oEvent) {
|
||||
self.actionClick(ko.dataFor(this), oEvent, true);
|
||||
self.actionClick(ko.dataFor(this), oEvent);
|
||||
})
|
||||
.on('click', this.sItemCheckedSelector, function (oEvent) {
|
||||
var oItem = ko.dataFor(this);
|
||||
|
|
@ -267,7 +313,7 @@ Selector.prototype.init = function (oContentVisible, oContentScrollable, sKeySco
|
|||
}
|
||||
else
|
||||
{
|
||||
self.sLastUid = self.getItemUid(oItem);
|
||||
self.focusedItem(oItem);
|
||||
oItem.checked(!oItem.checked());
|
||||
}
|
||||
}
|
||||
|
|
@ -275,15 +321,12 @@ Selector.prototype.init = function (oContentVisible, oContentScrollable, sKeySco
|
|||
;
|
||||
|
||||
key('enter', sKeyScope, function () {
|
||||
if (!self.bAutoSelect)
|
||||
if (self.focusedItem())
|
||||
{
|
||||
if (self.focusedItem())
|
||||
{
|
||||
self.actionClick(self.focusedItem());
|
||||
}
|
||||
|
||||
return false;
|
||||
self.actionClick(self.focusedItem());
|
||||
}
|
||||
|
||||
return false;
|
||||
});
|
||||
|
||||
key('ctrl+up, command+up, ctrl+down, command+down', sKeyScope, function () {
|
||||
|
|
@ -372,7 +415,6 @@ Selector.prototype.getItemUid = function (oItem)
|
|||
Selector.prototype.newSelectPosition = function (iEventKeyCode, bShiftKey, bForceSelect)
|
||||
{
|
||||
var
|
||||
self = this,
|
||||
iIndex = 0,
|
||||
iPageStep = 10,
|
||||
bNext = false,
|
||||
|
|
@ -416,7 +458,6 @@ Selector.prototype.newSelectPosition = function (iEventKeyCode, bShiftKey, bForc
|
|||
break;
|
||||
case Enums.EventKeyCode.Down:
|
||||
case Enums.EventKeyCode.Insert:
|
||||
// case Enums.EventKeyCode.Space:
|
||||
if (bNext)
|
||||
{
|
||||
oResult = oItem;
|
||||
|
|
@ -473,6 +514,8 @@ Selector.prototype.newSelectPosition = function (iEventKeyCode, bShiftKey, bForc
|
|||
|
||||
if (oResult)
|
||||
{
|
||||
this.focusedItem(oResult);
|
||||
|
||||
if (oFocused)
|
||||
{
|
||||
if (bShiftKey)
|
||||
|
|
@ -488,15 +531,10 @@ Selector.prototype.newSelectPosition = function (iEventKeyCode, bShiftKey, bForc
|
|||
}
|
||||
}
|
||||
|
||||
this.focusedItem(oResult);
|
||||
|
||||
if ((this.bAutoSelect || !!bForceSelect) && !this.isListChecked() && Enums.EventKeyCode.Space !== iEventKeyCode)
|
||||
if ((this.bAutoSelect || !!bForceSelect) &&
|
||||
!this.isListChecked() && Enums.EventKeyCode.Space !== iEventKeyCode)
|
||||
{
|
||||
window.clearTimeout(this.iSelectTimer);
|
||||
this.iSelectTimer = window.setTimeout(function () {
|
||||
self.iSelectTimer = 0;
|
||||
self.actionClick(oResult);
|
||||
}, 300);
|
||||
this.selectedItem(oResult);
|
||||
}
|
||||
|
||||
this.scrollToFocused();
|
||||
|
|
@ -511,6 +549,8 @@ Selector.prototype.newSelectPosition = function (iEventKeyCode, bShiftKey, bForc
|
|||
{
|
||||
oFocused.checked(!oFocused.checked());
|
||||
}
|
||||
|
||||
this.focusedItem(oFocused);
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -622,18 +662,20 @@ Selector.prototype.actionClick = function (oItem, oEvent)
|
|||
|
||||
oItem.checked(!oItem.checked());
|
||||
this.eventClickFunction(oItem, oEvent);
|
||||
|
||||
this.focusedItem(oItem);
|
||||
}
|
||||
else if (oEvent.ctrlKey)
|
||||
{
|
||||
bClick = false;
|
||||
this.sLastUid = sUid;
|
||||
|
||||
this.focusedItem(oItem);
|
||||
oItem.checked(!oItem.checked());
|
||||
}
|
||||
}
|
||||
|
||||
if (bClick)
|
||||
{
|
||||
this.focusedItem(oItem);
|
||||
this.selectedItem(oItem);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue