From 76d82f7d01d56330cdfbb7476f55396e5b06faed Mon Sep 17 00:00:00 2001 From: Jonathon Wilson Date: Sat, 12 Jan 2013 12:19:20 -0700 Subject: [PATCH] Fixes for cucumber tests. Restore big chunk of accidentally deleted layout.js --- app/assets/javascripts/layout.js | 240 +++++++++++++++++- app/views/clients/_ftue2.html.erb | 2 +- .../step_definitions/create_session_steps.rb | 12 + features/support/login_helper.rb | 7 +- 4 files changed, 258 insertions(+), 3 deletions(-) diff --git a/app/assets/javascripts/layout.js b/app/assets/javascripts/layout.js index 0b1e8ab0f..3e5380646 100644 --- a/app/assets/javascripts/layout.js +++ b/app/assets/javascripts/layout.js @@ -71,7 +71,245 @@ } function layout() { -g $('[layout="header"]').show(); + width = $(context).width(); + height = $(context).height(); + // TODO + // Work on naming. File is layout, class is Layout, this method + // is layout and every other method starts with 'layoutX'. Perhaps + // a little redundant? + layoutCurtain(width, height); + layoutScreens(width, height); + layoutSidebar(width, height); + layoutHeader(width, height); + layoutNotify(width, height); + } + + function layoutCurtain(screenWidth, screenHeight) { + var curtainStyle = { + width: screenWidth + 'px', + height: screenHeight + 'px' + }; + $('.curtain').css(curtainStyle); + } + + function layoutScreens(screenWidth, screenHeight) { + var previousScreenSelector = '[layout-id="' + previousScreen + '"]'; + var currentScreenSelector = '[layout-id="' + currentScreen + '"]'; + $(currentScreenSelector).show(); + + var width = screenWidth - (2 * opts.gutter + 2 * opts.screenMargin); + var left = -1 * width; + + if (currentScreenSelector === previousScreenSelector) { + left = $(currentScreenSelector).css("left"); + if (left) { + left = left.split("px")[0]; + } + } + $(previousScreenSelector).animate({left: left}, {duration: opts.animationDuration, queue: false}); + sizeScreens(screenWidth, screenHeight, '[layout="screen"]'); + positionOffscreens(screenWidth, screenHeight); + positionOnscreen(screenWidth, screenHeight); + } + + function sizeScreens(screenWidth, screenHeight, selector, immediate) { + var duration = opts.animationDuration; + if (immediate) { + duration = 0; + } + + var width = screenWidth - (2 * opts.gutter + 2 * opts.screenMargin); + if (sidebarVisible) { + width -= (opts.sidebarWidth + 2*opts.gridPadding); + } else { + width -= opts.collapsedSidebar + 2*opts.gridPadding; + width += opts.gutter; // Add back in the right gutter width. + } + var height = screenHeight - opts.headerHeight - (2 * opts.gutter + 2 * opts.screenMargin); + var css = { + width: width, + height: height + }; + var $screens = $(selector); + $screens.animate(css, {duration:duration, queue:false}); + layoutHomeScreen(width, height); + } + + /** + * Postition all screens that are not the current screen. + */ + function positionOffscreens(screenWidth, screenHeight) { + var top = opts.headerHeight + opts.gutter + opts.screenMargin; + var left = -1 * (screenWidth + 2*opts.gutter); + var $screens = $('[layout="screen"]').not('[layout-id="' + currentScreen + '"]'); + $screens.css({ + top: top, + left: left + }); + } + + /** + * Position the current screen + */ + function positionOnscreen(screenWidth, screenHeight, immediate) { + var duration = opts.animationDuration; + if (immediate) { + duration = 0; + } + var top = opts.headerHeight + opts.gutter + opts.screenMargin; + var left = opts.gutter + opts.screenMargin; + var $screen = $('[layout-id="' + currentScreen + '"]'); + $screen.animate({ + top: top, + left: left + }, duration); + } + + function layoutHomeScreen(homeScreenWidth, homeScreenHeight) { + var $grid = $('[layout-grid]'); + var gridWidth = homeScreenWidth; + var gridHeight = homeScreenHeight; + $grid.css({width:gridWidth, height: gridHeight}); + var layout = $grid.attr('layout-grid'); + if (!layout) + return; + var gridRows = layout.split('x')[0]; + var gridCols = layout.split('x')[1]; + + $grid.children().each(function() { + var childPosition = $(this).attr("layout-grid-position"); + var childRow = childPosition.split(',')[1]; + var childCol = childPosition.split(',')[0]; + var childRowspan = $(this).attr("layout-grid-rows"); + var childColspan = $(this).attr("layout-grid-columns"); + var childLayout = me.getCardLayout(gridWidth, gridHeight, gridRows, gridCols, + childRow, childCol, childRowspan, childColspan); + + $(this).animate({ + width: childLayout.width, + height: childLayout.height, + top: childLayout.top, + left: childLayout.left + }, opts.animationDuration); + }); + } + + function layoutSidebar(screenWidth, screenHeight) { + var width = opts.sidebarWidth; + var expanderHeight = $('[layout-sidebar-expander]').height(); + var height = screenHeight - opts.headerHeight - 2 * opts.gutter + expanderHeight; + var right = opts.gutter; + if (!sidebarVisible) { + // Negative right to hide most of sidebar + right = (0 - opts.sidebarWidth) + opts.collapsedSidebar; + } + var top = opts.headerHeight + opts.gutter - expanderHeight; + var css = { + width: width, + height: height, + top: top, + right: right + }; + $('[layout="sidebar"]').animate(css, opts.animationDuration); + layoutPanels(width, height); + if (sidebarVisible) { + $('[layout-panel="collapsed"]').hide(); + $('[layout-panel="expanded"]').show(); + $('[layout-sidebar-expander="hidden"]').hide(); + $('[layout-sidebar-expander="visible"]').show(); + } else { + $('[layout-panel="collapsed"]').show(); + $('[layout-panel="expanded"]').hide(); + $('[layout-sidebar-expander="hidden"]').show(); + $('[layout-sidebar-expander="visible"]').hide(); + } + } + + function layoutPanels(sidebarWidth, sidebarHeight) { + // TODO - don't like the accordian - poor usability. Requires longest mouse + // reach when switching panels. Probably better to do tabs. + if (!sidebarVisible) { + return; + } + var $expandedPanelContents = $('[layout-id="' + expandedPanel + '"] [layout-panel="contents"]'); + var combinedHeaderHeight = $('[layout-panel="contents"]').length * opts.panelHeaderHeight; + var searchHeight = $('.sidebar .search').first().height(); + logger.debug(searchHeight); + var expanderHeight = $('[layout-sidebar-expander]').height(); + var expandedPanelHeight = sidebarHeight - (combinedHeaderHeight + expanderHeight + searchHeight); + $('[layout-panel="contents"]').hide(); + $('[layout-panel="contents"]').css({"height": "1px"}); + $expandedPanelContents.show(); + $expandedPanelContents.animate({"height": expandedPanelHeight + "px"}, opts.animationDuration); + } + + function layoutHeader(screenWidth, screenHeight) { + var width = screenWidth - 2*opts.gutter; + var height = opts.headerHeight - opts.gutter; + var top = opts.gutter; + var left = opts.gutter; + var css = { + width: width + "px", + height: height + "px", + top: top + "px", + left: left + "px" + }; + $('[layout="header"]').css(css); + } + + function layoutNotify(screenWidth, screenHeight) { + var notifyStyle = { + bottom: opts.gutter + opts.notifyGutter + 'px', + left: opts.gutter + opts.notifyGutter + 'px', + height: opts.notifyHeight - 2 * opts.notifyGutter + 'px', + width: screenWidth - 2 * opts.gutter - 2 * opts.notifyGutter + 'px' + }; + $('[layout="notify"]').css(notifyStyle); + } + + function requiredStyles() { + var bodyStyle = { + margin: '0px', + padding: '0px', + overflow: 'hidden' + }; + if (opts.allowBodyOverflow) { + delete bodyStyle.overflow; + } + $('body').css(bodyStyle); + + var layoutStyle = { + position: 'absolute', + margin: '0px', + padding: '0px' + }; + $('[layout]').css(layoutStyle); + $('[layout="notify"]').css({"z-index": "9"}); + $('[layout="panel"]').css({position: 'relative'}); + $('[layout-panel="expanded"] [layout-panel="header"]').css({ + margin: "0px", + padding: "0px", + height: opts.panelHeaderHeight + "px" + }); + $('[layout-grid]').css({ + position: "relative" + }); + $('[layout-grid]').children().css({ + position: "absolute" + }); + var curtainStyle = { + position: "absolute", + margin: '0px', + padding: '0px', + overflow: 'hidden', + zIndex: 100 + }; + $('.curtain').css(curtainStyle); + } + + function hideAll() { + $('[layout]').hide(); + $('[layout="header"]').show(); } diff --git a/app/views/clients/_ftue2.html.erb b/app/views/clients/_ftue2.html.erb index 31752fcea..26fce3cdc 100644 --- a/app/views/clients/_ftue2.html.erb +++ b/app/views/clients/_ftue2.html.erb @@ -37,6 +37,6 @@ - diff --git a/features/step_definitions/create_session_steps.rb b/features/step_definitions/create_session_steps.rb index c8f797a60..a3b178a60 100644 --- a/features/step_definitions/create_session_steps.rb +++ b/features/step_definitions/create_session_steps.rb @@ -14,6 +14,12 @@ When /^I create a public music session$/ do sleep 1 page.find("a[href='#/ftue3']").click sleep 1 + page.find('div[data-step="step1"] button.startTestButton').click + sleep 1 + page.find("#poorAudioButton").click + sleep 1 + page.find("#goodAudioButton").click + sleep 1 page.find("[cucumber-id='ftue-home-link']").click sleep 1 @@ -47,6 +53,12 @@ Then /^I should be in a music session that another musician can find$/ do sleep 1 @second_session.find("a[href='#/ftue3']").click sleep 1 + @second_session.find('div[data-step="step1"] button.startTestButton').click + sleep 1 + @second_session.find("#poorAudioButton").click + sleep 1 + @second_session.find("#goodAudioButton").click + sleep 1 @second_session.find("[cucumber-id='ftue-home-link']").click sleep 1 diff --git a/features/support/login_helper.rb b/features/support/login_helper.rb index b5153b92b..e869e908c 100644 --- a/features/support/login_helper.rb +++ b/features/support/login_helper.rb @@ -2,6 +2,11 @@ module LoginHelper def login(user, context) context.visit root_path + + # When troubleshooting JS errors, sleeping when the UI first comes up is helpful. + # It allows you to bring up a JS console on the test browser and see what the problem is. + # sleep 60 + # verify that the root page is showing context.should have_content "Welcome to JamKazam" @@ -20,4 +25,4 @@ module LoginHelper end end -World(LoginHelper) \ No newline at end of file +World(LoginHelper)