пятница, 15 июля 2016 г.

Выравниваем блоки значков категорий курсов в Essential Moodle Theme

Если Ваш Moodle-сайт оформляется темой Essential, то Вы могли наверняка заметить, что блоки значков категорий у Вас разной высоты, если название категории достаточно длинное и состоит из нескольких слов. Однако, хотелось бы видеть эти блоки одинаковой высоты. Что делать? Ответ один: править код темы!

Отключаем значок загрузки при клике на категорию.
Открываем файл core_course_renderer.php в папке classes темы.
Находим coursecat_include_js() и комментируем весь блок if:

//  if (intval($CFG->version) >= 2013111800) {
            // Make sure JS file to expand category content is included.
       //     $this->coursecat_include_js();
       // }

Для чего это сделано? Для того, чтобы значок загрузки не мешал выравниванию блоков. Иначе будет возникать ошибка JSON. И также теперь обращений к серверу меньше )

Добавляем файл скрипта, выравнивающего блоки
В этом же файле добавим ещё одну строку в функции public function __construct(moodle_page $page, $target):
после
$theme = theme_config::load('essential');
вставим строчку
print "<script type='text/javascript' src='/theme/essential/javascript/hei.js'></script>";

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

public function __construct(moodle_page $page, $target) {
        parent::__construct($page, $target);
        static $theme;
        if (empty($theme)) {
            $theme = theme_config::load('essential');
            print "<script type='text/javascript' src='/theme/essential/javascript/hei.js'></script>";
        }
        $this->enablecategoryicon = (!empty($theme->settings->enablecategoryicon)) ? $theme->settings->enablecategoryicon : false;
    }

Обратите внимание на название файла скрипта: hei.js и его расположение: /theme/essential/javascript/

Создаём скрипт hei.js
window.onload = function() {
setTimeout(function() {
var subcatDivs = document.getElementsByClassName("categoryname");
var maxHCat = 0;
for (var cat_h = 0; cat_h < subcatDivs.length; ++cat_h) {
if (maxHCat < subcatDivs[cat_h].clientHeight) {
maxHCat = subcatDivs[cat_h].clientHeight;
}
}
for (var cat_h = 0; cat_h < subcatDivs.length; ++cat_h) {
subcatDivs[cat_h].style.height = maxHCat + "px";
}
}, 100);
}


Задержка в скрипте нужна, чтобы после загрузки страницы было время для расчёта высоты блоков. Сохраняем данный файл в /theme/essential/javascript/.

Костыли хака
Во время использования хака заметил следующее: изменяется размер некоторых полей ввода. Необходимо их поправить. Файл essential.css в папке style. К сожалению, структура файла минимизирована, поэтому нам нужно будет выполнять поиск в файле (не привязываясь к строкам).
Ищем login_password. Добавляем в строку (выделено полужирным): login_password,.block_login input#login_username{width:95%; height:30px}
Ищем coursesearchbox. Добавляем в строку: coursesearchbox label{display:inline}#coursesearchbox{height:30px}
Ищем adminsearchquery. Добавляем в строку: #adminsearchquery{max-width:92%; height:30px}

Замечание: при обновлении темы Вам придётся повторять те же операции с файлами вновь и вновь.

Комментариев нет:

Отправить комментарий