import $ from 'jquery'; import Cookies from '../../utils/cookies.js'; import request from '../../utils/request'; import FilesField, { UriToMarkdown } from '../../forms/fields/files'; import { config, translations } from 'grav-config'; import { Instance as Editor } from '../../forms/fields/editor'; import Sortable from 'sortablejs'; const previewTemplate = `
${translations.PLUGIN_ADMIN.DELETE} ${translations.PLUGIN_ADMIN.METADATA} ${translations.PLUGIN_ADMIN.VIEW} ${translations.PLUGIN_ADMIN.INSERT}
`.trim(); export default class PageMedia extends FilesField { constructor({ container = '#grav-dropzone', options = {} } = {}) { options = Object.assign(options, { previewTemplate }); super({ container, options }); if (!this.container.length) { return; } this.urls = { fetch: `${this.container.data('media-url')}/task${config.param_sep}listmedia`, add: `${this.container.data('media-url')}/task${config.param_sep}addmedia`, delete: `${this.container.data('media-url')}/task${config.param_sep}delmedia` }; this.dropzone.options.url = this.urls.add; if (typeof this.options.fetchMedia === 'undefined' || this.options.fetchMedia) { this.fetchMedia(); } if (typeof this.options.attachDragDrop === 'undefined' || this.options.attachDragDrop) { this.attachDragDrop(); } const field = $(`[name="${this.container.data('dropzone-field')}"]`); if (field.length) { this.sortable = new Sortable(this.container.get(0), { animation: 150, // forceFallback: true, setData: (dataTransfer, target) => { target = $(target); let uri = encodeURI(target.find('.dz-filename').text()); let shortcode = UriToMarkdown(uri); this.dropzone.disable(); target.addClass('hide-backface'); dataTransfer.effectAllowed = 'copy'; dataTransfer.setData('text', shortcode); }, onSort: () => { let names = []; this.container.find('[data-dz-name]').each((index, file) => { file = $(file); const name = file.text().trim(); names.push(name); }); field.val(names.join(',')); } }); } } fetchMedia() { const order = this.container.closest('.form-field').find('[name="data[header][media_order]"]').val(); const body = { uri: this.getURI(), order }; let url = this.urls.fetch; request(url, { method: 'post', body }, (response) => { let results = response.results; Object.keys(results).forEach((name) => { let data = results[name]; let mock = { name, size: data.size, accepted: true, extras: data }; this.dropzone.files.push(mock); this.dropzone.options.addedfile.call(this.dropzone, mock); this.dropzone.options.thumbnail.call(this.dropzone, mock, data.url); }); this.updateThumbsSize(); this.container.find('.dz-preview').prop('draggable', 'true'); }); } onDropzoneSending(file, xhr, formData) { /* // Cannot call super because Safari and IE API don't implement `delete` super.onDropzoneSending(file, xhr, formData); formData.delete('task'); */ formData.append('name', this.options.dotNotation || file.name); formData.append('admin-nonce', config.admin_nonce); formData.append('uri', this.getURI()); } onDropzoneComplete(file) { super.onDropzoneComplete(file); if (this.sortable) { this.sortable.options.onSort(); } // accepted this.updateThumbsSize(); this.updateMediaCount(); $('.dz-preview').prop('draggable', 'true'); } onDropzoneAddedFile(file, ...extra) { super.onDropzoneAddedFile(file, extra); this.updateThumbsSize(); } onDropzoneRemovedFile(file, ...extra) { super.onDropzoneRemovedFile(file, ...extra); this.updateMediaCount(); if (this.sortable) { this.sortable.options.onSort(); } } updateThumbsSize() { const status = JSON.parse(Cookies.get('grav-admin-pagemedia') || '{}'); if (status.width) { const input = this.container.closest('.pagemedia-field').find('.media-resizer'); updateMediaSizes(input, status.width, false); } } updateMediaCount() { const element = this.container.closest('.pagemedia-field').find('[data-pagemedia-count]'); element.text(`(${this.dropzone.files.length})`); } attachDragDrop() { this.container.delegate('[data-dz-insert]', 'click', (e) => { let target = $(e.currentTarget).parent('.dz-preview').find('.dz-filename'); let editor = Editor.editors.filter((index, editor) => $(editor).attr('name') === 'data[content]'); if (editor.length) { editor = editor.data('codemirror'); editor.focus(); let filename = encodeURI(target.text()); let shortcode = UriToMarkdown(filename); editor.doc.replaceSelection(shortcode); } }); this.container.delegate('[data-dz-view]', 'mouseenter', (e) => { let target = $(e.currentTarget); let file = target.parent('.dz-preview').find('.dz-filename'); let filename = encodeURI(file.text()); let URL = target.closest('[data-media-path]').data('media-path'); let original = this.dropzone.files.filter((file) => encodeURI(file.name) === filename).shift(); original = original && ((original.extras && original.extras.original) || encodeURI(original.name)); target.attr('href', `${URL}/${original}`); }); this.container.delegate('[data-dz-metadata]', 'click', (e) => { e.preventDefault(); const target = $(e.currentTarget); const file = target.parent('.dz-preview').find('.dz-filename'); const filename = encodeURI(file.text()); const cleanName = file.text().replace('<', '<').replace('>', '>'); let fileObj = this.dropzone.files.filter((file) => file.name === global.decodeURI(filename)).shift() || {}; if (!fileObj.extras) { fileObj.extras = { metadata: [] }; } if (Array.isArray(fileObj.extras.metadata) && !fileObj.extras.metadata.length) { fileObj.extras.metadata = { '': `${cleanName}.meta.yaml doesn't exist` }; } fileObj = fileObj.extras; const modal_element = $('body').find('[data-remodal-id="metadata"]'); const modal = $.remodal.lookup[modal_element.data('remodal')]; modal_element.find('h1 strong').html(cleanName); if (fileObj.url) { modal_element.find('.meta-preview').html(``); } const container = modal_element.find('.meta-content').html('