I'd like to truncate DrawLabel contents when it overflows a specified width.
I've experimented a bit with measuring text size on a hidden DIV.
Follows a snippet that works on current SmartClient showcase: it shows a gray label that overflows the green rectangle, while the red label (having the same contents) is truncated with an ellipsis.
Is there any smarter way to obtain the same result?
Also: is there any chance to have a similar feature integrated into smartclient/smartgwt?
I've experimented a bit with measuring text size on a hidden DIV.
Follows a snippet that works on current SmartClient showcase: it shows a gray label that overflows the green rectangle, while the red label (having the same contents) is truncated with an ellipsis.
Is there any smarter way to obtain the same result?
Also: is there any chance to have a similar feature integrated into smartclient/smartgwt?
Code:
var lbl1;
var lbl2;
var fontSize = 15;
var fontFamily = 'Sans';
var fontStyle = 'italic';
var fontWeight = 'bold';
var mainPane = isc.VLayout.create({
autoDraw: true,
height: 200,
width: 600,
members: [
isc.DrawPane.create({
autoDraw: false,
cursor: "default",
height: "100%",
border: "2px solid blue",
drawItems: [
lbl1 = isc.DrawLabel.create({
left: 60,
top: 40,
fontSize: fontSize,
fontFamily: fontFamily,
fontStyle: fontStyle,
fontWeight: fontWeight,
contents: 'The quick brown fox jumps over the lazy dog'
}),
lbl2 = isc.DrawLabel.create({
left: 60,
top: 70,
width: 200,
lineColor: 'red',
fontSize: fontSize,
fontFamily: fontFamily,
fontStyle: fontStyle,
fontWeight: fontWeight
}),
isc.DrawRect.create({
id: "lblContainer",
width: 200,
height: 100,
left: 60,
top: 30,
lineColor: 'green'
})
]
})
]
});
isc.VStack.create({
height: "100%",
members: [mainPane]
});
var getLabelWidth = function (contents, dirty) {
dirty.innerHTML = contents;
return dirty.clientWidth + 1;
}
var truncateLabel = function (theLabel, width, dirty) {
var originalContents = theLabel.contents;
var contents = originalContents;
console.log ('analyzing "'+originalContents+'" for target width: '+width);
var maxSteps = 3;
for (var i=0;i<maxSteps;i++) {
var currentWidth = getLabelWidth (i==0?contents:(contents+'...'), dirty);
console.log ('currentWidth: '+currentWidth);
if (currentWidth<=width) {
break;
} else {// shrink needed
var ratio = width/currentWidth;
contents = contents.substring (0, contents.length * ratio);
console.log ('i: '+i+', contents: '+contents+', ratio: '+ratio);
}
theLabel.contents = contents+'...';
}
}
var dirty = document.createElement('div');
dirty.id = 'dirty';
dirty.style.fontSize = fontSize+'px';
dirty.style.fontFamily = fontFamily;
dirty.style.fontStyle = fontStyle;
dirty.style.fontWeight = fontWeight;
dirty.style.position = 'absolute';
//dirty.style.visibility = 'hidden';
dirty.style.height = 'auto';
dirty.style.width = 'auto';
document.body.appendChild(dirty);
lbl2.contents = lbl1.contents;
truncateLabel (lbl2, lbl2.width, dirty);