AJAX File Browser

Продукт канадской компании ITHit. В роли основного фронтенд разработчика–фрилансера я дорабатывал функционал проекта.

WebDAV клиент позволяет отображать ресурсы, изменять их, скачивать, открывать, загружать новые ресурсы и так далее.. Данный веб файловый менеджер отличается множеством настроек и детальной проработкой функционала и интерфейса — он полностью схож в файловым менеджерем Explorer в ОС Windows.

Сайт проекта (eng)
webdavsystem.com/ajaxfilebrowser
Время в проекте
С осени 2013 года
Технологии
JavaScript, WebDAV protocol

Интересные возможности

  • Загрузка файлов более 2 гб (файл разбивается на части)
  • Автопродление загрузки после обрыва соединения или закрытия браузера
  • Поддержка версионности файлов
  • Добавления своих кнопок, колонок, управление отображением блоками
  • Отображение прогресса операций (загрузка директорий, копирование элементов...)
  • Интеграция с Microsoft Office
  • Несколько режимов просмотра файлов и папок
  • Отображение огромных папок (более 10 000 файлов)
  • 10 тем на выбор

Моё участие

Мобильная версия

Я вошел в проект, когда в нем был уже реализован богатый функционал браузерной версии, адаптированной для настольных компьютеров. Моими силами, с использованием существующей кодовой базы и jQuery Mobile была создана мобильная версия, адаптированная под планшеты и смартфоны.

Интерфейс был полностью переосмыслен с учетом специфики мобильных устройств. Посмотреть в действии можно на сайте ajaxbrowser.com, перейдя в раздел «Mobile Version».

Скриншот мобильной версии для планшета с открытым деревом и режимом редактирования. Мобильная версия имеет три режима отображения файлов: Список (текущий), Плитка и Миниатюры.

Виртуальный скроллинг

Для мобильной версии для всех списков (дерево, список файлов и список загрузок) реализовал механизм отложенного рендера — DOM генерируется только для тех элементов списка, которые отображаются на экране.

Это позволяет отображать и скроллить реально огромные списки — 10 000 файлов на мобильном устройстве (тестировал на iPhone 4 и iPad 2) прокручиваются с лёгкостью!

Открыта панель загрузки файлов, выключен режим редактирования и выбран режим просмотра — Миниатюры.

Переход на асинхронные запросы

Изначально, ещё до моего участия в проекте, все запросы на сервер были синхронными. Это вызывало множество проблем: от подвисания браузера до нерешаемых проблем с аутентификации в браузерах.

Мне была поставлена задача переделать сперва основные, а затем и все остальные запросы на синхронные, сохраняя синхронные вызовы, используемые в API библиотек.

Поставленная задача успешно выполнена в ходе поэтапных рефакторингов. В рамках этой задачи я выделил функционал запросов на сервер в отдельный слой и добавил прогресс операций, глобальный обработчик ошибок, возможность объединять команды, а так же реализовал кеширование данных.

Браузерная версия для настольных компьютеров

Так же в проекте мной было сделано множество рефакторинга, багфиксов и мелких фич.