mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-11 20:35:50 +00:00
Rewrote various scaling/easing functions in terms of the Range's, with the new proportion and scale methods.
- removed Math.tanh, instead moving it into the Range proportion method for its "smooth" option + rewrote TabItem close button opacity and title font size using the new Range utilities. Should make code a tad easier to follow.
This commit is contained in:
Michael Yoshitaka Erlewine
parent
6402eab8cf
commit
3d2303aca5
@ -112,7 +112,7 @@ Drag.prototype = {
|
||||
// assumeConstantSize - (boolean) whether the bounds' dimensions are sacred or not.
|
||||
// keepProportional - (boolean) if assumeConstantSize is false, whether we should resize
|
||||
// proportionally or not
|
||||
// checkItemStatus - (boolean) make sure this is a
|
||||
// checkItemStatus - (boolean) make sure this is a valid item which should be snapped
|
||||
snapBounds: function Drag_snapBounds(bounds, stationaryCorner, assumeConstantSize, keepProportional, checkItemStatus) {
|
||||
var stationaryCorner = stationaryCorner || 'topleft';
|
||||
var update = false; // need to update
|
||||
|
||||
@ -270,8 +270,7 @@ window.TabItem.prototype = iQ.extend(new Item(), {
|
||||
var $fav = iQ('.favicon', $container);
|
||||
var css = {};
|
||||
|
||||
const minFontSize = 8;
|
||||
const maxFontSize = 15;
|
||||
const fontSizeRange = new Range(8,15);
|
||||
|
||||
if (rect.left != this.bounds.left || options.force)
|
||||
css.left = rect.left;
|
||||
@ -281,12 +280,10 @@ window.TabItem.prototype = iQ.extend(new Item(), {
|
||||
|
||||
if (rect.width != this.bounds.width || options.force) {
|
||||
css.width = rect.width - this.sizeExtra.x;
|
||||
var scale = css.width / TabItems.tabWidth;
|
||||
let widthRange = new Range(0,TabItems.tabWidth);
|
||||
let proportion = widthRange.proportion(css.width, true); // in [0,1]
|
||||
|
||||
// The ease function ".5+.5*Math.tanh(2*x-2)" is a pretty
|
||||
// little graph. It goes from near 0 at x=0 to near 1 at x=2
|
||||
// smoothly and beautifully.
|
||||
css.fontSize = Math.round(minFontSize + (maxFontSize-minFontSize)*(.5+.5*Math.tanh(2*scale-2)));
|
||||
css.fontSize = fontSizeRange.scale(proportion); // returns a value in the fontSizeRange
|
||||
css.fontSize += 'px';
|
||||
}
|
||||
|
||||
@ -317,66 +314,37 @@ window.TabItem.prototype = iQ.extend(new Item(), {
|
||||
}
|
||||
|
||||
if (css.fontSize && !this.inStack()) {
|
||||
if (css.fontSize < minFontSize )
|
||||
if (css.fontSize < fontSizeRange.min )
|
||||
$title.fadeOut();//.dequeue();
|
||||
else
|
||||
$title.fadeIn();//.dequeue();
|
||||
}
|
||||
|
||||
if (css.width) {
|
||||
|
||||
// Usage
|
||||
// slide({60:0, 70:1}, 66);
|
||||
// @60- return 0; at @70+ return 1; @65 return 0.5
|
||||
function slider(bounds, val){
|
||||
var keys = [];
|
||||
for (var key in bounds){ keys.push(key); bounds[key] = parseFloat(bounds[key]); };
|
||||
keys.sort(function(a,b){return a-b});
|
||||
var min = keys[0], max = keys[1];
|
||||
let widthRange, proportion;
|
||||
|
||||
function slide(value){
|
||||
if ( value >= max ) return bounds[max];
|
||||
if ( value <= min ) return bounds[min];
|
||||
var rise = bounds[max] - bounds[min];
|
||||
var run = max-min;
|
||||
var value = rise * (value-min)/run;
|
||||
if ( value >= bounds[max] ) return bounds[max];
|
||||
if ( value <= bounds[min] ) return bounds[min];
|
||||
return value;
|
||||
if (this.inStack()) {
|
||||
$fav.css({top:0, left:0});
|
||||
widthRange = new Range(70, 90);
|
||||
proportion = widthRange.proportion(css.width); // between 0 and 1
|
||||
} else {
|
||||
$fav.css({top:4,left:4});
|
||||
widthRange = new Range(60, 70);
|
||||
proportion = widthRange.proportion(css.width); // between 0 and 1
|
||||
$close.show().css({opacity:proportion});
|
||||
if ( proportion <= .1 )
|
||||
$close.hide()
|
||||
}
|
||||
|
||||
if ( val == undefined )
|
||||
return slide;
|
||||
return slide(val);
|
||||
};
|
||||
|
||||
if (css.width && !this.inStack()) {
|
||||
$fav.css({top:4,left:4});
|
||||
|
||||
var opacity = slider({70:1, 60:0}, css.width);
|
||||
$close.show().css({opacity:opacity});
|
||||
if ( opacity <= .1 ) $close.hide()
|
||||
|
||||
var pad = slider({70:6, 60:1}, css.width);
|
||||
var pad = 1 + 5 * proportion;
|
||||
var alphaRange = new Range(0.1,0.2);
|
||||
$fav.css({
|
||||
"padding-left": pad + "px",
|
||||
"padding-right": pad + 2 + "px",
|
||||
"padding-top": pad + "px",
|
||||
"padding-bottom": pad + "px",
|
||||
"border-color": "rgba(0,0,0,"+ slider({70:.2, 60:.1}, css.width) +")",
|
||||
});
|
||||
}
|
||||
|
||||
if (css.width && this.inStack()){
|
||||
$fav.css({top:0, left:0});
|
||||
var opacity = slider({90:1, 70:0}, css.width);
|
||||
|
||||
var pad = slider({90:6, 70:1}, css.width);
|
||||
$fav.css({
|
||||
"padding-left": pad + "px",
|
||||
"padding-right": pad + 2 + "px",
|
||||
"padding-top": pad + "px",
|
||||
"padding-bottom": pad + "px",
|
||||
"border-color": "rgba(0,0,0,"+ slider({90:.2, 70:.1}, css.width) +")",
|
||||
"border-color": "rgba(0,0,0,"+ alphaRange.scale(proportion) +")",
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@ -355,10 +355,55 @@ window.Range.prototype = {
|
||||
contains: function(value) {
|
||||
return Utils.isNumber(value) ?
|
||||
value >= this.min && value <= this.max :
|
||||
Utils.isRange(value) ?
|
||||
Utils.isRange(value) ?
|
||||
( value.min <= this.max && this.min <= value.max ) :
|
||||
false;
|
||||
},
|
||||
|
||||
// ----------
|
||||
// Function: proportion
|
||||
// Maps the given value to the range [0,1], so that it returns 0 if the value is <= the min,
|
||||
// returns 1 if the value >= the max, and returns an interpolated "proportion" in (min, max).
|
||||
//
|
||||
// Paramaters
|
||||
// - a number
|
||||
// - (bool) smooth? If true, a smooth tanh-based function will be used instead of the linear.
|
||||
proportion: function(value, smooth) {
|
||||
if (value <= this.min)
|
||||
return 0;
|
||||
if (this.max <= value)
|
||||
return 1;
|
||||
|
||||
var proportion = (value - this.min) / this.extent;
|
||||
|
||||
if (smooth) {
|
||||
// The ease function ".5+.5*Math.tanh(4*x-2)" is a pretty
|
||||
// little graph. It goes from near 0 at x=0 to near 1 at x=1
|
||||
// smoothly and beautifully.
|
||||
// http://www.wolframalpha.com/input/?i=.5+%2B+.5+*+tanh%28%284+*+x%29+-+2%29
|
||||
function tanh(x){
|
||||
var e = Math.exp(x);
|
||||
return (e - 1/e) / (e + 1/e);
|
||||
}
|
||||
return .5 - .5 * tanh(2 - 4 * proportion);
|
||||
}
|
||||
|
||||
return proportion;
|
||||
},
|
||||
|
||||
// ----------
|
||||
// Function: scale
|
||||
// Takes the given value in [0,1] and maps it to the associated value on the Range.
|
||||
//
|
||||
// Paramaters
|
||||
// - a number in [0,1]
|
||||
scale: function(value) {
|
||||
if (value > 1)
|
||||
value = 1;
|
||||
if (value < 0)
|
||||
value = 0;
|
||||
return this.min + this.extent * value;
|
||||
}
|
||||
};
|
||||
|
||||
// ##########
|
||||
@ -600,7 +645,7 @@ var Utils = {
|
||||
isNumber: function(n) {
|
||||
return (typeof(n) == 'number' && !isNaN(n));
|
||||
},
|
||||
|
||||
|
||||
// ----------
|
||||
// Function: isRect
|
||||
// Returns true if the given object (r) looks like a <Rect>.
|
||||
@ -611,7 +656,7 @@ var Utils = {
|
||||
&& this.isNumber(r.width)
|
||||
&& this.isNumber(r.height));
|
||||
},
|
||||
|
||||
|
||||
// ----------
|
||||
// Function: isRange
|
||||
// Returns true if the given object (r) looks like a <Range>.
|
||||
@ -646,9 +691,4 @@ var Utils = {
|
||||
|
||||
window.Utils = Utils;
|
||||
|
||||
window.Math.tanh = function tanh(x){
|
||||
var e = Math.exp(x);
|
||||
return (e - 1/e) / (e + 1/e);
|
||||
}
|
||||
|
||||
})();
|
||||
|
||||
Loading…
Reference in New Issue
Block a user