mirror of
https://github.com/Universal-Omega/PortableInfobox.git
synced 2024-11-15 11:59:56 +00:00
Merge pull request #7430 from Wikia/infobox-tabular-layout
DAT-2856 Infobox tabular layout
This commit is contained in:
Rafal Leszczynski
commit
eb3c40a8dc
|
|
@ -4,10 +4,16 @@ class PortableInfoboxParserTagController extends WikiaController {
|
|||
const PARSER_TAG_NAME = 'infobox';
|
||||
const INFOBOXES_PROPERTY_NAME = 'infoboxes';
|
||||
const DEFAULT_THEME_NAME = 'wikia';
|
||||
const INFOBOX_THEME_PREFIX = "portable-infobox-theme-";
|
||||
const DEFAULT_LAYOUT_NAME = 'default';
|
||||
const INFOBOX_THEME_PREFIX = 'portable-infobox-theme-';
|
||||
const INFOBOX_LAYOUT_PREFIX = 'portable-infobox-layout-';
|
||||
|
||||
private $markerNumber = 0;
|
||||
private $markers = [ ];
|
||||
private $supportedLayouts = [
|
||||
'default',
|
||||
'tabular'
|
||||
];
|
||||
|
||||
protected static $instance;
|
||||
|
||||
|
|
@ -63,7 +69,8 @@ class PortableInfoboxParserTagController extends WikiaController {
|
|||
$this->saveToParserOutput( $parser->getOutput(), $data );
|
||||
|
||||
$theme = $this->getThemeWithDefault( $params, $frame );
|
||||
return ( new PortableInfoboxRenderService() )->renderInfobox( $data, $theme );
|
||||
$layout = $this->getLayout( $params );
|
||||
return ( new PortableInfoboxRenderService() )->renderInfobox( $data, $theme, $layout );
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -128,6 +135,15 @@ class PortableInfoboxParserTagController extends WikiaController {
|
|||
( isset( $params[ 'theme' ] ) ? $params[ 'theme' ] : self::DEFAULT_THEME_NAME );
|
||||
}
|
||||
|
||||
private function getLayout( $params ) {
|
||||
$layoutName = isset( $params[ 'layout' ] ) ? $params[ 'layout' ] : false;
|
||||
if ( $layoutName && in_array( $layoutName, $this->supportedLayouts ) ) {
|
||||
//make sure no whitespaces, prevents side effects
|
||||
return self::INFOBOX_LAYOUT_PREFIX . $layoutName;
|
||||
}
|
||||
return self::INFOBOX_LAYOUT_PREFIX . self::DEFAULT_LAYOUT_NAME;
|
||||
}
|
||||
|
||||
/**
|
||||
* Function ensures that arrays are used for merging
|
||||
* @param PPFrame $frame
|
||||
|
|
@ -139,8 +155,6 @@ class PortableInfoboxParserTagController extends WikiaController {
|
|||
$namedArgs = isset( $namedArgs ) ? ( is_array( $namedArgs ) ? $namedArgs : [ $namedArgs ] ) : [ ];
|
||||
$args = $frame->getArguments();
|
||||
$args = isset( $args ) ? ( is_array( $args ) ? $args : [ $args ] ) : [ ];
|
||||
|
||||
return array_merge( $namedArgs, $args );
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@ class PortableInfoboxRenderService extends WikiaService {
|
|||
* @param array $infoboxdata
|
||||
* @return string - infobox HTML
|
||||
*/
|
||||
public function renderInfobox( array $infoboxdata, $theme ) {
|
||||
public function renderInfobox( array $infoboxdata, $theme, $layout ) {
|
||||
wfProfileIn( __METHOD__ );
|
||||
$infoboxHtmlContent = '';
|
||||
|
||||
|
|
@ -65,7 +65,7 @@ class PortableInfoboxRenderService extends WikiaService {
|
|||
}
|
||||
|
||||
if(!empty($infoboxHtmlContent)) {
|
||||
$output = $this->renderItem( 'wrapper', [ 'content' => $infoboxHtmlContent, 'theme' => $theme ] );
|
||||
$output = $this->renderItem( 'wrapper', [ 'content' => $infoboxHtmlContent, 'theme' => $theme, 'layout' => $layout ] );
|
||||
} else {
|
||||
$output = '';
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,12 @@
|
|||
@import 'skins/shared/color';
|
||||
@import 'skins/shared/mixins/columns';
|
||||
@import 'skins/shared/mixins/flexbox';
|
||||
|
||||
$infobox-width: 270px; // temporary value used to mach with Khal Drogo Infobox
|
||||
$infobox-margin: 15px;
|
||||
$infobox-item-margin: 5px;
|
||||
$infobox-background: mix($color-page, $color-links, 92%);
|
||||
$infobox-section-header-background: transparentize($color-links, 0.9);
|
||||
$infobox-section-header-background: transparentize($color-links, .9);
|
||||
|
||||
.portable-infobox {
|
||||
background-color: $infobox-background;
|
||||
|
|
@ -126,3 +127,32 @@ $infobox-section-header-background: transparentize($color-links, 0.9);
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.portable-infobox-layout-tabular {
|
||||
> .item-type-key-val,
|
||||
.item-type-group .item-type-key-val {
|
||||
@include flexbox;
|
||||
@include flex-direction(row);
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
|
||||
.portable-infobox-item-label {
|
||||
@include flex-basis($infobox-width / 3);
|
||||
line-height: 18px;
|
||||
margin-top: inherit;
|
||||
}
|
||||
|
||||
.portable-infobox-item-value {
|
||||
@include flex-basis($infobox-width * 2 / 3);
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.portable-infobox-item-margins {
|
||||
padding: $infobox-item-margin * 3 $infobox-item-margin * 2;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
<aside class="portable-infobox{{#theme}} {{theme}}{{/theme}}">{{{content}}}</aside>
|
||||
<aside class="portable-infobox{{#theme}} {{theme}}{{/theme}}{{#layout}} {{layout}}{{/layout}}">{{{content}}}</aside>
|
||||
|
|
|
|||
|
|
@ -129,4 +129,60 @@ class PortableInfoboxParserTagControllerTest extends WikiaBaseTest {
|
|||
PortableInfoboxParserTagController::INFOBOX_THEME_PREFIX . $expectedName
|
||||
) );
|
||||
}
|
||||
|
||||
/**
|
||||
* @dataProvider testGetLayoutDataProvider
|
||||
*/
|
||||
public function testGetLayout( $layout, $expectedOutput, $text, $message ) {
|
||||
$marker = $this->controller->renderInfobox( $text, $layout, $this->parser,
|
||||
$this->parser->getPreprocessor()->newFrame() )[ 0 ];
|
||||
$output = $this->controller->replaceMarkers( $marker );
|
||||
|
||||
$this->assertTrue( $this->checkClassName(
|
||||
$output,
|
||||
$expectedOutput,
|
||||
$message
|
||||
) );
|
||||
}
|
||||
|
||||
public function testGetLayoutDataProvider() {
|
||||
return [
|
||||
[
|
||||
'layout' => [ 'layout' => 'tabular' ],
|
||||
'expectedOutput' => 'portable-infobox-layout-tabular',
|
||||
'text' => '<data><default>test</default></data>',
|
||||
'message' => 'set tabular layout'
|
||||
],
|
||||
[
|
||||
'layout' => [ 'layout' => 'looool' ],
|
||||
'expectedOutput' => 'portable-infobox-layout-default',
|
||||
'text' => '<data><default>test</default></data>',
|
||||
'message' => 'invalid layout name'
|
||||
],
|
||||
[
|
||||
'layout' => [ 'layout' => '' ],
|
||||
'expectedOutput' => 'portable-infobox-layout-default',
|
||||
'text' => '<data><default>test</default></data>',
|
||||
'message' => 'layout is empty string'
|
||||
],
|
||||
[
|
||||
'layout' => [ 'layout' => 5 ],
|
||||
'expectedOutput' => 'portable-infobox-layout-default',
|
||||
'text' => '<data><default>test</default></data>',
|
||||
'message' => 'layout is an integer'
|
||||
],
|
||||
[
|
||||
'layout' => [ 'layout' => [] ],
|
||||
'expectedOutput' => 'portable-infobox-layout-default',
|
||||
'text' => '<data><default>test</default></data>',
|
||||
'message' => 'layout an empty table'
|
||||
],
|
||||
[
|
||||
'layout' => [],
|
||||
'expectedOutput' => 'portable-infobox-layout-default',
|
||||
'text' => '<data><default>test</default></data>',
|
||||
'message' => 'layout is not set'
|
||||
]
|
||||
];
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue