textareasmiles

Поле для ввода текста со смайликами.

by Valeriy Brunov

HTML

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div class="wrap-textarea-smiles">
    <div class="textarea-smiles">
        <div class="placeholder">Ваш комментарий</div>
        <div class="textarea" contenteditable="true" tabindex="-1"></div>
    </div>
    <div class="box-smiles"></div>
    <button type="button" class="btn-smile">
        <svg viewBox="-1 -1 24 24" xmlns="http://www.w3.org/2000/svg">
            <path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm3.5-9c.83 0 1.5-.67 1.5-1.5S16.33 8 15.5 8 14 8.67 14 9.5s.67 1.5 1.5 1.5zm-7 0c.83 0 1.5-.67 1.5-1.5S9.33 8 8.5 8 7 8.67 7 9.5 7.67 11 8.5 11zm3.5 6.5c2.33 0 4.31-1.46 5.11-3.5H6.89c.8 2.04 2.78 3.5 5.11 3.5z" />
        </svg>
    </button>
</div>
<input class="sub-text-smiles" type="submit" name="mytext" value="Отправить">

CSS

html div.wrap-textarea-smiles,
body div.wrap-textarea-smiles,
div.wrap-textarea-smiles span,
div.wrap-textarea-smiles applet,
div.wrap-textarea-smiles object,
div.wrap-textarea-smiles iframe,
div.wrap-textarea-smiles h1,
div.wrap-textarea-smiles h2,
div.wrap-textarea-smiles h3,
div.wrap-textarea-smiles h4,
div.wrap-textarea-smiles h5,
div.wrap-textarea-smiles h6,
div.wrap-textarea-smiles p,
div.wrap-textarea-smiles blockquote,
div.wrap-textarea-smiles pre,
div.wrap-textarea-smiles a,
div.wrap-textarea-smiles abbr,
div.wrap-textarea-smiles acronym,
div.wrap-textarea-smiles address,
div.wrap-textarea-smiles big,
div.wrap-textarea-smiles cite,
div.wrap-textarea-smiles code,
div.wrap-textarea-smiles del,
div.wrap-textarea-smiles dfn,
div.wrap-textarea-smiles em,
div.wrap-textarea-smiles img,
div.wrap-textarea-smiles ins,
div.wrap-textarea-smiles kbd,
div.wrap-textarea-smiles q,
div.wrap-textarea-smiles s,
div.wrap-textarea-smiles samp,
div.wrap-textarea-smiles small,
div.wrap-textarea-smiles strike,
div.wrap-textarea-smiles strong,
div.wrap-textarea-smiles sub,
div.wrap-textarea-smiles sup,
div.wrap-textarea-smiles tt,
div.wrap-textarea-smiles var,
div.wrap-textarea-smiles b,
div.wrap-textarea-smiles u,
div.wrap-textarea-smiles i,
div.wrap-textarea-smiles center,
div.wrap-textarea-smiles dl,
div.wrap-textarea-smiles dt,
div.wrap-textarea-smiles dd,
div.wrap-textarea-smiles ol,
div.wrap-textarea-smiles ul,
div.wrap-textarea-smiles li,
div.wrap-textarea-smiles fieldset,
div.wrap-textarea-smiles form,
div.wrap-textarea-smiles label,
div.wrap-textarea-smiles legend,
div.wrap-textarea-smiles table,
div.wrap-textarea-smiles caption,
div.wrap-textarea-smiles tbody,
div.wrap-textarea-smiles tfoot,
div.wrap-textarea-smiles thead,
div.wrap-textarea-smiles tr,
div.wrap-textarea-smiles th,
div.wrap-textarea-smiles td,
div.wrap-textarea-smiles article,
div.wrap-textarea-smiles aside,
div.wrap-textarea-smiles canvas,
div.wrap-textarea-smiles details,
div.wrap-textarea-smiles...

JavaScript

/**
 * Виджет "textareasmiles".
 */
$.widget("element.textareasmiles", {

    /**
     * Список значений и настроек по умолчанию.
     *
     * @param {int} k
     * 		Коэффициент высоты текстового поля, когда оно находится в фокусе.
     * @param {int} height_box_smiles
     * 		Высота панели в "px" со смайлами.
     * @param {string} urlAJAX
     *    Адрес запроса AJAX кода.
     * @param {string} method
     *    Метод отправки данных на сервер ( GET|POST ).
     * @param {string} datatype
     *    Тип возвращаемого объекта AJAX-кодом ( html|json|xml|script|text ).
     * @param {string} openside
     *    В какую сторону раскрывать панель со смайликами (bottom|top|auto).
     */
    options: {
        k: 3.2,
        height_box_smiles: 50,
        urlAJAX: null,
        method: "POST",
        datatype: "json",
        openside: "top",
    },

    /**
     * @type {boolean}
     *     Указывает на отображение панели со смайликами: "false" - панель скрыта; "true" - панель показана.
     */
    _flagsmile: false,

    /**
     * @type {boolean} _flagtextarea
     *     Указывает на отображение текстового поля для ввода текста: "false" - показан плейсхолдер, а текстовое поле скрыто; "true" - текстовое поле показано, а плейсхолдер скрыт.
     */
    _flagtextarea: false,

    /**
     * Конструктор плагина.
     */
    _create: function() {

        // Основные объекты.
        this.div_placeholder = this.element.find('div.textarea-smiles').find('div:first');
        this.div_textarea = this.element.find('div.textarea-smiles').find('div:last[contenteditable="true"]');
        this.btn_smile = this.element.find('button.btn-smile');
        this.box_smiles = this.element.find('div.box-smiles');
        this.sub_text_smiles = this.element.next();

        // Устанавливаем необходимые параметры для AJAX-запроса.
        if (this.options.urlAJAX) {
            this._urlAJAX = this.options.urlAJAX;
            this._method = this.options.method;
           ...