Загрузка и локальное размещение файлов

Библиотека Muuri предоставляет гибкий и мощный инструмент для построения динамических сеток элементов с поддержкой фильтрации, сортировки и перетаскивания. Одной из ключевых задач при работе с Muuri является интеграция загружаемых файлов и их корректное отображение в сетке, а также управление локальным хранением этих файлов для быстрого доступа без постоянных запросов к серверу.

Настройка контейнера сетки

Для работы с Muuri необходимо создать контейнер, в который будут добавляться элементы:

<div id="grid">
  <!-- Элементы будут добавляться динамически -->
</div>

Инициализация сетки происходит через объект Muuri:

const grid = new Muuri('#grid', {
  dragEnabled: true,
  layoutOnInit: true,
  layout: {
    rounding: false
  }
});

Ключевые параметры:

  • dragEnabled – разрешает перетаскивание элементов.
  • layoutOnInit – автоматически строит сетку при инициализации.
  • rounding – управляет округлением координат для точного позиционирования элементов.

Добавление файлов в сетку

Для загрузки файлов используется стандартный <input type="file"> с поддержкой множественного выбора:

<input type="file" id="fileInput" multiple>

Обработка выбранных файлов осуществляется через FileReader:

document.getElementById('fileInput').addEventListener('change', (event) => {
  const files = Array.from(event.target.files);
  
  files.forEach(file => {
    const reader = new FileReader();
    reader.onl oad = (e) => {
      const itemElement = document.createElement('div');
      itemElement.className = 'item';
      itemElement.innerHTML = `
        <div class="item-content">
          <img src="${e.target.result}" alt="${file.name}" />
          <p>${file.name}</p>
        </div>
      `;
      grid.add(itemElement);
    };
    reader.readAsDataURL(file);
  });
});

Особенности реализации:

  • Использование FileReader.readAsDataURL позволяет конвертировать файлы в Base64-формат, что упрощает локальное отображение изображений.
  • Каждый элемент сетки оборачивается в отдельный контейнер с классом .item, который Muuri использует для управления расположением и анимацией.

Локальное хранение файлов

Для сохранения файлов на клиентской стороне используется LocalStorage или IndexedDB. LocalStorage подходит для небольших изображений и данных, IndexedDB – для больших файлов и устойчивого хранения.

Пример использования LocalStorage:

function saveFileLocally(file, dataUrl) {
  const storedFiles = JSON.parse(localStorage.getItem('muuriFiles') || '[]');
  storedFiles.push({ name: file.name, content: dataUrl });
  localStorage.setItem('muuriFiles', JSON.stringify(storedFiles));
}

Для восстановления сетки при перезагрузке страницы:

window.addEventListener('DOMContentLoaded', () => {
  const storedFiles = JSON.parse(localStorage.getItem('muuriFiles') || '[]');
  storedFiles.forEach(file => {
    const itemElement = document.createElement('div');
    itemElement.className = 'item';
    itemElement.innerHTML = `
      <div class="item-content">
        <img src="${file.content}" alt="${file.name}" />
        <p>${file.name}</p>
      </div>
    `;
    grid.add(itemElement);
  });
});

Преимущества подхода:

  • Быстрая загрузка элементов без обращения к серверу.
  • Возможность сохранить состояние сетки, включая новые элементы, фильтры и сортировку.

Динамическое обновление сетки

Muuri поддерживает динамическое добавление и удаление элементов, что позволяет обновлять сетку без полной перезагрузки:

// Удаление элемента
itemElement.addEventListener('dblclick', () => {
  grid.remove(itemElement, { removeElements: true });
});
  • Параметр removeElements: true удаляет элемент из DOM полностью.
  • После удаления Muuri автоматически перестраивает сетку с анимацией.

Стилизация и адаптивность

Для корректного отображения загруженных файлов рекомендуется использовать CSS сетки и фиксированные размеры элементов:

#grid {
  display: flex;
  flex-wrap: wrap;
}

.item {
  width: 200px;
  margin: 10px;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.item img {
  width: 100%;
  display: block;
}

.item p {
  text-align: center;
  margin: 5px 0;
  font-size: 14px;
}
  • Размеры элементов можно динамически менять через Muuri API, что позволяет реализовать адаптивные сетки для разных устройств.
  • Поддержка анимаций при перетаскивании улучшает визуальное восприятие и пользовательский опыт.

События и расширенные возможности

Muuri предоставляет богатый набор событий, которые полезны при работе с файлами:

  • dragStart и dragEnd – отслеживание начала и окончания перемещения.
  • layoutStart и layoutEnd – контроль перестройки сетки.
  • remove – реагирование на удаление элементов.

Пример добавления слушателя событий:

grid.on('remove', (items) => {
  console.log('Удалено элементов:', items.length);
});

С помощью этих событий можно синхронизировать локальное хранилище с состоянием сетки или добавлять дополнительные анимации.

Интеграция с другими библиотеками

Muuri легко комбинируется с File API, IndexedDB, а также библиотеками для обработки изображений (например, Pica для ресайза) или генерации превью. Это позволяет строить полноценные файловые менеджеры прямо в браузере, с поддержкой drag-and-drop, локального кеширования и адаптивной сетки.

Оглавление