Smilies with comments (MyBB) [rps]

Smilies with comments
New smilies in the form of a response with the possibility of adding to them text in the form of thoughts / phrases of emoticons.

Author: rps
Platform: MyBB

Funny thing, the beginning of which comes from the topic "Adapt the phpBB code for our forums" on the support forum. This idea was first implemented on phpbb forums, rps adapted it for our platform.
The essence of the script is that it allows you to leave thoughts in the form of text and the most suitable smile to it. Perhaps this way it will be convenient to flood...

HTML-верх (Admin > Options: 1st form)

Code:

<script type="text/javascript">
FORUM.set('editor.think', { name : 'Add thoughts', 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>

HTML-низ (Admin > Options: 2nd form)

Code:

<script type="text/javascript">
var div; var i = 0; var t; var inp; var ta; var max = 10; var def_text = "Thought was lost..."; 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'>Enter your thoughts</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='Show or hide emotions' 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='Paste the link to the smile' /><br /><br />";
 for (h in pic) {
  if (h < max) document.getElementById("visible_smiles").innerHTML += "<img class='standart_smile' src='" + pic[h] + "' alt='Emotions' title='Click to add' onclick='document.getElementById(\"input\").value = this.src;' />";
  else document.getElementById("hidden_smiles").innerHTML += "<img class='standart_smile' src='" + pic[h] + "' alt='Emotions' title='Click to add' 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>

Now a little about the settings.
In HTML-top there is a script for creating a new button in the form of an answer and the style of all the elements. If necessary, you can change the icon to your own:

Code:

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

In the HTML-bottom, the following parameters are available for modification:

Code:

var max = 10;

Sets the number of smileys displayed by default on the form. The rest will be hidden and accessible by clicking on the link "More emotions".

Code:

var def_text = "Thought was lost...";

Sets the standard phrase of the thought, if the user did not specify anything.

Code:

var def_smile = "http://s1.uploads.ru/i/t2jJV.gif";

Sets the standard smile emotion if the user did not specify it.

Code:

var pic = new Array();

A set of smiles-emotions (in the standard set there are 20 smiles). You can add your own or delete unnecessary ones.

ForumD.ru - Design for forums and technical support

Forum navigation

User links

User info

Smilies with comments (MyBB) [rps]

Posts 1 to 1 of 1

Share112.06.2018 18:35:18