wiki-grav/plugins/admin/themes/grav/app/media/index.js
2022-04-24 14:32:58 +02:00

227 lines
6.9 KiB
JavaScript

import $ from 'jquery';
import { config, uri_params } from 'grav-config';
import request from '../utils/request';
export default class Filter {
constructor() {
this.URI = `${config.base_url_relative}/media-manager/`;
}
filter(name, value) {
let filtered = [];
let keys = Object.keys(uri_params);
if (!~keys.indexOf(name)) { keys.push(name); }
keys.forEach((key) => {
let filter = Filter.cleanValue(key === name ? value : uri_params[key]);
if (filter !== '*') {
filtered.push(`${key}${config.param_sep}${filter}`);
}
});
global.location = this.URI + filtered.join('/');
}
static cleanValue(value) {
return encodeURIComponent(value.replace('/', '\\'));
}
}
export let Instance = new Filter();
var isLoading = false;
var filters = {};
var global_index = 1;
var files_ended = false;
const MEDIA_PAGINATION_INTERVAL = 20;
/* handle changing file type / date filter */
$('body').on('change', '.thumbs-list-container select.filter', (event) => {
let target = $(event.currentTarget);
let filterName = target.data('name');
let filterValue = target.val();
if (filterValue) {
filters[filterName] = filterValue;
} else {
delete filters[filterName];
}
filterFiles();
});
/* initialize media uploader */
if ($('.thumbs-list-container .dropzone')[0]) {
$('.thumbs-list-container .dropzone')[0].dropzone.on('queuecomplete', function() {
let body = {};
if (filters.page) { body.page = filters.page; }
if (filters.date) { body.date = filters.date; }
if (filters.type) { body.type = filters.type; }
$('.dropzone')[0].dropzone.files.forEach(function(file) { file.previewElement.remove(); });
$('.dropzone').first().removeClass('dz-started');
request(`${config.base_url_relative}/media-manager.json/task${config.param_sep}clearMediaCache`, { method: 'post', body }, () => {
filterFiles();
});
});
}
/* handle loading media */
var loadMedia = function loadMedia(filters, callback) {
var url = `${config.base_url_relative}/media.json/tmpl${config.param_sep}media-list-content/index${config.param_sep}${global_index}`;
if (filters.page) {
url += `/page${config.param_sep}${(filters.page).split('/').join('%5C')}`;
}
if (filters.type && filters.type !== '*') {
url += `/type${config.param_sep}${filters.type}`;
}
if (filters.date && filters.date !== '*') {
url += `/date${config.param_sep}${filters.date}`;
}
if (!isLoading) {
isLoading = true;
$('.spinning-wheel').show();
$.get(url, function(content) {
$('.js__files').append(content);
$('.spinning-wheel').hide();
$('.media-container .media-range').trigger('change');
isLoading = false;
global_index++;
callback(content);
});
}
};
var cleanFilesList = function cleanFilesList() {
$('.js__files .card-item').remove();
};
var resetActiveStateInSidebar = function resetActiveStateInSidebar() {
$('.pages-list-container .row').removeClass('active'); // clear active state in sidebar
};
var showEmptyState = function showEmptyState() {
$('.thumbs-list-container').append('<p class="card-item empty-space">No media found</p>');
};
var filterFiles = function filterFiles() {
cleanFilesList();
global_index = 0;
files_ended = false;
$('.empty-space').remove();
loadMedia(filters, function(content) {
if (!content.trim().length) {
showEmptyState();
} else {
if (!filters.page && (!filters.date || filters.date === '*') && (!filters.type || filters.type === '*')) {
$('.js__files').trigger('fillView');
}
}
});
};
/* handle changing page */
$('body').on('click', '.pages-list-container .js__page-link', (event) => {
var page = $(event.target).data('page');
filters['page'] = page;
$('.media-list-title .page-indicator').html(page); // set indication
$('.js__reset-pages-filter').removeClass('hidden'); // activate reset pages icon
resetActiveStateInSidebar();
$(event.target).parents('.row').addClass('active'); // set active state in sidebar
$('.js__file-uploader').removeClass('hidden');
// customize processing URL, as the page changes dynamically
if ($('.dropzone')[0]) {
$('.dropzone')[0].dropzone.on('processing', function(file) {
this.options.url = `${config.base_url_relative}/media-manager${page}.json/task${config.param_sep}addmedia`;
});
}
$('.js__button-clear-media-cache').addClass('hidden');
filterFiles();
disableInfiniteScrolling(); // only infinite scroll on main list, not inside single pages
});
/* handle clearing page filter */
$('body').on('click', '.js__reset-pages-filter', (event) => {
$('.media-list-title .page-indicator').html('All Pages'); // set indication
cleanFilesList();
resetActiveStateInSidebar();
$('.js__reset-pages-filter').addClass('hidden'); // remove reset pages icon
$('.js__file-uploader').addClass('hidden');
$('.js__button-clear-media-cache').removeClass('hidden');
delete filters['page'];
filterFiles();
});
/* handle infinite loading */
var enableInfiniteScrolling = function enableInfiniteScrolling() {
$('.spinning-wheel').hide();
var view = $('.mediapicker-scroll').last();
if (!view.length) { return; }
$(view).on('scroll', function() {
if (($(this).scrollTop() + $(this).innerHeight() + 100) >= $(this)[0].scrollHeight) {
fillView();
}
});
};
var loadNextBatch = function loadNextBatch(callback) {
if (files_ended) {
return;
}
loadMedia({}, function(content) {
if (!$(content).length || ((content.split('card-item').length - 1) < MEDIA_PAGINATION_INTERVAL)) {
files_ended = true;
} else {
if (callback) {
callback();
}
}
$('.media-container .media-range').trigger('input');
});
};
var fillView = function fillView() {
if (!$('.js__files').find('.card-item').last().offset()) {
setTimeout(function() {
// retry later
fillView();
}, 300);
return;
}
if ($('.js__files').find('.card-item').last().offset().top - 1 <= $('.media-container').height()) {
loadNextBatch(function() {
fillView();
});
}
};
/* disable infinite loading */
var disableInfiniteScrolling = function disableInfiniteScrolling() {
$('.spinning-wheel').hide();
$('.content-wrapper').unbind('scroll');
};
$('.js__files').on('fillView', function(event) {
// the first batch got the max number of media files, try loading more
if (($('.js__files')[0].innerHTML.split('card-item').length - 1) === MEDIA_PAGINATION_INTERVAL) {
fillView();
enableInfiniteScrolling();
}
});