From 571236dbca973ed547c4eb4e84a21a51845b12a6 Mon Sep 17 00:00:00 2001 From: "aza@localhost" Date: Mon, 22 Mar 2010 19:19:40 -0700 Subject: [PATCH] + Reverted from CSS-Transitions to jQuery Animations. There were just too many errors using Firefox 3.7 (like that new tabs stopped appearing, and closed tabs stopped dissapearing!) + Removed some un-needed code that dealt with old-style animations from both of the ui.js implementations (from ian1 and original) + Added code that handles zIndex went zooming --- browser/base/content/tabcandy/app/groups.js | 34 +----------- browser/base/content/tabcandy/app/ui.js | 61 ++++++++++++--------- content/candies/ian1/js/ui.js | 9 --- 3 files changed, 37 insertions(+), 67 deletions(-) diff --git a/browser/base/content/tabcandy/app/groups.js b/browser/base/content/tabcandy/app/groups.js index c70d9e889d6..2987fba0be0 100644 --- a/browser/base/content/tabcandy/app/groups.js +++ b/browser/base/content/tabcandy/app/groups.js @@ -165,7 +165,6 @@ Group.prototype = { arrange: function(){ if( this._children.length < 2 ) return; var bb = this._getContainerBox(); - var tab; // TODO: This is an hacky heuristic. Fix this layout algorithm. var pad = 10; @@ -174,7 +173,7 @@ Group.prototype = { var x=pad; var y=pad; - for([,tab] in Iterator(this._children)){ + for each( var tab in this._children){ scaleTab( $(tab), w/$(tab).width()); $(tab).animate({ top:y+bb.top, left:x+bb.left, @@ -353,36 +352,5 @@ $(".tab").data('isDragging', false) .draggable(window.Groups.dragOptions) .droppable(window.Groups.dropOptions); -$(".tab").click(function(){ - // ZOOM! - - var ffVersion = parseFloat(navigator.userAgent.match(/\d{8}.*(\d\.\d)/)[1]); - if( ffVersion < 3.7 ) Utils.error("css-transitions require Firefox 3.7+"); - - var [w,h] = [$(this).width(), $(this).height()]; - var origPos = $(this).position(); - var scale = window.innerWidth/w; - var fontSize = parseInt($(this).css("font-size")); - - $(this).addClass("scale-animate").css({ - top: 0, left: 0, - width:w*scale, height:h*scale, - fontSize: fontSize*scale - }).bind("transitionend", function(e){ - // We will get one of this events for every property CSS-animated... - // I choose one randomly (width) and only do things for that. - if( e.originalEvent.propertyName != "width" ) return; - - // Switch tabs, and the re-size and re-position the animated - // tab image. - var self = this; - setTimeout(function(){ - $(self) - .removeClass("scale-animate") - .css({top: origPos.top, left: origPos.left, width:w, height:h, fontSize:fontSize}); - }, 500); - - }) -}) })(); \ No newline at end of file diff --git a/browser/base/content/tabcandy/app/ui.js b/browser/base/content/tabcandy/app/ui.js index 48abb0dbef6..746a4b5f255 100644 --- a/browser/base/content/tabcandy/app/ui.js +++ b/browser/base/content/tabcandy/app/ui.js @@ -36,32 +36,50 @@ var Page = { var ffVersion = parseFloat(navigator.userAgent.match(/\d{8}.*(\d\.\d)/)[1]); if( ffVersion < 3.7 ) Utils.error("css-transitions require Firefox 3.7+"); - // ZOOM! - var [w,h] = [$(this).width(), $(this).height()]; + // ZOOM! + var [w,h,z] = [$(this).width(), $(this).height(), $(this).css("zIndex")]; var origPos = $(this).position(); var scale = window.innerWidth/w; var tab = Tabs.tab(this); var mirror = tab.mirror; - mirror.forceCanvasSize(w * scale, h * scale); + //mirror.forceCanvasSize(w * scale/3, h * scale); - $(this).addClass("scale-animate").css({ + var overflow = $("body").css("overflow"); + $("body").css("overflow", "hidden"); + + $(this).css("zIndex",99999).animate({ + top: 0, left: 0, easing: "easein", + width:w*scale, height:h*scale}, 200, function(){ + $(this).find("canvas").data("link").tab.focus(); + $(this) + .css({top: origPos.top, left: origPos.left, width:w, height:h, zIndex:z}); + Navbar.show(); + $("body").css("overflow", overflow); + }); + + // I'm temporarily giving up on CSS-Transforms and Firefox 3.7. + // It introduces way to many errors... -- Aza + + /*$(this).addClass("scale-animate").css({ top: 0, left: 0, width:w*scale, height:h*scale }).bind("transitionend", function(e){ // We will get one of this events for every property CSS-animated... - // I choose one randomly (width) and only do things for that. + // I chose one randomly (width) and only do things for that. if( e.originalEvent.propertyName != "width" ) return; // Switch tabs, and the re-size and re-position the animated // tab image. + // Don't forget to unbind the transitioned event handler! + $(this).unbind("transitionend"); $(this).find("canvas").data("link").tab.focus(); $(this) .removeClass("scale-animate") .css({top: origPos.top, left: origPos.left, width:w, height:h}); Navbar.show(); - mirror.unforceCanvasSize(); - }) + //mirror.unforceCanvasSize(); + })*/ // END ZOOM } else { @@ -106,10 +124,13 @@ var Page = { // its mirror for the zoom out. var $tab = $(lastTab.mirror.el); - var [w,h, pos] = [$tab.width(), $tab.height(), $tab.position()]; + var [w,h, pos, z] = [$tab.width(), $tab.height(), $tab.position(), $tab.css("zIndex")]; var scale = window.innerWidth / w; + + var overflow = $("body").css("overflow"); + $("body").css("overflow", "hidden"); + var mirror = lastTab.mirror; - mirror.forceCanvasSize(w * scale, h * scale); $tab.css({ top: 0, left: 0, width: window.innerWidth, @@ -119,7 +140,8 @@ var Page = { top: pos.top, left: pos.left, width: w, height: h },250, '', function() { - mirror.unforceCanvasSize(); + $tab.css("zIndex",z); + $("body").css("overflow", overflow); }); } lastTab = this; @@ -128,7 +150,7 @@ var Page = { $("#tabbar").toggle( function(){Tabbar.hide()}, function(){Tabbar.show()} - ) + ); Page.initSearch(); }, @@ -174,10 +196,10 @@ var Page = { }); - Utils.homeTab.onFocus(function(){ + /*Utils.homeTab.onFocus(function(){ $search.val("").focus(); Navbar.hide(); - }); + });*/ $(window).blur(function(){ Navbar.show(); @@ -199,15 +221,6 @@ ArrangeClass.prototype = { } } -var anim = new ArrangeClass("Anim", function(){ - if( $("canvas:visible").eq(9).height() < 300 ) - $("canvas:visible").eq(9).data("link").animate({height:500}, 500); - else - $("canvas:visible").eq(9).data("link").animate({height:120}, 500); - - $("canvas:visible").eq(9).css({zIndex:99999}); -}) - var grid = new ArrangeClass("Grid", function(){ var x = 10; var y = 100; @@ -232,11 +245,9 @@ var grid = new ArrangeClass("Grid", function(){ }); - var Arrange = { init: function(){ - grid.arrange(); - + grid.arrange(); } } diff --git a/content/candies/ian1/js/ui.js b/content/candies/ian1/js/ui.js index 2f23f730e6e..d09697cb62e 100644 --- a/content/candies/ian1/js/ui.js +++ b/content/candies/ian1/js/ui.js @@ -276,15 +276,6 @@ ArrangeClass.prototype = { } } -//---------------------------------------------------------- -var anim = new ArrangeClass("Anim", function(){ - if( $("canvas:visible").eq(9).height() < 300 ) - $("canvas:visible").eq(9).data("link").animate({height:500}, 500); - else - $("canvas:visible").eq(9).data("link").animate({height:120}, 500); - - $("canvas:visible").eq(9).css({zIndex:99999}); -}) //---------------------------------------------------------- var grid = new ArrangeClass("Grid", function(value) {