Commit 756dc7bb authored by webchick's avatar webchick

Issue #2424805 by mdrummond, YesCT, vijaycs85, xjm, marcoscano, ifrik,...

Issue #2424805 by mdrummond, YesCT, vijaycs85, xjm, marcoscano, ifrik, joelpittet, Jelle_S, attiks, lauriii: Toolbar can no longer switch horizontal and vertical -- expects breakpoints ordered from smallest to largest; responsive images need largest to smallest
parent cc17945f
......@@ -169,6 +169,7 @@ public function getBreakpointsByGroup($group) {
$this->breakpointsByGroup[$group] = $breakpoints;
}
}
$instances = array();
foreach ($this->breakpointsByGroup[$group] as $plugin_id => $definition) {
if (!isset($this->instances[$plugin_id])) {
......
......@@ -34,51 +34,51 @@ protected function setUp() {
public function testThemeBreakpoints() {
// Verify the breakpoint group for breakpoint_theme_test was created.
$expected_breakpoints = array(
'breakpoint_theme_test.tv' => array(
'label' => 'tv',
'mediaQuery' => 'only screen and (min-width: 1220px)',
'breakpoint_theme_test.mobile' => array(
'label' => 'mobile',
'mediaQuery' => '(min-width: 0px)',
'weight' => 0,
'multipliers' => array(
'1x',
),
'provider' => 'breakpoint_theme_test',
'id' => 'breakpoint_theme_test.tv',
'id' => 'breakpoint_theme_test.mobile',
'group' => 'breakpoint_theme_test',
'class' => 'Drupal\\breakpoint\\Breakpoint',
),
'breakpoint_theme_test.wide' => array(
'label' => 'wide',
'mediaQuery' => '(min-width: 851px)',
'breakpoint_theme_test.narrow' => array(
'label' => 'narrow',
'mediaQuery' => '(min-width: 560px)',
'weight' => 1,
'multipliers' => array(
'1x',
),
'provider' => 'breakpoint_theme_test',
'id' => 'breakpoint_theme_test.wide',
'id' => 'breakpoint_theme_test.narrow',
'group' => 'breakpoint_theme_test',
'class' => 'Drupal\\breakpoint\\Breakpoint',
),
'breakpoint_theme_test.narrow' => array(
'label' => 'narrow',
'mediaQuery' => '(min-width: 560px)',
'breakpoint_theme_test.wide' => array(
'label' => 'wide',
'mediaQuery' => '(min-width: 851px)',
'weight' => 2,
'multipliers' => array(
'1x',
),
'provider' => 'breakpoint_theme_test',
'id' => 'breakpoint_theme_test.narrow',
'id' => 'breakpoint_theme_test.wide',
'group' => 'breakpoint_theme_test',
'class' => 'Drupal\\breakpoint\\Breakpoint',
),
'breakpoint_theme_test.mobile' => array(
'label' => 'mobile',
'mediaQuery' => '(min-width: 0px)',
'breakpoint_theme_test.tv' => array(
'label' => 'tv',
'mediaQuery' => 'only screen and (min-width: 1220px)',
'weight' => 3,
'multipliers' => array(
'1x',
),
'provider' => 'breakpoint_theme_test',
'id' => 'breakpoint_theme_test.mobile',
'id' => 'breakpoint_theme_test.tv',
'group' => 'breakpoint_theme_test',
'class' => 'Drupal\\breakpoint\\Breakpoint',
),
......@@ -102,7 +102,7 @@ public function testCustomBreakpointGroups () {
'breakpoint_theme_test.group2.narrow' => array(
'label' => 'narrow',
'mediaQuery' => '(min-width: 560px)',
'weight' => 2,
'weight' => 0,
'multipliers' => array(
'1x',
'2x',
......@@ -128,7 +128,7 @@ public function testCustomBreakpointGroups () {
'breakpoint_module_test.breakpoint_theme_test.group2.tv' => array(
'label' => 'tv',
'mediaQuery' => '(min-width: 6000px)',
'weight' => 0,
'weight' => 2,
'multipliers' => array(
'1x',
),
......@@ -153,7 +153,7 @@ public function testModuleBreakpoints() {
'breakpoint_module_test.mobile' => array(
'label' => 'mobile',
'mediaQuery' => '(min-width: 0px)',
'weight' => 1,
'weight' => 0,
'multipliers' => array(
'1x',
),
......@@ -165,7 +165,7 @@ public function testModuleBreakpoints() {
'breakpoint_module_test.standard' => array(
'label' => 'standard',
'mediaQuery' => '(min-width: 560px)',
'weight' => 0,
'weight' => 1,
'multipliers' => array(
'1x',
'2x',
......@@ -178,9 +178,7 @@ public function testModuleBreakpoints() {
);
$breakpoints = \Drupal::service('breakpoint.manager')->getBreakpointsByGroup('breakpoint_module_test');
foreach ($expected_breakpoints as $id => $expected_breakpoint) {
$this->assertEqual($expected_breakpoint, $breakpoints[$id]->getPluginDefinition());
}
$this->assertEqual(array_keys($expected_breakpoints), array_keys($breakpoints));
}
/**
......
breakpoint_module_test.mobile:
label: mobile
mediaQuery: '(min-width: 0px)'
weight: 1
weight: 0
# Don't include multipliers. A 1x multiplier this will be enforced by default.
breakpoint_module_test.standard:
label: standard
mediaQuery: '(min-width: 560px)'
weight: 0
weight: 1
# Don't include a 1x multiplier this will be enforced by default.
multipliers:
- 2x
......@@ -15,7 +15,7 @@ breakpoint_module_test.standard:
breakpoint_module_test.breakpoint_theme_test.group2.tv:
label: tv
mediaQuery: '(min-width: 6000px)'
weight: 0
weight: 2
multipliers:
- 1x
group: breakpoint_theme_test.group2
breakpoint_theme_test.mobile:
label: mobile
mediaQuery: '(min-width: 0px)'
weight: 3
weight: 0
multipliers:
- 1x
breakpoint_theme_test.narrow:
label: narrow
mediaQuery: '(min-width: 560px)'
weight: 2
weight: 1
multipliers:
- 1x
# Out of order breakpoint to test sorting.
breakpoint_theme_test.tv:
label: tv
mediaQuery: 'only screen and (min-width: 1220px)'
weight: 0
weight: 3
multipliers:
- 1x
breakpoint_theme_test.wide:
label: wide
mediaQuery: '(min-width: 851px)'
weight: 1
weight: 2
multipliers:
- 1x
breakpoint_theme_test.group2.narrow:
label: narrow
mediaQuery: '(min-width: 560px)'
weight: 2
weight: 0
multipliers:
- 1x
- 2x
......
......@@ -133,8 +133,13 @@ function template_preprocess_responsive_image(&$variables) {
$image = \Drupal::service('image.factory')->get($variables['uri']);
$responsive_image_style = ResponsiveImageStyle::load($variables['responsive_image_style_id']);
// All breakpoints and multipliers.
$breakpoints = \Drupal::service('breakpoint.manager')->getBreakpointsByGroup($responsive_image_style->getBreakpointGroup());
// Retrieve all breakpoints and multipliers and reverse order of breakpoints.
// By default, breakpoints are ordered from smallest weight to largest:
// the smallest weight is expected to have the smallest breakpoint width,
// while the largest weight is expected to have the largest breakpoint
// width. For responsive images, we need largest breakpoint widths first, so
// we need to reverse the order of these breakpoints.
$breakpoints = array_reverse(\Drupal::service('breakpoint.manager')->getBreakpointsByGroup($responsive_image_style->getBreakpointGroup()));
foreach ($responsive_image_style->getKeyedImageStyleMappings() as $breakpoint_id => $multipliers) {
if (isset($breakpoints[$breakpoint_id])) {
$variables['sources'][] = responsive_image_build_source_attributes($image, $variables, $breakpoints[$breakpoint_id], $multipliers);
......
......@@ -109,7 +109,12 @@ public function form(array $form, FormStateInterface $form_state) {
'#required' => TRUE,
);
$breakpoints = $this->breakpointManager->getBreakpointsByGroup($responsive_image_style->getBreakpointGroup());
// By default, breakpoints are ordered from smallest weight to largest:
// the smallest weight is expected to have the smallest breakpoint width,
// while the largest weight is expected to have the largest breakpoint
// width. For responsive images, we need largest breakpoint widths first, so
// we need to reverse the order of these breakpoints.
$breakpoints = array_reverse($this->breakpointManager->getBreakpointsByGroup($responsive_image_style->getBreakpointGroup()));
foreach ($breakpoints as $breakpoint_id => $breakpoint) {
foreach ($breakpoint->getMultipliers() as $multiplier) {
$label = $multiplier . ' ' . $breakpoint->getLabel() . ' [' . $breakpoint->getMediaQuery() . ']';
......
toolbar.narrow:
label: narrow
mediaQuery: 'only screen and (min-width: 16.5em)'
weight: 2
weight: 0
multipliers:
- 1x
toolbar.standard:
......@@ -13,6 +13,6 @@ toolbar.standard:
toolbar.wide:
label: wide
mediaQuery: 'only screen and (min-width: 61em)'
weight: 0
weight: 2
multipliers:
- 1x
bartik.mobile:
label: mobile
mediaQuery: ''
weight: 2
weight: 0
multipliers:
- 1x
bartik.narrow:
......@@ -13,6 +13,6 @@ bartik.narrow:
bartik.wide:
label: wide
mediaQuery: 'all and (min-width: 851px)'
weight: 0
weight: 2
multipliers:
- 1x
seven.mobile:
label: mobile
mediaQuery: '(min-width: 0em)'
weight: 1
weight: 0
multipliers:
- 1x
seven.wide:
label: wide
mediaQuery: 'screen and (min-width: 40em)'
weight: 0
weight: 1
multipliers:
- 1x
stark.mobile:
label: mobile
mediaQuery: '(min-width: 0px)'
weight: 2
weight: 0
multipliers:
- 1x
stark.narrow:
......@@ -13,6 +13,6 @@ stark.narrow:
stark.wide:
label: wide
mediaQuery: 'all and (min-width: 960px)'
weight: 0
weight: 2
multipliers:
- 1x
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment