Overview

The vanilla-filemanager is a simple file manager template written in HTML5, vanilla javascript, and sass. It does not have any dependencies or frameworks and supports IE9 and above. It features a theme system, integrated file editor (without syntax highlighting), optimization for ajax applications, modals error alerts, sidebar and table section loaders, personalization with SASS or CSS, performance enhancements using inline svgs, and compatibility with IE9 and above. The project is open to contributions and improvements.

Features

• Support IE9 and above: Compatible with Internet Explorer 9 and newer versions.
• Theme system: The template has a theme system that allows users to easily change the theme colors.
• Integrated File Editor: Provides a basic file editor without syntax highlighting.
• Optimized for ajax applications: The template is optimized for ajax applications and ensures smooth performance.
• Modals error alerts: Includes modals with error alert functionality to show server-side error messages.
• Sidebar and table section loaders: Displays loaders before loading data to indicate that the application is still running and responsive.
• Personalization: Provides options for personalization, including the ability to change themes using SASS or CSS.
• Performance enhancements: Uses inline svgs to improve performance and reduce flickering issues compared to icon fonts.
• IE Compatibility: Works well with Internet Explorer 9 and above, using polyfills when necessary.

Installation

To use the vanilla-filemanager, follow these steps:

1. Use the provided HTML markup in either index.html or dist/index.html (without comments).
2. Include the distribution files in the dist folder in your application.
3. To deal with the integrated editor, use the window.FmEditor object which provides methods to manipulate data in the editor. Supported methods include fmEditor.add(content), fmEditor.append(content), fmEditor.get(), and fmEditor.clear().
4. To show the error alert in modals, add the class ‘show’ to the error alert div.
5. To show loaders for the sidebar and table sections, use the provided functions to show and hide the loaders.
6. For personalization, manage themes using SASS or CSS by changing the theme colors in the appropriate files and re-compile the Sass files.
7. For changing the default theme with CSS, modify the dist/custom-theme.css file by changing the CSS variables with your custom colors.
8. If needed, use polyfills to ensure compatibility with legacy browsers like IE9.
9. To contribute or improve the project, fork the repository, make your changes, and send a pull request with your new feature or improvement.

Summary

The vanilla-filemanager is a lightweight file manager template that can be easily integrated into various web applications. It provides essential features such as theme customization, an integrated file editor, modals with error alerts, and section loaders for better user experience. The template is optimized for ajax applications and ensures compatibility with Internet Explorer 9 and above. Overall, it offers a simple yet powerful solution for managing files in web applications.