Файлы статики

Подключение Javascript и CSS файлов

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

JS-файлы ядра приложения

tpl::includeJS('autocomplete', true); - одна библиотека

tpl::includeJS('autocomplete', true, 3); - одна библиотека с указанием версии

tpl::includeJS(array('autocomplete','comments'), true); - несколько библиотек

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

JS-файлы приложения

подключение файла /public_html/js/bootstrap3.min.js

tpl::includeJS('bootstrap3.min', false); - одна библиотека

подключение файла c учетом версии /public_html/js/bootstrap3.min.js?v=3

tpl::includeJS('bootstrap3.min', false, 3); - одна библиотека с указанием версии

Внешние JS-файлы

подключение jQuery

tpl::includeJS('http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js');

подключение jQuery с учетом текущего протокола

tpl::includeJS(Request::scheme().'://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js');

CSS-файлы ядра

при подключение js библиотек ядра необходимые css-файлы подключаются автоматически

CSS-файлы приложения

подключение файла и директории css
второй параметр true указывает на необходимость подключения файла из директории css

tpl::includeCSS('style', true); - /css/style.css

подключение файла из директории js

tpl::includeCSS(SITEURL_STATIC.'/js/fotorama', false); - /js/fotorama.css

Внешние CSS-файлы

tpl::includeCSS('//example.com/style', false); - //example.com/style.css

Инициализирующий Javascript

Код js объявляемый в шаблонах необходимо обворачивать в js::start/stop вызовы:

<script type="text/javascript">
<?php js::start(); ?>
$(function(){
    // код
});
<?php js::stop(); ?>
</script>

Обрамление необходимо для возможности в дальнейшем управлять последовательным подключением библиотек и расположением js кода одним блоком в футере.

Именование javascript классов и файлов

В случае если JS код объявлен в модуле, он связан с данным модулем и зачастую с конкретной сущностью и логикой работы конкретной страницы. В таком случае именование должно быть следующим:

jUsersSearch - класс отвечающий за работу страницы поиска пользователей

j - обязательная приставка
Users - обязательное название модуля Users, если ключевых сущностей в модуле несколько, дополняем названием данной сущности, например:
- jOrdersOfferForm - форма добавления/редактирования заявки Offer в модуле Orders (заказы)
- jOrdersOfferChat - работа с формой комментария к заявке Offer в модуле Orders (заказы)
обязательное название страницы или логического блока, например:
- Search - страница поиска
- Form - страница добавления редактирования сущности
- Register - страница регистрации

JS файл именуется следующим образом:

users.search.js - файл реализующий класс работы со страницей поиска пользователей

название формируется из названия js-класса, только без приставки j, разделение через точку .
файл располагается в директории /public_html/js/

Пример базового JS класса и его инициализации

var jUsersRegister = (function(){
    var o = {delay:100}, inited = false, a = 100, b = {};

    function init()
    {
        privateMethod();
    }

    function privateMethod()
    {
    }

    return {
        init: function(options)
        {
            if(inited) return; inited = true;
            o = $.extend(o, options || {});
            $(function(){
                init();
            });
        },
        publicMethod: function()
        {}
    };
}());

JS класс имеет вид закрытого класса с базовым методом init и входящим параметром options.

В методе init выполняется базовая инициализация класса.

Также есть возможноть объявлять открытые методы, в примере publicMethod и закрытые методы, в примере privateMethod.

Все свойства закрыты, в примере свойства a, b;

Параметры js-класса определяются данными переданными в метод init и доступными через свойство o (options), например o.delay.

Инициализация данного класса в шаблоне .php должна выглядеть следующим образом:

<script type="text/javascript">
<?php js::start(); ?>
    jUsersRegister.init(<?= func::php2js(array(
        'delay' => 50,
        'param' => $integer,
        'login_url' => Users::url('login'),
        'lang' => array(
            'email' => _t('users', 'E-mail адрес указан некорректно'),
            'pass'  => _t('users', 'Укажите пароль'),
        ),
    )) ?>);
