From a26b365809121b18b3c928316ca22a08a1ec9432 Mon Sep 17 00:00:00 2001
From: Alexander Ebert <ebert@woltlab.com>
Date: Wed, 14 Sep 2016 13:19:45 +0200
Subject: [PATCH] Added support for collapsible quotes

---
 com.woltlab.wcf/templates/codeBBCodeTag.tpl   | 33 -------------------
 com.woltlab.wcf/templates/codeMetaCode.tpl    |  4 +--
 com.woltlab.wcf/templates/quoteBBCodeTag.tpl  | 26 ---------------
 com.woltlab.wcf/templates/quoteMetaCode.tpl   | 17 ++++++++--
 .../node/HtmlOutputNodeWoltlabQuote.class.php |  9 +++++
 .../install/files/style/bbcode/quote.scss     | 29 ++++++++++++++++
 6 files changed, 55 insertions(+), 63 deletions(-)
 delete mode 100644 com.woltlab.wcf/templates/codeBBCodeTag.tpl
 delete mode 100644 com.woltlab.wcf/templates/quoteBBCodeTag.tpl

diff --git a/com.woltlab.wcf/templates/codeBBCodeTag.tpl b/com.woltlab.wcf/templates/codeBBCodeTag.tpl
deleted file mode 100644
index 37743a4dc9..0000000000
--- a/com.woltlab.wcf/templates/codeBBCodeTag.tpl
+++ /dev/null
@@ -1,33 +0,0 @@
-<div class="codeBox collapsibleBbcode jsCollapsibleBbcode {$highlighter|get_class|substr:30|lcfirst}{if $lines > 10} collapsed{/if}">
-	<div>
-		<div>
-			<h3>{@$highlighter->getTitle()}{if $filename}: {$filename}{/if}</h3>
-		</div>
-		
-		<ol start="{$startLineNumber}">
-			{assign var='lineNumber' value=$startLineNumber}
-			{foreach from=$content item=line}
-				{if $lineNumbers[$lineNumber]|isset}
-					<li id="{@$lineNumbers[$lineNumber]}"><a href="{@$__wcf->getAnchor($lineNumbers[$lineNumber])}" class="lineAnchor"></a>{@$line}</li>
-				{else}
-					<li>{@$line}</li>
-				{/if}
-				
-				{assign var='lineNumber' value=$lineNumber+1}
-			{/foreach}
-		</ol>
-	</div>
-	
-	{if $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 !$__overlongCodeBoxSeen|isset}
-			{assign var='__overlongCodeBoxSeen' value=true}
-			<script data-relocate="true">
-				require(['WoltLabSuite/Core/Bbcode/Collapsible'], function(BbcodeCollapsible) {
-					BbcodeCollapsible.observe();
-				});
-			</script>
-		{/if}
-	{/if}
-</div>
diff --git a/com.woltlab.wcf/templates/codeMetaCode.tpl b/com.woltlab.wcf/templates/codeMetaCode.tpl
index 8310015ef7..9a52c8554d 100644
--- a/com.woltlab.wcf/templates/codeMetaCode.tpl
+++ b/com.woltlab.wcf/templates/codeMetaCode.tpl
@@ -21,8 +21,8 @@
 	{if $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 !$__overlongCodeBoxSeen|isset}
