JavaScript

В KodiCMS часть элементов верстки передается на обработку JavaScript

FontAwesome icons

<span data-icon="user">Text</span>   =>   <span><i class="fa fa-sort"> Text</i></span>

Для вставки после текста:

<span data-icon-prepend="user">Text</span>   =>   <span>Text <i class="fa fa-sort"></i></span>

Варинты можно комбинировать

При получении HTML кода через AJAX он может не преобразовать data-icon="" в HTML код, для преобразования можно выполнить JS код CMS.ui.init('icon')

resources\assets\js\cms\ui.js Искать .add('icon

---

Tabs

В качесте основы используется bootstrap блок panel http://getbootstrap.com/components/#panels. Блок panel должен содержать css класс tabbable, при нахождении которого JS преобразует его во вкладки. Каждая новая вкладка должна начинаться с panel-heading, после нее должен быть panel-body

<div class="panel tabbable">
   <div class="panel-heading">
      <span class="panel-title">Tab1</span>
   </div>
   <div class="panel-body">
      // Tab content
   </div>
   <div class="panel-heading">
      <span class="panel-title">Tab2</span>
   </div>
   <div class="panel-body">
      // Tab content
   </div>
</div>

resources\assets\js\cms\ui.js Искать .add('tabbable

---

Flags

resources\assets\js\cms\ui.js Искать .add('flags

---

Datepicker

http://xdsoft.net/jqplugins/datetimepicker/

Для даты и времени

<input class="form-control datetimepicker" name="created_at" type="text" value="2015-06-26 08:45:40">

Для даты

<input class="form-control datepicker" name="created_at" type="text" value="2015-06-26">

Для времени

<input class="form-control timepicker" name="created_at" type="text" value="08:45:40">

resources\assets\js\cms\ui.js Искать .add('datepicker

---

Slug

Преобразование контента поля в slug

Для поля необходимо указать css класс slugify

<input class="form-control slugify" name="slug" type="text" value="news">

Дополнительные параметры:

• data-separator="_" (По умолчанию: "-")

Также для удобства можно связать поле с полем, чей контент необходимо преобразовывать в slug

<input class="slug-generator form-control" name="title" type="text" value="News">

По умолчанию происходит передача данных в поле с классом slugify, для передачи данных в другое поле, необходимо указать data-slug="#selector"

resources\assets\js\cms\ui.js Искать .add('slug

---

Select2

https://select2.github.io/

resources\assets\js\cms\ui.js Искать .add('select2

---

Hotkeys

{!! Form::button('', [
   'data-icon' => 'plus',
   'class' => 'btn btn-primary',
   'data-hotkeys' => 'ctrl+a'
]) !!}

Global hotkeys

• shift+f1 - Очистка кеша
• shift+f2 - Обновление блоков в шаблоне
• ctrl+shift+l - Выход

resources\assets\js\cms\ui.js Искать .add('hotkeys

---

Select all checkbox

resources\assets\js\cms\ui.js Искать .add('select_all_checkbox

---

Modal window

http://bootboxjs.com/

resources\assets\js\cms\ui.js Искать .add('bootbox

---

Popup

Работа с popup окнами. Работает на основе http://www.jacklmoore.com/colorbox/

//Открытие Popup окна с переданным HTML кодом
Popup.openHTML('HTML', Object params, parent);

// Вывод данных с другой страницы через iframe. При открытии страниц админ панели, выводится только контент, без навигации.
Popup.openIframe(href, Object params, parent);

// Закрытие popup
Popup.close();

// resources\assets\js\cms\popup.js

---

API

Выполнение API запросов

Api.get(url, Object data, function(response) {
	console.log(response);
}, async);


Api.post(url, Object data, function(response) {
	console.log(response);
}, async);

Api.put(url, Object data, function(response) {
	console.log(response);
}, async);

Api.delete(url, Object data, function(response) {
	console.log(response);
}, async);

При выполнении запроса происходит вызов события, на которое можно подписаться

Api.get('/api.user.get', {id: 1}, function(response) {
	...
})

var event = 'get:api.user.get'; // Все слешы преобразуются в ":"
// or
var event = Api.getEventKey('get', '/api.user.get');

$('body').on(Api.getEventKey('get', '/api.user.get'), function(e, response) {

	console.log(response);

});

// resources\assets\js\cms\api.js

---

Preloader

Прелоадер показывает процесс загрузки в момент выполнения какой либо операции

var container = 'body';
// or
var container = $('body');

// Если container не указан, то он будет показываться для "body"
var loaderId = CMS.loader.show(container);

// Т.к. на странице может быть несколько загрузчиков, то при его создании для него генерируется ID, по которому можно завершить конкретный

CMS.loader.hide(loaderId);

// or для скрытия всех загрузчиков

CMS.loader.hide();

// resources\assets\js\cms\components\locader.js

---

Controllers

// resources\assets\js\cms\components\controllers.js

---

User meta

Работа с мета данными текущего пользователя (пользовательскими настройками)

// Получение данных
UserMeta.get(key, function(response) {
   console.log(response);
});

// Добавление данных
UserMeta.add(key, data function(response) {
   console.log(response);
});

// Обновление данных
UserMeta.update(key, data function(response) {
   console.log(response);
});

// Удаление данных
UserMeta.delete(key, function(response) {
   console.log(response);
});

// resources\assets\js\cms\user.meta.js

---

Scroll

// resources\assets\js\cms\scroll.js

---

Messages

// resources\assets\js\cms\components\messages.js