<?php js::stop(); ?>
</script>

Подробнее:

Обязательное обрамление в js::start, js::stop
При вызове метода init выполняем формирование js hash-объекта при помощи вызова метода func::php2js, тем самым передаем необходимые данные из php в js
Параметр lang обязателен - необходим для передачи всех необходимых строк используемых в js-классе, обратите внимание на вызов _t() функций

Именование class / id элементов в HTML коде

Все class / id элементов связанных с js кодом обязательно объявляем с префиксом j-

Другими словами, не привязываемся к css классам задающим элементам стиль.

class="link j-order-link-toggler" - дописали необходимый j- класс для привязки js

class="tabs j-tabs"

id="j-orders-tabs"

id="j-header-menu"

ID используем для именование общих блоков, классы для внутренних элементов.

<div id="j-cabinet-tabs">
    <a href="#" class="j-tab">tab 1</a>
    <a href="#" class="j-tab">tab 2</a>
</div>

Библиотеки идущие с ядром

autocomplete - автодополнение, например при выборе региона / пользователя

autocomplete.fb - автодополнение в стиле Facebook, используется для выбора тегов

fancybox2 - галерея Fancybox 2.x

fotorama - галерея Fotorama

history - кроссбраузерная реализация работы с History API

jcrop - библиотека реализующая интерфейс работы с thumbnail-изображением

maps - классы работы с картой

qquploader - ajax загрузчик файлов

tablednd - класс реализующий перемещение (ротацию) строк в таблице <table>

wysiwyg - bffWysiwyg редактор

Базовые функции ядра

В ядре реализованы некоторые базовые функции, используемые повсеместно. Объявлены они в рамках глобального класса bff (/public_html/js/bff/bff.js).

Вот некоторые из основных:

bff.redirect - выполняет редирект на указанный URL

bff.isEmail - проверка строки на соответствие валидному e-mail адресу

bff.ajax - все ajax запросы в приложении должны выполняться при помощи этого метода

bff.iframeSubmit - самбит формы через iframe (ajax), для случаев когда в форме есть input=file поля

bff.ajaxURL - формирование URL для выполнения ajax запроса

bff.maxlength - реализация ограничителя кол-во допустимых символов + счетчика в полях типа textarea, input=text

bff.st.includeJS - реализация подключения *.js файлов из javascript

bff.st.includeCSS - реализация подключения *.css файлов из javascript

bff.declension - склонение вида "1 файл, 2 файла, 5 файлов"

bff.cookie - работа с cookie данными из javascript

bff.map - методы работы с картами (Google, Yandex) - инициализация, вспомогательные методы

Также есть несколько функций объявленных в глобальной области видимости:

nothing - реализация обрыва выполнения события выше (event)

intval - приведение переменной к числу

Дополнения к jQuery:

$.autogrow - реализация резинового textarea, высота пересчитывается в зависимости от текста

$.scrollTo - скроллинг к необходимому HTML блоку

$.deserialize - реализация заполнения формы из параметров строки запроса

Для админ. панели класс bff расширяется дополнительно необходимыми функциями, используемыми в формах и списках админ. панели (/public_html/js/bff/admin/bff.js).

Вот основные из них:

bff.confirm - подтверждение перед выполнением действия, обвертка стандартного alert

bff.adminLink - формирование админ. ссылки средствами js

bff.userinfo - вызов popup с краткой информацией о пользователе

bff.onTab - переключение табов

bff.error - вывод сообщения об ошибке

bff.success - вывод сообщения об успешно выполненном действии

bff.ajaxToggle - реализация ajax переключателей включен/выключен

bff.ajaxDelete - реализация ajax удаления записи

bff.rotateTable - инициализация ajax ротации строк в таблице <table>

bff.formChecker - проверка заполнения обязательных полей в форме

bff.generateKeyword - генерация keyword на основе title

bff.datepicker - инициализация компонента datepicker для выбора даты

Общие сведения Javascript и CSS файлы