-			{assign var='__overlongCodeBoxSeen' value=true}
+		{if !$__overlongBBCodeBoxSeen|isset}
+			{assign var='__overlongBBCodeBoxSeen' value=true}
 			<script data-relocate="true">
 				require(['WoltLabSuite/Core/Bbcode/Collapsible'], function(BbcodeCollapsible) {
 					BbcodeCollapsible.observe();
diff --git a/com.woltlab.wcf/templates/quoteBBCodeTag.tpl b/com.woltlab.wcf/templates/quoteBBCodeTag.tpl
deleted file mode 100644
index dde8342c6e..0000000000
--- a/com.woltlab.wcf/templates/quoteBBCodeTag.tpl
+++ /dev/null
@@ -1,26 +0,0 @@
-<blockquote class="quoteBox{if !$quoteAuthorObject} quoteBoxSimple{/if}"{if $quoteLink} cite="{$quoteLink}"{/if}>
-	<header class="quoteBoxHeader">
-		<span class="quoteBoxIcon">
-			{if $quoteAuthorObject}
-				<a href="{link controller='User' object=$quoteAuthorObject}{/link}" class="userLink" data-user-id="{@$quoteAuthorObject->userID}">{@$quoteAuthorObject->getAvatar()->getImageTag(32)}</a>
-			{else}
-				<span class="icon icon24 fa-quote-left"></span>
-			{/if}
-		</span>
-		<span class="quoteBoxTitle">
-			{if $quoteAuthor}
-				{if $quoteLink}
-					<a href="{@$quoteLink}"{if $isExternalQuoteLink} class="externalURL"{if EXTERNAL_LINK_REL_NOFOLLOW || EXTERNAL_LINK_TARGET_BLANK} rel="{if EXTERNAL_LINK_REL_NOFOLLOW}nofollow{/if}{if EXTERNAL_LINK_TARGET_BLANK}{if EXTERNAL_LINK_REL_NOFOLLOW} {/if}noopener noreferrer{/if}"{/if}{if EXTERNAL_LINK_TARGET_BLANK} target="_blank"{/if}{/if}>{lang}wcf.bbcode.quote.title{/lang}</a>
-				{else}
-					{lang}wcf.bbcode.quote.title{/lang}
-				{/if}
-			{else}
-				{lang}wcf.bbcode.quote{/lang}
-			{/if}
-		</span>
-	</header>
-	
-	<div>
-		{@$content}
-	</div>
-</blockquote>
diff --git a/com.woltlab.wcf/templates/quoteMetaCode.tpl b/com.woltlab.wcf/templates/quoteMetaCode.tpl
index dd6f2e4d2c..f695da1f9a 100644
--- a/com.woltlab.wcf/templates/quoteMetaCode.tpl
+++ b/com.woltlab.wcf/templates/quoteMetaCode.tpl
@@ -1,4 +1,4 @@
-<blockquote class="quoteBox{if !$quoteAuthorObject} quoteBoxSimple{/if}"{if $quoteLink} cite="{$quoteLink}"{/if}>
+<blockquote class="quoteBox collapsibleBbcode jsCollapsibleBbcode{if $collapseQuote} collapsed{/if}{if !$quoteAuthorObject} quoteBoxSimple{/if}"{if $quoteLink} cite="{$quoteLink}"{/if}>
 	<div class="quoteBoxIcon">
 		{if $quoteAuthorObject}
 			<a href="{link controller='User' object=$quoteAuthorObject}{/link}" class="userLink" data-user-id="{@$quoteAuthorObject->userID}">{@$quoteAuthorObject->getAvatar()->getImageTag(64)}</a>
@@ -21,7 +21,20 @@
 		</span>
 	</div>
 	
-	<div>
+	<div class="quoteBoxContent">
 		<!-- META_CODE_INNER_CONTENT -->
 	</div>
+	
+	{if $collapseQuote}
+		<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 !$__overlongBBCodeBoxSeen|isset}
+			{assign var='__overlongBBCodeBoxSeen' value=true}
+			<script data-relocate="true">
+				require(['WoltLabSuite/Core/Bbcode/Collapsible'], function(BbcodeCollapsible) {
+					BbcodeCollapsible.observe();
+				});
+			</script>
+		{/if}
+	{/if}
 </blockquote>
diff --git a/wcfsetup/install/files/lib/system/html/output/node/HtmlOutputNodeWoltlabQuote.class.php b/wcfsetup/install/files/lib/system/html/output/node/HtmlOutputNodeWoltlabQuote.class.php
index f45d884690..2c10a3f78d 100644
--- a/wcfsetup/install/files/lib/system/html/output/node/HtmlOutputNodeWoltlabQuote.class.php
+++ b/wcfsetup/install/files/lib/system/html/output/node/HtmlOutputNodeWoltlabQuote.class.php
@@ -31,9 +31,17 @@ class HtmlOutputNodeWoltlabQuote extends AbstractHtmlOutputNode {
 		foreach ($elements as $element) {
 			switch ($this->outputType) {
 				case 'text/html':
+					$collapse = false;
+					
+					// try to predict long content
+					if ($element->getElementsByTagName('p')->length > 5 || $element->getElementsByTagName('br')->length > 5) {
+						$collapse = true;
+					}
+					
 					$nodeIdentifier = StringUtil::getRandomID();
 					$htmlNodeProcessor->addNodeData($this, $nodeIdentifier, [
 						'author' => $element->getAttribute('data-author'),
+						'collapse' => $collapse,
 						'url' => $element->getAttribute('data-link')
 					]);
 					
@@ -79,6 +87,7 @@ class HtmlOutputNodeWoltlabQuote extends AbstractHtmlOutputNode {
 		}
 		
 		WCF::getTPL()->assign([
+			'collapseQuote' => $data['collapse'],
 			'quoteLink' => $data['url'],
 			'quoteAuthor' => $data['author'],
 			'quoteAuthorObject' => $quoteAuthorObject,
diff --git a/wcfsetup/install/files/style/bbcode/quote.scss b/wcfsetup/install/files/style/bbcode/quote.scss
index cf288f6b88..704f4a3d74 100644
--- a/wcfsetup/install/files/style/bbcode/quote.scss
+++ b/wcfsetup/install/files/style/bbcode/quote.scss
@@ -33,6 +33,35 @@ woltlab-quote,
 		min-height: 104px;
 	}
 	
+	&.collapsed {
+		position: relative;
+		
+		> .quoteBoxContent {
+			overflow: hidden;
+			max-height: 100px;
+		}
+		
+		> .toggleButton {
+			bottom: 0;
+			box-shadow: 0 -10px 50px 10px opacify($wcfContentBackground, .9);
+			left: 0;
+			padding-bottom: 10px;
+			position: absolute;
+			right: 0;
+			z-index: 1;
+		}
+	}
+	
+	> .toggleButton {
+		background-color: opacify($wcfContentBackground, .9);
+		cursor: pointer;
+		display: block;
+		padding: 10px 20px 0 10px;
+		text-align: center;
+		
+		@include wcfFontSmall;
+	}
+	
 	.quoteBox {
 		min-height: 0;
 	}
-- 
2.20.1