Панель BB-кодов

Общая информация

Панель управления BB-кодов помогает производить быструю подстановку кодов в форму ввода. Инсталлизировать её можно с помощью добавления класса .bbpanel к textarea или напрямую через Javascript.

После инсталлизации textarea будет помещена в контейнер с классом .bbpanel, а у формы этот класс будет заменен на .bbpanel-form

Разметка

<textarea class="bbpanel"></textarea>

Пример работы кода выше

Javascript

Данная панель полностью зависит от Javascript, по этому без его поддержки она работать не будет. По умолчанию инсталлизация происходит благодаря триггеру .bbpanel в форме, но вы можете произвести инсталлизацию и вручную с помощью создания экземпляра класса PipUI.BBPanel(...)

Инициализация

<textarea class="input" id="myform"></textarea>

<script>
    let panel = new PipUI.BBPanel('#myform');
</script>

Пример работы кода выше

Конструктор данного класса поддерживает 2 параметра: HTMLElement и Object

Первый параметр - объект или строка ссылающаяся на элемент.

Второй параметр - объект опций

Опции

// Выводить в консоль отладку
debug: false

// Класс, добавляемый форме ввода при выводе панели
focusClass: 'focus'

// Класс, заменяемый класс .bbpanel в форме
formClass: 'bbpanel-form'

// Настройки появляющейся панели при выделении текста
popup: {
	// Включено или выключено
	enable: true
	
	// Теги, выводимые в данной панели
	format: 'b,i,u,s,|,left,center,right,|,urlAlt'
	
	// Шаблон данной панели
	template: '<div class="popup-list"></div>'
	
	// Класс, добавляемый данной панели при выводе её на экран
	activeClass: 'popup-active'
}

// Отображать стилизованные подсказки при наведении на BB-коды в панели
tooltip: true

// Функция обратного вызова срабатываемая при отображении панели
showCallback: undefined,

// Функция обратного вызова срабатываемая при скрытии панели
hideCallback: undefined

// Функция обратного вызова срабатываемая при вызове обращения к коду
callcodeCallback: undefined

// Функция обратного вызова срабатываемая при работе функции UNDO	
undoCallback: undefined

// Функция обратного вызова срабатываемая при работе функции REDO
redoCallback: undefined

// Функция обратного вызова срабатываемая при изменении панели
changeCallback: undefined

// Теги выводимые в панели BB-кодов
format: 'undo,|,redo,|,b,i,u,s,|,left,center,right,|,size,color,|,spoiler,quote,code,|,img,youtube,|,urlAlt,line,|,hide'

// Максимальный размер истории запоминаемый при использовании Undo/Redo
maxHistory: 64

// Настройки кодов панели. Вы можете добавлять собственные коды или изменять существующие
// Каждый элемент должен быть стилизован на подобии остальных.
codes: {...}

// Настройки шаблонов панели
templates: {}

Методы

let bbpanel = new PipUI.BBPanel('#myform');

bbpanel.getID() // Вернет уникальный идентификатор панели

bbpanel.setOptions(object) // Изменить опции панели

bbpanel.getOptions() // Получить опции панели

bbpanel.hide(callback) // Скрыть панель
// Параметр callback является приоритетной функцией обратного
// вызова при завершении скрытия, если она задана и через опции

bbpanel.show(callback) // Показать блок
// Параметр callback является приоритетной функцией обратного
// вызова при завершении отображения, если она задана и через опции

bbpanel.callCode(key, callback) // Вызвать указанный код
// Параметр callback является приоритетной функцией обратного
// вызова при вызове кода, если она задана и через опции

bbpanel.change(callback) // Обновить содержимое панели
// Параметр callback является приоритетной функцией обратного
// вызова при обновлении панели, если она задана и через опции

bbpanel.undo(callback) // Вызвать функцию undo
// Параметр callback является приоритетной функцией обратного
// вызова при шаге назад, если она задана и через опции

bbpanel.redo(callback) // Вызвать функцию redo
// Параметр callback является приоритетной функцией обратного
// вызова при шаге вперёд, если она задана и через опции

bbpanel.isOpen() // Текущее состояние панели

События

Триггер	Описание	Инициатор
hide-bbpanel-pipui	Срабатывает при скрытии панели BB-кодов	.bbpanel-form
show-bbpanel-pipui	Срабатывает при отображении панели BB-кодов	.bbpanel-form
change-bbpanel-pipui	Срабатывает при изменении панели	.bbpanel-form
callcode-bbpanel-pipui	Срабатывает при вызове какого-либо кода из панели	.bbpanel-form
undo-bbpanel-pipui	Срабатывает при вызове функции шага назад	.bbpanel-form
redo-bbpanel-pipui	Срабатывает при вызове функции шага вперёд	.bbpanel-form