«Для многих цивилизаций Восточного Завитка Галактики, не столь церемонных, elFinder уже с успехом заменил прочие web файловые менеджеры и стал общепринятым, поскольку, хотя в нем и встречаются редкие баги, но зато у него есть два больших преимущества.Во-первых, он дешевле;
а во-вторых, у него есть большая красная кнопка, на которой большими веселыми
буквами написан дружеский совет: Don't panic!»
Сегодня у меня по настоящему счастливый день!
Несколько месяцев крайне напряженной, но невероятно приятной работы позади.
И я с удовольствием представляю — файловый менеджер для web elFinder 2.0 beta!
Хочу выразить огромную благодарность всему сообществу за помощь, патчи и переводы.
Коллегам по студии — спасибо, что взяли на себя всю текучку, чтобы освободить меня для этого проекта.
И хочу представить нового разработчика elFinder — 667bdrm. Он же автор модуля для drupal.
И еще, нам всем очень приятно, что сейчас нет практически ни одного фреймворка, в который бы не был интегрирован elFinder. Кстати, одними из первых это сделали РБК Софт.
Прежде чем прейти к описанию новшеств объясню, почему 2.0, а не продолжение ветки 1.х.
Дело в том, что ветка 1.х имеет 2 больших недостатка,
которые не могут быть исправлены рефакторингом/дописыванием — низкая производительность и отсутствие полноценного API.
Именно по этому elFinder и был переписан с нуля.
Как неизбежное следствие — обновился протокол передачи данных.
Но новый клиент без проблем работает со старыми коннекторами.
Давайте же посмотрим, что у нас получилось.
Производительность
Дерево директорий загружается по требованию.
Глубина вложености настраивается в конфиге, по умолчанию грузится один уровень.
Замена кодирования пути к файлу с md5 на base64 + шифрование — ускорила все операции с файлами.
Конечно, base64 не в коем случае не надежный способ скрыть путь к файлу,
но кодируется путь относительно корневой директории, что не дает достаточно информации о его реальном положении.
Шифрование пути будет добавлено в будущем (для параноиков).
Значительно уменьшен размер json, передаваемый коннектором.
В старой версии отдельно передается дерево директорий, отдельно — содержимое текущей директории.
В новой — все данные передаются в одном объекте без дублирования, что экономит около 30%.
Замена булевых типов на int также дала немалый выигрыш в размере.
Большое количество файлов представляет собой проблему не только для сервера, но и для клиента.
Создание DOM с 2000 элементами «вымораживало» firefox на несколько минут (у сафари/хром этот порог начинается с 5000).
Можно, конечно, решить, что это очень редкий случай, но мой опыт говорит, что есть компании, которым и с хранилищами и на 7000 папок необходимо работать.
Спасибо коллеге из Чехии за идею — а почему бы не добавлять новые элементы в DOM по требованию, наподобие того, как подгружаются картинки в поиске google?
Дополнительная выгода — за превьюшками картинок обращаемся только, когда они действительно необходимы.
API
elFinder теперь имеет полноценный API не только для клиентской, но и для серверной части.
Обе построены на event-driven модели.
Серверное api имеет возможность изменения данных перед отправкой клиенту, что может быть полезно, например, для автоматического переименования файлов, ресайза загружаемых картинок и тд.
А теперь — самое вкусное
Multiroots + любые типы хранилищ данных.Если одним предложением — elFinder поддерживает любое количество корневых директорий и они могут быть не только папками на файловой системе.
Каждая корневая директория «монтируется» при помощи своего «драйвера».
Архитектура коннектора содержит 3 слоя.
- Слой приложения. Собственно сам класс elFinder. «Монтирует» корневые директории с помощью объектов-«драйверов».
Транслирует запросы клиента в методы конкретного драйвера.
- Абстрактный драйвер. Преобразует запросы elFinder в обращения к хранилищу.
Знает какие данные нужно вернуть, но абсолютно не осведомлен о том, как данные хранятся/извлекаются.
- Драйвер конкретного хранилища.
Вообще ни о ком ничего на знает, умеет совершать только простые операции с данными.
Таким образом, чтобы добавить поддержку нового типа хранилища, достаточно написать довольно простой класс, который реализует базовые операции с «файлами».
На данный момент есть 2 драйвера
- для локальной файловой системы
- для хранения файлов в mysql.
Хотя этот драйвер вполне работоспособен (за некоторыми исключениями), не думаю, что такой способ хранения данных подходит для продакшн. Написан был, в основном, для проверки концепции.
Чтобы окончательно снести крышечку, добавлю, что клиент больше не привязан к jQuery.ajax как единственному транспорту данных.
То есть, теперь можно реализовать общение с коннекторами, расположенными на разных серверах, использовать web sockets и тд.
И multiroots можно реализовать таким же образом.
Также можно преобразовывать данные в формат понятный для клиентской части elFinder.
Именно таким образом сделана поддержка протокола старых коннекторов.
А прямо сейчас мы работаем над реализацией прокси для webdav/svn для одной шведской компании.
Поиск.
elFinder стал настоящим файндером :)
Поиск осуществляется во всех папках. Ограничить поиск определенными папками пока нет возможности.
Фильтрация по типам файлов.
Достаточно указать в настройках список типов файлов и пользователь будет видеть только их.
Сортировка файлов.
Вся сортировка происходит на клиенте. Возможны 6 типов сортировки — по имени/типу/размеру и тоже самое с папками вначале. Настраивается в конфиге, но возможно и сделать кнопку для смены сортировки на лету.
Новые атрибуты файлов.
- «locked» — пришел на замену атрибуту «rm», запрещающему удаление. По аналогии атрибутом в macos — запрещает удаление и переименование файла.
- «hidden» — делает файл невидимым. Не запрещает запись/удаление.
Контроль доступа к файлам.
В прежней версии был только один способ — описание правил на основе регэкспов от пути к файлу.
С появлением новых типов хранилищ этого становится недостаточно.
Например, для файла в БД путем (id) будет число и тут возникает масса проблем.
Мы по прежнему, считаем, что авторизация/права доступа и пр — не относятся к компетенции самого файлового менеджера. Он должен получить корректные опции и этого достаточно, чтобы реализовать любые возможности по доступу. Поэтому мы добавили возможность передать при инициализации функцию или объект/метод, которые и будут «толковать» права доступа к конкретному файлу.
Для каждой корневой директории можно использовать свой контроль доступа.
Контроль перезаписи существующих файлов.
Возможно настроить так, что при загрузке/перемещении файлов в папку, где файлы с такими именами существуют, новые файлы будут сохранены с добавлением суффикса к их именам.
Операции с файлами больше не блокируют интерфейс пользователяДумая, как сделать интерфейс elFinder возможно более схожим с интерфейсом десктопных файловых менеджеров,
мы покусились на самое святое для web 2,3,4.0 — мы убили аякс спиннеры и оверлей :)
Бросьте десяток файлов в згрузку, а пока они грузятся — переименуйте файл и создайте пару новых папок.
Если общение с сервером по конкретной операции длится дольше установленного промежутка времени (по умолчанию — пол секунды) вы увидите окно уведомления о том, чем он сейчас занят.
Каюсь, слукавил, спиннеры не убили совсем, а лишь творчески переработав, запихнули в окошки уведомлений.
И оверлей выжил, но лишь в эпизодической роли, да еще прозрачный весь — кто его заметит?
Drag&drop everywhere.
Копировать/перемещать файлы теперь можно в/из дерева директорий. Если перетащить файл на папку в дереве и задержаться ненадолго, она услужливо раскроется, давая вам возможность кинуть файл в ее подпапки.
Загрузка с drag&drop — просто киньте файл в текущую директорию (если ваш браузер это поддерживает).
Вид группы переносимых файлов стал более компактным.
Выделение файлов.
В режиме отображения текущей директории как иконки — стрелки вверх/вниз работают, так как от них и ожидается (и с зажатым shift тоже).
Просмотр файлов.Наш любимый quicklook, также получил обновления:
- иконки для перемещения к след/пред файлу.
- полноэкраный режим
- просмотр аудио/видео через html5
Диалог «Свойства».
Для группы файлов показывает одно окно с суммарной информацией. Так же показывает размер папки/группы файлов
Реакция на нажатие клавиши «enter» в зависимости от операционной системы.
Для macos — переименовать файл, для остальных — открыть файл/папку.
Работа в связке с wysiwyg редакторами и пр.
Вместо URL файла в callback возвращается объект со всеми свойствами файла, в том числе и с размерами картинки.
Также может возвращать информацию о нескольких файлах и директориях.
Контекстное меню в дереве директорий.
Улучшена поддержка symlinks.Ссылки-директории отображаются в дереве.
Улучшена поддержка mime-типов
При способе определения типов «internal» используется файл mimes.type из Линукса.
Настройки генерации превьюшек.
Можно указать — делать или нет crop и цвет фона.
Интеграция в другие системы.
Класс elFinder реализован в виде библиотеки для включения в другие программные продукты.
Возможность передавать дополнительные данные при обращении к конектору.
Используется для передачи токенов и пр. во многих фрейморках.
Уменьшена зависимость от компонентов jquery UI.
Теперь необходимы только selectable/draggable/droppable. Resizable — опционально.
Theme roller suport.
Внешний вид elFinder целиком зависит от текущей темы jquery UI.
В дистрибутив включен файл theme.css, который в комплекте с темой «smoothness» делает elFinnder максимально похожим на finder macos.
RTL supportДля нас с вами не актуально, но пользователи из стран, где пишут справа на лево, надеюсь, оценят.
Поддержка пока экспериментальная, коллега из Сирии ее тестирует.
Небольшая ложка дегтя
Минимальная необходимая версия jquery — 1.6.1. Я понимаю, что не все могут в своих проектах так легко обновить jquery, но мы смотрим в будущее и $.Deferred — наше все:)
Дальнейшие планы
- плагин для drupal позволяющий работать с базой данных файлов. Насколько я в курсе — уже скоро.
- клиентский прокси для работы сразу с несколькими коннекторами на разных серверах.
- коннектор и, возможно клиентский прокси, для работы с webdav.
Возможно некоторые из этих новых расширений уже будут коммерческими.
В любом случае, коммерческие расширения для elFinder появятся.
Сразу оговорюсь, что весь функционал, который есть сейчас — останется свободным.
Коммерческими будут функции, которые не всем нужны.
Сейчас уже есть одно такое расширение для просмотра аудио/видео не поддерживаемого html5 с помощью flash.
Возможно еще будет расширения для подсветки кода при редактировании файлов.
Надеюсь, сообщество отнесется с пониманием и поддержит нас.
Послесловие
Большая красная кнопка, с которой началась статья вовсе не бесполезное украшение — это ссылка на наш форум поддержки.
«По мотивам» работы над этим проектом я написал пару статей,
но, возможно, еще есть какие-то аспекты о которых вы хотели бы узнать поподробней — спрашивайте.
Вот вроде и все. Спасибо за внимание и не забывайте свое полотенце :)
Проект на github
Up Небольшая просьба — пожалуйста, не материтесь в демо
Up 2 Не забывайте, что это только beta — баги там просто обязаны быть и нам очень нужны баг-репорты о них.
Up 3 Собрали билд без исходников — тут
