Proper display of code boxes in AMP

diff --git a/com.woltlab.wcf/templates/ampHeader.tpl b/com.woltlab.wcf/templates/ampHeader.tpl
index 887b80c26ad2f2829104a6bb15241d64f9a8064c..17d9d95937d5b3b1383ea835ff5bf129f609d92e 100644 (file)
--- a/com.woltlab.wcf/templates/ampHeader.tpl
+++ b/com.woltlab.wcf/templates/ampHeader.tpl
@@ -240,6 +240,23 @@
                                margin-top: 20px;
                                padding: 20px 10px 0 10px;
                        }
+                       
+                       .codeBox {
+                               border: 1px solid {@$__wcf->getStyleHandler()->getStyle()->getVariable('wcfContentBorderInner')};
+                               border-radius: 3px;
+                               margin: 10px 0;
+                       }
+                       .codeBoxHeader {
+                               border-bottom: 1px solid {@$__wcf->getStyleHandler()->getStyle()->getVariable('wcfContentBorderInner')};
+                               font-size: larger;
+                               padding: 5px 10px;
+                       }
+                       .codeBoxCode {
+                               margin: 0;
+                               max-height: 300px;
+                               overflow: auto;
+                               padding: 10px;
+                       }
                </style>
                {literal}<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>{/literal}
                <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>

diff --git a/com.woltlab.wcf/templates/codeMetaCode.tpl b/com.woltlab.wcf/templates/codeMetaCode.tpl
index 6a9d8f743f61ec5c5f5990fedafe86842f418b70..13c5a8aff11eb00a320d130055e03f18d9e13c73 100644 (file)
--- a/com.woltlab.wcf/templates/codeMetaCode.tpl
+++ b/com.woltlab.wcf/templates/codeMetaCode.tpl
@@ -11,11 +11,11 @@
                        *}{assign var='lineNumber' value=$lineNumber+1}{*
                *}{/foreach}</code></pre>
        </div>
-       {if $lines > 10}
+       {if !$isAmp && $lines > 10}
                <span class="toggleButton" data-title-collapse="{lang}wcf.bbcode.button.collapse{/lang}" data-title-expand="{lang}wcf.bbcode.button.showAll{/lang}">{lang}wcf.bbcode.button.showAll{/lang}</span>
        {/if}
 </div>
-{if !$__wcfCodeBBCodeJavaScript|isset}
+{if !$isAmp && !$__wcfCodeBBCodeJavaScript|isset}
        {assign var='__wcfCodeBBCodeJavaScript' value=true}
        <script data-relocate="true">
                require(['Language', 'WoltLabSuite/Core/Bbcode/Collapsible', 'WoltLabSuite/Core/Bbcode/Code'], function (Language, BbcodeCollapsible, BbcodeCode) {

diff --git a/wcfsetup/install/files/lib/system/html/output/AmpHtmlOutputProcessor.class.php b/wcfsetup/install/files/lib/system/html/output/AmpHtmlOutputProcessor.class.php
index 505ce590cdce561c3094e8e7e464e01c29051714..0e5b2cb27bc6e08512d8d2f67794c6390c6aa04c 100644 (file)
--- a/wcfsetup/install/files/lib/system/html/output/AmpHtmlOutputProcessor.class.php
+++ b/wcfsetup/install/files/lib/system/html/output/AmpHtmlOutputProcessor.class.php
@@ -1,6 +1,7 @@
 <?php
 namespace wcf\system\html\output;
 use wcf\system\bbcode\HtmlBBCodeParser;
+use wcf\system\html\output\node\AmpHtmlOutputNodeProcessor;
 use wcf\util\DOMUtil;
 
 /**
@@ -145,4 +146,16 @@ class AmpHtmlOutputProcessor extends HtmlOutputProcessor {
                
                return $badElements;
        }
+       
+       /**
+        * @inheritDoc
+        */
+       protected function getHtmlOutputNodeProcessor() {
+               if ($this->htmlOutputNodeProcessor === null) {
+                       $this->htmlOutputNodeProcessor = new AmpHtmlOutputNodeProcessor();
+               }
+               
+               return $this->htmlOutputNodeProcessor;
+       }
+       
 }

diff --git a/wcfsetup/install/files/lib/system/html/output/node/AmpHtmlOutputNodeProcessor.class.php b/wcfsetup/install/files/lib/system/html/output/node/AmpHtmlOutputNodeProcessor.class.php
new file mode 100644 (file)
index 0000000..c840ec4
--- /dev/null
+++ b/wcfsetup/install/files/lib/system/html/output/node/AmpHtmlOutputNodeProcessor.class.php
@@ -0,0 +1,14 @@
+<?php
+namespace wcf\system\html\output\node;
+
+/**
+ * Wrapper class to signal the AMP format to meta codes.
+ *
+ * @author      Alexander Ebert
+ * @copyright   2001-2019 WoltLab GmbH
+ * @license     GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
+ * @package     WoltLabSuite\Core\System\Html\Output\Node
+ * @since       5.2
+ */
+class AmpHtmlOutputNodeProcessor extends HtmlOutputNodeProcessor {
+}

diff --git a/wcfsetup/install/files/lib/system/html/output/node/HtmlOutputNodePre.class.php b/wcfsetup/install/files/lib/system/html/output/node/HtmlOutputNodePre.class.php
index 0f5250ff89b117cdcab4a4f101408637915cbe5e..a546ab6ee8d5c45c843281916bff4b6b1d02eb46 100644 (file)
--- a/wcfsetup/install/files/lib/system/html/output/node/HtmlOutputNodePre.class.php
+++ b/wcfsetup/install/files/lib/system/html/output/node/HtmlOutputNodePre.class.php
@@ -57,7 +57,8 @@ class HtmlOutputNodePre extends AbstractHtmlOutputNode {
                                                'highlighter' => $element->getAttribute('data-highlighter'),
                                                'line' => $element->hasAttribute('data-line') ? $element->getAttribute('data-line') : 1,
                                                'skipInnerContent' => true,
-                                               'prefix' => $prefix
+                                               'prefix' => $prefix,
+                                               'isAmp' => ($htmlNodeProcessor instanceof AmpHtmlOutputNodeProcessor),
                                        ]);
                                        
                                        $htmlNodeProcessor->renameTag($element, 'wcfNode-' . $nodeIdentifier);
@@ -182,7 +183,8 @@ class HtmlOutputNodePre extends AbstractHtmlOutputNode {
                        'language' => $highlighter,
                        'filename' => $file,
                        'title' => $title,
-                       'lines' => count($splitContent)
+                       'lines' => count($splitContent),
+                       'isAmp' => $data['isAmp'],
                ]);
                
                return WCF::getTPL()->fetch('codeMetaCode');