Fixes for cucumber tests. Restore big chunk of accidentally deleted layout.js
This commit is contained in:
Jonathon Wilson
parent
f95f30d827
commit
76d82f7d01
|
|
@ -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();
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -37,6 +37,6 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<script id="template_audio_device_item">
|
||||
<script id="template_audio_device_item" type="text/template">
|
||||
<option value="{value}">{label}</option>
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
World(LoginHelper)
|
||||
|
|
|
|||
Loading…
Reference in New Issue