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

Determine number of columns more smartly

Browse Source
This commit is contained in:
Piro / YUKI Hiroshi 2016-03-05 12:35:49 +09:00
parent 392b48ee88
commit a4ea563639
2 changed files with 70 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

101
modules/fullTooltip.js
View File

@ -145,38 +145,6 @@ FullTooltipManager.prototype = inherit(TreeStyleTabBase, {
};
},
getTotalContentSize : function FTM_getTotalContentSize(aContainer)
{
var total = {
width : 0,
height : 0
};
var totalHeight = 0;
var orient = this.window.getComputedStyle(aContainer, null).getPropertyValue('orient');
var isVertical = orient == 'vertical';
Array.forEach(aContainer.childNodes, function(aNode) {
var width, height;
var box = aNode.boxObject;
if (box) {
width = box.width;
height = box.height;
}
else {
width = aNode.clientWidth;
height = aNode.clientHeight;
}
if (isVertical) {
total.width = Math.max(total.width, width);
total.height += height;
}
else {
total.width += width;
total.height = Math.max(total.height, height);
}
});
return total;
},
get currentTooltipMargins()
{
var tooltip = this.tabFullTooltip;
@ -560,11 +528,6 @@ FullTooltipManager.prototype = inherit(TreeStyleTabBase, {
root.appendChild(container);
this.tabFullTooltip.appendChild(root);
log(' => tree size: ', {
width : tree.clientWidth,
height : tree.clientHeight
});
},
clear : function FTM_clear()
@ -584,23 +547,32 @@ FullTooltipManager.prototype = inherit(TreeStyleTabBase, {
{
let basePosition = this.windowBasePosition;
let tooltipBox = tooltip.boxObject;
log(' => current tooltip position: ', {
log(' => initial dimension: ', {
screenX : tooltipBox.screenX,
screenY : tooltipBox.screenY,
x : tooltipBox.screenX - basePosition.x,
y : tooltipBox.screenY - basePosition.y,
width : tooltipBox.width,
height : tooltipBox.height
height : tooltipBox.height,
tree : {
width : tree.clientWidth,
height : tree.clientHeight
}
});
}
log(' => tree: ', {
width : tree.clientWidth,
height : tree.clientHeight
});
this.lastScreen = this.getCurrentScreen(tooltip.boxObject);
if (utils.getTreePref('tooltip.columnize')) {
var header = this.tree.previousSibling;
var extraHeight = header && header.boxObject.height || 0;
var treeBox = {
width : tree.clientWidth,
height : tree.clientHeight
};
var columnize = utils.getTreePref('tooltip.columnize');
if (columnize) {
PseudoTreeBuilder.columnizeTree(tree, {
containerBox : {
width : this.lastScreen.allowedWidth,
@ -608,11 +580,19 @@ FullTooltipManager.prototype = inherit(TreeStyleTabBase, {
},
calculateCount : true
});
this.window.setTimeout(this.expandTooltipInternal.bind(this), 0);
}
else {
this.window.setTimeout((function() {
if (!columnize || tree.columnCount != 1)
treeBox = tree.boxObject;
var container = this.container;
var containerStyle = container.style;
containerStyle.width = (container.width = treeBox.width)+'px';
containerStyle.height = (container.height = (treeBox.height + extraHeight))+'px';
this.expandTooltipInternal();
}
}).bind(this), 0);
},
expandTooltipInternal : function FTM_expandTooltipInternal()
{
@ -622,30 +602,24 @@ FullTooltipManager.prototype = inherit(TreeStyleTabBase, {
var tooltip = this.tabFullTooltip;
tooltip.setAttribute('popup-shown', true);
var requiredSize = this.getTotalContentSize(this.tree.parentNode);
{
// Let's maximize the container box enough to show the tree.
// If the tree is larger thant the tooltip,
// it becomes scrollable by arrowscrollbox.
let containerStyle = this.container.style;
containerStyle.width = requiredSize.width+'px';
containerStyle.height = requiredSize.height+'px';
}
var currentScreen = this.lastScreen || this.getCurrentScreen(box);
var box = tooltip.boxObject;
var currentX = box.screenX - currentScreen.left;
var currentY = box.screenY - currentScreen.top;
var container = this.container;
var maxWidth = Math.min(container.width, currentScreen.allowedWidth);
var maxHeight = Math.min(container.height, currentScreen.allowedHeight);
var style = tooltip.style;
style.maxWidth = currentScreen.allowedWidth+'px';
style.maxWidth = maxWidth+'px';
style.maxHeight = currentScreen.allowedHeight+'px';
style.minWidth = 0;
style.minHeight = 0;
var margins = this.currentTooltipMargins;
var maxX = currentScreen.width - Math.min(requiredSize.width, currentScreen.allowedWidth);
var maxY = currentScreen.height - Math.min(requiredSize.height, currentScreen.allowedHeight);
var maxX = currentScreen.width - maxWidth;
var maxY = currentScreen.height - maxHeight;
log(' => current dimension: ', {
margins : margins,
@ -653,7 +627,12 @@ FullTooltipManager.prototype = inherit(TreeStyleTabBase, {
y : currentY,
maxX : maxX,
maxY : maxY,
required : requiredSize
container : {
width : container.width,
height : container.height
},
screen : currentScreen,
columnCount : this.tree.columnCount
});
if (currentX > maxX)

63
modules/pseudoTreeBuilder.js
View File

@ -152,31 +152,39 @@ var PseudoTreeBuilder = {
return;
aOptions = aOptions || {};
var containerBox = aOptions.containerBox || aTree.parentNode.boxObject;
var style = aTree.style;
var height = aTree.clientHeight * (aTree.columnCount || 1);
if (height > containerBox.height &&
containerBox.height < containerBox.width) {
let maxWidth = containerBox.width;
aTree.columnWidth = Math.floor(maxWidth * 0.9 / 2.5);
style.columnWidth = style.MozColumnWidth = aTree.columnWidth+'px';
style.columnGap = style.MozColumnGap = '0';
style.columnFill = style.MozColumnFill = 'auto';
if (aOptions.calculateCount) {
let count = Math.ceil(
(Math.max(aTree.clientWidth, maxWidth) * aTree.clientHeight) /
(aTree.columnWidth * aTree.clientHeight)
);
aTree.columnCount = style.columnCount = style.MozColumnCount = count;
}
else {
aTree.columnCount = 2;
style.columnCount = style.MozColumnCount = 'auto';
}
style.columnWidth = style.MozColumnWidth = 'calc(20em)';
{
let computedStyle = aTree.ownerDocument.defaultView.getComputedStyle(aTree, null)
aTree.columnWidth = Number((computedStyle.MozColumnWidth || computedStyle.columnWidth).replace(/px/, ''));
}
style.columnGap = style.MozColumnGap = '0';
style.columnFill = style.MozColumnFill = 'auto';
var containerBox = aOptions.containerBox || aTree.parentNode.boxObject;
var maxWidth = containerBox.width;
if (aOptions.calculateCount) {
let count = Math.ceil(
(Math.max(aTree.clientWidth, maxWidth) * aTree.clientHeight) /
(aTree.columnWidth * aTree.clientHeight)
);
style.columnCount = style.MozColumnCount = count;
}
else {
style.columnCount = style.MozColumnCount = 'auto';
}
if (aTree.columnWidth * 2 <= maxWidth ||
aOptions.calculateCount) {
style.height = style.maxHeight =
Math.floor(containerBox.height * 0.9) + 'px';
aTree.columnCount = 0;
aTree.ownerDocument.defaultView.setTimeout((function() {
aTree.columnCount = this.getActualColumnCount(aTree);
if (aTree.columnCount == 1)
style.columnWidth = style.MozColumnWidth = '';
if (aOptions.calculateCount) {
style.columnCount =
style.MozColumnCount =
@ -184,20 +192,9 @@ var PseudoTreeBuilder = {
}
}).bind(this), 0);
}
else {
aTree.columnCount = 1;
style.columnCount = style.MozColumnCount =
style.columnWidth = style.MozColumnWidth =
style.columnGap = style.MozColumnGap =
style.columnFill = style.MozColumnFill = '';
}
if (aTree.columnCount > 1) {
style.height = style.maxHeight =
Math.floor(containerBox.height * 0.9) + 'px';
}
else {
style.height = style.maxHeight = '';
aTree.columnCount = 1;
}
},
getActualColumnCount : function TB_getActualColumnCount(aTree)