diff options
| -rw-r--r-- | doc/bbcode.html | 23 | ||||
| -rw-r--r-- | include/bbcode.php | 48 | ||||
| -rw-r--r-- | view/js/autocomplete.js | 2 | ||||
| -rw-r--r-- | view/theme/redbasic/css/style.css | 21 |
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"] — 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 — 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=(?:"|")?([a-zA-Z]+)(?:"|")?)?\](.*?)\[\/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; |