mirror of
https://github.com/the-djmaze/snappymail.git
synced 2024-11-10 17:13:38 +08:00
731 lines
No EOL
15 KiB
JavaScript
731 lines
No EOL
15 KiB
JavaScript
|
|
(function () {
|
|
|
|
'use strict';
|
|
|
|
var
|
|
_ = require('_'),
|
|
$ = require('$'),
|
|
ko = require('ko'),
|
|
key = require('key'),
|
|
|
|
Enums = require('Common/Enums'),
|
|
Utils = require('Common/Utils')
|
|
;
|
|
|
|
/**
|
|
* @constructor
|
|
* @param {koProperty} oKoList
|
|
* @param {koProperty} oKoSelectedItem
|
|
* @param {string} sItemSelector
|
|
* @param {string} sItemSelectedSelector
|
|
* @param {string} sItemCheckedSelector
|
|
* @param {string} sItemFocusedSelector
|
|
*/
|
|
function Selector(oKoList, oKoSelectedItem,
|
|
sItemSelector, sItemSelectedSelector, sItemCheckedSelector, sItemFocusedSelector)
|
|
{
|
|
this.list = oKoList;
|
|
|
|
this.listChecked = ko.computed(function () {
|
|
return _.filter(this.list(), function (oItem) {
|
|
return oItem.checked();
|
|
});
|
|
}, this).extend({'rateLimit': 0});
|
|
|
|
this.isListChecked = ko.computed(function () {
|
|
return 0 < this.listChecked().length;
|
|
}, this);
|
|
|
|
this.focusedItem = ko.observable(null);
|
|
this.selectedItem = oKoSelectedItem;
|
|
this.selectedItemUseCallback = true;
|
|
|
|
this.itemSelectedThrottle = _.debounce(_.bind(this.itemSelected, this), 300);
|
|
|
|
this.listChecked.subscribe(function (aItems) {
|
|
if (0 < aItems.length)
|
|
{
|
|
if (null === this.selectedItem())
|
|
{
|
|
if (this.selectedItem.valueHasMutated)
|
|
{
|
|
this.selectedItem.valueHasMutated();
|
|
}
|
|
}
|
|
else
|
|
{
|
|
this.selectedItem(null);
|
|
}
|
|
}
|
|
else if (this.bAutoSelect && this.focusedItem())
|
|
{
|
|
this.selectedItem(this.focusedItem());
|
|
}
|
|
}, this);
|
|
|
|
this.selectedItem.subscribe(function (oItem) {
|
|
|
|
if (oItem)
|
|
{
|
|
if (this.isListChecked())
|
|
{
|
|
_.each(this.listChecked(), function (oSubItem) {
|
|
oSubItem.checked(false);
|
|
});
|
|
}
|
|
|
|
if (this.selectedItemUseCallback)
|
|
{
|
|
this.itemSelectedThrottle(oItem);
|
|
}
|
|
}
|
|
else if (this.selectedItemUseCallback)
|
|
{
|
|
this.itemSelected(null);
|
|
}
|
|
|
|
}, this);
|
|
|
|
this.selectedItem.extend({'toggleSubscribe': [null,
|
|
function (oPrev) {
|
|
if (oPrev)
|
|
{
|
|
oPrev.selected(false);
|
|
}
|
|
}, function (oNext) {
|
|
if (oNext)
|
|
{
|
|
oNext.selected(true);
|
|
}
|
|
}
|
|
]});
|
|
|
|
this.focusedItem.extend({'toggleSubscribe': [null,
|
|
function (oPrev) {
|
|
if (oPrev)
|
|
{
|
|
oPrev.focused(false);
|
|
}
|
|
}, function (oNext) {
|
|
if (oNext)
|
|
{
|
|
oNext.focused(true);
|
|
}
|
|
}
|
|
]});
|
|
|
|
this.oContentVisible = null;
|
|
this.oContentScrollable = null;
|
|
|
|
this.sItemSelector = sItemSelector;
|
|
this.sItemSelectedSelector = sItemSelectedSelector;
|
|
this.sItemCheckedSelector = sItemCheckedSelector;
|
|
this.sItemFocusedSelector = sItemFocusedSelector;
|
|
|
|
this.sLastUid = '';
|
|
this.bAutoSelect = true;
|
|
this.oCallbacks = {};
|
|
|
|
this.emptyFunction = function () {};
|
|
|
|
this.focusedItem.subscribe(function (oItem) {
|
|
if (oItem)
|
|
{
|
|
this.sLastUid = this.getItemUid(oItem);
|
|
}
|
|
}, this);
|
|
|
|
var
|
|
aCache = [],
|
|
aCheckedCache = [],
|
|
mFocused = null,
|
|
mSelected = null
|
|
;
|
|
|
|
this.list.subscribe(function (aItems) {
|
|
|
|
var self = this;
|
|
if (Utils.isArray(aItems))
|
|
{
|
|
_.each(aItems, function (oItem) {
|
|
if (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;
|
|
}
|
|
}
|
|
});
|
|
}
|
|
}, this, 'beforeChange');
|
|
|
|
this.list.subscribe(function (aItems) {
|
|
|
|
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);
|
|
|
|
if (Utils.isArray(aItems))
|
|
{
|
|
iLen = aCheckedCache.length;
|
|
|
|
_.each(aItems, function (oItem) {
|
|
|
|
var sUid = self.getItemUid(oItem);
|
|
aUids.push(sUid);
|
|
|
|
if (null !== mFocused && mFocused === sUid)
|
|
{
|
|
self.focusedItem(oItem);
|
|
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());
|
|
}
|
|
}
|
|
}
|
|
|
|
aCache = [];
|
|
aCheckedCache = [];
|
|
mFocused = null;
|
|
mSelected = null;
|
|
|
|
}, this);
|
|
}
|
|
|
|
Selector.prototype.itemSelected = function (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)
|
|
{
|
|
this.newSelectPosition(Enums.EventKeyCode.Down, false, bForceSelect);
|
|
};
|
|
|
|
Selector.prototype.goUp = function (bForceSelect)
|
|
{
|
|
this.newSelectPosition(Enums.EventKeyCode.Up, false, bForceSelect);
|
|
};
|
|
|
|
Selector.prototype.init = function (oContentVisible, oContentScrollable, sKeyScope)
|
|
{
|
|
this.oContentVisible = oContentVisible;
|
|
this.oContentScrollable = oContentScrollable;
|
|
|
|
sKeyScope = sKeyScope || 'all';
|
|
|
|
if (this.oContentVisible && this.oContentScrollable)
|
|
{
|
|
var
|
|
self = this
|
|
;
|
|
|
|
$(this.oContentVisible)
|
|
.on('selectstart', function (oEvent) {
|
|
if (oEvent && oEvent.preventDefault)
|
|
{
|
|
oEvent.preventDefault();
|
|
}
|
|
})
|
|
.on('click', this.sItemSelector, function (oEvent) {
|
|
self.actionClick(ko.dataFor(this), oEvent);
|
|
})
|
|
.on('click', this.sItemCheckedSelector, function (oEvent) {
|
|
var oItem = ko.dataFor(this);
|
|
if (oItem)
|
|
{
|
|
if (oEvent && oEvent.shiftKey)
|
|
{
|
|
self.actionClick(oItem, oEvent);
|
|
}
|
|
else
|
|
{
|
|
self.focusedItem(oItem);
|
|
oItem.checked(!oItem.checked());
|
|
}
|
|
}
|
|
})
|
|
;
|
|
|
|
key('enter', sKeyScope, function () {
|
|
if (self.focusedItem() && !self.focusedItem().selected())
|
|
{
|
|
self.actionClick(self.focusedItem());
|
|
return false;
|
|
}
|
|
|
|
return true;
|
|
});
|
|
|
|
key('ctrl+up, command+up, ctrl+down, command+down', sKeyScope, function () {
|
|
return false;
|
|
});
|
|
|
|
key('up, shift+up, down, shift+down, home, end, pageup, pagedown, insert, space', sKeyScope, function (event, handler) {
|
|
if (event && handler && handler.shortcut)
|
|
{
|
|
var iKey = 0;
|
|
switch (handler.shortcut)
|
|
{
|
|
case 'up':
|
|
case 'shift+up':
|
|
iKey = Enums.EventKeyCode.Up;
|
|
break;
|
|
case 'down':
|
|
case 'shift+down':
|
|
iKey = Enums.EventKeyCode.Down;
|
|
break;
|
|
case 'insert':
|
|
iKey = Enums.EventKeyCode.Insert;
|
|
break;
|
|
case 'space':
|
|
iKey = Enums.EventKeyCode.Space;
|
|
break;
|
|
case 'home':
|
|
iKey = Enums.EventKeyCode.Home;
|
|
break;
|
|
case 'end':
|
|
iKey = Enums.EventKeyCode.End;
|
|
break;
|
|
case 'pageup':
|
|
iKey = Enums.EventKeyCode.PageUp;
|
|
break;
|
|
case 'pagedown':
|
|
iKey = Enums.EventKeyCode.PageDown;
|
|
break;
|
|
}
|
|
|
|
if (0 < iKey)
|
|
{
|
|
self.newSelectPosition(iKey, key.shift);
|
|
return false;
|
|
}
|
|
}
|
|
});
|
|
}
|
|
};
|
|
|
|
Selector.prototype.autoSelect = function (bValue)
|
|
{
|
|
this.bAutoSelect = !!bValue;
|
|
};
|
|
|
|
/**
|
|
* @param {Object} oItem
|
|
* @returns {string}
|
|
*/
|
|
Selector.prototype.getItemUid = function (oItem)
|
|
{
|
|
var
|
|
sUid = '',
|
|
fGetItemUidCallback = this.oCallbacks['onItemGetUid'] || null
|
|
;
|
|
|
|
if (fGetItemUidCallback && oItem)
|
|
{
|
|
sUid = fGetItemUidCallback(oItem);
|
|
}
|
|
|
|
return sUid.toString();
|
|
};
|
|
|
|
/**
|
|
* @param {number} iEventKeyCode
|
|
* @param {boolean} bShiftKey
|
|
* @param {boolean=} bForceSelect = false
|
|
*/
|
|
Selector.prototype.newSelectPosition = function (iEventKeyCode, bShiftKey, bForceSelect)
|
|
{
|
|
var
|
|
iIndex = 0,
|
|
iPageStep = 10,
|
|
bNext = false,
|
|
bStop = false,
|
|
oResult = null,
|
|
aList = this.list(),
|
|
iListLen = aList ? aList.length : 0,
|
|
oFocused = this.focusedItem()
|
|
;
|
|
|
|
if (0 < iListLen)
|
|
{
|
|
if (!oFocused)
|
|
{
|
|
if (Enums.EventKeyCode.Down === iEventKeyCode || Enums.EventKeyCode.Insert === iEventKeyCode || Enums.EventKeyCode.Space === iEventKeyCode || Enums.EventKeyCode.Home === iEventKeyCode || Enums.EventKeyCode.PageUp === iEventKeyCode)
|
|
{
|
|
oResult = aList[0];
|
|
}
|
|
else if (Enums.EventKeyCode.Up === iEventKeyCode || Enums.EventKeyCode.End === iEventKeyCode || Enums.EventKeyCode.PageDown === iEventKeyCode)
|
|
{
|
|
oResult = aList[aList.length - 1];
|
|
}
|
|
}
|
|
else if (oFocused)
|
|
{
|
|
if (Enums.EventKeyCode.Down === iEventKeyCode || Enums.EventKeyCode.Up === iEventKeyCode || Enums.EventKeyCode.Insert === iEventKeyCode || Enums.EventKeyCode.Space === iEventKeyCode)
|
|
{
|
|
_.each(aList, function (oItem) {
|
|
if (!bStop)
|
|
{
|
|
switch (iEventKeyCode) {
|
|
case Enums.EventKeyCode.Up:
|
|
if (oFocused === oItem)
|
|
{
|
|
bStop = true;
|
|
}
|
|
else
|
|
{
|
|
oResult = oItem;
|
|
}
|
|
break;
|
|
case Enums.EventKeyCode.Down:
|
|
case Enums.EventKeyCode.Insert:
|
|
if (bNext)
|
|
{
|
|
oResult = oItem;
|
|
bStop = true;
|
|
}
|
|
else if (oFocused === oItem)
|
|
{
|
|
bNext = true;
|
|
}
|
|
break;
|
|
}
|
|
}
|
|
});
|
|
}
|
|
else if (Enums.EventKeyCode.Home === iEventKeyCode || Enums.EventKeyCode.End === iEventKeyCode)
|
|
{
|
|
if (Enums.EventKeyCode.Home === iEventKeyCode)
|
|
{
|
|
oResult = aList[0];
|
|
}
|
|
else if (Enums.EventKeyCode.End === iEventKeyCode)
|
|
{
|
|
oResult = aList[aList.length - 1];
|
|
}
|
|
}
|
|
else if (Enums.EventKeyCode.PageDown === iEventKeyCode)
|
|
{
|
|
for (; iIndex < iListLen; iIndex++)
|
|
{
|
|
if (oFocused === aList[iIndex])
|
|
{
|
|
iIndex += iPageStep;
|
|
iIndex = iListLen - 1 < iIndex ? iListLen - 1 : iIndex;
|
|
oResult = aList[iIndex];
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
else if (Enums.EventKeyCode.PageUp === iEventKeyCode)
|
|
{
|
|
for (iIndex = iListLen; iIndex >= 0; iIndex--)
|
|
{
|
|
if (oFocused === aList[iIndex])
|
|
{
|
|
iIndex -= iPageStep;
|
|
iIndex = 0 > iIndex ? 0 : iIndex;
|
|
oResult = aList[iIndex];
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
if (oResult)
|
|
{
|
|
this.focusedItem(oResult);
|
|
|
|
if (oFocused)
|
|
{
|
|
if (bShiftKey)
|
|
{
|
|
if (Enums.EventKeyCode.Up === iEventKeyCode || Enums.EventKeyCode.Down === iEventKeyCode)
|
|
{
|
|
oFocused.checked(!oFocused.checked());
|
|
}
|
|
}
|
|
else if (Enums.EventKeyCode.Insert === iEventKeyCode || Enums.EventKeyCode.Space === iEventKeyCode)
|
|
{
|
|
oFocused.checked(!oFocused.checked());
|
|
}
|
|
}
|
|
|
|
if ((this.bAutoSelect || !!bForceSelect) &&
|
|
!this.isListChecked() && Enums.EventKeyCode.Space !== iEventKeyCode)
|
|
{
|
|
this.selectedItem(oResult);
|
|
}
|
|
|
|
this.scrollToFocused();
|
|
}
|
|
else if (oFocused)
|
|
{
|
|
if (bShiftKey && (Enums.EventKeyCode.Up === iEventKeyCode || Enums.EventKeyCode.Down === iEventKeyCode))
|
|
{
|
|
oFocused.checked(!oFocused.checked());
|
|
}
|
|
else if (Enums.EventKeyCode.Insert === iEventKeyCode || Enums.EventKeyCode.Space === iEventKeyCode)
|
|
{
|
|
oFocused.checked(!oFocused.checked());
|
|
}
|
|
|
|
this.focusedItem(oFocused);
|
|
}
|
|
};
|
|
|
|
/**
|
|
* @return {boolean}
|
|
*/
|
|
Selector.prototype.scrollToFocused = function ()
|
|
{
|
|
if (!this.oContentVisible || !this.oContentScrollable)
|
|
{
|
|
return false;
|
|
}
|
|
|
|
var
|
|
iOffset = 20,
|
|
oFocused = $(this.sItemFocusedSelector, this.oContentScrollable),
|
|
oPos = oFocused.position(),
|
|
iVisibleHeight = this.oContentVisible.height(),
|
|
iFocusedHeight = oFocused.outerHeight()
|
|
;
|
|
|
|
if (oPos && (oPos.top < 0 || oPos.top + iFocusedHeight > iVisibleHeight))
|
|
{
|
|
if (oPos.top < 0)
|
|
{
|
|
this.oContentScrollable.scrollTop(this.oContentScrollable.scrollTop() + oPos.top - iOffset);
|
|
}
|
|
else
|
|
{
|
|
this.oContentScrollable.scrollTop(this.oContentScrollable.scrollTop() + oPos.top - iVisibleHeight + iFocusedHeight + iOffset);
|
|
}
|
|
|
|
return true;
|
|
}
|
|
|
|
return false;
|
|
};
|
|
|
|
/**
|
|
* @param {boolean=} bFast = false
|
|
* @return {boolean}
|
|
*/
|
|
Selector.prototype.scrollToTop = function (bFast)
|
|
{
|
|
if (!this.oContentVisible || !this.oContentScrollable)
|
|
{
|
|
return false;
|
|
}
|
|
|
|
if (bFast || 50 > this.oContentScrollable.scrollTop())
|
|
{
|
|
this.oContentScrollable.scrollTop(0);
|
|
}
|
|
else
|
|
{
|
|
this.oContentScrollable.stop().animate({'scrollTop': 0}, 200);
|
|
}
|
|
|
|
return true;
|
|
};
|
|
|
|
Selector.prototype.eventClickFunction = function (oItem, oEvent)
|
|
{
|
|
var
|
|
sUid = this.getItemUid(oItem),
|
|
iIndex = 0,
|
|
iLength = 0,
|
|
oListItem = null,
|
|
sLineUid = '',
|
|
bChangeRange = false,
|
|
bIsInRange = false,
|
|
aList = [],
|
|
bChecked = false
|
|
;
|
|
|
|
if (oEvent && oEvent.shiftKey)
|
|
{
|
|
if ('' !== sUid && '' !== this.sLastUid && sUid !== this.sLastUid)
|
|
{
|
|
aList = this.list();
|
|
bChecked = oItem.checked();
|
|
|
|
for (iIndex = 0, iLength = aList.length; iIndex < iLength; iIndex++)
|
|
{
|
|
oListItem = aList[iIndex];
|
|
sLineUid = this.getItemUid(oListItem);
|
|
|
|
bChangeRange = false;
|
|
if (sLineUid === this.sLastUid || sLineUid === sUid)
|
|
{
|
|
bChangeRange = true;
|
|
}
|
|
|
|
if (bChangeRange)
|
|
{
|
|
bIsInRange = !bIsInRange;
|
|
}
|
|
|
|
if (bIsInRange || bChangeRange)
|
|
{
|
|
oListItem.checked(bChecked);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
this.sLastUid = '' === sUid ? '' : sUid;
|
|
};
|
|
|
|
/**
|
|
* @param {Object} oItem
|
|
* @param {Object=} oEvent
|
|
*/
|
|
Selector.prototype.actionClick = function (oItem, oEvent)
|
|
{
|
|
if (oItem)
|
|
{
|
|
var
|
|
bClick = true,
|
|
sUid = this.getItemUid(oItem)
|
|
;
|
|
|
|
if (oEvent)
|
|
{
|
|
if (oEvent.shiftKey && !oEvent.ctrlKey && !oEvent.altKey)
|
|
{
|
|
bClick = false;
|
|
if ('' === this.sLastUid)
|
|
{
|
|
this.sLastUid = sUid;
|
|
}
|
|
|
|
oItem.checked(!oItem.checked());
|
|
this.eventClickFunction(oItem, oEvent);
|
|
|
|
this.focusedItem(oItem);
|
|
}
|
|
else if (oEvent.ctrlKey && !oEvent.shiftKey && !oEvent.altKey)
|
|
{
|
|
bClick = false;
|
|
this.focusedItem(oItem);
|
|
|
|
if (this.selectedItem() && oItem !== this.selectedItem())
|
|
{
|
|
this.selectedItem().checked(true);
|
|
}
|
|
|
|
oItem.checked(!oItem.checked());
|
|
}
|
|
}
|
|
|
|
if (bClick)
|
|
{
|
|
this.focusedItem(oItem);
|
|
this.selectedItem(oItem);
|
|
|
|
this.scrollToFocused();
|
|
}
|
|
}
|
|
};
|
|
|
|
Selector.prototype.on = function (sEventName, fCallback)
|
|
{
|
|
this.oCallbacks[sEventName] = fCallback;
|
|
};
|
|
|
|
module.exports = Selector;
|
|
|
|
}()); |