BB-Code-Button for Code-Block

Hello,

I have add a new Button to insert a Code-Block in the main textarea (with language). See the button-bar in forum on the right side.

It works like the default button "Bold", "Italic" etc. but with an additional popup.

List of files

<your lang>.lang
insert_code.inc.php (new)
insert_code.tpl (new)
posting.tpl.inc
index.php
style.css

I make the following changes:

[german.lang]
some new entries in my lang file german.lang - please search for code to find the new keywords.

[insert_code.inc.php]
create a new File includes/insert_code.inc.php:

 
<?php
if(!defined('IN_INDEX'))
 {
  header('Location: ../index.php');
  exit;
 }
 $langDir = "./modules/geshi/geshi";
 $codeLangs = array();
 if ($handle = @opendir($langDir)) {
  while (false !== ($file = readdir($handle))) {
   if ($file != "." && $file != "..") {
    $codeLangs[] = strtoupper( substr($file, 0, strrpos ( $file, "." ) ) );
   }
  }
  closedir($handle);
  $smarty->assign("codeLangs",$codeLangs);
 }
 
 // Hier ggf. eine Option im Adminbereich anpassen, sofern es optional sein solle; im Moment wird es immer, wenn BB-Code erlaubt ist, eingeblendet
 $template = 'insert_code.tpl'; 
?>

[insert_code.tpl]
create a new template file /templates/<default|or what ever>/insert_code.tpl:

 
{config_load file=$settings.language_file section="general"}{config_load file=$settings.language_file section="insert_code"}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="{#language#}">
<head>
<title>{$settings.forum_name} - {#insert_code_page_title#}</title>
<meta http-equiv="content-type" content="text/html; charset={#charset#}" />
<meta name="DC.contributor" content="Michael Loesler - http://derletztekick.com">
<meta name="DC.rights" content="GNU-GPL">
{literal}
 
<script type="text/javascript">/* <![CDATA[ */
 
var selection = null;
var openerArea = null;
function getOpenerSelection(id) {
 
 if (opener.document.selection) { // IE
  openerArea = opener.document.getElementById(id);
  var str = opener.document.selection.createRange().text;
  var sel = opener.document.selection.createRange();
  return [sel, str, null];
 }
 else if((typeof opener.document.getElementById(id).selectionStart) != 'undefined') { // Opera
  openerArea = opener.document.getElementById(id);
  var selLength = openerArea.textLength;
  var selStart = openerArea.selectionStart;
  var selEnd = openerArea.selectionEnd;
  var oldScrollTop = openerArea.scrollTop;
  var s1 = (openerArea.value).substring(0,selStart);
  var s2 = (openerArea.value).substring(selStart, selEnd);
  var s3 = (openerArea.value).substring(selEnd, selLength);
  openerArea.selectionStart = s1.length;
  openerArea.scrollTop = oldScrollTop;
  return [s1, s2, s3];
 }
 return [null, "", null];
}
 
 
function insert_code(f, obj) {
 if (f && opener) {
  var lang = f.elements['code_lang'];
  var code = f.elements['code'];
  var tag = (lang[lang.selectedIndex].value == "inline")?"inlinecode":"code";
  var bbCode = "[" + tag + (lang[lang.selectedIndex].value==""||lang[lang.selectedIndex].value=="inline"?"":"="+lang[lang.selectedIndex].value) + "]";
  bbCode += code.value;
  bbCode += "[/" + tag + "]";
 
  if (selection[0] == null) {
   opener.insert("text", bbCode);
  }
  else if (typeof selection[0] == 'object') { // IE
   selection[0].text = bbCode;
  }
  else { // Opera
   openerArea.value = selection[0] + bbCode + selection[2];
  }
 
  window.close();
 }
}
 
function init() {
 var f = document.forms['codeForm'];
 if (f && opener) {
  selection = getOpenerSelection("text");
  f.elements['code'].value = selection[1];
 }
}
 
var isDOMContentLoaded = false;
function addContentLoadListener () {
 if (document.addEventListener) {
  var DOMContentLoadFunction = function () {
   isDOMContentLoaded = true;
   init();
  };
  document.addEventListener("DOMContentLoaded", DOMContentLoadFunction, false);
 }
 var oldonload = (window.onload || new Function());
 window.onload = function () {
  if (!isDOMContentLoaded) {
   oldonload();
   init();
  }
 };
}
addContentLoadListener();
 
 
/* ]]> */</script>
{/literal}
 
<link rel="stylesheet" type="text/css" href="templates/{$settings.template}/style.css" media="all" />
 
</head>
<body id="popup">
<div id="content">
<h1>{#insert_code_hl#}</h1>
 
<form id="codeForm" action="./">
 
<fieldset>
 
 <legend>{#insert_code_lang#}</legend>
 <p><label for="code_lang">{#code_lang#}</label>
 <select title={#insert_code_lang#} id="code_lang" name="code_lang" size="1">
  <option value="">{#insert_code_no_lang#}</option>
  <option value="inline">{#insert_code_inline#}</option>
  {foreach name='lang' from=$codeLangs item=lang} <option value="{$lang}">{$lang}</option> {/foreach}
 </select></p>
</fieldset>
 
<fieldset>
 
 <legend>{#insert_code#}</legend>
 <p><label for="code">{#code#}</label>
 <textarea rows="12" cols="55" id="code" name="code"></textarea>
 </p>
</fieldset>
 
<p><input class="format-button" type="button" title="{#insert_code_button#}" value="{#insert_code_button#}" onclick="insert_code(this.form)" /></p>
 
</form>
</div>
</body>
</html>

[posting.tpl.inc]
add the new button near line 120

<input class="bbcode-button" type="button" name="image" value="{#bbcode_code_marking#}" title="{#bbcode_code_title#}" onclick="popup('index.php?mode=insert_code',600,525);" /><br />

[index.php]
add a new case:

  case 'insert_code':
     include('includes/insert_code.inc.php');
     break;

[style.css]
I include the default css-file in the new template. To make it easier to adjust the popup-design to your forum-design, I add a new ID popup in the body-tag. So, you can do something like that:

 
body#popup {
 text-align: justify;
 margin: 20px auto; 
 padding: 0px; 
 max-width: auto;
 min-width: 0px;
 width: 90%;
 border: none;
 border: 1px solid #7D7F87;
}
 
body#popup fieldset {
 border: solid 1px #999;
 margin-bottom: 20px;
}
...

I hoppe, this feature is usefull and this documentation is complete and understandable! Maybe, it is a feature for the next version.

Micha

--
applied-geodesy.org - OpenSource Least-Squares Adjustment Software for Geodetic Sciences

my little forum

BB-Code-Button for Code-Block (Features)