Topic: [Release] Smiley Browser (JavaScripted scrolling smilies list)
This is a modification of the PunBB 1.3.2 extension "BBCode Buttons", version 1.2.1 bar.php, thus has no hook to extend. We wouldn't want a hook anyway, because we need to replace code.
/forum/extensions/pun_bbcode/bar.php
At Line 56 we see:
foreach ($tags as $filename => $tag)
{...
}This foreach() will end at Line 79, and continues through building a list of smilies in <img> tags. After the previously mentioned foreach() loop, we want to replace the remainder of the file beginning at Line 81.
Line 81, to EOF:
/**
* Smiley Browser.
* Build a scrolling list of the available smilies.
*
* @author whatrevolution - http://www.honestlyillustrated.com
* @license GPL - http://www.gnu.org/copyleft/gpl.html
* @package honest_quick_smilies
*/
// Setup values for smiley set
$smilies = array_unique($smilies);
$smile_count = count($smilies);
$smile_limit = 5;
$smile_index = 0;
?>
</div>
<script type="text/javascript">
smile_img = new Image();
smile_img_new = new Image();
smile_count = <?php echo $smile_count; ?>;
var smile_index = new Array();
var i = <?php echo $smile_index; ?>;
var limit = <?php echo $smile_limit; ?>;
while (i <= limit) {
smile_index[i] = i;
i++;
}
var smilies = new Array();
var smilies_text = new Array();
smilies_text.push(<?php
foreach ($smilies as $smile_text => $smile_file) {
echo '"'.$smile_text.'", ';
}
?>"");
smilies.push(<?php
foreach ($smilies as $smile_text => $smile_file) {
echo '"'.$smile_file.'", ';
}
?>"");
function bbCodePreview(i) {
if (i != 'none') {
preview = "URL("+document.getElementById('smile-'+i).src+") no-repeat center center";
txt = 'Click to insert '+document.getElementById('smile-'+i).alt+' at text cursor.';
}
else {
preview = "none";
txt = '';
}
document.getElementById('pun_bbcode_smile_preview').style.background = preview;
document.getElementById('pun_bbcode_smile_text').innerHTML = txt;
}
function bbCodeToggle(change) {
var c = <?php echo $smile_index; ?>;
var limit = <?php echo $smile_limit; ?>;
while (limit) {
var changed = eval(smile_index[c]+change);
if (changed < 0) {
changed = eval(changed+smile_count);
} else if (changed > eval(smile_count-1)) {
changed = eval(changed-smile_count);
}
smile_index[c] = changed;
smile_img_new.src = '<?php echo $base_url; ?>/img/smilies/'+smilies[smile_index[c]];
if ( !smile_img.src || (smile_img_new.src != smile_img.src) ) {
document.getElementById('smile-'+c).src = smile_img_new.src;
document.getElementById('smile-'+c).alt = smilies_text[smile_index[c]];
limit--;
}
c++;
}
// This will show you the image index
//document.getElementById('pun_bbcode_smile_text').innerHTML = change+' :: '+smile_index[0]+' : '+smile_index[1]+' : '+smile_index[2]+' : '+smile_index[3]+' : '+smile_index[4]+' : '+smile_index[5]+' : '+smile_index[6]+' : '+smile_index[7]+' : '+smile_index[8]+' : '+smile_index[9];
}
</script>
<div id="pun_bbcode_smile_preview">
</div>
<div id="pun_bbcode_smilies">
<h4>Smiley Browser <noscript>(requires JavaScript)</noscript></h4>
<div id="pun_bbcode_smilies_list">
<a href="javascript:bbCodeToggle('-1')"><<<</a>
<?php
// Display the smiley set
foreach ($smilies as $smile_text => $smile_file) {
echo '<a onMouseOver="bbCodePreview(\''.$smile_index.'\')" onMouseOut="bbCodePreview(\'none\')" href="javascript:insert_text(smilies_text[smile_index['.$smile_index.']]+\' \', \'\');" tabindex="'.($tabindex--).'"><img id="smile-'.$smile_index.'" src="'.$base_url.'/img/smilies/'.$smile_file.'" alt="'.$smile_text.'" /></a>'."\n";
$smile_index++;
if ($smile_index >= $smile_limit) break;
}
?> <a href="javascript:bbCodeToggle('+1')">>>></a>
</div>
</div>
<span id="pun_bbcode_smile_text" style="clear:both;">
</span>
</div>
</div>This change provides a left and right arrow, which scrolls a limited list of images from the $smilies array. Left is -1, Right is +1 to the indexed list. The list wraps onto itself in a loop.
The result resembles this:
Now you want to style those new elements by doing something like this in StyleName_cs.css:
.brd #pun_bbcode_smilies {
position: relative;
right: 5px; top:5px;
width:auto; height:auto;
text-align: center;
}
.brd #pun_bbcode_smilies a > img {
width:15px; height:15px;
}
.brd #pun_bbcode_smilies > h4 {
border-bottom: 1px solid #700000;
margin: 0; padding: .1em .1em .5em .1em;
font-size: 11pt;
text-align: center;
}
.brd #pun_bbcode_smilies > h4 > noscript {
font-size: .6em;
font-weight: bold;
}
.brd #pun_bbcode_smilies_list {
background: #280000;
border: 2px solid #700000;
border-width: 0 1px 1px 1px;
margin: 0; padding: .25em .1em;
text-align: center;
}
.brd #pun_bbcode_smile_preview {
border:1px solid #911;
float:right;
width:75px;height:75px;
}
.brd #pun_bbcode_smile_text {
display: block;
float: left;
height: 1.5em;
padding: .1em;
}I get this result:
Now install my Quick Smilies extension, to have all of your smilies added to this interactive list, automagically.
The combined result will be:
