Вебдизайн и Техническая поддержка
Skype: disbb.ru
Контакты: обратная связь
Часы работы:
Пн-Пт 10:00-18:00
* по московскому времени


Смайлы с комментариями (rps)


Скриншот

  • Новые смайлы в форме ответа с возможностью добавления к ним текста в виде мыслей/фраз смайликов.
  • Автор: rps
  • Платформа: MyBB
  • Категория: Форма ответа и создание постов
  • Оценка: 5.0/1
  • 12.06.2015, 14:11

Скриншот Скриншот

Забавная безделушка, начало которой идёт из темы "Адаптировать 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 def_smile = "http://s1.uploads.ru/i/t2jJV.gif";

Устанавливает стандартный смайл-эмоцию, если пользователь не указал его.
Код
var pic = new Array();

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

Просмотров: 734, Загрузок: 0, Оценка: 5.0 (1)
Страницы:
Имя *:
Email *:
Код *:
Сайт создан в системе uCoz