Автор: rps
Забавная безделушка, начало которой идёт из темы "Адаптировать phpBB-шный бб-код для наших форумов" на форуме поддержки. Идея эта впервые реализована на php-bb форумах, rps адаптировал её для нашей платформы.
Суть скрипта в том, что он позволяет оставлять мысли в виде текста и наиболее подходящего к нему смайла. Возможно, таким образом будет удобно флудить...
ХТМЛ-верх:

Код:

<script type="text/javascript">
FORUM.set('editor.think', { name : 'Добавить мысли', onclick : function() {make_code(); } } );
</script>
<style type="text/css">
td#button-think {
 background: url(http://st1.bbcorp.ru/i/information.png) no-repeat center !important;
 }

#think-area {
  position: absolute;
  z-index: 1000;
  top: 43px;
  right: 15px;
  padding: 1.5em;
  width: 500px;
}

#div_smiles p {
  padding-bottom: 0 !important;
}

#div_smiles span {
  display: inline;
}

.think_table {
  width: auto !important;
  table-layout: auto !important;
}

td.think_td {
  margin: 0; 
  padding: 0.2em !important;
  border-style: none !important;
}

.think_content {
  background-color: #eeee6f; 
  color: #000; 
  border-radius: 16px; 
  -webkit-border-radius: 16px; 
  -khtml-border-radius: 16px; 
  -moz-border-radius: 16px; 
  -o-border-radius: 16px; 
  border: 1px solid #fff; 
  padding: 3px 5px !important; 
  font-size: 1em;
}

#textarea, #input {
  width: 100%;
}

#close_button {
  margin-left: 15px;
}

.standart_smile {
  padding: 2px;
  cursor: pointer;
}

#hidden_link {
  text-decoration: none;
  border-bottom: 1px dotted;
}

