Changed bbcode editor behaviour. All buttons (apart from the [*] one) now work the same way. This needs testing in as many browsers as possible. Known to be working in

IE6, FF2 on Windows, Opera 9

Probably issues on Konquerer, Safari, FF2 on MacOS (as per a forum post).

Feedback and ideas please here: http://area51.phpbb.com/phpBB/viewtopic.php?t=25884


git-svn-id: file:///svn/phpbb/trunk@6646 89ea8834-ac86-4346-8a33-228a782c2dd0
This commit is contained in:
Dominik Dröscher 2006-11-24 12:20:16 +00:00
parent f836b4a095
commit 17ea1ecd5e
3 changed files with 49 additions and 375 deletions

View file

@ -64,6 +64,21 @@ function arraypop(thearray)
return retval;
}
/**
* bbstyle
*/
function bbstyle(bbnumber)
{
if (bbnumber != -1)
{
bbfontstyle(bbtags[bbnumber], bbtags[bbnumber+1]);
} else {
insert_text('[*]');
document.forms[form_name].elements[text_name].focus();
}
}
/**
* Apply bbcodes
*/
@ -246,185 +261,6 @@ function addquote(post_id, username)
return;
}
/**
* bbstyle
*/
function bbstyle(bbnumber)
{
donotinsert = false;
theSelection = false;
bblast = 0;
document.forms[form_name].elements[text_name].focus();
// Close all open tags & default button names
if (bbnumber == -1)
{
while (bbcode[0])
{
butnumber = arraypop(bbcode) - 1;
document.forms[form_name].elements[text_name].value += bbtags[butnumber + 1];
buttext = document.forms[form_name]['addbbcode' + butnumber].value;
if (buttext != '[*]')
{
document.forms[form_name]['addbbcode' + butnumber].value = buttext.substr(0,(buttext.length - 1));
}
}
document.forms[form_name].addbbcode10.value = 'List';
bbtags[10] = '[list]';
document.forms[form_name].addbbcode12.value = 'List=';
bbtags[12] = '[list=]';
// All tags are closed including image tags :D
imageTag = false;
document.forms[form_name].elements[text_name].focus();
return;
}
// [*] doesn't have an end tag
noEndTag = (bbtags[bbnumber] == '[*]')
if ((clientVer >= 4) && is_ie && is_win)
{
// Get text selection
theSelection = document.selection.createRange().text;
if (theSelection)
{
// Add tags around selection
document.selection.createRange().text = bbtags[bbnumber] + theSelection + ((!noEndTag) ? bbtags[bbnumber+1] : '');
document.forms[form_name].elements[text_name].focus();
theSelection = '';
return;
}
}
else if (document.forms[form_name].elements[text_name].selectionEnd && (document.forms[form_name].elements[text_name].selectionEnd - document.forms[form_name].elements[text_name].selectionStart > 0))
{
mozWrap(document.forms[form_name].elements[text_name], bbtags[bbnumber], ((!noEndTag) ? bbtags[bbnumber+1] : ''));
document.forms[form_name].elements[text_name].focus();
theSelection = '';
return;
}
// Find last occurance of an open tag the same as the one just clicked
for (i = 0; i < bbcode.length; i++)
{
if (bbcode[i] == bbnumber+1)
{
bblast = i;
donotinsert = true;
}
}
if (bbnumber == 10 && bbtags[10] != '[*]')
{
if (donotinsert)
{
document.forms[form_name].addbbcode12.value = 'List=';
tmp_help = help_line['o'];
help_line['o'] = help_line['e'];
help_line['e'] = tmp_help;
bbtags[12] = '[list=]';
}
else
{
document.forms[form_name].addbbcode12.value = '[*]';
tmp_help = help_line['o'];
help_line['o'] = help_line['e'];
help_line['e'] = tmp_help;
bbtags[12] = '[*]';
}
}
if (bbnumber == 12 && bbtags[12] != '[*]')
{
if (donotinsert)
{
document.forms[form_name].addbbcode10.value = 'List';
tmp_help = help_line['l'];
help_line['l'] = help_line['e'];
help_line['e'] = tmp_help;
bbtags[10] = '[list]';
}
else
{
document.forms[form_name].addbbcode10.value = '[*]';
tmp_help = help_line['l'];
help_line['l'] = help_line['e'];
help_line['e'] = tmp_help;
bbtags[10] = '[*]';
}
}
// Close all open tags up to the one just clicked & default button names
if (donotinsert)
{
while (bbcode[bblast])
{
butnumber = arraypop(bbcode) - 1;
if (bbtags[butnumber] != '[*]')
{
insert_text(bbtags[butnumber + 1]);
}
else
{
insert_text(bbtags[butnumber]);
}
buttext = document.forms[form_name]['addbbcode' + butnumber].value;
if (bbtags[butnumber] != '[*]')
{
document.forms[form_name]['addbbcode' + butnumber].value = buttext.substr(0,(buttext.length - 1));
}
imageTag = false;
}
document.forms[form_name].elements[text_name].focus();
return;
}
else
{
// Open tags
// Close image tag before adding another
if (imageTag && (bbnumber != 14))
{
insert_text(bbtags[15]);
// Remove the close image tag from the list
lastValue = arraypop(bbcode) - 1;
// Return button back to normal state
document.forms[form_name].addbbcode14.value = 'Img';
imageTag = false;
}
// Open tag
insert_text(bbtags[bbnumber]);
// Check to stop additional tags after an unclosed image tag
if (bbnumber == 14 && imageTag == false)
{
imageTag = 1;
}
if (bbtags[bbnumber] != '[*]')
{
arraypush(bbcode, bbnumber + 1);
document.forms[form_name]['addbbcode' + bbnumber].value += "*";
}
document.forms[form_name].elements[text_name].focus();
return;
}
storeCaret(document.forms[form_name].elements[text_name]);
}
/**
* From http://www.massless.org/mozedit/
*/
@ -499,7 +335,7 @@ function colorPalette(dir, width, height)
{
color = String(numberList[r]) + String(numberList[g]) + String(numberList[b]);
document.write('<td bgcolor="#' + color + '">');
document.write('<a href="#" onclick="bbfontstyle(\'[color=#' + color + ']\', \'[/color]\'); return false;" onmouseover="helpline(\'s\');"><img src="images/spacer.gif" width="' + width + '" height="' + height + '" alt="#' + color + '" title="#' + color + '" /></a>');
document.write('<a href="#" onclick="bbfontstyle(\'[color=#' + color + ']\', \'[/color]\'); return false;" onmouseover="helpline(\'s\');" onmouseout="helpline(\'tip\');"><img src="images/spacer.gif" width="' + width + '" height="' + height + '" alt="#' + color + '" title="#' + color + '" /></a>');
document.writeln('</td>');
}

View file

@ -64,6 +64,21 @@ function arraypop(thearray)
return retval;
}
/**
* bbstyle
*/
function bbstyle(bbnumber)
{
if (bbnumber != -1)
{
bbfontstyle(bbtags[bbnumber], bbtags[bbnumber+1]);
} else {
insert_text('[*]');
document.forms[form_name].elements[text_name].focus();
}
}
/**
* Apply bbcodes
*/
@ -246,185 +261,6 @@ function addquote(post_id, username)
return;
}
/**
* bbstyle
*/
function bbstyle(bbnumber)
{
donotinsert = false;
theSelection = false;
bblast = 0;
document.forms[form_name].elements[text_name].focus();
// Close all open tags & default button names
if (bbnumber == -1)
{
while (bbcode[0])
{
butnumber = arraypop(bbcode) - 1;
document.forms[form_name].elements[text_name].value += bbtags[butnumber + 1];
buttext = document.forms[form_name]['addbbcode' + butnumber].value;
if (buttext != '[*]')
{
document.forms[form_name]['addbbcode' + butnumber].value = buttext.substr(0,(buttext.length - 1));
}
}
document.forms[form_name].addbbcode10.value = 'List';
bbtags[10] = '[list]';
document.forms[form_name].addbbcode12.value = 'List=';
bbtags[12] = '[list=]';
// All tags are closed including image tags :D
imageTag = false;
document.forms[form_name].elements[text_name].focus();
return;
}
// [*] doesn't have an end tag
noEndTag = (bbtags[bbnumber] == '[*]')
if ((clientVer >= 4) && is_ie && is_win)
{
// Get text selection
theSelection = document.selection.createRange().text;
if (theSelection)
{
// Add tags around selection
document.selection.createRange().text = bbtags[bbnumber] + theSelection + ((!noEndTag) ? bbtags[bbnumber+1] : '');
document.forms[form_name].elements[text_name].focus();
theSelection = '';
return;
}
}
else if (document.forms[form_name].elements[text_name].selectionEnd && (document.forms[form_name].elements[text_name].selectionEnd - document.forms[form_name].elements[text_name].selectionStart > 0))
{
mozWrap(document.forms[form_name].elements[text_name], bbtags[bbnumber], ((!noEndTag) ? bbtags[bbnumber+1] : ''));
document.forms[form_name].elements[text_name].focus();
theSelection = '';
return;
}
// Find last occurance of an open tag the same as the one just clicked
for (i = 0; i < bbcode.length; i++)
{
if (bbcode[i] == bbnumber+1)
{
bblast = i;
donotinsert = true;
}
}
if (bbnumber == 10 && bbtags[10] != '[*]')
{
if (donotinsert)
{
document.forms[form_name].addbbcode12.value = 'List=';
tmp_help = help_line['o'];
help_line['o'] = help_line['e'];
help_line['e'] = tmp_help;
bbtags[12] = '[list=]';
}
else
{
document.forms[form_name].addbbcode12.value = '[*]';
tmp_help = help_line['o'];
help_line['o'] = help_line['e'];
help_line['e'] = tmp_help;
bbtags[12] = '[*]';
}
}
if (bbnumber == 12 && bbtags[12] != '[*]')
{
if (donotinsert)
{
document.forms[form_name].addbbcode10.value = 'List';
tmp_help = help_line['l'];
help_line['l'] = help_line['e'];
help_line['e'] = tmp_help;
bbtags[10] = '[list]';
}
else
{
document.forms[form_name].addbbcode10.value = '[*]';
tmp_help = help_line['l'];
help_line['l'] = help_line['e'];
help_line['e'] = tmp_help;
bbtags[10] = '[*]';
}
}
// Close all open tags up to the one just clicked & default button names
if (donotinsert)
{
while (bbcode[bblast])
{
butnumber = arraypop(bbcode) - 1;
if (bbtags[butnumber] != '[*]')
{
insert_text(bbtags[butnumber + 1]);
}
else
{
insert_text(bbtags[butnumber]);
}
buttext = document.forms[form_name]['addbbcode' + butnumber].value;
if (bbtags[butnumber] != '[*]')
{
document.forms[form_name]['addbbcode' + butnumber].value = buttext.substr(0,(buttext.length - 1));
}
imageTag = false;
}
document.forms[form_name].elements[text_name].focus();
return;
}
else
{
// Open tags
// Close image tag before adding another
if (imageTag && (bbnumber != 14))
{
insert_text(bbtags[15]);
// Remove the close image tag from the list
lastValue = arraypop(bbcode) - 1;
// Return button back to normal state
document.forms[form_name].addbbcode14.value = 'Img';
imageTag = false;
}
// Open tag
insert_text(bbtags[bbnumber]);
// Check to stop additional tags after an unclosed image tag
if (bbnumber == 14 && imageTag == false)
{
imageTag = 1;
}
if (bbtags[bbnumber] != '[*]')
{
arraypush(bbcode, bbnumber + 1);
document.forms[form_name]['addbbcode' + bbnumber].value += "*";
}
document.forms[form_name].elements[text_name].focus();
return;
}
storeCaret(document.forms[form_name].elements[text_name]);
}
/**
* From http://www.massless.org/mozedit/
*/
@ -499,7 +335,7 @@ function colorPalette(dir, width, height)
{
color = String(numberList[r]) + String(numberList[g]) + String(numberList[b]);
document.write('<td bgcolor="#' + color + '">');
document.write('<a href="#" onclick="bbfontstyle(\'[color=#' + color + ']\', \'[/color]\'); return false;" onmouseover="helpline(\'s\');"><img src="images/spacer.gif" width="' + width + '" height="' + height + '" alt="#' + color + '" title="#' + color + '" /></a>');
document.write('<a href="#" onclick="bbfontstyle(\'[color=#' + color + ']\', \'[/color]\'); return false;" onmouseover="helpline(\'s\');" onmouseout="helpline(\'tip\');"><img src="images/spacer.gif" width="' + width + '" height="' + height + '" alt="#' + color + '" title="#' + color + '" /></a>');
document.writeln('</td>');
}

