stonewareslord/treestyletab
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

WIP: pinned tabs in the vertical tab bar can be moved to other rows

Browse Source
This commit is contained in:
Piro / YUKI Hiroshi 2012-12-04 02:49:52 +09:00
parent 196bb1e93c
commit a9b74110e3
1 changed files with 26 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
content/treestyletab/res/tabsDragUtils.js
View File

@ -164,7 +164,7 @@
'TDUContext.utils.updateDraggedTabs(TDUContext);' 'TDUContext.utils.updateDraggedTabs(TDUContext);'
).replace( ).replace(
'let leftTab =', 'let leftTab =',
'tabs = TDUContext.utils.collectAlignedTabs(tabs, TDUContext);\n' + 'tabs = TDUContext.utils.collectAnimateTabs(tabs, TDUContext);\n' +
'$&' '$&'
).replace( ).replace(
'translateX = Math.max(', 'translateX = Math.max(',
@ -249,7 +249,7 @@
// //
// // Move the dragged tab based on the mouse position. // // Move the dragged tab based on the mouse position.
// //
// tabs = TDUContext.utils.collectAlignedTabs(tabs, TDUContext); // tabs = TDUContext.utils.collectAnimateTabs(tabs, TDUContext);
// let leftTab = tabs[0]; // let leftTab = tabs[0];
// let rightTab = tabs[tabs.length - 1]; // let rightTab = tabs[tabs.length - 1];
// //
@ -354,19 +354,29 @@
); );
var tabbar = this.getTabbarFromEvent(aEvent); var tabbar = this.getTabbarFromEvent(aEvent);
var tabbarIsVertical = this.isVertical(tabbar);
var isVertical = 'isVertical' in context.options ? var isVertical = 'isVertical' in context.options ?
context.options.isVertical : context.options.isVertical :
this.isVertical(tabbar) ; tabbarIsVertical ;
context.position = isVertical ? 'screenY' : 'screenX' ; context.position = isVertical ? 'screenY' : 'screenX' ;
context.align = isVertical ? 'screenX' : 'screenY' ; context.align = tabbarIsVertical ? 'screenY' : 'screenX' ;
context.size = isVertical ? 'height' : 'width' ; context.size = isVertical ? 'height' : 'width' ;
context.sizeToAlign = tabbarIsVertical ? 'height' : 'width' ;
context.scroll = isVertical ? 'scrollY' : 'scrollX'; context.scroll = isVertical ? 'scrollY' : 'scrollX';
context.translator = isVertical ? 'translateY' : 'translateX' ; context.translator = isVertical ? 'translateY' : 'translateX' ;
context.currentX = aEvent[context.position]; context.currentPositionCoordinate = aEvent[context.position];
context.currentAlignCoordinate = aEvent[context.align];
var b = this.getTabBrowserFromChild(tabbar);
var firstNormalTab = b.visibleTabs[b._numPinnedTabs];
context.pinned = context.draggedTab.pinned;
context.onPinnedArea = context.currentAlignCoordinate < firstNormalTab.boxObject[context.align];
context.tabbarIsVertical = tabbarIsVertical;
context.tabWidth = context.draggedTab.getBoundingClientRect()[context.size]; context.tabWidth = context.draggedTab.getBoundingClientRect()[context.size];
context.tabCenterOffset = context.tabWidth / (context.options.canDropOnSelf ? 3 : 2 ); context.tabCenterOffset = context.tabWidth / (context.options.canDropOnSelf ? 3 : 2 );
context.utils = this; context.utils = this;
context.destroy = function() { context.destroy = function() {
Object.keys(context).forEach(function(key) { Object.keys(context).forEach(function(key) {
@ -392,7 +402,7 @@
draggedTab._dragData.animLastScreenX = draggedTab._dragData[context.position]; draggedTab._dragData.animLastScreenX = draggedTab._dragData[context.position];
}, this); }, this);
if (!('previousPosition' in context.draggedTab._dragData)) if (!('previousPosition' in context.draggedTab._dragData))
context.draggedTab._dragData.previousPosition = context.currentX; context.draggedTab._dragData.previousPosition = context.currentPositionCoordinate;
}, },
fixDragData : function TDU_fixDragData(aData) fixDragData : function TDU_fixDragData(aData)
{ {
@ -404,21 +414,22 @@
updateDraggedTabs : function TDU_updateDraggedTabs(context) updateDraggedTabs : function TDU_updateDraggedTabs(context)
{ {
context.draggedTabs.forEach(function(draggedTab) { context.draggedTabs.forEach(function(draggedTab) {
draggedTab._dragData.animLastScreenX = context.currentX; draggedTab._dragData.animLastScreenX = context.currentPositionCoordinate;
}, this); }, this);
}, },
collectAlignedTabs : function TDU_collectAlignedTabs(tabs, context) collectAnimateTabs : function TDU_collectAnimateTabs(tabs, context)
{ {
context.allAnimatedTabs = tabs; context.allAnimatedTabs = tabs;
var baseTab = context.draggedTab; if (!context.pinned || !context.onPinnedArea || !context.isVertical)
if (!baseTab.pinned)
return tabs; return tabs;
// With Tree Style Tabs, pinned tabs are shown with multiple rows. // With Tree Style Tabs, pinned tabs are shown with multiple rows.
// We should animate only tabs in the same row. // We should animate only tabs in the same row.
var base = baseTab.boxObject[context.align];
return tabs.filter(function(aTab) { return tabs.filter(function(aTab) {
return aTab.boxObject[context.align] == base; var box = aTab.boxObject;
var min = box[context.align];
var max = min + box[context.sizeToAlign];
return context.currentAlignCoordinate >= min && context.currentAlignCoordinate <= max;
}); });
}, },
updateLeftBound : function TDU_updateLeftBound(leftBound, context) updateLeftBound : function TDU_updateLeftBound(leftBound, context)
@ -447,16 +458,16 @@
context.dontMove = ( context.dontMove = (
context.options.canDropOnSelf && context.options.canDropOnSelf &&
( (
(context.draggedTab._dragData.previousPosition > context.currentX && (context.draggedTab._dragData.previousPosition > context.currentPositionCoordinate &&
context.screenX + context.tabCenterOffset < context.tabCenter) || context.screenX + context.tabCenterOffset < context.tabCenter) ||
(context.draggedTab._dragData.previousPosition < context.currentX && (context.draggedTab._dragData.previousPosition < context.currentPositionCoordinate &&
context.screenX + boxObject[context.size] - context.tabCenterOffset > context.lastTabCenter) context.screenX + boxObject[context.size] - context.tabCenterOffset > context.lastTabCenter)
) )
); );
}, },
checkDontMove : function TDU_checkDontMove(context) checkDontMove : function TDU_checkDontMove(context)
{ {
context.draggedTab._dragData.previousPosition = context.currentX; context.draggedTab._dragData.previousPosition = context.currentPositionCoordinate;
return context.dontMove; return context.dontMove;
}, },
extractNotDraggedTabs : function TDU_extractNotDraggedTabs(tabs, context) extractNotDraggedTabs : function TDU_extractNotDraggedTabs(tabs, context)