Permalink
Browse files

Tweaked animation for smoothness.

  • Loading branch information...
1 parent 7a2567f commit 688c5b17733e3cc2fef6578a438898aeb85b6a9a @max99x max99x committed Sep 8, 2011
Showing with 30 additions and 32 deletions.
  1. +2 −8 dom.coffee
  2. +28 −24 pager.coffee
View
@@ -205,10 +205,10 @@ $.extend REPLIT,
$('.page:visible').css
width: innerWidth
- @ResizeWorkspace innerWidth, height
+ if $('.page:visible').is '#content-workspace'
+ @ResizeWorkspace innerWidth, height
ResizeWorkspace: (innerWidth, height) ->
- if not $('.page:visible').is '#content-workspace' then return
# Calculate editor and console sizes.
editor_width = Math.floor @split_ratio * innerWidth
console_width = innerWidth - editor_width
@@ -236,9 +236,6 @@ $.extend REPLIT,
@$resizer.c.hide()
@$unhider.editor.show()
- # Calculates editor and console dimensions according to their parents and
- # neighboring elements (if any).
- if not (@$console? and @$console?) then return
# Calculate paddings if any.
console_hpadding = @$console.innerWidth() - @$console.width()
console_vpadding = @$console.innerHeight() - @$console.height()
@@ -278,7 +275,4 @@ $ ->
REPLIT.$throbber.hide()
REPLIT.InitDOM()
- REPLIT.OnResize()
- # Workaround for delay on Chrome.
- setTimeout (-> REPLIT.OnResize()), 500
REPLIT.InjectSocial()
View
@@ -132,34 +132,38 @@ $.extend REPLIT,
''
$('#title').text page.title.replace /\$/g, lang_name
- openPage = =>
- # Update widths to those of the new page.
- @min_content_width = page.min_width or @min_content_width
- @max_content_width = page.max_width or @max_content_width
- @content_padding = document.documentElement.clientWidth - page.width
-
- # Check if the page exists on our stack, if so splice out to be put
- # on top.
- index = @page_stack.indexOf page_name
- if index > -1
- @page_stack.splice index, 1
- # Put the page on top of the stack.
- @page_stack.push page_name
-
- # Show the newly opened page.
- outerWidth = page.width + 2 * @RESIZER_WIDTH
- @$container.animate width: outerWidth, ANIMATION_DURATION, =>
- page.$elem.css width: page.width
- page.$elem.fadeIn ANIMATION_DURATION, =>
- @OnResize()
- callback()
+ # Update widths to those of the new page.
+ @min_content_width = page.min_width
+ @max_content_width = page.max_width
+ @content_padding = document.documentElement.clientWidth - page.width
+
+ # Check if the page exists on our stack, if so splice out to be put
+ # on top.
+ index = @page_stack.indexOf page_name
+ if index > -1
+ @page_stack.splice index, 1
+ # Put the page on top of the stack.
+ @page_stack.push page_name
+
+ # Calculate container width.
+ outerWidth = page.width
+ # HACK: Workspace doesn't account for resizers for some reason...
+ if page_name isnt 'workspace' then outerWidth += 2 * @RESIZER_WIDTH
- # Record the current page width and hide the page.
if current_page
+ # Perform the animation.
PAGES[current_page].width = $('.page:visible').width()
- PAGES[current_page].$elem.fadeOut ANIMATION_DURATION, openPage
+ PAGES[current_page].$elem.fadeOut ANIMATION_DURATION, =>
+ @$container.animate width: outerWidth, ANIMATION_DURATION, =>
+ page.$elem.css width: page.width
+ page.$elem.css display: 'block', opacity: 0
+ @OnResize()
+ page.$elem.animate opacity: 1, ANIMATION_DURATION, callback
else
- openPage()
+ @$container.css width: outerWidth
+ page.$elem.css width: page.width, display: 'block'
+ @OnResize()
+ callback()
# Close the top page and opens the page underneath if exists or just animates
# Back to the original environment width.

0 comments on commit 688c5b1

Please sign in to comment.