Личные смайлики

Заходим в ПА -  ПОЛЬЗОВАТЕЛИ & ГРУППЫ - Профили и создаём новое поле.


Имя и описание - не критично.

В содержимое по умолчанию ставим это :

Код:

[table class="fa_personal_emoticons"][tr][td][/td][/tr][/table]

Ставим скрипт с расположением на всех страницах :

Код:

 $(function() {
  'DEVELOPED BY ANGE TUTEUR';
  'NO DISTRIBUTION WITHOUT CONSENT OF THE AUTHOR';
  'ORIGIN : http://fmdesign.forumotion.com/t1012-user-generated-emoticons#21094';
 
  if (!window.localStorage) return;
 
  window.fa_pemoticons_config = {
    hide_field : false, // скройте/покажите поле на профиле
    position : 'top', // позиция персональных эмотиконов; вершина или нижняя часть
 
    // language settings
    lang : {
      title : 'Личные смайлики',
      desc : 'Вы можете управлять своими личными смайликами ниже. Эти смайлики покажутся в редакторе, как только Вы обновите свой профиль.',
      update : 'Обновить',
      upload : 'Закачка',
      cancel : 'Отмена',
      add : 'Добавьте больше',
      delete : 'Удалить',
      up : 'Переместить вверх',
      down : 'Переместить вниз'
    }
  };
 
 
  // load handler for iframes
  // adds custom emoticons once the frame is loaded
  window.fa_pemoticons_load = function() {
    var insertEmoticon = function () {
      $('#text_editor_textarea').sceditor('instance').insert('[img]' + this.src + '[/img] ');
    },
 
    injectEmoticons = function (emotes, body) {
      if (fa_pemoticons_config.position.toLowerCase() == 'top') {
        body.insertBefore(emotes, body.firstChild.nextSibling);
      } else {
        body.appendChild(emotes);
      }
    },
 
    body = $(this).contents().find('body')[0],
    div = $('<div id="fa_personal_emoticon_list" />')[0];
 
    if (body) {
 
      if (localStorage['fa_pemoticons_u' + _userdata.user_id]) {
        div.innerHTML = localStorage['fa_pemoticons_u' + _userdata.user_id];
 
        for (var a = div.getElementsByTagName('IMG'), i = 0, j = a.length; i < j; i++) {
          a[i].onclick = insertEmoticon;
        }
 
        injectEmoticons(div, body);
 
      } else {
        $.get('/u' + _userdata.user_id, function(d) {
          var emoticons = $('.fa_personal_emoticons img', d),
              i = 0,
              j = emoticons.length;
 
          if (j) {
            for (; i < j; i++) {
              emoticons[i].onclick = insertEmoticon;
 
              div.appendChild(emoticons[i]);
              div.appendChild(document.createTextNode('\u00A0'));
            }
          }
 
          localStorage['fa_pemoticons_u' + _userdata.user_id] = div.innerHTML;
          injectEmoticons(div, body);
        });
      }
 
    }
  };
 
 
  // add load handlers for each iframe
  $(function() {
    var button = $('.sceditor-button-emoticon')[0];
 
    if (button) {
      button.onclick = function() {
        document.getElementById('quickEmojInternal').onload = fa_pemoticons_load;
        this.onclick = null;
      };
    }
 
    $('iframe[src^="/smilies"]').load(fa_pemoticons_load);
  });
 
 
  // hide field in profile
  if (fa_pemoticons_config.hide_field) {
    $('.fa_personal_emoticons').closest('[id^="field_id"]').hide();
  }
 
 
  // editing of profile field
  if (/\/profile|\/u\d+/.test(window.location.href)) {
    for (var a = document.getElementsByTagName('TEXTAREA'), i = 0, j = a.length; i < j; i++) {
      if (/class="fa_personal_emoticons"/.test(a[i].value) && /profile_field/.test(a[i].id)) {
 
        // define global object
        window.fa_pemoticons = {
 
          // add new input to pemoticons_box
          add : function (value) {
            $('#pemoticons_box', fa_pemoticons.popup).append(
              '<div class="pemoticon_row">'+
                '<img class="pemoticon_preview" src="' + ( value ? value : 'http://illiweb.com/fa/empty.gif' ) + '" />'+
                '<input class="pemoticon_value inputbox" type="text" value="' + ( value ? value : '' ) + '" oninput="fa_pemoticons.preview(this)" />'+
                '<a class="pemoticons_action pemoticons_plus" href="#" onclick="fa_pemoticons.add(); return false;" title="' + fa_pemoticons_config.lang.add + '">+</a>'+
                '<a class="pemoticons_action pemoticons_minus" href="#" onclick="fa_pemoticons.remove(this); return false;" title="' + fa_pemoticons_config.lang.delete + '">-</a>'+
                '<a class="pemoticons_action pemoticons_up" href="#" onclick="fa_pemoticons.moveUp(this); return false;" title="' + fa_pemoticons_config.lang.up + '">▲</a>'+
                '<a class="pemoticons_action pemoticons_down" href="#" onclick="fa_pemoticons.moveDown(this); return false;" title="' + fa_pemoticons_config.lang.down + '">▼</a>'+
              '</div>'
            ).scrollTop(9999);
          },
 
 
          // remove input from pemoticons_box
          remove : function (that) {
            that.parentNode.parentNode.removeChild(that.parentNode);
          },
 
 
          // move the emoticon up in the list
          moveUp : function (that) {
            var prev = that.parentNode.previousSibling;
 
            if (prev) {
              prev.parentNode.insertBefore(that.parentNode, prev);
            }
          },
 
 
          // move the emoticon down in the list
          moveDown : function (that) {
            var next = that.parentNode.nextSibling,
                nextNext;
 
            if (next) {
              nextNext = next.nextSibling;
 
              if (nextNext) {
                next.parentNode.insertBefore(that.parentNode, nextNext);
              } else {
                next.parentNode.appendChild(that.parentNode);
              }
            }
          },
 
 
          // update the emoticon preview
          preview : function (that) {
            that.previousSibling.src = that.value ? that.value : 'http://illiweb.com/fa/empty.gif';
          },
 
 
          // update textarea with new value
          update : function () {
            var emoticons = $('.pemoticon_value', fa_pemoticons.popup),
                newVal = '[table class="fa_personal_emoticons"][tr][td]',
                i = 0,
                j = emoticons.length;
 
            for (; i < j; i++) {
              if (emoticons[i].value) {
                newVal += '[img]' + emoticons[i].value + '[/img]';
              }
            }
 
            fa_pemoticons.textarea.value = newVal + '[/td][/tr][/table]';
            fa_pemoticons.cancel();
 
            localStorage.removeItem('fa_pemoticons_u' + _userdata.user_id); // clear emoticon cache
          },
 
 
          // remove popup
          cancel : function () {
            document.body.style.overflow = '';
            document.body.removeChild(fa_pemoticons.popup);
            fa_pemoticons.popup = null;
          },
 
 
          // open servimg upload
          upload : function () {
            var win = window.open('http://www.servimg.com/',  '_blank', 'width=620,height=300');
 
            $.get('/privmsg?mode=post', function(d) {
              var email = d.match(/var servImgAccount = '(.*?)';/i),
                  id = d.match(/var servImgId = '(.*?)';/i),
                  f = d.match(/var servImgF = '(.*?)';/i);
 
              if (email && id && f && email[1] && id[1] && f[1]) {
                win.location.href = 'http://www.servimg.com/multiupload.php?&mode=fae&account=' + email[1] + '&id=' + id[1] + '&f=' + f[1];
              }
            });
          },
 
          popup : null,
          textarea : null
        };
 
 
        // assign handler to textarea to show popup
        a[i].onfocus = function() {
          this.blur();
 
          if (fa_pemoticons.popup) {
            fa_pemoticons.cancel();
          }
 
          var popup = $(
            '<div id="pemoticons_overlay">'+
              '<div id="pemoticons_modal">'+
                '<h1>' + fa_pemoticons_config.lang.title + '</h1>'+
                '<p>' + fa_pemoticons_config.lang.desc + '</p>'+
                '<div id="pemoticons_box"></div>'+
                '<div style="text-align:center;">'+
                  '<input type="button" class="button1" value="' + fa_pemoticons_config.lang.update + '" onclick="fa_pemoticons.update();" />'+
                  '&nbsp;'+
                  '<input type="button" class="button1" value="' + fa_pemoticons_config.lang.upload + '" onclick="fa_pemoticons.upload();" />'+
                  '&nbsp;'+
                  '<input type="button" class="button1" value="' + fa_pemoticons_config.lang.cancel + '" onclick="fa_pemoticons.cancel();" />'+
                '</div>'+
              '</div>'+
            '</div>'
          )[0],
 
          emoticons = this.value.match(/\[img\].*?\[\/img\]/gmi),
          i = 0,
          j = emoticons ? emoticons.length : 0;
 
          fa_pemoticons.popup = popup;
          fa_pemoticons.textarea = this;
 
          if (j) {
            for (; i < j; i++) {
              fa_pemoticons.add(emoticons[i].replace(/^\[img\]|\[\/img\]$/ig, ''));
            }
          } else {
            fa_pemoticons.add();
          }
 
          document.body.style.overflow = 'hidden';
          document.body.appendChild(popup);
        };
 
 
        // add modal styles to the document
        $('head').append(
          '<style type="text/css">'+
          '#pemoticons_overlay { font-family:arial; background:rgba(0, 0, 0, 0.5); position:fixed; top:0; right:0; bottom:0; left:0; z-index:99999; }'+
          '#pemoticons_modal { background:#EEE; width:290px; height:300px; border:1px solid #CCC; position:absolute; top:50%; margin-top:-150px; left:50%; margin-left:-145px; overflow:auto; }'+
          '#pemoticons_box { height:160px; text-align:center; margin:3px; overflow:auto; }'+
          '#pemoticons_modal p { font-size:12px; margin:0; }'+
          '#pemoticons_modal h1 { font-size:24px; margin:0; }'+
          '#pemoticons_modal h1, #pemoticons_modal p, #pemoticons_modal div { padding:3px; }'+
          'a.pemoticons_action { background:#69C; font-size:20px; color:#FFF; text-align:center; text-decoration:none; display:inline-block; height:16px; width:16px; line-height:16px; vertical-align:middle; margin:1px; border-radius:100%; }'+
          'a.pemoticons_up, a.pemoticons_down { font-size:10px; }'+
          'a.pemoticons_down { line-height:18px; }'+
          'a.pemoticons_minus { line-height:13px; }'+
          'a.pemoticons_action:hover { opacity:0.7 }'+
          'img.pemoticon_preview { width:20px; max-height:30px; vertical-align:middle; }'+
          'input.pemoticon_value { margin:0 3px; width:130px; }'+
          '</style>'
        );
 
        break;
      }
    }
  }
});

Смайлики появятся в общем списке.

Результат :

Небольшое замечание.. При создании поля не забудьте подтвердить содержимое по умолчанию.


Когда сохраните профиль, снова откройте его для изменения нажмите "Заменить содержимое".

Как пользоваться..
Жмём "Профиль" и далее кликаем на поле с таблицей.


На анимашке я добавил и удалил смайлик.
Не забываем сохранять профиль после проделанных операций.

Вы можете вместо кода по умолчанию во всех профилях выше вставить список смайликов. Для этого добавляете себе смайлики в профиль, затем полученную таблицу копируете и меняете в ПА - "Блок текста"