Add definition lists to bbcode

4 files changed, 91 insertions, 3 deletions

diff --git a/doc/bbcode.html b/doc/bbcode.html
index 3e9bda1d9..5a51135ea 100644
--- a/doc/bbcode.html
+++ b/doc/bbcode.html
@@ -27,12 +27,31 @@
 <li>[list=a]<br />
 <li>[list=A] <br />
 <li>[ul]<br />
-<li>[ol]
+<li>[ol]<br />
+<li>[dl]<br />
+<li>[dl terms="biumlh"] &mdash; where style of the terms can be any combination of:
+	<dl class="bb-dl dl-horizontal">
+	<dt>b</dt><dd>bold</dd>
+	<dt>i</dt><dd>italic</dd>
+	<dt>u</dt><dd>underline</dd>
+	<dt>m</dt><dd>monospace</dd>
+	<dt>l</dt><dd>large</dd>
+	<dt>h</dt><dd>horizontal &mdash; like <em>this</em> defintion list</dd>
+	</dl>
+</li>
 
 </ul>For example:<br />[ul]<br />[*] First list element<br />[*] Second list element<br />[/ul]<br /><br />Will render something like: <br />
 <ul class="listbullet" style="list-style-type: circle;">
 <li> First list element<br />
-<li> Second list element</ul><br /> 
+<li> Second list element</ul>
+
+or<br /><br />[dl terms="b"]<br />[*= First element term] First element description<br />[*= Second element term] Second element description<br />[/dl]<br /><br />Will render something like: <br /><br />
+<dl class="bb-dl dl-terms-bold">
+<dt> First element term </dt><dd>First element description</dd>
+<dt> Second element term </dt><dd>Second element description</dd>
+</dl><br /> 
+
+
 <br />There's also:<br />
 <ul class="listloweralpha" style="list-style-type: lower-alpha;">
 <li>[hr]<br />
diff --git a/include/bbcode.php b/include/bbcode.php
index b8cd23f59..1640307f8 100644
--- a/include/bbcode.php
+++ b/include/bbcode.php
@@ -345,6 +345,46 @@ function bb_spoilertag($match) {
 	return '<div onclick="openClose(\'opendiv-' . $rnd . '\'); return false;" class="fakelink">' . $openclose . '</div><blockquote id="opendiv-' . $rnd . '" style="display: none;">' . $text . '</blockquote>';
 }
 
