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

Better animation effect for multirow pinned tabs

Browse Source
This commit is contained in:
YUKI Hiroshi 2012-12-04 12:02:24 +09:00
parent 49f85829f7
commit fdff43f59c
1 changed files with 45 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -189,7 +189,6 @@
'TDUContext.utils.updateDontMove(boxObject, TDUContext);\n' 'TDUContext.utils.updateDontMove(boxObject, TDUContext);\n'
).replace( ).replace(
'if (newIndex >= oldIndex)', 'if (newIndex >= oldIndex)',
'tabs = TDUContext.allAnimatedTabs;\n' +
'if (TDUContext.utils.checkDontMove(TDUContext)) return;\n' + 'if (TDUContext.utils.checkDontMove(TDUContext)) return;\n' +
'$&' '$&'
).replace( ).replace(
@ -304,7 +303,6 @@
// break; // break;
// } // }
// } // }
// tabs = TDUContext.allAnimatedTabs;
// if (TDUContext.utils.checkDontMove(TDUContext)) return; // if (TDUContext.utils.checkDontMove(TDUContext)) return;
// if (newIndex >= oldIndex) // if (newIndex >= oldIndex)
// newIndex++; // newIndex++;
@ -359,19 +357,23 @@
context.options.isVertical : context.options.isVertical :
tabbarIsVertical ; tabbarIsVertical ;
context.position = isVertical ? 'screenY' : 'screenX' ; context.position = isVertical ? 'screenY' : 'screenX' ;
context.align = tabbarIsVertical ? 'screenY' : 'screenX' ; context.rowPosition = tabbarIsVertical ? 'screenY' : 'screenX' ;
context.size = isVertical ? 'height' : 'width' ; context.size = isVertical ? 'height' : 'width' ;
context.sizeToAlign = tabbarIsVertical ? 'height' : 'width' ; context.rowSize = tabbarIsVertical ? 'height' : 'width' ;
context.scroll = isVertical ? 'scrollY' : 'scrollX'; context.scroll = isVertical ? 'scrollY' : 'scrollX';
context.translator = isVertical ? 'translateY' : 'translateX' ; context.translator = isVertical ? 'translateY' : 'translateX' ;
context.currentPositionCoordinate = aEvent[context.position]; context.currentPositionCoordinate = aEvent[context.position];
context.currentAlignCoordinate = aEvent[context.align]; context.currentRowPositionCoordinate = aEvent[context.rowPosition];
var b = this.getTabBrowserFromChild(tabbar); var b = this.getTabBrowserFromChild(tabbar);
var firstNormalTab = b.visibleTabs[b._numPinnedTabs]; var firstNormalTab = b.visibleTabs[b._numPinnedTabs];
context.pinned = context.draggedTab.pinned; context.pinned = context.draggedTab.pinned;
context.onPinnedArea = context.currentAlignCoordinate < firstNormalTab.boxObject[context.align]; context.onPinnedArea = context.currentRowPositionCoordinate < firstNormalTab.boxObject[context.rowPosition];
context.tabbarIsVertical = tabbarIsVertical; context.tabbarIsVertical = tabbarIsVertical;
context.multirowTabs = context.pinned &&
context.onPinnedArea &&
tabbarIsVertical &&
!isVertical;
context.tabSize = context.draggedTab.getBoundingClientRect()[context.size]; context.tabSize = context.draggedTab.getBoundingClientRect()[context.size];
context.tabCenterOffset = context.tabSize / (context.options.canDropOnSelf ? 3 : 2 ); context.tabCenterOffset = context.tabSize / (context.options.canDropOnSelf ? 3 : 2 );
@ -419,17 +421,25 @@
}, },
collectAnimateTabs : function TDU_collectAnimateTabs(tabs, context) collectAnimateTabs : function TDU_collectAnimateTabs(tabs, context)
{ {
context.allAnimatedTabs = tabs; context.animateTabs = context.allAnimateTabs = tabs;
if (!context.pinned || !context.onPinnedArea || !context.isVertical) if (!context.multirowTabs)
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.
return tabs.filter(function(aTab) { return context.animateTabs = tabs.filter(function(aTab) {
var box = aTab.boxObject; var box = aTab.boxObject;
var min = box[context.align]; var min = box[context.rowPosition];
var max = min + box[context.sizeToAlign]; var max = min + box[context.rowSize];
return context.currentAlignCoordinate >= min && context.currentAlignCoordinate <= max; var onSameRow = context.currentRowPositionCoordinate >= min &&
context.currentRowPositionCoordinate <= max;
if (onSameRow) {
return true;
}
else {
aTab.style.transform = ''; // reset old animation
return false;
}
}); });
}, },
updateLeftBound : function TDU_updateLeftBound(leftBound, context) updateLeftBound : function TDU_updateLeftBound(leftBound, context)
@ -447,8 +457,29 @@
}, },
updateDraggedTabsTransform : function TDU_updateDraggedTabsTransform(context) updateDraggedTabsTransform : function TDU_updateDraggedTabsTransform(context)
{ {
context.draggedTabs.slice(1).forEach(function(tab) { var transform = context.draggedTab.style.transform;
tab.style.transform = context.draggedTab.style.transform;
var tabs = context.draggedTabs;
if (context.multirowTabs) { // for multirow pinned tabs
let translateX = /translateX\(([-0-9\.]+)(?:px)?\)/.test(transform) && RegExp.$1 || 0;
translateX = parseFloat(translateX);
let translateY = /translateY\(([-0-9\.]+)(?:px)?\)/.test(transform) && RegExp.$1 || 0;
translateY = parseFloat(translateY);
let rowDelta = context.animateTabs[0].boxObject[context.rowPosition] - context.draggedTab.boxObject[context.rowPosition];
if (context.rowPosition == 'screenY')
translateY += rowDelta;
else
translateX += rowDelta;
transform = 'translate(' + translateX + 'px, ' + translateY + 'px)';
}
else {
tabs = tabs.slice(1);
}
tabs.forEach(function(tab) {
tab.style.transform = transform;
}, this); }, this);
context.dontMove = false; context.dontMove = false;
context.lastTabCenter = Math.round(context.tabScreenPosition + context.translateDelta + context.tabsSize - context.tabSize / 2); context.lastTabCenter = Math.round(context.tabScreenPosition + context.translateDelta + context.tabsSize - context.tabSize / 2);