sjFilemanager — Reloaded. AJAX + PHP файловый менеджер версия 1.0 бета

    Много воды утекло с тех пор когда я сел за написания своего файлового менеджера. В то время поддержка ИЕ6 считалась обычным делом, а про фичи HTML5 можно было только мечтать. В общем вот ссылка на версию 0.1.0 альфа. В конце первого топика, я написал, что планирую сделать в будущем, можно сказать я сдержал свое обещание и хочу представить Вам версию 1.0b. Из того, что планировалось, была отброшена идея внедрения авторизации в менеджер, потому что, как говорили здесь, это пятое колесо. Рассмотрим, что изменилось и что улучшилось, но для начала скрин


    Эволюция


    Вот список изменений:
    • исправлен дизайн-баг в IE связан с окном загрузки
    • сделана полная локализация на русский язык
    • добавлен вывод ошибок в попапе
    • добавлен целый ряд событий в менеджер, также устанавливаются callback-ы по-умолчанию
    • файловый менеджер и объект uploader, в данном случае SWFUpload, связаны между собой Dependency Injection паттерном
    • упрощена инициализация менеджера
    • добавлен вывод текущего пути и возможность переходить по открытым директориям из него
    • изменено UI при создании директории
    • добавлен ридер/редактор медиа файлов, в данном случае картинок, является полноценным приложением, подключается к файловому менеджеру посредством событий
    • изменены иконки

    Известные баги и минусы


    • выделяющая рамка в Опере и контекстное меню при двойном клике
    • в IE7, медиа менеджер, не растягивается подложка под элементы управления
    • JavaScript код не документирован

    Сравнение


    На данный момент самым популярным я считаю elFinder файловый менеджер. Будем сравнивать именно с ним.
    По размеру почти идентичен, имеет уже написанный драйвер для работы с файлами, которые хранятся в MySQL. Основан на jQuery, имеет хорошую поддержку (javascript код документирован при помощи чего-то похожего на PHPDoc), недавно вышла 2.0 бета версия. Красивый UI, возможность перетаскивать папки и файлы, имеет ридер для картинок, есть возможность редактировать файлы на сервере (это я считаю минусом, хотя для shared hosting наверно полезная вещь). Сам код я не анализировал, но на первый взгляд его много и написан он грамотно.
    Наглости тестировать скорость работы у меня не хватило, но медлительность при открытии директории заметна, так что давайте поговорим о минусах.
    • первое, что бросилось в глаза — это строка показывающая текущий путь, если кликнуть на родительский каталог, то все дочерние каталоги из него исчезают, как-то не хорошо, если нужно изменить структуру директорий и часть файл перенести из парента в чайлд
    • не очень хорошо реализованы попапы. Например, возьмем попап для загрузки файлов, при нажатии на крестик DOM элемент (и все его дочерние элементы) удаляются, а потом если нажать еще раз загрузить файл, то вновь создается тоже самое. Не понятно зачем это.
    • ошибка появляется в попап окне… и чтобы закрыть его нужно навести мышку и тыцнуть закрыть. Почему бы просто не показать сообщение на 5 секунд и не мучить пользователя?
    • все реализовано в виде одной целостной программы. Нет разделения на основную часть — манипуляция файловой структурой, дополнительную — менеджер всплывающих окон, редактора файлов (сюда же можно отнести — архиватор и превью рисунков), дерево каталога и их перетаскивание

    Полный список багов можно посмотреть здесь.
    Выскажу свое мнение на счет drag & drop в файловых менеджерах — это PAIN IN THE ASS. Очень часто работая с ним в спешке можно случайно перетянуть какую-то директорию куда-то, и хорошо если есть история и можно нажать CTRL + Z, а если нельзя? Тогда я Вам не завидую. Со мной это случалось несколько раз, с тех пор я не пользуюсь древом каталогов.
    В целом файловый менеджер очень хороший, уже много где интегрирован и т.д. и т.п.

    Теперь скажу, что на мой взгляд в моем менеджере лучше:
    • функционал полностью разделенный. Относительно серверной части, то Вы можете взять любой из классов и использовать где-то у себя для работы с файловой системой, созданием тамбнейлов для рисунков, обрабатывать загрузку файла, копировать целые каталоги, работать с множеством файлов с помощью одного объекта
    • части функционала взаимодействуют между собой благодаря Dependency Injection или событиям
    • четкое разделение структуры файлов на: серверную часть (директория lib) и клиентскую (директория web), что уменьшает вероятность уязвимости, так как серверная часть не доступна через http протокол, за исключением index.php файла
    • наличие простого редактора рисунков, с помощью которого их можно рисайзить и кропать. Редактор является полностью независимым от файлового менеджера


    Примеры и Источники


    Посмотреть работу менеджера можно
    • здесь, только файловый менеджер на странице
    • здесь, только редактор изображений на странице
    • здесь, только файловый менеджер в попапе
    • здесь, файловый менеджер и редактор изображений в попапе

    Скачать можно здесь или с GIT репозитория git://github.com/stalniy/sjFilemanager.git

    Будущее медиа менеджера


    • добавить возможность поставить водяной знак на изображении
    • добавить возможность применить проведенные действия ко всем открытым рисункам
    • добавить возможность чтения flv видео
    • добавить кнопочку Fit On Screen

    Будущее файлового менеджера


    • добавить возможность конфигурировать загрузку файлов, например, создание тамбнейлов для рисунков
    • сделать возможность установки нескольких listener-ов на событие

    Более детально о менеджере можно почитать здесь.

    P.S.: о найденных багах, пожеланиях и Вашу критику прошу писать здесь или в комментариях
    P.P.S.: над проектом я работаю один, так что не будьте слишком строги

    UPD: Если не можете посмотреть примеры на сайте, качайте исходники с github. Там примеры есть. Большое спасибо хаброюзерам JiLiZART и Mavim за подсказку
    Поделиться публикацией
    Ой, у вас баннер убежал!

    Ну. И что?
    Реклама
    Комментарии 50
      +1
      нижний бар в хроме куда-то уехал
        0
        странно, укажите пожалуйста версию
          0
          версия последняя
        +2
        Нельзя загрузить php-файл, но можна переименовать текстовый с phpinfo()) в .jpeg, загрузить, а потом переименовать в .php :)
        Только вопрос, даст ли это что-то потом…
        +1
        При прокрутке верхняя панель управления должна быть закреплена вверху. Чтоб всегда была на виду.
        Нижняя белая плашка налезает на список файлов. Должна быть пикселей на 30 ниже. Опера.
        «ФиксацЫя панели» — поправьте
          0
          если нажать на последнюю иконку тогда панель всегда будет на виду но сбоку
            0
            Это я видел.
            Поставил, показалось немного непривычным. Вернул вверх, удивился отсутствию фиксации.
              0
              учту, спасибо!
          0
          Примеры не пингуются.
            –2
            открИть менеджер
              –3
              Исправьте, пожалуйста, в тексте: Dependency Injection.
              Извините, не удержался)
                +2
                залейте, пожалуйста, картинки на более хаброустойчивый север, похоже, Ваш уже не справляется
                  +1
                  Присоединяюсь.
                  Можно выложить HTML на Github, он умеет статику показывать в виде сайтов (никнейм.github.com).
                  +2
                  Автор выложи все на github он более устойчив к хаброэффекту
                    +3
                    спасибо сейчас работаю над этим. Не ожидал, что сервак упадет
                    +10
                    Интересно, эти мультяшные планктоны на картинках интерфейса хоть кому-нибудь нравятся?
                      0
                      А api есть? Ибо не у всех есть пхп на сервере. А через вэб сокеты работать эту штуку в будущем научить не плагируете?
                        0
                        Если проект будет интересен сообществу — исправлюсь и напишу. А на каком языке Вы хотите серверную часть?
                          0
                          Python, java
                            0
                            тогда, в ближайшее время опишу api и обновлю пост
                        0
                        Меня всегда интересовал один вопрос, а есть ли, ну хоть очень маленький, шанс обойтись средствами только JS без сервера?
                          0
                          мечтать не вредно :), а так если знаете только js то на сервере его тоже можно запустить, node.js вам в помощь
                            0
                            Это-то понятно, но мечты о файл-менеджере внутри браузера живут в голове )
                              +3
                              Запускаете локально веб-сервер и получаете то, что хотите. А зачем вам?
                                0
                                Видимо человек имеет в виду возможность предросмотра, обработки и т.д. ДО посылки на сервер.
                                0
                                В IE это возможно сделать.
                                В Firefox я видел какой-то редактор, который сохранял проекты локально.
                              0
                              Есть: File API в HTML5 и FileSystemObject в jScript.
                              0
                              Иконки «UNIX права доступа» и «Удалить файл/папку», на мой взгляд, совсем нелогичные
                                +3
                                я в свое время перепробовал кучу файловых менеджеров, но ни один не смог на тот момент толком сделать одну вещь: запаковать в архив каталог на серверной стороне и дать его скачать. но это было очень давно, я тогда не знал про шелл и winscp.
                                  +4
                                  Не хочу придираться, но смените иконку. Мне ее специально рисовал softicon.ru/ для dustweb.ru/projects/tinymce_images/
                                    0
                                    Эта версия была выпущена год назад! Но я исправил раз уж на то пошло
                                    0
                                    Довольно интересная вещь, а самое главное — простая.
                                    Если бы была поддержка работы с FTP, то было бы вообще идеально.
                                    Тонкий намёк ;)
                                      +2
                                      А мы (elfinder) уже работаем над этим)
                                        0
                                        Не забудьте оповестить, когда можно будет протестировать Вашу поддержку работы с FTP серверами.
                                      0
                                      я уже думал над реализацией фтп. На сервере все просто реализовать в моем случае, но к сожалению очень не хватает дизайнерского видения на клиентской части. По-этому у меня много времени уходит на подбор иконок и разной такой мелочевки
                                      0
                                      Сделайте возможность редактирования HTML и PHP файлов прямо из файлового менеджера через wysiwyg. Сделать это достаточно просто, а при этом такая функция позволит вам позиционироваться как «движок для статичных страниц».
                                      Очень многие крупные сайты используют html+ssi, чтобы снизить нагрузку на сервера.
                                        0
                                        >все реализовано в виде одной целостной программы. Нет разделения на основную часть — манипуляция файловой структурой, дополнительную — менеджер всплывающих окон, редактора файлов (сюда же можно отнести — архиватор и превью рисунков), дерево каталога и их перетаскивание

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

                                        Рад, что вы не забросили проект! Здоровая конкуренция и разные точки зрения — дают пользователям бОльшую возможность выбора:)
                                          0
                                          Вы правы, извиняюсь. Не привык к такому стилю кода как у Вас. Сложно читается код, когда много методов определены внутри конструктора.

                                          И я смотрю Вы не боитесь использовать замыкания. Как по мне — это тоже вносит некоторую неразбериху. Если переменная была определена где-то вверху скоупа, а Вы потом ее используете через много строк кода, то тело метода/функции не совсем понятное стороннему глазу.
                                            0
                                            А как вы без замыканий пишете? 0_о
                                              0
                                              я не говорил этого=) я сказал, что не совсем читабельный код получается. Но это ИМХО. Без замыканий иногда можно обойтись посредством связывания данных с каким-то объектом.

                                              Например, как-то так
                                              var someObject = new someClass();
                                              someClass.linkToElement(domObject, someObject).
                                              domObject.click(function() {
                                              var someObject = someClass.getObjectByElement(this);
                                              });


                                              Это способ уйти от замыкания и контролировать данные. Потом можно написать метод __destruct в классе someClass, вызвав который удалим все ссылки на объект и сам объект. Этот метод к примеру можно повесить на событие unload в броузере.
                                              А если здесь создать замыкание, то удалить его потом не совсем понятно как.

                                              Но с простыми данными вроде width, height и т.д. проще делать замыкания
                                              0
                                              > Вы правы, извиняюсь. Не привык к такому стилю кода как у Вас. Сложно читается код, когда много методов определены внутри конструктора.

                                              Это из-за необходимости иметь привелигерованые методы
                                          • НЛО прилетело и опубликовало эту надпись здесь
                                              0
                                              исправил. не было прав на чтение директории. Нужно добавить в баги. спасибо
                                              0
                                              Элементарный однопанельный «файлменеджер» делается довольно просто (я даже на баше делал, потом — на сях; на стороне клиента JS).
                                              Но вот двухпанельник сделать невозможно из-за ограничений, накладываемых разработчиками браузеров на формы отправления файлов из соображений безопасности. Даже просто отобразить файлы из локальной директории невозможно (из тех же соображений безопасности). Для загрузки файлов на сервер остается всего лишь формочка загрузки нескольких файлов, причем если файлы не лежат в одной директории, придется добавлять новую формочку и т.д.

                                              Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                                              Самое читаемое