diff --git a/PortableInfoboxHooks.class.php b/PortableInfoboxHooks.class.php index 73b7b0a..93022a9 100644 --- a/PortableInfoboxHooks.class.php +++ b/PortableInfoboxHooks.class.php @@ -7,6 +7,12 @@ class PortableInfoboxHooks { return true; } + + public static function onBeforePageDisplayMobile( OutputPage $out, Skin $skin ) { + $out->addModules( 'ext.PortableInfobox.mobile' ); + + return true; + } public static function onImageServingCollectImages( &$imageNamesArray, $articleTitle ) { if ( $articleTitle ) { @@ -118,13 +124,4 @@ class PortableInfoboxHooks { return true; } - - public static function onArticleAsJsonBeforeEncode( &$text ) { - $tagController = PortableInfoboxParserTagController::getInstance(); - $tagController->moveFirstMarkerToTop( $text ); - - $text = $tagController->replaceMarkers( $text ); - - return true; - } } diff --git a/controllers/PortableInfoboxParserTagController.class.php b/controllers/PortableInfoboxParserTagController.class.php index f18557f..d089d3a 100644 --- a/controllers/PortableInfoboxParserTagController.class.php +++ b/controllers/PortableInfoboxParserTagController.class.php @@ -54,11 +54,7 @@ class PortableInfoboxParserTagController extends WikiaObject { * @return string */ public static function replaceInfoboxMarkers( Parser $parser, &$text ) { - global $wgArticleAsJson; - // The replacements for ArticleAsJson are handled in PortableInfoboxHooks::onArticleAsJsonBeforeEncode - if ( !$wgArticleAsJson ) { - $text = static::getInstance()->replaceMarkers( $text ); - } + $text = static::getInstance()->replaceMarkers( $text ); return true; } @@ -95,8 +91,7 @@ class PortableInfoboxParserTagController extends WikiaObject { $accentColor = $this->getColor( self::ACCENT_COLOR, $params, $frame ); $accentColorText = $this->getColor( self::ACCENT_COLOR_TEXT, $params, $frame ); - $renderService = \F::app()->checkSkin( 'wikiamobile' ) ? - new PortableInfoboxMobileRenderService() : new PortableInfoboxRenderService(); + $renderService = new PortableInfoboxRenderService(); return $renderService->renderInfobox( $data, implode( ' ', $themeList ), $layout, $accentColor, $accentColorText ); } diff --git a/extension.json b/extension.json index 96201aa..6d1dbc6 100644 --- a/extension.json +++ b/extension.json @@ -20,6 +20,11 @@ "ext.PortableInfobox": { "scripts": "js/PortableInfobox.js", "styles": "styles/PortableInfobox.less" + }, + "ext.PortableInfobox.mobile": { + "scripts": "js/PortableInfobox.js", + "styles": "styles/PortableInfobox.less", + "targets": "mobile" } }, "ResourceFileModulePaths": { @@ -40,7 +45,6 @@ "PortableInfoboxDataService": "services/PortableInfoboxDataService.class.php", "PortableInfoboxQueryService": "services/PortableInfoboxQueryService.class.php", "PortableInfoboxRenderService": "services/PortableInfoboxRenderService.class.php", - "PortableInfoboxMobileRenderService": "services/PortableInfoboxMobileRenderService.class.php", "PortableInfoboxErrorRenderService": "services/PortableInfoboxErrorRenderService.class.php", "Wikia\\PortableInfobox\\Parser\\ExternalParser": "services/Parser/ExternalParser.php", "Wikia\\PortableInfobox\\Parser\\SimpleParser": "services/Parser/SimpleParser.php", @@ -68,7 +72,6 @@ "PassThroughSanitizer": "services/Sanitizers/PassThroughSanitizer.php", "NodeTypeSanitizerInterface": "services/Sanitizers/NodeTypeSanitizerInterface.php", "NodeDataSanitizer": "services/Sanitizers/NodeDataSanitizer.php", - "NodeHeroImageSanitizer": "services/Sanitizers/NodeHeroImageSanitizer.php", "NodeHorizontalGroupSanitizer": "services/Sanitizers/NodeHorizontalGroupSanitizer.php", "NodeImageSanitizer": "services/Sanitizers/NodeImageSanitizer.php", "NodeTitleSanitizer": "services/Sanitizers/NodeTitleSanitizer.php", @@ -83,6 +86,7 @@ "ParserFirstCallInit": "PortableInfoboxParserTagController::parserTagInit", "AfterParserParseImageGallery": "PortableInfoboxHooks::onAfterParserParseImageGallery", "BeforePageDisplay": "PortableInfoboxHooks::onBeforePageDisplay", + "BeforePageDisplayMobile": "PortableInfoboxHooks::onBeforePageDisplayMobile", "ParserAfterTidy": "PortableInfoboxParserTagController::replaceInfoboxMarkers", "ImageServing::buildAndGetIndex": "PortableInfoboxHooks::onImageServingCollectImages", "wgQueryPages": "PortableInfoboxHooks::onWgQueryPages", @@ -90,8 +94,7 @@ "ArticlePurge": "PortableInfoboxHooks::onArticlePurge", "ArticleSave": "PortableInfoboxHooks::onArticleSave", "BacklinksPurge": "PortableInfoboxHooks::onBacklinksPurge", - "ArticleInsertComplete": "PortableInfoboxHooks::onArticleInsertComplete", - "ArticleAsJsonBeforeEncode": "PortableInfoboxHooks::onArticleAsJsonBeforeEncode" + "ArticleInsertComplete": "PortableInfoboxHooks::onArticleInsertComplete" }, "SpecialPages": { "AllInfoboxes": "AllinfoboxesQueryPage" diff --git a/services/Helpers/PortableInfoboxMustacheEngine.php b/services/Helpers/PortableInfoboxMustacheEngine.php index 54af097..33f9643 100644 --- a/services/Helpers/PortableInfoboxMustacheEngine.php +++ b/services/Helpers/PortableInfoboxMustacheEngine.php @@ -13,18 +13,12 @@ class PortableInfoboxMustacheEngine { 'title' => 'PortableInfoboxItemTitle.mustache', 'header' => 'PortableInfoboxItemHeader.mustache', 'image' => 'PortableInfoboxItemImage.mustache', - 'image-mobile' => 'PortableInfoboxItemImageMobile.mustache', - 'image-mobile-wikiamobile' => 'PortableInfoboxItemImageMobileWikiaMobile.mustache', 'data' => 'PortableInfoboxItemData.mustache', 'group' => 'PortableInfoboxItemGroup.mustache', 'smart-group' => 'PortableInfoboxItemSmartGroup.mustache', 'horizontal-group-content' => 'PortableInfoboxHorizontalGroupContent.mustache', 'navigation' => 'PortableInfoboxItemNavigation.mustache', - 'hero-mobile' => 'PortableInfoboxItemHeroMobile.mustache', - 'hero-mobile-wikiamobile' => 'PortableInfoboxItemHeroMobileWikiaMobile.mustache', - 'image-collection' => 'PortableInfoboxItemImageCollection.mustache', - 'image-collection-mobile' => 'PortableInfoboxItemImageCollectionMobile.mustache', - 'image-collection-mobile-wikiamobile' => 'PortableInfoboxItemImageCollectionMobileWikiaMobile.mustache' + 'image-collection' => 'PortableInfoboxItemImageCollection.mustache' ]; protected $templateEngine; diff --git a/services/Parser/Nodes/NodeImage.php b/services/Parser/Nodes/NodeImage.php index 147fe67..5eabaa5 100644 --- a/services/Parser/Nodes/NodeImage.php +++ b/services/Parser/Nodes/NodeImage.php @@ -32,20 +32,13 @@ class NodeImage extends Node { } public static function getTabberData( $html ) { - global $wgArticleAsJson; $data = array(); $doc = HtmlHelper::createDOMDocumentFromText( $html ); $sxml = simplexml_import_dom( $doc ); $divs = $sxml->xpath( '//div[@class=\'tabbertab\']' ); foreach ( $divs as $div ) { - if ( $wgArticleAsJson ) { - if ( preg_match( '/data-ref="([^"]+)"/', $div->asXML(), $out ) ) { - $data[] = array( 'label' => (string) $div['title'], 'title' => \ArticleAsJson::$media[$out[1]]['title'] ); - } - } else { - if ( preg_match( '/data-(video|image)-key="([^"]+)"/', $div->asXML(), $out ) ) { - $data[] = array( 'label' => (string) $div['title'], 'title' => $out[2] ); - } + if ( preg_match( '/data-(video|image)-key="([^"]+)"/', $div->asXML(), $out ) ) { + $data[] = array( 'label' => (string) $div['title'], 'title' => $out[2] ); } } return $data; diff --git a/services/PortableInfoboxMobileRenderService.class.php b/services/PortableInfoboxMobileRenderService.class.php deleted file mode 100644 index a133de1..0000000 --- a/services/PortableInfoboxMobileRenderService.class.php +++ /dev/null @@ -1,174 +0,0 @@ -splitOfHeroData( $infoboxdata, [ 'hero' => [ ], 'infobox' => [ ] ] ); - - if ( !empty( $items['hero'] ) ) { - $infoboxHtmlContent = $this->renderInfoboxHero( $items['hero'] ) . $this->renderChildren( $items['infobox'] ); - } else { - $infoboxHtmlContent = $this->renderChildren( $infoboxdata ); - } - - if ( !empty( $infoboxHtmlContent ) ) { - $output = $this->renderItem( 'wrapper', [ 'content' => $infoboxHtmlContent, 'isMercury' => $this->isMercury() ] ); - } else { - $output = ''; - } - - // Since portable infoboxes are rendered within ParserAfterTidy Hook, we can not be sure if this method will be - // invoked before or after infobox is rendered. If this method does not process PI html, markers related to - // template type parsing may be included in the result html and this may break our mobile application. - // See XW-4827 - TemplateTypesParser::onParserAfterTidy( null, $output ); - - \Wikia\PortableInfobox\Helpers\PortableInfoboxDataBag::getInstance()->setFirstInfoboxAlredyRendered( true ); - - return $output; - } - - private function splitOfHeroData( $items, $result ) { - foreach ( $items as $item ) { - $data = $item['data']; - $type = $item['type']; - - if ( $this->isValidHeroDataItem( $item, $result['hero'] ) ) { - $result['hero'][$type] = $data; - } elseif ( $type === 'group' ) { - // go deeper to find nested hero data items - $groupResult = $this->splitOfHeroData( $data['value'], [ 'hero' => $result['hero'], 'infobox' => [ ] ] ); - // make sure other elements structure stays the same - $result['hero'] = $groupResult['hero']; - $item['data']['value'] = $groupResult['infobox']; - $result['infobox'][] = $item; - } else { - $result['infobox'][] = $item; - } - } - - return $result; - } - - protected function renderImage( $data ) { - $images = [ ]; - $count = count( $data ); - $helper = $this->getImageHelper(); - - for ( $i = 0; $i < $count; $i++ ) { - $data[$i]['context'] = self::MEDIA_CONTEXT_INFOBOX; - $data[$i] = $helper->extendImageData( $data[$i], self::MOBILE_THUMBNAIL_WIDTH ); - - if ( !!$data[$i] ) { - $images[] = $data[$i]; - } - } - - if ( count( $images ) === 0 ) { - return ''; - } - - // use different template for wikiamobile - if ( !$this->isMercury() ) { - // always display only the first image on WikiaMobile - $data = $images[0]; - $templateName = 'image-mobile-wikiamobile'; - } else { - if ( count( $images ) === 1 ) { - $data = $images[0]; - $templateName = 'image-mobile'; - } else { - // more than one image means image collection - $data = $helper->extendImageCollectionData( $images ); - $templateName = 'image-collection-mobile'; - } - } - - $data = SanitizerBuilder::createFromType( 'image' )->sanitize( $data ); - - return parent::render( $templateName, $data ); - } - - protected function renderTitle( $data ) { - return $this->render( 'title', $data ); - } - - protected function renderHeader( $data ) { - return $this->render( 'header', $data ); - } - - protected function render( $type, array $data ) { - $data = SanitizerBuilder::createFromType( $type )->sanitize( $data ); - - return parent::render( $type, $data ); - } - - /** - * renders infobox hero component - * - * @param array $data - infobox hero component data - * - * @return string - */ - private function renderInfoboxHero( $data ) { - $helper = $this->getImageHelper(); - $template = ''; - - // In mobile-wiki SPA content of the first infobox's hero module has been moved to the article header. - $firstInfoboxAlredyRendered = \Wikia\PortableInfobox\Helpers\PortableInfoboxDataBag::getInstance() - ->isFirstInfoboxAlredyRendered(); - - if ( isset( $data['image'] ) ) { - $image = $data['image'][0]; - $image['context'] = self::MEDIA_CONTEXT_INFOBOX_HERO_IMAGE; - $image = $helper->extendImageData( $image, self::MOBILE_THUMBNAIL_WIDTH ); - $data['image'] = $image; - - if ( !$this->isMercury() ) { - return $this->renderItem( 'hero-mobile-wikiamobile', $data ); - } elseif ( $firstInfoboxAlredyRendered ) { - return $this->renderItem( 'hero-mobile', $data ); - } - } elseif ( !$this->isMercury() || $firstInfoboxAlredyRendered ) { - return $this->renderItem( 'title', $data['title'] ); - } - - return !empty( $template ) ? $this->renderItem( $template, $data['title'] ) : ''; - } - - /** - * checks if infobox data item is valid hero component data. - * - * @param array $item - infobox data item - * @param array $heroData - hero component data - * - * @return bool - */ - private function isValidHeroDataItem( $item, $heroData ) { - $type = $item['type']; - - return ( $type === 'title' && !isset( $heroData['title'] ) ) || - ( $type === 'image' && !isset( $heroData['image'] ) && - count( $item['data'] ) === 1 ); - } - - private function isMercury() { - global $wgArticleAsJson; - - return !empty( $wgArticleAsJson ); - } -} diff --git a/services/Sanitizers/NodeHeroImageSanitizer.php b/services/Sanitizers/NodeHeroImageSanitizer.php deleted file mode 100644 index dcf2e62..0000000 --- a/services/Sanitizers/NodeHeroImageSanitizer.php +++ /dev/null @@ -1,24 +0,0 @@ -sanitizeElementData( $data[ 'title' ][ 'value' ] ); - } - if ( !empty( $data[ 'image' ][ 'caption' ] ) ) { - $data[ 'image' ]['caption'] = $this->sanitizeElementData( $data[ 'image' ]['caption'] ); - } - - return $data; - } -} diff --git a/services/Sanitizers/SanitizerBuilder.php b/services/Sanitizers/SanitizerBuilder.php index 02ad202..a08cae5 100644 --- a/services/Sanitizers/SanitizerBuilder.php +++ b/services/Sanitizers/SanitizerBuilder.php @@ -18,9 +18,6 @@ class SanitizerBuilder { return new NodeTitleSanitizer(); case 'image': return new NodeImageSanitizer(); - case 'hero-mobile': - case 'hero-mobile-wikiamobile': - return new NodeHeroImageSanitizer(); default: return new PassThroughSanitizer(); } diff --git a/styles/PortableInfobox.less b/styles/PortableInfobox.less index e3fa5d5..e684303 100644 --- a/styles/PortableInfobox.less +++ b/styles/PortableInfobox.less @@ -11,57 +11,62 @@ background: var(--pi-background); clear: right; float: right; + font-size: .85em; margin: 0 0 var(--pi-margin) var(--pi-margin); width: var(--pi-width); + + .pi-border-color { + border-color: var(--pi-border-color); + } + .pi-secondary-background { + background-color: var(--pi-secondary-background); + } + .pi-secondary-font { + margin: 0; + padding: 0; + } + .pi-item-spacing { + padding: var(--pi-item-spacing); + } + + .pi-title { + border: 0; + margin: 0; + font-family: inherit; + font-size: 1.75em; + line-height: 1.5; + } .pi-header { border: 0; margin: 0; font-family: inherit; + font-size: 1.2em; + font-weight: bold; + line-height: 1.3; } - .pi-title { - border: 0; + .pi-image { margin: 0; - font-size: 18px; - line-height: 28px; + max-width: 100%; + text-align: center; } .pi-data-label { - padding-top: 0; + font-size: inherit; + line-height: inherit; } .pi-data-value { - >* { + >:not(ul), li { margin: 0; } - li { - margin: 0; - line-height: 19px; - } - ol, ul { + ol { list-style-position: inside; } } >.pi-item:last-child { border-bottom: 0; } - .pi-secondary-font { - font-size: 12px; - font-weight: bold; - line-height: 18px; - margin-top: 0; - } - .pi-item-spacing { - padding: var(--pi-item-spacing); - } } .pi { - &-secondary-background { - background-color: var(--pi-secondary-background); - } - &-border-color { - border-color: var(--pi-border-color); - } &-image { - text-align: center; - margin: 0; &-thumbnail{ max-width: var(--pi-width); height: auto; @@ -105,9 +110,8 @@ -ms-hyphens: auto; hyphens: auto; color: #808080; - font-size: 12px; + font-size: 1em; font-style: italic; - text-align: left; word-wrap: break-word; } &-data { @@ -139,19 +143,17 @@ word-wrap: break-word; } &-value { + -ms-flex: 1; + -webkit-flex: 1; + -moz-flex: 1; + flex: 1; -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto; - font-size: 12px; - line-height: 18px; padding-left: 0; word-break: break-word; &:not(:first-child) { - -ms-flex-preferred-size: 180px; - -webkit-flex-basis: 180px; - -moz-flex-basis: 180px; - flex-basis: 180px; padding-left: 10px; } } @@ -171,6 +173,9 @@ .pi-header { text-align: left; } + thead + tbody .pi-data-value { + padding-top: 0; + } .pi-horizontal-group-item { vertical-align: top; &:not(:first-child) { @@ -184,11 +189,7 @@ } &-smart { &-data { - &-label:not(:first-child) { - border-color: var(--pi-border-color); - border-left-style: solid; - border-left-width: 1px; - } + &-label:not(:first-child), &-value:not(:first-child) { border-color: var(--pi-border-color); border-left-style: solid; @@ -204,11 +205,14 @@ &:last-child { border-bottom: 0; } - &-body { - display: flex; - } &-head { display: flex; + & + .pi-smart-group-body .pi-data-value { + padding-top: 0; + } + } + &-body { + display: flex; } .pi-smart-data-label { padding-bottom: 0; @@ -225,54 +229,94 @@ .pi-data { display: block; } - .pi-data-value { + .pi-data-value:not(:only-child) { padding-left: 10px; } } - &-collapse { - .pi-header { - &:first-child { - padding-right: 25px; - position: relative; - &::after { - border-color: currentColor; - border-style: solid; - border-width: 2px 2px 0 0; - content: ''; - display: block; - height: 5px; - right: 10px; - position: absolute; - top: 50%; - width: 5px; - -webkit-transform: rotate(-45deg); - transform: rotate(-45deg); - margin-top: -3px; - } - } + +} +@media screen and (min-width: 720px) { + .pi-collapse .pi-header:first-child { + padding-right: 25px; + position: relative; + &::after { + border-color: currentColor; + border-style: solid; + border-width: 2px 2px 0 0; + content: ''; + display: block; + height: 5px; + right: 10px; + position: absolute; + top: 50%; + width: 5px; + -webkit-transform: rotate(-45deg); + transform: rotate(-45deg); + margin-top: -3px; } - &-closed { - .pi-header:first-child::after { - transform: rotate(135deg); - -webkit-transform: rotate(135deg); - -moz-transform: rotate(135deg); - -ms-transform: rotate(135deg); - margin-top: -5px; - } - > :nth-child(n+2) { + } + .pi-collapse-closed { + .pi-header:first-child::after { + transform: rotate(135deg); + -webkit-transform: rotate(135deg); + -moz-transform: rotate(135deg); + -ms-transform: rotate(135deg); + margin-top: -5px; + } + > :nth-child(n+2) { + display: none; + } + .pi-horizontal-group { + thead { display: none; } - .pi-horizontal-group { - thead { - display: none; - } - tbody { - display: none; - } + tbody { + display: none; } } } } + +@media screen and (max-width: 720px) { + .portable-infobox { + float: none; + width: initial; + font-size: initial; + margin: 0; + + .skin-minerva & { + margin: 0 -16px; + } + + .pi-title { + text-align: center; + } + } +} + +.skin-minerva { + .pi-caption { + margin: var(--pi-item-spacing); + } + + .pi-horizontal-group { + display: table; + margin: 0; + width: 100% !important; + + .pi-header { + display: table-caption; + } + } + + .pi-navigation { + box-sizing: border-box; + width: 100%; + float: none; + } +} + +/* PI errors */ p.pi-error-info { background-color: #f33; color: #fff; diff --git a/templates/PortableInfoboxItemData.mustache b/templates/PortableInfoboxItemData.mustache index 73ef581..69c2586 100644 --- a/templates/PortableInfoboxItemData.mustache +++ b/templates/PortableInfoboxItemData.mustache @@ -1,10 +1,6 @@ -{{! - This template is linked with of mercury/front/templates/main/components/infobox-builder-item-data.hbs - Changing this template requires modifying the other in mercury repo. -}}
{{#label}}

{{{label}}}

{{/label}}
{{{value}}}
-
+ \ No newline at end of file diff --git a/templates/PortableInfoboxItemHeroMobile.mustache b/templates/PortableInfoboxItemHeroMobile.mustache deleted file mode 100644 index fd63490..0000000 --- a/templates/PortableInfoboxItemHeroMobile.mustache +++ /dev/null @@ -1,45 +0,0 @@ -
- {{#title}} -
-

{{{value}}}

- {{#image.caption}} -

{{{image.caption}}}

- {{/image.caption}} -
- {{/title}} - {{#image}} -
- - {{title}} - - {{#isVideo}} -
- - - - - - - - - - - - - -
- {{/isVideo}} - -
- {{/image}} -
diff --git a/templates/PortableInfoboxItemHeroMobileWikiaMobile.mustache b/templates/PortableInfoboxItemHeroMobileWikiaMobile.mustache deleted file mode 100644 index 387d97f..0000000 --- a/templates/PortableInfoboxItemHeroMobileWikiaMobile.mustache +++ /dev/null @@ -1,16 +0,0 @@ -
- {{#title}} -
-

{{{value}}}

- {{#image.caption}} -

{{{image.caption}}}

- {{/image.caption}} -
- {{/title}} - {{#image}} - {{alt}} - {{/image}} -
diff --git a/templates/PortableInfoboxItemImage.mustache b/templates/PortableInfoboxItemImage.mustache index 395e531..96795f7 100644 --- a/templates/PortableInfoboxItemImage.mustache +++ b/templates/PortableInfoboxItemImage.mustache @@ -1,7 +1,3 @@ -{{! - This template is linked with of mercury/front/templates/main/components/infobox-builder-item-image.hbs - Changing this template requires modifying the other in mercury repo. -}}
@@ -22,4 +18,4 @@ {{/isVideo}} {{#caption}}
{{{caption}}}
{{/caption}} -
+ \ No newline at end of file diff --git a/templates/PortableInfoboxItemImageCollectionMobile.mustache b/templates/PortableInfoboxItemImageCollectionMobile.mustache deleted file mode 100644 index e8db508..0000000 --- a/templates/PortableInfoboxItemImageCollectionMobile.mustache +++ /dev/null @@ -1,51 +0,0 @@ -
- - {{#images}} -
- - {{title}} - - {{#isVideo}} -
- - - - - - - - - - - - - -
- {{/isVideo}} - - {{#caption}}

{{{caption}}}

{{/caption}} -
- {{^isFirst}} - - {{/isFirst}} - {{^isLast}} - - {{/isLast}} -
-
- {{/images}} -
diff --git a/templates/PortableInfoboxItemImageCollectionMobileWikiaMobile.mustache b/templates/PortableInfoboxItemImageCollectionMobileWikiaMobile.mustache deleted file mode 100644 index d7e8066..0000000 --- a/templates/PortableInfoboxItemImageCollectionMobileWikiaMobile.mustache +++ /dev/null @@ -1,6 +0,0 @@ -
- {{alt}} -
diff --git a/templates/PortableInfoboxItemImageMobile.mustache b/templates/PortableInfoboxItemImageMobile.mustache deleted file mode 100644 index e627fa4..0000000 --- a/templates/PortableInfoboxItemImageMobile.mustache +++ /dev/null @@ -1,39 +0,0 @@ -
-
- - {{title}} - - {{#caption}} -
{{caption}}
- {{/caption}} - {{#isVideo}} -
- - - - - - - - - - - - - -
- {{/isVideo}} - -
-
diff --git a/templates/PortableInfoboxItemImageMobileWikiaMobile.mustache b/templates/PortableInfoboxItemImageMobileWikiaMobile.mustache deleted file mode 100644 index 2e81f1c..0000000 --- a/templates/PortableInfoboxItemImageMobileWikiaMobile.mustache +++ /dev/null @@ -1,6 +0,0 @@ -
- {{alt}} -
diff --git a/templates/PortableInfoboxItemTitle.mustache b/templates/PortableInfoboxItemTitle.mustache index e3dae03..7a4963b 100644 --- a/templates/PortableInfoboxItemTitle.mustache +++ b/templates/PortableInfoboxItemTitle.mustache @@ -1,5 +1 @@ -{{! - This template is linked with of mercury/front/templates/main/components/infobox-builder-item-title.hbs - Changing this template requires modifying the other in mercury repo. -}} -

{{{value}}}

+

{{{value}}}

\ No newline at end of file diff --git a/templates/PortableInfoboxWrapper.mustache b/templates/PortableInfoboxWrapper.mustache index d2b993c..250ca19 100644 --- a/templates/PortableInfoboxWrapper.mustache +++ b/templates/PortableInfoboxWrapper.mustache @@ -1,5 +1 @@ -{{! - This template is linked with of mercury/front/templates/main/components/infobox-builder-item-wrapper.hbs - Changing this template requires modifying the other in mercury repo. -}} - + \ No newline at end of file diff --git a/tests/PortableInfoboxMobileRenderServiceTest.php b/tests/PortableInfoboxMobileRenderServiceTest.php deleted file mode 100644 index f54216d..0000000 --- a/tests/PortableInfoboxMobileRenderServiceTest.php +++ /dev/null @@ -1,853 +0,0 @@ -setupFile = dirname( __FILE__ ) . '/../PortableInfobox.setup.php'; - parent::setUp(); - - if ( !extension_loaded( 'mustache' ) ) { - $this->markTestSkipped( '"mustache" PHP extension needs to be loaded!' ); - } - } - - private function mockInfoboxImagesHelper( $input ) { - $extendImageData = isset( $input['extendImageData'] ) ? $input['extendImageData'] : null; - - $mock = $this->getMockBuilder( 'Wikia\PortableInfobox\Helpers\PortableInfoboxImagesHelper' ) - ->setMethods( [ 'extendImageData', 'getFileWidth' ] ) - ->getMock(); - $mock->expects( $this->any() ) - ->method( 'extendImageData' ) - ->will( $this->returnValue( $extendImageData ) ); - $mock->expects( $this->any() ) - ->method( 'getFileWidth' ) - ->will( $this->returnValue( $extendImageData['width'] ) ); - - $this->mockClass( 'Wikia\PortableInfobox\Helpers\PortableInfoboxImagesHelper', $mock ); - } - - /** - * @param $html - * @return string - */ - private function normalizeHTML( $html ) { - if ( empty( $html ) ) { - return ''; - } - - $config = [ - 'indent' => true, - 'output-xhtml' => false - ]; - $tidy = new tidy(); - $tidy->parseString($html, $config); - $tidy->cleanRepair(); - - return preg_replace( '/>\s+/', '>', (string) $tidy ); - } - - /** - * @dataProvider renderInfoboxDataProvider - */ - public function testRenderInfobox( $input, $expectedOutput, $description, $mockParams ) { - $wrapper = new \Wikia\Util\GlobalStateWrapper( [ 'wgArticleAsJson' => $mockParams['isMercury'] ?? true ] ); - $this->mockInfoboxImagesHelper( $mockParams ); - - $infoboxRenderService = new PortableInfoboxMobileRenderService(); - $actualOutput = $wrapper->wrap( function () use ( $infoboxRenderService, $input ) { - return $infoboxRenderService->renderInfobox( $input, '', '', '', '' ); - } ); - $expectedHtml = $this->normalizeHTML( $expectedOutput ); - $actualHtml = $this->normalizeHTML( $actualOutput ); - - $this->assertEquals( $expectedHtml, $actualHtml, $description ); - } - - public function renderInfoboxDataProvider() { - return [ - [ - 'input' => [ ], - 'output' => '', - 'description' => 'Empty data should yield no infobox markup', - 'mockParams' => [ ] - ], - [ - 'input' => [ - [ - 'type' => 'title', - 'data' => [ - 'value' => 'Test Title' - ] - ] - ], - 'output' => '', - 'description' => 'Only title', - 'mockParams' => [ ] - ], - [ - 'input' => [ - [ - 'type' => 'navigation', - 'data' => [ - 'value' => 'navigation value', - ] - ] - ], - 'output' => '', - 'description' => 'navigation only', - 'mockParams' => [ ] - ], - [ - 'input' => [ - [ - 'type' => 'data', - 'data' => [ - 'label' => 'test label', - 'value' => 'test value' - ] - ] - ], - 'output' => '', - 'description' => 'Only pair', - 'mockParams' => [ ] - ], - [ - 'input' => [ - [ - 'type' => 'title', - 'data' => [ - 'value' => 'Test Title' - ] - ], - [ - 'type' => 'image', - 'data' => [ - [ - 'alt' => 'image alt', - 'url' => 'http://image.jpg', - 'name' => 'image', - 'key' => 'image', - 'isVideo' => false - ] - ] - ], - [ - 'type' => 'data', - 'data' => [ - 'label' => 'test label', - 'value' => 'test value' - ] - ] - ], - 'output' => '', - 'description' => 'Simple infobox with title, image and key-value pair', - 'mockParams' => [ - 'extendImageData' => [ - 'alt' => 'image alt', - 'url' => 'http://image.jpg', - 'name' => 'test1', - 'key' => 'test1', - 'ref' => 1, - 'width' => '400', - 'height' => '200', - 'originalWidth' => '400', - 'originalHeight' => '200', - 'thumbnail' => 'http://image.jpg', - 'thumbnail2x' => 'http://image2x.jpg', - 'media-type' => 'image', - 'isVideo' => false - ] - ] - ], - [ - 'input' => [ - [ - 'type' => 'title', - 'data' => [ - 'value' => 'Test Title' - ] - ], - [ - 'type' => 'image', - 'data' => [ ] - ], - [ - 'type' => 'data', - 'data' => [ - 'label' => 'test label', - 'value' => 'test value' - ] - ] - ], - 'output' => '', - 'description' => 'Simple infobox with title, INVALID image and key-value pair', - 'mockParams' => [ ] - ], - [ - 'input' => [ - [ - 'type' => 'title', - 'data' => [ - 'value' => 'Test Title' - ] - ], - [ - 'type' => 'data', - 'data' => [ - 'label' => 'test label', - 'value' => 'test value' - ] - ] - ], - 'output' => '', - 'description' => 'Simple infobox with title, empty image and key-value pair', - 'mockParams' => [ ] - ], - [ - 'input' => [ - [ - 'type' => 'title', - 'data' => [ - 'value' => 'Test Title' - ] - ], - [ - 'type' => 'group', - 'data' => [ - 'value' => [ - [ - 'type' => 'header', - 'data' => [ - 'value' => 'Test Header' - ] - ], - [ - 'type' => 'data', - 'data' => [ - 'label' => 'test label', - 'value' => 'test value' - ] - ], - [ - 'type' => 'data', - 'data' => [ - 'label' => 'test label', - 'value' => 'test value' - ] - ] - ], - 'layout' => 'default', - 'collapse' => null, - 'row-items' => null - ] - ] - ], - 'output' => '', - 'description' => 'Infobox with title, group with header and two key-value pairs', - 'mockParams' => [ ] - ], - [ - 'input' => [ - [ - 'type' => 'group', - 'data' => [ - 'value' => [ - [ - 'type' => 'header', - 'data' => [ - 'value' => 'Test header' - ] - ], - [ - 'type' => 'data', - 'data' => [ - 'label' => 'test label', - 'value' => 'test value' - ] - ], - [ - 'type' => 'data', - 'data' => [ - 'label' => 'test label', - 'value' => 'test value' - ] - ] - ], - 'layout' => 'horizontal', - 'collapse' => null, - 'row-items' => null - ] - ] - ], - 'output' => '', - 'description' => 'Infobox with horizontal group', - 'mockParams' => [ - 'createHorizontalGroupData' => [ - 'header' => 'Test header', - 'labels' => [ 'test label', 'test label' ], - 'values' => [ 'test value', 'test value' ], - 'renderLabels' => true - ] - ] - ], - [ - 'input' => [ - [ - 'type' => 'group', - 'data' => [ - 'value' => [ - [ - 'type' => 'data', - 'data' => [ - 'label' => '', - 'value' => 'test value' - ] - ], - [ - 'type' => 'data', - 'data' => [ - 'label' => '', - 'value' => 'test value' - ] - ] - ], - 'layout' => 'horizontal', - 'collapse' => null, - 'row-items' => null - ] - ] - ], - 'output' => '', - 'description' => 'Infobox with horizontal group without header and labels', - 'mockParams' => [ - 'createHorizontalGroupData' => [ - 'labels' => [ '', '' ], - 'values' => [ 'test value', 'test value' ], - 'renderLabels' => false - ] - ] - ], - [ - 'input' => [ - [ - 'type' => 'navigation', - 'data' => [ - 'value' => '

Links

' - ] - ] - ], - 'output' => '', - 'description' => 'Infobox with navigation', - 'mockParams' => [ ] - ], - [ - 'input' => [ - [ - 'type' => 'image', - 'data' => [ - [ - 'alt' => 'image alt', - 'url' => 'http://image.jpg', - 'ref' => 1, - 'name' => 'test1', - 'key' => 'test1', - 'isVideo' => false - ] - ] - ] - ], - 'output' => '', - 'description' => 'WikiaMobile: Only image. Image is not small- should render hero.', - 'mockParams' => [ - 'isMercury' => false, - 'extendImageData' => [ - 'alt' => 'image alt', - 'url' => 'http://image.jpg', - 'name' => 'test1', - 'key' => 'test1', - 'ref' => 1, - 'width' => '400', - 'height' => '200', - 'originalWidth' => '400', - 'originalHeight' => '200', - 'thumbnail' => 'http://image.jpg', - 'thumbnail2x' => 'http://image2x.jpg', - 'media-type' => 'image', - 'isVideo' => false - ] - ] - ], - [ - 'input' => [ - [ - 'type' => 'title', - 'data' => [ - 'value' => 'Test Title' - ] - ], - [ - 'type' => 'image', - 'data' => [ - [ - 'url' => 'http://image.jpg', - 'name' => 'test1', - 'key' => 'test1', - 'ref' => 44, - 'isVideo' => false - ] - ] - ] - ], - 'output' => '', - 'description' => 'WikiaMobile: Infobox with full hero module with title with HTML tags', - 'mockParams' => [ - 'isMercury' => false, - 'extendImageData' => [ - 'url' => 'http://image.jpg', - 'name' => 'test1', - 'key' => 'test1', - 'ref' => 44, - 'width' => '400', - 'height' => '200', - 'originalWidth' => '400', - 'originalHeight' => '200', - 'thumbnail' => 'thumbnail.jpg', - 'thumbnail2x' => 'thumbnail2x.jpg', - 'isVideo' => false, - 'media-type' => 'image' - ] - ] - ], - [ - 'input' => [ - [ - 'type' => 'image', - 'data' => [ - [ - 'alt' => 'image alt', - 'url' => 'http://image.jpg', - 'ref' => 1, - 'name' => 'test1', - 'key' => 'test1', - 'isVideo' => false - ] - ] - ] - ], - 'output' => '', - 'description' => 'Mercury: Only image. Image is not small- should render hero.', - 'mockParams' => [ - 'extendImageData' => [ - 'alt' => 'image alt', - 'url' => 'http://image.jpg', - 'name' => 'test1', - 'key' => 'test1', - 'ref' => 1, - 'width' => '400', - 'height' => '200', - 'originalWidth' => '400', - 'originalHeight' => '200', - 'thumbnail' => 'http://image.jpg', - 'thumbnail2x' => 'http://image2x.jpg', - 'media-type' => 'image', - 'isVideo' => false, - 'mercuryComponentAttrs' => json_encode( [ - 'itemContext' => 'portable-infobox', - 'ref' => 1 - ] ) - ] - ] - ], - [ - 'input' => [ - [ - 'type' => 'title', - 'data' => [ - 'value' => 'Test Title' - ] - ], - [ - 'type' => 'image', - 'data' => [ - [ - 'url' => 'http://image.jpg', - 'name' => 'test1', - 'key' => 'test1', - 'ref' => 44, - 'isVideo' => false - ] - ] - ] - ], - 'output' => '', - 'description' => 'Mercury: Infobox with full hero module with title with HTML tags', - 'mockParams' => [ - 'extendImageData' => [ - 'url' => 'http://image.jpg', - 'name' => 'test1', - 'key' => 'test1', - 'ref' => 44, - 'width' => '400', - 'height' => '200', - 'originalWidth' => '400', - 'originalHeight' => '200', - 'thumbnail' => 'thumbnail.jpg', - 'thumbnail2x' => 'thumbnail2x.jpg', - 'isVideo' => false, - 'media-type' => 'image', - 'mercuryComponentAttrs' => json_encode( [ - 'itemContext' => 'portable-infobox', - 'ref' => 44 - ] ) - ] - ] - ], - [ - 'input' => [ - [ - 'type' => 'data', - 'data' => [ - 'label' => 'Test 1', - 'value' => 'test value 1' - ] - ], - [ - 'type' => 'title', - 'data' => [ - 'value' => 'Test Title' - ] - ], - [ - 'type' => 'group', - 'data' => [ - 'value' => [ - [ - 'type' => 'header', - 'data' => [ - 'value' => 'Test Header' - ] - ], - [ - 'type' => 'data', - 'data' => [ - 'label' => 'Test 2', - 'value' => 'test value 2' - ] - ], - [ - 'type' => 'image', - 'data' => [ - [ - 'url' => 'http://image.jpg', - 'name' => 'test1', - 'key' => 'test1', - 'ref' => 44, - 'isVideo' => false - ] - ] - ], - [ - 'type' => 'data', - 'data' => [ - 'label' => 'Test 3', - 'value' => 'test value 3' - ] - ] - ], - 'layout' => null, - 'collapse' => null, - 'row-items' => null - ] - ] - ], - 'output' => '', - 'description' => 'Mercury: Infobox with valid hero data partially nested in group', - 'mockParams' => [ - 'extendImageData' => [ - 'url' => 'http://image.jpg', - 'name' => 'test1', - 'key' => 'test1', - 'ref' => 44, - 'width' => '400', - 'height' => '200', - 'originalWidth' => '400', - 'originalHeight' => '200', - 'thumbnail' => 'thumbnail.jpg', - 'thumbnail2x' => 'thumbnail2x.jpg', - 'isVideo' => false, - 'media-type' => 'image', - 'mercuryComponentAttrs' => json_encode( [ - 'itemContext' => 'portable-infobox', - 'ref' => 44 - ] ) - ] - ] - ], - [ - 'input' => [ - [ - 'type' => 'data', - 'data' => [ - 'label' => 'Test 1', - 'value' => 'test value 1' - ] - ], - [ - 'type' => 'title', - 'data' => [ - 'value' => 'Test Title' - ] - ], - [ - 'type' => 'group', - 'data' => [ - 'value' => [ - [ - 'type' => 'header', - 'data' => [ - 'value' => 'Test Header' - ] - ], - [ - 'type' => 'data', - 'data' => [ - 'label' => 'Test 2', - 'value' => 'test value 2' - ] - ], - [ - 'type' => 'image', - 'data' => [ - [ - 'url' => 'http://image.jpg', - 'name' => 'test1', - 'key' => 'test1', - 'ref' => 44, - 'isVideo' => false - ] - ] - ], - [ - 'type' => 'data', - 'data' => [ - 'label' => 'Test 3', - 'value' => 'test value 3' - ] - ] - ], - 'layout' => null, - 'collapse' => null, - 'row-items' => null - ] - ] - ], - 'output' => '', - 'description' => 'Mercury: Infobox with invalid hero data partially nested in group', - 'mockParams' => [ - 'extendImageData' => [ - 'url' => 'http://image.jpg', - 'name' => 'test1', - 'key' => 'test1', - 'ref' => 44, - 'width' => '200', - 'height' => '200', - 'originalWidth' => '400', - 'originalHeight' => '200', - 'thumbnail' => 'thumbnail.jpg', - 'thumbnail2x' => 'thumbnail2x.jpg', - 'isVideo' => false, - 'media-type' => 'image', - 'mercuryComponentAttrs' => json_encode( [ - 'itemContext' => 'portable-infobox', - 'ref' => 44 - ] ) - ] - ] - ] - ]; - } -} diff --git a/tests/sanitizers/NodeHeroImageSanitizerTest.php b/tests/sanitizers/NodeHeroImageSanitizerTest.php deleted file mode 100644 index 56ae74b..0000000 --- a/tests/sanitizers/NodeHeroImageSanitizerTest.php +++ /dev/null @@ -1,143 +0,0 @@ -setupFile = dirname( __FILE__ ) . '/../../PortableInfobox.setup.php'; - - $this->sanitizer = SanitizerBuilder::createFromType('hero-mobile'); - parent::setUp(); - } - - /** - * @param $data - * @param $expected - * @dataProvider sanitizeDataProvider - */ - public function testSanitize( $data, $expected ) { - $this->assertEquals( - $expected, - $this->sanitizer->sanitize( $data ) - ); - } - - public function sanitizeDataProvider() { - return [ - [ - [ 'title' => [ 'value' => 'Test Title' ] ], - [ 'title' => [ 'value' => 'Test Title' ] ] - ], - [ - [ 'title' => [ 'value' => 'Real world DBGT Logotitle example' ] ] , - [ 'title' => [ 'value' => 'Real world title example' ] ] - ], - [ - [ 'title' => [ 'value' => 'Test Title with small tag, span tag and tag' ] ], - [ 'title' => [ 'value' => 'Test Title with small tag, span tag and tag' ] ] - ], - [ - [ 'title' => [ 'value' => 'All Stats +2' ] ], - [ 'title' => [ 'value' => '' ] ], - ], - [ - [ 'title' => [ 'value' => '
AMERICA'S TEST KITCHEN SEASON 9

AMERICA'S TEST KITCHEN SEASON 9

' ] ], - [ 'title' => [ 'value' => 'AMERICA'S TEST KITCHEN SEASON 9' ] ] - ], - [ - [ 'title' => [ 'value' => '[1]' ] ], - [ 'title' => [ 'value' => '[1]' ] ] - ], - [ - [ 'title' => [ 'value' => '' ] ], - [ 'title' => [ 'value' => '' ] ] - ], - [ - [ 'title' => [ 'value' => '' ] ], - [ 'title' => [ 'value' => '1 2 3' ] ] - ], - [ - [ 'title' => [ 'value' => '
  1. 1 -
  2. 2 -
    1. 2.1 -
    -
' ] ], - [ 'title' => [ 'value' => '1 2 2.1' ] ] - ], - [ - [ 'title' => [ 'value' => 'Próxima' ] ], - [ 'title' => [ 'value' => 'Próxima' ] ] - ], - [ - [ 'title' => [ 'value' => 'Música de' ] ], - [ 'title' => [ 'value' => 'Música de' ] ] - ], - [ - [ 'title' => [ 'value' => 'A Kuruma in Grand Theft Auto Online.' ] ], - [ 'title' => [ 'value' => 'A Kuruma in Grand Theft Auto Online.' ] ] - ], - [ - [ 'title' => [ 'value' => 'Idradm (talk) 15:34, January 4, 2016 (UTC)' ] ], - [ 'title' => [ 'value' => 'Idradm (talk) 15:34, January 4, 2016 (UTC)' ] ] - ], - [ - [ 'image' => [ 'caption' => 'Test Title' ] ], - [ 'image' => [ 'caption' => 'Test Title' ] ] - ], - [ - [ 'image' => [ 'caption' => 'Real world DBGT Logotitle example' ] ] , - [ 'image' => [ 'caption' => 'Real world title example' ] ] - ], - [ - [ 'image' => [ 'caption' => 'Test Title with small tag, span tag and tag' ] ], - [ 'image' => [ 'caption' => 'Test Title with small tag, span tag and tag' ] ] - ], - [ - [ 'image' => [ 'caption' => 'All Stats +2' ] ], - [ 'image' => [ 'caption' => '' ] ], - ], - [ - [ 'image' => [ 'caption' => '
AMERICA'S TEST KITCHEN SEASON 9

AMERICA'S TEST KITCHEN SEASON 9

' ] ], - [ 'image' => [ 'caption' => 'AMERICA'S TEST KITCHEN SEASON 9' ] ] - ], - [ - [ 'image' => [ 'caption' => '[1]' ] ], - [ 'image' => [ 'caption' => '[1]' ] ] - ], - [ - [ 'image' => [ 'caption' => '' ] ], - [ 'image' => [ 'caption' => '' ] ] - ], - [ - [ 'image' => [ 'caption' => '' ] ], - [ 'image' => [ 'caption' => '1 2 3' ] ] - ], - [ - [ 'image' => [ 'caption' => '
  1. 1
  2. 2
    1. 2.1
' ] ], - [ 'image' => [ 'caption' => '1 2 2.1' ] ] - ], - [ - [ 'image' => [ 'caption' => 'Próxima' ] ], - [ 'image' => [ 'caption' => 'Próxima' ] ] - ], - [ - [ 'image' => [ 'caption' => 'Música de' ] ], - [ 'image' => [ 'caption' => 'Música de' ] ] - ], - [ - [ 'image' => [ 'caption' => 'A Kuruma in Grand Theft Auto Online.' ] ], - [ 'image' => [ 'caption' => 'A Kuruma in Grand Theft Auto Online.' ] ] - ], - [ - [ 'image' => [ 'caption' => 'Idradm (talk) 15:34, January 4, 2016 (UTC)' ] ], - [ 'image' => [ 'caption' => 'Idradm (talk) 15:34, January 4, 2016 (UTC)' ] ] - ] - ]; - - } -} -