.thought {
  padding-right: 7px;
  background: transparent url(http://s1.uploads.ru/i/D6VpZ.png) no-repeat top right;
  display: inline-block;
}
</style>

ХТМЛ-низ:

Код:

<script type="text/javascript">
var div; var i = 0; var t; var inp; var ta; var max = 10; var def_text = "Мысль потерялась..."; var def_smile = "http://s1.uploads.ru/i/t2jJV.gif";

var pic = new Array();
pic.push("http://www.kolobok.us/smiles/standart/acute.gif");
pic.push("http://www.kolobok.us/smiles/standart/ireful3.gif");
pic.push("http://www.kolobok.us/smiles/standart/blum2.gif");
pic.push("http://www.kolobok.us/smiles/standart/black_eye.gif");
pic.push("http://www.kolobok.us/smiles/standart/bad.gif");
pic.push("http://www.kolobok.us/smiles/standart/secret.gif");
pic.push("http://www.kolobok.us/smiles/standart/yahoo.gif");
pic.push("http://www.kolobok.us/smiles/standart/whistle2.gif");
pic.push("http://www.kolobok.us/smiles/standart/facepalm.gif");
pic.push("http://www.kolobok.us/smiles/standart/this.gif");
pic.push("http://www.kolobok.us/smiles/standart/agree.gif");
pic.push("http://www.kolobok.us/smiles/standart/black_eye.gif");
pic.push("http://www.kolobok.us/smiles/standart/grin.gif");
pic.push("http://www.kolobok.us/smiles/standart/help.gif");
pic.push("http://www.kolobok.us/smiles/standart/polling.gif");
pic.push("http://www.kolobok.us/smiles/standart/smoke.gif");
pic.push("http://www.kolobok.us/smiles/standart/sorry2.gif");
pic.push("http://www.kolobok.us/smiles/standart/umnik.gif");
pic.push("http://www.kolobok.us/smiles/standart/yu.gif");
pic.push("http://www.kolobok.us/smiles/standart/drinks.gif");


function make_div() {
 var fs; var z = 0; var new_div;
 fs = document.getElementsByTagName("div");
 for (z in fs) {
  if (fs[z].className == "fs-box hashelp") {
   new_div = document.createElement("div");
   new_div.id = "think-area";
   new_div.className = "container";
   new_div.style.display = "none";
   fs[z].appendChild(new_div);
  }
 }
}

function make_think(x) {
 var reg; var think; var j = 0; res = x.innerHTML; var smile; var text;
 reg = new RegExp("\\[think=([^\\]]+)\\]([^\\[\\]]+)\\[/think\\]", "g");
 if (reg.test(res)) {
  think = res.match(reg);
  for (j in think) {
   smile = think[j].substring(think[j].indexOf('[think=') + 7, think[j].indexOf(']'));
   text = think[j].substring(think[j].indexOf(']') + 1, think[j].indexOf('[/think]'));
   res = res.replace('[think=' + smile + ']' + text + '[/think]', '<table class="think_table" cellpadding="0" cellspacing="0"><tr><td class="think_td"><div class="think_content">' + text + '</div><span class="thought"><img src="' + smile + '" alt="" /></span></td></tr></table>');
  }
 }
 return res;
}

function make_bb_code() {
 t = document.getElementById("textarea").value;
 if (t == "") t = def_text;
 inp = document.getElementById("input").value;
 if (inp.indexOf("http://") == -1) inp = def_smile;
 bbcode('[think=' + inp + ']' + t + '','[/think]');
 changeVisibility('think-area');
}

function make_code() {
 var h = 0;
 changeVisibility('think-area');
 ta = document.getElementById("think-area");
 ta.innerHTML = "<textarea id='textarea' rows='5'>Введите текст мысли</textarea>";
 ta.innerHTML += "<div id='div_smiles'><p id='conteiner_smiles'><span id='visible_smiles'></span><span id='hidden_smiles' style='display: none;'></span></p><a id='hidden_link' style='cursor: pointer;' title='Показать или скрыть эмоции' onclick='document.getElementById(\"hidden_smiles\").style.display = (document.getElementById(\"hidden_smiles\").style.display == \"none\" ? \"inline\" : \"none\");'>Больше эмоций</a></div><br />";
 ta.innerHTML += "<input type='text' id='input' value='Вставьте ссылку на смайл' /><br /><br />";
 for (h in pic) {
  if (h < max) document.getElementById("visible_smiles").innerHTML += "<img class='standart_smile' src='" + pic[h] + "' alt='Эмоции' title='Нажмите, чтобы добавить' onclick='document.getElementById(\"input\").value = this.src;' />";
  else document.getElementById("hidden_smiles").innerHTML += "<img class='standart_smile' src='" + pic[h] + "' alt='Эмоции' title='Нажмите, чтобы добавить' onclick='document.getElementById(\"input\").value = this.src;' />";
 }
 ta.innerHTML += "<input type='button' class='button' value='Добавить' id='bb_buton' onclick='make_bb_code();' />";
 ta.innerHTML += "<input type='button' class='button' value='Закрыть' id='close_button' onclick='changeVisibility(\"think-area\");' />";
}

make_div();
div = document.getElementById("pun-main").getElementsByTagName("div");
for (i in div) {
 if (div[i].className == "post-content") div[i].innerHTML = make_think(div[i]);
}
</script>

Теперь немного о настройках.
В ХТМЛ-верх располагается скрипт создания новой кнопки в форме ответа и стиль всех элементов. При необходимости, можно поменять иконку

Код:

td#button-think {
 background: url(http://st1.bbcorp.ru/i/information.png) no-repeat center !important;
 }

на свою.
В ХТМЛ-низ доступны для изменения следующие параметры:

Код:

var max = 10;

Устанавливает число смайлов, показываемых по умолчанию в форме. Остальные будут скрыты и доступны по клику на ссылку "Больше эмоций".

Код:

var def_text = "Мысль потерялась...";

Устанавливает стандартный смайл-эмоцию, если пользователь не указал его.

Код:

var pic = new Array();

Набор смайлов-эмоций (в стандартном наборе 20 штук). Можно добавлять свои или удалить ненужные.
Спасибо mkusher за советы при разработке.
Скриншоты:

Ставить в html низ.

Код:

<script language="JavaScript"> 
if((document.getElementById("navpm").innerHTML.indexOf("(") != -1) && (document.URL.indexOf("messages.php") == -1)) {
document.write("<div id='messanger' class='section' style='position: fixed; right: 40%; top: 35%; z-index: 1000; width: 320px; height: 110px;'><h2 style='background-color: #08440c; color: #000; text-align: center;'>Оповещение</h2><div class='container' style='padding: 15px; text-align: center; background-color: #ebeaf0;'><span>Вам пришло новое личное сообщение</span><br /><br /> <span style='color: green;'>Чтобы прочесть его, нажмите на эту кнопку.</span><br /><br /><br /><a class='mess' onclick=\"window.open(href='/messages.php'); return false\" style='background-color: rgb(125, 158, 112); border-style: none; cursor: pointer; font-size: 20px;' >&nbsp;&nbsp;&nbsp;OK&nbsp;&nbsp;&nbsp;</a></div><embed height='1' width='1' type='application/x-shockwave-flash' wmode='transparent' quality='high' src='http://promobil.kiev.ua/engine/classes/flashplayer/media_player.swf?MediaLink=http://promobil.kiev.ua/uploads/files/1188937250_icq.mp3&amp;defaultMedia=1&amp;showPlayButton=false&amp;playOnStart=true'></div>");}
$(function(){$('.mess').click(function(){
$('#messanger').toggle();}); });
</script>

ставить в html низ. Прелесть кода в том, что можно самостоятельно изменять картинку.
Действие скрипта: слева на экране будет появляться картинка с уведомлением. Закрывается при нажатии на крестик.
пример действия:

код:

Код:

<div class="container"><div id=alertMess style="display:none;width: ШИРИНА КАРТИНКИpx; height: [b]ВЫСОТА КАРТИНКИ[/b]px;/* border:brown 1px solid;*/ top:42%;margin-left:-105px;position:fixed;z-index:100;"><img id=CloSandHid src=[b]"КАРТИНКА ЗАКРЫВАЮЩЕГО КРЕСТИКА[/b]" style="position:absolute;z-index:100;"/><img class=MyMessag src=[b]"КАРТИНКА САМОГО СООБЩЕНИЯ"[/b]/></div><script>function MiguN1(){$("#alertMess .MyMessag").fadeTo(1600,0.03,function(){$(this).fadeTo(1500,1,function(){return false});return false});return false}function setcookie(a,b,c){if(c){var d=new Date();d.setTime(d.getTime());d=new Date(d.getTime()+c*1000*60)}if(a&&b)document.cookie=a+'='+b+(c?'; expires='+d.toGMTString():'');else return false}function getcookie(a){var b=new RegExp(a+'=([^;]){1,}');var c=b.exec(document.cookie);if(c){c=c[0].split('=')}else{return false}return c[1]?c[1]:false}function timerZap(){timerID=setTimeout("MiguN1();timerZap();",3200);return}$("#CloSandHid").click(function(){setcookie("CloSandHid",true,15);if(getcookie("CloSandHid")){$("#alertMess").hide()}});if(!getcookie("CloSandHid")){$(document).ready(function(){if($("#navpm").text().indexOf("(")!=-1){timerID=setTimeout("$('#alertMess').fadeIn(2300);timerZap()",2300)}})}
</script></div>
</div

>

HTML-низ

выглядет так

Код:

<script type="text/javascript">
var nrisunok="https://forumupload.ru/uploads/0000/0a/f2/68797-1.gif";
if( (document.getElementById("navpm").innerHTML.indexOf("(") != -1))
{ 
document.getElementById("navpm").innerHTML="<img src='"+nrisunok+"'> "+document.getElementById("navpm").innerHTML;
};
</script>

выглядеть так

Код:

<script type="text/javascript">
str = document.getElementById("navpm").innerHTML
loc = new String(document.location)
if( (str.indexOf("(") != -1) &&  loc.indexOf('messages.php')==-1)
{  
  count = parseInt(str.substring(str.indexOf("(")+1,str.indexOf(")")))
  if (count==1) text="  У вас есть 1 новое сообщение"
  else if (count>1 && count<5) text=" У вас есть " +count+" новых сообщения"
  else text="У вас есть " +count+" новых сообщений"
  msg =  "<div id=\"new-mes\" class=\"container\" style=\"position: absolute; z-index=2; left: 40%; text-align: center;\">"
  msg += text
  msg += "<br><a href=\"\" onclick=\"document.location.replace('messages.php'); document.getElementById('new-mes').style.display='none';return false;\">( Посмотреть личные сообщения )</a>"
  msg +="<br><br><a href=\"\" onclick=\"document.getElementById('new-mes').style.display='none'; return false\"><center>( Закрыть окно )</center></a>\r\n"  
  msg += "</div>"
  document.getElementById("pun-status").innerHTML += msg
}
</script>