harukin/core
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add definition lists to bbcode

Browse Source
This commit is contained in:
Treer 2016-04-28 23:48:50 +10:00
parent b664af748e
commit 9d079e5d2b
4 changed files with 91 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
doc/bbcode.html
View File

@ -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 />

48
include/bbcode.php
View File

@ -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);

2
view/js/autocomplete.js
View File

@ -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);

21
view/theme/redbasic/css/style.css
View File

@ -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;