View file

@ -26,11 +26,12 @@ var help_line = {
o: '{LA_BBCODE_O_HELP}',
p: '{LA_BBCODE_P_HELP}',
w: '{LA_BBCODE_W_HELP}',
a: '{LA_BBCODE_A_HELP}',
s: '{LA_BBCODE_S_HELP}',
f: '{LA_BBCODE_F_HELP}',
e: '{LA_BBCODE_E_HELP}',
d: '{LA_BBCODE_D_HELP}'
d: '{LA_BBCODE_D_HELP}',
t: '{LA_BBCODE_T_HELP}',
tip: '{L_STYLES_TIP}'
<!-- BEGIN custom_tags -->
,cb_{custom_tags.BBCODE_ID}: '{custom_tags.BBCODE_HELPLINE}'
<!-- END custom_tags -->
@ -250,38 +251,39 @@ function checkForm()
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr valign="middle" align="left">
<td colspan="2">
<input type="button" class="btnbbcode" accesskey="b" name="addbbcode0" value=" B " style="font-weight:bold; width: 30px;" onclick="bbstyle(0)" onmouseover="helpline('b')" />
<input type="button" class="btnbbcode" accesskey="i" name="addbbcode2" value=" i " style="font-style:italic; width: 30px;" onclick="bbstyle(2)" onmouseover="helpline('i')" />
<input type="button" class="btnbbcode" accesskey="u" name="addbbcode4" value=" u " style="text-decoration: underline; width: 30px;" onclick="bbstyle(4)" onmouseover="helpline('u')" />
<input type="button" class="btnbbcode" accesskey="b" name="addbbcode0" value=" B " style="font-weight:bold; width: 30px;" onclick="bbstyle(0)" onmouseover="helpline('b')" onmouseout="helpline('tip')" />
<input type="button" class="btnbbcode" accesskey="i" name="addbbcode2" value=" i " style="font-style:italic; width: 30px;" onclick="bbstyle(2)" onmouseover="helpline('i')" onmouseout="helpline('tip')" />
<input type="button" class="btnbbcode" accesskey="u" name="addbbcode4" value=" u " style="text-decoration: underline; width: 30px;" onclick="bbstyle(4)" onmouseover="helpline('u')" onmouseout="helpline('tip')" />
<!-- IF S_BBCODE_QUOTE -->
<input type="button" class="btnbbcode" accesskey="q" name="addbbcode6" value="Quote" style="width: 50px" onclick="bbstyle(6)" onmouseover="helpline('q')" />
<input type="button" class="btnbbcode" accesskey="q" name="addbbcode6" value="Quote" style="width: 50px" onclick="bbstyle(6)" onmouseover="helpline('q')" onmouseout="helpline('tip')" />
<!-- ENDIF -->
<input type="button" class="btnbbcode" accesskey="c" name="addbbcode8" value="Code" style="width: 40px" onclick="bbstyle(8)" onmouseover="helpline('c')" />
<input type="button" class="btnbbcode" accesskey="l" name="addbbcode10" value="List" style="width: 40px" onclick="bbstyle(10)" onmouseover="helpline('l')" />
<input type="button" class="btnbbcode" accesskey="o" name="addbbcode12" value="List=" style="width: 40px" onclick="bbstyle(12)" onmouseover="helpline('o')" />
<input type="button" class="btnbbcode" accesskey="c" name="addbbcode8" value="Code" style="width: 40px" onclick="bbstyle(8)" onmouseover="helpline('c')" onmouseout="helpline('tip')" />
<input type="button" class="btnbbcode" accesskey="l" name="addbbcode10" value="List" style="width: 40px" onclick="bbstyle(10)" onmouseover="helpline('l')" onmouseout="helpline('tip')" />
<input type="button" class="btnbbcode" accesskey="o" name="addbbcode12" value="List=" style="width: 40px" onclick="bbstyle(12)" onmouseover="helpline('o')" onmouseout="helpline('tip')" />
<input type="button" class="btnbbcode" accesskey="t" name="addlitsitem" value="[*]" style="width: 40px" onclick="bbstyle(-1)" onmouseover="helpline('e')" onmouseout="helpline('tip')" />
<!-- IF S_BBCODE_IMG -->
<input type="button" class="btnbbcode" accesskey="p" name="addbbcode14" value="Img" style="width: 40px" onclick="bbstyle(14)" onmouseover="helpline('p')" />
<input type="button" class="btnbbcode" accesskey="p" name="addbbcode14" value="Img" style="width: 40px" onclick="bbstyle(14)" onmouseover="helpline('p')" onmouseout="helpline('tip')" />
<!-- ENDIF -->
<!-- IF S_LINKS_ALLOWED -->
<input type="button" class="btnbbcode" accesskey="w" name="addbbcode16" value="URL" style="text-decoration: underline; width: 40px" onclick="bbstyle(16)" onmouseover="helpline('w')" />
<input type="button" class="btnbbcode" accesskey="w" name="addbbcode16" value="URL" style="text-decoration: underline; width: 40px" onclick="bbstyle(16)" onmouseover="helpline('w')" onmouseout="helpline('tip')" />
<!-- ENDIF -->
<!-- IF S_BBCODE_FLASH -->
<input type="button" class="btnbbcode" accesskey="d" name="addbbcode18" value="Flash" onclick="bbstyle(18)" onmouseover="helpline('d')" />
<input type="button" class="btnbbcode" accesskey="d" name="addbbcode18" value="Flash" onclick="bbstyle(18)" onmouseover="helpline('d')" onmouseout="helpline('tip')" />
<!-- ENDIF -->
<span class="genmed" style="white-space: nowrap;">{L_FONT_SIZE}: <select class="gensmall" name="addbbcode20" onchange="bbfontstyle('[size=' + this.form.addbbcode20.options[this.form.addbbcode20.selectedIndex].value + ']', '[/size]');this.form.addbbcode20.selectedIndex = 2;" onmouseover="helpline('f')">
<span class="genmed" style="white-space: nowrap;">{L_FONT_SIZE}: <select class="gensmall" name="addbbcode20" onchange="bbfontstyle('[size=' + this.form.addbbcode20.options[this.form.addbbcode20.selectedIndex].value + ']', '[/size]');this.form.addbbcode20.selectedIndex = 2;" onmouseover="helpline('f')" onmouseout="helpline('tip')">
<option value="7">{L_FONT_TINY}</option>
<option value="9">{L_FONT_SMALL}</option>
<option value="12" selected="selected">{L_FONT_NORMAL}</option>
<option value="18">{L_FONT_LARGE}</option>
<option value="24">{L_FONT_HUGE}</option>
</select> | <a href="#" onclick="bbstyle(-1); return false;" onmouseover="helpline('a')">{L_CLOSE_TAGS}</a></span>
</select></span>
</td>
</tr>
<!-- IF .custom_tags -->
<tr valign="middle" align="left">
<td colspan="2">
<!-- BEGIN custom_tags -->
<input type="button" class="btnbbcode" name="addbbcode{custom_tags.BBCODE_ID}" value="{custom_tags.BBCODE_TAG}" onclick="bbstyle({custom_tags.BBCODE_ID})"<!-- IF custom_tags.BBCODE_HELPLINE !== '' --> onmouseover="helpline('cb_{custom_tags.BBCODE_ID}')"<!-- ENDIF --> />
<input type="button" class="btnbbcode" name="addbbcode{custom_tags.BBCODE_ID}" value="{custom_tags.BBCODE_TAG}" onclick="bbstyle({custom_tags.BBCODE_ID})"<!-- IF custom_tags.BBCODE_HELPLINE !== '' --> onmouseover="helpline('cb_{custom_tags.BBCODE_ID}')" onmouseout="helpline('tip')"<!-- ENDIF --> />
<!-- END custom_tags -->
</td>
</tr>