+function bb_definitionList($match) {
+	// $match[1] is the markup styles for the "terms" in the definition list.
+	// $match[2] is the content between the [dl]...[/dl] tags
+
+	$classes = '';
+	if (stripos($match[1], "b") !== false) $classes .= 'dl-terms-bold ';
+	if (stripos($match[1], "i") !== false) $classes .= 'dl-terms-italic ';
+	if (stripos($match[1], "u") !== false) $classes .= 'dl-terms-underline ';
+	if (stripos($match[1], "l") !== false) $classes .= 'dl-terms-large ';
+	if (stripos($match[1], "m") !== false) $classes .= 'dl-terms-monospace ';
+	if (stripos($match[1], "h") !== false) $classes .= 'dl-horizontal '; // dl-horizontal is already provided by bootstrap
+	if (strlen($classes) === 0) $classes = "dl-terms-plain";
+
+	// The bbcode transformation will be:
+	// [*=term-text] description-text   =>   </dd> <dt>term-text<dt><dd> description-text
+	// then after all replacements have been made, the </dd> remaining the start of the 
+	// string can be removed. HTML5 allows the missing end tag.
+	// Using '(?<!\\\)' to allow backslash-escaped closing braces to appear in the term-text.
+	$closeDescriptionTag = "</dd>\n";
+	$listElements = preg_replace(
+		'/\[\*=([[:print:]]*?)(?<!\\\)\]/ism', 
+		$closeDescriptionTag . '<dt>$1</dt><dd>', 
+		$match[2]
+	);
+	// Unescape any \] inside the <dt> tags
+	$listElements = preg_replace_callback('/<dt>(.*?)<\/dt>/ism', 'bb_definitionList_unescapeBraces', $listElements);
+	
+	// Remove the extra </dd> at the start of the string, if there is one.
+	$firstOpenTag  = strpos($listElements, '<dd>');
+	$firstCloseTag = strpos($listElements, $closeDescriptionTag);
+	if ($firstCloseTag !== false && ($firstOpenTag === false || ($firstCloseTag < $firstOpenTag))) {		
+		$listElements = preg_replace( '/<\/dd>/ism', '', $listElements, 1);
+	}
+
+	return '<dl class="bb-dl ' . rtrim($classes) . '">' . $listElements . '</dl>';;
+}
+function bb_definitionList_unescapeBraces($match) {
+	return '<dt>' . str_replace('\]', ']', $match[1]) . '</dt>';
+}
+
 /**
  * @brief Sanitize style properties from BBCode to HTML.
  *
@@ -713,6 +753,7 @@ function bbcode($Text, $preserve_nl = false, $tryoembed = true, $cache = false)
 	while ((((strpos($Text, "[/list]") !== false) && (strpos($Text, "[list") !== false)) ||
 			((strpos($Text, "[/ol]") !== false) && (strpos($Text, "[ol]") !== false)) ||
 			((strpos($Text, "[/ul]") !== false) && (strpos($Text, "[ul]") !== false)) ||
+			((strpos($Text, "[/dl]") !== false) && (strpos($Text, "[dl")  !== false)) ||
 			((strpos($Text, "[/li]") !== false) && (strpos($Text, "[li]") !== false))) && (++$endlessloop < 20)) {
 		$Text = preg_replace("/\[list\](.*?)\[\/list\]/ism", '<ul class="listbullet" style="list-style-type: circle;">$1</ul>', $Text);
 		$Text = preg_replace("/\[list=\](.*?)\[\/list\]/ism", '<ul class="listnone" style="list-style-type: none;">$1</ul>', $Text);
@@ -724,6 +765,13 @@ function bbcode($Text, $preserve_nl = false, $tryoembed = true, $cache = false)
 		$Text = preg_replace("/\[ul\](.*?)\[\/ul\]/ism", '<ul class="listbullet" style="list-style-type: circle;">$1</ul>', $Text);
 		$Text = preg_replace("/\[ol\](.*?)\[\/ol\]/ism", '<ul class="listdecimal" style="list-style-type: decimal;">$1</ul>', $Text);
 		$Text = preg_replace("/\[li\](.*?)\[\/li\]/ism", '<li>$1</li>', $Text);
+
+		// [dl] tags have an optional [dl terms="bi"] form where bold/italic/underline/mono/large
+		// etc. style may be specified for the "terms" in the definition list. The quotation marks 
+		// are also optional. The regex looks intimidating, but breaks down as: 
+		//   "[dl" <optional-whitespace> <optional-termStyles> "]" <matchGroup2> "[/dl]"
+		// where optional-termStyles are: "terms=" <optional-quote> <matchGroup1> <optional-quote>
+		$Text = preg_replace_callback('/\[dl[[:space:]]*(?:terms=(?:&quot;|")?([a-zA-Z]+)(?:&quot;|")?)?\](.*?)\[\/dl\]/ism', 'bb_definitionList', $Text);
 	}
 	if (strpos($Text,'[th]') !== false) {
 		$Text = preg_replace("/\[th\](.*?)\[\/th\]/sm", '<th>$1</th>', $Text);
diff --git a/view/js/autocomplete.js b/view/js/autocomplete.js
index 21ce2d150..ca51230df 100644
--- a/view/js/autocomplete.js
+++ b/view/js/autocomplete.js
@@ -265,7 +265,7 @@ function string2bb(element) {
 	$.fn.bbco_autocomplete = function(type) {
 
 		if(type=='bbcode') {
-			var open_close_elements = ['bold', 'italic', 'underline', 'overline', 'strike', 'superscript', 'subscript', 'quote', 'code', 'open', 'spoiler', 'map', 'nobb', 'list', 'ul', 'ol', 'li', 'table', 'tr', 'th', 'td', 'center', 'color', 'font', 'size', 'zrl', 'zmg', 'rpost', 'qr', 'observer'];
+			var open_close_elements = ['bold', 'italic', 'underline', 'overline', 'strike', 'superscript', 'subscript', 'quote', 'code', 'open', 'spoiler', 'map', 'nobb', 'list', 'ul', 'ol', 'dl', 'li', 'table', 'tr', 'th', 'td', 'center', 'color', 'font', 'size', 'zrl', 'zmg', 'rpost', 'qr', 'observer'];
 			var open_elements = ['observer.baseurl', 'observer.address', 'observer.photo', 'observer.name', 'observer.webname', 'observer.url', '*', 'hr',  ];
 
 			var elements = open_close_elements.concat(open_elements);
diff --git a/view/theme/redbasic/css/style.css b/view/theme/redbasic/css/style.css
index 290a1a697..e1076a79f 100644
--- a/view/theme/redbasic/css/style.css
+++ b/view/theme/redbasic/css/style.css
@@ -1827,6 +1827,27 @@ nav .badge.mail-update:hover {
 	margin-top:-3px;
 }
 
+dl.bb-dl > dt { 
+	/* overriding the default dl style from bootstrap, as bootstrap's
+	   style of a bold unindented line followed by a plain unindented
+	   line is already acheivable in bbcode without dl */
+	font-weight: normal; 
+} 
+dl.dl-terms-monospace > dt { font-family:     monospace; }
+dl.dl-terms-bold      > dt { font-weight:     bold; }
+dl.dl-terms-italic    > dt { font-style:      italic; }
+dl.dl-terms-underline > dt { text-decoration: underline; }
+dl.dl-terms-large     > dt { font-size:       120%; }
+dl.bb-dl:not(.dl-horizontal) > dd {
+	display: block;
+	margin-left: 2em;
+}
+dl.bb-dl > dd > li {
+	/* adding some indent so bullet-list items will line up better with 
+	   dl descriptions if someone wants to be impure and combine them */
+	margin-left: 1em;
+}
+
 .bootstrap-tagsinput .tag:before {
 	/* Copied from icon-asterisk, is there a better way to do it? */
 	font-family: FontAwesome;